/* Light lives on component edges, leaving labels and whitespace quiet. */
:root{--edge-glow:#baa4f525;--edge-line:#65547c;--quiet-edge:#493f5e}
.site-header{border-bottom-color:#3b334e;box-shadow:0 1px 9px -5px #c2a8ff66}
.workspace-tabs{border-color:#493d60;background:linear-gradient(145deg,#201d2d,#171c28);box-shadow:0 0 14px #bca3ff0d,inset 0 1px #ffffff05}
.workspace-tab[aria-selected="true"]{box-shadow:inset 0 0 0 1px #72598e,0 0 13px #c6a7ff18}
.icon-button,#sound-toggle{border-color:#534361;box-shadow:0 0 10px #c9adff12,inset 0 0 5px #c9adff04}
.icon-button[aria-pressed="true"],#sound-toggle[aria-pressed="true"]{border-color:#c59a78;box-shadow:0 0 11px #ffac7e20}
.search-box{border-color:#514461;box-shadow:0 0 13px #c2a6ff0d,inset 0 1px #ffffff04;transition:border-color .2s,box-shadow .2s}
.search-box:focus-within{border-color:#b79ddc;box-shadow:0 0 16px #c2a6ff23}
.sift-track{border:1px solid #6b577c;box-shadow:0 0 12px #b59ceb18,inset 0 1px 5px #0003}
.sift-panel.is-correct .sift-track{border-color:#75a68b;box-shadow:0 0 13px #a2f6c927}
.sift-panel.is-wrong .sift-track{border-color:#a76e85;box-shadow:0 0 12px #f69db421}
.score-track{box-shadow:0 0 0 1px #665278,0 0 13px #bd9dfb18}
.detail-card,.stat-cell,.fact-box,.result-summary,.score-example{border:1px solid #514160;box-shadow:0 0 17px #b292eb0a,inset 0 1px #ffffff03}
dialog{border-color:#766087;box-shadow:0 0 26px #b58ce921,0 28px 100px #000a}
.answer-element{box-shadow:0 0 9px #a4e7bf16}.answer-element.missed{box-shadow:0 0 9px #e3c88d16}
.primary-button,.secondary-button{box-shadow:0 0 12px #c8b2ff1c,inset 0 1px #ffffff1c;transition:transform .18s,box-shadow .18s,border-color .18s}
.secondary-button{border-color:#79608f;box-shadow:0 0 11px #c7a2ed12}
.series-placeholder{box-shadow:0 0 9px #c5a1c70f;border-color:#67506f}
#specimen-art{border:1px solid #4f405e;box-shadow:0 0 21px #b69be513,inset 0 0 10px #b69be508}
.beaker-wall{box-shadow:0 0 13px #b3a2e924,inset 6px 0 9px #a7bdd30a,inset -6px 0 9px #c1d2fa08}
.beaker-rim{box-shadow:0 3px 0 #5c657b,0 0 11px #c1b1f426}
.beaker-stage:not(.sifting):not(.fused) .beaker{animation:beaker-idle 22s ease-in-out infinite}
@keyframes beaker-idle{0%,100%{translate:-.5px .3px;rotate:-.1deg}50%{translate:.7px -1.6px;rotate:.12deg}}
@media(prefers-reduced-motion:reduce){.beaker-stage:not(.sifting):not(.fused) .beaker{animation:none!important;translate:none;rotate:none}}
.element{border-color:color-mix(in srgb,var(--element-color) 51%,transparent);box-shadow:0 0 9px color-mix(in srgb,var(--element-color) 17%,transparent),inset 0 0 8px color-mix(in srgb,var(--element-color) 4%,transparent);transform-origin:center;animation:element-drift var(--float-duration,19s) ease-in-out var(--float-delay,0s) infinite;transition:transform .2s cubic-bezier(.2,.7,.3,1.1),background .2s,opacity .2s,box-shadow .2s,border-color .2s}
.element.selected{box-shadow:0 0 0 1px var(--element-color),0 0 16px color-mix(in srgb,var(--element-color) 38%,transparent)}
.element.answer-hit{box-shadow:0 0 13px #8ed1b226}.element.answer-wrong{box-shadow:0 0 11px #d48c9824}.element.answer-missed{box-shadow:0 0 11px #d8bb7d20}
.element:hover,.element:focus-visible,.element:disabled{animation-play-state:paused}
.material-panel,.mix-panel,.sift-panel{animation:surface-drift 23s ease-in-out infinite}
.material-panel{animation-delay:-8s}.sift-panel{animation-delay:-15s}.mix-panel{animation-delay:-3s}
.material-panel:hover,.material-panel:focus-within,.mix-panel:hover,.mix-panel:focus-within,.sift-panel:hover,.sift-panel:focus-within{animation-play-state:paused}
.app-shell.is-mixing .element,.app-shell.is-mixing .material-panel,.app-shell.is-mixing .mix-panel,.app-shell.is-mixing .sift-panel,.workspace-panel[hidden] *{animation-play-state:paused!important}
@keyframes element-drift{0%,100%{translate:-.65px .3px;rotate:-.07deg}25%{translate:.9px -1.1px;rotate:.06deg}50%{translate:.4px -1.5px;rotate:.09deg}75%{translate:-1px -.35px;rotate:-.04deg}}
@keyframes surface-drift{0%,100%{translate:0 .4px}35%{translate:1.2px -1.4px}70%{translate:-1px -1.8px}}

/* Stable header tools and one primary action keep the mix easy to scan. */
.mix-panel{height:304px;padding:16px 17px 14px;border:1px solid #625074;border-radius:17px;background:linear-gradient(155deg,#242031 0%,#191d2b 65%,#181d29);box-shadow:0 0 20px #b693e912,0 13px 30px #0002,inset 0 1px #ffffff08}
.mix-title{align-items:center;min-height:29px;gap:9px}.mix-title .small-label{font-size:10px;letter-spacing:1.45px;color:#cbbfdc}
.mix-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-shrink:0}
#pick-count{display:grid;place-items:center;min-width:29px;height:25px;padding:0 7px;border-radius:8px;border:1px solid #69527d;background:#332a42;color:#eadcff;font:500 12px 'Space Grotesk',Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.3px;box-shadow:0 0 10px #bca3fa12,inset 0 1px #ffffff09}
.mix-header-actions #clear-button{display:inline-flex;align-items:center;justify-content:center;min-height:29px;margin:0;padding:4px 0 4px 3px;color:#c1afcf;font-size:10px;text-decoration:none}
.mix-header-actions #clear-button:disabled{opacity:.32}
.mix-header-actions #clear-button:hover:not(:disabled){color:#f0e3ff;text-decoration:underline;text-underline-offset:4px}
.picked-elements{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:34px;gap:6px;min-height:94px;max-height:186px;margin:12px 0;padding-right:3px}
.picked-elements:has(.empty-mix){min-height:135px;border-color:#51425e;background:#171b260e}
.pick-chip{height:34px;padding:5px 7px;border-color:color-mix(in srgb,var(--chip-color) 43%,#323242);box-shadow:0 0 8px color-mix(in srgb,var(--chip-color) 8%,transparent),inset 0 1px #ffffff08}
.pick-chip .pick-symbol{flex-basis:23px;font-size:16px}.pick-chip .pick-name{display:block;font-size:9px;color:#c7cede;line-height:1.3}.pick-chip .pick-remove{flex-basis:9px;font-size:12px}
.mix-bottom{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-top:11px;border-top-color:#44364f}
.mix-bottom .fuse-button,.mix-bottom #new-mix-button{width:100%;min-height:42px;justify-content:center;padding:11px 13px;border-radius:10px;font-size:12px;box-shadow:0 0 16px #ffac7e1c,inset 0 1px #ffe8da5c}
.mix-bottom .fuse-button svg{display:block;width:16px;height:16px}.mix-bottom .button-arrow{margin-left:auto}.mix-bottom #mix-hint{width:100%;margin-top:8px;min-height:11px;font-size:9px;color:#aa9cbb;text-align:center}
.mix-panel.is-complete{border-color:#6b5d86;box-shadow:0 0 20px #c3a5f516,0 12px 28px #0002,inset 0 1px #ffffff08}
.mix-panel.is-complete .pick-chip{opacity:.9}.mix-panel.is-complete .pick-name{color:#c8c5d8}
.mix-bottom #new-mix-button{border:1px solid #8b6ca2;background:linear-gradient(135deg,#3c2f4e,#30273f);color:#e3d4f5;box-shadow:0 0 15px #c7a5ed18,inset 0 1px #ffffff09}
#score-actions{display:flex;justify-content:center;gap:8px;margin-top:10px;min-height:0}
#score-actions:empty{display:none}
#score-actions:not(:has(button:not([hidden]))){display:none}
.mix-bottom #mix-hint:empty{display:none}
#view-results-button{display:inline-flex;align-items:center;justify-content:center;min-height:35px;gap:7px;padding:8px 18px;border:1px solid #a98bc8;border-radius:9px;background:linear-gradient(135deg,#443451,#31283f);box-shadow:0 0 16px #bda1f323,inset 0 1px #ffffff10;color:#ecddff;font-size:11px;font-weight:500;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s}
#view-results-button:focus-visible{outline:2px solid #f6bd93;outline-offset:4px}

@media(hover:hover) and (pointer:fine){
 .element:hover:not(:disabled),.element:focus-visible:not(:disabled){transform:translateY(-3px) scale(1.08);border-color:var(--element-color);background:color-mix(in srgb,var(--element-color) 21%,#10131c);box-shadow:0 0 0 1px color-mix(in srgb,var(--element-color) 75%,transparent),0 0 24px color-mix(in srgb,var(--element-color) 46%,transparent),0 9px 15px #0005;z-index:4}
 .element.selected:hover:not(:disabled){background:var(--element-color);color:#1a1826}
 .primary-button:hover:not(:disabled),.secondary-button:hover:not(:disabled),#view-results-button:hover:not(:disabled),#new-mix-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 0 21px #cfadff32,inset 0 1px #ffffff1c}
}
@container(max-width:230px){.picked-elements{grid-template-columns:1fr;grid-auto-rows:34px}.pick-chip .pick-name{display:block;font-size:10px}.mix-header-actions{gap:6px}.mix-title .small-label{font-size:9px;letter-spacing:1px}}
@media(max-width:1000px) and (min-width:761px){.mix-panel{height:302px;padding:13px}.mix-header-actions{gap:6px}.mix-title .small-label{font-size:9px}.mix-header-actions #clear-button{font-size:9px}.mix-bottom .fuse-button,.mix-bottom #new-mix-button{font-size:11px}}
@media(max-width:760px){.mix-panel{height:auto;padding:14px 15px;margin-top:7px}.picked-elements{grid-template-columns:repeat(3,minmax(0,1fr));min-height:34px;max-height:154px;margin:11px 0}.picked-elements:has(.empty-mix){min-height:64px}.pick-chip .pick-name{font-size:8px}.mix-title .small-label{font-size:10px}.mix-header-actions{gap:13px}.mix-header-actions #clear-button{font-size:11px}.mix-bottom{padding-top:10px}.mix-bottom #mix-hint{min-height:0;font-size:8px}.mix-bottom .fuse-button,.mix-bottom #new-mix-button{min-height:40px}#score-actions{margin-top:8px}#view-results-button{font-size:10px;min-height:33px;padding:8px 13px}}
@media(max-width:420px){.picked-elements{grid-template-columns:repeat(2,minmax(0,1fr))}.pick-chip .pick-name{font-size:9px}}
@media(hover:none),(pointer:coarse){.element:hover:not(:disabled){transform:none;filter:none;z-index:auto;border-color:color-mix(in srgb,var(--element-color) 51%,transparent);background:color-mix(in srgb,var(--element-color) 7%,#10131c);box-shadow:0 0 9px color-mix(in srgb,var(--element-color) 17%,transparent),inset 0 0 8px color-mix(in srgb,var(--element-color) 4%,transparent)}.element.selected:hover:not(:disabled){background:var(--element-color);color:#1a1826;box-shadow:0 0 0 1px var(--element-color),0 0 16px color-mix(in srgb,var(--element-color) 38%,transparent)}.pick-chip:hover:not(:disabled),.mix-bottom .fuse-button:hover:not(:disabled){transform:none}}
@media(prefers-reduced-motion:reduce){.element,.material-panel,.mix-panel,.sift-panel{animation:none!important;translate:none;rotate:none}.element,.primary-button,.secondary-button,#view-results-button,#new-mix-button{transition:none}.element:hover:not(:disabled),.element:focus-visible:not(:disabled),.primary-button:hover:not(:disabled),.secondary-button:hover:not(:disabled),#view-results-button:hover:not(:disabled),#new-mix-button:hover:not(:disabled){transform:none}}