/* 8 November: deeper teal, machined controls, distinct surfaces, clearer type. */
:root {
  --mint:#1fbdb5; --gold:#edaa27; --text:#eff5f8; --muted:#c0ccd5;
  --faint:#a8b9c5; --glass:rgba(18,28,39,.79); --glass-edge:rgba(180,213,225,.3);
  --panel-base:18 28 39; --panel-accent:24 189 180;
  --shadow:0 15px 35px #0007,0 3px 8px #0007;
}
body {color:var(--text);font-weight:450;text-shadow:0 1px 1px #0007}
h1,h2,h3 {text-shadow:0 1px 2px #000a}
p {color:var(--muted)}
.hero h1 em {color:#28bfb7;text-shadow:0 1px 2px #000a,0 0 7px #18bdb40b}
.hero-description {font-size:15px;line-height:1.85;color:#c6d1d9}
.hero-note {font-size:12px;line-height:1.75;color:#b3c4cf}
.hero-note a,.route-note a {color:#62cdc5}
.eyebrow,.mini-label,.index {font-size:11px;letter-spacing:1.1px;line-height:1.6}
.hero .eyebrow {font-size:11px;letter-spacing:1.2px}
.section-heading>p:not(.eyebrow) {font-size:15px;line-height:1.85}
.text-link {font-size:13px;color:#d8e9ed}
.status-dot,.tiny-dot {background:#1fbdb5}
.pill {background:#116b6921;border-color:#21877f73;color:#a6d9d4;font-size:11px}

/* A defined upper bevel and lower seat give depth without a taller control. */
.button {
  background-image:linear-gradient(112deg,#f3b832 0%,#eaa11a 26%,#ce800a 50%,#f0b333 76%,#d58a10 100%);
  background-size:200% 100%;background-position:0% 0%;
  border:1px solid #edbd557a;border-top-color:#ffdc83b3;border-bottom-color:#8a540b;
  border-radius:7px;color:#17202a;font-size:13px;font-weight:750;
  text-shadow:0 1px 0 #ffe6a436;min-height:39px;padding:8px 17px;
  box-shadow:inset 0 1px 0 #ffe79f87,inset 0 -1px 0 #77440075,0 3px 0 #6a400b,0 7px 13px #0008;
  transition:background-position .32s,box-shadow .18s,border-color .18s;
}
.button:hover,.button:focus-visible {
  background-image:linear-gradient(112deg,#f3b832 0%,#eaa11a 26%,#ce800a 50%,#f0b333 76%,#d58a10 100%);
  background-size:200% 100%;background-position:100% 0%;transform:none;border-top-color:#ffe39e;
  box-shadow:inset 0 1px 0 #ffe9ac99,inset 0 -1px 0 #77440075,0 3px 0 #6a400b,0 8px 16px #0009;
}
.button:active {transform:translateY(1px);box-shadow:inset 0 1px 2px #83500855,0 1px 0 #6a400b,0 3px 7px #0008}
.button.compact {font-size:12px;min-height:35px;padding:7px 13px}
.site-header .header-actions .button {font-size:12px;min-height:35px;padding:7px 13px}

/* One half is tinted; hover/focus moves the tint to the opposite half. */
:is(:is(.hero-actions>.text-link,.header-see-plans),.subjects-grid .subject-open,.page-nav a,.tool-tabs button,
 .menu-toggle,.dialog-close,.contribute-card button,.related-example>.text-link,
 .founder-copy>.text-link,.editorial-copy>.text-link,.section-heading>.text-link) {
  --control-rgb:var(--panel-accent,24 189 180);--control-fill:.24;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:35px;padding:7px 12px;border:1px solid rgb(var(--control-rgb) / .4);border-top-color:#cce4eb4a;
  border-radius:6px;color:#dcebee;font-size:12px;line-height:1.5;font-weight:600;
  background-image:linear-gradient(110deg,rgb(var(--control-rgb) / var(--control-fill)) 0%,rgb(var(--control-rgb) / var(--control-fill)) 24%,transparent 27%,transparent 73%,rgb(var(--control-rgb) / var(--control-fill)) 76%,rgb(var(--control-rgb) / var(--control-fill)) 100%),linear-gradient(180deg,#263844b3,#101a24eb);
  background-size:200% 100%,100% 100%;background-position:0% 0%,0 0;
  text-shadow:0 1px 1px #0009;
  box-shadow:inset 0 1px 0 #def4ff1c,inset 0 -1px 0 #0005,0 2px 0 #03090e,0 5px 10px #0006;
  transition:background-position .32s,border-color .18s,box-shadow .18s;
}
.site-header>.menu-toggle {display:none}
:is(:is(.hero-actions>.text-link,.header-see-plans),.subjects-grid .subject-open,.page-nav a,.tool-tabs button,
 .menu-toggle,.dialog-close,.contribute-card button,.related-example>.text-link,
 .founder-copy>.text-link,.editorial-copy>.text-link,.section-heading>.text-link):is(:hover,:focus-visible) {
  background-position:100% 0%,0 0;border-color:rgb(var(--control-rgb) / .68);color:#f1fbfc;transform:none;
  box-shadow:inset 0 1px 0 #def4ff2b,inset 0 -1px 0 #0005,0 2px 0 #03090e,0 6px 13px #0008;
}
.subjects-grid .subject-open {justify-self:start;justify-content:flex-start;width:fit-content;max-width:100%;white-space:normal;text-align:left;margin-top:13px!important}
.tool-tabs button {font-size:11px;padding:6px 10px;min-height:34px}
.tool-tabs button[aria-selected=true] {--control-fill:.4;border-color:#29958e;color:#f0fafb;background-image:linear-gradient(110deg,rgb(var(--control-rgb) / var(--control-fill)) 0%,rgb(var(--control-rgb) / var(--control-fill)) 24%,transparent 27%,transparent 73%,rgb(var(--control-rgb) / var(--control-fill)) 76%,rgb(var(--control-rgb) / var(--control-fill)) 100%),linear-gradient(180deg,#263844b3,#101a24eb);background-size:200% 100%,100% 100%;box-shadow:inset 0 1px #c5f3ef33,0 2px 0 #02090e,0 4px 8px #0007}
.dialog-close {padding:4px;min-height:31px;min-width:31px;width:31px;height:31px}
.page-nav {gap:12px;flex-wrap:wrap}
.page-nav a {font-size:12px;padding:7px 13px}
.site-header .nav-dropdown>summary {
  border-color:#adc5d32b;border-top-color:#c4dce139;
  background-image:linear-gradient(110deg,#1ba29b24 0%,#1ba29b24 24%,transparent 27%,transparent 73%,#1ba29b24 76%,#1ba29b24 100%),linear-gradient(180deg,#26344073,#111b263d);
  background-size:200% 100%,100% 100%;background-position:0% 0%,0 0;
  box-shadow:inset 0 1px #dcecf317,0 2px 0 #03090c80;font-size:12px;
  transition:background-position .32s,border-color .18s;
}
.site-header .nav-dropdown>summary:is(:hover,:focus-visible),.site-header .nav-dropdown[open]>summary {
  background-image:linear-gradient(110deg,#1ba29b24 0%,#1ba29b24 24%,transparent 27%,transparent 73%,#1ba29b24 76%,#1ba29b24 100%),linear-gradient(180deg,#26344073,#111b263d);
  background-size:200% 100%,100% 100%;background-position:100% 0%,0 0;box-shadow:inset 0 1px #e8faff23,0 2px 0 #03090c80;border-color:#519a9b70;
}
.site-header #primary-navigation>a {font-size:12px}
.site-header .header-sign-in {font-size:12px}
.site-header::before {backdrop-filter:blur(12px) saturate(115%);-webkit-backdrop-filter:blur(12px) saturate(115%)}
.site-header .nav-panel {background:linear-gradient(130deg,#34535c14,#333c5610),rgba(15,23,33,.93);backdrop-filter:blur(12px) saturate(115%);-webkit-backdrop-filter:blur(12px) saturate(115%)}
.nav-link-copy strong {font-size:13px}
.site-header .nav-panel .nav-link-copy small {font-size:12px;color:#b4c6d0}
.nav-upcoming {font-size:11px;letter-spacing:.2px}
.review-bar,.review-bar button,.review-bar b,.review-bar a {font-size:10px}
.motion-toggle {font-size:10px}
.review-actions {gap:15px}
.brand small {font-size:7px}

/* Different dark material tones separate purposes; the background still shows through. */
:is(.demo,.result-preview,.price-card,.tool-showcase,.reason-grid article,.subjects-grid article,
 .community-grid article,.family-preview,.engine-note,.role-card,.method-card,.contribute-card,
 .profile-identity,.profile-description,.callout,.story-feature,.story-cast article) {
  background:linear-gradient(130deg,rgb(var(--panel-accent) / .14),transparent 65%),linear-gradient(175deg,#d7edf30a,transparent 38%),rgb(var(--panel-base) / .84);
  border-color:rgb(var(--panel-accent) / .33);border-top-color:rgb(var(--panel-accent) / .52);
  backdrop-filter:blur(8px) saturate(112%);-webkit-backdrop-filter:blur(8px) saturate(112%);
  box-shadow:inset 0 1px #e6f5ff17,inset 0 -1px #0004,var(--shadow);
}
.demo {--panel-base:15 30 38;--panel-accent:24 163 164;transform:none;transition:transform .18s ease-out}
.reason-grid article:nth-child(3n+1),.role-card:nth-child(3n+1) {--panel-base:24 27 47;--panel-accent:103 130 224}
.reason-grid article:nth-child(3n+2),.role-card:nth-child(3n+2) {--panel-base:14 35 36;--panel-accent:24 167 158}
.reason-grid article:nth-child(3n),.role-card:nth-child(3n) {--panel-base:37 24 37;--panel-accent:186 109 150}
.audience-section .parent-route {background:linear-gradient(130deg,rgb(var(--panel-accent) / .14),transparent 65%),linear-gradient(175deg,#d7edf30a,transparent 38%),rgb(var(--panel-base) / .84)}
.subjects-grid article {--panel-base:19 28 43;--panel-accent:88 151 203}
.subjects-grid article:has([data-subject="Maths"]) {--panel-base:25 29 53;--panel-accent:105 134 235}
.subjects-grid article:has([data-subject="Coding"]) {--panel-base:17 34 44;--panel-accent:61 175 201}
.subjects-grid article:has([data-subject="Psychology"]) {--panel-base:38 25 40;--panel-accent:197 119 161}
.subjects-grid article:has([data-subject="Biology"]) {--panel-base:17 36 34;--panel-accent:49 164 139}
.subjects-grid article:has([data-subject="Chemistry"]) {--panel-base:42 32 22;--panel-accent:199 151 71}
.subjects-grid article:has([data-subject="Physics"]) {--panel-base:29 25 49;--panel-accent:150 126 212}
.subjects-grid article:has([data-subject="History"]) {--panel-base:40 29 26;--panel-accent:192 130 94}
.subjects-grid article:has([data-subject="Geography"]) {--panel-base:16 35 40;--panel-accent:41 163 168}
.subjects-grid article:has([data-subject="Language & Communication"]) {--panel-base:27 30 47;--panel-accent:131 149 212}
.subjects-grid article:first-child {background:linear-gradient(130deg,rgb(var(--panel-accent) / .14),transparent 65%),linear-gradient(175deg,#d7edf30a,transparent 38%),rgb(var(--panel-base) / .84)}
.result-preview {--panel-base:28 26 46;--panel-accent:138 125 205;transform:none}
.price-card {--panel-base:37 30 24;--panel-accent:204 150 61}
.tool-showcase {--panel-base:15 32 41;--panel-accent:42 158 176}
.community-grid article:first-child {--panel-base:37 31 24;--panel-accent:203 153 70}
.community-grid article:last-child {--panel-base:27 26 45;--panel-accent:142 128 211}
.family-preview {--panel-base:22 30 47;--panel-accent:110 140 209}
.engine-note {--panel-base:16 30 35;--panel-accent:32 157 157}
.story-feature,.story-cast article {--panel-base:24 28 46;--panel-accent:126 133 193}
.method-card:nth-child(odd) {--panel-base:25 29 47;--panel-accent:105 137 212}
.method-card:nth-child(even) {--panel-base:17 34 36;--panel-accent:37 157 157}
.contribute-card:nth-child(4n+1) {--panel-base:16 34 37;--panel-accent:35 164 160}
.contribute-card:nth-child(4n+2) {--panel-base:24 29 49;--panel-accent:105 138 216}
.contribute-card:nth-child(4n+3) {--panel-base:37 25 39;--panel-accent:189 116 156}
.contribute-card:nth-child(4n) {--panel-base:38 31 25;--panel-accent:195 149 75}
.profile-identity {--panel-base:23 31 47;--panel-accent:108 146 191}
.profile-description {--panel-base:18 31 35;--panel-accent:49 144 148}
.callout {--panel-base:23 28 42;--panel-accent:92 160 180}

/* Readable worked example: no resting tilt, no tiny labels, restrained frosting. */
.core-view {top:-110px;height:280px}
.core-fallback {width:130px;height:130px;left:calc(50% - 65px);top:70px;opacity:1;filter:drop-shadow(0 0 12px #1fbdb41f)}
.hero-visual {padding-top:94px}
.demo .demo-top {padding:11px 20px;gap:12px}
.demo .demo-top .mono {font-size:11px;letter-spacing:.8px;color:#69c5c0}
.demo .demo-top .pill {font-size:11px;padding:4px 8px}
.demo .demo-intro h2 {font-size:24px;line-height:1.3;letter-spacing:-.65px}
.demo .demo-intro p {font-size:13px;line-height:1.7;color:#c0cdd6}
.demo .machine {padding:13px 0 15px}
.demo .machine small {font-size:11px;letter-spacing:.65px;color:#adc4cf;line-height:1.5}
.demo .machine strong {font-size:34px;text-shadow:0 1px 2px #000a}
.demo .machine .rule strong {font-size:21px}
.demo .machine .rule strong span {color:#e5ac43}
.demo .machine .output strong {color:#26c2b9;text-shadow:0 1px 2px #000a}
.demo .range-label {font-size:13px;line-height:1.5}
.demo .range-label .mono {font-size:11px;letter-spacing:.7px;color:#b6cbd4}
.demo input[type=range] {accent-color:#1cafaa;min-height:24px}
.demo .demo-work {grid-template-columns:25px 1fr 25px 1fr;gap:9px}
.demo .step-number {width:25px;height:25px;font-size:10px;color:#53c1bb;border-color:#2a8c887a}
.demo .demo-work small {font-size:11px;line-height:1.5;letter-spacing:.5px;color:#b1c6d1}
.demo .demo-work p {font-size:18px;line-height:1.45;color:#edf5f8}
.demo .demo-explanation {font-size:12.5px;line-height:1.75;color:#c3d1d9;min-height:0}
.demo .demo-footer {font-size:11px;line-height:1.6;gap:14px;color:#adbecb}
.demo .demo-footer .mono {font-size:11px;letter-spacing:.4px;align-self:center}

.audience-section .reason-grid h3 {font-size:22px}
.audience-section .reason-grid p {font-size:13.5px;line-height:1.85}
.audience-section .reason-grid .index {font-size:11px;letter-spacing:.65px}
.audience-section .reason-grid .route-note {font-size:12px}
.audience-section .reason-grid .text-link {font-size:12.5px}
.subjects-grid h3 {font-size:17px;line-height:1.35}
.subjects-grid p {font-size:13px;line-height:1.75}
.subject-search label,.subject-search input {font-size:13px}
.subject-search p,.catalogue-note {font-size:11.5px;line-height:1.75}
.learning-steps p,.community-grid p,.founder-band .founder-copy p,.engine-note p,
.story-quest p,.story-threads p,.cast-copy p {font-size:13.5px;line-height:1.85}
.community-grid h3 {font-size:19px}
.related-example p,.result-preview>.muted,.check-list {font-size:13px}
.preview-label .mono {font-size:11px}
.answer-comparison small {font-size:11px}
.price strong {color:#edb342;text-shadow:0 1px 2px #0008}
.price-card>p,.price span,.price-foot {font-size:12px!important}
.price-card>.mini-label {font-size:11px;color:#e5b664}
.price-card .price-foot {line-height:1.75}
#tool-panel>p,.tool-detail,.tool-footnote,.tools-caption {font-size:12.5px;line-height:1.75}
.tool-visual {color:#41bcb8;text-shadow:0 1px 2px #0009}
.tool-detail b {color:#deebf1}
.family-preview p:not(.eyebrow),.family-preview .release-target {font-size:13px!important}
.family-preview .quiet-note,.quiet-note {font-size:12px!important}
.story-status p,.story-development-note {font-size:12px}
.story-more>summary {font-size:13px}
.cast-copy .mini-label {font-size:11px;color:#acc8d5}
.faq-list summary {font-size:13.5px;line-height:1.6}
.faq-list details p {font-size:13px;line-height:1.8}
.page-intro .lead,.editorial-copy>p,.editorial-copy li {font-size:14px;line-height:1.85}
.method-card dt,.method-card dd,.band-table th,.band-table td {font-size:13px}
.contribute-card p,.role-card p,.role-scope {font-size:13px;line-height:1.8}
.role-card .pill {font-size:10px}
.breadcrumb,.footer-links,footer>span {font-size:11px}
.proof-strip {font-size:12px}
.proof-strip>span:first-child,.proof-strip .proof-status {font-size:10px}
:is(button,a,input,summary,[tabindex]):focus-visible {outline-color:#46c9c0}

@media(max-width:1100px) {
  .hero-description {font-size:14px}
  .hero-promise {font-size:17px}
  .site-header .header-actions .button {font-size:11px}
  .site-header #primary-navigation>a,.site-header .nav-dropdown>summary,.site-header .header-sign-in {font-size:11px}
  .demo .demo-intro h2 {font-size:22px}
  .demo .demo-work {grid-template-columns:22px 1fr 22px 1fr;gap:7px}
  .demo .demo-work p {font-size:17px}
  .demo .demo-footer {flex-wrap:wrap;gap:3px 10px}
}
@media(max-width:900px) {
  .hero {gap:30px;grid-template-columns:1fr 1fr;min-height:0}
  .hero-description {font-size:13.5px}
  .hero-note {font-size:11.5px}
  .hero .eyebrow {font-size:11px;letter-spacing:.7px}
  .site-header>.menu-toggle {display:inline-flex}
  .demo .demo-top {padding:10px 14px;flex-wrap:wrap;gap:6px}
  .demo .demo-intro {padding:16px 16px 10px}
  .demo .demo-intro h2 {font-size:21px}
  .demo .demo-intro p {font-size:12.5px}
  .demo .machine {margin:0 16px;grid-template-columns:1fr 12px 1.3fr 12px 1fr;gap:3px}
  .demo .machine small {font-size:11px;letter-spacing:.25px}
  .demo .machine strong {font-size:30px}.demo .machine .rule strong{font-size:18px}
  .demo .range-label {font-size:12.5px;margin-left:16px;margin-right:16px}
  .demo .demo-work {grid-template-columns:22px minmax(0,1fr) 22px minmax(0,1fr);gap:7px;margin:0 16px}
  .demo .demo-work small {font-size:11px}.demo .demo-work p{font-size:17px}
  .demo .demo-explanation {font-size:12px;margin-left:16px;margin-right:16px}
  .demo .demo-footer {font-size:11px}.demo .demo-footer .mono{display:block;font-size:11px}
  .audience-section .reason-grid {grid-template-columns:1fr;gap:14px}
  .audience-section .reason-grid article {padding:22px}
  .audience-section .reason-grid h3 {font-size:22px}
  .audience-section .reason-grid p {font-size:13.5px}
  .subjects-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .subjects-grid h3 {font-size:17px}.subjects-grid p{font-size:13px}
  .site-header #primary-navigation.is-open {backdrop-filter:blur(12px) saturate(115%);-webkit-backdrop-filter:blur(12px) saturate(115%);background-color:rgba(14,23,33,.94)}
  .site-header .nav-dropdown>summary {font-size:12.5px}
  .community-grid p {font-size:13px}
  .page-nav a {font-size:12px}
}
@media(max-width:680px) {
  .hero {grid-template-columns:1fr;gap:22px}
  .hero h1.slogan-title {font-size:clamp(40px,9vw,56px)}
  .hero-description {font-size:14px}.hero-note{font-size:12px}
  .hero .eyebrow {font-size:11px}
  .hero-visual {padding-top:112px}
  .core-view {top:-82px;height:280px}
  .hero-actions {gap:14px;flex-wrap:wrap}
  .hero-actions>.button,:is(.hero-actions>.text-link,.header-see-plans) {font-size:12px;min-height:38px}
  .demo .demo-top {padding:11px 17px;flex-wrap:nowrap}
  .demo .demo-intro {padding:19px 20px 12px}
  .demo .demo-intro h2 {font-size:22px}
  .demo .demo-intro p {font-size:13px}
  .demo .machine {margin:0 20px;grid-template-columns:1fr 12px 1.3fr 12px 1fr}
  .demo .machine small {font-size:11px}
  .demo .machine strong {font-size:32px}
  .demo .machine .rule strong {font-size:19px}
  .demo .demo-work {grid-template-columns:24px minmax(0,1fr) 24px minmax(0,1fr);gap:8px;margin:0 20px}
  .demo .demo-work small {font-size:11px}.demo .demo-work p{font-size:18px}
  .demo .demo-explanation {font-size:12.5px;margin-left:20px;margin-right:20px}
  .demo .demo-footer {font-size:11px;gap:4px}
  .subjects-grid {grid-template-columns:1fr}
  .subjects-grid article {grid-template-columns:30px 1fr;padding:21px;column-gap:13px}
  .subject-symbol {grid-row:1/3;grid-column:1;margin:0}
  .subjects-grid h3,.subjects-grid p,.subjects-grid .subject-open {grid-column:2}
  .subjects-grid h3 {font-size:18px}.subjects-grid p{font-size:13px}
  .tool-tabs button {font-size:11px;padding:6px 9px}
  .section-heading>p:not(.eyebrow) {font-size:14px}
  .site-header .header-actions .button {font-size:10px;min-height:33px;padding:6px 9px}
  .site-header .menu-toggle {font-size:11px;min-height:33px;padding:6px 8px}
  .review-bar,.review-bar b,.review-bar button {font-size:9px}
  .review-actions {gap:10px}
  .family-preview .quiet-note {font-size:12px!important}
}
@media(prefers-reduced-motion:reduce) {
  .button,:is(.text-link,.subject-open,.page-nav a,.tool-tabs button,.menu-toggle,.dialog-close),.site-header .nav-dropdown>summary {transition:none}
  .demo {transform:none!important}
}
@media(max-width:380px) {.demo .demo-work {grid-template-columns:24px 1fr}}
@supports not (backdrop-filter:blur(1px)) {
  :is(.demo,.result-preview,.price-card,.tool-showcase,.reason-grid article,.subjects-grid article,.community-grid article,.family-preview,.engine-note,.role-card,.method-card,.contribute-card,.profile-identity,.profile-description,.callout,.story-feature,.story-cast article) {background-color:rgb(var(--panel-base))}
}

/* Selected follow-up: vertical light, separated content surfaces and mounted icons. */
.button,.button:is(:hover,:focus-visible) {
  background-image:linear-gradient(180deg,#bf841b 0%,#bf841b 12.5%,#cb8e22 21%,#dda12b 31%,#edb432 40%,#f0b632 50%,#edb432 60%,#dda12b 69%,#cb8e22 79%,#bf841b 87.5%,#bf841b 100%);
  background-size:100% 200%;background-position:0% 0%;
  border-top-color:#e3bb6b;border-bottom-color:#9d6813;
}
.button:is(:hover,:focus-visible) {background-position:0% 100%}
:is(:is(.hero-actions>.text-link,.header-see-plans),.subjects-grid .subject-open,.page-nav a,.tool-tabs button,
 .menu-toggle,.dialog-close,.contribute-card button,.related-example>.text-link,
 .founder-copy>.text-link,.editorial-copy>.text-link,.section-heading>.text-link,
 .reason-actions>.text-link,.subject-preview-actions>.text-link,.site-header .nav-dropdown>summary,
 .site-header .nav-dropdown[open]>summary),
:is(:is(.hero-actions>.text-link,.header-see-plans),.subjects-grid .subject-open,.page-nav a,.tool-tabs button,
 .menu-toggle,.dialog-close,.contribute-card button,.related-example>.text-link,
 .founder-copy>.text-link,.editorial-copy>.text-link,.section-heading>.text-link,
 .reason-actions>.text-link,.subject-preview-actions>.text-link,.site-header .nav-dropdown>summary):is(:hover,:focus-visible) {
  --control-rgb:var(--panel-accent,24 163 164);
  background-image:linear-gradient(180deg,rgb(var(--control-rgb) / 0) 0%,rgb(var(--control-rgb) / .02) 12.5%,rgb(var(--control-rgb) / .09) 21%,rgb(var(--control-rgb) / .25) 30%,rgb(var(--control-rgb) / .46) 38%,rgb(var(--control-rgb) / .5) 50%,rgb(var(--control-rgb) / .46) 62%,rgb(var(--control-rgb) / .25) 70%,rgb(var(--control-rgb) / .09) 79%,rgb(var(--control-rgb) / .02) 87.5%,rgb(var(--control-rgb) / 0) 100%),var(--control-surface,linear-gradient(180deg,#142130,#1b2d3d));
  background-size:100% 200%,100% 100%;background-position:0% 0%,0 0;
  border-top-color:#d6eaf53d;border-bottom-color:rgb(var(--control-rgb) / .68);
  box-shadow:inset 0 1px 0 #e9f6ff38,inset 0 -1px 0 rgb(var(--control-rgb) / .22),0 2px 0 #02080e,0 5px 9px #0008;
  transition:background-position .5s cubic-bezier(.22,.7,.25,1),box-shadow .2s,border-color .2s;
}
:is(:is(.hero-actions>.text-link,.header-see-plans),.subjects-grid .subject-open,.page-nav a,.tool-tabs button,
 .menu-toggle,.dialog-close,.contribute-card button,.related-example>.text-link,
 .founder-copy>.text-link,.editorial-copy>.text-link,.section-heading>.text-link,
 .reason-actions>.text-link,.subject-preview-actions>.text-link,.site-header .nav-dropdown>summary):is(:hover,:focus-visible),
.site-header .nav-dropdown[open]>summary {background-position:0% 100%,0 0}
.reason-actions>.text-link {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:35px;padding:7px 11px;border:1px solid rgb(var(--panel-accent) / .48);
  border-radius:6px;color:#d4e3eb;font-size:12px!important;font-weight:600;line-height:1.5;
  text-shadow:0 1px 1px #0008;white-space:nowrap;
}

/* A low, raised catalogue rail: each measure has its own subtle light. */
.proof-strip.wrap {
  display:grid;grid-template-columns:1.2fr repeat(3,1fr) auto;align-items:center;gap:20px;
  margin-top:8px;padding:19px 23px;border:1px solid #638b9f55;border-top-color:#a9d4e56b;
  border-radius:10px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#28595c42,transparent 36%,#4c426338),rgba(15,25,37,.85);
  box-shadow:inset 0 1px #d7eef22e,inset 0 -1px #0008,0 3px 0 #03080e,0 12px 26px #0007;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.proof-strip>span:first-child {font:600 11px/1.6 var(--display);letter-spacing:1px;color:#b6d0d7;max-width:150px}
.proof-strip>span:nth-child(n+2):nth-child(-n+4) {border-left:1px solid #b7d9e02b;padding-left:22px;display:flex;align-items:baseline;gap:8px;font-size:12px;color:#aabecb}
.proof-strip strong {font-size:28px;font-weight:600;line-height:1.2;margin:0;letter-spacing:-.8px;color:#b5d7e3;text-shadow:0 2px 2px #0008}
.proof-strip>span:nth-child(2) strong {color:#65c6bd}.proof-strip>span:nth-child(3) strong {color:#adb9ec}.proof-strip>span:nth-child(4) strong {color:#cdadc9}
.proof-strip .proof-status {font-size:10px;letter-spacing:.2px;white-space:nowrap;padding:6px 9px;border:1px solid #4c958340;border-radius:5px;background:#19534c1a;color:#b4cfc9}

/* These are independent routes, with headings, reading areas and actions. */
.audience-section .reason-grid article {padding:0!important;display:flex;flex-direction:column;align-items:stretch;gap:0;overflow:hidden}
.audience-section .reason-grid article::before {content:none}
.reason-heading {padding:18px 20px 14px;border-bottom:1px solid rgb(var(--panel-accent) / .22);background:linear-gradient(160deg,#d4e2f007,#0b152224)}
.audience-section .reason-heading .index {display:block;color:color-mix(in srgb,rgb(var(--panel-accent)) 43%,#c8dbe2);font-size:10.5px;letter-spacing:.7px;font-weight:500}
.audience-section .reason-heading h3 {margin:10px 0 0;color:#cad9e2;font-size:21px;line-height:1.4;letter-spacing:-.55px;font-weight:600;text-shadow:0 1px 2px #0006}
.reason-body {padding:15px 20px 16px;flex:1}
.audience-section .reason-body p {margin:0;color:#b5c4d0;font-size:13px;line-height:1.8;font-weight:420}
.audience-section .reason-body .route-note {margin-top:12px;padding:10px 0 0;border-top:1px solid rgb(var(--panel-accent) / .2);font-size:11.5px;line-height:1.75;color:#aebfcb}
.reason-actions {display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:13px 20px 15px;border-top:1px solid rgb(var(--panel-accent) / .27);background:linear-gradient(180deg,#101c2a8c,#08121a9c)}
.audience-section .reason-actions .text-link {margin:0!important}

/* Existing vector assets form the face of a small illuminated metallic mount. */
.subject-symbol,.badge-art,.rank-art,.engine-mark {
  display:grid;place-items:center;flex-shrink:0;position:relative;width:38px;height:38px;margin:0;padding:0;
  border:1px solid rgb(var(--panel-accent) / .5);border-top-color:#d9eaff69;border-radius:8px;
  background:linear-gradient(145deg,#cdeaff18 0%,#0d1724bd 45%,rgb(var(--panel-accent) / .28) 100%);
  box-shadow:inset 0 1px #f2fbff29,inset 0 -1px #0009,0 2px 0 #03090e,0 5px 8px #0006;
}
.subject-symbol img,.badge-art img,.rank-art img,.engine-mark img {opacity:0;width:23px;height:23px}
.subject-symbol::after,.badge-art::after,.rank-art::after,.engine-mark::after {
  content:"";display:block;position:absolute;inset:7px;
  -webkit-mask:var(--icon-source) center/contain no-repeat;mask:var(--icon-source) center/contain no-repeat;
  background:linear-gradient(160deg,#e1eff7 0%,color-mix(in srgb,rgb(var(--panel-accent)) 70%,#e3f2ff) 72%,rgb(var(--panel-accent)) 100%);
  filter:drop-shadow(0 1px 1px #000b) drop-shadow(0 0 4px rgb(var(--panel-accent) / .2));
}
.subjects-grid article:has([data-subject="Maths"]) {--icon-source:url('assets/icons/maths.svg')}
.subjects-grid article:has([data-subject="Coding"]) {--icon-source:url('assets/icons/code.svg')}
.subjects-grid article:has([data-subject="Psychology"]) {--icon-source:url('assets/icons/brain.svg')}
.subjects-grid article:has([data-subject="Biology"]) {--icon-source:url('assets/icons/biology.svg')}
.subjects-grid article:has([data-subject="Chemistry"]) {--icon-source:url('assets/icons/chemistry.svg')}
.subjects-grid article:has([data-subject="Physics"]) {--icon-source:url('assets/icons/physics.svg')}
.subjects-grid article:has([data-subject="History"]) {--icon-source:url('assets/icons/history.svg')}
.subjects-grid article:has([data-subject="Geography"]) {--icon-source:url('assets/icons/geography.svg')}
.subjects-grid article:has([data-subject="Language & Communication"]) {--icon-source:url('assets/icons/language.svg')}
.badge-art {--icon-source:url('assets/icons/award.svg')}.rank-art {--icon-source:url('assets/icons/leaderboard.svg')}.engine-mark {--icon-source:url('assets/icons/engine.svg')}
.subjects-grid article {display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0!important;overflow:hidden}
.subject-heading {display:flex;align-items:center;gap:12px;padding:10px 16px 8px;border-bottom:1px solid rgb(var(--panel-accent) / .18);background:linear-gradient(150deg,#d1e8f00a,#08111c21)}
.subjects-grid .subject-heading h3 {margin:0;font-size:16px;line-height:1.4;font-weight:600;color:#d0dfe7}
.subject-description {padding:10px 16px;flex:1}
.subjects-grid .subject-description p {margin:0;font-size:13px;line-height:1.75;color:#b5c7d3;min-height:3.5em}
.subject-actions {padding:8px 16px 10px;border-top:1px solid rgb(var(--panel-accent) / .23);background:#08121b66}
.subjects-grid .subject-actions .subject-open {margin:0!important;min-height:34px;font-size:12px;padding:6px 11px}
.community-grid article {display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0!important;overflow:hidden}
.community-heading {display:flex;align-items:center;gap:12px;padding:17px 18px;border-bottom:1px solid rgb(var(--panel-accent) / .28);background:linear-gradient(145deg,#d3eafa0c,#08101e33)}
.community-grid .community-heading h3 {margin:0;font-size:17px;line-height:1.45;font-weight:600;color:#ccdce5}
.community-body {padding:16px 18px 20px;flex:1}
.community-grid .community-body p {margin:0;font-size:13px;line-height:1.85;color:#b6c7d2}
.nav-entry-icon {filter:drop-shadow(0 1px 1px #000b) drop-shadow(0 0 3px #67bfb529)}

/* The header carries a quiet moving spectrum; the footer keeps solid text. */
.site-header .brand {font-size:25px;gap:10px;flex-shrink:0}
.site-header .brand img {width:43px;height:43px;filter:drop-shadow(0 0 5px #25b8aa66) drop-shadow(0 2px 3px #0009)}
.site-header .brand small {
  display:block;font-size:10px;letter-spacing:.6px;line-height:1.5;margin-top:3px;
  color:#94d2d0;background:linear-gradient(100deg,#79d5cc,#a4badf 38%,#b9a7d2 64%,#79d5cc);
  background-size:220% 100%;background-position:0% 50%;background-clip:text;-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 4px #58cbbb20);
}
body[data-motion=running] .site-header .brand small {animation:brand-spectrum 13s ease-in-out infinite alternate}
body[data-motion=running] .site-header .brand img {animation:brand-float 9s ease-in-out infinite}
footer .brand small {display:block;font-size:10px;line-height:1.55;letter-spacing:.6px;color:#b2c3ce;background:none;-webkit-text-fill-color:currentColor;animation:none;filter:none}
footer .brand img {width:33px;height:33px}
@keyframes brand-spectrum {from {background-position:0% 50%}to {background-position:100% 50%}}
@keyframes brand-float {0%,100% {transform:translateY(0) rotate(-2deg)}50% {transform:translateY(-1px) rotate(2deg)}}
@media(max-width:1100px) {
  .site-header {gap:13px}.site-header nav{gap:3px}
  .site-header .brand {font-size:23px;gap:8px}.site-header .brand img{width:39px;height:39px}
  .site-header .brand small{font-size:9px;letter-spacing:.25px}
  .site-header #primary-navigation>a,.site-header .nav-dropdown>summary {padding-left:7px;padding-right:7px}
  .proof-strip.wrap {gap:14px;padding:17px 18px;grid-template-columns:1.15fr repeat(3,1fr) auto}
  .proof-strip>span:nth-child(n+2):nth-child(-n+4){padding-left:15px;gap:6px}
  .proof-strip .proof-status{font-size:9px;padding:5px 7px}
  .audience-section .reason-heading,.reason-body,.reason-actions {padding-left:16px;padding-right:16px}
  .audience-section .reason-heading h3{font-size:20px}
  .reason-actions>.text-link{font-size:11px!important;padding:6px 9px;min-height:33px}
  .community-heading {flex-direction:column;align-items:flex-start;gap:12px}
}
@media(max-width:900px) {
  .site-header .brand {font-size:24px}.site-header .brand small{font-size:10px;letter-spacing:.45px}
  .proof-strip.wrap {grid-template-columns:1.2fr repeat(3,1fr)}.proof-strip .proof-status {display:none}
  .reason-heading{padding-top:16px;padding-bottom:14px}.audience-section .reason-heading h3{font-size:21px}
  .reason-actions>.text-link{font-size:12px!important;min-height:35px;padding:7px 11px}
  .community-heading {flex-direction:row;align-items:center}
}
@media(max-width:680px) {
  .site-header .brand{font-size:21px;gap:8px}.site-header .brand img{width:34px;height:34px}.site-header .brand small{display:none}
  .proof-strip.wrap{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;padding:16px}
  .proof-strip>span:first-child{grid-column:1/-1;max-width:none;font-size:10px;letter-spacing:.8px}
  .proof-strip>span:nth-child(n+2):nth-child(-n+4){padding-left:10px;gap:4px;font-size:11px;flex-wrap:wrap}
  .proof-strip>span:nth-child(2){padding-left:0;border-left:0}.proof-strip strong{font-size:25px}
  .subject-heading{padding:14px 17px 12px}.subjects-grid .subject-heading h3{font-size:17px}
  .subject-description{padding:12px 17px}.subjects-grid .subject-description p{min-height:0}
  .subject-symbol{grid-column:auto;grid-row:auto;margin:0}
  .community-heading{padding:16px 18px}.community-body{padding:15px 18px 18px}
  footer .brand small{font-size:10px}
}
@media(prefers-reduced-motion:reduce) {
  .site-header .brand img,.site-header .brand small {animation:none!important}
  .button,:is(.text-link,.subject-open,.page-nav a,.tool-tabs button,.menu-toggle,.dialog-close),.site-header .nav-dropdown>summary {transition:none!important}
}

/* Finishing pass: diffuse colour ramps, shallow recesses and clear section edges. */
.button {transition:background-position .5s cubic-bezier(.22,.7,.25,1),box-shadow .2s,border-color .2s}
.reason-body,.subject-description,.community-body {
  background:linear-gradient(180deg,#030b173d 0%,transparent 32%,rgb(var(--panel-accent) / .075) 100%),linear-gradient(135deg,rgb(var(--panel-accent) / .12),rgb(var(--panel-accent) / .025) 85%);
  box-shadow:inset 0 8px 14px -14px #000c,inset 0 -1px rgb(var(--panel-accent) / .1);
}
/* Shared reasons build on one another: indigo, then teal, then rose. */
.audience-section .reason-grid article:nth-child(2) {
  --panel-base:15 24 38;--panel-accent:91 151 183;
  --reason-spectrum:linear-gradient(115deg,#5864c54d 0%,#5864c530 28%,#168e963d 66%,#168e964d 100%);
  --control-surface:linear-gradient(110deg,#2d365b,#1d4c50);
}
.audience-section .reason-grid article:nth-child(3) {
  --panel-base:15 24 38;--panel-accent:139 144 189;
  --reason-spectrum:linear-gradient(115deg,#5864c54d 0%,#5864c533 22%,#188b9547 48%,#188b9533 59%,#b2618e42 82%,#b2618e52 100%);
  --control-surface:linear-gradient(110deg,#2d365b 0%,#1c464a 49%,#503449 100%);
}
.audience-section .reason-grid article:is(:nth-child(2),:nth-child(3)) {
  background:linear-gradient(175deg,#d7edf30a,transparent 38%),var(--reason-spectrum),rgb(var(--panel-base) / .87);
}
.audience-section .reason-grid article:is(:nth-child(2),:nth-child(3)) .reason-body {
  background:linear-gradient(180deg,#030b172e 0%,transparent 32%,#ccdeef05 100%);
}
.audience-section .reason-grid article:is(:nth-child(2),:nth-child(3)) .reason-actions {
  background:linear-gradient(180deg,#0b15294d,#060f1b70);
}
.subjects-grid article:is(:hover,:focus-within) {
  background:linear-gradient(130deg,rgb(var(--panel-accent) / .17),transparent 65%),linear-gradient(175deg,#d7edf30a,transparent 38%),rgb(var(--panel-base) / .88);
  border-color:rgb(var(--panel-accent) / .76);
  box-shadow:inset 0 1px rgb(var(--panel-accent) / .3),0 3px 8px #0007,0 14px 30px #0006,0 0 18px rgb(var(--panel-accent) / .09);
}
.subjects-grid article .subject-actions .subject-open {
  box-shadow:inset 0 1px #e4f4ff40,inset 0 -1px rgb(var(--panel-accent) / .4),0 3px 0 #030911,0 7px 12px #0008;
}
.subjects-grid article .subject-actions .subject-open:is(:hover,:focus-visible) {
  border-color:rgb(var(--panel-accent) / .78);
  box-shadow:inset 0 1px #e4f4ff4d,inset 0 -1px rgb(var(--panel-accent) / .4),0 3px 0 #030911,0 7px 14px #0009,0 0 10px rgb(var(--panel-accent) / .12);
}
.subjects-grid article .subject-open:focus-visible {outline-color:rgb(var(--panel-accent))}

.family-preview {padding:0!important;gap:0!important;align-items:stretch;overflow:hidden}
.family-summary {padding:26px 28px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid rgb(var(--panel-accent) / .34);background:linear-gradient(160deg,rgb(var(--panel-accent) / .17),#0b152b1a 65%,rgb(var(--panel-accent) / .05))}
.family-detail {padding:23px 27px;background:linear-gradient(180deg,#06101c5c,transparent 40%,rgb(var(--panel-accent) / .035))}
.family-preview .family-detail>p {margin-top:13px;line-height:1.8}
.family-preview .family-detail .release-target {padding:9px 12px;background:#7582c30c;border:1px solid #9c9cce29;border-left:2px solid #9c9cce80;border-radius:0 5px 5px 0;line-height:1.8}
.family-preview .family-detail .quiet-note {border-top:1px solid rgb(var(--panel-accent) / .23);padding-top:12px;color:#aebfd0}

.story-intro {
  --panel-base:18 25 41;--panel-accent:119 132 199;
  gap:0;border:1px solid #8496c34a;border-top-color:#baccea66;border-radius:12px;overflow:hidden;align-items:stretch;
  background:linear-gradient(135deg,#7188bf16,#07101d47),rgb(var(--panel-base) / .82);
  box-shadow:inset 0 1px #ddecff17,0 3px 0 #030911,0 12px 26px #0006;
}
.story-intro>.section-heading {padding:24px 27px}
.story-intro .story-status {margin:0;padding:24px;border:0;border-left:1px solid #8496c338;border-radius:0;justify-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:linear-gradient(180deg,#030b1766,transparent 45%,#8992c112)}
.story-intro .story-status p {padding-top:12px;border-top:1px solid #93a6d32b;margin-top:14px;line-height:1.85}
.story-more {margin-top:14px;border:1px solid #7b90b24a;border-radius:9px;overflow:hidden;background:linear-gradient(140deg,#506b8f12,#0b1525bb)}
.story-more>summary {padding:15px 18px;font-size:13px;background:linear-gradient(180deg,#9aaee50a,#03091629);gap:18px}
.story-more[open]>summary {border-bottom:1px solid #92a6cb3b}
.story-more>.story-feature,.story-more>.story-threads,.story-more>.cast-heading,.story-more>.story-cast,.story-more>.story-development-note {margin-left:18px;margin-right:18px}
.story-more>.story-development-note {margin-bottom:18px}

/* A shared heading over two compact columns uses the former empty left side. */
.faq-section {display:block;padding-top:42px;padding-bottom:42px}
.faq-section .section-heading {margin-bottom:22px}
.faq-section .section-heading .eyebrow {margin-bottom:8px}
.faq-section .section-heading h2 {font-size:30px}
.faq-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;align-items:start}
.faq-list details {border:1px solid #8aa0bd38;border-top-color:#b4cbe04d;border-radius:8px;padding:0;background:linear-gradient(160deg,#718aab0d,#0b1523bf);overflow:hidden;box-shadow:inset 0 1px #eff7ff0a,0 2px 6px #0004}
.faq-list details:last-child:nth-child(odd) {grid-column:1/-1}
.faq-list summary {font-size:13px;line-height:1.6;font-weight:550;color:#cad9e4;padding:12px 15px;min-height:52px;gap:15px}
.faq-list summary::after {content:"";display:block;width:14px;height:14px;flex-shrink:0;background:url('assets/icons/nav-chevron.svg') center/contain no-repeat;opacity:.75}
.faq-list details[open] summary::after {content:"";transform:rotate(180deg)}
.faq-list details[open] {border-color:#8da6d163;background-color:#1824368a}
.faq-list details[open] summary {border-bottom:1px solid #92acc526;background:#7794bb0c}
.faq-list details p {padding:12px 15px 15px;margin:0;font-size:13px;line-height:1.8;color:#b7c8d6}

.closing.wrap {
  --panel-accent:57 160 168;
  display:grid;grid-template-columns:1fr auto;gap:8px 28px;text-align:left;
  margin-top:12px;margin-bottom:26px;padding:27px 29px;border:1px solid #6c9baa52;border-top-color:#a3d0dc6b;border-radius:12px;
  background:linear-gradient(135deg,#23747926,transparent 50%,#72639b24),rgba(15,25,38,.82);
  box-shadow:inset 0 1px #d8edf42b,0 3px 0 #030911,0 12px 26px #0006;
}
.closing .eyebrow {grid-column:1;margin:0;font-size:10px;letter-spacing:1px}
.closing h2 {grid-column:1;margin:0;font-size:clamp(26px,2.8vw,36px);line-height:1.3}
.closing .button {grid-column:2;grid-row:1/3;align-self:center;margin:0}
footer.wrap {margin-top:0;padding-top:22px;padding-bottom:22px;border-top:1px solid #7f9bb547;box-shadow:0 -1px 0 #040b13}

/* Native dialog behavior, with the selected subject's material and source icon. */
#subject-preview {
  --panel-base:25 29 53;--panel-accent:105 134 235;--icon-source:url('assets/icons/maths.svg');
  padding:0;max-width:590px;width:calc(100% - 36px);max-height:calc(100dvh - 44px);overflow:auto;
  border:1px solid rgb(var(--panel-accent) / .6);border-top-color:rgb(var(--panel-accent) / .85);border-radius:12px;
  background:linear-gradient(140deg,rgb(var(--panel-accent) / .1),transparent 66%),rgb(var(--panel-base) / .94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px #e4f3ff2b,0 3px 0 #02060d,0 26px 65px #000c,0 0 32px rgb(var(--panel-accent) / .08);
}
#subject-preview::backdrop {background:#020710ad;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.subject-dialog-heading {display:grid;grid-template-columns:44px minmax(0,1fr) 34px;align-items:center;gap:14px;padding:22px;border-bottom:1px solid rgb(var(--panel-accent) / .3);background:linear-gradient(145deg,rgb(var(--panel-accent) / .12),#05101b26)}
#subject-preview .subject-dialog-symbol {width:44px;height:44px}
.subject-dialog-symbol::after {inset:9px}
#subject-preview .eyebrow {font-size:10px;letter-spacing:1px;line-height:1.5;margin:0 0 5px;color:color-mix(in srgb,rgb(var(--panel-accent)) 45%,#d4e5ee)}
#subject-preview h2 {font-size:27px;line-height:1.3;letter-spacing:-.65px;margin:0;color:#d7e5ed}
.subject-dialog-body {padding:19px 23px 22px;background:linear-gradient(180deg,#030b172b,transparent 50%,rgb(var(--panel-accent) / .05))}
#subject-preview .subject-dialog-body p {margin:0;font-size:13px;line-height:1.85;color:#b6c9d6}
#subject-preview .subject-dialog-body #subject-preview-description {font-size:15px;line-height:1.75;font-weight:500;color:#cbdde6}
#subject-preview .subject-dialog-body p+p {margin-top:13px}
#subject-preview .subject-preview-actions {margin:0;display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:13px;padding:16px 22px 19px;border-top:1px solid rgb(var(--panel-accent) / .27);background:#07101c75}
.subject-preview-actions>.text-link {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:35px;padding:7px 11px;border:1px solid rgb(var(--panel-accent) / .5);border-radius:6px;font-size:12px;font-weight:600;color:#d2e4ec;line-height:1.5}
#subject-preview .subject-preview-actions .button {margin:0;min-height:36px;padding:7px 13px;font-size:12px}
.dialog-close {display:grid;place-items:center;width:34px;height:34px;min-width:34px;min-height:34px;padding:0;border:1px solid #c1d9e342;border-radius:7px}
.dialog-close img {display:block;width:15px;height:15px;opacity:.9;filter:drop-shadow(0 1px 1px #0009)}
.dialog-close:is(:hover,:focus-visible) {border-color:rgb(var(--panel-accent) / .8)}
#subject-preview .subject-dialog-heading .dialog-close {position:static;align-self:start}
#subject-preview :is(a,button):focus-visible {outline-color:rgb(var(--panel-accent))}

@media(max-width:900px) {
  .family-summary{padding:23px}.family-detail{padding:22px}
  .story-intro>.section-heading{padding:22px}.story-intro .story-status{padding:22px}
  .closing.wrap{padding:24px;gap:9px 22px}.closing h2{font-size:28px}
}
@media(max-width:680px) {
  .family-summary{border-right:0;border-bottom:1px solid rgb(var(--panel-accent) / .34);padding:22px}
  .family-detail{padding:21px}
  .story-intro .story-status{border-left:0;border-top:1px solid #8496c338;padding:19px 22px}
  .story-more>summary{font-size:12px;padding:14px}
  .faq-section{padding-top:32px;padding-bottom:32px}.faq-list{grid-template-columns:1fr}.faq-section .section-heading{margin-bottom:17px}
  .closing.wrap{grid-template-columns:1fr;padding:23px;gap:9px;margin-bottom:22px}.closing h2{font-size:27px}
  .closing .button{grid-column:1;grid-row:auto;justify-self:start;margin-top:10px}
  .subject-dialog-heading{grid-template-columns:38px minmax(0,1fr) 34px;gap:10px;padding:17px}
  #subject-preview .subject-dialog-symbol{width:38px;height:38px}#subject-preview h2{font-size:23px}
  .subject-dialog-body{padding:17px 18px}#subject-preview .subject-preview-actions{padding:14px 17px 17px}
}
@media(prefers-reduced-motion:reduce) {
  .button,.subject-preview-actions>.text-link {transition:none!important}
}

/* Selected colour pass: soft rose type, a cool secondary action, and tool identities. */
.hero h1.slogan-title {color:#dda9c6}
.hero h1.slogan-title>.brain-gains {
  display:inline-block;color:#bca8b9;opacity:.82;text-shadow:none;
  background:linear-gradient(180deg,#e4e6ed 0%,#dbceda 38%,#cd9ab8 100%);
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.hero .hero-category {
  margin:9px 0 0;font:11px/1.75 var(--mono,Mono);letter-spacing:.65px;
  color:#a9bac9;text-transform:uppercase;
}
.hero .hero-category+.hero-description {margin-top:16px}
.demo-answer-form {
  display:flex;align-items:flex-end;gap:12px;margin:0 22px 18px;
}
.demo#try {scroll-margin-top:32px}
.demo-answer-field {flex:1;min-width:65px}
.demo-answer-field label {display:block;margin-bottom:6px;font-size:12px;color:#b9cbd6}
.demo-answer-field input {
  display:block;width:100%;height:35px;min-width:0;padding:6px 10px;
  font:600 16px/1.4 var(--body);color:#e4eff5;background:#08131e99;
  border:1px solid #7e9dac66;border-top-color:#030b17;border-radius:6px;
  box-shadow:inset 0 2px 5px #0005,0 1px #c3e4ef12;
}
.demo-answer-field input:focus-visible {outline:2px solid #7bcfc8;outline-offset:2px}
.demo-answer-field input[aria-invalid=true] {border-color:#c98baf}
.demo-answer-actions {display:flex;align-items:center;gap:8px}
.demo-answer-actions .button {white-space:nowrap}
.demo-helper {
  --control-rgb:var(--panel-accent);display:inline-flex;align-items:center;justify-content:center;
  min-height:35px;padding:7px 11px;border:1px solid rgb(var(--control-rgb) / .5);
  border-top-color:#d6eaf53d;border-bottom-color:rgb(var(--control-rgb) / .68);
  border-radius:6px;font:600 12px/1.5 var(--body);color:#d4e3eb;white-space:nowrap;
  background-image:linear-gradient(180deg,rgb(var(--control-rgb) / 0) 0%,rgb(var(--control-rgb) / .02) 12.5%,rgb(var(--control-rgb) / .09) 21%,rgb(var(--control-rgb) / .25) 30%,rgb(var(--control-rgb) / .46) 38%,rgb(var(--control-rgb) / .5) 50%,rgb(var(--control-rgb) / .46) 62%,rgb(var(--control-rgb) / .25) 70%,rgb(var(--control-rgb) / .09) 79%,rgb(var(--control-rgb) / .02) 87.5%,rgb(var(--control-rgb) / 0) 100%),linear-gradient(180deg,#142130,#1b2d3d);
  background-size:100% 200%,100% 100%;background-position:0 0;
  box-shadow:inset 0 1px #e9f6ff38,inset 0 -1px rgb(var(--control-rgb) / .22),0 2px #02080e,0 5px 9px #0008;
  text-shadow:0 1px 1px #0008;cursor:pointer;
  transition:background-position .5s cubic-bezier(.22,.7,.25,1),border-color .2s;
}
.demo-helper:is(:hover,:focus-visible) {background-position:0 100%,0 0;border-color:rgb(var(--control-rgb) / .75)}
.demo-feedback {margin:0 22px 16px;padding:10px 12px;border-left:2px solid #7395ad;background:#7395ad0e;color:#bed0de;font-size:13px;line-height:1.75}
.demo-feedback:empty {height:0;margin:0;padding:0;border:0}
.demo-feedback[data-state=correct] {border-color:#28bfb7;color:#b3e2db;background:#1fbdb50c}
.demo-feedback[data-state=incorrect] {border-color:#d7ac5c;color:#e3cfaa;background:#d7ac5c0c}
.demo-feedback[data-state=invalid] {border-color:#c98baf;color:#e1bbd0;background:#c98baf0c}
.demo :is(.demo-answer-form,.demo-solution,.demo-helper)[hidden] {display:none!important}
.faq-column {display:flex;flex-direction:column;gap:10px;min-width:0}
.faq-list details:last-child:nth-child(odd) {grid-column:auto}
.faq-list p a {color:#7acfc7;text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px) {
  .demo-answer-form {margin-left:16px;margin-right:16px;gap:10px}
  .demo-answer-actions {gap:6px}
  .demo-answer-actions .button,.demo-helper {padding-left:9px;padding-right:9px;font-size:12px}
  .demo-feedback {margin-left:16px;margin-right:16px}
}
@media(max-width:680px) {
  .demo-answer-form {margin-left:20px;margin-right:20px}
  .demo-feedback {margin-left:20px;margin-right:20px}
}
@media(max-width:360px) {
  .demo-answer-form {flex-wrap:wrap}
  .demo-answer-field {flex-basis:100%}
}
@media(prefers-reduced-motion:reduce) {.demo-helper {transition:none}}
@media(forced-colors:active) {
  .hero h1.slogan-title>.brain-gains {background:none;-webkit-text-fill-color:CanvasText;color:CanvasText;opacity:1}
}

/* Published catalogue browsing, using the selected subject's existing material. */
.subjects-grid .subject-catalogue-count {font:11px/1.6 Mono;color:#a9bdcc!important;margin-top:10px!important}
#subject-preview {max-width:640px}
#subject-preview .subject-preview-counts {margin-top:5px;font:11px/1.6 Mono;color:#afc4d3}
#subject-preview .subject-dialog-body {padding:17px 22px 18px}
.subject-topic-picker {margin-top:16px}
.subject-topic-picker label {display:block;font-size:12px;color:#c1d2dc;margin-bottom:7px}
.subject-topic-picker select {
  appearance:none;display:block;width:100%;min-height:36px;padding:7px 36px 7px 12px;
  border:1px solid rgb(var(--panel-accent) / .5);border-top-color:#b5d6e13d;border-radius:6px;
  background:url('assets/icons/nav-chevron.svg') right 12px center/13px no-repeat,linear-gradient(180deg,#0a1523,#1b2c3b);
  color:#d9e7ee;font:500 13px/1.5 var(--body);box-shadow:inset 0 1px #e9f6ff1c,0 2px #02080e;
}
.subject-topic-picker select option {color:#d9e7ee;background:#152334}
.subject-topic-picker select:focus-visible {outline:2px solid rgb(var(--panel-accent));outline-offset:2px}
#subject-preview #subject-topic-description {margin-top:9px;font-size:12px;color:#a9bfce}
.subject-skills {border:0;margin:16px 0 0;padding:0;min-width:0}
.subject-skills legend {font-size:12px;color:#bfd0dd;margin-bottom:8px}
#subject-skill-list {list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0;padding:2px 3px 4px;max-height:210px;overflow:auto;scrollbar-width:thin;scrollbar-color:rgb(var(--panel-accent) / .55) #07131d}
#subject-skill-list li {margin:0;padding:0}
.subject-skill-choice {display:flex;align-items:center;gap:9px;min-height:36px;padding:8px 10px;border:1px solid #8aa2b52e;border-radius:6px;background:linear-gradient(180deg,#21334955,#09142266);box-shadow:inset 0 1px #d4e9f50a,0 2px #0003;color:#c1d2dd;cursor:pointer;font-size:12px;line-height:1.5;height:100%}
.subject-skill-choice input {accent-color:rgb(var(--panel-accent));width:13px;height:13px;margin:0;flex-shrink:0}
.subject-skill-choice:has(input:checked) {border-color:rgb(var(--panel-accent) / .7);background:linear-gradient(180deg,#07111d55,rgb(var(--panel-accent) / .18));color:#dcebf2}
.subject-skill-choice:hover {border-color:rgb(var(--panel-accent) / .6)}
.subject-skill-choice:has(:focus-visible) {outline:2px solid rgb(var(--panel-accent));outline-offset:1px}
.subject-selection {margin-top:16px;padding:12px 13px;border:1px solid rgb(var(--panel-accent) / .25);border-left:2px solid rgb(var(--panel-accent) / .6);border-radius:4px;background:#030c1866}
#subject-preview .subject-selection .mini-label {font-size:10px;color:#9eb7c8}
#subject-preview #subject-selected-path {font-size:13px;color:#d2e2ec;margin-top:5px;font-weight:600}
#subject-preview .subject-selection p:last-child {font-size:12px;margin-top:6px;color:#a9bfce}

/* A shared inclusion list, a compact Free strip and the existing gold plan. */
.pricing-section {align-items:start;gap:32px 46px}
.pricing-inclusions h3 {font-size:16px;margin:24px 0 7px;color:#ccdde7}
.included-list {list-style:none;padding:0;margin:0}
.included-list li {display:flex;gap:13px;align-items:center;padding:13px 0;border-bottom:1px solid #9ab4cd20}
.included-list img {box-sizing:content-box;padding:8px;border:1px solid #8ba9c141;border-radius:6px;background:linear-gradient(155deg,#2c4b6755,#0a152433);box-shadow:inset 0 1px #c8e4f524,0 2px #0005;opacity:.9}
.included-list strong {display:block;font-size:13px;font-weight:600;color:#ccdde7}
.included-list span {display:block;font-size:12px;color:#aec2cf;line-height:1.8;margin-top:3px}
.pricing-inclusions .plan-development {font-size:12px!important;color:#aabfcd;margin-top:18px!important}
.plan-development a {color:#7fc8c8;text-decoration:underline;text-underline-offset:3px}
.pricing-options {display:grid;gap:15px;min-width:0}
.free-plan {--panel-accent:39 165 156;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 21px;border:1px solid #398b8861;border-top-color:#9bd7cc66;border-radius:10px;background:linear-gradient(145deg,#1c595642,#081822aa);box-shadow:inset 0 1px #c3ece81a,0 3px #02080e,0 9px 21px #0006}
.free-plan .mini-label {font-size:10px;color:#9fc8c4}.free-plan h3 {font-size:29px;margin:5px 0 0;line-height:1.3;color:#c4dfda}.free-plan p {font-size:12px;line-height:1.7;color:#b1cbce;margin-top:4px}
.pricing-options .price-card {width:100%;max-width:none;min-width:0;padding:23px}
.pricing-options .price-card[data-finish] {transition:background-color .28s ease,border-color .28s ease}
.pricing-options .price-card[data-finish=silver] {--panel-base:28 34 42;--panel-accent:174 191 206;--plan-highlight:#d6e3ed}
.pricing-options .price-card[data-finish=steel] {--panel-base:20 29 43;--panel-accent:111 134 161;--plan-highlight:#bcd0e8}
.pricing-options .price-card[data-finish=diamond] {--panel-base:13 35 46;--panel-accent:139 209 229;--plan-highlight:#c0edf7}
.pricing-options .price-card[data-finish=royal] {--panel-base:32 24 53;--panel-accent:143 119 223;--plan-highlight:#d8c8ff}
/* Gold deliberately retains the existing material and typography colours. */
.pricing-options .price-card[data-finish]:not([data-finish=gold])>.mini-label,
.pricing-options .price-card[data-finish]:not([data-finish=gold]) #plan-monthly {color:var(--plan-highlight)}
.pricing-options .price-card[data-finish]:not([data-finish=gold]) .plan-quote>p {color:#cad8e4}
.pricing-options .price-card[data-finish]:not([data-finish=gold]) .plan-time-note {border-top-color:rgb(var(--panel-accent) / .24)}
.pricing-options .price-card[data-finish]:not([data-finish=gold]) .plan-period-terms {color:color-mix(in srgb,rgb(var(--panel-accent)) 32%,#d0d7dd);border-left-color:rgb(var(--panel-accent) / .65);background:rgb(var(--panel-accent) / .055)}
@media(prefers-reduced-motion:reduce) {.pricing-options .price-card[data-finish] {transition:none}}
.price-card .paid-plan-heading {font-size:19px;margin:11px 0 18px;line-height:1.4}
.billing-periods {border:0;padding:0;margin:0 0 18px;min-width:0}
.billing-periods legend {font-size:12px;color:#bccbd4;margin-bottom:9px}
#billing-period-options {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
/* Compact, machined subscription finishes; actual savings decide the top three. */
#billing-period-options {gap:7px;padding-bottom:4px}
#billing-period-options .period-choice {
  --period-rgb:111 134 161;--period-text:#c6d3e0;--period-seat:#0a1420;
  --period-surface:linear-gradient(180deg,#182332,#26354a);--period-wash:.27;
  position:relative;min-width:0;cursor:pointer;
}
#billing-period-options .period-choice[data-finish=silver] {--period-rgb:194 208 222;--period-text:#eef3f8;--period-seat:#18222e;--period-surface:linear-gradient(180deg,#323d4a,#354353);--period-wash:.52}
#billing-period-options .period-choice[data-finish=gold] {--period-rgb:216 171 75;--period-text:#f3dbaa;--period-seat:#38260f;--period-surface:linear-gradient(180deg,#342a1c,#4b3b22);--period-wash:.5}
#billing-period-options .period-choice[data-finish=diamond] {--period-rgb:139 209 229;--period-text:#e1f8ff;--period-seat:#112c3a;--period-surface:linear-gradient(180deg,#193440,#294c5e);--period-wash:.52}
#billing-period-options .period-choice[data-finish=royal] {--period-rgb:143 119 223;--period-text:#e9e0ff;--period-seat:#21173e;--period-surface:linear-gradient(180deg,#2b2349,#413061);--period-wash:.55}
#billing-period-options .period-choice input {position:absolute;inset:0;z-index:1;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
#billing-period-options .period-face {
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:44px;padding:5px 3px;border:1px solid rgb(var(--period-rgb) / .62);border-top-color:rgb(var(--period-rgb) / .86);border-bottom-color:rgb(var(--period-rgb) / .42);
  border-radius:6px;white-space:nowrap;color:var(--period-text);font-size:12px;line-height:1.25;
  background-image:linear-gradient(180deg,#f3f8ff16,transparent 28%),linear-gradient(180deg,rgb(var(--period-rgb) / 0) 0%,rgb(var(--period-rgb) / .02) 12%,rgb(var(--period-rgb) / .08) 22%,rgb(var(--period-rgb) / .2) 32%,rgb(var(--period-rgb) / .35) 40%,rgb(var(--period-rgb) / var(--period-wash)) 50%,rgb(var(--period-rgb) / .35) 60%,rgb(var(--period-rgb) / .2) 68%,rgb(var(--period-rgb) / .08) 78%,rgb(var(--period-rgb) / .02) 88%,rgb(var(--period-rgb) / 0) 100%),var(--period-surface);
  background-size:100% 100%,100% 200%,100% 100%;background-position:0 0,0 0,0 0;
  box-shadow:inset 0 1px #edf6ff45,inset 0 -1px #0007,0 3px 0 var(--period-seat),0 6px 9px #0007;
  text-shadow:0 1px 1px #000b;pointer-events:none;
  transition:background-position .42s cubic-bezier(.22,.7,.25,1),transform .16s,box-shadow .18s,border-color .18s;
}
#billing-period-options .period-duration {display:flex;align-items:center;justify-content:center;gap:3px;min-width:0;font:600 12px/1.25 var(--body);color:inherit}
#billing-period-options .period-duration img {display:block;flex-shrink:0;width:13px;height:13px;filter:drop-shadow(0 1px 1px #0009)}
#billing-period-options .period-saving {display:block;font:550 11px/1.2 var(--body);color:inherit;letter-spacing:.03px}
#billing-period-options .period-face::after {content:'';position:absolute;right:4px;top:4px;width:5px;height:3px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);opacity:0}
#billing-period-options .period-choice:hover>.period-face {background-position:0 0,0 100%,0 0;transform:translateY(-1px);border-color:rgb(var(--period-rgb) / .95)}
#billing-period-options .period-choice input:checked+.period-face {transform:translateY(1px);border-color:rgb(var(--period-rgb));box-shadow:inset 0 1px #f4f9ff66,inset 0 -2px rgb(var(--period-rgb) / .6),0 2px 0 var(--period-seat),0 4px 7px #0008,0 0 8px rgb(var(--period-rgb) / .12)}
#billing-period-options .period-choice input:checked+.period-face::after {opacity:1}
#billing-period-options .period-choice input:focus-visible+.period-face {outline:2px solid rgb(var(--period-rgb));outline-offset:3px}
#billing-period-options .period-choice:active>.period-face {transform:translateY(2px)}
.price-card .price {margin:0;gap:12px}.price-card .price strong {font-size:58px}.price-card .price>span {font-size:12px;line-height:1.7}
.price-card .plan-quote>p {font-size:13px;line-height:1.75;margin-top:8px;color:#d7d3c6}
.price-card #plan-saving {font-size:12px;color:#bfc7cc}
.price-card .plan-time-note {font-size:12px;line-height:1.8;margin:14px 0 0;padding-top:13px;border-top:1px solid #b49d7133;color:#bdc9cf}
.price-card .plan-period-terms {font-size:12px;color:#d7b8a0;border-left:2px solid #b18c54;padding:7px 10px;margin-top:12px;line-height:1.8;background:#8b67230d}
.price-card .button.wide {margin-top:18px}.price-card .price-foot {font-size:11px;margin-top:12px;line-height:1.7;color:#aabbc7}
.group-plans {grid-column:1/-1;min-width:0;border:1px solid #829ab345;border-radius:8px;background:linear-gradient(145deg,#1b294244,#07142299);overflow:hidden}
.group-plans summary {display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 17px;color:#bfd0de;font-size:13px;cursor:pointer;list-style:none}
.group-plans summary::-webkit-details-marker {display:none}.group-plans summary::after {display:none}.group-plans[open] summary {border-bottom:1px solid #7f9eb431}.group-plans[open] summary img {transform:rotate(180deg)}
.group-plans-body {padding:16px 18px}.group-plans-body>p {font-size:13px;line-height:1.8;color:#b0c6d3}
.group-plans table {border-collapse:collapse;width:100%;table-layout:fixed;margin-top:16px;font-size:12px;color:#baccd7}
.group-plans caption {text-align:left;margin-bottom:10px;font-size:11px;color:#9db7c9}
.group-plans th,.group-plans td {text-align:left;padding:11px 8px;border-bottom:1px solid #91aac42b;overflow-wrap:anywhere}
.group-plans th {font-weight:600;color:#c6d9e5}.group-plans thead th {font-size:11px;color:#9fb8c8;font-weight:500}.group-plans .group-plan-note {font-size:11px;margin-top:13px;color:#9fb8c8}
#pricing-title {scroll-margin-top:30px}#pricing-title:focus-visible {outline:1px solid #8aacbf;outline-offset:6px;border-radius:3px}
#join-preview #join-selection {font-size:16px;color:#d5dfdf;padding:14px 0;border-top:1px solid #8ca5b54d;border-bottom:1px solid #8ca5b54d;line-height:1.8;margin:18px 0}
.pricing-section [hidden],#subject-preview [hidden] {display:none!important}
@media(max-width:900px) {.pricing-section {gap:25px}.pricing-options .price-card {padding:20px}.free-plan{padding:16px}.included-list li {padding:11px 0}#billing-period-options {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px) {.pricing-section {grid-template-columns:1fr}.pricing-inclusions .included-list {margin-bottom:0}.pricing-options .price-card{padding:21px}.free-plan{padding:17px}#billing-period-options {grid-template-columns:repeat(6,minmax(0,1fr))}.subject-dialog-heading {padding:17px;gap:11px}#subject-preview .subject-dialog-body {padding:15px 17px}.group-plans-body {padding:13px}.group-plans th,.group-plans td {padding:10px 4px}}
@media(max-width:440px) {#subject-skill-list {grid-template-columns:1fr;max-height:165px}.subject-selection {padding:10px}.subject-preview-actions {gap:10px!important}.subject-preview-actions>.text-link {font-size:11px}.free-plan{gap:10px}.free-plan p{font-size:11px}#billing-period-options {gap:4px}.period-choice span{font-size:12px}.price-card .price strong {font-size:52px}}
:is(.hero-actions>.text-link,.header-see-plans) {--panel-accent:112 129 229;--control-surface:linear-gradient(120deg,#1a355c,#303261);border-color:#8c9fe16b}
:is(.hero-actions>.text-link,.header-see-plans):focus-visible {outline-color:#a6b2f1}
body::before {
  background:radial-gradient(ellipse at 76% 20%,#38366f4d,transparent 47%),radial-gradient(ellipse at 16% 59%,#70254b24,transparent 44%),radial-gradient(ellipse at 33% 88%,#1067612b,transparent 46%),#080c12;
}

.tool-showcase[data-selected-tool=formulas],.tool-tabs button[data-tool=formulas] {--panel-accent:111 143 228;--panel-base:23 29 48}
.tool-showcase[data-selected-tool=elements],.tool-tabs button[data-tool=elements] {--panel-accent:59 172 141;--panel-base:17 33 34}
.tool-showcase[data-selected-tool=map],.tool-tabs button[data-tool=map] {--panel-accent:69 167 207;--panel-base:17 30 43}
.tool-showcase[data-selected-tool=history],.tool-tabs button[data-tool=history] {--panel-accent:197 127 163;--panel-base:35 25 40}
.tool-showcase[data-selected-tool=calculator],.tool-tabs button[data-tool=calculator] {--panel-accent:155 135 215;--panel-base:28 25 47}
.tool-showcase {border-color:rgb(var(--panel-accent) / .42)}
.tool-showcase .tool-tabs {gap:6px;padding:10px 11px;border-bottom:1px solid rgb(var(--panel-accent) / .33);background:linear-gradient(180deg,#040c164d,#0b14202b)}
.tool-showcase .tool-tabs button {font-size:11px;font-weight:550;min-height:33px;padding:6px 9px;border-color:rgb(var(--panel-accent) / .46)}
.tool-showcase .tool-tabs button[aria-selected=true] {color:#edf5fa;font-weight:650;border-color:rgb(var(--panel-accent) / .88);box-shadow:inset 0 1px #e5f2ff3b,inset 0 -2px rgb(var(--panel-accent) / .72),0 2px 0 #020810,0 5px 9px #0008}
.tool-tabs button:focus-visible {outline-color:rgb(var(--panel-accent))}
.tool-showcase #tool-panel {padding:0;min-height:0}
.tool-example {padding:17px 21px 18px;border-bottom:1px solid rgb(var(--panel-accent) / .28);background:linear-gradient(150deg,rgb(var(--panel-accent) / .13),#07101d2b)}
.tool-showcase #tool-kicker {font-size:11px;line-height:1.5;letter-spacing:.75px;margin:0;color:color-mix(in srgb,rgb(var(--panel-accent)) 42%,#cbdce7)}
.tool-showcase #tool-visual {font-size:32px;font-weight:550;line-height:1.4;letter-spacing:-.75px;margin:10px 0 0;min-height:0;color:color-mix(in srgb,rgb(var(--panel-accent)) 72%,#dce9f2);text-shadow:0 2px 2px #0009}
.tool-copy {padding:17px 21px 19px;background:linear-gradient(180deg,#020a1738,transparent 45%,rgb(var(--panel-accent) / .035))}
.tool-showcase #tool-title {font-size:20px;line-height:1.4;letter-spacing:-.45px;margin:0;color:#d3e1ea;font-weight:600}
.tool-showcase #tool-description {font-size:13px;line-height:1.8;margin:9px 0 0;min-height:0;color:#b8cad7}
.tool-showcase .tool-detail {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;padding:0;border-top:1px solid rgb(var(--panel-accent) / .25);background:#06111d5c}
.tool-detail>span {display:flex;flex-direction:column;gap:5px;min-width:0;padding:12px 14px;border-left:1px solid rgb(var(--panel-accent) / .2);font-size:12px;line-height:1.6;color:#aabfce}
.tool-detail>span:first-child {border-left:0}
.tool-showcase .tool-detail b {font:600 12px/1.6 var(--display);margin:0;color:#d1e3ec}
.tool-showcase .tool-footnote {font-size:12px;line-height:1.7;padding:12px 17px;margin:0;border-top:1px solid rgb(var(--panel-accent) / .27);background:linear-gradient(180deg,rgb(var(--panel-accent) / .04),#050d1761);color:#aabfcd}
@media(max-width:900px) {
  .tool-showcase .tool-tabs {gap:6px;padding:9px 10px}
  .tool-example,.tool-copy {padding-left:18px;padding-right:18px}
  .tool-showcase #tool-visual {font-size:29px}.tool-showcase #tool-title {font-size:19px}
  .tool-detail>span {padding:11px 12px}
}

/* Keep the finish labels readable on tablet/narrow layouts. */
@media(max-width:680px) {#billing-period-options {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
@media(prefers-reduced-motion:reduce) {#billing-period-options .period-face {transition:none}}
@media(forced-colors:active) {#billing-period-options .period-face {border-color:ButtonText;color:ButtonText;background:ButtonFace;box-shadow:none}#billing-period-options input:checked+.period-face {outline:2px solid Highlight;outline-offset:1px}}

/* Final navigation: subdued pastel-blue glass and sign-in as the primary action. */
.site-header {
  --panel-accent:137 166 216;
  border-color:#b6cde52b;border-top-color:#d0e0f23b;
}
.site-header::before {
  background:linear-gradient(120deg,#9db9e21a,transparent 39%,#6994d30d 73%,#adcaed14),rgba(12,20,32,.48);
  backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%);
}
.site-header::after {
  content:'';position:absolute;inset:1px;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(125deg,transparent 8%,#e3efff08 18%,#c7dcff12 23%,transparent 34%,transparent 80%,#dceaff07 88%,transparent 96%);
  opacity:.55;box-shadow:inset 0 1px #edf5ff12;transition:opacity .25s;
}
.site-header:hover::after {opacity:.75}
.site-header #primary-navigation .nav-dropdown>summary {
  --control-rgb:137 166 216;
  color:#c5d4e7;border-color:#9bbce330;border-top-color:#c5dbf43d;
  background-image:linear-gradient(180deg,#92b3e500 0%,#92b3e503 14%,#92b3e50e 28%,#92b3e527 40%,#92b3e53b 50%,#92b3e527 60%,#92b3e50e 72%,#92b3e503 86%,#92b3e500 100%),linear-gradient(180deg,#24345042,#12203838);
  background-size:100% 200%,100% 100%;background-position:0 0,0 0;
  box-shadow:inset 0 1px #e6f2ff1c,inset 0 -1px #7896bd26,0 1px #050c1455,0 3px 8px #0003;
  transition:background-position .4s cubic-bezier(.22,.7,.25,1),border-color .18s,color .18s;
}
.site-header #primary-navigation .nav-dropdown>summary:is(:hover,:focus-visible),
.site-header #primary-navigation .nav-dropdown[open]>summary {
  background-position:0 100%,0 0;border-color:#a6c7f05e;color:#e0eafa;
}
.site-header #primary-navigation>a:hover {background:linear-gradient(125deg,#9ebbf017,#bfd9f108);border-color:#c0d8f32e;color:#e0eafa}
.site-header .nav-panel {
  border-color:#b2caec45;border-top-color:#d4e3f36b;
  background:linear-gradient(125deg,#688cbe14,#7970ae0a),rgba(12,22,38,.76);
  backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%);
}
.site-header .nav-panel a:is(:hover,:focus-visible) {background:linear-gradient(115deg,#8faee91a,#bdd8ef09);border-color:#b3d0f12e;box-shadow:inset 0 1px #e6f2ff12}
.site-header .nav-panel a:focus-visible {outline-color:#accaf2}
.site-header .nav-panel .nav-overview {color:#d0e0f5!important}
.site-header .header-actions {gap:10px}
.site-header .header-actions .header-see-plans,
.site-header .header-actions .header-sign-in {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:35px;margin:0;padding:7px 13px;font-size:12px;line-height:1.5;white-space:nowrap;
}
.site-header .header-actions .header-sign-in,
.site-header .header-actions .header-sign-in:is(:hover,:focus-visible) {color:#17202a}
.site-header .header-actions .header-see-plans {color:#dcebee}
.site-header #primary-navigation>.nav-account {display:none}
.site-header :is(a,summary,.menu-toggle):focus-visible {outline:2px solid #accaf2;outline-offset:3px}
.hero::before {content:none;display:none}
@media(max-width:1100px) {
  .site-header .header-actions .header-see-plans,.site-header .header-actions .header-sign-in {font-size:11px;padding:7px 10px;gap:7px}
}
@media(max-width:900px) {
  .site-header #primary-navigation.is-open {background:linear-gradient(125deg,#688cbe10,#7970ae08),rgba(12,22,38,.78);border-color:#b2caec45;backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%)}
  .site-header #primary-navigation.is-open .nav-panel {background:#0a17296e;border-color:#9ebee52e;backdrop-filter:none;-webkit-backdrop-filter:none}
  .site-header .header-actions .header-sign-in {display:inline-flex}
}
@media(max-width:680px) {
  .site-header .header-actions {gap:8px}
  .site-header .header-actions .header-see-plans,.site-header .header-actions .header-sign-in {min-height:33px;padding:6px 9px;font-size:11px;gap:6px}
}
@media(max-width:420px) {.site-header .header-actions .header-see-plans {display:none}}
@media(prefers-reduced-motion:reduce) {.site-header::after,.site-header #primary-navigation .nav-dropdown>summary {transition:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .site-header::before,.site-header .nav-panel,.site-header #primary-navigation.is-open {background:#111d2d}
}