@font-face{font-family:'Geologica';font-style:normal;font-weight:200 600;font-display:swap;src:url(Geologica-200-600.9d719fcc5acb.woff2) format('woff2')}
@font-face{font-family:'LTL Cyrillic';font-style:normal;font-weight:200 600;font-display:swap;unicode-range:U+0300-0301,U+0400-052F,U+1C80-1C8F,U+2DE0-2DFF,U+A640-A69F;src:url(Geologica-200-600.9d719fcc5acb.woff2) format('woff2')}
@font-face{font-family:'LTL Cyrillic';font-style:italic;font-weight:200 600;font-display:swap;unicode-range:U+0300-0301,U+0400-052F,U+1C80-1C8F,U+2DE0-2DFF,U+A640-A69F;src:url(Geologica-200-600.9d719fcc5acb.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0462-0463;src:url(Oswald-600.5c971aa0d2d5.woff2) format('woff2')}
@font-face{font-family:'Sofia Sans Extra Condensed';font-style:normal;font-weight:400 900;font-display:swap;src:url(SofiaSansExtraCondensed-400-900.db7171ee9e92.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(Spectral-400.60e4672092dc.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(Spectral-400i.d47c8b2c7d77.woff2) format('woff2')}
:root {
--motion: 1;
--d-xs: calc(100ms * var(--motion));
--d-s:  calc(150ms * var(--motion));
--d-m:  calc(250ms * var(--motion));
--d-l:  calc(400ms * var(--motion));
--d-xl: calc(700ms * var(--motion));
--e-std:   cubic-bezier(.2, 0, 0, 1);
--e-enter: cubic-bezier(.05, .7, .1, 1);
--e-exit:  cubic-bezier(.3, 0, .8, .15);
--e-snap:  cubic-bezier(.2, 0, 0, 1.4);
--settle:     cubic-bezier(.16, 1, .3, 1);
--gather:     cubic-bezier(.55, 0, 1, .45);
--snap-to:    cubic-bezier(.2, .9, .25, 1);
--weight:     cubic-bezier(.34, 1.2, .64, 1);
--breath-in:  cubic-bezier(.4, 0, .4, 1);
--breath-out: cubic-bezier(.3, 0, .6, 1);
}
@media (prefers-reduced-motion: reduce) { :root { --motion: .12; } }
:root {
--room:      #f7f9ff;
--case:      #e8eefc;
--galley:    #fffef9;
--rule:      #d2d9e8;
--rule-room: #8798b8;
--steel:     #46536f;
--pine:      #244177;
--pine-deep: #152747;
--on-pine:   #fffdf5;
--sheet:  #fffdf5;
--carbon: #17213a;
--signal:     #f6c445;
--signal-ink: #8a5a00;
--on-signal: var(--carbon);
--shadow: 0 2px 0 #243a70;
--grain-op: 0;
--bill:  'LTL Cyrillic', 'Sofia Sans Extra Condensed', 'Oswald', 'Arial Narrow', sans-serif;
--serif: 'LTL Cyrillic', 'Spectral', 'Charter', Georgia, 'Times New Roman', serif;
--sans:  'LTL Cyrillic', 'Geologica', 'Arial', sans-serif;
--mono:  'LTL Cyrillic', 'Geologica', ui-monospace, monospace;
--paper: var(--room); --panel: var(--galley);
--canvas: var(--room); --gesso: var(--galley); --size: var(--rule); --foot: var(--rule-room);
--paper-0: var(--galley); --paper-1: var(--room); --paper-2: var(--case);
--paper-hi: var(--sheet); --card: var(--galley);
--line: var(--rule); --line-2: var(--rule-room);
--ink: var(--carbon); --ink-0: var(--carbon); --ink-1: var(--carbon);
--ink-2p: var(--steel); --ink-3p: #56627d;
--ink-2: var(--ink-2p); --ink-3: var(--ink-3p);
--faint: var(--ink-3p);
--minium: var(--signal); --minium-t: var(--signal-ink);
--accent: var(--signal); --accent-deep: var(--signal-ink); --accent-text: var(--signal-ink);
--accent-tint: rgba(246,196,69,.16);
--cobalt: var(--carbon); --flare: var(--signal);
--paste: var(--carbon); --brass: var(--earned, #906723); --brass-t: var(--earned, #906723);
--gold: 246,196,69;
--gold-leaf: #b8860b; --gold-hi: #ffe28a;
--malachite: #22a06b; --malachite-ink: #167a50; --on-malachite: var(--carbon);
--malachite-tint: rgba(34,160,107,.14);
--lazur: #244177; --lazur-ink: #152747; --on-lazur: #fffdf5;
--lazur-tint: rgba(36,65,119,.12);
--zelyonka: var(--malachite); --ok: var(--malachite); --good: var(--malachite-ink);
--limelight: var(--sheet);
--info: var(--lazur-ink); --warn: #8a5a00; --err: #c83d31;
--verm: #e9543f; --verm-soft: rgba(233,84,63,.12); --wax: #c83d31;
--new-tint: rgba(36,65,119,.12); --cold: var(--steel);
--hm0: var(--rule); --hm1: #e8b8a0; --hm2: #d08762; --hm3: #ab4a28; --hm4: var(--signal-ink);
}
[data-theme="dark"] {
--gold-leaf: #e0ad25; --gold-hi: #ffe28a;
--room:      #121d38;
--case:      #0b1328;
--galley:    #1c2a4c;
--rule:      #53658c;
--rule-room: #42547d;
--pine:      #84a2e4;
--pine-deep: #38599f;
--on-pine:   #10182d;
--steel:     #c4cde2;
--sheet:  #253454;
--carbon: #fff8df;
--signal:     #f6c445;
--signal-ink: #ffe28a;
--on-signal: var(--on-pine);
--ink-3p: #aab6d0;
--accent-tint: rgba(246,196,69,.14); --new-tint: rgba(93,140,255,.16);
--gold: 246,196,69;
--shadow: 0 2px 0 #0b1328;
--grain-op: 0;
--hm0: var(--rule-room); --hm1: #7a3a22; --hm2: #a2502f; --hm3: #cf7452; --hm4: #ffb59a;
--malachite: #38c98a; --malachite-ink: #82e5b7; --on-malachite: #0b2b1c;
--malachite-tint: rgba(56,201,138,.15);
--lazur: #628ce3; --lazur-ink: #a0beff; --on-lazur: #0e1526;
--lazur-tint: rgba(98,140,227,.18);
--err: #ff7d70;
}
[data-theme="sepia"] {
--gold-leaf: #e0ad25; --gold-hi: #f6c445;
--room: #e8dabb; --case: #d8c9a4; --galley: #fff8df;
--rule: #cdb894; --rule-room: #8e7240; --steel: #554b3d;
--sheet: #fffaf0; --carbon: #17213a;
--signal: #f6c445; --signal-ink: #7a5000; --on-signal: var(--carbon);
--pine: #244177; --pine-deep: #152747; --on-pine: var(--sheet);
--ink-3p: #5e5444;
--hm0: var(--rule); --hm1: #ffd7a6; --hm2: #ff9f82; --hm3: #e9543f; --hm4: #c83d31;
--malachite: #22a06b; --malachite-ink: #166d49; --on-malachite: var(--carbon);
--malachite-tint: rgba(34,160,107,.12);
--lazur: #244177; --lazur-ink: #152747; --on-lazur: var(--sheet);
--lazur-tint: rgba(36,65,119,.12);
--err: #b9342a;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans);
transition: background var(--d-m) var(--e-std), color var(--d-m) var(--e-std); min-height: 100vh;
font-kerning: normal; text-rendering: optimizeLegibility;
}
body::before {
content: ''; position: fixed; inset: 0; z-index: 60; pointer-events: none;
background: radial-gradient(130% 105% at 50% 6%,
rgba(255,213,150,.05) 0%, transparent 44%,
rgba(38,22,8,.08) 78%, rgba(38,22,8,.17) 100%);
}
[data-theme="dark"] body::before {
background: radial-gradient(120% 95% at 50% 8%,
rgba(255,190,120,.05) 0%, transparent 40%,
rgba(0,0,0,.24) 78%, rgba(0,0,0,.44) 100%);
}
button { font-family: inherit; }
h1,h2,h3 { font-family: var(--serif); font-weight: var(--fw-text); letter-spacing: var(--track-title); text-transform: none; }
.muted { color: var(--ink-2); } .faint { color: var(--ink-3); }
header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 94%, transparent);
border-bottom: 1px solid var(--line); }
.bar { max-width: 900px; margin: 0 auto; padding: 9px 16px; display: flex; align-items: center; gap: 10px; }
@media (max-width: 900px) { .bar { gap: 7px; } .brand { display: none; } }
@media (max-width: 620px) { .nav-tabs button { padding: 6px 5px; font-size: .8rem; } }
.brand { font-family: var(--serif); font-size: 1.05rem; letter-spacing: .18em; cursor: pointer; user-select: none; }
.brand b { color: var(--verm); font-weight: 600; }
.nav-tabs { display: flex; gap: 3px; }
.nav-tabs button { border: none; background: none; color: var(--ink-2); padding: 6px 9px; font-size: .86rem;
cursor: pointer; border-radius: 8px; transition: color var(--d-s) var(--e-std); }
.nav-tabs button:hover { color: var(--verm); }
.nav-tabs button.active { color: var(--verm); font-weight: 600; }
.spacer { flex: 1; }
.streak-chip { display: flex; align-items: center; gap: 5px; font-size: .85rem; color: var(--ink-2);
border: 1px solid var(--line); padding: 3px 10px; border-radius: 20px; background: var(--card); cursor: default; }
.streak-chip .fl { color: var(--verm); display: inline-block; transform-origin: 50% 90%; }
@media all {
body.motion-full .streak-chip .fl { animation: flamewob 3.4s ease-in-out infinite; }
@keyframes flamewob { 0%,100%{transform:rotate(0) scaleY(1)} 30%{transform:rotate(-3deg) scaleY(1.04)} 60%{transform:rotate(2.5deg) scaleY(.97)} 80%{transform:rotate(-1.5deg) scaleY(1.02)} }
}
.theme-dots { display: flex; gap: 7px; }
.theme-dots button { width: 21px; height: 21px; border-radius: 50%; cursor: pointer; border: 1.5px solid var(--line); padding: 0;
transition: border-color var(--d-s) var(--e-std), box-shadow var(--d-s) var(--e-std); }
.theme-dots button.on { border-color: var(--verm); box-shadow: 0 0 0 2px var(--verm-soft); }
.t-paper { background: #f7f9ff; } .t-sepia { background: #e8dabb; } .t-dark { background: #121d38; }
.icon-btn { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 8px;
padding: 5px 10px; font-size: .85rem; cursor: pointer; transition: border-color var(--d-s) var(--e-std), background var(--d-s) var(--e-std); }
.icon-btn:hover { border-color: var(--verm); }
.icon-btn.on { background: var(--verm); border-color: var(--verm); color: #f6efe1; }
.view { display: none; max-width: 900px; margin: 0 auto; padding: 26px 20px calc(var(--band, 40px) * 2); }
#v-read.view { padding-bottom: calc(4.5rem + var(--s7)); }
.view.show { display: block; }
.masthead { text-align: center; margin: 22px 0 26px; }
.masthead .t0 { letter-spacing: .3em; font-size: .72rem; color: var(--steel); }
.masthead .rule { width: 132px; margin: 18px 0 0; border-top: 3px solid var(--signal); position: relative; }
.masthead .rule span { position: absolute; top: -0.72em; left: 50%; transform: translateX(-50%);
background: none; padding: 0 10px 0 0; color: var(--signal); display: inline-block; }
@media all {
body.motion-full .masthead .rule span { animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 0%,100%{transform:translateX(-50%) scale(1)} 50%{transform:translateX(-50%) scale(1.05)} }
}
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; }
.card h3 { margin: 0 0 10px; font-size: 1.06rem; }
.btnrow { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.meter { height: 8px; border-radius: 4px; background: var(--hm0); position: relative; overflow: hidden; }
.meter > i { position: absolute; inset: 0; border-radius: 4px; transform-origin: 0 50%;
transform: scaleX(var(--v, 0)); transition: transform calc(900ms * var(--motion)) var(--e-enter); }
.meter > i.storage { background: var(--signal); opacity: .55; }
.meter > i.retr { background: var(--verm); }
.meter .tick { position: absolute; top: -3px; width: 1px; height: 14px; background: var(--ink-3); }
.meter .tick.t98 { background: var(--good); }
.dots { line-height: 1.9; }
.dots svg { vertical-align: middle; margin: 0 1px; }
.dots .strike { stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round;
stroke-dasharray: 14; stroke-dashoffset: 14; }
.dots .struck .strike { transition: stroke-dashoffset calc(180ms * var(--motion)) var(--e-std); stroke-dashoffset: 0; }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.book { position: relative; border: 1px solid var(--line); border-radius: 6px 12px 12px 6px; padding: 18px 16px 14px 22px;
background: linear-gradient(90deg, color-mix(in srgb, var(--verm) 14%, var(--card)) 0 8px, var(--card) 8px);
cursor: pointer; transition: transform var(--d-s) var(--e-std), box-shadow var(--d-s) var(--e-std); min-height: 158px;
display: flex; flex-direction: column; }
.book:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(43,33,24,.14); }
.book .b-author { font-size: var(--t-00); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.book .b-title { font-family: var(--serif); font-size: 1.24rem; font-weight: var(--fw-text); margin: 4px 0 1px; }
.book .b-year { font-size: .74rem; color: var(--ink-2); font-style: italic; }
.book .lvl { display: inline-block; font-size: var(--t-00); letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px;
border-radius: 10px; border: 1px solid var(--line); color: var(--ink-2); }
.book .lvl.l1 { border-color: var(--good); color: var(--good); }
.book .ribbon { position: absolute; top: -4px; right: 14px; width: 14px; height: 34px; background: var(--verm);
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.hearth { display: flex; gap: 16px; align-items: flex-start; }
.hearth .stove { font-size: 2.1rem; filter: drop-shadow(0 0 12px rgba(255,150,50,.45)); }
@media all {
body.motion-full .hearth .stove.lit { animation: glowpulse 3.2s ease-in-out infinite; }
@keyframes glowpulse { 0%,100%{filter:drop-shadow(0 0 10px rgba(255,150,50,.35))} 50%{filter:drop-shadow(0 0 18px rgba(255,150,50,.6))} }
}
.cold-note { color: var(--cold); }
.warmbar { display: block; height: 4px; border-radius: 2px; background: var(--hm0); overflow: hidden; position: relative; }
.warmbar > i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--v, 0));
background: linear-gradient(90deg, #d8674b, #e6a23c); border-radius: 2px; }
.warmbar.cold > i { background: linear-gradient(90deg, var(--cold), #9db2c8); }
.frost { position: relative; border-color: var(--cold) !important;
background: linear-gradient(140deg, rgba(160,195,225,.14), rgba(160,195,225,.03) 55%), var(--card) !important; }
.frost::after { content: '❄'; position: absolute; top: 6px; right: 10px; color: var(--cold); font-size: .85rem; }
.melt { animation: melt calc(900ms * var(--motion)) var(--e-std) forwards; }
@keyframes melt { from { filter: saturate(.5) brightness(1.06); } to { filter: none; } }
[hidden] { display: none !important; }
.seal { border-radius: 50%; background: radial-gradient(circle at 35% 32%, #c4544a, var(--wax) 68%);
box-shadow: inset 0 2px 5px rgba(255,255,255,.28), inset 0 -3px 6px rgba(0,0,0,.38), 0 3px 8px rgba(0,0,0,.3);
display: flex; align-items: center; justify-content: center; color: #f0d9c0; font-family: var(--serif); font-weight: var(--fw-text); }
.seals { display: flex; flex-wrap: wrap; gap: 10px; }
.ach { width: 54px; height: 54px; font-size: 1.15rem; opacity: .28; filter: grayscale(.8); cursor: default; }
.ach.got { opacity: 1; filter: none; }
.ach .ic { width: 1.35em; height: 1.35em; }
.ic { width: 1.08em; height: 1.08em; display: inline-block; vertical-align: -.18em; flex: none; }
.mark-t { font-style: normal; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.tile { background: var(--paper-hi); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.tile .v { font-size: 1.45rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.tile .l { font-size: .72rem; color: var(--ink-2); margin-top: 1px; }
.chartbox svg { display: block; width: 100%; height: auto; }
.issues { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 12px; }
.issue { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
cursor: pointer; position: relative; transition: transform var(--d-s) var(--e-std), border-color var(--d-s) var(--e-std); }
.issue:hover { border-color: var(--verm); transform: translateY(-2px); }
.issue .no { font-size: var(--t-00); letter-spacing: .16em; color: var(--ink-3); }
.issue .ti { font-family: var(--serif); font-size: 1.12rem; margin: 3px 0 1px; }
.issue .en { font-size: .78rem; color: var(--ink-2); font-style: italic; }
.issue .meta { font-size: .74rem; color: var(--ink-3); margin-top: 8px; }
.continue-card .sc-title { font-family: var(--serif); font-size: 1.5rem; margin: 4px 0 2px; }
.continue-card .sc-sub { font-style: italic; color: var(--ink-2); font-family: var(--serif); margin-bottom: 10px; }
#read-wrap { max-width: 34em; margin: 0 auto; display: flex; flex-direction: column; }
#read-wrap.first-read #gift-plate { order: 3; }
#read-wrap.first-read #prep-slot  { order: 4; }
#read-wrap.first-read #scene-end-slot { order: 5; }
#read-wrap.first-read #guide-slot { order: 2; }
.scene-head { text-align: center; margin: 18px 0 30px; }
.scene-head .vy { letter-spacing: .3em; font-size: .7rem; color: var(--ink-2); }
.scene-head h2 { font-size: 2rem; margin: 10px 0 2px; }
.scene-head .sub { font-family: var(--serif); font-style: italic; color: var(--ink-2); }
.scene-head .orn { color: var(--verm); font-size: 1.2rem; margin-top: 12px; }
#text { font-family: var(--serif); font-size: var(--fs, 1.28rem); line-height: 1.68; text-wrap: pretty; }
#text p { margin: 0 0 1.1em; text-align: left; text-wrap: pretty; content-visibility: auto; contain-intrinsic-size: auto 120px; }
#text p.dropcap::first-letter { color: var(--book-ink, var(--verm)); font-weight: 700; float: left; font-size: 3.1em;
line-height: .84; padding: .04em .12em 0 0; }
.sent { border-radius: 3px; cursor: pointer; transition: background var(--d-m) var(--e-std), opacity var(--d-m) var(--e-std); }
#estate { display: none; }
body.at-desk #estate {
display: grid; grid-template-columns: repeat(auto-fit, minmax(max(240px, 40%), 1fr));
gap: 10px 34px; max-width: var(--desk-w, 1180px); margin: 46px auto 30px;
padding: 24px 20px 8px; border-top: 1px solid var(--rule);
}
#estate .est-rooms { grid-column: 1 / -1; }
#estate nav { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
#estate .est-h { flex: 1 0 100%; margin: 0 0 4px; font-family: var(--bill);
font-size: var(--t-00); letter-spacing: .16em; text-transform: uppercase; color: var(--steel); }
#estate a { font-size: .84rem; color: var(--steel); text-decoration: none;
border-bottom: 1px solid transparent; }
#estate a:hover { color: var(--carbon); border-bottom-color: var(--signal); }
#estate .est-about { grid-column: 1 / -1; margin: 0 0 6px; max-width: 70ch;
font-size: .84rem; line-height: 1.6; color: var(--steel); }
.desk-about { max-width: 36em; margin: 14px auto 0; text-align: center;
font-family: var(--serif); font-size: 1rem; line-height: 1.6; color: inherit; }
.desk-about a { color: inherit; }
.vh { position: absolute !important; width: 1px !important; height: 1px !important;
padding: 0 !important; margin: -1px !important; overflow: hidden !important;
clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
white-space: nowrap !important; border: 0 !important; }
.rev-empty { max-width: 34em; margin: 10px auto 0; text-align: center;
font-size: .93rem; color: var(--steel); line-height: 1.6; }
.words-keep { border: 1px solid var(--rule); border-left: 3px solid var(--signal);
background: var(--galley); padding: 13px 16px; margin: 14px 0 4px; border-radius: 3px; }
.words-keep p { margin: 0 0 9px; font-size: .92rem; color: var(--carbon); }
.words-keep .wk-row { margin: 0; display: flex; align-items: center; gap: 14px; }
.words-keep .lnk { background: none; border: none; padding: 0; cursor: pointer;
color: var(--steel); font-size: .86rem; text-decoration: underline; }
.sent.playing { background: color-mix(in srgb, var(--book-ink, var(--ink)) 9%, transparent); }
body.immersion .w { background: transparent !important; box-shadow: none !important; cursor: default; }
.w { cursor: pointer; padding: 0 .5px; margin: 0 -.5px; }
body.hint-none .w { background-image: none !important; }
.w.bloom { animation: bloom calc(420ms * var(--motion)) var(--e-snap); }
@keyframes bloom { 0%{transform:scale(1)} 30%{transform:scale(1.14); color:var(--verm)} 100%{transform:scale(1)} }
.w.kglow { animation: kglow calc(620ms * var(--motion)) var(--e-std); }
@keyframes kglow { 0%{background-color:rgba(var(--gold),.5); border-radius:3px} 100%{background-color:rgba(var(--gold),0)} }
.tr-para { display: block; font-family: var(--sans); font-size: .78rem; line-height: 1.45;
color: var(--ink-3p); margin: 1px 0 9px; padding-left: 10px; border-left: 2px solid var(--line); }
.tr-reveal { display: block; font-family: var(--sans); font-size: .84rem; line-height: 1.5; color: var(--ink-2);
background: var(--card); border-left: 2px solid var(--verm); border-radius: 0 8px 8px 0;
padding: 8px 12px; margin: 6px 0 10px; }
.tr-reveal .tr-tools { margin-top: 5px; display: flex; gap: 10px; }
.tr-reveal .tr-tools button { border: none; background: none; color: var(--verm); cursor: pointer; font-size: .78rem; padding: 0; }
.divider { text-align: center; color: var(--verm); margin: 30px 0; font-size: 1.1rem; }
#readbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
background: color-mix(in srgb, var(--paper) 96%, transparent); border-top: 1px solid var(--line); }
#readbar .inner { max-width: 900px; margin: 0 auto; padding: 8px 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rb-extra { display: contents; }
.rb-more { display: none; }
@media (max-width: 560px) {
#readbar .inner { flex-wrap: wrap; gap: 6px; padding: 6px 10px; }
#readbar .inner > .icon-btn { flex: 0 0 auto; }
.rb-more { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
.rb-extra { display: none; position: absolute; bottom: 100%; right: 8px;
background: var(--paper); border: 1px solid var(--line); border-bottom: none;
border-radius: 0; padding: 8px 10px; gap: 8px;
flex-wrap: wrap; justify-content: flex-end;
align-items: center; box-shadow: 0 -6px 18px rgba(0,0,0,.10); }
#readbar.rb-open .rb-extra { display: flex; }
#readbar .left-note { display: none; }
#readbar.rb-open .rb-extra #rate { width: 92px; }
#readbar .rb-extra .rb-rate-lab { color: var(--carbon); }
}
.rb-rate { position: relative; display: inline-block; margin: 0; cursor: pointer; }
.rb-rate-lab { position: absolute; top: 2px; left: 0; pointer-events: none; white-space: nowrap;
font-family: var(--bill); font-size: var(--t-00); font-weight: 600;
letter-spacing: .12em; text-transform: uppercase; line-height: 1; color: inherit; }
.rb-rate #rate { display: block; box-sizing: border-box; padding-top: 14px; }
#readbar .left-note { font-size: .76rem; color: var(--ink-2); margin-left: auto; font-variant-numeric: tabular-nums; }
#readbar .fill { position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--verm);
transform-origin: 0 50%; transform: scaleX(var(--v, 0)); transition: transform var(--d-l) var(--e-std); }
#rate { accent-color: var(--verm); width: 70px; }
.scene-end { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 22px 24px; margin-top: 30px; }
.quiz-q { margin: 14px 0; }
.quiz-q .qq { font-family: var(--serif); font-size: 1.05rem; margin-bottom: 8px; }
.quiz-opt { display: block; width: 100%; text-align: left; margin: 5px 0; padding: 9px 13px; border-radius: 9px;
border: 1px solid var(--line); background: var(--paper-hi); color: var(--ink); cursor: pointer; font-size: .92rem;
transition: border-color var(--d-s) var(--e-std); }
.quiz-opt:hover { border-color: var(--verm); }
.quiz-opt.right { border-color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--paper-hi)); }
.quiz-opt.wrong { border-color: var(--verm); opacity: .6; }
.seal-hold { position: relative; width: 84px; height: 84px; margin: 12px auto; cursor: pointer; user-select: none;
-webkit-user-select: none; touch-action: none; }
.seal-hold .seal-body { position: absolute; inset: 0; font-size: 1.6rem;
transition: transform var(--d-s) var(--e-std); }
.seal-hold.pressing .seal-body { transform: scale(.92) rotate(3deg); transition: transform 1100ms var(--e-std); }
.seal-hold .ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--verm);
opacity: 0; transform: scale(.8); }
.seal-hold.pressing .ring { opacity: .7; transform: scale(1); transition: all 1100ms linear; }
.seal-stamp { animation: sealstamp calc(900ms * var(--motion)) var(--e-std); }
@keyframes sealstamp {
0%   { transform: scale(1) rotate(0); }
20%  { transform: scale(.86) rotate(-4deg); }
32%  { transform: scale(1.22) rotate(14deg) scaleY(.88); }
55%  { transform: scale(.96) rotate(9deg); }
75%  { transform: scale(1.05) rotate(11deg); }
100% { transform: scale(1) rotate(10deg); }
}
.wax-particle { position: fixed; width: 7px; height: 7px; border-radius: 50%; background: var(--wax);
pointer-events: none; z-index: 300; }
.type-spill { position: fixed; z-index: 300; pointer-events: none; user-select: none;
font-family: var(--serif); font-weight: 600; color: var(--carbon); line-height: 1; }
.type-spill.ts-gold { color: var(--signal, #f6c445);
text-shadow: 0 0 7px color-mix(in srgb, var(--signal, #f6c445) 55%, transparent); }
#rev-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 34px 28px;
text-align: center; min-height: 300px; display: flex; flex-direction: column; justify-content: center; gap: 13px; margin-top: 14px; }
#rev-card .cloze { font-family: var(--serif); font-size: 1.22rem; line-height: 1.7; }
#rev-card .cloze .blank { color: var(--verm); font-weight: 600; letter-spacing: .05em; border-bottom: 2px solid var(--verm); padding: 0 4px; }
#rev-card .cloze mark, .ex-main mark, .ex-more mark { background: rgba(var(--gold), .38); color: inherit; border-radius: 3px; padding: 0 2px; }
.produce-gloss { font-size: 1.12rem; line-height: 1.4; }
.type-input { width: 100%; max-width: 320px; text-align: center; font-family: var(--serif); font-size: 1.5rem;
border: none; border-bottom: 2px solid var(--verm); background: transparent; color: var(--ink);
padding: 4px 8px; outline: none; letter-spacing: .03em; }
.reveal-word { font-family: var(--serif); font-size: 2rem; font-weight: 600; }
.reveal-word.ok { color: var(--good); }
.reveal-word.bad { color: var(--verm); }
.ink-redraw { animation: inkredraw calc(700ms * var(--motion)) var(--e-enter); }
@keyframes inkredraw { 0%{opacity:0; filter:blur(4px)} 100%{opacity:1; filter:blur(0)} }
.gold-bloom { animation: goldbloom calc(700ms * var(--motion)) var(--e-snap); }
@keyframes goldbloom { 0%{text-shadow:0 0 0 rgba(var(--gold),0)} 35%{text-shadow:0 0 22px rgba(var(--gold),.9)} 100%{text-shadow:0 0 0 rgba(var(--gold),0)} }
.conf-row { display: flex; gap: 8px; justify-content: center; }
.conf-row button { border: 1px solid var(--line); background: var(--paper-hi); color: var(--ink-2);
border-radius: 16px; padding: 5px 14px; font-size: .8rem; cursor: pointer; }
.conf-row button:hover { border-color: var(--verm); color: var(--ink); }
.ex-main { font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.55; color: var(--ink); margin: 4px 0; }
.more-ex { text-align: left; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; }
.ex-more { font-family: var(--serif); font-size: .98rem; line-height: 1.5; margin: 0 0 9px; cursor: pointer; padding-left: 12px; border-left: 2px solid var(--line); }
.ex-more:hover { border-left-color: var(--verm); }
.ex-more .ex-en { display: block; font-family: var(--sans); font-size: .78rem; color: var(--ink-2); margin-top: 2px; }
.rev-btns { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.rev-btns button { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 10px;
padding: 12px 22px; font-size: .95rem; cursor: pointer; }
.rev-btns .primary { background: var(--verm); border-color: var(--verm); color: #f6efe1; }
.rev-btns .b-again { border-color: var(--verm); color: var(--verm); }
.rev-btns .b-good { border-color: var(--good); color: var(--good); }
#rev-card .opt { font-family: var(--serif); font-size: 1.15rem; padding: 9px 16px; }
.tilesrow { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 12px 0 4px; min-height: 44px; }
.ltile { min-width: 38px; height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px;
background: var(--paper-hi); font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink);
cursor: pointer; transition: transform var(--d-xs) var(--e-std), border-color var(--d-s) var(--e-std); }
.ltile:hover { border-color: var(--verm); }
.ltile:disabled { opacity: .25; cursor: default; }
.built { font-family: var(--serif); font-size: 1.6rem; letter-spacing: .08em; min-height: 2.2rem;
border-bottom: 2px solid var(--line); display: inline-block; min-width: 180px; padding: 0 10px; }
.built.ok { color: var(--good); border-color: var(--good); }
.built.bad { color: var(--verm); border-color: var(--verm); }
.session-ring { width: 56px; height: 56px; }
.session-ring circle { fill: none; stroke-width: 5; }
.session-ring .track { stroke: var(--hm0); }
.session-ring .prog { stroke: var(--verm); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%;
transition: stroke-dashoffset var(--d-l) var(--e-std); }
.rootline { font-size: .8rem; color: var(--ink-2); margin-top: 8px; line-height: 1.5; }
.rootline .rt { color: var(--verm); font-weight: 600; }
.rootline .rw { cursor: pointer; border-bottom: 1px dotted var(--ink-3); }
.rootline .rw.knw { border-bottom-color: transparent; color: var(--ink); }
.mnem-box { width: 100%; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
border-radius: 8px; padding: 7px 10px; font-family: inherit; font-size: .85rem; resize: vertical; min-height: 40px; }
.filters { display: flex; gap: 6px; margin: 14px 0; flex-wrap: wrap; align-items: center; }
.filters input { margin-left: auto; border: 1px solid var(--line); background: var(--card); color: var(--ink);
border-radius: 8px; padding: 5px 10px; }
#wordlist { list-style: none; padding: 0; margin: 0; }
#wordlist li { display: flex; align-items: baseline; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
#wordlist .wf { font-family: var(--serif); font-size: 1.1rem; min-width: 130px; cursor: pointer; }
#wordlist .wf:hover { color: var(--verm); }
#wordlist .wg { color: var(--ink-2); font-size: .88rem; flex: 1; }
#wordlist .cnt { color: var(--ink-3); font-size: .74rem; white-space: nowrap; }
.glist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .glist { grid-template-columns: 1fr; } }
.glesson-card { border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; background: var(--card); cursor: pointer;
transition: border-color var(--d-s) var(--e-std); }
.glesson-card:hover { border-color: var(--verm); }
.glesson-card .gru { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }
.glesson-card .gen2 { font-size: .78rem; color: var(--ink-2); font-style: italic; }
#lesson-body { font-size: .96rem; line-height: 1.65; max-width: 640px; }
#lesson-body p { margin: 0 0 .9em; }
.gex { border-left: 2px solid var(--verm); background: var(--card); border-radius: 0 10px 10px 0;
padding: 10px 14px; margin: 12px 0; }
.gex .gru-s { font-family: var(--serif); font-size: 1.05rem; line-height: 1.55; }
.gex .gru-s mark { background: rgba(var(--gold), .35); color: inherit; border-radius: 3px; padding: 0 2px; }
.gex .gnote { font-size: .78rem; color: var(--verm); margin-top: 4px; }
.gchip { display: inline-block; border: 1px solid var(--line); border-radius: 12px; padding: 2px 10px;
font-size: .74rem; color: var(--verm); cursor: pointer; margin-top: 6px; }
.gchip:hover { border-color: var(--verm); }
.tl { border-left: 2px solid var(--line); margin-left: 8px; padding-left: 22px; }
.tl .tl-day { position: relative; margin-bottom: 20px; }
.tl .tl-day::before { content: ''; position: absolute; left: -28px; top: 4px; width: 10px; height: 10px;
border-radius: 50%; background: var(--verm); }
.tl .tl-date { font-size: var(--type-meta); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.tl .tl-ev { font-size: .92rem; margin: 3px 0; }
.dissolve .w.wasnew { animation: dissolve calc(600ms * var(--motion)) var(--e-std) both; }
@keyframes dissolve { 0%{background:var(--new-tint); filter:blur(0)} 60%{filter:blur(1px)} 100%{background:transparent; filter:blur(0)} }
.overlay { position: fixed; inset: 0; z-index: 290; background: rgba(20,14,8,.5); display: none;
align-items: center; justify-content: center; padding: 20px; }
.overlay.show { display: flex; }
.overlay .panel { background: var(--paper-hi); border: 1px solid var(--line); border-radius: 16px;
max-width: 500px; width: 100%; padding: 26px 28px; box-shadow: var(--shadow); max-height: 88vh; overflow-y: auto; }
.overlay .panel h3 { margin-top: 0; }
.toast { position: fixed; bottom: 76px; right: 18px; z-index: 250; background: var(--card); color: var(--ink);
border: 1px solid var(--line); border-left: 3px solid var(--verm); border-radius: 10px; padding: 12px 16px;
box-shadow: var(--shadow); max-width: 300px; cursor: pointer; font-size: .88rem;
transform: translateY(16px); opacity: 0; pointer-events: none;
transition: transform var(--d-m) var(--e-enter), opacity var(--d-m) var(--e-enter); }
.toast.show { transform: none; opacity: 1; pointer-events: auto; }
.toast .tt { font-weight: 600; color: var(--verm); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
#tip { position: absolute; z-index: 90; pointer-events: none; background: var(--ink); color: var(--paper);
padding: 7px 12px; border-radius: 8px; font-size: .88rem; max-width: 320px; line-height: 1.45;
opacity: 0; transform: translateY(4px); transition: opacity var(--d-s) var(--e-enter), transform var(--d-s) var(--e-enter); font-family: var(--sans); }
#tip.show { opacity: 1; transform: translateY(0); }
#tip .tw { font-weight: 700; }
#pop { position: absolute; z-index: 100; width: 340px; max-width: calc(100vw - 24px); background: var(--paper-hi);
border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 15px 17px;
display: none; font-family: var(--sans);
border-top: 3px solid var(--book-ink, var(--carbon)); }
#pop.show { display: block; animation: popin calc(220ms * var(--motion)) var(--e-enter); }
@keyframes popin { from { opacity: 0; transform: translateY(6px) scale(.98); } }
#pop.docked { position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto;
width: auto; max-width: none; border-radius: 0;
box-shadow: 0 -12px 44px rgba(0,0,0,.20), var(--shadow);
max-height: 62vh; overflow-y: auto; }
#pop.docked.show { animation: popdock calc(240ms * var(--motion)) var(--e-enter); }
@keyframes popdock { from { opacity: 0; transform: translateY(14px); } }
#pop .pw { font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
color: var(--book-ink, var(--carbon)); }
#pop .plemma { font-size: .84rem; color: var(--ink-3); margin: 3px 0 0; }
#pop .pg { font-size: 1rem; line-height: 1.45; margin-top: 3px; }
#pop .pstage { font-size: .76rem; color: var(--ink-3); margin: 4px 0 8px; }
#pop .pline { display: flex; align-items: flex-start; gap: 9px; margin-top: 11px;
padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--serif);
font-size: .93rem; line-height: 1.5; color: var(--ink-2); }
#pop .pline-en { flex: 1; }
#pop .pw .icon-btn, #pop .pline-say { flex: none; border: none; background: none;
box-shadow: none; padding: 2px 4px; font-size: .82rem; color: var(--ink-2);
vertical-align: .18em; }
#pop .pw .icon-btn:hover, #pop .pline-say:hover { color: var(--carbon); box-shadow: none; }
#pop .pw .icon-btn:active, #pop .pline-say:active { box-shadow: none; }
#pop .prow { margin-top: 12px; align-items: center; }
#pop .p-more { margin-left: auto; border: none !important; background: none !important;
box-shadow: none !important; color: var(--steel) !important;
padding: 4px 0 !important; font-size: var(--t-00); }
#pop .p-more:hover { box-shadow: none !important; }
@media (hover: hover) { #pop .p-more:hover { color: var(--signal-ink) !important; } }
#pop .p-more:active { transform: none !important; box-shadow: none !important; }
#pop #p-drawer:not(:empty) { border-top: 1px solid var(--line); margin-top: 11px; padding-top: 9px; }
#pop .pchips { margin-top: 6px; }
.w.w-open { background: rgba(var(--gold), .28); border-radius: 3px;
box-shadow: 0 1px 0 var(--book-ink, var(--signal)); }
#pop .row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
#pop .row button, #pop .row a { border: 1px solid var(--line); background: var(--paper); color: var(--ink);
border-radius: 8px; padding: 5px 10px; font-size: .8rem; cursor: pointer; text-decoration: none; }
#pop .row button:hover { border-color: var(--verm); }
#pop .row button.on1 { background: rgba(var(--gold), .3); border-color: rgba(var(--gold), .8); }
#pop .row button.on2 { background: var(--verm); border-color: var(--verm); color: #f6efe1; }
#pop .forms { font-size: .78rem; color: var(--ink-3); margin-top: 8px; line-height: 1.6; }
#pop .forms b { color: var(--ink-2); font-weight: 600; }
#pop .close { position: absolute; top: 8px; right: 10px; border: none; background: none; color: var(--ink-3);
font-size: 1.05rem; cursor: pointer; }
#pop .kbd-hint { font-size: var(--t-00); color: var(--ink-3); margin-top: 9px; }
@media (hover: none) and (pointer: coarse) { #pop .kbd-hint { display: none; } }
#pop .sec { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; max-height: 170px; overflow-y: auto; font-size: .85rem; }
#pop .sec .pos { font-style: italic; color: var(--ink-2); }
#pop .sec ol { margin: 2px 0 6px; padding-left: 18px; }
kbd { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; font-size: .85em; font-family: var(--sans); }
.snowflake { position: fixed; top: -4vh; z-index: 300; pointer-events: none; color: #dfe8f2;
text-shadow: 0 0 4px rgba(255,255,255,.35); animation: fall linear forwards; }
[data-theme="paper"] .snowflake, [data-theme="sepia"] .snowflake { color: #9db2c8; text-shadow: none; }
@keyframes fall { to { transform: translateY(110vh) rotate(200deg); } }
body.motion-low .snowflake { animation-duration: 1ms !important; opacity: .0 !important; }
.set-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.set-row:last-child { border-bottom: none; }
.set-row .lab { flex: 1; }
.set-row select, .set-row input[type=text] { border: 1px solid var(--line); background: var(--card); color: var(--ink);
border-radius: 8px; padding: 5px 9px; font-family: inherit; }
#ov-colophon .panel { text-align: center; max-width: 430px; }
#ov-colophon .kon { font-family: var(--serif); font-size: 2.6rem; letter-spacing: .3em; margin: 6px 0; }
.greeting { font-family: var(--serif); font-size: 1.05rem; color: var(--ink-2); text-align: center; margin: -6px 0 22px; font-style: italic; }
@media (max-width: 640px) {
.masthead h1, .masthead .as-h1 { font-size: clamp(34px, 11vw, 52px); }
#text { font-size: var(--fs, 1.28rem); }
#v-read.view { padding-bottom: calc(7.5rem + var(--s7)); }
}
:root {
--g-green: var(--accent); --g-blue: var(--accent); --g-purple: var(--accent);
--g-green-d: var(--accent-deep);
--g-gold: var(--signal); --g-ring: var(--rule);
}
.g-particle { position:fixed; width:9px; height:9px; border-radius:50%; z-index:320;
pointer-events:none; will-change:transform,opacity; }
@keyframes noflash { 0%{transform:translateX(0)} 22%{transform:translateX(-7px)} 44%{transform:translateX(6px)} 66%{transform:translateX(-3px)} 100%{transform:translateX(0)} }
.rev-btns .primary, .btn.primary { will-change:transform; }
.streak-chip .fl { transform-origin:50% 90%; }
.streak-chip.big .fl { font-size:1.15rem; }
.sum-stat { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.sum-stat:last-child { border-bottom:none; }
.sum-stat .s-ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; font-size:1rem; }
.sum-stat .s-v { margin-left:auto; font-family:var(--sans); font-weight:var(--fw-strong); font-variant-numeric:tabular-nums; }
.path { position: relative; padding: 12px 0 40px; max-width: 42rem; margin: 0 auto; }
.path::before { display: none; }
.path-sect { display: block; margin: 2.4rem 0 .4rem; padding-bottom: .55rem;
border-bottom: 1px solid var(--carbon); max-width: none; }
.path-sect .s-name { font-family: var(--serif); font-size: 1.45rem; font-weight: var(--fw-text); line-height: 1.15; }
.path-sect .s-meta { font-family: var(--bill); font-size: .7rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--steel); margin-top: 5px; }
.path-row { display: block; margin: 0; }
.path-row.has-current { margin-top: 0; }
.node { position: relative; transform: none; }
.node-btn {
width: 100%; height: auto; min-height: 0; border-radius: 0; cursor: pointer;
display: grid; grid-template-columns: 3.4rem minmax(0, auto) 1fr auto;
align-items: baseline; gap: .35rem .75rem;
padding: .8rem 0; margin: 0;
border: none; border-bottom: 1px solid var(--rule);
background: transparent; box-shadow: none; color: var(--carbon);
text-align: left; font-size: inherit;
}
.node-btn:hover { background: transparent; box-shadow: none; }
.node-btn:active { transform: none; box-shadow: none; }
.node-btn .n-no {
position: static; font-family: var(--mono); font-weight: 400; font-style: normal;
font-size: .78rem; letter-spacing: .03em; color: var(--steel);
}
.node-btn .n-title { font-family: var(--serif); font-size: 1.12rem; line-height: 1.3; }
.node-btn .n-lead { display: block; height: 0; border-bottom: 1px dotted var(--rule); align-self: center; min-width: 1.25rem; }
.node-btn .n-state {
font-family: var(--bill); font-size: var(--t-00); letter-spacing: .16em;
text-transform: uppercase; color: var(--steel); white-space: nowrap;
}
.node.current .node-btn { width: 100%; height: auto; font-size: inherit;
border-color: transparent; border-bottom: 1px solid var(--carbon); background: transparent; color: var(--carbon); }
.node.current .n-title { font-size: 1.45rem; font-weight: 600; }
.node.current .n-no, .node.current .n-state { color: var(--carbon); }
.node.current .n-state { font-size: 1.15rem; letter-spacing: 0; text-transform: none; }
.node.done .node-btn { color: var(--steel); }
.node.done .n-title { font-style: italic; }
.node.locked .node-btn { color: var(--steel); box-shadow: none; }
.node .bubble, .node .halo, .node-mate, .node .ring-pulse, .node .n-label { display: none; }
.seal-hold.stamping .seal-body { animation: none !important; transition: none; }
.seal-hold.stamped .seal-body {
transform: rotate(11deg); animation: none !important;
box-shadow: inset 0 2px 5px rgba(255,255,255,.28), inset 0 -3px 6px rgba(0,0,0,.38),
inset 0 0 12px rgba(0,0,0,.22); }
.seal-hold .wax-rim { position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
opacity: 0; transform: scale(.55); filter: blur(1px);
background: radial-gradient(circle, var(--wax) 42%,
color-mix(in srgb, var(--wax) 30%, transparent) 68%, transparent 72%); }
.pop-bleed { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
opacity: 0; mix-blend-mode: multiply; }
[data-theme="dark"] .pop-bleed { mix-blend-mode: screen; }
.node-btn .tick { width: 34px; height: 34px; overflow: visible; pointer-events: none; }
.node-btn .tick path { stroke: currentColor; }
#text .dc { color: var(--book-ink, var(--verm)); }
#text p.dc-on .dc { float: left; font-weight: 700; font-size: 3.1em;
line-height: .84; padding: .04em .12em 0 0; transform-origin: 0 85%; }
#v-home .rule.rule-draw { border-top: none; height: 2px; }
#v-home .rule-draw .rule-line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.scene-epigraph {
display: flex; align-items: flex-start; gap: 14px;
background: var(--galley); border: 1px solid var(--rule);
border-left: 3px solid var(--book-ink, var(--signal));
padding: 12px 16px; margin: 14px 0 22px; border-radius: 4px; box-shadow: var(--lift-sm);
transition: opacity 280ms ease, transform 280ms ease; cursor: pointer;
}
.scene-epigraph.fading { opacity: 0; transform: translateY(-8px); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) .scene-epigraph {
animation: epigin calc(560ms * var(--motion, 1)) var(--e-std) both;
animation-delay: calc(300ms * var(--motion, 1));
}
}
@keyframes epigin { from { opacity: 0; transform: translateY(9px); } }
.scene-epigraph .ep-fleuron { font-size: 1.25rem; color: var(--signal-ink); line-height: 1; flex: none; margin-top: 2px; }
.scene-epigraph .ep-fig { flex: none; width: 58px; height: 58px; align-self: center;
cursor: pointer; filter: drop-shadow(0 3px 6px rgba(20,30,42,.16)); }
.scene-epigraph .ep-fig svg { display: block; overflow: visible; }
@media (max-width: 560px) { .scene-epigraph .ep-fig { width: 48px; height: 48px; } }
.scene-epigraph .ep-body { flex: 1; }
.scene-epigraph .ep-text { font-family: var(--serif); font-style: italic; font-size: .96rem; line-height: 1.5; color: var(--carbon); margin: 0 0 4px; }
.scene-epigraph .ep-meta { font-family: var(--bill); font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--steel); }
.scene-epigraph .ep-btn {
flex: none; align-self: center; cursor: pointer;
min-height: var(--control-h-tool); padding: 0 var(--s3);
font: var(--fw-strong) var(--type-meta)/1.25 var(--sans);
background: var(--galley); color: var(--carbon);
border: 1px solid color-mix(in srgb, var(--carbon) 55%, var(--rule));
border-radius: var(--r-control); box-shadow: var(--sh-press-quiet);
}
.scene-epigraph .ep-btn:hover { border-color: var(--carbon); }
.scene-epigraph .ep-btn:active { transform: translateY(1px); box-shadow: none; }
.first-read-banner {
background: var(--galley); border: 2px solid var(--signal); padding: 11px 16px;
margin: 10px 0 14px; text-align: center; border-radius: 4px; box-shadow: var(--lift);
animation: viewin 400ms var(--e-enter) both;
}
.first-read-banner h2 { font-size: 1.06rem; margin: 0 0 3px; }
.first-read-banner p  { font-size: .82rem; }
@media (max-width: 560px), (max-height: 800px) {
.first-read-banner { padding: 9px 12px; margin: 8px 0 12px; }
.first-read-banner h2 { font-size: .98rem; }
.first-read-banner p  { font-size: .78rem; }
.scene-head { margin: 10px 0 14px; }
.scene-head h2 { font-size: 1.5rem; margin: 6px 0 2px; }
#read-wrap.first-read .scene-head .sub { display: none; }
#read-wrap.first-read .scene-head .margin-note { display: none; }
}
.first-read-banner h2 { font-family: var(--serif); font-size: 1.35rem; font-weight: var(--fw-text); color: var(--carbon); margin: 0 0 8px; line-height: 1.3; }
.first-read-banner p { font-family: var(--sans); font-size: .9rem; color: var(--steel); margin: 0; }
.first-read-banner .fr-meter { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 13px; }
.first-read-banner .fr-meter i { width: 11px; height: 11px; border-radius: 50%; flex: none;
border: 1.5px solid var(--signal-ink); background: transparent;
transition: background .4s var(--e-std), transform .4s var(--e-std); }
.first-read-banner .fr-meter i.lit { background: var(--signal-ink); transform: scale(1.18); }
.cer-stamped { font-size: 2.2rem; color: var(--signal-ink); text-align: center; margin: 4px 0 8px;
animation: stamp-land calc(500ms * var(--motion)) var(--e-enter); }
@keyframes stamp-land { 0% { opacity: 0; transform: scale(2.2) rotate(-8deg); } 60% { transform: scale(.94); } 100% { opacity: 1; transform: scale(1); } }
.w.first-word-pulse {
position: relative; font-weight: 600; color: var(--signal-ink) !important;
text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 4px;
}
body.motion-full .w.first-word-pulse {
animation: firstpulse 1800ms ease-in-out infinite alternate;
}
@keyframes firstpulse {
0% { text-shadow: 0 0 0 transparent; }
100% { text-shadow: 0 0 10px color-mix(in srgb, var(--signal) 70%, transparent); }
}
.w.primed {
text-decoration: underline; text-decoration-color: var(--signal);
text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.guide { display:flex; align-items:flex-end; gap:14px; margin:0 0 26px; cursor:pointer;
animation:guidein 620ms var(--e-enter) both; }
@keyframes guidein { from{opacity:0; transform:translateY(16px)} }
.guide .g-bubble { position:relative; flex:1; background:var(--paper-0); border:1.5px solid var(--line-2);
border-radius:14px; padding:14px 18px; font-family:var(--serif); font-size:1.04rem; line-height:1.5;
color:var(--ink-1); box-shadow:0 2px 0 rgba(20,30,42,.05); min-height:56px; }
.guide .g-bubble::before { content:''; position:absolute; left:-10px; bottom:16px;
border:10px solid transparent; border-right-color:var(--line-2); }
.guide .g-bubble::after { content:''; position:absolute; left:-8px; bottom:16px;
border:10px solid transparent; border-right-color:var(--paper-0); }
.caret { display:inline-block; width:2px; height:1em; background:var(--accent); vertical-align:-2px;
margin-left:2px; animation:caret 900ms steps(2) infinite; }
@keyframes caret { 0%,100%{opacity:1} 50%{opacity:0} }
#pop .pop-say { position:static; margin:8px 0 0;
padding:0; border:0; border-radius:0; background:none; box-shadow:none;
color:var(--steel); font-family:var(--serif); font-style:italic; font-size:.8rem; line-height:1.4;
opacity:0; pointer-events:none;
transition:opacity var(--d-m) var(--e-std), transform var(--d-m) var(--e-std); transform:translateY(4px); }
#pop .pop-say:not(.show) { display:none; }
#pop .pop-say.show { opacity:1; transform:translateY(0); }
#pop .row button.on2:hover { background:var(--carbon); border-color:var(--carbon); color:var(--galley); }
#pop .row button.on1:hover { background:var(--case); border-color:var(--edge); }
.klyaksa { width:74px; height:74px; cursor:pointer; user-select:none; -webkit-user-select:none;
filter:drop-shadow(0 4px 8px rgba(20,30,42,.22)); }
.klyaksa svg { display:block; overflow:visible; }
.k-say { position:absolute; left:50%; bottom:100%; transform:translate(-50%,-6px); white-space:nowrap;
background:var(--ink-1); color:var(--paper-0); font-family:var(--serif); font-style:italic;
font-size:.78rem; padding:5px 11px; border-radius:10px; opacity:0; pointer-events:none;
transition:opacity var(--d-m) var(--e-std), transform var(--d-m) var(--e-std); }
.k-say.show { opacity:1; transform:translate(-50%,-11px); }
#v-review .k-say { bottom:auto; left:auto; top:50%; right:calc(100% + 8px);
transform:translate(6px,-50%); z-index:6; }
#v-review .k-say.show { transform:translate(0,-50%); }
.node.reward .node-btn { --nc:var(--rule); }
.nav-tabs button { position:relative; }
.nav-tabs button::after { content:''; position:absolute; left:9px; right:9px; bottom:2px; height:2px;
background:var(--accent); border-radius:2px; transform:scaleX(0); transform-origin:50% 50%;
transition:transform var(--d-m) var(--e-enter); }
.nav-tabs button.active::after { transform:scaleX(1); }
.card { transition:transform var(--d-m) var(--e-std), box-shadow var(--d-m) var(--e-std); }
.issue, .book, .glesson-card, .find-card { will-change:transform; }
.issue:active, .book:active, .glesson-card:active { transform:scale(.985); }
.book { transform-origin:0 50%; }
.book:hover { transform:translateY(-3px) rotate(-.5deg); }
.book .b-title { transition:color var(--d-s) var(--e-std); }
.book:hover .b-title { color:var(--accent); }
.icon-btn { transition:border-color var(--d-s) var(--e-std), background var(--d-s) var(--e-std),
transform var(--d-xs) var(--e-snap); }
.icon-btn:active { transform:rotate(-6deg) scale(.94); }
#btn-settings:hover { transform:rotate(35deg); }
.theme-dots button { transition:transform var(--d-s) var(--e-snap), border-color var(--d-s) var(--e-std),
box-shadow var(--d-s) var(--e-std); }
.theme-dots button:hover { transform:scale(1.22); }
.theme-dots button.on { transform:scale(1.1); }
.streak-chip { transition:border-color var(--d-m) var(--e-std); }
.streak-chip:hover { border-color:var(--line-2); }
.quiz-opt { transition:border-color var(--d-s) var(--e-std), background var(--d-m) var(--e-std),
transform var(--d-xs) var(--e-std); position:relative; overflow:hidden; }
.quiz-opt:active { transform:scale(.99); }
.quiz-opt.right::before { content:''; position:absolute; inset:0; background:var(--ok); opacity:.16;
transform-origin:0 50%; animation:sweep 500ms var(--e-enter); }
@keyframes sweep { from{transform:scaleX(0)} to{transform:scaleX(1)} }
.type-input { transition:border-color var(--d-s) var(--e-std), transform var(--d-xs) var(--e-std); }
.type-input:focus { border-color:var(--accent); }
.type-input.good { border-color:var(--ok); }
.type-input.bad { border-color:var(--err); animation:noflash 500ms var(--e-std); }
.ltile { animation:tilein 300ms var(--e-enter) both; }
.tilesrow .ltile:nth-child(1){animation-delay:0ms}.tilesrow .ltile:nth-child(2){animation-delay:25ms}
.tilesrow .ltile:nth-child(3){animation-delay:50ms}.tilesrow .ltile:nth-child(4){animation-delay:75ms}
.tilesrow .ltile:nth-child(5){animation-delay:100ms}.tilesrow .ltile:nth-child(6){animation-delay:125ms}
.tilesrow .ltile:nth-child(7){animation-delay:150ms}.tilesrow .ltile:nth-child(8){animation-delay:175ms}
.tilesrow .ltile:nth-child(9){animation-delay:200ms}.tilesrow .ltile:nth-child(n+10){animation-delay:225ms}
@keyframes tilein { from{opacity:0; transform:translateY(8px) scale(.85)} }
.ltile:active { transform:translateY(2px) scale(.94); }
.sent { position:relative; }
.sent.done { }
.read-on { font-family:var(--sans); font-size:var(--t-0); letter-spacing:.06em;
border:1px solid var(--minium); background:var(--gesso); color:var(--minium-t);
padding:5px 13px; cursor:pointer; white-space:nowrap;
clip-path:polygon(0 4px,4px 0,calc(100% - 4px) 0,100% 4px,100% 100%,0 100%);
box-shadow:0 3px 0 var(--foot); }
.read-on:active { transform:translateY(3px); box-shadow:0 0 0 var(--foot); }
#pop .row button { animation:rowin 260ms var(--e-enter) both; }
#pop .row:nth-of-type(1) button:nth-child(1){animation-delay:20ms}
#pop .row:nth-of-type(1) button:nth-child(2){animation-delay:45ms}
#pop .row:nth-of-type(1) button:nth-child(3){animation-delay:70ms}
#pop .row:nth-of-type(1) button:nth-child(4){animation-delay:95ms}
@keyframes rowin { from{opacity:0; transform:translateY(5px)} }
.toast.show { animation:toastin 420ms var(--e-snap); }
@keyframes toastin { 0%{transform:translateY(20px) scale(.94)} 60%{transform:translateY(-3px) scale(1.02)} 100%{transform:none} }
.meter > i.retr { position:relative; overflow:hidden; }
.meter.grew > i.retr::after { content:''; position:absolute; inset:0;
background:linear-gradient(100deg, transparent 25%, rgba(255,255,255,.7) 50%, transparent 75%);
transform:translateX(-100%); animation:metershine 800ms var(--e-std); }
@keyframes metershine { 0%{opacity:1; transform:translateX(-100%)} 100%{opacity:0; transform:translateX(180%)} }
.seal-hold { transition:transform var(--d-m) var(--e-std); }
.seal-hold:hover { transform:scale(1.04); }
@media all {
body.motion-full .seal-hold:not(.pressing) .seal-body { animation:sealbreath 3.4s ease-in-out infinite; }
@keyframes sealbreath { 0%,100%{transform:scale(1)} 50%{transform:scale(1.035)} }
}
.view.show > * { animation:viewin calc(180ms * var(--motion)) var(--e-enter) both; }
.view.show > *:nth-child(1){animation-delay:0ms}.view.show > *:nth-child(2){animation-delay:calc(40ms * var(--motion))}
.view.show > *:nth-child(3){animation-delay:calc(80ms * var(--motion))}.view.show > *:nth-child(n+4){animation-delay:calc(110ms * var(--motion))}
@keyframes viewin { from{opacity:0; transform:translateY(7px)} }
body.motion-low .view.show > * { animation:none; }
#pop .close { transition:transform var(--d-s) var(--e-snap), color var(--d-s) var(--e-std); }
#pop .close:hover { transform:rotate(90deg); color:var(--accent); }
.book[data-a="chekhov"] { --spine: var(--g-green); }
.book[data-a="gogol"]   { --spine: var(--accent); }
.book[data-a="turgenev"]{ --spine: var(--g-blue); }
.book[data-a="dostoevsky"]{ --spine: var(--g-purple); }
.book { background:linear-gradient(90deg, var(--spine, var(--accent)) 0 6px, var(--card) 6px); }
.book .lvl.l1 { border-color:var(--g-green); color:var(--g-green); }
.tile .v.ticked { animation:ticksettle 420ms var(--e-std) both; }
@keyframes ticksettle { from{transform:scale(1.06)} to{transform:scale(1)} }
.wordmark { text-align: center; user-select: none; }
.wordmark .wm-l { font-family: var(--serif); letter-spacing: .34em; font-size: .92rem; color: var(--ink-1); text-transform: uppercase; }
.wordmark .wm-t { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--signal);
margin: 1px 0; letter-spacing: .04em; }
.wordmark.small { display: inline-flex; align-items: baseline; gap: .45em; }
.wordmark.small .wm-l { font-size: var(--t-00); letter-spacing: .22em; }
.wordmark.small .wm-t { font-size: .8rem; }
.room-line { font-size: var(--t-00); letter-spacing: .3em; color: var(--ink-3p); text-transform: uppercase; margin-top: 6px; }
#tip.show { animation: inkbloom calc(220ms * var(--motion)) var(--e-enter); }
#pop.show { animation: inkbloom calc(220ms * var(--motion)) var(--e-enter); }
#pop.show.quick { animation: none; }
@keyframes inkbloom { 0% { opacity: 0; clip-path: circle(6% at var(--bx, 50%) var(--by, 0%)); filter: blur(1.5px); }
100% { opacity: 1; clip-path: circle(140% at var(--bx, 50%) var(--by, 0%)); filter: blur(0); } }
.tr-reveal { animation: seep calc(300ms * var(--motion)) var(--e-enter); transform-origin: 0 0; }
@keyframes seep { 0% { opacity: 0; transform: scaleY(.6); filter: blur(2px); } 100% { opacity: 1; transform: scaleY(1); filter: blur(0); } }
.w.graduate { animation: graduate calc(900ms * var(--motion)) var(--e-std); }
@keyframes graduate {
0%   { background: rgba(var(--gold), .4); box-shadow: 0 2px 0 var(--accent); }
45%  { background: rgba(216,103,75,.35); box-shadow: 0 2px 0 rgba(216,103,75,.9); color: var(--accent); }
100% { background: transparent; box-shadow: none; }
}
.seal-stamp { animation: sealstamp calc(900ms * var(--motion)) var(--e-std); }
.deboss { box-shadow: inset 0 2px 5px rgba(255,255,255,.28), inset 0 -3px 6px rgba(0,0,0,.38), inset 0 0 12px rgba(0,0,0,.22); }
#close-ritual { position: fixed; inset: 0; z-index: 260; pointer-events: none; display: none; }
#close-ritual.show { display: block; }
#close-ritual .ribbon { position: absolute; top: -20%; left: 50%; width: 26px; height: 0;
background: linear-gradient(90deg, var(--accent-deep), var(--accent) 50%, var(--accent-deep));
transform: translateX(-50%); animation: ribbondrop calc(900ms * var(--motion)) var(--e-enter) forwards; }
#close-ritual .ribbon::after { content: ''; position: absolute; bottom: -12px; left: 0; border: 13px solid var(--accent);
border-bottom-color: transparent; }
@keyframes ribbondrop { to { height: 68%; } }
.ticket { border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--paper-0);
padding: 16px 18px; position: relative; overflow: hidden; font-family: var(--serif); }
.ticket::before { content: ''; position: absolute; inset: 4px; border: 1px solid var(--line); border-radius: 7px; pointer-events: none; }
.ticket .tk-head { text-align: center; letter-spacing: .3em; font-size: var(--t-00); color: var(--ink-2p); text-transform: uppercase; }
.ticket .tk-name { text-align: center; font-size: 1.3rem; font-weight: 600; margin: 8px 0 2px; }
.ticket .tk-sub { text-align: center; font-size: .74rem; color: var(--ink-2p); font-style: italic; }
.ticket .tk-seal { position: absolute; right: 12px; bottom: 10px; width: 38px; height: 38px; transform: rotate(9deg); font-size: .8rem; }
.exlibris { width: 92px; height: 92px; margin: 0 auto; border: 1.5px solid var(--ink-2p); border-radius: 6px;
display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--serif);
background: var(--paper-0); cursor: pointer; transition: border-color var(--d-s) var(--e-std), transform var(--d-s) var(--e-std); }
.exlibris:hover { border-color: var(--accent); transform: translateY(-2px); }
.exlibris.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }
.exlibris .xl-mono { font-size: 1.25rem; font-weight: 700; letter-spacing: .06em; }
.exlibris .xl-cap { font-size: var(--t-00); letter-spacing: .22em; color: var(--ink-3p); text-transform: uppercase; margin-top: 3px; }
.cer-title { font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; text-align: center;
color: var(--ink); margin: 2px 0 10px; text-transform: none; letter-spacing: 0;
background: none; padding: 0; }
.exlibris { min-height: 96px; height: auto; padding: 10px 6px; gap: 2px; }
.exlibris .xl-mono:empty { display: none; }
.coach { position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%); z-index: 265;
background: var(--ink-1); color: var(--paper-0); border-radius: 12px; padding: 10px 18px; font-size: .95rem;
font-family: var(--serif); font-style: italic; box-shadow: var(--shadow); pointer-events: none;
animation: coachin calc(700ms * var(--motion)) var(--e-enter); }
@keyframes coachin { 0% { opacity: 0; transform: translate(-50%, 10px); } 100% { opacity: 1; transform: translate(-50%, 0); } }
.found-object { max-width: 240px; margin: 18px auto; text-align: center; font-family: var(--serif);
padding: 14px; border: 1px dashed var(--line-2); border-radius: 8px; background: var(--paper-0);
transform: rotate(-1.4deg); animation: coachin calc(700ms * var(--motion)) var(--e-enter); }
.found-object .fo-what { font-size: 1.6rem; }
.found-object .fo-note { font-size: .78rem; color: var(--ink-2p); font-style: italic; margin-top: 6px; line-height: 1.5; }
.almanac { font-size: .76rem; color: var(--ink-2p); font-style: italic; font-family: var(--serif);
text-align: center; margin: 4px 0 0; }
.almanac .al-orn { color: var(--signal); font-style: normal; }
.manifesto { max-width: 560px; margin: 0 auto; font-family: var(--serif); line-height: 1.7; font-size: .98rem; }
.manifesto h3 { text-align: center; letter-spacing: .2em; }
.manifesto .rule-orn { text-align: center; color: var(--signal); margin: 14px 0; }
.gx-mate { position: relative; }
.friend-strip { display:flex; align-items:center; gap:13px; max-width:640px; margin:0 auto 18px;
animation:frIn 720ms cubic-bezier(.2,.9,.3,1) both; }
@keyframes frIn { from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none} }
.friend-strip .fr-who { width:52px; height:52px; flex:none; filter:drop-shadow(0 4px 9px rgba(20,30,42,.2)); }
.friend-strip .fr-who svg { display:block; overflow:visible; }
.friend-strip .fr-bubble { position:relative; flex:1; background:var(--paper-0); border:1px solid var(--line-2);
border-radius:15px 15px 15px 5px; padding:11px 15px; font-family:var(--serif); font-size:1rem;
line-height:1.5; color:var(--ink); box-shadow:0 3px 12px rgba(20,30,42,.06); }
.friend-strip .fr-bubble::before { content:''; position:absolute; left:-8px; bottom:12px;
border:6px solid transparent; border-right-color:var(--line-2); }
.friend-strip .fr-bubble::after { content:''; position:absolute; left:-6px; bottom:12px;
border:6px solid transparent; border-right-color:var(--paper-0); }
.aim-line { max-width:640px; margin:0 auto 16px; text-align:center; font-family:var(--serif);
font-style:italic; font-size:1.06rem; color:var(--ink-2); }
.aim-line b { font-style:normal; color:var(--ink); }
.aim-line .aim-edit { display:block; margin:4px auto 0; font-family:var(--sans); font-style:normal;
font-size:var(--t-00); letter-spacing:.09em; text-transform:uppercase; color:var(--faint);
background:none; border:none; cursor:pointer; }
.aim-line .aim-edit:hover { color:var(--accent); }
.ask-card { max-width:520px; margin:0 auto 18px; padding:18px 22px 14px; }
.ask-card .confess { font-family:var(--serif); font-style:italic; color:var(--ink-2); margin:0 0 10px; }
.ask-card .q { font-family:var(--serif); font-size:1.12rem; font-weight:600; margin:0 0 12px; }
.ask-card .opts { display:flex; flex-direction:column; gap:8px; }
.ask-card .opts button { text-align:left; justify-content:flex-start;
font-family:var(--serif); font-size:1rem; font-weight:500; }
.ask-card .opts input[type="text"] { font-family:var(--serif); }
.ask-card .later { margin-top:6px; }
#tour { position:fixed; inset:0; z-index:265; }
#tour[hidden] { display:none; }
#tour-mask { position:absolute; inset:0; background:rgba(12,18,26,.52);
backdrop-filter:blur(1.5px); animation:tmIn 380ms ease both; }
@keyframes tmIn { from{opacity:0} to{opacity:1} }
#tour-ring { position:absolute; border-radius:16px; box-shadow:0 0 0 4px var(--g-gold), 0 0 0 9999px rgba(12,18,26,.52);
transition:top .55s cubic-bezier(.3,1.2,.4,1), left .55s cubic-bezier(.3,1.2,.4,1),
width .55s cubic-bezier(.3,1.2,.4,1), height .55s cubic-bezier(.3,1.2,.4,1);
pointer-events:none; opacity:0; }
#tour-ring.on { opacity:1; }
body.motion-low #tour-ring { transition:none; }
#tour-panel { position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
width:min(560px, calc(100vw - 32px)); display:flex; align-items:flex-end; gap:13px; }
#tour-panel.at-top { bottom:auto; top:calc(26px + env(safe-area-inset-top, 0px)); }
#tour-panel .t-who { width:60px; height:60px; flex:none; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
#tour-panel .t-who svg { display:block; overflow:visible; }
#tour-panel .t-bubble { flex:1; position:relative; background:var(--paper-0); border:1.5px solid var(--line-2);
border-radius:16px 16px 16px 5px; padding:15px 17px 11px; font-family:var(--serif); font-size:1.02rem;
line-height:1.55; color:var(--ink); box-shadow:0 14px 40px rgba(0,0,0,.34); }
#tour-panel .t-row { display:flex; align-items:center; gap:10px; margin-top:11px; }
#tour-panel .t-dots { flex:1; display:flex; gap:5px; }
#tour-panel .t-dots i { width:5px; height:5px; border-radius:50%; background:var(--line-2); display:block; }
#tour-panel .t-dots i.on { background:var(--accent); }
#tour-panel .t-skip, #tour-panel .t-next { font-family:var(--sans); font-size:.7rem; letter-spacing:.08em;
text-transform:uppercase; border:none; background:none; cursor:pointer; padding:4px 2px; }
#tour-panel .t-skip { color:var(--faint); }
#tour-panel .t-next { color:var(--accent); font-weight:600; }
@media (max-width:520px) { #tour-panel .t-who { display:none; } }
.guide-again { display:inline-flex; align-items:center; gap:6px; cursor:pointer; margin-bottom:14px; }
.memlist { list-style:none; padding:0; margin:18px 0 0; max-width:640px; }
.memlist li { display:flex; gap:12px; align-items:flex-start; padding:12px 2px;
border-bottom:1px solid var(--line); font-family:var(--serif); font-size:1rem; line-height:1.55; }
.memlist li.gone { opacity:.3; text-decoration:line-through; }
.memlist .mem-x { flex:none; font-family:var(--sans); font-size:var(--t-00); letter-spacing:.08em;
text-transform:uppercase; color:var(--faint); background:none; border:none; cursor:pointer; padding:3px 0; }
.memlist .mem-x:hover { color:var(--accent); }
.rev-attr { text-align:center; font-family:var(--serif); font-size:.98rem; color:var(--ink-2);
min-height:1.4em; margin:12px auto 0; max-width:460px;
transition:opacity 700ms var(--e-std); }
.rev-attr.in { animation:attrIn 460ms cubic-bezier(.2,.9,.3,1) both; }
.rev-attr.dry { opacity:0; }
@keyframes attrIn { from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }
.pfirst { font-family:var(--sans); font-size:var(--t-00); letter-spacing:.03em; color:var(--faint);
margin:2px 0 4px; }
.ink-word { position:relative; display:inline-block; }
.ink-ch { display:inline-block; will-change:transform,opacity,filter; }
.ink-rule { position:absolute; left:0; right:0; bottom:-.34em; width:100%; height:.5em;
overflow:visible; pointer-events:none; }
.ink-rule path { stroke-dasharray:200; }
.rev-sweep { position:absolute; inset:0; overflow:hidden; border-radius:inherit;
pointer-events:none; z-index:2; }
.rev-sweep > i { position:absolute; top:-20%; bottom:-20%; width:38%; display:block;
background:linear-gradient(100deg, transparent, rgba(var(--gold), .34) 45%, transparent);
transform:translateX(-140%) skewX(-14deg); will-change:transform; }
#rev-card { position:relative; }
body.motion-low .rev-sweep { display:none; }
:root { --fog-scale: 1; --fog-max: 2.1px; }
.w { --fog: 0;
filter: blur(calc(var(--fog) * var(--fog-scale) * var(--fog-max)));
opacity: calc(1 - var(--fog) * var(--fog-scale) * 0.42);
transition: filter 420ms var(--e-std), opacity 420ms var(--e-std); }
body.squint .w { filter: none !important; opacity: 1 !important;
transition: filter 180ms var(--e-std), opacity 180ms var(--e-std); }
.w.bloom { transition: filter 620ms var(--e-snap), opacity 620ms var(--e-snap); }
body.motion-low .w { transition: none; }
body.fog-off .w { filter: none !important; opacity: 1 !important; }
body.fog-off .squint-hint { display: none; }
.squint-hint { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%);
font-family: var(--sans); font-size: var(--t-00); letter-spacing: .09em; text-transform: uppercase;
color: var(--faint); background: var(--paper-0); border: 1px solid var(--line);
border-radius: 20px; padding: 5px 13px; z-index: 30; pointer-events: none;
opacity: 0; transition: opacity 400ms var(--e-std); }
.squint-hint.on { opacity: 1; }
.frontier-card { max-width:640px; margin:0 auto 16px; text-align:center; }
.frontier-card .fr-n { font-family:var(--serif); font-size:2.6rem; font-weight:600; line-height:1;
color:var(--ink); font-variant-numeric:tabular-nums; }
.frontier-card .fr-n .fr-d { font-size:1rem; color:var(--faint); font-weight:400; }
.frontier-card .fr-lab { font-family:var(--sans); font-size:.7rem; letter-spacing:.13em;
text-transform:uppercase; color:var(--ink-2); margin-top:6px; }
.frontier-card .fr-sub { font-family:var(--serif); font-style:italic; color:var(--ink-2);
font-size:.92rem; margin-top:10px; }
.keys { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:12px; }
.keys button { font-family:var(--serif); font-size:1rem; border:1px solid var(--line);
background:var(--card); color:var(--ink); border-radius:11px; padding:7px 13px; cursor:pointer;
display:flex; align-items:baseline; gap:8px; transition:border-color .18s, transform .18s; }
.keys button:hover { border-color:var(--signal); transform:translateY(-2px); }
.keys button b { font-weight:600; }
.keys button i { font-family:var(--sans); font-style:normal; font-size:var(--t-00); letter-spacing:.06em;
text-transform:uppercase; color:var(--faint); }
#v-read .reader, #v-read #text, .aperture {
background-color: var(--sheet);
background-image:
linear-gradient(to right, var(--rule) 0 1px, transparent 1px),
linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px);
background-size: 19px 19px;
background-blend-mode: normal;
}
#v-read #text { position: relative; padding: 26px 26px 40px; }
#v-read #text::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(var(--sheet), var(--sheet));
opacity: .74; z-index: 0;
}
#v-read #text > * { position: relative; z-index: 1; }
#v-read .reader {
border: 1px solid var(--size);
box-shadow: inset 0 0 0 3px var(--gesso), 0 0 34px -6px rgba(0,0,0,.14);
}
#v-read .reader::after {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
background: radial-gradient(78% 46% at 50% 16%,
color-mix(in srgb, var(--limelight) 22%, transparent), transparent 72%);
mix-blend-mode: multiply; opacity: .5;
}
[data-theme="dark"] #v-read .reader::after { mix-blend-mode: screen; opacity: .16; }
.card, .book, .glesson-card { position: relative; }
.card:hover, .book:hover, .glesson-card:hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.gchip, .streak-chip, .book .lvl {
border-radius: 22px; font-family: var(--sans); letter-spacing: .14em;
-webkit-mask-image: radial-gradient(circle 7px at 0 50%, transparent 98%, #000 100%);
mask-image: radial-gradient(circle 7px at 0 50%, transparent 98%, #000 100%);
}
.tile .v, .fr-n, .s-v, .cnt, .tl-date,
.meter-legend span, .pstage, .fr-lab {
font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.w {
--mark: transparent; --mark-h: 2px; --r: 1;
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% var(--mark-h);
background-image: linear-gradient(var(--mark), var(--mark));
transition: background-size 380ms cubic-bezier(.05,.7,.1,1),
filter 420ms var(--e-std), opacity 420ms var(--e-std);
}
.w.held { --mark: transparent; }
.w.l    { --mark: color-mix(in srgb, var(--carbon) 62%, transparent); --mark-h: 2px; background-size: 0 var(--mark-h); }
.w.l.r0 { background-size: 34% var(--mark-h); }
.w.l.r1 { background-size: 68% var(--mark-h); }
.w.l.r2 { background-size: 100% var(--mark-h); }
.w.new { --mark: transparent; }
body.hint-all .w.new { --mark: color-mix(in srgb, var(--carbon) 25%, transparent); --mark-h: 1px; }
.w.skip { background-image: repeating-linear-gradient(90deg, var(--ink-3) 0 3px, transparent 3px 6px); --mark-h: 1px; }
.w.ronly { background-image: repeating-linear-gradient(90deg, var(--ink-3) 0 5px, transparent 5px 7px, var(--ink-3) 7px 8px, transparent 8px 10px); --mark-h: 1px; }
.w.leech { --mark-h: 5px; background-size: 8px 5px; background-repeat: repeat-x;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0,3.5 q2,-3 4,0 t4,0' fill='none' stroke='%23cb4726' stroke-width='1.4'/%3E%3C/svg%3E"); }
.w.standing { background-image:
linear-gradient(var(--paste), var(--paste)),
linear-gradient(var(--paste), var(--paste));
background-repeat: no-repeat, no-repeat;
background-position: 0 100%, 50% 100%;
background-size: 100% 2px, 5px 4px; }
.w:hover { --mark: var(--minium); --mark-h: 2px; background-size: 100% 2px; color: var(--minium-t); }
.rail { display: inline-flex; gap: 3px; align-items: flex-end; height: 12px; vertical-align: middle; }
.rail i { display: block; width: 5px; height: 5px; background: var(--rule); border-radius: 0; }
.rail i.met { background: var(--paste); }
.rail i.now { background: var(--ink); height: 8px; }
.rail-lab { font-family: var(--sans); font-size: var(--t-00); letter-spacing: .18em;
color: var(--ink-3); text-transform: uppercase; }
.frontier-card { background:var(--gesso); border:1px solid var(--size); box-shadow:0 3px 0 var(--foot); padding:22px 24px 20px; }
.frontier-card .fr-n { font-family:var(--bill); font-size:var(--t-7); font-weight:700; }
.frontier-card .fr-lab { font-family:var(--sans); letter-spacing:.12em; }
.bill { list-style:none; padding:0; margin:16px auto 4px; max-width:420px; text-align:left; }
.bill li { display:flex; align-items:baseline; gap:8px; padding:5px 0; font-family:var(--bill);
font-size:var(--t-1); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.bill li i { flex:1; height:1em; background-image:repeating-linear-gradient(90deg,var(--size) 0 1px,transparent 1px 5px);
background-repeat:repeat-x; background-position:0 82%; background-size:auto 1px; }
.bill li .b-n { font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink-2); }
.bill li.struck { color:var(--ink-3); }
.bill li.struck .b-ti { text-decoration:line-through; text-decoration-thickness:1px; }
.bill li .b-x { font-family:var(--sans); font-size:var(--t-00); letter-spacing:.14em; color:var(--zelyonka); }
.pat-opts { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:16px; }
.pat-opts button { flex:0 0 auto; width:auto; min-width:78px; display:block;
font-family:var(--serif); font-size:var(--t-3); padding:9px 18px;
border:1px solid var(--size); background:var(--gesso); color:var(--ink); cursor:pointer;
clip-path:polygon(0 4px,4px 0,calc(100% - 4px) 0,100% 4px,100% 100%,0 100%);
box-shadow:0 3px 0 var(--foot); }
.pat-opts button:hover:not(:disabled) { border-color:var(--minium); color:var(--minium-t); }
.pat-opts button:disabled { cursor:default; }
.pat-opts button.right { background:var(--zelyonka); border-color:var(--zelyonka); color:var(--gesso); }
.pat-opts button.wrong { border-color:var(--minium); color:var(--minium-t); text-decoration:line-through; }
#rev-card .rail i { width:6px; height:6px; }
.pat-why { margin-top:16px; padding-top:12px; border-top:1px solid var(--size);
font-family:var(--serif); font-size:var(--t-1); color:var(--ink-2); line-height:1.6; }
#rev-card .rail { margin:6px auto 0; }
#rev-card .rail-lab { margin-top:10px; }
.unopened { margin-top:20px; padding-top:16px; border-top:1px solid var(--size); }
.un-head { font-family:var(--bill); font-size:var(--t-00); letter-spacing:.22em; text-transform:uppercase;
color:var(--ink-3); margin-bottom:10px; }
.unopened .bill li .b-of { font-family:var(--mono); font-size:var(--t-00); color:var(--ink-3); margin-left:6px; }
.un-note { font-family:var(--serif); font-style:italic; font-size:var(--t-1); color:var(--ink-2);
max-width:440px; margin:12px auto 14px; line-height:1.55; }
@media (prefers-reduced-motion: reduce) { }
.w.w-invite { --mark: var(--signal); --mark-h: 2px; background-size: 100% 2px; }
.w.w-ring { position: relative; }
.w.w-ring::after {
content: ''; position: absolute; inset: -0.28em -0.5em;
border: 2px solid var(--signal-ink); border-radius: 50%;
transform: rotate(-2.5deg); opacity: .78; pointer-events: none;
}
body:not(.motion-low) .w.w-ring::after {
opacity: 0;
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
animation: ink-ring 4s cubic-bezier(0.16, 1, 0.3, 1) .2s forwards;
}
@keyframes ink-ring {
0%   { opacity: 0;   clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
25%  { opacity: .85; }
100% { opacity: .78; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
.gesture-invite { display: block; margin: 8px 0 2px;
font-family: var(--serif); font-style: italic;
font-size: .88rem; line-height: 1.5; color: var(--signal-ink); }
.gesture-invite::before { content: '☞ '; font-style: normal; }
#text p.dropcap > .gesture-invite { float: left; width: 100%; }
#v-read .scene-head .rule,
#v-read .scene-head hr { border-top-color: var(--book-ink, var(--signal)); }
#v-read #scene-orn, #v-read .scene-head .orn { color: var(--book-ink, var(--signal)); }
#v-read .scene-head .vy { color: color-mix(in srgb, var(--book-ink, var(--ink-2)) 78%, var(--ink-2)); }
#v-read .divider { color: var(--book-ink, var(--verm)); }
#v-read .sent.done { text-decoration-color: color-mix(in srgb, var(--book-ink, var(--signal)) 55%, transparent); }
#readbar .rb-progress i, #readbar .prog i { background: var(--book-ink, var(--signal)); }
#readbar .fill { background: var(--book-ink, var(--verm)); height: 3px; }
[data-theme="dark"] #v-read .scene-head .vy,
[data-theme="dark"] #pop .pw { color: color-mix(in srgb, var(--book-ink, var(--carbon)) 32%, var(--carbon)); }
[data-theme="dark"] #text p.dropcap::first-letter,
[data-theme="dark"] #text .dc { color: color-mix(in srgb, var(--book-ink, var(--verm)) 38%, var(--carbon)); }
[data-theme="dark"] #v-read .divider { color: color-mix(in srgb, var(--book-ink, var(--verm)) 40%, var(--carbon)); }
[data-theme="sepia"] #v-read .scene-head .vy,
[data-theme="sepia"] #v-read .divider,
[data-theme="sepia"] #v-read #scene-orn,
[data-theme="sepia"] #v-read .scene-head .orn {
color: color-mix(in oklab, var(--book-ink, var(--carbon)) 50%, var(--carbon));
}
.room-list { font-family:var(--serif); font-size:var(--t-1); }
.room-list a { color:var(--signal-ink); }
.room-list b { font-weight:600; }
.k-rule { font-family:var(--serif); font-style:italic; font-size:var(--t-1);
color:var(--ink-2); margin:calc(var(--s2) * -1) 0 var(--s3); line-height:1.45; }
.letters-row { display:flex; gap:var(--s2); flex-wrap:wrap; margin:var(--s4) 0 var(--s2); }
.letters-row input { flex:1 1 15rem; min-width:0; font:inherit; font-size:var(--t-1);
padding:10px 12px; color:var(--carbon); background:var(--sheet);
border:1px solid var(--edge); border-radius:0; }
.letters-row input:focus-visible { outline:2px solid var(--signal); outline-offset:1px; }
.letters-say:empty { display:none; }
.letters-plate .btnrow { margin-top:var(--s2); }
.lad-line { font-family:var(--bill); font-size:var(--t-5); font-weight:700; margin:4px 0 10px; }
.lad-line b { font-size:var(--t-6); }
.rungs { list-style:none; padding:0; margin:14px auto 6px; max-width:400px; text-align:left; }
.rungs li { display:flex; align-items:baseline; gap:8px; padding:4px 0; }
.rungs li .r-l { font-family:var(--serif); font-size:var(--t-2); }
.rungs li i { flex:1; height:1em; background-image:repeating-linear-gradient(90deg,var(--size) 0 1px,transparent 1px 5px);
background-repeat:repeat-x; background-position:0 78%; background-size:auto 1px; }
.nav-key { display:inline-flex; align-items:center; gap:6px; }
.nav-key #nav-key-label { font-size:.86em; }
.nav-key.in { color:var(--zelyonka); }
.nav-key.in::after { content:'●'; font-size:.5em; vertical-align:middle; }
#key-panel { max-width: 460px; }
#key-panel h3 { margin: 0 0 4px; }
#key-panel .k-lede { font-family: var(--serif); color: var(--ink-2); font-size: var(--t-1);
line-height: 1.6; margin: 0 0 16px; }
#key-panel input[type=email],
#key-panel input[type=password],
#key-panel input[type=text] { width: 100%; font-family: var(--serif); font-size: var(--t-2);
padding: 11px 14px; border: 1px solid var(--size); background: var(--sheet); color: var(--ink);
clip-path: polygon(0 4px,4px 0,calc(100% - 4px) 0,100% 4px,100% 100%,0 100%); }
#key-panel input[type=email], #key-panel input[type=password], #key-panel input[type=text] { margin-bottom: 9px; }
#key-panel input:focus { outline: none; }
#key-panel input[type=email]:focus-visible,
#key-panel input[type=password]:focus-visible,
#key-panel input[type=text]:focus-visible {
border-color: var(--minium-t);
box-shadow: inset 0 0 0 2px var(--mark);
}
.k-alt { display: flex; flex-direction: column; gap: 4px; margin-top: 14px;
padding-top: 12px; border-top: 1px solid var(--size); }
.k-linkish { background: none; border: none; padding: 3px 0; cursor: pointer; text-align: left;
font-family: var(--sans); font-size: var(--t-00); letter-spacing: .04em; color: var(--ink-3); }
.k-linkish:hover { color: var(--minium-t); }
#key-panel .k-sent { font-family: var(--serif); font-size: var(--t-1); line-height: 1.65;
color: var(--ink-2); }
#key-panel .k-sent b { color: var(--ink); font-style: normal; }
#key-panel .k-err { color: var(--minium-t); font-family: var(--sans); font-size: var(--t-0);
margin-top: 8px; }
#key-panel .k-rows { list-style: none; padding: 0; margin: 14px 0 0; }
#key-panel .k-rows li { display: flex; justify-content: space-between; gap: 12px;
padding: 8px 0; border-bottom: 1px solid var(--size); font-family: var(--sans);
font-size: var(--t-0); }
#key-panel .k-rows li span:last-child { font-family: var(--mono); color: var(--ink-2); }
#key-panel .k-danger { font-family: var(--sans); font-size: var(--t-00); letter-spacing: .08em;
text-transform: uppercase; color: var(--faint); background: none; border: none;
cursor: pointer; padding: 6px 0; }
#key-panel .k-danger:hover { color: var(--minium-t); }
.plans { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 4px; }
.plans .plan { display:flex; flex-direction:column; align-items:flex-start; gap:2px;
text-align:left; padding:14px 15px; cursor:pointer; background:var(--gesso);
border:1px solid var(--size); box-shadow:0 3px 0 var(--foot);
clip-path:polygon(0 5px,5px 0,calc(100% - 5px) 0,100% 5px,100% 100%,0 100%);
transition:border-color .16s var(--e-std); }
.plans .plan:hover { border-color:var(--minium); }
.plans .plan:active { transform:translateY(3px); box-shadow:0 0 0 var(--foot); }
.plans .plan.best { border-color:var(--minium);
box-shadow:0 3px 0 var(--foot), 0 0 22px -6px color-mix(in srgb, var(--limelight) 70%, transparent); }
.plans .p-amt { font-family:var(--bill); font-size:var(--t-5); font-weight:700; line-height:1; }
.plans .p-per { font-family:var(--sans); font-size:var(--t-00); letter-spacing:.1em;
text-transform:uppercase; color:var(--ink-3); }
.plans .p-note { font-family:var(--serif); font-size:var(--t-0); color:var(--ink-2);
line-height:1.45; margin-top:6px; }
@media (max-width:520px) { .plans { grid-template-columns:1fr; } }
.masthead { position: relative; isolation: isolate;
text-align: center; padding: 38px 0 30px; margin-bottom: 26px; }
.masthead::after {
content: ''; position: absolute; left: 8%; right: 8%; bottom: 0; height: 5px;
border-top: 1px solid var(--rule-room);
border-bottom: 2px solid var(--carbon);
}
.masthead .wordmark { text-align: center; }
.masthead .room-line { text-align: center; }
.masthead h1, .masthead .as-h1 {
font-family: var(--serif); font-weight: var(--fw-text);
font-size: clamp(30px, 5.4vw, 52px); line-height: 1.12;
letter-spacing: var(--track-title); text-transform: none;
margin: 16px 0 8px; text-wrap: balance; color: var(--carbon);
}
.masthead .wordmark, .masthead .room-line { color: var(--carbon); }
.masthead .wordmark .wm-t { color: var(--signal); }
.masthead .rule { margin-left: auto; margin-right: auto; }
.frontier-card, #ladder-card { background: var(--galley); }
.un-head {
font-family: var(--bill); font-weight: 600; text-transform: uppercase;
letter-spacing: .16em;
}
.frontier-card .fr-n, .lad-line {
font-family: var(--mono); font-weight: 400;
letter-spacing: -.02em; line-height: .9;
}
.frontier-card .fr-n { font-size: clamp(40px, 9vw, 72px); }
.frontier-card .fr-n .fr-d { font-family: var(--sans); font-size: var(--t-1);
letter-spacing: 0; color: var(--steel); }
.fr-lab { font-family: var(--bill); letter-spacing: .2em; text-transform: uppercase;
color: var(--signal-ink); }
.plans .plan {
clip-path: none; border-radius: 0;
border: 1px solid color-mix(in srgb, var(--carbon) 55%, var(--rule));
background: var(--galley); color: var(--carbon);
box-shadow: 0 1px 2px rgba(52,32,15,.14), 0 4px 12px -6px rgba(52,32,15,.35);
font-family: var(--sans); font-weight: 600; letter-spacing: .04em;
transition: background .12s linear, color .12s linear,
box-shadow .12s var(--e-std, ease), transform .12s var(--e-std, ease);
}
.plans .plan.best { border-color: var(--signal); border-width: 2px; }
.plans .p-amt { font-family: var(--mono); }
#v-read .reader {
background: var(--sheet); background-image: none;
border: none; box-shadow: none;
border-left: 6px solid var(--signal);
}
#v-read .reader::after { display: none; }
#v-read #text { background: var(--sheet); background-image: none; padding: 30px 34px 44px; }
#v-read #text::before { display: none; }
:root {
--mo-touch: 90ms; --mo-ink: 220ms; --mo-act: 290ms; --mo-spine: 300ms;
--mo-fill: 440ms; --mo-count: 440ms; --mo-sum: 520ms; --mo-ghost: 700ms;
--mo-run: 900ms; --mo-toss: 1420ms; --mo-sheet: 1600ms; --mo-plate: 2400ms;
--mo-e-reward: cubic-bezier(.2,.7,.2,1);
--mo-e-std: var(--e-std); --mo-e-enter: var(--e-enter); --mo-e-exit: var(--e-exit);
--mo-e-settle: var(--settle);
--mo-e-mark: cubic-bezier(.3,1.3,.5,1);
--mo-e-seal: cubic-bezier(.3,1.45,.5,1);
--earned: var(--rank-brass); --earned-wash: var(--rank-wash); --earned-track: var(--rank-track);
--earned-on-rail: #dfb967;
--miss: #922943;
--run-base: #5b554b; --run-mix: 0%;
--r-bar: 2px; --r-control: 5px; --r-surface: 8px; --r-dialog: 14px; --r-pill: 999px;
--sh-press: 0 3px 0 color-mix(in srgb, var(--signal-ink) 65%, transparent);
--sh-press-quiet: 0 2px 0 color-mix(in srgb, var(--carbon) 22%, transparent);
--sh-float: 0 1px 2px rgb(23 33 58 / .10), 0 14px 32px -14px rgb(23 33 58 / .35);
--fw-text: 400; --fw-medium: 500; --fw-strong: 600;
--track-eyebrow: .12em; --track-title: -.015em; --track-display: -.03em;
--control-h: 48px; --control-h-tool: 44px; --control-pad: .75rem 1.25rem;
--page-w: 1040px;
--z-header: 40; --z-stage: 240; --z-dock: 246; --z-toast: 250; --z-overlay: 290; --z-press: 400;
}
[data-theme="sepia"] { --run-base: #5a4f3f; }
[data-theme="dark"] { --run-base: #b9b2a2; --miss: #f08aa2;
--sh-press-quiet: 0 2px 0 var(--case);
--sh-float: 0 0 0 1px var(--rule), 0 14px 32px -14px rgb(0 0 0 / .6); }
[data-streak] { --run-mix: 0%; --run-ink: #5b554b; --run-fill: #5b554b; --run-glow: transparent; }
[data-streak="warm"] { --run-mix: 35%; --run-ink: #7a5718; --run-fill: #9c7426; --run-glow: transparent; }
[data-streak="flowing"] { --run-mix: 60%; --run-ink: #8a5a00; --run-fill: #c48a12; --run-glow: transparent; }
[data-streak="glowing"] { --run-mix: 80%; --run-ink: #8f4f00; --run-fill: #e8a512; --run-glow: rgba(246, 196, 69, .55); }
[data-streak="flourishing"] { --run-mix: 100%; --run-ink: #a3410a; --run-fill: #ef7d1f; --run-glow: rgba(239, 125, 31, .42); }
[data-streak="radiant"] { --run-mix: 100%; --run-ink: #b32a17; --run-fill: #e8492a; --run-glow: rgba(246, 196, 69, .62); }
[data-theme="sepia"] [data-streak] { --run-ink: #5a4f3f; --run-fill: #5a4f3f; }
[data-theme="sepia"] [data-streak="warm"] { --run-ink: #6e4f17; --run-fill: #8f6a22; }
[data-theme="sepia"] [data-streak="flowing"] { --run-ink: #784c00; --run-fill: #b07d10; }
[data-theme="sepia"] [data-streak="glowing"] { --run-ink: #7c4400; --run-fill: #d4950c; }
[data-theme="sepia"] [data-streak="flourishing"] { --run-ink: #8c3606; --run-fill: #d96a17; }
[data-theme="sepia"] [data-streak="radiant"] { --run-ink: #982313; --run-fill: #cf3f22; }
[data-theme="dark"] [data-streak] { --run-ink: #b9b2a2; --run-fill: #b9b2a2; }
[data-theme="dark"] [data-streak="warm"] { --run-ink: #d6b77a; --run-fill: #c9a45a; }
[data-theme="dark"] [data-streak="flowing"] { --run-ink: #ecc160; --run-fill: #e0ad25; }
[data-theme="dark"] [data-streak="glowing"] { --run-ink: #f6c445; --run-fill: #f6c445; }
[data-theme="dark"] [data-streak="flourishing"] { --run-ink: #ffa95c; --run-fill: #ff8c32; }
[data-theme="dark"] [data-streak="radiant"] { --run-ink: #ff8a6a; --run-fill: #ff6a45; }
html[data-motion="low"] :where(.study-dock, .resident, .xpm, .pp-receipt, .ledger-sheet, .rite-plate, .dstand, [data-verdict]),
html[data-motion="low"] :where(.study-dock, .resident, .xpm, .pp-receipt, .ledger-sheet, .rite-plate, .dstand, [data-verdict]) * {
animation-duration: 1ms !important; animation-delay: 0s !important;
transition-duration: 1ms !important; transition-delay: 0s !important;
}
:root {
--s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
--s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px;
--edge:    color-mix(in srgb, var(--carbon) 55%, var(--rule));
--edge-hi: var(--carbon);
--lift:    0 2px 3px rgba(52,32,15,.14), 0 8px 20px -10px rgba(52,32,15,.45);
--lift-lg: 0 4px 8px rgba(52,32,15,.15), 0 22px 48px -18px rgba(52,32,15,.5);
--lift-sm: 0 1px 2px rgba(52,32,15,.14), 0 5px 14px -8px rgba(52,32,15,.4);
--mark: var(--signal);
--pencil: var(--steel);
--scrim: color-mix(in srgb, var(--carbon) 58%, transparent);
--bar:    var(--carbon);
--on-bar: var(--galley);
--pad-y: 20px;
--pad-x: 24px;
--g-green: var(--carbon);   --g-green-d: var(--steel);
--g-gold:  var(--signal);   --g-gold-d:  var(--signal-ink);
--g-blue:  var(--steel);    --g-purple:  var(--carbon);
--g-rose:  var(--signal-ink); --g-teal:  var(--steel);
--g-orange: var(--signal);  --g-ring:    var(--rule);
}
[data-theme="dark"] {
--edge:    var(--rule);
--edge-hi: var(--steel);
--lift:    0 2px 4px rgba(0,0,0,.5), 0 10px 24px -10px rgba(0,0,0,.75);
--lift-lg: 0 4px 10px rgba(0,0,0,.55), 0 26px 52px -18px rgba(0,0,0,.85);
--lift-sm: 0 1px 2px rgba(0,0,0,.5), 0 6px 16px -8px rgba(0,0,0,.65);
--mark:    var(--signal-ink);
--scrim:   color-mix(in srgb, var(--case) 78%, transparent);
}
body { font-size: var(--t-1); line-height: 1.55; }
h1, h2, h3, h4 { line-height: 1.15; text-wrap: balance; }
h4 { font-family: var(--sans); font-weight: var(--fw-strong); letter-spacing: 0; text-transform: none; }
h1, .as-h1 { font-size: var(--t-7); margin: 0 0 var(--s2); }
h2 { font-size: var(--t-5); margin: 0 0 var(--s3); }
h3 { font-size: var(--t-2); margin: 0 0 var(--s3); }
.smallcaps, .scene-head .vy, .tl .tl-date,
.book .b-author, .issue .no, .find-card .fc-cat, .frontier-card .fr-lab {
font-family: var(--sans); font-size: var(--t-00); font-weight: var(--fw-strong);
letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--steel);
}
.muted { color: var(--steel); }
.faint { color: var(--ink-3p); }
.plan-line, .aim-line, .ask-card .confess, .ask-card .q, .found-object,
.almanac, .greeting, .rev-attr, .issue .en, .book .b-year { font-family: var(--serif); }
.view { padding: var(--s6) var(--s5) 14vh; }
.view.show::after {
content: '❦';
display: block; text-align: center;
margin-top: 72px;
color: var(--rule-room); font-size: var(--t-2);
opacity: .7;
}
header {
background: var(--galley);
border-bottom: 2px solid var(--carbon);
}
.bar { padding: 0 var(--s4); gap: var(--s2); min-height: 52px; }
.nav-tabs { gap: 0; align-items: stretch; }
.nav-tabs button {
font-family: var(--sans); font-size: var(--t-0); font-weight: 500;
letter-spacing: .02em; color: var(--steel);
padding: 0 var(--s3); min-height: 44px; border-radius: 0; flex: none;
}
.nav-tabs button:hover { color: var(--carbon); }
.nav-tabs button.active { color: var(--carbon); font-weight: 600; }
.nav-tabs button::after {
left: var(--s2); right: var(--s2); bottom: 6px; height: 2px;
background: var(--carbon); border-radius: 0;
}
.theme-dots { gap: 0; border: 1px solid var(--carbon); }
.theme-dots button {
width: 34px; height: 44px; border-radius: 0; padding: 0;
border: none; border-right: 1px solid var(--carbon); box-shadow: none;
}
.theme-dots button:last-child { border-right: none; }
.theme-dots button.on { box-shadow: inset 0 0 0 3px var(--carbon); transform: none; }
.theme-dots button:hover { transform: none; }
.card,
.overlay .panel,
.scene-end,
.ticket,
.prep-banner,
.find-card,
.issue,
.glesson-card,
.gex,
.tr-reveal,
.ask-card {
background: var(--galley);
}
.card {
padding: var(--pad-y) var(--pad-x);
margin-bottom: var(--s4);
}
.card > h3,
.overlay .panel > h3,
.scene-end > h3 {
margin: 0 0 var(--s3); padding: 0;
background: none; color: var(--carbon);
font: var(--fw-strong) var(--t-2)/1.3 var(--sans);
text-transform: none; letter-spacing: 0; text-align: left; text-wrap: balance;
}
.card > h3:not(:first-child),
.overlay .panel > h3:not(:first-child),
.scene-end > h3:not(:first-child) {
margin-top: var(--s5);
}
.card h3, .overlay .panel h3 {
font-family: var(--sans); font-weight: var(--fw-strong); text-transform: none; letter-spacing: 0;
}
.overlay { background: var(--scrim); padding: var(--s5); }
.overlay .panel { max-height: min(88vh, calc(100dvh - 28px)); }
#intro-panel > .btnrow {
position: sticky; bottom: 0; z-index: 2;
margin-left: -28px; margin-right: -28px; margin-bottom: -14px;
padding: 12px 28px 14px;
background: var(--galley);
border-top: 1px solid var(--rule);
}
.overlay .panel {
border-color: var(--edge-hi);
box-shadow: var(--lift-lg);
padding: var(--pad-y) var(--pad-x);
max-height: 86vh;
}
.filters button,
.conf-row button,
.rev-btns button,
.quiz-opt,
.ltile,
.keys button,
#pop .row button,
#pop .row a,
.ask-card .opts button,
.guide-again,
.plan-opt,
.read-on,
.exlibris {
font-family: var(--sans); font-size: var(--t-1); font-weight: 500;
letter-spacing: .01em; line-height: 1.2;
cursor: pointer;
}
.rev-btns button, .conf-row button, .filters button,
.keys button, .ask-card .opts button, .plan-opt {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--s2);
min-height: 44px; padding: var(--s2) var(--s4);
}
.ask-card .opts button {
justify-content: flex-start; text-align: left;
font-family: var(--serif); font-weight: 500;
}
.icon-btn.on,
#pop .row button.on2,
.nav-key.on {
background: var(--carbon); border-color: var(--carbon); color: var(--galley);
}
#pop .row button.on1 { background: var(--case); border-color: var(--edge); }
.ltile:disabled, .quiz-opt:disabled, button[disabled] {
color: var(--ink-3p); border-color: var(--rule);
background: var(--galley); box-shadow: none;
cursor: default; opacity: 1;
}
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--mark);
outline-offset: 2px;
}
.btn.primary:focus-visible, .rev-btns .primary:focus-visible {
outline-color: var(--carbon);
}
.k-linkish, .aim-line .aim-edit, .memlist .mem-x, .ask-card .later,
#tour-panel .t-skip, #tour-panel .t-next, .tr-reveal .tr-tools button {
font-family: var(--sans); font-size: var(--t-0); font-weight: var(--fw-strong); letter-spacing: 0;
text-transform: none; background: none; border: none; box-shadow: none;
color: var(--signal-ink); cursor: pointer; padding: var(--s2) 0;
min-height: 44px;
}
.k-linkish:hover, .memlist .mem-x:hover, .aim-line .aim-edit:hover { color: var(--carbon); }
#tour-panel .t-skip, .ask-card .later { color: var(--steel); }
.guide-again { font: var(--fw-strong) var(--type-meta)/1.25 var(--sans);
letter-spacing: 0; text-transform: none; padding: 0 var(--s3); min-height: var(--control-h-tool); }
details:not(.reader-tools, .lesson-audio-choices, .grammar-family, .case-explorer, .course-preview-meaning, .rev-more, .syl-band, .k-name-field) > summary {
list-style: none; cursor: pointer;
}
details:not(.reader-tools, .lesson-audio-choices, .grammar-family, .case-explorer, .course-preview-meaning, .rev-more, .syl-band, .k-name-field) > summary::-webkit-details-marker { display: none; }
details:not(.reader-tools, .lesson-audio-choices, .grammar-family, .case-explorer, .course-preview-meaning, .rev-more, .syl-band, .k-name-field, .k-email-door) > summary::before {
content: ''; display: inline-block; flex: none;
width: .42em; height: .42em; margin: 0 .7em .14em .08em;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(-45deg); vertical-align: middle;
transition: transform calc(var(--mo-ink) * var(--motion, 1)) var(--e-std, ease);
}
details[open]:not(.reader-tools, .lesson-audio-choices, .grammar-family, .case-explorer, .course-preview-meaning, .rev-more, .syl-band, .k-name-field, .k-email-door) > summary::before {
transform: rotate(45deg);
}
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], textarea, select,
.mnem-box, .filters input, .set-row select, .set-row input[type="text"] {
appearance: none; -webkit-appearance: none;
font-family: var(--sans); font-size: var(--t-1); line-height: 1.3;
color: var(--carbon);
background-color: var(--sheet);
border: 1px solid var(--edge);
border-radius: 0;
box-shadow: inset 2px 2px 0 color-mix(in srgb, var(--carbon) 8%, transparent);
min-height: 44px;
padding: var(--s2) var(--s3);
max-width: 100%;
}
textarea, .mnem-box { padding: var(--s3); line-height: 1.5; resize: vertical; }
::placeholder { color: var(--ink-3p); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--signal-ink); }
select, .set-row select {
padding-right: var(--s7);
background-image:
linear-gradient(45deg,  transparent 50%, var(--carbon) 50%),
linear-gradient(135deg, var(--carbon) 50%, transparent 50%);
background-size: 5px 5px, 5px 5px;
background-position: right 17px center, right 12px center;
background-repeat: no-repeat;
}
input[type="checkbox"], input[type="radio"] {
appearance: none; -webkit-appearance: none;
width: 44px; height: 44px; margin: 0 -11px; flex: none;
border: none; background: transparent; box-shadow: none; cursor: pointer;
background-repeat: no-repeat;
background-position: center, center;
background-size: 20px 20px, 22px 22px;
background-image:
linear-gradient(var(--sheet), var(--sheet)),
linear-gradient(var(--edge),  var(--edge));
}
input[type="checkbox"]:checked, input[type="radio"]:checked {
background-position: center, center, center;
background-size: 12px 12px, 20px 20px, 22px 22px;
background-image:
linear-gradient(var(--mark),  var(--mark)),
linear-gradient(var(--sheet), var(--sheet)),
linear-gradient(var(--edge),  var(--edge));
}
input[type="range"] {
appearance: none; -webkit-appearance: none;
height: 44px; background: transparent; accent-color: var(--signal);
}
input[type="range"]::-webkit-slider-runnable-track {
height: 2px; background: var(--carbon); border: none; border-radius: 0;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; width: 10px; height: 22px; margin-top: -10px;
background: var(--signal); border: 1px solid var(--carbon); border-radius: 0;
}
input[type="range"]::-moz-range-track { height: 2px; background: var(--carbon); }
input[type="range"]::-moz-range-thumb {
width: 10px; height: 22px; background: var(--signal);
border: 1px solid var(--carbon); border-radius: 0;
}
#rate { width: 84px; }
.type-input {
background: transparent; border: none; box-shadow: none;
border-bottom: 2px solid var(--signal); border-radius: 0;
font-family: var(--serif); font-size: var(--t-5); text-align: center;
}
.type-input.good { border-bottom-color: var(--carbon); }
.type-input.bad  { border-bottom-color: var(--signal-ink); }
.type-input:focus { border-bottom-color: var(--carbon); }
.set-row {
gap: var(--s4); padding: var(--s2) 0; min-height: 52px;
border-bottom: 1px solid var(--rule); font-size: var(--t-1);
}
.set-row .lab { line-height: 1.4; }
.set-row select, .set-row input[type="text"] { min-width: 140px; max-width: 50%; }
.set-row .lab { flex: 1 1 auto; min-width: 0; }
.set-row .room-list { flex: 0 1 auto; max-width: 50%; text-align: right; line-height: 1.4;
display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.set-row .room-list a, .set-row .room-list b { white-space: nowrap; }
.set-row .room-list .here { display: flex; flex-direction: column; align-items: flex-end; }
.set-row .room-list .here .faint { font-size: var(--t-2); line-height: 1.2; }
.tile .v, .sum-stat .s-v, #wordlist .cnt, #readbar .left-note, .tick-n,
.frontier-card .fr-n, .bill .b-n, .bill .b-of, .rungs .r-o, .lad-line,
.meter-legend, .dow,
table td, table th, .p-amt, .p-per {
font-family: var(--sans);
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}
.frontier-card .fr-n {
font-size: var(--t-7); font-weight: 700; line-height: .9;
letter-spacing: -.02em; color: var(--carbon);
display: flex; align-items: baseline; justify-content: center; gap: var(--s2);
margin-top: var(--s3);
}
.frontier-card .fr-n .fr-d {
font-size: var(--t-2); font-weight: 400; color: var(--steel);
letter-spacing: 0;
}
.frontier-card .fr-lab { margin-top: var(--s3); }
.frontier-card .fr-sub {
font-family: var(--serif); font-size: var(--t-1); font-style: italic;
color: var(--steel); margin-top: var(--s3);
}
.lad-line { font-size: var(--t-4); font-weight: 700; margin-top: var(--s3); }
.lad-line b { font-size: var(--t-6); line-height: 1; }
.bill, .rungs {
list-style: none; margin: var(--s4) 0 0; padding: 0;
}
.bill li, .rungs li {
display: flex; align-items: baseline; gap: var(--s2);
padding: var(--s2) 0; margin: 0;
border-bottom: 1px solid var(--rule);
}
.bill li:last-child, .rungs li:last-child { border-bottom: none; }
.bill li > i, .rungs li > i {
flex: 1 1 auto; min-width: var(--s5); align-self: baseline;
border-bottom: 1px dotted var(--rule); transform: translateY(-.28em);
}
.bill .b-ti, .rungs .r-l { font-family: var(--serif); font-size: var(--t-1); }
.bill .b-n {
font-size: var(--t-2); font-weight: 700; color: var(--carbon);
min-width: 3.5ch; text-align: right;
}
.bill .b-of, .rungs .r-o { font-size: var(--t-0); color: var(--steel); }
.bill li .b-n { color: var(--ink, var(--carbon)); }
.bill li > i { border-bottom-color: color-mix(in srgb, var(--ink, var(--rule)) 40%, var(--rule)); }
.bill .b-x {
font-family: var(--bill); font-size: var(--t-00); letter-spacing: .14em;
text-transform: uppercase; color: var(--on-signal);
background: var(--signal); padding: 1px var(--s2); margin-left: var(--s2);
}
.bill li.struck .b-ti { color: var(--steel); text-decoration: line-through; }
.un-head, .meter-legend {
font-family: var(--bill); text-transform: uppercase; letter-spacing: .12em;
}
.un-head { font-size: var(--t-1); color: var(--carbon); margin-bottom: var(--s2); }
.unopened { margin-top: var(--s5); border-top: 2px solid var(--carbon); padding-top: var(--s4); }
.un-note { font-size: var(--t-0); line-height: 1.55; color: var(--steel); margin-top: var(--s3); }
.tiles {
display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
gap: 0; background: var(--galley); border: 1px solid var(--edge);
margin-top: var(--s2);
}
.tile {
background: var(--galley); border: none; border-radius: 0;
border-left: 1px solid var(--edge); border-top: 1px solid var(--edge);
margin: -1px 0 0 -1px;
padding: var(--s3);
}
.tile .v { font-size: var(--t-5); font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.tile .l {
font-family: var(--sans); font-size: var(--t-00); letter-spacing: .1em;
text-transform: uppercase; color: var(--steel); margin-top: var(--s2);
}
.meter, .warmbar {
border-radius: 0; background: var(--hm0);
border: none; box-shadow: none; overflow: hidden;
}
.meter { height: 8px; }
.meter > i, .warmbar > i { border-radius: 0; }
.meter > i.retr { background: var(--mark); }
.meter > i.storage { background: var(--steel); opacity: 1; }
.warmbar { height: 6px; }
.warmbar > i, .warmbar.cold > i { background: var(--mark); }
.meter .tick { background: var(--galley); top: 0; height: 100%; }
.meter .tick.t98 { background: var(--carbon); width: 2px; }
.session-ring .track { stroke: var(--case); }
.session-ring .prog { stroke: var(--mark); stroke-linecap: butt; }
.ledger { gap: 1px; background: var(--galley); border: 1px solid var(--edge); margin-top: var(--s2); }
.ledger + .ledger { border-top: none; margin-top: 0; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-1); }
th, td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rule); text-align: left; }
th {
font-family: var(--bill); font-size: var(--t-0); text-transform: uppercase;
letter-spacing: .12em; color: var(--on-bar); background: var(--bar);
border-bottom: none;
}
td:not(:first-child), th:not(:first-child) { text-align: right; }
#wordlist li {
gap: var(--s4); padding: var(--s3) 0;
border-bottom: 1px solid var(--rule); align-items: baseline;
}
#wordlist .wf { font-family: var(--serif); font-size: var(--t-2); min-width: 8.5em; }
#wordlist .wf:hover { color: var(--signal-ink); }
#wordlist .wg { min-width:0; font-size: var(--type-body); line-height:1.6; overflow-wrap:anywhere; color: var(--steel); }
#wordlist .cnt { font-size: var(--type-meta); color: var(--steel); }
.filters { gap: var(--s2); margin: var(--s4) 0 var(--s5); }
.filters input { margin-left: auto; min-width: 180px; }
.set-row:last-child, .sum-stat:last-child, .memlist li:last-child { border-bottom: none; }
.sum-stat { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); gap: var(--s3); }
.sum-stat .s-ic {
border-radius: 0; width: 36px; height: 36px;
background: var(--case) !important;
border: 1px solid var(--edge); color: var(--carbon);
}
.sum-stat .s-v { font-size: var(--t-2); font-weight: 700; color: var(--carbon); }
.sum-stat { font-size: var(--t-1); }
.memlist li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); font-size: var(--t-1); gap: var(--s4); }
.seals { gap: var(--s2); }
.seals .seal, .ach {
border-radius: 0; background: var(--case);
border: 1px solid var(--edge); box-shadow: none;
color: var(--steel); font-family: var(--bill); font-weight: 700;
}
.ach { width: 48px; height: 48px; font-size: var(--t-3); }
.ach.got { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.tl { border-left: 2px solid var(--carbon); margin-left: var(--s2); padding-left: var(--s6); }
.tl .tl-day { margin-bottom: var(--s6); }
.tl .tl-day::before {
border-radius: 0; background: var(--signal);
width: 9px; height: 9px; left: -30px; top: 6px;
}
.tl .tl-ev { font-size: var(--type-body); line-height:1.6; overflow-wrap:anywhere; margin: var(--s1) 0; }
#journey-patent .jp-doc {
display: flex; gap: 18px; align-items: center;
background: var(--sheet); border: 1px solid var(--carbon);
box-shadow: var(--lift-sm);
padding: 18px 20px; margin: 10px 0 4px;
}
#journey-patent .jp-cls {
flex: none; width: 74px; height: 74px; border-radius: 50%;
display: grid; place-items: center;
font-family: var(--bill); font-size: 2rem; font-weight: 700;
color: var(--gold-leaf);
background: radial-gradient(circle at 38% 32%,
color-mix(in srgb, var(--gold-leaf) 16%, var(--sheet)), var(--sheet) 70%);
border: 2px solid color-mix(in srgb, var(--gold-leaf) 55%, var(--carbon));
box-shadow: inset 0 0 0 5px var(--sheet),
inset 0 0 0 6px color-mix(in srgb, var(--gold-leaf) 45%, transparent);
}
#journey-patent .jp-ru {
font-family: var(--serif); font-size: 1.35rem; font-weight: var(--fw-text);
margin-top: 2px;
}
#journey-patent .jp-en { font-size: var(--type-body); color: var(--steel); }
#journey-patent .jp-mid { min-width:0; max-width:65ch; overflow-wrap:anywhere; }
#journey-patent .jp-mid .smallcaps { font-size:var(--type-meta); line-height:1.5; }
#journey-patent .jp-note {
font-family: var(--serif); font-style: italic; font-size: var(--type-body);
color: var(--steel); margin-top: 3px;
}
#journey-patent .jp-rise {
height: 3px; background: var(--rule); margin-top: 10px; position: relative;
overflow: hidden;
}
#journey-patent .jp-rise i {
position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 1%);
background: var(--signal); transition: width 700ms var(--e-std, ease);
}
#journey-patent .jp-next {
font-size: var(--type-meta); color: var(--steel); margin-top: 5px;
font-variant-numeric: tabular-nums;
}
.jseals {
display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,240px), 1fr));
gap: 10px;
}
.jseal {
display: grid; grid-template-columns: 44px minmax(0,1fr);
grid-template-areas: "wax t" "wax d";
column-gap: 11px; align-items: center;
background: var(--galley); border: 1px solid var(--rule);
padding: 10px 11px; min-height: 60px;
}
.jseal:nth-child(3n)   { transform: rotate(.4deg); }
.jseal:nth-child(3n+1) { transform: rotate(-.3deg); }
.jseal-wax {
grid-area: wax; width: 42px; height: 42px; border-radius: 50%;
display: grid; place-items: center; font-size: var(--t-1);
color: color-mix(in srgb, var(--steel) 72%, transparent);
border: 1px solid var(--rule);
background: var(--galley);
box-shadow: inset 0 1.5px 3px color-mix(in srgb, var(--carbon) 16%, transparent),
inset 0 -1px 1px rgba(255,255,255,.7);
}
.jseal-wax .ic { width: 1.35em; height: 1.35em; }
.jseal-t { grid-area: t; font-family: var(--bill); font-weight: 700; font-size: var(--type-body); letter-spacing: .05em; text-transform: uppercase; overflow-wrap:anywhere; }
.jseal-d { grid-area: d; font-size: var(--type-meta); color: var(--steel); line-height: 1.5; overflow-wrap:anywhere; }
.jseal.got { border-color: var(--carbon); background: var(--sheet); box-shadow: var(--lift-sm); }
.jseal.got .jseal-wax {
border: none; color: var(--on-signal);
background: radial-gradient(circle at 36% 30%,
color-mix(in srgb, var(--signal) 82%, white), var(--signal) 62%,
color-mix(in srgb, var(--signal) 72%, black));
box-shadow: 0 1px 3px rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.14),
inset 0 -2px 4px rgba(0,0,0,.22);
rotate: -4deg;
}
.jseal.got:nth-child(even) .jseal-wax { rotate: 3deg; }
.jseal.got:nth-child(5n) .jseal-wax { rotate: -7deg; }
.jseal-wax:has(.seal-art) {
width: 52px; height: 52px;
border: none; border-radius: 0;
background: none; box-shadow: none;
}
.jseal.got .jseal-wax:has(.seal-art) {
background: none;
box-shadow: none;
border: none;
width: 52px; height: 52px;
}
.seal-art { display: grid; place-items: center; width: 100%; height: 100%; }
.seal-art svg { width: 100%; height: 100%; display: block; }
.jseal:not(.got) .seal-art { filter: grayscale(1) opacity(.38) contrast(.9); }
.jseal.got .seal-art { filter: drop-shadow(0 2px 3px rgba(20, 24, 40, .3)); }
.jseal:has(.seal-art) { grid-template-columns: 52px 1fr; }
.rev-cham {
margin: 8px 0 2px;
padding: 8px 12px;
font-family: var(--serif);
font-style: italic;
font-size: var(--t-0);
color: var(--carbon);
border-left: 3px solid var(--signal, #a5342a);
background: color-mix(in srgb, var(--signal, #a5342a) 6%, transparent);
}
.rev-bliss {
margin: 16px auto 4px;
max-width: 34em;
padding: 14px 16px 10px;
border-block: 2px solid var(--carbon);
text-align: center;
}
.rev-bliss .rb-ru {
font-family: var(--serif);
font-size: 1.35rem;
line-height: 1.45;
margin: 0 0 4px;
}
.rev-bliss .rb-en {
font-family: var(--serif);
font-style: italic;
font-size: var(--t-0);
opacity: .75;
margin: 0 0 6px;
}
.rev-bliss .rb-who {
font-family: var(--bill);
font-weight: 600;
font-size: .7rem;
letter-spacing: .12em;
text-transform: uppercase;
opacity: .6;
margin: 0;
}
.seal-panel {
max-width: 380px;
text-align: center;
padding: 26px 24px 20px;
}
.seal-panel .sc-stage {
position: relative;
width: 148px; height: 148px;
margin: 0 auto 8px;
display: grid; place-items: center;
}
.seal-panel .sc-rays {
position: absolute; inset: -26px;
background: conic-gradient(from 0deg,
rgba(246, 196, 69, .22) 0deg 9deg, transparent 9deg 30deg,
rgba(246, 196, 69, .22) 30deg 39deg, transparent 39deg 60deg,
rgba(246, 196, 69, .22) 60deg 69deg, transparent 69deg 90deg,
rgba(246, 196, 69, .22) 90deg 99deg, transparent 99deg 120deg,
rgba(246, 196, 69, .22) 120deg 129deg, transparent 129deg 150deg,
rgba(246, 196, 69, .22) 150deg 159deg, transparent 159deg 180deg,
rgba(246, 196, 69, .22) 180deg 189deg, transparent 189deg 210deg,
rgba(246, 196, 69, .22) 210deg 219deg, transparent 219deg 240deg,
rgba(246, 196, 69, .22) 240deg 249deg, transparent 249deg 270deg,
rgba(246, 196, 69, .22) 270deg 279deg, transparent 279deg 300deg,
rgba(246, 196, 69, .22) 300deg 309deg, transparent 309deg 330deg,
rgba(246, 196, 69, .22) 330deg 339deg, transparent 339deg 360deg);
border-radius: 50%;
-webkit-mask-image: radial-gradient(circle, transparent 38%, #000 46%, transparent 72%);
mask-image: radial-gradient(circle, transparent 38%, #000 46%, transparent 72%);
opacity: 0;
}
body:not(.motion-low) .seal-panel .sc-rays {
animation: sc-rays-in 1.2s ease-out .3s forwards, sc-rays-turn 60s linear infinite;
}
@keyframes sc-rays-in { to { opacity: 1; } }
@keyframes sc-rays-turn { to { transform: rotate(360deg); } }
.seal-panel .sc-plate {
position: relative;
width: 128px; height: 128px;
border-radius: 50%;
overflow: hidden;
}
.seal-panel .sc-plate svg { width: 100%; height: 100%; display: block; }
.seal-panel .sc-plate svg > :not(defs) { transform-box: fill-box; transform-origin: center; }
body:not(.motion-low) .sc-plate.minting svg > :not(defs) {
opacity: 0;
animation: sc-part .5s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s) forwards;
}
@keyframes sc-part {
from { opacity: 0; transform: translateY(6px) scale(.92); }
to   { opacity: 1; transform: none; }
}
body:not(.motion-low) .sc-plate.struck {
animation: sc-press .62s cubic-bezier(.34, 1.4, .5, 1) both;
}
@keyframes sc-press {
0%   { transform: scale(1.14); }
55%  { transform: scale(.965); }
100% { transform: scale(1); }
}
.sc-plate.struck::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(115deg, transparent 32%, rgba(255, 253, 245, .55) 46%, rgba(255, 253, 245, .1) 54%, transparent 66%);
transform: translateX(-130%);
pointer-events: none;
}
body:not(.motion-low) .sc-plate.struck::after {
animation: sc-sheen .8s cubic-bezier(0.16, 1, 0.3, 1) .55s forwards;
}
@keyframes sc-sheen { to { transform: translateX(130%); } }
body:not(.motion-low) .sc-plate.struck svg {
animation: sc-breath 4s ease-in-out 1.6s infinite;
}
@keyframes sc-breath {
0%, 100% { transform: scale(1); }
50%      { transform: scale(1.012); }
}
body:not(.motion-low) .sc-plate.struck [data-a="flicker"] {
animation: a-flicker 4s ease-in-out 1.8s infinite;
}
@keyframes a-flicker {
0%, 100% { transform: scaleY(1) rotate(0deg); opacity: 1; }
30%      { transform: scaleY(1.06) rotate(-1.6deg); opacity: .93; }
62%      { transform: scaleY(.965) rotate(1.2deg); }
}
body:not(.motion-low) .sc-plate.struck [data-a="ripple"] {
animation: a-ripple 4s ease-out 1.8s infinite;
}
@keyframes a-ripple {
0%, 55%, 100% { opacity: 1; }
22%           { opacity: .35; }
}
body:not(.motion-low) .sc-plate.struck [data-a="glint"] {
animation: a-glint 4s ease-in-out 2s infinite;
}
@keyframes a-glint {
0%, 64%, 100% { opacity: var(--glint-rest, .6); transform: none; }
76%           { opacity: 1; transform: translate(1.5px, -1px); }
}
body:not(.motion-low) .sc-plate.struck [data-a="sway"] {
animation: a-sway 4s cubic-bezier(0.16, 1, 0.3, 1) 1.8s infinite;
}
@keyframes a-sway {
0%, 100% { transform: rotate(0deg); }
38%      { transform: rotate(2.4deg); }
72%      { transform: rotate(-1.4deg); }
}
body:not(.motion-low) .sc-plate.struck [data-a="steam"] {
animation: a-steam 4s ease-in-out 1.8s infinite;
}
@keyframes a-steam {
0%, 100% { transform: translateY(0); opacity: .8; }
50%      { transform: translateY(-2.2px); opacity: 1; }
}
.seal-panel .sc-name {
font-family: var(--bill);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
font-size: var(--t-1);
}
.seal-panel .sc-deed {
font-family: var(--serif);
font-style: italic;
font-size: var(--t-0);
opacity: .75;
margin-top: 2px;
}
.seal-panel .sc-reveal {
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid var(--rule);
font-family: var(--serif);
font-size: var(--t-0);
line-height: 1.5;
}
body:not(.motion-low) .seal-panel .sc-reveal {
opacity: 0;
animation: sc-seep .9s ease-out .9s forwards;
}
@keyframes sc-seep { to { opacity: 1; } }
.shelf { gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); }
.book {
--spine: var(--carbon);
border-radius: 0; border: 1px solid var(--edge);
padding: var(--s4) var(--s4) var(--s4) var(--s6);
box-shadow: var(--lift-sm);
background: linear-gradient(90deg, var(--spine) 0 8px, var(--galley) 8px);
min-height: 168px;
}
.book[data-a] { --spine: var(--carbon); }
.book:hover { --spine: var(--signal); transform: none; box-shadow: var(--lift); }
.book:hover .b-title { color: var(--carbon); }
.book:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--edge); }
.book .b-title { font-family: var(--serif); font-size: var(--t-3); font-weight: var(--fw-text); margin: var(--s1) 0 0; }
.book .b-year { font-size: var(--type-meta); color: var(--steel); }
.book .lvl, .gchip, .tag {
border-radius: 0; border: 1px solid var(--edge); background: var(--galley);
font-family: var(--bill); font-size: var(--t-00); letter-spacing: .14em;
text-transform: uppercase; color: var(--carbon); padding: 2px var(--s2);
}
.book .lvl.l1 { border-color: var(--edge); color: var(--carbon); }
.book .ribbon { background: var(--signal); top: 0; width: 10px; height: 26px; }
.issues { gap: var(--s3); }
.issue { padding: var(--s4); box-shadow: var(--lift-sm); }
.issue:hover { border-color: var(--signal-ink); transform: none; box-shadow: var(--lift); }
.issue:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--edge); }
.issue .ti { font-family: var(--serif); font-size: var(--t-2); margin: var(--s1) 0 0; }
.issue .en { font-size: var(--t-0); color: var(--steel); }
.issue .meta { font-size: var(--t-00); color: var(--steel); margin-top: var(--s3);
letter-spacing: .08em; text-transform: uppercase; }
.glist { gap: var(--s3); }
.glesson-card { padding: var(--s3) var(--s4); box-shadow: var(--lift-sm); min-height: 64px; }
.glesson-card:hover { border-color: var(--signal-ink); box-shadow: var(--lift); }
.glesson-card:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--edge); }
.glesson-card .gru { font-family: var(--serif); font-size: var(--t-2); }
.glesson-card .gen2 { font-size: var(--t-0); color: var(--steel); }
.gex { border-left: 5px solid var(--signal); padding: var(--s3) var(--s4); margin: var(--s4) 0; }
.gex .gru-s { font-family: var(--serif); font-size: var(--t-2); line-height: 1.6; }
.gex .gnote { font-size: var(--t-0); color: var(--steel); margin-top: var(--s2); }
.gex .gnote::before { content: '❦ '; color: var(--signal-ink); }
#lesson-body { font-size: var(--t-2); line-height: 1.65; max-width: 34em; }
#lesson-body p { margin: 0 0 var(--s4); }
.gchip { display: inline-block; margin-top: var(--s2); padding: var(--s1) var(--s3); }
#rev-card {
background: var(--sheet); border: 1px solid var(--edge); border-radius: 0;
box-shadow: var(--lift); padding: var(--s7) var(--s6); gap: var(--s3);
}
#rev-card .cloze { font-family: var(--serif); font-size: var(--t-3); line-height: 1.65; }
#rev-card .cloze .blank { color: var(--signal-ink); border-bottom: 2px solid var(--signal); }
#rev-card .opt { font-family: var(--serif); font-size: var(--t-2); }
#rev-card .cloze mark, .ex-main mark, .ex-more mark, .gex .gru-s mark {
background: color-mix(in srgb, var(--signal) 18%, transparent);
border-radius: 0; padding: 0 3px; color: inherit;
}
.produce-gloss { font-size: var(--t-3); }
.reveal-word { font-family: var(--serif); font-size: var(--t-6); font-weight: 600; }
.reveal-word.ok { color: var(--carbon); }
.reveal-word.bad { color: var(--signal-ink); }
.ex-main { font-size: var(--t-2); }
.ex-more { font-size: var(--t-1); border-left: 2px solid var(--rule); padding-left: var(--s3); }
.ex-more:hover { border-left-color: var(--signal); }
.ex-more .ex-en { font-size: var(--t-0); color: var(--steel); }
.more-ex { border-top: 1px solid var(--rule); margin-top: var(--s3); padding-top: var(--s3); }
.rev-btns {
gap: var(--s2); margin-top: var(--s4);
position: sticky; bottom: 0; z-index: 5;
padding: var(--s3) 0 calc(var(--s3) + env(safe-area-inset-bottom, 0px));
background: var(--paper);
box-shadow: 0 -1px 0 var(--rule);
}
.rev-btns .b-again { border-color: var(--signal-ink); color: var(--signal-ink); }
.rev-btns .b-good  { border-color: var(--carbon); color: var(--carbon); }
.conf-row button { min-height: 44px; font-size: var(--t-0); color: var(--steel); }
.quiz-opt {
display: block; width: 100%; text-align: left;
min-height: 44px; padding: var(--s3) var(--s4); margin: var(--s2) 0;
font-size: var(--t-1);
overflow-wrap: normal; word-break: keep-all; hyphens: none;
}
.quiz-opt.right { border-color: var(--carbon); background: var(--carbon); color: var(--galley); }
.quiz-opt.right::before { display: none; }
.quiz-opt.wrong { border-color: var(--signal-ink); color: var(--signal-ink); opacity: 1; background: var(--galley); }
.pat-opts { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin-top: var(--s4); }
.pat-opts .quiz-opt { display: inline-flex; width: auto; margin: 0; font-family: var(--serif); font-size: var(--t-2); }
.pat-why { font-size: var(--t-0); color: var(--steel); margin-top: var(--s4); line-height: 1.6; }
.rail-lab {
font-family: var(--sans); font-size: var(--t-00); letter-spacing: .5em;
color: var(--steel); text-align: center; margin-top: var(--s3);
}
.rail { display: flex; gap: 1px; justify-content: center; margin-top: var(--s1); }
.rail i { display: block; width: 22px; height: 5px; background: var(--case); }
.rail i.met { background: var(--steel); }
.rail i.now { background: var(--signal); }
.tilesrow { gap: var(--s2); margin: var(--s3) 0 var(--s1); }
.ltile {
min-width: 44px; height: 44px; padding: 0 var(--s3);
font-family: var(--serif); font-size: var(--t-3); font-weight: 600;
}
.built {
font-family: var(--serif); font-size: var(--t-5); letter-spacing: .06em;
border-bottom: 2px solid var(--carbon); min-width: 200px; padding: 0 var(--s3);
}
.built.ok  { color: var(--carbon); border-color: var(--carbon); }
.built.bad { color: var(--signal-ink); border-color: var(--signal-ink); }
.rootline { font-size: var(--t-0); color: var(--steel); line-height: 1.6; }
.rootline .rt { color: var(--signal-ink); font-weight: 600; }
.rev-attr { font-size: var(--t-1); color: var(--steel); }
#pop {
background: var(--galley); border: 1px solid var(--edge-hi);
border-radius: 0; box-shadow: var(--lift); padding: var(--s4);
width: 344px;
}
#pop .pw { font-family: var(--serif); font-size: var(--t-5); font-weight: 600; line-height: 1.1; }
#pop .plemma { font-family: var(--sans); font-size: var(--t-0); color: var(--steel); margin: var(--s1) 0 var(--s2); }
#pop .pg { font-size: var(--t-1); line-height: 1.5; }
#pop .pstage {
font-family: var(--bill); font-size: var(--t-00); letter-spacing: .14em;
text-transform: uppercase; color: var(--steel); margin: var(--s2) 0 var(--s3);
}
#pop .row { gap: var(--s2); margin-top: var(--s3); }
#pop .row button, #pop .row a {
min-height: 40px; padding: var(--s2) var(--s3); font-size: var(--t-0);
box-shadow: var(--lift-sm); text-decoration: none;
}
#pop .forms { font-size: var(--t-0); color: var(--steel); margin-top: var(--s3); line-height: 1.7; }
#pop .forms b { color: var(--carbon); }
#pop .sec { border-top: 1px solid var(--rule); margin-top: var(--s3); padding-top: var(--s3); font-size: var(--t-1); }
#pop .kbd-hint { font-size: var(--t-00); color: var(--ink-3p); margin-top: var(--s3); letter-spacing: .06em; }
#pop .close {
top: 0; right: 0; width: 40px; height: 40px; color: var(--steel);
font-size: var(--t-3); line-height: 1; background: none; border: none; box-shadow: none;
}
#pop .close:hover { color: var(--signal-ink); }
.toast {
background: var(--galley); color: var(--carbon);
border: 1px solid var(--edge-hi); border-left: 5px solid var(--signal);
border-radius: 0; box-shadow: var(--lift); padding: var(--s3) var(--s4);
font-size: var(--t-1); max-width: 320px; bottom: 84px; right: var(--s4);
}
.toast .tt {
font-family: var(--bill); font-size: var(--t-0); font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: var(--signal-ink);
margin-bottom: var(--s1); display: block;
}
#tip {
background: var(--carbon); color: var(--galley);
border-radius: 0; padding: var(--s2) var(--s3);
font-size: var(--t-0); line-height: 1.5; max-width: 320px;
}
kbd {
background: var(--case); border: 1px solid var(--edge); border-radius: 0;
padding: 1px var(--s1); font-family: var(--sans); font-size: var(--t-00);
color: var(--carbon);
}
.coach, .margin-mate .m-say, .pop-say, .k-say {
background: var(--carbon); color: var(--galley);
border-radius: 0; box-shadow: none; font-family: var(--serif); font-style: italic;
}
.coach { font-size: var(--t-1); padding: var(--s2) var(--s4); }
.guide .g-bubble, .friend-strip .fr-bubble, #tour-panel .t-bubble {
border-radius: 0; background: var(--galley); border: 1px solid var(--edge);
box-shadow: var(--lift-sm); color: var(--carbon);
}
.guide .g-bubble, .friend-strip .fr-bubble, #tour-panel .t-bubble {
font-family: var(--serif); font-size: var(--t-2); line-height: 1.55;
padding: var(--s3) var(--s4);
}
.guide .g-bubble::before, .friend-strip .fr-bubble::before { border-right-color: var(--edge); }
.guide .g-bubble::after, .friend-strip .fr-bubble::after { border-right-color: var(--galley); }
#tour-panel .t-dots i { border-radius: 0; width: 6px; height: 6px; background: var(--rule); }
#tour-panel .t-dots i.on { background: var(--signal); }
#tour-ring { border-radius: 0; box-shadow: 0 0 0 3px var(--signal), 0 0 0 9999px var(--scrim); }
#tour-mask { background: var(--scrim); backdrop-filter: none; }
#key-panel .k-plate {
text-align: center; margin: 2px 0 14px; padding-bottom: 12px;
border-bottom: 1px solid var(--rule);
}
#key-panel .k-plate .k-orn { display: block; color: var(--carbon); font-size: 19px; line-height: 1; }
#key-panel .k-plate .k-ru {
display: block; font-family: var(--bill); letter-spacing: .2em;
font-size: var(--t-0); color: var(--carbon); margin-top: 6px;
}
#key-panel .k-plate .k-en {
display: block; font-family: var(--serif); font-style: italic;
font-size: var(--t-0); color: var(--steel); margin-top: 2px;
}
.club-line { max-width: 42rem; margin: var(--s6) auto var(--s4);
padding-top: var(--s3); border-top: 1px solid var(--rule);
font-family: var(--serif); font-style: italic;
font-size: var(--t-1); line-height: 1.5; color: var(--steel); }
.club-line a { color: inherit; text-underline-offset: 3px; }
.club-line a:hover { color: var(--bookink, var(--pine)); }
.path { position: relative; max-width: 42rem; margin: 0 auto; }
.path::before { display: none; }
.path > * { position: relative; }
.path-sect { display: block; margin: var(--s8) 0 var(--s3); padding-bottom: var(--s3);
border-bottom: 1px solid var(--carbon); max-width: none; }
.path-sect .s-name { font-family: var(--serif); font-size: var(--t-4); }
.path-sect .s-meta { font-family: var(--bill); font-size: var(--t-00);
letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.path-row, .path-row.has-current { margin: 0; }
.node { transform: none; }
.node-btn {
width: 100%; height: auto; min-height: 0; border-radius: 0;
display: grid; grid-template-columns: 3.4rem minmax(0, auto) 1fr auto;
align-items: baseline; gap: .35rem .75rem;
padding: .8rem 0; background: transparent; color: var(--carbon);
border: none; border-bottom: 1px solid var(--rule); box-shadow: none; font-size: inherit;
}
.node-btn::after { display: none; }
.node-btn:hover { transform: none; box-shadow: none; color: var(--carbon); }
.node-btn:active { transform: none; box-shadow: none; }
.node-btn .n-no {
position: static; left: auto; bottom: auto;
font-family: var(--mono); font-style: normal; font-weight: 400;
font-size: var(--t-00); color: var(--steel);
}
.node.current .node-btn .n-no, .node.done .node-btn .n-no { color: inherit; }
.node.done .node-btn    { --nc: transparent; color: var(--steel); background: transparent; }
.node.current .node-btn { --nc: transparent; color: var(--carbon);
width: 100%; height: auto; font-size: inherit; border-color: transparent;
border-bottom: 1px solid var(--carbon); background: transparent; }
.node.locked .node-btn  { --nc: transparent; color: var(--steel); box-shadow: none; }
.node.next-up .node-btn { --nc: transparent; color: var(--carbon); }
.node.reward .node-btn  { --nc: transparent; color: var(--carbon); }
.node .bubble, .node .halo, .node-mate, .node .ring-pulse, .node .n-label { display: none; }
.node-btn:hover { border-bottom-color: var(--carbon); }
.node-btn:hover .n-no { color: var(--carbon); }
@media (max-width: 520px) {
.node-btn { grid-template-columns: 2.8rem 1fr auto; }
.node-btn .n-lead { display: none; }
}
.meter.grew > i.retr::after, .rev-sweep { display: none; }
.scene-head { margin: var(--s4) 0 var(--s5); }
.scene-head h2 { font-size: var(--t-6); margin: var(--s3) 0 var(--s1); }
.scene-head .sub { font-family: var(--serif); font-style: italic; color: var(--steel); font-size: var(--t-2); }
.scene-head .orn { color: var(--signal-ink); font-size: var(--t-3); margin-top: var(--s3); }
.divider { color: var(--signal-ink); margin: var(--s8) 0; }
#readbar { background: var(--galley); border-top: 2px solid var(--carbon); }
#readbar .inner { padding: var(--s2) var(--s3); gap: var(--s2); }
#readbar .fill { background: var(--signal); height: 3px; }
#readbar .left-note { font-size: var(--t-0); color: inherit; opacity: .72; }
@media (min-width: 561px) {
#readbar .inner { max-width: min(1080px, 100%); }
#readbar .left-note { flex: 1 1 0; min-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
}
.tr-para {
font-family: var(--sans); font-size: var(--t-0); line-height: 1.5;
color: var(--steel); border-left: 2px solid var(--rule); padding-left: var(--s3);
}
.tr-reveal {
border-radius: 0; border-left: 5px solid var(--signal);
font-size: var(--t-1); padding: var(--s3) var(--s4);
}
.read-on {
clip-path: none; box-shadow: var(--lift-sm);
font-family: var(--bill); font-size: var(--t-0); letter-spacing: .14em;
text-transform: uppercase; color: var(--signal-ink); border-color: var(--signal);
min-height: 40px; padding: 0 var(--s3);
}
.read-on:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--edge); }
.ticket { border-radius: 0; border: 2px solid var(--carbon); padding: var(--s5); }
.ticket::before { inset: 5px; border: 1px solid var(--carbon); border-radius: 0; }
.ticket .tk-head { font-family: var(--bill); letter-spacing: .3em; font-size: var(--t-00); color: var(--steel); }
.ticket .tk-name { font-family: var(--serif); font-size: var(--t-4); margin: var(--s2) 0 var(--s1); }
.ticket .tk-sub { font-size: var(--t-0); color: var(--steel); }
.exlibris {
width: 88px; height: 88px; border-radius: 0; border: 1px solid var(--edge);
background: var(--galley); box-shadow: var(--lift-sm); gap: 2px;
}
.exlibris:hover { transform: none; border-color: var(--signal-ink); box-shadow: var(--lift); }
.exlibris.sel { border-color: var(--signal); box-shadow: inset 0 0 0 2px var(--signal); }
.exlibris .xl-cap { font-family: var(--bill); font-size: var(--t-00); letter-spacing: .2em; color: var(--steel); }
.exlibris { cursor: pointer; background: var(--case); }
.exlibris.sel { background: var(--sheet); }
.exlibris .xl-fig { width: 52px; height: 52px; margin: 2px auto 0; pointer-events: none; }
.exlibris .xl-fig svg { width: 100%; height: 100%; overflow: visible; display: block; }
.exlibris .xl-mono { font-family: var(--serif); font-weight: var(--fw-text); font-size: var(--t-0); letter-spacing: .06em; }
.exlibris .xl-mono:empty { display: none; }
.cer-host { width: 66px; height: 66px; margin: 2px auto 6px; }
.cer-host svg { width: 100%; height: 100%; overflow: visible; display: block; }
.cer-stamped .stamp { width: 64px; height: 64px; }
.ticket .tk-seal .stamp { width: 64%; height: 64%; }
.ticket .tk-mark .stamp { width: 1.35em; height: 1.35em; vertical-align: -.3em; }
.manifesto { font-size: var(--t-2); line-height: 1.7; }
.manifesto .rule-orn { color: var(--signal-ink); }
.found-object { border: 1px solid var(--edge); border-radius: 0; transform: none; background: var(--galley); }
.squint-hint, .almanac { font-size: var(--t-00); }
.squint-hint {
border-radius: 0; background: var(--galley); border: 1px solid var(--edge);
color: var(--steel); letter-spacing: .14em; padding: var(--s1) var(--s3);
}
.frost { background: var(--galley) !important; border-color: var(--rule) !important; }
.frost::after { color: var(--steel); }
.k-lede { font-size: var(--t-1); line-height: 1.6; color: var(--steel); margin: 0 0 var(--s4); }
.k-social { display: grid; gap: var(--s2); margin: 0 0 var(--s4); }
.k-social[hidden], .k-oauth[hidden] { display: none !important; }
.k-oauth {
display: flex; align-items: center; justify-content: center; gap: 10px;
min-height: 46px; width: 100%; cursor: pointer;
border: 1px solid var(--carbon); border-radius: 2px;
background: var(--sheet); color: var(--carbon);
font-family: var(--sans); font-size: var(--t-1); font-weight: 600;
}
.k-oauth:hover { background: var(--galley); }
.k-oauth svg { flex: none; }
.k-or {
display: flex; align-items: center; gap: var(--s3);
margin-top: var(--s2); color: var(--steel);
font-family: var(--serif); font-style: italic; font-size: var(--t-0);
}
.k-or::before, .k-or::after { content: ''; flex: 1; border-top: 1px solid var(--rule); }
.k-sent { font-size: var(--t-1); line-height: 1.6; }
.k-err {
font-size: var(--t-0); color: var(--signal-ink); background: var(--galley);
border: 1px solid var(--signal); padding: var(--s2) var(--s3); margin: var(--s3) 0;
}
.k-rows { list-style: none; padding: 0; margin: var(--s4) 0; }
.k-rows li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); font-size: var(--t-1); }
.k-alt { display: flex; flex-direction: column; align-items: flex-start; margin-top: var(--s3); }
.sub-manage { border: 1px solid var(--rule); padding: var(--s4); margin: var(--s4) 0; }
.sub-manage .sm-head { font-family: var(--sans); font-size: var(--t-00); letter-spacing: .14em;
text-transform: uppercase; color: var(--steel); margin-bottom: var(--s2); }
.sub-manage .sm-confirm { margin-top: var(--s3); border-top: 1px solid var(--rule); padding-top: var(--s3); }
.sub-manage .sm-confirm p { font-size: var(--t-0); line-height: 1.55; margin: 0 0 var(--s2); }
.k-danger {
background: none; border: 1px solid var(--signal); color: var(--signal-ink);
font-family: var(--sans); font-size: var(--t-0); min-height: 44px;
padding: 0 var(--s4); cursor: pointer; border-radius: 0;
}
.k-danger:hover { background: var(--signal); color: var(--on-signal); }
.plans { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.plan {
display: flex; flex-direction: column; gap: var(--s1); text-align: left;
padding: var(--s4); min-height: 44px; cursor: pointer; border-radius: 0;
background: var(--galley); border: 1px solid var(--edge); box-shadow: var(--lift-sm);
}
.plan:hover { border-color: var(--signal-ink); box-shadow: var(--lift); }
.plan .p-amt { font-size: var(--t-4); font-weight: 700; line-height: 1; }
.plan .p-per { font-size: var(--t-0); color: var(--steel); }
.plan .p-note {
font-family: var(--bill); font-size: var(--t-00); letter-spacing: .14em;
text-transform: uppercase; color: var(--signal-ink); margin-top: var(--s1);
}
.plan.best .p-per, .plan.best .p-note { color: var(--on-signal); }
.cer-keep { border-top: 1px solid var(--rule); margin-top: var(--s4); padding-top: var(--s4); font-size: var(--t-0); }
@media (max-width: 900px) {
header .bar .brand.wordmark { display: none; }
.bar { gap: var(--s1); padding: 0 var(--s2); }
.nav-tabs {
flex: 1 1 auto; min-width: 0; overflow-x: auto;
scrollbar-width: none; -ms-overflow-style: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs button { padding: 0 var(--s2); font-size: var(--t-0); }
.theme-dots, #btn-settings { flex: none; }
}
@media (max-width: 640px) {
:root { --pad-x: 16px; --pad-y: 16px; }
.view { padding: var(--s5) var(--s3) clamp(96px, 16vh, 180px); }
.theme-dots button { width: 44px; }
h1, .as-h1 { font-size: var(--t-6); }
h2 { font-size: var(--t-4); }
.frontier-card .fr-n { font-size: var(--t-6); }
.tiles { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.shelf { grid-template-columns: 1fr; }
.filters input { margin-left: 0; width: 100%; min-width: 0; }
.set-row { flex-wrap: wrap; }
.set-row select, .set-row input[type="text"] { min-width: 0; width: 100%; }
.overlay { padding: var(--s3); }
.overlay .panel { max-height: 92vh; }
#pop { width: auto; left: var(--s2) !important; right: var(--s2);
max-width: calc(100vw - var(--s4)); }
.toast { left: var(--s3); right: var(--s3); max-width: none; }
#wordlist li { flex-wrap: wrap; gap: var(--s2); }
#wordlist .wf { min-width: 0; flex: 1 1 100%; }
.rev-btns button, .btn { flex: 1 1 auto; }
}
#gift-plate {
border: 2px solid var(--carbon); background: var(--sheet);
padding: 10px 14px 12px; margin: 0 0 18px; position: relative;
}
#gift-plate::before {
content: ''; position: absolute; inset: 3px;
border: 1px solid var(--carbon); pointer-events: none;
}
#v-review[data-act="close"] #rev-note { color: var(--carbon); font-family: var(--serif); font-style: italic; }
#v-review[data-act="open"] #rev-card { --rev-depth: 3px; }
#v-review[data-act="mid"] #rev-card { --rev-depth: 6px; }
#v-review[data-act="close"] #rev-card { --rev-depth: 8px; }
.rev-head, #v-review #btn-rev-exit {
transition: opacity 1100ms var(--e-std), filter 1100ms var(--e-std);
}
#v-review[data-mood="focus"] .rev-head,
#v-review[data-mood="focus"] #btn-rev-exit { opacity: .45; filter: blur(.6px); }
#v-review[data-mood="steady"] .rev-head { opacity: .7; }
#rev-card { transition: background 380ms var(--e-std); }
#v-review[data-mood="steady"] #rev-card { --rev-depth: 4px; }
#wordlist .wl-cap {
display: flex; flex-wrap:wrap; gap:6px 16px; justify-content: space-between; align-items: baseline;
border: none;
padding: 7px 14px; margin-top: 0;
font: var(--fw-strong) var(--t-00)/1.5 var(--sans); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
color: var(--steel);
}
#wordlist .wl-cap:first-child { margin-top: 0; }
#wordlist .wl-cap .wl-cap-t { font-weight: var(--fw-strong); color: var(--carbon); }
#wordlist .wl-cap .wl-cap-n {
font-family: var(--sans); font-size: var(--type-meta); color: var(--steel);
font-variant-numeric: tabular-nums;
}
#wordlist li.wl-warm .wf { opacity: calc(.62 + .38 * var(--w, 1)); }
@media (prefers-reduced-motion: no-preference) {
#wordlist.wl-drawer { animation: wl-drawer .26s var(--e-std, ease) both; }
@keyframes wl-drawer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
body:not(.motion-low) #nav-profile.key-just {
animation: key-home calc(.4s * var(--motion, 1)) var(--e-std, ease) both;
}
@keyframes key-home { from { transform: translateX(4px); } to { transform: none; } }
#tour-panel { width: min(660px, calc(100vw - 32px)); }
#tour-panel .t-who { width: 78px; height: 78px; }
#tour-panel .t-bubble {
font-size: var(--t-2); line-height: 1.6; padding: 18px 20px 13px;
border-left: 5px solid var(--signal);
border-radius: 4px 16px 16px 4px;
}
#tour-panel .t-next { font-size: var(--t-00); }
#tour-panel .t-dots i { width: 8px; height: 8px; }
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) #tour:not([hidden]) #tour-panel {
animation: tour-lay 420ms var(--e-std, ease) both;
}
@keyframes tour-lay { from { opacity: 0; transform: translateX(-50%) translateY(18px); }
to   { opacity: 1; transform: translateX(-50%); } }
}
#rev-card .rev-more { margin-top: var(--s3); text-align: left; }
#rev-card .rev-more summary {
cursor: pointer; list-style: none;
font-family: var(--sans); font-size: var(--t-00); letter-spacing: .08em;
text-transform: uppercase; color: var(--steel);
}
#rev-card .rev-more summary::-webkit-details-marker { display: none; }
#rev-card .rev-more summary::after { content: ' ▸'; }
#rev-card .rev-more[open] summary::after { content: ' ▾'; }
#rev-card .still-row { margin-top: var(--s4); }
#rev-card .still-chip {
display: inline-block; margin: 6px 4px 0 0; padding: 3px 12px;
border: 1px solid var(--line); border-radius: 999px; background: var(--sheet);
font-family: var(--serif); font-size: var(--t-0); color: var(--carbon);
cursor: pointer;
}
#rev-card .still-chip:hover { border-color: var(--carbon); }
#rev-card { border-top: 4px solid var(--ink, var(--carbon)); position: relative; }
#rev-card .rev-home {
position: absolute; top: 8px; right: 12px;
font-family: var(--serif); font-style: italic; font-size: var(--t-00);
color: var(--ink, var(--carbon)); opacity: .8; pointer-events: none;
}
[data-theme="dark"] #rev-card .rev-home {
color: color-mix(in srgb, var(--ink, var(--carbon)) 40%, var(--carbon));
}
.fin-plate { max-width: 560px; margin: 22px auto 0; text-align: left; }
.fin-plate .fin-fact { font-family: var(--serif); font-size: var(--t-2); line-height: 1.5;
margin: 8px 0 2px; }
.fin-plate .btnrow { margin-top: 12px; }
#locked-panel .lc-line { margin-top: 6px; color: var(--faint); }
#locked-panel .lc-desc { max-width: 44ch; margin-left: auto; margin-right: auto; }
#v-course .cs-lede {
font-family: var(--serif); font-size: var(--t-2); line-height: 1.55;
color: var(--steel); max-width: 62ch; margin: 10px 0 0;
}
#v-course section { margin: 34px 0 0; }
#v-course .cs-note {
font-family: var(--serif); color: var(--steel);
font-size: var(--t-1); max-width: 68ch; margin: 12px 0 18px;
}
#v-course .cs-group { margin: 22px 0 0; }
#v-course .cs-group h3 {
font-family: var(--bill); text-transform: uppercase; letter-spacing: .1em;
font-size: var(--t-2); margin: 0 0 4px;
}
#v-course .cs-letters {
display: grid; gap: 1px;
grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
background: var(--rule); border: 1px solid var(--carbon);
}
#v-course .cs-letter {
background: var(--galley); padding: 10px 12px;
display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline;
}
#v-course .cs-c {
grid-row: 1 / 3; font-family: var(--serif); font-size: var(--t-5);
line-height: 1; color: var(--carbon);
}
#v-course .cs-say { font-family: var(--sans); font-weight: 600; font-size: var(--t-1); }
#v-course .cs-lnote { font-size: var(--t-00); color: var(--steel); line-height: 1.4; }
#v-course .cs-trap .cs-letter { border-left: 3px solid var(--signal); }
#v-course .cs-trap .cs-c { color: var(--signal-ink); }
#v-course .cs-gram {
background: var(--galley); border: 1px solid var(--carbon);
padding: 16px 18px; margin: 0 0 26px;
}
#v-course .cs-gram-lede {
font-family: var(--serif); font-size: var(--t-1); color: var(--steel);
max-width: 62ch; margin-bottom: 12px;
}
#v-course .cs-lesson {
display: block; width: 100%; text-align: left; cursor: pointer;
background: var(--sheet); border: 1px solid var(--rule); border-radius: 0;
padding: 10px 14px; margin: 0 0 -1px; font-family: inherit; color: inherit;
}
#v-course .cs-lesson:hover { border-color: var(--carbon); }
#v-course .cs-lesson:focus-visible { outline: 2px solid var(--signal); outline-offset: -3px; }
#v-course .cs-lesson b { display: block; font-family: var(--sans); font-weight: 600; font-size: var(--t-1); }
#v-course .cs-lesson i {
font-style: normal; font-family: var(--serif); font-size: var(--t-0); color: var(--steel);
}
@media (prefers-reduced-motion: no-preference) {
@keyframes cs-letter-in {
from { transform: translateY(10px); opacity: 0; }
to   { transform: none; opacity: 1; }
}
#v-course .cs-letter {
animation: cs-letter-in linear both;
animation-timeline: view();
animation-range: entry 4% entry 44%;
}
@keyframes cs-warn {
from { border-left-color: var(--signal); background: var(--sheet); }
to   { border-left-color: var(--signal); background: var(--galley); }
}
#v-course .cs-trap .cs-letter {
animation: cs-letter-in linear both, cs-warn linear both;
animation-timeline: view(), view();
animation-range: entry 4% entry 44%, entry 30% entry 90%;
}
}
#v-course ol.rd::before { background: var(--play-tint); }
#v-course .rd-here .rd-vol {
background: var(--play);
box-shadow: inset 8px 0 0 var(--play-deep), 0 2px 0 var(--press);
}
#v-course .rd-here .rd-vol b {
mix-blend-mode: normal;
filter: none;
color: var(--on-play);
}
#v-course .rd-m-dot {
background: var(--play);
color: var(--on-play);
}
.gx { display: grid; gap: 18px; }
.gx-top { display: flex; align-items: center; justify-content: space-between; }
.gx-step {
font-family: var(--sans); font-variant-numeric: tabular-nums;
font-size: var(--t-00); letter-spacing: .16em; color: var(--steel);
}
.gx-quit {
background: none; border: 0; cursor: pointer; padding: 4px 0;
font: var(--fw-strong) var(--type-meta)/1.25 var(--sans); color: var(--steel);
}
.gx-quit:hover { color: var(--carbon); }
.gx-ask {
font-family: var(--bill); text-transform: uppercase; letter-spacing: .12em;
font-size: var(--t-1); color: var(--carbon);
}
.gx-word { font-family: var(--serif); font-size: clamp(30px, 6vw, 46px); line-height: 1.1; }
.gx-gloss { font-family: var(--serif); font-size: var(--t-4); line-height: 1.3; }
.gx-en { font-family: var(--serif); font-style: italic; font-size: var(--t-3); color: var(--steel); }
.gx-line { font-family: var(--serif); font-size: var(--t-3); line-height: 1.5; }
.gx-blank {
display: inline-block; min-width: 4.5em; text-align: center;
color: var(--signal-ink); border-bottom: 2px solid var(--signal);
}
.gx-say {
font-family: var(--sans); font-size: var(--t-2); cursor: pointer;
background: var(--galley); border: 1px solid var(--carbon); border-radius: 0;
padding: 10px 20px; color: inherit;
}
.gx-opts { display: grid; gap: 8px; }
.gx-opt {
font-family: var(--serif); font-size: var(--t-2); text-align: left;
background: var(--galley); border: 1px solid var(--carbon); border-radius: 0;
padding: 12px 16px; cursor: pointer; color: inherit;
transition: background 120ms linear;
overflow-wrap: normal; word-break: keep-all; hyphens: none; min-width: 0;
}
.gx-opt.gx-snug { font-size: .84em; }
.gx-opt.gx-snugger { font-size: .7em; letter-spacing: -0.01em; }
.gx-pw.gx-snug, .gx-pg.gx-snug { font-size: .84em; }
.gx-pw.gx-snugger, .gx-pg.gx-snugger { font-size: .72em; }
.gx-opt:hover:not(:disabled) { background: var(--sheet); }
.gx-opt:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.gx-opt:disabled { opacity: .5; cursor: default; }
.gx-right { background: var(--malachite) !important; color: var(--on-malachite) !important; border-color: var(--malachite) !important; opacity: 1 !important; }
.gx-wrong { border-color: var(--signal); color: var(--signal-ink); opacity: 1 !important; }
.gx-input {
font-family: var(--serif); font-size: var(--t-4); width: 100%;
background: var(--sheet); border: 1px solid var(--carbon); border-radius: 0;
padding: 12px 14px; color: var(--carbon);
}
.gx-input:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.gx-stick {
min-height: 54px; background: var(--sheet); border: 1px solid var(--carbon);
padding: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.gx-stick-empty { font-size: var(--t-0); color: var(--steel); letter-spacing: .08em; }
.gx-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gx-tile, .gx-set {
font-family: var(--serif); font-size: var(--t-2); cursor: pointer;
background: var(--galley); border: 1px solid var(--carbon); border-radius: 0;
padding: 7px 13px; color: inherit;
}
.gx-set { background: var(--carbon); color: var(--sheet); }
.gx-tile:disabled { opacity: .28; cursor: default; }
.gx-verdict { font-family: var(--bill); text-transform: uppercase;
letter-spacing: .12em; font-size: var(--t-1); }
.gx-verdict .gx-reveal { text-transform: none; letter-spacing: .02em; }
.gx-ok { color: var(--carbon); }
.gx-no { color: var(--signal-ink); }
.gx-src {
font-family: var(--serif); font-size: var(--t-2); line-height: 1.5;
border-left: 3px solid var(--carbon); padding-left: 14px; margin: 12px 0;
}
.gx-src > .gx-src-en { display: block; font-style: italic; font-size: var(--t-1); color: var(--steel); margin-top: 4px; }
.gx-after { display: grid; gap: 10px; }
.gx-done .gx-ask { font-size: var(--t-5); letter-spacing: .04em; }
.gx-topic {
font-family: var(--bill); text-transform: uppercase; letter-spacing: .14em;
font-size: var(--t-00); color: var(--ink, var(--carbon));
}
.gx-rail { display: flex; gap: 3px; }
.gx-rail i {
flex: 1; height: 4px; display: block;
background: color-mix(in srgb, var(--ink, var(--carbon)) 16%, var(--rule));
transition: background 260ms linear;
}
.gx-rail .gx-r-done { background: var(--ink, var(--carbon)); }
.gx-rail .gx-r-now  { background: var(--signal); }
.gx .gx-ask { color: var(--ink, var(--carbon)); }
.gx .gx-opt:hover:not(:disabled) { border-color: var(--ink, var(--carbon)); }
.gx .gx-right { background: var(--malachite) !important; border-color: var(--malachite); }
.gx .gx-src { border-left-color: var(--ink, var(--carbon)); }
.gx .gx-set { background: var(--ink, var(--carbon)); }
@keyframes gx-in { from { transform: translateX(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
.gx-ask, .gx-head, .gx-body { animation: gx-in 220ms var(--e-std, ease) both; }
.gx-head { animation-delay: 40ms; }
.gx-body { animation-delay: 80ms; }
@media (prefers-reduced-motion: reduce) {
.gx-ask, .gx-head, .gx-body { animation: none; }
}
.gx-head .gx-mute {
margin-top: .45rem;
font-size: var(--t-00);
line-height: 1.35;
color: inherit;
opacity: .72;
}
.gx-head .gx-mute b { font-weight: 600; opacity: 1; }
.gx-print {
background: var(--sheet); border: 1px solid var(--carbon);
box-shadow: none;
padding: 26px 24px; text-align: center;
animation: gx-strike 560ms var(--e-snap, cubic-bezier(.2,.9,.3,1.2)) both;
}
@keyframes gx-strike {
0%   { transform: scale(1.04); box-shadow: 0 0 0 var(--ink, var(--carbon)); }
46%  { transform: scale(.985); }
100% { transform: scale(1); box-shadow: 6px 6px 0 var(--ink, var(--carbon)); }
}
.gx-print-ru {
font-family: var(--serif); font-size: clamp(20px, 3.6vw, 30px); line-height: 1.35;
color: var(--carbon);
animation: gx-ink 620ms 180ms var(--e-std, ease) both;
}
@keyframes gx-ink { from { opacity: 0; letter-spacing: .06em; } to { opacity: 1; letter-spacing: 0; } }
.gx-print-en {
font-family: var(--serif); font-style: italic; font-size: var(--t-1);
color: var(--steel); margin-top: 8px;
}
.gx-tally {
font-family: var(--sans); font-weight: 200; font-variant-numeric: tabular-nums;
font-size: clamp(26px, 4vw, 38px); color: var(--carbon);
}
@media (prefers-reduced-motion: reduce) {
.gx-print, .gx-print-ru { animation: none; }
}
body.gx-on { overflow: hidden; }
.gx-stage {
position: fixed; inset: 0; z-index: 240;
background: var(--room);
display: grid; justify-items: center; align-content: start;
padding: clamp(24px, 9vh, 88px) 24px 40px;
overflow-y: auto;
transition: opacity 220ms var(--e-std, ease), transform 260ms var(--e-std, ease);
}
.gx-stage::before {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
background: var(--ink, var(--carbon));
transform-origin: 0 50%;
animation: gx-band 420ms var(--e-std, ease) both;
}
@keyframes gx-band { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.gx-stage::after {
content: attr(data-orn);
position: fixed; right: -3vmin; bottom: -7vmin;
font-size: clamp(180px, 38vmin, 400px); line-height: 1;
color: var(--ink, var(--carbon)); opacity: .055;
pointer-events: none; user-select: none;
transform: rotate(-8deg);
}
[data-theme="dark"] .gx-stage::after { opacity: .08; }
.gx-entering { opacity: 0; transform: scale(.985); }
.gx-leaving  { opacity: 0; transform: scale(1.01); }
.gx-stage .gx {
width: min(760px, 100%);
display: grid; gap: 26px;
align-content: start;
background: var(--galley);
border: 1px solid var(--carbon);
box-shadow: 0 3px 6px color-mix(in srgb, var(--ink, var(--carbon)) 18%, transparent),
0 18px 40px -16px color-mix(in srgb, var(--ink, var(--carbon)) 55%, transparent),
var(--heatglow, 0 0 0 transparent);
padding: clamp(22px, 4vw, 48px);
transition: box-shadow .7s ease;
}
.gx-stage[data-heat="1"] .gx {
--heatglow: 0 0 22px -6px color-mix(in srgb, var(--ink, var(--carbon)) 35%, transparent);
}
.gx-stage[data-heat="2"] .gx {
--heatglow: 0 0 30px -4px color-mix(in srgb, var(--ink, var(--carbon)) 55%, transparent);
border-color: color-mix(in srgb, var(--ink, var(--carbon)) 70%, var(--carbon));
}
.gx-stage[data-heat="3"] .gx {
--heatglow: 0 0 40px -2px color-mix(in srgb, var(--ink, var(--carbon)) 70%, transparent),
0 0 80px -20px color-mix(in srgb, var(--signal) 60%, transparent);
border-color: var(--signal);
}
.gx-stage .gx-bloom { z-index: -1; }
.gx-stage .gx-mate { z-index: 2; }
.gx-top {
display: flex; gap: 16px; align-items: baseline;
}
.gx-top .gx-topic { flex: 1; min-width: 0; }
.gx-count {
font-family: var(--sans); font-variant-numeric: tabular-nums;
font-size: var(--t-00); letter-spacing: .16em; color: var(--steel);
}
.gx-chbar {
height: 3px; margin-top: 5px;
background: color-mix(in srgb, var(--rule, #ccc) 60%, transparent);
overflow: hidden;
}
.gx-chbar i {
display: block; height: 100%;
background: color-mix(in srgb, var(--ink, var(--carbon)) 70%, transparent);
transition: width 700ms var(--e-std, ease);
}
.gx-chbar.gx-chbar-near i {
background: linear-gradient(90deg,
color-mix(in srgb, var(--ink, var(--carbon)) 70%, transparent),
var(--signal));
}
body.motion-full .gx-chbar.gx-chbar-near i { animation: gx-seal-breathe 2.6s ease-in-out infinite; }
@keyframes gx-seal-breathe {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.35); }
}
.gx-endow {
font-family: var(--serif); font-style: italic;
font-size: var(--t-0); color: var(--steel);
margin: 10px 0 0;
}
.gx-endow b { color: var(--carbon); font-style: normal; }
.gx-chbar-say {
margin-top: 4px; text-align: right;
font-family: var(--sans); font-size: .7rem;
letter-spacing: .09em; text-transform: uppercase; color: var(--steel);
}
.gx-src.gx-src-fine { font-size: 1.12em; }
.gx-clean {
font-family: var(--serif); font-style: italic;
color: var(--signal-ink, var(--signal)); margin: 2px 0 0;
}
.gx-clean b { font-style: normal; font-variant-numeric: tabular-nums; }
.gx-night {
margin-top: 14px; padding-top: 12px;
border-top: 1px solid color-mix(in srgb, var(--carbon) 14%, transparent);
display: grid; gap: 8px;
animation: gx-night-in .5s ease .35s both;
}
@keyframes gx-night-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gx-page {
display: flex; align-items: center; gap: 10px;
font-family: var(--sans); font-size: var(--t-00); letter-spacing: .08em; color: var(--steel);
}
.gx-page-lab { text-transform: uppercase; letter-spacing: .16em; white-space: nowrap; }
.gx-page-bar {
flex: 1; height: 4px; min-width: 60px;
background: color-mix(in srgb, var(--carbon) 12%, transparent);
overflow: hidden;
}
.gx-page-bar i {
display: block; height: 100%;
background: var(--ink, var(--signal));
transition: width .6s cubic-bezier(.22, 1, .36, 1);
}
body.motion-full .gx-page-bar i { animation: gx-bar-grow .9s cubic-bezier(.22, 1, .36, 1) .3s both; }
@keyframes gx-bar-grow { from { width: 0; } }
.gx-page-done .gx-page-bar i { background: var(--signal); }
.gx-page-done .gx-page-n { color: var(--signal-ink, var(--signal)); font-weight: 600; }
.gx-page-n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gx-lamp {
font-family: var(--serif); font-size: var(--t-0); color: var(--ink-1, var(--carbon));
}
.gx-lamp b { font-variant-numeric: tabular-nums; }
.gx-flame {
font-style: normal; color: var(--signal);
display: inline-block; margin-right: 4px;
}
body.motion-full .gx-flame { animation: gx-flame-sway 2.6s ease-in-out infinite; }
@keyframes gx-flame-sway {
0%, 100% { transform: rotate(-6deg) scale(1); opacity: .85; }
50% { transform: rotate(6deg) scale(1.12); opacity: 1; }
}
.gx-lamp-gold {
color: var(--gold-leaf, #a5842c); font-size: var(--t-1);
}
.gx-bridge { font-size: .8em; color: var(--steel); }
body.motion-full .gx-lamp-gold .gx-flame { animation: gx-flame-crown 1.8s ease .8s both; }
@keyframes gx-flame-crown {
0% { transform: scale(1); text-shadow: none; }
40% { transform: scale(1.7) rotate(-8deg);
text-shadow: 0 0 18px color-mix(in srgb, var(--gold-leaf, #b8860b) 90%, transparent),
0 0 36px color-mix(in srgb, var(--gold-leaf, #b8860b) 45%, transparent); }
100% { transform: scale(1.2);
text-shadow: 0 0 9px color-mix(in srgb, var(--gold-leaf, #b8860b) 50%, transparent); }
}
.gx-glint { position: relative; overflow: hidden; }
.gx-glint::after {
content: ''; position: absolute; top: 0; bottom: 0; width: 55%; left: -70%;
background: linear-gradient(105deg, transparent,
color-mix(in srgb, var(--gold-leaf, #b8860b) 26%, transparent), transparent);
pointer-events: none;
animation: gx-glint-sweep 1.1s cubic-bezier(.4, 0, .2, 1) .1s both;
}
@keyframes gx-glint-sweep { to { left: 125%; } }
body.motion-full .gx-clean { animation: gx-stamp-in .55s cubic-bezier(.2, 1.4, .4, 1) .5s both; }
@keyframes gx-stamp-in {
from { transform: scale(1.7) rotate(-4deg); opacity: 0; }
60% { transform: scale(.94) rotate(1deg); opacity: 1; }
to { transform: none; opacity: 1; }
}
.gx-topic { font-size: var(--t-0); letter-spacing: .18em; }
.gx-stage .gx-ask { font-size: var(--t-3); letter-spacing: .1em; }
.gx-stage .gx-word {
font-size: clamp(44px, 8vw, 76px);
color: color-mix(in srgb, var(--ink, var(--carbon)) 72%, var(--carbon));
}
.gx-stage .gx-gloss { font-size: clamp(24px, 3.6vw, 34px); }
.gx-stage .gx-line { font-size: clamp(22px, 3.2vw, 30px); line-height: 1.5; }
.gx-stage .gx-en { font-size: clamp(20px, 3vw, 26px); }
.gx-stage .gx-opt { font-size: var(--t-3); padding: 16px 20px; }
.gx-stage .gx-input { font-size: clamp(26px, 4vw, 36px); padding: 16px 18px; }
.gx-stage .gx-tile, .gx-stage .gx-set { font-size: var(--t-3); padding: 10px 16px; }
.gx-stage .gx-say { font-size: var(--t-3); padding: 16px 30px; }
.gx-stage .gx-rail i { height: 6px; }
.gx-mid { display: grid; gap: 22px; }
@media (prefers-reduced-motion: no-preference) {
.gx-mid { animation: gx-turn 300ms var(--e-std, ease) both; }
@keyframes gx-turn {
from { opacity: 0; transform: translateX(-22px); }
to   { opacity: 1; transform: none; }
}
@keyframes gx-in-drop  { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
@keyframes gx-in-slide { from { opacity: 0; transform: translateX(26px); }  to { opacity: 1; transform: none; } }
@keyframes gx-in-open  { from { opacity: 0; transform: scale(.94); }        to { opacity: 1; transform: none; } }
@keyframes gx-in-lay   { from { opacity: 0; transform: perspective(900px) rotateX(14deg) translateY(-10px); }
to   { opacity: 1; transform: none; } }
@keyframes gx-in-rise  { from { opacity: 0; transform: translateY(22px); }  to { opacity: 1; transform: none; } }
@keyframes gx-in-ink { from { opacity: 0; filter: blur(4px); transform: translateY(6px); }
to   { opacity: 1; filter: blur(0);   transform: none; } }
.gx-mid[data-kind="meaning"] { animation-name: gx-in-ink; animation-duration: 300ms; }
.gx-mid[data-kind="word"]    { animation-name: gx-in-drop; animation-duration: 260ms; }
.gx-mid[data-kind="gap"]     { animation-name: gx-in-slide; }
.gx-mid[data-kind="listen"]  { animation-name: gx-in-open; animation-duration: 340ms; }
.gx-mid[data-kind="order"]   { animation-name: gx-in-lay; animation-duration: 320ms; transform-origin: 50% 0; }
.gx-mid[data-kind="write"]   { animation-name: gx-in-rise; }
.gx-mid[data-kind="stress"]  { animation-name: gx-in-drop; animation-duration: 280ms; }
.gx-mid[data-kind="form"]    { animation-name: gx-in-slide; }
.gx-mid[data-kind="pairs"]   { animation-name: gx-in-rise; animation-duration: 300ms; }
.gx-mid[data-kind="hearline"]{ animation-name: gx-in-open; animation-duration: 340ms; }
@keyframes gx-opt-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.gx-stage .gx-opts .gx-opt,
.gx-stage .gx-tiles .gx-tile,
.gx-stage .gx-pcol > * {
animation: gx-opt-in 200ms var(--e-std, ease) both;
}
.gx-stage :is(.gx-opts, .gx-tiles, .gx-pcol) > :nth-child(2) { animation-delay: 45ms; }
.gx-stage :is(.gx-opts, .gx-tiles, .gx-pcol) > :nth-child(3) { animation-delay: 90ms; }
.gx-stage :is(.gx-opts, .gx-tiles, .gx-pcol) > :nth-child(4) { animation-delay: 135ms; }
.gx-stage :is(.gx-opts, .gx-tiles, .gx-pcol) > :nth-child(5) { animation-delay: 180ms; }
.gx-stage :is(.gx-opts, .gx-tiles, .gx-pcol) > :nth-child(n+6) { animation-delay: 220ms; }
@keyframes gx-rail-sweep {
0% { filter: brightness(1); } 45% { filter: brightness(1.6); } 100% { filter: brightness(1); }
}
.gx-rail-half .gx-r-done { animation: gx-rail-sweep 500ms var(--e-std, ease) both; }
.gx-rail-half .gx-r-done:nth-child(2) { animation-delay: 60ms; }
.gx-rail-half .gx-r-done:nth-child(3) { animation-delay: 120ms; }
.gx-rail-half .gx-r-done:nth-child(4) { animation-delay: 180ms; }
.gx-rail-half .gx-r-done:nth-child(5) { animation-delay: 240ms; }
.gx-rail-half .gx-r-done:nth-child(6) { animation-delay: 300ms; }
}
.gx-stage::before { height: calc(6px + var(--heat, 0) * 10px); }
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) .gx-stage::before { transition: height 500ms var(--e-std, ease); }
}
.gx-stage.gx-heat-cut::before { transition: none; }
.gx-stage {
background: color-mix(in srgb, var(--ink, var(--carbon))
calc(15% + var(--tint, 0) * 2% + var(--heat, 0) * 7%), var(--room));
transition: background 900ms var(--e-std, ease);
}
@media (prefers-reduced-motion: no-preference) {
@keyframes gx-pass {
0% { box-shadow: inset 0 0 0 0 transparent; transform: scaleX(0); transform-origin: 0 50%; opacity: .9; }
100% { transform: scaleX(1); opacity: 0; }
}
.gx-stage[class*="gx-m-"]::after {
content: ''; position: absolute; left: 0; right: 0; top: 0;
height: calc(6px + var(--heat, 0) * 10px);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
animation: gx-pass 700ms var(--e-std, ease) both;
pointer-events: none;
}
.gx-m-last::after { animation-duration: 950ms; height: 18px; }
@keyframes gx-now-breath { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.gx-rail .gx-r-now { animation: gx-now-breath 4s ease-in-out infinite; }
}
.gx-stage .gx-opt {
transition: background 180ms linear, border-color 180ms linear,
box-shadow 180ms linear, transform 120ms var(--e-std, ease);
}
.gx-stage .gx-opt:not(:disabled):hover {
border-color: var(--ink, var(--carbon));
}
.gx-stage :is(.gx-opt, .gx-tile, .gx-pw, .gx-pg, .gx-say):not(:disabled):active {
transform: translateY(1px) scale(.99);
transition-duration: 40ms;
}
.gx-stage :is(.gx-tile, .gx-pw, .gx-pg, .gx-say) {
transition: background 140ms linear, border-color 140ms linear,
opacity 300ms var(--e-std, ease), transform 120ms var(--e-std, ease);
}
.gx-runn { color: var(--ink, var(--carbon)); }
[data-theme="dark"] .gx-runn {
color: color-mix(in srgb, var(--ink, var(--carbon)) 38%, var(--carbon));
}
.gx-stage .gx-mid[data-kind="word"] .gx-opts,
.gx-stage .gx-mid[data-kind="listen"] .gx-opts,
.gx-stage .gx-mid[data-kind="stress"] .gx-opts,
.gx-stage .gx-mid[data-kind="form"] .gx-opts {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.gx-stage .gx-mid[data-kind="word"] .gx-opt,
.gx-stage .gx-mid[data-kind="listen"] .gx-opt,
.gx-stage .gx-mid[data-kind="stress"] .gx-opt,
.gx-stage .gx-mid[data-kind="form"] .gx-opt {
text-align: center;
font-family: var(--serif);
font-size: clamp(22px, 3vw, 30px);
}
.gx-stage .gx-mid[data-kind="gap"] .gx-opts {
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.gx-stage .gx-mid[data-kind="gap"] .gx-opt { text-align: center; }
.gx-stage { transition: background 900ms var(--e-std, ease), box-shadow 1400ms var(--e-std, ease); }
.gx-stage { box-shadow: inset 0 0 11vmax rgba(24, 19, 9, .09); }
[data-theme="dark"] .gx-stage { box-shadow: inset 0 0 11vmax rgba(0, 0, 0, .32); }
.gx-stage[data-mood="focus"] { box-shadow: inset 0 0 14vmax rgba(22, 18, 8, .16); }
.gx-stage[data-mood="focus"] .gx-top,
.gx-stage[data-mood="focus"] .gx-rail {
opacity: .55; filter: blur(.6px);
}
.gx-stage .gx-top, .gx-stage .gx-rail {
transition: opacity 1100ms var(--e-std, ease), filter 1100ms var(--e-std, ease);
}
.gx-stage[data-mood="steady"] { box-shadow: inset 0 0 18vmax rgba(30, 22, 8, .12); }
.gx-stage[data-mood="steady"]::before { opacity: .45; transition: opacity 1100ms var(--e-std, ease); }
[data-theme="dark"] .gx-stage[data-mood="focus"] { box-shadow: inset 0 0 14vmax rgba(0, 0, 0, .5); }
[data-theme="dark"] .gx-stage[data-mood="steady"] { box-shadow: inset 0 0 18vmax rgba(0, 0, 0, .4); }
.gx-stage .gx-src { font-size: clamp(18px, 2.4vw, 24px); }
.gx-stage .gx-src > .gx-src-en { font-size: .8em; }
.gx-stage .gx-verdict { font-size: clamp(20px, 3vw, 28px); }
.gx-stage .gx-gr-body { font-size: clamp(18px, 2.4vw, 22px); line-height: 1.7; }
.gx-stage .gx-gr-note { font-size: var(--t-2); }
.gx-stage .gx-toward, .gx-stage .gx-fell-n, .gx-stage .gx-near-n { font-size: var(--t-2); }
.gx-stage .gx-near-line { font-size: var(--t-2); }
.gx-stage .gx-ghost-ru { font-size: clamp(19px, 2.6vw, 24px); }
.gx-stage .gx-facts { font-size: var(--t-1); }
.gx-mate-line { font-size: var(--t-1); }
.gx-flood { max-width: 56ch; }
.gx-fl-line { font-family: var(--serif); font-size: var(--t-3); line-height: 1.75; margin: 2px 0 0; }
.gx-fl-en { font-size: var(--t-0); opacity: .62; margin: 0 0 10px; }
.gx-fl-w {
font: inherit; color: inherit; background: none; border: 0; padding: 0 1px;
cursor: pointer; border-bottom: 1px dashed color-mix(in srgb, var(--ink, var(--carbon)) 45%, transparent);
}
.gx-fl-w:hover:not(:disabled) { background: var(--sheet); }
.gx-fl-w.gx-fl-hit {
border-bottom: 2px solid var(--g-gold, #c9a227);
background: color-mix(in srgb, var(--g-gold, #c9a227) 14%, transparent);
font-weight: 600;
}
.gx-harvest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; min-height: 28px; }
.gx-fl-chip {
font-family: var(--serif); font-style: normal; font-size: var(--t-0);
padding: 2px 9px; background: var(--galley);
border: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 45%, var(--carbon));
box-shadow: 0 1px 0 var(--press, rgba(0,0,0,.2));
}
.gx-piles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.gx-pile {
border: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 45%, var(--carbon));
background: color-mix(in srgb, var(--ink, var(--carbon)) 5%, var(--sheet));
padding: 8px 10px; min-height: 64px;
}
.gx-pile h4 {
margin: 0 0 6px; font-family: var(--sans); font-size: .72rem;
letter-spacing: .06em; text-transform: uppercase; opacity: .75;
}
.gx-hl { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 5px 0; }
.gx-hl-ru { font-family: var(--serif); font-size: var(--t-2); }
.gx-hl-mark { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.gx-hl-en { font-size: var(--t-00); opacity: .6; }
.gx-hl-btns { margin-left: auto; display: inline-flex; gap: 6px; }
.gx-hl-b {
font-family: var(--serif); font-size: var(--t-0); line-height: 1;
padding: 4px 10px; cursor: pointer; background: var(--galley);
border: 1px solid var(--carbon); border-radius: 0;
}
.gx-hl-b:hover { background: var(--sheet); }
.gx-hl-set .gx-hl-ru { font-weight: 600; }
.gx-hl-no { animation: gx-nudge calc(0.2s * var(--motion, 1)) ease-out both; }
@media (max-width: 560px) { .gx-piles { grid-template-columns: 1fr; } }
.gx-scene-line { font-size: clamp(1.5rem, 4.6vw, 2.1rem); line-height: 1.3; }
.gx-scene-en { opacity: .72; margin-top: 2px; }
.gx-gr-body { max-width: 58ch; font-size: var(--t-1); line-height: 1.75; }
.gx-plate { position: relative; max-width: 70ch; margin-inline: auto; }
.gx-tp-wm {
position: fixed; right: -14vmin; bottom: -16vmin;
width: 72vmin; height: 72vmin; border-radius: 50%;
background: radial-gradient(circle at 50% 45%,
color-mix(in srgb, var(--ink, var(--carbon)) 16%, transparent),
transparent 70%);
pointer-events: none; z-index: 0;
}
.gx-tp-wm svg { display: none; }
.gx-tp-head {
display: flex; align-items: center; gap: 18px; text-align: left;
margin: 6px 0 8px; position: relative; z-index: 1;
background: transparent;
}
.gx-tp-emb {
width: 76px; height: 76px; flex: 0 0 auto; position: relative;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: radial-gradient(circle at 50% 38%,
color-mix(in srgb, var(--ink, var(--carbon)) 8%, var(--galley)),
color-mix(in srgb, var(--ink, var(--carbon)) 22%, var(--galley)));
border: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 55%, var(--carbon));
box-shadow: inset 0 0 0 4px var(--galley),
inset 0 0 0 5px color-mix(in srgb, var(--ink, var(--carbon)) 40%, transparent),
0 2px 3px color-mix(in srgb, var(--ink, var(--carbon)) 20%, transparent);
color: var(--ink, var(--carbon));
}
.gx-tp-emb svg { width: 58%; height: 58%; }
.gx-tp-orn { font-size: 34px; font-style: normal; }
.gx-tp-ti {
font-family: var(--serif); font-style: normal; font-weight: 600;
font-size: clamp(1.8rem, 5.2vw, 2.6rem); line-height: 1.12;
margin: 0; letter-spacing: .01em; text-wrap: balance;
}
.gx-tp-rule {
display: flex; align-items: center; gap: 12px; width: 100%; max-width: 62ch;
margin: 4px 0 16px; color: var(--ink, var(--carbon));
position: relative; z-index: 1;
}
.gx-tp-rule i { flex: 1; border-top: 2px solid color-mix(in srgb, var(--ink, var(--carbon)) 45%, transparent); }
.gx-tp-rule span { font-size: var(--t-2); }
.gx-plate .gx-teach-note {
font-size: var(--t-2); line-height: 1.8; max-width: 62ch;
font-style: normal; position: relative; z-index: 1; margin: 0;
}
.gx-tp-spec {
margin: 22px 0 0; padding: 22px 24px 18px; max-width: 56ch;
border: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 55%, var(--carbon));
background: color-mix(in srgb, var(--ink, var(--carbon)) 7%, var(--sheet));
box-shadow: inset 0 0 0 3px var(--sheet),
inset 0 0 0 4px color-mix(in srgb, var(--ink, var(--carbon)) 30%, transparent),
0 3px 0 var(--press, rgba(0,0,0,.15));
text-align: center; position: relative; z-index: 1;
}
.gx-tp-spec .gx-line {
font-size: clamp(1.6rem, 4.8vw, 2.2rem); font-style: normal; line-height: 1.35;
display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.gx-stage .gx-tp-spec .gx-seal-say, .gx-tp-spec .gx-say {
width: 52px; height: 52px; border-radius: 50%; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
background: var(--ink, var(--carbon)); color: var(--galley);
border: 0;
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--galley) 35%, transparent),
0 2px 0 var(--press, rgba(0,0,0,.25));
flex: 0 0 auto;
}
.gx-stage .gx-tp-spec .gx-seal-say:hover, .gx-tp-spec .gx-say:hover { transform: translateY(-1px); }
.gx-stage .gx-tp-spec .gx-seal-say:active, .gx-tp-spec .gx-say:active { transform: translateY(1px); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--galley) 35%, transparent); }
.gx-stage .gx-tp-spec .gx-seal-say svg, .gx-tp-spec .gx-say svg { width: 22px; height: 22px; fill: currentColor; }
.gx-tp-spec figcaption { opacity: .72; margin-top: 8px; font-size: var(--t-1); }
.gx-tp-sorts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; position: relative; z-index: 1; }
.gx-tp-sorts i {
font-family: var(--serif); font-style: normal; font-size: var(--t-1);
padding: 3px 12px; background: transparent; opacity: .9;
border: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 35%, transparent);
border-radius: 999px;
}
.gx-tp-sorts-cap { text-align: center; font-size: var(--t-00); opacity: .6; margin-top: 8px; position: relative; z-index: 1; }
.gx-arc-epi {
font-family: var(--serif); font-style: normal; font-size: var(--t-1);
opacity: .68; margin: 6px 0 2px; max-width: 48ch;
}
.gx-arc-wm {
position: fixed; right: -2vmin; bottom: -6vmin;
font-size: clamp(200px, 44vmin, 480px); line-height: 1; font-style: normal;
color: color-mix(in srgb, var(--ink, var(--carbon)) 8%, transparent);
pointer-events: none; user-select: none; z-index: 0;
}
.gx-verdict .gx-v-gloss { font-size: var(--t-0); }
.gx-bloom {
position: fixed; top: 12vh; bottom: 12vh; width: min(34vw, 420px);
pointer-events: none; z-index: 0; opacity: 0;
background: radial-gradient(ellipse 70% 55% at 50% 42%,
color-mix(in srgb, var(--ink, var(--carbon)) 36%, transparent), transparent 70%);
filter: blur(28px);
display: grid; place-items: center;
}
.gx-bloom i {
font-style: normal; font-size: clamp(140px, 24vw, 340px);
color: var(--ink, var(--carbon)); opacity: .26; filter: blur(2px);
transform: rotate(-8deg);
}
.gx-bloom { left: -8vw; right: auto; }
.gx-stage[data-side="r"] .gx-bloom { right: -8vw; left: auto; }
@media (prefers-reduced-motion: no-preference) {
@keyframes gx-bloom-in {
from { opacity: 0; transform: translateY(24px) scale(.94); }
to   { opacity: 1; transform: none; }
}
.gx-bloom { animation: gx-bloom-in 1300ms var(--e-std, ease) .15s both; }
}
@media (prefers-reduced-motion: reduce) { .gx-bloom { opacity: 1; } }
.gx-stage[data-mood="focus"] .gx-bloom { opacity: 1; filter: blur(22px); }
.gx-stage[data-mood="steady"] .gx-bloom { opacity: .5; }
@media (max-width: 900px) {
.gx-stage .gx-bloom {
top: auto; bottom: -8vh; height: 34vh;
opacity: .55; animation: none;
}
}
.gx-verdict .gx-v-say {
display: block; font-family: var(--serif); font-size: 1.5em;
color: var(--ink, var(--carbon));
}
.gx-verdict .gx-v-gloss {
display: block; font-family: var(--sans); font-style: normal;
font-size: var(--t-00); letter-spacing: .06em; color: var(--steel);
margin-top: 3px;
}
[data-theme="dark"] .gx-verdict .gx-v-say {
color: color-mix(in srgb, var(--ink, var(--carbon)) 38%, var(--carbon));
}
.gx-verdict.gx-v-coup { font-size: 1.35em; }
.gx-verdict.gx-v-coup .gx-v-say { color: var(--reward, var(--signal)); }
.gx-verdict.gx-v-coup .gx-v-say { animation: goldbloom calc(700ms * var(--motion, 1)) var(--e-snap, ease); }
.gx-stage.gx-m-coup .gx-bloom { opacity: 1; filter: blur(20px) brightness(1.25); }
.gx-stage.gx-m-coup::after { background: linear-gradient(90deg, transparent,
color-mix(in srgb, var(--reward, var(--signal)) 55%, transparent), transparent); }
.gx-wis, .margin-note {
font-family: var(--serif); font-style: normal; font-size: var(--t-1);
color: var(--steel); max-width: 34em; margin: 6px auto 0;
text-align: center; line-height: 1.55;
}
.margin-note { margin-top: 10px; }
.gx-drive { margin: 0; font-family: var(--serif); font-size: var(--t-2); color: var(--carbon); }
.gx-drive b { font-variant-numeric: tabular-nums; }
.gx-drive-gold b { color: var(--signal-ink, var(--signal)); }
.gx-seal-cue {
margin: 4px 0 0; font-size: var(--t-0); letter-spacing: .06em;
color: var(--carbon); text-align: center;
}
.gx-seal-later { display: block; margin: 10px auto 0; }
.gx-seal-rest { display: grid; gap: 12px; justify-items: center; }
@media (prefers-reduced-motion: no-preference) {
.gx-rest-in { animation: gx-rest-in 480ms var(--e-std, ease) both; }
@keyframes gx-rest-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
.gx-gr-body {
font-family: var(--serif); font-size: var(--t-2); line-height: 1.65;
max-width: 34em; white-space: pre-line;
}
.gx-gr-note {
margin: 0; font-family: var(--serif); font-style: normal;
font-size: var(--t-1); color: var(--carbon);
border-left: 3px solid var(--ink, var(--carbon)); padding-left: 12px;
}
.gx-gr-hi { color: var(--ink, var(--carbon)); font-weight: 700; }
[data-theme="dark"] .gx-gr-hi {
color: color-mix(in srgb, var(--ink, var(--carbon)) 38%, var(--carbon));
}
.gx-gr-ru {
font-family: var(--serif); font-weight: 600; cursor: pointer;
color: color-mix(in srgb, var(--ink, var(--carbon)) 72%, var(--carbon));
border-bottom: 1px dotted color-mix(in srgb, var(--ink, var(--carbon)) 45%, transparent);
transition: color 140ms linear, border-color 140ms linear;
}
.gx-gr-ru:hover { border-bottom-style: solid; }
.gx-gr-ru.gx-gr-said { color: var(--signal-ink, var(--signal)); }
.gx-gr-end {
font-style: normal; font-family: var(--serif); font-weight: 600;
color: color-mix(in srgb, var(--ink, var(--carbon)) 78%, var(--carbon));
background: color-mix(in srgb, var(--ink, var(--carbon)) 8%, var(--galley));
border: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 40%, transparent);
padding: 0 5px; margin: 0 1px; white-space: nowrap;
}
.gx-gr-body[data-beat="0"] > .lesson-small-label { float: left; width: 100%; }
.gx-gr-body[data-beat="0"]::first-letter {
font-size: 2.6em; float: left; line-height: .85;
padding: 2px 8px 0 0; font-weight: 700;
color: color-mix(in srgb, var(--ink, var(--carbon)) 75%, var(--carbon));
}
.gx-gr-hint {
margin: 0; font-size: .74rem; font-style: italic; color: var(--steel);
font-family: var(--serif);
}
.gx-gr-rail { margin: 8px 0 0; }
.gx-gr-rail i { max-width: 44px; }
.gx-find { display: flex; flex-wrap: wrap; gap: 8px 6px; justify-content: center; }
.gx-find-w {
font-family: var(--serif); font-size: clamp(20px, 2.8vw, 26px);
background: var(--galley); border: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 35%, transparent);
border-bottom-width: 3px;
padding: 8px 12px; cursor: pointer; color: inherit;
transition: background 140ms linear, border-color 140ms linear, transform 120ms var(--e-std, ease);
}
.gx-find-w:not(:disabled):hover {
background: color-mix(in srgb, var(--ink, var(--carbon)) 10%, var(--galley));
border-color: var(--ink, var(--carbon));
transform: translateY(-2px);
}
.gx-find-w:not(:disabled):active { transform: translateY(1px); transition-duration: 40ms; }
.gx-find-w.gx-right { background: var(--malachite); color: var(--on-malachite); border-color: var(--malachite); }
.gx-find-w.gx-wrong { border-color: var(--signal); color: var(--signal-ink); }
.gx-find-w:disabled { cursor: default; opacity: .75; }
.gx-find-w.gx-right:disabled, .gx-find-w.gx-wrong:disabled { opacity: 1; }
.rd-gram .rd-l-no { font-family: var(--serif); font-weight: var(--fw-text); }
.gx-rail .gx-r-enc:not(.gx-r-done) { background: none; box-shadow: inset 0 0 0 1.5px var(--ink, var(--carbon)); opacity: .7; }
.gx-verdict.gx-v-first { color: var(--ink, var(--carbon)); }
.gx-verdict.gx-v-won   { color: var(--ink, var(--carbon)); }
.gx-verdict.gx-v-run   { color: var(--ink, var(--carbon)); font-size: 1.25em; }
.gx-verdict.gx-v-half  { color: var(--ink, var(--carbon)); font-size: 1.25em; }
.gx-verdict.gx-v-last  { font-size: 1.4em; }
.gx-last-mark { color: var(--ink, var(--carbon)); }
[data-theme="dark"] :is(.gx-verdict.gx-v-first, .gx-verdict.gx-v-won,
.gx-verdict.gx-v-run, .gx-verdict.gx-v-half, .gx-last-mark, .gx-topic i) {
color: color-mix(in srgb, var(--ink, var(--carbon)) 38%, var(--carbon));
}
[data-theme="dark"] .gx-rail .gx-r-enc:not(.gx-r-done) {
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink, var(--carbon)) 38%, var(--carbon));
}
.gx-stage .gx-print { padding: 40px 32px; }
.gx-stage .gx-print-ru { font-size: clamp(28px, 5vw, 44px); }
.gx-stage .gx-tally { font-size: clamp(34px, 6vw, 54px); }
@media (max-width: 620px) {
.gx-stage { padding: 16px 14px; align-content: start; }
.gx-stage .gx { gap: 20px; }
.gx-top { flex-wrap: wrap; row-gap: 4px; }
}
.gx-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.gx-pcol { display: grid; gap: 10px; align-content: start; }
.gx-pw, .gx-pg {
font-family: inherit; color: inherit; text-align: left; cursor: pointer;
background: var(--galley); border: 1px solid var(--carbon); border-radius: 0;
padding: 12px 14px; font-size: var(--t-2);
transition: background 140ms linear, border-color 140ms linear, opacity 300ms var(--e-std, ease);
}
.gx-pw { font-family: var(--serif); }
.gx-p-sel {
background: var(--ink, var(--carbon)) !important;
border-color: var(--ink, var(--carbon));
color: var(--galley) !important;
box-shadow: 0 2px 8px color-mix(in srgb, var(--ink, var(--carbon)) 45%, transparent);
transform: translateY(-1px);
}
.gx-p-done {
opacity: 1; cursor: default;
position: relative;
background: var(--malachite-tint) !important;
border-color: color-mix(in srgb, var(--malachite) 60%, transparent);
color: color-mix(in srgb, var(--malachite-ink) 85%, transparent);
box-shadow: none;
}
.gx-p-done::after {
content: attr(data-mate);
position: absolute; top: -9px; right: -7px;
width: 20px; height: 20px; border-radius: 50%;
display: grid; place-items: center;
background: var(--malachite); color: var(--on-malachite);
font-family: var(--sans); font-size: var(--t-00); font-weight: 600;
line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
body.motion-full .gx-p-done { animation: gx-pair-set 360ms var(--e-std, ease); }
@keyframes gx-pair-set {
0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--malachite) 65%, transparent); }
100% { box-shadow: 0 0 0 0 transparent; }
}
@media (max-width: 560px) { .gx-pairs { grid-template-columns: 1fr; } }
.gx-stage :is(.gx-opt, .gx-tile, .gx-pw, .gx-pg, .gx-find-w, .gx-set) {
min-width: 0; overflow-wrap: anywhere; white-space: normal;
}
.gx-stage :is(.gx-opt, .gx-tile, .gx-pw, .gx-pg, .gx-find-w, .gx-vowel).gx-right {
color: var(--on-malachite) !important;
}
.gx-stage[data-move="door"] {
background: color-mix(in srgb, var(--ink, var(--carbon))
calc(13% + var(--tint, 0) * 2%), var(--room));
box-shadow: inset 0 45vh 35vh -35vh
color-mix(in srgb, var(--ink, var(--carbon)) 24%, transparent),
inset 0 -34vh 32vh -32vh color-mix(in srgb, var(--carbon) 22%, transparent);
}
.gx-stage[data-move="door"]::before { transform-origin: 50% 50%; }
.gx-stage[data-move="forge"] {
background: color-mix(in srgb, var(--ink, var(--carbon))
calc(28% + var(--tint, 0) * 2%), var(--room));
box-shadow: inset 0 0 16vmax rgba(20, 14, 6, .38);
}
[data-theme="dark"] .gx-stage[data-move="forge"] {
box-shadow: inset 0 0 16vmax rgba(0, 0, 0, .55);
}
.gx-stage[data-move="forge"]::before { height: calc(14px + var(--heat, 0) * 10px); }
.gx-stage[data-move="forge"] .gx-opt {
border-width: 2px;
border-color: color-mix(in srgb, var(--ink, var(--carbon)) 55%, var(--carbon));
}
.gx-forge-mark {
font-style: italic; text-transform: none; letter-spacing: 0; opacity: .7;
}
.gx-stage[data-move="gather"] {
background:
repeating-linear-gradient(transparent 0 34px,
color-mix(in srgb, var(--ink, var(--carbon)) 20%, transparent) 34px 35px),
linear-gradient(180deg,
color-mix(in srgb, var(--signal) 9%, transparent), transparent 40vh),
color-mix(in srgb, var(--ink, var(--carbon))
calc(5% + var(--tint, 0) * 2%), var(--room));
box-shadow: inset 0 -34vh 32vh -32vh color-mix(in srgb, var(--carbon) 20%, transparent);
}
.gx-stage[data-move="door"] .gx-mate {
bottom: auto; top: clamp(80px, 14vh, 140px);
}
.gx-stage[data-move="forge"] .gx-mate {
width: clamp(110px, 15vw, 180px);
height: clamp(110px, 15vw, 180px);
}
.gx-gather-stick { display: grid; gap: 0; padding: 0; min-height: 80px; }
.gx-gathered {
font-family: var(--serif); font-size: var(--t-2); line-height: 1.5;
padding: 9px 14px; border-bottom: 1px solid var(--rule);
}
@media (prefers-reduced-motion: no-preference) {
.gx-gathered { animation: gx-rowset 300ms var(--e-std, ease) both; }
@keyframes gx-rowset { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}
.gx-gather-tiles { display: grid; gap: 8px; }
.gx-line-tile { text-align: left; font-size: var(--t-1); white-space: normal; line-height: 1.45; }
.gx-line-tile:disabled { opacity: .25; }
.gx-kind {
font-style: normal; margin-right: 11px; color: var(--ink, var(--carbon));
display: inline-grid; place-items: center;
width: 34px; height: 34px; font-size: 17px; letter-spacing: 0;
vertical-align: middle;
background: color-mix(in srgb, var(--ink, var(--carbon)) 10%, var(--galley));
border: 1.5px solid var(--ink, var(--carbon)); border-radius: 50%;
box-shadow: 0 1px 2px color-mix(in srgb, var(--ink, var(--carbon)) 22%, transparent), 0 5px 14px -7px color-mix(in srgb, var(--ink, var(--carbon)) 45%, transparent);
}
[data-theme="dark"] .gx-kind {
color: color-mix(in srgb, var(--ink, var(--carbon)) 38%, var(--carbon));
border-color: color-mix(in srgb, var(--ink, var(--carbon)) 38%, var(--carbon));
}
@media (prefers-reduced-motion: no-preference) {
@keyframes gx-kind-stamp {
0% { transform: scale(1.25); opacity: 0; }
55% { transform: scale(.96); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
.gx-kind { animation: gx-kind-stamp 240ms var(--e-std, ease) both; }
}
.gx-stage .gx-mid[data-kind="meaning"] .gx-head { text-align: center; padding: 6px 0 2px; }
.gx-stage .gx-mid[data-kind="meaning"] .gx-word {
position: relative; display: inline-block; padding: 20px 38px;
}
.gx-stage .gx-mid[data-kind="meaning"] .gx-word::before,
.gx-stage .gx-mid[data-kind="meaning"] .gx-word::after {
content: ''; position: absolute; left: 8px; right: 8px; height: 5px;
border-top: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 65%, transparent);
border-bottom: 3px solid color-mix(in srgb, var(--ink, var(--carbon)) 65%, transparent);
}
.gx-stage .gx-mid[data-kind="meaning"] .gx-word::before { top: 0; }
.gx-stage .gx-mid[data-kind="meaning"] .gx-word::after { bottom: 0;
border-top-width: 3px; border-bottom-width: 1px; }
.gx-stage .gx-mid[data-kind="meaning"] .gx-opts { grid-template-columns: 1fr 1fr; gap: 12px; }
.gx-stage .gx-mid[data-kind="meaning"] .gx-opt {
text-align: center; font-style: italic;
background: color-mix(in srgb, var(--ink, var(--carbon)) 8%, var(--galley));
border-color: color-mix(in srgb, var(--ink, var(--carbon)) 55%, transparent);
box-shadow: 0 2px 5px color-mix(in srgb, var(--ink, var(--carbon)) 14%, transparent);
}
@media (max-width: 560px) {
.gx-stage .gx-mid[data-kind="meaning"] .gx-opts { grid-template-columns: 1fr; }
}
.gx-stage .gx-mid[data-kind="word"] .gx-gloss {
text-align: center; font-style: italic; color: var(--carbon);
padding-bottom: 14px; position: relative;
}
.gx-stage .gx-mid[data-kind="word"] .gx-gloss::after {
content: ''; position: absolute; left: 50%; bottom: 0; width: 90px; height: 0;
transform: translateX(-50%);
border-bottom: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 55%, transparent);
}
.gx-stage .gx-mid[data-kind="word"] .gx-opts {
background: color-mix(in srgb, var(--ink, var(--carbon)) 9%, var(--sheet));
border: 2px solid color-mix(in srgb, var(--ink, var(--carbon)) 55%, var(--carbon));
padding: 12px; gap: 10px;
box-shadow: inset 0 2px 8px color-mix(in srgb, var(--carbon) 14%, transparent);
}
.gx-stage .gx-mid[data-kind="word"] .gx-opt {
background: color-mix(in srgb, var(--ink, var(--carbon)) 5%, var(--sheet));
border-color: color-mix(in srgb, var(--ink, var(--carbon)) 30%, transparent);
box-shadow: inset 0 1px 4px color-mix(in srgb, var(--carbon) 12%, transparent);
}
.gx-stage .gx-mid[data-kind="word"] .gx-opt:not(:disabled):hover {
background: var(--galley);
}
.gx-stage .gx-mid[data-kind="gap"] .gx-line {
background: color-mix(in srgb, var(--ink, var(--carbon)) 6%, var(--galley));
border-left: 4px solid var(--ink, var(--carbon));
padding: 20px 22px;
box-shadow: inset 0 1px 5px color-mix(in srgb, var(--carbon) 8%, transparent);
}
.gx-stage .gx-mid[data-kind="gap"] .gx-blank {
background: color-mix(in srgb, var(--carbon) 7%, transparent);
border-bottom-style: dashed; padding: 0 12px;
box-shadow: inset 0 2px 4px color-mix(in srgb, var(--carbon) 14%, transparent);
}
.gx-stage .gx-mid[data-kind="gap"] .gx-opt {
border-bottom: 4px solid color-mix(in srgb, var(--ink, var(--carbon)) 60%, var(--carbon));
min-width: 110px;
}
.gx-stage .gx:has(.gx-mid[data-kind="listen"]),
.gx-stage .gx:has(.gx-mid[data-kind="hearline"]) {
background: color-mix(in srgb, var(--carbon) 9%, var(--galley));
}
.gx-stage .gx-mid[data-kind="listen"] .gx-head,
.gx-stage .gx-mid[data-kind="hearline"] .gx-head {
display: grid; place-items: center; padding: 10px 0;
}
.gx-stage .gx-mid[data-kind="listen"] .gx-head .gx-say,
.gx-stage .gx-mid[data-kind="hearline"] .gx-head .gx-say {
position: relative;
width: 118px; height: 118px; border-radius: 50%;
display: grid; place-items: center; padding: 0;
font-size: var(--t-1); letter-spacing: .04em;
border: 2px solid var(--ink, var(--carbon));
background: radial-gradient(circle at 50% 38%,
color-mix(in srgb, var(--ink, var(--carbon)) 6%, var(--galley)),
color-mix(in srgb, var(--ink, var(--carbon)) 16%, var(--galley)));
box-shadow: 0 2px 4px color-mix(in srgb, var(--ink, var(--carbon)) 22%, transparent),
0 10px 24px -10px color-mix(in srgb, var(--ink, var(--carbon)) 50%, transparent);
}
body.motion-full .gx-stage .gx-mid[data-kind="listen"] .gx-head .gx-say::after,
body.motion-full .gx-stage .gx-mid[data-kind="hearline"] .gx-head .gx-say::after {
content: ''; position: absolute; inset: -2px; border-radius: 50%;
border: 1.5px solid color-mix(in srgb, var(--ink, var(--carbon)) 45%, transparent);
animation: gx-ring 3.2s ease-out infinite;
pointer-events: none;
}
@keyframes gx-ring {
0% { transform: scale(1); opacity: .7; }
70% { transform: scale(1.45); opacity: 0; }
100% { transform: scale(1.45); opacity: 0; }
}
.gx-stage .gx-mid[data-kind="order"] .gx-stick {
background: linear-gradient(180deg,
color-mix(in srgb, var(--carbon) 7%, var(--galley)),
color-mix(in srgb, var(--carbon) 13%, var(--galley)));
border: 1px solid color-mix(in srgb, var(--carbon) 55%, transparent);
border-bottom: 6px solid var(--brass);
box-shadow: inset 0 2px 7px color-mix(in srgb, var(--carbon) 16%, transparent);
}
.gx-stage .gx-mid[data-kind="order"] .gx-tile {
border-bottom: 4px solid color-mix(in srgb, var(--ink, var(--carbon)) 55%, var(--carbon));
}
.gx-stage .gx-mid[data-kind="order"] .gx-study {
text-align: center; font-size: clamp(24px, 3.4vw, 32px);
}
.gx-stage .gx-mid[data-kind="write"] .gx-body { position: relative; }
.gx-stage .gx-mid[data-kind="write"] .gx-input {
background: transparent; border: none; border-radius: 0;
border-bottom: 2px solid color-mix(in srgb, var(--ink, var(--carbon)) 70%, transparent);
text-align: center; caret-color: var(--ink, var(--carbon));
padding-left: 48px; padding-right: 48px;
}
.gx-stage .gx-mid[data-kind="write"] .gx-input:focus-visible {
outline: none; border-bottom-color: var(--ink, var(--carbon));
box-shadow: 0 2px 0 color-mix(in srgb, var(--ink, var(--carbon)) 30%, transparent);
}
.gx-stage .gx-mid[data-kind="write"] .gx-body::before {
content: '✒'; position: absolute; left: 10px; top: 12px;
font-size: 26px; color: color-mix(in srgb, var(--ink, var(--carbon)) 75%, transparent);
pointer-events: none;
}
.gx-stage .gx-mid[data-kind="write"] .gx-gloss { text-align: center; font-style: italic; }
.gx-stage .gx-mid[data-kind="pairs"] .gx-pairs { position: relative; }
.gx-stage .gx-mid[data-kind="pairs"] .gx-pairs::before {
content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px;
transform: translateX(-50%);
background: linear-gradient(transparent,
color-mix(in srgb, var(--ink, var(--carbon)) 45%, transparent) 18%,
color-mix(in srgb, var(--ink, var(--carbon)) 45%, transparent) 82%, transparent);
}
.gx-stage .gx-mid[data-kind="pairs"] .gx-pw {
text-align: center;
background: color-mix(in srgb, var(--ink, var(--carbon)) 5%, var(--sheet));
box-shadow: inset 0 1px 4px color-mix(in srgb, var(--carbon) 12%, transparent);
}
.gx-stage .gx-mid[data-kind="pairs"] .gx-pg {
font-style: italic;
background: color-mix(in srgb, var(--ink, var(--carbon)) 3%, var(--galley));
}
@media (max-width: 560px) {
.gx-stage .gx-mid[data-kind="pairs"] .gx-pairs::before { display: none; }
}
.gx-stage .gx-mid[data-kind="stress"] .gx-head { text-align: center; }
.gx-stage .gx-mid[data-kind="stress"] .gx-gloss { font-style: italic; }
.gx-stage .gx-mid[data-kind="stress"] .gx-body { text-align: center; }
.gx-stage .gx-mid[data-kind="form"] .gx-line {
background: color-mix(in srgb, var(--ink, var(--carbon)) 4%, var(--galley));
padding: 18px 20px;
border-left: 4px solid color-mix(in srgb, var(--ink, var(--carbon)) 50%, transparent);
}
.gx-stage .gx-mid[data-kind="form"] .gx-opts {
display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.gx-stage .gx-mid[data-kind="form"] .gx-opt {
min-width: 130px; flex: 0 1 auto;
border-top: 4px solid var(--ink, var(--carbon));
}
.gx-stage[data-move="forge"]::before {
background: linear-gradient(90deg, var(--ink, var(--carbon)),
color-mix(in srgb, var(--signal) 55%, var(--ink, var(--carbon))));
}
.gx-stage[data-move="forge"] .gx {
background: color-mix(in srgb, var(--ink, var(--carbon)) 5%, var(--galley));
}
.gx-stage[data-move="gather"]::before {
background: linear-gradient(90deg, var(--ink, var(--carbon)),
color-mix(in srgb, var(--signal) 50%, var(--ink, var(--carbon))));
}
.gx-stage[data-move="gather"] .gx {
background: color-mix(in srgb, var(--signal) 3%, var(--galley));
}
.gx-stage::after { opacity: .085; }
[data-theme="dark"] .gx-stage::after { opacity: .11; }
.gx-bloom i { opacity: .34; }
.gx-stage .gx-mid[data-kind="gram"] .gx-study {
font-size: clamp(24px, 3.6vw, 34px); line-height: 1.55;
}
.gx-stage .gx-mid[data-kind="gram"] .gx-study::first-letter {
font-size: 2.4em; float: left; line-height: .82;
padding: 4px 12px 0 0; font-weight: 600;
color: var(--ink, var(--carbon));
}
@media (max-width: 1100px) {
.gx-stage[data-move="door"] .gx-mate { top: auto; bottom: clamp(12px, 3vh, 34px); }
}
@media (max-width: 700px) {
.gx-mate { width: 72px; height: 72px; right: 10px; bottom: 10px; }
.gx-mate-line { max-width: 170px; font-size: .74rem; }
}
.jp-share-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
margin-top: 14px; }
.jp-share-row .jp-s { font-size: var(--type-control); line-height:1.5; min-height:44px; white-space:normal; padding: 8px 12px;
text-decoration: none; }
.gx-gr-note, .gx-arc-epi, .gx-wis, .margin-note,
.gx-mate-line, .gx-mate .gx-slip, .gx-mate-note,
.gx-line, .gx-scene-line, .gx-verdict, .gx-fl-line,
.gx-hl-ru, .gx-tp-sorts i { font-style: normal; }
.gx-plate .btnrow { margin-top: 10px; }
.gx-plate #gx-teach-art {
background: transparent; border: 0; box-shadow: none; padding: 4px 0;
font-family: var(--sans); font-size: var(--t-00); letter-spacing: .03em;
text-decoration: underline; text-underline-offset: 3px; opacity: .75;
}
.gx-plate #gx-teach-art:hover { opacity: 1; background: transparent; }
.gx-ask .gx-again {
display: block; margin: 4px 0 0; padding: 0;
background: transparent; border: 0; box-shadow: none;
font-size: .72rem; letter-spacing: .04em; opacity: .62;
}
.gx-stage .gx-mid[data-kind="meaning"] .gx-opts .gx-opt { position: relative; padding: 14px 18px; }
.gx-cat-tick::after {
content: '✓'; position: absolute; top: 2px; right: 7px;
font-size: var(--t-1); color: var(--g-gold, #c9a227);
}
@media (prefers-reduced-motion: no-preference) {
.gx-cat-tick::after { animation: cs-slip .3s var(--spring-slip, ease-out) both; }
}
.gx-stage .gx-mid[data-kind="gap"] .gx-blank {
display: inline-block; min-width: 5.5ch; text-align: center;
padding: 0 8px; margin: 0 2px;
background: color-mix(in srgb, var(--carbon) 8%, transparent);
box-shadow: inset 0 2px 3px color-mix(in srgb, var(--carbon) 25%, transparent);
border-bottom: 2px solid color-mix(in srgb, var(--ink, var(--carbon)) 55%, transparent);
color: color-mix(in srgb, var(--carbon) 45%, transparent);
}
.gx-stage .gx-mid[data-kind="gap"] .gx-blank.gx-blank-set {
color: var(--ink, var(--carbon)); font-weight: 600;
background: color-mix(in srgb, var(--ink, var(--carbon)) 8%, transparent);
box-shadow: none; letter-spacing: .01em;
}
.gx-fly {
font-family: var(--serif); font-size: var(--t-2); color: var(--ink, var(--carbon));
pointer-events: none; font-weight: 600;
}
.gx-stage .gx-pairs { position: relative; }
.gx-stage .gx-pairs .gx-pcol { display: grid; gap: 10px; grid-auto-rows: minmax(56px, auto); align-items: stretch; }
.gx-thread {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none; overflow: visible;
}
.gx-thread path {
fill: none; stroke: color-mix(in srgb, var(--ink, var(--carbon)) 70%, transparent);
stroke-width: 2;
}
.gx-thread .gx-thread-dot { fill: var(--g-gold, #c9a227); stroke: var(--carbon); stroke-width: 1; }
.gx-stage .gx-mid[data-kind="listen"] .gx-listen-big { color: var(--ink, var(--carbon)); }
.gx-stage .gx-mid[data-kind="listen"] .gx-listen-big svg { width: 40px; height: 40px; }
@media (prefers-reduced-motion: no-preference) {
.gx-listen-big.gx-ringing::before {
content: ''; position: absolute; inset: -8px; border-radius: 50%;
border: 2.5px solid color-mix(in srgb, var(--ink, var(--carbon)) 70%, transparent);
animation: gx-ring-press .95s ease-out 2; pointer-events: none;
}
@keyframes gx-ring-press {
from { transform: scale(.92); opacity: .95; }
to { transform: scale(1.5); opacity: 0; }
}
}
.gx-stage .gx-ask .gx-r,
.gx-stage .gx-verdict .gx-r {
font-family: var(--serif);
text-transform: none;
letter-spacing: normal;
font-style: normal;
font-weight: var(--fw-text);
font-size: 1.14em;
line-height: 1;
}
.gx-stage .gx-q-stage {
margin-top: 32px;
padding-top: 20px;
border-top: 1px solid color-mix(in srgb, var(--carbon) 22%, transparent);
position: relative;
}
.gx-stage .gx-q-stage::before {
content: ''; position: absolute; top: -2px; left: 0;
width: 46px; height: 3px; background: var(--ink, var(--carbon));
}
.gx-stage .gx-q-stage .gx-opts { margin-top: 14px; }
.gx-stage .gx-runn {
font-family: var(--bill); font-weight: 800; font-size: var(--t-00);
letter-spacing: .08em; text-transform: uppercase;
background: var(--g-gold, #c9a227); color: var(--carbon);
border: 1.5px solid var(--carbon); border-radius: 999px;
padding: 2px 10px; box-shadow: 0 2px 0 var(--press, rgba(0,0,0,.25));
white-space: nowrap;
}
.gx-stage .gx-runn.gx-runn-off { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
.gx-runn-pop { animation: gx-runn-pop .42s var(--spring-slip, ease-out); }
@keyframes gx-runn-pop {
0% { transform: scale(1); }
45% { transform: scale(1.22) rotate(-2deg); }
100% { transform: scale(1); }
}
}
.gx-stage .gx-rail .gx-r-seal {
flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
background: transparent; border: 1.5px solid color-mix(in srgb, var(--carbon) 45%, transparent);
color: color-mix(in srgb, var(--carbon) 40%, transparent);
display: grid; place-items: center; font-size: 11px; line-height: 1;
margin-left: 4px; align-self: center;
transition: color .3s linear, border-color .3s linear, background .3s linear,
box-shadow .3s linear;
}
.gx-stage .gx-rail.gx-rail-near .gx-r-seal {
border-color: var(--g-gold, #c9a227); color: var(--carbon);
background: color-mix(in srgb, var(--g-gold, #c9a227) 30%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-gold, #c9a227) 25%, transparent);
}
.gx-stage .gx-mid[data-rare="gold"] {
outline: 2px solid var(--g-gold, #c9a227);
outline-offset: -2px;
box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--g-gold, #c9a227) 22%, transparent);
position: relative;
}
.gx-stage .gx-mid[data-rare="gold"]::after {
content: '❋'; position: absolute; top: 6px; right: 10px;
color: var(--g-gold, #c9a227); font-size: var(--t-2); pointer-events: none;
}
.gx-comm {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
border: 2px solid var(--carbon); background: var(--galley, #f4efe4);
box-shadow: 0 3px 0 var(--press, rgba(0,0,0,.22));
padding: 10px 14px; margin: 0 0 18px; position: relative;
}
.gx-comm-ti {
font-family: var(--bill); font-weight: 900; letter-spacing: .1em;
text-transform: uppercase; font-size: var(--t-00); color: var(--carbon);
border-right: 1.5px solid color-mix(in srgb, var(--carbon) 30%, transparent);
padding-right: 14px;
}
.gx-comm-row {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--sans); font-size: var(--t-0);
color: color-mix(in srgb, var(--carbon) 80%, transparent);
}
.gx-comm-row b { font-variant-numeric: tabular-nums; color: var(--carbon); }
.gx-comm-tick {
width: 15px; height: 15px; border: 1.5px solid var(--carbon);
border-radius: 2px; display: inline-grid; place-items: center;
font-style: normal; font-size: 11px; line-height: 1; color: transparent;
background: transparent; transition: background .25s linear, color .25s linear;
}
.gx-comm-done .gx-comm-tick { background: var(--carbon); color: var(--galley, #f4efe4); }
.gx-comm-done .gx-comm-tick::before { content: '✓'; }
.gx-comm-seal {
margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
display: grid; place-items: center; font-style: normal; font-size: 13px;
border: 1.5px dashed color-mix(in srgb, var(--carbon) 40%, transparent);
color: color-mix(in srgb, var(--carbon) 35%, transparent);
transition: all .3s linear;
}
.gx-comm-sealed .gx-comm-seal {
border-style: solid; border-color: var(--carbon);
background: var(--g-gold, #c9a227); color: var(--carbon);
box-shadow: 0 2px 0 var(--press, rgba(0,0,0,.25));
}
@media (prefers-reduced-motion: no-preference) {
.gx-comm-just .gx-comm-seal { animation: gx-comm-stamp .5s var(--spring-slip, ease-out); }
@keyframes gx-comm-stamp {
0% { transform: scale(2.2); opacity: 0; }
60% { transform: scale(.92); opacity: 1; }
100% { transform: scale(1); }
}
}
@media (max-width: 600px) {
.gx-stage .gx-top {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: 'ti quit' 'sub sub';
row-gap: 4px; align-items: center;
}
.gx-stage .gx-top .gx-topic {
grid-area: ti; display: block; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gx-stage .gx-top .gx-topic i { display: none; }
.gx-stage .gx-top .gx-topic em {
display: block; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; letter-spacing: .06em;
}
.gx-stage .gx-top .gx-quit { grid-area: quit; justify-self: end; }
.gx-stage .gx-top .gx-runn { grid-area: sub; justify-self: start; }
.gx-stage .gx-top .gx-count { grid-area: sub; justify-self: end; }
}
.rd { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 12px; }
.rd::before {
content: ''; position: absolute; left: 27px; top: 30px; bottom: 34px;
width: 2px; background: var(--rule-room);
}
.rd-book, .rd-alpha, .rd-beyond, .rd-mark { position: relative; }
.rd-book, .rd-alpha, .rd-cy {
background: linear-gradient(160deg,
color-mix(in srgb, var(--ink, var(--carbon)) 6%, var(--galley)),
var(--galley) 58%);
border: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 28%, var(--rule));
border-left: 6px solid var(--ink, var(--carbon));
box-shadow: 0 1px 3px color-mix(in srgb, var(--ink, var(--carbon)) 12%, transparent),
0 14px 28px -18px color-mix(in srgb, var(--ink, var(--carbon)) 48%, transparent);
transition: transform 180ms var(--e-std, ease), box-shadow 180ms var(--e-std, ease);
}
.rd-book:hover, .rd-alpha:hover, .rd-cy:hover {
transform: translateY(-3px);
box-shadow: 0 3px 6px color-mix(in srgb, var(--ink, var(--carbon)) 16%, transparent),
0 22px 40px -18px color-mix(in srgb, var(--ink, var(--carbon)) 55%, transparent);
}
.rd-book.rd-open:hover, .rd-alpha.rd-open:hover, .rd-cy.rd-open:hover { transform: none; }
.rd-hit {
display: grid; grid-template-columns: 64px 1fr; gap: 0 18px;
width: 100%; text-align: left; align-items: start;
background: none; border: 0; border-radius: 0; padding: 16px;
font-family: inherit; color: inherit; cursor: pointer;
}
.rd-hit:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.rd-vol {
position: relative; width: 58px; height: 80px; overflow: hidden;
background: linear-gradient(105deg,
color-mix(in srgb, var(--ink, var(--carbon)) 42%, var(--galley)),
color-mix(in srgb, var(--ink, var(--carbon)) 26%, var(--galley)) 45%,
color-mix(in srgb, var(--ink, var(--carbon)) 34%, var(--galley)));
border: 2px solid var(--ink, var(--carbon));
box-shadow: inset 6px 0 0 var(--ink, var(--carbon));
display: grid; place-items: center;
transform: perspective(340px) rotateY(-10deg);
transform-origin: left center;
transition: transform 220ms var(--e-std, ease), box-shadow 220ms var(--e-std, ease);
}
.rd-vol::after {
content: ''; position: absolute; top: 3px; bottom: 3px; right: 3px; width: 5px;
background: repeating-linear-gradient(to bottom,
var(--galley) 0 3px, color-mix(in srgb, var(--carbon) 18%, var(--galley)) 3px 4px);
z-index: 1;
}
.rd-vol i {
position: absolute; left: 0; right: 0; bottom: 0;
background: var(--ink, var(--carbon)); transition: height 400ms var(--e-std, ease);
}
.rd-vol b {
position: relative; z-index: 1; font-family: var(--bill); font-weight: 900;
font-size: var(--t-0); letter-spacing: .02em; color: var(--carbon);
font-variant-numeric: tabular-nums;
mix-blend-mode: difference; filter: invert(1);
}
.rd-hit:hover .rd-vol {
animation: none;
transform: perspective(340px) rotateY(-2deg) translateY(-4px);
box-shadow: inset 6px 0 0 var(--ink, var(--carbon)),
0 2px 4px color-mix(in srgb, var(--ink, var(--carbon)) 24%, transparent), 0 12px 26px -12px color-mix(in srgb, var(--ink, var(--carbon)) 55%, transparent);
}
.rd-vol-a { border-color: var(--carbon); height: 54px; }
.rd-vol-a::after { display: none; }
.rd-vol-a b { mix-blend-mode: normal; filter: none; font-size: var(--t-3); }
.rd-book { overflow: hidden; }
.rd-book::after {
content: attr(data-orn); position: absolute; right: 6px; top: 50%;
transform: translateY(-50%) rotate(-8deg);
font-size: 72px; line-height: 1; color: var(--ink, var(--carbon));
opacity: .08; pointer-events: none;
transition: opacity 240ms linear, transform 240ms var(--e-std, ease);
}
.rd-book:hover::after { opacity: .16; transform: translateY(-50%) rotate(-3deg); }
.rd-book.rd-open::after { opacity: 0; }
.rd-hit:hover .rd-ti { color: var(--ink, var(--carbon)); }
[data-theme="dark"] .rd-hit:hover .rd-ti {
color: color-mix(in srgb, var(--ink, var(--carbon)) 38%, var(--carbon));
}
.rd-ti { transition: color 160ms linear; }
.rd-here .rd-vol { box-shadow: 0 0 0 3px var(--room), 0 0 0 5px var(--signal); }
.rd-done .rd-vol { background: var(--ink, var(--carbon)); }
.rd-done .rd-vol b { color: var(--galley); mix-blend-mode: normal; filter: none; }
.rd-ahead .rd-vol { border-color: var(--rule-room); }
.rd-ahead .rd-body { opacity: .62; }
.rd-beyond { display: grid; grid-template-columns: 64px 1fr; gap: 0 18px; padding: 14px 16px; opacity: .58; }
.rd-body { display: grid; gap: 3px; padding-top: 2px; min-width: 0; }
.rd-ti {
font-family: var(--serif); font-size: var(--t-3); font-weight: var(--fw-text);
color: var(--carbon);
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.rd-ti em {
font-style: normal; font-family: var(--sans); font-weight: 400;
letter-spacing: .04em; font-size: var(--t-00); color: var(--steel);
}
.rd-can { font-family: var(--sans); font-size: var(--t-0); color: var(--steel); font-variant-numeric: tabular-nums; }
.rd-opens { font-family: var(--serif); font-style: italic; font-size: var(--t-1); color: var(--carbon); }
.rd-next { font-size: var(--t-0); color: var(--ink, var(--carbon)); font-variant-numeric: tabular-nums; }
.rd-next b { font-family: var(--serif); }
[data-theme="dark"] .rd-next {
color: color-mix(in srgb, var(--ink, var(--carbon)) 38%, var(--carbon));
}
.rd-mark {
display: grid; grid-template-columns: 64px 1fr; gap: 0 18px;
padding: 10px 16px; align-items: start;
}
.rd-m-dot {
width: 42px; height: 42px; margin: 0 auto; position: relative;
background: radial-gradient(circle at 35% 30%,
color-mix(in srgb, var(--signal) 78%, #fff),
var(--signal) 55%,
color-mix(in srgb, var(--signal) 72%, #000));
border: none; border-radius: 50%;
box-shadow: 0 0 0 3px var(--room),
0 0 0 4px color-mix(in srgb, var(--signal) 45%, transparent),
0 3px 10px color-mix(in srgb, var(--signal) 45%, transparent);
display: grid; place-items: center;
font-family: var(--bill); font-weight: 900; font-size: var(--t-00);
color: #fff; letter-spacing: .04em;
text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.rd-m-body { font-size: var(--t-0); color: var(--steel); display: grid; gap: 2px; padding-top: 5px; }
.rd-m-body b { color: var(--carbon); font-variant-numeric: tabular-nums; }
.rd-m-can { font-family: var(--serif); font-style: italic; }
.rd-m-buy { font-variant-numeric: tabular-nums; }
.rd-open-box {
margin: 0 16px 20px 16px; padding-top: 4px;
animation: rd-unfold 320ms var(--e-std, ease) both;
}
@keyframes rd-unfold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rd-open-box { animation: none; } }
.rd-who {
display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center;
margin-bottom: 14px;
}
.rd-who-fig {
width: 72px; height: 72px; position: relative;
display: grid; place-items: center; padding: 6px;
}
.rd-who-fig::before {
content: ''; position: absolute; inset: 0; border-radius: 50%;
background: radial-gradient(circle at 50% 40%,
color-mix(in srgb, var(--ink, var(--carbon)) 8%, var(--galley)),
color-mix(in srgb, var(--ink, var(--carbon)) 22%, var(--galley)));
border: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 60%, var(--carbon));
box-shadow: inset 0 0 0 3px var(--galley),
inset 0 0 0 4px color-mix(in srgb, var(--ink, var(--carbon)) 40%, transparent);
}
.rd-who-fig svg { position: relative; filter: saturate(.8) sepia(.08) contrast(1.03); }
.rd-who-say {
font-family: var(--serif); font-style: italic; font-size: var(--t-2);
color: var(--carbon);
}
.rd-chapters { display: grid; gap: 6px; }
.rd-ch { background: var(--sheet); }
.rd-ch-head {
display: grid; grid-template-columns: 34px 1fr auto; gap: 0 12px;
align-items: center; width: 100%; text-align: left;
background: color-mix(in srgb, var(--ink, var(--carbon))
calc(74% + var(--tint, 0) * 4%), var(--room));
color: #fff; border: 0; border-radius: 0; padding: 12px 16px 15px;
font-family: inherit; cursor: pointer; position: relative;
box-shadow: inset 5px 0 0 rgba(0, 0, 0, .28);
transition: background 140ms linear;
overflow: hidden;
}
.rd-ch-head::before {
content: none; position: absolute; right: 84px; top: 50%;
transform: translateY(-50%) rotate(-8deg);
font-size: 64px; line-height: 1; color: #fff; opacity: .1;
pointer-events: none;
transition: opacity 200ms linear, transform 260ms var(--e-std, ease);
}
.rd-ch-head:hover::before { opacity: .2; transform: translateY(-50%) rotate(-2deg) scale(1.06); }
.rd-ch-head:hover, .rd-ch.rd-open .rd-ch-head { background: var(--ink, var(--carbon)); }
.rd-ch-head:focus-visible { outline: 2px solid var(--signal); outline-offset: -3px; }
.rd-orn { font-size: var(--t-3); color: #fff; opacity: .92; text-align: center; }
.rd-ch-mid { display: grid; gap: 1px; min-width: 0; }
.rd-ch-ti {
font-family: var(--bill); text-transform: uppercase; letter-spacing: .07em;
font-weight: 700; font-size: var(--t-2);
}
.rd-ch-ru { font-family: var(--serif); font-style: italic; font-size: var(--t-00); opacity: .8; }
.rd-ch-state {
font-family: var(--sans); font-variant-numeric: tabular-nums;
font-size: var(--t-00); letter-spacing: .12em; opacity: .85;
}
.rd-ch-done .rd-orn { color: var(--gold-leaf, #b8860b); opacity: 1; }
.rd-ch-done .rd-ch-state { opacity: 1; }
.rd-ch-fill {
position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
background: rgba(0, 0, 0, .25);
}
.rd-ch-fill i {
display: block; height: 100%; background: rgba(255, 255, 255, .88);
transition: width 400ms var(--e-std, ease);
}
.rd-ch-body { padding: 4px 14px 14px; display: grid; gap: 12px; }
.rd-ch-buy {
margin: 0; font-family: var(--serif);
font-size: clamp(16px, .98rem + .3vw, 20px); line-height: 1.5;
color: var(--carbon); text-wrap: pretty;
}
.rd-ch-buy b { font-variant-numeric: tabular-nums; }
.rd-lessons {
display: grid; gap: 0;
border-top: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
}
.rd-lesson {
display: grid; grid-template-columns: 30px 1fr auto; gap: 2px 14px;
align-items: baseline; width: 100%; text-align: left;
background: transparent; border: 0; border-radius: 0;
border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
padding: 13px 14px 14px; font-family: inherit; color: inherit; cursor: pointer;
transition: background-color 180ms cubic-bezier(.22, 1, .36, 1);
}
.rd-lesson:hover {
background: color-mix(in srgb, var(--ink, var(--carbon)) 4%, var(--galley));
box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ink, var(--carbon)) 45%, transparent);
}
.rd-lesson:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.rd-l-no {
font-family: var(--bill); font-weight: 900; font-size: var(--t-0);
color: color-mix(in srgb, var(--steel) 70%, transparent);
font-variant-numeric: tabular-nums; text-align: right;
align-self: start; padding-top: .18em;
}
.rd-l-here {
border-left: 3px solid var(--ink, var(--signal));
background: color-mix(in srgb, var(--ink, var(--carbon)) 9%, var(--galley));
grid-template-columns: 44px 1fr auto;
padding-top: 16px; padding-bottom: 17px;
box-shadow: 0 1px 0 color-mix(in srgb, var(--ink, var(--carbon)) 18%, transparent);
}
.rd-l-here:hover {
background: color-mix(in srgb, var(--ink, var(--carbon)) 13%, var(--galley));
}
.rd-l-here .rd-l-no {
color: var(--ink, var(--carbon)); white-space: nowrap;
font-size: var(--t-1);
}
.rd-l-here .rd-l-ru { font-size: clamp(17.5px, 1.06rem + .34vw, 22.5px); }
.rd-l-here .rd-l-state { color: var(--ink, var(--carbon)); }
.rd-hand {
font-style: normal; display: inline-block; margin-right: 4px;
color: var(--ink, var(--signal)); font-size: 1.35em;
}
body.motion-full .rd-hand { animation: rd-hand-beckon 2.2s ease-in-out infinite; }
@keyframes rd-hand-beckon {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(3px); }
}
body.motion-full .rd-open .rd-ch-fill i { animation: rd-fill-grow .9s cubic-bezier(.22, 1, .36, 1) .2s backwards; }
@keyframes rd-fill-grow { from { width: 0; } }
.rd-l-mid { display: grid; gap: 3px; min-width: 0; }
.rd-l-ru {
font-family: var(--serif);
font-size: clamp(16.5px, 1.01rem + .32vw, 21px);
line-height: 1.5; color: var(--carbon);
text-wrap: pretty;
}
.rd-l-en {
font-size: var(--t-0); line-height: 1.45;
color: color-mix(in srgb, var(--steel) 88%, transparent);
font-style: italic; text-wrap: pretty;
}
.rd-l-state {
font-family: var(--bill); font-size: var(--t-0); font-weight: 700;
color: var(--steel); letter-spacing: .06em;
font-variant-numeric: tabular-nums; white-space: nowrap;
align-self: start; padding-top: .28em;
}
.rd-l-done {
background: color-mix(in srgb, var(--ink, var(--carbon)) 5%, var(--galley));
}
.rd-l-done .rd-l-ru {
text-decoration: line-through;
text-decoration-color: color-mix(in srgb, var(--ink, var(--carbon)) 55%, transparent);
text-decoration-thickness: 1px;
opacity: .82;
}
.rd-l-done .rd-l-no { color: color-mix(in srgb, var(--ink, var(--carbon)) 60%, transparent); }
.rd-l-done .rd-l-state {
color: var(--ink, var(--carbon));
text-transform: uppercase; letter-spacing: .16em; font-size: var(--t-00);
}
[data-theme="dark"] .rd-l-here .rd-l-no,
[data-theme="dark"] .rd-l-here .rd-l-state,
[data-theme="dark"] .rd-l-done .rd-l-state {
color: color-mix(in srgb, var(--ink, var(--carbon)) 38%, var(--carbon));
}
.rd-l-mv {
font-family: var(--bill); font-size: var(--t-00); text-transform: uppercase;
letter-spacing: .2em; color: var(--ink, var(--carbon));
margin-top: 5px; opacity: .85;
}
[data-theme="dark"] .rd-l-mv {
color: color-mix(in srgb, var(--ink, var(--carbon)) 38%, var(--carbon));
}
.rd-lesson.rd-mv-door:not(.rd-l-done) {
box-shadow: inset 3px 0 0 var(--ink, var(--carbon));
}
.rd-lesson.rd-mv-forge:not(.rd-l-done) {
box-shadow: inset 5px 0 0 color-mix(in srgb, var(--ink, var(--carbon)) 78%, var(--carbon));
background: color-mix(in srgb, var(--ink, var(--carbon)) 7%, var(--galley));
}
.rd-lesson.rd-mv-gather:not(.rd-l-done) {
background:
repeating-linear-gradient(transparent 0 12px,
color-mix(in srgb, var(--ink, var(--carbon)) 10%, transparent) 12px 13px),
var(--galley);
}
.rd-lesson.rd-mv-forge:not(.rd-l-done):hover {
background: color-mix(in srgb, var(--ink, var(--carbon)) 11%, var(--galley));
}
@media (max-width: 560px) {
.rd-lesson {
grid-template-columns: 22px 1fr;
padding: 12px 10px 13px; gap: 2px 10px;
}
.rd-l-here { grid-template-columns: 34px 1fr; }
.rd-l-state {
grid-column: 2; justify-self: start;
padding-top: 5px; letter-spacing: .12em;
}
.rd-l-done .rd-l-state { padding-top: 6px; }
}
.rd-glass .rd-vol::before {
content: ''; position: absolute; inset: 0; z-index: 2;
background: linear-gradient(115deg, transparent 32%,
rgba(255, 255, 255, .16) 40%, rgba(255, 255, 255, .05) 47%, transparent 56%);
pointer-events: none;
}
.rd-glass .rd-opens { color: var(--steel); }
.rd-ch-glass .rd-ch-head { position: relative; }
.rd-ch-glass .rd-ch-head::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(115deg, transparent 30%,
rgba(255, 255, 255, .18) 40%, rgba(255, 255, 255, .06) 48%, transparent 58%);
pointer-events: none;
}
.rd-glass-row {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
padding: 12px 16px;
background: var(--sheet); border: 1px solid var(--rule);
box-shadow: inset 4px 0 0 var(--ink, var(--carbon));
}
.rd-glass-say {
flex: 1 1 240px; font-family: var(--serif); font-style: italic;
font-size: var(--t-1); color: var(--carbon);
}
.rd-glass-say b { font-style: normal; font-variant-numeric: tabular-nums; }
.rd-ask { position: relative; padding: 18px 0; }
.rd-ask-plate {
position: relative; overflow: hidden;
display: grid; grid-template-columns: auto 1fr auto;
gap: 10px 18px; align-items: center;
padding: 16px 20px;
background: var(--sheet); border: 1px solid var(--carbon);
box-shadow: var(--lift);
}
.rd-ask-plate::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(115deg, transparent 34%,
rgba(255, 255, 255, .16) 42%, rgba(255, 255, 255, .05) 49%, transparent 58%);
pointer-events: none;
}
.rd-ask-orn { font-size: var(--t-4); color: var(--carbon); }
.rd-ask-mid { display: grid; gap: 2px; min-width: 0; }
.rd-ask-ti {
font-family: var(--bill); text-transform: uppercase; font-weight: 700;
letter-spacing: .1em; font-size: var(--t-1); color: var(--carbon);
}
.rd-ask-line {
font-family: var(--serif); font-style: italic; font-size: var(--t-1);
color: var(--carbon); font-variant-numeric: tabular-nums;
}
.rd-ask-btn { position: relative; }
@media (max-width: 620px) {
.rd-ask-plate { grid-template-columns: auto 1fr; }
.rd-ask-btn { grid-column: 1 / -1; justify-self: start; }
}
.cs-standing b { font-variant-numeric: tabular-nums; }
.cs-ref { margin-top: 30px; border-top: 2px solid var(--carbon); padding-top: 6px; }
.cs-ref .rd-ref-hit .rd-vol { background: var(--sheet); }
@media (max-width: 620px) {
.rd::before { left: 21px; }
.rd-hit, .rd-mark, .rd-beyond { grid-template-columns: 48px 1fr; gap: 0 12px; }
.rd-hit { padding: 12px; }
.rd-vol { width: 46px; height: 62px; }
.rd-vol-a { height: 46px; }
.rd-book::after { font-size: 52px; }
.rd-ch-head::before { right: 64px; font-size: 48px; }
.rd-open-box { margin: 0 10px 16px 10px; }
.rd-who { grid-template-columns: 56px 1fr; }
.rd-who-fig { width: 56px; height: 56px; padding: 4px; }
}
@media (prefers-reduced-motion: no-preference) {
.rd::before { transform-origin: 50% 0; }
@keyframes rd-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.rd::before {
animation: rd-draw linear both;
animation-timeline: view();
animation-range: entry 30% cover 62%;
}
@keyframes rd-set { from { transform: translateX(-18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rd-vol-set {
from { transform: perspective(340px) rotateY(-10deg) translateX(-18px); opacity: 0; }
to { transform: perspective(340px) rotateY(-10deg); opacity: 1; }
}
.rd-vol {
animation: rd-vol-set linear both;
animation-timeline: view();
animation-range: entry 8% entry 46%;
}
.rd-body {
animation: rd-set linear both;
animation-timeline: view();
animation-range: entry 16% entry 58%;
}
@keyframes rd-here {
0%, 92%, 100% { box-shadow: 0 0 0 3px var(--room), 0 0 0 5px var(--signal); }
96%           { box-shadow: 0 0 0 3px var(--room), 0 0 0 8px var(--signal); }
}
.rd-here .rd-vol { animation: rd-here 8s ease-in-out infinite; }
}
@keyframes rd-seal {
0%   { transform: scale(1); }
38%  { transform: scale(1.12); }
100% { transform: scale(1); }
}
.rd-sealing .rd-vol {
animation: rd-seal 620ms var(--e-snap, cubic-bezier(.2,.9,.3,1.2)) both;
background: var(--ink, var(--carbon));
}
.rd-sealing .rd-vol b { color: var(--galley); mix-blend-mode: normal; filter: none; }
@media (prefers-reduced-motion: reduce) { .rd-sealing .rd-vol { animation: none; } }
.cs-group .cs-letter {
cursor: pointer; text-align: left; font-family: inherit; color: inherit;
transition: background 120ms linear;
}
.cs-group .cs-letter:hover { background: var(--sheet); }
.cs-group .cs-letter:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.ab-win {
margin-top: 14px; padding: 16px 18px;
background: var(--sheet); border: 1px solid var(--carbon);
box-shadow: var(--lift);
display: grid; gap: 12px;
}
.ab-count { font-family: var(--serif); font-size: var(--t-2); color: var(--carbon); }
.ab-count b { font-variant-numeric: tabular-nums; }
.ab-read { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-w {
font-family: var(--serif); font-size: var(--t-2); cursor: pointer;
background: var(--galley); border: 1px solid var(--carbon); border-radius: 0;
padding: 5px 12px; color: inherit;
}
.ab-w:hover { background: var(--room); }
.ab-w:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.ab-line {
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
border-top: 1px solid var(--rule); padding-top: 12px;
}
.ab-ru { font-family: var(--serif); font-size: var(--t-4); color: var(--carbon); }
.ab-en { font-family: var(--serif); font-style: italic; font-size: var(--t-1); color: var(--steel); }
.ab-say-line { padding: 4px 10px; }
.gx-mate {
position: fixed; right: clamp(14px, 4vw, 48px); bottom: clamp(12px, 3vh, 34px);
width: clamp(96px, 13vw, 160px); height: clamp(96px, 13vw, 160px);
pointer-events: none; z-index: 1;
display: grid; justify-items: center;
}
.gx-mate::before {
content: ''; position: absolute; inset: 4%; border-radius: 50%;
background: radial-gradient(circle at 50% 38%,
color-mix(in srgb, var(--ink, var(--carbon)) 7%, var(--galley)),
color-mix(in srgb, var(--ink, var(--carbon)) 20%, var(--galley)));
border: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 55%, var(--carbon));
box-shadow: inset 0 0 0 4px var(--galley),
inset 0 0 0 5px color-mix(in srgb, var(--ink, var(--carbon)) 40%, transparent),
0 2px 3px color-mix(in srgb, var(--ink, var(--carbon)) 18%, transparent), 0 9px 22px -10px color-mix(in srgb, var(--ink, var(--carbon)) 40%, transparent);
}
.gx-mate svg { position: relative; filter: saturate(.8) sepia(.08) contrast(1.03); }
.gx-mate-line {
position: absolute; bottom: 100%; right: 0; margin-bottom: 6px;
max-width: 220px; width: max-content;
font-family: var(--serif); font-style: italic; font-size: var(--t-0);
color: var(--carbon); background: var(--sheet);
border: 1px solid var(--carbon); box-shadow: var(--lift-sm);
padding: 6px 12px; text-align: right;
transition: opacity 600ms var(--e-std, ease);
}
.gx-mate-line-gone { opacity: 0; }
.gx-topic i { font-style: normal; margin-right: 8px; color: var(--ink, var(--carbon)); }
.gx-stress-word {
font-family: var(--serif); font-size: clamp(38px, 7vw, 64px);
line-height: 1.15; color: var(--carbon);
}
.gx-vowel {
font: inherit; color: inherit; background: none; cursor: pointer;
border: 0; border-bottom: 3px solid var(--rule); border-radius: 0;
padding: 0 2px; margin: 0 1px;
}
.gx-vowel:hover:not(:disabled) { border-bottom-color: var(--ink, var(--carbon)); }
.gx-vowel:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.gx-vowel:disabled { cursor: default; }
.gx-vowel.gx-right {
border-bottom-color: var(--ink, var(--carbon));
background: color-mix(in srgb, var(--ink, var(--carbon)) 14%, transparent);
}
.gx-vowel.gx-wrong { opacity: .45; }
.gx-study {
font-family: var(--serif); border-left: 4px solid var(--ink, var(--carbon));
padding: 6px 0 6px 18px;
}
.gx-topic em {
font-style: normal; margin-left: 12px; letter-spacing: .04em;
font-size: var(--t-00); color: var(--steel); font-variant-numeric: tabular-nums;
}
.gx-fell, .gx-near { display: grid; gap: 8px; margin-top: 4px; }
.gx-fell-n, .gx-near-n {
font-family: var(--serif); font-style: italic; font-size: var(--t-1);
color: var(--carbon);
}
.gx-near-line {
font-family: var(--serif); font-size: var(--t-1); color: var(--carbon);
border-left: 3px solid var(--ink, var(--carbon)); padding-left: 12px;
}
.gx-near-line b {
display: block; font-family: var(--sans); font-weight: 400;
font-size: var(--t-00); color: var(--steel); letter-spacing: .04em;
}
.gx-cliff { display: grid; gap: 6px; justify-items: center; margin-top: 10px; }
.gx-cliff:empty { display: none; }
.gx-cliff-rule { width: 120px; height: 1px; background: var(--rule); margin-bottom: 6px; }
.gx-cliff-next {
font-family: var(--sans); font-size: var(--t-00); letter-spacing: .14em;
text-transform: uppercase; color: var(--steel);
}
.gx-cliff-next b { color: var(--carbon); }
.gx-cliff-line { font-family: var(--serif); font-size: var(--t-2); color: var(--carbon); text-align: center; }
.gx-cliff-line span {
display: block; font-style: italic; font-size: var(--t-0); color: var(--steel);
}
.gx-cliff-cost {
font-size: var(--t-00); color: var(--steel); letter-spacing: .06em;
font-variant-numeric: tabular-nums;
}
.gx-inst {
display: grid; gap: 8px; justify-items: start; margin-top: 10px;
border-left: 3px solid var(--ink, var(--carbon)); padding-left: 12px;
}
.gx-inst-n { font-family: var(--serif); font-size: var(--t-1); color: var(--carbon); }
.rd-endow { margin: -2px 0 0; font-family: var(--serif); font-style: italic;
font-size: clamp(15px, .93rem + .22vw, 18px); line-height: 1.5;
color: var(--carbon); text-wrap: pretty; }
.rd-endow b { font-variant-numeric: tabular-nums; font-style: normal; }
.rd-inst { margin: 0; font-family: var(--serif); font-style: italic;
font-size: clamp(15px, .93rem + .22vw, 18px); line-height: 1.5;
color: var(--carbon); text-wrap: pretty; }
.rd-inst-read {
background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer;
font: inherit; color: inherit; font-style: normal;
text-decoration: underline dotted; text-underline-offset: 3px;
}
.rd-inst-read:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.gx-due { margin: 0; font-family: var(--serif); font-size: var(--t-1); color: var(--steel); }
.gx-due b { font-variant-numeric: tabular-nums; color: var(--carbon); }
.gx-ghostline {
margin: 2px 0 0; font-family: var(--sans); font-size: var(--t-0);
color: var(--steel); display: grid; gap: 4px;
}
.gx-ghost-ru { font-family: var(--serif); font-size: var(--t-2); color: var(--carbon); }
.gx-ghost { opacity: .38; letter-spacing: .04em; }
.gx-ghost-shy { font-style: italic; }
.tn-ghost { display: block; font-family: var(--serif); font-size: var(--t-2); color: var(--carbon); margin-top: 3px; }
.tn-ghost .gx-ghost { opacity: .38; }
.tn-ghost-shy { display: block; font-style: italic; font-size: var(--t-00); color: var(--steel); margin-top: 2px; }
.gx-take {
background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer;
font: inherit; color: inherit; text-decoration: underline dotted;
text-underline-offset: 3px;
}
.gx-take:disabled { text-decoration: none; cursor: default; color: var(--steel); }
.gx-take:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.gx-sealed { justify-items: center; text-align: center; }
.gx-seal-wrap { margin-top: 6px; }
.gx-sealed-ti { margin: 6px 0 0; font-family: var(--serif); font-size: clamp(26px, 4.6vw, 40px); }
.gx-sealed-ru { font-size: var(--t-1); color: var(--steel); }
.gx-sealed-buy { margin: 8px 0 0; font-family: var(--serif); font-size: var(--t-2); }
.gx-sealed-buy b { font-variant-numeric: tabular-nums; }
.gx-toward { margin: 0; font-family: var(--serif); font-style: italic; font-size: var(--t-1); color: var(--carbon); }
.gx-bye { margin: 0; font-family: var(--serif); font-style: italic; font-size: var(--t-1); color: var(--steel); }
.gx-bookdone { margin: 0; font-family: var(--serif); font-size: var(--t-2); color: var(--carbon); }
.gx-mate-done {
position: relative; width: 84px; height: 84px; margin: 4px auto 0;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) .rd-ch.rd-open .rd-lesson,
body:not(.motion-low) .rd-book.rd-open .rd-lesson {
animation: rd-l-in 320ms var(--e-std, ease) backwards;
}
body:not(.motion-low) .rd-lesson:nth-child(2) { animation-delay: 45ms; }
body:not(.motion-low) .rd-lesson:nth-child(3) { animation-delay: 90ms; }
body:not(.motion-low) .rd-lesson:nth-child(4) { animation-delay: 135ms; }
body:not(.motion-low) .rd-lesson:nth-child(5) { animation-delay: 180ms; }
body:not(.motion-low) .rd-lesson:nth-child(6) { animation-delay: 225ms; }
body:not(.motion-low) .rd-lesson:nth-child(n+7) { animation-delay: 260ms; }
@keyframes rd-l-in {
from { opacity: 0; transform: translateX(-7px); }
to { opacity: 1; transform: none; }
}
}
.syl { margin: 6px 0 30px; }
.syl-band {
border: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 40%, var(--carbon));
border-left: 6px solid var(--ink, var(--carbon));
background: color-mix(in srgb, var(--ink, var(--carbon)) 4%, var(--sheet, transparent));
box-shadow: 0 2px 0 var(--press, rgba(0,0,0,.12));
}
.syl-band summary {
display: flex; align-items: center; gap: 14px; padding: 14px 16px;
cursor: pointer; list-style: none;
}
.syl-band summary::-webkit-details-marker { display: none; }
.syl-band summary:hover { background: color-mix(in srgb, var(--ink, var(--carbon)) 7%, transparent); }
.syl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 12px 0; }
.syl-card {
display: flex; align-items: center; gap: 11px; text-align: left;
padding: 11px 13px; background: var(--galley); color: inherit; cursor: pointer;
border: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 55%, var(--carbon));
box-shadow: 0 3px 0 var(--press, rgba(0,0,0,.16));
position: relative;
}
.syl-card:hover { background: var(--sheet); transform: translateY(-1px); box-shadow: 0 2px 0 var(--press, rgba(0,0,0,.16)); }
.syl-card:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--press, rgba(0,0,0,.16)); }
.syl-c-emb { width: 34px; height: 34px; flex: 0 0 auto; color: var(--ink, var(--carbon)); display: flex; align-items: center; justify-content: center; }
.syl-c-emb svg { width: 100%; height: 100%; }
.syl-c-emb b { font-size: 24px; font-weight: 400; }
.syl-c-mid { display: grid; min-width: 0; }
.syl-c-mid b { font-family: var(--serif); font-size: var(--t-1); line-height: 1.25; }
.syl-c-mid em { font-style: normal; font-size: .76rem; opacity: .68; }
.syl-c-done { opacity: .82; }
.syl-c-seal {
position: absolute; top: 6px; right: 8px;
font-size: var(--t-00); color: var(--ink, var(--carbon));
}
.syl-c-mod .syl-c-mid em::after { content: ' \00b7 exam set'; letter-spacing: .02em; }
.syl-arcs { display: grid; gap: 9px; margin: 12px 0; }
.syl-arc {
display: flex; align-items: center; gap: 13px; text-align: left;
padding: 11px 14px; background: var(--galley); color: inherit; cursor: pointer;
border: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 55%, var(--carbon));
box-shadow: 0 3px 0 var(--press, rgba(0,0,0,.16));
}
.syl-arc:hover { background: var(--sheet); transform: translateY(-1px); }
.syl-mark { font-style: normal; font-size: 1.6rem; color: var(--ink, var(--carbon)); width: 32px; text-align: center; flex: 0 0 auto; }
.syl-arc-mid { display: grid; gap: 3px; min-width: 0; flex: 1; }
.syl-arc-mid b { font-family: var(--serif); font-size: var(--t-1); }
.syl-arc-mid em { font-style: normal; font-size: var(--t-00); opacity: .7; }
.syl-dots { display: flex; gap: 4px; flex-wrap: wrap; }
.syl-dots i {
width: 9px; height: 9px; border-radius: 50%;
border: 1.5px solid color-mix(in srgb, var(--ink, var(--carbon)) 60%, transparent);
}
.syl-dots .syl-d-held { background: var(--ink, var(--carbon)); border-color: var(--ink, var(--carbon)); }
.syl-go { margin-left: auto; font-size: 1.4rem; opacity: .5; flex: 0 0 auto; }
.syl-planned {
margin-top: 12px; font-size: var(--t-00); line-height: 1.8; opacity: .55;
font-style: italic; max-width: 70ch;
}
.syl-pl-cap {
font-style: normal; font-variant: all-small-caps; letter-spacing: .06em;
margin-right: 8px; opacity: .9;
border-bottom: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 40%, transparent);
}
.cs-wings {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin: 18px 0 22px;
}
.cs-wing-tab {
display: flex; align-items: center; gap: 13px; text-align: left;
padding: 13px 16px; cursor: pointer; color: inherit;
background: color-mix(in srgb, var(--carbon) 4%, var(--sheet, transparent));
border: 1px solid color-mix(in srgb, var(--carbon) 45%, transparent);
box-shadow: none; opacity: .74;
}
.cs-wing-tab:hover { opacity: .95; background: var(--galley); }
.cs-wing-tab[aria-selected="true"] {
opacity: 1; background: var(--galley);
border-color: var(--carbon);
border-bottom: 4px solid var(--accent, var(--carbon));
box-shadow: 0 3px 0 var(--press, rgba(0,0,0,.16));
}
.cs-wt-dev {
font-style: normal; font-family: var(--serif); font-size: 1.7rem;
line-height: 1; color: var(--accent, var(--carbon));
width: 34px; text-align: center; flex: 0 0 auto;
}
.cs-wt-mid { display: grid; gap: 2px; min-width: 0; }
.cs-wt-mid b { font-family: var(--serif); font-size: var(--t-1); line-height: 1.25; }
.cs-wt-mid em { font-style: normal; font-size: var(--t-00); opacity: .7; }
#v-course[data-wing="course"] .cs-wing-books { display: none; }
#v-course[data-wing="books"] .cs-wing-course { display: none; }
.cs-shelf-lede { max-width: 70ch; margin: 0 0 16px; }
@media (max-width: 560px) {
.cs-wings { gap: 8px; }
.cs-wing-tab { padding: 10px 10px; gap: 9px; }
.cs-wt-dev { font-size: var(--t-3); width: 24px; }
.cs-wt-mid b { font-size: var(--t-0); }
.cs-wt-mid em { font-size: .7rem; }
}
@media (max-width: 600px) {
#v-course .room-head .cs-lede:not(.cs-standing) {
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
}
@keyframes gx-stamp {
0%   { transform: scale(1); }
22%  { transform: scale(0.965); }
55%  { transform: scale(0.965); }
100% { transform: scale(1); }
}
.gx-stamped { animation: gx-stamp calc(0.26s * var(--motion)) var(--e-std) both; }
@keyframes gx-nudge {
0% { transform: translateX(0); }
30% { transform: translateX(-4px); }
65% { transform: translateX(2px); }
100% { transform: translateX(0); }
}
.gx-nudged { animation: gx-nudge calc(0.2s * var(--motion)) ease-out both; }
@keyframes gx-rail-set {
from { transform: scaleY(0); }
to   { transform: scaleY(1); }
}
.gx-rail i { transform-origin: 50% 100%; }
.gx-rail .gx-r-done { animation: gx-rail-set calc(0.18s * var(--motion)) var(--e-std) both; }
.gx-top { grid-template-columns: 1fr auto auto auto; gap: 0 14px; }
.gx-runn {
font-family: var(--mono); font-size: var(--t-00);
letter-spacing: .08em; text-transform: uppercase;
color: var(--steel);
align-self: center;
}
.gx-again {
display: block;
font-family: var(--sans); font-size: var(--t-00);
letter-spacing: .06em; text-transform: none;
color: var(--steel); margin-top: 3px;
}
@keyframes gx-glyph-strike {
0%   { opacity: 1; transform: scale(1.12); }
60%  { transform: scale(0.98); }
100% { opacity: 1; transform: scale(1); }
}
.gx-glyph {
display: inline-block;
animation: gx-glyph-strike calc(0.14s * var(--motion)) var(--e-std) both;
}
.gx-reveal { font-style: normal; }
@keyframes gx-lay3d {
0%   { opacity: 0; transform: perspective(900px) rotateX(-9deg) translateY(-14px); box-shadow: 0 0 0 var(--ink, var(--carbon)); }
55%  { opacity: 1; transform: perspective(900px) rotateX(0deg) translateY(0);      box-shadow: 2px 2px 0 var(--ink, var(--carbon)); }
100% { opacity: 1; transform: none; box-shadow: 6px 6px 0 var(--ink, var(--carbon)); }
}
.gx-done .gx-print.gx-lay {
transform-origin: 50% 100%;
animation: gx-lay3d calc(0.5s * var(--motion)) var(--e-std) both;
}
.gx-rule { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.gx-rule i {
flex: 1; height: 2px; background: var(--carbon); display: block;
transform-origin: 0 50%;
animation: gx-rule-draw calc(0.32s * var(--motion)) var(--e-std) calc(0.5s * var(--motion)) both;
}
@keyframes gx-rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.gx-orn {
color: var(--signal); font-size: var(--t-2); line-height: 1;
animation: gx-orn-stamp calc(0.2s * var(--motion)) var(--e-std) calc(0.82s * var(--motion)) both;
}
@keyframes gx-orn-stamp {
0%   { opacity: 0; transform: scale(1.3); }
40%  { opacity: 1; transform: scale(0.98); }
70%  { transform: scale(0.98); }
100% { opacity: 1; transform: scale(1); }
}
.gx-facts {
display: flex; flex-wrap: wrap; gap: 8px 26px;
justify-content: center;
font-family: var(--sans); font-size: var(--t-0); color: var(--steel);
}
.gx-facts b {
font-family: var(--mono); font-weight: 400;
font-size: var(--t-3); color: var(--carbon);
margin-right: 5px;
}
body.motion-low .gx-stamped,
body.motion-low .gx-nudged,
body.motion-low .gx-rail .gx-r-done,
body.motion-low .gx-glyph,
body.motion-low .gx-done .gx-print.gx-lay,
body.motion-low .gx-rule i,
body.motion-low .gx-orn { animation: none; }
@media (prefers-reduced-motion: reduce) {
body:not(.motion-full) .gx-stamped,
body:not(.motion-full) .gx-nudged,
body:not(.motion-full) .gx-rail .gx-r-done,
body:not(.motion-full) .gx-glyph,
body:not(.motion-full) .gx-done .gx-print.gx-lay,
body:not(.motion-full) .gx-rule i,
body:not(.motion-full) .gx-orn { animation: none; }
}
.glist { gap: 2px; }
.glesson-card {
border-radius: 0; border: 1px solid var(--carbon);
background: var(--galley); box-shadow: none;
padding: 12px 16px;
}
.glesson-card:hover { background: var(--sheet); transform: none; box-shadow: none; }
.glesson-card .gru { font-family: var(--bill); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--carbon); }
.glesson-card .gen2 { font-family: var(--serif); font-style: italic; color: var(--steel); }
.glesson-card { position: relative; padding-left: 56px; }
.glesson-card .g-no {
position: absolute; left: 14px; top: 13px;
font-family: var(--serif); font-style: italic; font-size: var(--t-2);
color: var(--steel); transition: color 160ms var(--e-std, ease);
}
.glesson-card:hover .g-no { color: var(--signal-ink); }
.glesson-card .g-mark { position: absolute; right: 12px; top: 10px; color: var(--signal-ink); font-weight: 700; }
.glesson-card.g-read { background: color-mix(in srgb, var(--sheet) 55%, var(--galley)); }
.glesson-card.g-read .gru { color: color-mix(in srgb, var(--carbon) 72%, var(--galley)); }
.gex {
border-radius: 0; border: none; border-left: 3px solid var(--carbon);
background: var(--galley); padding: 12px 16px; margin: 12px 0;
}
.gex mark { background: transparent; color: inherit; box-shadow: inset 0 -2px 0 var(--signal); }
.gex .gru-s { font-family: var(--serif); font-size: var(--t-2); }
.gex .gnote { font-size: var(--t-00); color: var(--steel); letter-spacing: .04em; margin-top: 4px; }
.gchip {
border-radius: 0; border: 1px solid var(--carbon);
background: var(--galley); color: var(--carbon);
}
#lesson-body p { font-family: var(--serif); font-size: var(--t-2); line-height: 1.65; max-width: 62ch; }
#v-lesson h2 { font-family: var(--bill); text-transform: uppercase; letter-spacing: .04em; }
#curtain {
position: fixed; inset: 0; z-index: 400;
display: grid; place-content: center; gap: 20px;
background: var(--room);
transition: opacity 450ms var(--e-std, ease), visibility 450ms;
animation: curtain-failsafe 1ms linear 12s forwards;
}
body.booted #curtain { opacity: 0; visibility: hidden; }
@keyframes curtain-failsafe { to { opacity: 0; visibility: hidden; } }
.curtain-mark {
display: grid; justify-items: center;
font-family: var(--bill); text-transform: uppercase;
letter-spacing: .3em; font-size: clamp(15px, 2.6vw, 22px);
color: var(--carbon);
}
.curtain-mark .cm-t {
font-family: var(--serif); font-style: italic; text-transform: none;
letter-spacing: .05em; font-size: .82em; margin: 3px 0;
color: var(--signal, #f6c445);
}
.curtain-dots { display: flex; gap: 11px; justify-content: center; }
.curtain-dots i {
width: 7px; height: 7px; border-radius: 50%;
background: var(--carbon); opacity: .22;
animation: curtain-dot 1.9s ease-in-out infinite;
}
.curtain-dots i:nth-child(2) { animation-delay: .32s; }
.curtain-dots i:nth-child(3) { animation-delay: .64s; }
@keyframes curtain-dot { 0%, 100% { opacity: .22; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) .view.show:not(#v-read) {
animation: alive-sheet 300ms var(--e-std, ease) both;
}
@keyframes alive-sheet {
from { opacity: 0; transform: translateY(7px); }
to   { opacity: 1; transform: none; }
}
}
.btn { transition: background 160ms linear, border-color 160ms linear,
transform 160ms var(--e-std, ease); }
.btn:not(:disabled):hover { transform: translateY(-1px); }
.btn:not(:disabled):active { transform: translateY(0); transition-duration: 60ms; }
.card, .tn-keys button, .seals .seal {
transition: border-color 180ms linear, box-shadow 180ms var(--e-std, ease);
}
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) #tn-begin,
body:not(.motion-low) #btn-resume {
animation: alive-here 8s ease-in-out infinite;
}
@keyframes alive-here {
0%, 92%, 100% { box-shadow: 0 0 0 0 transparent; }
96%           { box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 35%, transparent); }
}
}
.nav-tabs button { position: relative; }
.nav-tabs button.active::after {
content: ''; position: absolute; left: 9px; right: 9px; bottom: 2px;
height: 2px; background: var(--verm, var(--signal));
transform-origin: 0 50%;
}
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) .nav-tabs button.active::after {
animation: nav-draw 260ms var(--e-std, ease) both;
}
@keyframes nav-draw { from { transform: scaleX(0); } }
}
.nav-tabs button:not(.active)::after {
content: ''; position: absolute; left: 9px; right: 9px; bottom: 2px;
height: 2px; background: var(--carbon); opacity: .28;
transform: scaleX(0); transform-origin: 0 50%;
transition: transform 200ms var(--e-std, ease);
}
.nav-tabs button:not(.active):hover::after { transform: scaleX(1); }
.masthead { transition: background 1200ms var(--e-std, ease); }
body[data-daypart="morning"] .masthead { background: color-mix(in srgb, var(--steel) 11%, transparent); }
body[data-daypart="evening"] .masthead { background: color-mix(in srgb, var(--play, var(--lazur)) 12%, transparent); }
body[data-daypart="night"]  .masthead { background: color-mix(in srgb, var(--carbon) 13%, transparent); }
body {
--patina: 0%;
--lived: color-mix(in srgb, var(--rule-room) var(--patina), var(--room));
--daypart-ink: transparent;
--daypart-mix: 0%;
transition: background 1600ms var(--e-std, ease);
background: color-mix(in srgb, var(--daypart-ink) var(--daypart-mix), var(--lived));
}
body[data-daypart="morning"] { --daypart-ink: var(--steel);  --daypart-mix: 5%; }
body[data-daypart="evening"] { --daypart-ink: var(--play, var(--lazur)); --daypart-mix: 8%; }
body[data-daypart="night"]   { --daypart-ink: var(--carbon); --daypart-mix: 14%; }
body[data-standing="1"] { --patina: 1.5%; }
body[data-standing="2"] { --patina: 3%; }
body[data-standing="3"] { --patina: 4.5%; }
body[data-standing="4"] { --patina: 6%; }
body[data-standing="2"] .masthead .rule span,
body[data-standing="3"] .masthead .rule span,
body[data-standing="4"] .masthead .rule span { color: var(--signal); }
body[data-standing="3"] .nav-tabs button.active::after,
body[data-standing="4"] .nav-tabs button.active::after { background: var(--signal); }
body[data-standing="4"] { --rule-room: color-mix(in srgb, var(--signal) 40%, var(--steel)); }
#v-read { position: relative; }
#read-blooms .rb {
position: fixed; top: 14vh; bottom: 14vh; width: min(26vw, 340px);
pointer-events: none; z-index: 0;
display: grid; place-items: center;
}
#read-blooms .rb i {
font-style: normal; font-size: clamp(120px, 15vw, 210px);
color: var(--ink, var(--carbon)); opacity: .07;
transform: rotate(-8deg);
}
#read-blooms .rb-l { left: -6vw; }
#read-blooms .rb-r { right: -6vw; transform: scaleX(-1); }
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) #read-blooms .rb { animation: gx-bloom-in 1200ms var(--e-std, ease) both; }
}
@media (max-width: 1199px) { #read-blooms { display: none; } }
#scene-head .orn { color: var(--ink, var(--carbon)); }
#scene-head h2 { position: relative; z-index: 1; }
@media (min-width: 1280px) {
.margin-note {
position: absolute; left: calc(50% + 18em + 24px); top: 120px;
width: 230px; text-align: left; margin: 0;
border-left: 3px solid var(--ink, var(--carbon)); padding-left: 12px;
}
}
#v-read #text {
border: 1px solid var(--edge);
border-top: 4px solid var(--book-ink, var(--carbon));
box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 14px 44px -18px rgba(20,16,8,.4);
}
#v-words.show   { background: linear-gradient(180deg, color-mix(in srgb, var(--steel) 9%, transparent), transparent 340px); }
#v-review.show  { background: radial-gradient(ellipse 90% 62% at 50% 30%, transparent 30%, color-mix(in srgb, var(--carbon) 12%, transparent) 100%); }
#v-journey.show { background: linear-gradient(180deg, color-mix(in srgb, var(--signal) 4%, transparent), transparent 340px); }
#v-course.show  { background: linear-gradient(180deg,
color-mix(in srgb, var(--signal, #f6c445) 8%, transparent),
color-mix(in srgb, var(--rule) 30%, transparent) 220px,
transparent 460px); }
#v-review #rev-card, #rev-card {
--rev-lamp: 0 1px 0 rgba(255,255,255,.5) inset,
0 10px 40px -12px rgba(20, 16, 8, .35);
border-top: 4px solid var(--ink, var(--carbon));
transition: border-top-color 350ms linear;
}
#v-review .rev-head { opacity: .82; }
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) .view.show:not(#v-read) {
animation: alive-sheet-2 380ms var(--e-std, ease) both;
}
@keyframes alive-sheet-2 {
from { opacity: 0; transform: translateY(16px) scale(.995); }
to   { opacity: 1; transform: none; }
}
}
.rd-ch { transition: transform 200ms var(--e-std, ease), box-shadow 200ms var(--e-std, ease); }
@media (hover: hover) {
.rd-ch:hover { transform: translateY(-2px); box-shadow: 0 6px 18px -10px rgba(20,16,8,.4); }
.rd-ch:hover .rd-orn { transform: rotate(-8deg); }
}
.rd-orn { transition: transform 220ms var(--e-std, ease); display: inline-block; }
[data-theme="dark"] #v-review.show  { background: radial-gradient(ellipse 90% 62% at 50% 30%, transparent 25%, rgba(0,0,0,.5) 100%); }
.tl .tl-month { display: flex; align-items: center; gap: 12px; position: relative;
font-family: var(--bill); text-transform: uppercase; letter-spacing: .22em;
font-size: var(--t-00); color: var(--steel); margin: 30px 0 14px; }
.tl .tl-month::after { content: ''; height: 1px; background: var(--rule); flex: 1; }
.tl .tl-month::before { content: ''; position: absolute; left: -26.5px; top: .3em;
width: 7px; height: 7px; transform: rotate(45deg);
background: var(--room); border: 1px solid var(--carbon); }
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) .tl > * {
animation: tl-settle calc(420ms * var(--motion, 1)) var(--e-std, ease) backwards;
}
@keyframes tl-settle { from { opacity: 0; transform: translateY(7px); } }
}
.road-door { position: relative; display: flex; gap: 16px; align-items: flex-start;
margin: 18px auto 6px; max-width: 640px; padding: 16px 18px 14px;
background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-surface);
overflow: hidden; text-align: left; transition: box-shadow 1100ms var(--e-std, ease); }
.road-door .rdoor-fig { position: relative; flex: 0 0 84px; width: 84px; height: 84px; margin-top: 4px; }
.road-door .rdoor-fig svg { display: block; overflow: visible; }
.road-door .rdoor-body { flex: 1; min-width: 0; }
.road-door .rdoor-kicker { opacity: .6; margin-bottom: 6px; }
.road-door .rdoor-line { font-family: var(--serif); font-style: italic; margin: 0 0 7px; line-height: 1.45; }
.road-door .rdoor-act { margin-top: 10px; }
.road-door .rdoor-note { margin: 8px 0 0; font-size: var(--t-00); color: var(--pencil); }
@media (max-width: 560px) { .road-door { gap: 10px; padding: 14px; }
.road-door .rdoor-fig { flex-basis: 64px; width: 64px; height: 64px; } }
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) .road-door .rdoor-line,
body:not(.motion-low) .road-door .rdoor-act,
body:not(.motion-low) .road-door .rdoor-note {
opacity: 0; transform: translateY(5px);
animation: rdoor-settle calc(700ms * var(--motion, 1)) var(--e-std, ease) forwards;
animation-delay: calc(.4s + var(--i, 0) * .85s); }
@keyframes rdoor-settle { to { opacity: 1; transform: none; } }
}
.road-door[data-mood="toska"], .road-door[data-mood="sad"] { box-shadow: inset 0 0 9vmax rgba(24, 19, 10, .14); }
.road-door[data-mood="wary"] { box-shadow: inset 0 0 8vmax rgba(24, 19, 10, .09); }
.road-door[data-mood="happy"], .road-door[data-mood="proud"] { box-shadow: inset 0 0 8vmax rgba(191, 146, 42, .08); }
[data-theme="dark"] .road-door[data-mood="toska"],
[data-theme="dark"] .road-door[data-mood="sad"] { box-shadow: inset 0 0 9vmax rgba(0, 0, 0, .5); }
[data-theme="dark"] .road-door[data-mood="wary"] { box-shadow: inset 0 0 8vmax rgba(0, 0, 0, .36); }
.road-door::after { content: ''; position: absolute; inset: 0; pointer-events: none;
border-radius: inherit; opacity: 0; }
.road-door[data-who="tooth"]::after { box-shadow: inset 0 0 46px rgba(165, 52, 42, .13); }
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) .road-door[data-who="tooth"]::after { animation: rdoor-breath 4s ease-in-out infinite; }
@keyframes rdoor-breath { 50% { opacity: 1; } }
}
.road-door .rdoor-steam { display: none; }
.road-door[data-who="topf"] .rdoor-steam { display: block; position: absolute;
left: 50%; top: -4px; width: 0; height: 0; pointer-events: none; }
.road-door[data-who="topf"] .rdoor-steam::before,
.road-door[data-who="topf"] .rdoor-steam::after { content: ''; position: absolute; bottom: 0;
width: 9px; height: 26px; border-radius: 45% 55% 50% 50% / 60% 60% 40% 40%;
background: currentColor; opacity: 0; filter: blur(3px); }
.road-door[data-who="topf"] .rdoor-steam::before { left: -12px; }
.road-door[data-who="topf"] .rdoor-steam::after { left: 4px; height: 20px; }
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) .road-door[data-who="topf"] .rdoor-steam::before { animation: rdoor-steam 4s ease-in-out infinite; }
body:not(.motion-low) .road-door[data-who="topf"] .rdoor-steam::after { animation: rdoor-steam 4s ease-in-out 1.6s infinite; }
@keyframes rdoor-steam { 0% { transform: translateY(8px) scale(.7); opacity: 0; }
30% { opacity: .22; } 100% { transform: translateY(-18px) scale(1.1); opacity: 0; } }
}
#v-read { transition: box-shadow 1100ms var(--e-std, ease); }
#v-read[data-bookmood="toska"], #v-read[data-bookmood="sad"] { box-shadow: inset 0 0 22vmax rgba(26, 21, 12, .15); }
#v-read[data-bookmood="wary"] { box-shadow: inset 0 0 18vmax rgba(26, 21, 12, .10); }
#v-read[data-bookmood="happy"], #v-read[data-bookmood="proud"] { box-shadow: inset 0 0 16vmax rgba(191, 146, 42, .08); }
[data-theme="dark"] #v-read[data-bookmood="toska"],
[data-theme="dark"] #v-read[data-bookmood="sad"] { box-shadow: inset 0 0 22vmax rgba(0, 0, 0, .42); }
[data-theme="dark"] #v-read[data-bookmood="wary"] { box-shadow: inset 0 0 18vmax rgba(0, 0, 0, .3); }
[data-theme="dark"] #v-read[data-bookmood="happy"],
[data-theme="dark"] #v-read[data-bookmood="proud"] { box-shadow: inset 0 0 16vmax rgba(191, 146, 42, .04); }
@keyframes choreo-set {
from { opacity: 0; transform: translate3d(var(--set-x, -14px), 0, 0); }
to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes choreo-draw {
from { transform: scaleY(0); }
to   { transform: scaleY(1); }
}
body.motion-low { --choreo-reveal: none; --choreo-rule: none; }
@media (prefers-reduced-motion: reduce) {
body:not(.motion-full) { --choreo-reveal: none; --choreo-rule: none; }
}
#v-read { --choreo-reveal: none; --choreo-rule: none; }
@supports (animation-timeline: view()) {
.grid2 .card,
#shelf .book,
.path .path-row,
.path .path-sect {
animation-name: var(--choreo-reveal, choreo-set);
animation-fill-mode: both;
animation-duration: auto;
animation-timing-function: var(--e-enter);
animation-timeline: view();
animation-range: entry 0% entry 100%;
}
.grid2 .card               { animation-range: cover 0%    cover 320px; }
.grid2 > :last-child .card { animation-range: cover 60px  cover 380px; }
.tl { position: relative; border-left-color: transparent; }
.tl::before {
content: ''; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px;
background: var(--rule);
transform-origin: 50% 0;
animation-name: var(--choreo-rule, choreo-draw);
animation-fill-mode: both;
animation-duration: auto;
animation-timing-function: linear;
animation-timeline: view();
animation-range: entry 0% exit 100%;
}
}
@supports (view-transition-name: none) {
body > header { view-transition-name: choreo-bar; }
:root[data-vt-to] .view.show > * { animation-delay: -1s !important; }
::view-transition-group(*) {
animation-duration: calc(380ms * var(--motion));
animation-timing-function: var(--e-std);
}
::view-transition-group(root) {
animation-duration: calc(360ms * var(--motion));
animation-timing-function: var(--e-std);
}
:root[data-vt]::view-transition-old(root),
:root[data-vt]::view-transition-new(root) {
mix-blend-mode: normal;
}
@keyframes choreo-page-in-fwd   { from { transform: translate3d(3.4%, 0, 0); } }
@keyframes choreo-page-out-fwd  { to   { transform: translate3d(-2%, 0, 0); } }
@keyframes choreo-page-in-back  { from { transform: translate3d(-3.4%, 0, 0); } }
@keyframes choreo-page-out-back { to   { transform: translate3d(2%, 0, 0); } }
@keyframes choreo-page-in-lat   { from { transform: translate3d(0, 1.4%, 0); } }
@keyframes choreo-page-out-lat  { to   { transform: none; } }
@keyframes choreo-ink-in        { from { opacity: 0; } }
@keyframes choreo-ink-out       { to   { opacity: 0; } }
:root[data-vt="in"]::view-transition-new(root)       { animation-name: choreo-page-in-fwd, choreo-ink-in; }
:root[data-vt="in"]::view-transition-old(root)       { animation-name: choreo-page-out-fwd, choreo-ink-out; }
:root[data-vt="out"]::view-transition-new(root)      { animation-name: choreo-page-in-back, choreo-ink-in; }
:root[data-vt="out"]::view-transition-old(root)      { animation-name: choreo-page-out-back, choreo-ink-out; }
:root[data-vt="lateral"]::view-transition-new(root)  { animation-name: choreo-page-in-lat, choreo-ink-in; }
:root[data-vt="lateral"]::view-transition-old(root)  { animation-name: choreo-page-out-lat, choreo-ink-out; }
:root[data-vt]::view-transition-new(root),
:root[data-vt]::view-transition-old(root) {
animation-duration: calc(360ms * var(--motion)), calc(130ms * var(--motion));
animation-timing-function: var(--e-std), linear;
animation-fill-mode: both, both;
}
:root[data-vt]::view-transition-new(root) { animation-delay: 0s, calc(30ms * var(--motion)); }
:root[data-vt-to="read"]::view-transition-group(root),
:root[data-vt-to="read"]::view-transition-old(root),
:root[data-vt-to="read"]::view-transition-new(root) { animation-duration: 1ms; }
}
:root[data-lights="down"] {
--room: color-mix(in srgb, var(--carbon) 6%, var(--case));
}
:root[data-theme="sepia"][data-lights="down"],
:root[data-theme="dark"][data-lights="down"] {
--room: var(--case);
}
:root[data-lights="down"] {
--chrome-ink: color-mix(in srgb, var(--signal-ink) 22%, var(--carbon));
}
:root[data-lights="down"] header {
border-bottom-color: var(--rule-room);
transition: border-color var(--d-m) var(--e-std), background var(--d-m) var(--e-std);
}
:root[data-lights="down"] header .wm-t,
:root[data-lights="down"] header .brand b,
:root[data-lights="down"] header .nav-tabs button:hover {
color: var(--chrome-ink);
transition: color var(--d-m) var(--e-std);
}
#read-wrap { position: relative; }
#choreo-stick {
position: absolute;
left: -20px;
top: 0; bottom: 0;
width: 2px;
background: var(--rule-room);
z-index: 20;
pointer-events: none;
display: none;
}
#choreo-stick::before,
#choreo-stick::after {
content: ''; position: absolute; left: -3px; width: 8px; height: 2px;
background: var(--rule-room);
}
#choreo-stick::before { top: -2px; }
#choreo-stick::after  { bottom: -2px; }
#choreo-stick .fill {
position: absolute; inset: 0; display: block;
background: var(--book-ink, var(--carbon));
transform-origin: 50% 0;
transform: scaleY(0);
}
@supports (animation-timeline: scroll()) {
@media (min-width: 1000px) {
#choreo-stick { display: block; }
}
#choreo-stick .fill {
animation-name: choreo-draw;
animation-fill-mode: both;
animation-duration: auto;
animation-timing-function: linear;
animation-timeline: scroll(root block);
}
}
:root[data-navigation="instant"] .view.show > * {
animation: none !important;
}
.gx-stage[data-gram] .gx {
position: relative;
padding: clamp(26px, 4.5vw, 54px);
}
.gx-stage[data-gram] .gx-mid[data-kind="gram"] .gx-line {
text-align: center; padding: 18px 10px;
background: transparent;
border-top: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 45%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 45%, transparent);
font-size: clamp(21px, 2.8vw, 27px); line-height: 1.6;
}
.gx-stage[data-gram] .gx-mid[data-kind="gram"] .gx-ask {
text-align: center; letter-spacing: .02em;
}
.gx-arcplate {
display: flex; align-items: center; justify-content: center; gap: 9px;
font-family: var(--sans); font-size: var(--t-00);
letter-spacing: .14em; color: var(--steel);
}
.gx-arcplate i {
width: 8px; height: 8px; border-radius: 50%; flex: none;
border: 1.5px solid color-mix(in srgb, var(--ink, var(--carbon)) 55%, transparent);
}
.gx-arcplate i.gx-a-held {
background: color-mix(in srgb, var(--ink, var(--carbon)) 75%, var(--carbon));
border-color: transparent;
}
.gx-arcplate i.gx-a-now {
border-color: var(--ink, var(--carbon));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink, var(--carbon)) 16%, transparent);
}
.gx-arcplate em { font-style: normal; margin-left: 7px; }
.gx-stage[data-arc="aspect"]::before {
background: repeating-linear-gradient(90deg,
var(--ink, var(--carbon)) 0 22px,
color-mix(in srgb, var(--ink, var(--carbon)) 22%, var(--galley)) 22px 28px);
}
.gx-stage[data-arc="gender"]::before {
background: linear-gradient(90deg,
var(--ink, var(--carbon)) 0 33.4%,
color-mix(in srgb, var(--ink, var(--carbon)) 55%, var(--galley)) 33.4% 66.7%,
color-mix(in srgb, var(--ink, var(--carbon)) 78%, var(--carbon)) 66.7%);
}
.gx-stage[data-arc="word-order"]::before {
background: linear-gradient(90deg,
var(--ink, var(--carbon)) 0 18%,
color-mix(in srgb, var(--ink, var(--carbon)) 18%, var(--galley)) 18% 24%,
var(--ink, var(--carbon)) 24%);
}
.gx-stage[data-arc="case"]::before {
background: linear-gradient(90deg,
color-mix(in srgb, var(--ink, var(--carbon)) 30%, var(--galley)) 0 16.6%,
color-mix(in srgb, var(--ink, var(--carbon)) 44%, var(--galley)) 16.6% 33.3%,
color-mix(in srgb, var(--ink, var(--carbon)) 58%, var(--galley)) 33.3% 50%,
color-mix(in srgb, var(--ink, var(--carbon)) 72%, var(--galley)) 50% 66.6%,
color-mix(in srgb, var(--ink, var(--carbon)) 86%, var(--galley)) 66.6% 83.3%,
var(--ink, var(--carbon)) 83.3%);
}
.gx-stage[data-arc="narrative"]::before {
background: repeating-linear-gradient(90deg,
color-mix(in srgb, var(--ink, var(--carbon)) 30%, var(--galley)) 0 64px,
var(--ink, var(--carbon)) 64px 70px);
}
.gx-stage[data-arc="participle"]::before,
.gx-stage[data-arc="partizip"]::before {
background: repeating-linear-gradient(45deg,
var(--ink, var(--carbon)) 0 12px,
color-mix(in srgb, var(--ink, var(--carbon)) 34%, var(--galley)) 12px 24px);
}
.gx-stage[data-arc="gerund"]::before {
background:
linear-gradient(0deg, var(--ink, var(--carbon)) 0 35%, transparent 35% 65%,
var(--ink, var(--carbon)) 65%),
color-mix(in srgb, var(--ink, var(--carbon)) 18%, var(--galley));
}
.gx-stage[data-arc="particles"]::before {
background:
repeating-linear-gradient(90deg,
var(--ink, var(--carbon)) 0 3px, transparent 3px 14px),
color-mix(in srgb, var(--ink, var(--carbon)) 26%, var(--galley));
}
.gx-stage[data-arc="lesen"]::before {
background: repeating-linear-gradient(90deg,
var(--ink, var(--carbon)) 0 26px,
color-mix(in srgb, var(--ink, var(--carbon)) 40%, var(--galley)) 26px 32px,
var(--ink, var(--carbon)) 32px 34px,
color-mix(in srgb, var(--ink, var(--carbon)) 40%, var(--galley)) 34px 40px);
}
.gx-stage[data-arc="es"]::before {
background: linear-gradient(90deg,
var(--ink, var(--carbon)) 0 9%,
color-mix(in srgb, var(--ink, var(--carbon)) 24%, var(--galley)) 9% 12%,
color-mix(in srgb, var(--ink, var(--carbon)) 62%, var(--galley)) 12%);
}
.gx-stage[data-arc="rede"]::before {
background:
linear-gradient(0deg, color-mix(in srgb, var(--ink, var(--carbon)) 45%, var(--galley)) 0 40%,
transparent 40% 60%, var(--ink, var(--carbon)) 60%),
var(--galley);
}
.rd-sprint-door {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
margin: 10px 0 4px; padding: 12px 16px;
background: color-mix(in srgb, var(--ink, var(--carbon)) 5%, var(--galley));
border-left: 3px solid var(--ink, var(--carbon));
font-size: var(--t-0);
}
.rd-sprint-door span { flex: 1 1 260px; }
.gx-stage .cs-letters {
display: grid; gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
background: none;
border: 0;
}
.gx-stage .cs-letter {
background: var(--galley); padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-control);
display: grid; grid-template-columns: auto 1fr; gap: 2px 12px;
align-items: baseline; text-align: left; cursor: pointer;
font: inherit; color: inherit;
}
.gx-stage .cs-letter:hover { background: color-mix(in srgb, var(--carbon) 6%, var(--galley)); }
.gx-stage .cs-c {
grid-row: 1 / 3; font-family: var(--serif); font-size: clamp(28px, 4vw, 34px);
line-height: 1; color: var(--carbon);
}
.gx-stage .cs-say { font-weight: 600; font-size: var(--t-0); }
.gx-stage .cs-lnote { font-size: var(--t-00); color: var(--steel); }
@media (max-width: 620px) {
.gx-stage .cs-letters { grid-template-columns: 1fr 1fr; }
.gx-stage .cs-lnote { display: none; }
}
.gx-stage .sp-word {
text-align: center; font-family: var(--serif);
font-size: clamp(38px, 7vw, 64px); letter-spacing: .04em;
padding: 14px 0 6px; color: var(--carbon);
}
.ab-playrow { margin-top: 10px; }
.ab-held { color: var(--steel); font-size: .8em; letter-spacing: .08em; }
.rev-dial {
display: flex; justify-content: center; width: fit-content;
margin: 10px auto 2px;
border: 1.5px solid var(--carbon); background: var(--galley);
}
.rev-dial button {
font: inherit; font-size: var(--t-00); letter-spacing: .12em;
text-transform: uppercase; padding: 7px 14px; cursor: pointer;
background: none; border: 0; color: var(--steel);
border-right: 1px solid color-mix(in srgb, var(--carbon) 35%, transparent);
}
.rev-dial button:last-child { border-right: 0; }
.rev-dial button.on { background: var(--carbon); color: var(--galley); }
.gx-stage .gx-done .gx-drive-gold {
text-align: center; padding: 14px 12px; margin: 8px 0;
border-top: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 55%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 55%, transparent);
font-family: var(--serif); font-size: clamp(16px, 1.9vw, 19px);
}
.gx-stage .gx-done .gx-drive-gold > b {
display: block; font-size: 2em; line-height: 1.15;
color: var(--ink, var(--carbon));
}
.gx-stage .gx-done .gx-ghostline {
margin-top: 14px; padding-top: 12px; text-align: center;
border-top: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 35%, transparent);
font-size: var(--t-0);
}
.gx-stage .gx-done .gx-ghost-ru {
display: block; font-family: var(--serif); line-height: 1.5;
font-size: clamp(22px, 2.6vw, 28px); margin: 8px 0 2px;
}
.gx-stage .gx-done .gx-ghost-shy { display: block; font-style: italic; color: var(--steel); }
.glesson-card .g-arc {
font-family: var(--sans); font-size: var(--t-00);
letter-spacing: .12em; color: var(--steel); margin-top: 4px;
}
.glesson-card[data-arc] {
border-left: 3px solid color-mix(in srgb, var(--ink, var(--carbon)) 55%, transparent);
}
.rl-door { cursor: pointer; }
.rl-door:hover { outline: 2px solid color-mix(in srgb, var(--carbon) 30%, transparent); }
.rl-quote {
margin: 12px 0; padding: 10px 14px;
border-left: 3px solid var(--carbon);
font-family: var(--serif); font-size: var(--t-1);
}
.rl-quote .rl-en { display: block; font-style: italic; color: var(--steel); font-size: var(--t-0); margin-top: 4px; }
.rl-quote .rl-qsrc { display: block; font-style: normal; font-size: var(--t-00); letter-spacing: .08em; color: var(--steel); margin-top: 6px; }
.rl-cast p { font-style: italic; margin: 4px 0; }
.rl-src { font-size: var(--t-00); letter-spacing: .04em; color: var(--steel); margin-top: 10px; }
.rl-ladder summary { cursor: pointer; font-size: var(--t-00); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); margin-top: 8px; }
.rl-row { display: flex; gap: 10px; padding: 2px 0; font-size: var(--t-0); }
.rl-row i { font-style: normal; width: 22px; text-align: right; color: var(--steel); font-variant-numeric: tabular-nums; }
.rl-row.now { font-weight: 700; color: var(--ink, var(--carbon)); }
.gx-eye-wrap { margin: 10px 0 2px; }
.gx-eye {
display: inline-flex; align-items: baseline; gap: 7px;
background: none; border: 0; border-bottom: 1px solid var(--rule, rgba(0,0,0,.18));
padding: 3px 2px; cursor: pointer; color: var(--steel);
font-size: var(--t-00); letter-spacing: .06em; text-transform: uppercase;
}
.gx-eye i { font-style: normal; font-size: .95em; opacity: .75; }
.gx-eye span { text-transform: none; letter-spacing: .01em; font-size: var(--t-0); }
.gx-eye:hover, .gx-eye:focus-visible { color: var(--ink, var(--carbon)); border-bottom-color: currentColor; }
.gx-eye[aria-expanded="true"] i { opacity: 1; }
.gx-eyed {
margin-top: 8px; padding: 10px 12px;
border-left: 2px solid var(--rule, rgba(0,0,0,.18));
background: rgba(0,0,0,.02);
}
.gx-eyed[hidden] { display: none; }
.gx-eyed-ti {
font-size: var(--t-00); letter-spacing: .1em; text-transform: uppercase;
color: var(--steel); margin-bottom: 5px;
}
.gx-eyed p { margin: 0 0 9px; font-size: var(--t-0); line-height: 1.5; }
.gx-eyed-go { font-size: var(--t-00); padding: 4px 11px; }
.gx-mate-hint { font-style: italic; }
.g-src {
margin-top: 26px; padding-top: 12px;
border-top: 1px solid var(--rule, rgba(0,0,0,.18));
}
.g-src-cap {
font-size: var(--t-00); letter-spacing: .12em; text-transform: uppercase;
color: var(--steel); margin-bottom: 8px;
}
.g-src-row { margin: 0 0 7px; line-height: 1.45; }
.g-src-w, .g-src-n { display: block; font-size: var(--t-00); color: var(--steel); }
.g-rail { display: contents; }
@media (min-width: 1000px) {
#lesson-body {
max-width: none;
display: grid;
grid-template-columns: minmax(0, 34em) minmax(17rem, 1fr);
column-gap: clamp(2rem, 4vw, 4.5rem);
align-items: start;
}
.g-prose { grid-column: 1; min-width: 0; }
.g-rail {
display: block;
grid-column: 2; grid-row: 1;
min-width: 0;
border-left: 1px solid var(--rule, rgba(0,0,0,.14));
padding-left: clamp(1rem, 2vw, 2rem);
}
.g-rail .gex { margin: 0 0 14px; }
.g-prose .g-src { margin-top: 30px; }
}
#lesson-body .g-prose p + p { margin-top: var(--s4, 14px); }
.g-wc {
margin: 0 0 12px; padding: 0 0 11px;
border-bottom: 1px solid var(--rule, rgba(0,0,0,.16));
}
.g-wc-form {
font-family: var(--serif, Georgia, serif);
font-size: var(--t-2); line-height: 1.15; margin-bottom: 3px;
color: var(--ink, var(--carbon));
}
.g-wc-gloss { font-size: var(--t-0); line-height: 1.4; }
.g-wc-lem, .g-wc-root, .g-wc-kin {
font-size: var(--t-00); color: var(--steel); line-height: 1.5; margin-top: 2px;
}
.g-wc-kin { font-family: var(--serif, Georgia, serif); letter-spacing: .01em; }
.gx-margin { display: none; }
@media (min-width: 1180px) {
.gx-stage[data-gram="on"]:where(:has(> .gx-margin)) {
--gx-marg: 208px;
--gx-gap: clamp(28px, 4vw, 68px);
--gx-sheet: min(760px, 100%);
grid-template-columns: var(--gx-marg) var(--gx-sheet);
column-gap: var(--gx-gap);
justify-content: center; justify-items: stretch;
}
.gx-stage[data-gram="on"]:where(:has(> .gx-margin)) > .gx { grid-column: 2; grid-row: 1; }
.gx-margin {
display: block; grid-column: 1; grid-row: 1;
--gx-top: clamp(96px, 13vh, 150px);
padding-top: calc(var(--gx-top) + var(--gx-marg) + 74px);
}
.gx-stage[data-gram="on"] .gx-mate {
left: calc(50% - (var(--gx-marg) + var(--gx-gap) + var(--gx-sheet)) / 2);
right: auto;
top: clamp(96px, 13vh, 150px); bottom: auto;
z-index: 3;
width: var(--gx-marg); height: var(--gx-marg);
}
.gx-stage[data-gram="on"] .gx-mate-line {
right: auto; left: 0; bottom: auto; top: 100%;
margin: 8px 0 0; text-align: left; max-width: var(--gx-marg);
}
.gx-sp { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.gx-sp i {
width: 26px; height: 3px; background: var(--rule, rgba(0,0,0,.22));
display: block; transition: width 240ms var(--e-std, ease);
}
.gx-sp i.gx-sp-held { background: color-mix(in srgb, var(--ink, var(--carbon)) 55%, transparent); width: 34px; }
.gx-sp i.gx-sp-now  { background: var(--ink, var(--carbon)); width: 52px; height: 4px; }
.gx-sp-name {
margin-top: 12px; font-size: var(--t-00); letter-spacing: .1em;
text-transform: uppercase; color: var(--steel); line-height: 1.35;
}
.gx-margin-book {
margin-top: 18px; padding-top: 12px;
border-top: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 30%, transparent);
font-family: var(--serif, Georgia, serif); font-size: var(--t-0);
color: var(--ink, var(--carbon)); opacity: .8; line-height: 1.3;
}
}
@media (min-width: 1180px) {
.gx-stage[data-gram="on"] .gx-mate svg { width: 72%; height: 72%; }
}
.gx-eye {
border: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 34%, transparent);
border-radius: 2px;
background: color-mix(in srgb, var(--ink, var(--carbon)) 5%, transparent);
padding: 7px 12px; gap: 9px;
align-items: center;
}
.gx-eye i { color: var(--ink, var(--carbon)); opacity: .9; font-size: 1em; }
.gx-eye span { font-size: var(--t-0); color: var(--ink, var(--carbon)); }
.gx-eye-cue {
font-style: normal; font-size: var(--t-00); letter-spacing: .1em;
text-transform: uppercase; color: var(--steel); margin-left: 2px;
}
.gx-eye:hover, .gx-eye:focus-visible {
background: color-mix(in srgb, var(--ink, var(--carbon)) 11%, transparent);
border-color: color-mix(in srgb, var(--ink, var(--carbon)) 60%, transparent);
}
.gx-eye i { transition: transform 260ms var(--e-std, ease), opacity 200ms linear; }
.gx-eye[aria-expanded="true"] i { transform: rotate(90deg); }
@keyframes gx-eyed-open {
from { opacity: 0; transform: translateY(-5px); clip-path: inset(0 0 100% 0); }
to   { opacity: 1; transform: none;             clip-path: inset(0 0 0 0); }
}
.gx-eyed:not([hidden]) { animation: gx-eyed-open 300ms var(--e-std, ease) both; }
@media (prefers-reduced-motion: reduce) {
.gx-eyed:not([hidden]) { animation: none; }
.gx-eye i { transition: none; }
}
@media (min-width: 1180px) {
.gx-sp i { height: 4px; background: color-mix(in srgb, var(--carbon) 26%, transparent); }
.gx-sp i.gx-sp-held { background: color-mix(in srgb, var(--ink, var(--carbon)) 70%, transparent); }
.gx-sp i.gx-sp-now  { height: 6px; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink, var(--carbon)) 30%, transparent); }
}
.gx-ask-eye { margin-top: 14px; }
.gx-ask-eye:empty { display: none; }
.gx-ask-eye .gx-eye { opacity: .85; }
.gx-ask-eye .gx-eye:hover { opacity: 1; }
.gx-eye { padding: 10px 14px; gap: 10px; }
.gx-eye span { font-size: var(--t-1); letter-spacing: .005em; }
.gx-eye i { font-size: 1.05em; }
.gx-eye-cue { display: block; margin-left: auto; }
.g-wc-an {
font-size: var(--t-1); line-height: 1.25; margin: 2px 0 4px;
color: var(--ink, var(--carbon));
font-variant-caps: all-small-caps; letter-spacing: .06em;
}
.g-wc-rule {
margin-top: 9px; padding-top: 8px;
border-top: 1px dotted var(--rule, rgba(0,0,0,.22));
font-size: var(--t-0); line-height: 1.45; color: var(--carbon);
}
.g-wc-end {
color: var(--ink, var(--carbon));
border-bottom: 2px solid currentColor;
padding-bottom: 1px; font-weight: 700;
}
.g-wc-why {
margin-top: 9px; padding: 7px 9px;
background: color-mix(in srgb, var(--ink, var(--carbon)) 7%, transparent);
border-left: 2px solid color-mix(in srgb, var(--ink, var(--carbon)) 45%, transparent);
font-size: var(--t-0); line-height: 1.45;
}
.g-wc-why i {
display: block; font-style: normal; font-size: var(--t-00);
letter-spacing: .1em; text-transform: uppercase; color: var(--steel);
margin-bottom: 2px;
}
[data-theme="dark"] .gx-eye i,
[data-theme="dark"] .gx-eye span,
[data-theme="dark"] .g-wc-form,
[data-theme="dark"] .g-wc-an,
[data-theme="dark"] .g-wc-end,
[data-theme="dark"] .g-lead,
[data-theme="dark"] .g-src-t a,
[data-theme="dark"] .rl-row.now,
[data-theme="dark"] .gx-stage .gx-done .gx-drive-gold > b {
color: color-mix(in oklab, var(--ink, var(--carbon)) 45%, var(--carbon));
}
[data-theme="dark"] .gx-margin-book {
color: color-mix(in oklab, var(--ink, var(--carbon)) 35%, var(--carbon));
}
.gx-stage .gx-dict-horn { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
.gx-stage .gx-dict-horn em { font-style: italic; font-size: var(--t-00); opacity: .6; }
.gx-stage .gx-horn-big { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; }
.gx-stage .gx-horn-big svg { width: 26px; height: 26px; }
.gx-stage .gx-setline {
min-height: 2.2em; margin: 14px 0 4px; padding: 8px 10px 6px;
display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline;
border-bottom: 2px solid color-mix(in srgb, var(--carbon) 55%, transparent);
background: color-mix(in srgb, var(--carbon) 3%, transparent);
}
.gx-stage .gx-dt-set {
font-style: normal; font-family: var(--reading, var(--serif));
font-size: var(--t-2); line-height: 1.3;
animation: gx-dt-settle .28s var(--e-out, ease) both;
}
@keyframes gx-dt-settle {
from { opacity: 0; transform: translateY(-7px); }
to { opacity: 1; transform: none; }
}
.gx-stage .gx-tray { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.gx-stage .gx-dt {
font-family: var(--reading, var(--serif)); font-size: var(--t-1);
padding: 7px 13px; cursor: pointer; color: inherit;
background: var(--galley); border: 1.5px solid var(--carbon);
border-radius: 3px; box-shadow: 0 2px 0 var(--press, rgba(0,0,0,.16));
}
.gx-stage .gx-dt:hover { transform: translateY(-1px); }
.gx-stage .gx-dt:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--press, rgba(0,0,0,.16)); }
.gx-stage .gx-dt-gone { visibility: hidden; }
.gx-stage .gx-dt-no { animation: gx-hl-shake .3s ease; }
.gx-stage .gx-dt-lit { outline: 2px solid var(--accent, var(--carbon)); outline-offset: 2px; }
@keyframes gx-hl-shake {
25% { transform: translateX(-4px); } 75% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
.gx-stage .gx-dt-set { animation: none; }
.gx-stage .gx-dt-no { animation: none; outline: 2px solid color-mix(in srgb, var(--carbon) 45%, transparent); }
}
.gx-stage .gx-galley { line-height: 2.1; }
.gx-stage .gx-mis-was { text-decoration: line-through; opacity: .55; }
.gx-stage .gx-an-ph {
background: color-mix(in srgb, var(--accent, var(--carbon)) 22%, transparent);
color: inherit; padding: 1px 3px; border-bottom: 2px solid var(--accent, var(--carbon));
}
.gx-stage .gx-an-sent { line-height: 1.7; }
#atmos {
position: fixed; inset: 0; z-index: 2;
pointer-events: none; overflow: hidden;
contain: strict;
color: var(--carbon);
}
.atmos-stage {
position: absolute; inset: 0; z-index: 0;
pointer-events: none; overflow: hidden;
contain: strict;
color: var(--carbon);
}
#gx-stage > *:not(.atmos-stage):not(.pl):not(.gx-mate) { position: relative; z-index: 1; }
body.motion-low #atmos, body.motion-low .atmos-stage,
body.no-atmos #atmos, body.no-atmos .atmos-stage { display: none; }
@media (prefers-reduced-motion: reduce) { #atmos, .atmos-stage { display: none; } }
#atmos .at-g, .atmos-stage .at-g {
position: absolute; top: -70px; bottom: -70px; overflow: hidden;
}
#atmos .at-l, .atmos-stage .at-l {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 46%, transparent 92%);
mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 46%, transparent 92%);
}
#atmos .at-r, .atmos-stage .at-r {
-webkit-mask-image: linear-gradient(to left, transparent 0, #000 14%, #000 46%, transparent 92%);
mask-image: linear-gradient(to left, transparent 0, #000 14%, #000 46%, transparent 92%);
}
#atmos, .atmos-stage {
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
}
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) #atmos .at-g {
animation: at-travel linear both;
animation-timeline: scroll(root block);
}
@keyframes at-travel {
from { transform: translateY(0); }
to   { transform: translateY(calc(var(--at-run, 0px) * -1)); }
}
}
}
#atmos i, .atmos-stage i { position: absolute; display: block; opacity: 0; }
#atmos i b, .atmos-stage i b { display: block; }
#atmos i .at-v, .atmos-stage i .at-v { display: block; will-change: transform, opacity; }
.at-snow .at-v { width: 6px; height: 6px; border-radius: 50%; background: currentColor; filter: blur(.7px); }
.at-snow.at-far .at-v { width: 3.5px; height: 3.5px; filter: blur(1.4px); }
.at-blizzard .at-v { width: 9px; height: 3px; border-radius: 2px; background: currentColor; filter: blur(.5px); }
.at-blizzard.at-far .at-v { width: 6.5px; height: 2.2px; filter: blur(1px); }
.at-mote .at-v { width: 3px; height: 3px; border-radius: 50%; background: currentColor; filter: blur(.5px); }
body.read-lamp #atmos .at-mote .at-v {
background: color-mix(in srgb, #c8a15e 70%, currentColor); filter: blur(.6px);
}
.at-down .at-v {
width: 7px; height: 7px; border-radius: 50%; filter: blur(1.1px);
background: radial-gradient(circle at 40% 40%, currentColor, transparent 72%);
}
.at-rain .at-v {
width: 1.5px; height: 26px; border-radius: 1px; filter: blur(.6px);
background: linear-gradient(180deg, transparent, currentColor 55%, transparent);
}
.at-ash .at-v {
width: 5px; height: 3.5px; background: currentColor; filter: blur(.3px);
border-radius: 46% 54% 60% 40% / 55% 45% 55% 45%;
}
.at-steam .at-v {
width: 12px; height: 30px; background: currentColor; filter: blur(4px);
border-radius: 45% 55% 50% 50% / 60% 60% 40% 40%;
}
.at-ember .at-v {
width: 4px; height: 4px; border-radius: 50%; background: #f6b26b;
box-shadow: 0 0 10px 2px rgba(240, 150, 70, .6);
}
.at-star .at-v {
width: 3px; height: 3px; border-radius: 50%; background: var(--signal, #f6c445);
box-shadow: 0 0 9px 2px color-mix(in srgb, var(--signal, #f6c445) 45%, transparent);
}
.at-leaf .at-v { width: 17px; height: 17px; }
.at-leaf .at-v svg { display: block; width: 100%; height: 100%; }
.at-leaf .at-v svg path.lf { fill: var(--book-ink, currentColor); opacity: .62; }
.at-leaf .at-v svg path.vn { fill: none; stroke: var(--book-ink, currentColor); stroke-width: 1.1; opacity: .34; }
.at-bloom .at-v {
width: 11px; height: 8px; filter: blur(.35px);
background: var(--book-ink, currentColor);
border-radius: 60% 40% 55% 45% / 70% 65% 35% 30%;
opacity: .78;
}
.at-haze .at-v {
width: 220px; height: 54px; border-radius: 50%; filter: blur(20px);
background: radial-gradient(ellipse at center,
color-mix(in srgb, var(--sheet, #fff) 92%, transparent), transparent 70%);
}
[data-theme="dark"] .at-haze .at-v {
background: radial-gradient(ellipse at center,
color-mix(in srgb, #8fa6d8 34%, transparent), transparent 70%);
}
.at-fog .at-v {
width: 260px; height: 90px; border-radius: 50%; filter: blur(26px);
background: radial-gradient(ellipse at center,
color-mix(in srgb, var(--carbon) 31%, transparent), transparent 68%);
}
[data-theme="dark"] .at-fog .at-v {
background: radial-gradient(ellipse at center,
color-mix(in srgb, #7f8ba8 30%, transparent), transparent 68%);
}
.at-sun .at-v {
width: 240%; height: 150px; margin-left: -70%; filter: blur(30px);
transform-origin: 50% 50%;
background: linear-gradient(90deg, transparent,
color-mix(in srgb, #e3bb78 58%, transparent) 42%,
color-mix(in srgb, #e3bb78 58%, transparent) 58%, transparent);
}
[data-theme="dark"] .at-sun .at-v {
background: linear-gradient(90deg, transparent,
color-mix(in srgb, #f0c98a 26%, transparent) 42%,
color-mix(in srgb, #f0c98a 26%, transparent) 58%, transparent);
}
.at-lamp .at-v {
width: 190px; height: 130px; border-radius: 50%; filter: blur(28px);
margin: -65px 0 0 -95px;
background: radial-gradient(ellipse at center,
color-mix(in srgb, #e8b465 62%, transparent), transparent 68%);
}
[data-theme="dark"] .at-lamp .at-v {
background: radial-gradient(ellipse at center,
color-mix(in srgb, #f2c579 34%, transparent), transparent 68%);
}
.at-gloom { right: -90px; }
.at-gloom.at-from-l { left: -90px; right: auto; }
.at-gloom .at-v {
width: 300px; height: 430px; border-radius: 50%; filter: blur(38px);
background: radial-gradient(ellipse at center,
color-mix(in srgb, var(--carbon) 46%, transparent), transparent 66%);
}
[data-theme="dark"] .at-gloom .at-v {
background: radial-gradient(ellipse at center, rgba(0, 0, 0, .8), transparent 66%);
}
.at-fleur .at-v {
font-family: var(--serif, Georgia, serif); font-size: 19px; line-height: 1;
color: var(--book-ink, currentColor); opacity: .5;
}
#atmos .at-mark, .atmos-stage .at-mark {
position: absolute; font-family: var(--serif, Georgia, serif); line-height: 1;
color: var(--book-ink, var(--carbon)); opacity: .052; user-select: none;
}
[data-theme="dark"] #atmos .at-mark,
[data-theme="dark"] .atmos-stage .at-mark { opacity: .085; }
@media (max-width: 899px) { #atmos, .atmos-stage { display: none; } }
:root {
--spring-slip: cubic-bezier(.3, 1.04, .55, 1);
--spring-slip-t: 380ms;
}
@supports (animation-timing-function: linear(0, 1)) {
:root { --spring-slip: linear(0, 0.62, 0.96, 1.035, 1.01, 0.998, 1); }
}
#cast-sky {
position: fixed; inset: 0; z-index: 60;
pointer-events: none; contain: strict;
}
#cast-sky .cs-flier {
position: absolute; left: 0; top: 0;
width: clamp(72px, 10vw, 116px); height: clamp(72px, 10vw, 116px);
offset-rotate: auto 0deg;
will-change: transform;
}
#cast-sky .cs-flier svg { width: 100%; height: 100%; }
body.gx-on #cast-sky { z-index: 245; }
.gx-mate::after {
content: ''; position: absolute; inset: 4%; border-radius: 50%;
background: radial-gradient(circle at 50% 40%,
color-mix(in srgb, var(--g-gold, #c9a227) 55%, transparent), transparent 70%);
opacity: 0; pointer-events: none;
}
.gx-mate.gx-mate-flash::after { animation: cs-flash 1.1s ease-out both; }
@keyframes cs-flash { 0% { opacity: 0; } 25% { opacity: .85; } 100% { opacity: 0; } }
.gx-mate.gx-mate-pulse::after {
background: radial-gradient(circle at 50% 42%,
color-mix(in srgb, var(--pulse-c, var(--ink, #888)) 60%, transparent), transparent 72%);
animation: cs-flash .7s ease-out both;
}
.gx-mate-note {
display: flex; align-items: baseline; gap: 9px;
margin: 8px 0 6px; padding: 8px 12px;
border-left: 3px solid color-mix(in srgb, var(--ink, var(--carbon)) 65%, transparent);
background: color-mix(in srgb, var(--ink, var(--carbon)) 5%, var(--sheet));
font-family: var(--serif); font-size: var(--t-1); line-height: 1.5;
position: relative; z-index: 1;
}
.gx-mate-note i { font-style: normal; color: var(--ink, var(--carbon)); flex: 0 0 auto; }
.gx-mn-teach { border-left-color: color-mix(in srgb, var(--g-gold, #c9a227) 70%, transparent); }
@media (prefers-reduced-motion: no-preference) {
.gx-mate-note { animation: cs-rise .3s ease-out both; }
}
.gx-mate .gx-slip {
position: absolute; right: 96%; bottom: 52%;
max-width: min(40ch, 52vw);
background: var(--sheet); color: var(--carbon);
border: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 55%, var(--carbon));
box-shadow: 0 2px 8px color-mix(in srgb, var(--carbon) 18%, transparent);
padding: 9px 13px; font-size: var(--t-1); line-height: 1.5; text-align: left;
transform-origin: 100% 90%;
}
.gx-mate .gx-slip::after {
content: ''; position: absolute; right: -7px; bottom: 12px;
width: 12px; height: 12px; background: inherit;
border: inherit; border-left: 0; border-bottom: 0;
transform: rotate(45deg);
}
.gx-mate .gx-slip-gone { opacity: 0; transition: opacity .45s ease-out; }
@media (max-width: 560px) {
.gx-mate .gx-slip { font-size: var(--t-00); max-width: 44vw; bottom: 70%; }
}
.gx-hintchip {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px; padding: 6px 12px; min-height: 36px;
font: 600 .8125rem/1.2 var(--sans); letter-spacing: 0;
background: transparent; color: var(--carbon);
border: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 45%, transparent);
border-radius: var(--r-control, 6px); cursor: pointer;
}
.gx-hintchip:hover { background: var(--sheet); }
.gx-hintchip[disabled] { opacity: .45; cursor: default; }
.gx-mate svg {
scale: calc(1 + (var(--mate-depth, 1) - 1) * .035);
transform-origin: 50% 100%;
transition: scale 1.2s ease-out;
}
#mem-keeper {
display: flex; gap: 14px; align-items: center;
margin: 10px 0 14px; padding: 12px 14px;
border: 1px solid var(--rule, #ccc);
background: color-mix(in srgb, var(--accent, #888) 4%, transparent);
}
#mem-keeper .memk-fig { width: 64px; height: 64px; flex: 0 0 auto; }
#mem-keeper .memk-fig svg { width: 100%; height: 100%; }
#mem-keeper .memk-fact { margin: 3px 0 0; font-size: var(--t-1); line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
.gx-mate .gx-slip { animation: cs-slip var(--spring-slip-t) var(--spring-slip) both; }
@keyframes cs-slip { from { scale: .6; opacity: 0; } }
.gx-mid[data-enter="rise"]   { animation: cs-rise .3s ease-out both; }
.gx-mid[data-enter="settle"] { animation: cs-settle .28s ease-out both; }
.gx-mid[data-enter="tip"]    { animation: cs-tip .34s ease-out both; }
.gx-mid[data-enter="draw"]   { animation: cs-draw .3s ease-out both; }
@keyframes cs-rise   { from { opacity: 0; translate: 0 10px; } }
@keyframes cs-settle { from { opacity: 0; scale: 1.012; } }
@keyframes cs-tip    { from { opacity: 0; rotate: .35deg; translate: 0 6px; } }
@keyframes cs-draw   { from { opacity: 0; translate: -8px 0; } }
}
#press {
position: fixed; inset: 0; z-index: 400;
display: none;
background: var(--room);
--pack: clamp(16px, 4vw, 34px);
overflow: hidden; user-select: none; -webkit-user-select: none;
touch-action: none;
}
#press.on {
display: grid;
grid-template-rows: auto auto auto;
place-content: center; justify-items: center;
gap: clamp(14px, 3.4vh, 30px);
animation: press-in calc(200ms * var(--motion)) var(--e-enter) both;
}
#press.is-out { animation: press-out calc(260ms * var(--motion)) var(--e-exit) both; }
@keyframes press-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes press-out { from { opacity: 1 } to { opacity: 0 } }
#press .press-name {
font-family: var(--bill); font-weight: 700;
font-size: var(--t-5); line-height: 1;
letter-spacing: .34em; margin-right: -.34em;
text-transform: uppercase; color: var(--carbon);
}
#press .press-bed {
position: relative;
width: min(92vw, 660px, 84vh);
aspect-ratio: 3 / 2;
padding: var(--pack);
background: var(--case);
border: 1px solid var(--rule-room);
border-top: 2px solid var(--carbon);
box-shadow: var(--shadow);
overflow: hidden;
}
#press.on .press-bed { will-change: transform; }
#press .press-reg {
position: absolute; width: 11px; height: 11px; opacity: .9;
background:
linear-gradient(var(--signal), var(--signal)) 50% 0 / 1px 100% no-repeat,
linear-gradient(var(--signal), var(--signal)) 0 50% / 100% 1px no-repeat;
transition: opacity calc(420ms * var(--motion)) var(--e-exit);
}
#press .press-reg.tl { left: 5px;  top: 5px; }
#press .press-reg.tr { right: 5px; top: 5px; }
#press .press-reg.bl { left: 5px;  bottom: 5px; }
#press .press-reg.br { right: 5px; bottom: 5px; }
#press.is-gl .press-reg, #press.is-forme .press-reg, #press.is-done .press-reg { opacity: 0; }
#press .press-sheet {
position: relative; width: 100%; height: 100%;
background: var(--sheet);
display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
overflow: hidden;
}
#press .press-imp {
text-align: center; color: var(--carbon);
padding: 0 6%;
width: 100%; min-width: 0;
}
#press .press-eyebrow {
font-family: var(--sans); font-size: var(--t-00); font-weight: 500;
letter-spacing: .28em; text-transform: uppercase;
color: color-mix(in srgb, var(--carbon) 52%, var(--sheet));
line-height: 2;
}
#press .press-title {
font-family: var(--serif); font-weight: var(--fw-text);
font-size: clamp(var(--t-5), 6.2vw, var(--t-7));
line-height: 1.5; white-space: nowrap;
margin: 2px 0;
}
#press .press-rule {
display: block; width: 58px; height: 2px;
margin: clamp(8px, 2%, 14px) auto;
background: var(--carbon);
}
#press .press-foot {
font-family: var(--sans); font-size: var(--t-00); font-weight: 400;
letter-spacing: .24em; text-transform: uppercase;
color: color-mix(in srgb, var(--carbon) 52%, var(--sheet));
line-height: 2;
}
#press .press-gl {
position: absolute; left: 0; top: 0; width: 100%; height: 100%;
display: block; pointer-events: none;
}
#press.is-gl .press-imp { opacity: 0; }
#press.is-gl.is-done .press-imp { opacity: 1; }
#press .press-forme {
position: absolute; left: var(--pack); top: var(--pack);
width: calc(100% - var(--pack) * 2);
height: calc(100% - var(--pack) * 2);
opacity: 0; pointer-events: none;
fill: none; stroke: var(--carbon);
}
#press.is-forme .press-forme { opacity: 1; will-change: transform, opacity; }
#press .pf-plate { fill: color-mix(in srgb, var(--case) 88%, var(--carbon)); stroke: none; }
#press .pf-chase { stroke-width: 3; opacity: .42; }
#press .pf-rule  { stroke-width: 2; opacity: .3; }
#press.is-done .press-forme { opacity: 0; }
#press .press-hint {
font-family: var(--bill); font-size: var(--t-0); font-weight: 400;
letter-spacing: .22em; margin-right: -.22em;
text-transform: uppercase; color: var(--carbon);
opacity: 0; transition: opacity calc(400ms * var(--motion)) var(--e-enter);
}
#press.is-done .press-hint { opacity: .72; }
@media (max-height: 460px) {
#press.on { gap: 10px; }
#press .press-name { font-size: var(--t-3); }
#press .press-bed { width: min(92vw, 660px, 128vh); }
}
.press3d {
position: fixed; inset: 0; z-index: 300;
background: var(--room);
animation: press3d-in 260ms var(--e-std, ease) both;
}
.press3d canvas { display: block; width: 100%; height: 100%; }
@keyframes press3d-in { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .press3d { animation: none } }
.legal-foot {
margin: 30px 0 4px; padding-top: 14px;
border-top: 1px solid var(--rule);
display: flex; flex-wrap: wrap; gap: 4px 20px;
}
.legal-foot a {
font-family: var(--sans); font-size: var(--t-00);
letter-spacing: .12em; text-transform: uppercase;
color: var(--steel); text-decoration: none;
padding: 6px 0;
border-bottom: 1px solid transparent;
}
.legal-foot a:hover { color: var(--carbon); border-bottom-color: var(--signal); }
.legal-foot a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
#static-legal {
display: flex; flex-wrap: wrap; gap: 6px 22px;
padding: 22px 16px 30px; margin-top: 40px;
border-top: 1px solid var(--rule);
font-family: var(--sans); font-size: var(--t-00);
letter-spacing: .1em; text-transform: uppercase;
margin-bottom: var(--readbar-h, 0px);
}
#static-legal a { color: var(--steel); text-decoration: none; padding: 4px 0; }
#static-legal a:hover { color: var(--carbon); }
#static-legal a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
#v-home .masthead .rule { display: none; }
.theme-swatches, .theme-pick, .bar .themes { gap: 6px; }
.bar [data-theme-set], .theme-swatches button {
border: 1px solid var(--carbon);
outline-offset: 2px;
position: relative;
}
.bar [data-theme-set] + [data-theme-set],
.theme-swatches button + button { margin-left: 6px; }
.bar [data-theme-set][aria-pressed="true"]::after,
.theme-swatches button.on::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -5px;
height: 3px; background: var(--signal);
}
#frontier-card .fr-lab, #frontier-card .un-note {
max-width: 68ch;
}
#v-home, #v-library { --desk-w: min(94vw, 1280px); }
#v-home > .desk-spread,
#v-home > .desk-sect,
#v-library > .desk-spread,
#v-library > .desk-sect {
max-width: var(--desk-w);
margin-inline: auto;
}
#v-home > .desk-spread { grid-template-columns: min(640px, 100%); justify-content: center; }
.lib-spread { grid-template-columns: 1fr; }
.sect-head { display: flex; align-items: center; gap: var(--s3); margin: 52px 0 20px; }
.sect-head span {
color: var(--steel);
font: var(--fw-strong) var(--t-00)/1.4 var(--sans);
letter-spacing: var(--track-eyebrow); text-transform: uppercase;
flex: none;
}
.sect-head::after {
content: ''; flex: 1; height: 1px; background: var(--rule);
transform-origin: 0 50%;
}
.desk-spread {
display: grid;
grid-template-columns: 1.12fr .88fr;
gap: 26px;
align-items: stretch;
margin-top: 30px;
}
@media (max-width: 980px) { .desk-spread { grid-template-columns: 1fr; } }
.spread-hero {
display: grid;
grid-template-columns: auto 1fr;
gap: 28px;
align-items: center;
background: var(--galley);
border: 2px solid var(--carbon);
padding: 26px 28px;
}
@media (max-width: 560px) {
.spread-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.spread-hero .hero-copy { text-align: left; }
}
.hero-vol-wrap { perspective: 900px; width: 178px; }
.vol {
position: relative;
width: 150px; height: 224px;
margin-left: 16px;
transform-style: preserve-3d;
transform: rotateX(calc(4deg + var(--tx, 0deg))) rotateY(calc(-26deg + var(--ty, 0deg)));
transition: transform calc(.45s * var(--motion)) var(--e-std);
}
.vol-cover {
position: absolute; inset: 0;
background: var(--sheet);
border: 1.5px solid var(--carbon);
transform: translateZ(15px);
display: flex; flex-direction: column;
padding: 18px 16px 14px;
backface-visibility: hidden;
}
.vol-back {
position: absolute; inset: 0;
background: var(--carbon);
transform: translateZ(-15px);
}
.vol-spine {
position: absolute; left: calc(50% - 15px); top: 0;
width: 30px; height: 100%;
background: var(--carbon); color: var(--galley);
transform: rotateY(-90deg) translateZ(75px);
display: flex; align-items: center; justify-content: center;
writing-mode: vertical-rl;
font-family: var(--bill); font-weight: 600; text-transform: uppercase;
letter-spacing: .18em; font-size: var(--t-0);
backface-visibility: hidden;
}
.vol-pages {
position: absolute; left: calc(50% - 15px); top: 3px;
width: 30px; height: calc(100% - 6px);
transform: rotateY(90deg) translateZ(75px);
background: repeating-linear-gradient(to right, var(--galley) 0 2px, var(--rule) 2px 3px);
backface-visibility: hidden;
}
.vol-cover .vc-author {
font-family: var(--sans); font-size: var(--t-00);
letter-spacing: .14em; text-transform: uppercase; color: var(--steel);
}
.vol-cover .vc-title {
font-family: var(--bill); font-weight: 700; text-transform: uppercase;
font-size: var(--t-4); line-height: .95; letter-spacing: .02em;
color: var(--carbon); margin-top: 10px;
overflow-wrap: anywhere;
}
.vol-cover .vc-rule { width: 34px; height: 3px; background: var(--signal); margin-top: 10px; }
.vol-cover .vc-foot {
margin-top: auto;
display: flex; justify-content: space-between;
font-family: var(--mono); font-size: var(--t-00); color: var(--steel);
}
.vol-mark {
position: absolute; top: -2px; right: 16px;
width: 14px;
height: calc(30px + var(--depth, 0) * 150px);
background: var(--signal);
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%);
}
.hero-copy .smallcaps { font-size: var(--t-00); letter-spacing: .16em; color: var(--steel); }
.hero-copy .gutter {
font-family: var(--serif); font-size: var(--t-2); line-height: 1.6;
font-style: italic; margin: 10px 0 14px;
max-width: 44ch;
}
.hero-copy .gutter .dim { opacity: .38; }
.hero-verbs { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 4px; }
.hero-verbs .linklike:first-child { color: var(--carbon); font-weight: 600; }
.tonight-card {
background: var(--galley);
border-width: 2px;
padding: 22px 24px 20px;
display: flex; flex-direction: column;
}
.tn-row {
display: flex; align-items: baseline; gap: 14px;
padding: 9px 0;
border-bottom: 1px dotted var(--rule);
}
.tn-row:last-of-type { border-bottom: none; }
.tn-n {
font-family: var(--mono); font-weight: 400;
font-size: var(--t-5); line-height: .9; letter-spacing: -.02em;
min-width: 54px; text-align: right;
flex: none;
}
.tn-l { font-size: var(--t-0); color: var(--steel); }
.tn-l b { color: var(--carbon); }
.tn-due { padding-left: 2px; }
.tn-due .tn-l b { font-family: var(--mono); font-weight: var(--fw-strong); }
.tn-act { margin-top: auto; padding-top: 18px; }
.tn-lamp {
display: flex; gap: 9px; align-items: baseline;
font-family: var(--serif); font-style: italic;
font-size: var(--t-0); color: var(--steel);
margin: 14px 2px 0; padding-top: 10px;
border-top: 1px dotted var(--rule);
}
.tn-lamp b { color: var(--carbon); font-style: normal; }
.tn-lamp .tn-flame { font-style: normal; color: var(--steel); flex: none; }
.tn-lamp.lit .tn-flame { color: var(--reward, var(--gold-leaf, #b8860b)); }
.tn-empty {
font-family: var(--serif); font-style: italic; color: var(--steel);
margin: 8px 0 0; max-width: 40ch;
}
#bill-sect { margin-top: 40px; }
#bill-sect .frontier-card {
max-width: none; width: auto; margin: 0;
text-align: left;
}
.frontier-card .fr-grid {
display: grid;
grid-template-columns: minmax(240px, .8fr) 1.2fr;
gap: 10px 48px;
align-items: start;
}
@media (max-width: 900px) { .frontier-card .fr-grid { grid-template-columns: 1fr; } }
.frontier-card .fr-grid .bill { margin-top: 4px; }
.frontier-card .fr-next { font-family: var(--serif); font-style: italic;
font-size: var(--t-0); color: var(--ink-2); margin-top: 6px; }
.frontier-card .fr-next .fr-inch { color: var(--signal-ink, var(--signal));
font-style: normal; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.un-moved {
border-left: 3px solid var(--signal);
padding-left: 12px;
margin: 10px 0;
font-size: var(--t-0);
color: var(--carbon);
max-width: 60ch;
}
.lad-fold {
border-top: 2px solid var(--carbon);
margin-top: 20px; padding-top: 16px;
display: grid;
grid-template-columns: auto 1fr;
gap: 4px 24px;
align-items: center;
}
@media (max-width: 700px) { .lad-fold { grid-template-columns: 1fr; } }
.lad-fold .lad-line { white-space: nowrap; }
.lad-fold .lad-line .lf-d {
font-family: var(--sans); font-size: var(--t-1); letter-spacing: 0; color: var(--steel);
}
.lad-fold .lf-body .faint { max-width: 72ch; }
#bench-sect .shelf {
display: flex; flex-wrap: wrap;
gap: 26px 20px;
align-items: flex-end;
padding: 10px 8px 0;
}
#bench-sect::after {
content: '';
display: block;
height: 3px;
background: var(--carbon);
margin-inline: calc(50% - 50vw);
}
#shelf .book {
border: none; background: transparent; box-shadow: none;
padding: 0; width: 136px;
perspective: 700px;
cursor: pointer;
position: relative;
}
#shelf .book:hover, #shelf .book:active {
transform: none; box-shadow: none;
}
#shelf .book:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
:is(#shelf, #locked-panel) .b-vol {
position: relative;
width: 112px; height: 176px;
margin-left: 16px;
transform-style: preserve-3d;
transform: rotateY(-22deg);
transition: transform calc(.38s * var(--motion)) var(--e-std);
}
@media (hover: hover) {
#shelf .book:hover .b-vol, #shelf .book:focus-visible .b-vol { transform: rotateY(-5deg); }
}
:is(#shelf, #locked-panel) .b-cover {
position: absolute; inset: 0;
background: var(--sheet);
border: 1.5px solid var(--carbon);
transform: translateZ(10px);
display: flex; flex-direction: column;
padding: 12px 11px 10px;
backface-visibility: hidden;
}
:is(#shelf, #locked-panel) .b-back { position: absolute; inset: 0; background: var(--carbon); transform: translateZ(-10px); }
:is(#shelf, #locked-panel) .b-spine {
position: absolute; left: calc(50% - 10px); top: 0;
width: 20px; height: 100%;
background: var(--carbon); color: var(--galley);
transform: rotateY(-90deg) translateZ(56px);
display: flex; align-items: center; justify-content: center;
writing-mode: vertical-rl;
font-family: var(--bill); font-weight: 600; text-transform: uppercase;
letter-spacing: .14em; font-size: 10px;
overflow: hidden;
backface-visibility: hidden;
}
:is(#shelf, #locked-panel) .b-spine span { max-height: 100%; overflow: hidden; }
:is(#shelf, #locked-panel) .b-pages {
position: absolute; left: calc(50% - 10px); top: 2px;
width: 20px; height: calc(100% - 4px);
transform: rotateY(90deg) translateZ(56px);
background: repeating-linear-gradient(to right, var(--galley) 0 2px, var(--rule) 2px 3px);
backface-visibility: hidden;
}
:is(#shelf, #locked-panel) .b-cover .b-author {
font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
color: var(--steel); font-family: var(--sans); font-weight: var(--fw-strong);
}
:is(#shelf, #locked-panel) .b-cover .b-title {
font-family: var(--serif); font-weight: var(--fw-text); text-transform: none;
font-size: var(--t-0); line-height: 1.15; color: var(--carbon);
margin-top: 8px;
overflow-wrap: break-word; hyphens: auto;
letter-spacing: 0;
}
:is(#shelf, #locked-panel) .b-cover .b-year {
margin-top: auto;
font-family: var(--mono); font-size: 9px; color: var(--steel);
}
#shelf .b-new { position: absolute; left: 8px; top: 8px; padding: 2px 8px 3px; border-radius: 999px; background: var(--signal);
color: #fffdf5; font: 800 11px/1.3 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
#shelf .b-fin { position: absolute; right: 8px; bottom: 8px; width: 22px; height: 22px; }
#shelf .b-fin .tick { width: 100%; height: 100%; stroke: var(--signal); }
:is(#shelf, #locked-panel) .b-cov {
position: absolute; left: 10px; right: 10px; bottom: 5px;
height: 2px; background: var(--rule);
}
:is(#shelf, #locked-panel) .b-cov i { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--signal); }
:is(#shelf, #locked-panel) .b-cover { border-top: 6px solid var(--ink, var(--carbon)); }
:is(#shelf, #locked-panel) .b-cov i { background: var(--ink, var(--signal)); }
#locked-panel .fr-n > span:first-child:not(.fr-d) { color: var(--ink, var(--carbon)); }
#shelf .book:hover .b-spine,
#shelf .book:focus-visible .b-spine {
background: color-mix(in srgb, var(--ink, var(--carbon)) 45%, var(--carbon));
}
#shelf .b-here {
position: absolute; top: -2px; right: 10px;
width: 10px; height: calc(22px + var(--depth, 0) * 110px);
background: var(--signal);
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%);
}
#shelf .b-under {
text-align: center;
margin-top: 10px;
font-family: var(--mono); font-size: var(--t-00); color: var(--steel);
}
.record-sheet {
display: grid;
grid-template-columns: 200px minmax(0, 1fr) 240px;
gap: 0;
background: var(--galley);
border: 2px solid var(--carbon);
box-shadow: var(--shadow);
align-items: stretch;
}
.record-sheet .rs-spine  { padding: 22px 18px; border-right: 1px solid var(--rule); }
.record-sheet .rs-main   { padding: 24px 28px 20px; min-width: 0; }
.record-sheet .rs-margin { padding: 22px 20px; border-left: 1px solid var(--rule); }
.record-sheet.no-spine { grid-template-columns: minmax(0, 1fr) 240px; }
.record-sheet.no-spine .rs-spine { display: none; }
@media (max-width: 980px) {
.record-sheet,
.record-sheet.no-spine { grid-template-columns: 1fr; }
.record-sheet .rs-spine  { border-right: none; border-bottom: 1px solid var(--rule); }
.record-sheet .rs-margin { border-left: none; border-top: 1px solid var(--rule); }
}
.linklike {
background: none; border: none; padding: 0; cursor: pointer;
font-family: var(--sans); font-size: var(--t-0); color: var(--steel);
letter-spacing: .02em; text-decoration: underline;
text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.linklike:hover { color: var(--signal-ink); }
.rank-ladder { list-style: none; margin: 12px 0 0; padding: 0; }
.rank-ladder li { position: relative; padding: 7px 0 7px 30px; }
.rank-ladder li::before {
content: ''; position: absolute; left: 9px; top: -1px; bottom: -1px;
width: 2px; background: var(--rule);
}
.rank-ladder li:first-child::before { top: 50%; }
.rank-ladder li:last-child::before  { bottom: 50%; }
.rank-ladder li.rk-passed::before { background: var(--signal); }
.rank-ladder li.rk-cur::after {
content: ''; position: absolute; left: 9px; width: 2px;
bottom: -1px; height: calc(50% + var(--rise, 0) * 50%);
background: var(--signal);
}
.rank-ladder li.rk-cur:last-child::after {
bottom: 50%; height: calc(var(--rise, 0) * 50%);
}
.rank-ladder .rk-cls {
position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 1.25rem; text-align: center; z-index: 1;
background: var(--galley); padding: 2px 0;
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: var(--t-00); color: var(--steel);
}
.rank-ladder .rk-en { font-family: var(--sans); font-size: var(--t-00); letter-spacing: .02em; }
.rank-ladder li.rk-ahead  .rk-en { color: var(--ink-3); }
.rank-ladder li.rk-passed .rk-en { color: var(--ink-2); }
.rank-ladder li.rk-cur { padding-top: 10px; padding-bottom: 10px; }
.rank-ladder li.rk-cur .rk-cls { color: var(--signal-ink); font-weight: 600; }
.rank-ladder li.rk-cur .rk-en {
font-family: var(--bill); font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; font-size: var(--t-3); color: var(--carbon);
display: block; line-height: 1.05;
}
.rank-ladder .rk-ru { display: block; font-family: var(--serif); font-style: italic;
font-size: var(--t-0); color: var(--ink-2); margin-top: 2px; }
.rank-ladder .rk-note { display: block; font-size: var(--t-00); color: var(--signal-ink); margin-top: 2px; }
.rank-ladder .rk-date { display: block; font-family: var(--mono); font-size: var(--t-00); color: var(--steel); }
.rs-spine .rk-foot { font-size: var(--t-00); margin-top: 14px; line-height: 1.5; }
.rs-hero .rs-n {
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: clamp(44px, 7vw, 68px); font-weight: 400;
line-height: .95; letter-spacing: -.02em; margin-top: 6px;
}
.rs-hero .rs-sub { font-family: var(--sans); font-size: var(--t-0); color: var(--steel); margin-top: 4px; }
.rs-hero .rs-delta {
font-family: var(--serif); font-style: italic; font-size: var(--t-0);
color: var(--ink-2); line-height: 1.55; max-width: 56ch; margin: 10px 0 0;
}
.rs-spark { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.rs-spark svg { display: block; flex: none; }
.rs-spark span { font-size: var(--t-00); }
.rs-month { margin-top: 26px; }
.rs-month .dy-cap { font-family: var(--serif); font-style: italic;
font-size: var(--t-1); color: var(--ink); margin-top: 8px; line-height: 1.5; }
.dy-grid { display: grid; gap: 3px; margin-top: 10px; width: max-content; max-width: 100%; }
.dy-week { display: grid; grid-template-columns: repeat(7, 14px); gap: 3px; position: relative; }
.dy-week i { display: block; width: 14px; height: 14px; border: 1px solid var(--rule); }
.dy-week i.dy-x { border-color: transparent; }
.dy-week i.dy-fu { border-color: color-mix(in srgb, var(--rule) 45%, transparent); }
.dy-week i.dy-on { border-color: var(--carbon);
background: color-mix(in srgb, var(--carbon) 30%, transparent); }
.dy-week i.dy-on.dy-d2 { background: color-mix(in srgb, var(--carbon) 55%, transparent); }
.dy-week i.dy-on.dy-d3 { background: var(--carbon); }
.dy-week i.dy-today { box-shadow: 0 0 0 1px var(--carbon); }
.dy-week.dy-kept::after { content: ''; position: absolute; left: calc(100% + 6px);
top: calc(50% - 1px); width: 10px; height: 2px; background: var(--carbon); }
.dy-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; align-items: baseline; }
.dy-foot span { font-family: var(--serif); font-style: italic;
font-size: var(--t-0); color: var(--ink-2); }
.dy-foot .dy-frame { color: var(--ink-3); font-size: var(--t-00); }
.dy-grid.dy-static, .dy-grid.dy-static .dy-week { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
#month-register .dy-grid, #month-register .dy-week { animation: none !important; }
}
.rs-agreement {
margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--rule);
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.rs-agreement .rs-agree { font-family: var(--serif); font-style: italic; color: var(--ink); }
.plan-edit {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
width: 100%; font: normal .95rem/1.4 var(--sans); color: var(--carbon);
}
.plan-edit label { flex: 1 0 100%; }
.plan-edit input {
flex: 1 1 16em; min-width: 0; min-height: 44px; box-sizing: border-box;
padding: 8px 12px; border: 1px solid var(--carbon); border-radius: 0;
background: var(--sheet); color: var(--carbon);
font: normal 1rem/1.4 var(--serif);
}
.plan-edit input:focus { outline: 2px solid var(--carbon); outline-offset: 1px; }
.plan-edit-btns { display: flex; gap: 8px; flex: none; }
.plan-edit-btns .btn { min-height: 44px; }
.rs-service { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.rs-service .rs-line { font-size: var(--t-0); color: var(--ink-2); padding: 3px 0; }
.rs-service .linklike { font-size: var(--t-0); }
#seals.rs-wax { margin-top: 22px; gap: 0; padding-right: 12px; }
#seals.rs-wax .seal.ach {
border-radius: 50%; border: none;
background: radial-gradient(circle at 35% 32%, #c4544a, var(--wax) 68%);
box-shadow: inset 0 2px 5px rgba(255,255,255,.28), inset 0 -3px 6px rgba(0,0,0,.38),
0 3px 8px rgba(0,0,0,.3);
color: #f0d9c0; font-family: var(--serif);
}
#seals.rs-wax .seal { margin-right: -12px; transform: rotate(calc(sin(var(--i, 0)) * 9deg)); }
#seals.rs-wax .seal:hover { z-index: 2; position: relative; }
.rs-foot {
margin-top: 24px; padding-top: 12px; border-top: 2px solid var(--carbon);
display: flex; flex-wrap: wrap; gap: 8px 18px;
align-items: baseline; justify-content: space-between;
font-family: var(--sans); font-size: var(--t-0); color: var(--steel);
}
.rs-foot b { font-family: var(--mono); font-weight: 400; font-variant-numeric: tabular-nums;
font-size: var(--t-2); color: var(--carbon); margin-right: 3px; }
.rs-foot .rf-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.rs-margin #ticket-card {
margin: 0 0 20px;
transform: rotate(-1.4deg);
}
#record-sect.sheet-empty .sect-head,
#record-sect.sheet-empty .rs-spine,
#record-sect.sheet-empty .rs-main > :not(.rs-foot),
#record-sect.sheet-empty #marginalia { display: none; }
#record-sect.sheet-empty .record-sheet { box-shadow: none; }
#record-sect.sheet-empty .record-sheet {
display: block; border: 0; background: none; padding: 0; min-height: 0;
}
#record-sect.sheet-empty .rs-main { display: block; }
#record-sect.sheet-empty .rs-foot {
border-top: 0; margin-top: 0; padding-top: 0; justify-content: flex-start;
}
#record-sect.sheet-empty #rf-stats,
#record-sect.sheet-empty #btn-export,
#record-sect.sheet-empty #btn-journey,
#record-sect.sheet-empty .rs-margin { display: none; }
.rs-margin .mg-run { border-left: 2px solid var(--rule); padding-left: 14px; margin-top: 10px; }
.rs-margin .mg-item { margin: 0 0 16px; }
.rs-margin .mg-cat {
font-family: var(--bill); font-weight: 600; text-transform: uppercase;
letter-spacing: .14em; font-size: var(--t-00); color: var(--signal-ink);
}
.rs-margin .mg-t { font-family: var(--serif); font-weight: 600; font-size: var(--t-1);
line-height: 1.35; margin: 2px 0; }
.rs-margin .mg-b { font-size: var(--t-0); color: var(--ink-2); line-height: 1.5; }
.rs-margin .mg-plain { font-family: var(--serif); font-size: var(--t-0); color: var(--ink-3); padding: 2px 0; }
.rs-margin .mg-empty { font-family: var(--serif); font-style: italic;
font-size: var(--t-0); color: var(--ink-2); line-height: 1.55; }
.rs-margin .linklike { margin-top: 6px; }
@supports (animation-timeline: view()) {
.desk-sect .card:not(#ticket-card),
.record-sheet .rs-spine,
.record-sheet .rs-main,
.record-sheet .rs-margin {
animation-name: var(--choreo-reveal, choreo-set);
animation-fill-mode: both;
animation-duration: auto;
animation-timing-function: var(--e-enter);
animation-timeline: view();
animation-range: cover 0% cover 320px;
}
.record-sheet .rs-main   { animation-range: cover 40px cover 360px; }
.record-sheet .rs-margin { animation-range: cover 80px cover 400px; }
.sect-head::after {
animation-name: var(--choreo-rule, sect-rule);
animation-fill-mode: both;
animation-duration: auto;
animation-timing-function: var(--e-std);
animation-timeline: view();
animation-range: entry 0% entry 100%;
}
#bench-sect::after {
transform-origin: 0 50%;
animation-name: var(--choreo-rule, sect-rule);
animation-fill-mode: both;
animation-duration: auto;
animation-timing-function: var(--e-std);
animation-timeline: view();
animation-range: entry 0% entry 100%;
}
#month-register .dy-grid {
animation-name: var(--choreo-reveal, month-unroll);
animation-fill-mode: both;
animation-duration: auto;
animation-timing-function: var(--e-std);
animation-timeline: view();
animation-range: cover 0% cover 260px;
}
.rank-ladder li.rk-cur::after {
transform-origin: bottom;
animation-name: var(--choreo-rule, rise-climb);
animation-fill-mode: both;
animation-duration: auto;
animation-timing-function: var(--e-std);
animation-timeline: view();
animation-range: cover 0% cover 320px;
}
}
@keyframes sect-rule {
from { transform: scaleX(0); }
to   { transform: scaleX(1); }
}
@keyframes month-unroll {
from { clip-path: inset(0 100% 0 0); }
to   { clip-path: inset(0 0 0 0); }
}
@keyframes rise-climb {
from { transform: scaleY(0); }
to   { transform: scaleY(1); }
}
:is(#shelf .book.glassed, #locked-panel) .b-glass {
position: absolute; inset: -2px;
transform: translateZ(14px);
border: 1.5px solid var(--carbon);
background: linear-gradient(115deg, transparent 32%,
rgba(255,255,255,.16) 40%, rgba(255,255,255,.05) 47%, transparent 56%);
background-size: 220% 100%;
background-position: 82% 0;
transition: background-position calc(.38s * var(--motion, 1)) var(--e-std, ease);
pointer-events: none;
backface-visibility: hidden;
}
@media (hover: hover) {
#shelf .book.glassed:hover .b-glass,
#shelf .book.glassed:focus-visible .b-glass { background-position: 12% 0; }
}
#shelf .book.glassed .b-under { color: var(--steel); }
#shelf .book.glassed .b-cov i { background: var(--steel); }
#locked-panel .lc-volwrap {
width: 112px; height: 176px; margin: 44px auto 26px;
perspective: 900px;
}
#locked-panel .b-vol { margin-left: 0; transform: rotateY(-20deg); }
@media (hover: hover) {
#locked-panel .lc-volwrap:hover .b-vol { transform: rotateY(-5deg); }
}
body:not(.motion-low) #locked-panel .lc-in {
animation: lc-settle calc(260ms * var(--motion, 1)) var(--e-std, ease) both;
}
@keyframes lc-settle { from { opacity: 0; transform: translateY(10px); } }
.tonight-card .bill-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tonight-card .bill-head .bh-date { font-size: .92em; letter-spacing: .18em; opacity: .85; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) .vol-mark { animation: ribbon-settle .9s var(--e-std, ease) both; }
}
@keyframes ribbon-settle { from { height: 30px; } }
#shelf .book.fin .b-pages::before,
.vol.fin .vol-pages::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
background: linear-gradient(to bottom, var(--gold-leaf, #b8860b),
color-mix(in srgb, var(--gold-leaf, #b8860b) 55%, var(--galley)));
}
#shelf .book.fin .b-spine span {
color: var(--gold-leaf, #b8860b);
text-shadow: 0 0 1px rgba(220,180,80,.4);
font-weight: 700;
}
.vol.fin .vol-pages::before { height: 7px; }
.profile-dossier {
max-width: min(94%, 1040px);
margin: 0 auto 72px;
}
@media (max-width: 820px) {
}
input.px-name {
display: block;
width: 100%;
margin: 0 0 14px;
padding: 0;
border: 0;
background: none;
appearance: none;
-webkit-appearance: none;
font-family: var(--bill);
font-size: clamp(56px, 9vw, 120px);
font-weight: 900;
text-transform: uppercase;
letter-spacing: .01em;
line-height: .82;
color: var(--carbon);
text-align: left;
overflow-wrap: anywhere;
cursor: text;
border-radius: 0;
box-shadow: none;
min-height: 0;
}
input.px-name::placeholder { color: var(--rule-room); opacity: 1; }
input.px-name:hover { border: 0; box-shadow: none; }
input.px-name:focus {
outline: none;
border: 0;
box-shadow: inset 0 -4px 0 var(--pine);
}
.px-name-invite { margin: 14px 0 0; }
.px-verb {
background: none;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
font-family: var(--serif);
font-style: italic;
font-size: var(--t-1);
color: var(--pine);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
border-radius: 0;
box-shadow: none;
}
.px-verb:hover { color: var(--carbon); text-decoration-thickness: 2px; }
.px-verb { padding: 3px 0; margin: -3px 0; }
.px-guide-host {
width: 168px;
height: 200px;
margin: 0 auto;
color: var(--carbon);
cursor: pointer;
overflow: visible;
}
.px-guide-host svg { width: 100%; height: 100%; display: block; overflow: visible; }
.px-case {
display: none;
flex-wrap: wrap;
justify-content: center;
gap: 6px 4px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--carbon);
}
.px-case.open { display: flex; }
#prof-btn-bench .px-caret { display: inline-block; transition: transform .2s ease; }
#prof-btn-bench[aria-expanded="true"] .px-caret { transform: rotate(180deg); }
.px-case button {
background: none;
border: 0;
padding: 2px 7px;
font-family: var(--bill);
font-weight: 700;
font-size: var(--t-2);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--steel);
cursor: pointer;
border-radius: 0;
}
.px-case button:nth-child(1) { font-size: var(--t-4); }
.px-case button:nth-child(5) { font-size: var(--t-1); }
.px-case button:hover { color: var(--carbon); }
.px-case button.active {
background: var(--pine);
color: var(--on-pine);
}
.journey-sheet {
background: var(--galley);
border: 2px solid var(--carbon);
box-shadow: var(--shadow);
padding: 24px 28px;
margin-top: 16px;
}
.journey-sheet .chartbox { margin-bottom: 22px; }
.journey-sheet .chartbox:empty { display: none; }
.journey-sheet .tl { margin-left: 8px; }
.road-plate { margin: 0 auto; }
.road-plate .rp-line { margin-top: 6px; }
.road-plate .rp-act { margin-top: 14px; }
.tn-galley {
margin: 14px 0 4px; padding-top: 10px;
border-top: 1px dotted var(--rule);
}
.gly-head { font-size: var(--t-0); color: var(--steel); letter-spacing: .14em; }
.gly-gild { color: var(--reward, var(--gold-leaf, #b8860b)); letter-spacing: .08em; }
.gly-row {
margin: 5px 0 0; font-size: var(--t-0); color: var(--carbon);
padding-left: 14px; position: relative;
}
.gly-row::before {
content: '○'; position: absolute; left: 0; top: 0;
color: var(--steel); font-size: .82em; line-height: 1.9;
}
.gly-row.struck { color: var(--steel); text-decoration: line-through; text-decoration-thickness: 1px; }
.gly-row.struck::before { content: '●'; color: var(--verm, #a5342a); }
.tn-ledger {
display: flex; gap: 4px; margin-top: 10px; align-items: center;
}
.tn-ledger .ldg {
width: 12px; height: 12px; display: inline-block;
border: 1px solid var(--rule); border-radius: 2px;
background: transparent;
}
.tn-ledger .ldg-lit  { background: var(--verm, #a5342a); border-color: var(--verm, #a5342a); }
.tn-ledger .ldg-gild { background: var(--reward, var(--gold-leaf, #b8860b)); border-color: var(--reward, var(--gold-leaf, #b8860b)); }
.tn-ledger .ldg-leave {
border-style: dashed; border-color: var(--verm, #a5342a);
background: transparent;
}
.tn-ledger .ldg-wait { border-color: var(--carbon); }
.tn-keep { margin-top: 10px; padding-top: 8px; border-top: 1px dotted var(--rule); }
.tn-keep .wk-row { display: flex; gap: 10px; align-items: center; margin: 6px 0 0; }
.number-card { margin-top: var(--s3, 14px); }
.number-card .nb-date { color: var(--ink-2); margin: 2px 0 6px; }
.number-card .nb-line { font-family: var(--serif); font-size: var(--t-2); line-height: 1.45; margin: 4px 0 6px; }
.number-card .nb-blank { display: inline-block; min-width: 4.5em; border-bottom: 2px solid var(--carbon); color: transparent; letter-spacing: .1em; }
.number-card .nb-set { background: color-mix(in srgb, var(--signal) 40%, transparent); color: inherit; padding: 0 .12em; }
.number-card .nb-en { font-family: var(--serif); font-style: italic; color: var(--ink-2); margin: 2px 0 8px; }
.number-card .nb-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 10px; }
.number-card .nb-opts .quiz-opt { margin: 0; }
.number-card .nb-hint { margin: 0 0 6px; font-size: var(--t-0); }
.number-card .nb-row { justify-content: flex-start; }
@media (max-width: 480px) { .number-card .nb-opts { grid-template-columns: 1fr; } }
.recap-slip { margin: 0 0 var(--s3, 14px); padding: 10px 14px; border-left: 3px solid var(--book-ink, var(--carbon));
background: color-mix(in srgb, var(--book-ink, var(--carbon)) 6%, transparent); }
.recap-slip .recap-line { font-family: var(--serif); font-style: italic; margin: 4px 0 2px; font-size: var(--t-0); }
.recap-slip .recap-tr { font-family: var(--serif); color: var(--ink-2); margin: 4px 0 0; font-size: var(--t-0); }
.tn-next { font-family: var(--serif); font-style: italic; color: var(--ink-2); font-size: var(--t-0); margin: 10px 0 0; }
#record-sect.sheet-empty.sheet-has-lines .rs-margin,
#record-sect.sheet-empty.sheet-has-lines #marginalia { display: block; }
#record-sect.sheet-empty.sheet-has-lines .rs-margin { margin-top: var(--breath, 24px); padding: 0; border: 0; }
.mg-kept-actions { display: flex; flex-wrap: wrap; gap: var(--seam, 12px); }
.mg-kept-actions button { min-height: 44px; text-align: left; }
.mg-kept-actions .q-del { color: var(--ink-2); }
.room-head { position: relative; }
#v-words.show {
background: linear-gradient(180deg,
color-mix(in srgb, var(--steel) 10%, transparent), transparent 280px);
}
#word-filters { margin: 0 0 var(--s4); }
#word-filters button { min-width: 7.5em; }
#word-filters button i {
font-style: normal; font-family: var(--mono);
font-size: .85em; letter-spacing: 0; margin-left: 7px;
opacity: .7; font-variant-numeric: tabular-nums;
}
#word-filters button.active i { opacity: 1; }
#word-filters input {
flex: 1 1 160px; margin: 0; min-width: 140px;
border: 1px solid var(--rule); border-radius: var(--r-control);
background: var(--galley);
padding: 8px 12px; font: var(--type-control)/1.3 var(--sans);
}
#word-filters input:focus-visible { outline: 2px solid var(--mark); outline-offset: -3px; }
#wordlist {
background: var(--galley);
border: 1px solid var(--rule);
border-radius: var(--r-surface);
box-shadow: none;
padding: 0; margin: 0;
overflow: hidden;
}
#wordlist li {
padding: 9px 14px;
border-bottom: 1px solid var(--rule);
gap: 12px;
transition: background calc(var(--mo-ink) * var(--motion, 1)) linear;
}
#wordlist li:last-child { border-bottom: none; }
#wordlist li:hover { background: var(--sheet); }
#wordlist .wf {
font-family: var(--serif); font-size: var(--t-2);
min-width: 0; overflow-wrap:anywhere; cursor: pointer;
transition: color 140ms linear;
}
#wordlist .wf:hover { color: var(--signal-ink, var(--signal)); }
#wordlist .wl-cap {
margin-top: 0;
background: var(--sheet);
padding: 8px 14px;
overflow-wrap:anywhere;
}
#wordlist .wl-cap + li { border-top: none; }
#wordlist .warmbar {
display: block; height: 4px; background: var(--rule); overflow: hidden;
}
#wordlist .warmbar i {
display: block; height: 100%; width: calc(var(--v, 0) * 100%);
background: var(--world-deep);
}
#wordlist .warmbar.cold i { background: color-mix(in srgb, var(--world-deep) 45%, var(--rule)); }
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) #wordlist .wl-cap {
animation: wl-cap-in 280ms var(--e-std, ease) both;
}
@keyframes wl-cap-in {
from { opacity: 0; transform: translateX(-6px); }
to   { opacity: 1; transform: none; }
}
}
#v-journey.show {
background: linear-gradient(180deg,
color-mix(in srgb, var(--signal) 6%, transparent), transparent 300px);
}
#journey-patent .jp-doc {
position: relative; overflow: hidden;
background: var(--sheet);
border: 2px solid var(--carbon);
box-shadow: var(--lift);
padding: 22px 24px;
}
#journey-patent .jp-doc::before {
content: '';
position: absolute; inset: 7px;
border: 1px solid color-mix(in srgb, var(--gold-leaf, #b8860b) 45%, var(--rule));
pointer-events: none;
}
#journey-patent .jp-cls {
width: 86px; height: 86px;
font-size: var(--t-6);
box-shadow: inset 0 0 0 6px var(--sheet),
inset 0 0 0 8px color-mix(in srgb, var(--gold-leaf) 55%, transparent),
0 2px 0 color-mix(in srgb, var(--carbon) 25%, transparent);
}
#journey-patent .jp-ru { font-size: var(--t-4); }
#journey-patent .jp-rise {
height: 4px; background: var(--rule); margin-top: 12px;
}
#journey-patent .jp-rise i { background: var(--signal); }
.jseals { gap: 8px; }
.jseal {
background: var(--galley); border: 1px solid var(--rule);
padding: 10px 12px; min-height: 62px;
transition: border-color 160ms linear, background 160ms linear,
box-shadow 180ms var(--e-std, ease);
}
.jseal:hover { border-color: var(--carbon); background: var(--sheet); }
.jseal.got {
border-color: var(--carbon);
background: var(--sheet);
box-shadow: var(--lift-sm);
}
.jseal.got .jseal-wax {
width: 42px; height: 42px; font-size: var(--t-2);
}
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) .jseal.got .jseal-wax {
animation: jseal-press 520ms var(--e-std, ease) both;
}
@keyframes jseal-press {
from { transform: scale(1.18) rotate(-8deg); opacity: .4; }
to   { transform: none; opacity: 1; }
}
}
.journey-sheet {
border-width: 2px;
box-shadow: var(--lift);
}
#v-grammar.show {
background: linear-gradient(180deg,
color-mix(in srgb, var(--carbon) 5%, transparent), transparent 280px);
}
.glist {
display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0;
border: 2px solid var(--carbon); background: var(--galley);
}
@media (max-width: 640px) { .glist { grid-template-columns: 1fr; } }
.glesson-card {
margin: 0;
border-radius: 0;
border: none;
border-right: 1px solid var(--carbon);
border-bottom: 1px solid var(--carbon);
background: var(--galley);
box-shadow: none;
padding: 16px 18px 16px 58px;
min-height: 88px;
overflow: hidden;
transition: background 160ms linear;
}
.glist .glesson-card:nth-child(even) { border-right: none; }
.glesson-card:hover { background: var(--sheet); transform: none; box-shadow: none; }
.glesson-card .g-no {
font-family: var(--serif); font-style: italic;
font-size: 1.35rem; color: var(--steel);
left: 16px; top: 14px;
}
.glesson-card:hover .g-no { color: var(--signal-ink, var(--signal)); }
.glesson-card .gru {
font-family: var(--bill); font-weight: 700;
text-transform: uppercase; letter-spacing: .05em;
font-size: var(--type-body); line-height:1.5; overflow-wrap:anywhere; color: var(--carbon);
}
.glesson-card .gen2 {
font-family: var(--serif); font-style: italic;
font-size: var(--type-body); line-height:1.5; overflow-wrap:anywhere; color: var(--steel); margin-top: 2px;
}
.glesson-card::after {
content: attr(data-orn);
position: absolute; right: 6px; bottom: -10px;
font-size: 52px; line-height: 1;
color: var(--carbon); opacity: .12;
pointer-events: none; user-select: none;
transform: rotate(-12deg);
}
.glesson-card.g-read {
background: color-mix(in srgb, var(--sheet) 70%, var(--galley));
}
.glesson-card.g-read .g-mark { color: var(--gold-leaf, #b8860b); font-size: var(--t-1); }
.glesson-card.g-read::after { opacity: .14; color: var(--gold-leaf, #b8860b); }
#v-lesson h2 {
font-family: var(--bill); text-transform: uppercase; letter-spacing: .06em;
}
#lesson-body p { max-width: 62ch; }
.gles-head { display: flex; align-items: flex-start; gap: 16px; margin: 4px 0 14px; }
.gles-who { width: 64px; height: 64px; flex: 0 0 64px; margin-top: 4px;
filter: sepia(.14) saturate(.9); }
.gles-who:empty { display: none; }
.gles-tw { min-width: 0; }
.gles-say {
font-family: var(--serif); font-style: italic; font-size: var(--type-body);
color: var(--ink-2p, var(--steel)); margin: 6px 0 0;
opacity: 0; transition: opacity 400ms ease;
}
.gles-say.on { opacity: 1; }
.gles-say.on::before { content: '«'; } .gles-say.on::after { content: '»'; }
.gex {
border-left: 4px solid var(--ink, var(--carbon));
background: var(--sheet);
padding: 14px 18px;
margin: 16px 0;
}
.gex .gnote { border-top: 1px dotted color-mix(in srgb, var(--ink, var(--carbon)) 35%, transparent);
margin-top: 8px; padding-top: 6px; }
body.motion-full .gex {
opacity: 0;
animation: gex-lay 460ms var(--e-std, ease) forwards;
animation-delay: calc(120ms + var(--i, 0) * 90ms);
}
@keyframes gex-lay {
from { opacity: 0; transform: translateY(10px); }
to   { opacity: 1; transform: none; }
}
.glesson-card { border-top: 3px solid var(--ink, transparent); }
.glesson-card .g-from {
font-size: var(--type-meta); line-height:1.5; overflow-wrap:anywhere; letter-spacing: .03em; margin-top: 6px;
color: color-mix(in srgb, var(--ink, var(--steel)) 72%, var(--steel));
font-style: italic; font-family: var(--serif);
}
#btn-grammar-back { margin-top: 18px; }
.stamp { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; }
.rd-book.rd-marked::after { content: none; }
.rd-orn .stamp { width: 30px; height: 30px; vertical-align: middle; }
.gx-topic i .stamp { width: 1.2em; height: 1.2em; vertical-align: -0.25em; }
.gx-bloom i .stamp { width: 1em; height: 1em; }
.gx-orn .stamp { width: 1.15em; height: 1.15em; }
.seal-body .stamp { width: 60%; height: 60%; }
.gx-stage.gx-marked::after {
content: '';
width: clamp(220px, 40vmin, 420px); height: clamp(220px, 40vmin, 420px);
background: var(--ghost-img) center / contain no-repeat;
opacity: .07;
}
[data-theme="dark"] .gx-stage.gx-marked::after { opacity: .1; }
.glesson-card.g-marked::after { content: none; }
.g-stampmark {
position: absolute; right: 4px; bottom: -8px; width: 66px; height: 66px;
transform: rotate(-10deg);
color: var(--ink, var(--carbon)); opacity: .1; pointer-events: none;
}
.g-stampmark .stamp { width: 100%; height: 100%; }
.glesson-card.g-read .g-stampmark { color: var(--gold-leaf, #b8860b); opacity: .16; }
.scene-head { position: relative; }
.scene-head.sh-marked::after { content: none; }
.sh-stamp {
display: none;
position: absolute; left: -196px; top: -4px;
width: 156px; height: 156px;
transform: rotate(-11deg);
color: var(--book-ink, var(--carbon)); opacity: .06; pointer-events: none;
}
@media (min-width: 1240px) { .sh-stamp { display: block; } }
.sh-stamp .stamp { width: 100%; height: 100%; }
.scene-head .orn .stamp { width: 1.15em; height: 1.15em; }
#read-blooms .rb i .stamp { width: 1em; height: 1em; }
#standing-line { max-width: 720px; margin: 0 auto 20px; }
.stl {
display: flex; align-items: center; gap: 16px;
padding: 10px 14px;
background: var(--sheet);
border: 1px solid color-mix(in srgb, var(--carbon) 24%, transparent);
box-shadow: var(--lift-sm);
}
.stl-cls {
flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center;
font-family: var(--serif); font-weight: var(--fw-text); font-size: var(--t-3);
border: 1px solid color-mix(in srgb, var(--carbon) 45%, transparent);
box-shadow: inset 0 0 0 2px var(--sheet), inset 0 0 0 3px color-mix(in srgb, var(--carbon) 25%, transparent);
color: var(--carbon); background: var(--galley);
}
body[data-standing="3"] .stl-cls, body[data-standing="4"] .stl-cls {
border-color: var(--signal); color: var(--signal);
}
.stl-mid { flex: 1; min-width: 0; display: grid; gap: 4px; }
.stl-rank { font-size: var(--t-00); letter-spacing: .03em; color: var(--ink-2p, var(--steel)); }
.stl-rank b { color: var(--carbon); }
.stl-bar {
display: block; height: 4px; position: relative; overflow: hidden;
background: color-mix(in srgb, var(--carbon) 12%, transparent);
}
.stl-bar i {
position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 1%);
background: var(--signal);
transition: width 900ms var(--e-std, ease);
}
.stl-next { font-size: .7rem; font-style: italic; font-family: var(--serif); color: var(--steel); }
.stl-run {
flex: 0 0 auto; text-align: right; font-size: var(--t-00);
color: var(--ink-2p, var(--steel)); display: grid; gap: 2px; justify-items: end;
}
.stl-run-top { white-space: nowrap; }
.stl-run b { font-size: var(--t-2); color: var(--carbon); font-family: var(--serif); }
.stl-run em { font-style: italic; font-family: var(--serif); font-size: .72rem; }
.stl-keep { color: var(--signal-ink, var(--signal)); }
body.motion-full .stl-keep { animation: stl-glow 3.4s ease-in-out infinite; }
#v-review[data-heat="1"] #rev-card {
--rev-glow: 0 0 24px -8px color-mix(in srgb, var(--ink, var(--carbon)) 38%, transparent);
}
#v-review[data-heat="2"] #rev-card {
--rev-glow: 0 0 32px -6px color-mix(in srgb, var(--ink, var(--carbon)) 58%, transparent);
border-color: color-mix(in srgb, var(--ink, var(--carbon)) 60%, var(--line));
}
#v-review[data-heat="3"] #rev-card {
--rev-glow: 0 0 40px -4px color-mix(in srgb, var(--ink, var(--carbon)) 70%, transparent);
border-color: var(--signal);
}
.stl-flame { font-style: normal; color: var(--signal); margin-right: 4px; }
body.motion-full .stl-flame { animation: stl-glow 3.4s ease-in-out infinite; }
@keyframes stl-glow {
0%, 100% { opacity: .7; }
50% { opacity: 1; text-shadow: 0 0 9px color-mix(in srgb, var(--signal) 55%, transparent); }
}
@media (max-width: 620px) {
.stl { flex-wrap: wrap; }
.stl-mid { min-width: 100%; order: 3; }
}
.haunt {
position: fixed; top: 13vh; left: -120px;
width: 92px; height: 92px; z-index: 3;
pointer-events: none; opacity: 0;
color: var(--carbon);
filter: blur(1.2px);
}
.haunt .stamp { width: 100%; height: 100%; }
body.motion-full .haunt-drift { animation: haunt-drift 16s linear forwards; }
@keyframes haunt-drift {
0%   { transform: translateX(0) translateY(0) rotate(-3deg); opacity: 0; }
12%  { opacity: .1; }
40%  { transform: translateX(42vw) translateY(2.5vh) rotate(2deg); }
52%  { opacity: .12; }
75%  { transform: translateX(80vw) translateY(-1vh) rotate(-2deg); }
88%  { opacity: .07; }
100% { transform: translateX(112vw) translateY(1vh) rotate(1deg); opacity: 0; }
}
body.motion-full .haunt-dash { animation: haunt-dash 2.8s cubic-bezier(.5, 0, .8, 1) forwards; }
@keyframes haunt-dash {
0%   { transform: translateX(0) rotate(6deg); opacity: 0; }
18%  { opacity: .13; }
100% { transform: translateX(115vw) rotate(10deg); opacity: 0; }
}
[data-theme="dark"] .haunt { color: #e8e0d2; }
body:has(#v-read.show) .haunt, body.gx-on .haunt { display: none; }
.scene-head {
position: relative;
overflow: hidden;
padding: 8px 0;
}
.scene-head h2 {
font-family: var(--serif); font-weight: var(--fw-text);
font-size: clamp(1.4rem, 1rem + 3vw, 2.4rem);
overflow-wrap: break-word;
margin: 8px 0 4px;
color: var(--carbon);
position: relative; z-index: 1;
}
.scene-head .vy {
letter-spacing: .28em; font-size: var(--t-00); color: var(--steel);
}
.scene-head::after {
content: attr(data-orn);
position: absolute; right: -2%; top: -12%;
font-size: clamp(64px, 12vw, 140px); line-height: 1;
color: var(--book-ink, var(--carbon)); opacity: .04;
pointer-events: none; user-select: none;
transform: rotate(-14deg);
}
[data-theme="dark"] .scene-head::after { opacity: .08; }
.scene-head .orn {
font-size: 1.4rem; margin-top: 14px;
color: var(--book-ink, var(--signal));
}
#v-read #text {
border-top-width: 5px;
}
#pop {
border-top: 4px solid var(--ink, var(--carbon));
box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
0 3px 6px color-mix(in srgb, var(--carbon) 20%, transparent), 0 14px 30px -12px color-mix(in srgb, var(--carbon) 50%, transparent);
}
#pop .pw { letter-spacing: .01em; }
#ov-key.show, #ov-settings.show {
display: flex; align-items: center; justify-content: center;
}
#ov-key .panel, #ov-settings .panel {
border: 1px solid var(--rule);
border-radius: var(--r-dialog);
box-shadow: var(--sh-float);
background: var(--sheet);
position: relative;
width: min(440px, calc(100vw - 36px));
}
#key-panel .k-plate, #settings-panel .k-plate {
text-align: left;
margin: 0 0 8px;
padding: 0;
background: none;
border: 0;
}
#key-panel .k-plate .k-orn, #settings-panel .k-plate .k-orn {
display: block; color: var(--carbon); font-size: 22px; line-height: 1;
font-family: var(--bill); font-weight: 700;
}
#key-panel .k-plate .k-ru, #settings-panel .k-plate .k-ru {
display: inline; font: var(--fw-strong) var(--t-00)/1.4 var(--sans);
letter-spacing: var(--track-eyebrow); text-transform: uppercase;
color: var(--steel); margin: 0 .6em 0 0;
}
#key-panel .k-plate .k-en, #settings-panel .k-plate .k-en {
display: inline; font-family: var(--serif); font-style: italic;
font-size: var(--t-0); color: var(--steel); margin-top: 0;
}
#key-panel input[type=email],
#key-panel input[type=password],
#key-panel input[type=text] {
clip-path: none;
border: 1px solid var(--carbon);
background: var(--galley);
padding: 12px 14px;
font-family: var(--serif); font-size: var(--t-1);
}
#key-panel input:focus { border-color: var(--signal); background: var(--sheet); }
#key-panel:has(.k-tabs) > h3, #settings-panel > h3 {
display: none !important;
}
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) .overlay.show .panel {
animation: door-lay 340ms var(--e-std, ease) both;
}
@keyframes door-lay {
from { opacity: 0; transform: translateY(14px); }
to   { opacity: 1; transform: none; }
}
}
#v-home .greeting {
font-family: var(--serif); font-style: italic;
font-size: clamp(1.15rem, 2.2vw, 1.45rem);
text-align: center;
margin: 18px 0 4px;
color: var(--carbon);
letter-spacing: .01em;
}
#v-home .greeting .gr-ru { font-style: italic; }
#v-home .greeting .gr-rest { color: var(--steel); font-style: italic; }
#v-home .greeting .gr-hour {
display: block; font-family: var(--bill); font-style: normal;
font-size: var(--t-00); letter-spacing: .2em; text-transform: uppercase;
color: var(--signal); margin-bottom: 4px;
}
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) #v-home .greeting .gr-ru {
animation: gr-in 640ms var(--e-std, ease) both;
}
@keyframes gr-in {
from { opacity: 0; letter-spacing: .08em; }
to   { opacity: 1; letter-spacing: .01em; }
}
}
@media (max-width: 760px) {
#word-filters button { min-width: 0; flex: 1 1 42%; }
#word-filters input { flex: 1 1 100%; }
}
#desk-details .friend-strip .fr-bubble {
background: var(--sheet);
border: 1px solid var(--carbon);
border-radius: 0;
box-shadow: var(--lift-sm);
}
#shelf .book.glassed .b-under {
font-family: var(--serif); font-style: italic;
}
#shelf .book .b-under::after {
content: attr(data-access);
display: block;
font: var(--fw-strong) .75rem/1.4 var(--sans); font-style: normal;
letter-spacing: 0; text-transform: none;
color: var(--steel);
}
body[data-standing="2"] .room-head,
body[data-standing="3"] .room-head,
body[data-standing="4"] .room-head { border-bottom-color: color-mix(in srgb, var(--signal) 55%, var(--carbon)); }
.continue-card {
border: 2px solid var(--carbon);
box-shadow: var(--lift);
background: var(--sheet);
padding: 22px 24px;
}
.continue-card .sc-title { font-family: var(--serif); font-size: var(--t-4); margin: 6px 0 4px; }
.continue-card .sc-sub { font-style: italic; color: var(--steel); font-family: var(--serif); margin-bottom: 12px; }
#v-course .masthead.room-head {
background: transparent;
text-align: left;
padding-bottom: 18px;
}
#v-course .masthead.room-head h1 { margin: 6px 0 10px; }
.theme-dots {
display: flex; gap: 8px; flex: none;
border: none; background: none; padding: 0; box-shadow: none;
}
.theme-dots button {
width: 20px; height: 20px; border-radius: 50%;
border: 1px solid var(--rule-room); padding: 0;
position: relative; box-shadow: none;
}
.theme-dots button.on {
border-color: var(--carbon);
box-shadow: 0 0 0 2px var(--room), 0 0 0 3px var(--carbon);
}
.theme-dots button:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.nav-tabs {
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs button { scroll-snap-align: start; flex: none; }
@media (min-width: 900px) {
.nav-tabs { mask-image: none; -webkit-mask-image: none; }
}
@media (max-width: 560px) {
.bar { gap: 8px; padding: 8px 12px; }
.nav-tabs { gap: 2px; }
.bar .nav-tabs button { padding: 8px 7px; letter-spacing: .06em; }
.theme-dots { gap: 6px; }
}
@media (max-width: 420px) {
.bar { gap: 6px; padding: 8px 8px; }
.bar .nav-tabs button { padding: 8px 5px; letter-spacing: .02em; font-size: .93em; }
.theme-dots button { width: 18px; height: 18px; }
}
@media (max-width: 480px) {
.bar .theme-dots { display: none; }
}
#settings-panel .theme-dots { display: inline-flex; }
#settings-panel .theme-dots button { width: 20px; height: 20px; }
.bar button:focus-visible,
.nav-tabs button:focus-visible {
outline: 2px solid var(--signal); outline-offset: 2px;
}
.view {
max-width: min(1280px, 94vw);
margin-inline: auto;
}
#v-home > .friend-strip,
#v-home > .aim-line,
#v-home > .greeting,
#v-home > .ticket-card,
#v-home > .grid2,
#v-story > *,
#v-grammar > *, #v-journey > *, #v-review > * {
max-width: 900px;
margin-inline: auto;
}
#v-words > * { max-width: var(--page-w); margin-inline: auto; }
#v-home > .friend-strip, #v-home > .aim-line, #v-home > .greeting,
#v-home > .ticket-card, #v-home > .grid2 {
max-width: min(94%, 1040px);
}
#desk-details .friend-strip .bubble, #desk-details .friend-strip p { max-width: 62ch; }
#v-home > .masthead { max-width: none; }
@media (max-width: 1000px) {
.view { max-width: 94vw; }
#v-home > *, #v-story > * { max-width: none; }
}
html, body { overflow-x: clip; }
.bar { min-width: 0; }
.nav-tabs { min-width: 0; }
.toast.show { animation: none; }
.toast .tt { border-bottom: 1px solid var(--rule); padding-bottom: 3px; margin-bottom: 6px; }
:root[data-lamp] header { view-transition-name: none; }
:root[data-lamp]::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
:root[data-lamp]::view-transition-new(root) {
mix-blend-mode: normal;
clip-path: circle(0px at var(--lamp-x, 100%) var(--lamp-y, 26px));
animation: lamplight calc(560ms * var(--motion, 1)) var(--e-std, ease) both;
}
@keyframes lamplight {
to { clip-path: circle(142vmax at var(--lamp-x, 100%) var(--lamp-y, 26px)); }
}
.nav-tabs button, .tile, .book, .resume-card, .gchip, .toast,
.meter, .meter > i, .warmbar, .warmbar > i {
border-radius: 0;
}
.streak-chip { border-radius: 0; font-family: var(--bill); letter-spacing: .06em; }
.brand { font-family: var(--bill); font-weight: 700; letter-spacing: .12em; }
.theme-dots button, #settings-panel .theme-dots button { border-radius: 0; }
.theme-dots button.on {
box-shadow: 0 0 0 2px var(--room), 0 0 0 3px var(--carbon);
}
#btn-settings { display: inline-flex; align-items: center; }
#btn-settings svg { display: block; }
.first-read-banner {
border: 1px solid var(--carbon);
box-shadow: none;
background: var(--sheet);
}
.first-read-banner h2 {
font-family: var(--bill); font-weight: 800; font-size: 2rem;
line-height: .98; text-transform: uppercase; letter-spacing: .01em;
text-wrap: balance;
}
.first-read-banner .fr-meter i {
width: 26px; height: 5px; border-radius: 0;
border: 1px solid var(--signal-ink); background: transparent;
}
.first-read-banner .fr-meter i.lit { background: var(--signal-ink); transform: none; }
.streak-chip.chip-warm { border-color: var(--signal); }
.streak-chip.chip-gilt {
border-color: var(--signal); color: var(--signal);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-hi) 40%, transparent);
}
.streak-chip.chip-gilt .fl { color: var(--gold-hi); }
.streak-chip.chip-gilt #streak-n { color: var(--signal); font-weight: 700; }
#tour-panel .t-bubble,
#rev-card .still-chip,
.road-door { border-radius: 0; }
.bar { max-width: min(1280px, 96vw); }
.bar-rule {
flex: none;
width: 1px;
align-self: stretch;
margin-block: 12px;
background: currentColor;
opacity: .3;
}
.nav-rooms { flex: 0 1 auto; }
.nav-ident {
flex: none;
overflow: visible;
mask-image: none;
-webkit-mask-image: none;
gap: 6px;
}
#nav-profile {
font-variant-numeric: tabular-nums;
letter-spacing: .04em;
}
#nav-prof-cls {
font-family: var(--mono);
font-weight: var(--fw-strong);
}
#nav-signup {
color: var(--on-signal);
background: var(--signal);
border: 1px solid var(--signal-ink);
border-radius: var(--r-control);
box-shadow: var(--sh-press);
}
#nav-signup:hover { color: var(--on-reward, var(--carbon)); }
#nav-signup::after { display: none; }
#nav-signup[hidden] { display: none !important; }
#nav-howto {
display: inline-flex;
align-items: center;
min-height: 46px;
padding: 0 8px;
border-bottom: 4px solid transparent;
border-radius: var(--r-surface);
font: 400 .75rem var(--sans);
letter-spacing: .04em;
color: var(--on-play, var(--on-pine));
text-decoration: none;
white-space: nowrap;
}
#nav-howto:hover { color: var(--reward, var(--signal)); }
#nav-howto:focus-visible { outline: 2px solid var(--reward, var(--signal)); outline-offset: 2px; }
@media (max-width: 900px) { #nav-howto { display: none; } }
#nav-howto.no-room { display: none; }
.nav-lang { position: relative; display: inline-flex; align-items: center; gap: 5px;
min-height: 40px; padding: 0 10px; margin-inline-end: 4px; border-radius: var(--r-control, 5px);
border: 1px solid color-mix(in srgb, var(--on-play, #fffdf5) 35%, transparent);
color: var(--on-play, var(--on-pine)); font: 600 .75rem/1 var(--sans); letter-spacing: .06em; cursor: pointer; }
.nav-lang[hidden] { display: none; }
.nav-lang:hover { border-color: var(--reward, var(--signal)); color: var(--reward, var(--signal)); }
.nav-lang:focus-within { outline: 2px solid var(--reward, var(--signal)); outline-offset: 2px; }
.nav-lang select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
font-size: 16px;  }
header .nav-ident .nav-light, header .nav-ident .nav-gear { display: inline-flex; align-items: center; flex: 0 0 auto;
box-sizing: border-box; height: 40px; min-height: 40px; margin: 0 4px 0 0;
border-radius: var(--r-control, 5px); border: 1px solid color-mix(in srgb, var(--on-play, #fffdf5) 35%, transparent);
color: var(--on-play, var(--on-pine)); background: transparent; box-shadow: none; }
header .nav-ident .nav-light { padding: 2px; gap: 2px; }
header .nav-ident .nav-light button { display: inline-grid; place-items: center; flex: 0 0 auto; box-sizing: border-box;
width: 34px; min-width: 34px; height: 34px; min-height: 0; padding: 0; margin: 0;
border: 0; border-radius: calc(var(--r-control, 5px) - 1px); background: transparent; color: inherit;
box-shadow: none; text-decoration: none; cursor: pointer; }
header .nav-ident .nav-light button::after, header .nav-ident .nav-gear::after { content: none; }
header .nav-ident .nav-gear { justify-content: center; width: 40px; min-width: 40px; padding: 0; cursor: pointer; }
header .nav-ident .nav-light button:hover, header .nav-ident .nav-gear:hover { color: var(--reward, var(--signal)); border-color: color-mix(in srgb, var(--reward, var(--signal)) 70%, transparent); }
header .nav-ident .nav-light button.on { background: color-mix(in srgb, var(--on-play, #fffdf5) 18%, transparent); color: var(--reward, var(--signal)); }
header .nav-ident .nav-light button:focus-visible, header .nav-ident .nav-gear:focus-visible { outline: 2px solid var(--reward, var(--signal)); outline-offset: 2px; }
.nav-gear svg { transition: transform var(--mo-act) var(--mo-e-std); }
.nav-gear:hover svg { transform: rotate(45deg); }
@media (max-width: 899px) {
header .nav-ident .nav-light { padding: 0; width: 38px; justify-content: center; }
header .nav-ident .nav-light button:not(.on) { display: none; }
header .nav-ident .nav-light button.on { background: transparent; }
header .nav-ident .nav-light, header .nav-ident .nav-gear { width: 38px; min-width: 38px; height: 40px; }
}
header .bar.rail-compact .nav-ident .nav-light { padding: 0; width: 38px; justify-content: center; }
header .bar.rail-compact .nav-ident .nav-light button:not(.on) { display: none; }
header .bar.rail-compact .nav-ident .nav-light button.on { background: transparent; }
header .bar.rail-stack { flex-wrap: wrap; row-gap: 0; }
header .bar.rail-stack > .spacer { flex: 1 1 auto; }
header .bar.rail-stack .nav-rooms { order: 10; flex: 1 0 100%; width: 100%; overflow: visible;
mask-image: none; -webkit-mask-image: none; justify-content: flex-start;
border-top: 1px solid color-mix(in srgb, var(--on-play, #fffdf5) 25%, transparent); }
header .bar.rail-stack > .bar-rule { display: none; }
header .bar.rail-tight .brand.wordmark,
header .bar.rail-tight .brand + .bar-rule { display: none; }
.nav-ident { position: relative; }
@media (max-width: 900px) {
.brand + .bar-rule { display: none; }
}
@media (max-width: 380px) {
.nav-ident { gap: 2px; }
.bar .nav-tabs button { padding-inline: 3px; letter-spacing: 0; font-size: .9em; }
}
@media (max-width: 560px) {
.brand { display: none; }
.brand + .bar-rule { display: none; }
.bar { max-width: 100vw; padding-inline: 6px; }
.nav-rooms {
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.nav-rooms::-webkit-scrollbar { display: none; }
.nav-ident { flex: none; }
}
@keyframes viewin {
from { transform: translateX(-14px); opacity: 0; }
}
@keyframes tilein {
from { transform: translateX(-16px); opacity: 0; }
to   { transform: none; opacity: 1; }
}
@keyframes rowin {
from { transform: translateX(-8px); opacity: 0; }
to   { transform: none; opacity: 1; }
}
@keyframes attrIn {
from { transform: translateX(-8px); opacity: 0; }
to   { transform: none; opacity: 1; }
}
@keyframes popin {
from { opacity: 0; box-shadow: 0 0 0 var(--carbon); }
60%  { opacity: 1; }
to   { opacity: 1; box-shadow: var(--lift); }
}
@keyframes guidein {
from { opacity: 0; box-shadow: 0 0 0 var(--carbon); }
to   { opacity: 1; box-shadow: var(--lift); }
}
@keyframes cs-word {
from { transform: translateX(-9px); opacity: 0; }
to   { transform: none; opacity: 1; }
}
@keyframes cs-letter-in {
from { transform: translateX(-12px); opacity: 0; }
to   { transform: none; opacity: 1; }
}
:root {
--play: #244177;
--play-deep: #152747;
--reward: #f6c445;
--reward-deep: #8a5a00;
--right: #1ea868;
--right-deep: #127748;
--wrong: #e9543f;
--wrong-deep: #c83d31;
--paper: #fffdf5;
--play-tint: #eef3fc;
--reward-tint: #fff1be;
--right-tint: #daf5e8;
--wrong-tint: #ffe2dc;
--edge: var(--carbon);
--edge-hi: var(--carbon);
--press: var(--carbon);
--bar: var(--play);
--on-bar: var(--paper);
--on-play: #fffdf5;
--on-play-deep: #fffdf5;
--on-reward: #151c2e;
--on-right: #151c2e;
--mark: var(--play);
--lift-sm: 0 2px 0 var(--play-deep);
--lift: 0 2px 0 var(--play-deep);
--lift-lg: 0 9px 0 color-mix(in srgb, var(--play-deep) 82%, var(--carbon));
}
[data-theme="sepia"] {
--play: #2b3f63;
--play-deep: #1a2740;
--paper: var(--sheet);
}
[data-theme="dark"] {
--play: #486cb4;
--play-deep: #20355e;
--reward: #f6c445;
--reward-deep: #ffe28a;
--right: #2ec581;
--right-deep: #127748;
--wrong: #ff7d70;
--wrong-deep: #c83d31;
--paper: #1c273e;
--play-tint: #16223a;
--reward-tint: #4b4123;
--right-tint: #173d32;
--wrong-tint: #4b2931;
--bar: var(--play);
--on-bar: #10182d;
--on-play: #fffdf5;
--on-play-deep: #fffdf5;
--on-reward: #151c2e;
--on-right: #151c2e;
--mark: var(--reward);
--press: var(--case);
--lift-sm: 0 2px 0 #0b1328;
--lift: 0 2px 0 #0b1328;
--lift-lg: 0 9px 0 #080e1e;
}
body {
background: var(--room);
background-image:
linear-gradient(90deg, color-mix(in srgb, var(--play) 4%, transparent) 1px, transparent 1px),
linear-gradient(color-mix(in srgb, var(--play) 4%, transparent) 1px, transparent 1px);
background-size: 32px 32px;
}
body::before { display: none; }
body > header {
background: var(--play);
color: var(--on-play);
border-bottom: 3px solid var(--press);
box-shadow: 0 2px 0 var(--play-deep);
}
[data-theme="dark"] body > header {
background: var(--play-deep);
box-shadow: 0 2px 0 #0b1328;
}
button .ic, .btn .ic, .icon-btn .ic { width: 1.06em; height: 1.06em; vertical-align: -.16em; }
.gx-say .ic { width: 1em; height: 1em; }
.room-head {
background: none; box-shadow: none; border: 0;
border-bottom: 1px solid var(--rule);
margin: 12px auto 24px; padding: 8px 0 16px;
text-align: left;
}
.room-head .rh-ru {
font: var(--fw-strong) var(--t-00)/1.4 var(--sans);
letter-spacing: var(--track-eyebrow); text-transform: uppercase;
color: var(--steel);
}
.room-head h1, .room-head h2 {
font: var(--fw-text) clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem)/1.15 var(--serif);
font-style: normal; letter-spacing: var(--track-title); text-transform: none;
color: var(--carbon); margin: 4px 0 6px;
}
.room-head .rh-sub, .room-head #journey-sub, .room-head #words-census, .room-head #grammar-census {
font: var(--type-body)/1.6 var(--sans); font-style: normal;
color: var(--steel); margin: 0; max-width: 62ch;
}
.bar { min-height: 62px; max-width: 1280px; padding-block: 7px; }
.brand, .brand .wm-l, .nav-tabs button { color: var(--on-play); }
.brand .wm-t { color: var(--reward); }
.brand b { color: var(--on-play); }
.nav-tabs button {
min-height: 46px;
padding-inline: 14px;
border: 0;
border-bottom: 3px solid transparent;
background: transparent;
}
.nav-tabs button:hover { border-bottom-color: color-mix(in srgb, var(--on-play) 35%, transparent); }
.nav-tabs button.active,
.nav-tabs button[data-nav].active {
color: var(--on-play);
background: transparent;
border-bottom-color: var(--signal);
box-shadow: none;
}
.nav-tabs button::after { display: none; }
.streak-chip {
background: var(--reward);
color: var(--on-reward);
border: 2px solid var(--carbon);
box-shadow: 0 3px 0 var(--press);
padding: 6px 10px;
}
.theme-dots button,
#settings-panel .theme-dots button {
border-radius: 2px;
border: 2px solid var(--paper);
width: 22px; height: 22px;
}
.theme-dots button.on {
box-shadow: 0 0 0 2px var(--play), 0 0 0 4px var(--reward);
}
.px-tal b, .px-verb { color: var(--play); }
input.px-name:focus { box-shadow: inset 0 -4px 0 var(--play); color: var(--carbon); }
.px-case button.active { background: var(--play); color: var(--on-play); }
.btn, .icon-btn, .filters button, .conf-row button, .rev-btns button,
.quiz-opt, .ltile, .keys button, #pop .row button, #pop .row a,
.ask-card .opts button, .guide-again, .plan-opt, .read-on, .exlibris,
.gx-opt, .gx-say, .gx-tile, .gx-set, .cs-lesson {
border: 1px solid color-mix(in srgb, var(--carbon) 55%, var(--rule));
border-radius: var(--r-control);
background: var(--galley);
color: var(--carbon);
box-shadow: var(--sh-press-quiet);
transition: transform calc(var(--mo-touch) * var(--motion, 1)) linear,
box-shadow calc(var(--mo-touch) * var(--motion, 1)) linear,
background-color calc(var(--mo-ink) * var(--motion, 1)) linear,
border-color calc(var(--mo-ink) * var(--motion, 1)) linear,
color calc(var(--mo-ink) * var(--motion, 1)) linear;
}
.btn, .icon-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
min-height: var(--control-h); padding: var(--control-pad);
font: var(--fw-strong) var(--type-control)/1.25 var(--sans);
letter-spacing: 0; text-transform: none;
cursor: pointer;
}
.icon-btn { min-height: var(--control-h-tool); min-width: var(--control-h-tool); padding: 0 var(--s3); }
.btn:hover, .icon-btn:hover, .filters button:hover, .conf-row button:hover,
.rev-btns button:hover, .quiz-opt:hover, .ltile:hover, .keys button:hover,
#pop .row button:hover, .ask-card .opts button:hover, .guide-again:hover,
.gx-opt:hover:not(:disabled), .gx-say:hover, .gx-tile:hover, .cs-lesson:hover {
background: var(--galley);
border-color: var(--carbon);
transform: none;
}
.btn:active, .icon-btn:active, .filters button:active, .rev-btns button:active,
.quiz-opt:active, .ltile:active, .keys button:active, #pop .row button:active,
.gx-opt:active, .gx-say:active, .gx-tile:active, .cs-lesson:active {
transform: translateY(1px);
box-shadow: none;
}
.btn.primary, .rev-btns .primary, #pat-next, .plan.best,
.buy.primary, #gx-next, #gx-got, #gx-check, #wk-next {
background: var(--signal);
border-color: var(--signal-ink);
color: var(--on-signal);
box-shadow: var(--sh-press);
font-weight: var(--fw-strong);
}
.btn.primary:hover, .rev-btns .primary:hover, #gx-next:hover, #gx-got:hover, #gx-check:hover, #wk-next:hover {
background: color-mix(in srgb, var(--signal) 90%, var(--sheet));
border-color: var(--signal-ink);
color: var(--on-signal);
}
.btn.primary:active, .rev-btns .primary:active, #gx-next:active, #gx-got:active, #gx-check:active, #wk-next:active {
background: var(--signal);
color: var(--on-signal);
box-shadow: none;
}
.btn.quiet, .btn.quiet:hover, .btn.quiet:active {
background: none; border-color: transparent; box-shadow: none;
padding-inline: var(--s1);
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
}
.btn.quiet:hover { text-decoration-thickness: 2px; }
.btn:disabled, .btn.primary:disabled, .icon-btn:disabled, .rev-btns button:disabled,
#gx-next:disabled, #gx-check:disabled, #wk-next:disabled {
background: var(--galley); border-color: var(--rule); color: var(--ink-3p);
box-shadow: none; transform: none; cursor: default;
}
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
outline: 3px solid var(--reward);
outline-offset: 3px;
}
.card, .scene-end, .ticket, .prep-banner, .find-card,
.issue, .glesson-card, .gex, .tr-reveal, .ask-card, .tonight-card,
.frontier-card {
background: var(--galley);
border: 1px solid var(--rule);
border-radius: var(--r-surface);
box-shadow: none;
}
.overlay .panel {
background: var(--galley);
border: 1px solid var(--rule);
border-radius: var(--r-dialog);
box-shadow: var(--sh-float);
}
.bill-head, .tonight-card .bill-head, .frontier-card .bill-head, #ladder-card .bill-head, #v-course .bill-head {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
margin: 0 0 var(--s3); padding: 0 0 var(--s2);
background: none; color: var(--steel);
border-bottom: 1px solid var(--rule);
font: var(--fw-strong) var(--t-00)/1.4 var(--sans);
letter-spacing: var(--track-eyebrow); text-transform: uppercase;
}
.overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
#v-home > .masthead {
margin: 28px auto 0;
max-width: var(--desk-w, min(94%, 1040px));
text-align: left;
background: var(--play);
color: var(--on-play);
border: 3px solid var(--carbon);
box-shadow: none;
padding: clamp(24px, 3.4vw, 40px);
position: relative;
overflow: hidden;
}
#v-home > .masthead::after {
content: attr(data-folio);
position: absolute;
left: auto; border: 0;
right: 18px; bottom: 8px;
width: auto; height: auto;
display: grid; place-items: center;
color: var(--on-play);
font-family: var(--mono); font-size: var(--t-00); font-weight: var(--fw-strong);
letter-spacing: .16em; opacity: .55;
}
.arena-ghost {
margin-top: clamp(14px, 2vw, 22px);
padding: 14px 0 12px;
border-top: 1px solid color-mix(in srgb, var(--on-play) 28%, transparent);
display: flex; flex-wrap: wrap; align-items: baseline;
gap: 6px 18px;
}
.arena-ghost .ag-q {
font-family: var(--serif); font-style: italic;
font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.45;
color: var(--on-play);
}
.arena-ghost .ag-q .gx-ghost { opacity: .42; letter-spacing: .04em; }
.arena-ghost .ag-shy {
font-family: var(--sans); font-style: normal;
font-size: var(--t-00); font-weight: var(--fw-strong);
letter-spacing: .14em; text-transform: uppercase;
color: var(--on-play); opacity: .72;
white-space: nowrap;
}
@media (max-width: 580px) {
.arena-ghost .ag-q { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.arena-ghost .ag-shy { white-space: normal; min-width: 0; }
}
.desk-intro {
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(380px, 1.15fr);
gap: clamp(24px, 3.6vw, 48px);
align-items: center;
min-height: 280px;
}
.desk-lockup { align-self: center; }
#v-home .masthead .wordmark {
display: flex; align-items: baseline; gap: 7px;
text-align: left;
}
#v-home .masthead .wm-l {
color: var(--on-play);
font-family: var(--bill);
font-size: clamp(18px, 2.1vw, 26px);
font-weight: 800;
line-height: 1;
letter-spacing: .08em;
}
#v-home .masthead .wm-t {
color: var(--reward);
font-size: clamp(16px, 1.8vw, 22px);
}
#v-home .masthead h1,
#v-home #room-name {
font-family: var(--bill);
font-weight: 900;
font-size: clamp(52px, 6.8vw, 86px);
line-height: .84;
letter-spacing: .015em;
text-indent: 0;
color: var(--on-play);
max-width: 7ch;
margin: 18px 0 12px;
}
#v-home .masthead .room-line {
color: var(--on-play) !important;
letter-spacing: .2em;
opacity: 1;
font-size: .75rem;
text-wrap: balance;
}
#v-home .masthead .almanac {
color: var(--on-play);
margin: 12px 0 0;
max-width: 48ch;
text-align: left;
font-size: var(--t-00);
line-height: 1.45;
opacity: .88;
}
#v-home .masthead .almanac :is(.al-orn, .al-more, .al-echo) {
color: inherit;
}
.desk-host {
position: relative;
min-height: 270px;
display: grid;
grid-template-columns: minmax(230px, 1fr) 160px;
align-items: center;
gap: 16px;
isolation: isolate;
}
.desk-host-bubble {
position: relative;
align-self: center;
background: var(--sheet);
color: var(--carbon);
border: 3px solid var(--carbon);
box-shadow: none;
padding: 18px 20px;
display: grid;
gap: 8px;
z-index: 2;
border-radius: 2px;
}
.desk-host-bubble::after {
content: '';
position: absolute;
width: 18px; height: 18px;
right: -11px; top: calc(50% - 9px);
background: var(--sheet);
border-right: 3px solid var(--carbon);
border-bottom: 3px solid var(--carbon);
transform: rotate(-45deg);
}
.desk-host-kicker {
font-family: var(--sans);
font-size: var(--t-00); font-weight: var(--fw-strong);
letter-spacing: .14em;
color: var(--play-deep);
background: var(--reward-tint);
border: 1.5px solid var(--carbon);
padding: 3px 8px;
width: fit-content;
border-radius: 2px;
}
[data-theme="dark"] .desk-host-kicker { color: var(--reward-deep); }
.desk-host-kicker:empty { display: none; }
#desk-host-line {
font-family: var(--bill);
font-size: clamp(24px, 2.8vw, 32px);
font-weight: 900;
line-height: .98;
letter-spacing: .015em;
color: var(--carbon);
margin: 2px 0;
}
.desk-host-meta {
font-family: var(--sans);
font-size: .76rem;
line-height: 1.35;
color: var(--steel);
}
.desk-host-track {
display: flex;
align-items: center;
gap: 10px;
margin: 2px 0;
}
.desk-host-progress {
flex: 1;
display: block;
height: 12px;
border: 2px solid var(--carbon);
background: var(--play-tint);
border-radius: 2px;
overflow: hidden;
}
.desk-host-progress i {
display: block; height: 100%;
width: calc(var(--v, 0) * 100%);
min-width: 8px;
background: var(--right);
border-right: 2px solid var(--carbon);
transition: width .25s ease;
}
.desk-host-count {
font-family: var(--mono);
font-size: .72rem;
font-weight: var(--fw-strong);
color: var(--steel);
white-space: nowrap;
}
.desk-host-btn {
width: 100%;
margin-top: 4px;
}
.desk-cast-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
width: 160px;
height: 270px;
justify-self: end;
}
.desk-cameos {
position: absolute;
top: 6px; right: 0;
display: flex; gap: 6px;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
z-index: 3;
}
.desk-cameos .cameo-lab { flex: 1 0 100%; text-align: right; margin-bottom: 2px; }
.cameo-lab {
font-family: var(--bill);
font-weight: 700;
font-size: var(--t-00);
letter-spacing: .14em;
text-transform: uppercase;
opacity: .7;
margin-right: 2px;
white-space: nowrap;
}
.cameo-btn {
width: 32px; height: 32px;
display: grid; place-items: center;
background: var(--sheet);
color: var(--carbon);
border: 2px solid var(--carbon);
box-shadow: 0 2px 0 var(--press);
border-radius: 2px;
cursor: pointer;
transition: transform .1s ease, box-shadow .1s ease, background-color .15s ease;
padding: 0;
}
.cameo-btn:hover {
background: var(--reward-tint);
transform: translateY(-2px);
box-shadow: 0 2px 0 var(--press);
}
.cameo-btn.active {
background: var(--reward);
box-shadow: 0 2px 0 var(--press), inset 0 0 0 1.5px var(--play);
}
.cameo-btn svg { width: 24px; height: 24px; }
.desk-cast {
width: 154px; height: 184px;
z-index: 2;
cursor: pointer;
color: var(--carbon);
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
transition: transform .15s ease;
margin-top: 26px;
}
.desk-cast:hover {
transform: translateY(-3px) scale(1.04);
}
.desk-cast svg { width: 100%; height: 100%; display: block; overflow: visible; }
.desk-cast-pedestal {
width: 140px; height: 22px;
background: var(--reward);
border: 2.5px solid var(--carbon);
box-shadow: 0 2px 0 var(--press);
border-radius: 2px;
margin-top: -38px;
z-index: 1;
}
.desk-hud {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin: -3px auto 26px;
max-width: var(--desk-w, min(94%, 1040px));
background: var(--sheet);
border: 3px solid var(--carbon);
box-shadow: none;
position: relative;
}
.hud-pill {
background: none;
border: none;
border-left: 1.5px solid color-mix(in srgb, var(--carbon) 22%, transparent);
box-shadow: none;
border-radius: 0;
padding: 16px 20px 14px;
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
position: relative;
transition: background calc(.2s * var(--motion, 1)) var(--e-std, ease);
}
.hud-pill[hidden] { display: none; }
.hud-pill:hover {
background: color-mix(in srgb, var(--carbon) 3%, transparent);
}
.hud-pill:first-child { border-left: none; }
.hud-icon {
width: 44px; height: 44px; flex: none;
display: grid; place-items: center;
color: var(--carbon);
background: var(--galley);
border: 1.5px solid var(--carbon);
box-shadow: 2px 2px 0 var(--press);
position: relative;
}
.hud-icon .ic { width: 26px; height: 26px; }
.hud-body {
display: flex;
flex-direction: column;
gap: 3px;
line-height: 1.05;
min-width: 0;
}
.hud-body strong {
font-family: var(--bill);
font-size: 1.38rem;
font-weight: 800;
color: var(--carbon);
letter-spacing: .02em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
text-transform: uppercase;
}
.hud-body strong .hud-n {
font-family: var(--bill);
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: .01em;
}
.hud-body small {
font-family: var(--sans);
font-size: var(--t-00);
font-weight: var(--fw-strong);
text-transform: uppercase;
letter-spacing: .12em;
line-height: 1.3;
color: var(--steel);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
#hud-streak .ic .ic-flame { transform-origin: 12px 9.5px; }
body:not(.motion-low) #hud-streak .ic .ic-flame {
animation: hud-flame 4.6s var(--breath-in, ease-in-out) infinite;
}
@keyframes hud-flame {
0%, 100% { transform: rotate(0deg) scale(1); }
30%      { transform: rotate(-2.6deg) scale(1.04, .97); }
58%      { transform: rotate(1.9deg) scale(.985, 1.045); }
78%      { transform: rotate(-.8deg) scale(1); }
}
.friend-strip {
display: flex;
align-items: center;
gap: 14px;
max-width: var(--desk-w, min(94%, 1040px));
margin: 0 auto 16px;
}
#v-home > .friend-strip { max-width: var(--desk-w, min(94%, 1040px)); }
.friend-strip[style*="display: none"],
.friend-strip[style*="display:none"] {
display: none !important;
}
.friend-strip .fr-who {
width: 48px; height: 48px;
flex: 0 0 48px;
display: grid; place-items: center;
}
.friend-strip .fr-who svg {
width: 44px; height: 44px;
}
.friend-strip .fr-bubble {
flex: 1;
background: var(--sheet);
border: 2.5px solid var(--carbon);
box-shadow: none;
padding: 12px 18px;
border-radius: 2px;
font-family: var(--serif);
font-size: var(--t-1);
color: var(--carbon);
position: relative;
}
.friend-strip .fr-bubble::before {
content: '';
position: absolute;
left: -8px; top: calc(50% - 6px);
width: 12px; height: 12px;
background: var(--sheet);
border-left: 2.5px solid var(--carbon);
border-bottom: 2.5px solid var(--carbon);
transform: rotate(45deg);
}
.greeting {
text-align: center;
font-family: var(--serif);
font-style: italic;
font-size: var(--t-2);
color: var(--carbon);
margin: 12px auto 20px;
letter-spacing: .02em;
}
.greeting em, .greeting b {
font-style: normal;
font-weight: 700;
color: var(--play);
}
#standing-line {
max-width: var(--desk-w, min(94%, 1040px));
margin: 0 auto 24px;
}
#standing-line[style*="display: none"],
#standing-line[style*="display:none"] {
display: none !important;
}
.stl {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 18px;
background: var(--sheet);
border: 2.5px solid var(--carbon);
box-shadow: none;
border-radius: 2px;
}
.stl-cls {
flex: 0 0 auto;
width: 44px; height: 44px;
display: grid; place-items: center;
font-family: var(--bill);
font-weight: 900;
font-size: var(--t-4);
background: var(--reward);
color: var(--on-signal);
border: 2px solid var(--carbon);
box-shadow: 0 2px 0 var(--press);
border-radius: 2px;
}
body[data-standing="3"] .stl-cls, body[data-standing="4"] .stl-cls {
color: var(--on-signal);
border-color: var(--carbon);
}
.stl-mid {
flex: 1;
min-width: 0;
display: grid;
gap: 5px;
}
.stl-rank {
font-family: var(--sans);
font-size: var(--t-00);
font-weight: 600;
letter-spacing: .02em;
color: var(--carbon);
}
.stl-rank b {
font-family: var(--bill);
font-size: var(--t-2);
font-weight: 800;
}
.stl-bar {
display: block;
height: 8px;
border: 1.5px solid var(--carbon);
background: var(--sheet);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.stl-bar i {
position: absolute;
inset: 0 auto 0 0;
width: calc(var(--p, 0) * 1%);
background: var(--carbon);
transition: width 900ms var(--e-std, ease);
}
.stl-next {
font-family: var(--serif);
font-size: .75rem;
font-style: italic;
color: var(--steel);
}
.stl-run {
flex: 0 0 auto;
text-align: right;
display: grid;
gap: 3px;
justify-items: end;
font-family: var(--sans);
font-size: var(--t-00);
color: var(--steel);
}
.stl-run-top {
white-space: nowrap;
font-family: var(--bill);
font-size: var(--t-2);
font-weight: 800;
color: var(--carbon);
}
.stl-run b {
font-family: var(--bill);
font-size: var(--t-3);
font-weight: 900;
color: var(--carbon);
}
.stl-flame {
font-style: normal;
color: var(--signal-ink);
margin-right: 4px;
}
.stl-bridge { font-style: italic; opacity: .72; font-size: var(--t-00); }
.stl-note { font-style: italic; opacity: .85; }
.stl-bar i.stl-hot { background: var(--signal-ink, #a5342a); }
.stl-inch { color: var(--signal-ink, #a5342a); }
.stl-key { font-size: var(--t-00); opacity: .8; font-style: italic; }
@media (max-width: 620px) {
.stl { flex-wrap: wrap; }
.stl-mid { min-width: 100%; order: 3; }
}
.desk-spread { gap: 22px; }
.spread-hero {
background: var(--sheet);
border: 3px solid var(--carbon);
box-shadow: none;
}
.tonight-card {
background: var(--sheet);
border: 3px solid var(--carbon);
box-shadow: none;
}
.vol-cover { background: var(--reward-tint); border-width: 2px; }
.vol-spine, :is(#shelf, #locked-panel) .b-spine {
background: var(--play);
color: var(--on-play);
}
.vol-back, :is(#shelf, #locked-panel) .b-back { background: var(--play-deep); }
.vol-mark { background: var(--reward); border-inline: 1px solid var(--carbon); }
#bench-sect .shelf { border-bottom: 1px solid var(--rule); }
.road-milestone-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 12px;
margin: 16px 0 6px;
}
.rm-node {
background: var(--sheet);
border: 2px solid var(--carbon);
box-shadow: none;
padding: 12px 14px;
display: grid;
grid-template-columns: 34px 1fr auto;
gap: 10px;
align-items: center;
border-radius: 2px;
transition: transform .12s ease;
}
.rm-node:hover {
transform: translateY(-2px);
}
.rm-node.active {
border-left: 6px solid var(--play);
box-shadow: none;
}
.rm-node.locked {
opacity: .68;
background: var(--galley);
}
.rm-node.done {
background: var(--galley);
}
.rm-node.done .rm-badge {
background: var(--galley);
color: color-mix(in srgb, var(--ink, var(--carbon)) 80%, var(--carbon));
}
.rm-node.done .rm-info strong { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.road-plate .rp-act {
margin-top: 14px;
display: flex; justify-content: space-between; align-items: baseline;
gap: 12px; flex-wrap: wrap;
}
.road-plate .rp-act .faint { font-size: var(--t-0); }
.rm-badge {
width: 32px; height: 32px;
background: var(--reward);
color: var(--on-reward, var(--on-signal));
border: 2px solid var(--carbon);
display: grid; place-items: center;
font-size: var(--t-1); font-weight: 800;
border-radius: 2px;
}
.rm-info { display: flex; flex-direction: column; line-height: 1.15; }
.rm-info strong {
font-family: var(--bill);
font-size: var(--t-1);
font-weight: 800;
color: var(--carbon);
}
.rm-info span {
font-family: var(--sans);
font-size: .7rem;
color: var(--steel);
}
.rm-tag {
font-family: var(--sans);
font-size: var(--t-00);
font-weight: var(--fw-strong);
text-transform: uppercase;
letter-spacing: .08em;
padding: 3px 6px;
border: 1.5px solid var(--carbon);
background: var(--play-tint);
color: var(--steel);
border-radius: 2px;
}
.rd { gap: 16px; }
.rd::before { left: 31px; width: 6px; background: var(--reward); border-inline: 1px solid var(--carbon); }
.rd-book, .rd-alpha, .rd-cy {
background: var(--galley);
border: 2px solid var(--carbon);
border-left: 10px solid var(--ink, var(--play));
box-shadow: none;
}
.rd-book:hover, .rd-alpha:hover, .rd-cy:hover {
transform: translate(-2px, -2px);
box-shadow: none;
}
.rd-vol {
width: 60px; height: 76px;
background: var(--play-tint);
border: 3px solid var(--carbon);
box-shadow: inset 8px 0 0 var(--ink, var(--play)), 0 2px 0 var(--press);
}
.rd-here .rd-vol {
background: var(--reward);
box-shadow: inset 8px 0 0 var(--play), 0 2px 0 var(--press);
}
.rd-done .rd-vol { background: var(--right); }
.rd-ch-head {
background: var(--play-deep);
color: var(--on-play-deep);
border: 2px solid var(--carbon);
box-shadow: 0 2px 0 var(--play-deep);
}
.rd-ch-head:hover, .rd-ch.rd-open .rd-ch-head { background: var(--play); }
.rd-ch-head :is(.rd-ch-ti, .rd-ch-ru, .rd-ch-state, .rd-orn) {
color: var(--on-play-deep);
opacity: 1;
}
.rd-m-dot {
background: var(--reward);
color: var(--on-reward);
border: 3px solid var(--carbon);
box-shadow: 0 2px 0 var(--press);
text-shadow: none;
}
.gx-stage {
background-color: #f4f7fb !important;
background-image:
linear-gradient(90deg, rgba(36, 65, 119, .08) 1px, transparent 1px),
linear-gradient(rgba(36, 65, 119, .08) 1px, transparent 1px) !important;
background-size: 24px 24px !important;
box-shadow: none !important;
}
.gx-stage::before, .gx-stage::after, .gx-bloom {
display: none !important;
}
.gx-stage .gx {
background: var(--galley);
border: 1px solid var(--rule);
box-shadow: none;
border-radius: var(--r-dialog);
overflow-x: clip;
overflow-y: visible;
padding: 0 0 24px 0;
gap: 16px;
}
.gx-stage .gx.gx-done {
--gxp: clamp(20px, 4vw, 40px);
padding: 0 var(--gxp) 28px;
}
.gx-stage:has(> .gx.gx-done) { padding-top: 0; padding-bottom: 0; }
.gx-stage > .gx.gx-done { margin-top: clamp(24px, 9vh, 88px); margin-bottom: 28px; }
.gx-stage .gx.gx-done > :is(.gx-top, .gx-print, .gx-facts, .gx-night) {
margin-inline: calc(var(--gxp) * -1);
}
.gx-stage .gx.gx-done > :is(.gx-facts, .gx-night) { padding-inline: var(--gxp); }
.gx-stage .gx-done .gx-top .gx-quit { margin-left: auto; }
.gx-stage .gx-top {
background: none;
color: var(--carbon);
padding: 12px 20px;
border-bottom: 1px solid var(--rule);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: nowrap;
}
.gx-stage .gx-top :is(.gx-topic, .gx-topic *, .gx-count, .gx-quit) {
color: var(--carbon);
opacity: 1;
}
.gx-stage .gx-top .gx-topic {
font: var(--fw-strong) var(--type-body)/1.3 var(--sans);
letter-spacing: 0;
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.gx-stage .gx-top .gx-topic i {
color: var(--signal-ink);
font-size: 1.1em;
font-style: normal;
}
.gx-stage .gx-top .gx-topic em {
font-family: var(--sans);
font-size: var(--t-00);
font-weight: var(--fw-strong);
font-style: normal;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--steel);
margin-left: 6px;
}
@media (max-width: 620px) {
.gx-stage .gx-top .gx-topic { flex-wrap: wrap; row-gap: 2px; }
.gx-stage .gx-top .gx-topic em { flex-basis: 100%; margin-left: 0; white-space: normal; }
}
.gx-stage .gx-top .gx-runn {
font-family: var(--sans);
font-size: .75rem;
font-weight: var(--fw-strong);
background: var(--reward);
color: var(--on-reward, var(--on-signal));
border: 1.5px solid var(--carbon);
box-shadow: 0 2px 0 var(--press);
padding: 2px 8px;
border-radius: 2px;
}
.gx-stage .gx-top .gx-count {
font-family: var(--mono);
font-size: var(--type-meta);
font-weight: var(--fw-strong);
letter-spacing: 0;
color: var(--steel);
white-space: nowrap;
}
.gx-stage .gx-top .gx-quit {
min-height: var(--control-h-tool);
font: var(--fw-strong) var(--type-meta)/1.25 var(--sans);
background: var(--galley);
border: 1px solid color-mix(in srgb, var(--carbon) 55%, var(--rule));
box-shadow: var(--sh-press-quiet);
color: var(--carbon);
padding: 0 var(--s3);
border-radius: var(--r-control);
cursor: pointer;
}
.gx-stage .gx-top .gx-quit:hover {
background: var(--galley);
border-color: var(--carbon);
color: var(--carbon);
}
.gx-mint-tip {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 30;
max-width: 240px;
white-space: normal;
text-align: left;
font-family: var(--sans);
font-size: var(--t-00);
font-weight: 600;
color: var(--carbon) !important;
background: var(--sheet) !important;
border: 2px solid var(--carbon) !important;
box-shadow: 0 2px 0 var(--play-deep) !important;
padding: 8px 12px !important;
border-radius: 2px;
}
.gx-stage .gx-rail {
display: flex;
gap: 4px;
margin: 16px 22px 6px;
}
.gx-stage .gx-rail i { height: 5px; border-radius: 3px; }
.gx-stage .gx-chbar {
margin: 0 22px;
height: 4px;
background: var(--rule);
}
.gx-stage .gx-chbar i {
background: var(--play);
}
.gx-stage .gx-mid {
padding: 0 22px;
display: grid;
gap: 14px;
}
.gx-stage .gx-ask {
display: flex;
align-items: center;
gap: 10px;
font: var(--fw-strong) var(--type-body)/1.4 var(--sans);
letter-spacing: 0;
text-transform: none;
color: var(--carbon);
margin: 6px 0 12px;
}
.gx-stage .gx-kind {
display: inline-grid;
place-items: center;
width: 30px; height: 30px;
background: var(--reward);
color: var(--on-reward, var(--on-signal));
border: 2px solid var(--carbon);
box-shadow: 0 2px 0 var(--press);
border-radius: 2px;
font-style: normal;
font-size: var(--t-1);
flex: 0 0 30px;
}
.gx-stage .gx-again {
font-family: var(--sans);
font-size: .76rem;
font-weight: var(--fw-strong);
color: #8a5a00;
background: var(--reward-tint);
border: 1.5px solid var(--carbon);
padding: 3px 10px;
border-radius: 2px;
margin-left: 8px;
}
.gx-stage .gx-last-mark {
color: var(--play-deep);
font-weight: 800;
}
.gx-stage .gx-line.gx-study {
font-family: var(--serif);
font-size: clamp(24px, 3.2vw, 32px);
font-weight: 500;
line-height: 1.45;
color: var(--carbon);
padding: 18px 24px;
background: var(--galley);
border: 2.5px solid var(--carbon);
border-left: 6px solid var(--play);
box-shadow: none;
margin: 10px 0 16px;
border-radius: 2px;
}
.gx-stage .gx-en {
font-family: var(--serif);
font-style: italic;
font-size: clamp(18px, 2.4vw, 24px);
color: var(--steel);
margin-bottom: 8px;
}
.gx-stage .gx-word {
font-family: var(--serif);
font-size: clamp(34px, 5vw, 48px);
font-weight: 600;
color: var(--carbon);
text-align: center;
margin: 14px 0 8px;
}
.gx-stage .gx-gloss {
font-family: var(--serif);
font-size: clamp(22px, 3vw, 28px);
font-style: italic;
color: var(--carbon);
text-align: center;
margin: 8px 0 16px;
}
.gx-stage .gx-mid[data-kind="word"] .gx-opts,
.gx-stage .gx-mid[data-kind="meaning"] .gx-opts,
.gx-stage .gx-mid[data-kind="listen"] .gx-opts,
.gx-stage .gx-mid[data-kind="stress"] .gx-opts,
.gx-stage .gx-mid[data-kind="form"] .gx-opts,
.gx-stage .gx-mid[data-kind="gap"] .gx-opts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin: 12px 0;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
@media (max-width: 620px) {
.gx-stage .gx-mid[data-kind="word"] .gx-opts,
.gx-stage .gx-mid[data-kind="meaning"] .gx-opts,
.gx-stage .gx-mid[data-kind="listen"] .gx-opts,
.gx-stage .gx-mid[data-kind="stress"] .gx-opts,
.gx-stage .gx-mid[data-kind="form"] .gx-opts,
.gx-stage .gx-mid[data-kind="gap"] .gx-opts {
grid-template-columns: 1fr;
}
}
.gx-stage .gx-opt {
min-height: 58px;
background: var(--galley);
border: 1px solid color-mix(in srgb, var(--carbon) 55%, var(--rule));
box-shadow: var(--sh-press-quiet);
padding: 14px 20px;
font-family: var(--serif);
font-size: clamp(20px, 2.5vw, 26px);
color: var(--carbon);
border-radius: var(--r-surface);
cursor: pointer;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.gx-stage .gx-opt:hover:not(:disabled) {
transform: none;
border-color: var(--carbon);
background: var(--galley);
}
.gx-stage .gx-opt:active:not(:disabled) {
transform: translateY(1px);
box-shadow: none;
}
.gx-stage .gx-opt:disabled {
opacity: .5;
cursor: default;
}
.gx-stage .gx-right {
background: var(--right) !important;
color: #fffdf5 !important;
border-color: var(--carbon) !important;
box-shadow: 0 2px 0 var(--right-deep) !important;
}
.gx-stage .gx-right::after {
content: '  ✓';
font-family: var(--sans);
font-weight: var(--fw-strong);
}
.gx-stage .gx-wrong {
background: var(--wrong-tint) !important;
color: var(--carbon) !important;
border-color: var(--wrong-deep) !important;
box-shadow: 0 2px 0 var(--wrong-deep) !important;
}
.gx-stage .gx-wrong::after {
content: '  ×';
font-family: var(--sans);
font-weight: var(--fw-strong);
}
.gx-stage .gx-pairs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin: 10px 0;
}
.gx-stage .gx-pairs::before {
display: none;
}
.gx-stage .gx-pw, .gx-stage .gx-pg {
width: 100%;
min-height: 56px;
padding: 12px 16px;
font-family: var(--serif);
font-size: clamp(16px, 2.1vw, 19px);
background: var(--galley);
border: 1px solid color-mix(in srgb, var(--carbon) 55%, var(--rule));
box-shadow: var(--sh-press-quiet);
border-radius: var(--r-surface);
cursor: pointer;
text-align: left;
overflow-wrap: normal; word-break: keep-all; hyphens: none;
}
.gx-stage .gx-pw { font-size: clamp(19px, 2.5vw, 24px); }
@media (max-width: 620px) {
.gx-stage .gx-pairs { gap: 8px; }
.gx-stage .gx-pw, .gx-stage .gx-pg {
min-height: 46px; padding: 10px 10px;
}
}
.gx-stage .gx-pw:hover, .gx-stage .gx-pg:hover {
border-color: var(--carbon);
}
.gx-stage .gx-p-sel {
background: var(--play-tint) !important;
border-color: var(--play) !important;
box-shadow: inset 0 0 0 1px var(--play) !important;
color: var(--play-deep) !important;
}
.gx-stage .gx-p-done {
background: var(--right-tint) !important;
border-color: var(--right) !important;
color: var(--carbon) !important;
font-weight: 600;
box-shadow: 0 2px 0 var(--right-deep) !important;
opacity: .95;
cursor: default;
}
.gx-stage .gx-stick {
min-height: 64px;
background: var(--galley);
border: 2.5px solid var(--carbon);
box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
padding: 12px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
border-radius: 2px;
margin-bottom: 14px;
}
.gx-stage .gx-set {
font-family: var(--serif);
font-size: var(--t-2);
padding: 8px 18px;
background: var(--play);
color: #fffdf5;
border: 1px solid var(--play-deep);
box-shadow: none;
border-radius: var(--r-control);
cursor: pointer;
}
.gx-stage .gx-set:hover {
background: var(--play-deep);
}
.gx-stage .gx-tile {
font-family: var(--serif);
font-size: var(--t-2);
padding: 10px 18px;
background: var(--galley);
border: 1px solid color-mix(in srgb, var(--carbon) 55%, var(--rule));
box-shadow: var(--sh-press-quiet);
border-radius: var(--r-control);
cursor: pointer;
color: var(--carbon);
}
.gx-stage .gx-tile:hover:not(:disabled) {
transform: none;
border-color: var(--carbon);
}
.gx-stage .gx-tile:active:not(:disabled) {
transform: translateY(1px);
box-shadow: none;
}
.gx-stage .gx-tile:disabled {
opacity: .3;
box-shadow: none;
cursor: default;
transform: none;
background: var(--rule);
}
.gx-stage .gx-verdict.gx-ok {
background: var(--right-tint);
border: 2.5px solid var(--right);
color: var(--right-deep);
padding: 14px 18px;
border-radius: 2px;
font-family: var(--bill);
font-size: 1.4rem;
font-weight: 900;
letter-spacing: .04em;
}
.gx-stage .gx-verdict.gx-no {
background: var(--wrong-tint);
border: 2.5px solid var(--wrong);
color: var(--wrong-deep);
padding: 14px 18px;
border-radius: 2px;
font-family: var(--bill);
font-size: 1.4rem;
font-weight: 900;
letter-spacing: .04em;
}
.gx-stage .gx-src {
background: var(--galley);
border: 2px solid var(--carbon);
border-left: 6px solid var(--play);
padding: 12px 16px;
margin: 10px 0;
font-family: var(--serif);
font-size: var(--t-2);
color: var(--carbon);
border-radius: 2px;
}
.gx-stage .gx-src > .gx-src-en {
font-size: .88em;
color: var(--steel);
}
.gx-stage .gx-mintline {
font-family: var(--sans);
font-size: var(--t-00);
font-weight: var(--fw-strong);
color: var(--play-deep);
background: var(--play-tint);
border: 1.5px solid var(--carbon);
padding: 3px 10px;
border-radius: 2px;
width: fit-content;
margin: 6px 0;
}
.gx-stage .gx-mate {
position: fixed;
right: clamp(24px, 4.5vw, 64px);
bottom: clamp(20px, 3.5vh, 48px);
width: 112px; height: 112px;
pointer-events: auto;
cursor: pointer;
z-index: 10;
display: grid;
place-items: center;
transition: transform .15s ease;
}
.gx-stage .gx-mate:hover {
transform: translateY(-3px) scale(1.05);
}
.gx-stage .gx-done .gx-mate,
.gx-stage .gx-sealed .gx-mate {
position: relative;
right: auto; bottom: auto;
margin: 8px auto 0;
}
.gx-stage .gx-mate::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--reward);
border: 3px solid var(--carbon);
box-shadow: 0 2px 0 var(--press);
}
.gx-stage .gx-mate svg {
width: 84px; height: 84px;
position: relative;
z-index: 2;
filter: none;
}
.gx-stage .gx-mate-line {
position: absolute;
bottom: calc(100% + 12px);
right: 0;
max-width: 240px;
font-family: var(--serif);
font-size: var(--t-0);
color: var(--carbon);
background: var(--sheet);
border: 2px solid var(--carbon);
box-shadow: none;
padding: 8px 14px;
border-radius: 2px;
text-align: left;
}
.gx-stage .gx-mate-line::after {
content: '';
position: absolute;
bottom: -6px;
right: 28px;
width: 10px; height: 10px;
background: var(--sheet);
border-right: 2px solid var(--carbon);
border-bottom: 2px solid var(--carbon);
transform: rotate(45deg);
}
.gx-stage[data-move="door"] .gx-mate-line {
bottom: auto; top: calc(100% + 12px);
}
.gx-stage[data-move="door"] .gx-mate-line::after {
bottom: auto; top: -6px;
transform: rotate(225deg);
}
.gx-print { box-shadow: none; border-width: 3px; }
#v-review #rev-card {
--rev-depth: 5px;
--rev-glow: 0 0 0 0 transparent;
background: var(--sheet);
border: 3px solid var(--carbon);
box-shadow: 0 var(--rev-depth) 0 var(--play-deep), var(--rev-glow), var(--rev-lamp, 0 0 0 0 transparent);
transition: box-shadow 420ms var(--e-std), border-color 420ms var(--e-std);
border-radius: 2px;
padding: 26px 24px;
}
#v-review #rev-card .smallcaps { margin-bottom: 12px; }
#v-review #rev-card .produce-gloss {
font-family: var(--serif);
font-size: clamp(22px, 3.2vw, 30px);
font-style: italic;
color: var(--carbon);
margin: 12px 0 16px;
text-align: center;
}
#v-review #rev-card .reveal-word {
font-family: var(--serif);
font-size: clamp(28px, 4.5vw, 40px);
font-weight: 600;
color: var(--carbon);
margin: 10px 0 16px;
text-align: center;
}
#v-review #rev-card .cloze {
font-family: var(--serif);
font-size: clamp(20px, 2.6vw, 26px);
line-height: 1.45;
color: var(--carbon);
padding: 16px 20px;
background: var(--galley);
border: 2px solid var(--carbon);
border-left: 6px solid var(--play);
box-shadow: none;
border-radius: 2px;
margin: 12px 0 20px;
}
#v-review #rev-card .conf-row {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 14px;
}
#v-review #rev-card .conf-row button {
flex: 1;
min-height: 52px;
cursor: pointer;
}
#v-review #rev-card .conf-row button:hover { transform: none; border-color: var(--carbon); }
#v-review #rev-card .conf-row button[data-c="2"] {
border-color: var(--carbon);
color: var(--carbon);
}
#v-review #rev-card .conf-row button[data-c="0"] {
border-color: var(--signal-ink, #a5342a);
color: var(--signal-ink, #a5342a);
}
#v-review #rev-card .pat-opts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 16px;
}
@media (max-width: 600px) {
#v-review #rev-card .pat-opts { grid-template-columns: 1fr; }
}
#v-review #rev-card .quiz-opt {
min-height: 52px;
background: var(--galley);
border: 1px solid color-mix(in srgb, var(--carbon) 55%, var(--rule));
box-shadow: var(--sh-press-quiet);
padding: 12px 18px;
font-family: var(--serif);
font-size: var(--t-2);
color: var(--carbon);
border-radius: var(--r-surface);
cursor: pointer;
}
#v-review #rev-card .quiz-opt:hover:not(:disabled) {
border-color: var(--carbon);
}
#v-review #rev-card .quiz-opt.right {
background: var(--right) !important;
color: #fffdf5 !important;
border-color: var(--right-deep) !important;
box-shadow: none !important;
}
#v-review #rev-card .quiz-opt.wrong {
background: var(--wrong-tint) !important;
color: var(--carbon) !important;
border-color: var(--wrong-deep) !important;
box-shadow: none !important;
}
@media (max-width: 600px) {
#v-review #rev-card { padding: 16px 14px; }
#v-review #rev-card .smallcaps { margin-bottom: 8px; }
#v-review #rev-card .produce-gloss { font-size: clamp(19px, 5.4vw, 24px); margin: 8px 0 10px; }
#v-review #rev-card .reveal-word { font-size: clamp(24px, 7vw, 32px); margin: 6px 0 12px; }
#v-review #rev-card .cloze {
font-size: clamp(17px, 4.6vw, 21px); line-height: 1.38;
padding: 12px 14px; margin: 10px 0 14px;
}
#v-review #rev-card .conf-row { gap: 8px; }
#v-review #rev-card .conf-row button {
min-height: 46px; font-size: var(--t-1); letter-spacing: .02em;
padding: 6px 4px; white-space: nowrap;
}
#v-review #rev-card .quiz-opt { min-height: 46px; padding: 10px 12px; font-size: var(--t-1); }
}
#v-review #rev-btns button {
min-height: 48px;
cursor: pointer;
padding: 8px 18px;
}
#v-read { background: var(--sheet); }
#v-read .sent, #v-read .read-text, #v-read .scene-body { font-family: var(--serif); }
#readbar {
background: var(--play);
color: var(--on-play);
border-bottom: 3px solid var(--press);
box-shadow: 0 2px 0 var(--play-deep);
}
#readbar .icon-btn { background: var(--paper); color: var(--carbon); }
[data-theme="dark"] #readbar { background: var(--play-deep); }
#readbar #btn-listen { min-width: 7.25em; }
#pop { border: 1px solid var(--rule); border-radius: var(--r-surface); box-shadow: var(--sh-float); }
@media (max-width: 860px) {
.desk-intro { grid-template-columns: 1fr; gap: 20px; min-height: 0; }
.desk-hud { grid-template-columns: repeat(2, 1fr); }
.desk-hud .hud-pill:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--rule-room) 62%, transparent); }
.desk-hud .hud-pill:nth-child(3) { border-left: none; }
.desk-host { min-height: 238px; grid-template-columns: minmax(170px, 1fr) 140px; }
.desk-cast { width: 136px; height: 170px; }
.desk-cast-pedestal { width: 130px; }
.desk-host-bubble { padding: 14px 16px; }
.desk-host-bubble::after { right: -11px; top: 60px; }
}
@media (max-width: 580px) {
.bar { min-height: 56px; padding-inline: 10px; }
.bar .nav-tabs button { padding-inline: 6px; }
.gx-stage .gx-top { padding: 10px 12px !important; }
.gx-stage .gx-top .gx-count { display: none; }
#v-home > .masthead { padding: 16px 14px 18px; margin-block: 14px 12px; box-shadow: none; }
#v-home > .masthead::after { right: 8px; bottom: 7px; }
#v-home .masthead .wordmark { flex-wrap: wrap; }
#v-home .masthead h1, #v-home #room-name { font-size: clamp(34px, 11vw, 52px); margin-top: 10px; margin-bottom: 8px; }
#v-home .masthead .room-line { font-size: var(--t-00); }
#v-home .masthead .almanac { margin-top: 8px; font-size: var(--t-0); }
.desk-intro { gap: 12px; }
.desk-host { grid-template-columns: 1fr; min-height: 0; }
.desk-cast-wrap { display: none; }
.desk-host-bubble { padding: 12px 14px; }
.desk-host-bubble::after { display: none; }
.desk-hud { grid-template-columns: 1fr 1fr; margin-block: 14px 20px; }
.hud-pill { padding: 10px 12px; gap: 9px; }
.hud-pill:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--rule-room) 62%, transparent); }
.hud-pill:nth-child(3) { border-left: none; }
.hud-icon { width: 32px; height: 32px; }
.hud-icon .ic { width: 19px; height: 19px; }
.hud-body strong { font-size: var(--t-1); }
#desk-host-line { font-size: clamp(22px, 6.5vw, 28px); }
.spread-hero, .tonight-card, .gx-stage .gx { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; }
}
.gx-stage .gx.gx-sealed { padding: 24px clamp(18px, 4vw, 40px) 28px; }
@media (max-width: 700px) {
.gx-stage .gx-mate { width: 72px; height: 72px; right: 10px; bottom: 10px; pointer-events: none; }
.gx-stage .gx-mate svg { width: 54px; height: 54px; }
}
.gx-stage[data-move="forge"] .gx-mate { width: 112px; height: 112px; }
.gx-stage .gx-gather-stick { display: grid; gap: 0; padding: 0 12px; min-height: 80px; }
.gx-stage .gx-vowel.gx-right, .gx-stage .gx-find-w.gx-right {
background: transparent !important;
color: inherit !important;
box-shadow: inset 0 -3px 0 var(--right) !important;
}
.gx-stage .gx-vowel.gx-right::after, .gx-stage .gx-find-w.gx-right::after { content: none; }
.friend-strip .fr-bubble::before { border-top: 0; border-right: 0; }
.friend-strip .fr-bubble::after { display: none; }
.gx-stage .gx-verdict.gx-ok.gx-v-first { color: var(--play-deep); }
.gx-stage .gx-verdict.gx-ok.gx-v-won   { color: var(--right-deep); }
.gx-stage .gx-verdict.gx-ok.gx-v-run   { color: var(--play); font-size: var(--t-4); }
.gx-stage .gx-verdict.gx-ok.gx-v-half  { font-size: var(--t-4); }
.gx-stage .gx-verdict.gx-ok.gx-v-last  { font-size: 1.6rem; }
.gx-stage .gx-verdict.gx-ok.gx-v-coup  { color: var(--reward-deep); font-size: 1.7rem; }
.gx-stage .gx {
box-shadow: none;
transition: box-shadow 700ms ease;
}
.gx-stage.gx-heat-cut .gx { transition: none; }
.gx-stage.gx-run-blaze .gx {
box-shadow: 0 0 0 3px var(--reward-tint);
}
.gx-stage .gx-opt.gx-gilded, .gx-stage .gx-pw.gx-gilded {
background: var(--reward-tint) !important;
border-color: var(--reward-deep) !important;
box-shadow: 0 2px 0 var(--reward-deep) !important;
}
.gx-stage .gx-chbar.gx-chbar-near i { background: var(--reward); }
.gx-stage .gx-chbar-say {
margin: 4px 22px 0; text-align: right;
font-family: var(--bill); font-weight: 700; font-size: .72rem;
letter-spacing: .1em; text-transform: uppercase; color: var(--steel);
}
.gx-stage .gx-chbar.gx-chbar-near + .gx-chbar-say { color: var(--reward-deep); }
@media (max-width: 620px) {
.gx-stage .gx-top { flex-wrap: wrap !important; row-gap: 4px; }
}
.gx-stage .gx-src.gx-src-fine { font-size: clamp(21px, 2.9vw, 28px); }
.gx-stage .gx { width: min(880px, 96vw); }
@media (max-width: 620px) {
.gx-stage .gx { width: 100%; min-width: 0; }
.gx-stage .gx > .gx-top { min-width: 0; }
}
.gx-stage .gx-done .gx-print-ru { font-size: clamp(22px, 3vw, 34px); }
.gx-done .gx-cols {
display: grid; grid-template-columns: minmax(0, 1fr);
gap: 8px;
align-items: start;
margin-top: 10px;
}
.gx-done .gx-side .gx-night { margin-inline: 0 !important; padding-inline: 0 !important; }
.gx-stage .gx-done > .btnrow {
position: sticky; bottom: 0; z-index: 6;
margin: 20px calc(var(--gxp, 24px) * -1) -28px;
padding: 12px var(--gxp, 24px) 16px;
background: var(--sheet);
border-top: 2.5px solid var(--carbon);
}
@media (min-width: 1240px) {
.gx-stage.gx-marked::after {
content: '' !important; display: block !important;
position: fixed; left: clamp(10px, 2.5vw, 70px); bottom: 7vh;
width: 32vh; height: 32vh;
background: var(--ghost-img) center / contain no-repeat;
opacity: .06; pointer-events: none;
}
}
body.read-lamp:has(#v-read.show) { background: #6d5f47; }
body.read-lamp #v-read {
background: transparent;
}
body.read-lamp #read-wrap {
background: #f9efd9;
color: #43331f;
box-shadow: 0 0 0 1px #d9c9a8,
0 0 110px 34px rgba(255, 209, 140, .22),
0 18px 60px -22px rgba(46, 35, 18, .6);
padding: clamp(20px, 4vw, 52px) clamp(16px, 3vw, 44px);
font-size: 1.05em;
}
body[data-daypart="evening"].read-lamp #read-wrap { background: #f2e3c4; }
body[data-daypart="evening"].read-lamp:has(#v-read.show) { background: #61533c; }
body[data-daypart="night"].read-lamp #read-wrap { background: #e9d7b2; }
body[data-daypart="night"].read-lamp:has(#v-read.show) { background: #554834; }
body.read-lamp:has(#v-read.show)::after {
content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 2;
background: radial-gradient(ellipse 62% 78% at 50% 38%,
transparent 54%, rgba(46, 36, 20, .30));
}
body.read-lamp:has(#v-read.show) > header { filter: brightness(.62) saturate(.7); }
body.read-lamp #readbar { opacity: .5; transition: opacity 300ms linear; }
body.read-lamp #readbar:hover, body.read-lamp #readbar:focus-within { opacity: 1; }
body.read-lamp #btn-lamp, #btn-lamp.on {
background: var(--reward-tint); border-color: var(--reward-deep);
}
@keyframes ribbon-dry {
0%, 55% { box-shadow: inset 4px 0 0 var(--verm, #a5342a);
background: color-mix(in srgb, var(--reward, #f6c445) 16%, transparent); }
100%    { box-shadow: inset 4px 0 0 transparent; background: transparent; }
}
#text .sent.ribbon-here {
box-shadow: inset 4px 0 0 var(--verm, #a5342a);
background: color-mix(in srgb, var(--reward, #f6c445) 16%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) #text .sent.ribbon-here {
animation: ribbon-dry calc(5.6s * var(--motion, 1)) var(--settle) both;
}
}
@media (max-width: 700px) {
.gx-stage .gx {
box-shadow: none;
}
.gx-stage.gx-run-blaze .gx {
box-shadow: 0 0 0 3px var(--reward-tint);
}
}
.gx-stage {
--atm-ink: var(--play);
--atm-w: 5%;
--atm-mood-ink: var(--paper);
--atm-mood-w: 0%;
}
.gx-stage[data-move="door"]   { --atm-ink: var(--ink, var(--play)); --atm-w: 11%; }
.gx-stage[data-move="forge"]  { --atm-ink: var(--wrong-tint); --atm-w: 24%; }
.gx-stage[data-move="gather"] { --atm-ink: var(--right-tint); --atm-w: 22%; }
.gx-stage[data-move="set"]    { --atm-ink: var(--reward-tint); --atm-w: 26%; }
.gx-stage[data-mood="focus"]  { --atm-mood-ink: var(--play-tint); --atm-mood-w: 30%; }
.gx-stage[data-mood="steady"] { --atm-mood-ink: var(--paper); --atm-mood-w: 42%; }
.gx-stage {
background-color: color-mix(in srgb,
color-mix(in srgb, var(--atm-ink) calc(var(--atm-w) + var(--tint, 0) * 1.5%), var(--paper))
calc(100% - var(--atm-mood-w)), var(--atm-mood-ink)) !important;
}
.gx-stage { box-shadow: inset 0 0 11vmax rgba(24, 19, 9, .07) !important; }
.gx-stage[data-move="door"] {
box-shadow: inset 0 45vh 35vh -35vh
color-mix(in srgb, var(--ink, var(--carbon)) 20%, transparent) !important;
}
.gx-stage[data-mood="focus"]  { box-shadow: inset 0 0 14vmax rgba(22, 18, 8, .15) !important; }
.gx-stage[data-mood="steady"] { box-shadow: inset 0 0 18vmax rgba(30, 22, 8, .12) !important; }
[data-theme="dark"] .gx-stage { box-shadow: inset 0 0 11vmax rgba(0, 0, 0, .30) !important; }
[data-theme="dark"] .gx-stage[data-move="door"] {
box-shadow: inset 0 45vh 35vh -35vh
color-mix(in srgb, var(--ink, var(--carbon)) 32%, transparent) !important;
}
[data-theme="dark"] .gx-stage[data-mood="focus"]  { box-shadow: inset 0 0 14vmax rgba(0, 0, 0, .48) !important; }
[data-theme="dark"] .gx-stage[data-mood="steady"] { box-shadow: inset 0 0 18vmax rgba(0, 0, 0, .38) !important; }
@media (min-width: 701px) and (max-width: 1100px) {
.gx-stage .gx-mate { width: 84px; height: 84px; right: 10px; bottom: 12px;
pointer-events: none; cursor: default; }
.gx-stage .gx-mate svg { width: 64px; height: 64px; }
.gx-stage[data-move="forge"] .gx-mate { width: 96px; height: 96px; }
}
@media (min-width: 701px) and (max-width: 1300px) {
.gx-stage[data-move="door"] .gx-mate { top: clamp(120px, 20vh, 180px); }
}
@media (max-width: 700px) {
.gx-stage .gx-mate-line { max-width: 170px; font-size: .74rem; }
}
.rd .rd-vol-a { height: 60px; }
@media (max-width: 620px) {
.rd .rd-hit { grid-template-columns: 48px 1fr; }
.rd .rd-vol { width: 46px; height: 62px; }
.rd .rd-vol-a { height: 46px; }
ol.rd::before { left: 21px; }
.gx-stage .gx { gap: 20px; }
}
.gx-stage.gx-glint::after, .gx-stage[class*="gx-m-"]::after {
animation: none !important; top: auto !important;
}
@media (prefers-reduced-motion: no-preference) {
.gx-stage.gx-glint::before {
content: '' !important; display: block !important;
position: fixed; inset: 0; pointer-events: none; z-index: 2;
height: auto; width: auto;
background: linear-gradient(105deg, transparent 38%,
color-mix(in srgb, var(--reward) 26%, transparent) 50%, transparent 62%)
no-repeat;
background-size: 220% 100%;
animation: gx-mend-glint 1.2s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes gx-mend-glint {
from { background-position: 130% 0; }
to   { background-position: -30% 0; }
}
}
.gx-stage.gx-glint { overflow: hidden auto; }
@media (prefers-reduced-motion: no-preference) {
.rd .rd-here .rd-vol { animation: rd-mend-here 8s cubic-bezier(.45, .05, .25, 1) infinite; }
@keyframes rd-mend-here {
0%, 92%, 100% { filter: none; }
96% { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--reward) 75%, transparent)); }
}
}
.gx-stage .gx-print { box-shadow: none !important; border-width: 3px; }
.gx-stage[data-mood="focus"] .gx-top,
.gx-stage[data-mood="focus"] .gx-rail { opacity: .85; filter: none; }
.gx-stage .gx-sealed #gx-seal-rest .btnrow {
position: sticky; bottom: 0; z-index: 6;
margin: 20px calc(clamp(18px, 4vw, 40px) * -1) -28px;
padding: 12px clamp(18px, 4vw, 40px) 16px;
background: var(--sheet);
border-top: 2.5px solid var(--carbon);
}
.gx-stage .gx-runn-off { visibility: hidden; }
.gx-stage .gx-stress-word {
display: flex; flex-wrap: nowrap; align-items: baseline;
justify-content: safe center;
max-width: 100%; overflow-x: auto;
}
@media (max-width: 700px) {
.gx-stage .gx-stress-word { font-size: clamp(26px, 10vw, 44px); }
}
.rd .rd-past .rd-vol { background: color-mix(in srgb, var(--right) 22%, var(--play-tint)); }
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
.gx-stage .gx-bloom {
display: block !important;
position: fixed; top: 16vh; bottom: 10vh; width: 24vw;
pointer-events: none; z-index: -1;
opacity: 0; transition: opacity 2.4s ease-out;
background: radial-gradient(closest-side,
color-mix(in srgb, var(--ink, var(--play)) 15%, transparent), transparent 72%);
}
.gx-stage[data-side="l"] .gx-bloom { left: -5vw; opacity: 1; }
.gx-stage[data-side="r"] .gx-bloom { right: -5vw; opacity: 1; }
.gx-stage .gx-bloom i {
position: absolute; inset: 0; display: grid; place-items: center;
font-style: normal; font-size: 16vh; line-height: 1;
color: var(--ink, var(--play)); opacity: .28;
}
}
@media (min-width: 900px) and (max-width: 1239.98px) {
.gx-stage.gx-marked::after {
content: '' !important; display: block !important;
position: fixed; left: 10px; bottom: 5vh;
width: 20vh; height: 20vh;
background: var(--ghost-img) center / contain no-repeat;
opacity: .05; pointer-events: none;
}
}
.gx-night { display: flex; align-items: center; gap: 12px; }
.gx-night-body { flex: 1 1 auto; min-width: 0; }
.gx-lampfig { width: 64px; height: 72px; flex: 0 0 auto; }
.gx-lampfig:empty { display: none; }
.gx-lampfig svg { width: 100%; height: 100%; }
.gx-night .gx-lampfig {
filter: drop-shadow(0 0 5px color-mix(in srgb, var(--reward) 40%, transparent));
}
.gx-night-wait .gx-lampfig { filter: grayscale(.7) opacity(.75); }
@media (prefers-reduced-motion: no-preference) {
.gx-night-lit .gx-lampfig {
animation: gx-lamp-take 4s cubic-bezier(.3, 0, .2, 1) both;
}
@keyframes gx-lamp-take {
0%   { filter: grayscale(.7) opacity(.75) drop-shadow(0 0 0 transparent); }
35%  { filter: grayscale(0) opacity(1) drop-shadow(0 0 16px color-mix(in srgb, var(--reward) 85%, transparent)); }
100% { filter: grayscale(0) opacity(1) drop-shadow(0 0 5px color-mix(in srgb, var(--reward) 40%, transparent)); }
}
}
.gx-leaves { display: inline-flex; gap: 3px; margin-top: 8px; position: relative; align-items: center; }
.gx-leaves i {
width: 22px; height: 6px; display: block; border-radius: 3px;
border: 0; background: var(--rule);
}
.gx-leaves i.gx-leaf-on { background: var(--rank-brass, var(--signal-ink)); }
.gx-leaves .gx-thread { display: none; }
.rd .rd-l-scent {
display: block; font-size: .74rem; font-style: italic;
color: var(--ink, var(--play)); opacity: .85; margin-top: 2px;
}
.rd .rd-l-scent:empty { display: none; }
.rd .rd-ch-glass { position: relative; }
.rd .rd-ch-glass::after {
content: ''; position: absolute; top: 0; right: 0; width: 40px; height: 40px;
pointer-events: none; z-index: 3;
background: linear-gradient(225deg,
var(--paper) 0 49%,
color-mix(in srgb, var(--carbon) 30%, var(--paper)) 49% 54%,
color-mix(in srgb, var(--carbon) 10%, transparent) 54% 58%,
transparent 58%);
}
@media (prefers-reduced-motion: no-preference) {
.rd .rd-ch.rd-open .rd-ch-body { animation: rd-knife .7s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes rd-knife {
from { clip-path: inset(0 0 100% 0); }
to   { clip-path: inset(0 0 0 0); }
}
}
.gx-stage .gx-doorq {
font-family: var(--serif); font-size: var(--t-1); margin: 10px 0 0;
color: var(--carbon);
}
.gx-stage .gx-doorq i { opacity: .6; font-size: var(--t-0); }
.gx-stage .gx-morrow {
font-family: var(--serif); font-style: italic; font-size: var(--t-1);
color: var(--ink, var(--play)); margin: 6px 0 0;
}
.rd .rd-ch-inwhich {
display: block; font-family: var(--serif); font-style: italic;
font-size: var(--t-00); opacity: .85; margin-top: 1px;
}
.gx-stage .gx-cliff-q {
font-family: var(--serif); font-style: italic; font-size: var(--t-1);
color: var(--carbon); opacity: .9; margin: 4px 0;
}
.gx-in-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gx-pad { margin-top: 10px; }
.gx-pad-row { display: flex; gap: 4px; justify-content: center; margin-top: 4px; flex-wrap: nowrap; }
.gx-pad-k {
font-family: var(--serif); font-size: var(--t-1); line-height: 1;
min-width: 34px; padding: 8px 2px;
flex: 0 1 44px;
background: var(--sheet); color: var(--carbon);
border: 2px solid var(--carbon); border-radius: 2px;
box-shadow: 0 2px 0 var(--press);
cursor: pointer;
}
.gx-pad-k:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--press); }
.gx-pad-k:disabled { opacity: .45; cursor: default; }
.gx-pad-bs { flex-basis: 64px; }
.gx-pad-row:last-child .gx-pad-k { background: var(--paper); }
.gx-kbd, #rev-kbd {
font-size: var(--t-1); line-height: 1; padding: 6px 10px;
background: var(--galley); border: 1px solid color-mix(in srgb, var(--carbon) 55%, var(--rule));
border-radius: var(--r-control); box-shadow: var(--sh-press-quiet); cursor: pointer; color: var(--carbon);
}
.gx-kbd.on, #rev-kbd.on { background: var(--reward-tint); border-color: var(--reward-deep); }
@media (max-width: 700px) {
.gx-pad-row { gap: 3px; }
.gx-pad-k { min-width: 26px; padding: 9px 1px; font-size: var(--t-1); }
}
.gx-stage .gx-margin-word {
font-family: var(--serif); font-size: clamp(30px, 5vw, 46px);
line-height: 1.1; color: var(--carbon); text-align: center; margin: 6px 0 2px;
}
.gx-stage .gx-margin-n {
text-align: center; font-family: var(--bill); font-weight: 700;
font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--steel); margin-bottom: 8px;
}
.gx-stage .gx-rwl { display: grid; gap: 14px; }
.gx-stage .gx-rwl-line {
display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start;
font-family: var(--serif);
}
.gx-stage .gx-rwl-ru { font-size: clamp(19px, 2.6vw, 26px); line-height: 1.45; color: var(--carbon); }
.gx-stage .gx-rwl-en { grid-column: 2; font-style: italic; font-size: var(--t-1); opacity: .8; }
.gx-stage .gx-scribe-study, .gx-stage .gx-scribe-keep {
font-size: clamp(20px, 2.8vw, 28px); line-height: 1.5; margin-bottom: 6px;
}
.gx-stage .gx-after2 { margin-top: 14px; }
.gx-stage .gx.gx-corridor {
display: grid; justify-items: center; align-content: center;
gap: 10px; min-height: 60vh; text-align: center;
padding: 40px clamp(18px, 5vw, 56px); cursor: pointer;
}
.gx-stage .gx-corr-orn { width: 84px; height: 84px; opacity: .85; }
.gx-stage .gx-corr-orn svg { width: 100%; height: 100%; }
.gx-stage .gx-corr-ti { font-family: var(--serif); font-size: clamp(26px, 4vw, 40px); margin: 0; }
.gx-stage .gx-corr-line { font-family: var(--serif); font-size: var(--t-1); margin: 0; }
.gx-stage .gx-corr-epi { font-family: var(--serif); font-style: italic; opacity: .85; max-width: 34em; }
.gx-stage .gx-corridor .btnrow { margin-top: 18px; cursor: auto; }
@media (prefers-reduced-motion: no-preference) {
body.motion-full .gx-stage .gx.gx-corridor { animation: gx-corr-in 1100ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes gx-corr-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
.gx-stage .gx-cliff-walk {
font-family: var(--serif); font-size: var(--t-1); margin: 4px 0;
color: var(--ink, var(--play));
}
.rd .rd-shelfhead {
position: relative; z-index: 2;
list-style: none; margin: 26px 0 2px; padding: 10px 16px;
background: var(--play-deep); color: var(--on-play-deep);
border: 2px solid var(--carbon); box-shadow: 0 2px 0 var(--press);
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.rd .rd-shelfhead b {
font-family: var(--bill); font-weight: 800; letter-spacing: .14em;
text-transform: uppercase; font-size: var(--t-0);
}
.rd .rd-shelfhead span { font-family: var(--serif); font-style: italic; font-size: var(--t-0); opacity: .9; }
.rd .rd-mark.rd-m-crossed .rd-m-dot {
background: var(--right); color: var(--on-right, #fff);
}
.rd .rd-m-won {
display: block; font-family: var(--serif); font-style: italic;
color: var(--right-deep, var(--right)); font-size: var(--t-0);
}
@media (prefers-reduced-motion: no-preference) {
body.motion-full .rd .rd-m-crossing .rd-m-dot { animation: rd-m-press 1100ms cubic-bezier(.3, 0, .2, 1) both; }
@keyframes rd-m-press {
0% { transform: scale(1); }
45% { transform: scale(1.28); }
100% { transform: scale(1); }
}
}
.rd .rd-book { position: relative; }
.rd .rd-roadfig {
position: absolute; right: clamp(8px, 3vw, 40px); top: 8px;
width: 52px; height: 52px; pointer-events: auto; z-index: 2;
}
.rd .rd-roadfig svg { width: 100%; height: 100%; }
@media (max-width: 620px) { .rd .rd-roadfig { display: none; } }
.rd .rd-blotwrap { display: block; margin-top: 6px; font-size: var(--t-0); }
.rd .rd-blotline {
filter: blur(5px); user-select: none;
background: color-mix(in srgb, var(--carbon) 12%, transparent);
border-radius: 3px; padding: 0 4px;
}
.rd .rd-blotnote { font-size: var(--t-00); opacity: .7; }
[data-theme="dark"] .rd .rd-m-won { color: var(--right); }
.gx-stage .gx-acc {
margin-top: 14px; padding: 14px 16px;
background: var(--sheet); border: 2px solid var(--carbon);
box-shadow: none;
border-radius: 2px;
}
.gx-stage .gx-acc-head {
font-family: var(--bill); font-weight: 800; font-size: .72rem;
letter-spacing: .14em; text-transform: uppercase; color: var(--steel);
margin-bottom: 6px;
}
.gx-stage .gx-acc p { font-family: var(--serif); font-size: var(--t-1); margin: 0 0 10px; }
.gx-stage .gx-acc .btnrow { display: flex; gap: 8px; flex-wrap: wrap; position: static; margin: 0; padding: 0; border: 0; background: none; }
body {
background: var(--room);
}
@media (prefers-reduced-motion: no-preference) {
.gx-stage.gx-glint::before {
animation-duration: calc(1.2s * var(--motion, 1));
}
.gx-night-lit .gx-lampfig {
animation-duration: calc(4s * var(--motion, 1));
}
.rd .rd-ch.rd-open .rd-ch-body {
animation-duration: calc(.7s * var(--motion, 1));
}
body.motion-full .gx-stage .gx.gx-corridor {
animation-duration: calc(1100ms * var(--motion, 1));
}
body.motion-full .rd .rd-m-crossing .rd-m-dot {
animation-duration: calc(1100ms * var(--motion, 1));
}
}
.ltl-mark { display: inline-block; vertical-align: middle; color: var(--carbon); }
.rh-device { margin-bottom: 6px; }
.rh-device .ltl-mark { opacity: .85; }
.gx-imprint { flex-basis: 100%; text-align: center; margin-top: 10px; opacity: .55; }
.gx-imprint .ltl-mark { color: var(--steel, var(--carbon)); }
.rdoor-kicker .ltl-mark { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; opacity: .8; }
.rd .rd-book { background: color-mix(in srgb, var(--ink, var(--play)) 9%, var(--galley)); }
.rd .rd-book:hover { background: color-mix(in srgb, var(--ink, var(--play)) 13%, var(--galley)); }
.rd .rd-book:not(.rd-here) .rd-vol { background: color-mix(in srgb, var(--ink, var(--play)) 44%, var(--play-tint)); }
.rd .rd-book.rd-done .rd-vol { background: color-mix(in srgb, var(--ink, var(--play)) 60%, var(--right)); }
.rd .rd-book .rd-next b { color: color-mix(in srgb, var(--ink, var(--play)) 72%, var(--carbon)); }
[data-theme="dark"] .rd .rd-book { background: color-mix(in srgb, var(--ink, var(--play)) 12%, var(--galley)); }
[data-theme="dark"] .rd .rd-book:hover { background: color-mix(in srgb, var(--ink, var(--play)) 17%, var(--galley)); }
#v-read { background: transparent; }
#pop { border-top: 3px solid var(--book-ink, var(--carbon)); }
.pop-say {
background: var(--play, var(--ink-1)); color: var(--on-play, var(--paper-0));
border: 1px solid var(--carbon);
box-shadow: 0 3px 0 color-mix(in srgb, var(--press) 55%, transparent);
}
.scene-epigraph { box-shadow: 0 2px 0 color-mix(in srgb, var(--press) 18%, transparent); }
.gx-stage .gx-swifthit {
animation: gx-swifthit calc(.18s * var(--motion, 1)) cubic-bezier(.2, .9, .3, 1) 1;
}
@keyframes gx-swifthit {
0% { transform: translateY(0); }
40% { transform: translateY(3px); }
100% { transform: translateY(0); }
}
.gx-stage.gx-m-swift .gx {
box-shadow: none;
transition: box-shadow .12s linear;
}
.gx-stage.gx-still, .gx-stage.gx-still * { animation-play-state: paused !important; }
.gx-stage .gx-top .gx-runn[data-r="2"] {
border-color: var(--reward-deep); color: var(--on-reward, var(--on-signal)); font-weight: 800;
}
.gx-stage .gx-top .gx-runn[data-r="3"] {
background: var(--reward); color: var(--on-reward, var(--on-signal));
border-color: var(--carbon); font-weight: 900;
}
.gx-stage .gx-v-swift {
display: inline-block; margin-left: 8px; font-style: normal;
font-family: var(--sans); font-size: var(--t-00); font-weight: var(--fw-strong);
letter-spacing: .1em; text-transform: uppercase; color: var(--reward-deep);
}
.gx-stage .gx-mid[data-rare="proof"] {
background: var(--carbon); border-radius: 2px; padding: 14px 16px 16px;
box-shadow: none;
}
.gx-stage .gx-mid[data-rare="proof"] .gx-ask { color: color-mix(in srgb, #fffdf5 72%, var(--carbon)); }
.gx-stage .gx-mid[data-rare="proof"] .gx-ask::before {
content: 'оттиск · the pressman\2019s proof';
display: block; font-family: var(--sans); font-size: var(--t-00); font-weight: var(--fw-strong);
letter-spacing: .14em; text-transform: uppercase; color: var(--reward);
margin-bottom: 6px;
}
.gx-stage .gx-mid[data-rare="proof"] .gx-head { color: #fffdf5; }
.gx-stage .gx-mid[data-rare="proof"] .gx-head .gx-say { color: inherit; }
.gx-stage .gx-mid[data-rare="proof"] .gx-head .gx-say {
background: radial-gradient(circle at 50% 38%,
color-mix(in srgb, #fffdf5 16%, transparent),
color-mix(in srgb, #fffdf5 7%, transparent));
border-color: color-mix(in srgb, #fffdf5 55%, transparent);
box-shadow: none;
}
body.motion-full .gx-stage .gx-mid[data-rare="proof"] .gx-head .gx-say::after {
border-color: color-mix(in srgb, #fffdf5 45%, transparent);
}
.gx-stage .gx-mid[data-rare="proof"] .gx-line,
.gx-stage .gx-mid[data-rare="proof"] .gx-study {
background: color-mix(in srgb, #fffdf5 9%, transparent);
border-left-color: color-mix(in srgb, #fffdf5 55%, transparent);
color: #fffdf5;
box-shadow: none;
}
.gx-stage .gx-mid[data-rare="proof"] .gx-blank {
background: color-mix(in srgb, #fffdf5 18%, transparent);
color: #fffdf5;
box-shadow: none;
}
.gx-stage .gx-mid[data-rare="proof"] .gx-word,
.gx-stage .gx-mid[data-rare="proof"] .gx-gloss,
.gx-stage .gx-mid[data-rare="proof"] .gx-en {
color: #fffdf5;
}
.gx-stage .gx-mid[data-rare="proof"] .gx-word::before,
.gx-stage .gx-mid[data-rare="proof"] .gx-word::after {
border-color: color-mix(in srgb, #fffdf5 55%, transparent);
}
.gx-stage .gx-patent {
display: flex; gap: 12px; align-items: center; margin: 14px 0;
padding: 12px 14px; background: var(--galley);
border: 2px solid var(--carbon); border-radius: 2px;
box-shadow: 0 2px 0 color-mix(in srgb, var(--press) 58%, var(--rule));
}
.gx-stage .gx-pat-cls {
flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center;
border: 2.5px solid var(--carbon); border-radius: 50%;
font-family: var(--bill); font-weight: 900; font-size: var(--t-1);
background: var(--paper); box-shadow: inset 0 0 0 2px var(--reward);
}
.gx-stage .gx-pat-mid { flex: 1; min-width: 0; }
.gx-stage .gx-pat-mid b { display: block; font-family: var(--serif); font-size: var(--t-1); }
.gx-stage .gx-pat-rise {
display: block; height: 5px; margin: 6px 0 4px; background: var(--paper);
border: 1.5px solid var(--carbon); border-radius: 2px;
position: relative; overflow: hidden;
}
.gx-stage .gx-pat-rise::after {
content: ''; position: absolute; inset: 0; width: var(--p, 0%);
background: var(--reward); border-right: 1.5px solid var(--carbon);
}
.gx-stage .gx-pat-mid span { display: block; font-size: var(--t-00); color: var(--steel); }
#nav-profile { position: relative; }
#nav-profile .np-init {
display: inline-grid; place-items: center; width: 18px; height: 18px;
margin-right: 5px; border: 1.5px solid currentColor; border-radius: 50%;
font-size: var(--t-00); font-weight: 900; vertical-align: -3px;
}
#nav-profile .np-init[hidden] { display: none; }
#nav-profile .np-rise { position: absolute; left: 7px; right: 7px; bottom: 3px; pointer-events: none; }
#nav-profile .np-rise .xpm { --xpm-glint: currentColor; --xpm-notch: color-mix(in srgb, currentColor 45%, transparent); }
#nav-profile .np-rise .xpm-track { background-color: color-mix(in srgb, currentColor 22%, transparent); }
#nav-profile .np-rise .xpm-fill { background: var(--earned-on-rail); }
#nav-profile.active .np-rise .xpm-fill { background: color-mix(in srgb, currentColor 55%, transparent); }
.pxx-plate {
position: relative;
display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px 30px;
align-items: center;
background: var(--play); color: var(--on-play, #fffdf5);
border: 3px solid var(--carbon); border-radius: 2px;
box-shadow: none;
padding: 30px 30px 26px;
margin: 62px 0 0;
}
.pxx-plate input.px-name {
color: var(--on-play, #fffdf5); margin: 0;
font-size: clamp(38px, 5.6vw, 74px); line-height: .9;
}
.pxx-plate input.px-name:focus { box-shadow: inset 0 -4px 0 var(--reward); }
.pxx-plate input.px-name::placeholder { color: color-mix(in srgb, var(--on-play, #fffdf5) 40%, transparent); }
.pxx-plate .px-name-invite { margin: 0; }
.pxx-invite {
background: none; border: 0; padding: 0 0 4px; cursor: pointer;
color: inherit; font-family: var(--bill); font-weight: 900;
font-size: clamp(26px, 4.2vw, 42px); text-transform: uppercase;
border-bottom: 3px solid var(--reward); line-height: 1.08; text-align: left;
}
.pxx-meta {
margin-top: 12px;
font-family: var(--sans); font-size: var(--t-00); font-weight: var(--fw-strong);
letter-spacing: .13em; text-transform: uppercase;
color: color-mix(in srgb, var(--on-play, #fffdf5) 72%, transparent);
}
.pxx-patent {
display: flex; gap: 14px; align-items: flex-start;
background: var(--galley); color: var(--carbon);
border: 2px solid var(--carbon); border-radius: 2px;
box-shadow: none;
padding: 14px 16px 12px;
}
.pxx-pat-frame {
flex: 0 0 auto; width: 56px; height: 56px; display: grid; place-items: center;
border: 2.5px solid var(--carbon); border-radius: 50%; background: var(--paper);
font-style: normal;
}
.pxx-pat-frame b { font-family: var(--bill); font-weight: 900; font-size: var(--t-4); }
.pxx-patent[data-band="mid"] .pxx-pat-frame { box-shadow: inset 0 0 0 3px var(--reward); }
.pxx-patent[data-band="high"] .pxx-pat-frame {
box-shadow: inset 0 0 0 3px var(--reward), inset 0 0 0 5px var(--paper), inset 0 0 0 7px var(--reward);
}
.pxx-pat-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pxx-pat-kicker {
font-family: var(--sans); font-size: var(--t-00); font-weight: var(--fw-strong);
letter-spacing: .14em; text-transform: uppercase; color: var(--steel);
}
.pxx-pat-ru { font-family: var(--serif); font-size: var(--t-2); line-height: 1.2; font-weight: 600; }
.pxx-pat-en, .pxx-pat-note { font-family: var(--serif); font-style: italic; font-size: var(--t-00); color: var(--steel); line-height: 1.35; }
.pxx-pat-rise {
display: block; height: 5px; margin: 7px 0 2px; background: var(--paper);
border: 1.5px solid var(--carbon); border-radius: 2px; position: relative; overflow: hidden;
}
.pxx-pat-rise::after {
content: ''; position: absolute; inset: 0; width: var(--p, 0%);
background: var(--reward); border-right: 1.5px solid var(--carbon);
}
.pxx-pat-climb { font-family: var(--serif); font-style: italic; font-size: var(--t-00); color: var(--steel); }
.pxx-fig { position: absolute; top: auto; bottom: calc(100% - 12px); right: 26px; width: 66px; height: 66px; cursor: pointer; }
.pxx-fig svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pxx-count {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
background: var(--sheet);
border: 3px solid var(--carbon); border-top: 0;
border-radius: 0 0 2px 2px;
margin: 0 14px;
box-shadow: 0 2px 0 color-mix(in srgb, var(--press) 58%, var(--rule));
}
.pxx-c { padding: 15px 18px 13px; border-left: 1.5px solid color-mix(in srgb, var(--carbon) 22%, transparent); min-width: 0; }
.pxx-c:first-child { border-left: 0; }
.pxx-c b {
display: block; font-family: var(--mono); font-weight: var(--fw-strong);
font-size: clamp(26px, 3.2vw, 38px); line-height: .9;
font-variant-numeric: tabular-nums; color: var(--carbon);
}
.pxx-c span {
display: block; margin-top: 6px; font-family: var(--sans);
font-size: var(--t-00); font-weight: var(--fw-strong); letter-spacing: .12em;
text-transform: uppercase; color: var(--steel);
line-height: 1.3;
}
.pxx-mid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; align-items: start; }
.pxx-diary {
background: var(--galley); border: 2px solid var(--carbon); border-radius: 2px;
box-shadow: 0 2px 0 color-mix(in srgb, var(--press) 45%, var(--rule));
padding: 14px 16px;
}
.pxx-diary:empty { display: none; }
.pxx-diary .dy-grid i { width: 19px; height: 19px; }
.pxx-diary .dy-grid { margin-left: auto; margin-right: auto; }
.pxx-diary .smallcaps, .pxx-diary .dy-cap, .pxx-diary .dy-foot { text-align: center; }
.pxx-seals {
background: var(--play-deep); color: var(--on-play, #fffdf5);
border: 2px solid var(--carbon); border-radius: 2px;
box-shadow: 0 2px 0 color-mix(in srgb, var(--press) 58%, var(--rule));
padding: 14px 16px 16px;
}
.pxx-seals-cap {
font-family: var(--sans); font-size: var(--t-00); font-weight: var(--fw-strong);
letter-spacing: .14em; text-transform: uppercase; opacity: .82; margin-bottom: 10px;
}
.pxx-wax { display: flex; flex-wrap: wrap; align-items: center; }
.pxx-wax .seal {
width: 56px; height: 56px; margin: 0 -10px 4px 0;
transform: rotate(calc(sin(var(--i, 0)) * 9deg));
filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35));
}
.pxx-wax .seal svg { width: 100%; height: 100%; display: block; }
.pxx-seals-none { font-family: var(--serif); font-style: italic; font-size: var(--t-0); opacity: .85; margin: 0; line-height: 1.5; }
.pxx-link {
background: none; border: 0; padding: 0; cursor: pointer;
font-family: var(--sans); font-size: .72rem; font-weight: var(--fw-strong);
letter-spacing: .05em; color: inherit;
text-decoration: underline; text-underline-offset: 3px;
margin-top: 6px; display: inline-block;
padding: 4px 0; margin-bottom: -4px;
}
.pxx-record {
margin-top: 48px; background: var(--paper);
border: 2px solid var(--carbon); border-radius: 2px;
box-shadow: 0 2px 0 color-mix(in srgb, var(--press) 45%, var(--rule));
padding: 16px 20px 6px;
}
.pxx-rec-cap {
font-family: var(--sans); font-size: var(--t-00); font-weight: var(--fw-strong);
letter-spacing: .14em; text-transform: uppercase; color: var(--steel);
margin-bottom: 4px;
}
.pxx-line {
display: flex; gap: 18px; justify-content: space-between; align-items: baseline;
padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--carbon) 20%, transparent);
}
.pxx-rec-cap + .pxx-line { border-top: 0; }
.pxx-line span { font-family: var(--serif); font-style: italic; font-size: var(--t-0); line-height: 1.5; min-width: 0; }
.pxx-line i { font-family: var(--mono); font-style: normal; font-size: .7rem; color: var(--steel); white-space: nowrap; }
.pxx-line-kept span { font-style: normal; }
.pxx-foot { margin-top: 48px; border-top: 2px solid var(--carbon); padding-top: 16px; }
.pxx-if {
margin: 0 0 14px; font-family: var(--serif); font-style: italic;
font-size: var(--t-1); line-height: 1.5; color: var(--carbon);
}
.pxx-if.is-empty { color: var(--steel); }
.pxx-if .pxx-link { margin: 0 0 0 10px; }
.pxx-utils { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.pxx-utils .px-verb { font-size: var(--t-0); }
.pxx-fine { margin: 12px 0 0; font-size: .72rem; color: var(--steel); }
.px-light { display: inline-flex; gap: 8px; align-items: center; }
.px-light .im-thlab { font: var(--fw-strong) var(--t-00)/1.4 var(--sans); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--steel); }
.pxx-group + .pxx-group { margin-top: var(--s4); }
@media (max-width: 820px) {
.pxx-plate { grid-template-columns: 1fr; padding: 22px 18px 18px; gap: 16px; }
.pxx-fig { right: 14px; width: 56px; height: 56px; bottom: calc(100% - 10px); }
.pxx-count { grid-auto-flow: initial; grid-template-columns: repeat(2, 1fr); margin: 0 8px; }
.pxx-c { border-left: 0; border-top: 1.5px solid color-mix(in srgb, var(--carbon) 22%, transparent); }
.pxx-c:nth-child(-n+2) { border-top: 0; }
.pxx-c:nth-child(2n) { border-left: 1.5px solid color-mix(in srgb, var(--carbon) 22%, transparent); }
.pxx-mid { grid-template-columns: 1fr; margin-top: 36px; }
.pxx-record, .pxx-foot { margin-top: 36px; }
}
.gx-stage .gx-underwax {
margin: 0 0 14px; padding: 12px 14px; background: var(--paper);
border: 2px solid var(--carbon); border-radius: 2px;
box-shadow: 0 2px 0 color-mix(in srgb, var(--press) 58%, var(--rule));
}
.gx-stage .gx-underwax .smallcaps {
display: block; font-size: var(--t-00); letter-spacing: .14em;
text-transform: uppercase; color: var(--gold-leaf, #b8860b); margin-bottom: 4px;
}
.gx-stage .gx-underwax b { font-family: var(--serif); font-size: var(--t-1); display: block; }
.gx-stage .gx-underwax p { margin: 4px 0 0; font-size: var(--t-0); line-height: 1.5; }
.fire-ov { z-index: 292; }
.fire-ov .fire-panel {
position: relative; overflow: hidden; max-width: 480px; width: min(92vw, 480px);
text-align: center; background: #1d1713; color: #fffdf5;
border: 3px solid #1d1713; border-radius: 2px;
box-shadow: 8px 8px 0 var(--gold-leaf, #b8860b);
padding: 26px 26px 20px;
}
.fire-ov .fire-panel .fb-stage { position: relative; height: 170px; }
.fire-ov .fire-panel .fb-plate { display: grid; place-items: center; height: 100%; color: #fffdf5; }
.fire-ov .fire-panel .fb-plate .fb-feather,
.fire-ov .fire-panel .fb-plate .fb-feye {
stroke: #e0ad25;
filter: drop-shadow(0 0 6px rgba(224, 173, 37, .55));
}
.fire-ov .fire-panel:not(.still) .fb-plate {
opacity: 0;
animation: fb-plate-in calc(.9s * var(--motion, 1)) ease-out calc(2.4s * var(--motion, 1)) both;
}
.fire-ov .fire-panel.still .fb-plate { opacity: 1; animation: none; }
@keyframes fb-plate-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.fire-ov .fire-panel .fb-flight {
position: absolute; top: 34%; left: -80px; color: #fffdf5; pointer-events: none;
animation: fb-fly calc(2.8s * var(--motion, 1)) cubic-bezier(.3, .1, .2, 1) both;
}
.fire-ov .fire-panel .fb-flight .fb-feather,
.fire-ov .fire-panel .fb-flight .fb-feye { stroke: #e0ad25; }
.fire-ov .fire-panel.still .fb-flight { display: none; }
@keyframes fb-fly {
0% { transform: translate(0, 30px) rotate(-6deg); opacity: 0; }
12% { opacity: 1; }
55% { transform: translate(300px, -30px) rotate(4deg); opacity: 1; }
100% { transform: translate(620px, -64px) rotate(8deg); opacity: 0; }
}
.fire-ov .fire-panel .fb-name { font-family: var(--serif); font-size: var(--t-4); margin: 10px 0 2px; }
.fire-ov .fire-panel .fb-fact { font-size: var(--t-0); opacity: .85; line-height: 1.5; }
.fire-ov .fire-panel .fb-row { margin-top: 18px; justify-content: center; }
.fire-ov .fire-panel .fb-row-wait { opacity: 0; pointer-events: none; transition: opacity .5s linear; }
.fire-ov .fire-panel.still .fb-row-wait { opacity: 1; pointer-events: auto; }
.fire-ov .fire-panel .btn { border-color: #fffdf5; color: #fffdf5; background: transparent; box-shadow: 0 2px 0 rgba(255, 253, 245, .35); }
.fire-ov .fire-panel .btn.primary { background: var(--gold-leaf, #b8860b); border-color: #1d1713; color: #1d1713; box-shadow: 0 2px 0 #e0ad25; }
.gx-stage .gx-verdict.gx-ok {
background: var(--reward-tint); border-color: var(--carbon); color: var(--carbon);
}
.gx-stage .gx-verdict.gx-no {
background: var(--galley); border-color: var(--miss); color: var(--carbon);
}
.gx-stage .gx-verdict.gx-ok.gx-v-won { color: var(--play-deep); }
.gx-stage .gx-right {
background: var(--play) !important; color: var(--on-play, #fffdf5) !important;
box-shadow: 0 2px 0 var(--play-deep) !important;
}
.gx-stage :is(.gx-opt, .gx-tile, .gx-pw, .gx-pg, .gx-find-w, .gx-vowel).gx-right {
color: var(--on-play, #fffdf5) !important;
}
.gx-stage .gx-wrong {
background: color-mix(in srgb, var(--miss) 10%, var(--paper)) !important;
border-color: var(--miss) !important;
box-shadow: 0 2px 0 color-mix(in srgb, var(--miss) 60%, var(--press)) !important;
}
.gx-stage .gx-p-done {
background: var(--play-tint) !important; border-color: var(--play) !important;
box-shadow: 0 2px 0 var(--play-deep) !important;
}
.gx-stage .gx-set:hover {
background: var(--carbon);
color: var(--sheet);
box-shadow: 0 3px 0 color-mix(in srgb, var(--press) 60%, var(--rule));
}
.desk-host-progress i { background: var(--play); }
.rd-done .rd-vol { background: var(--play); }
#v-journey .jp-doc, #v-journey .journey-sheet {
background: var(--galley); border: 2px solid var(--carbon); border-radius: 2px;
box-shadow: none;
}
#v-journey .jseal.got {
border: 2px solid var(--carbon); border-radius: 2px;
box-shadow: 0 2px 0 color-mix(in srgb, var(--press) 58%, var(--rule));
}
#settings-panel { max-width: 640px; width: min(94vw, 640px); }
#settings-panel .set-act {
margin: 16px 0 2px; padding-bottom: 5px;
font-family: var(--sans); font-size: var(--t-00); font-weight: var(--fw-strong);
letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--steel);
border-bottom: 1px solid var(--rule);
}
#settings-panel .k-plate + .set-act { margin-top: 16px; }
#settings-panel .set-row.set-col { flex-direction: column; align-items: stretch; gap: 8px; }
#settings-panel .set-row.set-col select { max-width: none; width: 100%; }
#settings-panel .set-btns { display: flex; gap: 8px; flex: 0 0 auto; }
#settings-panel .set-note {
font-size: .75rem; color: var(--steel); line-height: 1.55; margin: 8px 0 2px;
}
#ov-settings #settings-panel {
display: flex; flex-direction: column; overflow: hidden;
}
#settings-panel .set-body {
flex: 1 1 auto; min-height: 0;
overflow: hidden auto; overscroll-behavior: contain;
margin-inline: -11px; padding-inline: 11px;
}
#settings-panel .set-save {
flex: none; margin: 12px 0 0; padding: 12px 0 0;
border-top: 1px solid var(--rule);
justify-content: flex-end;
}
.masthead .room-door { margin-top: 10px; }
.masthead .room-door a {
font-family: var(--sans); font-size: var(--t-00); font-weight: var(--fw-strong);
letter-spacing: .14em; text-transform: uppercase;
color: var(--on-play, #fffdf5); opacity: .75; text-decoration: none;
border-bottom: 1.5px solid color-mix(in srgb, currentColor 45%, transparent);
padding-bottom: 1px;
}
.masthead .room-door a:hover { opacity: 1; border-bottom-color: var(--reward); }
.gx-stage .gx-line-tile.gx-tile-picked {
background: var(--play-tint);
border-color: color-mix(in srgb, var(--carbon) 55%, transparent);
color: color-mix(in srgb, var(--carbon) 62%, transparent);
box-shadow: 0 1px 0 color-mix(in srgb, var(--carbon) 40%, transparent);
transform: translateY(2px);
}
.gx-stage .gx-gathered {
display: block; width: 100%; text-align: left; cursor: pointer;
font: inherit; color: inherit; background: none; border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--carbon) 18%, transparent);
padding: 10px 12px;
}
.gx-stage .gx-gathered:hover { text-decoration: line-through; background: color-mix(in srgb, var(--carbon) 4%, transparent); }
.gx-stage .gx-gathered:disabled { cursor: default; text-decoration: none; background: none; }
.rev-btns:empty { display: none; }
[data-theme="dark"] .session-ring .track { stroke: var(--galley); }
#v-profile .pxx-plate { box-shadow: none; }
#v-profile .pxx-count {
width: 100%; margin-left: 0; margin-right: 0; box-sizing: border-box;
box-shadow: none;
}
#v-profile .pxx-mid { align-items: stretch; }
#v-profile .pxx-seals {
height: auto; box-sizing: border-box;
display: flex; flex-direction: column;
}
#v-profile .pxx-seals .pxx-link { margin-top: auto; }
:root {
--gutter: clamp(16px, 4vw, 40px);
--band:       clamp(30px, 4.4vw, 60px);
--breath:     clamp(16px, 2.2vw, 26px);
--seam:       clamp(10px, 1.4vw, 16px);
--fold-hand:  560px;
--fold-page:  820px;
--fold-desk: 1024px;
}
#v-home, #v-library {
--desk-w: min(calc(100vw - var(--gutter) * 2), var(--page-w));
}
#v-home > #bill-sect > .frontier-card,
#v-home > .desk-sect > .card {
max-width: 100%;
margin-inline: 0;
}
#v-home > .desk-sect:not(:has(*)),
#v-home > .desk-spread:not(:has(*)),
#v-home > .desk-sect > .card:empty,
#v-home > .desk-spread > .card:empty,
#v-home > .friend-strip:not(:has(.fr-bubble:not(:empty))) {
display: none;
}
#v-home > .friend-strip,
#v-home > #standing-line,
#v-home > .desk-spread,
#v-home > .desk-sect {
margin-top: var(--band);
margin-bottom: 0;
}
#v-home > #desk-hud {
margin-top: -3px;
margin-bottom: var(--band);
}
#v-home > .aim-line { margin-top: var(--breath); }
#v-home > .ask-card { margin-top: var(--breath); }
#v-home > .masthead { margin-top: var(--breath); margin-bottom: 0; }
:is(#v-home, #desk-details) .sect-head { margin: 0 0 var(--breath); }
#v-home > .greeting:empty { margin: 0; }
@media (max-width: 820px) {
.desk-spread { grid-template-columns: 1fr; }
.frontier-card .fr-grid { grid-template-columns: 1fr; }
.lad-fold { grid-template-columns: 1fr; }
}
@media (min-width: 821px) {
.desk-spread { grid-template-columns: 1.12fr .88fr; }
.frontier-card .fr-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
#v-home > .masthead { padding: clamp(16px, 3vw, 26px) clamp(14px, 3vw, 28px); }
#v-home .masthead h1,
#v-home #room-name {
font-size: min(clamp(34px, 6.4vw, 52px), 15vh);
line-height: .94;
margin-block: clamp(6px, 1.4vw, 12px) clamp(6px, 1vw, 10px);
}
#v-home .masthead .room-line { font-size: var(--t-0); }
#v-home .masthead .almanac { margin-top: var(--seam); }
.desk-host { min-height: 0; }
}
@media (min-width: 641px) and (max-width: 820px) {
.desk-intro {
grid-template-columns: minmax(0, .82fr) minmax(280px, 1.18fr);
gap: var(--breath);
min-height: 0;
}
}
@media (max-width: 820px) {
.desk-cast-wrap { display: none; }
.desk-host { grid-template-columns: 1fr; gap: var(--seam); }
.desk-host-bubble::after { display: none; }
}
@media (max-width: 640px) {
.desk-intro { grid-template-columns: 1fr; gap: var(--breath); min-height: 0; }
}
#v-home > .desk-spread { grid-template-columns: 1fr; justify-content: stretch; }
#v-home > .desk-spread > #tonight-card { width: 100%; max-width: none; margin-bottom: 0; }
#v-home > .desk-spread > #tonight-card > div:not([class]):empty { display: none; }
@media (min-width: 821px) {
#tonight-card {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
column-gap: clamp(24px, 3vw, 44px);
row-gap: var(--seam);
align-items: center;
}
#tonight-card > .bill-head { grid-column: 1 / -1; }
#tonight-card > .tn-row { grid-column: 1; margin: 0; }
#tonight-card > .btnrow.tn-act { grid-column: 2; grid-row: 2; margin: 0; }
#tonight-card > .tn-lamp { grid-column: 2; grid-row: 3; margin: 0; align-self: start; }
#tonight-card > .btnrow.tn-act > .btn { width: 100%; justify-content: center; }
#tonight-card > .tn-empty,
#tonight-card > .tn-evening { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
.record-sheet { display: flex; flex-direction: column; }
.record-sheet .rs-main   { order: 1; padding-inline: clamp(16px, 3vw, 28px); }
.record-sheet .rs-margin { order: 2; border-left: none; border-top: 1px solid var(--rule); }
.record-sheet .rs-spine  { order: 3; border-right: none; border-top: 1px solid var(--rule); }
}
@media (max-width: 700px) {
.rs-spine .rank-ladder li { display: none; }
.rs-spine .rank-ladder li.rk-cur,
.rs-spine .rank-ladder li:has(+ .rk-cur),
.rs-spine .rank-ladder li.rk-cur + li { display: list-item; }
.rs-spine .rk-foot { margin-top: var(--seam); }
}
#v-home .cameo-lab,
#v-home .desk-host-kicker,
#v-home .arena-ghost .ag-shy,
:is(#v-home, #desk-details) .rs-spine .rk-cls,
:is(#v-home, #desk-details) .rs-spine .rk-en,
#v-home .rk-foot,
#v-home #room-door a {
font-size: var(--t-00);
}
:is(#v-home, #desk-details) .hud-body small { font-size: var(--t-00); letter-spacing: .1em; }
@media all {
#v-home .linklike,
:is(#v-home, #desk-details) .rs-foot a,
:is(#v-home, #desk-details) .rs-main a,
:is(#v-home, #desk-details) .rs-margin a,
#v-home #room-door a,
#v-home .stl a,
#v-home .tn-lamp a {
position: relative;
touch-action: manipulation;
}
#v-home .linklike::after,
:is(#v-home, #desk-details) .rs-foot a::after,
:is(#v-home, #desk-details) .rs-main a::after,
:is(#v-home, #desk-details) .rs-margin a::after,
#v-home #room-door a::after,
#v-home .stl a::after,
#v-home .tn-lamp a::after {
content: '';
position: absolute;
inset: -14px -10px;
background: none;
border: 0;
}
:is(#v-home, #desk-details) .rs-foot { display: flex; flex-wrap: wrap; gap: 6px clamp(16px, 3vw, 28px); }
}
#v-home .btn,
#v-home button:not(.linklike) { touch-action: manipulation; }
#v-home :focus-visible,
#v-library :focus-visible {
outline: 3px solid var(--signal);
outline-offset: 2px;
border-radius: 1px;
}
#v-home > .masthead :focus-visible,
#v-home > #desk-hud :focus-visible {
outline-color: var(--signal);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--carbon) 55%, transparent);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
#v-home .btn,
#v-home .desk-host-btn {
transition:
transform  calc(140ms * var(--motion, 1)) var(--settle),
box-shadow calc(140ms * var(--motion, 1)) var(--settle);
}
#v-home .btn:hover,
#v-home .desk-host-btn:hover { transform: translateY(-1px); }
#v-home .btn:active,
#v-home .desk-host-btn:active { transform: translateY(1px); }
}
#v-home > .friend-strip {
align-items: start;
gap: var(--seam);
}
#v-home > .friend-strip .fr-who { flex: 0 0 48px; align-self: center; }
#v-home > .friend-strip .fr-bubble { max-width: 68ch; }
@media (max-width: 560px) {
#v-home > .friend-strip { flex-direction: column; align-items: stretch; }
#v-home > .friend-strip .fr-who { align-self: flex-start; }
#v-home > .friend-strip .fr-bubble::before,
#v-home > .friend-strip .fr-bubble::after { display: none; }
}
@media (min-width: 1400px) {
#v-home { --band: clamp(44px, 3.6vw, 68px); }
}
#v-home.view { padding-bottom: var(--band); }
[data-theme="dark"] .bill li,
[data-theme="dark"] .bill li .b-n,
[data-theme="dark"] .rm-node,
[data-theme="dark"] .un-row,
[data-theme="dark"] .rungs li {
color: color-mix(in oklab, var(--ink, var(--carbon)) 45%, var(--carbon));
}
[data-theme="dark"] .ex-main {
color: color-mix(in oklab, var(--ink, var(--carbon)) 45%, var(--carbon));
}
[data-theme="dark"] .ex-main mark { color: var(--carbon); }
[data-theme="dark"] .bill li > i {
border-bottom-color: color-mix(in oklab,
color-mix(in oklab, var(--ink, var(--rule)) 45%, var(--carbon)) 40%, var(--rule));
}
[data-theme="dark"] .bill li.struck,
[data-theme="dark"] .bill li.struck .b-ti { color: var(--steel); }
.rd-here .rd-vol b { color: var(--on-reward, var(--on-signal)); }
[data-theme="dark"] #v-read #scene-orn,
[data-theme="dark"] #v-read .scene-head .orn {
color: color-mix(in oklab, var(--book-ink, var(--signal)) 45%, var(--carbon));
}
[data-theme="dark"] #readbar .left-note { opacity: 1; }
#v-home > .masthead::after {
position: static;
inset: auto;
display: block;
width: auto; height: auto;
margin-top: var(--seam);
line-height: 1.15;
text-align: right;
}
#v-home > .masthead > #arena-ghost { padding-bottom: 0; }
#v-home .arena-ghost { border-top-color: color-mix(in srgb, var(--carbon) 22%, transparent); }
#v-home .arena-ghost .ag-q, #v-home .arena-ghost .ag-shy { color: var(--carbon); }
.plan.best .p-per,
.plan.best .p-note { color: var(--on-play, var(--on-signal)); }
[data-theme="dark"] .px-verb { color: var(--lazur-ink); }
:root[data-lights="down"] {
--chrome-ink: color-mix(in srgb, var(--on-play) 72%, var(--play-deep));
}
:root[data-lights="down"] header .wm-t { color: var(--signal); }
[data-theme="dark"] .rd .rd-book .rd-next b {
color: color-mix(in srgb, var(--ink, var(--carbon)) 38%, var(--carbon));
}
body.read-lamp #read-wrap {
--lamp-paper: #f9efd9;
background: var(--lamp-paper);
--sheet:     var(--lamp-paper);
--galley:    color-mix(in srgb, var(--lamp-paper) 55%, #fffdf5);
--case:      color-mix(in srgb, var(--lamp-paper) 88%, #43331f);
--carbon:    #43331f;
--steel:     #6b5a44;
--rule:      #d9c9a8;
--rule-room: #8e7240;
--edge:      #d9c9a8;
--ink: #43331f; --ink-0: #43331f; --ink-1: #43331f;
--ink-2p: #6b5a44; --ink-2: #6b5a44;
--ink-3p: #8a7a5e; --ink-3: #8a7a5e; --faint: #8a7a5e;
--paper-hi: var(--lamp-paper); --paper-0: var(--galley); --card: var(--galley);
--panel: var(--galley); --gesso: var(--galley);
--line: #d9c9a8; --size: #d9c9a8; --line-2: #8e7240; --foot: #8e7240;
}
body[data-daypart="evening"].read-lamp #read-wrap { --lamp-paper: #f2e3c4; }
body[data-daypart="night"].read-lamp   #read-wrap { --lamp-paper: #e9d7b2; }
body.read-lamp #v-read .scene-head .vy,
body.read-lamp #v-read .divider,
body.read-lamp #v-read #scene-orn,
body.read-lamp #v-read .scene-head .orn {
color: color-mix(in oklab, var(--book-ink, var(--carbon)) 50%, var(--carbon));
}
[data-theme="dark"] .gx-stage .gx-direction {
color: color-mix(in oklab, var(--ink, var(--carbon)) 45%, var(--carbon));
}
[data-theme="dark"] .rd-vol {
--galley: #e7e1d2;
--play-tint: #e7e1d2;
--carbon: #17213a;
}
[data-theme="dark"] .rd-vol b { mix-blend-mode: normal; filter: none; }
[data-theme="dark"] #v-home > .masthead { background: var(--play-deep); }
html { font-size: clamp(1.0625rem, 1rem + .1vw, 1.1875rem); }
:root {
--type-body: 1rem;
--type-control: 1rem;
--type-meta: .875rem;
--type-prompt: clamp(1.375rem, 1.25rem + .5vw, 1.75rem);
--type-heading: clamp(1.5rem, 1.3rem + .6vw, 2rem);
--t-00: .8125rem;
--t-0: .875rem;
--t-1: 1rem;
--t-2: 1.125rem;
--t-3: 1.25rem;
--t-4: 1.5rem;
--t-5: 1.8125rem;
--t-6: 2.1875rem;
--t-7: 2.75rem;
--s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;   --s5: 1.25rem;
--s6: 1.5rem;   --s7: 2rem;     --s8: 2.5rem;   --s9: 3rem;
--rd-gut:   4rem;
--rd-vol-w: 3.75rem;
--rd-vol-h: 4.75rem;
--rd-fig:   4.5rem;
--rd-orn-c: 2.125rem;
--rd-no-c:  1.875rem;
--rd-no-hc: 2.75rem;
--rd-seal:  2.625rem;
--card-min: 11.125rem;
}
@media (min-width: 1500px) {
.view { max-width: min(1440px, 94vw); }
}
@media (min-width: 1100px) {
#v-grammar > *,
#v-journey > * { max-width: min(94%, 1120px); }
.glist { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
@media (min-width: 1100px) {
.rd-hit, .rd-mark, .rd-beyond { grid-template-columns: var(--rd-gut) 1fr; }
.rd-who                       { grid-template-columns: var(--rd-fig) 1fr; }
.rd-ch-head                   { grid-template-columns: var(--rd-orn-c) 1fr auto; }
.rd-lesson                    { grid-template-columns: var(--rd-no-c) 1fr auto; }
.rd-l-here                    { grid-template-columns: var(--rd-no-hc) 1fr auto; }
.rd-vol     { width: var(--rd-vol-w); height: var(--rd-vol-h); }
.rd-who-fig { width: var(--rd-fig);   height: var(--rd-fig); }
.rd-m-dot   { width: var(--rd-seal);  height: var(--rd-seal); }
.rd .rd-vol-a { height: 3.75rem; }
.rd-ch-state { font-size: var(--t-0); letter-spacing: .08em; opacity: .92; }
.rd-ch-ru    { font-size: var(--t-0); }
.rd-ti em    { font-size: var(--t-0); letter-spacing: .03em; }
.rd-ch-ti { font-size: var(--t-3); letter-spacing: .05em; }
}
@media (min-width: 1100px) {
#v-course .cs-letters { grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); }
.shelf        { grid-template-columns: repeat(auto-fill, minmax(11.75rem, 1fr)); }
.tiles        { grid-template-columns: repeat(auto-fit,  minmax(7rem, 1fr)); }
.plans        { grid-template-columns: repeat(auto-fit,  minmax(9.375rem, 1fr)); }
.glesson-card { min-height: 4rem; }
}
.exlibris .xl-cap,
.ticket .tk-head,
.book .lvl,
.guide .g-next,
.room-line { font-size: var(--t-00); }
@media (min-width: 1100px) {
#journey-patent .jp-cls { width: 5.375rem; height: 5.375rem; }
.jseal-wax              { width: 2.625rem; height: 2.625rem; }
.jseal:has(.seal-art)   { grid-template-columns: 3.25rem 1fr; }
.ach                    { width: 3rem;     height: 3rem; }
.ltile                  { min-width: 2.375rem; height: 2.75rem; }
#pop .close             { width: 2.5rem;   height: 2.5rem; }
.gx-stage .gx-pat-cls   { width: 2.875rem; height: 2.875rem; }
.stl-cls                { width: 2.75rem;  height: 2.75rem; }
}
@media (max-width: 560px) {
header .bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; padding: calc(6px + env(safe-area-inset-top, 0px)) 10px 0; }
header .bar .brand.wordmark { grid-row: 1; grid-column: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; margin: 0; padding-block: 4px; }
header .bar .brand.wordmark .wm-l { font-size: 11px; line-height: 1.1; letter-spacing: .12em; }
header .bar .brand.wordmark .wm-t { font-size: 11px; line-height: 1; }
header .bar > .spacer { display: none; }
header .bar .nav-ident { grid-row: 1; grid-column: 2; justify-content: flex-end; overflow: visible; mask-image: none; -webkit-mask-image: none; }
header .bar .nav-rooms { grid-row: 2; grid-column: 1 / -1; display: flex; flex-wrap: wrap; width: 100%; overflow: visible; mask-image: none; -webkit-mask-image: none; gap: 4px; border-top: 1px solid currentColor; padding-bottom: 6px; }
header .bar .nav-tabs button { min-height: 44px; padding: 8px 4px; letter-spacing: .025em; font-size: .875rem; }
header .bar .nav-rooms button { flex: 1 0 auto; min-width: 0; max-width: 100%; box-sizing: border-box; padding-inline: 8px; white-space: normal; overflow-wrap: anywhere; letter-spacing: 0; }
}
@media(max-width:360px){
header .bar .nav-rooms button{flex-basis:calc(33.333% - 4px);padding-inline:6px;font-size:.8125rem;}
#readbar .inner{padding-inline:8px;column-gap:4px;}
}
.gx-stage .gx-again {
background: color-mix(in srgb, var(--carbon) 5%, var(--gesso, transparent));
color: var(--ink-2);
border: 1px solid color-mix(in srgb, var(--carbon) 22%, transparent);
font-weight: 600;
}
[data-theme="dark"] .gx-stage .gx-again {
background: color-mix(in srgb, var(--carbon) 8%, transparent);
color: var(--ink-2);
}
.gx-stage .gx-top {
box-shadow: inset 0 -2px 0 var(--ink, var(--rule));
}
.gx-stage {
transition: background 1200ms var(--e-std, ease),
box-shadow 1100ms var(--e-std, ease);
}
.gx-stage[data-mood="toska"], .gx-stage[data-mood="sad"] { box-shadow: inset 0 0 22vmax rgba(26, 21, 12, .15); }
.gx-stage[data-mood="wary"] { box-shadow: inset 0 0 18vmax rgba(26, 21, 12, .10); }
.gx-stage[data-mood="happy"], .gx-stage[data-mood="proud"] { box-shadow: inset 0 0 16vmax rgba(191, 146, 42, .08); }
[data-theme="dark"] .gx-stage[data-mood="toska"],
[data-theme="dark"] .gx-stage[data-mood="sad"] { box-shadow: inset 0 0 22vmax rgba(0, 0, 0, .42); }
[data-theme="dark"] .gx-stage[data-mood="wary"] { box-shadow: inset 0 0 18vmax rgba(0, 0, 0, .3); }
[data-theme="dark"] .gx-stage[data-mood="happy"],
[data-theme="dark"] .gx-stage[data-mood="proud"] { box-shadow: inset 0 0 16vmax rgba(191, 146, 42, .04); }
.gx-stage:not([data-move="gather"]) {
background-image: linear-gradient(to top,
color-mix(in srgb, var(--ink, var(--carbon)) 5%, transparent) 0 46vh,
transparent 46vh);
}
[data-theme="dark"] .gx-stage:not([data-move="gather"]) {
background-image: linear-gradient(to top, rgba(0, 0, 0, .3) 0 46vh, transparent 46vh);
}
.gx-stage .gx-mid {
position: relative;
background-repeat: no-repeat;
background-position: 50% 62%;
}
.gx-stage .gx-mid > * { position: relative; z-index: 1; }
.gx-stage .gx-mid[data-kind="pairs"] {
background-image:
repeating-linear-gradient(to right,
color-mix(in srgb, var(--ink, var(--carbon)) 7%, transparent) 0 1px, transparent 1px 84px),
repeating-linear-gradient(to bottom,
color-mix(in srgb, var(--ink, var(--carbon)) 7%, transparent) 0 1px, transparent 1px 58px);
background-size: 100% 100%;
background-position: 0 0;
}
.gx-stage .gx-mid[data-kind="gap"],
.gx-stage .gx-mid[data-kind="form"],
.gx-stage .gx-mid[data-kind="dict"],
.gx-stage .gx-mid[data-kind="case"] {
background-image: repeating-linear-gradient(to bottom,
transparent 0 37px,
color-mix(in srgb, var(--ink, var(--carbon)) 6%, transparent) 37px 38px);
background-position: 0 8px;
}
.gx-stage .gx-mid[data-kind="listen"],
.gx-stage .gx-mid[data-kind="clip"],
.gx-stage .gx-mid[data-kind="hearline"] {
background-image: repeating-radial-gradient(circle at 6% 50%,
transparent 0 46px,
color-mix(in srgb, var(--ink, var(--carbon)) 6%, transparent) 46px 47px);
}
.gx-stage .gx-mid[data-kind="write"],
.gx-stage .gx-mid[data-kind="stress"] {
background-image: repeating-linear-gradient(to bottom,
transparent 0 25px,
color-mix(in srgb, var(--ink, var(--carbon)) 5%, transparent) 25px 26px);
}
.gx-stage .gx-mid[data-kind="order"] {
background-image: linear-gradient(to top,
color-mix(in srgb, var(--ink, var(--carbon)) 9%, transparent) 0 3px, transparent 3px);
background-position: 0 100%;
background-size: 100% 100%;
}
.gx-stage .gx-mid[data-kind="meaning"],
.gx-stage .gx-mid[data-kind="word"] {
background-image: linear-gradient(to bottom,
color-mix(in srgb, var(--ink, var(--carbon)) 8%, transparent) 0 2px, transparent 2px);
background-position: 0 0;
background-size: 100% 100%;
}
.gx-stage .gx-mid[data-kind="aspect"],
.gx-stage .gx-mid[data-kind="gender"],
.gx-stage .gx-mid[data-kind="gram"] {
background-image: linear-gradient(to right,
color-mix(in srgb, var(--ink, var(--carbon)) 10%, transparent) 0 2px,
transparent 2px 6px,
color-mix(in srgb, var(--ink, var(--carbon)) 6%, transparent) 6px 7px,
transparent 7px);
background-position: 0 0;
background-size: 100% 100%;
}
.gx-stage .gx-mid[data-kind="attend"],
.gx-stage .gx-mid[data-kind="authored"],
.gx-stage .gx-mid[data-kind="pending"] { background-image: none; }
.gx-stage .gx-mid[data-kind="attend"] .gx-opts,
.gx-stage .gx-mid[data-kind="authored"] .gx-opts { gap: 14px; }
.gx-stage .gx-opt { position: relative; }
@media (prefers-reduced-motion: no-preference) {
body:not(.motion-low) .gx-stage .gx-verdict.gx-ok {
animation: gx-glyph-strike calc(.16s * var(--motion, 1)) var(--e-std, ease) both;
}
}
.gx-stage {
background: color-mix(in srgb, var(--ink, var(--carbon))
min(26%, calc(14% + var(--tint, 0) * 1.4% + var(--heat, 0) * 2%)), var(--room));
}
.gx-stage[data-move="door"] {
background: color-mix(in srgb, var(--ink, var(--carbon))
min(22%, calc(12% + var(--tint, 0) * 1.2%)), var(--room));
}
.gx-stage[data-move="forge"] {
background: color-mix(in srgb, var(--ink, var(--carbon))
min(34%, calc(22% + var(--tint, 0) * 1.4%)), var(--room));
}
.gx-stage[data-move="gather"] {
background:
repeating-linear-gradient(transparent 0 34px,
color-mix(in srgb, var(--ink, var(--carbon)) 20%, transparent) 34px 35px),
linear-gradient(180deg,
color-mix(in srgb, var(--signal) 9%, transparent), transparent 40vh),
color-mix(in srgb, var(--ink, var(--carbon))
min(20%, calc(5% + var(--tint, 0) * 1.4%)), var(--room));
}
#v-course .cs-next {
display: grid;
grid-template-columns: 6rem minmax(0, 1fr) minmax(10rem, .38fr);
gap: clamp(20px, 2.5vw, 32px);
margin-block: var(--breath, 24px);
padding: clamp(20px, 2.5vw, 32px);
background: var(--paper);
border: 1px solid var(--carbon);
border-top: 4px solid var(--carbon);
box-shadow: none;
color: var(--carbon);
}
.cs-next-guide { align-self: start; padding-top: var(--seam, 12px); }
.cs-next-guide svg { display: block; width: 100%; height: auto; }
.cs-next-main { min-width: 0; }
#v-course .cs-next h2 { margin: .25em 0 .5em; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; text-transform: none; }
.cs-next-kicker { margin: 0; font-family: var(--sans); font-size: .75rem; font-weight: var(--fw-strong); letter-spacing: .06em; text-transform: uppercase; }
.cs-next-note { max-width: 52ch; margin: 0; line-height: 1.55; }
.cs-next-excerpt { margin-block: var(--seam, 12px); padding: var(--seam, 12px) 0; border-block: 1px solid var(--rule-room); }
.cs-next-excerpt blockquote { margin: .4em 0; font-size: var(--t-3); line-height: 1.5; overflow-wrap: anywhere; }
.cs-next-excerpt summary { width: fit-content; cursor: pointer; font-family: var(--sans); font-size: var(--t-0); text-decoration: underline; text-underline-offset: .2em; padding-block: .5em; }
.cs-next-excerpt details p { margin: .5em 0; }
.cs-next-letters { font-size: 1.6rem; letter-spacing: .1em; margin-block: var(--seam, 12px); }
.cs-next-actions { display: flex; align-items: center; gap: var(--seam, 12px); flex-wrap: wrap; margin-top: var(--seam, 12px); }
.cs-next-actions span { font: .875rem var(--sans); }
.cs-method { margin: 0; padding: 0 0 0 var(--gutter, 24px); border-left: 1px solid var(--rule-room); list-style: none; counter-reset: lesson-step; align-self: center; }
.cs-method li { counter-increment: lesson-step; position: relative; padding-left: 2rem; margin-block: var(--seam, 12px); }
.cs-method li::before { content: counter(lesson-step, decimal-leading-zero); position: absolute; left: 0; top: .25em; font: .75rem var(--sans); }
.cs-method b { display: block; font-size: var(--t-2); }
.cs-method span { display: block; margin-top: .3em; font: .875rem/1.45 var(--sans); }
#v-course .cs-next :focus-visible { outline: 2px solid var(--carbon); outline-offset: 4px; }
@media (max-width: 820px) {
#v-course .cs-next { grid-template-columns: 4rem minmax(0, 1fr); }
.cs-method { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--seam, 12px); border-left: 0; border-top: 1px solid var(--rule-room); padding: var(--seam, 12px) 0 0; }
}
@media (max-width: 560px) {
#v-course .cs-next { grid-template-columns: minmax(0, 1fr); position: relative; }
.cs-next-guide { position: absolute; right: var(--gutter, 24px); top: var(--gutter, 24px); width: 3rem; padding: 0; }
.cs-next-kicker, #v-course .cs-next h2 { padding-right: 3rem; }
.cs-next-excerpt .cs-next-kicker { padding-right: 0; }
.cs-next-actions .btn { width: 100%; min-height: 44px; }
.cs-method li { padding-left: 0; padding-top: 1.5rem; margin: 0; }
.cs-method b { font-size: var(--t-1); }
}
#v-course > .masthead .cs-lede { margin-block: .4em; }
#v-course > .masthead { padding-block: var(--seam, 12px); }
.gx-line-keep { display: flex; align-items: center; flex-wrap: wrap; gap: var(--seam, 12px); margin-top: var(--seam, 12px); }
.gx-line-keep [role="status"] { font: .875rem/1.45 var(--sans); }
.gx-line-keep .btn { min-height: 44px; }
.gx-ledger-more { border-block: 1px solid var(--rule-room); margin-block: var(--seam, 12px); }
.gx-ledger-more > summary { cursor: pointer; min-height: 44px; padding-block: var(--seam, 12px); font: .875rem var(--sans); }
.gx-ledger-more > summary:focus-visible { outline: 2px solid var(--carbon); outline-offset: 3px; }
.gx-earned-seals:empty { display: none; }
.gx-earned-seal { display: flex; align-items: center; gap: 12px; margin-block: 12px; }
.gx-earned-seal > span { flex: 0 0 48px; }
.gx-earned-seal svg { display: block; width: 48px; height: 48px; }
.gx-earned-seal p { margin: 0; font: .875rem/1.5 var(--sans); }
.gx-stage[data-place] {
--pl-hot:  #f6b257;
--pl-cool: #a8bdd8;
--pl-ink: var(--ink, var(--carbon));
--pl-paper: color-mix(in srgb, var(--room) 30%, #f4eddc);
--pl-floor: color-mix(in srgb, var(--pl-ink)
calc(4% + var(--pl-deep, .2) * 22% + var(--pl-night, 0) * 34%), var(--pl-paper));
--pl-lx: 50%; --pl-ly: 30%; --pl-warm: .5; --pl-reach: 100%;
--pl-deep: .2; --pl-night: 0; --pl-rise: 20%; --pl-gust: .2;
--pl-w: 0; --pl-hx: 0; --pl-hy: 0; --pl-lift: 0; --pl-press: 0;
--pl-skew: 0deg; --pl-drift: 26s; --pl-grain: .8; --pl-off: 50%;
--pl-lit: var(--pl-cool);
}
.gx-stage[data-place] {
background-color: var(--pl-floor) !important;
background-image: none !important;
box-shadow: none !important;
}
[data-theme="dark"] .gx-stage[data-place] {
--pl-floor: color-mix(in srgb, var(--pl-ink)
calc(6% + var(--pl-deep, .2) * 22% + var(--pl-night, 0) * 30%), var(--room));
background-color: var(--pl-floor) !important;
box-shadow: none !important;
}
.gx-stage .pl::before {
content: ''; position: absolute; inset: 0; display: block;
z-index: 5; pointer-events: none;
opacity: calc(.055 * var(--pl-grain, .8));
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] .gx-stage .pl::before { opacity: calc(.085 * var(--pl-grain, .8)); }

.gx-stage .pl {
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none;
  overflow: hidden;
  /* the ground is under the work and over nothing: the sheet, the rail and
     the companion all sit above it, and it never takes a click */
  contain: strict;
}
.gx-stage .pl > i {
  position: absolute; inset: 0;
  display: block;
}
/* ONLY WHAT MOVES MAY OVERHANG, and this cost the first cut of the sheet
   every dark corner it had. A blanket `inset: -12%` put each layer's outer
12% outside the visible box — which is exactly where a vignette keeps its
darkest ring and where a horizon keeps the ground. Measured on a contact
sheet of all sixteen rooms: the empty square (deep .62) and the dying light
(deep .80) rendered at the same value as a June afternoon, because both
their corner stops were off-screen. The two static layers now sit flush;
the two that are translated every frame overhang by more than they can ever
travel, so no edge is ever exposed. */
.gx-stage .pl-air  { inset: -16%; will-change: transform; }
.gx-stage .pl-lamp { inset: -10%; will-change: transform, opacity; }
.gx-stage .pl-deep { will-change: opacity; }
.gx-stage .pl-sky {
background:
linear-gradient(to top,
color-mix(in srgb, var(--pl-ink) 34%, transparent) 0%,
color-mix(in srgb, var(--pl-ink) 12%, transparent) calc(var(--pl-rise) * .9),
transparent calc(var(--pl-rise) * 2.4));
}
.gx-stage .pl-lamp { transition: opacity 1.6s var(--settle, ease); }
.gx-stage .pl-lamp::before,
.gx-stage .pl-lamp::after {
content: ''; position: absolute; inset: 0; display: block;
}
.gx-stage .pl-lamp::before {
background: radial-gradient(ellipse var(--pl-reach) calc(var(--pl-reach) * .78)
at var(--pl-lx) var(--pl-ly),
color-mix(in srgb, var(--pl-hot) 38%, transparent) 0%,
color-mix(in srgb, var(--pl-hot) 16%, transparent) 40%,
transparent 74%);
opacity: var(--pl-warm);
}
.gx-stage .pl-lamp::after {
background: radial-gradient(ellipse var(--pl-reach) calc(var(--pl-reach) * .78)
at var(--pl-lx) var(--pl-ly),
color-mix(in srgb, var(--pl-cool) 34%, transparent) 0%,
color-mix(in srgb, var(--pl-cool) 14%, transparent) 40%,
transparent 74%);
opacity: calc(1 - var(--pl-warm));
}
[data-theme="dark"] .gx-stage .pl-lamp::before { opacity: calc(var(--pl-warm) * .58); }
[data-theme="dark"] .gx-stage .pl-lamp::after { opacity: calc((1 - var(--pl-warm)) * .5); }
.gx-stage .pl-deep {
background: radial-gradient(ellipse 116% 96% at 50% 46%,
transparent 18%,
color-mix(in srgb, var(--pl-ink) calc(var(--pl-deep) * 52%), transparent) 58%,
color-mix(in srgb, var(--pl-ink) calc(var(--pl-deep) * 118%), transparent) 100%);
transition: opacity 2.2s var(--settle, ease);
}
[data-theme="dark"] .gx-stage .pl-deep {
background: radial-gradient(ellipse 116% 96% at 50% 46%,
transparent 20%,
color-mix(in srgb, #000 calc(var(--pl-deep) * 55%), transparent) 66%,
color-mix(in srgb, #000 calc(var(--pl-deep) * 96%), transparent) 100%);
}
.gx-stage .pl-air { will-change: transform; }
.gx-stage .pl-air::before,
.gx-stage .pl-air::after {
content: ''; position: absolute; inset: 0; display: block;
}
.gx-stage[data-air="still"] .pl-air::before,
.gx-stage[data-air="still"] .pl-air::after { content: none; }
.gx-stage[data-air="band"] .pl-air::before {
background: linear-gradient(to bottom, transparent 28%,
color-mix(in oklab, var(--pl-lit) 14%, transparent) 42%,
color-mix(in oklab, var(--pl-lit) 26%, transparent) 50%,
transparent 64%);
filter: blur(14px);
opacity: .72;
animation: pl-band var(--pl-drift) linear infinite;
}
.gx-stage[data-air="band"] .pl-air::after {
background: linear-gradient(to bottom, transparent 52%,
color-mix(in oklab, var(--pl-lit) 22%, transparent) 66%,
transparent 80%);
filter: blur(24px);
opacity: .5;
animation: pl-band calc(var(--pl-drift) * 1.7) linear infinite reverse;
}
@keyframes pl-band {
from { transform: translateX(-22%) scaleX(1.4); }
to   { transform: translateX(22%) scaleX(1.4); }
}
.gx-stage[data-air="scour"] .pl-air::before {
background: repeating-linear-gradient(var(--pl-skew),
transparent 0 58px,
color-mix(in oklab, var(--pl-lit) 30%, transparent) 58px 78px,
transparent 78px 168px);
filter: blur(9px);
opacity: calc(.4 + var(--pl-gust) * .5);
animation: pl-scour calc(var(--pl-drift) * .34) linear infinite;
}
.gx-stage[data-air="scour"] .pl-air::after {
background: repeating-linear-gradient(calc(var(--pl-skew) + 5deg),
transparent 0 132px,
color-mix(in oklab, var(--pl-lit) 14%, transparent) 132px 168px,
transparent 168px 360px);
filter: blur(18px);
opacity: .62;
animation: pl-scour calc(var(--pl-drift) * .62) linear infinite;
}
@keyframes pl-scour {
from { transform: translate3d(-14%, -6%, 0); }
to   { transform: translate3d(14%, 6%, 0); }
}
.gx-stage[data-air="flicker"] .pl-air::before {
background: radial-gradient(ellipse 80% 55% at var(--pl-lx) var(--pl-ly),
color-mix(in oklab, var(--pl-hot) 42%, transparent) 0%, transparent 70%);
filter: blur(16px);
animation: pl-flick calc(var(--pl-drift) * .13) ease-in-out infinite alternate;
}
.gx-stage[data-air="flicker"] .pl-air::after {
background: radial-gradient(ellipse 55% 40% at var(--pl-lx) var(--pl-ly),
color-mix(in oklab, var(--pl-hot) 32%, transparent) 0%, transparent 62%);
filter: blur(26px);
animation: pl-flick calc(var(--pl-drift) * .085) ease-in-out infinite alternate-reverse;
}
@keyframes pl-flick {
from { opacity: .58; transform: scale(.97); }
to   { opacity: 1;   transform: scale(1.04); }
}
.gx-stage[data-air="pool"] .pl-air::before {
background: radial-gradient(ellipse 40% 34% at var(--pl-lx) var(--pl-ly),
color-mix(in oklab, var(--pl-hot) 40%, transparent) 0%, transparent 66%);
filter: blur(14px);
animation: pl-breathe 4s ease-in-out infinite alternate;
}
.gx-stage[data-air="pool"] .pl-air::after { content: none; }
@keyframes pl-breathe {
from { opacity: .74; transform: scale(.99); }
to   { opacity: 1;   transform: scale(1.02); }
}
.gx-stage[data-air="dapple"] .pl-air::before {
background:
radial-gradient(ellipse 14% 14% at 22% 18%, color-mix(in oklab, var(--pl-lit) 23%, transparent) 0 40%, transparent 70%),
radial-gradient(ellipse 11% 11% at 63% 12%, color-mix(in oklab, var(--pl-lit) 14%, transparent) 0 40%, transparent 70%),
radial-gradient(ellipse 17% 17% at 84% 30%, color-mix(in oklab, var(--pl-lit) 23%, transparent) 0 40%, transparent 70%),
radial-gradient(ellipse  9%  9% at 41% 34%, color-mix(in oklab, var(--pl-lit) 22%, transparent) 0 40%, transparent 70%);
filter: blur(13px);
opacity: .9;
transform-origin: 50% -20%;
animation: pl-rock calc(var(--pl-drift) * .28) ease-in-out infinite alternate;
}
.gx-stage[data-air="dapple"] .pl-air::after {
background:
radial-gradient(ellipse 20% 20% at 12% 46%, color-mix(in oklab, var(--pl-ink) 12%, transparent) 0 40%, transparent 70%),
radial-gradient(ellipse 15% 15% at 72% 54%, color-mix(in oklab, var(--pl-ink) 10%, transparent) 0 40%, transparent 70%);
filter: blur(22px);
opacity: .8;
transform-origin: 50% -30%;
animation: pl-rock calc(var(--pl-drift) * .44) ease-in-out infinite alternate-reverse;
}
@keyframes pl-rock {
from { transform: rotate(-1.1deg) translateX(-1.5%); }
to   { transform: rotate(1.1deg) translateX(1.5%); }
}
.gx-stage[data-air="pane"] .pl-air::before {
background:
linear-gradient(90deg, color-mix(in oklab, var(--pl-ink) 62%, transparent) 0 3px, transparent 3px 100%) 0 0 / 34% 100%,
linear-gradient(color-mix(in oklab, var(--pl-ink) 62%, transparent) 0 3px, transparent 3px 100%) 0 0 / 100% 44%;
opacity: .55;
filter: blur(1px);
animation: none;
}
.gx-stage[data-air="pane"] .pl-air::after {
background: repeating-linear-gradient(179deg,
transparent 0 14px,
color-mix(in oklab, var(--pl-lit) 36%, transparent) 14px 17px,
transparent 17px 46px);
filter: blur(3px);
opacity: .72;
animation: pl-run calc(var(--pl-drift) * .16) linear infinite;
}
@keyframes pl-run {
from { transform: translateY(-24%); }
to   { transform: translateY(24%); }
}
.gx-stage[data-air="shaft"] .pl-air::before {
background: linear-gradient(calc(74deg + var(--pl-skew)),
transparent 30%,
color-mix(in oklab, var(--pl-lit) 22%, transparent) 44%,
color-mix(in oklab, var(--pl-lit) 26%, transparent) 50%,
transparent 64%);
filter: blur(10px);
opacity: .85;
animation: pl-cross calc(var(--pl-drift) * 9) linear infinite alternate;
}
.gx-stage[data-air="shaft"] .pl-air::after {
background: linear-gradient(calc(74deg + var(--pl-skew)),
transparent 46%,
color-mix(in oklab, var(--pl-lit) 13%, transparent) 56%,
transparent 68%);
filter: blur(22px);
opacity: .6;
animation: pl-cross calc(var(--pl-drift) * 13) linear infinite alternate-reverse;
}
@keyframes pl-cross {
from { transform: translateX(-11%); }
to   { transform: translateX(11%); }
}
.gx-stage[data-air="bank"] .pl-air::before {
background: radial-gradient(ellipse 70% 46% at 26% 58%,
color-mix(in oklab, var(--room) 82%, var(--pl-lit)) 0%, transparent 72%);
filter: blur(22px);
animation: pl-bank calc(var(--pl-drift) * 1.4) ease-in-out infinite alternate;
}
.gx-stage[data-air="bank"] .pl-air::after {
background: radial-gradient(ellipse 60% 40% at 76% 40%,
color-mix(in oklab, var(--room) 76%, var(--pl-lit)) 0%, transparent 70%);
filter: blur(30px);
animation: pl-bank calc(var(--pl-drift) * 2.1) ease-in-out infinite alternate-reverse;
}
[data-theme="dark"] .gx-stage[data-air="bank"] .pl-air::before,
[data-theme="dark"] .gx-stage[data-air="bank"] .pl-air::after { opacity: .5; }
@keyframes pl-bank {
from { transform: translate3d(-9%, 2%, 0) scale(1.05); opacity: .62; }
to   { transform: translate3d(9%, -2%, 0) scale(1.14); opacity: 1; }
}
.gx-stage[data-place][data-move="sprint"], .gx-stage[data-place][data-gram] {
background-image:
linear-gradient(90deg, color-mix(in oklab, var(--pl-ink) 8%, transparent) 1px, transparent 1px),
linear-gradient(color-mix(in oklab, var(--pl-ink) 8%, transparent) 1px, transparent 1px) !important;
background-size: 26px 26px !important;
}
.gx-stage .pl::after {
content: ''; position: absolute; inset: 0; display: block;
pointer-events: none;
background: radial-gradient(ellipse 130% 110% at 50% 50%,
transparent 30%, var(--pl-mood, transparent) 100%);
transition: background 1400ms var(--settle, ease);
}
.gx-stage[data-mood="toska"], .gx-stage[data-mood="sad"] { --pl-mood: rgba(26, 21, 12, .15); }
.gx-stage[data-mood="wary"] { --pl-mood: rgba(26, 21, 12, .10); }
.gx-stage[data-mood="happy"], .gx-stage[data-mood="proud"] { --pl-mood: rgba(191, 146, 42, .08); }
[data-theme="dark"] .gx-stage[data-mood="toska"],
[data-theme="dark"] .gx-stage[data-mood="sad"] { --pl-mood: rgba(0, 0, 0, .30); }
[data-theme="dark"] .gx-stage[data-mood="wary"] { --pl-mood: rgba(0, 0, 0, .22); }
.gx-stage .gx {
--gx-lean: 0deg; --gx-dx: 0px; --gx-dy: 0px;
--gx-shx: 8px; --gx-shy: 8px; --gx-shb: 1;
position: relative;
z-index: 1;
}
.gx-stage:not([data-gram]) .gx:not(.gx-done):not(.gx-sealed) {
transform: none;
box-shadow: 19px 19px 30px -14px color-mix(in oklab, var(--pl-ink) 46%, transparent);
transition: box-shadow 240ms var(--settle, ease);
}
@media (prefers-reduced-motion: reduce) {
.gx-stage:not([data-gram]) .gx:not(.gx-done):not(.gx-sealed) { transform: none; }
}
.gx-stage:not([data-gram]) .gx:not(.gx-done) {
background-image:
radial-gradient(ellipse 150% 130%
at calc(var(--pl-lx, 50%) + var(--pl-hx, 0) * 90%)
calc(var(--pl-ly, 30%) + var(--pl-hy, 0) * 70%),
rgba(255, 253, 245, .62) 0%,
rgba(255, 253, 245, .18) 34%,
transparent 62%),
radial-gradient(ellipse 150% 130%
at calc(var(--pl-lx, 50%) + var(--pl-hx, 0) * 90%)
calc(var(--pl-ly, 30%) + var(--pl-hy, 0) * 70%),
color-mix(in srgb, var(--pl-lit) 6%, transparent) 0%,
transparent 58%),
radial-gradient(ellipse 145% 125%
at calc(100% - var(--pl-lx, 50%)) calc(100% - var(--pl-ly, 30%)),
color-mix(in srgb, var(--pl-ink) 11%, transparent) 0%,
transparent 60%);
}
[data-theme="dark"] .gx-stage:not([data-gram]) .gx:not(.gx-done) {
background-image:
radial-gradient(ellipse 150% 130%
at calc(var(--pl-lx, 50%) + var(--pl-hx, 0) * 90%)
calc(var(--pl-ly, 30%) + var(--pl-hy, 0) * 70%),
color-mix(in srgb, var(--pl-lit) 11%, transparent) 0%,
transparent 64%);
}
.gx-stage:not([data-gram]) .gx:not(.gx-done):not(.gx-sealed) {
}
.gx-stage .pl { animation: pl-arrive 1800ms var(--settle, ease) both; }
@keyframes pl-arrive { from { opacity: 0; } to { opacity: 1; } }
.gx-stage[data-move="door"] .pl-sky { filter: brightness(1.06); }
.gx-stage[data-place] {
--play: color-mix(in oklab, var(--ink, #244177) 62%, #14120f);
--play-deep: color-mix(in oklab, var(--ink, #17213a) 44%, #0d0c0a);
--frame: color-mix(in oklab, var(--ink, #17213a) 55%, #0d0c0a);
--play-tint: color-mix(in srgb, var(--ink, #244177) 11%, #faf6ec);
}
[data-theme="dark"] .gx-stage[data-place] {
--play-tint: color-mix(in srgb, var(--ink, #244177) 26%, #14120f);
--frame: color-mix(in oklab, var(--ink, var(--carbon)) 45%, var(--carbon));
}
.gx-stage[data-place] .gx-top {
border-bottom-color: color-mix(in oklab, var(--ink, var(--carbon)) 40%, #14120f) !important;
}
.gx-stage[data-place] .gx { border-color: var(--frame) !important; }
.gx-stage[data-place] .gx-line.gx-study { border-color: var(--frame) !important; }
.gx-stage[data-place] :is(.gx-rail, .gx-rail i, .gx-chbar, .gx-chbar i, .gx-runn) {
border-color: color-mix(in oklab, var(--ink, #17213a) 42%, #9a948a) !important;
}
.gx-stage[data-place] .gx-en { color: color-mix(in srgb, var(--ink, #46536f) 58%, #55524c); }
[data-theme="dark"] .gx-stage[data-place] .gx-en {
color: color-mix(in oklab, var(--ink, var(--steel)) 45%, var(--carbon));
}
.gx-stage .gx-front {
display: flex; align-items: center; gap: 16px;
margin: 4px 0 -8px;
}
.gx-stage .gx-front i {
flex: 1; height: 1px;
background: color-mix(in srgb, var(--ink, var(--carbon)) 32%, transparent);
}
.gx-stage .gx-front b {
font-weight: 400; font-size: 2rem; line-height: 1;
color: var(--ink, var(--carbon));
}
.gx-stage[data-move="door"] .gx-mid[data-kind="gram"] .gx-ask { justify-content: center; }
.gx-stage[data-move="door"] .gx-mid[data-kind="gram"] .gx-direction { text-align: center; }
.gx-stage .gx-mid[data-beat="ctx"],
.gx-stage .gx-mid[data-beat="rwl"] {
display: flex; flex-direction: column;
}
.gx-stage .gx-mid[data-beat="ctx"] .gx-ask,
.gx-stage .gx-mid[data-beat="rwl"] .gx-ask { justify-content: center; }
.gx-stage .gx-mid[data-beat="ctx"] .gx-direction,
.gx-stage .gx-mid[data-beat="rwl"] .gx-direction { text-align: center; }
.gx-stage .gx-mid[data-beat="ctx"] .gx-body,
.gx-stage .gx-mid[data-beat="rwl"] .gx-body { margin-block: auto; }
.gx-stage .gx-mid[data-beat="ctx"] .gx-after,
.gx-stage .gx-mid[data-beat="rwl"] .gx-after { margin-top: auto; }
.gx-stage .gx-mid[data-beat="ctx"] .gx-ask,
.gx-stage .gx-mid[data-beat="rwl"] .gx-ask { flex-wrap: wrap; }
.gx-stage .gx-mid[data-beat="ctx"] .gx-rwl,
.gx-stage .gx-mid[data-beat="rwl"] .gx-rwl {
max-width: 62ch;
margin-inline: auto;
padding-block: 10px;
}
.gx-stage .gx-mid[data-beat="ctx"] .gx-rwl-ru,
.gx-stage .gx-mid[data-beat="rwl"] .gx-rwl-ru {
font-family: var(--serif, Georgia, serif);
font-size: clamp(22px, 2.9vw, 30px);
line-height: 1.55;
}
.gx-stage .gx-direction {
font-family: var(--serif, Georgia, serif);
font-style: italic;
font-size: .95em;
line-height: 1.5;
letter-spacing: .012em;
color: color-mix(in oklab, var(--ink, var(--carbon)) 85%, var(--carbon));
margin: -12px 0 4px;
}
body.motion-low .gx-stage .pl-air::before,
body.motion-low .gx-stage .pl-air::after,
body.motion-low .gx-stage .pl { animation: none !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
.gx-stage .pl-air::before,
.gx-stage .pl-air::after,
.gx-stage .pl { animation: none !important; opacity: 1 !important; }
}
.gx-stage.pl-hold .pl-air::before,
.gx-stage.pl-hold .pl-air::after { animation-play-state: paused; }
.gx-stage { --gx-w: min(880px, 96vw); }
@media (min-width: 1600px) {
.gx-stage { font-size: 1.06rem; --gx-w: min(1000px, 92vw); }
.gx-stage .gx { width: min(1000px, 92vw); }
}
@media (min-width: 2000px) {
.gx-stage { font-size: var(--t-2); --gx-w: min(1120px, 88vw); }
.gx-stage .gx { width: min(1120px, 88vw); }
}
@media (min-width: 2400px) {
.gx-stage { font-size: var(--t-3); --gx-w: min(1220px, 84vw); }
.gx-stage .gx { width: min(1220px, 84vw); }
}
.gx-stage > .gx-mate {
right: max(14px, calc((100vw - var(--gx-w)) / 4 - 56px));
}
.gx-stage[data-move="forge"] > .gx-mate {
width: min(clamp(110px, 15vw, 180px), calc((100vw - var(--gx-w)) / 2 - 20px));
height: min(clamp(110px, 15vw, 180px), calc((100vw - var(--gx-w)) / 2 - 20px));
}
@media (max-width: 1150px) {
.gx-stage:not([data-gram]) > .gx-mate { display: none; }
}
.gx-stage:not([data-gram]) .gx-mid:not([data-rare]) {
min-height: 21em;
display: flex;
flex-direction: column;
}
.gx-stage:not([data-gram]) .gx-mid:not([data-rare]) > .gx-body { margin-top: auto; }
@media (max-width: 700px) {
.gx-stage:not([data-gram]) .gx-mid:not([data-rare]) { min-height: 0; display: block; }
}
@media (min-width: 1600px) {
.gx-stage .gx-opt,
.gx-stage .gx-body button { font-size: clamp(20px, 1.28em, 34px); }
.gx-stage .gx-ask   { font-size: 1.18em; }
.gx-stage .gx-again { font-size: .78em; }
.gx-stage .gx-count,
.gx-stage .gx-topic em { font-size: .82em; }
.gx-stage .gx-head,
.gx-stage .gx-word { font-size: clamp(28px, 2.1em, 62px); }
}
.gx-stage .gx-blank {
color: color-mix(in srgb, var(--ink, var(--carbon)) 62%, transparent);
border-bottom: 2px solid color-mix(in srgb, var(--ink, var(--carbon)) 48%, transparent);
}
[data-theme="dark"] .gx-stage .gx-blank {
color: color-mix(in srgb, var(--carbon) 55%, transparent);
border-bottom-color: color-mix(in srgb, var(--carbon) 42%, transparent);
}
.gx-stage .gx-blank.gx-filled {
color: var(--signal-ink);
border-bottom-color: var(--signal);
}
.gx-stage .gx-mid[data-kind="word"] .gx-opts,
.gx-stage .gx-mid[data-kind="listen"] .gx-opts {
grid-template-columns: repeat(auto-fit, minmax(9.5em, 1fr));
}
.gx-stage .gx-mid[data-kind="meaning"] .gx-opts {
grid-template-columns: 1fr;
gap: 8px;
}
.gx-stage .gx-mid[data-kind="meaning"] .gx-opt { text-align: left; }
.gx-stage .gx-mid[data-kind="gap"] .gx-opts {
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
grid-template-columns: none;
}
.gx-stage .gx-mid[data-kind="gap"] .gx-opt { flex: 0 1 auto; padding-inline: 1.4em; }
.gx-stage .gx-mid[data-kind="form"] .gx-opts {
display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
grid-template-columns: none;
}
.gx-stage .gx-mid[data-kind="form"] .gx-opt { flex: 1 1 7em; max-width: 14em; }
.gx-stage .gx-mid[data-kind="stress"] .gx-opts {
display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
grid-template-columns: none;
}
@media (max-width: 620px) {
.gx-stage .gx-mid[data-kind="word"] .gx-opts,
.gx-stage .gx-mid[data-kind="listen"] .gx-opts,
.gx-stage .gx-mid[data-kind="gap"] .gx-opts,
.gx-stage .gx-mid[data-kind="form"] .gx-opts,
.gx-stage .gx-mid[data-kind="stress"] .gx-opts {
display: grid; grid-template-columns: 1fr;
}
}
#v-review.show, #v-words.show, #v-journey.show, #v-course.show { background: none; }
#v-review.show::before, #v-words.show::before,
#v-journey.show::before, #v-course.show::before { content: none; }
#v-home.desk-focused > .masthead { box-shadow: none; }
#v-home.desk-focused #room-name { font-size: clamp(32px, 4vw, 48px); max-width: 14ch; line-height: .98; }
#v-home.desk-focused #almanac { display: none; }
#v-home.desk-focused .desk-cameos { display: none; }
#desk-focus, #desk-account { max-width: var(--desk-w); margin: var(--breath) auto; }
#desk-focus { margin-bottom: 0; }
#desk-details { margin-block: 0; }
#desk-account:empty { display: none; }
.desk-small-record { display: flex; flex-wrap: wrap; gap: var(--seam); margin-bottom: var(--seam); font: .875rem var(--sans); }
.desk-small-record span { padding-right: var(--seam); border-right: 1px solid var(--rule-room); }
.desk-small-record span:last-child { border: 0; }
.discovery { display: grid; grid-template-columns: 1fr auto; gap: var(--seam); text-align: left; padding: var(--gutter); color: var(--carbon); background: var(--paper); border: 1px solid var(--rule-room); border-bottom: 3px solid var(--carbon); cursor: pointer; }
.discovery strong { font: 1.25rem/1.2 var(--bill); grid-column: 1 / -1; }
.discovery > span:not(.discovery-icon) { font: .875rem/1.5 var(--sans); }
.discovery > i { align-self: end; font-style: normal; }
.discovery:hover { background: var(--paper-2); }
#desk-details { border: 0; border-top: 1px solid var(--rule); }
#desk-details > summary, .course-explorer > summary { min-height: 48px; padding: 12px 0; cursor: pointer; font: var(--fw-strong) var(--type-body)/1.5 var(--sans); }
#desk-details > summary span, .course-explorer > summary span { display: block; font: var(--fw-text) var(--type-meta)/1.5 var(--sans); color: var(--steel); margin: .2em 0 0 1.2em; }
#desk-details > .desk-sect, #desk-details > .desk-spread { margin: var(--breath) 0; }
#desk-details #desk-hud, #desk-details #desk-spread, #desk-details #road-sect { display: none; }
#desk-details #standing-line { display: none !important; }
#desk-account .words-keep { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--seam); border: 1px solid var(--rule-room); padding: var(--seam) var(--gutter); }
#desk-account .words-keep > p { margin: 0; }
#desk-account .wk-row { flex-shrink: 0; }
.course-trail { max-width: 760px; margin: var(--breath) auto; }
.trail-heading { max-width: 48ch; margin-bottom: var(--breath); }
.trail-heading h2 { font: clamp(1.6rem, 3vw, 2.4rem)/1.1 var(--bill); margin: .3em 0; }
.trail-heading p, .trail-destination p { font: 1rem/1.5 var(--sans); }
.learning-trail { list-style: none; padding: 0; margin: 0; }
.trail-stop { position: relative; padding: 0 0 var(--breath); margin-inline: var(--gutter) 0; }
.trail-stop:nth-child(even) { margin-inline: calc(var(--gutter) * 2) 0; }
.trail-stop:not(:last-child)::after { content: ''; position: absolute; top: 78px; left: 36px; height: var(--breath); border-left: 2px dashed var(--rule-room); transform: rotate(-25deg); transform-origin: top; }
.trail-stop:nth-child(even)::after { transform: rotate(25deg); }
.trail-go { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: var(--seam); align-items: center; width: 100%; padding: var(--seam); border: 1px solid transparent; background: transparent; text-align: left; color: var(--carbon); cursor: pointer; }
.trail-medallion { width: 72px; height: 72px; display: grid; place-items: center; border: 2px solid var(--carbon); border-radius: 50%; background: var(--paper); box-shadow: 0 2px 0 var(--rule-room); font: 1.8rem var(--serif); }
.trail-medallion svg { width: 42px; height: 42px; }
.trail-copy { display: grid; gap: .25rem; font: var(--type-meta)/1.4 var(--sans); }
.trail-copy strong { font: 1.3rem/1.2 var(--bill); }
.trail-label { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.trail-current .trail-go { background: var(--paper); border-color: var(--carbon); box-shadow: none; }
.trail-current .trail-medallion { border-width: 4px; outline: 1px solid var(--carbon); outline-offset: 5px; }
.trail-done .trail-medallion { border-style: double; border-width: 5px; }
.trail-go:hover .trail-medallion { transform: translateY(-2px); }
.trail-go:focus-visible, .discovery:focus-visible { outline: 3px solid var(--carbon); outline-offset: 4px; }
.trail-arrow { font-size: var(--t-3); }
.trail-arrow svg, .discovery > i svg { width: 24px; height: 24px; }
.trail-destination > span svg, .word-empty > span svg { width: 48px; height: 48px; }
.trail-fold { margin-block: var(--seam); }
.trail-fold > summary { padding: var(--seam); min-height: 44px; font: var(--type-control)/1.4 var(--sans); cursor: pointer; white-space:normal; }
.trail-destination { padding: var(--gutter); margin-top: var(--breath); border: 1px solid var(--carbon); background: var(--paper); text-align: center; }
.trail-destination > span { display: block; font: 2.4rem var(--serif); margin-bottom: var(--seam); }
.trail-destination > strong { font: 1.5rem var(--bill); }
.course-explorer { border-block: 1px solid var(--rule-room); margin-block: var(--band); }
.course-explorer .syl { margin-top: var(--breath); }
#v-course .cs-wing-books .rd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); padding-left: 0; }
#v-course .cs-wing-books .rd::before { display: none; }
#v-course .cs-wing-books .rd > li:not(.rd-book) { grid-column: 1 / -1; }
#v-course .cs-wing-books .rd-book { margin: 0; border: 1px solid var(--rule-room); border-top: 5px solid var(--ink, var(--carbon)); background: var(--paper); padding: var(--seam); min-width: 0; }
#v-course .cs-wing-books .rd-book.rd-open { grid-column: 1 / -1; }
#v-course .cs-wing-books .rd-book .rd-hit { padding: var(--seam); }
#v-course .cs-wing-books .rd-book .rd-next { display: none; }
#v-course .cs-wing-books .rd-book .rd-hit { display: grid; grid-template-columns: 84px minmax(0,1fr); align-items: center; gap: var(--seam); width: 100%; min-height: 200px; }
.rd-volume-art { position: relative; display: grid; place-items: center; width: 76px; min-height: 112px; padding: var(--seam); color: var(--ink,var(--carbon)); background: var(--paper); border: 1px solid currentColor; border-left: 5px double currentColor; border-radius: 0 10px 2px 0; box-shadow: 3px 3px 0 var(--rule-room); }
.rd-volume-art svg { width: 48px; height: 48px; }
.rd-volume-art b { font: .75rem var(--sans); margin-top: var(--seam); }
.rd-kind { display: inline-block; font: .75rem var(--sans); padding-bottom: .5em; }
.rd-ask-orn svg { width: 32px; height: 32px; }
#v-course .cs-wing-books .rd-book .rd-body { min-width: 0; }
#v-review.practice-lobby #rev-card, #v-review.practice-lobby #rev-btns,
#v-review.practice-lobby #rev-attr, #v-review.practice-lobby #rev-note,
#v-review.practice-lobby #sess-ring, #v-review.practice-lobby #review-guide,
#v-review.practice-lobby #btn-rev-exit { display: none; }
#v-review.practice-lobby #practice-position, #practice-position:empty { display: none; }
#practice-position { text-align: center; font: .875rem var(--sans); margin-block: var(--seam); }
.practice-instruction { font: var(--type-body)/1.5 var(--sans); margin-block: var(--seam); }
#practice-welcome { max-width: 640px; margin: var(--breath) auto; }
.practice-invitation { background: var(--paper); border: 1px solid var(--carbon); border-top: 4px solid var(--carbon); box-shadow: none; padding: var(--gutter); text-align: center; }
.practice-portrait { width: 72px; margin: 0 auto var(--seam); }
.practice-portrait svg { width: 100%; height: auto; }
.practice-invitation h2 { font: clamp(1.7rem, 3vw, 2.4rem)/1.1 var(--bill); margin: .5em 0; }
.practice-invitation p { max-width: 46ch; margin: var(--seam) auto; font: 1rem/1.6 var(--sans); }
.practice-start-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--seam); margin-top: var(--breath); }
.practice-word-peek { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--seam); }
.practice-word-peek span { border-bottom: 1px solid var(--rule-room); padding: .4em; font: 1.125rem var(--serif); }
.practice-invitation .practice-promise { font-size: var(--t-0); }
.practice-mode-label { text-align: center; font: .875rem var(--sans); margin-block: var(--seam); }
#v-review.practice-empty .rev-dial, #v-review.practice-empty .practice-mode-label { display: none; }
.trail-heading h2, .practice-invitation h2, .discovery strong, .trail-copy strong, .trail-destination > strong { font-weight: 700; text-transform: none; }
#v-review .rev-dial { max-width: 640px; margin-inline: auto; }
#v-review .rev-dial button { min-height: 44px; white-space: normal; }
#v-review .rev-dial button[aria-pressed="true"] { outline: 2px solid var(--carbon); outline-offset: 2px; }
#v-review #rev-note:empty { display: none; }
#v-review.practice-finished:not(.practice-lobby) #review-guide,
#v-review.practice-finished:not(.practice-lobby) .rev-dial,
#v-review.practice-finished:not(.practice-lobby) .practice-mode-label { display: none; }
.rev-up-next { margin-block: var(--seam); text-align: left; }
.rev-up-next summary { cursor: pointer; padding-block: var(--seam); }
.rev-up-next .ru-line { font-family: var(--serif); line-height: 1.6; }
#v-words, #v-library.view { max-width: calc(var(--page-w) + 2.5rem); margin-inline: auto; }
#v-words .room-head { text-align: left; }
#v-words .filters { flex-wrap: wrap; }
#v-words #wsearch { min-height: 44px; flex: 1 1 220px; }
#v-words #wordlist > li:not(.wl-cap):not(.word-empty) { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(0, 1fr) auto auto; gap: var(--seam); align-items: center; padding: var(--seam); }
#v-words .wf { min-height: 44px; padding: 0; text-align: left; border: 0; background: transparent; cursor: pointer; color: inherit; font: var(--type-prompt)/1.4 var(--serif); min-width:0; overflow-wrap:anywhere; }
#v-words .word-revisit { min-height: 44px; padding: .5em .25em; border: 0; background: none; color: var(--carbon); font: var(--fw-strong) var(--type-meta)/1.4 var(--sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; cursor: pointer; white-space:normal; }
#v-words .word-revisit:hover { text-decoration-thickness: 2px; }
#v-words .word-empty { display: block; text-align: center; padding: var(--gutter); border: 1px solid var(--rule-room); background: var(--paper); }
.word-empty > span { font-size: 2rem; }
.word-empty p { max-width: 44ch; margin: var(--seam) auto; }
@media (max-width: 820px) {
#desk-account .words-keep { display: block; }
#desk-account .wk-row { margin-top: var(--seam); }
.discovery { padding: var(--seam); }
#v-course .cs-wing-books .rd { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
#v-home.desk-focused #room-name { font-size: 32px; max-width: none; }
.discovery { grid-template-columns: 36px minmax(0, 1fr) auto; gap: .3rem var(--seam); }
.discovery strong { grid-column: 2; }
.discovery > span:not(.discovery-icon) { grid-column: 2; }
.discovery > i { grid-column: 3; grid-row: 1 / 3; align-self: center; }
.trail-stop { margin-inline: 0; }
.trail-stop:nth-child(even) { margin-inline: var(--seam) 0; }
.trail-go { grid-template-columns: 56px minmax(0, 1fr) auto; padding: var(--seam) .3rem; }
.trail-medallion { width: 48px; height: 48px; font-size: 1.4rem; }
.trail-medallion svg { width: 30px; height: 30px; }
.trail-stop:not(:last-child)::after { top: 68px; left: 27px; }
.trail-copy strong { font-size: var(--t-2); }
.practice-start-actions { flex-direction: column; }
#v-words #wordlist > li:not(.wl-cap):not(.word-empty) { grid-template-columns: minmax(0, 1fr) auto; }
#v-words .wg { grid-column: 1; grid-row: 2; }
#v-words .word-revisit { grid-column: 2; grid-row: 1 / 3; }
#v-words .warmbar { display: none; }
}
html[data-motion="low"] .trail-go:hover .trail-medallion { transform: none; }
#v-course .cs-wt-dev svg { width: 28px; height: 28px; }
#v-course .room-head:not([data-orn])::after { display: none; }
#v-home.arrival-active > :not(#arrival-front) { display: none !important; }
#arrival-front { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--band) var(--gutter); align-items: center; max-width: 1120px; margin: var(--breath) auto; color: var(--carbon); }
.arrival-eyebrow, .arrival-page-label { font: .75rem/1.5 var(--sans); text-transform: uppercase; letter-spacing: .12em; }
#arrival-title { font: 700 clamp(2.5rem, 4.5vw, 4.5rem)/1.04 var(--bill); letter-spacing: -.02em; text-transform: none; margin: var(--seam) 0; }
#arrival-title em { display: inline-block; font-family: var(--serif); font-size: .78em; font-weight: 400; line-height: 1.15; }
.arrival-lede { max-width: 39ch; font: 1.125rem/1.6 var(--sans); margin-block: var(--breath); }
.arrival-choices { display: grid; gap: var(--seam); }
.arrival-choice { display: grid; grid-template-columns: 32px minmax(0,1fr) 24px; gap: var(--seam); align-items: center; padding: var(--seam); min-height: 76px; border: 1px solid var(--carbon); color: var(--carbon); background: var(--paper); text-align: left; cursor: pointer; box-shadow: none; }
.arrival-choice svg { width: 100%; height: 30px; }
.arrival-choice b, .arrival-choice small { display: block; }
.arrival-choice b { font: 600 1.125rem/1.3 var(--sans); }
.arrival-choice small { font: .875rem/1.5 var(--sans); margin-top: .2em; }
.arrival-primary { background: var(--carbon); color: var(--paper); }
.arrival-choice:hover { box-shadow: none; }
.arrival-free, .arrival-rooms { font: .875rem/1.5 var(--sans); margin-top: var(--seam); }
.arrival-rooms a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.arrival-book { position: relative; isolation: isolate; background: var(--paper); border: 1px solid var(--carbon); border-left: 10px double var(--carbon); border-radius: 2px 28px 28px 2px; padding: var(--gutter); padding-top: var(--breath); min-height: 390px; box-shadow: 6px 6px 0 var(--paper-2), 7px 7px 0 var(--carbon), 12px 12px 0 var(--paper-2), 13px 13px 0 var(--carbon); transform: rotate(2deg); }
.arrival-book-ribbon { position: absolute; right: 30px; top: -1px; width: 30px; height: 52px; background: var(--carbon); clip-path: polygon(0 0,100% 0,100% 100%,50% 77%,0 100%); }
.arrival-resident { width: 100px; height: 100px; margin-bottom: var(--seam); }
.arrival-resident svg { width: 100%; height: 100%; }
.arrival-book blockquote { margin: var(--breath) 0; font: clamp(1.7rem, 3vw, 2.6rem)/1.3 var(--serif); }
.arrival-reveal { display: flex; align-items: center; gap: var(--seam); min-height: 44px; padding: .4em 0; color: var(--carbon); background: transparent; border: 0; border-bottom: 1px solid var(--carbon); cursor: pointer; font: .875rem var(--sans); }
.arrival-reveal svg { width: 24px; height: 24px; }
#arrival-meaning { margin-block: var(--seam); border-left: 3px solid var(--carbon); padding-left: var(--seam); }
#arrival-meaning p { font: 1.25rem/1.5 var(--serif); margin: 0; }
#arrival-meaning span { display: block; font: .875rem/1.5 var(--sans); margin-top: var(--seam); }
.arrival-page-foot { display: flex; align-items: center; gap: var(--seam); margin-top: var(--breath); font: .75rem/1.5 var(--sans); }
.arrival-page-foot svg { width: 40px; height: 40px; }
.arrival-method { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--gutter); list-style: none; margin: 0; padding: var(--gutter) 0; border-top: 1px solid var(--rule-room); }
.arrival-method li { display: flex; align-items: start; gap: var(--seam); }
.arrival-method svg { width: 36px; height: 36px; flex-shrink: 0; }
.arrival-method strong, .arrival-method span { display: block; }
.arrival-method strong { font: 600 1rem/1.4 var(--sans); }
.arrival-method span { font: .875rem/1.5 var(--sans); margin-top: .4em; }
.course-trail { max-width: 1000px; }
#v-course > .masthead { min-height: 0; }
#v-course > .masthead .cs-standing, #v-course > .masthead .rh-device { display: none; }
.trail-heading { display: flex; align-items: center; gap: var(--gutter); max-width: none; }
.trail-heading > div { max-width: 560px; }
.trail-heading h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; }
.trail-heading-art { margin-left: auto; }
.trail-heading-art svg { width: 110px; height: 110px; transform: rotate(-9deg); }
.learning-trail { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--gutter); padding: var(--seam) 0; max-width: none; }
.learning-trail::before { content: ''; position: absolute; top: var(--breath); bottom: var(--breath); left: 50%; border-left: 2px dashed var(--rule-room); }
.trail-stop, .trail-stop:nth-child(even) { position: relative; margin: 0; min-width: 0; }
.trail-stop:nth-child(even) { padding-top: var(--breath); }
.trail-stop:not(:last-child)::after { display: none; }
.trail-go { position: relative; height: 100%; min-height: 240px; display: grid; grid-template-columns: 90px minmax(0,1fr) 24px; align-items: center; gap: var(--seam); padding: var(--gutter); background: var(--paper); border: 1px solid var(--carbon); border-left: 6px double var(--carbon); border-radius: 0 24px 3px 0; box-shadow: none; }
.trail-go::before { content: ''; position: absolute; inset: var(--seam); border-bottom: 1px solid var(--rule-room); pointer-events: none; }
.trail-folio { position: absolute; top: var(--seam); right: var(--seam); font: .875rem var(--serif); color: var(--muted, var(--carbon)); }
.trail-medallion { width: 84px; height: 84px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.trail-medallion svg { width: 76px; height: 76px; }
.trail-copy strong { display: block; margin-block: var(--seam); font-size: var(--t-4); line-height: 1.15; }
.trail-copy > span:last-child { font: .875rem/1.5 var(--sans); }
.trail-label { font-size: .6875rem; letter-spacing: .08em; }
.trail-current .trail-go { border-top: 5px solid var(--carbon); background: var(--paper); }
.trail-current .trail-medallion { outline: 0; border: 0; }
.trail-current .trail-label { display: inline-block; color: var(--paper); background: var(--carbon); padding: .35em .6em; }
.trail-done .trail-medallion { border: 3px double var(--carbon); border-radius: 50%; width: 64px; height: 64px; }
.trail-done .trail-medallion svg { width: 42px; height: 42px; }
.trail-go { transition: box-shadow 160ms ease-out; }
.trail-go:hover, .trail-go:focus-visible { box-shadow: none; }
.arrival-discovered #arrival-meaning { animation: discovery-ink 180ms ease-out; }
@keyframes discovery-ink { from { opacity: .3; } to { opacity: 1; } }
html[data-motion="low"] .trail-go { transition: none; }
html[data-motion="low"] .arrival-discovered #arrival-meaning { animation: none; }
.trail-destination { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: var(--seam) var(--gutter); text-align: left; border-left: 8px double var(--carbon); }
.trail-destination > span { grid-row: 1 / 4; margin: 0; align-self: center; }
.trail-destination > p { margin: 0; }
.trail-destination > button { justify-self: start; }
.arrival-choice:focus-visible, .arrival-reveal:focus-visible { outline: 3px solid var(--carbon); outline-offset: 5px; }
@media (max-width: 820px) {
#arrival-front { grid-template-columns: 1fr; gap: var(--breath); }
.arrival-book { transform: none; max-width: 640px; width: 100%; justify-self: center; min-height: 0; }
.arrival-copy { max-width: 640px; justify-self: center; }
.arrival-method { grid-template-columns: 1fr; }
.trail-go { grid-template-columns: 60px minmax(0,1fr); min-height: 230px; }
.trail-arrow { display: none; }
.trail-medallion, .trail-medallion svg { width: 56px; height: 56px; }
}
@media (max-width: 560px) {
#arrival-front { margin-top: var(--seam); }
#arrival-front .arrival-copy { display: contents; }
#arrival-front .arrival-eyebrow { order: 0; margin: 0; }
#arrival-title { order: 1; }
#arrival-front .arrival-lede { order: 2; }
#arrival-front .arrival-book { order: 3; }
#arrival-front .arrival-choices { order: 4; }
#arrival-front .arrival-free { order: 5; }
#arrival-front .arrival-rooms { order: 6; }
#arrival-front .arrival-method { order: 7; }
#arrival-title { font-size: 2.5rem; }
.arrival-lede { margin-block: var(--seam); font-size: var(--t-1); }
.arrival-book { padding: var(--seam) var(--gutter); margin-right: 8px; width: calc(100% - 8px); }
.arrival-resident { width: 64px; height: 64px; }
.arrival-book blockquote { margin-block: var(--seam); }
.trail-heading-art { display: none; }
.learning-trail { grid-template-columns: 1fr; gap: var(--breath); padding-inline: var(--seam); }
.learning-trail::before { left: 30px; }
.trail-stop:nth-child(even) { padding-top: 0; margin-left: var(--seam); }
.trail-go { min-height: 160px; padding: var(--gutter) var(--seam); }
.trail-copy strong { font-size: var(--t-3); }
.trail-destination { grid-template-columns: 42px minmax(0,1fr); padding: var(--seam); }
.trail-destination > span svg { width: 40px; height: 40px; }
}
.counter-heading { display: flex; gap: var(--seam); align-items: center; }
#key-panel:has(.counter-offer) { width: min(720px, calc(100vw - 32px)); max-width: none; }
.counter-close { margin-left: auto; align-self: start; min-width: 44px; min-height: 44px; padding: var(--seam); border: 0; background: transparent; color: var(--carbon); cursor: pointer; }
.counter-close svg { width: 20px; height: 20px; }
.counter-heading > span svg { width: 56px; height: 56px; }
.counter-heading .smallcaps { margin: 0 0 .5em; }
.counter-heading h3 { margin: 0; }
.counter-offer .plans { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--seam); margin-block: var(--seam); }
.counter-offer .plan { display: flex; flex-direction: column; align-items: start; gap: .5em; text-align: left; min-width: 0; padding: var(--seam); border: 1px solid var(--carbon); border-top: 4px solid var(--carbon); background: var(--paper); color: var(--carbon); }
.counter-offer .plan::before, .counter-offer .plan::after { display: none; }
.counter-offer .p-title { font: 600 .875rem/1.4 var(--sans); }
.counter-offer .p-amt { font: 2rem/1.1 var(--bill); }
.counter-offer .p-per, .counter-offer .p-note { font: .875rem/1.5 var(--sans); }
.counter-offer .plan.best { border-color: var(--carbon); background: var(--paper); }
.counter-offer .plan > span { color: inherit; text-transform: none; letter-spacing: normal; }
.counter-offer .plan.best .p-per, .counter-offer .plan.best .p-note { color: var(--carbon); }
.counter-offer .p-action { display: flex; gap: var(--seam); align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--seam); font: 600 .875rem/1.4 var(--sans); width: 100%; border-top: 1px solid var(--rule-room); }
.p-action svg { width: 24px; height: 24px; flex-shrink: 0; }
.counter-offer .plan-trial .p-action { color: var(--paper); background: var(--carbon); padding: .6em; }
.counter-inside { border-block: 1px solid var(--rule-room); margin-block: var(--seam); }
.counter-inside summary { min-height: 44px; padding-block: var(--seam); cursor: pointer; font: .875rem var(--sans); }
.counter-offer .k-terms { line-height: 1.5; }
#key-panel .k-field-label { display: block; font: .875rem var(--sans); margin-top: var(--seam); }
#key-panel .k-field-label + input { margin-top: .4em; }
#key-panel:has(#k-name) > h3 { display: block; font: 700 1.75rem/1.15 var(--bill); text-transform: none; margin: 0 0 var(--seam); }
#key-panel:has(#k-name) > .k-plate { display: none; }
#key-panel:has(.counter-offer) .counter-heading h3 { display: block; font: 700 1.75rem/1.15 var(--bill); text-transform: none; }
#key-panel .k-orn svg { width: 28px; height: 28px; }
.k-account-promise { font: .875rem/1.5 var(--sans); padding-block: var(--seam); border-block: 1px solid var(--rule-room); }
#desk-membership { max-width: var(--desk-w); margin: var(--breath) auto; }
#desk-membership:empty { display: none; }
.membership-invitation { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; align-items: center; gap: var(--seam); padding: var(--gutter); background: var(--paper); border: 1px solid var(--carbon); border-left: 6px double var(--carbon); }
.membership-invitation > span svg { width: 48px; height: 48px; }
.membership-invitation h2 { font: 700 1.5rem/1.2 var(--bill); text-transform: none; margin: .3em 0; }
.membership-invitation p { font: .875rem/1.5 var(--sans); margin: .4em 0; }
.membership-price { grid-column: 2 / -1; }
@media (max-width: 560px) {
.counter-offer .plans { grid-template-columns: 1fr; }
.counter-offer .plan { display: grid; grid-template-columns: minmax(0,1fr) auto; }
.counter-offer .p-per, .counter-offer .p-note, .counter-offer .p-action { grid-column: 1 / -1; }
.membership-invitation { grid-template-columns: 40px minmax(0,1fr); padding: var(--seam); }
.membership-invitation > span svg { width: 36px; height: 36px; }
.membership-invitation > button { grid-column: 2; justify-self: start; }
}
:root { --world-deep: #35568c; --world-tint: #e6eaf6; --world-mid: #919dc4; --world-gold: #efb94e; --world-shadow: #ccd4e4; }
body[data-room="de"] { --world-deep: #335f55; --world-tint: #e1eddd; --world-mid: #71967a; --world-shadow: #c2d5c1; }
body[data-room="es"] { --world-deep: #246d69; --world-tint: #dff0e9; --world-mid: #82b9aa; --world-shadow: #bbdcd3; }
body[data-room="fr"] { --world-deep: #5b4a86; --world-tint: #ece8f5; --world-mid: #a497c9; --world-shadow: #d4cce6; }
.brand-art { --art-ground: var(--world-tint); overflow: visible; }
.art-object, .scene-book, .scene-leaf { transform-origin: center; transition: transform 240ms cubic-bezier(.2,.7,.3,1); }
button:hover .art-object, button:focus-visible .art-object { transform: translateY(-3px) rotate(-4deg); }
button:active .art-object { transform: translateY(1px) scale(.96); }
.story-scene { display: block; width: 100%; height: auto; overflow: hidden; border-radius: 22px; }
.story-scene .cast-portrait { overflow: visible; }
button:hover .scene-book, button:focus-visible .scene-book { transform: translateY(-3px); }
button:hover .scene-leaf { transform: rotate(-5deg); }
.arrival-book { transform: none; border: 1px solid var(--world-shadow); border-left: 8px solid var(--world-deep); border-radius: 12px 28px 28px 12px; padding: var(--gutter); box-shadow: 0 12px 0 -5px var(--world-shadow), 0 24px 45px -25px var(--world-mid); }
.arrival-book-ribbon { background: var(--world-gold); z-index: 2; }
.arrival-world { position: relative; margin: calc(-1 * var(--gutter)) calc(-1 * var(--gutter)) var(--gutter); border-radius: 0 28px 0 0; overflow: hidden; background: var(--world-tint); }
.arrival-world > .story-scene { border-radius: 0; }
.arrival-resident { display: none; position: absolute; width: 30%; height: auto; aspect-ratio: 1; left: 36.7%; top: 28.6%; margin: 0; }
.arrival-alive .arrival-resident { display: block; }
.arrival-alive .arrival-world > .story-scene > .cast-portrait { visibility: hidden; }
.arrival-alive .arrival-resident > svg { width: 100%; height: 100%; }
.arrival-page-label { color: var(--world-text, var(--world-deep)); font-weight: 700; }
.arrival-book blockquote { margin-block: var(--seam); }
.arrival-primary { background: var(--world-deep); color: #fffdf5; border-color: var(--world-text, var(--world-deep)); box-shadow: 0 2px 0 color-mix(in srgb,var(--world-deep),#17213a 25%); }
.arrival-choice { border-radius: var(--r-dialog); transition: transform 160ms ease-out; }
.arrival-choice:hover { transform: translateY(-2px); }
.arrival-primary:hover { box-shadow: 0 2px 0 color-mix(in srgb,var(--world-deep),#17213a 25%); }
.arrival-reveal { border: 0; border-radius: var(--r-surface); padding: .6em 1em; color: var(--world-text, var(--world-deep)); background: var(--world-tint); font-weight: 700; }
#arrival-meaning { border-left-color: var(--world-gold); }
.arrival-discovered .arrival-book { border-color: var(--world-mid); }
.arrival-method svg { width: 64px; height: 64px; }
.discovery { border: 1px solid var(--world-shadow); border-bottom: 4px solid var(--world-shadow); border-radius: 18px; gap: .6rem; }
.discovery:hover { background: var(--world-tint); }
.practice-invitation { border: 1px solid var(--world-shadow); border-radius: 24px; border-top: 0; background: linear-gradient(var(--world-tint) 0 112px,var(--paper) 112px); box-shadow: 0 2px 0 var(--world-shadow); }
.practice-portrait { width: 112px; height: 112px; }
.practice-word-peek span { background: var(--world-tint); border: 0; border-radius: var(--r-surface); padding: .5em .7em; }
.trail-heading-art svg { transform: none; }
.learning-trail { gap: var(--gutter); padding: 0; }
.learning-trail::before { display: none; }
.trail-stop, .trail-stop:nth-child(even) { padding: 0; }
.trail-go { display: grid; grid-template-columns: minmax(0,1fr) 28px; gap: var(--seam); min-height: 0; padding: 0 0 var(--gutter); border: 1px solid var(--world-shadow); border-left: 1px solid var(--world-shadow); border-radius: 22px; box-shadow: 0 2px 0 var(--world-shadow); overflow: hidden; transition: transform 200ms ease-out; }
.trail-go::before { display: none; }
.trail-landscape { display: block; grid-column: 1 / -1; width: 100%; }
.trail-landscape > .story-scene { border-radius: 0; }
.trail-copy { padding-left: var(--gutter); gap: .4em; }
.trail-copy strong { font-size: 1.4rem; }
.trail-arrow { display: block; padding-right: var(--seam); }
.trail-go .trail-medallion { display: none; }
.trail-folio { top: var(--seam); left: var(--seam); right: auto; z-index: 1; color: var(--world-text, var(--world-deep)); background: #fffdf5; border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; font: 600 .875rem var(--sans); }
.trail-current .trail-go { border: 2px solid var(--world-deep); box-shadow: 0 2px 0 var(--world-deep); }
.trail-current .trail-label { color: var(--world-text, var(--world-deep)); font-weight: 700; }
.trail-done .trail-go .trail-medallion { position: absolute; display: grid; top: var(--seam); right: var(--seam); width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; box-shadow: none; }
.trail-done .trail-medallion svg { width: 24px; height: 24px; }
.trail-go:hover, .trail-go:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 0 var(--world-shadow); }
.trail-current .trail-go:hover { box-shadow: 0 8px 0 var(--world-deep); }
.trail-destination { border: 1px solid var(--world-shadow); background: var(--world-tint); border-radius: 20px; }
#v-course .cs-wing-books .rd-book { border: 1px solid var(--world-shadow); border-radius: 20px; background: var(--paper); box-shadow: 0 2px 0 var(--world-shadow); }
.rd-volume-art { width: 90px; min-height: 126px; border: 0; border-left: 5px solid var(--ink,var(--world-deep)); border-radius: 3px 14px 14px 3px; background: var(--world-tint); box-shadow: 3px 3px 0 var(--world-shadow); }
.rd-volume-art > svg { width: 72px; height: 72px; }
.counter-offer .plan { border: 1px solid var(--world-shadow); border-radius: var(--r-dialog); }
.counter-offer .plan.best { border: 2px solid var(--world-deep); background: var(--world-tint); }
.counter-offer .p-action { color: var(--world-text, var(--world-deep)); }
@media (max-width: 820px) {
.trail-go { grid-template-columns: minmax(0,1fr) 28px; }
.arrival-world { max-height: 260px; }
}
@media (max-width: 560px) {
.discovery { grid-template-columns: 64px minmax(0,1fr) 24px; padding: var(--seam); }
.arrival-book { padding: var(--gutter); margin: 0; width: 100%; }
.arrival-world { max-height: none; }
.arrival-world > svg { max-height: 180px; }
.arrival-resident { width: 96px; left: calc(50% - 48px); top: 28%; }
.arrival-method svg { width: 56px; height: 56px; }
.learning-trail { padding: 0; gap: var(--gutter); }
.trail-stop:nth-child(even) { margin-left: 0; }
.trail-go { padding: 0 0 var(--seam); grid-template-columns: minmax(0,1fr) 28px; min-height: 0; }
.trail-landscape > svg { max-height: 176px; background: var(--world-tint); }
.trail-copy strong { font-size: var(--t-3); }
}
html[data-motion="low"] :is(.art-object, .scene-book, .scene-leaf, .arrival-choice, .trail-go) { transition: none; transform: none; }
html[data-motion="low"] :is(button:hover .art-object, button:focus-visible .art-object, button:hover .scene-book, button:focus-visible .scene-book, button:hover .scene-leaf, .arrival-choice:hover, .trail-go:hover, .trail-go:focus-visible) { transform: none; }
#v-lesson { max-width: 1040px; margin-inline: auto; }
#v-lesson .gles-head { align-items: center; margin-block: var(--gutter); }
#v-lesson .gles-who { width: 96px; height: 96px; flex-shrink: 0; }
#v-lesson #lesson-title { font-size: clamp(1.6rem,3vw,2.3rem); line-height: 1.15; text-transform: none; }
#v-lesson #lesson-body { display: block; max-width: none; }
.grammar-discovery { max-width: 800px; margin-inline: auto; padding: var(--gutter); border: 1px solid var(--world-shadow); border-radius: 24px; background: var(--paper); box-shadow: 0 2px 0 var(--world-shadow); }
.discovery-progress { display: flex; align-items: center; gap: 8px; margin-bottom: var(--gutter); }
.discovery-progress span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--world-tint); color: var(--world-text, var(--world-deep)); font: 600 .875rem var(--sans); }
.discovery-progress .now { background: var(--world-deep); color: #fffdf5; outline: 2px solid var(--world-mid); outline-offset: 3px; }
.discovery-progress .done { background: #d8ecdf; color: #246348; }
.g-discovery-heading { display: flex; flex-wrap: wrap; gap: var(--seam); align-items: center; justify-content: space-between; font: var(--type-meta)/1.4 var(--sans); }
.g-discovery-heading .smallcaps { color: var(--world-text, var(--world-deep)); }
.g-discovery-instruction { font: var(--type-body)/1.5 var(--sans); margin-block: var(--seam); }
.g-discovery-line { margin: var(--gutter) 0; font: var(--type-prompt)/1.55 var(--serif); overflow-wrap: anywhere; }
.g-discovery-line mark { color: var(--carbon); background: #fce6ad; border-radius: var(--r-control); padding-inline: .1em; }
.g-discovery-tools { display: flex; gap: var(--seam); align-items: start; flex-wrap: wrap; }
.g-discovery-tools[hidden] { display: none; }
.g-discovery-tools .btn { display: inline-flex; align-items: center; gap: .5em; }
.g-discovery-tools svg { width: 24px; height: 24px; }
.g-discovery-tools details { flex: 1 1 240px; }
.g-discovery-tools summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; text-decoration: underline; }
.g-discovery-note { padding: var(--seam); border-left: 4px solid var(--world-mid); background: var(--world-tint); border-radius: 0 12px 12px 0; margin-block: var(--gutter) !important; font: 1rem/1.65 var(--sans); }
#m .grammar-discovery h3, .grammar-discovery h3 { text-transform: none; font: 600 1.25rem/1.4 var(--sans); }
.g-discovery-options { display: grid; gap: var(--seam); margin-block: var(--seam); }
.g-discovery-options .btn { width: 100%; min-height: 52px; text-align: left; white-space: normal; padding: .8em 1em; border-radius: var(--r-surface); border-color: var(--world-shadow); font: 1rem/1.5 var(--sans); text-transform: none; }
.g-discovery-options .btn:hover { border-color: var(--world-text, var(--world-deep)); background: var(--world-tint); }
#g-discovery-feedback:not(:empty) { padding: var(--seam); border-radius: var(--r-surface); background: #fff0cd; margin-block: var(--gutter); font: 1rem/1.6 var(--sans); }
.discovery-right #g-discovery-feedback:not(:empty) { background: #dff1e4; color: #214f3c; }
.g-recall-gap { display: inline-block; min-width: 4em; border-bottom: 3px solid var(--world-deep); text-align: center; }
#g-discovery-answer form { display: flex; gap: var(--seam); flex-wrap: wrap; margin-block: var(--gutter); }
#g-discovery-answer label { flex-basis: 100%; font: 600 1rem var(--sans); }
#g-recall-input { flex: 1 1 200px; min-width: 0; min-height: 48px; border: 2px solid var(--world-mid); border-radius: var(--r-surface); padding: var(--seam); font: 1.125rem var(--sans); }
.grammar-reference { max-width: 800px; margin: var(--breath) auto; border-block: 1px solid var(--world-shadow); }
.grammar-reference > summary { min-height: 48px; cursor: pointer; padding: var(--seam); font: 600 1rem/1.5 var(--sans); }
#lesson-body .grammar-reference .g-prose, #lesson-body .grammar-reference .g-rail { display: block; padding: var(--gutter); max-width: none; }
.grammar-finish-art { width: min(100%,320px); margin: 0 auto var(--gutter); }
.grammar-discovery:has(.grammar-finish-art) { text-align: center; }
.grammar-discovery:has(.grammar-finish-art) .btnrow { justify-content: center; }
.glesson-card.g-marked { border: 1px solid var(--world-shadow); border-radius: 18px; box-shadow: 0 2px 0 var(--world-shadow); background: var(--paper); padding-right: 110px; }
.glesson-card::after { display: none; }
.glesson-card .g-stampmark { opacity: 1; width: 88px; height: 88px; right: 12px; top: 20px; transform: none; border-radius: 50%; background: var(--world-tint); }
.glesson-card .g-stampmark svg { width: 88px; height: 88px; }
.glesson-card:hover { background: var(--world-tint); }
.glesson-card .g-mark svg { width: 24px; height: 24px; }
@media (max-width: 560px) {
.grammar-discovery { padding: var(--seam); }
.g-discovery-line { font-size: var(--type-prompt); }
#v-lesson .gles-who { width: 64px; height: 64px; }
#v-lesson .gles-head { gap: var(--seam); }
.glesson-card.g-marked { padding-right: 84px; }
.glesson-card .g-stampmark, .glesson-card .g-stampmark svg { width: 64px; height: 64px; }
.g-discovery-options .btn { font-size: var(--t-1); }
}
.course-trail { margin-top: var(--gutter); }
.trail-heading { margin-bottom: var(--gutter); }
.trail-heading h2 { font-size: clamp(1.75rem,3vw,2.4rem); }
.trail-heading p { margin: var(--seam) 0 0; }
@media (min-width: 1000px) { .learning-trail { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.grammar-beat-depth { margin-top: var(--gutter); padding-top: var(--seam); border-top: 1px solid var(--world-shadow); font-size: .9em; }
.grammar-beat-depth > summary { cursor: pointer; color: var(--world-text, var(--world-deep)); font: 600 1rem/1.5 var(--sans); min-height: 44px; }
.gx-stage[data-gram]::before, .gx-stage[data-gram]::after { content: none; }
@media (max-width: 560px) {
#arrival-front .arrival-choices { order: 3; }
#arrival-front .arrival-free { order: 4; }
#arrival-front .arrival-book { order: 5; }
}
.trail-earned { display: flex; align-items: center; flex-wrap: wrap; gap: var(--seam); margin-top: var(--seam); color: var(--world-text, var(--world-deep)); font: 600 .875rem/1.4 var(--sans); }
.trail-earned progress { max-width: 180px; height: 10px; accent-color: var(--world-text, var(--world-deep)); }
.arrival-lede, .trail-heading p, .arrival-method span { font-weight: 400; }
#v-course .cs-wing-grammar { display: none; }
#v-course[data-wing="grammar"] .cs-wing-course, #v-course[data-wing="grammar"] .cs-wing-books { display: none; }
#v-course[data-wing="grammar"] .cs-wing-grammar { display: block; margin-block: var(--gutter); }
#v-course .cs-wings { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: var(--seam); margin-bottom: var(--gutter); padding-top: 0; border-top: 0; }
#v-course .cs-wing-tab { border: 1px solid var(--world-shadow); border-radius: var(--r-dialog); box-shadow: none; }
#v-course .cs-wing-tab[aria-selected="true"] { background: var(--world-tint); border-bottom: 4px solid var(--world-deep); }
#v-course .cs-wt-dev > svg { width: 44px; height: 44px; }
#v-course > .masthead { padding-bottom: var(--s3); }
.trail-current .trail-label { background: var(--world-tint); color: var(--world-text, var(--world-deep)); border-radius: var(--r-control); padding: .3em .6em; justify-self: start; }
@media (max-width: 820px) {
#v-course .cs-wing-tab { padding: var(--seam); }
#v-course .cs-wt-dev { display: none; }
#v-course .cs-wt-mid b { font: 600 .875rem/1.3 var(--sans); }
#v-course .cs-wt-mid em { display: none; }
#v-course .cs-wings { gap: 6px; }
}
#v-course .cs-wing-grammar .glist, #v-grammar .glist { gap: var(--gutter); border: 0; background: transparent; }
.glist .glesson-card.g-marked { border: 1px solid var(--world-shadow); min-height: 156px; }
.glesson-card .gru { font: 600 1.125rem/1.35 var(--sans); text-transform: none; letter-spacing: normal; }
.glesson-card .g-from { line-height: 1.45; }
.grammar-discovery [hidden] { display: none !important; }
#v-lesson .gles-head { background: transparent; border: 0; gap: var(--seam); margin: var(--seam) 0; padding: 0; }
#v-lesson #lesson-title { letter-spacing: normal; margin: 0 0 .3em; }
#v-lesson .gles-say { margin: .3em 0; }
#v-lesson .gles-who { width: 72px; height: 72px; }
.grammar-discovery { padding: 24px; }
.discovery-progress { margin-bottom: 20px; }
.g-discovery-line { margin-block: 20px; }
.g-discovery-note { margin-block: 20px !important; }
@media (max-width: 560px) { .grammar-discovery { padding: 16px; } }
#v-home.desk-focused > .masthead { padding: 0; border: 0; background: transparent; color: var(--carbon); box-shadow: none; }
#v-home.desk-focused > .masthead::before, #v-home.desk-focused > .masthead::after { display: none; }
#v-home.desk-focused .desk-intro { display: block; min-height: 0; }
#v-home.desk-focused .desk-lockup { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-bottom: 24px; padding-bottom:20px; border-bottom:1px solid var(--rule); }
#v-home.desk-focused .desk-lockup .wordmark, #v-home.desk-focused #room-line { display: none; }
#v-home.desk-focused #room-name { color: var(--carbon); font-size: 30px; margin: 0; max-width: none; line-height: 1.1; letter-spacing: normal; }
#v-home.desk-focused #room-door { display:flex;flex-wrap:nowrap;gap:4px;margin:0;text-align:left;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none; }
#v-home.desk-focused #room-door .room-language { flex:none; }
:is(#room-door,.arrival-rooms) .room-language { display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;padding:8px 12px;margin:0;border:1px solid transparent;border-radius:var(--r-control);background:transparent;color:var(--steel);font:var(--fw-medium) var(--type-meta)/1.4 var(--sans);letter-spacing:0;text-transform:none;text-decoration:none;opacity:1; }
:is(#room-door,.arrival-rooms) .room-language.is-current { color:var(--carbon);background:var(--galley);border-color:var(--rule);box-shadow:var(--sh-press-quiet); }
:is(#room-door,.arrival-rooms) a.room-language:hover { color:var(--carbon);background:var(--case);border-color:var(--rule); }
:is(#room-door,.arrival-rooms) a.room-language:focus-visible { outline:3px solid var(--signal-ink);outline-offset:2px; }
#v-home.desk-focused .desk-host { grid-template-columns: minmax(0,1fr) minmax(180px,260px); gap:32px; min-height:0; padding:clamp(24px,3.5vw,40px); border:1px solid var(--rule);border-top:3px solid var(--pine);border-radius:var(--learning-radius,8px);background:var(--galley);box-shadow:var(--learning-shadow,0 3px 0 var(--rule)); }
#v-home.desk-focused .desk-host-bubble { border: 0; box-shadow: none; background: transparent; padding: 0; gap: var(--seam); }
#v-home.desk-focused .desk-host-bubble::after { display: none; }
#v-home.desk-focused .desk-host-kicker { display:block;padding:0;border:0;box-shadow:none;background:transparent;color:var(--steel);font:600 var(--type-meta)/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase; }
#v-home.desk-focused #desk-host-line { font:400 clamp(1.8rem,3vw,2.75rem)/1.16 var(--serif);letter-spacing:-.025em;text-transform:none;margin:0;max-width:24ch; }
#v-home.desk-focused #desk-host-meta { font:var(--type-body)/1.65 var(--sans);color:var(--steel);max-width:56ch; }
#v-home.desk-focused .desk-host-btn { align-self:start;justify-self:start;width:auto;}
#v-home.desk-focused .desk-cast-wrap { display:flex;position:relative;isolation:isolate;align-self:center;justify-self:center;width:100%;height:210px;border-left:1px solid var(--rule); }
#v-home.desk-focused .desk-cast { position:relative;z-index:1;width:150px;height:160px;margin:0;align-self:end;border:0;border-radius:0;background:transparent;padding:0;box-shadow:none;cursor:pointer; }
.desk-host-scene { position:absolute;inset:20px 0 0 16px;display:grid;place-items:center;overflow:hidden;pointer-events:none; }
.desk-host-scene>svg { width:100%;height:100%;opacity:.42; }
#v-home.desk-focused .desk-cast-pedestal { display:none; }
#v-home.desk-focused .desk-host-track { max-width:420px;gap:12px;margin:0; }
.desk-host-progress[hidden],.desk-host-source[hidden] { display:none!important; }
#v-home.desk-focused .desk-host-progress { height:5px;border:0;border-radius:1px;background:var(--rule); }
#v-home.desk-focused .desk-host-progress i { background:var(--pine); }
.desk-host-source { margin:0;color:var(--carbon);font:500 var(--type-meta)/1.5 var(--serif); }
#v-home.desk-focused .desk-host-count { font:var(--type-meta)/1.5 var(--sans);color:var(--steel); }
#v-home.desk-focused .desk-cast:focus-visible { outline:3px solid var(--signal-ink);outline-offset:4px; }
@media (max-width: 560px) {
#v-home.desk-focused #room-name { font-size: 26px; }
#v-home.desk-focused .desk-lockup { margin-bottom: var(--seam); }
#v-home.desk-focused .desk-host { display:block;padding:22px 20px; }
#v-home.desk-focused .desk-cast-wrap { position:absolute;right:12px;top:14px;width:72px;height:80px;border:0; }
#v-home.desk-focused .desk-cast { width:72px;height:80px; }
#v-home.desk-focused .desk-host-scene { display:none; }
#v-home.desk-focused .desk-cast-pedestal { display: none; }
#v-home.desk-focused #desk-host-kicker, #v-home.desk-focused #desk-host-line { padding-right: 66px; }
#v-home.desk-focused #desk-host-line { font-size:var(--t-5); }
#v-home.desk-focused #desk-host-meta { font-size:var(--type-body); }
#v-home.desk-focused .desk-host-btn { width:100%; }
}
.grammar-search, .grammar-results { grid-column: 1 / -1; }
.grammar-search { display: grid; gap: .5em; font: 600 1rem/1.5 var(--sans); }
.grammar-search input { min-height: 48px; padding: .6em .9em; border-radius: var(--r-surface); border: 1px solid var(--world-mid); color: var(--carbon); background: var(--paper); font: 1rem var(--sans); }
.grammar-results { font: var(--type-meta)/1.5 var(--sans); }
.grammar-results:empty { display: none; }
.glesson-card[hidden] { display: none !important; }
.grammar-practice-door { max-width: 800px; margin: var(--gutter) auto; padding: var(--seam); border-radius: var(--r-dialog); background: var(--world-tint); }
.glist .glesson-card.g-marked { padding: 20px; }
.glesson-card .g-no { position: static; display: block; margin-bottom: 8px; font: 600 var(--type-meta)/1.4 var(--sans); color: var(--world-text, var(--world-deep)); }
.glesson-card .gru { padding-right: 80px; }
@media (max-width: 560px) { .glesson-card .gru { padding-right: 60px; } }
[data-theme="dark"] body { --world-tint: #26354d; --world-shadow: #3b4961; --world-text: #b9d3ff; }
[data-theme="dark"] body[data-room="de"] { --world-tint: #243c34; --world-shadow: #3a584a; --world-text: #bce2ca; }
[data-theme="dark"] body[data-room="es"] { --world-tint: #213c3e; --world-shadow: #39595a; --world-text: #ade0d7; }
[data-theme="dark"] body[data-room="fr"] { --world-tint: #2f2944; --world-shadow: #4a4163; --world-text: #d3c8f2; }
body[data-room="it"] { --world-deep: #8a4a2b; --world-tint: #f5ebe0; --world-mid: #c9956b; --world-shadow: #e3cdb4; }
[data-theme="dark"] body[data-room="it"] { --world-tint: #3a2a1f; --world-shadow: #5a4433; --world-text: #f0d9c2; }
body[data-silent] :is(#btn-listen, #p-say, #p-saysent, button.gx-say, .answer-listen,
#prep-say, #g-discovery-hear, #rev-hear, #rev-hear-b) { display: none !important; }
body[data-silent] :is(.theatre-audio, .theatre-audio-status, .practice-listening,
.mission-listening, .wk-audio, .lesson-audio-control, .lesson-audio-choices,
.lesson-audio-hint, .lesson-audio-status, .audio-button-status, .ex-say,
#pat-hear, #pat-hear + .ink-help-label, #g-discovery-audio-status,
#g-discovery-audio-hint, #rev-listen-hint, [data-pronunciation-control],
[data-mission-audio], [data-theatre-hear]) { display: none !important; }
[data-theme="dark"] .g-discovery-line mark { color: #17213a; }
#g-discovery-feedback:not(:empty) { color: #513b18; }
.discovery-right #g-discovery-feedback:not(:empty) { color: #214f3c; }
.trail-folio { color: #213451; }
.glesson-card[aria-busy="true"] { opacity: .7; cursor: progress; }
.glesson-card.g-read .g-stampmark { opacity: 1; }
.glesson-card.g-read .gru { color: var(--carbon); }
.glesson-card .g-from { color: var(--world-text,var(--world-deep)); }
.px-verb > .ic { width: 20px; height: 20px; vertical-align: middle; margin-right: .3em; }
.px-case:not([hidden]) { display: grid; grid-template-columns: repeat(auto-fit,minmax(112px,1fr)); gap: 12px; }
.px-case > button { display: grid; justify-items: center; gap: 6px; border: 1px solid var(--world-shadow); border-radius: var(--r-dialog); padding: 12px 8px; background: var(--paper); color: var(--carbon); }
.px-case > button, .px-case > button:nth-child(n) { font-size: var(--t-1); }
.px-case > button > svg { width: 64px; height: 64px; transition: transform 180ms ease-out; }
.px-case > button.active { background: var(--world-tint); color: var(--carbon); border-color: var(--world-text,var(--world-deep)); }
.px-case > button:hover > svg { transform: translateY(-3px) rotate(-3deg); }
html[data-motion="low"] .px-case > button > svg { transition: none; transform: none; }
html[data-motion="low"] .px-case > button:hover > svg { transform: none; }
.arrival-first-friend { display: none; }
@media (max-width: 560px) {
.arrival-eyebrow { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.arrival-first-friend { display: grid; place-items: center; width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; background: var(--world-tint); }
.arrival-first-friend > svg { width: 64px; height: 64px; }
}
.continue-card { display: grid; grid-template-columns: minmax(130px, .65fr) minmax(0, 1.8fr); gap: 24px; align-items: center; max-width: 880px; border-radius: 24px; padding: 28px; background: var(--paper); box-shadow: 0 9px 0 var(--world-shadow, var(--rule-room)); }
.reading-door-art { overflow: hidden; border-radius: 18px; background: var(--world-tint, var(--paper-2)); aspect-ratio: 1 / 1.1; display: grid; align-items: center; }
.reading-door-art svg { width: 180%; max-width: none; margin-left: -40%; }
.reading-door-copy { min-width: 0; }
.continue-card .sc-title { margin: 8px 0; font-size: clamp(1.6rem, 3vw, 2rem); }
.reading-door-help { font: 1rem/1.65 var(--sans); margin: 16px 0; }
.reading-door-optional { font: .8125rem/1.5 var(--sans); color: var(--steel); margin: 14px 0 0; }
.reading-door-copy .btnrow { flex-wrap: wrap; gap: 12px; }
.grammar-membership-preview { padding: clamp(20px, 4vw, 40px); border-radius: 24px; background: var(--world-tint, var(--paper-2)); border: 1px solid var(--rule-room); font: 1.05rem/1.65 var(--sans); }
.grammar-membership-preview .btnrow { margin-top: 24px; }
.g-preview-label { display: inline-block; font: .75rem/1.4 var(--sans); border-radius: var(--r-surface); padding: 4px 9px; margin-top: 12px; background: var(--paper-2); }
#nav-profile { display: inline-flex; align-items: center; gap: 8px; font: .75rem var(--sans); }
#nav-prof-cls:not(:empty)::before { content: '· '; }
#nav-prof-cls:empty { display: none; }
header .bar.no-level #nav-prof-cls { display: none; }
@media (max-width: 560px) {
.continue-card { grid-template-columns: 1fr; gap: 18px; padding: 20px; border-radius: 20px; }
.reading-door-art { aspect-ratio: 3.5 / 1; }
.reading-door-art svg { width: 100%; margin-left: 0; }
.reading-door-copy .btn { width: 100%; }
#nav-prof-init { display: none; }
}
#tip:not(.show) { display: none; }
#tip { max-width: min(320px, calc(100vw - 16px)); overflow-wrap: anywhere; }
#ov-settings #settings-panel { width: min(640px, calc(100vw - 32px)); }
#settings-panel .k-plate h3 { display: block; margin: 0 0 2px; font: 400 1.6rem/1.2 var(--serif); letter-spacing: var(--track-title); text-transform: none; }
#settings-panel .set-row { min-height: 44px; padding-block: var(--s1); }
#settings-panel .set-save { gap: 12px; background: var(--sheet); }
#settings-panel .theme-dots button { min-width: 36px; min-height: 36px; }
#key-panel .key-dialog-close { position: absolute; top: 14px; right: 18px; min-height: 36px; padding: 6px 10px; font-size: var(--t-00); }
#key-panel:has(#key-dialog-close) > h3 { padding-right: 74px; }
@media (max-width: 560px) {
#settings-panel .set-row { flex-wrap: wrap; gap: 12px; }
#settings-panel .set-row > .lab { flex: 1 1 180px; }
#settings-panel .set-row.set-col > .lab { flex: 0 0 auto; }
#settings-panel .set-row select { max-width: 100%; }
}
@media (min-width: 561px) {
#settings-panel .set-row > .btn { flex: none; }
}
#settings-panel .set-choices { display: grid; gap: 6px; }
#settings-panel .set-choices label {
display: flex; align-items: center; gap: 12px; min-height: 44px;
padding: 2px 12px 2px 14px; border: 1px solid var(--rule);
background: var(--sheet); cursor: pointer; line-height: 1.4;
}
#settings-panel .set-choices label:has(input:checked) { border-color: var(--carbon); }
#settings-panel .set-choices label span { min-width: 0; overflow-wrap: anywhere; }
#settings-panel .set-choices input:focus-visible { outline: 2px solid var(--carbon); outline-offset: -8px; }
.arrival-plate { margin: 10px auto 22px; max-width: 42rem; padding: 14px 18px 12px;
border-top: 3px solid var(--ink, var(--carbon)); border-bottom: 1px solid var(--rule, #d2d9e8);
background: color-mix(in srgb, var(--sheet, #fffef9) 92%, var(--ink, var(--carbon)) 8%); }
.arrival-plate .plate-kicker { font-family: var(--bill); font-weight: 700; font-size: 12px;
letter-spacing: .18em; text-transform: uppercase; color: var(--steel, #46536f); margin: 0 0 8px; }
.arrival-plate .plate-line { font-family: var(--serif); font-size: 1.22em; line-height: 1.5; margin: 0 0 6px; }
.arrival-plate .plate-line .w { cursor: pointer; border-bottom: 1px dotted var(--rule, #d2d9e8); }
.arrival-plate .plate-en { font-family: var(--serif); font-style: italic; color: var(--steel, #46536f); margin: 0 0 8px; }
.arrival-plate .plate-note { font-family: var(--serif); font-style: italic; font-size: .92em; margin: 0; color: var(--steel, #46536f); }
.plate-howto a, .empty-howto a { display: inline-flex; align-items: center; min-height: 44px;
color: inherit; text-decoration: underline; text-underline-offset: 3px;
text-wrap: balance; }
.empty-howto,
:is(#v-review, #v-course, #v-words) :is(.daily-copy, .course-continuation-copy, .practice-invitation, .word-empty) > p.empty-howto {
margin-block: 10px 0; font: 400 .875rem/1.5 var(--sans); text-align: inherit; }
.pxx-utils a.px-verb { display: inline-flex; align-items: center; column-gap: .25em; }
.foot-ask { margin: 14px 0 18px; }
#desk-host-line.is-quote, #v-home.desk-focused #desk-host-line.is-quote {
font: 400 clamp(1.15rem, 2.2vw, 1.55rem)/1.4 var(--serif); letter-spacing: normal; }
#v-read.first-reading #scene-head { margin: 12px 0; padding: 0; }
#v-read.first-reading #scene-head .orn,
#v-read.first-reading #scene-head .margin-note,
#v-read.first-reading #scene-head .sh-stamp,
#v-read.first-reading #guide { display: none; }
#v-read.first-reading .arrival-plate { margin: 8px auto 14px; padding: 10px 14px; }
#v-read.first-reading .plate-promise { font: 600 .875rem/1.5 var(--sans); margin: 8px 0 0; }
@media (min-width: 1200px) {
#v-review:not(.practice-lobby):not(.practice-finished) #practice-workbench.sd-with-companion {
display: grid; max-width: 1040px; grid-template-columns: minmax(0, 1fr) 196px;
column-gap: 32px; align-items: start; align-content: start;
}
}
#v-review:not(.practice-lobby) #rev-btns { justify-content: center; flex-wrap: wrap; gap: 10px; }
#v-review:not(.practice-lobby) #rev-btns > .primary:only-child { min-width: min(100%, 320px); }
#v-review .margin-note {
position: static; left: auto; top: auto; width: auto; max-width: 34em;
margin: 18px auto 0; text-align: left;
}
.gx-stage.gx-adventure {
--play: var(--world-deep); --play-deep: var(--world-deep);
--lesson-peach: #f5ded0;
--lesson-lilac: #e7e3f4;
--lesson-mint: #dfede4;
padding: 20px max(14px, env(safe-area-inset-right)) 32px max(14px, env(safe-area-inset-left));
}
.gx-stage.gx-adventure .gx {
width: min(820px, 100%); min-width: 0; padding: 0 0 20px;
border: 0; background: transparent !important; box-shadow: none !important; gap: 16px;
transform: none !important;
overflow: visible;
}
.gx-adventure .gx-top {
padding: 0; background: transparent; border: 0;
box-shadow: none; position: static; margin: 0 !important;
}
.gx-adventure .gx-top :is(.gx-topic, .gx-topic *, .gx-count, .gx-quit) { color: var(--carbon); }
.gx-adventure .gx-top .gx-topic { font: 600 .875rem/1.4 var(--sans); letter-spacing: 0; }
.gx-adventure .gx-top .gx-topic :is(i, em),
.gx-adventure .gx-top :is(.gx-runn, .gx-count),
.gx-adventure .gx > :is(.gx-rail, .gx-chbar, .gx-chbar-say, .gx-arcplate, .gx-arc-epi, .gx-arc-wm),
.gx-adventure > .gx-margin { display: none; }
.gx-adventure .gx-top .gx-quit {
min-height: 44px; min-width: 64px; padding: 8px 14px;
background: var(--paper); border: 1px solid var(--world-shadow);
border-radius: var(--r-control); font: var(--fw-strong) .875rem/1.3 var(--sans); letter-spacing: 0; text-transform: none;
}
.gx-adventure .gx-top .gx-quit:hover { background: var(--world-tint); color: var(--carbon); }
.lesson-compass {
display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 20px;
border: 1px solid var(--world-shadow); border-radius: 24px; background: var(--world-tint);
padding: 12px 24px 12px 12px; color: var(--carbon); overflow: hidden;
}
.lesson-window { position: relative; border-radius: 18px; overflow: hidden; min-width: 0; }
.lesson-window > .story-scene { border-radius: 0; }
.lesson-window:has(#gx-who) > .story-scene > .cast-portrait { visibility: hidden; }
.lesson-compass-copy { min-width: 0; display: grid; gap: 8px; }
.lesson-phase, .lesson-small-label { display: block; color: var(--world-text, var(--world-deep)); font: 600 .75rem/1.45 var(--sans); letter-spacing: .06em; }
.lesson-compass h2 { font: 700 clamp(1.4rem, 2.5vw, 1.875rem)/1.15 var(--bill); color: var(--carbon); margin: 0; overflow-wrap: anywhere; text-transform: none; letter-spacing: 0; }
.lesson-progress { display: grid; gap: 8px; max-width: 360px; font: .8125rem/1.35 var(--sans); }
.lesson-progress progress { width: 100%; height: 8px; border: 0; overflow: hidden; border-radius: 99px; background: var(--world-shadow); accent-color: var(--world-deep); }
.lesson-progress progress::-webkit-progress-bar { background: var(--world-shadow); }
.lesson-progress progress::-webkit-progress-value { background: var(--world-deep); border-radius: 99px; }
.lesson-progress progress::-moz-progress-bar { background: var(--world-deep); border-radius: 99px; }
.gx-adventure .gx .lesson-window .gx-mate {
display: grid; position: absolute; left: 36.7%; top: 28.6%; right: auto; bottom: auto;
width: 30%; height: auto; aspect-ratio: 1; margin: 0; transform: none; cursor: default;
}
.gx-adventure .lesson-window .gx-mate::before { display: none; }
.gx-adventure .lesson-window .gx-mate > svg { width: 100%; height: 100%; }
.gx-adventure .lesson-window :is(.gx-mate-line, .gx-slip) { display: none; }
.gx-stage.gx-adventure .gx-mid {
min-width: 0; padding: 28px; border-radius: 24px;
background: var(--paper); border: 1px solid var(--world-shadow);
box-shadow: 0 2px 0 var(--world-shadow); gap: 18px;
}
.gx-adventure .gx-mid[data-kind="teach"] { padding: 0; overflow: hidden; }
.gx-adventure .gx-mid[data-kind="teach"] > :is(.gx-head, .gx-direction) { display: none; }
.gx-adventure .gx-mid[data-kind="teach"] > .gx-after { margin: 0; padding: 0 28px 24px; }
.gx-adventure .gx-mid[data-kind="listen"],
.gx-adventure .gx-mid[data-kind="hearline"] { border-top: 7px solid var(--world-mid); background-image: none; }
.gx-adventure .gx-mid[data-kind="write"],
.gx-adventure .gx-mid[data-kind="order"] { border-top: 7px solid #b2a4ce; background-image: none; }
.gx-adventure .gx-mid[data-kind="gap"],
.gx-adventure .gx-mid[data-kind="form"] { border-top: 7px solid #d2a48c; background-image: none; }
.gx-adventure .gx-mid[data-kind="gram"],
.gx-adventure .gx-mid[data-kind="meaning"],
.gx-adventure .gx-mid[data-kind="word"] { background-image: none; }
.gx-adventure .gx-mid .gx-ask { font: 600 1.05rem/1.5 var(--sans); letter-spacing: 0; margin: 0; flex-wrap: wrap; text-transform: none; }
.gx-adventure .gx-ask .gx-kind { background: var(--world-tint); border: 0; box-shadow: none; border-radius: var(--r-surface); color: var(--world-text, var(--world-deep)); }
.gx-adventure .gx-ask .gx-kind > svg { display: block; width: 36px; height: 36px; }
.gx-adventure .gx-ask .gx-again { display: block; flex-basis: 100%; margin: 0; font-size: var(--t-00); letter-spacing: 0; text-transform: none; }
.gx-adventure .gx-line { font-style: normal; overflow-wrap: anywhere; }
.gx-adventure .gx-opt { min-height: 58px; border: 1px solid var(--world-shadow); border-radius: var(--r-surface); box-shadow: var(--sh-press-quiet); background: var(--paper); color: var(--carbon); font-weight: var(--fw-strong); }
.gx-adventure .gx-opt::before { display: none; }
@media (min-width: 700px) {
.gx-adventure .gx-mid[data-kind="meaning"] .gx-opts,
.gx-adventure .gx-mid[data-kind="word"] .gx-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
.gx-adventure .gx-opt:not(:disabled):hover { background: var(--world-tint); transform: none; }
.gx-adventure .gx-opt:not(:disabled):active { transform: translateY(1px); box-shadow: none; }
.gx-adventure .gx-opt.gx-right { background: color-mix(in srgb, var(--malachite) 13%, var(--galley)); color: var(--carbon); border-color: var(--malachite); box-shadow: none; }
.gx-adventure .gx-opt.gx-wrong { background: color-mix(in srgb, var(--wax) 8%, var(--galley)); color: var(--carbon); border-color: color-mix(in srgb, var(--wax) 50%, transparent); box-shadow: none; }
.gx-adventure :is(.gx-pw, .gx-pg, .gx-tile, .gx-set) {
min-height: 48px; border: 1px solid var(--world-shadow); border-radius: var(--r-control);
box-shadow: var(--sh-press-quiet); padding: 10px 12px;
color: var(--carbon); background: var(--world-tint); font-style: normal;
}
.gx-adventure :is(.gx-pg, .gx-tile) { background: var(--paper); }
.gx-adventure .gx-pg { font: 500 .9375rem/1.5 var(--sans); }
.gx-adventure .gx-pairs { gap: 12px; }
.gx-adventure .gx-pcol { gap: 12px; min-width: 0; }
.gx-adventure .gx-p-sel { outline: 2px solid var(--world-text, var(--world-deep)); outline-offset: 2px; }
.gx-adventure :is(.gx-pw, .gx-pg).gx-p-done { background: #e0efe6; color: #214f3c; border-color: #54856b; box-shadow: none; }
.gx-adventure .gx-after { display: grid; gap: 14px; }
.gx-adventure .gx-after:empty { display: none; }
.gx-adventure .gx-verdict { font: 600 1.05rem/1.5 var(--sans); padding: 16px; border-radius: var(--r-dialog); background: var(--world-tint); color: var(--carbon); border: 0; box-shadow: none; }
.gx-adventure .gx-v-say { font-size: var(--t-3); }
.gx-adventure .gx-v-gloss { font: .875rem/1.45 var(--sans); letter-spacing: 0; margin-top: 5px; }
.gx-adventure .gx-src { padding: 16px; border: 0; border-left: 4px solid var(--world-mid); background: transparent; }
.gx-adventure :is(.gx-eye, .gx-mate-note) > i > svg { display: block; width: 20px; height: 20px; }
.gx-adventure .gx-mid .btn { min-height: 44px; }
.gx-adventure .gx-mid .gx-say { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; }
.gx-adventure .gx-say svg { width: 22px; height: 22px; flex-shrink: 0; }
.gx-adventure :is(button, summary, input):focus-visible { outline: 3px solid var(--world-text, var(--world-deep)); outline-offset: 4px; }
.gx-adventure [hidden] { display: none !important; }
.lesson-discovery { display: grid; gap: 0; }
.lesson-idea { padding: 24px 28px; background: var(--world-tint); }
.lesson-idea > p { margin: 8px 0 0; font: 450 1.05rem/1.65 var(--sans); color: var(--carbon); }
.lesson-note-depth { margin-top: 12px; }
.lesson-note-depth summary, .lesson-translation summary, .gx-adventure .grammar-beat-depth summary { min-height: 44px; display: list-item; padding: 10px 0; cursor: pointer; font: 600 .875rem/1.5 var(--sans); color: var(--world-text, var(--world-deep)); }
.lesson-note-depth p, .lesson-translation p { font: 1rem/1.6 var(--sans); margin: 0 0 10px; }
.lesson-specimen { margin: 0; padding: 24px 28px; border-bottom: 1px solid var(--world-shadow); }
.lesson-specimen .gx-line { margin: 12px 0; font-weight: 600; }
.lesson-line-tools { display: flex; gap: 12px; align-items: start; flex-wrap: wrap; }
.lesson-word-discovery { padding: 20px 28px; }
.lesson-word-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.lesson-word-chips button { min-height: 44px; border: 1px solid var(--world-shadow); border-radius: var(--r-surface); background: var(--lesson-lilac); color: #423e60; padding: 8px 14px; font: 600 1.0625rem/1.4 var(--serif); cursor: pointer; transition: transform 160ms ease; }
.lesson-word-chips button:nth-child(3n + 2) { background: var(--lesson-peach); color: #64412d; }
.lesson-word-chips button:nth-child(3n) { background: var(--lesson-mint); color: #284e3e; }
.lesson-word-chips button[aria-pressed="true"] { outline: 2px solid var(--world-text, var(--world-deep)); outline-offset: 2px; }
.lesson-word-chips button:hover { transform: translateY(-2px); }
#lesson-word-meaning { margin: 12px 0 0; min-height: 1.6em; font: 1rem/1.6 var(--sans); }
.lesson-word-pairs button { display: grid; gap: 2px; text-align: left; padding: 8px 14px 9px; }
.lesson-word-pairs button b { font: 600 1.0625rem/1.3 var(--serif); }
.lesson-word-pairs button small { display: block; font: 400 .8125rem/1.35 var(--sans); opacity: .78; max-width: 16ch; }
.lesson-specimen[data-veiled="1"] .gx-line, .lesson-specimen[data-veiled="1"] .lesson-given-meaning { filter: blur(7px); user-select: none; transition: filter 420ms var(--e-out, ease); }
.lesson-specimen .gx-line, .lesson-specimen .lesson-given-meaning { transition: filter 420ms var(--e-out, ease); }
.lesson-unveil { background: none; border: 0; padding: 4px 0; font: 500 .875rem/1.4 var(--sans); color: var(--steel); text-decoration: underline; cursor: pointer; }
.lesson-specimen:not([data-veiled="1"]) .lesson-unveil { display: none; }
.lesson-scene .scene-lines { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.scene-line { display: grid; grid-template-columns: minmax(3.2em, auto) minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: baseline; }
.scene-line .scene-name { font: 600 .7rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); padding-top: .45em; }
.scene-line .scene-t { font: 400 1.2rem/1.45 var(--serif); }
.scene-line .scene-en { grid-column: 2; font: 400 .875rem/1.45 var(--sans); opacity: .75; }
.scene-line .scene-t, .scene-line .scene-en { transition: filter 420ms var(--e-out, ease); }
.lesson-scene[data-veiled="1"] .scene-line:not([data-said="1"]) .scene-t,
.lesson-scene[data-veiled="1"] .scene-line:not([data-said="1"]) .scene-en { filter: blur(7px); user-select: none; }
.scene-line.is-saying .scene-t { text-decoration: underline; text-decoration-color: var(--g-gold, #b08a2e); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lesson-scene .lesson-line-tools { margin-top: 14px; }
.scene-context { display: grid; grid-template-columns: minmax(3.2em, auto) minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 10px 14px; border-left: 3px solid var(--rule-room, var(--world-shadow)); margin: 6px 0 12px; }
.scene-context .scene-name { font: 600 .7rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.scene-context .scene-t { font: 400 1.1rem/1.45 var(--serif); }
.scene-context .scene-en { grid-column: 2; font: .85rem/1.4 var(--sans); opacity: .75; }
.scene-cue { margin: 0 0 8px; font: 400 1rem/1.5 var(--sans); }
.scene-cue .scene-name { font: 600 .7rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); margin-right: 6px; }
.scene-cue b { font-weight: 600; }
.lesson-scene-replay { margin-bottom: 14px; }
@media (max-width: 560px) { .scene-line, .scene-context { grid-template-columns: 1fr; } .scene-line .scene-en, .scene-context .scene-en { grid-column: 1; } }
.gx-clue-line { margin: 10px 0 0; padding: 10px 14px; border-left: 3px solid var(--g-gold, #b08a2e); background: color-mix(in srgb, var(--paper) 70%, transparent); font: 400 .95rem/1.5 var(--sans); }
html[data-motion="low"] .lesson-specimen :is(.gx-line, .lesson-given-meaning) { transition: none; }
.gx-adventure .gx-gr-body { font: 1.05rem/1.8 var(--sans); }
.gx-adventure .gx-gr-body > .lesson-small-label { margin-bottom: 12px; }
.gx-adventure .gx-gr-body .gx-gr-ru { font-style: normal; }
.gx-adventure .gx-gr-note { font: 1rem/1.65 var(--sans); }
.gx-stage.gx-adventure .gx.gx-done { padding: 0 0 24px; margin: 0; }
.gx-adventure .gx.gx-done > :is(.gx-print, .gx-facts, .gx-night) { margin-inline: 0; }
.gx-adventure .gx.gx-done > .gx-facts { padding-inline: 0; }
.gx-adventure .gx.gx-done > .btnrow { margin-inline: 0; }
.gx-adventure .gx.gx-done > :is(.gx-print, .gx-cols, .gx-facts) { border-radius: 20px; }
.gx-adventure .gx.gx-done .gx-print { padding: 28px; background: var(--world-tint); border: 1px solid var(--world-shadow); }
.gx-adventure .gx-print-ru { font-size: clamp(1.5rem, 3vw, 2rem); }
.gx-adventure .gx.gx-done .lesson-compass { grid-column: 1 / -1; }
@media (max-height: 700px) {
.gx-stage.gx-adventure .gx.gx-done { row-gap: 8px; }
.gx-stage.gx-adventure .gx.gx-done > .gx-print { padding-top: 14px; padding-bottom: 14px; }
.gx-adventure .gx.gx-done > .gx-print > .gx-rule { display: none; }
.gx-adventure .gx.gx-done > .lesson-compass .lesson-source { display: none; }
.gx-adventure .gx.gx-done > .gx-reward > .btnrow { margin-top: 8px; }
}
@media (max-height: 700px), (max-width: 599px) {
html[data-study] .gx-stage.gx-adventure .gx:not(.gx-done):not([data-phase="complete"]) > .lesson-compass {
position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
}
@media (max-width: 599px) {
html[data-study] .gx-stage.gx-adventure .gx-mid[data-kind="listen"] .gx-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-study] .gx-stage.gx-adventure .gx-mid[data-kind="listen"] .gx-head .gx-say { width: 59px; height: 59px; }
html[data-study] .gx-stage.gx-adventure .gx-mid[data-kind="listen"] .gx-listen-big svg { width: 24px; height: 24px; }
}
.gx-adventure .gx-front, .gx-adventure .gx-gr-hint { display: none; }
.gx-adventure .pl { opacity: .15; }
@media (max-width: 560px) {
.gx-stage.gx-adventure { padding-top: 12px; }
.gx-stage.gx-adventure .gx { gap: 12px; }
.lesson-compass { grid-template-columns: 92px minmax(0, 1fr); padding: 10px; gap: 12px; border-radius: 18px; }
.lesson-window { border-radius: var(--r-surface); }
.lesson-window > .story-scene { width: 142px; max-width: none; margin-left: -25px; }
.gx-adventure .gx .lesson-window .gx-mate { width: 45px; left: 28px; top: 24px; }
.lesson-compass h2 { font-size: var(--t-3); }
.lesson-phase { font-size: .6875rem; letter-spacing: .025em; }
.lesson-progress { font-size: .75rem; }
.gx-stage.gx-adventure .gx-mid { padding: 20px 16px; border-radius: 18px; }
.gx-stage.gx-adventure .gx-mid[data-kind="teach"] { padding: 0; }
.lesson-idea, .lesson-specimen, .lesson-word-discovery { padding: 20px 16px; }
.gx-adventure .gx-mid[data-kind="teach"] > .gx-after { padding: 0 16px 20px; }
.gx-adventure .gx-mid .gx-opts { grid-template-columns: 1fr; gap: 12px; }
.gx-adventure .gx-opt { min-height: 50px; padding: 12px 16px; font-size: var(--t-1); }
.gx-adventure .gx-mid .gx-ask { font-size: var(--t-1); }
.gx-adventure .gx-top .gx-topic { font-size: var(--t-00); }
.gx-adventure .gx-mid .btn.primary { width: 100%; }
.gx-adventure .gx-facts { flex-wrap: wrap; }
}
[data-theme="dark"] .gx-stage.gx-adventure { --lesson-peach: #41332f; --lesson-lilac: #38354e; --lesson-mint: #2b4238; }
[data-theme="dark"] .lesson-word-chips button { color: #e2ddfa; }
[data-theme="dark"] .lesson-word-chips button:nth-child(3n + 2) { color: #f2d9c8; }
[data-theme="dark"] .lesson-word-chips button:nth-child(3n) { color: #d1ebdc; }
html[data-motion="low"] .gx-adventure *, html[data-motion="low"] .gx-adventure *::before, html[data-motion="low"] .gx-adventure *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-motion="low"] .gx-adventure .gx-opt:hover, html[data-motion="low"] .gx-adventure .gx-mid .btn.primary:hover, html[data-motion="low"] .lesson-word-chips button:hover { transform: none; }
#v-review:not(.practice-lobby):not(.practice-finished) #practice-workbench {
display: flex; flex-direction: column;
min-height: calc(100svh - var(--practice-top, 110px) - 12px);
overflow-anchor: none;
}
#v-review:not(.practice-lobby):not(.practice-finished) #rev-card { flex: 1; }
#v-review:not(.practice-lobby):not(.practice-finished) #rev-btns {
display: flex; flex: none; min-height: 76px; box-sizing: border-box;
margin-top: 12px; align-items: center;
}
#v-review #rev-btns:empty { visibility: hidden; pointer-events: none; }
#rev-card:focus { outline: none; }
#v-review #rev-btns button { min-height: 48px; }
.gx-stage .gx-mid { overflow-anchor: none; }
.gx-adventure .gx-mid[data-beat="ctx"] .gx-after:not(:empty),
.gx-adventure .gx-mid[data-beat="rwl"] .gx-after:not(:empty) {
position: sticky; bottom: 0; z-index: 6;
padding-block: 14px max(14px, env(safe-area-inset-bottom, 0px));
background: var(--paper);
box-shadow: 0 -10px 14px -8px color-mix(in srgb, var(--carbon) 22%, transparent);
}
.gx-stage.gx-adventure .gx-mid[data-beat="ctx"] .gx-after > #gx-next,
.gx-stage.gx-adventure .gx-mid[data-beat="rwl"] .gx-after > #gx-next {
position: static;
}
.gx-stage.gx-adventure .gx-mid,
.gx-stage.gx-adventure .gx-mid > :is(.gx-ask, .gx-head, .gx-body) {
animation: none; transform: none;
}
.gx-stage.gx-adventure { scrollbar-gutter: stable; }
.gx-stage.gx-adventure[data-gram="on"] { grid-template-columns: minmax(0,1fr); column-gap: 0; }
.gx-stage.gx-adventure[data-gram="on"] > .gx { grid-column: 1; width: min(920px,100%); margin-inline: auto; }
.gx-stage.gx-adventure[data-gram="on"] .gx-gr-body { max-width: 68ch; }
.g-recall-built, .g-recall-tiles { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 16px; }
.g-recall-built { min-height: 62px; padding: 10px; border: 2px dashed var(--world-shadow); border-radius: var(--r-dialog); background: var(--world-tint); }
.g-recall-built .btn, .g-recall-tiles .btn { min-height: 46px; min-width: 52px; padding: 10px 14px; font: 500 1.15rem/1.35 var(--serif); text-transform: none; letter-spacing: 0; }
.g-recall-tiles .btn:disabled { opacity: .35; cursor: default; }
.grammar-discovery .btnrow { flex-wrap: wrap; }
.grammar-discovery .btnrow .btn { white-space: normal; }
#g-recall-check:disabled { opacity: .45; cursor: default; }
.g-recall-label { font: 500 .9375rem/1.5 var(--sans); }
.grammar-discovery .btn:focus-visible { outline: 3px solid var(--world-text, var(--carbon)); outline-offset: 4px; }
.lesson-task-hint { font: .9375rem/1.55 var(--sans); color: var(--carbon); margin: 0 0 14px; }
.lesson-source { font: .8125rem/1.4 var(--serif); color: var(--carbon); }
.gx-stage.gx-adventure .gx-mid[data-kind="order"] .gx-stick { min-height: 100px; }
.gx-stage.gx-adventure .gx-mid[data-kind="order"] .gx-tile:disabled { visibility: hidden; }
#v-profile .room-head::after { display: none; }
.profile-play { border: 1px solid var(--rule-room); border-radius: 24px; overflow: hidden; margin-block: 24px; background: var(--paper); }
.profile-level { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 24px; align-items: center; padding: 24px; background: color-mix(in srgb, var(--paper) 85%, #a59ad4); }
.profile-level-art { border-radius: 18px; overflow: hidden; }
.profile-level h2 { margin: 6px 0; font: 700 clamp(1.6rem,3vw,2.25rem)/1.2 var(--bill); text-transform: none; letter-spacing: 0; }
.profile-level h2 span { font: 400 1rem/1.4 var(--serif); }
.profile-level p, .profile-week p { margin: 8px 0; font: .9375rem/1.5 var(--sans); }
.profile-play progress { display: block; width: 100%; height: 10px; border: 0; border-radius: 99px; overflow: hidden; accent-color: var(--world-deep, #405b92); background: var(--rule-room); }
.profile-play progress::-webkit-progress-bar { background: var(--rule-room); }
.profile-play progress::-webkit-progress-value { background: var(--world-deep, #405b92); border-radius: 99px; }
.profile-level-distance { display: block; margin-top: 8px; font: .8125rem/1.45 var(--sans); }
.profile-week, .profile-quests { padding: 24px; }
.profile-play h3 { margin: 0; font: 400 1.3rem/1.3 var(--serif); }
.profile-week-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.profile-week-head label { display: flex; align-items: center; gap: 10px; font: .8125rem var(--sans); }
.profile-week-head select { min-height: 44px; min-width: 64px; border: 1px solid var(--rule-room); background: var(--paper); color: var(--carbon); border-radius: var(--r-surface); padding: 8px; }
.profile-week-pages { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; margin-top: 18px; }
.profile-day { display: grid; place-items: center; gap: 8px; padding: 12px 4px; border: 1px solid var(--rule-room); border-radius: 8px 14px 14px 8px; font: .75rem var(--sans); background: var(--paper); }
.profile-day b { width: 24px; height: 24px; }
.profile-day b svg { width: 100%; height: 100%; }
.profile-day.is-earned { background: #dfede4; color: #284e3e; border-color: #96b5a1; box-shadow: 0 3px 0 #b4cdbd; }
.profile-day.is-today { outline: 2px solid var(--world-text, var(--carbon)); outline-offset: 2px; }
.profile-day.is-future { color: var(--steel); }
.profile-week .profile-week-note { margin-top: 16px; font-size: var(--t-00); }
#my-goals { scroll-margin-top: 88px; }
#my-goals .profile-goals { margin-top: 18px; border-top: 1px solid var(--rule-room); }
#my-goals .profile-goals .pg-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 8px 16px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule-room); font: .9375rem/1.45 var(--sans); }
#my-goals .profile-goals select { min-height: 44px; min-width: 64px; border: 1px solid var(--rule-room); background: var(--paper);
color: var(--carbon); border-radius: var(--r-surface); padding: 8px; }
#my-goals .profile-goals .pg-aim b { flex: 1 1 12em; font-weight: 600; }
#my-goals .profile-goals .pxx-if, #my-goals .profile-goals .pxx-if.is-empty { font: italic .9375rem/1.5 var(--serif); color: inherit; }
#my-goals .profile-goals .pxx-if.is-empty { color: var(--steel); }
#my-goals .profile-goals .pxx-if button { font: .8125rem/1.5 var(--sans); }
#my-goals .profile-goals .plan-edit { flex: 1 1 100%; }
.desk-goals-door { margin: 12px 0 0; font: .875rem/1.5 var(--sans); }
.profile-quests { border-top: 1px solid var(--rule-room); }
.profile-quest-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.profile-quest { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 10px; min-width: 0; padding: 18px; border: 1px solid var(--rule-room); border-radius: 18px; background: color-mix(in srgb, var(--paper) 92%, #b2a4ce); color: var(--carbon); font: .875rem/1.45 var(--sans); cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease; }
.profile-quest:nth-child(2) { background: color-mix(in srgb, var(--paper) 88%, #d9a477); }
.profile-quest:nth-child(3) { background: color-mix(in srgb, var(--paper) 88%, #7faa91); }
.profile-quest strong { font: 400 1.125rem/1.3 var(--serif); }
.profile-quest-art { width: 62px; height: 62px; }
.profile-quest-art svg { width: 100%; height: 100%; }
.profile-quest-progress { margin-top: auto; font-weight: 700; padding-top: 6px; }
.profile-quest:hover { transform: translateY(-3px); box-shadow: 0 2px 0 var(--rule-room); }
.profile-quest:active { transform: translateY(1px); }
.profile-quest.is-earned { border-color: #83a58f; }
.profile-keep { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 24px; border-top: 1px solid var(--rule-room); font: .9375rem/1.5 var(--sans); }
.profile-play :is(button,select):focus-visible { outline: 3px solid var(--carbon); outline-offset: 4px; }
@media (max-width: 600px) {
.profile-level { grid-template-columns: 92px minmax(0,1fr); gap: 14px; padding: 18px; }
.profile-level h2 span { display: block; }
.profile-week, .profile-quests { padding: 18px; }
.profile-week-pages { gap: 5px; }
.profile-day { font-size: .75rem; min-width: 0; }
.profile-day > span:last-child { display: none; }
.profile-quest-grid { grid-template-columns: 1fr; }
.profile-quest { display: grid; grid-template-columns: 60px minmax(0,1fr); gap: 6px 14px; }
.profile-quest-art { grid-row: span 4; align-self: center; }
.profile-quest > :not(.profile-quest-art) { grid-column: 2; }
}
html[data-motion="low"] .profile-quest { transition: none; }
html[data-motion="low"] .profile-quest:hover { transform: none; }
#v-course .rd-lessons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; border: 0; margin-block: 20px; }
#v-course .rd-lessons > .rd-gram { grid-column: 1 / -1; }
#v-course .rd-lessons > .rd-lesson { grid-template-columns: 30px minmax(0,1fr); align-content: start; gap: 10px; padding: 18px; border: 1px solid var(--rule-room); border-radius: var(--r-dialog); background: var(--paper); box-shadow: 0 2px 0 var(--rule-room); }
#v-course .rd-lessons > .rd-l-here { background: color-mix(in srgb, var(--paper) 86%, var(--ink)); border-color: var(--ink); }
#v-course .rd-lessons .rd-l-state { grid-column: 2; text-align: left; font: 600 .875rem/1.4 var(--sans); color: var(--carbon); }
#v-course .rd-l-state small { display: block; margin-top: 4px; font-weight: 400; }
#v-course .rd-lessons .rd-l-ru { font-size: var(--t-1); line-height: 1.5; }
#v-course .rd-lessons .rd-hand { display: inline-block; width: 16px; height: 16px; }
#v-course .rd-lessons .rd-hand svg { width: 100%; height: 100%; }
@media (max-width: 600px) { #v-course .rd-lessons { grid-template-columns: 1fr; } }
#app-update { position: fixed; z-index: 180; bottom: max(16px,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 32px); padding: 12px 16px; border: 1px solid var(--carbon); border-radius: var(--r-dialog); background: var(--paper); color: var(--carbon); box-shadow: 0 6px 24px #17213a22; font: .875rem/1.4 var(--sans); box-sizing: border-box; }
#app-update .btn { flex-shrink: 0; }
body.gx-on #app-update,
body:has(#v-read.show) #app-update,
body:has(.overlay.show) #app-update,
body:has(#v-review.show:not(.practice-lobby):not(.practice-finished)) #app-update { display: none; }
@media (max-width: 600px) { #app-update { flex-wrap: wrap; } #app-update > span { flex: 1 1 100%; } }
.profile-ticket { margin-block: 20px; }
.profile-ticket > summary { min-height: 44px; padding: 12px; cursor: pointer; font: 600 1rem/1.4 var(--sans); border-bottom: 1px solid var(--rule-room); }
.course-atlas { margin: 24px 0; }
.atlas-heading { margin-bottom: 22px; }
.atlas-heading h2, .grammar-map-head h2 { font: 400 clamp(1.65rem,3vw,2.3rem)/1.15 var(--serif); margin: 8px 0 12px; text-transform: none; letter-spacing: -.02em; }
.atlas-heading p, .grammar-map-head p { font: 1rem/1.6 var(--sans); margin: 0; color: var(--steel); }
.level-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.level-tab, .grammar-family { --atlas-tint: #e3eee6; --atlas-ink: #345b50; }
:is(.level-tab,.grammar-family)[data-color="1"] { --atlas-tint: #e4eaf7; --atlas-ink: #405888; }
:is(.level-tab,.grammar-family)[data-color="2"] { --atlas-tint: #f5e8d7; --atlas-ink: #795738; }
:is(.level-tab,.grammar-family)[data-color="3"] { --atlas-tint: #ede4f2; --atlas-ink: #6b4f7b; }
.level-tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; min-width: 0; padding: 20px; border: 2px solid var(--rule); border-top: 3px solid var(--atlas-ink); border-radius: 22px 22px 22px 6px; background: var(--learning-surface,var(--galley)); color: var(--carbon); box-shadow: none; text-align: left; font: .8125rem/1.5 var(--sans); cursor: pointer; transition: transform 160ms ease,box-shadow 160ms ease; }
.level-tab-code { font: 700 1.75rem/1 var(--bill); }
.level-tab strong { font: 600 1rem/1.35 var(--sans); }
.level-tab > span:last-of-type { margin-top: auto; }
.level-tab[aria-selected="true"] { border-color: var(--pine); border-top-color: var(--atlas-ink); background: color-mix(in srgb,var(--signal) 10%,var(--learning-surface,var(--galley))); box-shadow: 0 3px 0 var(--rule); }
.level-tab:hover { transform: translateY(-3px); }
.level-tab progress { width: 100%; height: 5px; accent-color: var(--atlas-ink); border: 0; border-radius: var(--r-surface); overflow: hidden; }
.level-tab progress::-webkit-progress-bar { background: color-mix(in srgb,var(--atlas-ink) 18%,transparent); }
.level-tab progress::-webkit-progress-value { background: var(--atlas-ink); }
.level-caption { font: .8125rem/1.5 var(--sans); color: var(--steel); margin: 16px 0 28px; }
.level-panel[hidden], .grammar-family[hidden] { display: none !important; }
.level-intro { display: grid; grid-template-columns: minmax(0,1fr) 180px; align-items: center; gap: 24px; padding: 24px; border-radius: 24px; background: var(--paper); border: 1px solid var(--rule-room); }
.level-intro h2 { font: 400 1.7rem/1.2 var(--serif); margin: 8px 0; }
.level-intro p { font: .9375rem/1.6 var(--sans); margin: 0; color: var(--steel); }
.level-intro-art { display: block; overflow: hidden; border-radius: 18px; }
.level-intro-art svg { display: block; width: 100%; height: auto; }
.level-section-title { margin: 32px 0 10px; font: 400 1.45rem/1.3 var(--serif); }
.level-section-note { font: .9375rem/1.5 var(--sans); color: var(--steel); }
#v-course .course-atlas .syl-arcs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; padding: 0; border: 0; margin-top: 20px; }
#v-course .course-atlas .syl-arc { display: flex; align-items: center; gap: 18px; min-width: 0; padding: 22px; border: 1px solid var(--rule-room); border-radius: 22px; background: color-mix(in srgb,#e2ece5 65%,var(--paper)); color: var(--carbon); box-shadow: 0 2px 0 var(--rule-room); transition: transform 160ms ease; }
#v-course .course-atlas .syl-arc:nth-child(3n+2) { background: color-mix(in srgb,#e7e2f0 65%,var(--paper)); }
#v-course .course-atlas .syl-arc:nth-child(3n) { background: color-mix(in srgb,#f2e4d3 65%,var(--paper)); }
#v-course .course-atlas .syl-arc:hover { transform: translateY(-3px); }
#v-course .course-atlas .syl-mark { flex: 0 0 64px; width: 64px; height: 64px; background: none; border: 0; }
.syl-mark svg { width: 100%; height: 100%; }
#v-course .course-atlas .syl-arc-mid b { font: 400 1.2rem/1.3 var(--serif); }
#v-course .course-atlas .syl-arc-mid em { font: .8125rem/1.5 var(--sans); margin-top: 6px; }
#v-course .course-atlas .syl-card { border-radius: 18px; border: 1px solid var(--rule-room); padding: 20px; background: var(--paper); }
.level-extras { margin-top: 24px; border-top: 1px solid var(--rule-room); }
.level-extras > summary { padding: 18px 0; min-height: 44px; cursor: pointer; font: 600 .9375rem/1.5 var(--sans); }
.level-coming { padding: 28px; margin: 20px 0; border: 1px dashed var(--rule-room); border-radius: 20px; background: var(--paper); }
.level-coming strong { font: 400 1.3rem var(--serif); }
.level-coming p { font: 1rem/1.6 var(--sans); max-width: 60ch; }
.course-atlas .course-trail { margin-top: 24px; }
.course-atlas .trail-heading-art { display: none; }
.course-atlas .trail-heading h2 { font-size: var(--t-4); }
.grammar-map-head { grid-column: 1/-1; display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 10px; }
.grammar-map-head > span { flex: 0 0 84px; }
.grammar-map-head > span svg { display: block; width: 100%; height: auto; }
.grammar-family { grid-column: 1/-1; min-width: 0; border: 1px solid var(--rule-room); border-radius: 22px; background: var(--paper); overflow: clip; margin: 6px 0; }
.grammar-family > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 20px; padding: 22px; background: var(--atlas-tint); color: var(--atlas-ink); }
.grammar-family > summary::-webkit-details-marker { display: none; }
.grammar-family-art { flex: 0 0 68px; }
.grammar-family-art svg { display: block; width: 100%; height: auto; transition: transform 180ms ease; }
.grammar-family > summary:hover .grammar-family-art svg { transform: rotate(-5deg) translateY(-2px); }
.grammar-family-copy { display: grid; gap: 6px; min-width: 0; flex: 1; }
.grammar-family-copy strong { font: 400 1.4rem/1.25 var(--serif); }
.grammar-family-copy :is(span,small) { font: var(--type-body)/1.5 var(--sans); overflow-wrap:anywhere; }
.grammar-family-meter { border: 1px solid currentColor; border-radius: 50%; min-width: 3em; min-height: 3em; padding:.35em; display: grid; place-content: center; font: 600 var(--type-meta)/1.4 var(--sans); }
.grammar-family-lessons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding: 20px; }
.glist .grammar-family .glesson-card { min-width: 0; border: 1px solid var(--rule-room); border-radius: var(--r-dialog); padding: 20px; background: var(--paper); min-height: 190px; box-shadow: 0 3px 0 var(--rule-room); }
.g-open-label { display: flex; align-items: center; gap: 10px; margin-top: 20px; color: var(--world-text,var(--steel)); font: 600 .8125rem/1.5 var(--sans); }
.g-open-label svg { width: 20px; height: 20px; }
:is(.level-tab,.grammar-family > summary):focus-visible { outline: 3px solid var(--carbon); outline-offset: 4px; }
[data-theme="dark"] :is(.level-tab,.grammar-family) { --atlas-tint: #293f3d; --atlas-ink: #d0e9db; }
[data-theme="dark"] :is(.level-tab,.grammar-family)[data-color="1"] { --atlas-tint: #303d59; --atlas-ink: #d8e3fc; }
[data-theme="dark"] :is(.level-tab,.grammar-family)[data-color="2"] { --atlas-tint: #4a3c31; --atlas-ink: #f5dfc2; }
[data-theme="dark"] :is(.level-tab,.grammar-family)[data-color="3"] { --atlas-tint: #44374e; --atlas-ink: #ebdbf5; }
[data-theme="dark"] #v-course .course-atlas .syl-arc { background: #293f3d; }
[data-theme="dark"] #v-course .course-atlas .syl-arc:nth-child(3n+2) { background: #44374e; }
[data-theme="dark"] #v-course .course-atlas .syl-arc:nth-child(3n) { background: #4a3c31; }
@media (max-width: 700px) {
.level-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.level-tab { padding: 16px; }
.level-intro { grid-template-columns: minmax(0,1fr) 92px; padding: 18px; gap: 12px; }
.level-intro h2 { font-size: 1.4rem; }
.level-intro p { font-size: var(--t-0); }
#v-course .course-atlas .syl-arcs, .grammar-family-lessons { grid-template-columns: 1fr; }
.grammar-family > summary { padding: 16px; gap: 12px; }
.grammar-family-art { flex-basis: 48px; }
.grammar-family-copy strong { font-size: var(--t-3); }
.grammar-family-meter { min-width: 3em; min-height: 3em; font-size: var(--type-meta); }
.grammar-family-lessons { padding: 14px; }
.grammar-map-head > span { flex-basis: 56px; }
}
html[data-motion="low"] :is(.level-tab,.syl-arc,.grammar-family-art svg), html[data-motion="low"] #v-course .course-atlas .syl-arc { transition: none; transform: none !important; }
:is(.atlas-heading,.level-intro,.grammar-map-head) { position: static; top: auto; z-index: auto; box-shadow: none; }
.atlas-heading, .grammar-map-head { background: transparent; border: 0; padding: 0; }
.level-intro h2, .level-section-title { text-transform: none; letter-spacing: normal; }
.grammar-family:not([open]) { grid-column: auto; }
@media (max-width: 700px) { .grammar-family:not([open]) { grid-column: 1/-1; } }
@media (max-width: 700px) {
.atlas-heading > :is(.smallcaps,p) { display: none; }
.atlas-heading h2 { font-size: 1.65rem; margin: 0 0 18px; }
.level-tab { padding: 14px; gap: 8px; }
}
.workshop-shelf { margin: 32px 0; }
.workshop-return { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; width: 100%; padding: 18px 22px; margin: 20px 0; border: 1px solid var(--world-shadow); border-radius: 18px; background: var(--world-tint); color: var(--carbon); text-align: left; cursor: pointer; }
.workshop-return > span:first-child { font: 600 .8125rem/1.4 var(--sans); }
.workshop-return strong { flex: 1; font: 600 1.1rem/1.4 var(--serif); }
.workshop-return svg { width: 24px; height: 24px; }
.workshop-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.workshop-card {
--wk-tint: #e2eee6; --wk-edge: #a9c8b7;
display: grid; grid-template-columns: 72px minmax(0,1fr) 24px; align-items: center;
gap: 16px; min-height: 164px; padding: 20px; text-align: left;
border: 1px solid var(--wk-edge); border-radius: 22px; background: var(--paper);
color: var(--carbon); box-shadow: 0 2px 0 var(--wk-tint); cursor: pointer;
transition: transform 160ms ease, box-shadow 160ms ease; overflow-wrap: anywhere;
}
.workshop-card[data-color="1"] { --wk-tint: #e1e8f7; --wk-edge: #b1bfdc; }
.workshop-card[data-color="2"] { --wk-tint: #f5e8d4; --wk-edge: #dcc199; }
.workshop-card[data-color="3"] { --wk-tint: #ebe3f3; --wk-edge: #c8b6db; }
.workshop-card-art { --art-ground: var(--wk-tint); display: block; width: 72px; }
.workshop-card-art svg { display: block; width: 100%; height: auto; }
.workshop-card-copy { display: grid; gap: 7px; min-width: 0; }
.workshop-card-copy .smallcaps { font: 600 .75rem/1.4 var(--sans); letter-spacing: .06em; }
.workshop-card-copy strong { font: 600 1.35rem/1.18 var(--serif); }
.workshop-card-copy > span:not(.smallcaps) { font: 400 .875rem/1.45 var(--sans); }
.workshop-card-copy em { font: 500 .8125rem/1.4 var(--sans); }
.workshop-card-go svg { width: 22px; height: 22px; }
.workshop-card:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--wk-tint); }
.workshop-card:hover .art-object { transform: translateY(-3px) rotate(-3deg); transform-origin: center; }
.workshop-card:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--wk-tint); }
.workshop-card:focus-visible { outline: 3px solid var(--world-deep); outline-offset: 4px; }
.workshop-complete .workshop-card-go { color: #3c7658; }
.gx-stage.wk-stage { overflow-y: auto; scroll-padding-block: 20px 110px; }
.wk-stage .wk-sheet { max-width: 820px; margin: auto; }
.wk-stage .lesson-compass { min-height: 0; }
.wk-stage .lesson-window { max-height: 132px; }
.wk-stage .lesson-window > svg { height: 132px; object-fit: contain; }
.wk-stage .wk-body { display: flex; flex-direction: column; gap: 16px; text-align: left; outline: none; }
.wk-body p { margin: 0; }
.wk-body :is(h3,h4) { text-transform: none; letter-spacing: 0; }
.wk-body .wk-line { font: 500 clamp(1.35rem,3vw,1.85rem)/1.5 var(--serif); color: var(--carbon); overflow-wrap: anywhere; }
.wk-line mark { padding: 2px 5px; border-radius: var(--r-control); background: var(--world-tint); color: inherit; }
.wk-blank { display: inline-block; min-width: 50px; padding: 0 10px; border-bottom: 2px solid var(--world-deep); text-align: center; }
.wk-body .wk-meaning { font: 500 1rem/1.5 var(--sans); color: var(--carbon); }
.wk-reference, .wk-hint { border-top: 1px solid var(--world-shadow); padding-top: 12px; }
.wk-reference summary, .wk-hint summary { cursor: pointer; font: 600 .875rem/1.5 var(--sans); min-height: 36px; }
.wk-reference p, .wk-hint p { margin: 10px 0 0; font: 400 1rem/1.7 var(--sans); }
.wk-body .wk-note { font: 400 .8125rem/1.5 var(--sans); opacity: .8; }
.wk-task-heading { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wk-revisit { font: 600 .8125rem/1.4 var(--sans); color: var(--world-text, var(--carbon)); }
.wk-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.wk-options .gx-opt { padding: 14px 12px; overflow-wrap: anywhere; font: 600 1.15rem/1.4 var(--serif); text-align: center; }
.wk-options .gx-opt::after { content: none !important; }
.wk-footer { position: sticky; bottom: 0; z-index: 4; display: flex; gap: 12px; justify-content: flex-end; align-items: center; min-height: 76px; padding: 14px 0 max(14px, env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--world-shadow); }
.wk-footer .btn[hidden] { display: none; }
.wk-footer .btn:disabled { opacity: .5; cursor: default; }
.wk-stage :is(.wk-input,textarea) { display: block; width: 100%; min-width: 0; box-sizing: border-box; padding: 14px; border: 2px solid var(--world-shadow); border-radius: var(--r-surface); background: var(--paper); color: var(--carbon); font: 500 1.15rem/1.5 var(--sans); }
.wk-stage :is(.wk-input,textarea):focus { outline: 2px solid var(--world-deep); outline-offset: 2px; }
.wk-stage label { display: block; font: 600 .875rem/1.5 var(--sans); margin-bottom: 8px; }
#wk-keys { margin-top: 12px; display: block; }
.wk-tiles, .wk-assembled { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-assembled { min-height: 58px; padding: 12px; border-radius: var(--r-dialog); background: var(--world-tint); align-items: center; }
.wk-assembled > span { font: 400 .875rem/1.4 var(--sans); }
.wk-token { padding: 10px 12px; min-height: 44px; border: 1px solid var(--world-shadow); border-radius: var(--r-surface); background: var(--paper); color: var(--carbon); font: 500 1rem/1.5 var(--sans); cursor: pointer; }
.wk-token:disabled { opacity: .3; cursor: default; }
.wk-token:focus-visible, .wk-key:focus-visible { outline: 2px solid var(--world-deep); outline-offset: 2px; }
.wk-verdict { padding: 16px; border-radius: var(--r-dialog); background: var(--world-tint); font: 400 1rem/1.5 var(--sans); }
.wk-verdict:empty { display: none; }
.wk-verdict strong { display: block; margin-bottom: 8px; }
.wk-verdict p + p { margin-top: 8px; }
.wk-verdict small { display: block; margin-top: 8px; font-size: var(--t-0); }
.wk-correct { background: #dfede4; color: #264d3b; animation: wk-settle 180ms ease-out; }
.wk-correction { background: #f5e8d4; color: #614623; }
.wk-transfer { margin-top: 12px; display: grid; gap: 12px; }
.wk-transfer h4 { margin: 0; font: 600 1.2rem/1.4 var(--serif); }
.wk-transfer label { margin: 0; }
.wk-review-date { font: 600 .875rem/1.5 var(--sans); }
#wk-note-status { font-size: var(--t-00); min-height: 1.5em; }
@keyframes wk-settle { from { transform: translateY(3px); } to { transform: translateY(0); } }
[data-theme="dark"] .workshop-card { --wk-tint: #293f3d; --wk-edge: #53746b; }
[data-theme="dark"] .workshop-card[data-color="1"] { --wk-tint: #303d59; --wk-edge: #637495; }
[data-theme="dark"] .workshop-card[data-color="2"] { --wk-tint: #4a3c31; --wk-edge: #907b60; }
[data-theme="dark"] .workshop-card[data-color="3"] { --wk-tint: #44374e; --wk-edge: #8a739e; }
[data-theme="dark"] .wk-correct { background: #294538; color: #e1f2e6; }
[data-theme="dark"] .wk-correction { background: #4a3c31; color: #f5dfc2; }
[data-theme="dark"] .workshop-complete .workshop-card-go { color: #a7d6ba; }
@media (max-width:700px) {
.workshop-cards { grid-template-columns: 1fr; }
.workshop-card { min-height: 144px; padding: 16px; grid-template-columns: 64px minmax(0,1fr) 20px; gap: 12px; }
.workshop-card-art { width: 64px; }
.wk-stage .lesson-compass { grid-template-columns: 72px minmax(0,1fr); gap: 14px; }
.wk-stage .lesson-window, .wk-stage .lesson-window > svg { height: 72px; }
.wk-stage .lesson-compass h2 { font-size: var(--t-3); }
.wk-stage .lesson-compass-copy { gap: 6px; }
.wk-stage .gx-mid.wk-body { padding: 20px; }
.wk-options { grid-template-columns: 1fr; gap: 9px; }
.wk-options .gx-opt { min-height: 48px; padding: 10px; }
.wk-footer .btn { flex: 1; }
}
html[data-motion="low"] :is(.workshop-card, .workshop-card .art-object) { transition: none; }
html[data-motion="low"] :is(.workshop-card:hover, .workshop-card:hover .art-object, .workshop-card:active) { transform: none; }
html[data-motion="low"] .wk-correct { animation: none; }
.wk-stage { background: var(--paper); }
.wk-stage .wk-sheet { max-width: 940px; padding: clamp(16px,4vw,40px); }
.wk-stage .lesson-compass { border: 0; padding: 0 0 18px; grid-template-columns: 88px minmax(0,1fr); }
.wk-stage .lesson-window, .wk-stage .lesson-window > svg { height: 88px; }
.wk-stage .lesson-compass h2 { font: 400 clamp(1.4rem,3vw,2rem)/1.2 var(--serif); }
.wk-stage .ink-challenge { position: relative; border-radius: var(--r-dialog); padding: 12px 18px; background: var(--world-tint); }
.wk-stage .ink-challenge-heading { gap: 12px; }
.wk-stage .ink-message { margin: 5px 0; }
.wk-stage .ink-rules { font-size: var(--t-00); }
.wk-page-slots { display: flex; gap: 8px; margin: 20px 0; }
.wk-page-slots > span { flex: 1; min-width: 0; padding: 9px; border: 1px solid var(--world-shadow); border-radius: 3px 3px 9px 3px; opacity: .5; transition: background .25s, opacity .25s, transform .25s; }
.wk-page-slots b { font: 600 .65rem var(--sans); }
.wk-page-slots i { display: block; height: 2px; margin-top: 5px; background: currentColor; opacity: .3; }
.wk-page-slots i:last-child { width: 60%; }
.wk-page-slots .is-restored { opacity: 1; background: var(--world-tint); color: var(--world-text,var(--world-deep)); transform: translateY(-3px); }
.wk-opening { padding: clamp(12px,3vw,30px) 0; }
.wk-opening h3 { max-width: 540px; margin: 16px 0; font: 400 clamp(2rem,5vw,3.3rem)/1.12 var(--serif); }
.wk-stage .wk-body { gap: 20px; }
.wk-stage .wk-body > .wk-line { padding: 6px 0 14px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; margin: 0; font-size: clamp(1.5rem,3.5vw,2rem); box-shadow: none; }
.wk-stage[data-task="meaning"] .wk-options { display: grid; grid-template-columns: 1fr; }
.wk-stage[data-task="meaning"] .wk-options button { text-align: left; font: 500 1rem/1.5 var(--sans); padding: 18px 22px; }
.wk-stage[data-task="repair"] .wk-error { text-decoration: underline wavy; text-underline-offset: 5px; }
.wk-stage .wk-task-heading { font-size: var(--t-0); color: var(--world-text,var(--world-deep)); }
.wk-stage .wk-verdict { border-radius: var(--r-dialog); padding: 20px; }
.wk-stage .wk-footer { gap: 12px; padding-top: 20px; }
@media (max-width: 560px) {
.wk-stage .wk-sheet { padding: 14px; }
.wk-page-slots { gap: 5px; margin: 12px 0; }
.wk-page-slots > span { padding: 6px; }
.wk-stage .lesson-compass { grid-template-columns: 60px minmax(0,1fr); gap: 10px; }
.wk-stage .lesson-window, .wk-stage .lesson-window > svg { height: 60px; }
}
.gx-stage.wk-stage .wk-sheet .lesson-compass { min-height: 0; margin: 4px 0 12px; padding: 12px; border-radius: var(--r-dialog); }
.gx-stage.wk-stage .wk-sheet .ink-challenge { margin: 0; padding: 10px 16px; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; }
.gx-stage.wk-stage .wk-sheet .ink-challenge-heading { grid-row: 1; grid-column: 1 / -1; }
.gx-stage.wk-stage .wk-sheet .ink-message { margin: 0; font-size: var(--t-00); }
.gx-stage.wk-stage .wk-sheet .ink-tally { font-size: .72rem; }
.gx-stage.wk-stage .wk-sheet .ink-rules { grid-column: 1 / -1; margin: 0; font-size: .72rem; }
.gx-stage.wk-stage .wk-sheet .wk-page-slots { margin: 12px 0; }
.gx-stage.wk-stage .wk-sheet .wk-page-slots > span { padding: 4px 8px; }
.gx-stage.wk-stage .wk-sheet .wk-page-slots i { margin-top: 3px; }
.gx-stage.wk-stage .wk-sheet .wk-page-slots i:last-child { display: none; }
.gx-stage.wk-stage .wk-sheet .wk-body { padding: clamp(16px,3vw,28px); margin-top: 0; }
.gx-stage.wk-stage .wk-sheet .wk-options button { min-height: 52px; padding: 14px; }
.gx-stage.wk-stage .wk-sheet .wk-body > .wk-line { padding: 20px; }
@media (max-width: 560px) {
.gx-stage.wk-stage .wk-sheet .ink-tally { grid-column: 1 / -1; }
.gx-stage.wk-stage .wk-sheet .lesson-compass h2 { font-size: var(--t-2); }
.gx-stage.wk-stage .wk-sheet .wk-body { padding: 16px; gap: 14px; }
}
.reader-passport { display:grid; grid-template-columns:100px minmax(0,1fr); gap:16px 24px; padding:28px; margin:20px 0 30px; border:1px solid var(--world-shadow,#cdc5b7); border-radius:8px 24px 24px 8px; background:var(--paper,#fffaf0); color:var(--carbon,#252c37); box-shadow:0 2px 0 var(--world-tint,#e5e7ef); }
.passport-emblem { position:relative; display:grid; place-items:center; width:96px; height:112px; border-radius:48px 48px 10px 10px; background:var(--world-tint,#e5e7ef); color:var(--world-deep,#394b74); border:2px solid currentColor; }
.passport-emblem > svg { width:70px; height:70px; }
.passport-emblem b { position:absolute; bottom:-9px; padding:4px 14px; border-radius:20px; background:var(--world-deep,#394b74); color:var(--paper,#fffaf0); font:600 1rem var(--sans); }
.passport-copy h3 { font:400 clamp(1.6rem,3vw,2.2rem)/1.2 var(--serif); margin:6px 0 10px; }
.passport-copy p { margin:7px 0 0; font:500 .82rem/1.4 var(--sans); }
.passport-copy progress { display:block; width:100%; height:9px; margin-top:12px; accent-color:var(--world-deep,#394b74); }
.passport-points { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font:600 .86rem var(--sans); }
.passport-collection { grid-column:1 / -1; padding-top:14px; border-top:1px solid var(--world-shadow,#cdc5b7); }
.passport-collection summary { cursor:pointer; font:600 .88rem var(--sans); min-height:32px; }
.passport-collection > p { max-width:680px; font:400 .8rem/1.5 var(--sans); margin-top:16px; }
.passport-seals { display:grid; grid-template-columns:repeat(auto-fit,minmax(115px,1fr)); gap:12px; padding:14px 0; }
.passport-seal { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:14px 8px; border:1px dashed var(--world-shadow,#cdc5b7); border-radius:var(--r-surface); }
.passport-seal > div { display:grid; place-items:center; width:68px; height:68px; border-radius:50%; background:var(--world-tint,#e5e7ef); filter:grayscale(1); opacity:.6; }
.passport-seal svg { width:48px; height:48px; }
.passport-seal strong { font:600 .85rem/1.3 var(--sans); }
.passport-seal span,.passport-seal small { font:400 .75rem/1.4 var(--sans); }
.passport-seal.is-earned { border:1px solid var(--rank-brass); background:linear-gradient(150deg,#f7e9c833,transparent); }
.passport-seal.is-earned > div { filter:none; opacity:1; background:var(--rank-wash); border:3px double var(--rank-brass); }
.passport-earned .passport-emblem { animation:passport-stamp 650ms cubic-bezier(.2,.8,.2,1) both; }
.passport-seal.is-new { animation:passport-stamp 800ms 150ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes passport-stamp { 0% { opacity:0; transform:translateY(-12px) scale(1.15) rotate(-6deg); } 65% { opacity:1; transform:translateY(2px) scale(.97) rotate(1deg); } 100% { transform:none; } }
@media(max-width:560px) { .reader-passport { grid-template-columns:64px minmax(0,1fr); padding:18px; gap:14px; } .passport-emblem {width:60px;height:80px;} .passport-emblem>svg{width:48px;height:48px;} .passport-copy h3{font-size:var(--t-4);} .passport-seals{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:380px) { .passport-copy h3, .profile-quest strong { overflow-wrap: anywhere; hyphens: auto; } }
.wk-stakes { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 12px; margin:12px 0 0; font:500 .78rem/1.4 var(--sans); color:var(--world-deep,#394b74); }
.study-orientation { max-width:1100px; margin:16px auto 24px; padding:14px 18px; border:1px solid var(--world-shadow,#d1cabe); border-radius:var(--r-surface); background:var(--paper,#fffaf0); font-family:var(--sans); animation:study-arrive 180ms ease-out; }
.study-suggestion { display:flex; align-items:center; gap:16px; padding:16px 0; }
.study-suggestion > div { flex:1; }
.study-suggestion strong,.study-suggestion div>span { display:block; }
.study-suggestion p { margin:6px 0 0; line-height:1.5; }
@keyframes study-arrive {from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
@media(max-width:560px){.study-orientation{margin:10px 0 16px;padding:12px;}.study-suggestion{flex-wrap:wrap;} }
html[data-motion="low"] :is(.study-orientation,.passport-earned .passport-emblem,.passport-earned .passport-gain,.passport-seal.is-new) {animation:none;}
html[data-motion="low"] .wk-page-slots > span {transition:none;transform:none;}
.wk-coach-line { border-left:3px solid var(--ink); padding:10px 14px; margin:0 0 18px; font-size:13px; line-height:1.6; background:color-mix(in srgb,var(--ink) 5%,transparent); }
.tutor-panel { margin-top:16px; padding:18px; border:1px solid color-mix(in srgb,var(--ink) 25%,transparent); border-radius:var(--r-dialog); background:var(--paper,#faf6ed); }
.tutor-local-head { display:flex; gap:12px; align-items:flex-start; }
.tutor-local-head p { font-size:14px; line-height:1.6; margin:4px 0 0; }
.tutor-mark { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border:1px solid currentColor; border-radius:50%; color:var(--ink); }
.tutor-prompts { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.tutor-prompts button { background:transparent; border:1px solid color-mix(in srgb,var(--ink) 30%,transparent); border-radius:var(--r-dialog); padding:8px 12px; font:inherit; font-size:12px; color:inherit; cursor:pointer; }
.tutor-prompts button[aria-pressed="true"] { color:var(--paper,#fff);background:var(--ink);border-color:var(--ink); }
.tutor-local-body { font-size:14px; line-height:1.6; animation:tutor-arrival .22s ease-out; overflow-wrap:anywhere; }
.tutor-example { font-family:var(--serif,Georgia,serif); font-size:20px; }
.tutor-local-body mark { background:color-mix(in srgb,var(--ink) 15%,transparent); color:inherit; border-bottom:2px solid var(--ink); padding:1px 3px; border-radius:3px; }
.tutor-contrast { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tutor-contrast > div { border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);padding:12px;border-radius:var(--r-surface); }
.tutor-contrast p:first-child { font-family:var(--serif,Georgia,serif);font-size:18px; }
.tutor-check { display:grid;gap:8px; }
.tutor-check button { text-align:left;border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);background:transparent;color:inherit;padding:12px;border-radius:var(--r-surface);font:inherit;cursor:pointer; }
.tutor-check .coach-right { border-color:var(--carbon);background:var(--reward-tint); }
.tutor-check .coach-retry { opacity:.55; }
.tutor-check-result { font-weight:600; }
.tutor-panel small { font-size:12px;line-height:1.5; }
@keyframes tutor-arrival { from { opacity:0;transform:translateY(4px); } to { opacity:1;transform:translateY(0); } }
html[data-motion="low"] .tutor-local-body { animation:none; }
@media (max-width:540px) { .tutor-contrast {grid-template-columns:1fr;} .tutor-panel {padding:14px;} }
#v-course.view { max-width: calc(var(--page-w) + 2.5rem); margin-inline: auto; }
#v-course > .study-orientation { max-width: none; }
#v-course .cs-wings { margin-bottom: 20px; }
#v-course .cs-wing-tab { min-width: 0; }
#v-course .cs-wt-mid { min-width: 0; }
#v-course .cs-wt-mid b { font-family: var(--sans); font-size: var(--t-1); }
#v-course .cs-wt-mid em { line-height: 1.45; }
.course-progress { margin: 16px 0; border-block: 1px solid var(--rule-room); }
.course-progress > summary { cursor: pointer; padding: 14px 4px; font: 600 .875rem/1.5 var(--sans); }
.course-progress > summary > span { margin-left: 16px; color: var(--steel); font-weight: 400; }
.course-progress .reader-passport { margin: 0 0 20px; }
.course-atlas .atlas-heading { margin: 20px 0 16px; }
.course-atlas .atlas-heading h2 { font-size: 1.65rem; margin: 0 0 8px; }
.course-atlas .level-tabs { gap: 12px; }
.course-atlas .level-tab { padding: 14px 18px; gap: 5px; }
.course-atlas .level-caption { margin: 12px 0 20px; line-height: 1.5; }
.course-atlas .level-intro { grid-template-columns: minmax(0,1fr) 110px; padding: 18px 22px; }
.course-atlas .level-intro h2 { font-size: var(--t-4); }
.level-outline { font: .875rem/1.5 var(--sans); }
.level-outline summary { cursor: pointer; padding: 6px 0; }
.level-outline p { margin-top: 10px; max-width: 65ch; }
.course-atlas .workshop-shelf { margin-top: 24px; }
.course-atlas .workshop-card { grid-template-columns: 52px minmax(0,1fr) 22px; gap: 16px; min-height: 148px; }
.course-atlas .workshop-card-art { width: 52px; }
.course-atlas .workshop-card-copy strong { font-size: var(--t-3); line-height: 1.3; }
.course-progress > summary:focus-visible, .level-outline summary:focus-visible { outline: 2px solid var(--world-deep); outline-offset: 4px; }
@media (max-width: 800px) {
.course-atlas .workshop-cards { grid-template-columns: minmax(0,1fr); }
.course-atlas .workshop-card { min-height: 0; }
}
@media (max-width: 560px) {
.course-progress > summary > span { display: block; margin: 4px 0 0 16px; }
.course-atlas .level-intro { padding: 16px; grid-template-columns: minmax(0,1fr) 72px; gap: 12px; }
.course-atlas .level-tab { padding: 12px; }
#v-course .cs-wt-mid b { font-size: var(--t-0); }
.course-atlas .workshop-card { padding: 16px; grid-template-columns: 40px minmax(0,1fr) 18px; gap: 12px; }
.course-atlas .workshop-card-art { width: 40px; }
}
.wk-sheet .wk-opening { padding: 8px 0; }
.wk-sheet .wk-opening h3 { font: 600 1rem/1.4 var(--sans); margin: 0 0 12px; }
.wk-opening > .wk-reference { margin-top: 18px; }
@media(min-width:1000px) {
.study-orientation { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
}
#v-course .passport-strip { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px 18px; width:100%; margin:0 0 22px; padding:14px 18px; border:1px solid var(--world-shadow,#cdc5b7); border-radius:8px 18px 18px 8px; background:var(--paper,#fffaf0); color:var(--carbon,#252c37); box-shadow:0 2px 0 var(--world-tint,#e5e7ef); text-align:left; font:inherit; cursor:pointer; }
#v-course .passport-strip:hover, #v-course .passport-strip:focus-visible { box-shadow:0 2px 0 var(--world-tint,#e5e7ef), 0 0 0 3px var(--world-tint,#e5e7ef); outline:none; }
@media (max-width:560px) { #v-course .passport-strip { grid-template-columns:auto minmax(0,1fr); } }
#arrival-front {
grid-template-areas: "intro encounter" "routes encounter" "method method";
gap: 24px 40px;
align-items: start;
}
#arrival-front .arrival-copy { grid-area: intro; display: block; }
#arrival-front .arrival-copy>.arrival-rooms { display:flex;flex-wrap:wrap;gap:4px;margin:0 0 24px;padding:0 0 16px;border-bottom:1px solid var(--rule); }
#arrival-front .arrival-book { grid-area: encounter; }
#arrival-front .arrival-routes { grid-area: routes; min-width: 0; }
#arrival-front .arrival-method { grid-area: method; }
#arrival-front .arrival-lede { margin-bottom: 0; }
.arrival-authors { font: .875rem/1.5 var(--serif); color: var(--world-text, var(--carbon)); margin: 12px 0 0; }
.arrival-access { border-block: 1px solid var(--rule-room); margin-top: 14px; font: .875rem/1.55 var(--sans); }
.arrival-access summary { cursor: pointer; padding-block: 12px; min-height: 44px; font-weight: 600; }
.arrival-access dl { margin: 0; }
.arrival-access dl > div { padding: 12px 0; border-top: 1px solid var(--rule-room); }
.arrival-access dt { font-weight: 700; margin-bottom: 4px; }
.arrival-access dd { margin: 0; }
.arrival-access summary:focus-visible { outline: 3px solid var(--world-text, var(--carbon)); outline-offset: 3px; }
.arrival-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.arrival-account-actions button { min-height: 44px; }
#startup-error { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: var(--room); color: var(--carbon); overflow: auto; }
#startup-error > div { max-width: 540px; padding: 32px; border: 1px solid var(--rule-room); border-radius: 20px; background: var(--paper); }
#startup-error h1 { font: 400 2rem/1.2 var(--serif); text-transform: none; }
#startup-error p { font: 1rem/1.65 var(--sans); margin-block: 20px; }
#arrival-continue { margin-top: 16px; white-space: normal; text-align: left; }
.arrival-account-actions button:focus-visible, #arrival-continue:focus-visible {
outline: 3px solid var(--world-text, var(--carbon)); outline-offset: 4px;
}
.plate-beginner { display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px;padding-top:12px;border-top:1px solid var(--rule);font:500 var(--type-control,1rem)/1.5 var(--sans); }
.plate-beginner .btn { min-height:44px;max-width:100%;margin:0;padding:8px 12px;white-space:normal;}
.plate-beginner .btn:focus-visible { outline:3px solid var(--signal-ink);outline-offset:3px; }
@media (max-width: 820px) {
#arrival-front { grid-template-areas: "intro" "encounter" "routes" "method"; gap: 20px; }
#arrival-front .arrival-copy, #arrival-front .arrival-routes { width: 100%; max-width: 640px; justify-self: center; }
}
@media (max-width: 560px) {
#arrival-front { margin-block: 16px 32px; gap: 18px; }
#arrival-title { font-size: clamp(2rem, 8vw, 2.5rem); margin-block: 12px; }
#arrival-front .arrival-lede { font-size: var(--t-1); line-height: 1.5; margin-top: 0; }
#arrival-front .arrival-eyebrow { font-size: var(--type-meta); }
#arrival-front .arrival-first-friend { width: 44px; height: 44px; flex-shrink: 0; }
#arrival-front .arrival-book { padding: 16px 20px; }
#arrival-front .arrival-world { margin: -16px -20px 12px; height: 82px; }
#arrival-front .arrival-world > svg { height: 100%; max-height: none; width: 100%; object-fit: cover; }
#arrival-front .arrival-resident { width: 70px; height: 70px; left: calc(50% - 35px); top: 8px; }
#arrival-front .arrival-book-ribbon { height: 36px; width: 22px; right: 16px; }
#arrival-front .arrival-page-label { margin-block: 8px; }
#arrival-front .arrival-book blockquote { font-size: 1.65rem; margin-block: 10px; }
#arrival-front .arrival-page-foot { margin-top: 12px; }
#arrival-front .arrival-page-foot svg { width: 24px; height: 24px; }
}
.gx-stage.gx-adventure {
--lesson-peach: #f3e0cd; --lesson-lilac: #e8e4da;
}
.gx-adventure .lesson-compass { border-radius: 18px 18px 4px 4px; border-bottom: 3px solid var(--world-deep); }
.gx-adventure .gx-mid { border-radius: 4px 18px 18px 18px !important; }
.gx-adventure .ink-challenge {
display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px;
padding: 14px 20px; border: 1px solid var(--world-shadow); border-left: 4px solid var(--world-deep);
border-radius: 4px 12px 12px 4px; color: var(--carbon); background: var(--paper);
font: .8125rem/1.45 var(--sans); grid-column: 1 / -1;
}
.ink-challenge-heading { display: flex; align-items: center; gap: 18px; grid-column: 1 / -1; justify-content: space-between; font-weight: 750; }
.ink-drops { display: inline-flex; gap: 5px; flex: 0 0 auto; }
.ink-drops svg { width: 18px; height: 25px; overflow: visible; }
.ink-full { fill: var(--world-deep); stroke: var(--world-deep); }
.ink-empty { fill: transparent; stroke: var(--world-shadow); stroke-width: 1.8; }
.ink-shine { fill: none; stroke: var(--paper); stroke-width: 1.7; stroke-linecap: round; }
.ink-empty .ink-shine { display: none; }
.ink-message { margin: 4px 0 6px; grid-column: 1 / -1; }
.ink-tally { display: flex; flex-wrap: wrap; gap: 5px 16px; align-items: center; }
.ink-tally b { font-variant-numeric: tabular-nums; }
.ink-combo { color: var(--world-text, var(--world-deep)); font-weight: 700; }
.ink-rules { align-self: start; }
.ink-rules summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ink-rules[open] { grid-column: 1 / -1; margin-top: 10px; }
.ink-rules p { max-width: 65ch; margin-bottom: 0; }
.ink-challenge[data-ink-state="refilled"] { border-left-color: #996a14; background: #fff5d9; }
.ink-challenge[data-ink-state="supported"] { border-left-color: #996a14; }
.ink-help-label { font: 600 .8125rem/1.5 var(--sans); color: #72551f; }
.ink-clue, .gx-adventure .gx-verdict.gx-supported, .wk-supported { background: #fff3d8; border-left: 3px solid #ad8433; padding: 14px 16px; border-radius: 4px 12px 12px 4px; color: #63481b; }
.gx-adventure .gx-opt.gx-assisted { background: #fff3d8; color: #63481b; border-color: #ad8433; box-shadow: none; }
.gx-adventure .ink-clue p { margin: 4px 0; }
.ink-unsure { background: transparent; }
.audio-button-status { display: block; flex-basis: 100%; margin-top: 6px; font: .8125rem/1.4 var(--sans); color: var(--world-text, var(--world-deep)); }
.audio-button-status:empty { display: none; }
.audio-notice { border-left: 3px solid #ad8433; padding: 10px 14px; background: #fff3d8; font: .875rem/1.5 var(--sans); color: #63481b; }
.audio-text-option { display: block; margin: 12px auto 0; }
[data-audio-state="loading"] { border-style: dashed !important; }
[data-audio-state="playing"] { outline: 3px solid var(--world-mid); outline-offset: 4px; }
[data-audio-state="retry"] { border-color: #a37230 !important; }
.gx-adventure .answer-listen { justify-self: start; min-width: 140px; }
#reading-route { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 0 16px; margin-bottom: 12px; border-bottom: 1px solid var(--rule); }
#reading-route .btn { min-height: 44px; padding: 10px 14px; }
#reading-route > span { margin-left: auto; font: .75rem/1.4 var(--sans); color: var(--steel); }
.reading-contents { width: min(580px, calc(100vw - 32px)); max-height: min(760px, calc(100dvh - 40px)); box-sizing: border-box; border: 1px solid var(--rule); border-radius: var(--r-dialog); padding: 24px; background: var(--paper); color: var(--carbon); box-shadow: 0 20px 100px #1e24384d; }
.reading-contents::backdrop { background: #18203499; backdrop-filter: blur(3px); }
.reading-contents header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.reading-contents h2 { font: 700 2rem/1.2 var(--bill); margin: 18px 0 6px; }
.reading-contents > p { margin: 0 0 20px; color: var(--steel); }
.reading-contents ol { list-style: none; margin: 0; padding: 0; }
.reading-contents li + li { margin-top: 8px; }
.reading-contents [data-chapter] { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 14px; border: 1px solid var(--rule); border-radius: var(--r-surface); background: transparent; color: var(--carbon); cursor: pointer; }
.reading-contents [data-chapter]:hover { background: var(--world-tint); }
.reading-contents [aria-current="page"] { background: var(--world-tint); border-color: var(--world-deep); }
.reading-contents strong { font: 600 1.0625rem/1.4 var(--serif); display: block; }
.reading-contents small { display: block; margin-top: 4px; font: .75rem/1.4 var(--sans); }
.contents-number { flex: 0 0 28px; font: 700 1.125rem/1 var(--bill); color: var(--world-text, var(--world-deep)); }
.reading-contents footer { padding-top: 20px; }
.reading-contents .btn { min-height: 44px; }
.reading-contents button:focus-visible { outline: 3px solid var(--world-deep); outline-offset: 3px; }
@keyframes ink-recover { 0% { transform: translateY(-6px) scale(.8); } 65% { transform: translateY(2px) scale(1.12); } 100% { transform: none; } }
html:not([data-motion="low"]) .ink-challenge[data-ink-state="refilled"] .ink-full { animation: ink-recover 420ms ease-out both; }
@media (max-width: 560px) {
.gx-adventure .ink-challenge { padding: 10px 14px; column-gap: 10px; }
.ink-rules { grid-column: 1 / -1; margin-top: 7px; }
.ink-message { margin-top: 2px; }
.ink-drops svg { width: 16px; height: 22px; }
.reading-contents { padding: 18px; }
.reading-contents h2 { font-size: 1.65rem; }
#reading-route > span { width: 100%; margin-left: 0; }
#btn-home2 { font-size: .75rem; padding-inline: 7px; }
}
.reading-contents header { position: sticky; top: -24px; padding-block: 12px; margin-top: -12px; background: var(--paper); z-index: 1; }
@media (max-width: 560px) { .reading-contents header { top: -18px; } }
[data-theme="dark"] :is(.ink-clue, .wk-supported, .audio-notice, .gx-adventure .gx-verdict.gx-supported, .gx-adventure .gx-opt.gx-assisted, .ink-challenge[data-ink-state="refilled"]) { background: #3c3323; color: #f1dba8; }
[data-theme="dark"] .ink-help-label { color: #e3c78d; }
.wk-audio { font: .8125rem/1.5 var(--sans); margin: 12px 0; color: var(--world-text, var(--world-deep)); }
.gx-adventure .gx-assisted::after { content: none !important; }
#shelf-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; margin-bottom: 24px; }
#shelf-controls label { display: grid; gap: 8px; flex: 1 1 280px; min-width:0; font: 600 var(--type-control)/1.5 var(--sans); }
#shelf-search { box-sizing:border-box; width:100%; min-width:0; border: 1px solid var(--rule); border-radius: var(--r-surface); min-height: 46px; padding: 10px 14px; background: var(--paper); color: var(--carbon); font: var(--type-control)/1.5 var(--sans); }
#shelf-results { flex-basis: 100%; margin: 0; font: var(--type-meta)/1.5 var(--sans); }
#shelf .book[hidden] { display: none !important; }
.book .b-translation { text-align: center; font: 600 var(--type-body)/1.5 var(--serif); overflow-wrap:anywhere; padding: 10px 6px 0; }
.level-fit { font-weight: 400; line-height: 1.45; }
.level-adventure { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 28px;
padding: clamp(22px, 3vw, 38px); margin: 22px 0 28px; border: 1px solid var(--rule);
border-bottom: 5px solid var(--play); border-radius: 20px;
background: linear-gradient(125deg, var(--paper) 40%, #e4ebf6); color: var(--carbon); }
.level-adventure[data-level="a1"] { background: linear-gradient(125deg, var(--paper) 40%, #e2eee4); }
.level-adventure[data-level="b1"] { background: linear-gradient(125deg, var(--paper) 40%, #f3e6d2); }
.level-adventure[data-level="b2"] { background: linear-gradient(125deg, var(--paper) 40%, #ece2f4); }
.adventure-copy { min-width: 0; }
.adventure-copy h2 { font: 400 clamp(1.5rem, 2.5vw, 2.2rem)/1.2 var(--serif); margin: 12px 0; }
.adventure-copy > p { font: 1rem/1.6 var(--sans); max-width: 55ch; margin: 0 0 18px; }
.adventure-meta { display: block; font: .75rem/1.5 var(--sans); margin-top: 10px; }
.adventure-preview { font: .875rem/1.5 var(--sans); margin: 0 0 18px; }
.adventure-preview summary { cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.adventure-preview p { font: 1.1rem/1.5 var(--serif); }
.adventure-scene { align-self: center; text-align: center; min-width: 0; }
.adventure-scene > svg { width: 100%; height: auto; }
.adventure-scene > span { display: block; font: 600 .875rem/1.5 var(--sans); margin: 12px 0; }
.level-browse { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.level-browse h3 { font: 400 1.25rem/1.3 var(--serif); margin: 0; }
.level-browse label { display: grid; gap: 6px; font: .75rem/1.3 var(--sans); }
.course-search { min-height: 44px; width: min(320px,100%); padding: 10px 14px; border: 1px solid var(--rule); border-radius: var(--r-surface); font: .875rem/1.4 var(--sans); background: var(--paper); color: var(--carbon); }
.course-search-empty { width: 100%; padding: 20px; border: 1px dashed var(--rule); border-radius: var(--r-surface); font: .875rem/1.5 var(--sans); }
.course-atlas [hidden], #practice-challenge[hidden] { display: none !important; }
.course-atlas .trail-heading, .course-atlas .trail-destination { display: none; }
.course-atlas .learning-trail { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.course-atlas .trail-go { display: grid; grid-template-columns: 48px minmax(0,1fr) 20px; align-items: center;
min-height: 112px; padding: 18px; gap: 14px; border-radius: var(--r-dialog); }
.course-atlas .trail-landscape { display: none; }
.course-atlas .trail-folio { position: static; width: 40px; height: 40px; display: grid; place-items: center; background: var(--paper); }
.course-atlas .trail-copy { padding: 0; min-width: 0; }
.course-atlas .trail-copy > strong { font: 400 1.0625rem/1.4 var(--serif); }
.course-atlas .trail-arrow { position: static; }
.is-searching .level-section-title, .is-searching .level-section-note { display: none; }
.is-searching .syl-cards, .is-searching .workshop-cards, .is-searching .syl-arcs { margin-block: 12px; }
.level-tab:focus-visible, .course-search:focus-visible, .adventure-copy button:focus-visible { outline: 3px solid var(--play); outline-offset: 4px; }
.practice-rounds { border: 0; padding: 0; margin: 24px auto; max-width: 720px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.practice-rounds legend { width: 100%; margin-bottom: 12px; font: 600 1rem/1.5 var(--sans); }
.practice-rounds label { position: relative; cursor: pointer; }
.practice-rounds input { position: absolute; inset: 12px auto auto 12px; accent-color: var(--play); }
.practice-rounds label > span { display: grid; gap: 6px; padding: 18px 12px 18px 34px; min-height: 90px; box-sizing: border-box; border: 1px solid var(--rule); border-radius: var(--r-surface); background: var(--paper); text-align: left; font: .875rem/1.4 var(--sans); }
.practice-rounds small { font-size: .75rem; }
.practice-rounds input:checked + span { background: #e5ecf8; border: 2px solid var(--play); padding: 17px 11px 17px 33px; }
.practice-rounds input:focus-visible + span { outline: 3px solid var(--play); outline-offset: 3px; }
#v-review.practice-lobby #practice-challenge { display: none; }
#practice-challenge { max-width: 760px; margin: 0 auto 22px; }
#practice-challenge .ink-challenge { background: var(--paper); padding: 16px; border: 1px solid var(--rule); border-radius: var(--r-dialog); color: var(--carbon); font: .8125rem/1.4 var(--sans); }
.challenge-stamps { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.challenge-stamp { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px dashed var(--rule); border-radius: var(--r-surface); font: 600 .75rem/1.3 var(--sans); }
.challenge-stamp > b { flex: 0 0 26px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: 1px solid var(--rule); }
.challenge-stamp small { display: block; font-size: .6875rem; font-weight: 400; margin-top: 3px; }
.challenge-stamp.is-earned { background: #f9ebc5; border-style: solid; border-color: #c09a48; color: #63471a; }
.challenge-stamp.is-earned > b { color: #79520c; border-color: #c09a48; }
.challenge-earned { grid-column: 1/-1; display: block; padding: 8px 0 0; font: 600 .8125rem/1.4 var(--sans); color: #79520c; }
#practice-challenge .ink-drops svg { width: 14px; height: 20px; }
#practice-challenge .ink-rules { margin-top: 8px; }
.gx-adventure .wk-stakes { display: none; }
.gx-adventure .wk-page-slots { margin-block: 0; gap: 6px; }
.gx-adventure .wk-page-slots > span { height: 26px; padding: 4px 8px; }
.gx-adventure .wk-page-slots > span > i { display: none; }
.answer-connection { margin: 12px 0; padding: 16px 20px; background: var(--world-tint); border-radius: var(--r-surface); }
.answer-connection p { margin: 6px 0; font: 1.125rem/1.5 var(--serif); }
.answer-connection small { font: .8125rem/1.5 var(--sans); }
#v-review .rev-btns button { font: 600 1rem/1.4 var(--sans); text-transform: none; letter-spacing: 0; min-height: 48px; border-radius: var(--r-surface); padding: 12px 20px; }
@keyframes discovery-stamp { from { transform: scale(1.08) rotate(-2deg); } to { transform: none; } }
@keyframes adventure-bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
html[data-motion="full"] .adventure-scene > svg { animation: adventure-bob 5s ease-in-out infinite; }
html:not([data-motion="low"]) .challenge-milestone .is-earned { animation: discovery-stamp 450ms cubic-bezier(.2,.8,.3,1.2); }
html:not([data-motion="low"]) .course-atlas :is(.trail-go,.workshop-card,.syl-card) { transition: transform 180ms ease, box-shadow 180ms ease; }
html:not([data-motion="low"]) .course-atlas :is(.trail-go,.workshop-card,.syl-card):hover { transform: translateY(-3px); }
[data-theme="dark"] .level-adventure { background: linear-gradient(125deg, var(--paper), #30374c); }
[data-theme="dark"] .practice-rounds input:checked + span { background: #30374c; }
[data-theme="dark"] .challenge-stamp.is-earned { background: #4b3c20; color: #f2d595; }
[data-theme="dark"] .challenge-earned { color: #f2d595; }
@media (max-width: 700px) {
.level-adventure { grid-template-columns: minmax(0,1fr) 100px; gap: 12px; padding: 22px; }
.adventure-scene { align-self: start; }
.adventure-scene > span { font-size: .75rem; }
.course-atlas .learning-trail { grid-template-columns: 1fr; }
.practice-rounds { grid-template-columns: 1fr; }
.practice-rounds label > span { min-height: 0; padding-block: 12px; }
.practice-rounds input:checked + span { padding-block: 11px; }
.challenge-stamp { flex-direction: column; text-align: center; padding: 6px; }
.challenge-stamp small { display: none; }
.level-browse label, .course-search { width: 100%; }
}
@media (max-width: 420px) {
.level-adventure { display: block; }
.adventure-scene { display: none; }
.adventure-copy > .btn { width: 100%; }
}
html:not([data-theme="dark"]) body:has(:is(#v-home,#v-course,#v-library,#v-review,#v-words).show) {
background-color: var(--room) !important;
background-image: none !important;
background-size: 100% 100% !important;
background-repeat: no-repeat !important;
}
body:has(:is(#v-home,#v-course,#v-library,#v-review,#v-words).show)::before,
#v-course::before { display: none; }
.bar .nav-tabs button { font-family: var(--sans); font-size: var(--type-control); text-transform: none; font-weight: var(--fw-strong); }
#v-course > .study-orientation { display: none; }
#v-course > .masthead { margin-top: 20px; }
#v-course > .masthead::after { display: none; }
#v-course .cs-wings { gap: 8px; padding: 0 0 14px; margin: 0 0 24px; border-bottom: 1px solid var(--rule); }
#v-course .cs-wing-tab { min-height: 52px; padding: 10px 14px; gap: 12px; border-radius: var(--r-surface); border: 1px solid transparent; background: transparent; box-shadow: none; }
#v-course .cs-wing-tab[aria-selected="true"] { background: var(--paper); border-color: var(--rule); box-shadow: 0 3px 0 #1d2d3a0c; }
#v-course .cs-wt-dev { flex-basis: 32px; width: 32px; height: 32px; }
#v-course .cs-wt-dev svg { width: 32px; height: 32px; }
#v-course .cs-wt-mid b { font: 600 .9375rem/1.3 var(--sans); }
#v-course .cs-wt-mid em { font: .75rem/1.4 var(--sans); }
#v-course .atlas-heading { margin: 0 0 22px; }
#v-course .atlas-heading h2 { font: 400 1.35rem/1.3 var(--serif); letter-spacing: -.015em; margin: 0 0 6px; }
#v-course .atlas-heading p { font-size: var(--t-0); }
#v-course .level-adventure { margin-top: 0; border: 1px solid #273c4d19; border-bottom: 4px solid #273c4d35; border-radius: 24px; }
#v-course .adventure-copy h2 { text-transform: none; font: 400 clamp(1.7rem,2.5vw,2.25rem)/1.18 var(--serif); letter-spacing: -.025em; }
#v-course .adventure-copy > p { font-weight: 400; font-size: .9375rem; }
#v-course .level-browse h3 { text-transform: none; font: 400 1.2rem/1.3 var(--serif); }
#v-course .course-atlas .workshop-card { border: 1px solid #24384322; background: var(--paper); box-shadow: 0 3px 0 #2438430d; border-radius: var(--r-dialog); padding: 20px; gap: 14px; }
#v-course .course-atlas .workshop-card:hover { border-color: var(--play); box-shadow: 0 6px 18px #24384312; }
#v-course .workshop-card-art { width: 46px; height: 46px; flex-basis: 46px; }
#v-course .workshop-card-copy strong { font: 600 1.0625rem/1.4 var(--serif); }
#v-course .workshop-card-copy > span:not(.smallcaps) { font: .8125rem/1.5 var(--sans); font-weight: 400; }
#v-course .workshop-card-copy .smallcaps { font-size: .6875rem; letter-spacing: .09em; color: var(--steel); }
#v-course .level-section-title { font: 400 1.2rem/1.4 var(--serif); }
#v-course .level-section-note { font-size: var(--t-00); font-weight: 400; }
#v-course .course-progress { margin-top: 32px; }
#v-course .level-tab { border-radius: var(--r-dialog); gap: 5px; padding: 14px 16px; box-shadow: none; }
#v-course .level-tab[aria-selected="true"] { box-shadow: inset 3px 0 var(--atlas-ink), 0 3px 0 #24384310; }
#v-course .level-tab-code { font: 600 .875rem/1.4 var(--sans); }
#v-course .level-tab strong { font: 600 .9375rem/1.4 var(--serif); }
#v-course .level-tab .level-fit { font-size: .75rem; }
#v-course .level-tab progress { margin-top: 4px; }
#v-course .level-caption { font: .6875rem/1.5 var(--sans); }
#v-course .level-panel { padding-top: 0; margin-top: 0; }
#v-course .level-tab:not([aria-selected="true"]) .level-fit { display: none; }
.wk-body p, .wk-body .lesson-demonstration > div { font-weight: 400; }
.gx-adventure .ink-tally { display: none; }
.challenge-stamp small { display: none; }
.gx-adventure .ink-challenge, #practice-challenge .ink-challenge { padding: 12px 16px; }
.gx-adventure .ink-rules { margin-top: 8px; grid-column: 1/-1; font-size: .75rem; }
.gx-adventure .ink-challenge .ink-message { margin: 2px 0 0; font-size: .75rem; }
.gx-adventure .challenge-stamps { margin-top: 8px; }
.gx-adventure .challenge-stamp { padding: 5px 8px; font-size: .6875rem; }
.gx-adventure .challenge-stamp > b { width: 20px; height: 20px; flex-basis: 20px; }
@media (min-width: 1000px) {
#v-course .course-atlas { display: grid; grid-template-columns: 218px minmax(0,1fr); column-gap: 30px; align-items: start; }
#v-course .atlas-heading { grid-column: 1/-1; }
#v-course .level-rail { grid-column: 1; grid-row: 2; align-self: stretch; min-width: 0; }
#v-course .level-tabs { display: flex; flex-direction: column; gap: 10px; }
#v-course .level-caption { grid-column: 1; grid-row: 3; }
#v-course .level-panel { grid-column: 2; grid-row: 2 / span 3; min-width: 0; }
#v-course .level-adventure { grid-template-columns: minmax(0,1fr) 180px; gap: 18px; padding: 28px; }
#v-course .adventure-scene > svg { overflow: visible; }
}
@media (max-width: 999px) {
#v-course .level-fit { display: none; }
#v-course .level-tab > span:last-of-type { font-size: .6875rem; }
#v-course .level-caption { margin-block: 12px 20px; }
}
@media (max-width: 700px) {
#v-course > .masthead { margin-top: 12px; }
#v-course .cs-wing-tab { padding: 10px; }
#v-course .cs-wt-dev, #v-course .cs-wt-mid em { display: none; }
#v-course .cs-wt-mid b { font-size: var(--t-00); }
#v-course .level-tabs { gap: 8px; }
#v-course .level-tab { padding: 10px 12px; }
#v-course .level-tab-code { font-size: .75rem; }
#v-course .level-tab strong { font-size: var(--t-00); }
#v-course .atlas-heading p { font-size: var(--t-00); }
}
.gx-stage.wk-stage .wk-sheet { gap: 16px; }
.gx-stage.wk-stage .wk-sheet[data-phase="question"] .wk-page-slots,
.gx-stage.wk-stage .wk-sheet[data-phase="question"] .wk-coach-line { display: none; }
.gx-stage.wk-stage .wk-sheet .lesson-compass h2 { font-size: clamp(1.2rem,2vw,1.65rem); }
.gx-stage.wk-stage .wk-sheet .lesson-window { height: 64px; }
.gx-stage.wk-stage .wk-sheet .lesson-compass { margin-bottom: 0; }
.gx-stage.wk-stage .wk-sheet .wk-body { gap: 14px; }
.gx-stage.wk-stage .wk-sheet .wk-body > .wk-line { font-size: clamp(1.3rem,2.3vw,1.85rem); padding: 16px; margin-block: 4px; }
.gx-stage.wk-stage .wk-sheet .wk-options { gap: 10px; }
.gx-stage.wk-stage .wk-sheet .wk-footer { position: static; min-height: 0; padding-block: 12px; }
.course-search { border-radius: var(--r-surface); padding: 12px; }
@media (max-width: 700px) {
#v-course .level-tab > strong,
#v-course .level-tab > span:not(.level-tab-code),
#v-course .level-tab > progress { display: none; }
#v-course .level-tab { min-height: 48px; justify-content: center; }
#v-course > .masthead { margin-bottom: 12px; padding-bottom: 6px; }
#v-course .cs-wings { margin-bottom: 20px; }
#v-course .atlas-heading { margin-bottom: 16px; }
}
#v-library #resume-hero { display: block; padding: 22px; border: 1px solid var(--rule); border-radius: 18px; box-shadow: 0 2px 0 #24384315; }
#v-library #resume-hero .hero-vol-wrap { display: none; }
#v-library #resume-hero .hero-copy { min-width: 0; width: 100%; }
@media (max-width: 700px) {
#v-library #resume-hero { display: block; margin-block: 18px; }
#v-library #resume-hero .hero-copy blockquote { display: none; }
#v-library .masthead { margin-block: 16px; }
}
#reading-discovery { display: grid; gap: 10px; clear: both; margin: 18px 0 24px; padding: 16px 18px; border: 1px solid var(--rule); border-left: 3px solid #547364; border-radius: 4px 16px 16px 16px; background: var(--paper); color: var(--carbon); font: 400 .875rem/1.5 var(--sans); text-indent: 0; letter-spacing: 0; box-shadow: 0 3px 0 #253c3310; }
#reading-discovery *, #reading-discovery button { text-indent: 0; }
#reading-discovery [hidden] { display: none !important; }
#reading-discovery button, .discovery-return button { min-height: 44px; border-radius: var(--r-control); padding: 10px 14px; cursor: pointer; color: inherit; background: transparent; border: 1px solid var(--rule); box-shadow: none; font: 600 .8125rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
#reading-discovery button:focus-visible, .discovery-return button:focus-visible { outline: 3px solid var(--play); outline-offset: 3px; }
.rd-invite-copy { font-weight: 500; }
.rd-invite-actions, .rd-support { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#reading-discovery :is(.rd-start,.rd-continue), .discovery-return button { background: var(--signal); color: var(--on-signal); border-color: var(--signal-ink); box-shadow: var(--sh-press); }
#reading-discovery .rd-dismiss, #reading-discovery .rd-hint, #reading-discovery .rd-save { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
#reading-discovery.is-open { padding: clamp(18px,3vw,22px); gap: 14px; border-left-width: 4px; }
#reading-discovery, #reading-discovery .rd-result, #reading-discovery .rd-clue, #text .sent[tabindex="-1"] { scroll-margin-block: 110px 100px; }
.rd-eyebrow { display: flex; justify-content: space-between; align-items: center; color: #527161; font: 600 .6875rem/1.4 var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.rd-eyebrow > span { font-size: var(--t-3); }
#reading-discovery .rd-question { font: 600 clamp(1.3rem,2vw,1.65rem)/1.3 var(--serif); }
#reading-discovery .rd-source { display: block; padding: 12px 14px; border-radius: var(--r-surface); background: var(--galley); font: 400 clamp(1.1rem,1.6vw,1.25rem)/1.5 var(--serif); }
.rd-options { display: grid; gap: 8px; }
#reading-discovery .rd-options button { text-align: left; min-height: 48px; padding: 13px 16px; background: var(--paper); }
#reading-discovery .rd-options button:hover:not(:disabled) { border-color: #547364; background: #eff4ed; }
#reading-discovery .rd-options button:disabled { opacity: .6; cursor: default; }
#reading-discovery .rd-options button.is-correct { opacity: 1; background: #e8f0e5; border: 2px solid #547364; color: #294837; }
#reading-discovery .rd-options button.is-missed { opacity: 1; border-style: dashed; }
.rd-clue { padding: 12px; border-left: 2px solid #aa8132; background: var(--galley); }
.rd-result { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--rule); }
.rd-result > strong { font: 600 1.125rem/1.4 var(--serif); }
.rd-result > span { font-weight: 400; }
#reading-discovery .rd-continue { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
.rd-continue svg { width: 18px; height: 18px; }
.rd-result small { font: 400 .75rem/1.5 var(--sans); text-align: center; color: var(--steel); }
.discovery-return { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; padding: 22px; border: 1px solid var(--rule); border-radius: var(--r-dialog); background: var(--paper); }
.discovery-return > span { display: grid; gap: 6px; font: 400 .875rem/1.5 var(--sans); }
.discovery-return strong { font: 600 1.125rem/1.4 var(--serif); }
.counter-benefits { list-style: none; display: grid; gap: 8px; padding: 0; margin: 14px 0 18px; font: 500 .875rem/1.5 var(--sans); }
.counter-benefits li::before { content: '✓'; display: inline-block; margin-right: 10px; color: #315b51; }
.counter-offer .plans .p-note { font-size: .75rem; line-height: 1.45; }
@keyframes discovery-answer { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
html:not([data-motion="low"]) .rd-result > strong { animation: discovery-answer .35s ease-out both; }
[data-theme="dark"] #reading-discovery .rd-options .is-correct { background: #25483c; color: #e6f1e5; border-color: #92b39a; }
[data-theme="dark"] #reading-discovery .rd-options button:hover:not(:disabled) { background: #25483c; }
[data-theme="dark"] .rd-eyebrow { color: #aac8b4; }
@media(max-width:560px) {
#reading-discovery.is-open { padding: 16px; margin-inline: -8px; }
#reading-discovery .rd-source { padding: 12px; }
#reading-discovery .rd-options button { padding: 12px; }
.counter-benefits { font-size: var(--t-00); }
}
#key-panel:has(.k-tabs) { width: min(480px,calc(100vw - 24px)); max-width: none; padding: 26px; border: 1px solid var(--rule); border-radius: var(--r-dialog); box-shadow: var(--sh-float); }
#key-panel:has(.k-tabs) > h3 { display: block !important; font: 400 1.6rem/1.2 var(--serif) !important; text-transform: none; letter-spacing: -.02em; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; color: var(--carbon); background: transparent; text-wrap: wrap; }
#key-panel:has(.k-tabs) > h3::before, #key-panel:has(.k-tabs) > h3::after { display: none; }
#key-panel .k-tabs { margin-bottom: 16px; }
#key-panel:has(.k-tabs) .k-lede { font: 400 .9375rem/1.5 var(--serif); margin-bottom: 12px; }
#key-panel .k-account-promise { padding: 10px 12px; margin: 0 0 14px; border: 0; border-radius: var(--r-surface); background: var(--galley); font: 400 .8125rem/1.5 var(--sans); }
#key-panel .k-field-label { margin-top: 12px; font: 500 .8125rem/1.4 var(--sans); }
#key-panel input[type=email], #key-panel input[type=password], #key-panel input[type=text] { min-height: 46px; border-radius: var(--r-control); padding: 10px 12px; margin-bottom: 0; font: 400 1rem/1.4 var(--sans); border-color: var(--rule); }
#key-panel .k-rule { margin: 6px 0 8px; font: 400 .75rem/1.5 var(--sans); color: var(--steel); }
#key-panel .k-keep-warn { color: var(--ink); border-left: 2px solid var(--steel); padding-left: 10px; margin: 8px 0 10px; }
#key-panel .k-name-field { margin-top: 6px; font: 400 .75rem/1.4 var(--sans); }
#key-panel .k-name-field summary { min-height: 32px; display: list-item; cursor: pointer; padding-block: 8px; }
#key-panel .k-name-field input { margin-bottom: 10px; }
#key-panel:has(.k-tabs) .btnrow { display: flex; gap: 10px; }
#key-panel:has(.k-tabs) #k-go { flex: 2 1 0; }
#key-panel:has(.k-tabs) #k-close { flex: 1 1 0; border-color: transparent; background: transparent; box-shadow: none; }
#key-panel .k-alt { margin: 12px 0 0; }
#key-panel .k-linkish { min-height: 44px; font: 500 .75rem/1.4 var(--sans); text-transform: none; letter-spacing: 0; }
#key-panel .k-social { margin-bottom: 12px; }
#key-panel .k-oauth { min-height: 46px; border-radius: var(--r-control); }
#key-panel .k-or { font-size: .75rem; }
#key-panel:focus { outline: none; }
@media(max-width:560px) {
#key-panel:has(.k-tabs) { padding: 20px; }
#key-panel:has(.k-tabs) > h3 { font-size: 1.4rem !important; }
}
#key-panel .k-social-lead { gap: 10px; margin: 4px 0 14px; }
#key-panel .k-social-lead .k-oauth { min-height: 54px; font-size: var(--t-2, 1.05rem); }
#key-panel .k-email-door { margin: 0 0 4px; }
#key-panel .k-email-door > summary { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px;
cursor: pointer; color: var(--steel); font: 500 .8rem/1.4 var(--sans); list-style: none; }
#key-panel .k-email-door > summary::-webkit-details-marker { display: none; }
#key-panel .k-email-door > summary::before, #key-panel .k-email-door > summary::after { content: ''; flex: 1; border-top: 1px solid var(--rule); }
#key-panel .k-email-door[open] > summary { margin-bottom: 8px; }
#acct-gate #gate-trial-row { margin-top: 10px; }
.case-explorer { border:1px solid var(--rule); border-radius:18px; background:var(--paper); overflow:hidden; color:var(--carbon); }
.course-atlas > .case-explorer { grid-column:1/-1; margin:0 0 24px; }
.case-explorer > summary { display:flex; align-items:center; gap:14px; padding:16px 20px; cursor:pointer; list-style:none; font-family:var(--sans); }
.case-explorer > summary::-webkit-details-marker { display:none; }
.case-explorer > summary > span:nth-child(2) { flex:1; min-width:0; overflow-wrap:anywhere; }
.case-explorer > summary strong { display:block; font-size:var(--t-1); }
.case-explorer > summary small { display:block; margin-top:4px; font-size:var(--type-body); line-height:1.5; }
.case-entry-icon { width:48px; height:48px; flex:0 0 48px; }
.case-entry-icon svg { width:100%; height:100%; }
.case-explorer[open] > summary { border-bottom:1px solid var(--rule); background:color-mix(in srgb,var(--play) 8%,var(--paper)); }
.case-lab { padding:clamp(16px,3vw,28px); font:400 var(--type-body)/1.65 var(--sans); }
.case-lab p { margin:0; max-width:65ch; overflow-wrap:anywhere; }
.case-lab-intro { max-width:65ch; }
.case-controls { display:flex; gap:18px; justify-content:space-between; align-items:end; margin:20px 0; flex-wrap:wrap; }
.case-controls label { display:grid; gap:6px; font-weight:600; flex:1 1 190px; min-width:0; }
.case-controls select { box-sizing:border-box; width:100%; min-width:0; border:1px solid var(--rule); background:var(--paper); color:var(--carbon); border-radius:var(--r-surface); padding:12px; font:inherit; min-height:44px; }
.case-number { display:flex; flex-wrap:wrap; gap:5px; padding:5px; border:1px solid var(--rule); border-radius:var(--r-surface); }
.case-lab button,.wk-scene-tabs button { min-height:44px; max-width:100%; white-space:normal; overflow-wrap:anywhere; padding:10px 14px; background:var(--paper); color:var(--carbon); border:1px solid var(--rule); border-radius:var(--r-control); font:600 var(--type-control)/1.5 var(--sans); cursor:pointer; box-shadow:none; text-transform:none; letter-spacing:0; }
.case-lab button[aria-pressed="true"],.wk-scene-tabs button[aria-pressed="true"] { background:var(--galley); color:var(--carbon); border-color:var(--carbon); box-shadow:var(--sh-press-quiet); }
.case-roles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.case-roles button { display:flex; gap:10px; align-items:center; text-align:left; min-width:0; white-space:normal; overflow-wrap:anywhere; }
.case-roles button b { font:500 1.3rem var(--serif); opacity:.7; }
.case-roles small { display:block; font-weight:400; font-size:var(--type-meta); margin-top:3px; }
.case-transform { margin:20px 0; padding:clamp(16px,3vw,24px); border:1px solid #a8c1b6; border-radius:var(--r-dialog); background:color-mix(in srgb,#b8d5c1 16%,var(--paper)); animation:grammar-settle .25s ease-out; }
.case-transform .smallcaps { color:var(--carbon); font-size:var(--type-meta); }
.case-transform .case-cue { margin:10px 0 20px; font-weight:600; }
.case-equation { display:flex; flex-wrap:wrap; align-items:center; gap:14px; font:500 var(--type-prompt)/1.6 var(--serif); }
.case-equation > span:first-child { color:var(--pencil); }
.form-piece { white-space:normal; overflow-wrap:anywhere; display:inline-block; }
.case-lab mark,.lens-parts mark { padding:2px 4px; margin-left:1px; border-radius:var(--r-control); background:#d4e8dd; color:#1f4d40; border-bottom:2px solid #477766; }
.case-transform .case-sentence { font:500 var(--type-prompt)/1.65 var(--serif); margin:20px 0 5px; }
.case-transform .case-rule { margin:16px 0; }
.case-family-note { margin-top:16px!important; color:var(--pencil); }
.case-transform .case-practise { display:block; margin-top:16px; background:var(--signal); color:var(--on-signal); border-color:var(--signal-ink); box-shadow:var(--sh-press); }
.case-practice-options { display:flex; gap:10px; flex-wrap:wrap; margin:20px 0; }
.case-practice-options button { font-family:var(--serif); font-size:var(--type-prompt); }
.case-lab .case-answer-right { background:#d4e8dd; color:#1f4d40; opacity:1; }
.case-lab .case-answer-retry { background:#faedd9; color:#6b4e25; }
.case-transform .case-explain { margin:16px 0; }
.case-transform > small { display:block; font-size:var(--type-meta); }
.case-lab [hidden] { display:none!important; }
.case-table summary,.case-scope summary { min-height:44px; padding:12px 0; cursor:pointer; font-weight:600; }
.case-table-scroll { overflow-x:auto; }
.case-table table { width:100%; border-collapse:collapse; font-size:var(--type-meta); }
.case-table th,.case-table td { padding:12px 8px; border-bottom:1px solid var(--rule); text-align:left; }
.case-table th { font-size:var(--type-meta); }
.case-table td { font-family:var(--serif); font-size:var(--t-1); }
.case-lab :focus-visible,.case-explorer > summary:focus-visible,.wk-scene-tabs button:focus-visible { outline:3px solid var(--play); outline-offset:3px; }
.gx-stage.wk-stage { background:radial-gradient(ellipse at 5% 10%,#e0e9e780,transparent 55%),var(--paper); }
.gx-stage.wk-stage .wk-sheet { max-width:980px; padding:clamp(16px,3vw,36px); gap:16px; }
.wk-top-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.wk-sound { min-height:40px; padding:8px 12px; border:1px solid var(--rule); border-radius:20px; background:var(--paper); color:var(--carbon); font:600 var(--type-control)/1.5 var(--sans); cursor:pointer; }
.gx-stage.wk-stage .wk-sheet .lesson-compass { display:grid; grid-template-columns:130px minmax(0,1fr); gap:22px; padding:0; background:transparent; }
.gx-stage.wk-stage .wk-sheet .lesson-window { height:120px; max-height:120px; border:1px solid var(--rule); background:color-mix(in srgb,#477766 14%,var(--paper)); }
.gx-stage.wk-stage .wk-sheet .lesson-window > svg { height:120px; }
.gx-stage.wk-stage .wk-sheet .lesson-window .gx-mate { width:78px; height:88px; left:26px; top:28px; }
.gx-stage.wk-stage .wk-sheet .lesson-compass h2 { font:400 var(--type-heading)/1.3 var(--serif); }
.wk-journey { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 0; border-block:1px solid var(--rule); }
.wk-journey > span { flex:1 1 9rem; min-width:0; overflow-wrap:anywhere; display:flex; align-items:center; gap:8px; color:var(--pencil); font:500 var(--type-meta)/1.5 var(--sans); }
.wk-journey b { display:grid; place-items:center; border-radius:50%; width:25px; height:25px; border:1px solid var(--rule); font-size:var(--type-meta); flex-shrink:0; }
.wk-journey .is-current { color:var(--carbon); font-weight:700; }
.wk-journey .is-current b { background:#315b51; color:#fff; border-color:#315b51; }
.wk-encouragement { display:flex; gap:10px; font:500 var(--type-body)/1.5 var(--sans); color:var(--pencil); }
.wk-encouragement > span:first-child { color:#946727; }
.wk-stage .wk-stakes { display:none; }
.gx-stage.wk-stage .wk-sheet .wk-body { border-radius:20px; padding:clamp(18px,3vw,30px); background:var(--paper); border:1px solid var(--rule); box-shadow:0 2px 0 #193c3010; }
.gx-stage.wk-stage .wk-sheet .wk-opening .wk-mission { font:500 var(--type-prompt)/1.5 var(--serif); margin:12px 0; }
.wk-scene-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 12px; }
.grammar-lens { padding:20px; border:1px solid #b6ccc1; border-radius:var(--r-dialog); background:color-mix(in srgb,#bdd5c6 13%,var(--paper)); animation:grammar-settle .3s ease-out; text-align:left; }
.lens-scene { font:500 var(--type-body)/1.6 var(--sans); }
.lens-scene .smallcaps { font-size:var(--type-meta); color:var(--pencil); }
.lens-connection { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 0; margin-top:10px; font:500 var(--type-body)/1.5 var(--sans); }
.lens-connection > span:first-child { padding:7px 10px; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-surface); }
.lens-connection strong { color:var(--carbon); margin:0; }
.grammar-lens .lens-sentence { font:500 var(--type-prompt)/1.65 var(--serif); margin:14px 0; }
.lens-sentence mark { background:#d4e8dd; color:#1f4d40; border-bottom:2px solid #477766; padding:2px 5px; border-radius:var(--r-control); }
.lens-parts { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0; }
.lens-parts > div { flex:1; min-width:130px; padding:12px 16px; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-surface); }
.lens-parts small { color:var(--pencil); font:600 var(--type-meta)/1.5 var(--sans); }
.lens-parts p { font:500 1.45rem/1.6 var(--serif); margin:8px 0 0!important; }
.grammar-lens .lens-why,.grammar-lens .lens-tip { font:400 var(--type-body)/1.65 var(--sans); margin:12px 0 0; }
.lens-tip { padding-top:12px; border-top:1px solid var(--rule); }
.wk-memory-note { border-left:3px solid #ba8540; padding:12px 16px; background:color-mix(in srgb,#e9cd9c 20%,var(--paper)); border-radius:4px 12px 12px 4px; }
.wk-memory-note strong { display:block; margin-top:6px; }
.gx-stage.wk-stage .wk-sheet .wk-options button { border-radius:var(--r-dialog); transition:transform .15s,box-shadow .15s,background .15s; }
.gx-stage.wk-stage .wk-sheet .wk-options button:not(:disabled):hover { transform:translateY(-2px); box-shadow:0 2px 0 #315b5120; }
.gx-stage.wk-stage .wk-sheet .wk-options .gx-right { opacity:1; background:color-mix(in srgb,var(--malachite) 13%,var(--galley))!important; color:var(--carbon)!important; border-color:var(--malachite)!important; box-shadow:0 2px 0 #638674; }
.gx-stage.wk-stage .wk-sheet .wk-options .gx-wrong { opacity:1; background:color-mix(in srgb,var(--wax) 8%,var(--galley))!important; color:var(--carbon)!important; border-color:color-mix(in srgb,var(--wax) 50%,transparent)!important; box-shadow:0 3px 0 #c59b65; }
.gx-stage.wk-stage .wk-sheet .wk-verdict { padding:0; border:0; background:transparent; scroll-margin-block:24px; outline:none; }
.wk-feedback-heading { display:flex; gap:14px; align-items:center; margin:8px 0 18px; }
.wk-feedback-heading strong { font:600 1rem/1.4 var(--sans); margin:0 0 5px; }
.wk-feedback-heading > div > span { font:400 var(--type-body)/1.5 var(--sans); }
.wk-feedback-symbol { flex:0 0 64px; width:64px; height:64px; border-radius:18px; background:color-mix(in srgb,#477766 14%,var(--paper)); display:grid; place-items:center; animation:grammar-cheer .5s ease-out; }
.wk-feedback-symbol svg { width:60px; height:60px; }
.wk-stage .tutor-local { border:0; padding:0; background:transparent; box-shadow:none; }
.wk-stage .tutor-local-head { padding:12px 0; }
.wk-stage .tutor-local-head .smallcaps,.wk-stage .tutor-mark { display:none; }
.wk-stage .tutor-local-head p { margin:0; font-size:var(--type-body); }
.wk-stage .tutor-prompts { margin:0 0 14px; }
.wk-stage .tutor-local-body .case-explorer { margin-top:16px; }
.gx-stage.wk-stage .wk-sheet .wk-footer { position:static; padding:16px 0; background:var(--paper); border-top:1px solid var(--rule); }
.gx-stage.wk-stage .wk-sheet[data-phase="intro"] .wk-page-slots { display:none; }
.gx-stage.wk-stage .wk-sheet[data-phase="question"] .lesson-compass { grid-template-columns:90px minmax(0,1fr); }
.gx-stage.wk-stage .wk-sheet[data-phase="question"] .lesson-window { height:86px; }
.gx-stage.wk-stage .wk-sheet[data-phase="question"] .lesson-window .gx-mate { width:60px; height:67px; left:14px; top:17px; }
.gx-stage.wk-stage .wk-sheet[data-phase="complete"] .wk-body > h3 { font:400 var(--type-heading)/1.4 var(--serif); margin:20px 0 12px; }
@keyframes grammar-settle { from { opacity:.5; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes grammar-cheer { 0% { transform:scale(.85) rotate(-7deg); } 55% { transform:scale(1.07) rotate(4deg); } 100% { transform:scale(1) rotate(0); } }
@media(max-width:600px) {
.case-explorer > summary { padding:14px; gap:10px; }
.case-roles { grid-template-columns:repeat(2,minmax(0,1fr)); }
.case-controls { gap:12px; }
.case-equation { gap:8px; }
.gx-stage.wk-stage .wk-sheet .lesson-compass { grid-template-columns:80px minmax(0,1fr); gap:14px; }
.gx-stage.wk-stage .wk-sheet .lesson-window { height:84px; }
.gx-stage.wk-stage .wk-sheet .lesson-window .gx-mate { width:56px; height:65px; left:12px; top:17px; }
.wk-journey > span { font-size:var(--type-meta); gap:5px; }
.wk-journey { gap:4px; }
.wk-top-actions { gap:6px; }
.grammar-lens { padding:16px; }
.wk-feedback-symbol { flex-basis:48px; width:48px; height:48px; }
.wk-feedback-symbol svg { width:46px; height:46px; }
}
html[data-motion="low"] :is(.grammar-lens,.case-transform,.wk-feedback-symbol,.wk-earned > span) { animation:none; }
html[data-motion="low"] .wk-options button { transition:none!important; transform:none!important; }
.wk-stage .gx-top { gap:8px; align-items:center; }
.gx-stage.wk-stage .gx-top .gx-topic { display:block; min-width:0; white-space:normal; overflow:visible; text-overflow:clip; line-height:1.4; }
@media(max-width:600px) { .gx-stage.wk-stage .gx-top .gx-topic { font-size:var(--type-meta); } }
.grammar-tables { margin:18px 0 22px; }
.grammar-tables > .smallcaps { display:block; margin-bottom:10px; }
.grammar-tables.is-compact > .smallcaps { display:none; }
.gt-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); align-items:start; }
.gt-table { margin:0; padding:14px 16px 12px; border:1px solid var(--rule); border-radius:var(--r-surface,10px); background:var(--paper); }
.gt-table figcaption { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-bottom:8px; }
.gt-table figcaption strong { font:600 var(--type-body)/1.35 var(--serif); }
.gt-meaning { font:400 var(--type-meta)/1.4 var(--sans); color:var(--pencil); }
.gt-drill-go { margin-left:auto; min-height:36px; padding:4px 12px; border:1.5px solid var(--signal-ink); border-radius:var(--r-pill,999px); background:none; color:var(--signal-ink); font:600 var(--type-meta)/1.2 var(--sans); cursor:pointer; }
.gt-scroll { overflow-x:auto; }
.gt-table table { width:100%; border-collapse:collapse; }
.gt-table th, .gt-table td { padding:7px 8px; border-bottom:1px solid var(--rule); text-align:left; vertical-align:baseline; }
.gt-table tr:last-child th, .gt-table tr:last-child td { border-bottom:0; }
.gt-table thead th { font:600 var(--type-meta)/1.3 var(--sans); color:var(--pencil); }
.gt-table tbody th { font:400 var(--type-body)/1.4 var(--serif); color:var(--pencil); white-space:nowrap; }
.gt-form { font:500 var(--type-body)/1.4 var(--serif); color:var(--carbon); }
.gt-form mark { background:none; color:var(--signal-ink); font-weight:700; }
.gt-gloss { font:400 var(--type-meta)/1.4 var(--sans); color:var(--pencil); }
.gt-form.is-covered { position:relative; color:transparent; }
.gt-table .gt-form.is-covered mark, .gt-table .gt-form.is-covered span { color:transparent; pointer-events:none; }
.gt-form.is-covered::after { content:attr(data-cover); position:absolute; left:8px; color:var(--pencil); }
.gt-form.is-found { animation:gt-found var(--mo-fill) ease-out; }
@keyframes gt-found { from { background:color-mix(in srgb,var(--signal-ink) 18%,transparent); } to { background:transparent; } }
.gt-drill { margin-top:10px; padding-top:10px; border-top:1px dashed var(--rule); }
.gt-drill-ask { font:500 var(--type-body)/1.4 var(--serif); margin:0 0 8px; }
.gt-drill-options { display:flex; flex-wrap:wrap; gap:8px; }
.gt-drill-options button { min-height:44px; padding:6px 14px; border:1px solid var(--rule); border-radius:var(--r-control,8px); background:var(--paper); font:500 var(--type-body)/1.2 var(--serif); cursor:pointer; }
.gt-drill-options button.is-retry { opacity:.45; text-decoration:line-through; }
.gt-drill-done { margin:0 0 8px; font:600 var(--type-meta)/1.4 var(--sans); }
.gt-hint { margin:8px 0 0; font:400 var(--type-meta)/1.4 var(--sans); color:var(--pencil); }
.grammar-glance { margin:16px 0; border:1px solid var(--rule); border-radius:var(--r-surface,10px); background:var(--paper); }
.grammar-glance > summary { display:flex; align-items:center; gap:12px; min-height:56px; padding:12px 18px; cursor:pointer; }
.grammar-glance > summary span { display:flex; flex-direction:column; gap:2px; }
.grammar-glance > summary strong { font:600 var(--type-body)/1.3 var(--serif); }
.grammar-glance > summary small { font:400 var(--type-meta)/1.4 var(--sans); color:var(--pencil); }
.glance-body { padding:0 18px 18px; }
.glance-topic { padding:14px 0; border-top:1px solid var(--rule); }
.glance-topic h4 { margin:0 0 8px; font:600 var(--type-body)/1.3 var(--sans); }
.glance-topic .grammar-tables { margin:0 0 10px; }
.glance-open { min-height:40px; padding:6px 14px; border:1.5px solid var(--signal-ink); border-radius:var(--r-pill,999px); background:none; color:var(--signal-ink); font:600 var(--type-meta)/1.2 var(--sans); cursor:pointer; }
html[data-motion="low"] .gt-form.is-found { animation:none; }
.glance-band { margin:18px 0 0; font:600 var(--type-meta)/1.3 var(--sans); letter-spacing:.08em; color:var(--pencil); }
.glance-band:first-child { margin-top:4px; }
.gt-table table th { background:transparent; }
.gt-table table tbody th { width:1%; padding-right:14px; color:var(--pencil); }
.gt-table table th { letter-spacing:0; text-transform:none; }
.gt-table.is-wide { grid-column:1 / -1; }
.gt-table.is-wide .gt-form { white-space:nowrap; }
#v-review.daily-mode #practice-welcome { max-width:980px; margin:18px auto 40px; width:100%; scroll-margin-top:90px; }
#v-review.daily-mode > .rev-head, #v-review.daily-mode .practice-mode-label,
#v-review.daily-mode .rev-dial, #v-review.daily-mode #practice-challenge,
#v-review.daily-mode #practice-workbench, #v-review.daily-mode .quill-wrap { display:none; }
.daily-adventure { color:var(--carbon); font:400 1rem/1.6 var(--sans); }
.daily-adventure *, .desk-daily * { box-sizing:border-box; }
.daily-adventure [hidden] { display:none!important; }
.daily-adventure h2,.daily-adventure h3 { font-family:var(--serif); text-transform:none; letter-spacing:0; color:var(--carbon); }
.daily-adventure h2 { font-size:clamp(1.7rem,3vw,2.6rem); line-height:1.2; margin:12px 0 18px; }
.daily-adventure p { margin:12px 0; font-weight:400; }
.daily-adventure button { cursor:pointer; white-space:normal; }
.daily-adventure .daily-top { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:0 0 16px; position:static; background:transparent; border:0; box-shadow:none; width:auto; min-height:0; height:auto; }
.daily-top .smallcaps { font-size:.73rem; letter-spacing:.1em; }
.daily-sound,.daily-back,.daily-clue { color:var(--carbon); background:transparent; border:0; box-shadow:none; min-height:44px; padding:8px 0; font:600 .8rem/1.4 var(--sans); text-transform:none; letter-spacing:0; }
.daily-sound { border:1px solid color-mix(in srgb,var(--carbon) 30%,transparent); padding:6px 12px; border-radius:var(--r-control); flex-shrink:0; }
.daily-sound[aria-pressed="true"] { background:transparent; }
.daily-invitation { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(220px,1fr); gap:28px; padding:clamp(24px,4vw,44px); border:1px solid var(--rule); border-radius:28px; background:var(--paper); box-shadow:0 2px 0 color-mix(in srgb,var(--rule) 55%,transparent); }
.daily-copy > p { color:var(--steel); max-width:440px; }
.daily-copy > small { display:block; margin-top:15px; font-size:.75rem; }
.daily-copy .btn { margin-top:10px; width:100%; }
.daily-landscape { position:relative; align-self:center; min-width:0; }
.daily-landscape > svg { display:block; width:100%; height:auto; }
.daily-route { display:flex; list-style:none; padding:0; gap:0; margin:26px 0 18px; }
.daily-route li { display:flex; align-items:center; gap:8px; font-size:var(--t-00); flex:1; position:relative; }
.daily-route li:not(:last-child)::after { content:''; height:1px; background:var(--rule); flex:1; margin:0 12px; }
.daily-route li > span { display:grid; place-items:center; border-radius:50%; width:30px; height:30px; border:1px solid var(--rule); flex-shrink:0; background:var(--paper); }
.daily-route .is-current > span { background:#edc869; color:#273544; border-color:#b68c36; box-shadow:0 0 0 4px #edc86928; }
.daily-route .is-done > span { background:#365e54; color:#fffdf7; border-color:#365e54; }
.daily-personal { color:var(--steel); font-size:var(--t-00); padding:10px 14px; text-align:center; }
.daily-options { border-top:1px solid var(--rule); margin-top:22px; padding:4px 0; }
.daily-options > summary,.daily-album > summary,.level-browse-all > summary { cursor:pointer; min-height:48px; padding:12px 0; font:var(--fw-strong) var(--type-body)/1.5 var(--sans); color:var(--carbon); }
.daily-options > div { display:flex; flex-wrap:wrap; gap:10px; }
.daily-options > p { font-size:var(--t-0); color:var(--steel); }
.daily-meter { display:flex; align-items:center; gap:16px; margin:20px 0; font-size:var(--t-00); }
.daily-meter progress { flex:1; height:8px; width:100%; appearance:none; border:0; border-radius:var(--r-control); overflow:hidden; background:var(--rule); }
.daily-meter progress::-webkit-progress-bar { background:var(--rule); }
.daily-meter progress::-webkit-progress-value { background:#638f7e; transition:width .25s; }
.daily-meter progress::-moz-progress-bar { background:#638f7e; }
.daily-meter span { white-space:nowrap; }
.daily-task { max-width:780px; margin:0 auto; padding:clamp(22px,4vw,38px); border:1px solid var(--rule); border-radius:22px; background:var(--paper); animation:daily-arrive .22s ease-out; }
.daily-task-head { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:62px; }
.daily-task-head .smallcaps { font-size:.73rem; }
.daily-task h2 { font-size:clamp(1.45rem,3vw,2rem); }
.daily-task > .grammar-lens + .btn { margin-top:18px; }
.daily-line { font:500 clamp(1.3rem,2.7vw,1.9rem)/1.65 var(--serif); padding:18px 22px; border-left:3px solid #a48b4f; border-radius:0 12px 12px 0; background:color-mix(in srgb,#e6ca89 12%,var(--paper)); overflow-wrap:anywhere; }
.daily-meaning { font-weight:600; }
.daily-source { font-size:var(--t-00); color:var(--steel); font-style:italic; }
.daily-choices { display:grid; gap:10px; margin:24px 0 12px; }
.daily-choices button { min-height:54px; text-align:left; padding:15px 20px; color:var(--carbon); background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-surface); box-shadow:0 3px 0 var(--rule); font:500 1rem/1.5 var(--sans); letter-spacing:0; text-transform:none; }
.daily-choices button[lang] { font-family:var(--serif); font-size:var(--t-3); }
.daily-choices button:hover:not(:disabled) { border-color:#638f7e; background:color-mix(in srgb,#b8d5c1 16%,var(--paper)); transform:translateY(-1px); }
.daily-adventure button:disabled { cursor:default; opacity:.55; }
.daily-clue { text-decoration:underline; text-underline-offset:4px; }
.daily-feedback { margin-top:20px; padding:22px; background:color-mix(in srgb,#b8d5c1 20%,var(--paper)); border:1px solid #799d8e; border-radius:var(--r-dialog); animation:daily-arrive .22s ease-out; }
.daily-feedback.is-learning { background:color-mix(in srgb,#e6ca89 20%,var(--paper)); border-color:#bda271; }
.daily-feedback h3 { font-size:1.4rem; margin:0 0 12px; }
.daily-feedback > p { font-size:var(--t-0); }
.daily-feedback .grammar-lens { margin:12px 0; }
.daily-feedback .btn { margin-top:16px; }
.daily-correction { font-weight:600; }
.daily-word-meaning { font:500 1.3rem/1.5 var(--serif); padding:18px; border-radius:var(--r-surface); background:color-mix(in srgb,#b8d5c1 20%,var(--paper)); }
.daily-self-check { display:flex; gap:12px; flex-wrap:wrap; }
#daily-form { display:grid; grid-template-columns:1fr auto; gap:12px; margin:22px 0; }
#daily-form label { grid-column:1/-1; font-size:var(--t-0); font-weight:600; }
#daily-input { width:100%; min-width:0; padding:12px 14px; font:500 1.3rem var(--serif); color:var(--carbon); border:1px solid var(--rule); border-radius:var(--r-surface); background:var(--paper); }
.daily-tile-target,.daily-tiles { display:flex; flex-wrap:wrap; gap:8px; min-height:80px; padding:14px 0; }
.daily-tile-target { padding:14px; border:1px dashed #b49c6b; border-radius:var(--r-surface); margin:20px 0 10px; background:color-mix(in srgb,#e6ca89 10%,var(--paper)); }
.daily-tile-target button,.daily-tiles button { font:500 1.08rem/1.3 var(--serif); min-height:44px; border:1px solid var(--rule); border-radius:var(--r-surface); color:var(--carbon); background:var(--paper); padding:10px 12px; box-shadow:0 2px 0 var(--rule); }
.daily-tiles button:disabled { visibility:hidden; }
.daily-album { border-top:1px solid var(--rule); margin-top:24px; text-align:left; }
.daily-album > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.daily-album figure { margin:0; padding:10px; border:1px solid var(--rule); background:var(--paper); border-radius:var(--r-surface); }
.daily-album svg { width:100%; height:auto; }
.daily-album figcaption { font-size:.7rem; text-align:center; }
.earned-flight { pointer-events:none; position:fixed; z-index:9999; top:45vh; left:0; width:130px; height:150px; filter:drop-shadow(0 8px 10px #27354430); }
.earned-flight > svg { width:100%; height:100%; }
.earned-flight > span { position:absolute; color:#d7a936; font-size:2rem; top:40%; left:-15%; }
.earned-flight > span:nth-child(3) { top:65%; left:-40%; font-size:1.4rem; }
.earned-flight > span:nth-child(4) { top:15%; left:-65%; font-size:var(--t-1); }
.desk-daily { display:flex; align-items:center; gap:20px; width:100%; text-align:left; border:1px solid var(--rule); border-radius:20px; background:var(--paper); color:var(--carbon); padding:22px 28px; box-shadow:0 2px 0 color-mix(in srgb,var(--rule) 50%,transparent); cursor:pointer; font-family:var(--sans); }
.desk-daily-art { width:70px; height:76px; flex-shrink:0; }
.desk-daily-art svg { width:100%; height:100%; }
.desk-daily > span:nth-child(2) { flex:1; }
.desk-daily small,.desk-daily strong,.desk-daily span span { display:block; }
.desk-daily small { font-size:.72rem; color:var(--steel); }
.desk-daily strong { font:600 1.3rem/1.4 var(--serif); margin:4px 0; }
.desk-daily span span { font-size:var(--t-00); color:var(--steel); }
.desk-shortcuts { display:flex; gap:18px; margin:0; }
.desk-shortcuts button { flex:1; padding:12px 0 12px 1.2em; display:flex; justify-content:space-between; border:0; border-top:1px solid var(--rule); box-shadow:none; border-radius:0; color:var(--carbon); background:transparent; font:var(--fw-strong) var(--type-body)/1.5 var(--sans); min-height:48px; text-decoration:none; }
#desk-details .friend-strip { position:static; max-width:760px; }
#desk-details .ask-card { max-width:760px; }
#desk-details .fr-bubble { font-size:var(--t-0); }
.level-browse-all { border-top:1px solid var(--rule); margin-top:24px; }
.level-browse-all > summary { padding:18px 0; }
.level-browse-all .level-browse { margin-top:6px; }
#v-profile .study-orientation { display:none; }
#v-library .lib-spread { display:block; margin:24px 0; }
#v-library #resume-hero { max-width:760px; }
.daily-adventure :focus-visible,.desk-daily:focus-visible,.desk-shortcuts button:focus-visible,.level-browse-all > summary:focus-visible,#desk-preferences > summary:focus-visible { outline:3px solid var(--play); outline-offset:4px; }
@keyframes daily-arrive { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:640px) {
#v-review.daily-mode #practice-welcome { margin-top:8px; scroll-margin-top:110px; }
.daily-invitation { grid-template-columns:1fr; gap:0; padding:24px; border-radius:20px; }
.daily-landscape { grid-row:1; width:170px; justify-self:center; margin-bottom:10px; }
.daily-copy h2 { margin-top:0; }
.daily-copy > p { font-size:var(--t-0); }
.daily-route li { font-size:.74rem; gap:6px; }
.daily-route li:not(:last-child)::after { margin:0 6px; }
.daily-route li > span { width:26px; height:26px; }
.daily-top .smallcaps { max-width:190px; font-size:.7rem; }
.daily-task { padding:20px; }
.daily-feedback { padding:18px; }
.daily-line { padding:12px 14px; }
#daily-form { grid-template-columns:1fr; }
.daily-options > div { flex-direction:column; }
.daily-album > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
.desk-daily { padding:18px; gap:12px; }
.desk-daily-art { width:50px; height:58px; }
.desk-daily strong { font-size:var(--t-2); }
.desk-shortcuts { gap:12px; }
}
html[data-motion="low"] :is(.daily-task,.daily-feedback) { animation-duration:1ms; }
html[data-motion="low"] .earned-flight { display:none; }
html[data-motion="low"] .daily-meter progress::-webkit-progress-value { transition:none; }
.typing-keyboard { display:block; width:100%; grid-column:1/-1; }
.typing-keyboard [hidden] { display:none!important; }
.typing-keyboard-toggle { display:inline-flex; align-items:center; width:auto; color:var(--carbon); background:transparent; border:1px solid var(--rule); border-radius:var(--r-control); padding:10px 14px; min-height:44px; font:600 .85rem/1.4 var(--sans); text-transform:none; letter-spacing:0; cursor:pointer; }
.typing-keyboard-toggle::before { content:'＋'; margin-right:8px; }
.typing-keyboard-toggle[aria-expanded="true"]::before { content:'−'; }
.typing-keyboard-keys { display:block; width:100%; margin-top:10px; padding:4px 0 2px; }
.gx-pad .gx-pad-row,.typing-keyboard .gx-pad-row,#wk-keys .gx-pad-row { display:flex; gap:6px; width:100%; margin-top:6px; justify-content:center; }
.gx-pad .gx-pad-k,.typing-keyboard .gx-pad-k,#wk-keys .gx-pad-k { flex:1 1 0; min-width:0; max-width:60px; min-height:54px; padding:10px 0; font:500 1.25rem/1.2 var(--sans); letter-spacing:0; text-transform:none; color:var(--carbon); border:1px solid var(--rule); border-radius:var(--r-surface); background:var(--paper); box-shadow:0 2px 0 var(--rule); cursor:pointer; }
.gx-pad .gx-pad-space,.typing-keyboard .gx-pad-space,#wk-keys .gx-pad-space { flex:4 1 0; max-width:280px; font-size:var(--t-1); }
.gx-pad .gx-pad-bs,.typing-keyboard .gx-pad-bs,#wk-keys .gx-pad-bs { flex:1.6 1 0; max-width:96px; }
#daily-keyboard { grid-column:1/-1; }
.daily-finish-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px 24px; }
.practice-settings,.practice-format { text-align:left; max-width:640px; margin:18px auto; border-top:1px solid var(--rule); }
.practice-settings summary,.practice-format summary { color:var(--carbon); cursor:pointer; font:600 .9rem/1.5 var(--sans); min-height:44px; padding:12px 0; }
#v-review.daily-mode .practice-format,#v-review.practice-empty .practice-format,#v-review.practice-finished:not(.practice-lobby) .practice-format { display:none; }
#v-review:not(.daily-mode) .practice-invitation { padding:26px; }
#v-review:not(.daily-mode) .practice-portrait { height:64px; padding:0; margin:0 auto 16px; background:transparent; }
#v-review:not(.daily-mode) .practice-portrait svg { height:64px; }
#v-review:not(.daily-mode) .practice-invitation h2 { font:400 clamp(1.6rem,3vw,2.1rem)/1.2 var(--serif); }
#v-review:not(.daily-mode) .practice-start-actions { margin-top:22px; }
#rev-kbd { font:600 .8rem/1.4 var(--sans); width:auto; }
@media(max-width:640px) {
.gx-pad .gx-pad-row,.typing-keyboard .gx-pad-row,#wk-keys .gx-pad-row { gap:3px; margin-top:4px; }
.gx-pad .gx-pad-k,.typing-keyboard .gx-pad-k,#wk-keys .gx-pad-k { min-height:48px; padding:8px 0; font-size:var(--t-1); }
.gx-pad .gx-pad-space,.typing-keyboard .gx-pad-space,#wk-keys .gx-pad-space { font-size:var(--t-00); }
.practice-settings .practice-rounds { margin-top:10px; }
}
.daily-finish-actions { grid-column:2; }
@media(max-width:700px) {
}
.chapter-journey { max-width:820px; margin:0 auto; color:var(--carbon); }
.chapter-heading { position:static; display:grid; grid-template-columns:minmax(0,1fr) 160px; gap:24px; align-items:center; padding:24px; margin:0 0 24px; border:1px solid var(--rule); border-radius:20px; background:var(--paper); box-shadow:none; }
.chapter-heading h2 { font:400 1.8rem/1.2 var(--serif); margin:10px 0; text-transform:none; letter-spacing:0; }
.chapter-heading p { font:400 .9rem/1.6 var(--sans); color:var(--steel); margin:8px 0 16px; }
.chapter-heading progress { width:100%; height:8px; accent-color:#638f7e; display:block; margin-top:10px; }
.chapter-stops { list-style:none; padding:0; margin:0 0 0 22px; border-left:2px solid var(--rule); }
.chapter-stop { position:relative; padding:0 0 16px 30px; }
.chapter-stop::before { content:''; position:absolute; left:-6px; top:37px; width:10px; height:10px; border-radius:50%; background:var(--paper); border:2px solid var(--rule); }
.chapter-stop.is-done::before { background:#638f7e; border-color:#638f7e; }
.chapter-stop.is-current::before { background:#e4ba59; border-color:#a6802c; box-shadow:0 0 0 5px #e4ba5930; }
#v-course .chapter-journey .chapter-go { display:flex; align-items:center; gap:18px; width:100%; min-width:0; padding:16px 20px; border:1px solid var(--rule); border-radius:var(--r-dialog); background:var(--paper); color:var(--carbon); box-shadow:0 3px 0 var(--rule); text-align:left; font:500 .95rem/1.4 var(--sans); text-transform:none; letter-spacing:0; cursor:pointer; transition:transform .15s; }
#v-course .chapter-journey .chapter-go:hover { transform:translateY(-2px); border-color:#638f7e; }
#v-course .chapter-journey .is-current .chapter-go { border:2px solid #9d7a32; background:color-mix(in srgb,#f1d990 15%,var(--paper)); box-shadow:0 2px 0 #9d7a3240; }
.chapter-book { flex:0 0 44px; height:54px; display:grid; place-items:center; border:1px solid var(--rule); border-left:5px double #a78b52; border-radius:2px 9px 9px 2px; font:600 1.2rem var(--serif); background:var(--paper); }
.is-done .chapter-book { background:#365e54; border-color:#365e54; color:#fff; }
.is-done .chapter-book > .ic { width:72%; height:72%; }
.is-current .chapter-book { background:#efd18b; color:#293b36; }
.chapter-label { flex:1; min-width:0; }
.chapter-label small { display:block; font-size:.72rem; color:var(--steel); margin-bottom:4px; }
.chapter-label strong { display:block; font:600 1.2rem/1.3 var(--serif); }
.chapter-label > span { display:block; font-size:var(--t-00); margin-top:8px; }
.chapter-fold { margin:4px 0 18px; }
.chapter-fold > summary { cursor:pointer; padding:14px 10px; min-height:48px; color:var(--steel); font:600 .85rem/1.5 var(--sans); }
.chapter-fold[open] > summary { margin-bottom:14px; }
.chapter-ending { position:static; text-align:center; padding:24px; border:1px dashed #ac9463; border-radius:18px; margin:20px 0; background:var(--paper); }
.chapter-ending h3 { font:400 1.4rem var(--serif); margin:10px 0; }
.chapter-ending p { font:.85rem/1.6 var(--sans); color:var(--steel); }
.chapter-seal { display:block; width:72px; height:72px; margin:auto; }
.chapter-seal > .w-seal { display:block; width:100%; height:100%; }
#v-course .chapter-ending .chapter-go { justify-content:center; width:auto; margin:16px auto; }
.chapter-next-level { margin-top:12px; }
@media(min-width:950px) {
#v-course .course-atlas { display:grid; grid-template-columns:230px minmax(0,1fr); gap:0 32px; align-items:start; }
#v-course .course-atlas > .atlas-heading { grid-column:1/-1; }
#v-course .course-atlas > .level-rail { grid-column:1; grid-row:2; align-self:stretch; min-width:0; }
#v-course .course-atlas > .level-rail > .level-tabs { display:grid; grid-template-columns:1fr; position:sticky; top:90px; }
#v-course .course-atlas > .level-panel { grid-column:2; grid-row:2; min-width:0; }
#v-course .course-atlas > .level-caption { grid-column:1/-1; grid-row:3; }
#v-course .course-atlas > .case-explorer { grid-column:1/-1; grid-row:4; }
}
@media(max-width:640px) {
.chapter-heading { grid-template-columns:1fr 80px; padding:18px; gap:10px; }
.chapter-heading h2 { font-size:var(--t-4); }
.chapter-heading p { font-size:var(--t-00); }
.chapter-stops { margin-left:7px; }
.chapter-stop { padding-left:18px; }
#v-course .chapter-journey .chapter-go { padding:14px; gap:12px; }
.chapter-book { flex-basis:34px; height:44px; }
.chapter-label strong { font-size:var(--t-2); }
}
html[data-motion="low"] #v-course .chapter-journey .chapter-go { transition:none; transform:none; }
.chapter-stops { border:0; margin:18px 0; }
.chapter-stop { height:176px; padding:0; isolation:isolate; }
.chapter-stop::before { display:none; }
.chapter-ink-route { position:absolute; inset:0; width:100%; height:176px; overflow:visible; z-index:-1; pointer-events:none; }
.chapter-ink-route path { fill:none; stroke:#b6ab8a; stroke-width:3; stroke-dasharray:5 7; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.is-done .chapter-ink-route path { stroke:#638f7e; stroke-dasharray:none; }
#v-course .chapter-journey .chapter-stop .chapter-go { width:170px; min-height:0; margin-left:calc(var(--stop-x,50%) - 85px); padding:0; display:flex; flex-direction:column; gap:8px; text-align:center; background:transparent; border:0; box-shadow:none; }
#v-course .chapter-journey .chapter-stop .chapter-go > span:last-child { display:none; }
.chapter-stop .chapter-book { flex:0 0 auto; width:68px; height:80px; border:2px solid #a79670; border-left:7px double #a79670; border-radius:5px 15px 15px 5px; box-shadow:4px 5px 0 #a7967028; font-size:var(--t-4); }
.chapter-stop .chapter-label { padding:7px 10px; border-radius:var(--r-surface); background:var(--paper); }
.chapter-stop .chapter-label strong { font-size:var(--t-1); }
.chapter-stop .chapter-label > span { display:none; }
.chapter-stop .chapter-label small { font-size:.7rem; margin-bottom:3px; }
.is-current .chapter-book { outline:3px solid #cfac54; outline-offset:5px; box-shadow:4px 7px 0 #9d7a3240; }
.chapter-trail-friend { position:absolute; top:5px; left:calc(var(--stop-x,50%) + 42px); width:56px; height:66px; pointer-events:none; }
.chapter-trail-friend svg { width:100%; height:100%; }
.chapter-trail-friend.is-lively { animation:chapter-hop 1.2s ease-in-out 2; transform-origin:50% 100%; }
.chapter-ending { max-width:480px; margin:36px auto 20px; }
.lesson-first-guide { padding:14px 18px; border-left:3px solid #8ca996; border-radius:0 12px 12px 0; background:var(--world-tint,var(--paper)); font:.9rem/1.6 var(--sans); color:var(--carbon); }
.lesson-given-meaning { font:500 1.05rem/1.6 var(--sans); color:var(--carbon); margin:8px 0; }
.lesson-specimen .lesson-line-tools { align-items:center; gap:14px; flex-wrap:wrap; }
@keyframes chapter-hop { 0%,100% { transform:translateY(0) rotate(-5deg); } 45% { transform:translateY(-14px) rotate(7deg); } 75% { transform:translateY(-3px) rotate(-3deg); } }
@media(max-width:640px) {
.chapter-stops { margin:18px 0; }
.chapter-stop { padding:0; }
#v-course .chapter-journey .chapter-stop .chapter-go { width:150px; margin-left:calc(var(--stop-x,50%) - 75px); }
.chapter-trail-friend { width:42px; left:calc(var(--stop-x,50%) + 37px); }
}
html[data-motion="low"] .chapter-trail-friend.is-lively { animation-duration:1ms; }
.word-first-meeting { padding:20px 0; }
.word-first-pair { display:grid; gap:12px; padding:26px; margin:18px 0; border:1px solid var(--rule); border-radius:18px; background:var(--paper); text-align:center; }
.word-first-pair strong { font:600 2rem/1.4 var(--serif); }
.word-first-pair > span { font:500 1.15rem/1.5 var(--sans); }
.word-first-meeting > p,.word-first-meeting blockquote { font:.95rem/1.6 var(--sans); }
.word-first-meeting blockquote { border-left:3px solid #a79670; margin:18px 0; padding:0 20px; }
.living-shelf,.lesson-theatre,.theatre-discovery,.living-stage { --scene-ink:#335d52; --scene-wash:#dbe9df; --scene-accent:#edba64; --scene-night:#203e39; }
[data-setting="cafe"] { --scene-ink:#7e4545; --scene-wash:#f0dfd6; --scene-accent:#e1ac51; --scene-night:#523b45; }
[data-setting="bookshop"] { --scene-ink:#475484; --scene-wash:#e0e5f1; --scene-accent:#d2ae65; --scene-night:#303c60; }
[data-setting="plaza"] { --scene-ink:#96502f; --scene-wash:#f4e5ca; --scene-accent:#ddb550; --scene-night:#68432e; }
[data-setting="library"] { --scene-ink:#565077; --scene-wash:#e8e3f0; --scene-accent:#c8a763; --scene-night:#36334c; }
.living-shelf { margin:0 0 28px; min-width:0; }
.language-welcome { position:relative; display:grid; grid-template-columns:1.15fr 1fr; gap:20px; align-items:center; overflow:hidden; padding:clamp(24px,4vw,42px); border:1px solid var(--rule); border-top:3px solid var(--pine); border-radius:var(--learning-radius); background:var(--galley); color:var(--carbon); }
.welcome-copy { position:relative; z-index:1; }
.welcome-copy .smallcaps { color:var(--pine); font-size:var(--type-meta); letter-spacing:.08em; }
.language-welcome .welcome-copy h2 { font:400 clamp(2rem,4vw,3rem)/1.1 var(--serif); text-transform:none; letter-spacing:-.05em; margin:14px 0; overflow-wrap:anywhere; }
.welcome-copy p { max-width:330px; font:400 var(--type-body)/1.6 var(--sans); }
.welcome-copy > small { display:block; margin-top:14px; font:var(--type-meta)/1.5 var(--sans); }
.welcome-illustration { position:relative; min-width:0; transform:rotate(-3deg); }
.welcome-illustration svg { width:100%; height:auto; display:block; }
.welcome-speech { position:absolute; top:-10%; left:12%; max-width:85%; padding:12px 18px; background:var(--paper); border:1px solid color-mix(in srgb,var(--scene-ink) 25%,transparent); border-radius:20px 20px 20px 0; font:500 1.2rem/1.3 var(--serif); transform:rotate(3deg); box-shadow:0 2px 0 #00000009; }
.living-shelf button:focus-visible,.living-stage button:focus-visible,.lesson-theatre button:focus-visible,.theatre-discovery button:focus-visible { outline:3px solid var(--pine); outline-offset:4px; }
.living-shelf-heading { display:block; padding:18px 0; border:0; background:transparent; position:static; height:auto; }
.living-shelf-heading h3 { margin:8px 0; font:400 var(--type-heading)/1.2 var(--serif); text-transform:none; letter-spacing:-.03em; }
.living-shelf-heading p { font:var(--type-body)/1.6 var(--sans); margin:8px 0; }
.living-cards { display:grid; gap:14px; }
.living-card { display:grid; grid-template-columns:155px minmax(0,1fr) 24px; align-items:center; gap:24px; background:var(--paper); padding:18px; color:var(--carbon); border:1px solid var(--rule); border-radius:var(--learning-radius); text-align:left; text-transform:none; letter-spacing:0; box-shadow:0 2px 0 color-mix(in srgb,var(--rule) 65%,transparent); }
.living-card-art svg { width:100%; display:block; }
.living-card-copy { display:grid; gap:10px; }
.living-card-copy small { font:600 var(--type-meta)/1.5 var(--sans); text-transform:uppercase; letter-spacing:.09em; }
.living-card-copy strong { font:500 var(--type-heading)/1.25 var(--serif); }
.living-card-copy > span { font:var(--type-body)/1.6 var(--sans); }
.living-card:hover { border-color:var(--scene-ink); background:color-mix(in srgb,var(--scene-wash) 28%,var(--paper)); }
.living-card[data-format="debate"] { border-top:5px solid var(--scene-ink); }
.gx-stage.gx-theatre .gx { width:min(980px,100%); }
.gx-theatre .lesson-compass { grid-template-columns:1fr; padding:14px 20px; border:0; background:transparent; border-radius:0; box-shadow:none; }
.gx-theatre .lesson-window { display:none; }
.gx-theatre .lesson-progress { display:none; }
.gx-stage.gx-theatre .gx-mid { overflow:visible; padding:0; border:0; box-shadow:none; background:transparent; }
.gx-theatre .gx-head:empty,.gx-theatre #gx-after:empty { display:none; }
.lesson-theatre { display:grid; grid-template-columns:minmax(0,1fr); position:relative; border:1px solid color-mix(in srgb,var(--scene-ink) 30%,transparent); border-radius:18px; overflow:hidden; background:var(--paper); color:var(--carbon); }
.theatre-heading { position:relative; display:flex; justify-content:space-between; padding:12px 20px; background:var(--pine); color:var(--on-pine); font:600 var(--type-meta)/1.5 var(--sans); letter-spacing:.04em; }
.theatre-set { grid-area:2/1; position:relative; min-height:350px; overflow:hidden; background:linear-gradient(0deg,color-mix(in srgb,var(--scene-ink) 23%,var(--scene-wash)) 0 14%,transparent 14%),var(--scene-wash); }
.theatre-resident { position:absolute; bottom:18px; width:190px; height:200px; z-index:2; transform-origin:50% 100%; transition:transform .25s ease,opacity .25s ease; }
.theatre-resident svg { width:100%; height:100%; display:block; }
.theatre-dialogue { grid-area:2/1; position:relative; align-self:start; margin:26px 24% 110px; padding:22px 26px; background:#fffdf7; color:#243047; border:1px solid color-mix(in srgb,var(--scene-ink) 20%,transparent); border-radius:24px 24px 24px 3px; box-shadow:0 7px 0 #00000008; z-index:3; }
[data-speaker="b"] .theatre-dialogue { border-radius:24px 24px 3px 24px; }
.theatre-speaker { font:600 var(--type-meta)/1.5 var(--sans); text-transform:uppercase; letter-spacing:.12em; color:var(--scene-ink); }
.theatre-dialogue .theatre-line { color:inherit; font:500 clamp(1.375rem,1.25rem + 1vw,2rem)/1.45 var(--serif); margin:10px 0 12px; letter-spacing:-.02em; font-style:normal; overflow-wrap:anywhere; }
.theatre-line-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.theatre-audio,.theatre-translation,.theatre-skip,.living-text-button { background:transparent; border:0; color:var(--pine); min-height:44px; font:600 var(--type-control)/1.5 var(--sans); padding:6px 0; box-shadow:none; text-transform:none; letter-spacing:0; }
.theatre-audio { width:44px; height:44px; padding:11px; border-radius:50%; background:var(--scene-wash); flex-shrink:0; }
.theatre-audio svg { width:22px; height:22px; }
.theatre-translation { text-decoration:underline; text-underline-offset:4px; }
.theatre-dialogue :is(.theatre-audio,.theatre-translation) { color:#243047; }
.theatre-dialogue :is(.theatre-audio,.theatre-translation):focus-visible { outline:3px solid #243047;outline-offset:3px; }
.theatre-dialogue .theatre-meaning { font:var(--type-body)/1.6 var(--sans); margin:10px 0 0; }
.theatre-audio-status { font:var(--type-meta)/1.5 var(--sans); margin:0; }
.theatre-audio-status:empty { display:none; }
.theatre-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px; padding:18px 24px; }
.theatre-transcript { margin:0 24px 20px; border-top:1px solid var(--rule); font:var(--type-body)/1.6 var(--sans); }
.theatre-transcript summary { font-size:var(--type-control); cursor:pointer; padding:13px 0; min-height:44px; }
.theatre-transcript p { display:grid; grid-template-columns:70px 1fr; gap:4px 15px; margin:14px 0; }
.theatre-transcript p > span { font:500 var(--type-prompt)/1.5 var(--serif); }.theatre-transcript small{grid-column:2;font-size:var(--type-body);}
.theatre-discovery { padding:clamp(24px,4vw,44px); border:1px solid var(--rule); background:var(--paper); border-radius:18px; }
.theatre-discovery h2 { font:400 var(--type-heading)/1.25 var(--serif); text-transform:none; margin:10px 0 20px; }
.theatre-phrase { display:grid; grid-template-columns:130px minmax(0,1fr); align-items:center; gap:18px; background:var(--scene-wash); border-radius:var(--r-surface); padding:12px 24px 12px 4px; }
.theatre-coach { display:block; width:130px; height:140px; }.theatre-coach svg{width:100%;height:100%;}
.theatre-phrase blockquote { min-width:0; overflow-wrap:anywhere; margin:0; padding:0; font:500 var(--type-prompt)/1.5 var(--serif); border:0; background:none; font-style:normal; }
.theatre-phrase blockquote small { display:block; font:400 var(--type-body)/1.6 var(--sans); margin-top:8px; }
.theatre-note { max-width:58ch; font:400 var(--type-body)/1.65 var(--sans); margin:22px 0; }
.theatre-word-cloud { display:flex; flex-wrap:wrap; gap:12px; margin:18px 0; }
.theatre-word-cloud button { display:grid; gap:5px; text-align:left; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-surface); color:var(--carbon); padding:13px 18px; text-transform:none; letter-spacing:0; box-shadow:0 3px 0 #00000007; transform:rotate(-1deg); }
.theatre-word-cloud button:nth-child(even){transform:rotate(1deg);}
.theatre-word-cloud strong { font:500 1.4rem/1.4 var(--serif); }.theatre-word-cloud span{font:var(--type-body)/1.5 var(--sans);}
.theatre-word-cloud [aria-pressed="true"]{background:var(--scene-wash);border-color:var(--scene-ink);transform:translateY(-3px);}
.theatre-phrase,.theatre-word-cloud [aria-pressed="true"] { color:#243047; }
.theatre-word-status { font:var(--type-body)/1.6 var(--sans); min-height:26px; }
.gx-stage.living-stage { display:block; overflow-y:auto; padding:24px max(18px,env(safe-area-inset-right)) 48px max(18px,env(safe-area-inset-left)); color:var(--carbon); }
.living-sheet { width:min(980px,100%); margin:0 auto; }
.living-top { display:flex; justify-content:space-between; align-items:center; gap:20px; position:static; width:auto; height:auto; min-height:0; background:transparent; box-shadow:none; border:0; padding:0 0 14px; font:600 var(--type-meta)/1.5 var(--sans); }
.living-top>span { min-width:0;overflow-wrap:anywhere; }
.living-top .btn { flex-shrink:0;max-width:100%; }
.living-top b { margin-left:10px; border:1px solid var(--rule); padding:4px 8px; border-radius:var(--r-control); }
.living-steps { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--rule); padding:0 0 12px; margin-bottom:18px; font:600 var(--type-meta)/1.5 var(--sans); }
.living-steps > span { display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 0; color:var(--steel); }.living-steps > span > i{font-style:normal;display:grid;place-items:center;flex-shrink:0;min-width:26px;height:26px;border:1px solid var(--rule);border-radius:50%;}
.living-steps > span > .living-step-label { min-width:0; overflow-wrap:anywhere; }
.living-steps > .is-current{color:var(--carbon);}.living-steps > .is-current > i{background:var(--pine);color:var(--on-pine);border-color:var(--pine);}
.living-steps > .is-done > i{background:none;border-color:transparent;}.living-steps > .is-done > i > .ic{width:100%;height:100%;}
.living-content { min-width:0; }.living-content h1,.living-content h2,.living-content h3 { text-transform:none; letter-spacing:-.025em; font-family:var(--serif); }
.living-content h3{font-size:1.4rem;line-height:1.45;}
.living-footer { display:flex; flex-wrap:wrap; gap:14px; justify-content:flex-end; padding:24px 0 0; }
.living-welcome-hero { display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:20px; align-items:center; padding:0 0 18px; }
.living-welcome-hero h1 { font:400 clamp(2rem,4vw,3rem)/1.1 var(--serif); margin:12px 0; }
.living-welcome-hero>.living-coach { width:110px;height:120px; }
.living-welcome-hero p { font:400 var(--type-body)/1.6 var(--sans); margin:12px 0; max-width:50ch; }
.living-coach { display:block; width:150px; height:160px; }.living-coach svg{width:100%;height:100%;}
.living-article { background:var(--paper); padding:clamp(24px,4vw,44px); position:relative; border:1px solid color-mix(in srgb,var(--scene-ink) 25%,transparent); box-shadow: none; }
.living-article > header { position:static; display:block; height:auto; min-height:0; background:none; color:var(--carbon); padding:0; border:0; box-shadow:none; width:65%; }
.living-article h1 { font:400 clamp(2rem,4vw,3rem)/1.1 var(--serif); margin:18px 0; letter-spacing:-.05em; }
.living-article > header > p { font:var(--type-body)/1.6 var(--sans); max-width:38ch; }
.living-article-hero { position:absolute; right:25px; top:36px; width:28%; transform:rotate(3deg); }.living-article-hero svg{width:100%;display:block;}
.living-read-hint { margin:30px 0 0; padding:15px 0; border-top:2px solid var(--scene-ink); font:var(--type-body)/1.6 var(--sans); }
.living-paragraphs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.living-paragraphs section { min-width:0; }.living-paragraphs section > p{font:400 var(--type-prompt)/1.65 var(--serif);margin:8px 0 12px;font-style:normal;}
.living-paragraph-number{font:600 var(--type-meta)/1.5 var(--sans);color:var(--scene-ink);}
.living-paragraphs details{font:var(--type-body)/1.6 var(--sans);}.living-paragraphs summary{min-height:44px;padding:10px 0;cursor:pointer;color:var(--scene-ink);}
.living-highlight { display:inline; background:color-mix(in srgb,var(--scene-accent) 40%,transparent); border:0; border-bottom:2px solid var(--scene-accent); border-radius:2px; color:inherit; font:inherit; line-height:inherit; text-transform:none; letter-spacing:0; padding:0 3px; margin:0; box-shadow:none; }
.living-highlight[aria-expanded="true"]{background:var(--scene-accent);}
.living-phrase-note { margin:20px 0 0; padding:18px 22px; background:var(--scene-wash); border-left:4px solid var(--scene-ink); font:var(--type-body)/1.6 var(--sans); }.living-phrase-note strong{font:500 1.4rem/1.4 var(--serif);}
.living-phrase-note,.living-highlight[aria-expanded="true"] { color:#243047; }
[data-theme="dark"] .living-paragraph-number,
[data-theme="dark"] .living-paragraphs summary { color:var(--lazur-ink); }
.living-stage[data-format="postcard"] .living-article { border:8px solid var(--paper); outline:1px solid var(--rule); background:repeating-linear-gradient(0deg,transparent 0 34px,#8888880c 34px 35px),var(--paper); border-radius:2px; }
.living-stage[data-format="postcard"] .living-paragraphs { grid-template-columns:1fr; gap:16px; max-width:680px; }
.living-stage[data-format="postcard"] .living-paragraphs section { display:grid;grid-template-columns:24px 1fr;gap:0 14px;}.living-stage[data-format="postcard"] .living-paragraphs section > :not(.living-paragraph-number){grid-column:2;min-width:0;}
.living-stage[data-format="debate"] .living-article { border-top:12px solid var(--scene-ink); }
.living-stage[data-format="debate"] .living-paragraphs { grid-template-columns:1fr 1fr; }.living-stage[data-format="debate"] .living-paragraphs section:last-child{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:20px;}
.living-notice { display:grid; grid-template-columns:160px 1fr; gap:24px; align-items:center; }.living-notice h2{font:400 var(--type-heading)/1.25 var(--serif);margin:12px 0;}.living-notice p{font:var(--type-body)/1.65 var(--sans);max-width:55ch;}
.living-example { margin:20px 0; padding:4px 0 14px; border-left:0; border-bottom:1px solid var(--rule); background:transparent; border-radius:0; font:500 var(--type-prompt)/1.6 var(--serif); font-style:normal; }
.living-options { display:grid; gap:12px; }.living-options button{min-height:60px;padding:18px 24px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-surface);color:var(--carbon);text-align:left;font:500 var(--type-prompt)/1.5 var(--serif);text-transform:none;letter-spacing:0;box-shadow:0 3px 0 #00000006;}
.living-options .is-right { border-color:var(--scene-ink); background:color-mix(in srgb,var(--scene-ink) 12%,var(--paper)); }
.living-feedback { margin-top:24px; padding:22px 26px; background:var(--paper); border-left:4px solid var(--scene-ink); border-radius:0 12px 12px 0; }.living-feedback h3{margin:0 0 12px;}.living-feedback p{font:var(--type-body)/1.6 var(--sans);}.living-feedback .btn{margin-top:12px;}
.living-recall { position:relative; padding:clamp(24px,4vw,44px); background:var(--paper); border-radius:var(--r-dialog); border:1px solid var(--rule); }.living-recall > .living-coach{float:right;width:100px;height:110px;}.living-recall h2{font-size:2rem;line-height:1.25;max-width:24ch;}.living-recall-line{clear:both;font:500 var(--type-prompt)/1.65 var(--serif);padding:20px 0;}.living-recall-line span{display:inline-block;min-width:90px;text-align:center;border-bottom:2px dashed var(--scene-ink);color:var(--scene-ink);}
#living-recall-form { display:grid; gap:12px; }#living-recall-form label{font:var(--type-body)/1.6 var(--sans);}#living-recall-input{width:100%;min-height:58px;background:var(--paper);border:2px solid var(--scene-ink);border-radius:var(--r-surface);padding:12px 16px;font:var(--type-prompt)/1.5 var(--serif);color:var(--carbon);box-sizing:border-box;}
.living-support { display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px; }
.living-finish { text-align:center; padding:8px 20px 28px; }.living-finish h1{font:400 clamp(2rem,4vw,3rem)/1.1 var(--serif);margin:12px auto;max-width:15ch;}.living-finish > p{font:var(--type-body)/1.65 var(--sans);max-width:50ch;margin:18px auto;}.living-finish > .living-coach{margin:12px auto 0;}
.living-finish-phrase { font:500 var(--type-prompt)/1.5 var(--serif); background:var(--paper); padding:14px 24px; display:inline-block; border-radius:var(--r-surface); }.living-due{display:flex;justify-content:center;gap:12px;align-items:center;}.living-due strong{padding:6px 12px;background:var(--scene-ink);color:#fff;border-radius:var(--r-control);}
.practice-paths { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0; }
.practice-path { display:grid; grid-template-columns:54px 1fr; align-items:center; gap:16px; padding:20px; border:1px solid var(--rule); border-radius:var(--r-dialog); background:var(--paper); color:var(--carbon); text-align:left; text-transform:none; letter-spacing:0; }
.practice-path > svg { width:46px; height:46px; }.practice-path > span { display:grid;gap:7px; }.practice-path strong{font:600 var(--type-control)/1.5 var(--sans);}.practice-path small{font:var(--type-body)/1.6 var(--sans);}.practice-path b{font:600 var(--type-meta)/1.5 var(--sans);color:var(--pine);}
@media(min-width:1000px){.course-atlas .level-panel{min-width:0;}.living-shelf .language-welcome{grid-template-columns:1.15fr .85fr;}}
@media(max-width:650px){
.language-welcome { grid-template-columns:1fr 110px; padding:24px 20px; gap:8px; }.welcome-copy p{font-size:var(--type-body);}.language-welcome .welcome-copy h2{font-size:clamp(2rem,4vw,3rem);}.welcome-speech{font-size:var(--type-body);left:-10%;padding:8px;top:-20%;}.welcome-illustration{align-self:start;margin-top:50px;}
.living-card { grid-template-columns:85px minmax(0,1fr) 16px;gap:14px;padding:15px; }.living-card-copy strong{font-size:var(--t-3);}.living-card-copy > span{font-size:var(--type-body);}
.theatre-set { min-height:370px; }.theatre-dialogue{margin:26px 18px 155px;padding:18px 22px;}.theatre-dialogue .theatre-line{font-size:1.65rem;}.theatre-resident{width:130px;height:138px;bottom:8px;}
.theatre-footer{padding:14px 18px;gap:12px;}.theatre-footer .btn{padding:12px 14px;}.theatre-skip{font-size:var(--type-control);max-width:none;}.theatre-heading{padding:12px 18px;}
.theatre-discovery{padding:22px;}.theatre-phrase{grid-template-columns:85px minmax(0,1fr);padding:12px;gap:12px;}.theatre-coach{width:85px;height:100px;}.theatre-phrase blockquote{font-size:var(--type-prompt);}.theatre-word-cloud{gap:9px;}.theatre-word-cloud button{padding:10px 12px;}
.living-welcome-hero{padding:0 0 18px;grid-template-columns:1fr 82px;}.living-welcome-hero .living-coach{width:82px;height:100px;}.living-welcome-hero h1{font-size:clamp(2rem,4vw,3rem);}.living-welcome-hero p{font-size:var(--type-body);}
.living-top{gap:8px;flex-wrap:wrap;}.living-top > span{font-size:var(--type-meta);}.living-top .btn{padding:10px 12px;}
.living-article > header{width:100%;}.living-article h1{font-size:clamp(2rem,4vw,3rem);}.living-article-hero{position:relative;top:auto;right:auto;width:100%;max-width:250px;margin:16px auto;transform:rotate(-2deg);}.living-read-hint{margin-top:18px;}.living-paragraphs,.living-stage[data-format="debate"] .living-paragraphs{grid-template-columns:1fr;gap:20px;}.living-stage[data-format="debate"] .living-paragraphs section:last-child{grid-column:auto;}.living-paragraphs section > p{font-size:var(--type-prompt);}
.living-notice{grid-template-columns:75px 1fr;gap:15px;}.living-notice .living-coach{width:75px;height:95px;}.living-notice h2{font-size:var(--t-5);}.living-notice p{font-size:var(--type-body);}.living-example{padding:18px;font-size:var(--type-prompt);}.living-recall h2{font-size:1.6rem;}.living-recall > .living-coach{width:72px;height:82px;}.living-footer .btn{flex:1;}.practice-paths{grid-template-columns:1fr;}
}
@media(max-width:600px){
.living-steps { position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px; }
.living-steps[data-step-count="5"] { grid-template-columns:repeat(5,minmax(0,1fr)); }
.living-steps > span { display:contents; }
.living-steps > span > i { grid-row:1;justify-self:center;width:32px;height:32px; }
.living-steps > .is-current > .living-step-label { grid-column:1/-1;grid-row:2;text-align:center; }
.living-steps > span:not(.is-current) > .living-step-label { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0; }
}
html[data-motion="low"] .theatre-resident{transition:none;}
html[data-motion="low"] :is(.welcome-illustration,.welcome-speech,.living-article-hero,.theatre-word-cloud button){transform:none;}
.study-dock[data-surface="living"] .study-dock__action > .btn:focus-visible { outline:3px solid var(--pine); outline-offset:4px; }
html[data-motion="low"] .study-dock[data-surface="living"] .study-dock__action > .btn.primary:active { transform:none; }
.gx-stage.living-stage { scroll-padding-bottom:calc(var(--dock-h, 0px) + 24px); }
.living-finish > .ledger-sheet { width:min(100%,420px); margin:16px auto 0; text-align:left; }
.living-owed { width:min(100%,420px); margin:0 auto; text-align:left; }
.living-owed:empty { display:none; }
.mission-shelf-heading{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:24px;align-items:center;margin:0 0 22px;padding:24px;border:1px solid var(--rule);background:var(--paper);border-radius:20px 4px 20px 4px;position:static;height:auto;box-shadow:none;}
.mission-shelf-heading h3{font:400 clamp(1.8rem,3vw,2.7rem)/1.15 var(--serif);text-transform:none;letter-spacing:-.025em;margin:10px 0;}.mission-shelf-heading p{font:.9rem/1.6 var(--sans);max-width:52ch;margin:10px 0;}
.mission-journal{display:grid;text-align:center;gap:8px;padding:18px 0 18px 20px;border-left:1px dashed var(--rule);font:.75rem/1.5 var(--sans);}.mission-journal>strong{font:500 2.8rem/1 var(--serif);}.mission-journal small{font:500 1rem/1 var(--sans);}.mission-journal>div{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;}.mission-journal>div>span{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--rule);border-radius:50%;color:var(--steel);}.mission-journal svg{width:14px;height:14px;}.mission-journal .is-collected{background:#335d52;color:#fffdf7;border-color:#335d52;}
.mission-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px;}.mission-filters button{min-height:44px;padding:10px 16px;border:1px solid var(--rule);border-radius:24px;background:var(--paper);color:var(--carbon);font:600 .8rem/1.4 var(--sans);letter-spacing:0;text-transform:none;box-shadow:none;}.mission-filters [aria-pressed="true"]{background:#293c42;border-color:#293c42;color:#fffdf7;}
.mission-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}.mission-card{display:grid;grid-template-columns:minmax(0,1fr) 24px;grid-template-rows:140px 1fr;gap:18px;padding:22px;align-items:start;border-radius:18px 18px 6px 6px;overflow:hidden;}.mission-card[hidden]{display:none!important;}.mission-card .living-card-art{grid-column:1/-1;width:100%;height:140px;display:grid;place-items:center;background:#e6e1ec;border-radius:var(--r-surface);position:relative;}.mission-card .living-card-art>svg{width:auto;height:135px;max-width:100%;}.mission-card .living-card-copy{grid-column:1;gap:10px;}.mission-card .living-card-copy strong{font-size:1.6rem;}.mission-card .living-card-copy small{font-size:.7rem;}.mission-card .living-card-arrow{grid-column:2;align-self:center;font-size:var(--t-4);}
.mission-card[data-format="roleplay"] .living-card-art{background:#e2eee5;}.mission-card[data-format="negotiation"] .living-card-art{background:#e4e8f5;}.mission-card[data-format="timeline"] .living-card-art{background:#f5e6c9;}.mission-card[data-format="editor"] .living-card-art{background:#e2ebf0;}.mission-card[data-format="bridge"] .living-card-art{background:#efdfd7;}
.mission-card-cast{position:relative;display:flex;align-items:end;justify-content:center;height:125px;width:100%;}.mission-card-cast>svg{width:105px;height:105px;}.mission-card-cast>svg:nth-child(2){transform:rotate(6deg);}.mission-card-cast>i{position:absolute;top:4px;left:40%;font:500 1.8rem/1 var(--serif);background:var(--paper);border-radius:20px 20px 20px 0;padding:0 15px 12px;}
.mission-card-bridge{display:flex;align-items:center;gap:18px;}.mission-card-bridge>svg{width:65px;height:65px;}.mission-card-bridge i{font:500 2rem var(--serif);}
.mission-card-timeline{display:flex;gap:10px;align-items:center;}.mission-card-timeline i{display:grid;place-items:center;font:500 1.8rem var(--serif);width:55px;height:73px;background:#fffdf7;box-shadow:3px 4px 0 #56431d18;border-radius:var(--r-control);transform:rotate(-6deg);}.mission-card-timeline i:nth-child(2){transform:translateY(-12px) rotate(4deg);}.mission-card-timeline i:nth-child(3){transform:rotate(8deg);}
.mission-card-letter{width:135px;height:106px;background:#fffdf7;box-shadow:5px 5px 0 #26384518;padding:16px;transform:rotate(-4deg);display:grid;gap:9px;}.mission-card-letter svg{width:28px;height:28px;justify-self:end;}.mission-card-letter i{height:2px;background:#617c8b66;width:90%;}.mission-card-letter i:last-child{width:60%;}
.mission-collection-note,.mission-no-results{font:.8rem/1.6 var(--sans);margin:20px 0;color:var(--steel);}
.mission-heading{max-width:780px;margin:12px 0 28px;}.mission-heading h1{font:400 clamp(2.5rem,5vw,4.5rem)/1.08 var(--serif);margin:15px 0;letter-spacing:-.035em;}.mission-heading h2{font:400 clamp(1.8rem,4vw,3rem)/1.2 var(--serif);margin:14px 0;}.mission-heading>p{font:1rem/1.65 var(--sans);max-width:65ch;}.mission-heading>.smallcaps{color:var(--scene-ink);font-size:.75rem;}
.living-stage[data-format="negotiation"]{--scene-wash:#dde5f1;--scene-ink:#3e526f;}.living-stage[data-format="editor"]{--scene-wash:#dde9e6;--scene-ink:#375d56;}.living-stage[data-format="timeline"]{--scene-wash:#f0e3ca;--scene-ink:#7c552d;}.living-stage[data-format="bridge"]{--scene-wash:#eadfd7;--scene-ink:#754c3e;}
.mission-register{display:grid;grid-template-columns:1fr 1fr;gap:24px;}.mission-register>section{min-width:0;padding:30px;}.mission-register blockquote{margin:24px 0;padding:0;border:0;background:none;font:500 clamp(1.3rem,2.7vw,2rem)/1.6 var(--serif);font-style:normal;}.mission-register p{font:.95rem/1.7 var(--sans);}.mission-register-intro{font:.95rem/1.65 var(--sans);max-width:65ch;margin:0 0 26px;}.mission-old{background:#fcf3dd;border:1px solid #b49a72;box-shadow:5px 5px 0 #79543515;transform:rotate(-1deg);}.mission-old small{font:.75rem/1.5 var(--sans);color:#6b543e;}.mission-now{border:2px solid #587d70;border-radius:22px;background:#f8fff9;}.mission-register-mate{display:block;width:110px;height:115px;margin:12px auto;}.mission-register-mate>svg{width:100%;height:100%;}
.mission-documents{display:grid;gap:18px;max-width:820px;margin:0 auto;}.mission-documents>section{position:relative;min-width:0;padding:25px 28px 25px 70px;background:var(--paper);border:1px solid var(--rule);border-radius:20px 20px 20px 0;}.mission-message-stack>section:nth-child(2){margin-left:10%;border-radius:20px 20px 0 20px;background:#f8efd9;}.mission-message-stack>section:nth-child(3){margin-right:8%;}.mission-document-number{position:absolute;left:22px;top:28px;font:600 .85rem/1.3 var(--sans);color:var(--scene-ink);}.mission-documents>section>p{font:500 1.35rem/1.65 var(--serif);margin:0 0 12px;}.mission-documents details,.mission-prompt-support{font:.85rem/1.65 var(--sans);}.mission-documents summary,.mission-prompt-support summary{min-height:44px;cursor:pointer;padding:10px 0;color:var(--scene-ink);}.mission-editor-brief{gap:0;border-top:7px solid var(--scene-ink);box-shadow: none;}.mission-editor-brief>section{border-radius:0;border:0;border-bottom:1px solid var(--rule);}
.mission-response-stage{margin:0 0 30px;padding:24px;background:var(--paper);border:1px solid var(--rule);border-radius:24px;}.mission-response-stage h2{font:400 clamp(1.5rem,3vw,2.2rem)/1.45 var(--serif);margin:12px 0;}.mission-options button{display:grid;grid-template-columns:30px minmax(0,1fr);gap:15px;align-items:center;}.mission-options button>span:first-child{font:600 .8rem/1.5 var(--sans);border:1px solid var(--rule);border-radius:50%;width:28px;height:28px;display:grid;place-items:center;}
.mission-order{list-style:none;margin:24px 0;padding:0;display:grid;gap:15px;}.mission-order li{display:grid;grid-template-columns:38px minmax(0,1fr) 95px;align-items:center;gap:18px;padding:20px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-surface);box-shadow:0 3px 0 #00000009;}.mission-order li>b{font:500 1.6rem/1.2 var(--serif);color:var(--scene-ink);}.mission-order li>span{font:500 1.4rem/1.5 var(--serif);}.mission-order li>div{display:flex;gap:6px;}.mission-order li>div>button{width:44px;height:44px;border:1px solid var(--rule);border-radius:50%;background:var(--scene-wash);color:var(--carbon);font:500 1.4rem/1 var(--serif);padding:0;box-shadow:none;}.mission-order li>div>button:disabled{opacity:.35;}.mission-order-answer{font:500 1.25rem/1.7 var(--serif);padding:20px;background:var(--paper);border-left:4px solid var(--scene-ink);}
.mission-writing{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:24px;align-items:start;}.mission-writing>section{min-width:0;}.mission-writing label{display:block;font:600 .85rem/1.4 var(--sans);margin:0 0 12px;}.mission-writing textarea{display:block;box-sizing:border-box;resize:vertical;width:100%;min-height:260px;padding:24px;color:var(--carbon);background:repeating-linear-gradient(0deg,transparent 0 31px,#3044380d 31px 32px),var(--paper);border:2px solid var(--scene-ink);border-radius:var(--r-surface);font:400 1.25rem/1.6 var(--serif);}.mission-writing aside{padding:24px;background:var(--paper);border:1px solid var(--rule);border-radius:18px;}.mission-model{font:400 1.1rem/1.75 var(--serif);border-top:1px solid var(--rule);padding-top:20px;margin:20px 0 0;}.mission-speaking-cue{display:flex;gap:12px;align-items:center;font:.9rem/1.6 var(--sans);}.mission-speaking-cue svg{width:28px;height:28px;flex-shrink:0;}
.mission-self-review{margin:30px 0 16px;border:1px solid var(--rule);padding:24px;border-radius:var(--r-surface);background:var(--paper);}.mission-self-review legend{font:.8rem/1.6 var(--sans);padding:0 8px;max-width:90%;}.mission-self-review label{display:flex;gap:14px;align-items:flex-start;min-height:44px;padding:9px 0;font:.95rem/1.6 var(--sans);cursor:pointer;}.mission-self-review input{width:22px;height:22px;flex-shrink:0;margin:0;accent-color:var(--scene-ink);}.mission-save-hint{font:.8rem/1.6 var(--sans);}.living-stage #mission-save:disabled{opacity:.45;box-shadow:none;}.mission-production-saved{padding:12px;border:1px dashed var(--scene-ink);border-radius:var(--r-surface);}.mission-next-preview strong{display:block;font:500 1.6rem/1.5 var(--serif);margin-top:10px;}
.mission-desk-door{display:grid;grid-template-columns:140px minmax(0,1fr) 30px;gap:24px;align-items:center;width:100%;padding:22px;margin:16px 0;background:var(--galley);color:var(--carbon);border:1px solid var(--rule);border-radius:var(--r-surface);text-align:left;text-transform:none;letter-spacing:0;}.mission-desk-door>span:first-child{max-width:140px;overflow:hidden;}.mission-desk-door>span:nth-child(2){display:grid;gap:8px;}.mission-desk-door strong{font:500 1.5rem/1.3 var(--serif);}.mission-desk-door small,.mission-desk-door>span>span{font:.8rem/1.5 var(--sans);}.mission-desk-door .mission-card-cast svg{width:65px;height:70px;}.mission-desk-door .mission-card-cast{height:90px;}.mission-desk-door .mission-card-timeline i{width:36px;height:55px;font-size:var(--t-3);}.mission-desk-door svg{width:90px;height:80px;}.mission-desk-door .mission-card-bridge svg{width:45px;height:50px;}.mission-desk-door .mission-card-letter svg{width:28px;height:28px;}
.mission-reading-door{display:block;width:100%;max-width:1100px;margin:14px auto 22px;padding:16px 22px;background:var(--galley);border:1px solid var(--rule);border-radius:var(--r-surface);color:var(--carbon);text-align:left;font:600 .9rem/1.5 var(--sans);text-transform:none;letter-spacing:0;box-shadow:none;}
.mission-filters button:focus-visible,.mission-order button:focus-visible,.mission-reading-door:focus-visible,.mission-desk-door:focus-visible{outline:3px solid var(--scene-ink,#335d52);outline-offset:4px;}.mission-writing textarea:focus-visible{outline:3px solid var(--scene-ink);outline-offset:3px;}
@media(max-width:650px){.mission-shelf-heading{padding:20px;gap:14px;grid-template-columns:minmax(0,1fr) 85px;}.mission-journal{padding:12px 0 12px 12px;font-size:.7rem;}.mission-journal>strong{font-size:var(--t-6);}.mission-journal>div{gap:4px;}.mission-shelf-heading h3{font-size:var(--t-5);}.mission-shelf-heading p{font-size:var(--t-0);}.mission-cards{grid-template-columns:1fr;}.mission-card{grid-template-columns:90px minmax(0,1fr) 20px;grid-template-rows:auto;padding:18px;gap:14px;}.mission-card .living-card-art{grid-column:1;height:110px;}.mission-card .living-card-copy{grid-column:2;}.mission-card .living-card-arrow{grid-column:3;}.mission-card .living-card-copy strong{font-size:1.35rem;}.mission-card .living-card-art>svg{height:auto;width:90px;}.mission-card-cast{height:95px;}.mission-card-cast>svg{width:47px;height:60px;}.mission-card-cast>i{font-size:var(--t-3);left:25%;padding:0 10px 8px;}.mission-card-bridge{display:grid;gap:0;justify-items:center;}.mission-card-bridge>svg{width:32px;height:32px;}.mission-card-bridge i{font-size:var(--t-3);}.mission-card-timeline{gap:2px;}.mission-card-timeline i{width:26px;height:45px;font-size:var(--t-1);}.mission-card-letter{width:62px;height:85px;padding:10px;gap:6px;}.mission-card-letter svg{width:20px;height:20px;}.mission-register{grid-template-columns:1fr;gap:20px;}.mission-register>section{padding:24px;}.mission-register-mate{width:90px;height:95px;}.mission-heading h1{font-size:var(--t-7);}.mission-heading>p{font-size:var(--t-0);}.mission-documents>section{padding:22px 20px 22px 48px;}.mission-document-number{left:18px;top:26px;}.mission-documents>section>p{font-size:var(--t-3);}.mission-message-stack>section:nth-child(2){margin-left:6%;}.mission-response-stage{padding:18px;}.mission-response-stage h2{font-size:1.4rem;}.mission-options button{padding:16px;font-size:var(--t-2);gap:10px;}.mission-order li{grid-template-columns:22px minmax(0,1fr);gap:12px;padding:18px;}.mission-order li>div{grid-column:2;justify-self:end;}.mission-order li>span{font-size:var(--t-3);}.mission-writing{grid-template-columns:1fr;}.mission-writing textarea{font-size:var(--t-2);padding:18px;min-height:230px;}.mission-writing aside{padding:18px;}.mission-self-review{padding:18px;}.mission-self-review label{font-size:var(--t-0);}.mission-desk-door{grid-template-columns:85px minmax(0,1fr) 14px;gap:14px;padding:18px;}.mission-desk-door strong{font-size:var(--t-3);}.mission-desk-door .mission-card-cast>svg{width:44px;height:62px;}.mission-desk-door .mission-card-cast{height:90px;}.mission-desk-door .mission-card-timeline i{width:26px;height:44px;}.mission-desk-door .mission-card-bridge svg{width:35px;height:35px;}}
html[data-motion="low"] :is(.mission-old,.mission-card-letter,.mission-card-timeline i,.mission-card-cast>svg:nth-child(2)){transform:none;}
.mission-card[data-format="evidence"] .living-card-art{background:#f1e0ce;}.mission-card-evidence{display:flex;align-items:center;gap:16px;color:#684322;}.mission-card-evidence b{font:500 2.8rem/1 var(--serif);}.mission-card-evidence small{font:500 1.1rem var(--sans);}.mission-card-evidence i{display:grid;place-items:center;width:38px;height:38px;background:var(--paper);border:1px solid #9f7650;border-radius:50%;font:500 1.6rem var(--serif);}
.living-stage[data-format="evidence"]{--scene-wash:#f2e5d2;--scene-ink:#78512f;}.living-stage[data-format="evidence"] .mission-documents{border-top:1px solid var(--scene-ink);border-bottom:4px double var(--scene-ink);box-shadow:none;}.living-stage[data-format="evidence"] .mission-documents>section:first-child>p:first-of-type::first-letter{font-size:var(--t-7);line-height:1;}
.mission-claims{display:grid;gap:20px;margin:24px 0;}.mission-claims fieldset{min-width:0;margin:0;padding:22px;border:1px solid var(--rule);border-radius:var(--r-surface);background:var(--paper);}.mission-claims legend{font:500 1.4rem/1.5 var(--serif);max-width:95%;padding:0 8px;}.mission-claims label{display:flex;gap:12px;align-items:center;min-height:44px;font:.95rem/1.5 var(--sans);cursor:pointer;}.mission-claims input{width:22px;height:22px;flex-shrink:0;accent-color:var(--scene-ink);}.mission-claims p{font:.9rem/1.5 var(--sans);border-top:1px solid var(--rule);padding-top:12px;}.mission-claims+button:disabled{opacity:.45;}
.mission-portfolio{display:grid;gap:32px;}.mission-portfolio article{padding:28px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-surface);}.mission-portfolio h2{font:400 1.9rem/1.3 var(--serif);}.mission-portfolio blockquote{font:400 1.25rem/1.7 var(--serif);white-space:pre-wrap;margin:22px 0;border:0;padding:0;}.mission-portfolio details,.mission-previous{font:400 1rem/1.65 var(--serif);margin:20px 0;}.mission-portfolio summary,.mission-previous summary{min-height:44px;font:600 .85rem/1.6 var(--sans);cursor:pointer;}.mission-previous p{white-space:pre-wrap;padding:22px;background:var(--paper);border:1px solid var(--rule);}
@media(max-width:650px){.mission-card-evidence{display:grid;gap:10px;justify-items:center;}.mission-card-evidence b{font-size:var(--t-5);}.mission-card-evidence small{font-size:.75rem;}.mission-card-evidence i{width:28px;height:28px;font-size:var(--t-3);}.mission-claims fieldset{padding:18px;}.mission-claims legend{font-size:var(--t-3);}.mission-claims label{font-size:var(--t-0);}.mission-portfolio article{padding:20px;}}
.living-stage [hidden]{display:none!important;}
.mission-claims input[type="radio"],.mission-claims input[type="radio"]:checked{margin:0;appearance:auto;-webkit-appearance:radio;background:none;border-radius:50%;}
.mission-listening{display:flex;gap:24px;align-items:center;justify-content:space-between;margin:24px 0;padding:20px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-surface);}.mission-listening strong{font:600 .9rem/1.5 var(--sans);}.mission-listening p{font:.8rem/1.65 var(--sans);margin:8px 0 0;max-width:58ch;}.mission-listening .btn{flex-shrink:0;max-width:45%;}
@media(max-width:650px){.mission-listening{display:block;}.mission-listening .btn{max-width:100%;margin-top:16px;}}
.mission-old,.mission-now,.mission-message-stack>section:nth-child(2),
.mission-order li>div>button,
.mission-card-timeline i,.mission-card-letter,.mission-card-bridge i { color:#243047; }
.mission-reading-door:hover,.mission-desk-door:hover { border-color:var(--carbon); }
.mission-card-cast>i { color:var(--carbon); }
[data-theme="dark"] .mission-heading>.smallcaps,
[data-theme="dark"] .mission-document-number,
[data-theme="dark"] .mission-documents summary,
[data-theme="dark"] .mission-prompt-support summary,
[data-theme="dark"] .mission-order li>b,
[data-theme="dark"] .mission-card-evidence i { color:var(--lazur-ink); }
[data-theme="dark"] .mission-message-stack>section:nth-child(2) :is(.mission-document-number,summary) { color:#243047; }
.mission-skip-link{display:inline-block;margin:10px 0 0;padding:6px 0;border:0;background:none;font:500 var(--type-meta,.9rem)/1.4 var(--sans);color:var(--steel);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.mission-skip-link:hover,.mission-skip-link:focus-visible{color:var(--ink);}
.mission-self-review{padding:14px 18px;}
.mission-self-review summary{cursor:pointer;font:600 var(--type-meta,.85rem)/1.5 var(--sans);letter-spacing:.04em;color:var(--ink);min-height:36px;display:flex;align-items:center;}
.mission-self-review-note{margin:8px 0 10px;font:var(--type-meta,.85rem)/1.5 var(--sans);color:var(--steel);}
.mission-save-hint{font:var(--type-meta,.85rem)/1.5 var(--sans);color:var(--steel);margin:8px 0 0;}
.living-stage[data-docked] .living-content:has(.mission-writing),
.living-stage[data-docked]:has(.mission-writing) .living-footer{width:min(100%,700px);margin-inline:auto;}
.living-stage[data-docked] .mission-writing{grid-template-columns:minmax(0,1fr);}
:root {
--learning-surface: var(--galley);
--learning-radius: var(--r-surface);
--learning-control-radius: var(--r-control);
--learning-shadow: none;
}
.gx-stage:is(#gx-stage, #living-stage) {
background:var(--room)!important;
box-shadow:none!important;
}
.gx-stage:is(#gx-stage, #living-stage)::before,
.gx-stage:is(#gx-stage, #living-stage)::after {
content:none!important;display:none!important;animation:none!important;
}
.gx-stage:is(#gx-stage, #living-stage) :is(.pl,.atmos-stage,.gx-bloom) {
display:none!important;
}
#v-course .passport-strip{box-sizing:border-box;grid-column:1/-1;min-width:0;width:100%;max-width:1100px;grid-template-columns:54px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:6px 20px;padding:20px 24px;margin:24px auto;text-transform:none;letter-spacing:normal;}
#v-course .course-view-switch{display:flex;gap:6px;padding:5px;margin:0 0 24px;border:1px solid var(--rule);border-radius:var(--r-dialog);background:var(--paper);}
#v-course .course-view-switch button{flex:1;min-width:0;min-height:48px;padding:12px 18px;border:0;border-radius:var(--r-surface);box-shadow:none;background:transparent;color:var(--carbon);font:600 var(--type-control)/1.4 var(--sans);text-transform:none;letter-spacing:0;}
#v-course .course-view-switch [aria-pressed="true"]{background:var(--pine);color:var(--on-pine);}
#v-course .course-view-switch button:focus-visible{outline:3px solid var(--signal);outline-offset:2px;}
#v-course [data-course-view="path"]>.course-explorer,#v-course [data-course-view="explore"]>[data-guided-path]{display:none;}
#v-course .level-panel[hidden],#v-course .level-browse-all[hidden]{display:none!important;}
#v-course .chapter-heading{grid-template-columns:minmax(0,1fr) 100px;gap:18px;border-radius:var(--learning-radius);padding:24px;margin-bottom:24px;}
#v-course .chapter-heading h2{font:400 var(--type-heading)/1.25 var(--serif);}
#v-course .chapter-heading p{max-width:55ch;font:var(--type-body)/1.65 var(--sans);}
#v-course .chapter-stops{display:grid;margin:0;padding:0;border:0;list-style:none;}
#v-course .chapter-stop{height:auto;min-height:130px;padding:0 0 24px;position:relative;isolation:isolate;}
#v-course .chapter-stop::before{content:"";display:block;position:absolute;left:44px;top:60px;bottom:-10px;width:0;height:auto;border:0;border-left:2px solid var(--rule);border-radius:0;background:none;z-index:-1;}
#v-course .chapter-stop:last-child::before{display:none;}
#v-course .chapter-stop.is-done::before{border-left-style:solid;border-color:var(--pine);}
#v-course .chapter-ink-route{display:none;}
#v-course .chapter-journey .chapter-stop .chapter-go{box-sizing:border-box;display:grid;grid-template-columns:54px minmax(0,1fr);gap:20px;align-items:center;width:100%;min-height:110px;margin:0;padding:20px;border:1px solid var(--rule);border-radius:var(--learning-radius);background:var(--paper);box-shadow:var(--learning-shadow);text-align:left;}
#v-course .chapter-journey .chapter-stop.is-current .chapter-go{border:2px solid var(--signal-ink);background:color-mix(in srgb,var(--signal) 9%,var(--learning-surface));padding-right:84px;}
#v-course .chapter-stop .chapter-book{width:48px;height:60px;outline:none;border-width:1px 1px 1px 5px;border-radius:4px 10px 10px 4px;font:600 1.2rem/1 var(--serif);box-shadow:3px 3px 0 #a7967020;}
#v-course .chapter-stop .chapter-label{min-width:0;padding:0;background:none;border-radius:0;overflow-wrap:anywhere;}
#v-course .chapter-stop .chapter-label strong{display:block;font:600 1.15rem/1.5 var(--serif);}
#v-course .chapter-stop .chapter-label small{display:block;font:600 var(--type-meta)/1.5 var(--sans);margin:0 0 4px;}
#v-course .chapter-stop .chapter-label em{display:block;font:500 var(--type-meta)/1.5 var(--sans);color:var(--pencil);margin-top:4px;}
#v-course .chapter-stop .chapter-label>span{display:block;font:var(--type-body)/1.6 var(--sans);margin-top:8px;}
#v-course .chapter-trail-friend{left:auto;right:18px;top:24px;width:48px;height:60px;}
#v-course .chapter-ending{max-width:none;margin:10px 0 24px;padding:24px;border-radius:var(--learning-radius);}
#v-course .chapter-later{margin:4px 0 22px;border-block:1px solid var(--rule);}
#v-course .chapter-later>summary{min-height:48px;padding:14px 4px;color:var(--steel);font:500 var(--type-control)/1.5 var(--sans);cursor:pointer;}
#v-course .chapter-later[open]>summary{margin-bottom:16px;}
#v-course .level-browse-all{margin-top:24px;}
#v-course .level-tab{min-width:0;overflow-wrap:anywhere;}
#v-course .level-tab strong{font:600 var(--type-body)/1.5 var(--serif);}
#v-course .level-caption{font:var(--type-meta)/1.6 var(--sans);}
@media(min-width:950px){
#v-course .course-atlas{display:grid;grid-template-columns:230px minmax(0,1fr);gap:0 32px;}
#v-course .course-atlas>.atlas-heading{grid-column:1/-1;grid-row:1;}
#v-course .course-atlas>.passport-strip{grid-column:1/-1;grid-row:2;}
#v-course .course-atlas>.level-rail{grid-column:1;grid-row:3;align-self:stretch;}
#v-course .course-atlas>.level-panel{grid-column:2;grid-row:3;}
#v-course .course-atlas>.level-caption{grid-column:1/-1;grid-row:4;}
#v-course .course-atlas>.case-explorer{grid-column:1/-1;grid-row:5;}
#v-course .course-atlas>.level-rail>.level-tabs{top:100px;position:sticky;}
}
@media(max-width:949px){
#v-course .course-atlas{display:flex;flex-direction:column;}
#v-course .course-atlas>*{width:100%;min-width:0;box-sizing:border-box;}
#v-course .atlas-heading{order:0;}#v-course .passport-strip{order:1;}#v-course .level-rail{order:2;margin-bottom:20px;}#v-course .level-panel{order:3;}#v-course .level-caption{order:4;}#v-course .case-explorer{order:5;}
#v-course .level-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));position:static;gap:8px;}
}
@media(max-width:560px){
#v-course .passport-strip{padding:18px;gap:14px 16px;grid-template-columns:48px minmax(0,1fr);}
#v-course .course-view-switch button{padding:12px 8px;font-size:var(--type-control);}
#v-course .chapter-heading{grid-template-columns:minmax(0,1fr) 64px;padding:18px;gap:12px;}
#v-course .chapter-heading h2{font-size:1.65rem;}#v-course .chapter-heading p{font-size:var(--type-body);}
#v-course .chapter-journey .chapter-stop .chapter-go{grid-template-columns:38px minmax(0,1fr);padding:16px;gap:14px;}
#v-course .chapter-journey .chapter-stop.is-current .chapter-go{padding-right:52px;}
#v-course .chapter-stop .chapter-book{width:34px;height:46px;font-size:var(--type-body);}
#v-course .chapter-stop::before{left:34px;}
#v-course .chapter-stop .chapter-label strong{font-size:var(--t-1);}
#v-course .chapter-trail-friend{right:8px;top:20px;width:34px;height:44px;}
}
html[data-motion="low"] #v-course .chapter-trail-friend{animation:none;}
html[data-motion="low"] #v-course .chapter-go{transition:none!important;transform:none!important;}
.study-rhythm{margin:0;padding:0;border:0;border-top:1px solid var(--rule);border-radius:0;background:none;color:var(--carbon);text-align:left;}.study-rhythm>summary{min-height:48px;padding:12px 0;font:var(--fw-strong) var(--type-body)/1.5 var(--sans);cursor:pointer;overflow-wrap:anywhere;}.study-rhythm>summary>span{font-weight:400;color:var(--pencil);margin-left:14px;}.study-rhythm form{padding:4px 0 20px;max-width:720px;}.study-rhythm form>p{font:var(--type-body)/1.6 var(--sans);}.study-rhythm form>label{display:block;margin-bottom:8px;font:600 var(--type-meta)/1.5 var(--sans);}.study-rhythm input[type="text"]{box-sizing:border-box;width:100%;min-height:46px;max-width:100%;padding:10px 12px;font:400 var(--type-control)/1.5 var(--sans);border:1px solid var(--rule);border-radius:var(--r-surface);background:var(--paper);color:var(--carbon);}.study-rhythm fieldset{margin:20px 0;border:1px solid var(--rule);border-radius:var(--r-surface);padding:12px 16px;display:flex;flex-wrap:wrap;gap:12px 24px;min-width:0;}.study-rhythm legend{font:600 var(--type-meta)/1.6 var(--sans);padding:0 6px;}.study-rhythm fieldset label{display:flex;align-items:center;gap:12px;min-height:44px;font:var(--type-body)/1.5 var(--sans);cursor:pointer;}.study-rhythm input[type="radio"],.study-rhythm input[type="radio"]:checked{width:22px;height:22px;margin:0;appearance:auto;-webkit-appearance:radio;background:none;accent-color:var(--pine);}.study-rhythm .rhythm-note,.study-rhythm .rhythm-status{font:var(--type-meta)/1.6 var(--sans);}.study-rhythm input:focus-visible,.study-rhythm summary:focus-visible{outline:3px solid var(--signal);outline-offset:3px;}.rhythm-finish{max-width:60ch;margin:22px auto;font:var(--type-body)/1.65 var(--sans);}.study-rhythm .rhythm-status:empty{display:none;}
@media(max-width:560px){.study-rhythm>summary>span{display:block;margin:4px 0 0;}.study-rhythm fieldset{display:block;}}
#v-course .course-progress{box-sizing:border-box;max-width:1100px;margin:24px auto;}
#v-course .course-progress>summary{overflow-wrap:anywhere;}
#v-course .passport-copy{min-width:0;overflow-wrap:anywhere;}
@media(max-width:560px){#v-course .course-progress>summary>span{display:block;margin:6px 0 0;}}
#v-course .chapter-stop.is-current{scroll-margin-top:100px;}
#v-course .chapter-stop .chapter-go{transition:transform .16s ease,box-shadow .16s ease;}
#v-course .chapter-stop .chapter-go:hover{transform:translateY(-2px);box-shadow:0 5px 12px #25352e14;}
#v-course .chapter-stop .chapter-go:active{transform:translateY(1px);}
html:not([data-motion="full"]) #v-course .chapter-stop .chapter-go{transition:none;transform:none;}
#v-course .course-continuation {
display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;
max-width:1100px;margin:12px auto 24px;padding:0;
border:1px solid var(--rule);border-radius:var(--learning-radius);
background:var(--learning-surface);box-shadow:var(--learning-shadow);color:var(--carbon);
overflow:hidden;isolation:isolate;
}
#v-course .course-volume-heading { grid-column:1/-1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;padding:15px clamp(22px,3vw,36px);border-bottom:1px solid var(--rule);font:600 var(--type-meta)/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--steel); }
#v-course .course-volume-heading>span:last-child { color:var(--steel);font-weight:400;letter-spacing:.035em; }
#v-course .course-continuation-copy { min-width:0;padding:clamp(26px,4vw,44px) clamp(22px,3vw,36px) 30px; }
#v-course .course-continuation-copy>.smallcaps { color:var(--steel);font:600 var(--type-meta)/1.5 var(--sans);letter-spacing:.1em; }
#v-course .course-continuation h2 { margin:12px 0 16px;font:400 clamp(2rem,3.5vw,3rem)/1.1 var(--serif);text-transform:none;letter-spacing:-.025em;overflow-wrap:anywhere; }
#v-course .course-continuation-copy>p { max-width:42ch;margin:0 0 24px;font:var(--type-body)/1.65 var(--sans);color:var(--steel); }
#v-course .course-volume-progress { max-width:360px;margin:22px 0 24px; }
#v-course .course-volume-progress>div { display:flex;justify-content:space-between;gap:12px;margin-bottom:10px;font:var(--type-meta)/1.5 var(--sans);color:var(--steel); }
#v-course .course-volume-progress progress { appearance:none;display:block;width:100%;height:5px;border:0;border-radius:0;background:var(--rule);color:var(--pine); }
#v-course .course-volume-progress progress::-webkit-progress-bar { background:var(--rule); }
#v-course .course-volume-progress progress::-webkit-progress-value { background:var(--pine); }
#v-course .course-volume-progress progress::-moz-progress-bar { background:var(--pine); }
#v-course .course-continuation-copy>.course-action-note { margin:14px 0 0;font:var(--type-meta)/1.55 var(--sans);color:var(--steel); }
#v-course .course-facing-page { position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;margin:0;padding:clamp(26px,4vw,44px) clamp(22px,3vw,36px) 20px;border-left:1px solid var(--rule);background:linear-gradient(90deg,color-mix(in srgb,var(--rule) 28%,transparent),transparent 16px),var(--sheet); }
#v-course .course-facing-page figcaption { max-width:100%;color:var(--steel);font:500 var(--type-meta)/1.6 var(--sans);overflow-wrap:anywhere; }
#v-course .course-facing-page blockquote { position:relative;z-index:1;width:100%;box-sizing:border-box;margin:22px 0 16px;padding:0;border:0;background:none;color:var(--pine);font:500 var(--type-prompt)/1.5 var(--serif);letter-spacing:-.015em;overflow-wrap:anywhere; }
[data-theme="dark"] #v-course .course-facing-page blockquote { color:var(--lazur-ink); }
#v-course .course-facing-page .course-preview-letters { letter-spacing:.08em; }
#v-course .course-preview-meaning { position:relative;z-index:1;width:100%;font:var(--type-body)/1.65 var(--sans); }
#v-course .course-preview-meaning>summary { display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--steel);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:5px; }
#v-course .course-preview-meaning>summary::before { content:"+";margin-right:8px;font-size:var(--t-2); }
#v-course .course-preview-meaning[open]>summary::before { content:"−"; }
#v-course .course-preview-meaning>p { max-width:42ch;margin:2px 0 14px;color:var(--carbon); }
#v-course .course-resident-print { display:block;align-self:flex-end;width:clamp(100px,13vw,150px);height:100px;flex-shrink:0;margin:12px 0 0;opacity:.9; }
#v-course .course-resident-print>svg { width:100%;height:100%;display:block; }
#v-course .course-facing-page.is-quiet { justify-content:center;align-items:center;gap:16px; }
#v-course .course-facing-page.is-quiet .course-resident-print { align-self:center;width:190px;height:170px; }
#v-course .course-preview-source { align-self:flex-start;margin:auto 0 0;font:var(--type-meta)/1.5 var(--sans);color:var(--steel); }
#v-course .course-context-actions { grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;min-width:0;padding:16px clamp(22px,3vw,36px);border-top:1px solid var(--rule); }
#v-course .course-context-actions>div { flex:1 1 220px;min-width:0; }
#v-course .course-context-actions .smallcaps { display:block;margin-bottom:4px;color:var(--steel);font:500 var(--type-meta)/1.5 var(--sans);letter-spacing:.08em; }
#v-course .course-context-actions strong { display:block;font:500 1.15rem/1.4 var(--serif);overflow-wrap:anywhere; }
#v-course .course-context-actions .linklike { min-height:44px;padding:8px 0;border:0;background:transparent;color:var(--carbon);box-shadow:none;font:500 var(--type-control)/1.5 var(--sans);text-transform:none;letter-spacing:0;text-decoration:underline;text-underline-offset:4px; }
#v-course .course-catalog { max-width:1100px;margin:0 auto 28px;border-block:1px solid var(--rule); }
#v-course .course-catalog>summary { min-height:52px;padding:18px 4px;cursor:pointer;font:600 var(--type-control)/1.5 var(--sans);color:var(--carbon); }
#v-course .course-catalog>summary>span { display:block;margin:5px 0 0 18px;font:400 var(--type-control)/1.6 var(--sans);color:var(--steel); }
#v-course .course-catalog[open]>summary { margin-bottom:20px;border-bottom:1px solid var(--rule); }
#v-course .atlas-heading p { display:block;max-width:65ch;margin:10px 0 0;font:var(--type-body)/1.65 var(--sans);color:var(--steel); }
#v-course .level-intro { display:block;margin-bottom:16px;padding:16px 20px;border-radius:var(--learning-radius);background:var(--learning-surface); }
#v-course .level-intro>div { display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-width:0; }
#v-course .level-intro .smallcaps,#v-course .level-intro .level-outline { flex-basis:100%; }
#v-course .level-intro h2 { flex:1 1 180px;margin:0;font:400 1.25rem/1.4 var(--serif);overflow-wrap:anywhere; }
#v-course .level-intro [data-study-band] { flex:0 1 auto;margin:0; }
#v-course .level-intro-art { display:none; }
#v-course [data-study-band] { margin:10px 0; }
#v-course [data-study-band][aria-pressed="true"] { background:color-mix(in srgb,var(--signal) 15%,var(--learning-surface));border-color:var(--signal-ink);color:var(--carbon); }
#v-course .course-access-boundary { margin:0 0 22px;padding:14px 18px;border-left:3px solid var(--signal);background:var(--learning-surface);font:var(--type-body)/1.65 var(--sans);color:var(--carbon); }
.learning-source { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 20px;max-width:1100px;margin:16px auto;padding:12px 0;border-block:1px solid var(--rule);color:var(--steel);font:var(--type-meta)/1.6 var(--sans); }
.learning-source>span { flex:1 1 240px;min-width:0;overflow-wrap:anywhere; }
.learning-source button { min-height:44px;max-width:100%;padding:8px 0;border:0;border-radius:var(--r-control);background:transparent;color:var(--carbon);box-shadow:none;font:600 var(--type-control)/1.5 var(--sans);text-transform:none;letter-spacing:0;white-space:normal;text-align:left;cursor:pointer; }
.learning-source button:hover { text-decoration:underline;text-underline-offset:4px; }
:is(#v-library,#v-words)>.study-orientation { display:block;box-sizing:border-box;max-width:1100px;margin:16px auto 28px;padding:20px 24px;border:1px solid var(--rule);border-left:3px solid var(--signal);border-radius:var(--learning-radius);background:var(--learning-surface);box-shadow:var(--learning-shadow); }
:is(#v-library,#v-words)>.study-orientation[hidden] { display:none!important; }
.study-orientation .study-suggestion { display:flex;align-items:center;justify-content:space-between;gap:20px 32px;padding:0; }
.study-orientation .study-suggestion>div,.study-suggestion-copy { min-width:0; }
.study-orientation .study-suggestion strong { margin:6px 0;font:500 var(--type-heading)/1.35 var(--serif);overflow-wrap:anywhere; }
.study-orientation .study-suggestion div>span:not(.smallcaps) { font:var(--type-meta)/1.5 var(--sans);color:var(--steel);overflow-wrap:anywhere; }
.study-orientation .study-suggestion p { max-width:65ch;margin:8px 0 0;font:var(--type-body)/1.6 var(--sans);color:var(--steel); }
.study-orientation .study-suggestion>.btn { flex-shrink:0;max-width:100%; }
#v-words .study-orientation .study-suggestion { flex-wrap:wrap; }
#v-words .study-orientation .study-suggestion>div { flex:1 1 12rem; }
.study-orientation .learning-source { margin:18px 0 0;padding:10px 0 0;border-bottom:0; }
.desk-paths { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 24px; }
.desk-paths>button { display:flex;flex-direction:column;gap:6px;min-width:0;min-height:88px;padding:16px 18px;border:1px solid var(--rule);border-radius:var(--learning-control-radius);background:var(--learning-surface);color:var(--carbon);box-shadow:none;text-align:left;font:inherit;text-transform:none;letter-spacing:0;cursor:pointer; }
.desk-paths>button:hover { border-color:var(--pine);background:color-mix(in srgb,var(--pine) 4%,var(--learning-surface)); }
.desk-paths strong { font:600 var(--type-body)/1.5 var(--sans); }
.desk-paths span { font:var(--type-meta)/1.5 var(--sans);color:var(--steel);overflow-wrap:anywhere; }
#v-review .practice-modes, .shelf-filters, #word-filters, .k-tabs {
display:flex;flex-wrap:wrap;gap:0 4px;padding:0;
border:0;border-bottom:1px solid var(--rule);border-radius:0;background:transparent;
}
#v-review .practice-modes { max-width:980px;margin:8px auto 18px; }
#v-review .practice-modes button, .shelf-filters button, #word-filters button, .k-tabs button {
flex:0 1 auto;min-width:0;min-height:var(--control-h-tool);margin:0 0 -1px;padding:.5rem .75rem;
border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;box-shadow:none;
color:var(--steel);font:500 var(--type-control)/1.3 var(--sans);letter-spacing:0;text-transform:none;
white-space:normal;overflow-wrap:anywhere;cursor:pointer;
}
#v-review .practice-modes button:hover, .shelf-filters button:hover, #word-filters button:hover, .k-tabs button:hover {
color:var(--carbon);background:transparent;
}
#v-review .practice-modes button[aria-pressed="true"], .shelf-filters button[aria-pressed="true"], #word-filters button.active, .k-tabs button.on {
color:var(--carbon);background:transparent;border-bottom-color:var(--signal);box-shadow:none;font-weight:var(--fw-strong);
}
#v-review .daily-invitation,#v-review .daily-task { border-radius:var(--learning-radius);background:var(--learning-surface);box-shadow:var(--learning-shadow); }
#v-review .daily-invitation { padding:28px;gap:24px; }
#v-review .daily-copy { min-width:0; }
#v-review .daily-copy>p { display:block;color:var(--steel); }
#v-review .daily-personal { display:block;padding:0;text-align:left;color:var(--steel); }
#v-review .daily-sound { border-radius:var(--learning-control-radius); }
#v-review .daily-landscape { max-width:280px;justify-self:center; }
#v-review .daily-completion-summary { grid-template-columns:minmax(0,1fr) 160px;gap:20px 28px;padding:28px;border:1px solid var(--rule);border-radius:var(--learning-radius);background:var(--learning-surface);box-shadow:var(--learning-shadow); }
#v-review .daily-completion-summary>.daily-flow-copy { grid-column:1;grid-row:1; }
#v-review .daily-completion-summary .daily-flow-copy h2 { margin:12px 0 16px; }
#v-review .daily-completion-summary>.daily-finish-actions { grid-column:1/-1;justify-content:flex-start;align-items:center;gap:12px;padding:0; }
#v-review .daily-completion-summary>.daily-source { grid-column:1/-1;margin:0;font-style:normal; }
#v-review .daily-completion-summary>.daily-more,#v-review .daily-completion-summary>.daily-album { grid-column:1/-1;margin:0;padding-top:12px;border-top:1px solid var(--rule);font:var(--type-control)/1.6 var(--sans); }
#v-review .daily-more>summary,#v-review .daily-round-notes>summary { min-height:44px;padding:10px 0;font:600 var(--type-control)/1.6 var(--sans);cursor:pointer; }
#v-review .daily-more>small { display:block;margin:8px 0;color:var(--steel); }
:is(.course-continuation,.study-suggestion) .btn,#v-course [data-study-band],#v-review .daily-adventure .btn { box-sizing:border-box;max-width:100%;white-space:normal;overflow-wrap:anywhere; }
#v-review .daily-self-check .btn { overflow-wrap:break-word; }
:is(.course-continuation,.course-catalog,.study-orientation,.learning-source,.practice-modes,.desk-paths) :focus-visible,#v-review .daily-adventure :focus-visible { outline:3px solid var(--signal-ink);outline-offset:4px; }
:is(.course-catalog,.study-orientation,.practice-modes,.desk-paths) button { scroll-margin-top:110px; }
@media(max-width:700px) {
#v-course .course-continuation { grid-template-columns:minmax(0,1fr);gap:0; }
#v-course .course-facing-page { border-left:0;border-top:1px solid var(--rule);padding:22px;background:var(--sheet); }
#v-course .course-facing-page blockquote { max-width:26ch;margin:12px 0 6px;font-size:var(--type-prompt); }
#v-course .course-resident-print { width:90px;height:68px;margin:-8px 0 0; }
#v-course .course-facing-page.is-quiet { display:none; }
#v-course .course-context-actions { padding:16px 22px;gap:4px 20px; }
.study-orientation .study-suggestion { align-items:flex-start;flex-direction:column;gap:18px; }
#v-review .daily-invitation { grid-template-columns:minmax(0,1fr);gap:12px; }
#v-review .daily-invitation>.daily-copy { grid-row:1; }
#v-review .daily-invitation>.daily-landscape { grid-row:2;width:130px;max-height:100px;margin:0;overflow:hidden; }
#v-review .daily-completion-summary { grid-template-columns:minmax(0,1fr);padding:22px; }
}
@media(max-width:560px) {
#v-course .course-continuation { padding:0;margin-top:8px; }
#v-course .course-volume-heading { padding:12px 20px;font-size:var(--type-meta);gap:5px 12px; }
#v-course .course-continuation-copy { padding:24px 20px; }
#v-course .course-continuation h2 { margin:9px 0 12px;font-size:2rem; }
#v-course .course-continuation-copy>p { margin-bottom:18px;font-size:var(--type-body); }
#v-course .course-volume-progress { margin:18px 0; }
#v-course .course-continuation .btn { width:100%; }
#v-course .course-catalog>summary>span { margin-left:0; }
:is(#v-library,#v-words)>.study-orientation { padding:18px;margin:12px auto 20px; }
.study-orientation .study-suggestion>.btn { width:100%;margin:0; }
#v-words .study-orientation .study-suggestion>.btn { flex-grow:1; }
.learning-source { align-items:flex-start;gap:0; }
.learning-source>span { flex-basis:100%; }
.desk-paths { gap:8px; }
.desk-paths>button { padding:12px 10px;min-height:82px; }
.desk-paths strong { font-size:var(--type-body); }
.desk-paths span { font-size:var(--type-meta); }
#v-review .practice-modes button { padding:10px 8px;}
#v-review .daily-invitation,#v-review .daily-task { padding:20px; }
#v-review .daily-completion-summary>.daily-finish-actions { align-items:stretch;flex-direction:column; }
#v-review .daily-completion-summary>.daily-finish-actions>.btn { width:100%; }
}
html[data-motion="low"] :is(.course-continuation,.study-orientation,.practice-modes,.desk-paths) *,html[data-motion="low"] #v-review .daily-adventure * { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
html[data-motion="low"] :is(.course-continuation,.study-orientation,.practice-modes,.desk-paths) button,html[data-motion="low"] #v-review .daily-adventure .btn { transform:none!important; }
.word-source{display:block;border:0;background:none;padding:5px 0 0;color:var(--steel);font:inherit;font-size:var(--type-meta);text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.word-source:focus-visible{outline:2px solid var(--carbon);outline-offset:3px}
[data-theme="dark"] .word-source{color:var(--steel)}
#v-review .practice-invitation,#v-review #rev-card { border:1px solid var(--rule);border-radius:var(--learning-radius);background:var(--learning-surface);box-shadow:var(--learning-shadow); }
#v-review.practice-finished #rev-card { padding:24px; }
#v-review.practice-finished #rev-card>.cloze { border:0;border-radius:0;background:none;padding:0;margin:16px 0;font:500 1.7rem/1.3 var(--serif);box-shadow:none; }
#v-review.practice-finished #rev-card>p.daily-completion-summary { display:block;border:0;border-radius:0;background:none;padding:0;margin:12px auto 24px;box-shadow:none;font:var(--type-body)/1.6 var(--sans);color:var(--steel); }
#v-review.practice-finished #rev-btns { display:flex;flex-wrap:wrap;gap:12px;background:var(--learning-surface);border:0;padding:18px;border-radius:var(--learning-radius);box-shadow:var(--learning-shadow); }
#v-review .practice-round-details { padding:0 20px;border-bottom:1px solid var(--rule); }
#v-review .practice-round-details>summary { min-height:44px;padding:12px 0;font:var(--type-control)/1.5 var(--sans);cursor:pointer; }
@media(max-width:560px) { #v-review.practice-finished #rev-btns>.primary { flex:1 1 100%; } #v-review.practice-finished #rev-btns>.btn:not(.primary) { flex:1 1 auto; } }
#practice-rewards { position:static;max-width:780px;margin:12px auto 20px;scroll-margin-top:90px; }
#practice-rewards[hidden] { display:none!important; }
.practice-progress { padding:14px 20px 10px;border:1px solid var(--rule);border-radius:var(--r-dialog);background:var(--paper);color:var(--carbon);box-shadow:0 3px 12px #1427470a;font:400 var(--type-meta)/1.45 var(--sans); }
.pp-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px; }
.pp-level { min-height:44px;display:inline-flex;align-items:center;gap:10px;padding:0;border:0;background:none;color:var(--carbon);font:600 var(--type-control)/1.35 var(--sans);text-align:left;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:0; }
.pp-level small { display:block;font-size:var(--type-meta);font-weight:400;color:var(--steel);margin-top:2px; }
.pp-level-mark { display:grid;place-items:center;min-width:36px;height:36px;border:1px solid var(--signal-ink);border-radius:var(--r-surface);background:var(--signal);color:var(--carbon);font:600 var(--type-body) var(--sans); }
.pp-streak { font-size:var(--type-meta);text-align:right;color:var(--steel); }
.pp-streak>span { color:var(--signal-ink); }
.pp-meter { height:7px;overflow:hidden;border-radius:20px;background:color-mix(in srgb,var(--pine) 10%,var(--paper)); }
.pp-meter>span { display:block;height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,var(--pine),var(--signal-ink));border-radius:inherit; }
.pp-pace { display:block;margin-top:2px;font-size:var(--type-meta);font-weight:400;color:var(--steel); }
.pp-numbers,.pp-session { display:flex;justify-content:space-between;gap:12px;margin-top:5px;font-size:var(--type-meta);color:var(--steel); }
.pp-session strong { color:var(--pine); }
:is(#practice-rewards,.course-rank-progress) .practice-progress { display:grid;grid-template-columns:auto minmax(100px,1fr) auto;column-gap:24px;padding:12px 0;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:transparent;box-shadow:none; }
:is(#practice-rewards,.course-rank-progress) .pp-heading { display:contents; }
:is(#practice-rewards,.course-rank-progress) .pp-level { grid-column:1;grid-row:1/3; }
:is(#practice-rewards,.course-rank-progress) .pp-streak { grid-column:3;grid-row:1/3;align-self:center; }
:is(#practice-rewards,.course-rank-progress) .pp-meter { grid-column:2;grid-row:1;align-self:end;height:5px; }
:is(#practice-rewards,.course-rank-progress) .pp-numbers { grid-column:2;grid-row:2;align-self:start; }
:is(#practice-rewards,.course-rank-progress) .pp-session { grid-column:1/-1;margin-top:10px; }
.pp-receipt { display:grid;grid-template-columns:32px minmax(0,1fr) 108px;align-items:center;gap:12px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--pine) 16%,var(--rule));border-radius:var(--r-surface);background:color-mix(in srgb,var(--pine) 5%,var(--paper));color:var(--carbon);font:var(--type-meta)/1.45 var(--sans); }
.pp-receipt.is-milestone { background:color-mix(in srgb,var(--signal) 12%,var(--paper));border-color:color-mix(in srgb,var(--signal-ink) 40%,var(--rule)); }
.pp-receipt-mark { display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--paper);color:var(--pine);font:600 1.1rem var(--sans); }
.is-milestone .pp-receipt-mark { background:var(--signal);color:var(--on-signal); }
.pp-receipt-copy { min-width:0;overflow-wrap:anywhere; }
.pp-receipt-copy>strong,.pp-receipt-copy>span { display:block; }
.pp-receipt-copy>span { font-size:var(--type-meta);color:var(--steel);margin-top:3px; }
.pp-receipt-progress { font-size:var(--type-meta);color:var(--steel); }
.pp-receipt-progress .pp-meter { height:4px;margin:5px 0; }
.pp-receipt-progress small { font:inherit; }
.pp-receipt.is-live { animation:practice-reward-arrive 240ms ease-out both; }
.pp-receipt.is-live .pp-meter>span { animation:practice-reward-fill 420ms ease-out both; }
.pp-receipt.is-live.is-milestone .pp-receipt-mark { animation:practice-reward-mark 480ms ease-out both; }
#practice-answer-reward { margin-top:12px; }
#practice-answer-reward[hidden] { display:none!important; }
.daily-feedback>.pp-receipt { margin:0 0 18px;padding:0 0 14px;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:transparent; }
#v-review .daily-task-head { min-height:40px; }
.practice-answer-glow { animation:practice-answer-glow 550ms ease-out; }
.pp-level:focus-visible,.pp-rules>summary:focus-visible { outline:3px solid var(--signal-ink);outline-offset:4px; }
.practice-progress.is-profile { padding:24px;margin-bottom:24px; }
.is-profile .pp-level { cursor:default;font-size:var(--t-2); }
.is-profile .pp-level-mark { width:46px;height:46px;font-size:var(--t-3); }
.is-profile .pp-meter { margin-top:18px;height:10px; }
.pp-explainer { margin:16px 0;color:var(--steel);font-size:var(--type-meta); }
.pp-milestones { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
.pp-badge { display:flex;flex-direction:column;gap:7px;padding:16px 12px;border:1px solid var(--rule);border-radius:var(--r-surface);background:var(--paper);min-width:0; }
.pp-badge>span:first-child { font:1.5rem var(--serif);color:var(--steel); }
.pp-badge strong { font-size:var(--type-meta); }
.pp-badge small { color:var(--steel);font-size:var(--type-meta);flex:1; }
.pp-badge>span:last-child { font-size:var(--type-meta);color:var(--steel); }
.pp-badge.is-earned { border-color:color-mix(in srgb,var(--signal-ink) 50%,var(--rule));background:color-mix(in srgb,var(--signal) 8%,var(--paper)); }
.pp-badge.is-earned>span:first-child { color:var(--signal-ink); }
.pp-rules { margin-top:18px;color:var(--steel);font-size:var(--type-meta); }
.pp-rules>summary { cursor:pointer;min-height:36px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:3px; }
.pp-rules p { max-width:70ch;line-height:1.7; }
@keyframes practice-reward-arrive { from { opacity:0;transform:translateY(4px); } to { opacity:1;transform:translateY(0); } }
@keyframes practice-reward-fill { from { transform:scaleX(var(--pp-from,0)); } to { transform:scaleX(var(--pp-to,0)); } }
@keyframes practice-reward-mark { 40% { transform:scale(1.12) rotate(-8deg); } }
@keyframes practice-answer-glow { 35% { box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 45%,transparent); } }
@media(max-width:600px) {
#practice-rewards { margin:8px auto 12px;scroll-margin-top:118px; }
:is(#practice-rewards,.course-rank-progress) .practice-progress { grid-template-columns:minmax(0,1fr) auto;column-gap:12px; }
:is(#practice-rewards,.course-rank-progress) .pp-level { grid-column:1;grid-row:1; }
:is(#practice-rewards,.course-rank-progress) .pp-streak { grid-column:2;grid-row:1; }
:is(#practice-rewards,.course-rank-progress) .pp-meter { grid-column:1/-1;grid-row:2;margin-top:10px; }
:is(#practice-rewards,.course-rank-progress) .pp-numbers { grid-column:1/-1;grid-row:3; }
.practice-progress { padding:10px 12px 9px;border-radius:var(--r-surface); }
.pp-heading { gap:8px;margin-bottom:7px; }
.pp-level { font-size:var(--type-control);gap:7px; }
.pp-level-mark { min-width:30px;height:30px;border-radius:var(--r-surface); }
.pp-streak { max-width:115px;font-size:var(--type-meta); }
.pp-receipt { grid-template-columns:28px minmax(0,1fr);gap:9px;padding:12px; }
.pp-receipt-mark { width:28px;height:28px; }
.pp-receipt-progress { grid-column:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;width:100%; }
.pp-receipt-progress .pp-meter { grid-column:1/-1;grid-row:2;margin:0; }
.practice-progress.is-profile { padding:18px; }
.pp-milestones { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
html[data-motion="low"] .practice-answer-glow { animation:none!important; }
.rank-identity { display:block;width:100%;height:100%;overflow:visible; }
.pp-level-mark,.is-profile .pp-level-mark { flex:none;width:48px;min-width:48px;height:53px;background:none;border:0;border-radius:0; }
.pp-level>span:last-child { min-width:0;max-width:26ch;overflow-wrap:anywhere; }
.pp-level { font-family:var(--serif);font-size:var(--type-control); }
.pp-level small { font-family:var(--sans); }
.is-profile .pp-level-mark { width:76px;height:84px; }
.is-profile .pp-level { font-size:1.35rem; }
.pp-receipt-mark,.is-milestone .pp-receipt-mark { width:32px;height:36px;border-radius:0;background:none; }
.pp-rank-ladder { margin:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule); }
.pp-rank-ladder>summary { cursor:pointer;padding:14px 0;font:600 var(--type-control)/1.5 var(--sans); }
.pp-rank-ladder ol { list-style:none;padding:0;margin:0 0 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.pp-rank-ladder li { display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--rule);border-radius:var(--r-surface);min-width:0; }
.pp-rank-ladder li>span:first-child { width:36px;height:40px;flex:none; }
.pp-rank-ladder li>span:nth-child(2) { flex:1;min-width:0; }
.pp-rank-ladder strong,.pp-rank-ladder small { display:block;overflow-wrap:anywhere; }
.pp-rank-ladder strong { font:var(--type-meta)/1.4 var(--serif); }
.pp-rank-ladder small { color:var(--steel);font:var(--type-meta)/1.4 var(--sans); }
.pp-rank-ladder .is-current { border-color:var(--signal-ink);background:color-mix(in srgb,var(--signal) 10%,var(--paper)); }
.passport-emblem .rank-identity { width:70px;height:77px; }
@media(max-width:600px) {
.pp-level-mark { width:40px;min-width:40px;height:44px; }
:is(#practice-rewards,.course-rank-progress) .pp-level { font-size:var(--type-control); }
.pp-rank-ladder ol { grid-template-columns:minmax(0,1fr); }
}
.course-rank-progress { max-width:1100px;margin:8px auto 28px; }
.scene-word-stage{position:fixed;inset:0;z-index:2200;overflow-y:auto;background:var(--room);color:var(--carbon);padding:24px;box-sizing:border-box;font-family:var(--sans);overscroll-behavior:contain;}
.object-sheet{max-width:1320px;margin:0 auto;}
.object-top{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--rule);padding-bottom:18px;}
.object-top>span{display:block;font:600 .85rem/1.5 var(--sans);}
.object-top .ic{width:24px;height:24px;vertical-align:-6px;margin-right:8px;}
.object-top .btn{min-height:44px;flex-shrink:0;}
.object-heading{margin:28px 0;max-width:850px;}
.object-heading .smallcaps{font:600 .7rem/1.5 var(--sans);letter-spacing:.12em;}
.object-heading h1{font:400 clamp(1.9rem,3.7vw,3.1rem)/1.12 var(--serif);margin:10px 0 14px;text-wrap:balance;}
.object-heading p{font:.8rem/1.7 var(--sans);color:var(--steel);}
.object-heading cite{font-style:normal;}
.object-game-grid{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(310px,1fr);align-items:start;gap:28px;}
.object-world{min-width:0;}
.object-diorama{box-sizing:border-box;width:100%;min-width:0;position:relative;isolation:isolate;aspect-ratio:9/5.6;min-height:310px;border:8px solid #faf5e8;border-radius:48% 48% 12px 12px/8% 8% 12px 12px;box-shadow:0 2px 0 #a38d69,0 12px 0 -5px #dcd1bb,0 28px 42px -20px #59482a55;overflow:hidden;background:#e7dec9;}
.object-room-architecture{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.object-room-architecture path:not([fill]){fill:none;}
.object-room-caption{position:absolute;top:4%;left:10%;right:10%;text-align:center;font:500 clamp(.7rem,1vw,.75rem)/1.4 var(--serif);color:#5d5d55;}
.object-props{position:absolute;inset:13% 3% 7%;}
.object-prop{position:absolute;left:calc(3% + var(--object-column)*33%);top:calc(var(--object-row)*51%);width:27%;height:48%;min-width:44px;min-height:44px;background:transparent!important;box-shadow:none!important;border:1px solid transparent!important;padding:7px 8px!important;border-radius:22px;display:flex;align-items:center;justify-content:center;transition:transform .18s ease-out,background-color .18s ease-out;overflow:visible;}
.object-prop .object-illustration{height:100%;width:100%;filter:drop-shadow(2px 5px 1px #5a47371c);}
.object-prop:hover:not(:disabled),.object-prop:focus-visible{background:#fffdf52e!important;transform:translateY(-3px);}
.object-prop:focus-visible{outline:3px solid #35568c;outline-offset:0;}
.object-prop.is-selected{background:#fffdf54d!important;border:1px dashed #8c713a!important;}
.object-prop:disabled{opacity:1;cursor:default;color:inherit;}
.object-prop:disabled:not(.is-selected){opacity:.68;}
.object-number{position:absolute;left:5%;bottom:3%;display:grid;place-items:center;min-width:25px;height:25px;border:1px solid #cfbd97;border-radius:50%;background:#fffdf5;color:#35568c;font:600 .8rem/1 var(--sans);box-shadow:0 2px 0 #ae9b7233;}
.object-number .ic{width:17px;height:17px;}
.object-world-note{margin:26px 0 12px;text-align:center;font:.8rem/1.6 var(--sans);color:var(--steel);}
.object-round-track{display:flex;justify-content:center;gap:10px;min-height:30px;}
.object-round-track>span{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--rule-room);border-radius:50%;font:.75rem/1 var(--sans);}
.object-round-track .ic{width:17px;height:17px;}.object-round-track .is-met{background:color-mix(in srgb,#4b8b78 22%,var(--paper));border-color:#719880;}
.object-workbench{box-sizing:border-box;position:relative;min-width:0;background:var(--paper);border:1px solid var(--rule);border-radius:24px 24px 8px 8px;box-shadow:0 2px 0 var(--case);padding:26px;}
.object-resident{width:64px;height:68px;margin-bottom:14px;}.object-resident svg{width:100%;height:100%;}
.object-workbench h2{font:400 1.6rem/1.25 var(--serif);margin:10px 0 16px;overflow-wrap:anywhere;}
.object-workbench p{font:.9rem/1.7 var(--sans);margin:12px 0;}
.object-workbench .smallcaps{font:600 .7rem/1.5 var(--sans);letter-spacing:.09em;}
.object-workbench .btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;white-space:normal;margin-top:14px;box-sizing:border-box;}
.object-workbench .btn .ic{width:20px;height:20px;flex-shrink:0;}
.object-fact{display:flex;align-items:center;gap:14px;}.object-detail-art{flex:0 0 72px;}.object-detail-art svg{width:72px;height:78px;}.object-fact h2{font-size:1.6rem;margin-bottom:6px;}.object-fact p{font-size:var(--t-0);margin:0;color:var(--steel);}
.object-workbench .object-sentence{padding:15px 0;border-top:1px solid var(--rule);font:500 1.2rem/1.6 var(--serif);}
.object-explored{display:flex;gap:12px;align-items:center;margin:25px 0;font:.75rem/1.5 var(--sans);}.object-explored progress{width:100%;height:6px;accent-color:#4b8b78;}.object-explored span{white-space:nowrap;}
.object-recall-art{height:124px;display:flex;justify-content:center;}.object-recall-art svg{width:124px;height:100%;max-width:100%;}.object-workbench .object-meaning{text-align:center;font-weight:600;}
#object-form label{display:block;font:.8rem/1.6 var(--sans);margin:16px 0 8px;}
#object-answer{box-sizing:border-box;display:block;width:100%;min-height:50px;max-width:100%;padding:12px;border:1px solid var(--rule-room);border-radius:var(--r-surface);font:500 1.1rem/1.5 var(--sans);background:var(--sheet);color:var(--carbon);}
#object-answer:focus-visible{outline:3px solid #efb94e;outline-offset:2px;}
#object-keyboard{margin-top:10px;}.object-help{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}.object-help .btn{width:auto;flex:1;}
.object-text-button{border:0;background:none;box-shadow:none;color:var(--world-text,var(--world-deep));text-decoration:underline;text-underline-offset:4px;padding:10px 0;min-height:44px;white-space:normal;font:600 .8rem/1.6 var(--sans);text-align:left;cursor:pointer;text-transform:none;letter-spacing:0;}
.object-workbench .object-clue{min-height:1.5em;color:var(--world-text,var(--world-deep));font:600 1.1rem/1.5 var(--serif);margin:8px 0 0;}
.object-workbench .object-clue:empty{display:none;}.object-feedback.is-right>h2{color:var(--malachite-ink);}.object-workbench .object-feedback-note{font-size:var(--t-00);}
.object-finish-seal{display:grid;place-items:center;width:64px;height:64px;background:#f3e5bc;border-radius:50%;}.object-finish-seal .ic{width:34px;height:34px;color:#8f6e2c;}
.object-score{display:flex;flex-direction:column;gap:6px;margin:20px 0;font:.85rem/1.5 var(--sans);}.object-score strong{font:500 2.8rem/1 var(--serif);}
.object-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:30px 0 8px;border-top:1px solid var(--rule);padding-top:14px;font:.75rem/1.5 var(--sans);color:var(--steel);}
.object-scene-door{display:grid;grid-template-columns:116px minmax(0,1fr) 24px;align-items:center;gap:20px;text-align:left;width:100%;box-sizing:border-box;min-height:135px;padding:20px 24px;margin:22px 0;background:var(--galley);border:1px solid var(--rule);border-radius:var(--r-surface);box-shadow:none;color:var(--carbon);text-transform:none;letter-spacing:0;cursor:pointer;}
.object-scene-door:hover{border-color:var(--carbon);}.object-scene-door>span:nth-child(2){display:grid;gap:6px;min-width:0;}.object-scene-door strong{font:500 1.45rem/1.3 var(--serif);}.object-scene-door span span{font:.85rem/1.6 var(--sans);}.object-scene-door small{font:600 .75rem/1.5 var(--sans);}.object-scene-door>.ic{width:24px;height:24px;}
.object-door-art{position:relative;height:95px;display:block;}.object-door-art>svg{position:absolute;width:76px;height:88px;top:0;left:0;transform:rotate(-10deg);}.object-door-art>svg+svg{left:48px;top:12px;transform:rotate(12deg);}
#v-course>.object-scene-door,#v-library>.object-scene-door{max-width:1100px;margin:28px auto;}
.daily-object-art{width:140px;height:148px;margin:15px auto;}.daily-object-art svg{width:100%;height:100%;}
@media(max-width:900px){.object-game-grid{grid-template-columns:minmax(0,1fr);gap:24px;}.object-diorama{max-width:720px;margin:0 auto;}.object-workbench{max-width:720px;width:100%;margin:0 auto;}.object-resident{margin:0 0 12px;width:54px;height:58px;}.object-recall-art{height:110px;}.object-workbench .object-fact{clear:both;}}
@media(max-width:560px){.scene-word-stage{padding:14px 12px 24px;}.object-top{gap:10px;}.object-top>span{font-size:.72rem;gap:8px;}.object-top .btn{padding:9px 11px;max-width:46%;white-space:normal;}.object-heading{margin:22px 4px;}.object-heading h1{font-size:2rem;}.object-heading p{font-size:.75rem;}.object-diorama{min-height:270px;border-width:5px;}.object-room-caption{font-size:.7rem;top:3%;}.object-props{inset:14% 1% 7%;}.object-prop{width:29%;padding:8px 2px!important;}.object-workbench{padding:22px 18px;}.object-workbench h2{font-size:var(--t-4);}.object-fact h2{font-size:var(--t-4);}.object-bottom{align-items:flex-start;flex-direction:column;gap:6px;}.object-scene-door{grid-template-columns:80px minmax(0,1fr);gap:16px;padding:18px 16px;}.object-scene-door>.ic{display:none;}.object-door-art{height:80px;}.object-door-art>svg{width:56px;height:65px;}.object-door-art>svg+svg{left:28px;top:18px;}.object-scene-door strong{font-size:var(--t-3);}.object-scene-door span span{font-size:var(--t-00);}}
html[data-motion="low"] .object-prop{transition:none!important;transform:none!important;}
.scene-word-stage h1,.scene-word-stage h2,.scene-word-stage .btn{text-transform:none;letter-spacing:normal;}
.object-round-track .is-supported{background:color-mix(in srgb,#bda35b 30%,var(--paper));border-color:#bda35b;}
.expedition-stage .object-sheet{max-width:1400px;}.expedition-stage .object-top>span{font:500 1.15rem/1.4 var(--serif);}.quest-toolbar{display:flex;justify-content:space-between;align-items:start;gap:20px;margin:20px 0;font:.85rem/1.5 var(--sans);}.quest-settings{position:relative;max-width:540px;min-width:0;}.quest-settings>summary{cursor:pointer;min-height:44px;text-align:right;color:var(--world-text,var(--world-deep));font-weight:600;}.quest-settings[open]{background:var(--paper);border:1px solid var(--rule);padding:16px;border-radius:var(--r-dialog);}.quest-settings nav{display:flex;gap:8px;}.quest-settings nav button{flex:1;min-height:44px;border:1px solid var(--rule);border-radius:var(--r-surface);padding:8px;background:var(--paper);color:var(--carbon);box-shadow:none;}.quest-settings nav [aria-pressed="true"]{background:#35568c;color:white;}.quest-world-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px;}.quest-world-list button{display:flex;align-items:center;gap:8px;min-width:0;padding:8px;border:1px solid var(--rule);border-radius:var(--r-surface);background:var(--galley);color:var(--carbon);text-align:left;text-transform:none;letter-spacing:0;font:.8rem/1.4 var(--sans);box-shadow:none;}.quest-world-list svg{width:44px;height:50px;flex-shrink:0;}.quest-world-list [aria-pressed="true"]{border:2px solid var(--world-text,var(--world-deep));}.quest-room{border-radius:18px;min-height:360px;aspect-ratio:9/5.6;}.quest-prop{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:19%;height:25%;min-width:44px;min-height:44px;padding:0;border:0!important;box-shadow:none!important;background:transparent!important;cursor:pointer;transition:filter .2s ease-out;}.quest-prop svg{width:100%;height:100%;filter:drop-shadow(3px 6px 2px #43352028);}.quest-prop:disabled{opacity:1;cursor:default;}.quest-prop:focus-visible{outline:3px solid #35568c;outline-offset:3px;border-radius:var(--r-surface);}.quest-prop.is-selected::before,.quest-prop.is-target::before{content:"";position:absolute;inset:5%;border:2px solid #a98134;border-radius:50%;background:#fff7d535;z-index:-1;}.quest-prop.is-selected::before{background:#d8ede589;border-color:#4b8b78;}.quest-picked{position:absolute;bottom:0;right:0;background:#4b8b78;color:#fffdf5;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;}.quest-picked svg{width:18px;height:18px;}.quest-secret{position:absolute;right:12px;bottom:8px;width:44px;height:44px;padding:10px;border:0;background:#fffdf566;color:#675637;box-shadow:none;border-radius:50%;}.quest-secret .ic{width:22px;height:22px;}.quest-secret-note{display:flex;align-items:center;gap:12px;padding:16px;margin-top:16px;border:1px solid color-mix(in srgb,#4b8b78 30%,var(--rule));border-radius:var(--r-surface);background:color-mix(in srgb,#4b8b78 14%,var(--paper));font:1.1rem/1.5 var(--serif);}.quest-secret-note[hidden]{display:none;}.quest-secret-note svg{width:48px;height:60px;flex-shrink:0;}.quest-source{margin-top:20px;font:.8rem/1.6 var(--sans);color:var(--steel);}.quest-source summary{cursor:pointer;min-height:44px;}.quest-source p{max-width:70ch;}.quest-source cite{font-style:normal;}.expedition-stage .object-workbench{padding:22px 26px;}.expedition-stage .object-resident{width:72px;height:72px;margin-bottom:8px;}.expedition-stage .object-workbench h2{font-size:1.7rem;}.expedition-stage .quest-prompt{font:500 1.25rem/1.55 var(--serif);}.quest-packing{display:flex;align-items:center;gap:12px;min-height:80px;border:1px dashed #a5b6a8;border-radius:var(--r-surface);padding:10px;}.quest-packing svg{width:58px;height:66px;}.quest-packing span{margin-left:auto;font-size:var(--t-0);}.quest-detail-art{width:86px;height:92px;margin:12px auto;}.quest-detail-art svg{width:100%;height:100%;}.quest-built,.quest-tiles{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;}.quest-built{min-height:72px;border:1px dashed #9baf9c;border-radius:var(--r-surface);padding:12px;align-items:center;background:color-mix(in srgb,#4b8b78 10%,var(--paper));}.quest-built>span{font:.85rem/1.5 var(--sans);color:var(--steel);}.quest-built button,.quest-tiles button{min-height:44px;padding:9px 12px;background:var(--paper);color:var(--carbon);border:1px solid var(--rule-room);border-radius:var(--r-surface);box-shadow:0 3px 0 var(--rule);font:500 1rem/1.5 var(--serif);text-transform:none;letter-spacing:0;}.quest-tiles button:disabled{opacity:.28;box-shadow:none;}.quest-responses{display:grid;gap:12px;margin:18px 0;}.quest-responses button{padding:16px;border:1px solid color-mix(in srgb,#4b8b78 30%,var(--rule));border-radius:var(--r-surface);background:color-mix(in srgb,#4b8b78 8%,var(--paper));color:var(--carbon);box-shadow:0 3px 0 var(--rule);text-align:left;font:500 1.05rem/1.65 var(--serif);text-transform:none;letter-spacing:0;}.quest-responses button:hover{background:color-mix(in srgb,#4b8b78 16%,var(--paper));}.quest-help,.quest-model{margin:18px 0;font:.85rem/1.6 var(--sans);}.quest-help summary,.quest-model summary{cursor:pointer;min-height:44px;}.quest-help button{display:block;}.expedition-stage .quest-answer{font:500 1.55rem/1.5 var(--serif);overflow-wrap:anywhere;}.quest-feedback.is-right h2{color:var(--malachite-ink);}.object-bottom progress{width:180px;max-width:45%;height:8px;accent-color:#4b8b78;}.expedition-stage label{font:.85rem/1.6 var(--sans);}.expedition-stage textarea{box-sizing:border-box;width:100%;max-width:100%;padding:14px;border:1px solid var(--rule-room);border-radius:var(--r-surface);font:1rem/1.65 var(--sans);background:var(--sheet);color:var(--carbon);margin:12px 0;resize:vertical;}.quest-writing-checks{border:1px solid var(--rule);padding:12px;border-radius:var(--r-surface);margin:16px 0;min-width:0;}.quest-writing-checks legend{font:.8rem/1.5 var(--sans);}.quest-writing-checks label{display:flex;align-items:center;gap:10px;min-height:44px;}.expedition-stage small{font:.75rem/1.6 var(--sans);display:block;margin-top:10px;}
@media(min-width:1100px){.expedition-stage .object-game-grid{grid-template-columns:minmax(0,1.5fr) minmax(360px,1fr);}.expedition-stage[data-mode="response"] .object-game-grid,.expedition-stage[data-mode="write"] .object-game-grid{grid-template-columns:minmax(0,1fr) minmax(420px,1.2fr);}}
@media(max-width:900px){.expedition-stage .object-game-grid{gap:12px;}.quest-room{min-height:310px;}.expedition-stage .object-resident{width:54px;height:58px;}.quest-source{margin:8px 0;}.expedition-stage .object-workbench{max-width:none;}}
@media(max-width:560px){.expedition-stage .object-top>span{font-size:var(--t-1);}.quest-toolbar{font-size:var(--t-00);gap:12px;margin:14px 0;}.quest-settings{max-width:80%;}.quest-settings[open]{padding:12px;}.quest-world-list{grid-template-columns:minmax(0,1fr);}.quest-room{min-height:260px;border-width:4px;}.quest-prop{width:19%;height:24%;}.expedition-stage .object-workbench{padding:20px 18px;}.expedition-stage .object-workbench h2{font-size:var(--t-4);}.quest-responses button{font-size:var(--t-1);}.quest-secret{right:2px;bottom:1px;}.quest-source summary{min-height:36px;}.expedition-stage .object-bottom{flex-direction:row;}.quest-built button,.quest-tiles button{font-size:var(--t-1);padding:9px;}}
#v-course .course-atlas{display:block;max-width:1100px;margin:auto;}#v-course .course-atlas>.atlas-heading{margin-bottom:18px;}#v-course .atlas-heading h2{font:400 1.55rem/1.25 var(--serif);}#v-course .course-atlas>.level-rail{margin-bottom:24px;}#v-course .course-atlas>.level-rail>.level-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;position:static;}#v-course .level-tabs .level-tab{padding:14px 12px;border-radius:var(--r-surface);min-height:70px;display:flex;flex-direction:column;justify-content:center;gap:4px;}#v-course .level-tab .level-tab-code{font:600 1rem/1.3 var(--sans);}#v-course .level-tabs .level-tab strong{font:500 .8rem/1.4 var(--sans);}#v-course .level-caption{margin:16px 0;}#v-course .chapter-heading{padding:16px 20px;margin-bottom:18px;}#v-course .chapter-heading p{display:none;}#v-course .chapter-heading h2{font-size:var(--t-4);} #v-course .chapter-ending{padding:14px 18px;}#v-course .chapter-ending h3{font:500 1rem/1.4 var(--sans);}#v-course .chapter-ending p,#v-course .chapter-ending .chapter-seal{display:none;}#v-course .level-panel>.object-scene-door{margin:10px 0 24px;min-height:94px;padding:12px 20px;grid-template-columns:76px minmax(0,1fr) 24px;}#v-course .level-panel>.object-scene-door .object-door-art{height:70px;}#v-course .level-panel>.object-scene-door .object-door-art svg{width:52px;height:62px;}#v-course .level-panel>.object-scene-door .object-door-art svg+svg{left:28px;}#v-course .level-panel>.object-scene-door strong{font-size:var(--t-3);}
.book-course-tools{max-width:1100px;margin:20px auto;}.book-course-tools label{display:block;font:600 .85rem/1.6 var(--sans);margin-bottom:8px;}.book-course-tools input{box-sizing:border-box;width:100%;min-height:48px;padding:12px 16px;border:1px solid var(--rule);border-radius:var(--r-surface);background:var(--paper);font:1rem/1.5 var(--sans);color:var(--carbon);}#v-course .cs-wing-books .rd{max-width:1100px;margin:0 auto;padding:0;}#v-course .cs-wing-books .rd-shelfhead{padding:12px 0;margin:12px 0;font-size:var(--t-00);}#v-course .cs-wing-books .rd-shelfhead>span{display:none;}#v-course .cs-wing-books .rd-book{margin:10px 0;border:1px solid var(--rule);border-radius:var(--r-dialog);background:var(--paper);overflow:hidden;}#v-course .cs-wing-books .rd-book>.rd-hit{padding:18px;min-height:110px;}#v-course .cs-wing-books .rd-book:not(.rd-open) .rd-can{display:none;}#v-course .cs-wing-books .rd-book[hidden]{display:none!important;}#v-course .cs-wing-books .rd-book .rd-ti{font:500 1.25rem/1.5 var(--serif);}#v-course .cs-wing-books .rd-open-box{margin:0;padding:18px;border-top:1px solid var(--rule);}.lesson-window.lesson-emblem{display:grid;place-items:center;background:transparent!important;box-shadow:none!important;border:0!important;min-height:90px;}.lesson-emblem>.brand-art{width:90px;height:90px;}.lesson-emblem:has(.gx-mate)>.brand-art{opacity:.18;}.lesson-emblem .gx-mate{inset:12px!important;width:72px!important;position:absolute!important;}.lesson-emblem::before,.lesson-emblem::after{display:none!important;}
.earned-moment{position:fixed;z-index:3500;left:50%;top:24%;width:180px;height:180px;margin:-90px;pointer-events:none;display:grid;place-items:center;perspective:700px;}.earned-medallion{position:relative;width:132px;height:132px;display:grid;place-items:center;border:7px solid #e7bb5c;border-radius:50%;background:radial-gradient(circle at 30% 20%,#fff9df,#edcc7c);box-shadow:0 8px 0 #a78136,0 16px 0 -5px #654e28,0 32px 48px #403a3744;}.earned-medallion>.cast-portrait{width:90px;height:104px;}.earned-medallion::after{content:"";position:absolute;inset:5px;border:1px solid #fff5d3;border-radius:50%;}
#v-course .level-tabs .level-tab > strong { display: block; overflow-wrap: anywhere; }
#v-course .level-tabs .level-tab > .level-tab-code { font: 600 1rem/1.3 var(--sans); margin: 0; }
#course-passport-details:not([open]) { display: none; }
@media (max-width: 560px) {
#v-course .course-atlas > .level-rail > .level-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width:560px){#v-course .level-tabs .level-tab{padding:12px 5px;min-height:66px;}#v-course .level-tabs .level-tab strong{font-size:.7rem;}#v-course .cs-wings .cs-wt-mid em{display:none;}#v-course .cs-wing-books .rd-book>.rd-hit{padding:14px;}#v-course .cs-wing-books .rd-book .rd-ti{font-size:var(--t-2);}.book-course-tools{margin:16px 0;}}
html[data-motion="low"] .quest-prop{transition:none;}html[data-motion="low"] .earned-moment{display:none;}
.desk-other-discoveries{margin:16px 0 0;border-top:1px solid var(--rule);}.desk-other-discoveries>summary{min-height:48px;padding:12px 0;font:var(--fw-strong) var(--type-body)/1.5 var(--sans);cursor:pointer;}.daily-mode .daily-top{padding-bottom:6px;}.daily-mode .daily-invitation{padding:24px;}.daily-mode .daily-copy h2{font-size:clamp(1.7rem,3vw,2.3rem);}.daily-mode .daily-landscape{max-height:210px;}.daily-mode .object-scene-door{min-height:105px;margin:16px 0;}.daily-mode .object-scene-door .object-door-art{height:70px;}.daily-mode .object-scene-door .object-door-art svg{height:68px;}.daily-mode .object-scene-door strong{font-size:var(--t-3);}
#v-course .cs-wing-books .rd-mark,#v-course .cs-wing-books .rd-beyond{display:none;}#v-course .rd-shelfhead[hidden],#v-course .rd-ask[hidden]{display:none!important;}#v-course .cs-wing-books .rd-book:not(.rd-open) .rd-next{display:none;}
.quest-prop{width:var(--w,19%);height:var(--h,25%);}
.quest-directive{margin:0 0 16px;padding:16px 20px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-dialog);font:500 1.05rem/1.55 var(--sans);}.expedition-stage[data-mode="find"] .object-workbench>.quest-prompt,.expedition-stage[data-mode="pack"] .object-workbench>.quest-prompt{display:none;}
#v-course .cs-wing-books>.cs-ref{display:none;}
.expedition-stage .btn:disabled{opacity:.45;cursor:default;box-shadow:none;}
#v-course .rd-access-brief{display:block;font:.8rem/1.5 var(--sans);color:var(--pencil);margin-top:6px;}#v-course .rd-book.rd-open .rd-access-brief,#v-course .rd-book:not(.rd-open) .rd-opens{display:none;}
.scene-word-stage :is(p,h2,button,summary,label,small){overflow-wrap:anywhere;}
.object-top>span{min-width:0;}.object-top .ic{flex-shrink:0;}
.object-workbench :is(button,fieldset),.quest-world-list button>span{min-width:0;max-width:100%;box-sizing:border-box;}
.quest-built,.quest-tiles,.quest-responses{min-width:0;}
.quest-built button,.quest-tiles button,.quest-responses button{white-space:normal;}
.quest-secret-note>span{min-width:0;overflow-wrap:anywhere;}
.object-bottom>span{min-width:0;}.object-bottom progress{flex-shrink:0;}
@media(max-width:560px){
.quest-toolbar{flex-wrap:wrap;}.quest-toolbar>span{flex-shrink:0;}
.quest-settings{margin-left:auto;max-width:100%;box-sizing:border-box;}
.quest-settings[open]{flex-basis:100%;}
.quest-settings nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.object-scene-door strong,.object-scene-door span span{overflow-wrap:anywhere;}
}
.gx-stage .gx-rwl-line{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:clamp(16px,3vw,28px);border:1px solid var(--rule);border-left:4px solid var(--world-deep,var(--play));border-radius:6px 20px 20px 6px;background:var(--paper);}
.gx-stage .gx-rwl-line>.lesson-audio-control{grid-column:1;grid-row:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;}
.gx-stage .lesson-audio-control>.gx-say{position:static;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:auto;max-width:100%;min-width:44px;min-height:44px;padding:10px 14px;margin:0;font:600 .8125rem/1.5 var(--sans);white-space:normal;letter-spacing:0;text-transform:none;border:1px solid color-mix(in srgb,var(--carbon) 30%,transparent);border-radius:var(--r-control);background:transparent;color:var(--carbon);box-shadow:none;}
.lesson-audio-control .ic{width:20px;height:20px;flex-shrink:0;}
.lesson-audio-control .audio-button-status{flex:1 1 180px;margin:0;overflow-wrap:anywhere;}
.gx-stage .gx-rwl-line>.gx-rwl-ru{grid-column:1;grid-row:2;min-width:0;overflow-wrap:anywhere;font:500 clamp(1.35rem,2.6vw,1.8rem)/1.65 var(--serif);}
.gx-stage .gx-rwl-line>.gx-rwl-en{grid-column:1;grid-row:3;min-width:0;overflow-wrap:anywhere;max-width:65ch;padding-top:12px;border-top:1px solid var(--rule);font:400 1rem/1.65 var(--serif);color:var(--pencil);opacity:1;}
.audio-button-status{grid-column:1 / -1;min-width:0;overflow-wrap:anywhere;}
.daily-carry{display:flex;align-items:center;gap:12px;padding:14px 18px;margin:8px auto 22px;max-width:760px;box-sizing:border-box;background:#e8f0e6;border:1px solid #bfceba;border-radius:var(--r-dialog);color:#2c513e;font:.8125rem/1.5 var(--sans);}
.daily-carry>.ic{width:24px;height:24px;flex-shrink:0;}.daily-carry>span{display:grid;gap:3px;min-width:0;overflow-wrap:anywhere;}
.daily-flow-finish{--flow-tint:#e6eee3;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px 36px;max-width:1000px;margin:16px auto;text-align:left;align-items:center;}
.daily-flow-finish[data-next-kind="restore"]{--flow-tint:#f4e6cb;}.daily-flow-finish[data-next-kind="recall"]{--flow-tint:#e9e3f2;}.daily-flow-finish[data-next-kind="story"]{--flow-tint:#e0eaf3;}
.daily-flow-copy{min-width:0;}.daily-flow-copy h2{font:400 clamp(1.6rem,3vw,2.3rem)/1.25 var(--serif);margin:14px 0 24px;text-transform:none;letter-spacing:0;overflow-wrap:anywhere;}
.daily-flow-result{display:flex;gap:8px;align-items:center;font:.85rem/1.5 var(--sans);color:var(--pencil);}
.daily-next-route{list-style:none;padding:0;display:grid;gap:8px;margin:12px 0 20px;}.daily-next-route li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-surface);background:var(--paper);font:.875rem/1.5 var(--sans);overflow-wrap:anywhere;}.daily-next-route .ic{width:22px;height:22px;}.daily-next-route small{font:600 .8rem/1.4 var(--sans);}
.daily-flow-copy>.btn{box-sizing:border-box;width:100%;white-space:normal;overflow-wrap:anywhere;}.daily-flow-copy>small{display:block;margin-top:10px;font:.8rem/1.5 var(--sans);color:var(--pencil);}
.daily-round-notes{font:.8rem/1.5 var(--sans);margin-top:18px;}.daily-round-notes summary{cursor:pointer;min-height:44px;padding-block:12px;}
.daily-flow-finish>.daily-finish-actions,.daily-flow-finish>.daily-album{grid-column:1/-1;}.daily-flow-finish>.daily-finish-actions{padding-top:8px;justify-content:flex-end;}.daily-flow-finish>.daily-album{font:.8rem/1.6 var(--sans);}
@media(max-width:650px){.daily-flow-finish{grid-template-columns:minmax(0,1fr);gap:16px;margin:8px auto;} .daily-flow-copy h2{margin:12px 0 20px;}.daily-flow-finish>.daily-finish-actions{justify-content:center;}.daily-next-route li{padding:10px 12px;}.daily-carry{margin-bottom:16px;}}
[data-theme="dark"] .daily-carry{background:#263c30;color:#d9e8d6;border-color:#526b50;}
:root { --rank-brass:#906723;--rank-wash:#f4eddc;--rank-track:#ded8cb;--rank-ease:cubic-bezier(.2,.7,.2,1); }
[data-theme="sepia"] { --rank-brass:#80591f;--rank-wash:#eee0c5;--rank-track:#d5c6ad; }
[data-theme="dark"] { --rank-brass:#dfb967;--rank-wash:#2d3040;--rank-track:#46516a; }
[data-theme="dark"] .rank-art { color:var(--steel)!important; }
#ov-key .panel { box-sizing:border-box;width:min(520px,calc(100vw - 32px));max-width:520px;padding:24px 28px 28px;border:1px solid var(--rule);border-radius:var(--r-dialog);background:var(--paper);box-shadow:var(--sh-float);max-height:calc(100dvh - 32px);overflow:auto; }
#key-panel .key-dialog-close { position:static;display:block;margin:0 0 18px auto;min-height:40px;padding:8px 12px;border:1px solid var(--rule);border-radius:var(--r-control);box-shadow:none;background:transparent;color:var(--steel);font:500 .8rem/1.4 var(--sans);letter-spacing:0;text-transform:none; }
#key-panel > h3,#key-panel:has(#key-dialog-close)>h3 { margin:0 0 20px!important;padding:0!important;border:0;background:transparent;color:var(--carbon);font:400 1.75rem/1.2 var(--serif)!important;letter-spacing:-.02em;text-transform:none;text-wrap:wrap;overflow-wrap:anywhere; }
#key-panel>.smallcaps { margin-bottom:10px; }
#key-panel .btnrow { gap:10px;flex-wrap:wrap; }
#key-panel .rank-promotion { text-align:center;padding:0 8px 4px; }
.rank-promotion-seal { width:88px;height:97px;margin:0 auto 20px; }
.rank-promotion-class { margin:0 0 8px;color:var(--rank-brass);font:600 .75rem/1.5 var(--sans);letter-spacing:.08em; }
#key-panel .rank-promotion h3 { margin:0 0 14px;padding:0;background:none;border:0;color:var(--carbon);font:400 clamp(1.7rem,5vw,2.25rem)/1.15 var(--serif);letter-spacing:-.025em;text-transform:none;overflow-wrap:anywhere; }
.rank-promotion-earned { font:.95rem/1.6 var(--sans);color:var(--carbon);margin:0 0 6px; }
#key-panel .rank-promotion .k-lede { font:.9rem/1.6 var(--sans);color:var(--steel);margin:0 0 26px; }
.rank-promotion .btnrow { justify-content:center;padding-top:22px;border-top:1px solid var(--rule); }
.practice-progress { border:1px solid var(--rule);border-radius:var(--r-surface);background:var(--paper);box-shadow:none; }
:is(#practice-rewards,.course-rank-progress) .practice-progress { grid-template-columns:minmax(190px,1fr) minmax(180px,1.2fr);gap:12px 30px;padding:18px 22px;border:1px solid var(--rule);border-radius:var(--r-surface);background:var(--paper); }
:is(#practice-rewards,.course-rank-progress) .pp-level { grid-column:1;grid-row:1; }
:is(#practice-rewards,.course-rank-progress) .pp-streak { grid-column:1;grid-row:2;text-align:left;padding-left:58px; }
.pp-track { min-width:0; }
:is(#practice-rewards,.course-rank-progress) .pp-track { grid-column:2;grid-row:1/3;align-self:center; }
.pp-destination { color:var(--carbon);font:500 .78rem/1.5 var(--sans);margin:0 0 10px;overflow-wrap:anywhere; }
.pp-level { gap:14px; }
.pp-level>span:last-child { max-width:none; }
.pp-level small { font-size:.72rem;line-height:1.5; }
.pp-level small:last-child:not(:first-of-type) { text-decoration:underline;text-underline-offset:3px;margin-top:4px; }
.pp-meter,:is(#practice-rewards,.course-rank-progress) .pp-meter,.is-profile .pp-meter { height:6px;border-radius:2px;background:var(--rank-track);margin:0; }
.pp-meter>span { border-radius:2px;background:var(--rank-brass); }
.pp-numbers { margin-top:8px;font-size:.7rem;font-variant-numeric:tabular-nums;flex-wrap:wrap;gap:4px 12px; }
.pp-streak { font-size:.72rem;color:var(--steel); }
.pp-session { padding-top:12px;border-top:1px solid var(--rule); }
@keyframes ledger-seal { from{opacity:.4;transform:scale(.9)}to{opacity:1;transform:scale(1)} }
#profile-dossier { max-width:var(--page-w);margin:0 auto;padding:0 0 48px; }
.profile-room-label { font:var(--fw-strong) var(--t-00)/1.4 var(--sans);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--steel);margin-bottom:4px; }
.profile-play { border-radius:0;overflow:visible;background:none;border:0;box-shadow:none;padding:0;margin:0; }
.practice-progress.is-profile { padding:24px 28px;margin:0 0 20px;border:1px solid var(--rule);border-radius:var(--r-surface);box-shadow:none; }
.is-profile .pp-heading { margin-bottom:20px; }
.is-profile .pp-level { font:500 1.5rem/1.2 var(--serif); }
.is-profile .pp-level-mark { width:60px;min-width:60px;height:66px; }
.is-profile .pp-explainer { margin:16px 0 18px;font:.8rem/1.5 var(--sans); }
.pp-rank-ladder,.pp-collection,.pp-rules { margin:0;border:0;border-top:1px solid var(--rule); }
.pp-rank-ladder>summary,.pp-collection>summary,.pp-rules>summary { min-height:44px;padding:13px 0;font:500 .8rem/1.4 var(--sans);cursor:pointer;color:var(--carbon);text-decoration:none; }
.pp-rules>summary { display:list-item; }
.pp-collection>summary>span { float:right;color:var(--steel);font-variant-numeric:tabular-nums; }
.pp-rank-ladder li { border-radius:var(--r-control);border-color:transparent;border-bottom-color:var(--rule); }
.pp-rank-ladder .is-current { border-color:var(--rank-brass);background:var(--rank-wash); }
.pp-milestones { gap:0;grid-template-columns:repeat(2,minmax(0,1fr));padding:0 0 16px; }
.pp-badge,.pp-badge.is-earned { background:none;border:0;border-radius:0;padding:16px 16px 16px 0; }
.pp-badge>span:first-child { font:500 1rem/1.2 var(--serif);color:var(--steel); }
.pp-badge.is-earned>span:first-child { color:var(--rank-brass); }
.pp-badge strong { font:500 1rem/1.35 var(--serif); }
.pp-badge>span:last-child { color:var(--rank-brass); }
.profile-next { display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px;margin:0 0 20px;background:var(--galley);border-radius:var(--r-surface);border:1px solid var(--rule);border-top:3px solid var(--world-deep); }
.profile-next h3 { font:400 1.35rem/1.25 var(--serif);margin:8px 0;color:var(--carbon);letter-spacing:0;text-transform:none; }
.profile-next p { font:.82rem/1.6 var(--sans);margin:0;color:var(--steel);max-width:46ch; }
.profile-next>.btn { flex:none;max-width:45%;}
.profile-week { padding:20px 0;margin:0;border:0;background:none;box-shadow:none; }
.profile-week-head h3 { font:400 1.2rem/1.3 var(--serif);letter-spacing:0;text-transform:none;margin:0 0 6px; }
.profile-week-head p { font:.8rem/1.5 var(--sans);margin:0; }
.profile-week-head label { font:.72rem/1.5 var(--sans);color:var(--steel); }
.profile-week-pages { gap:6px;margin:18px 0 0; }
.profile-day { padding:10px 4px;min-height:76px;border:0;border-radius:var(--r-control);background:none;box-shadow:none; }
.profile-day b { font:500 1.35rem/1.3 var(--serif); }
.profile-day.is-earned { background:var(--rank-wash);border:0;color:var(--carbon);box-shadow:none; }
.profile-day.is-today { outline:1px solid var(--rank-brass);outline-offset:0; }
.profile-day>span { font-size:.6875rem; }
.profile-week-note { display:none; }
.profile-quests,.profile-ticket,.profile-history { margin:0;border:0;border-top:1px solid var(--rule);padding:0; }
.profile-quests>summary,.profile-ticket>summary,.profile-history>summary { cursor:pointer;min-height:48px;padding:16px 0;color:var(--carbon);font:500 .85rem/1.4 var(--sans); }
.profile-quest-grid { padding-bottom:20px; }
.profile-quest { border-radius:var(--r-control);box-shadow:none; }
#profile-dossier .pxx-foot { margin:16px 0 0;padding:20px 0;border-top:1px solid var(--rule); }
#profile-dossier .pxx-if { font:.9rem/1.6 var(--serif);margin:0 0 16px; }
#profile-dossier .pxx-if.is-empty { font-size:0;margin-bottom:12px; }
#profile-dossier .pxx-if.is-empty button { font:.78rem/1.5 var(--sans); }
#profile-dossier .pxx-utils { gap:10px 18px; }
#profile-dossier .px-verb { font:.78rem/1.5 var(--sans);min-height:36px; }
#profile-dossier .pxx-fine { font:.72rem/1.5 var(--sans);margin-top:16px; }
.reader-passport progress,.profile-quest progress { accent-color:var(--rank-brass); }
.reader-passport progress::-webkit-progress-bar,.profile-quest progress::-webkit-progress-bar { background:var(--rank-track); }
.reader-passport progress::-webkit-progress-value,.profile-quest progress::-webkit-progress-value { background:var(--rank-brass); }
.reader-passport progress::-moz-progress-bar,.profile-quest progress::-moz-progress-bar { background:var(--rank-brass); }
@media(max-width:600px) {
#profile-dossier { padding:24px 16px 32px; }
.practice-progress.is-profile { padding:20px; }
:is(#practice-rewards,.course-rank-progress) .practice-progress { grid-template-columns:minmax(0,1fr);gap:8px;padding:16px; }
:is(#practice-rewards,.course-rank-progress) .pp-level { grid-column:1;grid-row:1; }
:is(#practice-rewards,.course-rank-progress) .pp-streak { grid-column:1;grid-row:2;padding-left:54px;max-width:none; }
:is(#practice-rewards,.course-rank-progress) .pp-track { grid-column:1;grid-row:3;margin-top:10px; }
.is-profile .pp-heading { align-items:flex-start;flex-wrap:wrap;gap:12px; }
.is-profile .pp-level { font-size:var(--t-3); }
.is-profile .pp-streak { max-width:none;text-align:left; }
.profile-next { align-items:stretch;flex-direction:column;padding:20px;gap:18px; }
.profile-next>.btn { max-width:none;align-self:flex-start; }
.profile-week-head { gap:12px;flex-wrap:wrap; }
.profile-day { min-height:70px;padding:8px 2px; }
.profile-day>span { font-size:.6875rem; }
.profile-day b { font-size:var(--t-2); }
#ov-key .panel { padding:18px 20px 24px; }
#key-panel .rank-promotion { padding:0; }
.rank-promotion .btnrow>.btn { flex:1 1 100%; }
}
html[data-motion="low"] .rank-promotion *,html[data-motion="low"] #ov-key.show .panel { animation-duration:1ms!important;animation-delay:0s!important;transition-duration:1ms!important;transition-delay:0s!important; }
.pp-overview { margin-top:20px;border-top:1px solid var(--rule); }
.pp-overview>summary { cursor:pointer;padding:14px 0 0;font:500 .8rem/1.5 var(--sans);color:var(--steel); }
.rank-promotion-seal { animation:ledger-seal 420ms var(--rank-ease) both; }
@media(max-width:360px) {
.is-profile .pp-level { display:block;font-size:var(--t-2); }
.is-profile .pp-level-mark { width:44px;min-width:44px;height:48px;margin-bottom:10px; }
.profile-week-head label { width:100%; }
}
.daily-meter progress { height:6px;border-radius:2px;accent-color:var(--rank-brass);background:var(--rank-track); }
.daily-meter progress::-webkit-progress-bar { background:var(--rank-track); }
.daily-meter progress::-webkit-progress-value { background:var(--rank-brass);transition:width 440ms var(--rank-ease); }
.daily-meter progress::-moz-progress-bar { background:var(--rank-brass); }
.daily-feedback,.daily-feedback.is-learning { padding:20px 0 0;border:0;border-top:1px solid var(--rule);border-radius:0;background:none; }
.daily-feedback>.pp-receipt { margin-bottom:16px; }
#profile-dossier>.room-head::before { content:none; }
@media(max-width:600px) {
body>header .bar { grid-template-columns:minmax(88px,max-content) minmax(0,1fr); }
body>header .bar .nav-ident { min-width:0;flex-wrap:wrap;gap:4px; }
body>header .bar .nav-ident button { min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;font-size:.75rem;line-height:1.3;letter-spacing:0; }
}
@media(max-width:400px) {
.desk-paths { grid-template-columns:minmax(0,1fr); }
.desk-paths>button { gap:2px;min-height:58px; }
.desk-paths span { overflow-wrap:normal; }
}
.pp-next-rank { display:flex;align-items:center;gap:10px;margin-bottom:10px; }
.pp-next-rank .pp-destination { margin:0;font-size:var(--type-meta,.875rem);line-height:1.45; }
.pp-next-mark { display:block;flex:0 0 36px;width:36px;height:42px; }
.pp-next-mark svg { display:block;width:100%;height:100%; }
.practice-progress .pp-meter { height:8px; }
.practice-progress .pp-meter>span { background:linear-gradient(90deg,var(--rank-brass),var(--signal,#f8c537)); }
.is-profile .pp-next-rank { padding:14px 16px;background:var(--rank-wash);border-radius:var(--r-surface); }
.is-profile .pp-next-mark { flex-basis:52px;width:52px;height:58px; }
.is-profile .pp-level-mark { width:76px;min-width:76px;height:84px; }
.pp-rank-ladder ol { position:relative; }
.pp-rank-ladder li { position:relative;transition:background-color 180ms ease; }
.pp-rank-ladder li.is-earned { background:color-mix(in srgb,var(--rank-wash) 50%,var(--paper)); }
.pp-rank-ladder li.is-current { border-left:4px solid var(--rank-brass);box-shadow:0 3px 0 color-mix(in srgb,var(--rank-brass) 16%,transparent); }
.pp-rank-ladder li:not(.is-current):not(.is-earned) { color:var(--steel); }
.pp-rank-ladder li:hover { background:var(--rank-wash); }
#key-panel .rank-promotion-seal { width:112px;height:124px;padding:14px;border-radius:50%;background:var(--rank-wash);box-shadow:0 0 0 1px color-mix(in srgb,var(--rank-brass) 35%,transparent); }
@media(max-width:600px) {
.pp-next-mark { flex-basis:28px;width:28px;height:34px; }
.pp-next-rank { gap:7px; }
.is-profile .pp-level-mark { width:60px;min-width:60px;height:66px; }
}
html[data-motion="low"] .pp-rank-ladder li { transition:none; }
#v-review { --practice-width:780px;overflow-anchor:none; }
#v-review #practice-rewards { max-width:var(--practice-width);margin:12px auto; }
#v-review #practice-rewards .practice-progress.is-compact {
display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:6px 24px;
padding:12px 16px;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:transparent;
}
#practice-rewards .is-compact .pp-heading { display:contents; }
#practice-rewards .is-compact .pp-level { grid-column:1;grid-row:1/3;gap:10px;font:500 .96rem/1.3 var(--serif); }
#practice-rewards .is-compact .pp-level>span:last-child { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
#practice-rewards .is-compact .pp-level-mark { width:34px;min-width:34px;height:42px; }
#practice-rewards .is-compact .pp-level small { font:500 var(--type-meta)/1.5 var(--sans); }
#practice-rewards .is-compact .pp-level small:last-child:not(:first-of-type) { display:none; }
#practice-rewards .is-compact .pp-track { grid-column:2;grid-row:1;align-self:center;margin:0; }
#practice-rewards .is-compact .pp-destination { display:block;font-size:var(--type-meta);line-height:1.4;margin:0; }
#practice-rewards .is-compact .pp-numbers { font-size:var(--type-meta);margin-top:5px;gap:2px 8px; }
#practice-rewards .is-compact .pp-numbers>span:last-child { display:none; }
#practice-rewards .is-compact .pp-pace { display:none; }
#practice-rewards .is-compact .pp-streak { grid-column:2;grid-row:2;padding:0;font-size:var(--type-meta);line-height:1.4; }
#practice-rewards .is-compact .pp-session { grid-column:1/-1;padding:5px 0 0;border:0;font-size:var(--type-meta);min-height:20px; }
#v-review.practice-active #practice-rewards .pp-streak { display:none; }
#v-review.practice-active #practice-rewards .pp-session { grid-column:2;grid-row:2;padding:0;min-height:20px;gap:8px; }
#v-review.practice-active #practice-rewards .pp-session>span { display:block; }
#v-review #practice-welcome,.daily-adventure { max-width:var(--practice-width);margin-inline:auto; }
#v-review.daily-mode #practice-welcome { max-width:var(--practice-width);margin:8px auto 28px; }
#v-review .practice-modes { max-width:var(--practice-width);margin:8px auto 16px; }
#v-review .daily-top { padding:0 2px 8px;gap:12px; }
#v-review .daily-sound { min-height:40px;border-radius:var(--r-control);padding:7px 12px;background:transparent; }
#v-review.practice-active .daily-route { margin:4px 0 10px; }
#v-review.practice-active .daily-route li { font-size:var(--type-meta); }
#v-review.practice-active .daily-route li>span { width:22px;height:22px;box-shadow:none;font-size:var(--type-meta); }
#v-review .daily-meter { margin:8px 0 14px;gap:12px;font-variant-numeric:tabular-nums; }
#v-review .daily-task { position:relative;padding:24px 28px;max-width:none;border:1px solid var(--rule);border-radius:var(--r-surface);box-shadow:0 2px 0 color-mix(in srgb,var(--rule) 40%,transparent);animation:practice-page-in 180ms ease-out;overflow-anchor:none; }
#v-review .daily-task::before { content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--rank-brass);border-radius:8px 0 0 8px;opacity:.65; }
#v-review .daily-task-head { min-height:28px;gap:12px; }
#v-review .daily-task-head .smallcaps { font:600 var(--type-meta)/1.4 var(--sans);letter-spacing:.1em; }
#v-review .daily-task-head .daily-count { flex:none;color:var(--steel);font:500 var(--type-meta)/1.4 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap; }
#v-review .daily-task h2 { font:400 var(--type-heading)/1.25 var(--serif);margin:8px 0 16px; }
#v-review .daily-line { font:500 var(--type-prompt)/1.45 var(--serif);padding:12px 16px;margin:12px 0 16px;border-radius:0;background:var(--rank-wash); }
#v-review .daily-source { margin:6px 0 12px; }
#v-review .daily-response-space { display:flex;flex-direction:column;min-height:210px;overflow-anchor:none; }
#v-review #daily-answer>p { font-size:var(--type-body);line-height:1.5; }
#v-review .daily-word-meaning { padding:10px 14px;border-radius:var(--r-control); }
#v-review .daily-choices { margin:12px 0 8px;gap:9px; }
#v-review .daily-choices button { min-height:48px;padding:12px 16px;border-radius:var(--r-control);box-shadow:var(--sh-press-quiet);font-size:var(--type-control);transition:background 140ms,border-color 140ms; }
#v-review .daily-choices button:hover:not(:disabled) { transform:none; }
#v-review .daily-clue { min-height:40px;font-size:var(--type-meta); }
#v-review .daily-self-check { gap:10px; }
#v-review .daily-self-check .btn { flex:1; }
#v-review .daily-feedback { display:flex;flex:1;flex-direction:column;gap:10px;margin:0;padding:0;border:0;animation:practice-ink-in 200ms ease-out; }
#v-review .daily-feedback h3 { font-size:var(--t-2);margin:0; }
#v-review .daily-feedback .daily-correction { font:500 var(--type-prompt)/1.5 var(--serif);margin:0;padding:10px 14px;border-left:2px solid var(--rank-brass);background:var(--rank-wash);overflow-wrap:anywhere; }
#v-review .daily-feedback .daily-why { font:var(--type-body)/1.6 var(--sans);margin:0; }
#v-review .daily-explanation { font:var(--type-body)/1.6 var(--sans); }
#v-review .daily-explanation>summary { cursor:pointer;padding:10px 0;min-height:40px; }
#v-review #daily-next { align-self:stretch;margin:auto 0 0;flex:0 0 auto; }
#v-review .daily-invitation { border-radius:var(--learning-radius);border-top:1px solid var(--rule);padding:24px;gap:24px;grid-template-columns:minmax(0,1fr) 160px;box-shadow:none; }
#v-review .daily-copy h2 { font-size:clamp(1.4rem,3vw,2rem); }
#v-review .daily-copy>p { font-size:var(--type-body);line-height:1.6; }
#v-review .daily-landscape { width:160px; }
#v-review .practice-invitation { border-radius:var(--learning-radius);border-top:1px solid var(--rule); }
#v-review:not(.practice-lobby):not(.practice-finished) #practice-workbench { min-height:0;max-width:var(--practice-width);margin-inline:auto; }
#v-review:not(.practice-lobby):not(.practice-finished) #rev-card { flex:0 0 auto; }
#v-review:not(.practice-lobby):not(.practice-finished) #rev-btns { min-height:60px;margin:10px 0 0;padding:8px 0; }
#v-review #practice-answer-reward:not([hidden]) { margin-top:12px; }
#v-review.practice-active #practice-answer-seat { min-height:calc(36px + 1.35 * var(--type-body) + 1.5 * var(--type-meta)); }
#v-review .rev-head { display:flex;align-items:center;justify-content:center;gap:16px;max-width:var(--practice-width);margin-inline:auto; }
#v-review .practice-format { margin:12px auto; }
#v-review :is(.daily-task,#practice-workbench) :focus-visible { outline:3px solid var(--rank-brass);outline-offset:4px; }
#v-review .daily-line .wk-blank { display:inline-block;min-width:1.6em;border-bottom:2px solid var(--rank-brass);transition:color 320ms ease-out; }
#v-review .daily-line .wk-blank.is-inked { color:var(--ink);animation:practice-ink-seep 420ms cubic-bezier(.2,.7,.2,1) both; }
#v-review .daily-line .wk-blank.is-corrected { color:var(--miss);border-bottom-color:var(--miss);animation:practice-ink-seep 420ms cubic-bezier(.2,.7,.2,1) both; }
#v-review .daily-feedback.is-right { animation:practice-ink-in 200ms ease-out,practice-receipt-wash 1100ms cubic-bezier(.2,.7,.2,1) both; }
#v-review .daily-feedback.is-learning { animation:practice-ink-in 200ms ease-out,practice-receipt-blot 900ms ease-out both; }
#v-review .daily-meter progress::-webkit-progress-value { transition:width 640ms cubic-bezier(.2,.7,.2,1); }
#v-review .daily-meter progress::-moz-progress-bar { transition:width 640ms cubic-bezier(.2,.7,.2,1); }
#v-review .daily-meter { position:relative; }
@keyframes practice-ink-seep { from{opacity:.15;transform:translateY(3px)} to{opacity:1;transform:none} }
@keyframes practice-receipt-wash { from{background:color-mix(in srgb,var(--rank-brass) 22%,var(--paper))} to{background:transparent} }
@keyframes practice-receipt-blot { from{background:color-mix(in srgb,var(--miss) 10%,var(--paper))} to{background:transparent} }
@keyframes practice-page-in { from{opacity:.65}to{opacity:1} }
@keyframes practice-ink-in { from{opacity:.4}to{opacity:1} }
@media(max-width:600px) {
body:has(#v-review.show.practice-active)>header .nav-ident #nav-signup { display:none; }
body:has(#v-review.show.practice-active)>header .bar .nav-rooms { flex-wrap:wrap;gap:2px; }
body:has(#v-review.show.practice-active)>header .bar .nav-rooms button { flex:1 1 auto;padding-inline:4px;font-size:var(--type-meta);white-space:normal; }
#v-review #practice-rewards .practice-progress.is-compact { padding:8px 0;gap:6px 12px;grid-template-columns:minmax(0,1fr); }
#practice-rewards .is-compact .pp-level { grid-column:1;grid-row:1;font-size:var(--type-meta);gap:7px; }
#practice-rewards .is-compact .pp-track { grid-column:1;grid-row:2; }
#practice-rewards .is-compact .pp-streak { grid-column:1;grid-row:3; }
#practice-rewards .is-compact .pp-level-mark { width:28px;min-width:28px;height:34px; }
#v-review .daily-task { padding:16px; }
#v-review .daily-task h2 { margin:6px 0 12px; }
#v-review .daily-invitation { grid-template-columns:1fr;gap:12px;padding:20px; }
#v-review .daily-landscape { grid-row:auto;justify-self:end;width:100px;margin:0; }
#v-review .daily-copy>p { margin-bottom:12px; }
#v-review .daily-invitation .daily-route { margin:16px 0; }
#v-review .daily-task-head .smallcaps { font-size:var(--type-meta); }
#v-review #daily-form { margin:12px 0;gap:8px; }
#v-review .daily-tile-target { margin:12px 0 8px; }
#v-review .daily-tile-target,#v-review .daily-tiles { min-height:54px;gap:6px;padding:10px; }
#v-review .daily-tile-target button,#v-review .daily-tiles button { font-size:var(--t-1);padding:8px; }
}
@media(max-height:520px) and (min-width:600px) {
#v-review .daily-task { padding:16px 24px; }
#v-review .daily-task-head { min-height:24px; }
#v-review .daily-task h2 { margin:4px 0 10px; }
}
body.motion-low #v-review *,body.motion-low #v-review *::before,body.motion-low #v-review *::after { animation:none!important;transition:none!important; }
#v-review.practice-active #practice-rewards { position:static;background:var(--paper);box-shadow:0 8px 12px -12px var(--carbon); }
#v-review #daily-answer { flex:1;display:flex;flex-direction:column; }
#v-review #daily-answer>#daily-reveal { margin-top:auto; }
#v-review #daily-answer>.btn { flex:0 0 auto; }
#v-review.practice-active>.rev-head { display:none; }
#v-review.practice-lobby>.rev-head { display:none; }
#v-review #practice-workbench { width:100%;box-sizing:border-box; }
#v-review #rev-card { width:100%;min-width:0;box-sizing:border-box;padding:24px 28px;border-radius:var(--r-surface);border:1px solid var(--rule);border-left:3px solid var(--rank-brass);background:var(--paper);box-shadow:0 2px 0 color-mix(in srgb,var(--rule) 40%,transparent); }
#v-review #rev-card .cloze,#v-review #rev-card .ex-main { font:500 var(--type-prompt)/1.6 var(--serif);padding:12px 16px;margin:16px 0;border:0;border-left:2px solid var(--rank-brass);border-radius:0;box-shadow:none;background:var(--rank-wash);overflow-wrap:anywhere; }
#v-review #rev-card .conf-row { display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:100%; }
#v-review #rev-card .conf-row button,#v-review #rev-btns button { flex:0 1 auto;min-width:0;min-height:44px;padding:10px 14px;font:var(--fw-strong) var(--type-control)/1.4 var(--sans);letter-spacing:0;text-transform:none;white-space:normal; }
#v-review #rev-card input { width:100%;max-width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--rule);border-radius:var(--r-control);padding:12px;font:500 1.25rem/1.4 var(--serif); }
#v-review #rev-card input:focus { outline:2px solid var(--rank-brass);outline-offset:2px; }
#v-review #rev-btns { flex-wrap:wrap;gap:10px; }
#v-review #rev-btns .primary { flex:1 1 100%; }
#v-review #rev-btns .primary,#v-review #rev-btns .primary:hover { background:var(--signal);color:var(--on-signal);border-color:var(--signal-ink);box-shadow:var(--sh-press); }
#v-review #rev-card #rev-check { background:var(--signal);color:var(--on-signal);border-color:var(--signal-ink);box-shadow:var(--sh-press); }
#v-review #rev-card #rev-check:hover:not(:disabled) { background:color-mix(in srgb,var(--signal) 90%,var(--sheet));color:var(--on-signal);filter:none; }
#v-review #rev-card #rev-check:active:not(:disabled) { box-shadow:none; }
#v-review #rev-card .reveal-word { font-size:clamp(1.7rem,5vw,2.3rem);line-height:1.3;overflow-wrap:anywhere; }
#v-review #rev-card .opt { border-radius:var(--r-control);box-shadow:var(--sh-press-quiet);font:500 1rem/1.5 var(--serif);padding:12px 16px;min-height:48px; }
#v-review #practice-position { font:500 var(--type-meta)/1.4 var(--sans);margin:8px 0;color:var(--steel); }
@media(max-width:600px) { #v-review #rev-card { padding:16px; } #v-review #rev-card .conf-row button { padding:8px 10px; } }
@media(max-height:520px) { #v-review.practice-active #practice-rewards { position:static; } }
#v-review .practice-listening { display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:12px 0 18px; }
#v-review .practice-listening .daily-listen { min-height:44px;padding:9px 16px;font:600 var(--type-meta)/1.4 var(--sans); }
#v-review .practice-listening small { flex-basis:100%;font:400 var(--type-meta)/1.5 var(--sans);color:var(--steel); }
#focus-read,#focus-learn,#focus-practice,.desk-host[data-journey] { --journey-ink:var(--world-deep); }
.desk-paths>button {
position:relative;border-top:3px solid var(--journey-ink);padding-bottom:26px;
background:var(--galley);border-radius:var(--r-surface);
transition:border-color calc(var(--mo-ink) * var(--motion, 1)) linear;
}
.desk-paths>button::after { content:'→';position:absolute;right:12px;bottom:5px;color:var(--journey-ink);font-size:var(--t-2); }
.desk-paths>button:is(:hover,:focus-visible) {
border-color:var(--journey-ink);background:var(--galley);box-shadow:none;transform:none;
}
#v-home.desk-focused .desk-host[data-journey] {
border-top-color:var(--journey-ink);
background:var(--galley);
}
#v-review .daily-route li.is-current { color:var(--rank-brass); }
#v-review .daily-completion-summary {
border-top:3px solid var(--rank-brass);
background:linear-gradient(135deg,var(--rank-wash),var(--paper) 55%);
}
#v-review .daily-completion-summary .daily-more {
padding:14px 18px;border:1px solid var(--rule);border-left:3px solid var(--pine);
border-radius:var(--r-surface);background:color-mix(in srgb,var(--pine) 5%,var(--paper));
}
#v-review .daily-more>summary { min-height:32px;font:600 var(--type-body)/1.5 var(--sans); }
@media(max-width:600px) {
.desk-paths>button { padding-right:28px;padding-bottom:12px; }
.desk-paths>button::after { top:50%;bottom:auto;transform:translateY(-50%); }
}
html[data-motion="low"] .desk-paths>button { transition:none;transform:none!important; }
#v-review .daily-route li.is-current>span { outline:2px solid var(--rank-brass);outline-offset:3px; }
#v-review .daily-route li.is-done>span { background:none;border-color:transparent; }
#v-review .daily-route li.is-done>span>.ic { width:100%;height:100%; }
#v-course .course-continuation { border-top:1px solid var(--rule); }
#v-course .course-continuation-copy { background:linear-gradient(135deg,color-mix(in srgb,var(--pine) 5%,var(--paper)),var(--paper) 70%); }
body { --study-teal:var(--world-deep);--study-plum:var(--world-deep); }
[data-theme="dark"] body { --study-teal:color-mix(in srgb,var(--world-deep) 45%,var(--carbon));--study-plum:var(--study-teal); }
[data-theme="dark"] :is(#focus-read,#focus-learn,#focus-practice,.desk-host[data-journey]) { --journey-ink:var(--study-teal); }
#v-course .course-continuation { border-top-color:var(--rule); }
#v-course .course-volume-heading { background:color-mix(in srgb,var(--study-teal) 8%,var(--paper));color:var(--study-teal); }
#v-course .course-continuation-copy { background:var(--paper); }
#v-course .course-facing-page { background:color-mix(in srgb,var(--study-teal) 5%,var(--sheet)); }
#v-course .course-volume-progress progress::-webkit-progress-value { background:var(--study-teal); }
#v-course .course-volume-progress progress::-moz-progress-bar { background:var(--study-teal); }
#v-words>.study-orientation {
padding:14px 18px;margin:12px auto 18px;border-left-color:var(--study-plum);
background:color-mix(in srgb,var(--study-plum) 5%,var(--paper));box-shadow:none;
}
#v-words .study-orientation .study-suggestion { flex-direction:row;align-items:center;gap:12px; }
#v-words .study-orientation .study-suggestion strong { display:block;font:500 1.1rem/1.4 var(--serif);margin:4px 0 0; }
#v-words .study-orientation .smallcaps { color:var(--study-plum);font-size:.75rem; }
#v-words .study-orientation .study-suggestion>.btn {
width:auto;
flex-shrink:1;
}
#wordlist li:not(.wl-cap):focus-within { background:color-mix(in srgb,var(--study-plum) 6%,var(--paper)); }
#v-review .daily-completion-summary .daily-more { border-left-color:var(--study-teal);background:color-mix(in srgb,var(--study-teal) 5%,var(--paper)); }
@media(max-width:380px) {
#v-words .study-orientation .study-suggestion { flex-wrap:wrap; }
#v-words .study-orientation .study-suggestion>.btn { width:100%; }
}
html[data-study] #v-review #practice-rewards { display:none; }
#v-review .daily-flow-finish { grid-template-columns:minmax(0,1fr);gap:16px; }
html[data-study] #v-review.practice-finished>.rev-head { display:none; }
.study-dock[data-surface="mixed"] .study-dock__action>.btn.primary:focus-visible { outline:3px solid var(--rank-brass);outline-offset:3px; }
@media(min-width:480px) {
.study-dock[data-surface="mixed"] .study-dock__action>.btn.primary { padding-inline:18px;}
}
#v-review #rev-card .rev-kept { margin:10px 0 0;padding:8px 12px;border-left:2px solid var(--rank-brass);background:var(--rank-wash);font:500 var(--type-meta)/1.5 var(--sans);text-align:left; }
#v-review #rev-card [data-cut] { overflow:hidden; }
#v-review #rev-card [data-cut="bottom"] { -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 8px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 8px),transparent); }
#v-review #rev-card [data-cut="top"] { -webkit-mask-image:linear-gradient(to bottom,transparent,#000 8px);mask-image:linear-gradient(to bottom,transparent,#000 8px); }
#v-review #rev-card [data-cut="both"] { -webkit-mask-image:linear-gradient(to bottom,transparent,#000 8px,#000 calc(100% - 8px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 8px,#000 calc(100% - 8px),transparent); }
#v-review #rev-card [data-cut]+.lesson-audio-status:not(:empty) { margin-top:14px; }
#v-review #rev-card .cloze[data-cut]~.pat-en { display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; }
#v-review #rev-card .pat-why mark { background:color-mix(in srgb,var(--signal) 18%,transparent);color:inherit;border-radius:0;padding:0 3px; }
#v-review #rev-card .rev-line-all {
position:absolute;left:0;right:0;z-index:1;width:max-content;min-height:44px;margin:-32px auto 0;padding:19px 12px 0;
border:0;background:none;color:var(--steel);box-shadow:none;
font:600 var(--type-meta)/1.4 var(--sans);letter-spacing:0;text-transform:none;cursor:pointer;
}
#v-review #rev-card .rev-line-all::before {
content:'';position:absolute;z-index:-1;inset:19px 0 0;
border:1px solid var(--rule);border-radius:var(--r-dialog);background:var(--paper);
}
#v-review #rev-card .rev-line-all:is(:hover,:focus-visible) { color:var(--carbon); }
#v-review #rev-card .rev-line-all:is(:hover,:focus-visible)::before { border-color:var(--steel); }
#v-review #rev-card .rev-rest { display:contents; }
#v-review #rev-card .rev-more[data-bare]:not([data-fold]) { display:none; }
#v-review #rev-card .rev-more>summary { padding-block:4px; }
#v-review.practice-active #rev-card .rev-more { margin-top:0; }
#v-review #rev-card #late-bonus:empty { display:none; }
@media(max-width:600px) {
#v-review.practice-active #rev-card { padding:14px;gap:8px; }
#v-review.practice-active #rev-card .smallcaps { margin-bottom:2px; }
#v-review.practice-active #rev-card .produce-gloss { margin:2px 0 4px; }
#v-review.practice-active #rev-card .reveal-word { margin:2px 0 6px; }
#v-review.practice-active #rev-card :is(.cloze,.ex-main) { line-height:1.45;padding:10px 14px;margin:6px 0; }
#v-review.practice-active #rev-card :is(.ink-help-label,.practice-instruction) { margin-block:4px; }
#v-review.practice-active #rev-card .conf-row { margin-top:6px; }
#v-review.practice-active #rev-card .pat-opts { gap:8px;margin-top:6px; }
#v-review #rev-card .pat-opts.pat-ends { grid-template-columns:repeat(auto-fit,minmax(56px,1fr)); }
#v-review #rev-card .pat-ends .quiz-opt { padding-inline:6px;text-align:center;justify-content:center; }
#v-review.practice-active #practice-answer-seat { min-height:calc(36px + 2.7 * var(--type-body) + 1.5 * var(--type-meta)); }
}
@media(min-width:601px) and (max-height:900px) {
#v-review.practice-active #rev-card { padding:18px 24px;gap:8px; }
#v-review.practice-active #rev-card .smallcaps { margin-bottom:4px; }
#v-review.practice-active #rev-card .produce-gloss { margin:4px 0 6px; }
#v-review.practice-active #rev-card .reveal-word { margin:4px 0 8px; }
#v-review.practice-active #rev-card :is(.cloze,.ex-main) { line-height:1.45;padding:10px 16px;margin:8px 0; }
#v-review.practice-active #rev-card :is(.ink-help-label,.practice-instruction) { margin-block:4px; }
#v-review.practice-active #rev-card .conf-row { margin-top:8px; }
#v-review .daily-task { padding-block:18px; }
#v-review .daily-task h2 { margin:6px 0 10px; }
#v-review .daily-line { margin:8px 0 10px; }
#v-review .practice-listening { margin:8px 0 10px; }
#v-review .daily-source { margin:4px 0 8px; }
#v-review .daily-tile-target { margin:12px 0 8px; }
}
@media(max-height:700px) {
#v-review.practice-active #rev-card { min-height:0;padding-block:12px;gap:6px; }
#v-review.practice-active #rev-card .smallcaps { line-height:1.25;margin-bottom:0; }
#v-review.practice-active #rev-card .produce-gloss { margin:0 0 2px; }
#v-review.practice-active #rev-card .reveal-word { margin:0 0 2px; }
#v-review.practice-active #rev-card :is(.cloze,.ex-main) { font-size:var(--t-3);padding:8px 12px;margin:2px 0; }
#v-review.practice-active #rev-card .ink-help-label { font-size:var(--t-00);margin-block:0; }
#v-review.practice-active #rev-card .practice-instruction { font-size:var(--type-meta);line-height:1.4;margin-block:2px; }
#v-review.practice-active #rev-card .conf-row { margin-top:2px; }
#v-review.practice-active #rev-card .pat-opts { gap:6px;margin-top:2px; }
#v-review:not(.practice-lobby):not(.practice-finished) #rev-btns { min-height:52px;margin-top:6px;padding:4px 0; }
#v-review .daily-task { padding-block:14px; }
#v-review .daily-task-head { min-height:24px; }
#v-review .daily-task h2 { font-size:var(--t-3);margin:4px 0 8px; }
#v-review .daily-line { font-size:var(--t-3);padding:8px 14px;margin:6px 0 8px; }
#v-review .practice-listening { margin:6px 0 8px; }
#v-review .daily-meaning { margin:6px 0; }
#v-review .daily-source { margin:2px 0 6px; }
#v-review .daily-response-space { min-height:120px; }
#v-review .daily-choices { margin:8px 0 6px;gap:6px; }
#v-review .daily-choices button { min-height:44px;padding:10px 14px; }
}
.study-delight {
position:relative;display:flex;align-items:flex-end;gap:12px;min-width:0;
color:var(--run-ink,var(--rank-brass));isolation:isolate;
}
.sd-stage { display:block;flex:none; }
.sd-ledger { min-width:0;flex:1;display:flex;flex-direction:column;justify-content:flex-end; }
.sd-marks { position:relative;display:flex;align-items:flex-end;gap:5px;height:34px;box-sizing:border-box;padding-bottom:5px; }
.sd-rule {
--sd-rule:22%;position:absolute;left:0;right:0;top:30px;height:2px;border-radius:var(--r-bar,2px);
background:color-mix(in srgb,var(--run-ink,var(--rank-brass)) var(--sd-rule),var(--rule));
}
.study-delight[data-streak="warm"] .sd-rule { --sd-rule:40%; }
.study-delight[data-streak="flowing"] .sd-rule { --sd-rule:60%;height:3px; }
.study-delight[data-streak="glowing"] .sd-rule { --sd-rule:80%;height:3px; }
.study-delight:is([data-streak="flourishing"],[data-streak="radiant"]) .sd-rule { --sd-rule:100%;height:4px; }
.study-delight[data-streak="radiant"] .sd-rule::after { content:'';position:absolute;left:0;right:0;top:5px;height:1px;background:var(--run-ink,var(--rank-brass)); }
.sd-mark {
position:relative;display:block;flex:none;width:17px;height:23px;box-sizing:border-box;
background:color-mix(in srgb,var(--run-ink,var(--rank-brass)) 8%,var(--paper));
border:1px solid color-mix(in srgb,var(--run-ink,var(--rank-brass)) 24%,var(--rule));
border-radius:2px 4px 1px 1px;transform-origin:50% 100%;
}
.sd-mark:nth-child(2),.sd-mark:nth-child(4) { height:25px; }
.sd-mark:nth-child(3) { height:28px; }
.sd-mark.is-filled { background:var(--run-fill,var(--run-ink,var(--rank-brass)));border-color:var(--run-ink,var(--rank-brass)); }
.sd-mark.is-filled:is([data-streak="glowing"],[data-streak="flourishing"],[data-streak="radiant"]) { box-shadow:0 0 0 1px var(--run-glow,transparent),0 0 10px 1px var(--run-glow,transparent); }
.sd-mark.is-filled:is([data-streak="flowing"],[data-streak="glowing"])::before { content:'';position:absolute;inset:3px 2px auto;height:2px;border-radius:1px;background:var(--paper);opacity:.8; }
.sd-mark.is-filled:is([data-streak="flourishing"],[data-streak="radiant"])::after { content:'';position:absolute;left:3px;right:3px;bottom:5px;height:1px;background:var(--paper);opacity:.7; }
.sd-mark.is-filled[data-streak="radiant"]::after { box-shadow:0 -4px 0 var(--paper); }
.sd-ghost { position:absolute;margin:0;opacity:0;pointer-events:none; }
.sd-label { min-height:18px;font:600 var(--type-meta,.875rem)/18px var(--sans);font-variant-numeric:tabular-nums; }
.sd-round { color:var(--steel);font:500 var(--type-meta,.875rem)/18px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap; }
.sd-achievement { position:relative;display:block;flex:none;width:30px;min-width:30px;height:34px;margin-inline-start:-30px;perspective:260px; }
.sd-book { position:absolute;left:calc(50% - 26px);top:calc(50% - 34px);display:block;width:52px;height:68px;scale:.5;transform-style:preserve-3d;transform:rotateX(8deg) rotateY(-24deg) rotateZ(-3deg); }
.sd-book-cover,.sd-book-back { position:absolute;inset:0;border-radius:2px 5px 5px 2px;background:var(--run-ink,var(--rank-brass));box-shadow:inset 3px 0 0 #ffffff24,inset 0 0 0 1px #00000020; }
.sd-book-back { transform:translateZ(-6px); }
.sd-book-cover { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;transform:translateZ(6px);transform-origin:0 50%;color:var(--paper); }
.sd-book-cover::after { content:'';position:absolute;inset:5px 5px 5px 8px;border:1px solid currentColor;border-radius:1px 3px 3px 1px;opacity:.42; }
.sd-book-pages { position:absolute;inset:3px 1px 3px auto;width:12px;background:repeating-linear-gradient(90deg,var(--paper) 0 2px,var(--rule) 2px 3px);transform:rotateY(90deg) translateX(6px);transform-origin:100% 50%; }
.sd-book-spine { position:absolute;inset:0 auto 0 -6px;width:12px;transform:rotateY(-90deg);background:color-mix(in srgb,var(--run-ink,var(--rank-brass)) 85%,#000);border-radius:2px; }
.sd-book-emblem { display:grid;place-items:center;width:25px;height:25px;border:1px solid currentColor;border-radius:50%;font:600 1rem/1 var(--sans); }
.sd-book-rule { width:20px;height:2px;background:currentColor;opacity:.65;box-shadow:0 4px 0 currentColor; }
.study-delight[data-finished="true"][data-bound] .sd-marks { display:none; }
.study-delight[data-finished="true"] .sd-label:empty { display:none; }
:is(.study-delight-slot,.lesson-delight) .sd-achievement { margin-inline-start:0; }
@media(min-width:420px) {
:is(.study-delight-slot,.lesson-delight) .sd-achievement { width:42px;height:52px; }
:is(.study-delight-slot,.lesson-delight) .sd-book { scale:.75; }
}
@media(max-width:599.98px) {
.sd-mark { width:15px; }
.sd-marks { gap:4px; }
}
.pp-session-run { color:var(--run-ink,var(--rank-brass)); }
.pp-receipt[data-streak]:not(.is-miss) { border-left-color:var(--run-ink,var(--rank-brass)); }
.pp-receipt[data-streak]:not(.is-miss) .pp-receipt-copy>span { color:var(--run-ink,var(--rank-brass)); }
.study-delight-slot { min-width:0;min-height:80px;contain:layout style; }
.study-delight-slot[hidden] { display:none!important; }
.study-delight-slot>.study-delight { gap:18px;min-height:80px;padding:0 6px;border-bottom:1px solid var(--rule); }
.study-delight-slot>.study-delight:not([data-streak="starting"]) { border-bottom-color:color-mix(in srgb,var(--run-ink,var(--rank-brass)) 35%,var(--rule)); }
.study-delight-slot>.study-delight:is([data-state="run"],[data-state="milestone"],[data-state="complete"]) { border-bottom-color:color-mix(in srgb,var(--run-ink,var(--rank-brass)) 50%,var(--rule)); }
.study-delight-slot>.study-delight[data-state="complete"] .sd-round { font:500 1.4rem/1 var(--serif);color:var(--run-ink,var(--rank-brass)); }
.sd-stage~:is(.sd-ledger,.sd-round) { padding-bottom:9px; }
#v-review .daily-flow-finish .daily-flow-copy { min-width:0; }
#v-review .daily-flow-finish .daily-flow-copy h2 { margin:4px 0 12px; }
#v-review .daily-flow-finish .daily-finish-actions { grid-column:1/-1; }
#v-review .daily-finish-actions .primary { flex:1 1 100%; }
@media(max-width:420px) {
.study-delight-slot>.study-delight { gap:12px;padding-inline:0; }
.study-delight-slot>.study-delight[data-state="complete"] .sd-round { font-size:var(--t-1); }
}
.gx-stage.has-study-delight .lesson-delight {
display:grid; grid-template-columns:minmax(0,1fr); align-items:center; gap:14px;
min-height:88px; min-width:0; width:100%; box-sizing:border-box;
padding:8px 14px 8px 8px; margin:0;
border-block:1px solid var(--rule); background:var(--paper);
border-radius:0; position:relative; isolation:isolate;
}
.gx-stage.has-study-delight .lesson-delight-actor {
display:none; position:relative; width:88px; height:88px;
border-radius:50%; background:color-mix(in srgb,var(--world-deep) 8%,var(--paper));
overflow:visible; pointer-events:none;
}
.gx-stage.has-study-delight .lesson-delight-actor .gx-mate {
display:grid!important; place-items:center; position:absolute!important;
inset:0!important; width:88px!important; height:88px!important;
min-width:0; margin:0!important; padding:0!important; border:0!important;
background:transparent!important; box-shadow:none!important; transform:none!important;
overflow:visible; z-index:1; pointer-events:none;
}
.gx-stage.has-study-delight .lesson-delight-actor .gx-mate > svg {
width:100%!important; height:100%!important; max-width:none; overflow:visible;
filter:none;
}
.gx-stage.has-study-delight .lesson-delight-actor .gx-mate::before,
.gx-stage.has-study-delight .lesson-delight-actor .gx-mate::after,
.gx-stage.has-study-delight .lesson-delight-actor :is(.gx-mate-line,.gx-slip) { display:none!important; }
.gx-stage.has-study-delight .lesson-delight-ledger { min-width:0; }
.gx-stage.has-study-delight .lesson-delight[hidden] { display:none!important; }
.gx-stage.has-study-delight .lesson-guide-still { display:none; position:absolute; inset:2px; }
.gx-stage.has-study-delight .lesson-guide-still > svg { width:100%; height:100%; }
.gx-stage.has-study-delight .lesson-delight:has(.lesson-delight-ledger[hidden]) { display:none; }
.gx-stage.has-study-delight .lesson-delight .study-delight {
min-height:64px; padding:8px 0; background:transparent; border:0; box-shadow:none;
grid-template-columns:minmax(0,1fr) auto;
}
.gx-stage.has-study-delight .lesson-delight .sd-ledger { min-width:0; }
.gx-stage.has-study-delight .lesson-delight .sd-marks { max-width:150px; }
.gx-stage.has-study-delight .lesson-delight .sd-label { min-height:1.4em; }
.gx-stage.has-study-delight .lesson-delight .sd-round { font-size:var(--type-meta,.875rem); white-space:nowrap; }
.gx-stage.has-study-delight #gx-after { display:grid; align-items:start; }
.gx-stage.has-study-delight #gx-after > .lesson-delight { order:8; }
.gx-stage.has-study-delight #gx-after > #gx-next { order:9; }
.gx-stage.has-study-delight .btnrow > .lesson-delight { flex-basis:100%; grid-column:1/-1; }
.gx-stage.has-study-delight .wk-footer { display:grid; gap:12px; }
.gx-stage.has-study-delight :is(#gx-next,#wk-next) {
width:100%; margin:0;
}
.gx-stage.has-study-delight .gx-eye { min-height:44px; }
.gx-stage.has-study-delight .gx-eye span { font-size:var(--type-body,1rem); }
.gx-stage.has-study-delight .gx-eye-cue { font:500 var(--type-meta,.875rem)/1.5 var(--sans);text-transform:none;letter-spacing:0; }
.gx-stage.has-study-delight .gx-top .gx-runn { display:none; }
.gx-stage.has-study-delight .lesson-compass {
grid-template-columns:62px minmax(0,1fr); gap:14px; padding:12px 16px;
border-radius:var(--r-surface); background:var(--paper); border-bottom-width:1px;
}
.gx-stage.has-study-delight .lesson-window.lesson-emblem { min-height:56px; height:56px; max-height:56px; }
.gx-stage.has-study-delight .lesson-emblem > .brand-art { width:52px; height:52px; opacity:1; }
.gx-stage.has-study-delight .lesson-compass h2 { font:400 clamp(1.15rem,2vw,1.5rem)/1.2 var(--serif); }
.gx-stage.has-study-delight .lesson-phase { font-size:var(--type-meta,.875rem); }
.gx-stage.has-study-delight .lesson-progress { gap:5px; font-size:var(--type-meta,.875rem); }
.gx-stage.has-study-delight .lesson-compass-copy { gap:5px; }
.gx-stage.has-study-delight .ink-challenge {
display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
gap:0 14px; padding:6px 12px; border:1px solid var(--rule);
border-left:3px solid var(--world-deep); border-radius:var(--r-control);
background:var(--paper); font-size:var(--type-meta,.875rem);
}
.gx-stage.has-study-delight .ink-challenge-heading { grid-column:1; gap:12px; font-size:var(--type-meta,.875rem); }
.gx-stage.has-study-delight .ink-drops { gap:3px; }
.gx-stage.has-study-delight .ink-drops svg { width:13px; height:19px; }
.gx-stage.has-study-delight .ink-rules { grid-column:2; margin:0; font-size:var(--type-meta,.875rem); }
.gx-stage.has-study-delight .ink-rules summary { min-height:32px; display:flex; align-items:center; }
.gx-stage.has-study-delight .ink-rules[open] { grid-column:1/-1; }
.gx-stage.has-study-delight .ink-rules[open] summary { margin-top:4px; }
.gx-stage.has-study-delight .ink-message,
.gx-stage.has-study-delight .challenge-earned {
position:absolute; width:1px; height:1px; padding:0; margin:-1px!important;
overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.gx-stage.has-study-delight .ink-tally,
.gx-stage.has-study-delight .wk-encouragement,
.gx-stage.has-study-delight .wk-feedback-symbol { display:none; }
.gx-stage.has-study-delight .wk-feedback-heading { margin-bottom:12px; }
.gx-stage.has-study-delight .gx-verdict:is(.gx-ok,.gx-no,.gx-supported) {
font:600 var(--type-body,1rem)/1.5 var(--sans);text-transform:none;letter-spacing:0;
padding:12px 14px;min-height:0;margin:0;border:0;border-left:2px solid var(--rank-brass);
border-radius:var(--r-control);background:color-mix(in srgb,var(--rank-brass) 8%,var(--paper));
color:var(--carbon);box-shadow:none;
}
.gx-stage.has-study-delight .gx-verdict .gx-v-say {
font:500 var(--type-prompt,1.375rem)/1.4 var(--serif);text-transform:none;letter-spacing:0;color:var(--carbon);
}
.gx-stage.has-study-delight .gx-verdict .gx-v-gloss {
font:400 var(--type-body,1rem)/1.5 var(--sans);text-transform:none;letter-spacing:0;color:var(--steel);
}
.gx-stage.has-study-delight .wk-sheet[data-phase="question"] .wk-journey { display:none; }
.gx-stage.has-study-delight .wk-sheet[data-phase="question"] .wk-page-slots { display:none; }
.gx-stage.has-study-delight .wk-sheet .wk-body { border-radius:var(--r-surface); }
.gx-stage.has-study-delight .lesson-delight-actor::after {
content:""; position:absolute; inset:3px; border:2px solid var(--rank-brass);
border-radius:50%; opacity:0; pointer-events:none;
}
.gx-stage.has-study-delight .lesson-delight:has(.study-delight:not([data-streak="starting"])) .lesson-delight-actor {
background:color-mix(in srgb,var(--rank-brass) 12%,var(--paper));
}
html[data-motion="full"] .lesson-delight:has(.study-delight:is([data-state="run"],[data-state="milestone"])) .lesson-delight-actor::after { animation:lesson-impression 640ms cubic-bezier(.18,.7,.25,1) both; }
@keyframes lesson-impression {
0% { opacity:.7; transform:scale(.72); }
75% { opacity:.28; transform:scale(1.18); }
100% { opacity:0; transform:scale(1.3); }
}
@media(max-width:560px) {
.gx-stage.has-study-delight .lesson-compass { grid-template-columns:44px minmax(0,1fr); padding:10px 12px; gap:10px; }
.gx-stage.has-study-delight .lesson-window.lesson-emblem { min-height:42px; height:42px; max-height:42px; }
.gx-stage.has-study-delight .lesson-emblem > .brand-art { width:40px; height:40px; }
.gx-stage.has-study-delight .lesson-delight { min-height:76px; gap:10px; padding:5px 8px 5px 0; }
.gx-stage.has-study-delight .lesson-delight .study-delight { min-height:58px; gap:8px; }
.gx-stage.has-study-delight .ink-challenge { column-gap:8px; }
.gx-stage.has-study-delight .ink-challenge-heading { font-size:var(--type-meta,.875rem); gap:6px; }
}
.lesson-delight[data-calm="true"] .lesson-delight-actor::after { animation:none!important; }
.gx-stage.wk-stage.has-study-delight .wk-sheet .lesson-compass {
grid-template-columns:64px minmax(0,1fr); gap:18px; align-items:center;
padding:0 0 6px; margin:4px 0 12px; border:0; border-radius:0; background:transparent; box-shadow:none;
}
.gx-stage.wk-stage.has-study-delight .wk-sheet .lesson-window.lesson-emblem {
width:64px; height:64px; min-height:64px; max-height:64px;
border:0; border-radius:50%; background:transparent; overflow:visible;
}
.gx-stage.wk-stage.has-study-delight .wk-sheet .lesson-window.lesson-emblem > .brand-art { display:block; width:64px; height:64px; }
.gx-stage.wk-stage.has-study-delight .wk-sheet .lesson-progress progress { width:100%; max-width:none; }
.wk-done { display:grid; grid-template-columns:104px minmax(0,1fr); gap:28px; align-items:center; padding:4px 0 24px; border-bottom:1px solid var(--rule); }
.wk-done-copy { min-width:0; display:grid; gap:8px; justify-items:start; }
.wk-done-kicker { font:600 var(--type-meta,.875rem)/1.4 var(--sans); color:#7d5a1f; letter-spacing:.01em; }
.wk-done h3 { margin:0; font:400 clamp(1.5rem,2.6vw,2rem)/1.2 var(--serif); color:var(--carbon); overflow-wrap:anywhere; }
.wk-done p { margin:0; max-width:46ch; }
.wk-done .wk-review-date {
display:inline-flex; align-items:center; gap:8px; margin-top:6px; padding:6px 14px 6px 10px;
border:1px solid var(--rule); border-radius:999px; background:var(--paper);
font:600 var(--type-meta,.875rem)/1.5 var(--sans); color:var(--carbon);
}
.wk-done .wk-review-date svg { flex:none; color:#7d5a1f; }
.gx-stage.wk-stage .wk-sheet[data-phase="complete"] .wk-body > .passport-collection { border-top:0; padding-top:16px; }
.gx-stage.wk-stage .wk-sheet[data-phase="complete"] .wk-transfer { margin-top:20px; padding-top:20px; border-top:1px solid var(--rule); }
@media (max-width:560px) {
.gx-stage.wk-stage.has-study-delight .wk-sheet .lesson-compass { grid-template-columns:44px minmax(0,1fr); gap:12px; }
.gx-stage.wk-stage.has-study-delight .wk-sheet .lesson-window.lesson-emblem,
.gx-stage.wk-stage.has-study-delight .wk-sheet .lesson-window.lesson-emblem > .brand-art { width:44px; height:44px; min-height:44px; max-height:44px; }
.wk-done { grid-template-columns:64px minmax(0,1fr); gap:14px; align-items:start; }
}
.chapter-label > span::first-letter { text-transform:uppercase; }
.desk-paths span { overflow-wrap:break-word; hyphens:auto; }
@media (max-width:560px) {
.desk-paths { grid-template-columns:minmax(0,1fr); }
.desk-paths>button { gap:2px; min-height:58px; }
.desk-paths span { overflow-wrap:normal; }
}
@media (pointer:coarse), (max-width:700px) {
:is(.linklike, .pxx-link, .lnk, .theme-dots > button) { position:relative; touch-action:manipulation; }
:is(.linklike, .pxx-link, .lnk)::after { content:''; position:absolute; inset:-13px -8px; }
.theme-dots { gap:14px; }
.theme-dots > button::after { content:''; position:absolute; inset:-11px -7px; }
#estate a { padding-block:9px; }
#static-legal a { padding-block:10px; }
}
.living-content.is-interactive { width:min(100%,700px);margin-inline:auto; }
.living-content.is-interactive .living-notice { display:block; }
.living-content.is-interactive .living-notice h2 { font-size:clamp(1.65rem,4vw,2.5rem);margin:10px 0; }
.living-content.is-interactive .living-notice p { font-size:var(--type-body,1rem);line-height:1.6;margin:10px 0; }
.living-content.is-interactive>.living-example { margin:16px 0;padding:14px 18px;font-size:var(--t-3);line-height:1.5; }
.living-content.is-interactive>h3 { font-size:var(--t-3);line-height:1.45;margin:18px 0 12px; }
.living-response-space { display:flex;flex-direction:column;gap:12px;min-height:280px;box-sizing:border-box;background:transparent;border:0;border-radius:0;padding:4px 0;overflow-anchor:none; }
html[data-study] .living-response-space { min-height:0; }
.living-response-space>[hidden],.living-response-space [hidden] { display:none!important; }
.living-response-space .living-options { gap:9px;flex:1; }
.living-response-space .living-options button { min-height:48px;padding:11px 16px;font-size:var(--type-control,1rem);line-height:1.5;box-shadow:var(--sh-press-quiet);border-radius:var(--r-control); }
.living-response-space .living-options button:active { transform:translateY(1px); }
.living-response-space .living-feedback { display:flex;flex:1;flex-direction:column;gap:9px;margin:0;padding:8px 0 0;border:0;border-radius:0;background:transparent; }
.living-response-space .living-feedback h3 { margin:0;font-size:var(--t-3);line-height:1.4;color:var(--carbon); }
.living-response-space .living-feedback.is-right h3 { color:var(--malachite-ink); }
.living-response-space .living-feedback p { margin:0;font-size:var(--type-body,1rem);line-height:1.6; }
.living-response-space .living-feedback .living-answer { font:500 1.35rem/1.4 var(--serif);color:var(--carbon); }
.living-response-space .living-feedback .btn { width:100%;flex:0 0 auto;margin:12px 0 0;margin-top:auto; }
.living-content.is-interactive .living-recall { padding:24px;border-radius:var(--r-surface); }
.living-recall .living-response-space { padding:0;border:0; }
.living-recall h2 { margin:10px 0;font-size:var(--t-5); }
.living-recall .living-recall-line { margin:8px 0;padding:10px 0;font-size:1.4rem;line-height:1.5; }
.living-recall .living-support { margin-top:4px;gap:14px; }
.living-recall #living-clue-text:empty { display:none; }
.living-recall #living-recall-input { min-height:50px;font-size:var(--t-3); }
.living-stage:has(.living-content.is-interactive) .living-top { padding-bottom:14px; }
.living-stage:has(.living-content.is-interactive) .living-steps { padding-bottom:12px;margin-bottom:18px; }
.living-stage:has(.living-finish) .living-steps { margin-bottom:10px; }
.living-stage:has(.living-finish) .living-footer { width:min(100%,560px);margin-inline:auto;justify-content:center; }
.living-stage:has(.living-finish) .living-footer>.primary { flex:1; }
[data-theme="dark"] .living-response-space .living-feedback .living-answer,
[data-theme="dark"] .living-recall-line span { color:#becbed; }
@media(max-width:600px) {
.living-response-space { padding:12px 14px; }
.living-content.is-interactive .living-recall { padding:18px 14px; }
.living-content.is-interactive .living-notice h2 { font-size:var(--t-5); }
.living-stage:has(.living-content.is-interactive) { padding-inline:14px; }
.living-stage:has(.living-content.is-interactive) .living-steps { margin-bottom:14px; }
.living-finish { padding:8px 0 20px; }
.theatre-footer { align-items:stretch; }
.theatre-footer .primary { flex:1; }
}
@media(max-width:420px) {
.living-stage:has(.living-finish) .living-footer>.btn { flex:1 0 100%;width:100%;}
}
html[data-motion="low"] .living-response-space .living-options button:active { transform:none; }
#reader-journey[hidden],.reader-word-help[hidden] { display:none; }
.reader-journey { margin:8px 0 16px;color:var(--carbon);font:500 .9rem/1.4 var(--sans); }
.reader-review { display:inline-flex;max-width:100%;align-items:center;border:1px solid var(--rule);border-radius:24px;background:var(--paper); }
.reader-review-go,.reader-review-dismiss,.reader-word-practice { border:0;background:none;color:inherit;font:600 .875rem/1.4 var(--sans);min-height:44px;cursor:pointer; }
.reader-review-go { display:flex;align-items:center;gap:10px;padding:8px 14px;text-align:start;min-width:0; }
.reader-review-go>span { flex-shrink:0;color:var(--signal-ink); }
.reader-review-dismiss { align-self:stretch;min-width:44px;padding:8px;border-inline-start:1px solid var(--rule);border-radius:0 24px 24px 0;font-size:var(--t-3); }
.reader-review-go:hover,.reader-word-practice:hover { color:var(--signal-ink);text-decoration:underline;text-underline-offset:3px; }
.reader-word-help { margin-top:4px;color:var(--carbon); }
.reader-word-practice { padding:6px 0;text-align:start; }
.reader-ready-count { display:inline-block;width:8px;height:8px;margin-left:5px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 1px var(--signal-ink);vertical-align:middle; }
.reader-journey button:focus-visible,.reader-word-practice:focus-visible,.reader-tools summary:focus-visible { outline:3px solid var(--signal-ink);outline-offset:3px; }
#reading-route { gap:4px 18px;padding-bottom:8px;margin-bottom:8px; }
#reading-route .btn { padding:6px 0;border:0;background:none;box-shadow:none;font:600 .85rem/1.4 var(--sans);text-transform:none;letter-spacing:0;text-decoration:underline;text-underline-offset:4px; }
#v-read.first-reading #scene-head .vy { display:none; }
#v-read .arrival-plate.arrival-compact { display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;margin:0 auto 12px;padding:0 0 10px;border-top:0;border-bottom:1px solid var(--rule);background:none; }
.arrival-compact .plate-kicker { flex-basis:100%;margin:0 0 4px;font:400 .8rem/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--carbon); }
.arrival-compact .plate-beginner { order:1;margin:0;padding:0;border:0; }
.arrival-compact .plate-beginner .btn { min-height:40px;padding:7px 14px;border:1.5px solid var(--signal-ink);border-radius:var(--r-pill,999px);background:none;box-shadow:none;color:var(--signal-ink);font:650 .9rem/1.3 var(--sans);text-decoration:none; }
.arrival-compact .plate-beginner .btn::after { content:' →'; }
.arrival-compact .plate-beginner .btn:hover { background:color-mix(in srgb, var(--signal-ink) 10%, transparent); }
.arrival-compact .plate-promise,.arrival-compact>.plate-note { flex-basis:100%;order:3; }
.reader-tools { order:2;font:400 .85rem/1.5 var(--sans);color:var(--carbon); }
.reader-tools>summary { min-height:44px;display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none; }
.reader-tools>summary::-webkit-details-marker { display:none; }
.reader-tools-icon {display:inline-grid;place-items:center;width:19px;height:19px;border:1px solid currentColor;border-radius:50%;font-size:.75rem;font-weight:650; }
.reader-tools[open] { flex-basis:100%; }
.reader-tools-panel { padding:4px 0 8px;max-width:30rem; }
.reader-tools dl { margin:0;display:grid;gap:9px; }
.reader-tools dl>div { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px; }
.reader-tools dt { font-weight:var(--fw-strong); }
.reader-tools dd { margin:0; }
.reader-tools-panel a { display:inline-flex;align-items:center;min-height:44px;margin-top:4px;color:inherit;text-underline-offset:3px; }
.reader-chapter-tools { display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;margin:0 auto 12px;padding-bottom:10px;border-bottom:1px solid var(--rule); }
.reader-chapter-course { order:2;display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;max-width:100%;font:400 .85rem/1.5 var(--sans);color:var(--carbon); }
.reader-chapter-course button { min-height:44px;max-width:100%;padding:6px 0;border:0;background:none;color:inherit;font:600 .85rem/1.4 var(--sans);white-space:normal;text-align:start;cursor:pointer;text-decoration:underline;text-underline-offset:4px; }
.reader-chapter-course button:focus-visible { outline:3px solid var(--signal-ink);outline-offset:3px; }
.reader-course-access { color:var(--steel);font-size:var(--t-00); }
#foot-lesson { margin:18px 0 6px; }
#v-read #gesture-invite { margin:0 0 8px;font:500 .8rem/1.4 var(--sans);font-style:normal;letter-spacing:0; }
@media(max-width:600px) {
.reader-ready-count { margin-left:4px; }
#v-read .arrival-plate.arrival-compact { gap:0 14px; }
}
.lesson-theatre { width:min(100%,800px);margin-inline:auto;border-color:var(--rule);border-radius:var(--r-dialog);background:var(--paper); }
.lesson-theatre .theatre-heading { position:absolute;z-index:2;top:10px;right:12px;padding:5px 10px;border:1px solid #ffffff80;border-radius:20px;background:#fff8e7e6;color:#35504a;font:600 .75rem/1.4 var(--sans); }
.lesson-theatre .theatre-heading>span:first-child { display:none; }
.lesson-theatre .theatre-set { grid-area:auto;min-height:0;aspect-ratio:18/7;background:#eadbc3; }
.lesson-scene-art { display:block;width:100%;height:100%; }
.lesson-person { transition:opacity .18s ease; }
.lesson-person.is-speaking .lesson-person-eye { transform-box:fill-box;transform-origin:center;animation:lesson-blink .22s ease .5s; }
@keyframes lesson-blink { 45%,55% { transform:scaleY(.15); } }
.lesson-person:not(.is-speaking) { opacity:.82; }
.lesson-theatre:has([data-audio-state="playing"]) .lesson-person.is-speaking .lesson-person-mouth { transform-box:fill-box;transform-origin:center;animation:lesson-speaking .24s ease-in-out 4 alternate; }
@keyframes lesson-speaking { from { transform:scaleY(.6); } to { transform:scaleY(1.65); } }
.lesson-theatre:has([data-audio-state="playing"]) .theatre-speaker::after { content:'';width:18px;height:8px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 5px);clip-path:polygon(0 35%,20% 35%,20% 10%,45% 10%,45% 0,70% 0,70% 30%,100% 30%,100% 70%,70% 70%,70% 100%,45% 100%,45% 90%,20% 90%,20% 65%,0 65%); }
.lesson-theatre .theatre-dialogue { grid-area:auto;margin:0;padding:20px 24px 12px;border:0;border-radius:0;box-shadow:none;background:var(--paper);color:var(--carbon); }
.lesson-theatre .theatre-speaker { display:flex;align-items:center;gap:8px;font:600 .75rem/1.4 var(--sans);color:var(--carbon);letter-spacing:.08em; }
.lesson-theatre .theatre-speaker::before { content:'';width:8px;height:8px;border-radius:50%;background:#426e70; }
.lesson-theatre[data-speaker="b"] .theatre-speaker::before { background:#c37a55; }
.lesson-theatre .theatre-dialogue .theatre-line { margin:8px 0 10px;font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.5;overflow-wrap:normal; }
.lesson-theatre .theatre-line-actions { gap:8px 20px; }
.lesson-theatre .theatre-audio { display:inline-flex;align-items:center;gap:8px;width:auto;height:auto;min-height:44px;padding:6px 12px;border-radius:var(--r-control);background:var(--paper);border:1px solid var(--rule);color:var(--carbon);font:600 .85rem/1.4 var(--sans); }
.lesson-theatre .theatre-audio svg { width:18px;height:18px;flex-shrink:0; }
.lesson-theatre .theatre-translation,.lesson-theatre .theatre-skip,.lesson-theatre .theatre-back { font:600 .85rem/1.45 var(--sans);color:var(--carbon); }
.lesson-theatre .theatre-meaning { margin:10px 0 0;padding:10px 12px;border-inline-start:2px solid var(--rule);font:.95rem/1.5 var(--sans); }
.lesson-theatre .theatre-footer { flex-wrap:nowrap;padding:12px 24px 18px;gap:14px; }
.theatre-back { min-height:44px;background:none;border:0;padding:6px 0;box-shadow:none;cursor:pointer; }
.theatre-back:disabled { opacity:.35;cursor:default; }
.lesson-theatre .theatre-footer .primary { margin-left:auto;}
.theatre-extras { margin:0 24px 12px;display:flex;align-items:flex-start;flex-wrap:wrap;gap:0 20px;border-top:1px solid var(--rule); }
.lesson-theatre .theatre-transcript { flex:1 1 230px;min-width:0;margin:0;border:0;font-size:var(--t-0); }
.lesson-theatre .theatre-transcript summary { font-size:var(--t-0);padding:12px 0; }
.lesson-theatre .theatre-transcript small { font-size:var(--t-0); }
.lesson-theatre .theatre-skip { padding:10px 0;min-height:44px; }
.lesson-audio-word,.case-lab button.lesson-audio-word { display:inline;min-height:0;background:transparent;color:inherit;font:inherit;line-height:inherit;letter-spacing:inherit;text-transform:none;padding:2px 0;margin:0;border:0;border-bottom:1px dotted currentColor;border-radius:2px;box-shadow:none;cursor:pointer; }
.case-lab button.lesson-audio-word:hover,.case-lab button.lesson-audio-word[data-audio-state="playing"] { background:color-mix(in srgb,var(--signal) 28%,transparent);border-bottom-style:solid; }
@media(pointer:coarse) { .case-lab button.lesson-audio-word { min-height:44px; } }
.lesson-audio-keep { white-space:nowrap; }
.lesson-audio-word:hover,.lesson-audio-word[data-audio-state="playing"] { background:color-mix(in srgb,var(--signal) 28%,transparent);border-bottom-style:solid; }
.lesson-audio-word:focus-visible { outline:2px solid currentColor;outline-offset:3px;background:color-mix(in srgb,var(--signal) 25%,transparent); }
.lesson-theatre .lesson-audio-hint { font:.75rem/1.45 var(--sans);margin:8px 0 0;color:var(--muted,var(--carbon)); }
.lesson-audio-hint[hidden] { display:none; }
.living-welcome-hero { display:block;padding-bottom:14px; }
.living-welcome-hero h1 { font-size:clamp(1.65rem,3vw,2.4rem);margin:5px 0 8px; }
.living-welcome-hero p { margin:0;font-size:var(--t-0);line-height:1.5;max-width:none; }
.living-welcome-hero .smallcaps { font-size:.75rem; }
.living-stage .living-top { gap:12px;flex-wrap:nowrap;padding-bottom:12px; }
.living-stage .living-top>span { font-size:var(--t-00); }
.living-stage .living-top .btn { max-width:55%;flex-shrink:1; min-height: var(--control-h-tool); }
.living-stage .living-steps { margin-bottom:16px;padding-bottom:12px;gap:8px; }
.living-stage .living-steps>span { font-size:.75rem; }
.living-stage .living-content:has(#living-conversation),.living-stage .living-content:has(#mission-dialogue) { max-width:800px;margin-inline:auto; }
.living-stage[data-step="0"] .living-footer:empty { display:none; }
.theatre-dialogue :is(.theatre-audio,.theatre-translation):focus-visible { outline-color:var(--signal-ink); }
@media(max-width:600px) {
.gx-stage.living-stage { padding:12px 14px 28px; }
.living-stage .living-top { gap:8px; }
.living-stage .living-top>span { font-size:.75rem; }
.living-stage .living-top b { margin-left:4px;padding:2px 5px; }
.living-stage .living-steps { display:flex;position:static;gap:6px;margin-bottom:14px;padding-bottom:10px; }
.living-stage .living-steps>span { display:flex;gap:5px;flex:0 0 auto; }
.living-stage .living-steps>span.is-current { flex:1;min-width:0; }
.living-stage .living-steps>span>i { width:24px;min-width:24px;height:24px;font-size:.7rem; }
.living-stage .living-steps>span.is-current>.living-step-label { text-align:left;min-width:0;overflow-wrap:anywhere; }
.living-welcome-hero { padding-bottom:12px; }
.living-welcome-hero p { font-size:var(--t-0); }
.lesson-theatre .theatre-dialogue { padding:14px 16px 8px; }
.lesson-theatre .theatre-dialogue .theatre-line { font-size:var(--t-4); }
.lesson-theatre .theatre-heading { top:7px;right:8px;font-size:.7rem; }
.lesson-theatre .theatre-footer { padding:10px 16px 14px;gap:10px; }
.lesson-theatre .theatre-footer .primary { flex:0 1 auto;padding:9px 12px;}
.lesson-theatre .theatre-audio { font-size:var(--t-00);padding:6px 9px; }
.theatre-extras { margin:0 16px 8px;gap:0 10px; }
.lesson-theatre .theatre-transcript { flex-basis:100%; }
.lesson-theatre .theatre-transcript p { grid-template-columns:56px minmax(0,1fr);gap:4px 8px; }
.lesson-theatre .theatre-transcript p>span { font-size:var(--t-1); }
.lesson-theatre .theatre-skip { font-size:var(--t-00);padding:5px 0; }
}
html[data-motion="low"] .lesson-person { transition:none; }
html[data-motion="low"] :is(.lesson-person-eye,.lesson-person-mouth) { animation:none!important; }
#g-discovery-audio-status:empty { display:none; }
.grammar-discovery>.lesson-audio-hint { font:.8rem/1.5 var(--sans);color:var(--muted,var(--carbon));margin:8px 0; }
.lesson-audio-control { display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:8px 0 12px; }
.lesson-audio-control .gx-say { display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px 10px;border:1px solid var(--rule);border-radius:var(--r-control);background:var(--paper);color:var(--carbon);font:600 .8rem/1.4 var(--sans); }
.lesson-audio-control .gx-say svg { width:18px;height:18px; }
.lesson-audio-control [role="status"] { font:.8rem/1.45 var(--sans); }
.lesson-audio-control [role="status"]:empty { display:none; }
.lesson-audio-choice-row { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:6px;min-width:0;max-width:100%;position:relative; }
.lesson-audio-choice-row>button { min-width:0;width:100%;height:100%; }
.lesson-audio-choice-row:has(>.gx-fl-w) { display:contents; }
.lesson-audio-choice-row>.gx-fl-w { width:auto;height:auto; }
.lesson-audio-choice-row:has(>.gx-fl-w)>:is(.lesson-audio-choices,.lesson-audio-status) { display:none; }
.lesson-audio-choices { position:relative;align-self:center;min-width:0;margin:0;padding:0;border:0;background:transparent; }
.lesson-audio-choices[hidden] { display:none; }
.lesson-audio-choices>summary { display:grid;place-items:center;list-style:none;width:44px;min-height:44px;padding:0;border:1px solid var(--rule);border-radius:var(--r-surface);color:var(--carbon);background:var(--paper);cursor:pointer; }
.lesson-audio-choices>summary::-webkit-details-marker { display:none; }
.lesson-audio-choices>summary::marker { content:''; }
.lesson-audio-choices>summary svg { width:19px;height:19px; }
.lesson-audio-choices>summary:hover,.lesson-audio-choices[open]>summary { border-color:var(--carbon);background:color-mix(in srgb,var(--signal) 18%,var(--paper)); }
.lesson-audio-choices>summary:focus-visible { outline:2px solid var(--carbon);outline-offset:3px; }
.lesson-audio-choices .lesson-audio-choice-panel { position:absolute;z-index:30;inset-inline-end:0;top:calc(100% + 6px);display:block;width:max-content;max-width:min(28rem,calc(100vw - 3rem));box-sizing:border-box;padding:10px 13px;border:1px solid var(--rule);border-radius:var(--r-surface);box-shadow:0 8px 24px #0002;background:var(--paper);color:var(--carbon);font:1rem/1.7 var(--serif);text-align:start;white-space:normal;overflow-wrap:anywhere; }
.lesson-audio-choice-words { display:block; }
.lesson-audio-choice-panel { overflow:auto;min-width:min(12rem,calc(100vw - 3rem)); }
#v-review .lesson-audio-choices .lesson-audio-word,.lesson-audio-choices .lesson-audio-choice-panel button.lesson-audio-word[data-pronunciation-control] { display:inline-flex;align-items:center;min-height:40px;padding:3px 2px;margin:0;border:0;border-bottom:1px dotted currentColor;border-radius:2px;box-shadow:none!important;background:transparent;color:inherit;font:inherit;letter-spacing:normal;text-transform:none;transform:none!important;transition:none; }
.lesson-audio-choice-panel .lesson-audio-word:hover { text-decoration:underline; }
.lesson-audio-choices [role="status"],.lesson-audio-status { font:.75rem/1.4 var(--sans); }
.lesson-audio-choices [role="status"]:empty,.lesson-audio-status:empty { display:none; }
.lesson-audio-choice-row:has(.lesson-audio-choices[open]) { z-index:4; }
.lesson-audio-choice-row>.lesson-audio-status { grid-column:1 / -1; }
.lesson-audio-choice-row>.lesson-audio-status:not(:has(.audio-button-status:not(:empty))) { display:none; }
.lesson-audio-choices>summary[data-audio-state="playing"] { border-color:var(--carbon);background:color-mix(in srgb,var(--signal) 18%,var(--paper)); }
.gx-stage .gx-mid > .gx-ask {
display: flex; flex-wrap: wrap; align-items: center;
column-gap: 12px; row-gap: 6px;
}
.gx-stage .gx-mid > .gx-ask > .gx-kind { flex: 0 0 auto; margin: 0; }
.gx-stage .gx-mid > .gx-ask > .gx-hintchip {
margin: 0 0 0 auto; flex: 0 0 auto; min-height: 36px;
border-radius: var(--r-control);
}
.gx-stage .gx-hintchip[disabled] { display: none; }
.gx-stage .gx-mid > .gx-ask > .gx-again {
order: 5; flex-basis: 100%; margin: 0; padding: 0;
background: none; border: 0; border-radius: 0;
font: italic var(--fw-text) .875rem/1.4 var(--serif);
letter-spacing: 0; text-transform: none;
color: color-mix(in srgb, var(--carbon) 70%, transparent);
}
.gx-stage .gx-mid > .gx-ask > .gx-again::before { content: '↻ '; font-style: normal; opacity: .7; }
.gx-stage .ink-clue {
margin: 4px 0 0; padding: 8px 12px;
border-left: 3px solid var(--signal); border-radius: 0 var(--r-control) var(--r-control) 0;
background: color-mix(in srgb, var(--signal) 12%, transparent);
font: var(--fw-text) .9375rem/1.45 var(--sans);
}
@media (max-width: 599px) {
.gx-stage .gx-mid > .gx-ask > .gx-hintchip { order: 4; margin-left: 0; }
.gx-stage .gx-mid > .gx-ask > .gx-again { order: 3; }
}
.gx-stage .gx-mid:is([data-kind="listen"], [data-kind="hearline"]) .gx-head {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 12px 0 4px;
}
.gx-stage .gx-mid:is([data-kind="listen"], [data-kind="hearline"]) .gx-head .gx-say {
width: 104px; height: 104px; min-height: 0; flex: 0 0 auto;
font-size: 0; letter-spacing: 0; gap: 0; overflow: visible;
}
.gx-stage .gx-mid:is([data-kind="listen"], [data-kind="hearline"]) .gx-head .gx-say svg {
width: 36px; height: 36px; flex: 0 0 auto;
}
.gx-stage .gx-head .gx-say-cap,
.gx-stage .gx-mid:is([data-kind="listen"], [data-kind="hearline"]) .gx-head .audio-button-status {
display: block; min-height: 1.4em; margin: 0; flex-basis: auto;
font: var(--fw-strong) .75rem/1.4 var(--sans);
letter-spacing: var(--track-eyebrow); text-transform: uppercase; text-align: center;
color: color-mix(in srgb, var(--carbon) 66%, transparent);
}
.gx-stage .gx-mid:is([data-kind="listen"], [data-kind="hearline"]) .gx-head .audio-button-status:empty { display: none; }
.gx-stage .gx-head:has(.audio-button-status:not(:empty)) .gx-say-cap { display: none; }
.gx-stage .gx-mid:is([data-kind="listen"], [data-kind="hearline"]) .gx-head .audio-text-option {
margin: 2px auto 0; min-height: 36px; padding: 4px 8px;
background: none; border: 0; box-shadow: none; border-radius: var(--r-control);
font: var(--fw-medium) .875rem/1.3 var(--sans); letter-spacing: 0; text-transform: none;
color: var(--carbon);
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
text-decoration-color: color-mix(in srgb, var(--carbon) 40%, transparent);
}
.gx-stage .gx-mid:is([data-kind="listen"], [data-kind="hearline"]) .gx-head .audio-text-option:hover {
text-decoration-color: currentColor; background: color-mix(in srgb, var(--carbon) 6%, transparent);
}
@media (max-width: 599px) {
html[data-study] .gx-stage .gx-mid:is([data-kind="listen"], [data-kind="hearline"]) .gx-head .gx-say { width: 76px; height: 76px; }
html[data-study] .gx-stage .gx-mid:is([data-kind="listen"], [data-kind="hearline"]) .gx-head .gx-say svg { width: 28px; height: 28px; }
}
.gx-stage .lesson-audio-choice-row:has(> .lesson-audio-choices:not([hidden])) {
grid-template-columns: minmax(0, 1fr); gap: 0;
}
.gx-stage .lesson-audio-choice-row:has(> .lesson-audio-choices:not([hidden])) > button {
padding-inline-end: 46px; grid-column: 1; grid-row: 1;
}
.gx-stage .lesson-audio-choice-row > .lesson-audio-choices {
grid-column: 1; grid-row: 1; justify-self: end; align-self: center;
margin-inline-end: 6px; z-index: 2;
}
.gx-stage .lesson-audio-choice-row > .lesson-audio-choices > summary {
width: 34px; min-height: 34px; height: 34px; border-radius: 50%;
border-color: transparent; background: color-mix(in srgb, var(--carbon) 7%, transparent);
}
.gx-stage .lesson-audio-choice-row > .lesson-audio-choices > summary svg { width: 16px; height: 16px; }
.gx-stage .lesson-audio-choice-row > .lesson-audio-status { grid-column: 1; }
.gx-stage .lesson-audio-choice-row:has(> button:is([hidden], .gx-used, .gx-spent, .gx-tile-used, [aria-hidden="true"])) { display: none; }
.gx-stage .lesson-audio-choice-row:has(> button:disabled):has(> .gx-tile) > .lesson-audio-choices { visibility: hidden; }
.gx-stage :is(.gx-opt, .gx-tile).gx-right::after { margin-inline-start: .35em; }
#study-dock .study-dock__host .study-delight { grid-template-columns: max-content max-content; justify-content: start; }
#study-dock .study-dock__host .sd-round { padding-inline-start: 4px; }
#study-dock .study-dock__host .sd-round::before {
content: '·'; margin-inline-end: 8px;
color: color-mix(in srgb, var(--carbon) 45%, transparent);
}
#study-dock .study-dock__host .study-delight:has(.sd-label:empty) .sd-round::before,
#study-dock .study-dock__host .sd-round:first-child::before { content: none; }
.flourish-sky {
position: fixed; inset: 0; pointer-events: none; overflow: hidden;
z-index: calc(var(--z-overlay) - 1);
contain: strict;
}
.fl-piece {
position: absolute; display: block; width: var(--s); height: var(--s);
margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
transform-style: preserve-3d; will-change: transform, opacity; opacity: 0;
}
.fl-piece svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fl-slip { width: calc(var(--s) * .4); height: var(--s); }
.fl-leaf.fl-gold svg path { fill: var(--earned); }
.fl-leaf.fl-pale svg path { fill: var(--gold-hi); }
.fl-leaf svg path { stroke: color-mix(in srgb, var(--earned) 70%, #000); stroke-width: .3; }
.fl-ceremony.fl-leaf.fl-gold svg path { fill: var(--gold-leaf); stroke: color-mix(in srgb, var(--gold-leaf) 70%, #000); }
.fl-slip.fl-ink svg path { fill: var(--ink, var(--carbon)); }
.fl-slip.fl-cream svg path { fill: var(--galley, #fffdf5); stroke: color-mix(in srgb, var(--carbon) 30%, transparent); stroke-width: .3; }
.fl-slip.fl-gold svg path { fill: var(--gold-hi); }
.fl-drop svg path { fill: var(--ink, var(--carbon)); }
.fl-piece > .fl-sort {
display: block; font: var(--fw-strong) calc(var(--s) * 1.1)/1 var(--serif);
text-align: center;
}
.fl-sort.fl-ink > .fl-sort { color: var(--ink, var(--carbon)); }
.fl-sort.fl-gold > .fl-sort { color: var(--earned); }
.fl-ceremony.fl-sort.fl-gold > .fl-sort { color: var(--gold-leaf); }
.fl-seep {
position: absolute; border-radius: 50%; pointer-events: none;
border: 2px solid color-mix(in srgb, var(--ink, var(--carbon)) 55%, transparent);
background: radial-gradient(closest-side, color-mix(in srgb, var(--gold-hi) 26%, transparent), transparent);
opacity: 0;
}
.fl-nib { position: absolute; height: auto; overflow: visible; pointer-events: none; opacity: 0; }
.fl-nib path {
fill: none; stroke: var(--earned); stroke-width: 2.2; stroke-linecap: round;
}
[data-theme="dark"] .fl-slip.fl-ink svg path,
[data-theme="dark"] .fl-drop svg path { fill: color-mix(in srgb, var(--ink, var(--carbon)) 70%, #fff); }
.challenge-stamp { border-radius: var(--r-surface); }
.challenge-stamp > b {
position: relative; flex: 0 0 34px; width: 34px; height: 34px;
background: none; border: 0; border-radius: 0;
}
.challenge-stamp > b > .ms-seal { width: 34px; height: 34px; display: block; overflow: visible; }
.ms-seal .ms-rim { fill: color-mix(in srgb, var(--carbon) 5%, var(--galley, #fffdf5)); stroke: color-mix(in srgb, var(--carbon) 35%, transparent); stroke-width: 1; stroke-dasharray: 2 2; }
.ms-seal .ms-art :is(path, circle) { fill: none; stroke: color-mix(in srgb, var(--carbon) 45%, transparent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ms-seal.ms-earned .ms-rim { fill: var(--gold-hi); stroke: var(--gold-leaf); stroke-dasharray: none; stroke-width: 1.2; }
.ms-seal.ms-earned .ms-art :is(path, circle) { fill: color-mix(in srgb, var(--gold-leaf) 35%, var(--gold-hi)); stroke: color-mix(in srgb, var(--gold-leaf) 70%, #3b2a08); }
.ms-seal.ms-earned .ms-art .ms-cut { fill: none; }
.challenge-stamp > b > em {
position: absolute; right: -4px; bottom: -3px; min-width: 16px; height: 16px; padding: 0 3px;
display: grid; place-items: center; border-radius: var(--r-pill);
font: var(--fw-strong) .625rem/1 var(--sans); font-style: normal;
color: var(--galley, #fffdf5); background: color-mix(in srgb, var(--carbon) 70%, transparent);
}
.challenge-stamp.is-earned { border-style: solid; }
body.motion-full .challenge-milestone .challenge-stamp.is-earned:last-of-type .ms-seal,
body.motion-full .challenge-stamp.is-earned .ms-seal { animation: ms-press var(--mo-plate) var(--mo-e-seal) both; }
@keyframes ms-press {
0% { transform: scale(1.5) rotate(-14deg); opacity: 0; }
30% { transform: scale(.96) rotate(2deg); opacity: 1; }
45%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.gx-done .gx-facts {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
margin: 14px 0 6px; padding: 0;
}
.gx-done .gx-facts > span {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-surface);
background: var(--galley, #fffdf5);
font: var(--fw-medium) .875rem/1.3 var(--sans); color: color-mix(in srgb, var(--carbon) 75%, transparent);
}
.gx-done .gx-facts > span > b {
order: -1; font: var(--fw-text) 1.875rem/1.05 var(--serif); color: var(--carbon);
font-variant-numeric: lining-nums;
}
@media (max-width: 420px) { .gx-done .gx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fl-rays.fl-ceremony { position: absolute; overflow: visible; pointer-events: none; opacity: 0; mix-blend-mode: multiply; }
.fl-rays.fl-ceremony path { fill: color-mix(in srgb, var(--gold-leaf) 55%, transparent); }
.fl-rays.fl-ceremony circle { fill: color-mix(in srgb, var(--gold-hi) 45%, transparent); }
[data-theme="dark"] .fl-rays.fl-ceremony { mix-blend-mode: screen; }
@media (max-width: 479px) {
#study-dock[data-seat="action"] .study-dock__host .sd-round::before { content: none; }
#study-dock[data-seat="action"] .study-dock__host .sd-round { padding-inline-start: 0; }
}
@container dock-rail (max-width: 159px) {
#study-dock .study-dock__host .sd-round::before { content: none; }
#study-dock .study-dock__host .sd-round { padding-inline-start: 0; }
}
.flourish-local {
position: absolute; left: 0; top: 0; width: 100%; pointer-events: none;
overflow: hidden; z-index: 5;
}
.pace-chip {
display: inline-grid; place-items: center; flex: 0 0 auto;
min-width: 52px; min-height: 36px; padding: 0 10px;
border: 1px solid color-mix(in srgb, var(--carbon) 30%, transparent); border-radius: var(--r-pill);
background: color-mix(in srgb, var(--carbon) 4%, transparent); color: var(--carbon);
font: var(--fw-strong) .8125rem/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0;
text-transform: none; box-shadow: none; cursor: pointer;
}
.pace-chip:hover { border-color: var(--carbon); }
.pace-chip:focus-visible { outline: 2px solid var(--carbon); outline-offset: 2px; }
.gx-stage .scene-player {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px;
}
.gx-stage .scene-player + .btnrow { margin-top: 10px; }
.gx-stage .scene-player + .btnrow > .btn.primary { flex: 1 1 100%; }
.gx-stage .gx-mid:is([data-kind="listen"], [data-kind="hearline"]) .gx-head .pace-chip { min-height: 30px; min-width: 46px; }
#v-home #desk-howto {
display: flex; align-items: center; gap: 8px; width: fit-content; max-width: var(--desk-w, 100%);
box-sizing: border-box; margin: 4px 0 16px; justify-self: start; align-self: start; padding: 8px 16px 8px 12px; min-height: 44px;
border: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 45%, transparent); border-radius: var(--r-pill);
background: color-mix(in srgb, var(--ink, var(--carbon)) 6%, var(--galley, #fffdf5));
color: var(--carbon); text-decoration: none;
font: var(--fw-strong) .9375rem/1.3 var(--sans);
}
#v-home #desk-howto svg { flex: 0 0 auto; color: var(--ink, var(--carbon)); }
#v-home #desk-howto .desk-howto-arrow { opacity: .6; }
#v-home #desk-howto:hover { border-color: var(--ink, var(--carbon)); background: color-mix(in srgb, var(--ink, var(--carbon)) 11%, var(--galley, #fffdf5)); }
#v-home #desk-howto:focus-visible { outline: 3px solid var(--play); outline-offset: 3px; }
#v-review .daily-task-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
#v-review .daily-why-tag {
display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--ink, var(--carbon)) 30%, transparent);
background: color-mix(in srgb, var(--ink, var(--carbon)) 6%, transparent);
font: var(--fw-medium) .75rem/1.3 var(--sans); color: color-mix(in srgb, var(--carbon) 80%, transparent);
}
#v-review .daily-why-tag::before {
content: ''; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
background: var(--ink, var(--carbon)); opacity: .55;
}
#v-review .daily-line-meaning { font-family: var(--sans); font-weight: var(--fw-medium); font-style: normal; }
#v-review .daily-line-revealed { font-style: normal; }
#v-review .daily-listen-seal { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px 0 4px; }
#v-review .daily-listen-seal .daily-seal {
display: grid; place-items: center; width: 92px; height: 92px; padding: 0; border-radius: 50%;
border: 2px solid var(--ink, var(--carbon)); color: var(--ink, var(--carbon));
background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--ink, var(--carbon)) 6%, var(--galley)), color-mix(in srgb, var(--ink, var(--carbon)) 16%, var(--galley)));
}
#v-review .daily-listen-seal .daily-seal svg { width: 32px; height: 32px; }
#v-review .daily-choices-word button { font-family: var(--serif); font-size: var(--t-3); }
#v-review .daily-type-hint { margin: 2px 0 8px; font: italic var(--fw-text) .9375rem/1.4 var(--serif); color: color-mix(in srgb, var(--carbon) 70%, transparent); }
#v-review .daily-grew { margin: 14px 0 6px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-surface); background: var(--galley, #fffdf5); }
#v-review .daily-grew-head { margin: 0 0 8px; font: var(--fw-strong) .9375rem/1.3 var(--sans); }
#v-review .daily-grew ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#v-review .daily-grew li { display: grid; grid-template-columns: minmax(0, 9em) minmax(60px, 1fr) auto; align-items: center; gap: 10px; }
#v-review .daily-grew li > span { font: var(--fw-text) 1.0625rem/1.2 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#v-review .daily-grew li > small { font: var(--fw-medium) .75rem/1 var(--sans); color: color-mix(in srgb, var(--carbon) 65%, transparent); }
#v-review .daily-grew-bar { position: relative; height: 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--earned) 18%, transparent); overflow: hidden; }
#v-review .daily-grew-bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--earned); }
body.motion-full #v-review .daily-grew-bar::after { animation: grew-fill var(--mo-sheet) var(--mo-e-reward) both; animation-delay: calc(var(--i, 0) * var(--mo-ink)); }
@keyframes grew-fill { from { width: 0; } }
body.motion-full #v-review .daily-task[data-enter="rise"] { animation: pe-rise var(--mo-fill) var(--mo-e-reward) both; }
body.motion-full #v-review .daily-task[data-enter="slide"] { animation: pe-slide var(--mo-fill) var(--mo-e-reward) both; }
body.motion-full #v-review .daily-task[data-enter="turn"] { animation: pe-turn var(--mo-sum) var(--mo-e-reward) both; transform-origin: 50% 0; }
body.motion-full #v-review .daily-task[data-enter="settle"] { animation: pe-settle var(--mo-fill) var(--mo-e-reward) both; }
@keyframes pe-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes pe-slide { from { opacity: 0; transform: translateX(28px); } }
@keyframes pe-turn { from { opacity: 0; transform: perspective(900px) rotateX(-14deg); } }
@keyframes pe-settle { from { opacity: 0; transform: scale(.97); filter: blur(2px); } }
#v-review .daily-line-judge .wk-blank.is-shown { padding: 0 .2em; border-bottom: 2px dotted var(--ink, var(--carbon)); background: color-mix(in srgb, var(--signal) 18%, transparent); }
#v-review .daily-judge { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#v-review .daily-judge button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; font: var(--fw-strong) 1rem/1.2 var(--sans); }
.gx-stage .gx-gr-body .gb-lead {
margin: 4px 0 18px; max-width: 34ch;
font: var(--fw-text) var(--type-prompt)/1.35 var(--serif); color: var(--carbon);
letter-spacing: var(--track-title);
}
.gx-stage .gx-gr-body .gb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 62ch; }
.gx-stage .gx-gr-body .gb-step {
position: relative; padding-left: 18px;
font: var(--fw-text) var(--t-2)/1.6 var(--sans); color: var(--carbon);
}
.gx-stage .gx-gr-body .gb-step::before {
content: ''; position: absolute; left: 0; top: .45em; bottom: .45em; width: 2px;
border-radius: var(--r-bar); background: color-mix(in srgb, var(--play, var(--carbon)) 55%, transparent);
}
.gx-stage .gx-gr-body .gb-step:last-of-type:not([hidden])::before { background: var(--play, var(--carbon)); }
body.motion-full .gx-stage .gx-gr-body .gb-step.gb-arrive { animation: gb-arrive var(--mo-fill) var(--mo-e-reward) both; }
@keyframes gb-arrive { from { opacity: 0; transform: translateY(8px); } }
.gx-stage .gx-gr-body .gb-specimens { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule); }
.gx-stage .gx-gr-body .gb-tray-label {
display: block; margin-bottom: 10px;
font: var(--fw-strong) .75rem/1.3 var(--sans); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
color: color-mix(in srgb, var(--carbon) 62%, transparent);
}
.gx-stage .gx-gr-body .gb-tray { display: flex; flex-wrap: wrap; gap: 10px; }
.gx-stage .gx-gr-body .gb-chip {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px;
border: 1px solid color-mix(in srgb, var(--carbon) 30%, var(--rule)); border-radius: var(--r-surface);
background: var(--galley); box-shadow: var(--sh-press-quiet);
font: var(--fw-text) 1.25rem/1.2 var(--serif); color: var(--play, var(--carbon));
text-decoration: none; cursor: pointer;
}
.gx-stage .gx-gr-body .gb-chip::after {
content: ''; width: 14px; height: 14px; flex: 0 0 auto; opacity: .55; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13.5V10c0-.6.4-1 1-1h2.2L13 4.6c.7-.5 1.6 0 1.6.8v13.2c0 .8-.9 1.3-1.6.8L7.2 15H5c-.6 0-1-.4-1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13.5V10c0-.6.4-1 1-1h2.2L13 4.6c.7-.5 1.6 0 1.6.8v13.2c0 .8-.9 1.3-1.6.8L7.2 15H5c-.6 0-1-.4-1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gx-stage .gx-gr-body .gb-chip:hover { border-color: var(--carbon); }
.gx-stage .gx-gr-body .gb-chip.gx-gr-said { background: color-mix(in srgb, var(--signal) 22%, var(--galley)); }
@media (max-width: 599px) {
.gx-stage .gx-gr-body .gb-lead { font-size: 1.3rem; }
.gx-stage .gx-gr-body .gb-step { font-size: var(--t-1); }
}
.gx-stage .gx-gr-body .gb-chip .gb-end { font-style: normal; color: var(--carbon); box-shadow: inset 0 -2px 0 var(--signal); }
.gx-stage .gx-gr-body .gb-chip .gb-word { white-space: nowrap; }
:is(.gx-stage, .gx-adventure, .wk-options, #v-review) .gx-opt { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.gx-opt.gx-snuggest { font-size: .58em; letter-spacing: -0.015em; overflow-wrap: break-word; }
.gx-adventure .challenge-stamp { gap: 10px; padding: 5px 12px 5px 6px; align-items: center; }
.gx-adventure .challenge-stamp > b, .gx-adventure .challenge-stamp > b > .ms-seal { width: 28px; height: 28px; flex: 0 0 28px; }
#v-home.desk-focused #desk-focus .desk-paths > button { border-top: 1px solid var(--rule); }
html body .profile-next { border-top: 1px solid var(--rule); }
#v-review .daily-line { border-left: 2px solid var(--play, var(--carbon)); }
html body .gx-stage .gx-src { border-left: 2px solid var(--play, var(--carbon)); }
html body .reading-discovery { border-top-width: 2px; border-top-color: var(--play, var(--carbon)); }
html body .gx-stage .answer-connection {
background: none; border-radius: 0; border-top: 1px solid var(--rule);
padding: 14px 0 0; margin-top: 14px;
}
html body .gx-stage .gx-src { background: none; }
html body .gx-stage :is(.gx-opt, .gx-tile, .gx-pw, .gx-pg).gx-right { border-color: var(--play-deep, var(--carbon)); }
@media (max-width: 560px) {
header .bar .nav-rooms { flex-wrap: nowrap; gap: 0; padding-bottom: 2px; }
header .bar .nav-rooms button {
flex: 1 1 auto; min-width: 0; padding: 6px 3px; min-height: 40px;
white-space: nowrap; overflow-wrap: normal; font-size: var(--t-00); letter-spacing: 0;
}
}
@media (max-width: 360px) {
header .bar .nav-rooms button { font-size: .75rem; padding-inline: 2px; }
}
#v-words .wg { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.book .b-author { font-size: max(11px, var(--t-00)); letter-spacing: .1em; }
.book .b-year { font-size: max(12px, .74rem); }
:is(#v-home, #v-words, #v-profile, #v-course, #v-library).view.show::after { margin-top: 40px; }
:is(#v-home, #v-words, #v-profile, #v-course, #v-library).view { padding-bottom: clamp(40px, 7vh, 80px); }
@media (max-width: 560px) {
#readbar .inner { column-gap: 6px; }
#readbar .inner > :is(button, .btn) { font-size: var(--t-00); padding-inline: 8px; white-space: nowrap; }
#readbar #btn-listen { min-width: 0; }
#readbar .inner > #btn-rb-more { flex: 0 0 44px; width: 44px; padding: 0; margin-left: auto; }
}
:is(#shelf, #locked-panel) .b-cover {
border: 0; border-top: 0;
border-radius: 2px 4px 4px 2px;
background:
linear-gradient(90deg, rgb(0 0 0 / .22) 0 5px, rgb(255 255 255 / .06) 5px 6px, transparent 6px),
linear-gradient(160deg, rgb(255 255 255 / .10), transparent 45%, rgb(0 0 0 / .12)),
var(--ink, var(--carbon));
color: #fff8df;
padding: 16px 12px 12px 16px;
align-items: center; text-align: center;
box-shadow: 0 1px 2px rgb(23 33 58 / .25), 0 10px 18px -12px rgb(23 33 58 / .55);
}
:is(#shelf, #locked-panel) .b-cover::before {
content: ''; position: absolute; inset: 7px 6px 7px 10px; pointer-events: none;
border: 1px solid rgb(255 248 223 / .32); border-radius: 1px;
box-shadow: inset 0 0 0 2px rgb(0 0 0 / .06);
}
:is(#shelf, #locked-panel) .b-cover .b-author { color: #e8c977; position: relative; }
:is(#shelf, #locked-panel) .b-cover .b-title {
color: #fff8df; font-size: var(--t-0); line-height: 1.15; position: relative;
margin-top: 10px; text-wrap: balance;
}
:is(#shelf, #locked-panel) .b-cover .b-year { color: rgb(255 248 223 / .7); position: relative; }
:is(#shelf, #locked-panel) .b-back { background: color-mix(in srgb, var(--ink, var(--carbon)) 70%, #000); }
:is(#shelf, #locked-panel) .b-spine { background: color-mix(in srgb, var(--ink, var(--carbon)) 80%, #000); color: #fff8df; }
#shelf .book:hover .b-spine, #shelf .book:focus-visible .b-spine { background: color-mix(in srgb, var(--ink, var(--carbon)) 65%, #000); }
:is(#shelf, #locked-panel) .b-cov { left: 14px; right: 10px; bottom: 6px; background: rgb(255 248 223 / .22); }
:is(#shelf, #locked-panel) .b-cov i { background: #e8c977; }
#shelf .b-fin .tick { stroke: #e8c977; }
#bench-sect .shelf { align-items: flex-start; }
.resident {
--res-size: 88px;
position: relative; display: block; box-sizing: content-box; flex: none;
width: var(--res-size); height: var(--res-size);
padding: calc(var(--res-size) * .20) calc(var(--res-size) * .06) calc(var(--res-size) * .10);
contain: layout style; isolation: isolate;
}
.resident__figure {
position: relative; z-index: 1; display: block; width: 100%; height: 100%;
scale: calc(1 + (var(--res-depth, 1) - 1) * .001); transform-origin: 50% 100%;
}
.resident__figure > svg { display: block; width: 100%; height: 100%; }
html[data-motion="full"] .resident[data-breath] .resident__figure > svg {
transform-origin: 50% 92%;
animation: resident-breath var(--cast-breath) infinite;
}
@keyframes resident-breath {
0% { transform: translateY(0) scale(1, 1); animation-timing-function: var(--breath-in, cubic-bezier(.4, 0, .4, 1)); }
38% { transform: translateY(-1.7%) scale(.984, 1.016); animation-timing-function: linear; }
45% { transform: translateY(-1.62%) scale(.9845, 1.0152); animation-timing-function: var(--breath-out, cubic-bezier(.3, 0, .6, 1)); }
100% { transform: translateY(0) scale(1, 1); }
}
.resident__ground {
position: absolute; z-index: 0;
left: calc(var(--res-size) * .15); right: calc(var(--res-size) * .15);
bottom: calc(var(--res-size) * .14); height: calc(var(--res-size) * .07);
border-radius: 50%;
background: color-mix(in srgb, var(--run-ink, var(--rank-brass)) 12%, transparent);
}
.resident__ring {
position: absolute; z-index: 0; box-sizing: border-box;
top: calc(var(--res-size) * .20); left: calc(var(--res-size) * .06);
width: var(--res-size); height: var(--res-size);
border: 0 solid var(--run-ink, var(--rank-brass)); border-radius: 50%;
transition: border-width calc(var(--mo-ink, 220ms) * var(--motion, 1)) var(--mo-e-std, var(--e-std));
}
.resident[data-streak="warm"] .resident__ring { border-width: 1px; }
.resident:is([data-streak="flowing"], [data-streak="glowing"]) .resident__ring { border-width: 2px; }
.resident:is([data-streak="flourishing"], [data-streak="radiant"]) .resident__ring { border-width: 3px; }
.resident:is([data-streak="glowing"], [data-streak="flourishing"], [data-streak="radiant"]) .resident__ring { box-shadow: 0 0 12px 1px var(--run-glow, transparent); }
.resident[data-streak="radiant"] .resident__ring::after {
content: ''; position: absolute; inset: -7px; border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--run-ink, var(--rank-brass)) 12%, transparent);
}
.resident__rays { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.resident__rays > i {
position: absolute; left: calc(var(--res-size) * .56); top: calc(var(--res-size) * .70);
width: 2px; height: calc(var(--res-size) * .09); margin-left: -1px;
border-radius: var(--r-bar, 2px); background: var(--run-ink, var(--rank-brass));
opacity: 0; transform-origin: 50% 0;
transform: rotate(var(--ray, 0deg)) translateY(calc(var(--res-size) * -.545));
animation: resident-ray calc(var(--mo-ghost, 700ms) * var(--motion, 1)) var(--mo-e-std, var(--e-std)) var(--ray-at, 530ms) both;
}
@keyframes resident-ray { 0% { opacity: 0; } 25%, 45% { opacity: 1; } 100% { opacity: 0; } }
.resident__badge {
position: absolute; z-index: 2; right: 0; bottom: calc(var(--res-size) * .10);
display: grid; place-items: center; box-sizing: border-box;
min-width: calc(var(--res-size) * .28); height: calc(var(--res-size) * .30); padding: 0 2px;
border: 1px solid var(--earned, var(--rank-brass)); border-radius: var(--r-control, 5px);
background: var(--paper); color: var(--earned, var(--rank-brass));
font: 600 max(11px, calc(var(--res-size) * .15))/1 var(--sans); font-variant-numeric: tabular-nums;
}
.resident__badge[hidden], html[data-rewards="off"] .resident__badge { display: none; }
.resident[data-state="promoted"] .resident__badge {
animation: resident-restamp calc(420ms * var(--motion, 1)) var(--mo-e-seal, ease-out) both;
}
@keyframes resident-restamp { from { transform: scale(.92); } to { transform: none; } }
[data-theme="dark"] .study-dock .resident svg { filter: drop-shadow(0 0 1.25px rgb(255 253 245 / .5)); }
.study-dock {
--dock-side: 16px; --dock-foot: 7px;
position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dock, 246);
box-sizing: border-box; width: min(780px, 100%); margin-inline: auto;
height: calc(120px + env(safe-area-inset-bottom, 0px));
padding: 0 var(--dock-side) calc(2px + env(safe-area-inset-bottom, 0px));
display: grid; grid-template-columns: auto minmax(91px, 1fr); grid-template-rows: 4px minmax(0, 1fr);
column-gap: 12px;
background: var(--room); color: var(--carbon);
transition-property: none;
}
.study-dock[data-size="104"] { --dock-foot: 8px; height: calc(141px + env(safe-area-inset-bottom, 0px)); }
.study-dock[hidden] { display: none; }
.study-dock::before {
content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
background: linear-gradient(var(--rule), var(--rule)) 0 0 / 100% 1px no-repeat var(--room);
}
.study-dock::after {
content: ''; position: absolute; bottom: 100%; left: calc(50% - 50vw); right: calc(50% - 50vw); height: 18px;
background: linear-gradient(to bottom, transparent, var(--room)); pointer-events: none;
}
html[data-dock="away"] .study-dock { visibility: hidden; }
.study-dock[data-seat="action"] { grid-template-columns: auto minmax(91px, 1fr) auto; }
@media (min-width: 600px) {
.study-dock { grid-template-columns: auto minmax(105px, 1fr); }
.study-dock[data-seat="action"] { grid-template-columns: auto minmax(105px, 1fr) auto; }
}
@media (max-width: 359px) {
.study-dock { --dock-side: 8px; column-gap: 8px; }
}
.study-dock__rule {
position: relative; grid-column: 1 / -1; grid-row: 1; height: 4px;
margin-inline: calc(var(--dock-side) * -1);
background: linear-gradient(var(--rule), var(--rule)) 0 0 / 100% 1px no-repeat;
}
.study-dock__seat { grid-column: 1; grid-row: 2; align-self: end; display: flex; }
.study-dock__chair { display: block; }
.study-dock__chair[hidden], .study-dock__host[hidden] { display: none; }
.study-dock__rail {
position: relative; grid-column: 2; grid-row: 2; min-width: 0;
display: flex; flex-direction: column; justify-content: flex-end;
padding-bottom: var(--dock-foot);
}
.study-dock__host { min-width: 0; }
.study-dock__host .study-delight {
display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 34px 20px;
gap: 0 8px; align-items: end; min-height: 0; padding: 0; border: 0;
}
.study-dock__host .sd-ledger { display: contents; }
.study-dock__host .sd-marks {
grid-column: 1 / -1; grid-row: 1; justify-self: start;
box-sizing: border-box; width: 91px; height: 34px; gap: 4px;
}
.study-dock__host .sd-mark { width: 15px; }
.study-dock__host .sd-label, .study-dock__host .sd-round {
grid-row: 2; align-self: end; height: 18px; min-height: 0; line-height: 18px; white-space: nowrap;
}
.study-dock__host .sd-label { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.study-dock__host .sd-round { grid-column: 2; }
.study-dock__host .sd-achievement {
grid-column: 1 / -1; grid-row: 1; justify-self: start; width: auto; height: 34px;
margin-left: min(99px, calc(100% - 30px));
}
.study-dock__host .study-delight[data-bound] .sd-achievement { margin-left: 0; }
@media (min-width: 600px) {
.study-dock__host .sd-marks { width: 105px; gap: 5px; }
.study-dock__host .sd-mark { width: 17px; }
.study-dock__host .sd-achievement { margin-left: min(115px, calc(100% - 30px)); }
}
@media (max-width: 479px) {
.study-dock[data-seat="action"] .study-dock__host .study-delight { grid-template-rows: 34px 20px 18px; }
.study-dock[data-seat="action"] .study-dock__host .sd-round { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
.study-dock[data-seat="action"] .study-dock__host .sd-label { grid-column: 1 / -1; justify-self: start; min-width: max-content; overflow: visible; }
}
.study-dock[data-seat="action"] .study-dock__rail { container: dock-rail / inline-size; }
@container dock-rail (max-width: 159px) {
.study-dock__host .study-delight { grid-template-rows: 34px 20px 18px; }
.study-dock__host .sd-round { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
.study-dock__host .sd-label { grid-column: 1 / -1; justify-self: start; min-width: max-content; overflow: visible; }
}
.study-dock__slip {
position: absolute; left: 0; right: 0; bottom: calc(var(--dock-foot) + 60px);
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
max-height: 36px; margin: 0; overflow: hidden; overflow-wrap: anywhere; pointer-events: none;
font: 400 var(--type-meta, .8125rem)/18px var(--serif); color: var(--carbon);
transition: opacity calc(120ms * var(--motion, 1)) var(--mo-e-std, ease);
}
.study-dock__slip[data-held] { opacity: 0; }
.study-dock__slip[hidden] { display: none; }
.study-dock__action {
grid-column: 3; grid-row: 2; align-self: end; box-sizing: border-box;
display: flex; align-items: flex-end; min-width: 96px; max-width: min(351px, 45vw);
padding-bottom: var(--dock-foot);
}
.study-dock__action > * {
box-sizing: border-box; width: 100%; min-width: 0; margin: 0;
white-space: normal; overflow-wrap: anywhere;
}
@media (max-width: 479px) {
.study-dock__action > * {
padding-inline: 6px; letter-spacing: 0;
font-size: clamp(11px, calc((100vw - 262px) * .1235), .95rem);
}
}
@media (max-width: 359px) {
.study-dock__action > * {
padding-inline: 4px;
font-size: clamp(11px, calc((100vw - 234px) * .1235), .95rem);
}
}
html[data-study] :is(#gx-stage, #living-stage) { padding-bottom: calc(var(--dock-h, 120px) + 24px); }
html[data-study], html[data-study] :is(#gx-stage, #living-stage) { scroll-padding-bottom: calc(var(--dock-h, 120px) + 12px); }
html[data-study] #static-legal { margin-bottom: calc(var(--dock-h, 120px) + 24px); }
html[data-study] #rev-btns { position: static; background-color: transparent; box-shadow: none; }
html[data-study] #v-review.practice-finished #rev-btns { position: sticky; bottom: var(--dock-h, 120px); }
html[data-study] #v-review.practice-finished #rev-btns::before {
content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 32px; pointer-events: none;
background-image: linear-gradient(to bottom, transparent, var(--learning-surface));
}
html[data-study] #v-review #practice-rewards .pp-session {
position: absolute; width: 1px; height: 1px; min-height: 0;
padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;
overflow-x: hidden; overflow-y: hidden; clip-path: inset(50%); white-space: nowrap;
}
html[data-study] .wk-footer { position: static; }
html[data-study] .gx-stage .gx-done > .btnrow,
html[data-study] .gx-stage .gx-done > .gx-reward > .btnrow,
html[data-study] .gx-stage .gx-sealed #gx-seal-rest .btnrow {
position: sticky; bottom: -24px; z-index: 6; background-color: var(--room);
}
html[data-study] .gx-stage .gx-done > .gx-reward > .btnrow { padding-top: 12px; padding-bottom: 12px; box-shadow: 0 -1px 0 var(--rule); }
html[data-study] .gx-adventure .gx-mid:is([data-beat="ctx"], [data-beat="rwl"]) .gx-after:not(:empty) { bottom: -24px; }
html[data-study] .gx-stage .gx-mid[data-kind="gram"] > .gx-gr-body ~ .btnrow,
html[data-study] .gx-stage .gx-mid[data-kind="gram"] > .gx-gr-note + .btnrow,
html[data-study] .gx-stage .gx-mid > .word-first-meeting + #gx-after {
position: sticky; bottom: -24px; z-index: 6; padding-top: 14px; padding-bottom: 14px;
background-color: var(--paper); box-shadow: 0 -10px 14px -8px color-mix(in srgb, var(--carbon) 22%, transparent);
}
html[data-study] #gx-who { display: none; }
html[data-study] #v-review.show::after { visibility: hidden; }
html[data-study] #v-review.practice-active #rev-attr + p { padding-top: var(--dock-h, 120px); }
.xpm {
--xpm-f: 0; --xpm-light: 14px; --xpm-glint: var(--earned-on-rail);
--xpm-notch: color-mix(in srgb, var(--earned) 55%, var(--earned-track));
--xpm-edge: var(--earned);
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; min-width: 0;
}
[data-theme="dark"] .xpm { --xpm-glint: var(--carbon); }
.xpm[hidden] { display: none; }
.xpm .xpm-track {
position: relative; display: block; flex: 0 0 100%; height: 6px; margin: 0; overflow: hidden;
border-radius: var(--r-bar); background-color: var(--earned-track); box-shadow: 0 0 0 1px var(--xpm-edge);
background-image: linear-gradient(var(--xpm-notch), var(--xpm-notch)), linear-gradient(var(--xpm-notch), var(--xpm-notch)),
linear-gradient(var(--xpm-notch), var(--xpm-notch)), linear-gradient(var(--xpm-notch), var(--xpm-notch));
background-repeat: no-repeat; background-size: 1px 100%; background-position: 20% 0, 40% 0, 60% 0, 80% 0;
transform-origin: 0 50%;
}
.xpm .xpm-fill {
display: block; width: 100%; height: 100%; border-radius: 0; background: var(--earned);
transform: scaleX(var(--xpm-f)); transform-origin: 0 50%;
}
.xpm .xpm-light {
position: absolute; inset: 0; opacity: 0; pointer-events: none;
background: linear-gradient(90deg, transparent calc(100% - var(--xpm-light)), var(--xpm-glint) calc(100% - var(--xpm-light) / 2));
transform: translateX(calc((var(--xpm-f) - 1) * 100%));
}
.xpm[data-crest] .xpm-light { background: var(--xpm-glint); }
.xpm[data-variant="rule"] { display: block; height: 4px; background: linear-gradient(var(--rule), var(--rule)) 0 0 / 100% 1px no-repeat; }
.xpm[data-variant="rule"] .xpm-track { height: 4px; border-radius: 0; }
.xpm[data-variant="chip"] { --xpm-light: 22px; display: block; }
.xpm[data-variant="chip"] .xpm-track { height: 2px; box-shadow: none; }
.xpm[data-variant="sheet"] .xpm-track { height: 8px; }
.xpm[data-variant="profile"] .xpm-track { height: 10px; }
.xpm-label { min-width: 0; color: var(--carbon); font: 500 var(--type-meta)/1.4 var(--sans); overflow-wrap: anywhere; }
.xpm-level { display: inline-block; font-weight: 600; transform-origin: 0 70%; }
.xpm-figure { color: var(--steel); font: 500 var(--type-meta)/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.pp-receipt, .daily-feedback > .pp-receipt {
position: relative; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 0;
margin: 0; padding: 10px 14px 10px 16px; overflow: visible;
border: 1px solid var(--rule); border-radius: var(--r-control); background: var(--galley); box-shadow: none;
color: var(--carbon);
}
.pp-receipt.is-live { animation: none; }
.pp-receipt.is-milestone { border-color: var(--earned); background: var(--earned-wash); }
.pp-receipt-rule {
position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; pointer-events: none;
border-radius: var(--r-control) 0 0 var(--r-control); background: var(--run-ink, var(--earned));
transform-origin: 50% 0;
}
.pp-receipt-copy { min-width: 0; overflow-wrap: anywhere; }
.pp-receipt-copy > strong { display: block; color: var(--carbon); font: 400 var(--type-body)/1.35 var(--serif); }
.pp-receipt-copy > span {
position: relative; display: block; max-width: 100%; margin-top: 2px; color: var(--steel);
font: 600 var(--type-meta)/1.5 var(--sans); font-variant-numeric: tabular-nums;
}
.pp-gain {
display: inline-flex; flex-direction: column; color: var(--earned);
font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pp-gain[data-final]::after { content: attr(data-final); height: 0; overflow: hidden; visibility: hidden; }
@supports (color: color-mix(in srgb, red, blue)) {
.pp-receipt.is-milestone .pp-gain { color: color-mix(in srgb, var(--earned) 90%, var(--carbon)); }
}
.pp-gain-ghost { position: absolute; left: calc(100% + .4em); top: 0; opacity: 0; pointer-events: none; color: var(--earned); font-style: normal; font-weight: 600; white-space: nowrap; }
.pp-run { color: var(--run-ink, var(--earned)); font-style: normal; }
.pp-note, .pp-fact { font-weight: 500; }
.ledger-sheet {
display: grid; gap: 10px; box-sizing: border-box; max-inline-size: 460px; margin: 0; padding: 16px 18px; text-align: start;
border: 1px solid var(--rule); border-radius: var(--r-surface); background: var(--galley); color: var(--carbon);
}
.gx-stage .gx-done .ledger-sheet { margin-inline: auto; }
.ledger-sheet.is-joined {
max-inline-size: none; inline-size: 100%; margin-block-end: 0; padding-block-end: var(--s2);
border: 2px solid var(--rule); border-block-end: 0; border-end-start-radius: 0; border-end-end-radius: 0;
border-start-start-radius: var(--r-dialog); border-start-end-radius: var(--r-dialog);
}
.reward-seal {
position: relative; display: block; inline-size: clamp(6.5rem, 26vw, 9rem); aspect-ratio: 1; margin: 0 auto var(--s2);
}
.reward-seal > svg { display: block; inline-size: 100%; block-size: 100%; }
.reward-seal[data-seat="waiting"] > svg { visibility: hidden; }
.gx-stage.has-band .reward-seal {
--seal: clamp(60px, 13dvh, 118px);
position: fixed; z-index: 4; inset-block-start: 6px; inset-inline-start: calc(50% - var(--seal) / 2);
inline-size: var(--seal); margin: 0;
}
.seal-hold .seal-body:has(> .w-seal) { border: 0; background: none; box-shadow: none; color: inherit; }
.seal-hold.stamped .seal-body:has(> .w-seal) { transform: none; box-shadow: none; }
.seal-body > .w-seal { display: block; inline-size: 100%; block-size: 100%; }
.seal-body > .w-seal .stamp { inline-size: 56%; block-size: 56%; }
.ledger-total > .reward-seal { float: right; inline-size: 4.5rem; margin: -1.3rem 0 -1.3rem var(--s2); }
.wk-done > .reward-seal { inline-size: 100%; margin: 0; }
.gx-stage.has-band .wk-done { grid-template-columns: minmax(0, 1fr); }
#v-review .daily-completion-summary > .reward-seal { grid-column: 2; grid-row: 1; margin: 0; }
@media (max-width: 700px) {
#v-review .daily-completion-summary > .reward-seal { grid-column: 1; margin: 0 auto; }
#v-review .daily-completion-summary > .daily-flow-copy { grid-row: 2; }
}
.ledger-rows { display: grid; gap: 4px; margin: 0; padding: 0 0 10px; border-bottom: 1px solid var(--rule); list-style: none; }
.ledger-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; color: var(--steel); font: 400 var(--type-meta)/1.5 var(--sans); }
.ledger-row > b { color: var(--carbon); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger-total { margin: 0; color: var(--earned); font: 400 var(--type-heading)/1.2 var(--serif); font-variant-numeric: tabular-nums; }
.ledger-total .pp-worth { position: relative; display: inline-block; }
.ledger-total .pp-gain { font-weight: 400; }
.ledger-total .pp-gain-ghost { font-weight: 400; }
.ledger-total .pp-note, .ledger-next { margin: 0; color: var(--steel); font: 500 var(--type-meta)/1.4 var(--sans); }
html[data-rewards="off"] :is(.pp-worth, .pp-gain, .pp-gain-ghost, .pp-note, .ledger-sheet) { display: none; }
html[data-rewards="off"] .pp-receipt.is-milestone { border-color: var(--rule); background: var(--galley); }
[data-pick]:not(#\9#\9#\9#\9):not(:focus-visible) { outline: 1px solid var(--carbon); outline-offset: -1px; }
[data-verdict="missed"]:not(#\9#\9#\9#\9):not(:focus-visible) { outline: 1px solid var(--miss); outline-offset: -1px; }
[data-verdict="earned"]:not(#\9#\9#\9#\9), [data-verdict="assisted"]:not(#\9#\9#\9#\9) {
background-image: linear-gradient(var(--earned), var(--earned)); background-repeat: no-repeat;
background-position: 0 0; background-size: 3px 100%;
}
[data-verdict="assisted"]:not(#\9#\9#\9#\9) { background-image: linear-gradient(var(--carbon), var(--carbon)); }
.owed-line {
display: flex; align-items: center; gap: 10px;
width: fit-content; max-width: 100%; box-sizing: border-box;
margin: 12px 0 0; padding: 8px 12px 8px 10px;
border: 1px solid var(--rule); border-left: 3px solid var(--earned);
border-radius: var(--r-surface);
background: var(--galley); color: var(--carbon);
font-family: var(--serif); font-size: var(--type-body); font-weight: 400; line-height: 1.3;
text-align: left;
animation: owed-line-in calc(var(--mo-ink) * var(--motion, 1)) var(--mo-e-reward) both;
}
.owed-line[data-rest="sheet"] { animation-delay: calc((2000ms + var(--owed-i, 0) * 90ms) * var(--motion, 1)); }
.owed-line__mark { flex: none; width: 30px; height: 33px; }
.owed-line__mark > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.owed-line__text { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.owed-line__level { white-space: nowrap; }
@keyframes owed-line-in { from { opacity: 0; } }
.owed-line--ceremony {
display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px;
width: 100%; margin-top: 16px; padding: 12px 16px 12px 14px;
border-left-color: var(--gold-leaf);
}
.owed-line--ceremony .owed-line__mark {
width: 56px; height: 62px;
--signal: var(--gold-leaf); --signal-ink: var(--gold-leaf); --pine: var(--gold-leaf); --rule: var(--gold-leaf);
--on-pine: var(--on-signal);
}
.owed-line--ceremony .owed-line__mark > svg > circle { stroke-width: 3; }
.owed-line--ceremony .owed-line__name { display: block; font: 500 var(--type-prompt)/1.2 var(--serif); }
.owed-line--ceremony .owed-line__level { display: block; margin-top: 4px; font: 600 var(--type-meta)/1.4 var(--sans); color: var(--steel); }
html[data-rewards="off"] .owed-line { display: none; }
html[data-motion="low"] .owed-line { animation-duration: 1ms; animation-delay: 0s; }
.dstand {
position: relative; box-sizing: border-box;
display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--s3);
margin: var(--dstand-lead, var(--s4)) 0 var(--s4); padding: var(--s4);
border: 2px solid var(--rule); border-radius: var(--r-dialog);
background: var(--galley); color: var(--carbon); box-shadow: 0 4px 0 var(--rule);
font-family: var(--sans); font-size: var(--type-meta); font-weight: 400; line-height: 1.45;
font-variant-numeric: tabular-nums; text-align: start;
}
.dstand p { margin: 0; }
.dstand b { font-weight: 600; }
.dstand-hero {
display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--s1) var(--s3);
min-inline-size: 0;
}
.dstand-flame + .dstand-lamp { grid-column: 2 / -1; }
.dstand-count { display: grid; justify-items: start; }
.dstand-run { font-size: 3rem; font-weight: 600; line-height: 1; letter-spacing: var(--track-display); }
.dstand-unit { color: var(--steel); font-size: .75rem; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.dstand-lamp { min-inline-size: 0; color: var(--steel); line-height: 1.35; }
.dstand-bridge { font-style: normal; }
@media (max-width: 360px) {
.dstand[data-variant="desk"] .dstand-count + .dstand-lamp { grid-column: 1 / -1; }
}
.dstand-flame {
display: block; inline-size: 3.5rem; block-size: 3.5rem;
--lamp-quiet: var(--pencil); font-style: normal; transform-origin: 50% 100%;
}
.dstand-flame .ic { display: block; inline-size: 100%; block-size: 100%; }
.dstand-week {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: center; gap: var(--s1);
max-inline-size: 24rem;
}
.dstand-week[data-track="first"] { grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.3fr); }
.dstand-node {
display: grid; place-items: center; box-sizing: border-box; aspect-ratio: 1; min-inline-size: 0;
border: 2px solid var(--rule); border-radius: 50%;
background: var(--case); color: var(--steel); box-shadow: 0 2px 0 var(--rule);
font-size: .75rem; font-style: normal; font-weight: 600; line-height: 1;
}
.dstand-node .ic { inline-size: 60%; block-size: 60%; }
.dstand-node[data-node="done"], .dstand-node[data-node="lit"] { position: relative; border-color: transparent; background: none; box-shadow: none; }
.dstand-node .ic-seal { inline-size: 124%; block-size: 124%; max-inline-size: none; }
.dstand-node[data-node="now"] { border-color: var(--signal-ink); background: var(--galley); color: var(--carbon); box-shadow: 0 2px 0 var(--signal-ink); }
.dstand-node[data-node="blank"] { background: var(--galley); box-shadow: none; }
.dstand-node[data-big="true"] { align-content: center; gap: 1px; font-size: .8125rem; }
.dstand-node[data-big="true"] .dstand-parcel { inline-size: 1.5rem; block-size: 1.125rem; }
.dstand-level { display: flex; align-items: center; gap: var(--s2); min-inline-size: 0; color: var(--carbon); font-weight: 600; white-space: nowrap; }
.dstand-level > .xpm { flex: 1 1 0; min-inline-size: 0; white-space: normal; }
.dstand-levelword { flex: none; }
.dstand .xpm .xpm-track { height: 14px; border-radius: var(--r-pill); }
.dstand .xpm .xpm-fill { background: var(--signal); box-shadow: inset -2px 0 0 var(--signal-ink); }
.dstand-gift, .dstand-next { display: flex; align-items: center; gap: var(--s2); min-inline-size: 0; font-weight: 500; }
.dstand-gift { color: var(--carbon); }
.dstand-next { color: var(--steel); }
.dstand-parcel { flex: none; display: block; inline-size: 1.5rem; block-size: 1.5rem; color: var(--signal-ink); }
.dstand-gift .dstand-parcel { inline-size: 3rem; block-size: 3rem; }
.dstand-parcel .ic { display: block; inline-size: 100%; block-size: 100%; }
.dstand-sum { flex: none; color: var(--signal-ink); font-size: var(--type-body); }
.dstand-note { min-inline-size: 0; color: var(--steel); }
.dstand-today { color: var(--steel); }
.dstand-part[data-part="head"] { color: var(--carbon); font-weight: 600; }
.dstand-gain, .dstand-part[data-part="full"] { color: var(--earned); }
.dstand-gain { font-weight: 600; }
.dstand-tomorrow { color: var(--steel); }
@media (min-width: 720px) {
.dstand[data-variant="desk"] { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); column-gap: var(--s5); }
.dstand[data-variant="desk"] .dstand-hero { grid-column: 1; grid-row: 1 / span 2; }
.dstand[data-variant="desk"] .dstand-week { grid-column: 1; grid-row: 3; }
.dstand[data-variant="desk"] .dstand-level, .dstand[data-variant="desk"] .dstand-gift, .dstand[data-variant="desk"] .dstand-next { grid-column: 2; }
}
.dstand[data-variant="finish"], .dstand[data-variant="foot"] { gap: var(--s2); padding: var(--s3); }
.dstand[data-variant="finish"] .dstand-flame, .dstand[data-variant="foot"] .dstand-flame { inline-size: 2.75rem; block-size: 2.75rem; }
.dstand[data-variant="finish"] .dstand-run, .dstand[data-variant="foot"] .dstand-run { font-size: 2.25rem; }
.dstand[data-joined="true"] { --dstand-lead: 0; border-block-start: 0; border-start-start-radius: 0; border-start-end-radius: 0; padding-block-start: var(--s2); }
.dstand[data-variant="chip"] {
display: inline-flex; align-items: center; gap: var(--s2);
margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
color: var(--steel); font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.dstand[data-variant="chip"] .dstand-flame { inline-size: 1.1em; block-size: 1.1em; }
.dstand[data-variant="chip"] .dstand-level { flex: none; display: inline-block; inline-size: 44px; }
.dstand[data-variant="chip"] .dstand-level:empty { display: none; }
.dstand-nav {
flex: none; display: inline-flex; align-items: center; gap: 2px;
color: var(--on-play); font: 600 .875rem/1 var(--sans); font-variant-numeric: tabular-nums;
}
.dstand-nav[hidden] { display: none; }
.dstand-nav b { font-weight: 600; }
.dstand-nav .ic { inline-size: 1.25rem; block-size: 1.25rem; }
@media (max-width: 360px) {
.dstand-nav { gap: 1px; margin-inline-end: -2px; }
.dstand-nav .ic { inline-size: 1.125rem; block-size: 1.125rem; }
.dstand-nav:not([hidden]) ~ #nav-lang #nav-lang-code { display: none; }
}
.dstand-nav { --lamp-quiet: var(--on-play); }
.dstand-slot { min-inline-size: 0; }
.reach-card {
box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2);
inline-size: 100%; max-inline-size: 28rem; min-inline-size: 0; margin: var(--s2) auto var(--s4); padding: var(--s3) 0 0;
color: var(--carbon);
font-family: var(--sans); font-size: var(--type-meta); line-height: 1.45; text-align: start;
}
.reach-card > * { grid-column: 1 / -1; min-inline-size: 0; }
.reach-card p { margin: 0; max-inline-size: none; }
.reach-card > .reach-q { grid-column: 1; grid-row: 1; font-family: var(--serif); font-size: var(--type-body); line-height: 1.3; color: var(--carbon); }
.reach-card > .reach-later { grid-column: 2; grid-row: 1; }
.reach-hours, .reach-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.reach-hour {
flex: 1 1 0; min-inline-size: 56px; min-block-size: 44px; padding: 0 var(--s1);
border: 1px solid var(--rule); border-radius: var(--r-pill); background: none; color: var(--carbon);
font: 600 var(--type-meta)/1.2 var(--sans); font-variant-numeric: tabular-nums; cursor: pointer;
}
.reach-hour[aria-pressed="true"] { border-color: var(--carbon); background: var(--carbon); color: var(--galley); }
.reach-acts .btn, .reach-consent .btn { flex: 1 1 auto; margin: 0; text-decoration: none; }
.reach-consent { display: grid; gap: var(--s2); }
.reach-consent[hidden] { display: none; }
.reach-other { justify-self: start; color: var(--pencil); text-decoration: underline; text-underline-offset: 3px; }
.reach-words { color: var(--steel); }
.reach-said { color: var(--carbon); font-weight: 600; }
.reach-said:empty { display: none; }
.reach-card[data-done="true"] > :not(.reach-said) { display: none; }
#arrival-front.welcome { display:block; grid-template-areas:none; max-width:40rem; margin:clamp(16px,4vw,48px) auto 48px; padding:0 16px; }
.welcome-card { padding:clamp(20px,4vw,36px); border:1px solid var(--rule); border-radius:var(--r-dialog,14px); background:var(--paper); }
.welcome-brand { margin:0 0 6px; font:600 var(--type-meta)/1.4 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--pencil); }
.welcome-card h1 { margin:0 0 14px; font:600 clamp(1.6rem,4.5vw,2.3rem)/1.15 var(--serif); }
.welcome-lang { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:14px 0 18px; }
.welcome-lang > span { font:600 var(--type-meta)/1.4 var(--sans); color:var(--pencil); }
.welcome-lang select { min-height:40px; padding:6px 32px 6px 12px; border:1px solid var(--rule); border-radius:var(--r-control,8px); background:var(--paper); color:var(--carbon); font:600 var(--type-meta)/1.2 var(--sans); }
.welcome-ask { margin:0 0 12px; font:600 var(--type-body)/1.35 var(--sans); }
.welcome-levels { display:grid; gap:10px; }
.welcome-level { display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; min-height:64px; padding:14px 18px; border:1.5px solid var(--rule); border-radius:var(--r-surface,10px); background:var(--paper); color:var(--carbon); text-align:left; cursor:pointer; }
.welcome-level strong { font:600 var(--type-body)/1.3 var(--serif); }
.welcome-level span { font:400 var(--type-meta)/1.45 var(--sans); color:var(--pencil); }
.welcome-level em { font-style:normal; font-weight:700; color:var(--signal-ink); }
.welcome-level:hover, .welcome-level:focus-visible { border-color:var(--signal-ink); }
.welcome-level:focus-visible { outline:3px solid var(--signal-ink); outline-offset:2px; }
.welcome-free { margin:16px 0 0; font:500 var(--type-meta)/1.4 var(--sans); color:var(--pencil); }
#shelf .b-level, .b-vol .b-level { position:absolute; right:8px; bottom:8px; padding:2px 8px 3px; border-radius:var(--r-pill,999px); background:var(--paper); color:var(--carbon); border:1px solid var(--rule); font:700 11px/1.3 var(--sans); letter-spacing:.04em; }
@media (max-width: 620px) {
body > header .bar { padding: 6px 10px 0; row-gap: 2px; min-height: 0; align-items: center; }
body > header .bar .brand.wordmark, body > header .bar > .bar-rule { display: none; }
body > header .bar .nav-ident { margin-left: auto; }
body > header .bar .nav-ident .nav-light,
body > header .bar .nav-ident #nav-counter { display: none; }
body > header .bar .nav-ident { gap: 4px; flex-wrap: nowrap; align-items: center; }
body > header .bar .nav-ident button, body > header .bar .nav-ident .nav-lang { min-height: 36px; height: 36px; padding-block: 0; font-size: .78rem; }
body > header .bar .nav-ident .nav-gear { width: 36px; min-width: 36px; }
body > header .bar .nav-rooms button { padding-block: 8px 10px; }
}
.access-tiers { margin:14px 0 0; font:400 var(--type-meta)/1.5 var(--sans); }
.access-tiers > summary { min-height:40px; display:flex; align-items:center; cursor:pointer; font-weight:600; color:var(--signal-ink); }
.access-tiers dl { margin:6px 0 0; display:grid; gap:8px; }
.access-tiers dl > div { display:grid; grid-template-columns:minmax(7.5rem,max-content) 1fr; gap:4px 12px; }
.access-tiers dt { font-weight:700; color:var(--carbon); }
.access-tiers dd { margin:0; color:var(--pencil); }
.access-tiers > p { margin:8px 0 0; color:var(--pencil); }
@media (max-width: 480px) { .access-tiers dl > div { grid-template-columns:1fr; } }
#library-tiers { max-width:44rem; }
.welcome-path { list-style:none; counter-reset:step; display:grid; gap:10px; margin:0 0 22px; padding:0; }
.welcome-path li { counter-increment:step; display:grid; grid-template-columns:28px 1fr; column-gap:12px; align-items:baseline; }
.welcome-path li::before { content:counter(step); grid-row:span 2; display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--signal-ink); color:var(--paper); font:700 .8rem/1 var(--sans); align-self:start; }
.welcome-path strong { font:600 var(--type-body)/1.3 var(--sans); color:var(--carbon); }
.welcome-path span { font:400 var(--type-meta)/1.45 var(--sans); color:var(--pencil); }
.welcome-card { position: relative; }
.welcome-mate { float: right; width: 132px; height: 132px; margin: -6px -6px 4px 14px; }
.welcome-mate:empty { display: none; }
@media (max-width: 480px) { .welcome-mate { width: 92px; height: 92px; margin: -6px -8px 0 8px; } }
@media (max-width: 480px) {
#arrival-front.welcome { margin-top: 10px; padding: 0 10px; }
.welcome-card { padding: 14px 16px; }
.welcome-brand { display: none; }
.welcome-card h1 { margin-bottom: 8px; font-size: 1.32rem; }
.welcome-ask { margin-bottom: 8px; }
.welcome-levels { gap: 8px; }
.welcome-level { min-height: 0; padding: 9px 14px; }
}
#readbar .inner { position: relative; }
#readbar .rb-more { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
#readbar .rb-extra { display: none; position: absolute; bottom: 100%; right: 8px; z-index: 2;
background: var(--paper); border: 1px solid var(--rule); border-bottom: none;
border-radius: var(--r-surface, 10px) var(--r-surface, 10px) 0 0; padding: 10px 12px; gap: 8px;
flex-wrap: wrap; justify-content: flex-end; align-items: center;
box-shadow: 0 -6px 18px rgba(0, 0, 0, .10); max-width: min(92vw, 34rem); }
#readbar.rb-open .rb-extra { display: flex; }
#readbar .rb-extra .icon-btn { color: var(--carbon); }
.rd-sprint-door.is-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 14px; padding: 0; border: 0; background: none; box-shadow: none; font: 400 var(--type-meta)/1.5 var(--sans); color: var(--pencil); }
.rd-sprint-door.is-line span { flex: 0 1 auto; }
.rd-sprint-door.is-line .link-btn { padding: 0; border: 0; background: none; color: var(--signal-ink); font: 700 var(--type-meta)/1.5 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot-next-real { margin: 18px 0 0; }
@media (min-width: 561px) {
#readbar .rb-extra { right: auto; left: 0; width: max-content; flex-wrap: nowrap; }
}
.desk-way { margin: 16px 0; }
.desk-way > .smallcaps { margin: 0 0 8px; }
.desk-way ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.desk-way button { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; border: 1px solid var(--rule); border-radius: var(--r-surface, 10px); background: var(--paper); color: var(--carbon); text-align: left; cursor: pointer; }
.desk-way button:hover, .desk-way button:focus-visible { border-color: var(--signal-ink); }
.desk-way .dw-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--signal-ink); color: var(--paper); font: 700 .82rem/1 var(--sans); }
.desk-way .dw-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.desk-way .dw-copy strong { font: 600 var(--type-body)/1.3 var(--sans); }
.desk-way .dw-copy span { font: 400 var(--type-meta)/1.45 var(--sans); color: var(--pencil); overflow-wrap: anywhere; }
.desk-way .dw-go { color: var(--signal-ink); font-weight: 700; }
#v-home :is(.shelf-news, .member-nudge) { max-width: 1040px; margin: 16px auto 0; }
#v-home :is(.shelf-news, .member-nudge) .lnk { padding: 0 4px; border: 0; background: none; color: var(--pencil); font: 600 var(--type-meta)/1.5 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ic-glyph { display: inline-flex; align-items: center; vertical-align: -0.15em; line-height: 1; }
.ic-glyph .ic { width: 1.05em; height: 1.05em; stroke-width: 1.9; }
.ic-glyph.ic-trail { margin-left: .32em; }
.ic-glyph.ic-lead { margin-right: .32em; }
.parts-meter { display: flex; gap: 4px; width: 100%; max-width: 22rem; }
.parts-meter i { flex: 1 1 0; height: 6px; min-width: 6px; border-radius: var(--r-pill); background: var(--rule); }
.parts-meter i.is-read { background: var(--play); }
.parts-meter i.is-here { background: var(--reward); box-shadow: inset 0 0 0 1px var(--reward-deep); }
#reading-route.wayfinder { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "back where contents" "meter meter meter"; align-items: center; gap: 8px 14px; padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid var(--rule); }
.wayfinder .wf-link { grid-area: back; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--carbon); font: 600 var(--type-meta, .85rem)/1.3 var(--sans); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.wayfinder .wf-link:hover, .wayfinder .wf-link:focus-visible { text-decoration-color: currentColor; }
.wayfinder .wf-link .ic { width: 18px; height: 18px; }
.wayfinder .wf-contents { grid-area: contents; justify-self: end; }
.wayfinder .wf-where { grid-area: where; display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.wayfinder .wf-book { font: 600 var(--type-meta, .85rem)/1.3 var(--sans); color: var(--carbon); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.wayfinder .wf-part { font: 400 var(--type-meta, .85rem)/1.3 var(--sans); color: var(--pencil); }
.wayfinder .parts-meter { grid-area: meter; justify-self: center; }
@media (max-width: 480px) {
#reading-route.wayfinder { grid-template-columns: 1fr auto; grid-template-areas: "where where" "meter meter" "back contents"; gap: 6px 12px; }
.wayfinder .wf-where { align-items: flex-start; text-align: left; }
.wayfinder .parts-meter { justify-self: start; max-width: none; }
}
.part-end .pe-where { margin: 0 0 8px; }
.part-end > .parts-meter { margin: 0 0 4px; }
.part-end .pe-next { margin: 12px 0 4px; font: italic 400 var(--type-body, 1rem)/1.5 var(--serif); color: var(--pencil); }
.part-end #seal-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.part-end .pe-next-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; min-height: 60px; padding: 12px 18px; }
.part-end .pe-next-label { display: block; text-align: center; }
.part-end .pe-next-sub { font: 500 .8rem/1.2 var(--sans); opacity: .78; }
.part-end .pe-contents { display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: center; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--carbon); font: 600 var(--type-meta, .85rem)/1.3 var(--sans); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; cursor: pointer; }
.part-end .pe-contents .ic { width: 18px; height: 18px; }
.part-end .pe-more { margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 8px; }
.part-end .pe-more > .smallcaps { margin: 0 0 2px; color: var(--pencil); }
.part-end .pe-more .reader-chapter-course { margin: 0; order: 1; }
.part-end .pe-more .mission-reading-door { order: 2; }
.part-end .pe-more > .smallcaps { order: 0; }
.part-end .pe-more :is(.reader-chapter-course button, .mission-reading-door) { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; margin: 0; padding: 12px 16px; border: 1px solid var(--rule); border-radius: var(--r-surface, 10px); background: var(--paper); box-shadow: none; color: var(--carbon); font: 600 var(--type-meta, .9rem)/1.35 var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
.part-end .pe-more :is(.reader-chapter-course button, .mission-reading-door):hover { border-color: var(--play); }
.return-pill { position: fixed; z-index: 28; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(calc(100vw - 32px), 30rem); min-height: 56px; padding: 10px 16px; border: 1px solid var(--play-deep); border-radius: var(--r-surface, 12px); background: var(--play); color: var(--on-play); box-shadow: 0 8px 24px rgba(10, 20, 40, .22); text-align: left; cursor: pointer; }
.return-pill[hidden] { display: none; }
.return-pill .ic { flex: 0 0 auto; width: 22px; height: 22px; }
.return-pill .rp-copy { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.return-pill .rp-act { font: 700 .95rem/1.25 var(--sans); }
.return-pill .rp-where { font: 400 .82rem/1.3 var(--sans); opacity: .86; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.return-pill:hover, .return-pill:focus-visible { background: var(--play-deep); }
body.has-return-pill { padding-bottom: 84px; }
.rd-ch { scroll-margin-top: 116px; }
#v-review:is(:not(.practice-lobby), .practice-active, .practice-finished) > .practice-head { display: none; }
#word-filters { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; align-items: stretch; }
#word-filters button { padding: .5rem .35rem; text-align: center; }
#word-filters input { grid-column: 1 / -1; width: 100%; min-width: 0; margin: 4px 0 0; }
@media (min-width: 700px) {
#word-filters { grid-template-columns: repeat(4, auto) minmax(12rem, 1fr); }
#word-filters input { grid-column: auto; margin: 0 0 0 6px; }
}
#v-review #practice-rewards .practice-progress.is-unopened { display: none; }
body.has-return-pill .learning-source { display: none; }
#v-review .daily-top { justify-content: flex-end; }
#shelf .shelf-band { grid-column: 1 / -1; flex: 0 0 100%; margin: 18px 0 2px; padding: 0 0 8px; border-bottom: 1px solid var(--rule); }
#shelf .shelf-band:first-child { margin-top: 0; }
#shelf .shelf-band[hidden] { display: none; }
#shelf .shelf-band h3 { margin: 0; font: 600 1.15rem/1.3 var(--serif); color: var(--carbon); }
#shelf .shelf-band p { margin: 2px 0 0; font: 400 var(--type-meta, .88rem)/1.45 var(--sans); color: var(--pencil); }
:root .gesture-invite::before { content: ''; display: inline-block; width: 1.1em; height: 1.1em; margin-right: .35em; vertical-align: -0.2em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.7 14.3 C5.1 13.1 4.3 11.7 4.1 10.1'/%3E%3Cpath d='M8.5 13.7 L8.5 6.9'/%3E%3Cpath d='M11.3 13.3 L11.3 5.5'/%3E%3Cpath d='M14.1 13.5 L14.1 6.3'/%3E%3Cpath d='M16.9 14.1 L16.9 8.1'/%3E%3Cpath d='M6.7 14.3 C6.3 16.4 6.7 18.3 8.1 19.9 C10.9 21.2 14.5 20.9 16.3 19.1 C17.7 17.7 17.9 16 17.7 13.9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.7 14.3 C5.1 13.1 4.3 11.7 4.1 10.1'/%3E%3Cpath d='M8.5 13.7 L8.5 6.9'/%3E%3Cpath d='M11.3 13.3 L11.3 5.5'/%3E%3Cpath d='M14.1 13.5 L14.1 6.3'/%3E%3Cpath d='M16.9 14.1 L16.9 8.1'/%3E%3Cpath d='M6.7 14.3 C6.3 16.4 6.7 18.3 8.1 19.9 C10.9 21.2 14.5 20.9 16.3 19.1 C17.7 17.7 17.9 16 17.7 13.9'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 480px) {
#v-home.desk-focused #room-door { gap: 2px; flex-wrap: wrap; overflow: visible; }
#v-home.desk-focused #room-door .room-language { padding: 8px 7px; font-size: .82rem; }
}
#v-review .practice-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#v-review .practice-modes button { padding-left: .5rem; padding-right: .5rem; text-align: center; }
.lesson-audio-pair { white-space: nowrap; }
button:is(.lnk, .link-btn) { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border: 0; background: none; box-shadow: none; color: var(--pencil); font: 600 var(--type-meta, .88rem)/1.3 var(--sans); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; cursor: pointer; }
button:is(.lnk, .link-btn):hover { color: var(--carbon); text-decoration-color: currentColor; }
:is(h1, h2, h3, h4, [role="heading"])[tabindex="-1"]:focus-visible { outline: none; }
.w.w-ring { display: inline-block; }
#scene-head .before-read, #v-story .before-read, #locked-panel .before-read { max-width:34rem; margin:14px auto 0; text-align:left; font:400 var(--type-meta,.875rem)/1.55 var(--sans); color:var(--ink-2,var(--steel)); }
#scene-head .before-read summary, #v-story .before-read summary, #locked-panel .before-read summary { cursor:pointer; font-weight:600; color:var(--ink); list-style:none; display:inline-flex; gap:6px; align-items:center; }
#scene-head .before-read summary::-webkit-details-marker, #v-story .before-read summary::-webkit-details-marker, #locked-panel .before-read summary::-webkit-details-marker { display:none; }
#scene-head .before-read summary::before, #v-story .before-read summary::before, #locked-panel .before-read summary::before { content:'+'; font-weight:400; }
#scene-head .before-read[open] summary::before, #v-story .before-read[open] summary::before, #locked-panel .before-read[open] summary::before { content:'−'; }
#scene-head .before-read p, #v-story .before-read p, #locked-panel .before-read p { margin:8px 0 0; }
#desk-promise { margin: 0 0 12px; font: 400 clamp(1rem, .95rem + .3vw, 1.15rem)/1.4 var(--serif); color: var(--pencil); }
#desk-today { margin-block-end: var(--s3); }
@media (max-width: 560px) {
#v-home[data-returning="true"] > .masthead { margin-block-start: var(--s3); }
#v-home[data-returning="true"] .desk-intro { position: relative; }
#v-home[data-returning="true"] #desk-promise { display: none; }
#v-home[data-returning="true"] #desk-howto {
position: absolute; inset-block-start: 0; inset-inline-end: 0;
box-sizing: border-box; inline-size: 2.75rem; block-size: 2.75rem; margin: 0; padding: 0;
justify-content: center;
}
#v-home[data-returning="true"] #desk-howto > span {
position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
#v-home[data-returning="true"] .desk-host-meta, #v-home[data-returning="true"] .desk-host-track { display: none; }
}
#locked-panel .lc-ways { flex-wrap: wrap; align-items: center; gap: 12px 18px; }
#locked-panel .lc-ways .link-btn { display: inline-flex; align-items: center; gap: 6px; }
#locked-panel .lc-ways .ic { width: 18px; height: 18px; }
.first-step { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 14px 0 0; }
.first-step .btn { flex: 1 1 auto; width: auto; margin: 0; }
.daily-copy .first-step, .practice-start-actions .first-step { justify-content: flex-start; margin: 10px 0 0; }
#v-library .lib-spread:has(#resume-hero[hidden]) { display: none; }
#v-library #bench-sect { margin-top: 18px; }
#shelf-controls { margin-bottom: 12px; }
#v-library #bench-sect > .sect-head { display: none; }
@media (max-width: 640px) {
#shelf-controls { gap: 8px; }
#shelf-controls label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 375px) and (max-width: 640px) { #shelf-controls .shelf-filters { flex-wrap: nowrap; } }
.reading-contents footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
#text .w { scroll-margin-block: 120px; }
#text .w:focus-visible { outline: 2px solid var(--carbon); outline-offset: 2px; border-radius: 2px; }
#pop:focus { outline: none; }
.fin-offer { margin: 14px 0 12px; padding: 14px 0 2px; border-top: 1px solid var(--rule); }
.fin-offer .fin-door { margin: 0 0 12px; }
#room-plate { text-transform: uppercase; }
.profile-progress { margin: var(--s5) 0 0; }
.profile-progress h3 { margin: 0 0 var(--s2); font: 400 var(--t-4)/1.2 var(--serif); }
#desk-details { margin: var(--s4) 0 0; }
#desk-details:not([open]) { border-bottom: 1px solid var(--rule); }
#v-profile .study-rhythm > summary, #desk-details > summary { font: 600 1rem/1.4 var(--sans); }
#desk-details .friend-strip:not(:has(.ask-card)) { display: none; }
.daily-line mark.daily-hi { padding: 0 .12em; border-radius: var(--r-bar); background: var(--reward-tint); color: inherit; box-shadow: inset 0 -2px 0 var(--reward); }
.lesson-idea .lesson-grammar { margin-top: 10px; }
.lesson-idea .lesson-grammar > summary { color: var(--play); }
.lesson-idea .lesson-grammar > p { margin: 8px 0 0; color: var(--carbon); }
.theatre-discovery .theatre-grammar { margin: 4px 0 14px; }
.theatre-discovery .theatre-grammar > summary { color: var(--play); }
.theatre-discovery .theatre-grammar > p { margin: 8px 0 0; color: var(--carbon); }
.learn-path { margin: 22px 0 18px; padding: 18px 0 0; border-top: 1px solid var(--rule); }
.learn-path .learn-path-head { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; position: static; }
.learn-path-head h2 { margin: 2px 0 2px; font: 600 1.35rem/1.25 var(--serif); color: var(--carbon); }
.learn-path-head p { margin: 0; font: 400 var(--type-meta, .88rem)/1.4 var(--sans); color: var(--pencil); }
.learn-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; margin: 12px 0 6px; }
.learn-levels .learn-level { display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 52px; padding: 6px 4px; border: 1px solid var(--rule); border-radius: var(--r-control); background: var(--paper); color: var(--carbon); cursor: pointer; }
.learn-levels .learn-level b { font: 700 1rem/1.2 var(--sans); }
.learn-levels .learn-level span { font: 500 .74rem/1.2 var(--sans); color: var(--pencil); }
.learn-levels .learn-level.is-here { border-color: var(--play); box-shadow: inset 0 -3px 0 var(--reward); }
.learn-levels .learn-level.is-done b::after { content: ''; display: inline-block; width: .5em; height: .5em; margin-left: .3em; border-radius: var(--r-pill); background: var(--right); vertical-align: .1em; }
#desk-progress-plain .pp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 12px 0; }
#desk-progress-plain .pp-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-surface, 10px); background: var(--paper); }
#desk-progress-plain .pp-tile b { font: 700 1.4rem/1.1 var(--sans); color: var(--carbon); }
#desk-progress-plain .pp-tile span { font: 500 var(--type-meta, .85rem)/1.3 var(--sans); color: var(--pencil); }
.practice-write { display:flex; align-items:flex-start; gap:10px; max-width:440px; margin:14px auto; padding:10px 12px; border:1px solid var(--rule); border-radius:var(--r-surface); background:var(--card); text-align:left; cursor:pointer; }
.practice-write input { -webkit-appearance:none; appearance:none; flex:none; display:grid; place-content:center; width:22px; height:22px; margin:0; border:2px solid var(--carbon); border-radius:var(--r-control); background:transparent; cursor:pointer; }
.practice-write input::after { content:""; width:6px; height:11px; margin-top:-2px; border:solid var(--card); border-width:0 2.5px 2.5px 0; transform:rotate(45deg); opacity:0; }
.practice-write input:checked { background:var(--carbon); }
.practice-write input:checked::after { opacity:1; }
.practice-write input:focus-visible { outline:3px solid var(--signal-ink,var(--carbon)); outline-offset:2px; }
.practice-write span { display:grid; gap:2px; min-width:0; }
.practice-write strong { font:600 .92rem/1.3 var(--sans); color:var(--carbon); }
.practice-write small { font:400 .8rem/1.4 var(--sans); color:var(--pencil); }
.daily-copy .practice-write { margin:12px 0; }
.practice-skip { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 14px; margin-top:6px; }
.practice-skip[hidden] { display:none; }
.practice-skipped { display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; margin:4px 0; font:400 .84rem/1.4 var(--sans); color:var(--pencil); }
.daily-skip { margin-top:6px; }
.daily-wrote { margin:4px 0; font:400 .88rem/1.4 var(--sans); color:var(--pencil); overflow-wrap:anywhere; }
.add-word { max-width:440px; margin:14px auto; text-align:left; }
.add-word > summary { min-height:44px; display:flex; align-items:center; font:600 .88rem/1.3 var(--sans); color:var(--pencil); cursor:pointer; }
.add-word-form, .add-word-own { display:grid; gap:6px; margin-top:4px; }
.add-word label { font:400 .84rem/1.4 var(--sans); color:var(--pencil); }
.add-word-row { display:flex; gap:8px; min-width:0; }
.add-word-row input { flex:1 1 auto; min-width:0; min-height:44px; padding:8px 10px; border:1px solid var(--rule); border-radius:var(--r-surface); background:var(--card); color:var(--carbon); font:400 1rem/1.3 var(--serif); }
.add-word-row .btn { flex:none; }
.add-word-result:not(:empty) { margin-top:10px; font:400 .9rem/1.45 var(--sans); color:var(--carbon); overflow-wrap:anywhere; }
.add-word-result p { margin:6px 0; }
.add-word-hits { display:grid; gap:8px; margin:8px 0; padding:0; list-style:none; }
.add-word-hits li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; padding:8px 10px; border:1px solid var(--rule); border-radius:var(--r-surface); background:var(--card); }
.add-word-head { display:grid; gap:1px; min-width:0; flex:1 1 160px; }
.add-word-head b { font:600 1.05rem/1.3 var(--serif); }
.add-word-head small { color:var(--pencil); }
.add-word-done { font-weight:600; }
#words-add .add-word { margin:6px 0 10px; max-width:none; }
[tabindex="-1"]:not(a, button, input, select, textarea, summary):focus-visible { outline: none; }
.lesson-person:not(.is-speaking) { opacity: 1; filter: saturate(.8); }
.gx-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.gx-top > .gx-topic, .gx-stage .gx-top > .gx-topic, .gx-stage.wk-stage .gx-top > .gx-topic { flex: 1 1 14rem; min-width: 0; }
.gx-top .wk-top-actions { margin-left: auto; display: flex; gap: var(--s2); align-items: center; }
@media (max-width: 560px) { .gx-top > .gx-topic, .gx-stage .gx-top > .gx-topic, .gx-stage.wk-stage .gx-top > .gx-topic { flex-basis: 100%; } }
.wk-scene-tabs, .learn-levels {
background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
padding: 0; box-shadow: none; display: flex; flex-wrap: wrap; gap: 0 var(--s1);
}
.wk-scene-tabs > button, .learn-levels .learn-level {
background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
box-shadow: none; margin: 0 0 -1px; padding: 10px 12px; min-height: 44px;
font: 500 var(--type-control)/1.25 var(--sans); color: var(--steel);
}
.wk-scene-tabs > button:hover, .learn-levels .learn-level:hover { color: var(--carbon); background: transparent; }
.wk-scene-tabs > button[aria-pressed="true"], .learn-levels .learn-level[aria-pressed="true"], .learn-levels .learn-level.is-here {
color: var(--carbon); font-weight: 600; border-bottom-color: var(--signal); background: transparent; box-shadow: none;
}
@media (max-width: 560px) {
.wk-scene-tabs { flex-wrap: nowrap; gap: 0; }
.wk-scene-tabs > button { flex: 1 1 0; min-width: 0; padding: 10px 2px; white-space: nowrap; }
}
#word-filters > input[type="search"] { flex: 1 0 100%; margin: var(--s3) 0 var(--s2); }
#wk-sound, #wk-leave, .guide-again, .gx-quit {
background: transparent; border: 1px solid color-mix(in srgb, var(--carbon) 30%, transparent);
border-radius: var(--r-control); box-shadow: none; min-height: 40px; padding: 6px 12px;
font: 600 var(--type-meta)/1.2 var(--sans); color: var(--carbon);
}
#wk-sound:hover, #wk-leave:hover, .guide-again:hover, .gx-quit:hover { border-color: var(--carbon); background: transparent; }
.gx-adventure .gx-opt, .wk-options .gx-opt, .gx-stage .gx-opt { border-radius: var(--r-surface); box-shadow: none; }
.gx-adventure .gx-opt:not(.gx-right):not(.gx-wrong):not(.gx-assisted),
.wk-options .gx-opt:not(.gx-right):not(.gx-wrong):not(.gx-assisted) { background: var(--galley); border-color: var(--rule); }
.gx-opt:not(:disabled):not([class*="is-"]):hover {
border-color: color-mix(in srgb, var(--carbon) 45%, transparent);
background: color-mix(in srgb, var(--signal) 8%, var(--galley));
}
.daily-invitation { border-top-width: 1px; border-top-color: var(--rule); box-shadow: none; }
.course-volume-heading { background: transparent; }
.grammar-lens {
background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0;
padding: var(--s4) 0 0; box-shadow: none;
}
.lens-sentence mark, .grammar-lens mark {
background: color-mix(in srgb, var(--signal) 32%, transparent); color: inherit;
border-bottom: 2px solid var(--signal-ink); border-radius: var(--r-bar); padding: 0 3px;
}
.gx-stage .lesson-audio-choice-row > button { box-shadow: none; }
#v-course .chapter-stop { min-height: 0; padding: 0; }
#v-course .chapter-stop::before { display: none; }
#v-course .chapter-journey .chapter-stop .chapter-go {
min-height: 0; padding: 12px 6px; gap: 16px; grid-template-columns: 40px minmax(0, 1fr);
border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; box-shadow: none;
}
#v-course .chapter-journey .chapter-stop.is-current .chapter-go {
margin: 4px 0 10px; padding: 18px 84px 18px 16px;
border: 1px solid color-mix(in srgb, var(--signal-ink) 55%, transparent); border-radius: var(--r-surface);
background: color-mix(in srgb, var(--signal) 10%, var(--galley));
}
#v-course .chapter-stop .chapter-book { width: 32px; height: 40px; font-size: var(--type-body); box-shadow: none; }
#v-course .chapter-stop.is-current .chapter-book { width: 40px; height: 50px; }
#v-course .chapter-stop.is-ahead .chapter-label small { display: none; }
#v-course .chapter-stop .chapter-label strong { font-weight: 500; }
@media (max-width: 600px) {
#v-course .chapter-journey .chapter-stop.is-current .chapter-go { padding-right: 56px; }
}
#v-course .learn-levels .learn-level[aria-pressed="true"], #v-course .learn-levels .learn-level.is-here { background: transparent; }
#v-course .chapter-stop.is-current .chapter-label strong { font-size: var(--t-4); line-height: 1.25; }
#v-course .chapter-stop.is-current .chapter-label > span { font-size: var(--type-meta); color: var(--steel); margin-top: 6px; }
.wk-task-heading .smallcaps {
text-transform: none; letter-spacing: 0; font: 500 var(--t-3)/1.35 var(--serif); color: var(--carbon);
}
.wk-line .wk-filled {
display: inline-block; padding: 0 2px; border-bottom: 2px solid var(--malachite);
animation: wk-fill var(--mo-fill) var(--mo-e-reward) both;
}
.wk-line .wk-filled.is-shown { border-bottom-color: var(--signal-ink); }
.wk-line .wk-struck {
color: var(--wax); text-decoration: line-through; text-decoration-thickness: 1px;
font-style: italic; opacity: .85;
}
@keyframes wk-fill { from { opacity: 0; transform: translateY(.25em); } }
html[data-motion="low"] .wk-line .wk-filled { animation: none; }
.gt-grid .gt-table.gt-paradigm { grid-column: 1 / -1; }
.gt-paradigm thead th { text-align: left; font: 600 var(--type-control)/1.3 var(--serif); color: var(--carbon); padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.gt-paradigm thead th .gt-meaning, .gt-paradigm thead th .gt-note { display: block; font: 400 var(--type-meta)/1.3 var(--sans); color: var(--steel); }
.gt-paradigm tbody th { color: var(--steel); font-weight: 500; }
.gt-paradigm .gt-who { white-space: nowrap; }
.gt-paradigm table { width: auto; min-width: min(100%, 26rem); }
.gt-paradigm table tbody th { width: auto; }
@media (min-width: 561px) { .gt-paradigm th + th, .gt-paradigm td { padding-right: var(--s5); } }
.gt-drill-ask .gt-drill-verb { color: var(--steel); font-style: italic; }
@media (max-width: 560px) {
.gt-grid .gt-table { padding: 12px 0 8px; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: transparent; }
.gt-paradigm th, .gt-paradigm td { padding: 6px 4px; }
.gt-paradigm table tbody th { padding-right: 8px; }
.gt-paradigm.is-tight table tbody th { white-space: normal; min-width: 4.5em; }
}
.word-sample, .practice-sample { margin: 0 auto var(--s4); max-width: 26rem; text-align: left; }
.word-sample figcaption, .practice-sample figcaption { margin-bottom: var(--s2); color: var(--steel); }
.word-sample-row {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s3); align-items: center;
padding: var(--s3) var(--s4); border: 1px dashed color-mix(in srgb, var(--carbon) 28%, transparent);
border-radius: var(--r-surface); background: var(--galley);
}
#v-words .word-sample-row .wf { min-height: 0; font: 500 var(--t-3)/1.25 var(--serif); color: var(--carbon); cursor: default; }
.word-sample-row .wg { grid-column: 1; color: var(--steel); }
.word-sample-row .warmbar { grid-column: 2; grid-row: 1 / span 2; width: 52px; }
.word-sample-row .wg small { display: block; margin-top: 2px; font-size: var(--type-meta); }
.practice-sample { align-self: center; width: 100%; margin: 0; }
.practice-sample-word { margin: 0 0 var(--s3); font: 500 var(--t-4)/1.2 var(--serif); color: var(--carbon); }
.practice-sample-options { display: grid; gap: var(--s2); }
.practice-sample .gx-opt {
min-height: 44px; padding: 8px 14px; text-align: left; font: 500 var(--type-control)/1.3 var(--sans);
border: 1px solid var(--rule); border-radius: var(--r-surface); background: var(--galley); box-shadow: none; color: var(--carbon);
}
.practice-sample .gx-opt.is-right { opacity: 1; border-color: var(--malachite); background: color-mix(in srgb, var(--malachite) 12%, var(--galley)); }
.practice-sample .gx-opt.is-wrong { opacity: 1; border-color: color-mix(in srgb, var(--wax) 50%, transparent); background: color-mix(in srgb, var(--wax) 8%, var(--galley)); }
#v-review .practice-modes button, .shelf-filters button, #word-filters button, .k-tabs button { flex-shrink: 0; white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 420px) {
#v-review .practice-modes button, .shelf-filters button, #word-filters button, .k-tabs button { padding-left: .45rem; padding-right: .45rem; }
}
.sd-mark:not(.is-filled) {
background: transparent;
border-color: color-mix(in srgb, var(--run-ink, var(--rank-brass)) 22%, transparent);
}
.wk-done-lines { display: grid; gap: 8px; margin: var(--s1) 0 var(--s2); padding-left: var(--s4); border-left: 2px solid var(--rule); }
.wk-done .wk-done-lines p { margin: 0; font: 400 var(--t-3)/1.45 var(--serif); color: var(--carbon); animation: wk-fill var(--mo-fill) var(--mo-e-reward) both; }
.wk-done .wk-done-lines .wk-done-means { display: block; font: 400 var(--type-meta)/1.4 var(--sans); color: var(--steel); }
.wk-done .wk-done-lines p:nth-child(2) { animation-delay: calc(var(--mo-fill) / 2); }
.wk-done .wk-done-lines p:nth-child(n+3) { animation-delay: var(--mo-fill); }
.wk-done-lines mark {
background: color-mix(in srgb, var(--signal) 32%, transparent); color: inherit;
border-bottom: 2px solid var(--signal-ink); border-radius: var(--r-bar); padding: 0 2px;
}
html[data-motion="low"] .wk-done .wk-done-lines p { animation: none; }
@media (max-width: 560px) { .wk-done .wk-done-lines p { font-size: var(--t-2); } .wk-done-lines { padding-left: var(--s3); } }
.living-finish h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.living-finish .living-finish-phrase {
display: block; margin: var(--s3) auto 0; padding: 0; max-width: 18ch; background: transparent; border-radius: 0;
font: 400 clamp(2rem, 5vw, 3rem)/1.15 var(--serif); color: var(--carbon); text-wrap: balance;
}
.living-finish > p.living-finish-meaning { margin: var(--s2) auto var(--s4); font: 400 var(--type-body)/1.4 var(--sans); color: var(--steel); }
.living-due strong {
padding: 4px 12px; background: transparent; color: var(--carbon);
border: 1px solid var(--rule); border-radius: var(--r-pill);
}
@media (min-width: 360px) and (max-width: 560px) {
body > header .bar .brand.wordmark {
display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
gap: 0; margin: 0; padding: 0; min-width: 0;
}
body > header .bar .brand.wordmark .wm-l, body > header .bar .brand.wordmark .wm-t { font-size: 11px; line-height: 1; }
body > header .bar.no-mark .brand.wordmark { display: none; }
}
.lesson-theatre .theatre-earlier { margin: 0 0 var(--s2); padding: var(--s3) var(--s4) 0; list-style: none; display: grid; gap: 4px; }
.lesson-theatre .theatre-earlier li { font: 400 var(--type-control)/1.4 var(--serif); color: var(--steel); }
.lesson-theatre .theatre-earlier b { font: 600 var(--t-00)/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; margin-right: 6px; }
.lesson-theatre[data-look="0"] .theatre-speaker::before { background: #426e70; }
.lesson-theatre[data-look="1"] .theatre-speaker::before { background: #c37a55; }
.gt-table .gt-form.is-covered { position: static; color: transparent; background: linear-gradient(to top, var(--rule) 1px, transparent 1px) no-repeat 8px calc(100% - 9px) / 3.2em 100%; }
.gt-table .gt-form.is-covered::after { content: none; }
.gt-table .gt-form.is-covered .lesson-audio-word { border-bottom-color: transparent; }
.gt-table .gt-form.is-asked { background: linear-gradient(to top, var(--signal-ink) 2px, transparent 2px) no-repeat 8px calc(100% - 9px) / 3.2em 100%, color-mix(in srgb, var(--signal) 14%, transparent); }
.gt-drill-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--s2); }
.gt-drill-options > * { min-width: 0; }
.gt-drill-options .lesson-audio-choice-row { display: flex; align-items: stretch; gap: 4px; }
.gt-drill-options .lesson-audio-choice-row > button { flex: 1 1 auto; }
@media (min-width: 761px) {
.gt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.gt-grid > .gt-table.gt-paradigm, .gt-grid > .gt-table.is-wide { grid-column: 1 / -1; }
}
@media (min-width: 761px) {
.gt-grid > .gt-table:only-child { grid-column: 1 / -1; }
}
.gt-table figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center; }
.gt-table figcaption > strong { grid-column: 1; }
.gt-table figcaption > .gt-meaning { grid-column: 1; grid-row: 2; }
.gt-table figcaption > .gt-drill-go { grid-column: 2; grid-row: 1 / span 2; margin-left: 0; }
.gt-table:has(.gt-gloss) table tbody th { width: auto; white-space: normal; min-width: 7em; max-width: 13em; }
@media (max-width: 560px) {
.gt-table:has(.gt-gloss) table, .gt-table:has(.gt-gloss) tbody { display: block; }
.gt-table:has(.gt-gloss) thead { display: none; }
.gt-table:has(.gt-gloss) tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.gt-table:has(.gt-gloss) tr:last-child { border-bottom: 0; }
.gt-table:has(.gt-gloss) tbody th, .gt-table:has(.gt-gloss) tbody td { display: block; width: auto; max-width: none; padding: 0; border: 0; white-space: normal; }
.gt-table:has(.gt-gloss) tbody th { font-size: var(--type-meta); color: var(--steel); }
.gt-table:has(.gt-gloss) .gt-gloss { color: var(--steel); font-size: var(--type-meta); }
}
.wk-teach { display: grid; gap: var(--s3); margin: var(--s3) 0 var(--s5); padding: var(--s4) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.wk-builds { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; }
.wk-builds .smallcaps { margin-right: var(--s1); }
.wk-build { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; max-width: 100%; min-height: 36px; padding: 6px 14px; border: 1px solid var(--rule); border-radius: var(--r-control); background: transparent; text-align: left; font: 500 var(--type-meta)/1.3 var(--sans); color: var(--carbon); cursor: pointer; }
.wk-build:hover { border-color: var(--carbon); }
.wk-build.is-done { border-color: color-mix(in srgb, var(--malachite) 45%, var(--rule)); }
.wk-build.is-done svg { color: var(--malachite); }
.wk-build small { font: 400 var(--t-00)/1.2 var(--sans); color: var(--steel); }
.wk-build svg { align-self: center; }
.wk-key { display: grid; gap: 6px; }
.wk-key strong { font: 500 var(--t-3)/1.3 var(--serif); color: var(--carbon); }
.wk-key p { margin: 0; font: 400 var(--type-body)/1.55 var(--sans); color: var(--carbon); max-width: 62ch; }
.wk-key [lang] { font-family: var(--serif); font-weight: 500; }
.wk-steps-head { display: block; margin: 0 0 var(--s2); }
.gt-drill-options button { color: var(--carbon); }
#v-review .daily-line .wk-blank.is-corrected { color: var(--carbon); border-bottom-color: var(--signal-ink); }
@media (max-width: 560px) {
#word-filters { display: flex; flex-wrap: wrap; gap: 0 2px; }
#word-filters > input[type="search"] { flex: 1 0 100%; }
}
#v-review .daily-more .daily-next-route { gap: 2px; margin: 4px 0 8px; }
#v-review .daily-more .daily-next-route li { padding: 4px 0; border: 0; border-radius: 0; background: transparent; color: var(--steel); }
#v-review .daily-more .daily-next-route small { color: var(--steel); }
#rev-card .cloze-en { margin: 6px auto 0; max-width: 46ch; font: 400 var(--type-meta)/1.45 var(--sans); color: var(--steel); text-align: inherit; }
.gt-table th .gt-label { display: block; margin-top: 2px; font: 400 var(--t-00)/1.3 var(--sans); color: var(--steel); letter-spacing: 0; text-transform: none; }
.gchip { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--rule); border-radius: var(--r-control);
background: transparent; font: 500 var(--type-meta)/1.35 var(--sans); letter-spacing: 0; text-transform: none; color: var(--carbon); text-align: left; cursor: pointer; }
.gchip:hover, .gchip:focus-visible { border-color: var(--carbon); }
@media (max-width: 560px) {
.wk-journey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wk-journey > span { flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: var(--t-00); line-height: 1.3; }
}
.wk-opening .wk-phone-title { display: none; }
@media (max-height: 700px), (max-width: 599px) {
html[data-study] .wk-opening .wk-phone-title { display: block; }
html[data-study] .wk-opening .wk-phone-title + .smallcaps { display: none; }
}
.gx-stage .lesson-audio-choice-row:has(> .lesson-audio-choices:not([hidden])) > .gx-tile { min-width: calc(46px + 4.5rem); text-align: start; }
.gx-stage.wk-stage .wk-sheet .wk-opening .wk-mission { text-wrap: pretty; }
.theatre-guess { display: grid; justify-items: start; gap: var(--s2); margin: var(--s3) 0 var(--s4); }
.theatre-guess p { margin: 0; font: 400 var(--type-body)/1.5 var(--sans); color: var(--carbon); }
.daily-principle { margin: var(--s3) 0; padding: var(--s3) var(--s4); border-left: 3px solid var(--rule); background: color-mix(in srgb, var(--carbon) 3%, transparent); }
.daily-principle strong { display: block; margin: 2px 0 4px; font: 500 var(--t-2)/1.35 var(--serif); color: var(--carbon); }
.daily-principle p { margin: 0; font: 400 var(--type-body)/1.55 var(--sans); color: var(--carbon); }
.daily-principle [lang] { font-family: var(--serif); font-weight: 500; }
.daily-feedback.is-learning .pp-note { display: none; }
.daily-why-ask { margin: 0 0 var(--s2); font: 500 var(--type-body)/1.4 var(--sans); color: var(--carbon); }
.daily-why-ask [lang] { font: 600 var(--t-2)/1.3 var(--serif); }
.daily-reason { margin: var(--s2) 0; font: 400 var(--type-body)/1.5 var(--sans); color: var(--carbon); }
.daily-reason .smallcaps { margin-right: 6px; }
.daily-reason small { color: var(--steel); }
.daily-line .daily-cue, .daily-line mark.daily-cue { background: color-mix(in srgb, var(--signal) 22%, transparent); border-radius: 3px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--signal) 22%, transparent); }
.conj-note { margin: var(--s3) 0 0; }
.conj-what { margin: 0; font: 400 var(--type-body)/1.5 var(--sans); color: var(--carbon); }
.conj-what b { font: 500 var(--type-body)/1.4 var(--serif); }
.conj-fold { margin-top: var(--s2); }
.conj-fold > summary { cursor: pointer; font: 500 var(--type-control)/1.4 var(--sans); color: var(--carbon); }
.conj-sheet { margin-top: var(--s2); }
.conj-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.conj-grid.is-one { grid-template-columns: minmax(0, 360px); margin: var(--s3) 0; }
.conj-tense { padding: 10px 12px 8px; }
.conj-tense figcaption { flex-direction: column; gap: 0; margin-bottom: 4px; }
.conj-tense th, .conj-tense td { padding: 4px 6px; }
.conj-tense tbody th { font-size: var(--type-meta); }
.gt-form.is-here, .conj-extra .is-here { background: color-mix(in srgb, var(--carbon) 9%, transparent); font-weight: 600; border-radius: 3px; }
.conj-extra { margin: 0 0 var(--s2); font: 400 var(--type-meta)/1.6 var(--sans); color: var(--steel); }
.conj-extra b { font: 500 var(--type-body)/1.4 var(--serif); color: var(--carbon); }
.conj-source { margin: 6px 0 0; font: 400 var(--type-meta)/1.4 var(--sans); color: var(--steel); }
.g-wc .conj-note { margin-top: 8px; }
.g-wc .conj-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .g-wc .conj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#v-course.view:has(.climb) { padding-top: 0; }
#v-course.view:has(.climb) > .masthead {
position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.w-skybox { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.w-skybox canvas { position: sticky; top: 0; display: block; width: 100%; height: 100vh; height: 100lvh; opacity: 0; transition: opacity var(--mo-sheet) var(--mo-e-std); }
@media (pointer: coarse) { .w-skybox canvas { height: calc(100vh + 80px); height: calc(100lvh + 80px); } }
.w-world { position: relative; z-index: 2; }
#v-course > .climb.has-sky { background: var(--sky); }
.climb.has-sky .w-skybox canvas { opacity: 1; }
#v-course > .climb.has-sky .w-band, #v-course > .climb.has-sky .w-summit { background: none; }
.climb.has-sky .w-band::before, .climb.has-sky .w-summit::before, .climb.has-sky .w-air { display: none; }
#v-course > .climb {
--g0: #d9f3e4; --g1: #b6e5f6; --g2: #a4dcf6; --g3: #dcecdc; --g4: #fde2ae; --g5: #f8b283; --g6: #8f6aae; --g7: #4d4a8d; --g8: #161f47; --g9: #0e1533;
isolation: isolate;
--cream: #fffdf5; --stone: #9fb0c4; --stone-d: #71849b; --stone-ic: #eef3f9;
--wood: #b98a52; --wood-d: #7d5a31; --wood-l: #e0b780; --rung: #c99a5e; --rung-d: #8a6336;
--pale: #d9cdb8; --pale-d: #b4a58c;
--r-soft: 11px; --r-chunk: 14px; --r-card: 18px; --r-book: 6px 22px 22px 6px; --r-dot: 2px; --r-rung: 3px; --r-pop: 16px;
--w-t-sway: 6.1s; --w-t-sway2: 7.7s; --w-t-sway3: 8.9s; --w-t-turn: 22s; --w-t-drift: 60s; --w-t-drift2: 90s; --w-t-smoke: 6.4s;
--w-t-flicker: 2.3s; --w-t-glow: 4.7s; --w-t-glyph: 11s; --w-t-bob: 5.3s; --w-t-ring: 2.2s; --w-t-who: 4.2s; --w-t-hop: .62s; --w-t-spark: .8s; --w-t-wait: 70ms;
--grass: #7dbb72; --grass-l: #a4d68c; --rock: #a98a64; --rock-d: #86694a; --leaf: #5f9e68; --leaf-d: #467f58; --cloud: #fff;
--n: 66px;
position: relative; box-sizing: border-box; width: var(--vw, 100vw); max-width: none; margin: 0 0 0 calc(50% - var(--vw, 100vw) / 2);
overflow-x: clip;
}
@supports (color: oklch(from red l c h)) {
.w-band, .w-banner, .w-tome, .n-wrap { --vivid: oklch(from var(--ink) calc(l + .12) calc(c * 1.5) h); }
}
.w-world, .w-tiles, .w-nodes { list-style: none; margin: 0; padding: 0; }
.w-world, .w-tiles { display: flex; flex-direction: column-reverse; }
.w-band { position: relative; display: block; }
.w-band[data-biome="0"] { background: linear-gradient(to top, #d9f3e4, #b6e5f6 58%, #a4dcf6); --grass: #7dbb72; --grass-l: #a4d68c; --rock: #a98a64; --rock-d: #86694a; --leaf: #5f9e68; --leaf-d: #467f58; --cloud: #fff; }
.w-band[data-biome="1"] { background: linear-gradient(to top, #a4dcf6, #dcecdc 46%, #fde2ae); --grass: #a9b85a; --grass-l: #cdd577; --rock: #a7795a; --rock-d: #825a43; --leaf: #d59a3f; --leaf-d: #b8782e; --cloud: #fff8ea; }
.w-band[data-biome="2"] { background: linear-gradient(to top, #fde2ae, #f8b283 42%, #cf7f9f 78%, #8f6aae); --grass: #e6b45b; --grass-l: #f4d27f; --rock: #8a6078; --rock-d: #684a68; --leaf: #b4577a; --leaf-d: #8c4170; --cloud: #ffe3cf; }
.w-band[data-biome="3"] { background: linear-gradient(to top, #8f6aae, #4d4a8d 34%, #252d63 72%, #161f47); --grass: #dfe6fa; --grass-l: #fff; --rock: #4c5693; --rock-d: #363f77; --leaf: #8ea4e0; --leaf-d: #6a80c8; --cloud: #7d84c4; }
.w-band[data-biome="2"]::before, .w-band[data-biome="3"]::before, .w-summit::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image:
radial-gradient(1.6px 1.6px at 12% 22%, #fff 99%, transparent), radial-gradient(1.2px 1.2px at 28% 64%, #fff 99%, transparent),
radial-gradient(1.8px 1.8px at 47% 38%, #ffe9b8 99%, transparent), radial-gradient(1.2px 1.2px at 63% 12%, #fff 99%, transparent),
radial-gradient(1.6px 1.6px at 78% 56%, #fff 99%, transparent), radial-gradient(1.2px 1.2px at 90% 28%, #ffe9b8 99%, transparent),
radial-gradient(1.2px 1.2px at 8% 82%, #fff 99%, transparent), radial-gradient(1.8px 1.8px at 36% 90%, #fff 99%, transparent),
radial-gradient(1.2px 1.2px at 70% 86%, #fff 99%, transparent);
background-size: 420px 340px;
}
.w-band[data-biome="2"]::before { opacity: .55; -webkit-mask-image: linear-gradient(to top, transparent 55%, #000); mask-image: linear-gradient(to top, transparent 55%, #000); }
.w-tile { position: relative; display: block; }
.w-plate { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.w-art { position: absolute; left: 0; top: 0; overflow: visible; display: block; }
.l-wood path { fill: none; stroke-linecap: round; }
.l-base { stroke: var(--wood-d); stroke-width: 12; }
.l-rail { stroke: var(--wood); stroke-width: 8; }
.l-shine { stroke: var(--wood-l); stroke-width: 2; }
.l-rung-d { stroke: var(--rung-d); stroke-width: 10; }
.l-rung { stroke: var(--rung); stroke-width: 6.5; }
.l-nail { fill: none; stroke: rgb(40 28 12 / .55); stroke-width: 3; stroke-linecap: round; }
.l-wood.is-ahead { --wood: var(--pale); --wood-d: var(--pale-d); --wood-l: #f0e8da; --rung: #e6dccb; --rung-d: var(--pale-d); }
.i-seam { fill: none; stroke: var(--rock-d); stroke-width: 3; stroke-linecap: round; }
.g-rock-a { stop-color: color-mix(in oklab, var(--rock) 82%, #fff); } .g-rock-b { stop-color: var(--rock); } .g-rock-c { stop-color: var(--rock-d); }
.i-facet { fill: rgb(0 0 0 / .08); }
.i-vine { fill: none; stroke: var(--leaf-d); stroke-width: 2.4; stroke-linecap: round; }
.i-bud { fill: var(--leaf); }
.i-grass { fill: var(--grass); }
.i-top { fill: none; stroke: var(--grass-l); stroke-width: 5; stroke-linecap: round; }
.d-trunk { fill: #7a5a3c; } .d-log { fill: none; stroke: rgb(0 0 0 / .22); stroke-width: 1.6; }
.d-bark { fill: #f2efe6; } .d-leaf { fill: var(--leaf); } .d-leaf2 { fill: var(--leaf-d); }
.d-stem, .d-frond { stroke: var(--leaf-d); stroke-width: 5; fill: none; } .d-stem { stroke: #7a5a3c; }
.d-wall { fill: #fff3d5; } .d-roof { fill: var(--r-deep); } .d-door { fill: var(--sun); } .d-win { fill: var(--sun); } .d-chim { fill: var(--rock-d); }
.d-sun { fill: var(--sun); } .d-clay { fill: #b5693a; } .d-sail { fill: none; stroke: var(--r-deep); stroke-width: 6; stroke-linecap: round; }
.d-tuft { fill: none; stroke: var(--grass-l); stroke-width: 2.6; stroke-linecap: round; }
.d-lav { fill: none; stroke: #8d7cc0; stroke-width: 6; stroke-linecap: round; }
.d-fl { fill: #fff; } .d-fl2 { fill: var(--sun); }
.w-cloud { fill: var(--cloud); opacity: .92; } .w-cloud.is-far { opacity: .5; }
.w-bird { fill: none; stroke: rgb(23 33 58 / .45); stroke-width: 2.4; stroke-linecap: round; }
.g-peak-a { stop-color: var(--rock); stop-opacity: .5; } .g-peak-b { stop-color: var(--rock); stop-opacity: 0; }
.w-peak.is-far { opacity: .55; }
.w-sun { fill: #ffd27a; } .w-sun-halo { fill: #ffd27a; opacity: .3; }
.w-moon { fill: #f6ecc9; }
.lamp-post, .lamp-foot { fill: #4a4f63; } .lamp-cap { fill: #3b4057; }
.lamp-cage { fill: rgb(30 38 66 / .45); stroke: #3b4057; stroke-width: 2.4; }
.lamp-flame { fill: rgb(255 255 255 / .16); }
.w-lamp.is-lit .lamp-cage { fill: #ffe9a8; }
.w-lamp.is-lit .lamp-flame { fill: #f6a623; }
.lamp-glow { fill: #ffdf8a; opacity: .4; }
.w-who { position: absolute; z-index: 2; left: calc(50% + var(--x)); top: var(--y); width: 84px; height: 84px; margin: -80px 0 0 -42px; cursor: pointer; }
.w-who svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; }
html:not([data-motion="low"]) .w-who.is-hailed svg { animation: who-hop var(--w-t-hop) var(--mo-e-reward); }
@keyframes who-hop { 0% { transform: scale(1, 1); } 22% { transform: scale(1.12, .84); } 52% { transform: translateY(-20px) scale(.94, 1.08); } 80% { transform: scale(1.05, .95); } 100% { transform: scale(1, 1); } }
.w-says {
position: absolute; z-index: 6; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 190px;
padding: 7px 11px; border-radius: var(--r-soft); background: var(--galley); color: var(--carbon); box-shadow: 0 8px 18px rgb(23 33 58 / .24);
font: 400 var(--t-1)/1.25 var(--serif); text-align: center;
}
.w-climber .w-says { left: auto; right: calc(100% - 18px); bottom: auto; top: -2px; transform: translateX(var(--nudge, 0px)); pointer-events: auto; }
.w-climber .w-says[data-side="right"] { left: calc(100% - 18px); right: auto; }
html[data-motion="full"] .is-live .w-who svg { animation: who-breathe var(--w-t-who) ease-in-out infinite; }
html[data-motion="full"] .is-live .w-who.is-hailed svg { animation: who-hop var(--w-t-hop) var(--mo-e-reward); }
@keyframes who-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.016, .984); } }
.w-ground {
--g-back: color-mix(in oklab, var(--r-mid) 66%, #d6efea); --g-mid: var(--r-mid); --g-front: color-mix(in oklab, var(--r-mid) 52%, var(--r-deep)); --g-deep: var(--r-deep);
--g-sea: #bee4e6; --g-lav: #8d7cc0;
position: relative; height: calc(90px + 340px * var(--gk, 1)); background: linear-gradient(to top, var(--r-mid), #d9f3e4 60%);
}
#v-course > .climb.has-sky .w-ground { background: none; }
.w-plate.is-ground { top: auto; bottom: 0; height: calc(340px * var(--gk, 1)); }
.w-ground-art { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: block; }
.l-foot { fill: rgb(0 0 0 / .16); }
.n-wrap { position: absolute; left: calc(50% + var(--x)); top: var(--y); width: 0; height: 0; z-index: 2; }
.n-wrap.is-here { z-index: 4; } .n-wrap.is-open { z-index: 8; }
#v-course .n {
appearance: none; position: absolute; left: calc(var(--n) / -2); top: calc(var(--n) / -2); width: var(--n); height: var(--n);
margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--ic, #fff);
background: var(--c, var(--stone)); box-shadow: 0 7px 0 var(--c-d, var(--stone-d)), 0 13px 16px rgb(23 33 58 / .22), inset 0 0 0 3px rgb(255 255 255 / .28);
transition: transform var(--mo-touch) var(--mo-e-reward), box-shadow var(--mo-touch) var(--mo-e-reward);
-webkit-tap-highlight-color: transparent;
}
#v-course .n::before { content: ''; position: absolute; left: 16%; top: 12%; width: 42%; height: 26%; border-radius: 50%; background: rgb(255 255 255 / .34); transform: rotate(-24deg); pointer-events: none; }
.n-face { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.n-face svg { display: block; }
.n-wrap { --c: var(--stone); --c-d: var(--stone-d); --ic: var(--stone-ic); }
.n-wrap.is-done { --c: var(--vivid, var(--ink)); --c-d: var(--ink); --ic: #fff; }
.n-wrap.is-here { --c: var(--signal); --c-d: #b88517; --ic: #17213a; }
.n-wrap.is-passed { --c: #d6dee8; --c-d: #a8b5c4; --ic: #71849b; }
.n-dash { display: block; width: 24px; height: 5px; border-radius: var(--r-rung); background: currentColor; }
.n-key { position: absolute; right: -2px; bottom: -3px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--galley); color: var(--steel); box-shadow: 0 1px 3px rgb(23 33 58 / .3); }
.n-wrap:hover, .n-wrap:focus-within { z-index: 30; }
.n-wrap.is-here { z-index: 6; }
.n-label {
position: absolute; z-index: 2; top: -19px; box-sizing: border-box; width: max-content; max-width: min(230px, calc(var(--vw, 100vw) * .44));
padding: 8px 12px; border-radius: var(--r-soft); background: var(--galley); color: var(--carbon); box-shadow: 0 1px 0 rgb(23 33 58 / .1), 0 10px 22px rgb(23 33 58 / .2);
font: 400 var(--t-1)/1.25 var(--serif); pointer-events: none;
opacity: 0; visibility: hidden; transition: opacity var(--mo-ink) var(--mo-e-std), translate var(--mo-act) var(--mo-e-reward), visibility 0s linear var(--mo-ink);
}
.n-label[data-side="right"] { left: calc(var(--n) / 2 + 16px); translate: -8px 0; }
.n-label[data-side="left"] { right: calc(var(--n) / 2 + 16px); translate: 8px 0; }
.n-check .n-label { top: -22px; }
.n-check .n-label[data-side="right"] { left: 54px; } .n-check .n-label[data-side="left"] { right: 54px; }
@media (hover: hover) {
html:not([data-motion="low"]) #v-course .n { transition: transform var(--mo-act) var(--mo-e-mark), box-shadow var(--mo-act) var(--mo-e-reward); }
html:not([data-motion="low"]) #v-course .n:not([disabled]):hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 11px 0 var(--c-d, var(--stone-d)), 0 20px 24px rgb(23 33 58 / .24), inset 0 0 0 3px rgb(255 255 255 / .34); }
.n-wrap:not(.is-open) > .n:hover ~ .n-label, .n-wrap:not(.is-open) > .n:focus-visible ~ .n-label { opacity: 1; visibility: visible; translate: 0 0; transition-delay: var(--w-t-wait), var(--w-t-wait), 0s; }
}
html:not([data-motion="low"]) #v-course .n:not([disabled]):active { transform: translateY(5px); box-shadow: 0 2px 0 var(--c-d, var(--stone-d)), 0 4px 6px rgb(23 33 58 / .22), inset 0 0 0 3px rgb(255 255 255 / .28); }
#v-course .n:focus-visible { outline: 3px solid #17213a; outline-offset: 8px; }
#v-course .n:focus-visible::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 3px #fffdf5; pointer-events: none; }
html[data-motion="low"] .n-label { translate: 0 0; }
.n-ring { position: absolute; inset: -11px; border-radius: 50%; border: 6px solid rgb(246 196 69 / .55); pointer-events: none; }
html[data-motion="full"] .n-ring { animation: n-ring var(--w-t-ring) ease-out infinite; }
@keyframes n-ring { 0% { transform: scale(.92); opacity: 1; } 80%, 100% { transform: scale(1.22); opacity: 0; } }
.n-start {
position: absolute; z-index: 5; top: calc(-46px - var(--lift, 0px)); width: var(--bw, 158px); box-sizing: border-box; padding: 10px 12px 12px; border-radius: var(--r-chunk);
background: var(--galley); color: var(--carbon); box-shadow: 0 2px 0 rgb(23 33 58 / .12), 0 12px 24px rgb(23 33 58 / .22);
}
.n-start[data-side="right"] { left: calc(var(--n) / 2 + 18px); }
.n-start[data-side="left"] { right: calc(var(--n) / 2 + 18px); }
.n-start::before { content: ''; position: absolute; top: calc(40px + var(--lift, 0px)); width: 16px; height: 16px; background: inherit; transform: rotate(45deg); border-radius: var(--r-rung); }
.n-start[data-side="right"]::before { left: -7px; } .n-start[data-side="left"]::before { right: -7px; }
.n-start[data-side="top"] { top: auto; bottom: calc(var(--n) / 2 + 20px); left: calc(var(--bw) / -2); transform: translateX(var(--nudge, 0px)); }
.n-start[data-side="top"]::before { top: auto; bottom: -7px; left: calc(50% - 8px - var(--nudge, 0px)); }
.n-start small { display: block; font: 600 var(--t-00)/1.3 var(--sans); color: var(--steel); }
.n-start strong { display: block; margin: 2px 0 8px; font: 400 var(--t-2)/1.2 var(--serif); overflow-wrap: break-word; hyphens: auto; }
.n-said { margin: -4px 0 8px; font: 500 var(--t-00)/1.35 var(--sans); color: var(--steel); }
.n-near { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 10px; padding: 0; list-style: none; }
.n-near li { width: 8px; height: 8px; border-radius: 50%; background: rgb(23 33 58 / .16); }
.n-near li.is-done { background: var(--malachite-ink); }
.n-near li.is-here { background: var(--signal); box-shadow: 0 0 0 2px #b88517; }
.n-near li.is-goal { display: grid; place-items: center; width: 16px; height: 16px; margin-left: 2px; background: none; color: #b88517; }
.n-near svg { width: 100%; height: 100%; }
.n-start[data-side="top"] strong { margin-bottom: 4px; }
.n-start[data-side="top"] .n-near { margin-bottom: 7px; }
.n-start[data-side="top"] .n-said { display: none; }
#v-course .n-go {
appearance: none; display: block; width: 100%; min-height: 42px; margin: 0; padding: 0 var(--s2); border: 0; border-radius: var(--r-soft);
background: var(--signal); color: var(--on-signal); box-shadow: 0 4px 0 #b88517; font: 700 var(--t-1)/1 var(--sans); letter-spacing: .02em; text-transform: uppercase; cursor: pointer;
}
html:not([data-motion="low"]) #v-course .n-go:active { transform: translateY(3px); box-shadow: 0 1px 0 #b88517; }
.n-go:focus-visible { outline: 3px solid var(--carbon); outline-offset: 3px; }
.w-climber { position: absolute; z-index: 3; left: var(--ax, 0); top: var(--ay, 0); width: 68px; height: 68px; margin: -34px 0 0 -34px; pointer-events: none; }
.w-climber svg { width: 100%; height: 100%; overflow: visible; }
.n-pop {
position: absolute; z-index: 9; left: 0; bottom: calc(var(--n) / 2 + 16px); width: min(320px, calc(var(--vw, 100vw) - 24px)); box-sizing: border-box;
transform: translateX(calc(-50% + var(--nudge, 0px))); padding: var(--s4); border-radius: var(--r-card);
background: var(--galley); color: var(--carbon); box-shadow: 0 2px 0 rgb(23 33 58 / .12), 0 18px 40px rgb(23 33 58 / .3);
}
.n-pop[hidden] { display: none; }
.n-pop[data-way="down"] { bottom: auto; top: calc(var(--n) / 2 + 22px); }
html:not([data-motion="low"]) .n-wrap.is-open .n-pop { animation: n-pop var(--mo-act) var(--mo-e-mark) both; }
@keyframes n-pop { from { opacity: 0; translate: 0 10px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
.n-kick { margin: 0; font: 600 var(--t-00)/1.4 var(--sans); color: var(--steel); }
.n-pop h3 { margin: 2px 0 0; font: 400 var(--t-4)/1.15 var(--serif); letter-spacing: var(--track-title); color: var(--carbon); text-transform: none; }
.n-format { margin: 2px 0 0; font: 500 var(--t-0)/1.35 var(--sans); color: var(--steel); }
.n-goal { margin: var(--s2) 0 0; font: var(--type-meta)/1.5 var(--sans); color: var(--carbon); }
.n-doors { display: grid; gap: var(--s1); margin-top: var(--s3); }
.n-doors .btn { width: 100%; min-height: var(--control-h-tool); }
.n-doors .lnk { justify-content: center; }
.n-note { margin: var(--s1) 0 0; font: var(--t-00)/1.45 var(--sans); color: var(--steel); text-align: center; }
#v-course .climb .course-continuation { display: block; margin: var(--s2) 0 0; padding: 0; max-width: none; border: 0; background: none; box-shadow: none; overflow: visible; }
#v-course .climb .course-volume-heading, #v-course .climb .course-continuation-copy > .smallcaps, #v-course .climb .course-continuation h2, #v-course .climb .course-volume-progress, #v-course .climb .course-resident-print { display: none; }
#v-course .climb .course-continuation-copy { padding: 0; background: none; }
#v-course .climb .course-continuation-copy > p { max-width: none; margin: 0 0 var(--s3); font-size: var(--type-meta); color: var(--carbon); }
#v-course .climb .course-continuation .btn { width: 100%; }
#v-course .climb .course-facing-page { margin: var(--s3) 0 0; padding: 0 0 0 var(--s3); min-height: 0; border: 0; border-left: 3px solid var(--ink); border-radius: 0; background: none; display: block; }
#v-course .climb .course-facing-page.is-quiet { display: none; }
#v-course .climb .course-facing-page figcaption { font: 600 var(--t-00)/1.4 var(--sans); color: var(--steel); margin: 0 0 var(--s1); }
#v-course .climb .course-facing-page blockquote { margin: 0; font: 400 var(--t-3)/1.3 var(--serif); color: var(--carbon); }
#v-course .climb .course-context-actions { margin: var(--s3) 0 0; padding: 0; border: 0; background: none; }
.n-check { --c: #5f6d86; --c-d: #434f66; --ic: #fff; z-index: 3; }
#v-course .n-check .n { --n: 78px; }
.n-check.is-here, .n-check.is-open, .n-check.is-reached { --c: var(--signal); --c-d: #b88517; --ic: #17213a; }
.n-check.is-passed { --c: #ffd86b; --c-d: #c8921f; --ic: #17213a; }
#v-course .n-check .n[disabled] { cursor: default; opacity: .9; }
.w-seal { width: 66px; height: 66px; display: block; }
.w-seal .stamp { width: 52px; height: 52px; }
#v-course .n-jump {
appearance: none; position: absolute; left: var(--jx, 0px); top: 54px; transform: translateX(-50%); z-index: 2; white-space: nowrap;
min-height: 34px; margin: 0; padding: 0 var(--s3); border: 2px solid var(--leaf-d, #467f58); border-radius: var(--r-soft);
background: var(--galley); color: var(--carbon); box-shadow: 0 3px 0 rgb(23 33 58 / .2); font: 700 var(--t-00)/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; cursor: pointer;
}
.w-tome {
position: absolute; z-index: 3; left: 50%; bottom: 24px; transform: translateX(-50%); box-sizing: border-box; overflow: hidden;
width: min(calc(100% - 28px), 620px); min-height: 118px; padding: var(--s4) calc(var(--s4) + 44px) var(--s4) var(--s5);
display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s1) var(--s4);
border-radius: var(--r-book); color: var(--cream); background: var(--ink);
box-shadow: 0 10px 0 color-mix(in oklab, var(--ink) 70%, #000), 0 22px 30px rgb(23 33 58 / .3);
}
.w-tome::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(180deg, rgb(255 255 255 / .16), transparent 26%, rgb(255 255 255 / .1) 46%, transparent 70%, rgb(0 0 0 / .26)),
linear-gradient(90deg, transparent 0 calc(100% - 46px), var(--sun) calc(100% - 46px) calc(100% - 43px), transparent calc(100% - 43px) calc(100% - 25px), var(--sun) calc(100% - 25px) calc(100% - 22px), transparent calc(100% - 22px));
}
.w-tome::after { content: ''; position: absolute; left: 0; bottom: 0; height: 7px; width: var(--fill); background: var(--sun); }
.wt-code { position: relative; font: 700 3.6rem/.95 var(--bill); letter-spacing: .01em; color: var(--cream); }
.wt-ti { position: relative; min-width: 0; display: grid; gap: 2px; }
.wt-ti strong { font: 400 var(--t-4)/1.15 var(--serif); }
.wt-ti em { font: 500 var(--t-0)/1.3 var(--sans); font-style: normal; }
#v-course .wt-go {
appearance: none; position: relative; grid-column: 1 / -1; justify-self: start; min-height: 40px; margin: var(--s1) 0 0; padding: 0 var(--s3);
border: 0; border-radius: var(--r-soft); background: var(--cream); color: #17213a; box-shadow: 0 4px 0 rgb(0 0 0 / .3); font: 700 var(--t-00)/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; cursor: pointer;
}
.wt-card { position: relative; grid-column: 1 / -1; padding: var(--s3); border-radius: var(--r-chunk); background: var(--galley); color: var(--carbon); }
.w-ground .w-tome { bottom: 54px; }
.w-gate .w-tome { bottom: calc(40px + var(--under, 0px)); }
.w-gate.has-card .w-tome, .w-ground.has-card .w-tome { position: relative; bottom: auto; margin: 120px 0 40px; }
.w-gate.has-card .w-art { top: auto; bottom: 0; }
.w-ground.has-card { height: auto; min-height: calc(90px + 340px * var(--gk, 1)); display: flow-root; }
.w-summit { position: relative; display: block; background: linear-gradient(to top, #161f47, #0e1533); color: #fffdf5; --rock: #4c5693; --cloud: #39406f; --grass: #dfe6fa; }
.ws-in { position: relative; display: grid; justify-items: center; gap: var(--s1); max-width: 460px; margin: 0 auto; padding: var(--s9) var(--s5) var(--s6); text-align: center; box-sizing: border-box; translate: var(--cx, 0) 0; }
.ws-rise { position: relative; height: 300px; }
.w-summit-art { width: min(400px, 96%); height: auto; overflow: visible; }
.ws-glyph { font: 400 30px var(--serif); fill: #ffe9a8; opacity: .85; transform-box: fill-box; translate: 0 var(--up); }
.ws-spark { fill: #fff3c8; opacity: .75; }
.ws-in h2 { margin: 0; font: 400 var(--t-5)/1.15 var(--serif); letter-spacing: var(--track-title); color: #fffdf5; text-transform: none; }
.ws-in p { margin: 0; font: var(--type-meta)/1.5 var(--sans); color: #fffdf5; }
.ws-in .ws-open { margin-top: var(--s2); }
.ws-in .ws-caption { margin-top: var(--s3); font-size: var(--t-00); color: #e4e8f6; }
.ws-in .btn { margin-top: var(--s2); }
.w-banner {
position: sticky; top: calc(var(--ladder-top, 0px) + 8px); z-index: 20; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3);
width: min(calc(100% - 20px), 640px); min-height: 66px; margin: 8px auto -74px; padding: var(--s2) var(--s2) var(--s2) var(--s4); border-radius: var(--r-pop);
background: var(--ink); color: #fffdf5; box-shadow: 0 5px 0 color-mix(in oklab, var(--ink) 70%, #000), 0 10px 22px rgb(23 33 58 / .24);
transition: background-color var(--mo-fill) var(--mo-e-std);
}
.w-banner::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 4px; border-radius: var(--r-dot); background: linear-gradient(90deg, var(--sun) var(--fill, 0%), rgb(255 255 255 / .2) var(--fill, 0%)); pointer-events: none; }
.wb-text { display: grid; min-width: 0; padding-bottom: 5px; }
.wb-kick { font: 700 var(--t-00)/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.wb-title { font: 600 var(--t-2)/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#v-course .wb-all {
appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; margin: 0; padding: 0 var(--s3);
border: 2px solid rgb(255 255 255 / .34); border-radius: var(--r-soft); background: none; box-shadow: 0 3px 0 rgb(0 0 0 / .18); color: #fffdf5; --w-book-line: var(--ink);
font: 700 var(--t-00)/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}
.wb-all:focus-visible { outline: 3px solid #fffdf5; outline-offset: 2px; }
.w-panel { --pan: max(0px, calc(100vh - 440px)); position: absolute; z-index: 19; left: 0; right: 0; top: 0; bottom: var(--pan); pointer-events: none; }
.climb:has(.n-wrap.is-open) .w-panel { z-index: 1; }
.w-panel-in { position: sticky; top: calc(var(--ladder-top, 0px) + 92px); width: fit-content; margin: 0 7px 0 auto; pointer-events: auto; }
.ls-head, .ls-foot { display: none; }
.ls-levels { display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; position: relative; }
.ls-levels::before { content: ''; position: absolute; left: calc(50% - 2px); top: 10px; bottom: 10px; width: 4px; background: rgb(255 255 255 / .75); border-radius: var(--r-dot); }
#v-course .ls-level {
appearance: none; position: relative; display: grid; place-items: center; width: 38px; height: 38px; margin: 0; padding: 0;
border: 2px solid var(--ink, var(--carbon)); border-radius: 50%; background: var(--galley); color: var(--ink, var(--carbon)); box-shadow: 0 2px 0 rgb(23 33 58 / .2);
font: 700 var(--t-0)/1 var(--bill); letter-spacing: .02em; cursor: pointer;
}
#v-course .ls-level.is-reached { background: var(--ink); color: #fffdf5; }
#v-course .ls-level.is-seen { box-shadow: 0 0 0 3px var(--signal); }
.ls-level b { font: inherit; }
@keyframes ls-lit { 45% { box-shadow: 0 0 0 5px var(--signal); } }
.ls-levels.is-lit > .ls-level { animation: ls-lit var(--mo-ghost) var(--mo-e-std) both; animation-delay: calc(var(--i) * var(--mo-touch)); }
.ls-level span, .ls-level em { display: none; }
#v-course .ls-goal { --ink: #17213a; color: var(--sun); --w-book-line: var(--galley); }
.ls-level:focus-visible { outline: 3px solid var(--carbon); outline-offset: 2px; }
@media (max-width: 1023px) { #v-course .ls-level:focus-visible { outline: 3px solid #17213a; outline-offset: 5px; box-shadow: 0 0 0 5px #fffdf5; } }
.w-end { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; pointer-events: none; }
.ladder-home { position: sticky; z-index: 30; bottom: max(16px, env(safe-area-inset-bottom)); height: 0; display: flex; justify-content: center; }
#v-course .ladder-back {
position: absolute; bottom: 0;
display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--control-h-tool); padding: 0 var(--s4);
border: 0; border-radius: var(--r-pill); background: var(--signal); color: var(--on-signal);
box-shadow: 0 4px 0 #b88517, 0 12px 24px rgb(23 33 58 / .3); font: 700 var(--t-0)/1 var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer;
}
#v-course .ladder-back[hidden] { display: none; }
.ladder-back-arrow { display: inline-grid; transform: rotate(90deg); }
.ladder-back[data-way="up"] .ladder-back-arrow { transform: rotate(-90deg); }
@media (max-width: 560px) {
.wb-all span { display: none; }
#v-course .wb-all { padding: 0 var(--s2); min-height: 44px; min-width: 44px; justify-content: center; }
}
@media (max-height: 460px) and (max-width: 1023px) {
.w-banner { position: relative; top: auto; width: min(calc(100% - 76px), 640px); margin-left: 10px; }
.w-panel-in { top: calc(var(--ladder-top, 0px) + 8px); }
.ls-levels { gap: 4px; }
}
.w-climber { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
.w-climber > .c-limbs { position: absolute; left: calc(50% - 90px); top: calc(50% - 90px); width: 180px; height: 180px; overflow: visible; pointer-events: none; }
.c-limb { fill: none; stroke: color-mix(in oklab, var(--limb) 82%, #000); stroke-width: 6; stroke-linecap: round; }
.c-limb.is-leg { stroke-width: 7; }
.c-tip { fill: var(--limb); stroke: color-mix(in oklab, var(--limb) 70%, #000); stroke-width: 1.6; }
.c-body { position: absolute; inset: 0; display: block; will-change: transform; }
.c-body svg { width: 100%; height: 100%; overflow: visible; }
@media (min-width: 561px) {
.climb { --n: 74px; }
.n-start { top: calc(-50px - var(--lift, 0px)); }
.w-who { width: 104px; height: 104px; margin: -100px 0 0 -52px; }
.w-climber { width: 80px; height: 80px; margin: -40px 0 0 -40px; }
#v-course .n-check .n { --n: 88px; }
.w-seal { width: 74px; height: 74px; }
}
@media (min-width: 1024px) {
.w-banner { width: min(620px, 50%); margin-left: calc(40% - min(310px, 25%)); }
.w-tome { left: 40%; }
.ladder-home { justify-content: flex-start; padding-left: calc(40% - 100px); }
.w-panel { --pan: max(0px, calc(100vh - 600px)); }
.w-panel-in {
top: calc(var(--ladder-top, 0px) + 12px); margin-right: max(24px, calc(50% - 620px)); width: 280px; box-sizing: border-box;
padding: var(--s4); border-radius: var(--r-card); background: var(--galley); box-shadow: 0 2px 0 rgb(23 33 58 / .08), 0 14px 34px rgb(23 33 58 / .18);
}
.ls-head { display: grid; gap: 2px; margin-bottom: var(--s3); }
.ls-head strong { font: 400 var(--t-4)/1.15 var(--serif); letter-spacing: var(--track-title); color: var(--carbon); }
.ls-now { font: var(--type-meta)/1.4 var(--sans); color: var(--steel); }
.ls-levels { align-items: stretch; gap: 6px; }
.ls-levels::before { display: none; }
#v-course .ls-level {
width: 100%; height: auto; min-height: 56px; grid-template-columns: 2.4em minmax(0, 1fr); gap: 0 var(--s2); place-items: center start; padding: 6px var(--s3);
border-radius: var(--r-chunk); text-align: left; overflow: hidden; box-shadow: 0 3px 0 rgb(23 33 58 / .14);
}
#v-course .ls-level.is-seen { box-shadow: 0 3px 0 rgb(23 33 58 / .14), inset 0 0 0 3px var(--signal); }
.ls-level b { grid-row: 1 / span 2; font-size: var(--t-4); }
.ls-level span { display: block; font: 600 var(--t-0)/1.25 var(--sans); letter-spacing: 0; }
.ls-level em { display: block; font: 400 var(--t-00)/1.3 var(--sans); font-style: normal; letter-spacing: 0; }
.ls-level::after { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: var(--fill, 0%); background: var(--signal); }
.ls-goal svg { grid-row: 1 / span 2; }
#v-course .ls-goal { color: var(--carbon); --w-book-line: var(--galley); background: var(--galley); }
#v-course .ls-goal svg { color: var(--sun); }
.ls-foot { display: block; margin-top: var(--s3); }
.ls-saved { display: inline-flex; align-items: center; gap: 6px; font: var(--t-00)/1.4 var(--sans); color: var(--steel); }
html:not([data-motion="low"]) #v-course .ls-level:hover { transform: translateX(-4px); }
}
.climb { --sine: cubic-bezier(.37, 0, .63, 1); }
.d-sway { transform-box: fill-box; transform-origin: 50% 100%; }
.d-turn { transform-box: view-box; transform-origin: 0 0; }
.w-cloud { transform-box: fill-box; }
.lamp-flame { transform-box: fill-box; transform-origin: 50% 100%; }
.d-puff { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes w-sway { from { transform: skewX(-1.4deg); } to { transform: skewX(1.4deg); } }
@keyframes w-turn { to { rotate: 360deg; } }
@keyframes w-drift { from { translate: -40px 0; } to { translate: 40px 0; } }
@keyframes w-puff { 0% { opacity: 0; translate: 0 0; scale: .7; } 12% { opacity: .5; } 100% { opacity: 0; translate: 7px -46px; scale: 2.4; } }
@keyframes w-flicker { 0%, 100% { scale: 1 1; } 37% { scale: .95 1.05; } 71% { scale: 1.04 .96; } }
@keyframes w-breathe { 0%, 100% { opacity: .28; } 50% { opacity: .46; } }
@keyframes w-bob { from { translate: 0 -2px; } to { translate: 0 3px; } }
@keyframes ws-rise { 0% { opacity: 0; translate: 0 0; } 18% { opacity: .9; } 72% { opacity: .55; } 100% { opacity: 0; translate: 8px -150px; } }
@keyframes ws-glint { 0%, 100% { opacity: .2; scale: .7; } 50% { opacity: .9; scale: 1; } }
html[data-motion="full"] .is-live .d-sway { animation: w-sway var(--w-t-sway) var(--sine) infinite alternate; }
html[data-motion="full"] .is-live g:nth-of-type(3n) > .d-sway { animation-duration: var(--w-t-sway2); animation-delay: calc(var(--w-t-sway) * -.4); }
html[data-motion="full"] .is-live g:nth-of-type(3n + 1) > .d-sway { animation-duration: var(--w-t-sway3); animation-delay: calc(var(--w-t-sway) * -.7); }
html[data-motion="full"] .is-live .d-turn { animation: w-turn var(--w-t-turn) linear infinite; }
html[data-motion="full"] .is-live .d-puff { animation: w-puff var(--w-t-smoke) linear infinite; }
html[data-motion="full"] .is-live .d-puff:nth-of-type(2) { animation-delay: calc(var(--w-t-smoke) * -.33); }
html[data-motion="full"] .is-live .d-puff:nth-of-type(3) { animation-delay: calc(var(--w-t-smoke) * -.66); }
html[data-motion="full"] .climb:not(.has-sky) .is-live .w-cloud { animation: w-drift var(--w-t-drift) linear infinite alternate; }
html[data-motion="full"] .climb:not(.has-sky) .is-live .w-cloud.is-far { animation-duration: var(--w-t-drift2); }
html[data-motion="full"] .is-live .w-lamp.is-lit .lamp-flame { animation: w-flicker var(--w-t-flicker) var(--sine) infinite; }
html[data-motion="full"] .is-live .lamp-glow { animation: w-breathe var(--w-t-glow) var(--sine) infinite; }
html[data-motion="full"] .is-live .i-float { animation: w-bob var(--w-t-bob) var(--sine) infinite alternate; }
html[data-motion="full"] .is-live .ws-glyph { opacity: 0; translate: 0 0; animation: ws-rise var(--w-t-glyph) var(--sine) infinite; animation-delay: calc(var(--w-t-glyph) * var(--i) / -5); }
html[data-motion="full"] .is-live .ws-spark { transform-box: fill-box; transform-origin: 50% 50%; animation: ws-glint var(--w-t-glow) var(--sine) infinite; animation-delay: calc(var(--w-t-flicker) * var(--i) * -1); }
@keyframes n-stamp { from { scale: .7; } to { scale: 1; } }
html:not([data-motion="low"]) .n-wrap.is-fresh > .n { animation: n-stamp var(--mo-ghost) var(--mo-e-reward) var(--mo-act) both; }
.n-spark { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--signal); pointer-events: none; animation: n-spark var(--w-t-spark) var(--mo-e-reward) var(--mo-act) both; }
.n-spark:nth-child(3n) { background: var(--vivid, var(--ink)); } .n-spark:nth-child(3n+1) { background: #fff; }
@keyframes n-spark { from { transform: translate(0, 0) scale(.6); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
[data-theme="dark"] #v-course > .climb { --g0: #16243f; --g1: #15233f; --g2: #142244; --g3: #17214a; --g4: #1a2150; --g5: #1f2054; --g6: #241f58; --g7: #1b1d4c; --g8: #101638; --g9: #0a0f28; }
[data-theme="sepia"] #v-course > .climb { --g0: #efe3c6; --g1: #e6e4cc; --g2: #dbe3d0; --g3: #e8e0c0; --g4: #f0d6a4; }
[data-theme="dark"] #v-course > .climb { --stone: #4e5e7e; --stone-d: #35425d; --stone-ic: #c4cde2; --pale: #5a6480; --pale-d: #3f4860; }
[data-theme="dark"] .l-wood.is-ahead { --wood-l: #7c86a2; --rung: #6a7490; }
[data-theme="dark"] .n-wrap.is-passed:not(.n-check) { --c: #39465f; --c-d: #2a3549; --ic: #93a0bb; }
[data-theme="dark"] .w-ground {
--g-back: color-mix(in oklab, var(--r-mid) 16%, #172542); --g-mid: color-mix(in oklab, var(--r-mid) 26%, #131f3a); --g-front: color-mix(in oklab, var(--r-deep) 40%, #0f1930); --g-deep: #0c1428;
--g-sea: #2a3f66; --g-lav: #4a4478; --leaf: #2f5d55; --leaf-d: #234a47; --grass-l: #5c8f77;
background: linear-gradient(to top, #1a2b3f, #16243f 50%);
}
[data-theme="dark"] .climb .d-wall { fill: #6f7698; } [data-theme="dark"] .climb .d-roof { fill: color-mix(in oklab, var(--r-deep) 55%, #0e1830); }
[data-theme="dark"] .climb .d-door { fill: #39415f; } [data-theme="dark"] .climb .d-win { fill: #ffd884; }
[data-theme="dark"] .climb .d-trunk, [data-theme="dark"] .climb .d-stem { fill: #3a3f52; } [data-theme="dark"] .climb .d-bark { fill: #8a90a6; }
[data-theme="dark"] .climb .d-clay { fill: #6d4a3e; } [data-theme="dark"] .climb .d-fl { fill: #aeb8d4; }
[data-theme="dark"] .w-band[data-biome="0"] { background: linear-gradient(to top, #16243f, #142244); --grass: #3f6f5c; --grass-l: #5c8f77; --rock: #4a4660; --rock-d: #39364e; --leaf: #2f5d55; --leaf-d: #234a47; --cloud: #2c3b63; }
[data-theme="dark"] .w-band[data-biome="1"] { background: linear-gradient(to top, #142244, #1a2150); --grass: #6b6b3f; --grass-l: #8a8a52; --rock: #54465a; --rock-d: #41364a; --leaf: #7a5c30; --leaf-d: #5f4726; --cloud: #2f3a66; }
[data-theme="dark"] .w-band[data-biome="2"] { background: linear-gradient(to top, #1a2150, #241f58); --grass: #8a6a3c; --grass-l: #ab8a52; --rock: #4f3f70; --rock-d: #3c3058; --leaf: #6e3f64; --leaf-d: #553050; --cloud: #38356e; }
[data-theme="dark"] .w-band[data-biome="3"] { background: linear-gradient(to top, #241f58, #141a42 60%, #101638); --cloud: #39406f; }
[data-theme="dark"] .w-band[data-biome="2"]::before { opacity: .8; -webkit-mask-image: none; mask-image: none; }
[data-theme="dark"] .w-bird { stroke: rgb(220 228 245 / .5); }
[data-theme="dark"] .w-summit { background: linear-gradient(to top, #101638, #0a0f28); }
[data-theme="dark"] .ls-levels::before { background: rgb(135 152 184 / .5); }
[data-theme="dark"] #v-course .ls-level:not(.is-reached) { color: var(--carbon); border-color: var(--rule-room); }
[data-theme="dark"] #v-course .ls-goal { color: var(--sun); }
[data-theme="sepia"] .w-band[data-biome="0"] { background: linear-gradient(to top, #efe3c6, #e6e4cc 60%, #dbe3d0); --cloud: #fff8e8; }
[data-theme="sepia"] .w-band[data-biome="1"] { background: linear-gradient(to top, #dbe3d0, #efe0bb 50%, #f0d6a4); }
[data-theme="sepia"] .w-ground { background: linear-gradient(to top, var(--r-mid), #efe3c6 44%); }
dialog.ck {
--r-soft: 11px; --r-chunk: 14px; --r-book: 18px;
box-sizing: border-box; width: min(560px, 100%); max-width: 100%; max-height: 100dvh; margin: auto; padding: 0;
border: 0; border-radius: var(--r-book); background: var(--galley); color: var(--carbon); box-shadow: var(--sh-float); overflow: auto;
}
dialog.ck::backdrop { background: rgb(14 22 42 / .68); }
.ck-top {
position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s3); align-items: center;
padding: var(--s3) var(--s3) var(--s5) var(--s4); background: var(--ink); color: #fffdf5;
}
.ck-name { font: 700 var(--t-00)/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.ck-steps { grid-column: 1 / -1; grid-row: 2; list-style: none; display: flex; gap: 5px; margin: 0; padding: 0; }
.ck-steps li { flex: 1 1 0; height: 12px; border-radius: var(--r-soft); background: rgb(255 255 255 / .22); }
.ck-steps li.is-right { background: var(--signal); box-shadow: 0 2px 0 rgb(0 0 0 / .2); }
.ck-steps li.is-miss { background: rgb(255 255 255 / .22); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .7); }
button.ck-x { appearance: none; display: inline-grid; place-items: center; width: var(--control-h-tool); height: var(--control-h-tool); margin: -6px -4px -6px 0; padding: 0; border: 0; border-radius: var(--r-soft); background: rgb(255 255 255 / .14); box-shadow: none; color: #fffdf5; cursor: pointer; }
.ck-who { position: absolute; right: var(--s4); bottom: -30px; width: 64px; height: 64px; pointer-events: none; }
.ck-who svg { width: 100%; height: 100%; overflow: visible; }
.ck-body { padding: var(--s6) var(--s4) var(--s6); outline: none; }
.ck-ask { margin: 0 72px var(--s2) 0; font: 600 var(--t-0)/1.4 var(--sans); color: var(--steel); }
.ck-prompt { margin: 0; font: 400 var(--type-prompt)/1.3 var(--serif); color: var(--carbon); overflow-wrap: anywhere; }
.ck-gap { display: inline-block; width: 3.4em; height: .95em; border-bottom: 3px solid var(--ink, var(--carbon)); vertical-align: baseline; }
.ck-meaning { margin: var(--s2) 0 0; font: var(--type-meta)/1.5 var(--sans); color: var(--steel); }
.ck-options { display: grid; gap: var(--s3); margin-top: var(--s5); }
button.ck-opt {
appearance: none; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s3); width: 100%;
min-height: 56px; margin: 0; padding: var(--s2) var(--s4); border: 2px solid var(--rule-room); border-radius: var(--r-chunk);
background: var(--sheet); color: var(--carbon); box-shadow: 0 4px 0 var(--rule-room); font: 600 var(--type-control)/1.35 var(--sans); text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer;
transition: transform var(--mo-touch) var(--mo-e-reward), box-shadow var(--mo-touch) var(--mo-e-reward);
}
.ck-opt kbd { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-control); font: 700 var(--t-00)/1 var(--sans); color: var(--steel); background: var(--case); border: 0; box-shadow: none; padding: 0; }
@media (hover: none) { .ck-opt kbd { display: none; } button.ck-opt { grid-template-columns: minmax(0, 1fr); } }
@media (hover: hover) { button.ck-opt:not([disabled]):hover { border-color: var(--ink, var(--carbon)); box-shadow: 0 4px 0 var(--ink, var(--carbon)); } }
html:not([data-motion="low"]) button.ck-opt:not([disabled]):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--rule-room); }
button.ck-opt:focus-visible, button.ck-x:focus-visible { outline: 3px solid var(--signal-ink); outline-offset: 2px; }
button.ck-opt[disabled] { cursor: default; opacity: 1; }
button.ck-opt.is-right { border-color: var(--malachite-ink); box-shadow: 0 4px 0 var(--malachite-ink); background: var(--malachite-tint); }
button.ck-opt.is-miss { border-color: var(--miss); box-shadow: 0 4px 0 var(--rule-room); }
button.ck-opt.is-right, button.ck-opt.is-miss { position: relative; padding-right: calc(var(--s4) + 26px); }
.ck-mark { position: absolute; right: var(--s3); top: 50%; display: grid; translate: 0 -50%; font-style: normal; }
.ck-opt.is-right .ck-mark { color: var(--malachite-ink); } .ck-opt.is-miss .ck-mark { color: var(--miss); }
.ck-verdict { margin: 0 0 var(--s2); font: 700 var(--type-meta)/1.5 var(--sans); color: var(--carbon); }
.ck-why { margin: 0 0 var(--s3); font: var(--type-meta)/1.5 var(--sans); color: var(--carbon); }
.ck-after { margin-top: var(--s5); }
.ck-after .btn { width: 100%; }
.ck-end { display: grid; justify-items: center; text-align: center; gap: var(--s1); }
.ck-stamp { position: relative; width: 190px; height: 118px; }
.ck-stamp .w-seal { position: absolute; top: 20px; left: 8px; width: 92px; height: 92px; }
.ck-fig { position: absolute; right: 2px; bottom: 0; width: 92px; height: 92px; }
.ck-fig svg { width: 100%; height: 100%; overflow: visible; }
html:not([data-motion="low"]) .ck-end.is-passed .w-seal { animation: ck-pressed var(--mo-spine) var(--mo-e-seal) var(--mo-act) backwards; }
@keyframes ck-pressed { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: scale(1); } }
.ck-end h2 { margin: var(--s2) 0 0; font: 400 var(--t-5)/1.15 var(--serif); letter-spacing: var(--track-title); text-transform: none; }
.ck-score { margin: 0; font: 700 var(--t-2)/1.4 var(--sans); color: var(--signal-ink); }
.ck-end > p:not(.ck-score) { margin: var(--s1) 0 0; max-width: 40ch; font: var(--type-body)/1.55 var(--sans); color: var(--steel); }
.ck-end blockquote { margin: var(--s3) 0 0; padding: var(--s3) 0 0; border-top: 1px solid var(--rule); font: 400 var(--t-3)/1.3 var(--serif); }
.ck-end blockquote span { display: block; margin-top: var(--s1); font: var(--type-meta)/1.5 var(--sans); color: var(--steel); }
.ck-doors { display: grid; gap: var(--s1); justify-items: center; width: 100%; margin-top: var(--s4); }
.ck-doors .btn { width: 100%; }
@media (max-width: 560px) {
dialog.ck { width: 100%; height: 100dvh; max-height: none; border-radius: 0; margin: 0; }
}
@supports not (color: color-mix(in oklab, red, blue)) {
.w-ground { --g-back: var(--r-mid); --g-front: var(--r-deep); }
[data-theme="dark"] .w-ground { --g-back: #172542; --g-mid: #131f3a; --g-front: #0f1930; }
[data-theme="dark"] .climb .d-roof { fill: var(--r-deep); }
.g-rock-a { stop-color: var(--rock); }
.c-limb, .c-tip { stroke: var(--limb); }
}
:root { --stage-paper: #fffdf6; --stage-ink: #1c2238; --stage-soft: #5a5f70; }
body.stage-on .study-dock { display: none; }
.gx-stage.gx-theatre { padding: 0; overflow: hidden; }
.gx-stage.gx-theatre .gx { width: 100%; max-width: none; height: 100dvh; display: flex; flex-direction: column; gap: 0; padding: 0; margin: 0; background: none; border: 0; box-shadow: none; }
.gx-stage.gx-theatre .gx-top { position: absolute; z-index: 5; top: 8px; left: 12px; right: auto; display: flex; padding: 0; margin: 0; background: none; border: 0; box-shadow: none; }
.gx-stage.gx-theatre .gx-topic { display: none; }
.gx-stage.gx-theatre .gx-top::after { display: none; }
.gx-stage.gx-theatre .gx-top .gx-quit, #living-stage.gx-theatre .gx-top #wk-leave { width: 36px; min-width: 0; min-height: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: rgb(255 253 246 / .9); color: var(--stage-ink); border: 0; box-shadow: none; }
.gx-stage.gx-theatre .lesson-compass, .gx-stage.gx-theatre .gx-head, .gx-stage.gx-theatre #gx-after:empty { display: none; }
.gx-stage.gx-theatre .gx-mid { flex: 1; min-height: 0; display: flex; padding: 0; margin: 0; border: 0; box-shadow: none; background: none; overflow: hidden; }
.gx-stage.gx-theatre .gx-mid > * { flex: 1; min-width: 0; }
.gx-stage.gx-theatre .gx-body { display: flex; min-height: 0; width: 100%; height: 100%; max-width: none; padding: 0; }
.gx-stage.gx-theatre .gx-rail, .gx-stage.gx-theatre .gx-mate, .gx-stage.gx-theatre .gx-bloom, .gx-stage.gx-theatre .audio-notice { display: none; }
.stage.is-inset { height: clamp(460px, 74dvh, 660px); overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r-surface); }
.stage { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; background: var(--room, var(--paper)); }
.stage-bar { position: absolute; z-index: 4; top: 8px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; padding: 0 12px; pointer-events: none; }
.stage-pips { display: flex; gap: 3px; margin: 0; padding: 0 8px; list-style: none; height: 36px; align-items: center; max-width: calc(100% - 196px); }
.stage-pips li { flex: 0 1 20px; min-width: 6px; height: 6px; border-radius: var(--r-bar); background: rgb(28 34 56 / .18); transition: background var(--mo-ink) var(--e-std); }
.stage-pips li.is-done { background: rgb(28 34 56 / .5); }
.stage-pips li.is-now { background: var(--signal); box-shadow: 0 0 0 1px rgb(138 90 0 / .5); }
.stage-tools { position: absolute; right: 12px; top: 0; display: flex; gap: 6px; align-items: center; pointer-events: auto; }
.stage-tool, .stage-tools .pace-chip { min-height: 36px; min-width: 36px; justify-content: center; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: rgb(255 253 246 / .9); color: var(--stage-ink); font: 500 .8rem/1 var(--sans); cursor: pointer; list-style: none; display: inline-flex; align-items: center; }
.stage-tool::-webkit-details-marker { display: none; }
.stage-script { position: relative; }
.stage-script-sheet { position: absolute; right: 0; top: 42px; width: min(420px, calc(100vw - 24px)); max-height: 60dvh; overflow: auto; padding: 14px 16px; border-radius: var(--r-surface); background: var(--stage-paper); color: var(--stage-ink); box-shadow: var(--sh-float); }
.stage-script-sheet p { margin: 0 0 10px; display: grid; gap: 1px; }
.stage-script-sheet b { font: 600 .72rem/1.3 var(--sans); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--stage-soft); }
.stage-script-sheet span { font: 400 1.05rem/1.3 var(--serif); }
.stage-script-sheet small { font: 400 .85rem/1.3 var(--sans); color: var(--stage-soft); }
.stage-skip { border: 0; background: none; padding: 8px 0 0; color: var(--stage-ink); font: 500 .85rem/1 var(--sans); text-decoration: underline; cursor: pointer; }
.stage-world { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #e9dcc0; --feet: 60px; --size: 320px; }
.stage-set { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--mo-fill) var(--e-std); }
.stage-world.is-lit .stage-set { opacity: 1; }
.stage-fallback { position: absolute; inset: 0; }
.stage-fallback svg { width: 100%; height: 100%; }
.stage-world.is-drawn .stage-actor { display: none; }
html[data-theme="dark"] .stage-set { filter: brightness(.86) saturate(.92); }
.stage-actor { position: absolute; bottom: var(--feet); width: calc(var(--size) * var(--h, 1)); height: calc(var(--size) * var(--h, 1)); transform: translateX(-50%); opacity: 0; transition: opacity var(--mo-act) var(--e-std), bottom var(--mo-act) var(--e-std); }
.stage-actor.is-on { opacity: 1; }
.stage-actor.is-listening { filter: saturate(.86) brightness(.97); }
.stage-actor canvas { width: 100%; height: 100%; display: block; }
.stage-actor[data-side="l"] { left: 24%; }
.stage-actor[data-side="r"] { left: 76%; }
.stage-actor[data-side="r"] canvas { transform: scaleX(-1); }
.stage-talk { position: absolute; z-index: 2; top: 54px; left: 0; right: 0; display: flex; flex-direction: column; gap: 8px; padding: 0 16px; align-items: center; }
.bubble { position: relative; width: min(600px, 100%); padding: 12px 52px 12px 18px; border-radius: var(--r-dialog); background: var(--stage-paper); color: var(--stage-ink); box-shadow: 0 4px 0 rgb(28 34 56 / .14); animation: bubble-in var(--mo-act) var(--mo-e-mark) both; }
.bubble::after { content: ''; position: absolute; bottom: -12px; width: 0; height: 0; border: 12px solid transparent; border-bottom: 0; border-top-color: var(--stage-paper); }
.bubble[data-side="l"] { align-self: flex-start; margin-left: max(0px, calc(24% - 150px)); }
.bubble[data-side="r"] { align-self: flex-end; margin-right: max(0px, calc(24% - 150px)); }
.bubble[data-side="l"]::after { left: 22%; }
.bubble[data-side="r"]::after { right: 22%; }
.bubble.is-past { padding: 6px 14px; width: fit-content; max-width: min(460px, 86%); opacity: .82; box-shadow: none; animation: none; }
.bubble.is-past::after { display: none; }
.bubble.is-past .bubble-who { display: inline; margin-right: 8px; }
.bubble.is-past .bubble-line { display: inline; font-size: .98rem; }
.bubble.is-aside { opacity: 1; }
.bubble.is-cheer { width: fit-content; align-self: center; padding: 6px 18px; animation: bubble-in var(--mo-act) var(--mo-e-mark) both; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.bubble-who { display: block; font: 600 .7rem/1.3 var(--sans); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--stage-soft); }
.bubble-line { margin: 2px 0 0; font: 400 clamp(1.45rem, 1.1rem + 1.5vw, 2rem)/1.22 var(--serif); letter-spacing: var(--track-title); color: var(--stage-ink); text-wrap: pretty; }
.bubble-hear { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(28 34 56 / .07); color: var(--stage-ink); cursor: pointer; }
.bubble-hear[data-audio-state="playing"] { background: var(--signal); }
.bubble-hear + .audio-button-status { display: none; }
.bubble-gloss { margin: 6px 0 0; padding: 4px 10px; width: fit-content; border-radius: var(--r-control); background: rgb(246 196 69 / .32); font: 500 .9rem/1.3 var(--sans); color: var(--stage-ink); }
.bubble-meaning { margin: 4px 0 0; max-height: 0; overflow: hidden; opacity: 0; font: 400 1rem/1.35 var(--sans); color: var(--stage-soft); transition: max-height var(--mo-act) var(--e-std), opacity var(--mo-act) var(--e-std); }
.bubble.is-heard .bubble-meaning { max-height: 5em; opacity: 1; }
.no-meaning .bubble:not(.is-question) .bubble-meaning { max-height: 0; opacity: 0; }
.bubble.is-question { padding-right: 18px; text-align: center; }
.bubble.is-question::after { display: none; }
.bubble.is-question .bubble-meaning { max-height: 5em; opacity: 1; }
.bubble .theatre-audio-status { display: none; margin: 0; font: 400 .8rem/1.3 var(--sans); color: var(--stage-soft); }
.bubble:has(.bubble-hear[data-audio-state="retry"]) .theatre-audio-status { display: block; }
.bubble .lesson-audio-word { padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; border-bottom: 1px dotted rgb(28 34 56 / .32); }
.bubble .lesson-audio-word:hover { border-bottom-color: var(--stage-ink); }
.stage.is-solo .stage-actor { left: 50%; width: calc(var(--size) * var(--solo, 1.24) * var(--h, 1)); height: calc(var(--size) * var(--solo, 1.24) * var(--h, 1)); }
.bubble[data-side="c"] { align-self: center; }
.bubble[data-side="c"]::after { left: 50%; margin-left: -12px; }
.bubble.is-you { background: #fdf0c4; align-self: flex-end; width: fit-content; max-width: min(460px, 92%); }
.bubble.is-you::after { display: none; }
.bubble-tl { margin: 2px 0 0; font: 400 .95rem/1.3 var(--sans); color: var(--stage-soft); }
.stage-option small { display: block; font: 400 .82rem/1.2 var(--sans); color: var(--stage-soft); }
.stage-name { display: grid; gap: 8px; max-width: 460px; margin: 0 auto; }
.stage-name label { display: flex; align-items: center; gap: 8px; min-height: var(--control-h); padding: 0 12px; border: 1px solid var(--rule); border-radius: var(--r-surface); background: var(--stage-paper); color: var(--stage-ink); font: 400 1.14rem/1.2 var(--serif); }
.stage-name span { flex: none; }
.stage-name input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: inherit; font: inherit; }
.stage-name .btn { width: 100%; min-height: var(--control-h); }
.stage-tray:empty { min-height: 76px; }
.stage-tray { position: relative; z-index: 3; flex: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--galley, var(--paper)); border-top: 1px solid var(--rule); color: var(--ink); }
.stage-way { display: flex; gap: 10px; justify-content: center; align-items: stretch; max-width: 640px; margin: 0 auto; }
.stage-next { flex: 1; min-height: var(--control-h); }
.stage-back { flex: none; width: var(--control-h); display: grid; place-items: center; border: 1px solid var(--rule); border-radius: var(--r-control); background: none; color: var(--ink); cursor: pointer; }
.stage-back svg { transform: scaleX(-1); }
.stage-back:disabled { opacity: .3; cursor: default; }
.stage-turn { max-width: 640px; margin: 0 auto; display: grid; gap: 8px; }
.stage-prompt { margin: 0; font: 400 1rem/1.35 var(--sans); color: var(--ink); }
.stage-prompt span { color: var(--ink-2, var(--ink)); opacity: .72; }
.stage-prompt strong { font-weight: 600; }
.stage-options { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.stage-options.is-people { grid-template-columns: 1fr 1fr; }
.stage-option { min-height: var(--control-h); padding: 10px 14px; border: 1px solid var(--rule); border-radius: var(--r-surface); background: var(--stage-paper); color: var(--stage-ink); font: 400 1.14rem/1.25 var(--serif); text-align: left; cursor: pointer; box-shadow: var(--sh-press-quiet); transition: transform var(--mo-touch) var(--e-std); }
.stage-options.is-people .stage-option { text-align: center; font: 600 1rem/1.2 var(--sans); }
.stage-option:hover { transform: translateY(-1px); }
.stage-option:active { transform: translateY(1px); box-shadow: none; }
.stage-option.is-right { background: #dcefd8; border-color: #3f8a55; }
.stage-option.is-wrong { opacity: .55; border-color: var(--miss); }
.stage-hint { margin: 0; min-height: 1.2em; font: 400 .9rem/1.3 var(--sans); color: var(--ink); opacity: .72; }
.stage-hint:empty { display: none; }
.stage.is-noticing .stage-tray { max-height: 62%; overflow: auto; }
.stage-notice { max-width: 640px; margin: 0 auto; display: grid; gap: 10px; }
.stage-notice .theatre-guess { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.stage-notice .theatre-guess p { margin: 0; flex: 1 1 240px; font: 400 1rem/1.35 var(--sans); }
.stage-notice .theatre-after { display: grid; gap: 10px; }
.stage-notice .theatre-after[hidden] { display: none; }
.stage-idea { margin: 0; font: 400 1.06rem/1.42 var(--sans); }
.stage-more summary { cursor: pointer; font: 500 .92rem/1.3 var(--sans); }
.stage-more p { margin: 6px 0 0; font: 400 .98rem/1.45 var(--sans); }
.stage-words { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-words button { display: grid; gap: 1px; padding: 6px 12px; min-height: 44px; border: 1px solid var(--rule); border-radius: var(--r-control); background: var(--stage-paper); color: var(--stage-ink); cursor: pointer; text-align: left; }
.stage-words strong { font: 400 1.08rem/1.15 var(--serif); }
.stage-words span { font: 400 .78rem/1.2 var(--sans); color: var(--stage-soft); }
.stage-words button[aria-pressed="true"] { border-color: var(--signal-ink); }
.stage-notice .theatre-word-status:empty { display: none; }
.stage-notice .theatre-word-status { margin: 0; font: 400 .85rem/1.3 var(--sans); }
@media (max-width: 640px) {
.stage-tool[data-stage-meaning] { display: none; }
.bubble { padding-right: 46px; }
.bubble[data-side] { margin-left: 0; margin-right: 0; align-self: stretch; }
.bubble.is-past { align-self: flex-start; }
.stage-actor[data-side="l"] { left: 22%; }
.stage-actor[data-side="r"] { left: 78%; }
}
@media (max-height: 640px) {
.stage-talk { top: 46px; }
.bubble { padding-block: 8px; }
.bubble.is-past { display: none; }
.bubble-line { font-size: 1.3rem; }
.bubble-tl, .bubble-meaning { font-size: .9rem; margin-top: 2px; }
.stage-tray { padding-block: 8px; }
.stage-options { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }
.stage-option { min-height: 44px; padding: 6px 8px; font-size: 1rem; text-align: center; }
.stage-option small { font-size: .74rem; }
}
html[data-motion="low"] .bubble { animation: none; }
.gx-stage.has-band { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.gx-stage.has-band > .pl, .gx-stage.has-band > .atmos-stage { display: none; }
.gx-stage.has-band > :not(.lesson-band, .gx) { position: absolute; }
.lesson-band { position: relative; flex: none; height: clamp(170px, 34dvh, 320px); border-bottom: 1px solid var(--rule); }
.lesson-band .stage { height: 100%; }
.lesson-band .stage-tray { display: none; }
.lesson-band .stage-talk { top: 8px; padding: 0 10px 0 52px; }
.lesson-band .bubble { width: min(560px, calc(100% - 8px)); padding: 8px 14px; box-shadow: 0 3px 0 rgb(28 34 56 / .14); animation: none; }
.lesson-band .bubble::after { display: none; }
.lesson-band .bubble-line { font-size: clamp(1.2rem, 1rem + 1.1vw, 1.6rem); margin: 0; }
.lesson-band .bubble .wk-line, .lesson-band .bubble .wk-meaning { margin: 0; color: var(--stage-ink); }
.lesson-band .bubble .wk-line { font: 400 clamp(1.2rem, 1rem + 1.1vw, 1.6rem)/1.25 var(--serif); }
.lesson-band .bubble .wk-meaning { font: 400 .95rem/1.3 var(--sans); color: var(--stage-soft); }
.lesson-band .bubble-meaning { max-height: 4em; opacity: 1; }
.lesson-band .stage-actor[data-side="l"] { left: 16%; }
.lesson-band .stage-actor[data-side="r"] { left: 84%; }
mark.wk-eg { background: rgb(246 196 69 / .55); color: inherit; padding: 0 .12em; border-radius: var(--r-bar); }
.gx-stage.has-band > .gx, .gx-stage.wk-stage.has-band > .wk-sheet { flex: 1; min-height: 0; width: 100%; max-width: 720px; margin: 0 auto; overflow: auto; padding: 10px 16px 12px; display: block; background: none; border: 0; box-shadow: none; }
.gx-stage.gx-adventure.has-band > .gx.gx-done { margin-inline: auto; padding-inline: 16px; }
.gx-stage.has-band .gx .lesson-compass { display: block; padding: 0; margin: 0 0 8px; border: 0; background: none; box-shadow: none; }
.gx-stage.has-band .gx .lesson-window, .gx-stage.has-band .gx .lesson-phase, .gx-stage.has-band .gx .lesson-compass h2, .gx-stage.has-band .gx .lesson-progress > span, .gx-stage.has-band .gx .lesson-compass-copy > :not(.lesson-progress) { display: none; }
.gx-stage.has-band .gx .lesson-progress { margin: 0; }
.gx-stage.has-band .gx .lesson-progress progress { width: 100%; height: 6px; display: block; }
.gx-stage.has-band .gx .gx-top { display: contents; }
.gx-stage.has-band .gx .gx-topic, .gx-stage.has-band .gx .wk-sound { display: none; }
.gx-stage.has-band .gx .gx-quit, .gx-stage.wk-stage.has-band .gx .wk-top-actions .gx-quit, .gx-stage.has-band #wk-leave { position: fixed; z-index: 6; top: 8px; left: 8px; width: 36px; height: 36px; min-width: 0; min-height: 0; padding: 0; overflow: hidden; color: transparent; font-size: 0; border: 0; border-radius: 50%; background: rgb(255 253 246 / .92) center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%231c2238' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); box-shadow: none; }
.gx-stage.has-band .wk-top-actions { display: contents; }
.gx-stage.has-band .wk-journey, .gx-stage.has-band .wk-encouragement, .gx-stage.has-band .wk-stakes, .gx-stage.has-band .wk-page-slots, .gx-stage.has-band .wk-coach-line, .gx-stage.has-band .wk-phone-title, .gx-stage.has-band .ink-challenge { display: none; }
.gx-stage.gx-adventure.has-band .gx .gx-mid { max-height: none; min-height: 0; overflow: visible; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.gx-stage.has-band .wk-opening { display: grid; gap: 10px; padding: 0; background: none; border: 0; box-shadow: none; }
.gx-stage.has-band .wk-mission { margin: 0; font: 400 1.2rem/1.28 var(--serif); letter-spacing: var(--track-title); }
.gx-stage.has-band .wk-task-heading { margin: 0 0 6px; }
.gx-stage.wk-stage.has-band .wk-sheet .wk-footer { position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; justify-content: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); margin: 0; background: var(--paper); border-top: 1px solid var(--rule); box-shadow: none; }
.gx-stage.wk-stage.has-band .wk-sheet .wk-footer > .btn { flex: 1; max-width: 340px; min-height: var(--control-h); }
.gx-stage.wk-stage.has-band .wk-sheet .wk-footer > .btn[hidden] { display: none; }
.gx-stage.has-band > .gx, .gx-stage.wk-stage.has-band > .wk-sheet { padding-bottom: 92px; }
.gx-stage.gx-adventure.has-band #gx-next { position: fixed; z-index: 5; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; max-width: 688px; min-height: var(--control-h); margin: 0 auto; }
body:has(.gx-stage.has-band) .study-dock { display: none; }
.gx-stage.has-band, .gx-stage.gx-theatre { --dock-h: -24px; }
.gx-stage.has-band > .flourish-local { display: none; }
.wk-idea p { margin: 0; font: 400 1.14rem/1.45 var(--sans); }
.wk-idea-pips { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.wk-idea-pips li { width: 18px; height: 5px; border-radius: var(--r-bar); background: var(--rule); }
.wk-idea-pips li.is-done { background: var(--ink); opacity: .45; }
.wk-idea-pips li.is-now { background: var(--signal); }
.gx-stage.has-band .wk-reference { border: 0; padding: 0; }
.gx-stage.has-band .wk-reference summary { cursor: pointer; font: 500 .92rem/1.5 var(--sans); }
.wk-straight[hidden], #wk-idea-next[hidden] { display: none; }
@media (max-width: 640px) {
.lesson-band .stage-actor[data-side="l"] { left: 12%; }
.lesson-band .stage-actor[data-side="r"] { left: 88%; }
}
.living-stage[data-format="welcome"] .living-steps { display: none; }
.gx-stage.living-stage[data-format="welcome"] .living-finish .gx-say { margin-inline: auto; }
.gx-stage.living-stage[data-format="welcome"] .living-finish h1 { position: static; width: auto; height: auto; margin: 4px auto 10px; clip: auto; overflow: visible; white-space: normal; display: block; font: 400 clamp(1.6rem, 1.2rem + 2vw, 2.2rem)/1.15 var(--serif); letter-spacing: var(--track-display); }
.living-first-can { margin: 0 0 8px; font: 400 1.06rem/1.45 var(--sans); }
.living-first-hook { margin: 12px 0; padding: 12px 14px; border-left: 3px solid var(--signal); background: rgb(246 196 69 / .12); font: 400 1.14rem/1.4 var(--serif); }
#v-home:has(#arrival-front.welcome) { max-width: none; width: 100%; margin: 0; padding: 0; }
#arrival-front.welcome { max-width: none; margin: 0; padding: 0; }
.welcome-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.welcome-door { height: calc(100dvh - var(--door-top, 90px)); min-height: 500px; }
header:has(~ #v-home.show #arrival-front.welcome) .nav-rooms, header:has(~ #v-home.show #arrival-front.welcome) #nav-signup, header:has(~ #v-home.show #arrival-front.welcome) #nav-counter { display: none; }
.stage.is-door .stage-actor { width: calc(var(--size) * var(--h, 1)); height: calc(var(--size) * var(--h, 1)); cursor: pointer; outline-offset: -8px; }
.stage.is-door .stage-talk { top: auto; bottom: calc(var(--feet) + var(--size) * var(--h, 1) * .84 + 14px); padding: 0 12px; }
.stage.is-door .stage-talk .bubble { align-self: center; width: fit-content; min-width: 190px; max-width: calc(100% - 8px); margin: 0; padding: 10px 58px 12px 22px; }
.stage.is-door .bubble-line { font-size: clamp(1.9rem, 1.5rem + 2vw, 2.6rem); }
.door-rooms { position: absolute; z-index: 4; top: 12px; left: 12px; font: 500 .84rem/1 var(--sans); }
.door-rooms summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--r-pill); background: rgb(255 253 246 / .92); color: var(--stage-ink); cursor: pointer; list-style: none; }
.door-rooms summary::-webkit-details-marker { display: none; }
details.door-rooms > summary::before { display: none; }
.door-rooms summary::after { content: ''; width: 6px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.door-rooms nav { display: grid; gap: 2px; margin-top: 6px; padding: 6px; min-width: 150px; border-radius: var(--r-surface); background: var(--stage-paper); box-shadow: var(--sh-float); }
.door-rooms .room-language { padding: 10px; border-radius: var(--r-control); color: var(--stage-ink); text-decoration: none; }
.door-rooms .room-language.is-current { font-weight: 600; background: rgb(246 196 69 / .32); }
.stage.is-door .stage-tray { max-height: 62%; overflow: auto; padding-top: 12px; }
.door { display: grid; justify-items: center; gap: 7px; max-width: 440px; margin: 0 auto; text-align: center; }
.door-ask { margin: 0; font: 500 .95rem/1.3 var(--sans); color: var(--ink); }
.door-word { display: grid; justify-items: center; gap: 1px; width: 100%; min-height: 72px; padding: 9px 16px; border: 0; border-radius: var(--r-surface); background: var(--signal); color: #1c2238; box-shadow: var(--sh-press); cursor: pointer; transition: transform var(--mo-touch) var(--e-std); }
.door-word:hover { transform: translateY(-1px); }
.door-word:active { transform: translateY(2px); box-shadow: none; }
.door-word b { font: 400 clamp(1.7rem, 1.5rem + 1vw, 2.1rem)/1.1 var(--serif); letter-spacing: var(--track-title); }
.door-word small { font: 500 .84rem/1.2 var(--sans); }
.door-note { margin: 2px 0 0; font: 400 .86rem/1.3 var(--sans); color: var(--ink); opacity: .72; }
.door-more { width: 100%; text-align: left; }
.door-more summary { padding: 4px 0; text-align: center; font: 500 .9rem/1.4 var(--sans); color: var(--ink); cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.door-more summary::-webkit-details-marker { display: none; }
details.door-more > summary::before { display: none; }
.door-more[open] summary { margin-bottom: 8px; }
.stage.is-door:has(.door-more[open]) .stage-talk { display: none; }
.door-more .welcome-levels, .door-more .welcome-lang { margin: 0 0 10px; }
@media (max-height: 620px) {
.door-word { min-height: 60px; padding-block: 6px; }
.door-ask { font-size: .86rem; }
.welcome-door { min-height: 460px; }
}
:root {
--tone-words: #2a66d6;   --tone-words-soft: #e6efff;   --tone-words-deep: #1b4aa6;
--tone-verbs: #d9701a;   --tone-verbs-soft: #ffeedd;   --tone-verbs-deep: #a8530c;
--tone-grammar: #128a68; --tone-grammar-soft: #dcf5ec; --tone-grammar-deep: #0d6a50;
--tone-lines: #7c4fc4;   --tone-lines-soft: #efe7fb;   --tone-lines-deep: #5f379f;
--tone-play: #d3921a;    --tone-play-soft: #fdf1d3;    --tone-play-deep: #94660c;
--tone-edge: rgb(19 28 56 / .16);
}
[data-theme="sepia"] {
--tone-words-soft: #dfe5ee; --tone-verbs-soft: #f5e3cf; --tone-grammar-soft: #d8e8dd; --tone-lines-soft: #e6dcea; --tone-play-soft: #f4e5c0;
--tone-edge: rgb(58 44 28 / .2);
}
[data-theme="dark"] {
--tone-words: #6ea0f2;   --tone-words-soft: #1b2c52;   --tone-words-deep: #3f74d4;
--tone-verbs: #f2a05c;   --tone-verbs-soft: #39281b;   --tone-verbs-deep: #b45c17;
--tone-grammar: #4fcaa3; --tone-grammar-soft: #123a3b; --tone-grammar-deep: #147a5e;
--tone-lines: #b394ec;   --tone-lines-soft: #2c2452;   --tone-lines-deep: #8560cc;
--tone-play: #f0c35c;    --tone-play-soft: #38301f;    --tone-play-deep: #8f6a12;
--tone-edge: rgb(0 0 0 / .4);
}
[data-tone="words"]   { --k: var(--tone-words);   --k-soft: var(--tone-words-soft);   --k-deep: var(--tone-words-deep); }
[data-tone="verbs"]   { --k: var(--tone-verbs);   --k-soft: var(--tone-verbs-soft);   --k-deep: var(--tone-verbs-deep); }
[data-tone="grammar"] { --k: var(--tone-grammar); --k-soft: var(--tone-grammar-soft); --k-deep: var(--tone-grammar-deep); }
[data-tone="lines"]   { --k: var(--tone-lines);   --k-soft: var(--tone-lines-soft);   --k-deep: var(--tone-lines-deep); }
[data-tone="play"]    { --k: var(--tone-play);    --k-soft: var(--tone-play-soft);    --k-deep: var(--tone-play-deep); }
#v-review.practice-home .practice-head { display: none; }
#v-review.daily-mode > div:not([id]):not([class]) { display: none; }
#v-review.practice-home { display: flex; flex-direction: column; padding-top: 0; }
#v-review.practice-home::after { order: 9; }
#v-review.practice-home #practice-welcome { order: 1; margin-top: 12px; }
#v-review.practice-home #practice-rewards { order: 2; margin-top: 18px; }
#v-review.practice-home .daily-adventure { padding: 0; border: 0; background: none; box-shadow: none; max-width: 760px; margin: 0 auto; width: 100%; }
#v-review.practice-home .daily-loading { min-height: 50vh; display: grid; place-items: center; color: var(--pencil); }
.pm-hero { position: relative; border-radius: 0 0 var(--r-dialog) var(--r-dialog); }
.pm-scene { position: relative; height: clamp(290px, 42dvh, 380px); overflow: hidden; border-radius: var(--r-dialog); background: linear-gradient(180deg, #cfe6ee, #eef0dd 62%, #b9c99a 62%); isolation: isolate; }
.pm-world { position: absolute; inset: 0; }
.pm-world .stage { background: none; }
.pm-world .stage-world { position: absolute; inset: 0; }
.pm-world .stage-set { position: absolute; inset: 0; width: 100%; height: 100%; }
.pm-world .stage-tray, .pm-world .stage-talk { display: none; }
.pm-teacher { position: absolute; left: 4%; bottom: 6px; width: min(46%, 190px); aspect-ratio: 1; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pm-teacher:hover, .pm-teacher:active { background: none; box-shadow: none; transform: none; }
.pm-figure { position: absolute; inset: 0; display: block; }
.pm-say { position: absolute; top: 14px; left: 14px; right: 14px; padding: 12px 16px 13px; border-radius: var(--r-dialog); background: var(--stage-paper, #fffdf6); color: var(--stage-ink, #1c2238); box-shadow: 0 2px 0 rgb(19 28 56 / .14); font: 400 1.14rem/1.32 var(--serif); }
.pm-say::after { content: ""; position: absolute; left: 24%; bottom: -11px; width: 22px; height: 12px; background: inherit; clip-path: polygon(0 0, 100% 0, 18% 100%); }
.pm-say p { margin: 0; }
.pm-say .pm-say-more { color: var(--stage-soft, #5a5f70); }
.pm-say.is-new { animation: pm-say var(--mo-act) var(--e-std, ease) both; }
@keyframes pm-say { from { transform: translateY(5px) scale(.985); opacity: .3; } }
.pm-sheet { display: grid; gap: 10px; justify-items: stretch; margin-top: 14px; }
.pm-plan { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pm-plan li { padding: 4px 11px; border-radius: var(--r-pill); background: var(--k-soft); color: var(--k-deep); font: 600 .84rem/1.3 var(--sans); }
[data-theme="dark"] .pm-plan li { color: var(--k); }
.btn.primary.pm-start { min-height: 60px; font-size: 1.16rem; }
.pm-time { margin: -2px 0 0; text-align: center; color: var(--pencil); font: 400 .84rem/1.3 var(--sans); }
.pm-or { margin: 26px 0 10px; color: var(--carbon); font: 600 1.14rem/1.3 var(--serif); }
.pm-doors { display: grid; gap: 12px; margin: 0; max-width: none; border: 0; padding: 0; }
html[data-motion="full"] .pm-door { animation: pm-door var(--mo-fill) var(--spring-pop, ease) both; animation-delay: calc(var(--n, 0) * var(--mo-touch)); }
html[data-motion="full"] .pm-sheet { animation: pq-rise var(--mo-act) var(--e-std, ease) both; }
.pm-door:nth-child(2) { --n: 1; } .pm-door:nth-child(3) { --n: 2; }
@keyframes pm-door { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.pm-door { position: relative; display: flex; align-items: stretch; justify-content: space-between; width: 100%; min-height: 112px; padding: 14px 12px 14px 18px; border: 0; border-radius: var(--r-dialog); background: var(--k-deep); color: #fff; text-align: left; box-shadow: 0 5px 0 color-mix(in srgb, var(--k-deep) 62%, #000); cursor: pointer; overflow: visible; transition: transform var(--mo-touch) var(--e-std, ease), box-shadow var(--mo-touch) var(--e-std, ease); -webkit-tap-highlight-color: transparent; }
#v-review .pm-doors .pm-door { font: inherit; }
.pm-door:hover { background: var(--k-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 0 color-mix(in srgb, var(--k-deep) 62%, #000); }
.pm-door:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--k-deep) 62%, #000); }
.pm-door-copy { display: grid; align-content: center; gap: 3px; min-width: 0; padding-right: 6px; }
.pm-door strong { font: 600 1.36rem/1.15 var(--serif); }
.pm-door small { font: 400 .92rem/1.32 var(--sans); opacity: .96; }
.pm-door-state { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font: 600 .86rem/1.3 var(--sans); }
.pm-door-state b { font-weight: 700; font-size: 1.02rem; }
.pm-door-state svg { width: 15px; height: 15px; }
.pm-door-state.is-locked { opacity: .86; font-weight: 500; }
.pm-door[data-locked] { filter: saturate(.55); }
.pm-door-fig { position: relative; flex: none; align-self: center; width: 96px; height: 96px; }
.pm-strength { display: grid; gap: 7px; width: 100%; margin: 20px 0 0; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r-dialog); background: var(--card); color: var(--carbon); text-align: left; cursor: pointer; }
.pm-strength-head { display: flex; justify-content: space-between; align-items: baseline; font: 600 1rem/1.3 var(--sans); }
.pm-strength-bar { display: flex; gap: 3px; height: 12px; }
.pm-strength-bar i { min-width: 6px; border-radius: var(--r-pill); transform-origin: left; }
html[data-motion="full"] .pm-strength-bar i { animation: pm-grow var(--mo-sum) var(--e-std, ease) var(--mo-act) both; }
@keyframes pm-grow { from { transform: scaleX(.04); } }
.pm-strength .is-strong { --dot: var(--tone-grammar); } .pm-strength .is-growing { --dot: var(--tone-play); } .pm-strength .is-new { --dot: var(--tone-words); }
.pm-strength-bar i { background: var(--dot); }
.pm-strength-key { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--pencil); font: 400 .84rem/1.3 var(--sans); }
.pm-strength-key span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; background: var(--dot); }
.pm-lower { margin-top: 16px; }
.pm-level { margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.pm-level legend { padding: 0; margin-bottom: 8px; color: var(--carbon); font: 600 1rem/1.3 var(--sans); }
.pm-level-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: var(--r-surface); background: var(--paper-2, #eee8d8); }
.pm-level label { display: block; cursor: pointer; }
.pm-level input { position: absolute; opacity: 0; pointer-events: none; }
.pm-level span { display: grid; place-items: center; min-height: 44px; border-radius: var(--r-control); color: var(--pencil); font: 600 .95rem/1.2 var(--sans); }
.pm-level input:checked + span { background: var(--card); color: var(--carbon); box-shadow: 0 2px 0 var(--tone-edge); }
.pm-level input:focus-visible + span { outline: 3px solid var(--signal-ink, var(--carbon)); outline-offset: 2px; }
.pm-level-note { margin: 7px 2px 0; color: var(--pencil); font: 400 .86rem/1.4 var(--sans); }
.pm-flood { position: fixed; inset: 0; z-index: 250; background: var(--k-soft); clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); animation: pm-flood var(--mo-act) var(--e-std, ease) both; pointer-events: none; }
.pm-flood.is-through { opacity: 0; transition: opacity var(--mo-ink) var(--e-std, ease); }
@keyframes pm-flood { to { clip-path: circle(150vmax at var(--x, 50%) var(--y, 50%)); } }
body:has(#v-review.show.practice-round[data-tone="words"])   { --k: var(--tone-words);   --k-soft: var(--tone-words-soft);   --k-deep: var(--tone-words-deep); }
body:has(#v-review.show.practice-round[data-tone="verbs"])   { --k: var(--tone-verbs);   --k-soft: var(--tone-verbs-soft);   --k-deep: var(--tone-verbs-deep); }
body:has(#v-review.show.practice-round[data-tone="grammar"]) { --k: var(--tone-grammar); --k-soft: var(--tone-grammar-soft); --k-deep: var(--tone-grammar-deep); }
body:has(#v-review.show.practice-round[data-tone="lines"])   { --k: var(--tone-lines);   --k-soft: var(--tone-lines-soft);   --k-deep: var(--tone-lines-deep); }
body:has(#v-review.show.practice-round[data-tone="play"])    { --k: var(--tone-play);    --k-soft: var(--tone-play-soft);    --k-deep: var(--tone-play-deep); }
body:has(#v-review.show.practice-round[data-tone])::after { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--k-soft); transition: background-color var(--mo-fill) var(--e-std, ease); pointer-events: none; }
body:has(#v-review.show.practice-round[data-tone]) .study-dock, body:has(#v-review.show.practice-round[data-tone]) .study-dock::before { background: var(--k-soft); box-shadow: none; }
body:has(#v-review.show.practice-round[data-tone]) .study-dock::after { background: linear-gradient(to bottom, transparent, var(--k-soft)); }
body:has(#v-review.show.practice-round[data-tone]) .study-dock__rule { display: none; }
#v-review.practice-round[data-tone] { background: none; }
#v-review.show.practice-active.practice-round { min-height: 100vh; min-height: 100dvh; }
#v-review.practice-round .practice-head, #v-review.practice-round .rev-head, #v-review.practice-round #practice-rewards { display: none; }
#v-review.practice-round .daily-adventure { padding: 0; border: 0; background: none; box-shadow: none; max-width: 640px; margin: 0 auto; }
#v-review .daily-adventure .pq-top { position: sticky; top: var(--practice-header-top, 0); z-index: 3; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; margin: 0 0 8px; min-height: 44px; padding: 4px 0; border: 0; background: var(--k-soft); }
.pq-top .daily-back, .pq-top .daily-sound { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; color: var(--pencil); }
.pq-top svg { width: 22px; height: 22px; }
.pq-top .daily-sound[aria-pressed="false"] { opacity: .45; }
.pq-top .daily-meter { margin: 0; }
.pq-top .daily-meter progress { display: block; width: 100%; height: 14px; border: 0; border-radius: var(--r-pill); overflow: hidden; background: color-mix(in srgb, var(--k) 18%, transparent); -webkit-appearance: none; appearance: none; }
.pq-top .daily-meter progress::-webkit-progress-bar { background: color-mix(in srgb, var(--k) 18%, transparent); border-radius: var(--r-pill); }
.pq-top .daily-meter progress::-webkit-progress-value { background: linear-gradient(180deg, color-mix(in srgb, var(--k) 78%, #fff) 0 34%, var(--k) 34%); border-radius: var(--r-pill); transition: inline-size var(--mo-fill) var(--e-std, ease); }
.pq-top .daily-meter progress::-moz-progress-bar { background: var(--k); border-radius: var(--r-pill); }
#v-review .daily-task { --ink: var(--k); position: relative; padding: 16px 18px 18px; border: 0; border-radius: var(--r-dialog); background: var(--card); box-shadow: 0 4px 0 color-mix(in srgb, var(--k) 26%, transparent); }
#v-review .daily-task::before, #v-review .daily-task::after { display: none; }
.daily-task-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; }
.pq-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; border-radius: var(--r-pill); background: var(--k-deep); color: #fff; font: 600 .82rem/1.3 var(--sans); }
.pq-chip svg { width: 16px; height: 16px; }
#v-review #practice-welcome [data-daily-focus]:focus-visible { outline: 0; }
#v-review .daily-task .daily-why-tag { margin: 0; padding: 3px 9px; border: 0; border-radius: var(--r-pill); background: var(--k-soft); color: var(--k-deep); font: 500 .8rem/1.3 var(--sans); }
[data-theme="dark"]
#v-review #practice-welcome [data-daily-focus]:focus-visible { outline: 0; }
#v-review .daily-task .daily-why-tag { color: var(--k); }
#v-review .daily-task h2 { margin: 0 0 8px; color: var(--pencil); font: 500 1.02rem/1.3 var(--sans); outline: none; }
#v-review .daily-task .daily-line { margin: 10px 0 12px; padding: 0; border: 0; background: none; color: var(--carbon); text-align: center; font: 400 1.5rem/1.35 var(--serif); }
#v-review .daily-task .daily-line-word { font-size: clamp(2.3rem, 11vw, 3rem); line-height: 1.15; }
#v-review .daily-task .daily-line-revealed { font-size: clamp(1.9rem, 9vw, 2.5rem); }
#v-review .daily-task .daily-line-meaning { font-size: 1.7rem; }
.pq-meaning { margin: -4px 0 8px; text-align: center; color: var(--k-deep); font: 600 1.2rem/1.3 var(--sans); }
[data-theme="dark"] .pq-meaning { color: var(--k); }
.pq-example { margin: 10px 0 2px; text-align: center; color: var(--carbon); font: 400 1.1rem/1.4 var(--serif); }
.pq-example-en { margin: 0 0 8px; text-align: center; color: var(--pencil); font: 400 .9rem/1.35 var(--sans); }
#v-review .daily-task .daily-source { margin: 0 0 8px; text-align: center; color: var(--pencil); font: 400 .84rem/1.3 var(--sans); }
.btn.pq-got { width: 100%; min-height: 54px; }
#v-review .daily-listening { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin: 0 0 10px; }
#v-review .daily-listening .btn { display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 38px; padding: 0 14px; border-color: color-mix(in srgb, var(--k) 40%, var(--rule)); color: var(--k-deep); background: none; box-shadow: none; font-size: .9rem; }
[data-theme="dark"] #v-review .daily-listening .btn { color: var(--k); }
.pq-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 8px; }
.pq-help .daily-listening { margin: 0; }
#v-review .pq-help .daily-listening .btn { min-height: 44px; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 4px; color: var(--carbon); font: 600 .8rem/1.4 var(--sans); }
#v-review .daily-choices { display: grid; gap: 10px; margin: 0; }
#v-review .daily-choices.is-tiles { grid-template-columns: 1fr 1fr; }
#v-review .daily-choices button { min-height: 56px; padding: 11px 14px; border: 2px solid color-mix(in srgb, var(--k) 26%, var(--rule)); border-radius: var(--r-dialog); background: var(--card); color: var(--carbon); box-shadow: 0 3px 0 color-mix(in srgb, var(--k) 26%, var(--rule)); font: 600 1.04rem/1.3 var(--sans); text-align: center; transition: transform var(--mo-touch) var(--e-std, ease), box-shadow var(--mo-touch) var(--e-std, ease), background-color var(--mo-touch) var(--e-std, ease); }
#v-review .daily-choices button[lang] { font: 500 1.2rem/1.3 var(--serif); }
#v-review #daily-answer:not(.is-decided) .is-unheard .lesson-audio-choices { display: none; }
#daily-answer.is-decided .lesson-audio-choice-row:not(:has([data-right], .is-chosen)) { display: none; }
#v-review .daily-choices button:hover:not(:disabled) { background: var(--k-soft); }
#v-review .daily-choices button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--k) 26%, var(--rule)); }
#v-review #daily-answer.is-decided button:disabled { opacity: 1; box-shadow: none; }
#daily-answer.is-decided button:not(.is-chosen):not([data-right]) { display: none; }
#daily-answer.is-decided .daily-choices.is-tiles { grid-template-columns: 1fr; }
#daily-answer.is-decided button[data-right] { border-color: var(--k-deep); background: var(--k-deep); color: #fff; animation: pq-pop var(--mo-act) var(--spring-pop, ease) both; }
#daily-answer.is-decided button[data-right] svg { vertical-align: -3px; margin-right: 6px; }
#daily-answer.is-decided button.is-chosen:not([data-right]) { border-style: dashed; color: var(--pencil); background: none; animation: pq-sway var(--mo-act) var(--e-std, ease) both; }
@keyframes pq-pop { 0% { transform: scale(.97); } 60% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes pq-sway { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
#v-review .daily-feedback, #v-review .daily-feedback.is-right, #v-review .daily-feedback.is-learning { margin-top: 12px; box-shadow: none; padding: 12px 14px; border: 0; border-radius: var(--r-surface); background: var(--k-soft); animation: pq-rise var(--mo-ink) var(--e-std, ease) both; }
#v-review .daily-feedback h3 { margin: 0 0 4px; font: 600 1.1rem/1.3 var(--serif); color: var(--carbon); }
#v-review .daily-feedback .daily-correction { margin: 4px 0; padding: 0; border: 0; background: none; color: var(--carbon); font: 500 1.16rem/1.35 var(--serif); }
#v-review .daily-feedback .daily-correction::before, #v-review .daily-feedback .daily-correction::after { display: none; }
#v-review .daily-feedback .daily-why { margin: 4px 0; font: 400 .96rem/1.45 var(--sans); }
#v-review .daily-feedback .daily-principle { margin: 8px 0 0; padding: 8px 0 0; border: 0; border-top: 1px solid color-mix(in srgb, var(--k) 24%, transparent); background: none; }
#v-review .daily-feedback .daily-explanation { margin-top: 6px; }
@keyframes pq-rise { from { transform: translateY(8px); opacity: .2; } }
.pq-strength { display: flex; align-items: center; gap: 8px; margin: 6px 0; color: var(--pencil); font: 400 .84rem/1.3 var(--sans); }
.pq-dots { display: inline-flex; gap: 4px; }
.pq-dots i { width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--k, var(--tone-grammar)) 18%, var(--card)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k, var(--tone-grammar)) 40%, transparent); }
.pq-dots i.is-on { background: var(--k, var(--tone-grammar)); box-shadow: none; }
.pq-dots i.is-new { animation: pq-dot var(--mo-fill) var(--spring-pop, ease) calc(var(--mo-ink) + var(--i, 0) * var(--mo-touch)) both; }
@keyframes pq-dot { 0% { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.35); } 100% { transform: scale(1); } }
#v-review .daily-response-space { min-height: 0; }
.daily-skip { display: block; margin: 12px auto 0; }
.pq-note { margin: 6px 0; color: var(--pencil); font: italic 400 .95rem/1.4 var(--serif); }
.pq-say { position: fixed; z-index: 247; left: max(16px, calc(50vw - 374px)); bottom: calc(126px + env(safe-area-inset-bottom, 0px)); max-width: min(280px, calc(100vw - 32px)); margin: 0; padding: 9px 13px; border-radius: var(--r-dialog); background: var(--stage-paper, #fffdf6); color: var(--stage-ink, #1c2238); box-shadow: 0 2px 0 rgb(19 28 56 / .16); font: 500 1rem/1.3 var(--serif); pointer-events: none; opacity: 0; }
.pq-say::after { content: ""; position: absolute; left: 26px; bottom: -9px; width: 18px; height: 10px; background: inherit; clip-path: polygon(0 0, 100% 0, 22% 100%); }
.pq-say.is-on { opacity: 1; animation: pm-say var(--mo-act) var(--e-std, ease) both; }
.pq-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pq-pairs > div { display: grid; gap: 10px; align-content: start; }
.pq-pairs button { min-height: 58px; padding: 8px 10px; border: 2px solid color-mix(in srgb, var(--k) 26%, var(--rule)); border-radius: var(--r-dialog); background: var(--card); color: var(--carbon); box-shadow: 0 3px 0 color-mix(in srgb, var(--k) 26%, var(--rule)); font: 600 .98rem/1.25 var(--sans); overflow-wrap: anywhere; transition: transform var(--mo-touch) var(--e-std, ease), background-color var(--mo-touch) var(--e-std, ease), opacity var(--mo-act) var(--e-std, ease); }
.pq-pairs button[lang] { font: 500 1.14rem/1.2 var(--serif); }
.pq-pairs button.is-held { border-color: var(--k-deep); background: var(--k-soft); transform: translateY(2px); box-shadow: none; }
.pq-pairs button.is-matched { border-color: var(--k-deep); background: var(--k-deep); color: #fff; box-shadow: none; animation: pq-pop var(--mo-act) var(--spring-pop, ease) both; opacity: .42; }
.pq-pairs button.is-off { animation: pq-sway var(--mo-act) var(--e-std, ease) both; }
.pq-finish { padding: 18px; border: 0; border-radius: var(--r-dialog); background: var(--card); box-shadow: 0 4px 0 color-mix(in srgb, var(--k, var(--tone-play)) 26%, transparent); }
.pq-finish h2 { margin: 4px 0 2px; font: 600 1.7rem/1.2 var(--serif); text-align: center; }
.pq-finish .daily-flow-result { justify-content: center; margin: 0 0 12px; color: var(--pencil); font: 500 .95rem/1.3 var(--sans); text-align: center; }
.pq-tomorrow { margin: 10px 0; text-align: center; color: var(--carbon); font: 500 1rem/1.35 var(--sans); }
.pq-finish .daily-grew { border: 0; background: var(--k-soft, var(--paper-2)); border-radius: var(--r-surface); }
.pq-finish .daily-grew li { grid-template-columns: 1fr auto; }
.pq-finish .daily-finish-actions { display: grid; gap: 10px; }
.pq-finish .daily-finish-actions .lnk { justify-self: center; }
@media (min-width: 720px) {
.pm-scene { height: 340px; }
.pm-teacher { width: 210px; left: 7%; }
.pm-say { left: auto; right: 7%; top: 44px; width: 52%; }
.pm-say::after { left: -14px; bottom: 28px; width: 16px; height: 22px; clip-path: polygon(100% 0, 100% 100%, 0 70%); }
.pm-doors { grid-template-columns: repeat(3, 1fr); }
.pm-door { display: grid; grid-template-rows: auto 1fr; align-items: start; min-height: 232px; padding: 12px 16px 16px; }
.pm-door-fig { order: -1; justify-self: center; width: 110px; height: 110px; }
.pm-door-copy { align-content: start; }
.pm-sheet { justify-items: center; }
.btn.primary.pm-start { min-width: 340px; }
}
html[data-motion="low"] :is(.pm-say.is-new, .pq-say.is-on, #daily-answer.is-decided button, #v-review .daily-feedback, .pq-dots i.is-new, .pq-pairs button.is-matched, .pq-pairs button.is-off) { animation: none; }
@media (max-width: 719px) {
body:has(#v-review.show.practice-active.practice-round) > header { display: none; }
#v-review.practice-active.practice-round #practice-welcome { margin-top: 4px; }
}