/* Shared, perceptual theme. Existing script fonts and tool behavior stay intact. */
:root{color-scheme:light dark;--hue:204;--bg:oklch(.974 .006 var(--hue));--bg-deep:oklch(.99 .003 var(--hue));--text:oklch(.23 .015 var(--hue));--muted:oklch(.46 .02 var(--hue));--accent:oklch(.44 .078 var(--hue));--accent-strong:oklch(.35 .07 var(--hue));--cta:oklch(.44 .078 var(--hue));--cta-hover:oklch(.37 .07 var(--hue));--card:oklch(.5 .025 var(--hue)/.035);--hairline:oklch(.3 .02 var(--hue)/.14);--surface:oklch(.995 .001 var(--hue));--button-ink:oklch(.99 0 0)}
html[data-script=futhark]{--hue:291;--accent:oklch(.46 .16 291);--accent-strong:oklch(.38 .14 291);--cta:oklch(.46 .16 291);--cta-hover:oklch(.4 .15 291)}
@media(prefers-color-scheme:dark){:root{--bg:oklch(.18 .012 var(--hue));--bg-deep:oklch(.135 .008 var(--hue));--text:oklch(.96 .006 var(--hue));--muted:oklch(.76 .018 var(--hue));--accent:oklch(.81 .1 var(--hue));--accent-strong:oklch(.89 .07 var(--hue));--cta:oklch(.48 .08 var(--hue));--cta-hover:oklch(.55 .08 var(--hue));--card:oklch(1 0 0/.035);--hairline:oklch(1 0 0/.12);--surface:oklch(.21 .012 var(--hue))}html[data-script=futhark]{--accent:oklch(.79 .13 291);--accent-strong:oklch(.88 .08 291);--cta:oklch(.48 .16 291);--cta-hover:oklch(.55 .16 291)}}
html,body{background:var(--bg-deep);color:var(--text);color-scheme:light dark}body{min-height:100dvh}h1,h2,h3,h4{color:var(--text);text-wrap:balance}p{ text-wrap:pretty}.site-header,.site-menu[open]>.site-nav,.learn-panel{background:var(--surface);border-color:var(--hairline);box-shadow:none}.site-header a,.site-header summary,.learn-panel>a,.nav-download{color:var(--text)}.site-nav>a:hover,.learn-menu>summary:hover,.site-nav [aria-current=page],.learn-menu[open]>summary,.learn-panel>a:hover{color:var(--text);background:var(--card)}.learn-panel small,.learn-panel>p,.lede,.note,.muted,.rating-text,.blog-intro,.blog-categories a,.post-summary,.post-meta,.post-date,.archive-note,.breadcrumbs,.editorial-note p,.article-prose p,.article-prose li,.bibliography li p,.reading-example .example-label,.guide p,.legal p,.credit,.feature p{color:var(--muted)}.nav-download{background:var(--card);border-color:var(--hairline)}.nav-download:hover{background:var(--hairline)}.brand-name{color:var(--text)}.guide,.legal,.page{color:var(--text)}.tool textarea,.tool select{background:var(--surface);color:var(--text);border-color:var(--hairline)}.tool button,.action{background:var(--cta);color:var(--button-ink)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}::selection{background:var(--accent);color:var(--bg-deep)}
/* The collection mirrors a Home Screen: icon, name, then availability. */
.app-collection{border-top:1px solid var(--hairline);padding:72px 0;text-align:start;background:var(--bg)}.app-collection-inner{max-width:1120px;margin:auto;padding:0 24px}.app-collection h2{font-size:clamp(28px,4vw,42px);font-weight:500;letter-spacing:-.03em;max-width:30ch;margin:0}.app-collection p{max-width:55ch;color:var(--muted);font-size:17px;line-height:1.7;margin:16px 0 36px}.app-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px 24px;list-style:none;padding:0;margin:0}.app-tile{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font-size:16px;min-width:0}.app-tile a,.app-tile>div{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:var(--text);padding:8px;min-width:0;width:100%;border-radius:18px}.app-tile picture{display:block;width:clamp(64px,8vw,92px);aspect-ratio:1}.app-tile img{display:block;width:100%;height:100%;border-radius:23%;box-shadow:0 4px 12px oklch(0 0 0/.09)}.app-tile a:hover picture{transform:translateY(-3px)}.app-tile picture{transition:transform .2s}.app-name{font-weight:500}.app-status{font-size:13px;color:var(--muted)}.app-tile.coming .app-name{color:var(--muted)}footer .app-collection{margin-top:40px}footer .app-collection h2{font-size:28px}.mockup-feature{max-width:1120px;margin:auto;padding:64px 24px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.mockup-feature img{display:block;max-height:680px;max-width:100%;margin:auto;object-fit:contain}.mockup-feature h2{font-size:clamp(30px,4vw,48px);font-weight:500;letter-spacing:-.03em;max-width:22ch}.mockup-feature p{font-size:19px;color:var(--muted);line-height:1.7;margin:24px 0;max-width:40ch}.article-prose .object-image{margin-top:24px}.page.article-page{max-width:800px}.article-page>p{line-height:1.85;max-width:70ch}.script-study{margin:32px 0;padding:24px 0;border-block:1px solid var(--hairline)}.script-study textarea{width:100%;resize:vertical;background:var(--surface);color:var(--text);border:1px solid var(--hairline);border-radius:12px;padding:16px;font-size:28px}.study-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.study-actions button,.study-actions a{font:inherit;color:var(--accent);background:var(--card);border:1px solid var(--hairline);border-radius:10px;padding:10px 14px;min-height:44px;text-decoration:none;cursor:pointer}.study-status{min-height:1.5em;color:var(--muted)}.alphabet-search{display:block;width:100%;max-width:34rem;padding:14px 16px;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--hairline);border-radius:12px;margin:24px 0}.rune-card[hidden]{display:none}.rune-card button{background:var(--card);color:var(--accent);border:1px solid var(--hairline)}.article-list a{color:var(--text);font-size:24px;line-height:1.5}.article-list a:hover{text-decoration:underline}.tool-actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}.font-note{color:var(--muted);font-size:16px}.reading-text{font-size:32px!important;overflow-wrap:anywhere}.rune-grid{gap:16px}.rune-card{box-shadow:none}.guide{max-width:1000px}.related-reading{margin:48px 0 24px;padding-top:24px;border-top:1px solid var(--hairline)}
@media(prefers-color-scheme:dark){.app-tile img{box-shadow:none}.modal-card,.phone,.rune-card,.tool{box-shadow:none}}
@media(max-width:700px){.app-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 12px}.app-collection{padding:48px 0}.app-collection-inner{padding:0 20px}.app-tile picture{width:72px}.app-status{font-size:13px}.mockup-feature{grid-template-columns:1fr;padding:48px 24px;gap:24px}.mockup-feature img{max-height:540px}.article-page>p{font-size:17px}.site-menu-toggle{font-size:16px}.site-nav{font-size:16px}.app-collection p{font-size:16px}.tool input,.tool select,.tool textarea{font-size:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.app-tile picture{transition:none}.app-tile a:hover picture{transform:none}}
@media print{.app-collection,.mockup-feature,.study-actions,.alphabet-search,.site-header{display:none!important}}
#letter-dialog{margin:auto;max-width:min(90vw,420px);padding:28px;border:1px solid var(--hairline);border-radius:24px;background:var(--surface);color:var(--text)}#letter-dialog::backdrop{background:oklch(0 0 0/.5)}#letter-dialog p{margin-top:16px}.btn.primary,.swap{background:var(--cta);color:var(--button-ink)}.chip[aria-pressed=true],.lf-card[aria-pressed=true]{background:var(--card);color:var(--accent);border-color:var(--accent)}.modal-card,.sheet{background:var(--surface);color:var(--text)}.lf-card,.ref,.ages,.timeline{color:var(--text)}.field::placeholder{color:var(--muted)}
.step .lede,.hero-step .lede,.step p.lede,.feature-copy p,.feature-copy .lede{color:var(--muted)}.visual-stage img,.step-visual img{filter:none}.step .note{color:var(--muted)}.rating .rating-text{color:var(--muted)}.scrolly .step-visual img{max-height:650px;object-fit:contain}.site-header picture{display:flex}.credit a{color:var(--accent)}
/* Preserve each mockup's native aspect ratio inside the pinned stage. */
html[data-script=futhark] .visual-stage{width:min(440px,38vw);height:min(740px,84svh);aspect-ratio:auto;filter:none}
html[data-script=futhark] .visual-stage img{width:100%;height:100%;object-fit:contain;object-position:center}
html[data-script=futhark] .page.article-page{max-width:1120px}

.planned-script-mark{display:grid;place-items:center;width:92px;height:92px;border-radius:22px;background:var(--soft);color:var(--muted);font:500 32px system-ui}

.duo-feature {max-width:1120px;margin:100px auto;padding:0 24px;display:grid;gap:36px;align-items:center;grid-template-columns:1fr 1.8fr;}
.duo-feature h2 {font-size:clamp(2rem,4vw,3.5rem);line-height:1.06;letter-spacing:-.04em;margin:12px 0 20px;}
.duo-feature p {max-width:36ch;line-height:1.6;}
.duo-label {font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;opacity:.65;}
@media(max-width:760px) {.duo-feature {grid-template-columns:1fr;margin:64px auto;}}

.duo-media {position:relative;background:transparent;}
.duo-media img {display:block;width:100%;height:auto;border:0;border-radius:0;box-shadow:none;}

/* The scroll position controls the product tour. No timed playback or player controls. */
.duo-feature {display:block;max-width:none;height:auto;margin:100px 0;padding:0;}
.duo-feature.is-tour {height:360svh;}
.duo-feature.is-tour .duo-stage {position:sticky;}
.duo-stage {position:static;top:64px;min-height:calc(100svh - 64px);max-width:1280px;margin:auto;padding:40px 32px;display:grid;grid-template-columns:1fr 2.2fr;gap:24px;align-items:center;}
.duo-media img {max-height:78svh;object-fit:contain;}
@media(max-width:760px){.duo-feature{margin:64px 0}.duo-feature.is-tour{height:300svh}.duo-stage{grid-template-columns:1fr;align-content:center;gap:8px;padding:24px 20px}.duo-stage h2{font-size:2.3rem;margin:8px 0 12px}.duo-stage p{font-size:15px}.duo-media img{max-height:52svh}}
@media(prefers-reduced-motion:reduce){.duo-feature.is-tour{height:auto}.duo-feature.is-tour .duo-stage{position:static;min-height:0}}
@media(min-width:761px){.duo-stage{grid-template-columns:.85fr 2.2fr}.duo-media img{transform:scale(1.12)}}

/* Keep keyboard navigation available without shifting the page. */
a.skip{position:fixed;inset-block-start:12px;inset-inline-start:12px;z-index:1000;transform:translateY(calc(-100% - 24px));padding:12px 18px;border-radius:12px;background:var(--surface);color:var(--accent);border:1px solid var(--hairline)}
a.skip:focus{transform:translateY(0)}
/* The quiz is a focused task, with controls grouped below its introduction. */
.page:has(#quiz){box-sizing:border-box;width:100%;max-width:1000px;margin-inline:auto;padding:48px 24px 64px}
.page:has(#quiz) h1{font-size:clamp(2rem,4vw,3.25rem);line-height:1.1;letter-spacing:-.04em;margin:0 0 16px;max-width:24ch}
.page:has(#quiz) .lede{font-size:1.125rem;line-height:1.6;margin:0 0 28px}
#quiz.tool{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;background:var(--surface);padding:28px;margin:0 0 20px}
#quiz.tool>label{grid-column:1/-1;font-size:.9375rem;font-weight:600}
#quiz.tool>select{width:100%;min-width:0;margin:0;min-height:48px;border:1px solid var(--hairline)}
#quiz.tool>button{margin:0;align-self:end}
#quiz.tool #quiz-stage,#quiz.tool #score{grid-column:1/-1}
#quiz.tool [hidden]{display:none!important}
#quiz.tool #score:empty{display:none}
#quiz.tool #progress{margin:12px 0 0;font-size:.9375rem;color:var(--muted)}
#quiz.tool .question{font-size:clamp(5rem,12vw,8rem);line-height:1.3;margin:20px 0}
#quiz.tool #answers{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#quiz.tool #answers button{min-height:80px;background:var(--bg);color:var(--text);border:1px solid var(--hairline);font-size:2.25rem}
#quiz.tool #answers button:hover:not(:disabled){border-color:var(--accent);background:var(--card)}
#quiz.tool #feedback{min-height:1.6em;margin:16px 0}
.page:has(#quiz)>p:not(.lede){font-size:.9375rem;line-height:1.6;color:var(--muted)}
@media(max-width:600px){.page:has(#quiz){padding:32px 20px 48px}#quiz.tool{padding:20px;grid-template-columns:minmax(0,1fr);gap:12px}#quiz.tool>button{width:100%}.page:has(#quiz) h1{max-width:20ch}}
/* Six apps share a complete row; planned icons retain the same composed finish. */
.app-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.app-tile.coming picture{opacity:.78}
@media(max-width:900px){.app-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.app-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}}
/* A footer closes the page. Keep its navigation readable in both themes. */
footer{color:var(--muted)}footer a{color:var(--muted)!important;opacity:1!important}footer a:hover{color:var(--accent)!important}footer>a[href='/support']{display:inline-block;margin-top:12px}