:root{font-family:Trebuchet MS,Avenir Next,sans-serif;color:#334265;background:radial-gradient(circle at top,rgba(255,255,255,.56),transparent 24%),linear-gradient(180deg,#d5ecef,#d5ecef);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--ink: #334265;--ink-soft: #6e7796;--accent: #2b3468;--teal: #15c8c5;--drop-shadow: 0 8px 0 rgba(43, 52, 104, .1)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button{font:inherit;cursor:pointer}#root,.app-shell,.lesson-stage{min-height:100vh}.lesson-stage{position:relative;overflow:hidden;background:radial-gradient(circle at 10% 20%,rgba(255,255,255,.55),transparent 18%),linear-gradient(180deg,#d5ecef,#d5ecef)}.hint-bubble,.nav-button,.periodic-tile,.label-drop-zone,.label-tray-card,.region-piece,.aufbau-drop-zone,.placeholder-card{box-shadow:var(--drop-shadow)}.hint-bubble{position:absolute;top:1.7rem;left:50%;transform:translate(-50%);z-index:3;width:min(34rem,calc(100vw - 8rem));border-radius:1.35rem;background:#fffffff5;border:1px solid rgba(43,52,104,.12);padding:1rem 1.4rem;text-align:center;color:var(--accent)}.progress-dots{position:absolute;left:1.6rem;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:.8rem}.progress-dot{width:1.15rem;height:1.15rem;border-radius:999px;border:3px solid transparent;background:#2b346824}.progress-dot.active{background:#fff;border-color:var(--accent)}.progress-dot.complete{background:var(--accent)}.nav-controls{position:absolute;right:1.5rem;top:50%;z-index:2;display:flex;flex-direction:column;gap:1rem;transform:translateY(-50%)}.nav-button{width:4.6rem;height:4.6rem;border:0;border-radius:1.5rem;font-size:2rem;line-height:1;box-shadow:0 6px #2f23651f}.nav-button.primary{background:linear-gradient(180deg,#16d4d1,#12bebc);color:#fff}.nav-button.secondary{background:#fffffff2;color:#26196a}.nav-button:disabled{cursor:not-allowed;opacity:.35}.pages-window{height:100vh;overflow:hidden}.pages-track{height:300vh;transition:transform .42s cubic-bezier(.2,.88,.2,1)}.lesson-page{min-height:100vh;height:100vh;padding:7rem 5.5rem 3.6rem;display:flex;flex-direction:column;gap:1.6rem;overflow:auto}.lesson-page-top{align-items:center}.page-copy{text-align:center}.eyebrow{margin:0 0 .6rem;font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#7a7fab}.page-copy h1,.page-copy h2,.placeholder-card h2{margin:0;color:var(--ink)}.page-copy h1{font-size:clamp(2.8rem,5vw,4rem)}.page-copy h2,.placeholder-card h2{font-size:clamp(2rem,4vw,3rem)}.subcopy,.placeholder-card p{margin:.8rem 0 0;color:var(--ink-soft);font-size:1.06rem}.labeling-layout,.aufbau-layout{position:relative;min-height:calc(100vh - 14rem);width:min(95rem,100%);display:grid;gap:1.2rem}.page-two{padding-top:3.25rem;gap:.9rem}.page-two .source-stage{position:absolute;top:0;right:-5rem;z-index:5;width:min(42.5rem,50vw);padding:.72rem;border-radius:1.35rem;background:#f9ffff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.page-two .source-stage .stage-label{margin-bottom:.45rem;font-size:.78rem}.page-two .target-stage{min-height:calc(100vh - 14rem);padding-top:0;background:transparent;border-color:transparent;box-shadow:none}.labeling-layout{grid-template-columns:minmax(0,1fr) 19rem}.board-wrap,.source-stage,.target-stage,.placeholder-card{padding:1.05rem;border-radius:1.9rem;background:#ffffff57;border:1px solid rgba(255,255,255,.42)}.labeling-layout .board-wrap{background:transparent;border-color:transparent;box-shadow:none}.periodic-label-board{display:grid;grid-template-columns:repeat(24,minmax(2.09rem,1fr));grid-template-rows:repeat(10,minmax(2.86rem,auto));gap:.37rem;padding:.5rem;border-radius:1.5rem;background:transparent}.periodic-tile{position:relative;z-index:0;border-radius:.62rem;background:#fffffff2;display:grid;place-items:center;min-height:2.86rem}.periodic-symbol{font-size:clamp(.62rem,.9vw,.92rem);font-weight:700;color:var(--accent)}.label-drop-zone,.aufbau-drop-zone{border:2px solid rgba(43,52,104,.08);border-radius:1rem;background:#ffffff94;display:grid;place-items:center;position:relative;overflow:hidden}.label-drop-zone{min-height:1.25rem;width:3rem;z-index:3;background:#fffffff5;border-radius:.62rem;transform:translate(-.12rem,-.55rem)}.region-outline{z-index:1;pointer-events:none;min-height:100%;min-width:100%;border:3px dashed rgba(43,52,104,.22);border-radius:1.1rem;background:#ffffff0f;margin:-.12rem}.zone-ghost,.drop-zone-label,.source-placeholder{color:#2b34686b;font-weight:700}.zone-ghost{font-size:.58rem}.placed-label{position:absolute;top:.12rem;right:.12rem;bottom:.12rem;left:.12rem;border-radius:.48rem;background:linear-gradient(180deg,#fff,#edf2ff);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.62rem}.label-chip,.placed-label,.piece-label,.drop-zone-label{white-space:nowrap}.label-chip sup,.placed-label sup,.piece-label sup,.drop-zone-label sup{position:relative;top:-.42em;display:inline-block;margin-left:.03em;font-size:.62em;line-height:1;vertical-align:baseline}.label-drop-zone.locked,.aufbau-drop-zone.locked{background:linear-gradient(180deg,#d4f8bf,#b7ef92);border-style:solid}.label-drop-zone.incorrect,.aufbau-drop-zone.incorrect{background:linear-gradient(180deg,#ffe5ea,#ffd0d8);border-style:solid}.label-tray-card{width:19rem;height:36rem;border-radius:1.6rem;background:#fffffff2;padding:1rem;overflow:hidden}.tray-title,.stage-label{margin:0 0 .8rem;font-weight:800;color:var(--accent)}.label-tray{min-height:18rem;display:grid;grid-template-columns:repeat(3,minmax(4.5rem,1fr));align-content:start;gap:.65rem}.label-chip,.label-chip-placeholder,.check-button{border:0;border-radius:1rem}.label-chip,.label-chip-placeholder{min-width:4.5rem;min-height:2.8rem}.label-chip{padding:.8rem .95rem;background:#fff;color:var(--accent);font-weight:800}.label-chip-placeholder{display:block}.label-chip.selected,.region-piece.selected,.placed-label.selected,.placed-piece-shell.selected{outline:3px solid rgba(21,200,197,.38);outline-offset:2px}.check-button{margin-top:1rem;min-height:3rem;padding:0 1.3rem;background:linear-gradient(180deg,#17d0cd,#0dbab6);color:#fff;font-weight:800}.label-tray-card .check-button{display:block;margin:1rem auto 0}.feedback-note,.placeholder-note{margin:.9rem 0 0;color:var(--ink-soft)}.feedback-note.success{color:#3d8240;font-weight:700}.source-region-board{display:grid;grid-template-columns:repeat(18,minmax(1.0625rem,1fr));grid-template-rows:repeat(10,minmax(1.35rem,auto));gap:.175rem;position:relative;padding:.25rem;border-radius:.9rem;background:#fff3}.source-element-face{position:relative;z-index:1;min-height:1.35rem;border-radius:.35rem;background:#fffffff2;display:grid;place-items:center;color:var(--accent);font-size:clamp(.45rem,.625vw,.7rem);font-weight:700;transition:opacity .16s ease,transform .16s ease}.source-element-face.lifted{opacity:.22;transform:scale(.92)}.source-piece-hitbox{z-index:2;min-height:100%;border:0;border-radius:.5rem;background:transparent;cursor:grab}.source-piece-hitbox:active,.placed-piece-shell:active{cursor:grabbing}.source-piece-hitbox:hover,.source-piece-hitbox.selected{outline:3px dashed rgba(43,52,104,.24);outline-offset:.12rem;background:#ffffff1a}.region-piece,.placed-piece-shell,.drag-piece-preview{width:100%;height:100%;border-radius:1rem;background:#eef7f8db;padding:.35rem .45rem;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.45rem;align-content:center}.region-piece.s-piece,.drag-piece-preview.s-piece{background:linear-gradient(180deg,#b6ef8e75,#fff)}.region-piece.p-piece,.drag-piece-preview.p-piece{background:linear-gradient(180deg,#7cd9ff47,#fff)}.region-piece.d-piece,.drag-piece-preview.d-piece{background:linear-gradient(180deg,#ffe5a057,#fff)}.region-piece.f-piece,.drag-piece-preview.f-piece{background:linear-gradient(180deg,#ffcadc57,#fff)}.placed-piece-shell.s-piece,.placed-piece-shell.p-piece,.placed-piece-shell.d-piece,.placed-piece-shell.f-piece{background:#eef7f8db}.piece-label{font-size:.84rem;font-weight:800;color:var(--accent);justify-self:start;min-width:2.1rem}.piece-symbol-grid{display:grid;grid-template-columns:repeat(var(--piece-columns),minmax(1.35rem,1.85rem));justify-content:center;gap:.28rem;min-width:0}.piece-symbol{min-height:2.15rem;border-radius:.62rem;background:#fffffffa;box-shadow:0 4px #2b346814,inset 0 0 0 1px #2b34680a;display:grid;place-items:center;aspect-ratio:.88;font-size:.72rem;font-weight:700;color:var(--accent)}.placed-piece-shell.s-piece{padding:.25rem;gap:.2rem}.placed-piece-shell.s-piece .piece-label{min-width:1.45rem;font-size:.72rem}.placed-piece-shell.s-piece .piece-symbol-grid{grid-template-columns:repeat(var(--piece-columns),minmax(1.05rem,1.3rem));gap:.12rem}.placed-piece-shell.s-piece .piece-symbol{min-height:1.8rem;border-radius:.5rem;font-size:.62rem}.drag-piece-preview{position:fixed;left:-9999px;top:-9999px;z-index:-1;width:max-content;min-width:8rem;max-width:18rem;height:auto;box-shadow:0 18px 32px #2b34682e;pointer-events:none;opacity:1}.target-stage-header{display:flex;justify-content:flex-start;align-items:center;margin-bottom:.8rem;gap:1rem}.target-stage-header .check-button{margin-top:0}.aufbau-target-board{display:grid;grid-template-columns:repeat(30,minmax(1.35rem,1fr));grid-template-rows:repeat(9,minmax(2.55rem,auto));gap:.5rem}.aufbau-drop-zone{padding:.35rem;justify-items:stretch}.aufbau-drop-zone>.drop-zone-label{justify-self:start;margin-left:.35rem}.placeholder-page{justify-content:center;align-items:center}.placeholder-card{width:min(42rem,100%);background:#fffffff2;text-align:center}.page-three{gap:1rem;align-items:center}.page-three .page-copy h2{font-size:clamp(2rem,4vw,3.3rem)}.orbital-activity{width:min(86rem,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(17rem,22rem);gap:1.2rem;align-items:start}.orbital-diagram-card,.concept-sort-card{border-radius:1.8rem;background:#ffffffeb;box-shadow:var(--drop-shadow);padding:1.25rem}.orbital-problem-tag{display:inline-grid;gap:.15rem;margin-bottom:1rem;padding:.65rem 1rem;border-radius:1rem;background:linear-gradient(180deg,#efffff,#dff5f6);color:var(--accent);font-weight:800}.orbital-problem-tag span{font-size:1.7rem;line-height:1}.orbital-problem-tag small{color:var(--ink-soft);font-weight:700}.orbital-diagram-grid{position:relative;display:grid;grid-template-columns:4rem 12rem 18rem;grid-template-rows:repeat(5,4.6rem);gap:.85rem 1.15rem}.orbital-sublevel{position:relative;z-index:2;display:grid;grid-template-rows:auto 1fr;gap:.25rem;align-content:center}.orbital-sublevel-label{justify-self:center;font-weight:800;color:var(--accent)}.orbital-box-row{display:flex;justify-content:center;gap:.25rem}.orbital-box{width:2rem;height:2rem;border:2px solid rgba(43,52,104,.42);border-radius:.18rem;background:#fffffffa;display:grid;place-items:center;color:var(--accent);font-size:.8rem;font-weight:800}.orbital-box.moveable-orbital{position:relative;z-index:6;cursor:grab}.orbital-box.moveable-orbital:not(.inactive-orbital):hover,.moveable-sublevel:hover,.shell-hotspot:not(.inactive-shell):hover{outline:3px solid rgba(21,200,197,.32);outline-offset:.16rem}.orbital-box.moveable-orbital.selected,.diagram-drag-hotspot.selected,.concept-piece-chip.selected{outline:3px solid rgba(21,200,197,.45);outline-offset:.18rem}.orbital-box.moveable-orbital.inactive-orbital:hover{outline:none}.orbital-sublevel.shell-target{border-radius:1rem}.orbital-sublevel.subshell-target{outline:none}.diagram-drag-hotspot{position:relative;z-index:10;border:0;border-radius:1rem;background:transparent;cursor:grab;align-self:stretch;justify-self:stretch;width:100%;height:100%;min-height:100%;padding:0}.shell-hotspot{outline:none;background:transparent}.shell-hotspot:not(.inactive-shell):hover,.shell-hotspot.selected-shell{outline:3px solid rgba(21,200,197,.34);outline-offset:.16rem;background:transparent}.shell-hotspot.inactive-shell:hover{outline:none}.moveable-sublevel{cursor:grab}.concept-sort-card{display:grid;gap:.9rem}.concept-drop-grid{display:grid;gap:.75rem}.concept-drop-zone{min-height:5.25rem;border:2px solid rgba(43,52,104,.08);border-radius:1.25rem;background:#ffffffd6;box-shadow:var(--drop-shadow);display:grid;gap:.35rem;place-items:center;color:var(--accent)}.concept-drop-zone.active{border-color:#15c8c56b;box-shadow:0 8px #2b34681a,0 0 0 4px #15c8c51f}.concept-drop-zone.locked{background:linear-gradient(180deg,#d4f8bf,#b7ef92)}.concept-drop-zone.incorrect{background:linear-gradient(180deg,#ffe5ea,#ffd0d8)}.concept-zone-title,.concept-piece-chip{font-weight:800}.concept-piece-chip{border-radius:999px;padding:.45rem .65rem;background:#ffffffe0;color:var(--ink-soft);cursor:grab;display:grid;justify-items:center;gap:.35rem}.concept-piece-name{font-weight:800}.mini-shell-piece{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;max-width:100%}.mini-sublevel-piece{display:grid;justify-items:center;gap:.18rem}.mini-piece-label{color:var(--accent);font-size:.68rem;font-weight:800}.mini-orbital-row{display:flex;gap:.12rem}.mini-orbital-box{width:1.05rem;height:1.05rem;border:1.5px solid rgba(43,52,104,.42);border-radius:.12rem;background:#fff;display:grid;place-items:center;color:var(--accent);font-size:.5rem;line-height:1}.mini-orbital-box.target{border-color:#2b3468b3;box-shadow:inset 0 0 0 1px #2b34681f}.concept-piece-chip:active{cursor:grabbing}.concept-drag-preview{position:fixed;left:-9999px;top:-9999px;z-index:-1;border-radius:999px;padding:.55rem .9rem;background:#fff;box-shadow:0 18px 32px #2b34682e;color:var(--accent);font-weight:800;pointer-events:none}.concept-drag-preview.shell-preview{border-radius:1rem;padding:.55rem;background:#ffffffe0}.concept-drag-preview.orbital-preview{border-radius:.7rem;padding:.45rem;background:#ffffffe6}.page-three-actions{display:flex;flex-wrap:wrap;gap:.75rem}.secondary-action{border:0;border-radius:1rem;min-height:3rem;padding:0 1.1rem;background:#ffffffeb;box-shadow:var(--drop-shadow);color:var(--accent);font-weight:800}@media (max-width: 1100px){.labeling-layout,.orbital-activity{grid-template-columns:1fr}}@media (max-width: 700px){.lesson-page{padding:6.5rem 4rem 3rem}.hint-bubble{top:1rem;width:min(19rem,calc(100vw - 6rem))}.progress-dots{left:1rem}.nav-controls{right:1rem;gap:.7rem}.nav-button{width:3.8rem;height:3.8rem;border-radius:1.2rem;font-size:1.7rem}.periodic-label-board,.source-region-board,.aufbau-target-board{overflow:auto}}