:root { font-family:Tahoma,Arial,sans-serif; color:#eff7ff; background:#07111f } * { box-sizing:border-box } body { margin:0; min-width:320px; background:radial-gradient(circle at 80% 0,#173d60,transparent 40rem),#07111f } .app-shell { height:100vh; min-height:700px; display:grid; grid-template-rows:1fr 1fr } .workspace,.periodic-panel { min-height:0; padding:clamp(1rem,2.5vw,2rem) clamp(1rem,5vw,4rem) } .workspace { display:flex; flex-direction:column; border-bottom:1px solid rgba(174,222,255,.2) } .workspace-header,.periodic-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem } .eyebrow { margin:0 0 .3rem; color:#7edcff; letter-spacing:.14em; font-family:Arial,sans-serif; font-size:.7rem; font-weight:bold } h1,h2 { margin:0; font-size:clamp(1.35rem,2.4vw,2rem) } .status { display:inline-flex; align-items:center; gap:.45rem; color:#b9cee0; font-size:.8rem } .status span { width:.5rem; height:.5rem; border-radius:50%; background:#83efad; box-shadow:0 0 12px #83efad }.reaction-hints { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; margin-top:.7rem; color:#abc3d5; font-size:.72rem }.hint-copy { color:#91a8ba }.condition-source { border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:.35rem .6rem; color:#f6fbff; background:#364c7b; cursor:grab; font:inherit }.condition-source[data-condition="moisture"] { background:#23647b }.workspace-canvas { position:relative; flex:1; margin-top:1rem; overflow:hidden; border:1px dashed rgba(126,220,255,.25); border-radius:18px; color:#7491ac; background:rgba(5,18,32,.35) } .canvas-prompt { position:absolute; inset:0; display:grid; place-items:center; margin:0; padding:1rem; text-align:center; pointer-events:none }.workspace-canvas.has-items .canvas-prompt { display:none }.atom-ball,.condition-token { position:absolute; display:grid; place-items:center; width:64px; height:64px; border:2px solid rgba(255,255,255,.58); border-radius:50%; color:white; cursor:grab; user-select:none; box-shadow:0 8px 18px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.45); font:700 1.1rem Arial,sans-serif; direction:ltr; touch-action:none }.atom-ball { background:radial-gradient(circle at 30% 25%,#6ee3ff,#24627a 68%) }.condition-token { background:radial-gradient(circle at 30% 25%,#c2e9ff,#3c6792 68%); font-size:1.7rem }.condition-token .condition-label { position:absolute; top:calc(100% + 5px); color:#d9e8f5; font:500 .65rem Tahoma,Arial,sans-serif; direction:rtl; white-space:nowrap }.atom-ball:active,.condition-token:active { cursor:grabbing }.ball-formula { line-height:1 }.ball-label { position:absolute; top:calc(100% + 6px); left:50%; min-width:max-content; transform:translateX(-50%); direction:rtl; color:#d9e8f5; font:500 .68rem Tahoma,Arial,sans-serif; text-shadow:0 1px 3px #07111f; pointer-events:none }.atom-ball.molecule { width:74px; height:74px; background:radial-gradient(circle at 30% 25%,#cf94ff,#6f3e9a 68%); font-size:1rem }.trash-bin { position:absolute; left:1rem; bottom:1rem; display:grid; place-items:center; width:58px; height:58px; border:1px solid rgba(255,255,255,.25); border-radius:14px; color:#f1c8d1; background:rgba(118,38,55,.7); font-size:1.45rem; pointer-events:none }.trash-bin span { font-size:.62rem; font-family:Tahoma,Arial,sans-serif }.periodic-panel { overflow:auto; background:rgba(2,11,22,.28) }.periodic-heading p { margin:0; color:#91a8ba; font-size:.82rem }.periodic-table { direction:ltr; display:grid; grid-template-columns:repeat(18,minmax(34px,1fr)); gap:4px; margin-top:1rem; min-width:720px }.element { position:relative; min-height:clamp(36px,4.3vh,62px); padding:4px; border:1px solid rgba(255,255,255,.13); border-radius:7px; color:#f7fbff; text-align:left; cursor:grab; background:#24605f; transition:transform .15s,filter .15s }.element:hover,.element:focus { transform:translateY(-2px); filter:brightness(1.22); outline:none }.number { display:block; color:#b9d5e8; font-size:.55rem }.symbol { display:block; font-size:clamp(.8rem,1.5vw,1.15rem); font-weight:bold; line-height:1.2 }.name { display:block; overflow:hidden; color:#cadbe9; font-size:.52rem; text-overflow:ellipsis; white-space:nowrap }.element:nth-child(8n+1){background:#783846}.element:nth-child(7n+3){background:#43578c}.element:nth-child(6n+4){background:#70475b}.element-detail { margin-top:.8rem; color:#c8dbe9; font-size:.85rem; min-height:1.2em } @media(max-width:760px){.app-shell{min-height:850px}.periodic-heading{align-items:flex-end}.periodic-heading p{max-width:10rem;text-align:left}}