[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0!important}
.app-shell{max-width:1320px;padding:0 36px}
.site-header{height:76px;gap:20px}
.brand{gap:9px}.brand>span:first-of-type{font-size:32px}.brand>svg{width:23px;height:27px}
.workspace-tabs{display:flex;gap:4px;background:#181c28;padding:5px;border:1px solid #282e3e;border-radius:12px}
.workspace-tab{background:none;border:0;border-radius:8px;padding:9px 17px;color:#8f9ab1;font-size:12px;font-weight:500;white-space:nowrap;transition:background .2s,color .2s}
.workspace-tab[aria-selected="true"]{background:#30293f;color:#e0d4ff;box-shadow:inset 0 0 0 1px #544567}
.workspace-tab:disabled{opacity:.55}
#sound-toggle{width:34px;height:34px;border-color:#303747}#sound-icon{display:flex}#sound-icon svg{width:17px;height:17px}
.material-hero{padding:26px 0 8px}.hero-label{font-size:9px;letter-spacing:1.7px;gap:8px;color:#a29bb7}
.material-hero h1{font-size:clamp(32px,3.9vw,52px);letter-spacing:-2px;margin:9px 0 0}
.experiment{grid-template-columns:minmax(160px,1fr) minmax(240px,1.2fr) minmax(190px,1fr);min-height:280px;gap:38px;max-width:1050px;margin:auto;padding:0 0 26px}
#specimen-art{width:210px;max-width:100%;border:0;box-shadow:none;border-radius:16px}
.material-panel{align-self:center}.material-panel figcaption{margin:0}
.beaker-stage{min-height:195px;margin:0;transform:scale(.87);transform-origin:center}
.beaker-halo{width:235px;height:210px;top:-4px}
.beaker{filter:drop-shadow(0 12px 18px #0005)}
.fused .beaker{animation:none;opacity:.65;transform:rotate(0);filter:none}.fused .beaker-halo{background:radial-gradient(ellipse,#b9affd19,transparent 70%)}
.fused:after{display:none}
.sift-panel{max-width:285px;padding:0}.sift-score-heading{margin-bottom:9px}.sift-score-heading>span{font-size:8px;letter-spacing:1.6px}.sift-score-heading strong{font-size:30px}#sift-value{display:inline-block;transform-origin:bottom center}
.sift-track{height:10px;background:#242b3c}.sift-feedback{min-height:29px;margin-top:9px;gap:8px}.sift-feedback>b{width:26px;height:26px;min-width:26px;font-size:12px;border-radius:7px}.sift-feedback>b:empty{visibility:hidden}.sift-feedback>span{font-size:11px}.sift-feedback>strong{font-size:16px}
#sift-fill{position:relative;overflow:hidden}.score-sheen{position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,#ffffff9c 50%,transparent 75%);transform:translateX(-100%)}.sifting~.sift-panel.is-correct .score-sheen,.is-correct .score-sheen{animation:score-shimmer 1.3s ease-in-out infinite}
.score-spark{position:fixed;z-index:45;width:5px;height:5px;border-radius:2px;pointer-events:none;box-shadow:0 0 8px currentColor}
.sift-flyer.correct{background:linear-gradient(145deg,#c6ffdd,#72d4a0);color:#183e2d;border:2px solid #e1ffed;box-shadow:0 0 18px #b6ffd4aa,0 0 42px #8df9b94d;font-weight:700}.sift-flyer.correct:after{content:'';position:absolute;inset:-7px;border:1px solid #beffdb4d;border-radius:50%}.sift-flyer.wrong{box-shadow:0 0 14px #ed8fa333}
.mix-panel{height:215px;padding-left:28px;border-left:1px solid #2a3041}.mix-title .small-label{font-size:9px;letter-spacing:1.6px}.mix-title>span:last-child{font-size:20px}.picked-elements{max-height:100px;gap:5px;padding:12px 0}.empty-mix{margin-top:10px;font-size:12px;color:#758099}.mix-bottom .text-button{margin-bottom:10px}.fuse-button{padding:12px;font-size:12px;border-radius:10px}.pick-chip{border-radius:7px}#mix-hint{min-height:13px;font-size:9px;margin-top:8px}
.table-section{padding-top:18px}.table-toolbar{margin-bottom:16px}.table-toolbar h2{font-size:16px;color:#c6ccdb}.search-box{width:200px;padding:8px 10px}
.periodic-table{grid-template-rows:repeat(7,54px) 8px repeat(2,50px);gap:5px}.element{border-radius:6px}.element .symbol{font-size:21px}.element.selected:after{content:'\2713'}
.info-panel{max-width:660px;margin:42px auto 65px;min-height:450px}.info-panel h2{font-size:36px;letter-spacing:-1.2px;margin-bottom:14px}.info-panel h3{font-size:13px;font-weight:500}.info-panel>p,.detail-card p{font-size:13px;line-height:1.8;color:#a5b0c6}.info-panel #material-subtitle{font-size:13px;max-width:none;line-height:1.8}.detail-card{margin:22px 0 16px;padding:21px 23px;background:#181d2b;border:1px solid #30374a;border-radius:12px}.detail-card h3{color:#d3c7ef;margin-bottom:9px}.info-panel .table-legend{justify-content:flex-start;font-size:10px;margin:15px 0 30px;gap:14px 20px}.legend-title{margin-top:28px}.info-panel .primary-button{margin-top:10px}.info-panel .fine-print{font-size:11px!important}
footer{margin-top:24px;padding:17px 0;color:#737e98;letter-spacing:0}footer>span:first-child{font-size:9px}footer button{color:#a8a0ba}
.additional-sources{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:10px}.additional-sources a{font-size:10px}
@keyframes score-shimmer{to{transform:translateX(100%)}}
@media(max-width:1000px){.app-shell{padding:0 24px}.experiment{gap:22px;grid-template-columns:minmax(135px,.9fr) minmax(230px,1.2fr) minmax(170px,.9fr)}.mix-panel{padding-left:20px}.periodic-table{gap:4px;grid-template-rows:repeat(7,51px) 8px repeat(2,48px)}.element .symbol{font-size:19px}#specimen-art{width:190px}.material-hero h1{font-size:44px}}
@media(max-width:760px){.app-shell{padding:0 16px}.site-header{height:auto;min-height:100px;display:grid;grid-template-columns:1fr auto;gap:10px;padding:13px 0 12px}.brand>span:first-of-type{font-size:28px}.brand>svg{width:21px;height:25px}.workspace-tabs{grid-column:1/-1;grid-row:2;justify-content:center;padding:4px;gap:3px;border-radius:10px}.workspace-tab{flex:1;padding:8px 10px;font-size:11px}#sound-toggle{grid-column:2;grid-row:1;width:31px;height:31px}.material-hero{padding:21px 0 9px}.material-hero h1{font-size:35px;letter-spacing:-1.3px;max-width:none;margin-top:9px}.hero-label{font-size:8px;letter-spacing:1.3px}.experiment{grid-template-columns:minmax(90px,.85fr) minmax(175px,1.15fr);gap:12px;min-height:0;padding-bottom:18px}.material-panel{grid-column:1;align-self:center}#specimen-art{width:180px;max-width:100%}.experiment-center{grid-column:2}.beaker-stage{min-height:180px;transform:scale(.78);margin-bottom:-9px}.beaker-halo{width:205px}.sift-panel{max-width:230px}.sift-score-heading strong{font-size:26px}.sift-score-heading>span{font-size:7px}.sift-feedback{min-height:25px}.sift-feedback>b{width:23px;height:23px;min-width:23px;font-size:11px}.sift-feedback>span{font-size:10px}.sift-feedback>strong{font-size:14px}.mix-panel{grid-column:1/-1;height:auto;padding:13px 15px;margin-top:3px;border:1px solid #303648;border-radius:12px}.picked-elements{min-height:43px;max-height:86px;padding:8px 0}.empty-mix{margin:3px 0;font-size:11px}.mix-bottom{grid-template-columns:1fr 1.6fr}.mix-bottom .text-button{margin:0}.fuse-button{padding:10px 12px}#mix-hint{margin-top:5px;min-height:0;font-size:8px}.table-section{padding-top:15px}.table-toolbar{margin-bottom:12px}.table-toolbar h2{font-size:14px}.search-box{width:154px}.periodic-table{min-width:850px;grid-template-rows:repeat(7,56px) 9px repeat(2,51px)}.element .symbol{font-size:21px}.info-panel{margin:28px auto 40px;min-height:420px}.info-panel h2{font-size:29px}.detail-card{padding:17px}.info-panel>p,.detail-card p,.info-panel #material-subtitle{font-size:12px}footer{margin-top:14px}.mobile-scroll-hint{font-size:8px}}
@media(prefers-reduced-motion:reduce){.score-sheen{animation:none!important}.score-spark{display:none}}

/* Small colored halos keep each element recognizable without washing out the table. */
.element{box-shadow:0 0 8px color-mix(in srgb,var(--element-color) 13%,transparent),inset 0 0 9px color-mix(in srgb,var(--element-color) 4%,transparent);transition:transform .16s,background .2s,opacity .2s,box-shadow .2s}
.element:hover:not(:disabled){box-shadow:0 0 15px color-mix(in srgb,var(--element-color) 32%,transparent),0 5px 12px #0003}
.element.selected{box-shadow:0 0 0 1px var(--element-color),0 0 15px color-mix(in srgb,var(--element-color) 38%,transparent)}
.element.answer-hit{box-shadow:0 0 10px #8ed1b222}.element.answer-wrong{box-shadow:0 0 10px #d48c9822}.element.answer-missed{box-shadow:0 0 8px #d8bb7d1a}

/* A contained mix tray gives the picked elements and primary action one clear home. */
.mix-panel{height:310px;min-width:0;padding:16px;border:1px solid #3b3650;border-radius:18px;background:linear-gradient(145deg,#211e30,#161b29 72%);box-shadow:0 12px 32px #0002,inset 0 1px #ffffff06;container-type:inline-size}
.mix-title{min-height:25px;gap:10px}.mix-title .small-label{color:#c6badf;font-size:10px;letter-spacing:1.7px}
.mix-title>span:last-child{display:grid;place-items:center;min-width:32px;height:25px;padding:0 8px;border-radius:8px;border:1px solid #504364;background:#31273f;color:#e3d4ff;font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.5px;box-shadow:inset 0 1px #ffffff0a}
.picked-elements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:32px;align-content:start;gap:6px;flex:1;min-height:90px;max-height:184px;padding:0 3px 0 0;margin:12px 0;overflow:auto;scrollbar-width:thin;scrollbar-color:#625171 transparent;scrollbar-gutter:stable}
.picked-elements:has(.empty-mix){display:flex;align-items:center;justify-content:center;border:1px dashed #40384f;border-radius:11px;min-height:128px;padding:12px}
.empty-mix{margin:0;font-size:12px;color:#9589aa;text-align:center;line-height:1.5}
.pick-chip{--chip-color:var(--lavender);position:relative;display:flex;align-items:center;justify-content:flex-start;gap:6px;width:100%;min-width:0;height:32px;padding:5px 7px;border:1px solid color-mix(in srgb,var(--chip-color) 36%,#323242);border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--chip-color) 15%,#222332),#1e2230);color:var(--chip-color);box-shadow:inset 0 1px #ffffff05,0 2px 5px #0002;transition:transform .16s,box-shadow .16s,border-color .16s,background .16s}
.pick-chip:hover:not(:disabled){transform:translateY(-2px);border-color:var(--chip-color);box-shadow:0 3px 10px color-mix(in srgb,var(--chip-color) 15%,transparent)}
.pick-chip:active:not(:disabled){transform:scale(.96)}
.pick-chip .pick-symbol{flex:0 0 23px;font:600 16px 'Space Grotesk',Arial,sans-serif;letter-spacing:-.4px;text-align:left}
.pick-chip .pick-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;line-height:1.2;color:#c0c6d8;opacity:1;text-align:left}
.pick-chip .pick-remove{flex:0 0 10px;margin-left:auto;font-size:13px;line-height:1;color:var(--chip-color);opacity:.6;text-align:right}
.pick-chip:hover .pick-remove{opacity:1}
.pick-chip.is-new{animation:mix-chip-settle .3s cubic-bezier(.2,.8,.3,1.2) both}
.pick-chip.resolved-correct{background:linear-gradient(135deg,#224434,#1b302d);border-color:#6dad87;color:#b7f1ce;box-shadow:0 0 9px #9be6ba20}.pick-chip.resolved-wrong{background:linear-gradient(135deg,#492a39,#30222e);border-color:#af6e82;color:#f3aec1;box-shadow:none}
.pick-chip.resolved-correct .pick-remove{color:#b7f1ce;opacity:1}.pick-chip.resolved-wrong .pick-remove{color:#f3aec1;opacity:1}
.mix-bottom{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 12px;margin-top:auto;padding-top:10px;border-top:1px solid #363044}
.mix-bottom #clear-button{margin:0;padding:8px 1px;color:#b3a5c6;font-size:10px;min-height:32px}.mix-bottom #clear-button:disabled{opacity:.3}
.mix-bottom .fuse-button{min-height:40px;padding:10px 11px;border-radius:10px;gap:7px;font-size:11px;box-shadow:0 3px 12px #ffac7e13,inset 0 1px #ffe8da5c;transition:transform .18s,box-shadow .18s,opacity .18s}.mix-bottom .fuse-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 5px 18px #ffac7e26}.mix-bottom .fuse-button:active:not(:disabled){transform:scale(.98)}.mix-bottom .fuse-button svg{width:15px;height:15px}.mix-bottom .button-arrow{font-size:16px}
.mix-bottom #mix-hint{grid-column:1/-1;min-height:12px;margin-top:8px;font-size:8px;text-align:center;color:#9c91ad}
@keyframes mix-chip-settle{from{opacity:0;transform:translateY(6px) scale(.88)}65%{transform:translateY(-1px) scale(1.03)}to{opacity:1;transform:translateY(0) scale(1)}}
@container(max-width:220px){.pick-chip .pick-name{display:none}.pick-chip .pick-symbol{flex-basis:25px}.mix-bottom{gap:0 8px}.mix-bottom .fuse-button{padding:10px 8px;font-size:10px}.mix-bottom .fuse-button svg{display:none}}
@media(max-width:1000px) and (min-width:761px){.mix-panel{padding:13px;height:300px;border-radius:15px}.picked-elements{gap:5px}.pick-chip{padding:5px 6px}.mix-title .small-label{font-size:9px}}
@media(max-width:760px){.mix-panel{height:auto;padding:14px 15px;margin-top:7px;border-radius:15px}.mix-title{min-height:23px}.picked-elements{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:34px;min-height:34px;max-height:154px;margin:11px 0;gap:6px}.picked-elements:has(.empty-mix){min-height:65px}.pick-chip{height:34px;padding:6px 8px}.pick-chip .pick-name{font-size:8px}.mix-bottom{grid-template-columns:auto minmax(0,1fr);gap:0 20px;padding-top:11px}.mix-bottom #clear-button{padding:8px 5px}.mix-bottom .fuse-button{font-size:12px;justify-content:center;padding:10px 13px;max-width:none}.mix-bottom .button-arrow{margin-left:auto}.mix-bottom #mix-hint{font-size:8px;margin-top:7px;min-height:0}.mix-title .small-label{font-size:10px}}
@media(max-width:420px){.picked-elements{grid-template-columns:repeat(2,minmax(0,1fr));max-height:154px}.pick-chip .pick-name{font-size:9px}}
@media(prefers-reduced-motion:reduce){.pick-chip.is-new{animation:none}.pick-chip,.element,.mix-bottom .fuse-button{transition:none}.pick-chip:hover:not(:disabled),.mix-bottom .fuse-button:hover:not(:disabled){transform:none}}