/* Final reading surfaces and interaction details. */
:root{--bg:#182220;--surface:#202c29;--surface2:#2a3732;--ink:#edf1e9;--muted:#bec9be;--line:#4b5c51;--teal:#a5d3b6;--accentbg:#30483b;--chrome:#111b17;--chrome-line:#415348}
:root[data-theme=light]{--bg:#f8f5ee;--surface:#fffdf8;--surface2:#eeeae0;--ink:#28332b;--muted:#566258;--line:#c8cfc4;--teal:#285b43;--accentbg:#e4eee3;--chrome:#e9ede3;--chrome-line:#bac8b7}
.header{background:var(--chrome)!important;border-bottom:1px solid var(--chrome-line);box-shadow:0 2px 12px #00000008;backdrop-filter:none}
.footer{background:var(--chrome)!important;border-top:1px solid var(--chrome-line);margin-top:64px;padding-top:40px}
.fa-icon{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-.12em;overflow:visible}
.main-nav a{display:inline-flex;align-items:center;gap:7px;padding:8px 9px;border-radius:4px;transition:background-color .16s,color .16s;text-decoration:none}
.main-nav a[aria-current=page]{background:var(--accentbg);color:var(--teal);box-shadow:inset 0 -2px var(--teal)}
.main-nav a:hover{background:var(--accentbg)}
.main-nav .fa-icon{font-size:.85em;opacity:.85}
.course-social a{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:3px 0}
.course-social .fa-icon{font-size:1.1rem}
.course-footer-grid a:not(.brand):hover,.course-footer-bottom a:hover{text-decoration:underline;text-underline-offset:4px;color:var(--teal)}
.study-route-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:16px;border-radius:6px;background:var(--accentbg);color:var(--teal);font-size:1.2rem}
.study-card,.card,.result{transition:border-color .18s,background-color .18s,box-shadow .18s}
.study-card:hover,.study-card:focus-visible{border-color:var(--teal);box-shadow:0 4px 14px #0000000c}
button,a,input,select,summary{ -webkit-tap-highlight-color:transparent }
button:not(:disabled),summary{cursor:pointer}
button{transition:background-color .16s,border-color .16s,color .16s}
button:not(:disabled):hover{border-color:var(--teal)}
button:not(:disabled):active{filter:brightness(.93)}
button:disabled{cursor:not-allowed;opacity:.48}
:where(a,button,input,select,summary):focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.system-player button .fa-icon{margin-right:4px}
.system-choices button:hover:not([aria-pressed=true]){background:var(--accentbg)}
.system-choices button[aria-pressed=true]{font-weight:700}
.system-scene .system-choices button,.system-scene .system-player button{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.system-scene .system-choices button[aria-pressed=true]{background:var(--accentbg);color:var(--teal);border-color:var(--teal)}
.system-scene .system-player button[data-system-action=play]{background:var(--teal);color:var(--bg);border-color:var(--teal)}
.system-scene .system-player button:disabled{background:var(--surface);color:var(--muted);opacity:.6}
.system-svg [data-component]:hover .component-box{stroke:var(--teal);stroke-width:2.5}
.component-panel-actions [data-component-x]{font-size:1.15rem}
.system-scene>.component-explainer{border-radius:10px;box-shadow:0 12px 36px #0004}
.component-panel-head small{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.component-panel-actions button[aria-pressed=true]{background:var(--teal);color:var(--bg)}
.analytics-choice strong{font-family:Georgia,'Times New Roman',serif;font-size:1.3rem;font-weight:500}
.analytics-choice button{flex:1;min-height:44px}.cookie-status{font-weight:600}
.theme,.menu{display:grid;place-items:center;min-width:42px;min-height:42px}
.menu{display:none}
@media(min-width:1101px){.main-nav{gap:2px;font-size:.82rem}}
@media(max-width:1200px){.js .menu.only-js{display:grid}.main-nav.open{background:var(--chrome)}.main-nav a{min-height:44px}}
@media(max-width:600px){.footer{margin-top:40px;padding-top:28px}.course-footer-bottom{gap:12px 24px}.course-footer-grid nav a{min-height:32px}.analytics-choice{padding:18px}.analytics-choice button{flex-basis:100%}}
@media(prefers-reduced-motion:no-preference){.study-route-icon .fa-icon{transition:transform .2s}.study-card:hover .study-route-icon .fa-icon{transform:translateY(-2px)}.component-explainer:not([hidden]){animation:detail-appear .16s ease-out}@keyframes detail-appear{from{transform:translateY(5px)}to{transform:translateY(0)}}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Varied editorial palette: ivory, ink, periwinkle, ochre and terracotta. */
:root{--bg:#1d1e26;--surface:#272832;--surface2:#32323e;--ink:#f0edf4;--muted:#c4bece;--line:#555261;--teal:#b3c5f7;--accentbg:#343e5b;--orange:#edbe78;--chrome:#151924;--chrome-line:#414657;--danger:#ffb3a7}
:root[data-theme=light]{--bg:#faf7f1;--surface:#fffdf9;--surface2:#f0ebe5;--ink:#302e38;--muted:#625c69;--line:#d1c9c5;--teal:#405a91;--accentbg:#edf0f9;--orange:#8c5d23;--chrome:#242b3d;--chrome-line:#424a61;--danger:#a74335}
.header{--ink:#f4f2f7;--muted:#d2d6e2;--teal:#c2d1fa;--accentbg:#37435f;color:var(--ink)}
.header .brand span{color:#e6bc84}.header .theme,.header .menu{color:var(--ink);border-color:#5c6478}.header .main-nav.open{color:var(--ink);background:var(--chrome)}
.footer{background:#28242d!important;border-color:#574c5c;--ink:#eee9ef;--muted:#c7bdce;--teal:#dbbc97;--line:#574c5c;color:var(--muted)}
:root[data-theme=light] .footer{background:#ebe3da!important;border-color:#d1c1b3;--ink:#3c3335;--muted:#65575b;--teal:#765135;--line:#d1c1b3;color:var(--muted)}
.study-card:nth-child(3n+1){border-top:3px solid #8e8abb}.study-card:nth-child(3n+2){border-top:3px solid #bd8955}.study-card:nth-child(3n){border-top:3px solid #b86d65}
.study-card:nth-child(3n+2) .study-route-icon{background:#f4e7d3;color:#81551d}.study-card:nth-child(3n) .study-route-icon{background:#f6e3de;color:#954a40}
.fun-promo{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:32px;border:1px solid var(--line);border-left:4px solid #b9834a;background:var(--surface2);border-radius:8px;margin:44px 0}.fun-promo h2{font-family:Georgia,serif;line-height:1.25}.fun-promo p{margin:0;color:var(--muted)}.fun-promo .primary{flex-shrink:0;display:inline-flex;align-items:center;gap:10px}.fun-promo .eyebrow{color:var(--orange)}
@media(max-width:1320px){.js .menu.only-js{display:grid;margin-left:auto}.js .main-nav{display:none;position:absolute;top:76px;left:0;right:0;margin:0;padding:18px;background:var(--chrome);border-bottom:1px solid var(--chrome-line);align-items:stretch}.js .main-nav.open{display:flex;flex-direction:column;gap:0}.js .main-nav a{min-height:44px;padding:12px}.js .main-nav .external{display:flex}}
@media(max-width:600px){.fun-promo{flex-direction:column;align-items:flex-start;padding:24px}.head-inner{gap:12px}}
/* Shared brand family: quiet reading surfaces, distinct page chrome. */
:root{--bg:#17212d;--surface:#202e3b;--surface2:#2a3b49;--ink:#edf2f6;--muted:#bdcbd6;--line:#506171;--teal:#8fd5ce;--accentbg:#293f4a;--chrome:#101a26}
:root[data-theme=light]{--bg:#f6f8fa;--surface:#ffffff;--surface2:#edf2f5;--ink:#172337;--muted:#4f6071;--line:#c7d2db;--teal:#236f72;--accentbg:#e7f2f1;--chrome:#e6edf2;--chrome-line:#c7d2db}
:root[data-theme=light] .header{--ink:#172337;--muted:#4f6071;--teal:#236f72;--accentbg:#d9e7ec;color:var(--ink)}
:root[data-theme=light] .header .brand span{color:#236f72}
:root[data-theme=light] .footer{background:#e2eaf0!important;--ink:#172337;--muted:#4f6071;--teal:#236f72;--line:#bac9d3;border-color:var(--line)}
/* Match the main site's rounded navigation and restrained glass surfaces. */
.header{background:color-mix(in srgb,var(--chrome) 94%,transparent)!important;backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--chrome-line),0 8px 28px #0f172a08}
.head-inner{width:min(1440px,calc(100% - 48px));gap:18px;min-height:76px}
.header .brand span{color:var(--teal)}
.main-nav{padding:6px;gap:2px;border:1px solid #ffffff24;border-radius:999px;background:linear-gradient(135deg,#ffffff0e,#ffffff05);box-shadow:0 10px 30px #00000018}
.main-nav a{border-radius:999px;padding:10px 12px;white-space:nowrap;font-weight:500;font-size:.8rem}
.main-nav a[aria-current=page]{background:linear-gradient(135deg,var(--accentbg),#e88d2610);box-shadow:inset 0 0 0 1px var(--line)}
:root[data-theme=light] .main-nav{background:#ffffffc7;border-color:#0f172a14;box-shadow:0 10px 32px #0f172a14,inset 0 1px 0 #ffffffcc}
.header .theme,.header .menu{flex-shrink:0;border-color:var(--chrome-line);background:var(--surface)}
@media(max-width:1320px){.js .main-nav{top:76px;left:12px;right:12px;border-radius:16px;padding:12px;max-height:calc(100dvh - 92px);overflow-y:auto;border:1px solid var(--chrome-line);box-shadow:0 16px 40px #00000024}.js .main-nav a{border-radius:9px;padding:12px 16px}.head-inner{width:calc(100% - 32px)}.header .menu{border-radius:10px}}
@media(prefers-reduced-motion:reduce){.main-nav a{transition:none}}
/* Dark reading palette: deeper canvas, crisp type, distinct chrome. */
:root:not([data-theme=light]){--bg:#0c1420;--surface:#142235;--surface2:#1c3047;--ink:#f3f6fb;--muted:#bdcce0;--line:#465d79;--teal:#72ddd0;--accentbg:#193e46;--orange:#f4bd70;--chrome:#080f19;--chrome-line:#344962;--danger:#ffac9e}
:root:not([data-theme=light]) .header{--ink:#f3f6fb;--muted:#bdcce0;--teal:#72ddd0;--accentbg:#193e46}
:root:not([data-theme=light]) .footer{background:#080f19!important;--ink:#f3f6fb;--muted:#bdcce0;--teal:#72ddd0;--line:#344962;border-color:var(--line)}
:root:not([data-theme=light]) .main-nav{background:#142235;border-color:#344962;box-shadow:0 8px 24px #00000030}
:root:not([data-theme=light]) .study-route-icon{background:#233c61;color:#bbd6ff}
/* Explicit foreground/background pairs keep action labels readable. */
.primary,.searchbox button{background:var(--teal);color:var(--bg);border:1px solid var(--teal);transition:background-color .18s,color .18s,border-color .18s}
a.primary:hover,button.primary:hover,.fun-promo .primary:hover,.searchbox button:hover,.primary:focus-visible{background:var(--bg);color:var(--teal);border-color:var(--teal);text-decoration:none}
.primary .fa-icon,.primary .game-icon{color:inherit;flex-shrink:0}
.game-icon{display:inline-block;flex-shrink:0;vertical-align:middle}
.home-play{display:inline-flex;align-items:center;gap:10px;margin-top:20px;white-space:normal}
.course-footer-bottom .back-top{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:9px 16px;border:1px solid var(--teal);border-radius:7px;background:var(--teal);color:var(--bg);font-weight:600;text-decoration:none}
.course-footer-bottom .back-top:hover,.course-footer-bottom .back-top:focus-visible{background:var(--bg);color:var(--teal)}
.fun-promo{position:relative;isolation:isolate;overflow:hidden}.fun-promo>*{position:relative;z-index:1}.fun-promo:before{content:'';position:absolute;z-index:0;inset:-50%;pointer-events:none;background:radial-gradient(ellipse at 25% 45%,#4f91cb18,transparent 42%),radial-gradient(ellipse at 75% 55%,#dcac6918,transparent 40%);transform:translateX(3%)}
@media(prefers-reduced-motion:no-preference){.fun-promo:before{animation:welcome-glow 4s ease-out 1}@keyframes welcome-glow{from{transform:translateX(-5%);opacity:.2}to{transform:translateX(3%);opacity:1}}}
@media(min-width:1100px) and (max-width:1320px){.js .menu.only-js{display:none}.js .main-nav{display:flex;position:static;flex-direction:row;align-items:center;margin-left:auto;max-height:none;overflow:visible;padding:5px;border-radius:999px;gap:0}.js .main-nav a{padding:10px 8px;font-size:.72rem;border-radius:999px;min-height:40px}.main-nav .fa-icon{display:none}.head-inner{gap:10px}.header .brand{font-size:1rem;gap:8px}.header .brand img{width:32px}}
/* Footer utility: quiet, compact and aligned with the legal links. */
.course-footer-bottom{align-items:center;gap:12px 24px}
.course-footer-bottom .back-top{margin-left:auto;min-height:40px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:.8rem;font-weight:500;line-height:1.4;box-shadow:inset 0 1px 0 #ffffff08}
.course-footer-bottom .back-top:hover,.course-footer-bottom .back-top:focus-visible{background:var(--surface2);color:var(--ink);border-color:var(--teal);text-decoration:none}
@media(max-width:600px){.course-footer-bottom>span{flex-basis:100%}.course-footer-bottom .back-top{margin-left:0}}