/* One shared, calmer family palette. Purple is slightly darker to keep white labels readable. */
:root{--neon-alkali:#e042a8;--neon-alkaline:#e0893b;--neon-transition:#30b5eb;--neon-post:#30e4a5;--neon-metalloid:#a2e43b;--neon-nonmetal:#974fe5;--neon-halogen:#e0d33b;--neon-noble:#30d8eb;--neon-lanthanide:#d634eb;--neon-actinide:#e05679;--lavender:#af7aea;--orange:#e08e7f;--score-good:#30e4a5;--score-bad:#e05da1;--score-missed:#cee460;--edge-line:#8762ab;--quiet-edge:#59446e}
.brand>svg{stroke:#bc92e8}.brand-dot{color:#e38c82}.hero-label{color:#bd9bd7}.hero-label .live-dot{background:#d771ad}
.workspace-tabs{border-color:#72528c}.workspace-tab[aria-selected="true"]{background:linear-gradient(135deg,#4c2e69,#302440);box-shadow:inset 0 0 0 1px #a56ec8,0 0 20px #a264c63b}
.icon-button,#sound-toggle{border-color:#8865a2;color:#cfb0e8}.icon-button[aria-pressed="true"],#sound-toggle[aria-pressed="true"]{border-color:#db987b;color:#efbc97}
.search-box{border-color:#76548b}.search-box:focus-within{border-color:#b08bda}.mix-panel{border-color:#84629b}.mix-panel.is-complete{border-color:#9772b1}#pick-count{border-color:#ab78c5;background:linear-gradient(135deg,#57376e,#382c47)}
.fuse-button,.mix-bottom .fuse-button{background:linear-gradient(115deg,#dda96d,#db808d);border-color:#e8b793;color:#101524}.primary-button{background:var(--lavender);border-color:#cba9ec;color:#101524}.secondary-button{border-color:#9470b2;color:#dfc9ee}.mix-bottom #new-mix-button{border-color:#9873b6;background:linear-gradient(135deg,#4e315f,#342c41)}#view-results-button{border-color:#b18ccc;background:linear-gradient(135deg,#56356c,#382b44)}
.sift-panel,.sift-panel.is-complete{--score-color:#b28ade}.sift-panel.is-correct{--score-color:var(--score-good)}.sift-panel.is-wrong{--score-color:var(--score-bad)}.sift-track{border-color:#9b76b5}.sift-panel.is-correct .sift-track{border-color:var(--score-good)}.sift-panel.is-wrong .sift-track{border-color:var(--score-bad)}
.element.answer-hit,.pick-chip.resolved-correct,.answer-element{border-color:var(--score-good)}.element.answer-wrong,.pick-chip.resolved-wrong{border-color:var(--score-bad)}.element.answer-missed,.answer-element.missed{border-color:var(--score-missed)}
.sift-flyer.correct{background:linear-gradient(145deg,color-mix(in srgb,var(--score-good) 74%,white),var(--score-good));border-color:#b9ebd8}.sift-flyer.wrong{background:linear-gradient(145deg,color-mix(in srgb,var(--score-bad) 84%,white),color-mix(in srgb,var(--score-bad) 88%,#302035));border-color:#e8b4d0}
.beaker-stage .dye-cloud{filter:blur(5px) saturate(1)}.beaker-stage .color-plume{filter:blur(3px) saturate(1.03)}.beaker-stage #beaker-atoms .atom.flask-ball.is-submerged{filter:brightness(var(--water-brightness,.93)) saturate(1)}

/* A centered prompt anchors the lab. Equal outer columns keep it in the middle. */
.experiment>.material-hero{width:100%;max-width:none;min-width:0;margin:0;padding:0;text-align:center}
.experiment>.material-hero h1{max-width:none;overflow-wrap:normal;text-wrap:balance}
.material-panel{animation:none}
.material-drawing{background-color:#10131c;overflow:hidden}
.material-drawing>svg{display:block;width:100%;height:100%;overflow:hidden}

/* One-screen desktop budget, with compact square-ish cells and a narrower canvas. */
@media(min-width:1000px){
 :root{--view-header:48px;--view-lab:clamp(236px,34dvh,310px);--view-separation:6px;--view-cell-gap:4px;--view-series-gap:6px;--view-footer:22px;--view-row:clamp(34px,calc((100dvh - var(--view-header) - var(--view-lab) - var(--view-separation) - 9 * var(--view-cell-gap) - var(--view-series-gap) - 10px - var(--view-footer)) / 9),54px)}
 .app-shell{display:flex;flex-direction:column;width:100%;min-height:100dvh;max-width:1120px;padding:0 22px}
 .app-shell>main{display:flex;flex:1;flex-direction:column;min-width:0}
 .site-header{height:var(--view-header);min-height:var(--view-header);flex:none;gap:20px;padding:0;display:flex}
 .brand{gap:8px}.brand>span:first-of-type{font-size:29px}.brand>svg{width:22px;height:25px}
 .workspace-tabs{padding:3px;gap:3px;border-radius:10px}.workspace-tab{padding:6px 17px;min-height:30px;font-size:11px;border-radius:7px}
 #sound-toggle{width:31px;height:31px}
 #panel-play{display:flex;flex:1;flex-direction:column;gap:var(--view-separation);min-width:0}
 .experiment{width:100%;height:var(--view-lab);min-height:0;max-width:100%;margin:0;padding:7px 0 4px;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) minmax(0,1fr);grid-template-rows:48px minmax(0,1fr);gap:0 24px;align-items:center}
 .experiment>.material-hero{grid-column:2;grid-row:1;align-self:center;z-index:2}
 .hero-label{font-size:8px;letter-spacing:1.1px;line-height:1.3;gap:6px;flex-wrap:wrap;justify-content:center}
 .experiment>.material-hero h1{font-size:27px;line-height:1.05;letter-spacing:-.9px;margin:6px 0 0}
 .material-panel{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;justify-content:center;align-items:center;align-self:center;min-width:0;max-height:100%;margin:0;gap:0}
 #specimen-art{width:190px;max-width:100%;height:auto;min-width:0;aspect-ratio:1;flex:none;border-radius:18px}
 .experiment-center{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center;flex-direction:column;align-self:center;min-width:0;width:100%;margin:0;gap:0}
 .beaker-stage{height:calc(var(--view-lab) - 111px);min-height:0;width:100%;margin:0;flex:none;transform:scale(.58);transform-origin:center}
 .sift-panel{display:grid;width:100%;max-width:270px;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:22px 29px;gap:1px 10px;align-items:center;padding:0;margin:0;flex:none}
 .sift-score-heading{display:contents}
 .sift-score-heading>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .sift-score-heading strong{grid-column:2;grid-row:1;justify-self:end;font-size:23px;line-height:1;letter-spacing:-.7px;white-space:nowrap}
 .sift-score-heading strong small{font-size:11px;margin-left:2px}
 .sift-track{grid-column:1;grid-row:1;width:100%;height:9px;align-self:center}
 .sift-feedback{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:6px;min-height:25px;margin:0}
 .sift-feedback>b{width:23px;height:23px;min-width:23px;font-size:11px}.sift-feedback>span{font-size:10px;line-height:1.2;min-width:0}.sift-feedback>strong{font-size:13px;flex:none}
 .sift-panel:has(#score-actions button:not([hidden])) .sift-feedback{grid-column:1}
 #score-actions{grid-column:2;grid-row:2;align-self:center;justify-self:end;display:flex;align-items:center;gap:5px;margin:0;min-height:0}
 #score-actions:not(:has(button:not([hidden]))){display:none}
 #skip-mix{min-height:29px;margin:0;padding:4px 0;font-size:9px;white-space:nowrap}
 #view-results-button{min-height:29px;margin:0;padding:6px 8px;font-size:10px;white-space:nowrap}
 .mix-panel{grid-column:3;grid-row:1/3;height:calc(var(--view-lab) - 23px);min-height:0;max-height:none;margin:0;padding:12px 13px;border-radius:14px;align-self:center}
 .mix-title{min-height:26px;gap:9px;flex:none}.mix-title .small-label{font-size:9px;letter-spacing:1.2px}.mix-header-actions{gap:10px}#pick-count{height:24px;min-width:29px;font-size:12px}
 .mix-header-actions #clear-button{min-height:27px;font-size:10px}
 .picked-elements{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:31px;gap:5px;min-height:0;max-height:none;flex:1;margin:8px 0;padding:0 3px 0 0;align-content:start;overflow:auto;scrollbar-gutter:auto}
 .picked-elements:has(.empty-mix){min-height:0;padding:9px}
 .empty-mix{font-size:11px;margin:0;line-height:1.5}
 .pick-chip{height:31px;min-height:31px;padding:4px 6px;gap:4px;border-radius:7px}.pick-chip .pick-symbol{flex-basis:20px;font-size:15px}.pick-chip .pick-name{display:block;font-size:8px;line-height:1.2}.pick-chip .pick-remove{flex-basis:8px;font-size:11px}
 .mix-bottom{padding-top:7px;flex:none;gap:0}.mix-bottom .fuse-button,.mix-bottom #new-mix-button{min-height:38px;padding:9px 12px;font-size:11px}.mix-bottom #mix-hint{display:none}
 .table-section{position:relative;min-width:0;margin:0;padding:0;border-top-width:1px;flex:none}
 .table-toolbar{position:absolute;z-index:5;left:calc(100% / 6 + 8px);top:12px;width:calc(100% * 8 / 18 - 16px);height:31px;min-height:0;gap:14px;margin:0;padding:0;justify-content:center;align-items:center}
 .table-toolbar h2{font-size:13px;line-height:1.2;white-space:nowrap}
 .search-box{width:180px;max-width:56%;height:31px;padding:6px 9px;flex:none}.search-box input{font-size:10px}.search-box svg{width:14px;height:14px}.search-box kbd{font-size:9px}
 .table-scroll{width:100%;padding:4px;overflow:visible;min-height:0}
 .periodic-table{width:100%;min-width:0;padding:0;grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:repeat(7,var(--view-row)) var(--view-series-gap) repeat(2,var(--view-row));gap:var(--view-cell-gap)}
 .element{padding:1px 2px;border-radius:6px;min-width:0;min-height:0}
 .element .atomic-number{position:absolute;top:3px;left:4px;margin:0;align-self:auto;font-size:7px;line-height:1;letter-spacing:0}
 .element .symbol{font-size:20px;line-height:1;margin-top:4px}
 .element .element-name{font-size:7px;line-height:1;margin-top:2px;letter-spacing:0}
 .element.selected:after{font-size:8px;top:3px;right:4px}
 .series-placeholder{font-size:9px;gap:2px}.series-placeholder span{font-size:7px}.series-label{font-size:7px;line-height:1.3;letter-spacing:.7px;padding-right:8px}
 .mobile-scroll-hint{display:none}
 footer{height:var(--view-footer);min-height:var(--view-footer);padding:0;margin:0;flex:none;gap:12px;line-height:1;border-top-width:1px}
 footer>span:first-child,footer>span:nth-child(2),footer button{font-size:8px}footer>span:first-child{display:inline}
 .info-panel{width:100%;flex:1;margin:28px auto 35px;min-height:0}
}
@media(min-width:1000px) and (min-height:760px){
 #specimen-art{width:205px}.experiment>.material-hero h1{font-size:29px}.beaker-stage{transform:scale(.65)}
 .element .symbol{font-size:22px}.element .atomic-number{font-size:7px}.element .element-name{font-size:7px;line-height:1.1}
}
@media(min-width:1000px) and (min-height:880px){
 #specimen-art{width:225px}.experiment>.material-hero h1{font-size:31px}.hero-label{font-size:9px}.experiment{grid-template-rows:52px minmax(0,1fr)}.beaker-stage{height:calc(var(--view-lab) - 115px);transform:scale(.80)}
 .mix-panel{padding:15px}.picked-elements{grid-auto-rows:34px;gap:6px}.pick-chip{height:34px;min-height:34px}.pick-chip .pick-symbol{font-size:16px}.pick-chip .pick-name{font-size:8.5px}
 .element .symbol{font-size:23px}.element .atomic-number{font-size:8px}.element .element-name{font-size:7.5px}
}
/* Phones keep readable controls and a table that can be swiped horizontally. */
@media(max-width:999px){
 .app-shell{max-width:850px}
 .experiment{display:grid;grid-template-columns:minmax(110px,.85fr) minmax(190px,1.15fr);grid-template-rows:auto auto auto;gap:12px 16px;min-height:0;max-width:none;padding-top:16px;padding-bottom:18px}
 .experiment>.material-hero{grid-column:1/-1;grid-row:1;padding:2px 0 3px;margin:0;text-align:center}
 .experiment>.material-hero h1{font-size:clamp(29px,4.4vw,36px);line-height:1.07;letter-spacing:-1.1px;margin:8px 0 0;max-width:none}
 .material-panel{grid-column:1;grid-row:2;min-width:0;margin:0}
 #specimen-art{justify-self:center;align-self:center;width:195px;max-width:100%;height:auto;min-width:0;aspect-ratio:1}
 .experiment-center{grid-column:2;grid-row:2;min-width:0}.mix-panel{grid-column:1/-1;grid-row:3;height:auto;min-height:0;margin-top:3px}
 .picked-elements{grid-template-columns:repeat(3,minmax(0,1fr));min-height:34px;max-height:154px}.picked-elements:has(.empty-mix){min-height:65px}
 .table-toolbar{position:static;width:auto;height:auto;gap:14px;justify-content:space-between;margin:0 0 14px}.table-toolbar h2{font-size:15px}.search-box{max-width:55%;width:185px}
 .table-scroll{overflow-x:auto;padding-top:8px;padding-bottom:10px}.periodic-table{min-width:850px;grid-template-rows:repeat(7,52px) 8px repeat(2,49px);gap:4px}
 .element .symbol{font-size:21px}.element .atomic-number{font-size:7px}.element .element-name{font-size:6.5px}
 .mobile-scroll-hint{display:block;font-size:9px}.info-panel{min-height:0}
}
@media(max-width:420px){.experiment{grid-template-columns:minmax(90px,.85fr) minmax(170px,1.15fr);gap:10px}.picked-elements{grid-template-columns:repeat(2,minmax(0,1fr))}#specimen-art{width:160px}.experiment>.material-hero h1{font-size:29px}}
@media(min-width:1000px) and (max-height:760px){.finale-product{width:105px;height:105px}.finale-root[data-tier="perfect"] .finale-product{width:112px;height:112px}.finale-caption,.finale-root[data-tier="perfect"] .finale-caption{top:calc(44% + 67px);font-size:10px}.finale-halo{width:160px;height:160px}}