* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --bg: #07101d; --panel: rgba(13,27,45,.84); --line: rgba(164,207,230,.12);
    --text: #eef8ff; --muted: #7992a7; --cyan: #43d9de; --blue: #5488ff;
    --green: #55dfa0; --orange: #ffac5c; --red: #ff6685;
}
html, body { min-height: 100%; }
body { min-height:100vh; overflow-x:hidden; color:var(--text); background:radial-gradient(circle at 15% 15%,rgba(24,103,127,.2),transparent 32%),radial-gradient(circle at 85% 75%,rgba(49,62,150,.16),transparent 35%),var(--bg); font-family:'Manrope',sans-serif; }
button { font: inherit; }
.orb-field { position:fixed; inset:0; overflow:hidden; pointer-events:none; }
.orb-field::after { content:''; position:absolute; inset:0; opacity:.3; background-image:linear-gradient(rgba(107,187,215,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(107,187,215,.025) 1px,transparent 1px); background-size:44px 44px; }
.orb-field i { position:absolute; width:280px; height:280px; border:1px solid rgba(67,217,222,.1); border-radius:50%; animation:float 12s ease-in-out infinite alternate; }
.orb-field i::before,.orb-field i::after { content:''; position:absolute; inset:35%; border:1px solid rgba(67,217,222,.12); border-radius:50%; transform:rotate(55deg) scaleX(2.8); }
.orb-field i::after { transform:rotate(-55deg) scaleX(2.8); }
.orb-field i:nth-child(1){left:-100px;top:18%}.orb-field i:nth-child(2){right:-80px;top:8%;animation-delay:-5s}.orb-field i:nth-child(3){right:15%;bottom:-200px;animation-delay:-8s}
@keyframes float { to { transform:translateY(-35px) rotate(15deg); } }
.app-shell { position:relative; z-index:1; width:min(1180px,94vw); min-height:100vh; margin:auto; display:flex; flex-direction:column; }
.topbar { min-height:78px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:13px; color:inherit; text-decoration:none; }
.brand > span:last-child { display:flex; flex-direction:column; }
.brand strong { font-size:17px; letter-spacing:4px; }
.brand small { color:var(--muted); font:500 8px 'DM Mono'; letter-spacing:2px; }
.atom-logo { position:relative; width:38px; height:38px; display:block; }
.atom-logo i { position:absolute; inset:8px 1px; border:1px solid var(--cyan); border-radius:50%; }
.atom-logo i:first-child { transform:rotate(60deg); }.atom-logo i:nth-child(2){transform:rotate(-60deg)}
.atom-logo b { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--cyan); left:16px; top:16px; box-shadow:0 0 12px var(--cyan); }
.sound-toggle { border:1px solid var(--line); border-radius:6px; padding:9px 12px; color:var(--muted); background:rgba(255,255,255,.02); font:500 9px 'DM Mono'; letter-spacing:1px; cursor:pointer; }
.screen { display:none; flex:1; }.screen.active { display:flex; }

#start-screen { align-items:center; gap:clamp(40px,8vw,100px); padding:50px 0; }
.hero-copy { flex:1; max-width:530px; }
.kicker { color:var(--cyan); font:500 10px 'DM Mono'; letter-spacing:3px; }
.hero-copy h1 { margin:16px 0 24px; font-size:clamp(48px,6vw,80px); line-height:.94; letter-spacing:-4px; }
.hero-copy h1 span { color:transparent; -webkit-text-stroke:1px rgba(144,223,235,.68); }
.intro { max-width:470px; color:#91a6b7; font-size:16px; line-height:1.7; }
.setup-card { width:min(540px,100%); padding:26px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,rgba(19,39,62,.9),rgba(7,17,30,.92)); box-shadow:0 30px 80px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.04); backdrop-filter:blur(18px); }
.setup-section + .setup-section { margin-top:25px; padding-top:22px; border-top:1px solid var(--line); }
.section-heading { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.section-heading > span { color:var(--cyan); font:500 9px 'DM Mono'; }
.section-heading div { display:flex; flex-direction:column; }
.section-heading strong { font-size:11px; letter-spacing:1px; }
.section-heading small { color:var(--muted); font-size:10px; }
.mode-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.mode-option { min-height:96px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:11px; border:1px solid var(--line); border-radius:8px; color:#a6b7c8; background:rgba(255,255,255,.02); cursor:pointer; transition:.18s; }
.mode-option b { color:var(--cyan); font:500 20px 'DM Mono'; }
.mode-option span { margin-top:8px; font-size:11px; font-weight:700; }.mode-option small{color:#61778c;font-size:8px}
.mode-option:hover,.mode-option.selected { border-color:rgba(67,217,222,.55); color:#fff; background:rgba(67,217,222,.08); transform:translateY(-2px); }
.difficulty-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.difficulty { padding:11px 9px; text-align:left; border:1px solid var(--line); border-radius:7px; color:#a7b9c8; background:rgba(255,255,255,.02); cursor:pointer; }
.difficulty strong,.difficulty small { display:block; }.difficulty strong{font-size:9px;letter-spacing:.6px}.difficulty small{margin-top:3px;color:#61778c;font-size:8px}
.difficulty.selected { border-color:rgba(84,136,255,.6); background:rgba(84,136,255,.1); color:#fff; }
.start-button { width:100%; margin-top:24px; padding:14px 16px; display:flex; align-items:center; justify-content:center; gap:18px; border:0; border-radius:8px; color:#04121a; background:linear-gradient(100deg,var(--cyan),#62e3bd); font-weight:800; letter-spacing:1px; cursor:pointer; box-shadow:0 12px 28px rgba(67,217,222,.16); }
.start-button:hover { filter:brightness(1.1); transform:translateY(-1px); }
.best-line { display:flex; justify-content:space-between; margin-top:14px; color:var(--muted); font:500 8px 'DM Mono'; letter-spacing:1px; }.best-line strong{color:#b7c7d5}

#game-screen { flex-direction:column; padding:22px 0 35px; }
.game-hud { display:grid; grid-template-columns:100px 100px 1fr 120px; gap:14px; align-items:center; padding:13px 17px; border:1px solid var(--line); border-radius:11px; background:rgba(10,23,39,.75); }
.hud-group,.hud-progress div:first-child { display:flex; flex-direction:column; }.game-hud span{color:var(--muted);font:500 8px 'DM Mono';letter-spacing:1px}.game-hud strong{font:500 19px 'DM Mono'}
.hud-progress > div:first-child { flex-direction:row; justify-content:space-between; align-items:center; }.hud-progress strong{font-size:10px}.progress-track{height:4px;margin-top:8px;background:rgba(255,255,255,.06);overflow:hidden}.progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue));transition:width .3s}
.hud-lives { display:flex; justify-content:flex-end; gap:8px; }.hud-lives i{width:16px;height:16px;background:var(--red);clip-path:polygon(50% 100%,4% 42%,8% 18%,27% 5%,50% 24%,73% 5%,92% 18%,96% 42%);filter:drop-shadow(0 0 5px rgba(255,102,133,.4));transition:.2s}.hud-lives i.lost{opacity:.13;transform:scale(.8)}
.quiz-layout { flex:1; display:grid; grid-template-columns:160px minmax(400px,700px); justify-content:center; align-items:center; gap:clamp(25px,5vw,70px); padding:28px 0; }
.timer-panel { display:flex; flex-direction:column; align-items:center; }
.timer-ring { position:relative; width:126px; height:126px; display:grid; place-items:center; }
.timer-ring svg { position:absolute; inset:0; transform:rotate(-90deg); }.timer-ring circle{fill:none;stroke-width:5}.timer-bg{stroke:rgba(255,255,255,.07)}.timer-value{stroke:var(--cyan);stroke-linecap:round;stroke-dasharray:276.46;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear,stroke .2s}
.timer-ring strong{font:500 31px 'DM Mono';}.timer-ring > span{position:absolute;top:78px;color:var(--muted);font:500 7px 'DM Mono';letter-spacing:2px}
.hint-button { margin-top:22px; padding:9px 12px; border:1px solid var(--line); border-radius:7px; color:#b6c8d6; background:rgba(255,255,255,.03); font:600 9px 'DM Mono'; cursor:pointer; }.hint-button span{display:inline-grid;place-items:center;width:17px;height:17px;margin-right:5px;border-radius:50%;background:rgba(67,217,222,.12);color:var(--cyan)}.hint-button:disabled{opacity:.35;cursor:not-allowed}.timer-panel>small{margin-top:7px;color:#53697c;font:500 7px 'DM Mono';letter-spacing:1px}
.question-panel { width:100%; max-width:680px; text-align:center; }
.question-type { color:var(--cyan); font:500 9px 'DM Mono'; letter-spacing:3px; }
.element-display { position:relative; width:170px; height:184px; margin:15px auto 18px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(67,217,222,.38); border-radius:12px; background:linear-gradient(145deg,rgba(67,217,222,.13),rgba(10,25,43,.7)); box-shadow:0 22px 50px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.08); }
.atomic-number{position:absolute;left:13px;top:10px;color:#91aabd;font:500 13px 'DM Mono'}.element-symbol{font:500 64px 'DM Mono';line-height:1;color:#f3fcff;text-shadow:0 0 24px rgba(67,217,222,.22)}.element-name{margin-top:10px;font-size:11px;font-weight:700;letter-spacing:1px}.atomic-mass{margin-top:3px;color:#728ba0;font:400 9px 'DM Mono'}
.question-panel h2 { min-height:31px; font-size:21px; }
.clue-row { min-height:27px; display:flex; justify-content:center; gap:7px; margin:8px 0 15px; }.clue-row span{padding:5px 8px;border:1px solid var(--line);border-radius:20px;color:#7893a8;font:500 8px 'DM Mono'}
.answers { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.answer { min-height:57px; display:flex; align-items:center; gap:12px; padding:10px 14px; text-align:left; border:1px solid var(--line); border-radius:9px; color:#b9cad8; background:rgba(13,28,46,.75); cursor:pointer; transition:.16s; }.answer b{display:grid;place-items:center;width:25px;height:25px;border-radius:5px;background:rgba(255,255,255,.05);color:#71879a;font:500 10px 'DM Mono'}.answer span{font-size:13px;font-weight:700}.answer:hover:not(:disabled){border-color:rgba(67,217,222,.5);color:#fff;transform:translateY(-2px)}.answer.correct{border-color:var(--green);background:rgba(85,223,160,.1);color:#eafff5}.answer.wrong{border-color:var(--red);background:rgba(255,102,133,.1);color:#ffeaf0}.answer:disabled{cursor:default}

.feedback { display:none; align-items:center; gap:10px; margin-top:12px; padding:11px 12px; text-align:left; border:1px solid var(--line); border-radius:9px; background:rgba(8,19,33,.88); }.feedback.visible{display:flex}.feedback-icon{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:rgba(85,223,160,.12);color:var(--green)}.feedback>div:nth-child(2){flex:1}.feedback strong{font-size:11px}.feedback p{margin-top:2px;color:#748da1;font-size:10px}.feedback button{border:0;color:var(--cyan);background:transparent;font:500 9px 'DM Mono';cursor:pointer}.feedback.incorrect .feedback-icon{background:rgba(255,102,133,.12);color:var(--red)}
#result-screen { align-items:center; justify-content:center; padding:50px 0; }.result-card{width:min(600px,100%);padding:38px;text-align:center;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,rgba(18,39,62,.92),rgba(7,17,30,.94));box-shadow:0 35px 90px rgba(0,0,0,.3)}
.result-orbit{position:relative;width:105px;height:105px;margin:0 auto 25px;display:grid;place-items:center}.result-orbit span{font:500 45px 'DM Mono';color:var(--cyan)}.result-orbit i{position:absolute;inset:14px 0;border:1px solid rgba(67,217,222,.35);border-radius:50%;transform:rotate(45deg)}.result-orbit i:last-child{transform:rotate(-45deg)}
.result-card h2{margin:12px 0 7px;font-size:32px}.result-card>p:not(.kicker){color:#8198aa;font-size:13px}.result-stats{display:grid;grid-template-columns:1fr 1fr;margin:28px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden}.result-stats div{display:flex;flex-direction:column;gap:4px;padding:16px}.result-stats div:nth-child(even){border-left:1px solid var(--line)}.result-stats div:nth-child(n+3){border-top:1px solid var(--line)}.result-stats span{color:var(--muted);font:500 8px 'DM Mono';letter-spacing:1px}.result-stats strong{font:500 20px 'DM Mono'}
.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.result-actions .start-button{margin:0}.secondary-button{border:1px solid var(--line);border-radius:8px;color:#b8cad8;background:rgba(255,255,255,.03);font-weight:700;cursor:pointer}.secondary-button:hover{border-color:rgba(67,217,222,.4)}
.footer{min-height:48px;margin-top:auto;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);color:#456074;font:500 7px 'DM Mono';letter-spacing:1.5px}
@media(max-width:800px){#start-screen{flex-direction:column;padding:35px 0}.hero-copy{text-align:center}.intro{margin:auto}.quiz-layout{grid-template-columns:1fr;padding-top:18px}.timer-panel{flex-direction:row;justify-content:center;gap:15px}.timer-ring{width:82px;height:82px}.timer-ring strong{font-size:23px}.timer-ring>span{top:53px}.hint-button{margin:0}.timer-panel>small{display:none}.question-panel{margin:auto}.element-display{width:145px;height:155px}.element-symbol{font-size:52px}}
@media(max-width:560px){.app-shell{width:94vw}.topbar{min-height:64px}.mode-grid{grid-template-columns:1fr 1fr}.difficulty-row{grid-template-columns:1fr}.setup-card{padding:18px}.hero-copy h1{font-size:46px}.game-hud{grid-template-columns:1fr 1fr 90px;padding:10px}.hud-progress{grid-column:1/-1;grid-row:2}.hud-lives{grid-column:3;grid-row:1}.quiz-layout{padding-bottom:15px}.answers{grid-template-columns:1fr}.answer{min-height:49px}.question-panel h2{font-size:17px}.feedback{align-items:flex-start}.feedback button{align-self:center}.result-card{padding:25px 17px}.footer span:last-child{display:none}}

.visit-count {
    color: #607b90;
    font-size: 6px;
    letter-spacing: 1.2px;
    white-space: nowrap;
}
.footer-motto { text-align: right; }
@media (max-width: 560px) {
    .footer { gap: 16px; }
    .footer-motto { display: none; }
}

/* Search landing page and supporting content */
html { scroll-behavior: smooth; }
a { color: inherit; }
.skip-link { position:fixed; left:16px; top:-60px; z-index:100; padding:10px 14px; border-radius:6px; color:#04121a; background:var(--cyan); font-weight:800; text-decoration:none; transition:top .2s; }
.skip-link:focus { top:16px; }
.top-actions { display:flex; align-items:center; gap:20px; }
.site-nav { display:flex; align-items:center; gap:18px; }
.site-nav a { color:#8299ab; font:600 9px 'DM Mono'; letter-spacing:1px; text-decoration:none; text-transform:uppercase; }
.site-nav a:hover,.site-nav a:focus { color:var(--cyan); }
.exam-note { max-width:500px; margin-top:14px; color:#617b90; font:500 9px/1.7 'DM Mono'; letter-spacing:.4px; }
.learning-content { position:relative; z-index:1; width:min(1080px,92vw); margin:0 auto; padding:100px 0 90px; }
.content-intro { max-width:780px; }
.content-intro h2,.faq h2 { margin:13px 0 18px; font-size:clamp(30px,4vw,48px); line-height:1.08; letter-spacing:-1.8px; }
.content-intro > p:last-child { color:#8ca2b4; font-size:16px; line-height:1.8; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:42px; }
.feature-grid article,.study-card,.resource-card { border:1px solid var(--line); border-radius:14px; background:linear-gradient(145deg,rgba(17,35,56,.8),rgba(7,17,30,.76)); box-shadow:0 24px 60px rgba(0,0,0,.18); }
.feature-grid article { min-height:230px; padding:25px; }
.feature-grid article > span { color:var(--cyan); font:500 9px 'DM Mono'; letter-spacing:1px; }
.feature-grid h3 { margin:35px 0 12px; font-size:18px; }
.feature-grid p,.study-card li,.resource-card span,.resource-note,.faq details p { color:#8299ab; font-size:13px; line-height:1.75; }
.study-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,.8fr); gap:16px; margin-top:16px; }
.study-card,.resource-card { padding:30px; }
.eyebrow { color:var(--cyan); font:500 8px 'DM Mono'; letter-spacing:2px; }
.study-card h2,.resource-card h2 { margin:10px 0 24px; font-size:24px; line-height:1.2; }
.study-card ol { display:grid; gap:15px; padding-left:20px; }
.study-card li { padding-left:6px; }
.study-card strong { color:#dcebf4; }
.resource-card { display:flex; flex-direction:column; }
.resource-card a { display:flex; flex-direction:column; gap:5px; padding:16px 0; border-top:1px solid var(--line); text-decoration:none; }
.resource-card a:hover strong { color:var(--cyan); }
.resource-card strong { font-size:13px; }
.resource-card span { font-size:11px; }
.resource-note { margin-top:auto; padding-top:20px; font-size:10px; }
.faq { max-width:850px; margin:95px auto 0; }
.faq > .kicker,.faq > h2 { text-align:center; }
.faq details { border-top:1px solid var(--line); }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { position:relative; padding:20px 38px 20px 4px; font-size:14px; font-weight:700; cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; position:absolute; right:8px; color:var(--cyan); font:500 20px 'DM Mono'; }
.faq details[open] summary::after { content:'−'; }
.faq details p { padding:0 45px 20px 4px; }
.site-footer { position:relative; z-index:1; width:min(1080px,92vw); margin:0 auto; padding:32px 0 38px; display:grid; grid-template-columns:1fr auto; gap:12px 30px; align-items:end; border-top:1px solid var(--line); color:#60788c; }
.footer-brand { color:#d7e8f2; font-weight:800; letter-spacing:1px; text-decoration:none; }
.site-footer p { margin-top:5px; font-size:11px; }
.site-footer nav { display:flex; gap:18px; }
.site-footer nav a { font:500 9px 'DM Mono'; letter-spacing:1px; text-decoration:none; text-transform:uppercase; }
.site-footer nav a:hover { color:var(--cyan); }
.site-footer small { grid-column:1/-1; font:500 8px 'DM Mono'; letter-spacing:.7px; }

/* Static educational and trust pages */
.page-header { position:relative; z-index:2; width:min(1080px,92vw); min-height:78px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.article-shell { position:relative; z-index:1; width:min(860px,92vw); margin:0 auto; padding:75px 0 100px; }
.article-shell.wide { width:min(1080px,92vw); }
.article-header { max-width:760px; margin-bottom:48px; }
.article-header h1 { margin:14px 0 18px; font-size:clamp(38px,6vw,65px); line-height:1; letter-spacing:-3px; }
.article-header .lead { color:#91a6b7; font-size:17px; line-height:1.75; }
.updated { display:block; margin-top:16px; color:#5e7689; font:500 8px 'DM Mono'; letter-spacing:1px; }
.prose { color:#91a6b7; font-size:15px; line-height:1.85; }
.prose h2 { margin:52px 0 14px; color:var(--text); font-size:27px; line-height:1.25; }
.prose h3 { margin:30px 0 9px; color:#dcebf4; font-size:18px; }
.prose p + p { margin-top:16px; }
.prose ul,.prose ol { display:grid; gap:10px; margin:16px 0; padding-left:24px; }
.prose strong { color:#dcebf4; }
.prose a { color:var(--cyan); }
.prose .callout { margin:30px 0; padding:22px 24px; border:1px solid rgba(67,217,222,.25); border-radius:10px; color:#a6bdcb; background:rgba(67,217,222,.06); }
.page-cta { margin-top:55px; padding:27px; display:flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid var(--line); border-radius:12px; background:rgba(15,32,52,.75); }
.page-cta p { color:#839aad; }
.page-cta a { flex:0 0 auto; padding:11px 16px; border-radius:7px; color:#04121a; background:var(--cyan); font-size:12px; font-weight:800; text-decoration:none; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-card { padding:25px; border:1px solid var(--line); border-radius:12px; background:rgba(15,31,50,.72); }
.contact-card h2 { margin:0 0 10px; font-size:20px; }
.contact-card p { color:#839aad; line-height:1.7; }
.contact-card a { display:inline-block; margin-top:15px; color:var(--cyan); }
.table-wrap { margin-top:35px; overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:rgba(8,20,34,.82); }
.element-table { width:100%; border-collapse:collapse; font-size:13px; }
.element-table th,.element-table td { padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); }
.element-table th { position:sticky; top:0; color:var(--cyan); background:#0b1929; font:500 9px 'DM Mono'; letter-spacing:1px; text-transform:uppercase; }
.element-table td:first-child,.element-table td:nth-child(2),.element-table td:last-child { font-family:'DM Mono'; }
.element-table td:nth-child(2) { color:#e5f9ff; font-weight:500; }
.element-table tbody tr:hover { background:rgba(67,217,222,.04); }

@media(max-width:800px){
    .site-nav { display:none; }
    .feature-grid { grid-template-columns:1fr; }
    .feature-grid article { min-height:0; }
    .feature-grid h3 { margin-top:20px; }
    .study-layout { grid-template-columns:1fr; }
    .learning-content { padding:75px 0; }
    .contact-grid { grid-template-columns:1fr; }
}
@media(max-width:560px){
    .brand strong { font-size:13px; letter-spacing:2px; }
    .brand small { letter-spacing:1px; }
    .top-actions { gap:8px; }
    .sound-toggle { padding:8px; font-size:7px; }
    .hero-copy h1 { font-size:40px; letter-spacing:-2px; }
    .exam-note { margin-right:auto; margin-left:auto; }
    .learning-content { width:90vw; padding:60px 0; }
    .content-intro h2,.faq h2 { font-size:30px; }
    .study-card,.resource-card,.feature-grid article { padding:21px; }
    .faq { margin-top:65px; }
    .site-footer { grid-template-columns:1fr; align-items:start; }
    .site-footer nav { flex-wrap:wrap; gap:12px 17px; }
    .site-footer small { grid-column:auto; }
    .page-header { min-height:68px; }
    .page-header .site-nav { display:none; }
    .article-shell { padding:55px 0 75px; }
    .article-header h1 { font-size:40px; letter-spacing:-2px; }
    .page-cta { align-items:flex-start; flex-direction:column; }
    .element-table th,.element-table td { padding:9px 10px; }
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Visual periodic table */
.periodic-page { width:min(1600px,98vw); }
.periodic-page .article-header { margin-left:auto; margin-right:auto; text-align:center; }
.periodic-legend { max-width:1150px; margin:0 auto 16px; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.periodic-legend span { padding:5px 8px; border:1px solid currentColor; border-radius:20px; font:500 7px 'DM Mono'; letter-spacing:.4px; }
.scroll-note { display:block; margin:0 0 10px; color:#6f8799; font:500 8px 'DM Mono'; text-align:center; }
.periodic-table-wrap { width:100%; overflow:visible; padding:6px 0 12px; }
.periodic-table-wrap:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
.periodic-grid { width:100%; min-width:0; display:grid; grid-template-columns:repeat(18,minmax(0,1fr)); grid-template-rows:repeat(7,clamp(44px,5.5vw,86px)) clamp(13px,1.5vw,22px) repeat(2,clamp(44px,5.5vw,86px)); gap:clamp(1px,.25vw,5px); }
.element-cell,.series-placeholder { grid-column:var(--col); grid-row:var(--row); min-width:0; padding:clamp(1px,.38vw,6px); display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; border:1px solid color-mix(in srgb,currentColor 48%,transparent); border-radius:clamp(2px,.45vw,7px); color:#a6bdca; background:color-mix(in srgb,currentColor 9%,rgba(7,17,30,.92)); box-shadow:inset 0 1px rgba(255,255,255,.035); text-decoration:none; cursor:pointer; transition:transform .16s,border-color .16s,background .16s; }
.element-cell:hover { z-index:2; transform:translateY(-2px) scale(1.05); border-color:currentColor; background:color-mix(in srgb,currentColor 17%,#07101d); }
.element-cell:focus-visible { z-index:3; outline:2px solid #fff; outline-offset:1px; }
.element-cell > span { align-self:flex-start; color:currentColor; font:500 clamp(5px,.58vw,8px) 'DM Mono'; }
.element-cell > strong { margin-top:-2px; color:#f1faff; font:500 clamp(10px,1.65vw,25px)/1 'DM Mono'; }
.element-cell > b { width:100%; margin-top:clamp(1px,.3vw,5px); overflow:hidden; color:#d2e0e8; font-size:clamp(5px,.5vw,7px); line-height:1; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.element-cell > small { margin-top:clamp(1px,.25vw,4px); color:#6f8495; font:500 clamp(4px,.45vw,6px) 'DM Mono'; }
.series-placeholder { text-align:center; cursor:default; }
.series-placeholder strong { color:#e8f4fa; font:500 clamp(6px,.75vw,11px) 'DM Mono'; }
.series-placeholder span { margin-top:3px; font-size:clamp(4px,.42vw,6px); text-transform:uppercase; }
.series-label { grid-column:1/3; grid-row:var(--row); min-width:0; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding-left:clamp(2px,.7vw,10px); border-left:2px solid currentColor; }
.series-label strong { overflow:hidden; color:#d5e5ee; font-size:clamp(5px,.7vw,10px); text-overflow:ellipsis; }
.series-label span { color:#6f8799; font:500 clamp(4px,.5vw,7px) 'DM Mono'; }
.alkali { color:#ff9279 !important; }
.alkaline { color:#ffc66d !important; }
.transition { color:#66a7ff !important; }
.post { color:#69d8c1 !important; }
.metalloid { color:#89dd78 !important; }
.nonmetal { color:#55dfa0 !important; }
.halogen { color:#43d9de !important; }
.noble { color:#9d8cff !important; }
.lanthanide { color:#df8fe8 !important; }
.actinide { color:#ff82aa !important; }
.periodic-explainer { width:min(900px,92vw); margin:70px auto 0; }
.periodic-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:25px 0; }
.periodic-facts section { padding:20px; border:1px solid var(--line); border-radius:10px; background:rgba(12,28,46,.65); }
.periodic-facts h3 { margin:0 0 8px; font-size:15px; }
.periodic-facts p { font-size:12px; line-height:1.7; }

/* Element fact dialog */
.element-dialog { width:min(700px,92vw); max-height:88vh; margin:auto; padding:0 30px 30px; overflow:auto; border:1px solid rgba(164,207,230,.2); border-top:3px solid var(--dialog-accent,var(--cyan)); border-radius:16px; color:var(--text) !important; background:linear-gradient(150deg,#10243a,#07111f 68%); box-shadow:0 35px 100px rgba(0,0,0,.65); }
.element-dialog::backdrop { background:rgba(2,7,13,.78); backdrop-filter:blur(7px); }
.element-dialog.alkali{--dialog-accent:#ff9279}.element-dialog.alkaline{--dialog-accent:#ffc66d}.element-dialog.transition{--dialog-accent:#66a7ff}.element-dialog.post{--dialog-accent:#69d8c1}.element-dialog.metalloid{--dialog-accent:#89dd78}.element-dialog.nonmetal{--dialog-accent:#55dfa0}.element-dialog.halogen{--dialog-accent:#43d9de}.element-dialog.noble{--dialog-accent:#9d8cff}.element-dialog.lanthanide{--dialog-accent:#df8fe8}.element-dialog.actinide{--dialog-accent:#ff82aa}
.element-dialog-close { position:sticky; top:0; z-index:2; display:flex; justify-content:flex-end; margin:0 -18px; padding:14px 0 4px; background:linear-gradient(#10243a 72%,transparent); }
.element-dialog-close button { padding:7px 9px; border:1px solid var(--line); border-radius:5px; color:#8ba1b3; background:#0a1828; font:500 8px 'DM Mono'; letter-spacing:1px; cursor:pointer; }
.element-dialog-hero { display:grid; grid-template-columns:50px 86px 1fr; align-items:end; gap:12px; margin:8px 0 24px; }
.element-dialog-hero [data-detail="number"] { color:#6f8799; font:500 14px 'DM Mono'; }
.element-dialog-hero [data-detail="symbol"] { color:var(--dialog-accent); font:500 58px/1 'DM Mono'; }
.element-dialog-hero h2 { font-size:clamp(27px,5vw,42px); line-height:1; letter-spacing:-1.5px; }
.element-property-grid { display:grid; grid-template-columns:repeat(5,1fr); margin:0 0 24px; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.element-property-grid div { min-width:0; padding:11px; border-right:1px solid var(--line); }
.element-property-grid div:last-child { border:0; }
.element-property-grid dt { color:#657e92; font:500 7px 'DM Mono'; letter-spacing:.7px; text-transform:uppercase; }
.element-property-grid dd { margin-top:4px; overflow-wrap:anywhere; color:#d7e6ef; font-size:11px; font-weight:700; }
.element-dialog > p { color:#9bb0bf; font-size:14px; line-height:1.75; }
.element-dialog section { margin-top:22px; }
.element-dialog section h3 { margin-bottom:9px; color:#eaf5fb; font-size:14px; }
.element-dialog ul { display:grid; gap:7px; padding-left:19px; color:#849caf; font-size:12px; line-height:1.6; }
.element-dialog [data-detail="guide"] { display:inline-block; margin-top:25px; color:var(--dialog-accent); font-size:12px; font-weight:800; text-decoration:none; }

/* Individual element pages */
.element-page { width:min(1000px,92vw); }
.element-profile-hero { display:grid; grid-template-columns:210px 1fr; gap:45px; align-items:center; margin-bottom:50px; }
.element-symbol-card { position:relative; min-height:230px; padding:25px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--element-accent,var(--cyan)); border-radius:16px; background:color-mix(in srgb,var(--element-accent,var(--cyan)) 9%,rgba(8,20,34,.9)); }
.element-symbol-card span { position:absolute; left:18px; top:14px; color:#8199aa; font:500 18px 'DM Mono'; }
.element-symbol-card strong { color:#f3fbff; font:500 82px/1 'DM Mono'; }
.element-symbol-card small { margin-top:13px; color:#71899b; font:500 11px 'DM Mono'; }
.element-profile-copy h1 { margin:9px 0 13px; font-size:clamp(40px,7vw,72px); line-height:.95; letter-spacing:-3px; }
.element-profile-copy .lead { color:#91a8b8; font-size:17px; line-height:1.7; }
.element-profile-grid { display:grid; grid-template-columns:repeat(5,1fr); margin:24px 0 0; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.element-profile-grid div { padding:12px; border-right:1px solid var(--line); }
.element-profile-grid div:last-child { border:0; }
.element-profile-grid dt { color:#61798c; font:500 7px 'DM Mono'; text-transform:uppercase; }
.element-profile-grid dd { margin-top:4px; color:#deedf5; font-size:11px; font-weight:700; }
.element-content-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:30px 0; }
.element-content-grid section { padding:25px; border:1px solid var(--line); border-radius:12px; background:rgba(12,28,46,.68); }
.element-content-grid h2 { margin:0 0 14px; font-size:21px; }
.element-content-grid ul { display:grid; gap:10px; padding-left:19px; color:#8ba2b4; font-size:13px; line-height:1.7; }
.element-page-nav { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; margin-top:55px; align-items:center; }
.element-page-nav a { padding:13px; border:1px solid var(--line); border-radius:8px; color:#9db1c0; font-size:11px; text-decoration:none; }
.element-page-nav a:nth-child(2) { color:var(--cyan); text-align:center; }
.element-page-nav a:last-child { text-align:right; }

@media(max-width:1100px){
    .element-cell > b { display:none; }
    .periodic-page { width:98vw; }
}
@media(max-width:760px){
    .periodic-page { width:100%; padding-right:4px; padding-left:4px; }
    .periodic-page .article-header { width:92vw; text-align:left; }
    .periodic-legend { width:94vw; }
    .periodic-grid { grid-template-rows:repeat(7,clamp(36px,8.5vw,55px)) 10px repeat(2,clamp(36px,8.5vw,55px)); gap:1px; }
    .element-cell > small,.series-placeholder span,.series-label span { display:none; }
    .element-cell > span { font-size:5px; }
    .element-cell > strong { margin:0; font-size:clamp(9px,3vw,16px); }
    .series-label { border-left-width:1px; }
    .scroll-note { width:94vw; margin-right:auto; margin-left:auto; }
    .periodic-facts { grid-template-columns:1fr; }
    .element-dialog { padding:0 18px 22px; }
    .element-dialog-hero { grid-template-columns:35px 66px 1fr; }
    .element-dialog-hero [data-detail="symbol"] { font-size:45px; }
    .element-property-grid { grid-template-columns:1fr 1fr; }
    .element-property-grid div { border-bottom:1px solid var(--line); }
    .element-profile-hero { grid-template-columns:1fr; gap:25px; }
    .element-symbol-card { width:190px; min-height:205px; }
    .element-profile-grid { grid-template-columns:1fr 1fr; }
    .element-profile-grid div { border-bottom:1px solid var(--line); }
    .element-content-grid { grid-template-columns:1fr; }
}
@media(max-width:420px){
    .periodic-legend span { padding:4px 6px; font-size:6px; }
    .element-cell { border-radius:2px; }
    .element-cell > span { align-self:center; }
    .element-cell:hover { transform:none; }
    .series-label strong { font-size:4px; }
    .element-page-nav { grid-template-columns:1fr; }
    .element-page-nav a,.element-page-nav a:last-child { text-align:center; }
}

/* Programmatic SEO AdSense earnings projection */
.earnings-page { width:min(1180px,92vw); }
.earnings-page .article-header { max-width:850px; }
.earnings-calculator { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr); gap:18px; align-items:start; }
.earnings-controls { width:100%; }
.earnings-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.earnings-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.earnings-field > span:first-child { color:#91a8b8; font:500 9px 'DM Mono'; letter-spacing:.7px; text-transform:uppercase; }
.earnings-field input,.earnings-field select { width:100%; min-height:45px; padding:10px 12px; border:1px solid var(--line); border-radius:7px; outline:0; color:#e9f7ff; background:#0a1929; font:500 13px 'DM Mono'; transition:border-color .18s,box-shadow .18s; color-scheme:dark; }
.earnings-field input:hover,.earnings-field select:hover { border-color:rgba(67,217,222,.3); }
.earnings-field input:focus,.earnings-field select:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(67,217,222,.1); }
.earnings-field input:invalid:not(:focus) { border-color:rgba(255,102,133,.55); }
.input-prefix,.input-suffix { position:relative; display:flex; align-items:center; }
.input-prefix b,.input-suffix b { position:absolute; z-index:1; color:#698398; font:500 12px 'DM Mono'; pointer-events:none; }
.input-prefix b { left:12px; }
.input-suffix b { right:12px; }
.input-prefix input { padding-left:30px; }
.input-suffix input { padding-right:32px; }
.assumption-note { margin-top:18px; color:#6f8799; font-size:10px; line-height:1.65; }
.earnings-actions { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:stretch; margin-top:22px; }
.earnings-actions .start-button { margin:0; }
.projection-reset { padding:0 15px; border:1px solid var(--line); border-radius:8px; color:#829aad; background:rgba(255,255,255,.02); font:600 8px 'DM Mono'; letter-spacing:.7px; cursor:pointer; }
.projection-reset:hover,.projection-reset:focus-visible { border-color:rgba(67,217,222,.45); color:var(--cyan); }
.earnings-results { padding:27px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,rgba(18,38,60,.86),rgba(7,17,30,.88)); box-shadow:0 24px 60px rgba(0,0,0,.2); }
.earnings-summary { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:1px solid var(--line); border-radius:10px; }
.earnings-summary article { min-width:0; padding:18px; }
.earnings-summary article:nth-child(even) { border-left:1px solid var(--line); }
.earnings-summary article:nth-child(n+3) { border-top:1px solid var(--line); }
.earnings-summary span,.earnings-summary small { display:block; color:#698297; font:500 8px 'DM Mono'; letter-spacing:.7px; }
.earnings-summary strong { display:block; margin:8px 0 5px; overflow-wrap:anywhere; color:#edfbff; font:500 clamp(17px,2.4vw,25px) 'DM Mono'; }
.earnings-summary article:nth-child(2) strong { color:var(--cyan); }
.earnings-summary article:nth-child(3) strong { color:var(--green); }
.projection-formula { margin-top:16px; padding:13px; border-radius:8px; background:rgba(67,217,222,.05); }
.projection-formula span { display:block; margin-bottom:5px; color:var(--cyan); font:500 7px 'DM Mono'; letter-spacing:1px; }
.projection-formula code { color:#829bad; font:500 10px/1.6 'DM Mono'; white-space:normal; }
.projection-section { margin-top:65px; }
.projection-heading { display:flex; align-items:end; justify-content:space-between; gap:25px; }
.projection-heading h2 { margin-top:9px; font-size:clamp(25px,4vw,38px); }
.projection-heading > p { max-width:280px; color:#6f8799; font-size:11px; text-align:right; }
.projection-table-wrap { margin-top:22px; }
.projection-table { min-width:980px; }
.projection-table td { color:#8fa7b8; font-family:'DM Mono'; white-space:nowrap; }
.projection-table td:nth-child(2) { color:#cfe2ec; }
.projection-table .projection-month { color:#eef8ff; font-weight:500; }
.projection-table .money-usd { color:var(--cyan); }
.projection-table .money-zar { color:var(--green); }
.projection-table .positive-growth { color:#8edfb8; }
.projection-table .negative-growth { color:var(--red); }
.projection-table tfoot th,.projection-table tfoot td { padding:13px 14px; border-top:1px solid rgba(67,217,222,.35); color:#dfeef6; background:#0b1929; font:500 10px 'DM Mono'; text-transform:uppercase; }
.projection-table-wrap:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
.calculator-warning { margin-top:15px; color:var(--red); }
.earnings-methodology { max-width:860px; margin:80px auto 0; }

@media(max-width:900px){
    .earnings-calculator { grid-template-columns:1fr; }
}
@media(max-width:560px){
    .earnings-page { width:92vw; }
    .earnings-field-grid { grid-template-columns:1fr; }
    .earnings-controls,.earnings-results { padding:19px; }
    .earnings-actions { grid-template-columns:1fr; }
    .projection-reset { min-height:42px; }
    .earnings-summary { grid-template-columns:1fr; }
    .earnings-summary article:nth-child(even) { border-left:0; }
    .earnings-summary article + article { border-top:1px solid var(--line); }
    .projection-heading { align-items:start; flex-direction:column; }
    .projection-heading > p { text-align:left; }
    .projection-section { margin-top:50px; }
    .earnings-methodology { margin-top:60px; }
}