/* Shared family colors softened 18% toward blue-gray while keeping their hue identity. */
:root{--neon-alkali:#ed2fa4;--neon-alkaline:#ed8322;--neon-transition:#1cb7f3;--neon-post:#1cefa0;--neon-metalloid:#a3ef22;--neon-nonmetal:#9b42f3;--neon-halogen:#eddb22;--neon-noble:#1ce1f3;--neon-lanthanide:#e11ef3;--neon-actinide:#ed466c}
/* The periodic table, selected mix, and flask share one softened neon family palette. */
:root{--alkali:var(--neon-alkali,#ed2fa4);--alkaline:var(--neon-alkaline,#ed8322);--transition:var(--neon-transition,#1cb7f3);--post:var(--neon-post,#1cefa0);--metalloid:var(--neon-metalloid,#a3ef22);--nonmetal:var(--neon-nonmetal,#9b42f3);--halogen:var(--neon-halogen,#eddb22);--noble:var(--neon-noble,#1ce1f3);--lanthanide:var(--neon-lanthanide,#e11ef3);--actinide:var(--neon-actinide,#ed466c);--lavender:#b370f3;--orange:#ed8973;--text:#f2f6ff;--muted:#a2b0cf;--line:#43325d;--edge-line:#8a56c4;--quiet-edge:#563076;--edge-glow:#ad45f32b;--score-good:#1cefa0;--score-bad:#ed4f9b;--score-missed:#d8ef4e}
body{background:radial-gradient(ellipse at 50% 0,#6b44ae0c,transparent 52%),var(--bg)}
.site-header{border-bottom-color:#583078;box-shadow:0 1px 11px -5px #ab4ff372}
.brand>svg{stroke:#c17df3;filter:drop-shadow(0 0 5px #b555f335)}.brand-dot{color:#ed8278}
.hero-label{color:#c99bf3}.hero-label .live-dot{background:#ed5ca6;box-shadow:0 0 10px #ed2fa470}.material-hero h1{color:#f7f2ff}
#specimen-art{border-color:#8956af;box-shadow:0 0 22px #ae42f31e,inset 0 0 10px #ae42f309}
.workspace-tabs{border-color:#7d4fa4;background:linear-gradient(145deg,#241831,#171b2b);box-shadow:0 0 16px #a946f317,inset 0 1px #d9b1f309}
.workspace-tab{color:#b9abd1}.workspace-tab[aria-selected="true"]{color:#f5dcff;background:linear-gradient(135deg,#56217c,#34204b);box-shadow:inset 0 0 0 1px #b965e6,0 0 15px #b042f32a}
.icon-button,#sound-toggle{color:#d0a8f3;border-color:#935cb8;box-shadow:0 0 12px #ad4df320,inset 0 0 5px #b558f309}
.icon-button[aria-pressed="true"],#sound-toggle[aria-pressed="true"]{color:#edb082;border-color:#ed8d6e;box-shadow:0 0 12px #ed832233}
.search-box{border-color:#8656ab;background:#19192c;box-shadow:0 0 13px #aa42f315,inset 0 1px #d7a6f30c}.search-box:focus-within{border-color:#c070f3;box-shadow:0 0 17px #b54cf334}.search-box svg{stroke:#ba99e6}.search-box input{color:#eff3ff}.search-box input::placeholder{color:#a6a6cb}.search-box kbd{border-color:#76508c;color:#bb9bd2}

/* Tinted lettering keeps the neon violet readable against the dark tile face. */
.element{border-width:1.5px;border-color:color-mix(in srgb,var(--element-color) 94%,transparent);background:color-mix(in srgb,var(--element-color) 15%,#10131c);color:color-mix(in srgb,var(--element-color) 70%,white);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--element-color) 20%,transparent),0 0 8px color-mix(in srgb,var(--element-color) 18%,transparent)}
.element .symbol{font-weight:600}.element .element-name,.element .atomic-number{opacity:.96}
.element.selected{background:var(--element-color);border-color:color-mix(in srgb,var(--element-color) 64%,white);color:#101524;box-shadow:inset 0 0 0 .5px #ffffff38,0 0 0 .5px var(--element-color),0 0 14px color-mix(in srgb,var(--element-color) 34%,transparent)}
.element.selected .element-name,.element.selected .atomic-number{opacity:1}
.element.selected[data-category="nonmetal"]{color:#fff;text-shadow:0 1px 1px #2d075d5c}
.series-placeholder{border-width:1.5px;border-color:#d45bea;color:#e091f3;box-shadow:0 0 8px #e11ef316}.series-label{color:#cc94de}.legend-item{color:#bdc6dd}.legend-item i{width:6px;height:6px;box-shadow:0 0 6px var(--legend-color)}
.element.answer-hit{border-color:#1ce2a0;background:#10382d;color:#70efbf;box-shadow:0 0 12px #1cefa02b}
.element.answer-wrong{border-color:#ed4f9b;background:#391328;color:#ed91c0;box-shadow:0 0 12px #ed2fa429}
.element.answer-missed{border-color:#d0ea48;background:#2b3017;color:#deef8f;box-shadow:0 0 11px #b3ef2224}

.mix-panel{border-color:#9560bd;background:linear-gradient(155deg,#291c38,#191c2c 68%);box-shadow:0 0 23px #a946f31d,0 13px 30px #0002,inset 0 1px #cca6f313}
.mix-title .small-label{color:#deb6f6}.mix-panel.is-complete{border-color:#a269cd;box-shadow:0 0 24px #ae4ef323,0 12px 28px #0002,inset 0 1px #d3b2f317}
#pick-count{border-color:#b867dd;background:linear-gradient(135deg,#612581,#382348);color:#f4d9ff;box-shadow:0 0 12px #bc4bf327,inset 0 1px #ffffff17}
.mix-header-actions #clear-button{color:#d6b4e9}.mix-header-actions #clear-button:hover:not(:disabled){color:#f8ddff}
.picked-elements:has(.empty-mix){border-color:#6a3d85;background:#29193621}.empty-mix{color:#b1a0c7}
.pick-chip{border-width:1.3px;border-color:color-mix(in srgb,var(--chip-color) 85%,#25233a);background:linear-gradient(135deg,color-mix(in srgb,var(--chip-color) 20%,#171b2b),color-mix(in srgb,var(--chip-color) 11%,#171b2b));color:color-mix(in srgb,var(--chip-color) 70%,white);box-shadow:inset 0 0 0 .4px color-mix(in srgb,var(--chip-color) 18%,transparent),0 0 8px color-mix(in srgb,var(--chip-color) 10%,transparent)}
.pick-chip .pick-symbol{color:color-mix(in srgb,var(--chip-color) 70%,white)}.pick-chip .pick-name{color:#d9e2f4}.pick-chip .pick-remove{color:color-mix(in srgb,var(--chip-color) 65%,white);opacity:.85}
.pick-chip:hover:not(:disabled){border-color:var(--chip-color);box-shadow:0 0 14px color-mix(in srgb,var(--chip-color) 27%,transparent)}
.pick-chip.resolved-correct{background:linear-gradient(135deg,#174632,#152d28);border-color:#1cdc99;color:#7fefc4;box-shadow:0 0 11px #1cefa025}.pick-chip.resolved-correct .pick-symbol,.pick-chip.resolved-correct .pick-remove{color:#7fefc4}
.pick-chip.resolved-wrong{background:linear-gradient(135deg,#4a1635,#2c1a2b);border-color:#ed4f9b;color:#ed9bc6;box-shadow:0 0 11px #ed2fa421}.pick-chip.resolved-wrong .pick-symbol,.pick-chip.resolved-wrong .pick-remove{color:#ed9bc6}
.mix-panel.is-complete .pick-name{color:#d7d5ea}.mix-bottom{border-top-color:#653779}.mix-bottom #mix-hint{color:#bba5cc}
.fuse-button,.mix-bottom .fuse-button{border-color:#edac78;background:linear-gradient(115deg,#edb054,#ed707d);color:#101524;box-shadow:0 0 19px #ed80592d,inset 0 1px #fff4dc8c}
.fuse-button:disabled{filter:none;opacity:.5}.mix-bottom .fuse-button:hover:not(:disabled){box-shadow:0 0 25px #ed7d5949,inset 0 1px #fff4dc8c}
.primary-button{background:#b370f3;border-color:#cf9df3;color:#101524;box-shadow:0 0 18px #b254f332,inset 0 1px #f1ceff5c}
.secondary-button{background:#321f4933;border-color:#a766d5;color:#e9c7ff;box-shadow:0 0 14px #aa4dde21}
.mix-bottom #new-mix-button{border-color:#a269dd;background:linear-gradient(135deg,#572075,#342344);color:#f0d5ff;box-shadow:0 0 18px #b141f329,inset 0 1px #eec2ff1c}
#view-results-button{border-color:#c379f3;background:linear-gradient(135deg,#622280,#382044);color:#f8e3ff;box-shadow:0 0 20px #bf4bf335,inset 0 1px #ffffff19}

.sift-panel{--score-color:#ba77f3}.sift-panel.is-correct{--score-color:var(--score-good)}.sift-panel.is-wrong{--score-color:var(--score-bad)}.sift-panel.is-complete{--score-color:#ba77f3}
.sift-track{border-color:#ab63d3;background:#2a173d;box-shadow:0 0 14px #b44ff327,inset 0 1px 5px #0003}
.sift-panel.is-correct .sift-track{border-color:#1cdc99;box-shadow:0 0 15px #1cefa030}.sift-panel.is-wrong .sift-track{border-color:#ed4f9b;box-shadow:0 0 15px #ed2fa430}
#sift-fill{box-shadow:0 0 17px color-mix(in srgb,var(--score-color) 43%,transparent)}.sift-feedback>b{background:color-mix(in srgb,var(--score-color) 16%,#191b2b);border:1px solid color-mix(in srgb,var(--score-color) 43%,transparent)}.sift-feedback>span{color:#bdc9e4}
.sift-flyer.correct{background:linear-gradient(145deg,#5befb8,#1cd18e);border-color:#b0efda;color:#102b24;box-shadow:0 0 19px #1cefa0a0,0 0 42px #1cefa04d}.sift-flyer.correct:after{border-color:#1cefa05c}
.sift-flyer.wrong{background:linear-gradient(145deg,#ed5598,#d02c78);border-color:#edaecf;color:#241121;box-shadow:0 0 19px #ed2fa466}
.flying-element{box-shadow:0 0 12px #ffffff5c,0 0 24px #b142f34d}
.flying-element[data-category="nonmetal"]{color:#fff!important;text-shadow:0 1px 1px #2d075d5c}

.detail-card,.stat-cell,.fact-box,.result-summary,.score-example{border-color:#82559e;background-color:#1c1a2c;box-shadow:0 0 18px #aa42f313,inset 0 1px #d9a8f30a}
dialog{border-color:#aa6ecc;background:#1c1b2c;box-shadow:0 0 31px #b94af32b,0 28px 100px #000a}.dialog-eyebrow{color:#ed9d7d}.score-readout,.stat-cell b,.result-summary strong{color:#cc97f3}.score-track{background:#312140;box-shadow:0 0 0 1px #a461ca,0 0 17px #b142f327}
.answer-element{color:#82efc3;border-width:1.5px;border-color:#1ce8a1;background:#14362b;box-shadow:inset 0 0 0 .4px #1cefa026,0 0 8px #1cefa01c}.answer-element.missed{color:#deef8f;border-color:#d4ea54;background:#2b3017;box-shadow:inset 0 0 0 .4px #caef2226,0 0 8px #b1ef221c}.hit-dot{background:#1cefa0;box-shadow:0 0 6px #1cefa04d}.miss-dot{background:#d8ef4e;box-shadow:0 0 6px #ccef224d}
#wrong-section{color:#ed9dc7}.penalty-chip{background:#3c1531;border-color:#cb418b;color:#eda5cd}.fact-box>span{color:#cb94ec}.fact-box a,.additional-sources a{color:#d3a1f3}.answer-heading>span,.component-list>div>span:last-child{color:#cfaaeb}.component-list{border-top-color:#603571}
.score-example b{color:#cc97f3}.score-example span:nth-last-child(2),.score-example b:last-child{color:#edab80;border-top-color:#6f3c6c}
.toast{background:linear-gradient(120deg,#cb92f3,#dda9f3);color:#23112e;box-shadow:0 0 22px #b142f335}.table-section{border-top-color:#55306d}footer{border-top-color:#55306d;color:#8f9fbc}footer button{color:#c4a1e1}
@media(hover:hover) and (pointer:fine){.element:hover:not(:disabled),.element:focus-visible:not(:disabled){border-color:color-mix(in srgb,var(--element-color) 65%,white);background:color-mix(in srgb,var(--element-color) 23%,#10131c);color:color-mix(in srgb,var(--element-color) 62%,white);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--element-color) 32%,transparent),0 0 0 .5px var(--element-color),0 0 20px color-mix(in srgb,var(--element-color) 42%,transparent),0 9px 15px #0005}.element.selected:hover:not(:disabled),.element.selected:focus-visible:not(:disabled){background:var(--element-color);color:#101524}.element.selected[data-category="nonmetal"]:hover:not(:disabled),.element.selected[data-category="nonmetal"]:focus-visible:not(:disabled){color:#fff}}
@media(hover:none),(pointer:coarse){.element:hover:not(:disabled){border-color:color-mix(in srgb,var(--element-color) 94%,transparent);background:color-mix(in srgb,var(--element-color) 15%,#10131c);color:color-mix(in srgb,var(--element-color) 70%,white);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--element-color) 20%,transparent),0 0 8px color-mix(in srgb,var(--element-color) 18%,transparent)}.element.selected:hover:not(:disabled){background:var(--element-color);color:#101524;box-shadow:inset 0 0 0 .5px #ffffff38,0 0 0 .5px var(--element-color),0 0 14px color-mix(in srgb,var(--element-color) 34%,transparent)}.element.selected[data-category="nonmetal"]:hover:not(:disabled){color:#fff}}


/* Broader, softer light balances the calmer colors without blurring the crisp rims. */
.element{--tile-glow:var(--element-color)}
.element.answer-hit{--tile-glow:var(--score-good)}.element.answer-wrong{--tile-glow:var(--score-bad)}.element.answer-missed{--tile-glow:var(--score-missed)}
.element,.element.answer-hit,.element.answer-wrong,.element.answer-missed{box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--tile-glow) 20%,transparent),0 0 13px color-mix(in srgb,var(--tile-glow) 29%,transparent),0 0 25px color-mix(in srgb,var(--tile-glow) 11%,transparent)}
.element.selected{box-shadow:inset 0 0 0 .5px #ffffff38,0 0 0 .5px var(--tile-glow),0 0 20px color-mix(in srgb,var(--tile-glow) 42%,transparent),0 0 32px color-mix(in srgb,var(--tile-glow) 16%,transparent)}
.pick-chip{box-shadow:inset 0 0 0 .4px color-mix(in srgb,var(--chip-color) 18%,transparent),0 0 12px color-mix(in srgb,var(--chip-color) 21%,transparent),0 0 22px color-mix(in srgb,var(--chip-color) 8%,transparent)}
.pick-chip.resolved-correct{box-shadow:0 0 15px color-mix(in srgb,var(--score-good) 23%,transparent),inset 0 1px #ffffff08}.pick-chip.resolved-wrong{box-shadow:0 0 15px color-mix(in srgb,var(--score-bad) 22%,transparent),inset 0 1px #ffffff08}
.mix-panel{box-shadow:0 0 29px #a746dd2c,0 13px 30px #0002,inset 0 1px #d7a5ff13}.mix-panel.is-complete{box-shadow:0 0 31px #aa4de22e,0 12px 28px #0002,inset 0 1px #dfb4ff17}
.workspace-tabs{box-shadow:0 0 21px #ad52e328,inset 0 1px #e6b3ff09}.workspace-tab[aria-selected="true"]{box-shadow:inset 0 0 0 1px #b862dc,0 0 20px #b14be33b}
.search-box{box-shadow:0 0 20px #a94ce526,inset 0 1px #e4a6ff0c}.search-box:focus-within{box-shadow:0 0 25px #b756e744}
#specimen-art{box-shadow:0 0 28px #b24ade30,inset 0 0 10px #b22bff09}
#pick-count{box-shadow:0 0 17px #bb4ee73b,inset 0 1px #ffffff17}
.sift-track{box-shadow:0 0 20px #ad4ce43a,inset 0 1px 5px #0003}.sift-panel.is-correct .sift-track{box-shadow:0 0 21px color-mix(in srgb,var(--score-good) 29%,transparent)}.sift-panel.is-wrong .sift-track{box-shadow:0 0 21px color-mix(in srgb,var(--score-bad) 29%,transparent)}
#sift-fill{box-shadow:0 0 21px color-mix(in srgb,var(--score-color) 48%,transparent)}
.primary-button{box-shadow:0 0 22px #b45be13e,inset 0 1px #f1ceff5c}.secondary-button{box-shadow:0 0 20px #a652d232}.fuse-button,.mix-bottom .fuse-button{box-shadow:0 0 25px #ed875740,inset 0 1px #fff4dc8c}.mix-bottom #new-mix-button{box-shadow:0 0 23px #ad47da3a,inset 0 1px #eec2ff1c}#view-results-button{box-shadow:0 0 25px #b950e547,inset 0 1px #ffffff19}

/* Collision feedback reuses a single pseudo-element. Physics supplies a bounded 0..1 scalar. */
.element::before{content:'';position:absolute;inset:-2px;z-index:3;pointer-events:none;border:1px solid color-mix(in srgb,var(--tile-glow,var(--element-color)) 56%,white);border-radius:inherit;background:none;box-shadow:0 0 7px color-mix(in srgb,var(--tile-glow,var(--element-color)) 70%,white),0 0 16px color-mix(in srgb,var(--tile-glow,var(--element-color)) 42%,transparent);opacity:calc(clamp(0,var(--collision-impact,0),1)*.68)}
.app-shell.is-mixing .element::before{opacity:0}
.element.selected[data-category="nonmetal"]:hover:not(:disabled){filter:none}
@media(hover:hover) and (pointer:fine){.element:hover:not(:disabled),.element:focus-visible:not(:disabled){box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--tile-glow) 32%,transparent),0 0 0 .5px var(--tile-glow),0 0 25px color-mix(in srgb,var(--tile-glow) 48%,transparent),0 0 37px color-mix(in srgb,var(--tile-glow) 15%,transparent),0 9px 15px #0005}}
@media(hover:none),(pointer:coarse){.element:hover:not(:disabled){box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--tile-glow) 20%,transparent),0 0 13px color-mix(in srgb,var(--tile-glow) 29%,transparent),0 0 25px color-mix(in srgb,var(--tile-glow) 11%,transparent)}.element.selected:hover:not(:disabled){box-shadow:inset 0 0 0 .5px #ffffff38,0 0 0 .5px var(--tile-glow),0 0 20px color-mix(in srgb,var(--tile-glow) 42%,transparent),0 0 32px color-mix(in srgb,var(--tile-glow) 16%,transparent)}}
@media(prefers-reduced-motion:reduce){.element::before{opacity:0!important}}

/* Preserve the softened palette through the existing liquid and depth filters. */
.beaker-stage .dye-cloud{filter:blur(5px) saturate(1.08)}
.beaker-stage .color-plume{filter:blur(3px) saturate(1.1)}
.beaker-stage #beaker-atoms .atom.flask-ball.is-submerged{filter:brightness(var(--water-brightness,.93)) saturate(1.08)}