/* Clean editorial interface inspired by modern help and knowledge centres */
:root{--editorial-max:1240px}
body{background:#fff;color:#0f1419}
header{padding:0 1.5rem;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 1px 0 #eff3f4}
.header-inner{max-width:1480px;height:92px;gap:.8rem}
.header-mark{width:42px;height:42px;border-radius:50%;background:#0f1419;box-shadow:none}
.brand-copy{display:block;min-width:255px}.brand-kicker{display:none}header h1{font-size:1.15rem;font-weight:750;letter-spacing:-.04em}
.header-site-nav{display:flex;align-items:center;justify-content:center;gap:clamp(.25rem,1.5vw,1.6rem);flex:1;margin-left:auto}
.header-site-nav button{padding:.65rem .4rem;border:0;background:transparent;color:#536471;font-size:.78rem;font-weight:550;white-space:nowrap;cursor:pointer}
.header-site-nav button:hover{color:#0f1419}.header-site-nav button span{display:inline-block;margin-left:.2rem;font-size:.7rem}
.header-contact{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.15rem;border:1px solid #cfd9de;border-radius:999px;color:#0f1419;font-size:.76rem;font-weight:650;text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s}
.header-contact:hover{border-color:#8b98a5;background:#f7f9f9}.header-contact:active{transform:scale(.96)}
.site-hero{height:auto;min-height:0;max-width:var(--editorial-max);margin:0 auto;padding:4.6rem 1.25rem 3.8rem;border-bottom:1px solid #8b98a5;background:#fff;overflow:visible}
.site-hero::after,.site-hero>img{display:none}
.hero-copy{position:static;width:auto;max-width:none;transform:none;color:#0f1419}
.hero-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;margin-bottom:2.65rem;color:#536471;font-size:.78rem;letter-spacing:0}
.hero-breadcrumb b{color:#8b98a5;font-size:1.15rem;font-weight:400}.hero-breadcrumb strong{color:#0f1419;font-weight:600}
.hero-copy h2{max-width:1080px;margin:0;color:#0f1419;font-size:clamp(4rem,7.3vw,7.2rem);font-weight:800;line-height:.94;letter-spacing:-.075em}
.hero-copy p{max-width:830px;margin:3.25rem auto 0;color:#0f1419;font-size:clamp(1.05rem,1.7vw,1.4rem);font-weight:450;line-height:1.55;letter-spacing:-.025em}
.hero-actions{justify-content:flex-start;max-width:830px;margin:1.4rem auto 0}.hero-actions button{border-color:#0f1419;background:#0f1419}.hero-actions button:hover{background:#272c30;box-shadow:none}.hero-actions .hero-action-secondary{border-color:#cfd9de;background:#fff;color:#0f1419;backdrop-filter:none}.hero-actions .hero-action-secondary:hover{background:#f7f9f9}
main{max-width:var(--editorial-max);padding-top:2rem}
.tab-bar{top:10px;max-width:none;margin-bottom:1.8rem;padding:.35rem;border:1px solid #eff3f4;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 8px 28px rgba(15,20,25,.06)}
.tab-bar button,.tab-bar #tab-vocabulary,.tab-bar #tab-materials{height:50px;border-radius:999px;color:#536471;font-size:.72rem}.tab-bar button:hover{background:#eff3f4}.tab-bar button.active{background:#0f1419;color:#fff;box-shadow:none}
.content-wrap{border:1px solid #eff3f4;border-radius:8px;box-shadow:none}.panel{padding:clamp(1.25rem,3vw,2.6rem)}
.sim-unit,.calculator-unit,.quiz-level,.quiz-topic-card,.quiz-shell,.quiz-results,.vocab-card,.material-card,.pt-detail,.sim-card,.sn-law,.sn-chart,.sn-pathways>div,.quiz-question-card,.quiz-coming-soon{border-color:#e6ecf0!important;border-radius:8px!important;box-shadow:none!important}
.sim-unit:hover,.calculator-unit:hover,.quiz-level:hover,.quiz-topic-card:hover,.vocab-card:hover,.material-card:hover{border-color:#aab8c2!important;box-shadow:none!important}
.sim-unit>summary,.calculator-unit>summary{border-radius:8px;background:#f7f9f9!important}
.grade-selector,.vocab-level-tabs{border-radius:999px;background:#eff3f4}.grade-btn,.vocab-level-tabs button{border-radius:999px!important}.grade-btn.active,.vocab-level-tabs button.active{box-shadow:none!important}

/* Vocabulary is deliberately larger for bilingual scanning and classroom display */
.vocab-grid{gap:.8rem}
.vocab-card{grid-template-columns:44px minmax(0,1fr);gap:.85rem;padding:1.05rem 1.1rem!important}
.vocab-number{width:42px;height:42px;font-size:.66rem}
.vocab-card h3{font-size:1.18rem!important;font-weight:750!important;line-height:1.18;letter-spacing:-.025em}
.vocab-card strong{margin-top:.28rem;font-size:.94rem!important;line-height:1.3}
.vocab-card p{margin-top:.55rem;font-size:.78rem!important;line-height:1.62;color:#536471}
.vocab-summary strong{font-size:1.15rem}.vocab-summary span{font-size:.67rem}
.vocab-search{font-size:.68rem}.vocab-search input{min-height:52px;font-size:.8rem}
.footer-links a{border:1px solid #eff3f4;box-shadow:none}.site-footer{border-color:#eff3f4}
@media(max-width:1100px){.header-site-nav{display:none}.brand-copy{min-width:0}.header-contact{margin-left:auto}}
@media(max-width:620px){header{padding:0 .8rem}.header-inner{height:72px}.header-mark{width:36px;height:36px}header h1{font-size:.92rem}.header-contact{min-height:40px;padding:0 .75rem;font-size:.68rem}.site-hero{padding:2.8rem .9rem 2.6rem}.hero-breadcrumb{margin-bottom:1.8rem;font-size:.68rem}.hero-copy h2{font-size:3.55rem}.hero-copy p{margin-top:2rem;font-size:1rem}.hero-actions{margin-top:1.1rem}.tab-bar{border-radius:18px}.content-wrap{border-radius:8px}.vocab-card{grid-template-columns:38px minmax(0,1fr);padding:.9rem!important}.vocab-number{width:38px;height:38px}.vocab-card h3{font-size:1.12rem!important}.vocab-card strong{font-size:.92rem!important}.vocab-card p{font-size:.8rem!important}}

/* Teacher-focused refinement: compact identity, chemistry imagery and warmer colour */
html{font-size:20px}
header{background:rgba(255,255,255,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.header-inner{height:68px;max-width:1240px}.header-mark{width:36px;height:36px;border-radius:11px;background:linear-gradient(145deg,#286d8f,#584f9b)}.header-mark svg{width:22px;height:22px}.brand-copy{min-width:0}header h1{font-size:1rem}.header-site-nav,.header-contact{display:none!important}
.site-hero{position:relative;height:440px;max-width:1240px;margin:1rem auto 0;padding:0 1.5rem;border:0;border-radius:24px;background:#24344a;overflow:hidden;box-shadow:0 24px 60px rgba(35,47,68,.16)}
.site-hero>img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;transform:scale(1.015)}
.site-hero::after{display:block;background:linear-gradient(90deg,rgba(18,28,43,.9),rgba(26,38,56,.58) 50%,rgba(20,30,44,.12)),linear-gradient(0deg,rgba(21,29,43,.32),transparent 60%)}
.hero-copy{position:absolute;z-index:2;left:clamp(1.5rem,5vw,4.5rem);top:50%;width:min(680px,62%);transform:translateY(-50%);color:#fff}.hero-breadcrumb{margin-bottom:1rem;color:rgba(255,255,255,.72);font-size:.68rem}.hero-breadcrumb b,.hero-breadcrumb strong{color:rgba(255,255,255,.88)}
.hero-copy h2{color:#fff;font-size:clamp(2.8rem,5vw,4.8rem);line-height:.96;letter-spacing:-.06em}.hero-copy p{max-width:620px;margin:1rem 0 0;color:rgba(255,255,255,.86);font-size:1rem;line-height:1.5}.hero-actions{max-width:none;margin:1.1rem 0 0}.hero-actions button{border-color:#68b5e8;background:linear-gradient(135deg,#2384c2,#4169d7);box-shadow:0 8px 22px rgba(22,105,181,.28)}.hero-actions .hero-action-secondary{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(10px)}
main{padding-top:1.25rem}.tab-bar{margin-bottom:1.1rem;border-color:rgba(64,91,126,.1);background:rgba(247,250,253,.9);box-shadow:0 9px 28px rgba(43,67,98,.08)}.tab-bar button:hover{background:#e8f2f8;color:#285d7c}.tab-bar button.active{background:linear-gradient(135deg,#287a9f,#5b55a3);box-shadow:0 6px 16px rgba(65,78,145,.2)}
.content-wrap{border-color:#dfe9ef;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f8f7fc);box-shadow:0 18px 52px rgba(46,66,91,.08)}
.sim-unit,.calculator-unit,.quiz-level,.quiz-topic-card,.quiz-shell,.quiz-results,.vocab-card,.material-card,.pt-detail,.sim-card,.sn-law,.sn-chart,.sn-pathways>div,.quiz-question-card,.quiz-coming-soon{border-color:#dce8ed!important;border-radius:16px!important;box-shadow:0 6px 20px rgba(48,76,93,.055)!important}
.sim-unit:nth-child(3n+1),.quiz-topic-card:nth-child(3n+1),.vocab-card:nth-child(3n+1){border-left:4px solid #49a3be!important}.sim-unit:nth-child(3n+2),.quiz-topic-card:nth-child(3n+2),.vocab-card:nth-child(3n+2){border-left:4px solid #8174c7!important}.sim-unit:nth-child(3n),.quiz-topic-card:nth-child(3n),.vocab-card:nth-child(3n){border-left:4px solid #55a67d!important}
.sim-unit:hover,.calculator-unit:hover,.quiz-level:hover,.quiz-topic-card:hover,.vocab-card:hover,.material-card:hover{transform:translateY(-4px);border-color:#a9cbd8!important;box-shadow:0 15px 34px rgba(48,76,93,.11)!important}
.grade-selector,.vocab-level-tabs{background:#eaf2f5}.grade-btn.active,.vocab-level-tabs button.active{background:linear-gradient(135deg,#fff,#f4f1ff)!important;color:#315f78!important}
.vocab-card{background:linear-gradient(145deg,#fff,#f7fbfd)!important}.vocab-card strong{color:#5b55a3}.vocab-card p{font-size:.84rem!important}.vocab-card .vocab-definition-cn{margin-top:.35rem;padding-top:.42rem;border-top:1px solid #e6edf1;color:#315f78;font-size:.82rem!important;line-height:1.65}
.site-footer{display:block;width:100%;margin-top:1.5rem;padding:1.25rem 1.35rem 0;border:1px solid #dfe9ef;border-radius:18px;background:linear-gradient(145deg,#f7fbfd,#f6f3fb);box-shadow:none;overflow:hidden}.footer-links{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;padding-bottom:1rem}.footer-links a{flex:0 0 auto;background:#fff}.footer-sections{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:start;gap:1.2rem;width:100%;padding:1.2rem 0}.footer-section{min-width:0}.footer-section h2{font-size:1rem}.footer-section p{overflow-wrap:anywhere;font-size:.72rem}.footer-bottom{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.8rem 0;border-top:1px solid #dfe9ef;font-size:.66rem}
@media(max-width:820px){.site-hero{margin:.7rem .7rem 0}.footer-sections{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:620px){html{font-size:18px}.header-inner{height:60px}.site-hero{height:470px;padding:0;border-radius:18px}.site-hero>img{object-position:62% center}.hero-copy{left:1.25rem;right:1.25rem;top:auto;bottom:1.6rem;width:auto;transform:none}.hero-breadcrumb{display:none}.hero-copy h2{font-size:3rem}.hero-copy p{font-size:.92rem}.content-wrap{border-radius:16px}.vocab-card p,.vocab-card .vocab-definition-cn{font-size:.84rem!important}.footer-sections{grid-template-columns:1fr!important}.footer-bottom{align-items:flex-start;flex-direction:column;gap:.3rem}}

/* Reliable click colour: short feedback instead of a stuck hover state */
.sim-choice:hover:not(.active){border-color:#dce8ed;background:#fff;box-shadow:0 8px 20px rgba(48,76,93,.07)}
.sim-choice.click-color{animation:choiceColourPulse .55s cubic-bezier(.2,.8,.2,1)}
@keyframes choiceColourPulse{0%{background:#fff}35%{border-color:#68aec7;background:#e8f5fa;box-shadow:0 0 0 4px rgba(64,153,188,.13)}100%{border-color:#dce8ed;background:#fff;box-shadow:0 6px 18px rgba(48,76,93,.055)}}
#tab-simulations.active{background:linear-gradient(135deg,#267ea5,#3d6fba)}
#tab-calculators.active{background:linear-gradient(135deg,#6556b2,#865eb5)}
#tab-quiz.active{background:linear-gradient(135deg,#318866,#4b9d70)}
#tab-periodic.active{background:linear-gradient(135deg,#b87531,#cf8a35)}
#tab-vocabulary.active{background:linear-gradient(135deg,#4d65b2,#705eac)}
#tab-materials.active{background:linear-gradient(135deg,#a44f74,#bb627d)}
.tab-bar button:hover,.tab-bar #tab-vocabulary:hover,.tab-bar #tab-materials:hover{color:#fff!important;background:linear-gradient(135deg,#397fa5,#6b60af)!important;text-shadow:0 1px 2px rgba(20,35,58,.18);box-shadow:0 6px 16px rgba(55,77,137,.18)}
.tab-bar button:hover svg{color:#fff;stroke:#fff}

/* Vertical level itinerary shared by vocabulary and materials */
.vocab-browser,.materials-browser{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:start;gap:1.15rem}
.vocab-level-tabs,.materials-level-tabs{position:sticky;top:86px;display:flex;flex-direction:column;gap:.45rem;padding:.5rem;border-radius:18px;background:linear-gradient(180deg,#eaf4f7,#f0edf8)}
.vocab-level-tabs button,.materials-level-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:.16rem;width:100%;min-height:72px;padding:.75rem .8rem;border:0;border-radius:13px;background:transparent;color:#536471;text-align:left;cursor:pointer}
.vocab-level-tabs button b,.materials-level-tabs button b{font-size:.9rem;color:#253949}.vocab-level-tabs button span,.materials-level-tabs button span{font-size:.61rem;line-height:1.35}
.vocab-level-tabs button:hover,.materials-level-tabs button:hover{background:rgba(255,255,255,.58)}
.vocab-level-tabs button.active,.materials-level-tabs button.active{background:#fff!important;color:#315f78!important;box-shadow:0 6px 18px rgba(48,76,93,.1)!important}
.vocab-level-tabs button.active::before,.materials-level-tabs button.active::before{content:"";position:absolute;left:-.18rem;top:50%;width:4px;height:36px;border-radius:999px;background:linear-gradient(#3f9dbc,#7567bc);transform:translateY(-50%)}
.vocab-results,.materials-results{min-width:0}.vocab-summary{min-height:56px;margin-bottom:.75rem;padding:.15rem .2rem .7rem}.material-level-panel.active{animation:levelPanelIn .35s cubic-bezier(.16,1,.3,1)}
.materials-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;padding:2rem;border:1px dashed #b8cbd5;border-radius:16px;background:linear-gradient(145deg,#f8fcfd,#f7f4fb);color:#536471;text-align:center}.materials-empty b{color:#253949;font-size:1.05rem}.materials-empty span{margin-top:.35rem;font-size:.76rem}
@keyframes levelPanelIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@media(max-width:760px){.vocab-browser,.materials-browser{grid-template-columns:132px minmax(0,1fr);gap:.7rem}.vocab-level-tabs,.materials-level-tabs{top:76px;padding:.35rem}.vocab-level-tabs button,.materials-level-tabs button{min-height:66px;padding:.62rem}.vocab-level-tabs button b,.materials-level-tabs button b{font-size:.8rem}.vocab-level-tabs button span,.materials-level-tabs button span{font-size:.55rem}.vocab-grid{grid-template-columns:1fr}.material-summary{grid-template-columns:1fr}.material-actions{justify-content:flex-start}}
@media(max-width:440px){.vocab-browser,.materials-browser{grid-template-columns:108px minmax(0,1fr)}.vocab-level-tabs button span,.materials-level-tabs button span{display:none}.vocab-level-tabs button,.materials-level-tabs button{min-height:52px;justify-content:center}.vocab-card{grid-template-columns:1fr}.vocab-number{display:none}}

/* Calculator level itinerary */
.calculator-browser{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:start;gap:1.15rem}.calculator-level-tabs{position:sticky;top:86px;display:flex;flex-direction:column;gap:.45rem;padding:.5rem;border-radius:18px;background:linear-gradient(180deg,#eaf4f7,#f0edf8)}.calculator-level-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:.16rem;width:100%;min-height:72px;padding:.75rem .8rem;border:0;border-radius:13px;background:transparent;color:#536471;text-align:left;cursor:pointer}.calculator-level-tabs button b{font-size:.9rem;color:#253949}.calculator-level-tabs button span{font-size:.61rem;line-height:1.35}.calculator-level-tabs button:hover{background:rgba(255,255,255,.58)}.calculator-level-tabs button.active{position:relative;background:#fff!important;color:#315f78!important;box-shadow:0 6px 18px rgba(48,76,93,.1)!important}.calculator-level-tabs button.active::before{content:"";position:absolute;left:-.18rem;top:50%;width:4px;height:36px;border-radius:999px;background:linear-gradient(#3f9dbc,#7567bc);transform:translateY(-50%)}.calculator-results{min-width:0}.calculator-level-panel.active{animation:levelPanelIn .35s cubic-bezier(.16,1,.3,1)}.calculator-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;padding:2rem;border:1px dashed #b8cbd5;border-radius:16px;background:linear-gradient(145deg,#f8fcfd,#f7f4fb);color:#536471;text-align:center}.calculator-empty b{color:#253949;font-size:1.05rem}.calculator-empty span{margin-top:.35rem;font-size:.76rem}@media(max-width:760px){.calculator-browser{grid-template-columns:132px minmax(0,1fr);gap:.7rem}.calculator-level-tabs{top:76px;padding:.35rem}.calculator-level-tabs button{min-height:66px;padding:.62rem}.calculator-level-tabs button b{font-size:.8rem}.calculator-level-tabs button span{font-size:.55rem}}@media(max-width:440px){.calculator-browser{grid-template-columns:108px minmax(0,1fr)}.calculator-level-tabs button span{display:none}.calculator-level-tabs button{min-height:52px;justify-content:center}}

/* Pixel-centred unit chevron — avoids font-glyph baseline misalignment */
.sim-unit summary::before{content:"";display:block;width:24px;height:24px;flex:0 0 24px;border-radius:50%;background-color:#e8f3f6;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 7.5 14 12l-4.5 4.5' fill='none' stroke='%232b7d9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:16px 16px;transform:rotate(0deg);transition:transform .25s cubic-bezier(.2,.9,.2,1),background-color .2s ease}
.sim-unit[open] summary::before{transform:rotate(90deg)}
.sim-unit summary:hover::before{background-color:#dcedf3}

/* Shared two-column library pattern: level itinerary left, content right */
.simulation-browser,.quiz-browser{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:start;gap:1.15rem}
.grade-selector,.quiz-levels{position:sticky;top:86px;display:flex;flex-direction:column;gap:.45rem;margin:0;padding:.5rem;border-radius:18px;background:linear-gradient(180deg,#eaf4f7,#f0edf8)}
.grade-btn,.quiz-level{position:relative;display:flex!important;flex-direction:column;align-items:flex-start;justify-content:center;gap:.16rem;width:100%;min-height:72px;padding:.75rem .8rem!important;border:0!important;border-radius:13px!important;background:transparent!important;color:#536471!important;text-align:left;box-shadow:none!important;transform:none!important}
.grade-btn strong{font-size:.9rem!important;color:#253949}.grade-btn span{font-size:.61rem!important;line-height:1.35}.grade-btn:hover,.quiz-level:hover{background:rgba(255,255,255,.58)!important}
.grade-btn.active,.quiz-level.active{background:#fff!important;color:#315f78!important;box-shadow:0 6px 18px rgba(48,76,93,.1)!important}
.grade-btn.active::before,.quiz-level.active::before{content:"";position:absolute;left:-.18rem;top:50%;width:4px;height:36px;border-radius:999px;background:linear-gradient(#3f9dbc,#7567bc);transform:translateY(-50%)}
.grade-group,.quiz-level-content{min-width:0}.grade-heading{min-height:54px;margin:0 0 .7rem;padding:.15rem .2rem .65rem;border-bottom:1px solid #dce8ed}
.quiz-level-code{display:block;width:auto;height:auto;border-radius:0;background:transparent!important;color:#253949!important;font-size:.9rem!important;line-height:1.15}.quiz-level>span:nth-child(2){display:block}.quiz-level strong{font-size:.72rem!important;color:#253949}.quiz-level small{font-size:.57rem!important;line-height:1.35}.quiz-level>b{display:none}.quiz-level.active .quiz-level-code{background:transparent!important;color:#315f78!important}
.quiz-topic-picker,.quiz-workspace,.quiz-results,.quiz-coming-soon{min-width:0}.quiz-topic-tools{margin-top:0}
@media(max-width:760px){.simulation-browser,.quiz-browser{grid-template-columns:132px minmax(0,1fr);gap:.7rem}.grade-selector,.quiz-levels{top:76px;padding:.35rem}.grade-btn,.quiz-level{min-height:66px;padding:.62rem!important}.grade-btn strong,.quiz-level-code{font-size:.8rem!important}.grade-btn span,.quiz-level small{font-size:.55rem!important}.quiz-level strong{font-size:.64rem!important}.simulation-choices{grid-template-columns:1fr}}
@media(max-width:440px){.simulation-browser,.quiz-browser{grid-template-columns:108px minmax(0,1fr)}.grade-btn,.quiz-level{min-height:52px}.grade-btn span,.quiz-level>span:nth-child(2){display:none}.grade-btn,.quiz-level{align-items:center}.grade-btn.active::before,.quiz-level.active::before{height:28px}.grade-heading{align-items:flex-start}.grade-heading small{font-size:.58rem}}

/* Atomic model: truly centred symbols and selectable element set */
.atomic-symbol{position:relative;display:block!important;width:82px;height:82px;padding:0!important;overflow:hidden}.atomic-symbol span,.atomic-symbol small{position:absolute;left:9px;z-index:2;line-height:1}.atomic-symbol span{top:9px}.atomic-symbol small{bottom:9px}.atomic-symbol strong{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;font-size:2.25rem!important;line-height:1!important;text-align:center;transform:none}.atomic-symbol[data-symbol-length="2"] strong{font-size:1.82rem!important;letter-spacing:-.06em}
.atomic-element-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;padding:.45rem;border-radius:16px;background:linear-gradient(90deg,#eaf4f7,#f0edf8)}.atomic-element-picker button{display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:54px;padding:.55rem;border:0;border-radius:12px;background:transparent;color:#536471;cursor:pointer}.atomic-element-picker button:hover{background:rgba(255,255,255,.62);color:#253949}.atomic-element-picker button.active{background:#fff;color:#315f78;box-shadow:0 5px 16px rgba(48,76,93,.1)}.atomic-element-picker b{font-size:1.05rem}.atomic-element-picker span{font-size:.65rem}.atomic-particle-buttons button:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:620px){.atomic-symbol{width:70px;height:70px}.atomic-symbol strong{font-size:1.95rem!important}.atomic-symbol[data-symbol-length="2"] strong{font-size:1.58rem!important}.atomic-element-picker{grid-template-columns:repeat(5,1fr);gap:.25rem}.atomic-element-picker button{min-height:50px;flex-direction:column;gap:.05rem;padding:.35rem}.atomic-element-picker b{font-size:.9rem}.atomic-element-picker span{display:none}}

/* Keep selected top navigation tabs legible on coloured backgrounds. */
.tab-bar button.active,
.tab-bar #tab-vocabulary.active,
.tab-bar #tab-materials.active {
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.tab-bar button.active svg,
.tab-bar #tab-vocabulary.active svg,
.tab-bar #tab-materials.active svg {
  color:#fff!important;
  stroke:#fff!important;
}