:root{font-family:Inter,'Segoe UI',Arial,sans-serif;color:#253851;background:#f3f6fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 5% 35%,#eaf3ff,transparent 40%),radial-gradient(ellipse at 100% 60%,#f1ecff,transparent 40%),#f5f7fc}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible{outline:3px solid #2f7def;outline-offset:4px}[hidden]{display:none!important}header{height:74px;background:#ffffffdd;border-bottom:1px solid #e4eaf3;display:flex;align-items:center;justify-content:space-between;padding:0 max(25px,calc((100vw - 1350px)/2));gap:15px}.brand{display:flex;align-items:center;gap:12px}.brand span{display:block;font-weight:800;letter-spacing:.15em;font-size:9px;color:#8093b0;margin-bottom:5px}.brand strong{font-size:16px;letter-spacing:-.03em}.header-actions{display:flex;gap:10px;align-items:center}.class-tag{background:#f0f5ff;border:1px solid #dce8fd;color:#678abd;padding:8px 13px;border-radius:8px;font-size:10px;font-weight:800;letter-spacing:.08em}.icon-button{height:36px;width:36px;border:1px solid #dce5f0;border-radius:10px;background:#fff;color:#67829e;font-size:25px}.fullscreen{display:flex;align-items:center;gap:6px;border:0;border-radius:10px;background:#3779eb;color:white;font-size:18px;padding:8px 12px;box-shadow:0 5px 16px #347be735}.fullscreen span{font-size:11px;font-weight:700}.fullscreen:hover{background:#2465d6}main{max-width:1400px;margin:auto;padding:22px 25px 15px}.heading{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:21px}.eyebrow{font-size:9px;font-weight:800;letter-spacing:.17em;color:#4481cf}h1{font-size:clamp(22px,2.45vw,33px);font-weight:750;letter-spacing:-.045em;line-height:1.2;margin:7px 0 6px}.heading p{font-size:13px;color:#8293ab;margin:0}.journey{min-width:330px}.journey-top{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;margin-bottom:13px}.journey-top strong{color:#4073b9}.journey-top>span{color:#8b9bb0;font-size:10px}.step-track{display:flex;align-items:center;gap:8px}.step-track>span{display:flex;gap:7px;align-items:center;color:#a1aec1;font-size:10px;font-weight:800}.step-track small{font-size:10px;font-weight:600}.step-track>span.active{color:#397de2}.step-track>span.done{color:#1ea58c}.step-track i{height:2px;background:#dce5f2;flex:1}.section-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:10px}.section-top h2{font-size:13px;letter-spacing:-.02em;margin:0;color:#3c526f}.section-top>span{font-size:10px;color:#8b9ab0}.sample-tray{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}.sample-card{position:relative;border:1px solid #e1e7f2;border-bottom:3px solid #d8e3f1;background:linear-gradient(160deg,#fff,#f8faff);border-radius:13px;text-align:center;color:#304664;padding:6px 8px 10px;box-shadow:0 6px 14px #59729b0b;transition:transform .18s,box-shadow .18s,border-color .18s;min-width:0;user-select:none}.sample-preview{display:block;height:56px}.sample-preview img{width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 6px 4px #50638019)}.sample-card strong{display:block;font-size:19px;font-weight:750;letter-spacing:-.04em;line-height:1.2}.sample-card small{display:block;font-size:9px;margin-top:4px;color:#899bb5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sample-card:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 13px 20px #5684c322;border-color:#9cbeef}.sample-card.selected{border-color:#78a8f1;border-bottom-color:#3c7be2;background:linear-gradient(150deg,#fff,#eaf3ff);box-shadow:0 0 0 2px #4b8ded1a,0 9px 18px #5283d31a}.sample-check{position:absolute;right:7px;top:6px;width:16px;height:16px;border-radius:50%;background:#d9f4eb;color:#24a282;font-size:13px;font-weight:800}.sample-card.placed{opacity:.42;filter:grayscale(.3);box-shadow:none}.being-dragged{opacity:.45}.sample-card[draggable=true]{cursor:grab}.lab-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;margin-top:18px}.viewer-card,.analysis-card{background:white;border:1px solid #e1e7f2;border-radius:20px;overflow:hidden;box-shadow:0 9px 29px #39567e0b}.viewer-head{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:20px 23px 0}.panel-kicker{font-size:8px;font-weight:800;color:#8b9bb3;letter-spacing:.16em}.viewer-head h2,.analysis-heading h2{font-size:17px;letter-spacing:-.035em;margin:5px 0 0}.model-badge{font-size:9px;font-weight:600;color:#7598c6;background:#f0f6ff;border:1px solid #e1edfc;border-radius:20px;padding:7px 10px}.model-stage{height:320px;position:relative;overflow:hidden;touch-action:none;user-select:none;cursor:grab;background:radial-gradient(ellipse at 50% 45%,#e1edff77,transparent 59%)}.model-stage.dragging{cursor:grabbing}.stage-grid{position:absolute;bottom:6px;left:15%;right:15%;height:87px;transform:perspective(160px) rotateX(52deg);background-image:linear-gradient(#bad0ed4d 1px,transparent 1px),linear-gradient(90deg,#bad0ed4d 1px,transparent 1px);background-size:22px 22px;mask-image:radial-gradient(ellipse,#000,transparent 70%);pointer-events:none}.stage-corner{position:absolute;bottom:20px;left:23px;font-size:8px;color:#b2bfd2;letter-spacing:.14em;pointer-events:none}.bonds,.atom-layer{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}.bonds{z-index:1;filter:drop-shadow(0 5px 4px #6b7f9d20)}.atom{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0;transform:translate(-50%,-50%);background:radial-gradient(circle at 30% 23%,var(--atom-light),var(--atom-color) 43%,var(--atom-dark));border:1px solid #ffffff55;color:#fff;font-weight:750;text-shadow:0 1px 3px #0006;box-shadow:inset -7px -9px 15px #0002,inset 4px 5px 10px #fff3,5px 13px 14px #4a638b30;pointer-events:auto;transition:box-shadow .2s,opacity .2s;cursor:pointer;will-change:left,top}.atom:after{content:'';position:absolute;top:13%;left:22%;width:26%;height:12%;border-radius:50%;transform:rotate(-35deg);background:#ffffff82;filter:blur(2px);pointer-events:none}.atom[data-element=H]{color:#50617a;text-shadow:0 1px #fff8}.atom[data-element=S]{color:#70500c;text-shadow:0 1px #fffa}.atom.highlight{outline:3px solid #3c8bff;outline-offset:4px;box-shadow:0 0 0 9px #559bff17,0 0 30px #91b9f84a,5px 13px 14px #4a638b30}.atom.faded{opacity:.48}.atom:hover{filter:brightness(1.07)}.atom:focus-visible{outline:3px solid #164fc2;outline-offset:5px}.empty-model{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;color:#7f96b5}.empty-model strong{font-size:14px;color:#5a789d;font-weight:650}.empty-model>span{font-size:11px}.empty-orb{width:78px;height:78px;border-radius:50%;background:radial-gradient(circle at 30% 23%,#fff,#a8cdff 45%,#447cce);box-shadow:inset -7px -9px 15px #2460b238,0 15px 25px #709dd742;margin-bottom:15px;position:relative}.empty-orb:before,.empty-orb:after{content:'';position:absolute;width:43px;height:43px;border-radius:50%;background:radial-gradient(circle at 30% 23%,#fff,#dce9f7 40%,#8d9eb6);box-shadow:0 9px 15px #6983a32b;top:50px;left:-29px}.empty-orb:after{left:66px}.model-toolbar{display:flex;justify-content:space-between;gap:15px;align-items:center;border-top:1px solid #f0f3f8;padding:12px 21px;background:#fcfdff}.gesture-hint{font-size:10px;color:#99a7bb}.model-controls{display:flex;gap:5px;align-items:center}.model-controls button{width:31px;height:30px;border:1px solid #dfe7f2;background:white;border-radius:7px;color:#7792b6;font-size:18px;line-height:1}.model-controls button:hover:not(:disabled){background:#eaf3ff;color:#306fcd;border-color:#a8cbf7}.model-controls button:disabled{opacity:.4}.model-controls button[aria-pressed=true]{background:#e6f0ff;color:#2467d0;border-color:#adcef6}.model-controls>span{width:1px;height:18px;background:#e3eaf4;margin:0 3px}.analysis-card{padding:20px;background:linear-gradient(160deg,#fff,#f8faff)}.analysis-heading h2{font-size:15px}.formula-display{display:flex;align-items:baseline;justify-content:center;position:relative;min-height:68px;margin:17px 0 13px;padding-bottom:16px}.formula-display>small{position:absolute;bottom:0;color:#9babc0;font-size:9px;font-weight:500}.formula-part{background:transparent;border:0;border-bottom:2px solid transparent;color:#314e72;padding:1px;font-size:32px;letter-spacing:-.055em;font-weight:750;border-radius:4px}.formula-part sub{font-size:17px}.formula-part:hover,.formula-part.chosen{background:#e9f2ff;border-bottom-color:#79a8ed;color:#2464bf}.mystery-formula{color:#9cafcc;font-size:38px;font-weight:700}.atom-readout{display:flex;align-items:center;gap:9px;min-height:47px;border:1px dashed #dce5f3;background:#f8faff;border-radius:10px;padding:8px 10px;font-size:10px;color:#8a9bb5}.atom-readout.is-active{border-style:solid;background:#eff6ff;border-color:#d8e8fc}.atom-readout b{display:block;color:#496d99;font-size:11px}.atom-readout small{display:block;font-size:9px;margin-top:3px;color:#8d9db5}.element-token{border-radius:50%;width:29px;height:29px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--token);box-shadow:inset -2px -3px 6px #0002;color:#fff;text-shadow:0 1px 2px #0006;font-size:11px;font-weight:700}.tap-dot{width:9px;height:9px;border-radius:50%;background:#b5cee9;box-shadow:0 0 0 4px #eaf2fc;margin:0 5px}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.metrics>div{background:white;border:1px solid #e8edf5;border-radius:10px;padding:11px 9px;text-align:center}.metrics span{font-size:9px;color:#8d9db5;display:block}.metrics b{display:block;font-size:24px;font-weight:650;color:#3e6fad;line-height:1.1;margin-top:5px}.lattice-note{font-size:10px;line-height:1.6;color:#7c8ca4;margin:0 0 10px}.classification{font-size:12px;font-weight:700;text-align:center;border-radius:9px;padding:11px 5px;background:#f0f3f9;color:#9ba9be}.classification.simple{background:#e1f5ed;color:#278e72;border:1px solid #c7eada}.classification.compound{background:#eee9fc;color:#8062b6;border:1px solid #e0d5f7}.classification.pending{font-size:10px;font-weight:500}.rule{display:flex;align-items:flex-start;gap:9px;border-top:1px solid #e8edf5;margin-top:17px;padding-top:14px;color:#8b9eb7;font-size:9px}.rule-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid #b9c8db;border-radius:50%;font-size:10px;flex-shrink:0}.rule b{font-size:10px;color:#6e85a6;font-weight:650}.rule p{line-height:1.7;margin:4px 0 0}.inspector-empty{min-height:239px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:10px;padding:15px}.empty-symbol{width:65px;height:65px;display:flex;align-items:center;justify-content:center;border-radius:17px;background:linear-gradient(135deg,#ecf4ff,#ddeafd);border:1px solid #d4e5ff;color:#86ade2;font-size:35px;box-shadow:0 10px 20px #6698c91a}.inspector-empty strong{font-size:12px;line-height:1.5;color:#627e9f}.inspector-empty p{font-size:10px;line-height:1.7;color:#95a5ba;margin:0}.sort-section{margin-top:21px}.bins{display:grid;grid-template-columns:1fr 1fr;gap:18px}.bin{position:relative;min-height:130px;overflow:hidden;background:linear-gradient(150deg,#f2fbf8b8,#e4f3f077);border:1px solid #cce6df;border-top:3px solid #8dd0bf;border-radius:15px;padding:15px 18px;text-align:left;box-shadow:inset 0 0 0 5px #ffffff80,0 9px 22px #427f7010;transition:transform .2s,box-shadow .2s,border .2s}.bin.compound{background:linear-gradient(150deg,#f7f4ffbb,#ede8fa88);border-color:#e0d5f2;border-top-color:#bfabe4}.bin-top{display:flex;align-items:center;gap:10px}.bin-icon{width:31px;height:31px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:#daf0e8;color:#69a591;font-size:10px;font-weight:800;border:1px solid #cae5db}.compound .bin-icon{background:#eae2f8;color:#a18abf;border-color:#ddd0ee}.bin-top strong{display:block;font-size:13px;font-weight:700;color:#4a8473}.compound .bin-top strong{color:#8870a7}.bin-top small{font-size:9px;color:#8cac9f;display:block;margin-top:3px}.compound .bin-top small{color:#a596b7}.bin-count{margin-left:auto;background:#fff9;border:1px solid #d5e9e2;border-radius:20px;padding:4px 8px;color:#78a593;font-size:9px;white-space:nowrap}.compound .bin-count{border-color:#e4dbee;color:#a08db5}.bin-content{min-height:53px;display:flex;align-items:center;justify-content:center;gap:15px}.bin-placeholder{font-size:10px;color:#8baa9e}.compound .bin-placeholder{color:#a596b5}.bin:hover:not(:disabled),.bin.drag-over{border-color:#58b49d;box-shadow:inset 0 0 0 5px #ffffff90,0 10px 28px #49a38b28;transform:translateY(-2px)}.bin.compound:hover:not(:disabled),.bin.compound.drag-over{border-color:#a98bd3}.placed-molecule{display:flex;align-items:center;justify-content:center;flex-direction:column;width:62px;animation:snap .25s ease-out}.placed-molecule img{width:65px;height:41px}.placed-molecule b{font-size:11px;color:#537d71}.compound .placed-molecule b{color:#88769f}@keyframes snap{from{opacity:0;transform:translateY(-14px) scale(.85)}to{opacity:1;transform:none}}.taskbar{position:sticky;bottom:10px;z-index:200;display:flex;justify-content:space-between;align-items:center;gap:18px;background:#ffffffed;border:1px solid #dfe8f5;border-radius:15px;margin-top:19px;padding:15px 18px;box-shadow:0 8px 35px #526f9d20;backdrop-filter:blur(12px)}.task-message{display:flex;gap:11px;align-items:center}.task-number{display:flex;align-items:center;justify-content:center;width:31px;height:31px;border:1px solid #c7dbfa;background:#eaf2ff;color:#4d83c9;border-radius:10px;font-size:12px;font-weight:800;flex-shrink:0}.task-message strong{display:block;font-size:12px;color:#4d6688}.task-message p{margin:5px 0 0;color:#8da0ba;font-size:10px;line-height:1.4}.task-message p.bad{color:#cd7380}.next-button{background:linear-gradient(130deg,#4988ed,#2b6ed7);border:1px solid #3976d3;border-radius:9px;box-shadow:0 5px 12px #397bdd24;color:white;padding:11px 16px;font-size:11px;font-weight:700;white-space:nowrap;transition:transform .15s,box-shadow .15s}.next-button>span{margin-left:15px;font-size:16px}.next-button:disabled{background:#eff3f9;color:#a4b4c9;border-color:#e2e9f3;box-shadow:none}.next-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #397bdd42}.challenge-actions{display:flex;gap:7px}.challenge-actions button{border:1px solid #b7dece;background:#e5f5ed;color:#398f74;border-radius:9px;padding:11px 17px;font-size:12px;font-weight:750}.challenge-actions button+button{border-color:#d6c4ee;background:#f0e9fb;color:#8a65b5}.challenge-actions button:disabled{opacity:.35}.unknown-tray{grid-template-columns:repeat(3,minmax(0,1fr))}.unknown-card{padding:16px 20px;border:1px solid #e2e8f4;border-radius:13px;background:white;display:flex;align-items:center;gap:12px}.unknown-card>span{width:35px;height:35px;display:flex;align-items:center;justify-content:center;background:#f0f3fa;color:#adbbcf;border-radius:11px;font-size:14px;font-weight:700}.unknown-card b{font-size:12px;color:#9aabc0;display:block}.unknown-card small{display:block;font-size:9px;color:#b0bed0;margin-top:4px}.unknown-card.active{background:#f0f6ff;border-color:#abc8ef}.unknown-card.active>span{background:#dceaff;color:#5685c3}.unknown-card.active b{color:#547eb5}.unknown-card.solved{border-color:#c4e3d7;background:#f1faf6}.unknown-card.solved>span{background:#d9f0e5;color:#50a382}.stage-2 .model-stage{height:245px}.stage-2 .analysis-card{padding-top:16px}.stage-2 .formula-display{margin-top:10px;margin-bottom:7px;min-height:53px}.stage-2 .metrics{margin:8px 0}.stage-2 .metrics>div{padding:6px}.stage-2 .rule{margin-top:10px;padding-top:9px}.stage-3 .model-stage{height:370px}.returning{animation:return .35s ease}@keyframes return{25%{transform:translateX(-6px)}55%{transform:translateX(5px)}80%{transform:translateX(-2px)}}footer{display:flex;justify-content:space-between;padding:18px 2px 5px;color:#a5b0c2;font-size:9px}footer i{font-style:normal;color:#b2c6e1;margin:0 6px}dialog{border:1px solid #dbe6f5;border-radius:22px;padding:30px;max-width:420px;box-shadow:0 30px 100px #1531513d;text-align:center;color:#365575}dialog::backdrop{background:#182c4b55;backdrop-filter:blur(5px)}dialog h2{font-size:20px;margin:10px 0}dialog p{font-size:12px;color:#8b9db4;line-height:1.6}dialog>div:last-child{display:flex;gap:10px;justify-content:center;margin-top:20px}.secondary{border:1px solid #d9e5f5;background:#f4f8ff;color:#7290b5;border-radius:9px;padding:11px 15px;font-size:11px}.result-label{font-size:9px;letter-spacing:.15em;font-weight:750;color:#8aa2c0}.result-symbol{font-size:70px;font-weight:750;letter-spacing:-.08em;color:#4382d9;margin-top:20px}.result-symbol span{font-size:26px;color:#bdd2ef;letter-spacing:-.03em}.result-rule{display:flex;flex-direction:column;gap:8px;background:#f1f7ff;border-radius:12px;padding:15px;font-size:11px;color:#6d91ba;margin:20px 0}#resultDialog>.next-button{margin-left:6px}@media(max-width:1000px){header{padding:0 22px}.lab-layout{grid-template-columns:minmax(0,1fr) 280px;gap:14px}.model-toolbar{flex-wrap:wrap;justify-content:center;gap:7px;padding:9px}.gesture-hint{font-size:9px}.sample-tray{gap:7px}.sample-card{padding-left:4px;padding-right:4px}.heading h1{font-size:25px}.journey{min-width:290px}.model-badge{display:none}.taskbar{gap:10px}.task-message strong{font-size:11px}.next-button{padding:10px 12px}.challenge-actions button{padding:10px}}@media(max-width:760px){header{height:66px;padding:0 14px}.brand img{width:34px;height:34px}.brand strong{font-size:12px}.brand span{font-size:7px}.class-tag{display:none}.fullscreen span{display:none}.fullscreen{padding:7px 11px}.header-actions{gap:6px}main{padding:20px 14px 12px}.heading{display:block;margin-bottom:19px}.heading h1{font-size:26px}.heading p{font-size:11px}.journey{margin-top:20px;min-width:0}.section-top>span{max-width:48%;font-size:9px;text-align:right}.section-top h2{font-size:12px}.sample-tray{display:flex;overflow-x:auto;padding:2px 1px 10px;gap:8px;scrollbar-width:thin;scrollbar-color:#c6d5e9 transparent}.sample-card{width:102px;min-width:102px}.lab-layout{display:flex;flex-direction:column;gap:12px;margin-top:10px}.viewer-head{padding:16px 17px 0}.model-stage{height:310px}.stage-2 .model-stage{height:270px}.stage-3 .model-stage{height:330px}.analysis-card{padding:17px}.analysis-heading h2{font-size:14px}.formula-display{margin:10px 0;min-height:55px}.metrics{margin:10px 0}.metrics>div{padding:8px}.metrics b{font-size:22px}.rule{margin-top:13px;padding-top:12px}.inspector-empty{min-height:130px;padding:10px}.empty-symbol{width:43px;height:43px;font-size:26px}.bins{gap:10px}.bin{padding:12px 10px;min-height:155px}.bin-top{gap:6px;flex-wrap:wrap}.bin-icon{display:none}.bin-top strong{font-size:12px}.bin-top small{font-size:8px}.bin-count{font-size:8px;margin-left:0}.bin-content{flex-wrap:wrap;gap:2px;margin-top:9px;min-height:65px}.placed-molecule{width:52px}.placed-molecule img{width:53px}.bin-placeholder{text-align:center;font-size:9px;line-height:1.5}.taskbar{bottom:6px;flex-wrap:wrap;padding:13px;gap:10px}.task-message{width:100%;gap:8px}.task-message strong{font-size:11px}.task-message p{font-size:10px}.next-button{margin-left:auto}.taskbar>.next-button{min-width:145px}.challenge-actions{flex:1}.challenge-actions button{font-size:11px;padding:10px 12px}.unknown-tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:7px;padding:0}.unknown-card{padding:10px 8px;display:block;text-align:center}.unknown-card>span{margin:0 auto 7px;width:29px;height:29px;font-size:11px}.unknown-card b{font-size:9px}.unknown-card small{display:none}footer{display:block;line-height:1.9}footer span{display:block}dialog{width:calc(100% - 35px);padding:25px 20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:760px){.taskbar{position:static}}