/* Concept B, "Ask it". claude, 2026-11-13.
   Every screen is one question, set large, answered by one working window.
   Loaded after pill.css. Nothing here touches .assembly, the menu or the scene layer. */

@property --cut { syntax: '<percentage>'; inherits: true; initial-value: 42%; }

:root {
  --paper: #f6f2e9;
  --paper-2: #ece6d8;
  --ink: #15211d;
  --ink-2: #4c5852;
  --ink-3: #7d8781;
  --hair: #dbd3c3;
  --red: #b4371f;          /* the one accent: a teacher's red pen */
  --red-l: #f08868;        /* the same red, lifted for dark ground */
  --lesson: #10201b;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ------------------------------------------------------------ a screen -- */
.ask { position: relative; z-index: 1; height: 160svh; font-family: var(--sans); }
.ask__stage {
  position: sticky; top: 0; height: 100svh; max-width: 1560px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
  column-gap: clamp(40px, 5.5vw, 104px);
  padding: calc(var(--pill-clear) + 8px) calc(var(--gutter) + 28px) 40px var(--gutter);
}
.ask :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }
.ask ::selection { background: rgba(180, 55, 31, .22); color: inherit; }

/* The question, on the scene. Ink follows the scene behind it (fall.js sets data-tone). */
.ask__head { --q-ink: #f5f0e4; --q-soft: #c6cec4; --q-no: var(--red-l); color: var(--q-ink); text-shadow: 0 1px 2px rgba(2, 12, 8, .3), 0 0 20px rgba(2, 12, 8, .35); }
.ask__head[data-tone=light] { text-shadow: none; }
.ask__head[data-tone=mid] { --q-ink: #fffaf0; --q-soft: #f3f1ea; --q-no: #fffaf0; text-shadow: 0 1px 2px rgba(6, 24, 40, .35), 0 0 22px rgba(6, 24, 40, .5); }
.ask__head[data-tone=light] { --q-ink: #12201b; --q-soft: #34433d; --q-no: var(--red); }
.ask__no { margin: 0 0 22px; display: flex; align-items: center; gap: 14px; font: 500 12.5px/1 var(--mono); letter-spacing: .16em; color: var(--q-ink); }
.ask__no::after { content: ''; width: 44px; height: 1.5px; background: var(--q-no); }
.ask__head[data-tone=light] .ask__no { color: var(--red); }
.ask__q {
  margin: 0; max-width: 11.5em; font-family: var(--serif); font-weight: 340; font-size: clamp(44px, 4.7vw, 76px);
  line-height: 1.02; letter-spacing: -.022em; text-wrap: balance; font-optical-sizing: auto;
}
.ask__q em { font-style: italic; font-weight: 360; letter-spacing: -.01em; }
.ask__line { margin: 26px 0 0; max-width: 24em; font-size: 18px; line-height: 1.45; color: var(--q-soft); }
.ask__cue { margin: 34px 0 0; display: flex; align-items: center; gap: 14px; font: 500 15px/1 var(--sans); letter-spacing: .005em; color: var(--q-ink); }
.ask__cue::before { content: ''; width: 30px; height: 1.5px; background: var(--q-no); }

/* ------------------------------------------------------------ the window -- */
.win {
  position: relative; color: var(--ink); background: var(--paper); border-radius: 8px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(16, 28, 24, .14), 0 1px 0 rgba(255, 255, 255, .6) inset, 0 34px 70px -34px rgba(3, 10, 8, .62), 0 6px 14px -8px rgba(3, 10, 8, .3);
}
.win__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 58px; padding: 0 9px; border-bottom: 1px solid var(--hair); background: var(--paper); }
.win__full { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; font: 500 12.5px/1 var(--mono); color: var(--ink-2); text-decoration: none; border-radius: 6px; }
.win__full:hover { color: var(--ink); }
.tag { display: inline-block; margin: 0; padding: 4px 7px 3px; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--hair); border-radius: 3px; }

/* segmented switch */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--paper-2); border-radius: 999px; }
.seg__opt { height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font: 500 14.5px/1 var(--sans); color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s; }
.seg__opt:hover { color: var(--ink); }
.seg__opt[aria-checked=true] { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------- a live simulation -- */
.sim { position: relative; aspect-ratio: 16 / 9; background: #050b14; overflow: hidden; }
.sim__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.sim__vs { position: absolute; inset: 0; }
.sim__vs > div { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; }
.sim__vs iframe { display: block; width: 100%; height: 100%; border: 0; background: #050b14; opacity: 0; transition: opacity .3s; }
.sim.is-on .sim__vs iframe { opacity: 1; }
.sim.is-on .sim__poster { opacity: 0; }
.sim__go {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 14px; height: 60px; padding: 0 26px 0 10px; border: 0; border-radius: 999px;
  background: rgba(246, 242, 233, .95); color: var(--ink); font: 500 16px/1 var(--sans); cursor: pointer;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6); transition: transform .25s var(--ease), background .2s;
}
.sim__go:hover { transform: translate(-50%, -50%) scale(1.03); background: #fff; }
.sim__tri { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--red); }
.sim__tri::after { content: ''; position: absolute; left: 16px; top: 13px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff8ec; }
.sim.is-loading .sim__go { pointer-events: none; }
.sim.is-loading .sim__go-t { font-size: 0; }
.sim.is-loading .sim__go-t::after { content: 'Loading'; font-size: 16px; }
.sim.is-loading .sim__tri { animation: b-pulse 1s ease-in-out infinite alternate; }
.sim.is-on .sim__go { display: none; }
@keyframes b-pulse { to { opacity: .45; } }

.win--sim .sim { border-radius: 0 0 8px 8px; }

/* ------------------------------------------------- before and after -- */
.win__tab { height: 40px; padding: 0 14px; border: 0; background: transparent; border-radius: 6px; font: 500 12.5px/1 var(--mono); letter-spacing: .06em; color: var(--ink-2); cursor: pointer; }
.win__tab:hover { color: var(--ink); background: var(--paper-2); }
.ba { position: relative; aspect-ratio: 16 / 10.2; overflow: hidden; touch-action: pan-y; }
.ba__before, .ba__after { position: absolute; inset: 0; }
.ba__after { clip-path: inset(0 0 0 var(--cut)); background: var(--lesson); }
.win--ba.is-glide { transition: --cut .55s var(--ease); }
.ba__rule { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 2px; margin-left: -1px; background: var(--red); pointer-events: none; }
.ba__grip {
  position: absolute; top: 50%; left: var(--cut); z-index: 3; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--red); cursor: ew-resize; touch-action: none; display: grid; place-items: center;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5);
}
.ba__grip span, .ba__grip span::before { display: block; }
.ba__grip span { position: relative; width: 22px; height: 10px; }
.ba__grip span::before, .ba__grip span::after { content: ''; position: absolute; top: 0; border-style: solid; border-color: transparent; }
.ba__grip span::before { left: 0; border-width: 5px 7px 5px 0; border-right-color: var(--red); }
.ba__grip span::after { right: 0; border-width: 5px 0 5px 7px; border-left-color: var(--red); }

/* BEFORE: a ruled page of notes */
.notes {
  position: absolute; inset: 0; padding: 26px 34px 20px 86px; color: #26302c;
  background: #fbf8f1 repeating-linear-gradient(180deg, transparent 0 35px, #d7e0e6 35px 36px) 0 14px / 100% 36px;
}
.notes::before { content: ''; position: absolute; left: 62px; top: 0; bottom: 0; width: 1px; background: rgba(180, 55, 31, .55); }
.notes .tag { position: absolute; right: 20px; top: 20px; background: #fbf8f1; }
.notes__t { margin: 0 0 0; height: 36px; font: italic 400 28px/36px var(--serif); }
.notes__l { margin: 0; padding: 0 0 0 1.1em; font: 400 18px/36px var(--serif); max-width: 34em; }
.notes__l li { padding-left: .3em; }
.notes__l li::marker { font-size: 14px; color: var(--ink-3); }

/* AFTER: the same topic as a lesson */
.lesson { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; padding: 18px; color: #efeadf; }
.lesson :focus-visible { outline-color: var(--red-l); }
.lesson__main, .lesson__side { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; }
.lesson__k { margin: 0; flex: none; font: italic 400 24px/1 var(--serif); color: #f6f1e5; }
.sim--small { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; border-radius: 5px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.sim__poster[src*=newtons] { transform: scale(1.2); }
.sim--small .sim__go { height: 46px; padding: 0 18px 0 6px; font-size: 14px; gap: 10px; }
.sim--small .sim__tri { width: 34px; height: 34px; }
.sim--small .sim__tri::after { left: 13px; top: 10px; }
.clip { position: relative; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: #050b14; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.clip__v { width: 100%; height: 100%; object-fit: cover; }
.clip__go { position: absolute; inset: 0; display: grid; place-items: center; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 5px; }
.clip__go .sim__tri { width: 36px; height: 36px; transition: opacity .2s; }
.clip__go .sim__tri::after { left: 14px; top: 11px; }
.clip__go[aria-pressed=true] .sim__tri { opacity: 0; }
.clip__k { position: absolute; left: 8px; bottom: 7px; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fff8ec; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); pointer-events: none; }
.audio { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; padding: 12px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .14); }
.audio__btn { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); }
.audio__btn .sim__tri { position: absolute; inset: 0; width: auto; height: auto; background: none; }
.audio__btn .sim__tri::after { left: 13px; top: 10px; border-left-color: rgba(255, 255, 255, .45); }
.audio__wave { width: 100%; height: 26px; }
.audio__wave rect { fill: rgba(255, 255, 255, .32); }
.audio .tag { grid-column: 1 / -1; justify-self: start; color: #d9d3c6; border: 1px dashed rgba(255, 255, 255, .35); }
.quiz { padding-top: 2px; }
.quiz__q { margin: 0 0 12px; font: 400 19px/1.25 var(--serif); color: #f6f1e5; }
.quiz__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.quiz__o { height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .32); background: transparent; color: #f2ede2; font: 500 14.5px/1 var(--sans); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.quiz__o:hover { border-color: rgba(255, 255, 255, .7); }
.quiz__o.is-right { background: #f6f1e5; color: var(--ink); border-color: #f6f1e5; }
.quiz__o.is-wrong { border-color: var(--red-l); color: var(--red-l); }
.quiz__fb { min-height: 20px; margin: 10px 0 0; font: 400 14.5px/1.35 var(--sans); color: #d5d9d2; }

/* ----------------------------------------------------------- marking -- */
.mark { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); }
.paper { position: relative; padding: 26px 30px 26px; }
.paper .tag { margin-bottom: 14px; }
.paper__q { margin: 0; max-width: calc(100% - 96px); font: 400 15.5px/1.5 var(--sans); color: var(--ink-2); }
.paper__max { font: 500 12.5px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.paper__a { list-style: none; margin: 22px 0 0; padding: 0; }
.paper__a li { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid #e3dccd; }
.hand { font: italic 400 25px/1 var(--serif); color: #22304f; letter-spacing: .005em; }
.pen { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; min-width: 70px; justify-content: flex-end; font: italic 500 19px/1 var(--serif); color: var(--red); }
.pen svg { width: 24px; height: 20px; overflow: visible; }
.pen path { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pen small { font: italic 400 14px/1 var(--serif); margin-right: 2px; }
.score { position: absolute; right: 24px; top: 22px; margin: 0; width: 84px; height: 84px; display: grid; place-items: center; grid-auto-flow: column; align-content: center; justify-content: center;
  border: 2px solid var(--red); border-radius: 52% 48% 50% 46% / 48% 52% 46% 54%; transform: rotate(-7deg); color: var(--red); font-family: var(--serif); font-style: italic; }
.score__n { font-size: 38px; line-height: 1; font-weight: 450; }
.score__of { font-size: 20px; line-height: 1; align-self: end; padding-bottom: 5px; margin-left: 1px; }
.score.is-bump .score__n { animation: b-bump .35s var(--ease); }
@keyframes b-bump { from { transform: scale(1.35); } }
.rules { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 26px 26px; background: var(--paper-2); border-left: 1px solid var(--hair); }
.rules__k { margin: 0 0 4px; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.rule { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 66px; padding: 0 14px 0 16px; border: 1px solid var(--hair); border-radius: 8px; background: var(--paper); color: var(--ink); font: 500 16px/1.25 var(--sans); text-align: left; cursor: pointer; transition: border-color .2s, opacity .2s; }
.rule:hover { border-color: #b9b09e; }
.rule.is-moot { opacity: .5; }
.sw { position: relative; flex: none; width: 48px; height: 28px; border-radius: 14px; background: #cbc3b2; transition: background .2s; }
.sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .22s var(--ease); }
.rule[aria-checked=true] .sw { background: var(--ink); }
.rule[aria-checked=true] .sw::after { transform: translateX(20px); }

/* ------------------------------------------------- AI, code, you -- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--hair); }
.steps__s { position: relative; display: flex; align-items: center; gap: 10px; height: 62px; padding: 0 22px; font: 500 15px/1 var(--sans); color: var(--ink-3); transition: color .3s; }
.steps__s + .steps__s { border-left: 1px solid var(--hair); }
.steps__s::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: transparent; transition: background .3s; }
.steps__s i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; transition: background .3s; }
.steps__s.is-done { color: var(--ink); }
.steps__s.is-done i { background: currentColor; }
.steps__s.is-now { color: var(--ink); }
.steps__s.is-now::before { background: var(--red); }
.steps__s.is-now i { background: var(--red); border-color: var(--red); }
.sheet { position: relative; padding: 24px 44px 8px; }
.sheet .tag { margin-bottom: 10px; }
.sheet__t { width: 100%; border-collapse: collapse; font-family: var(--serif); font-variant-numeric: tabular-nums lining-nums; }
.sheet__t th { text-align: left; font-weight: 400; }
.sheet__t td { text-align: right; }
.sheet__t tbody tr { border-bottom: 1px solid #e3dccd; }
.sheet__t tbody :is(th, td) { height: 52px; font-size: 22px; }
.sheet__t tbody th { color: var(--ink-2); }
.sheet__t tfoot :is(th, td) { height: 76px; font-size: 32px; font-weight: 450; }
.sheet__ai { display: inline-block; position: relative; transition: color .3s; }
.sheet__ai::after { content: ''; position: absolute; left: -5px; right: -5px; top: 52%; height: 2.5px; background: var(--red); transform: scaleX(0) rotate(-8deg); transform-origin: 0 50%; transition: transform .35s var(--ease); }
[data-step="1"] .sheet__ai, [data-step="2"] .sheet__ai { color: var(--ink-3); }
[data-step="1"] .sheet__ai::after, [data-step="2"] .sheet__ai::after { transform: scaleX(1) rotate(-8deg); }
.sheet__fix { display: inline-block; min-width: 0; margin-left: 0; color: var(--red); font-style: italic; opacity: 0; transition: opacity .3s .15s; }
.sheet__fix:not(:empty) { margin-left: 16px; }
[data-step="1"] .sheet__fix, [data-step="2"] .sheet__fix { opacity: 1; }
.sheet__sum { min-height: 18px; margin: 6px 0 0; text-align: right; font: 500 13px/1 var(--mono); letter-spacing: .04em; color: var(--ink-2); }
.stamp { position: absolute; left: 44px; bottom: 14px; padding: 9px 14px 8px; border: 2px solid var(--red); border-radius: 4px; color: var(--red); font: 600 14px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; transform: rotate(-6deg) scale(1.25); opacity: 0; transition: opacity .2s, transform .3s var(--ease); pointer-events: none; }
[data-step="2"] .stamp { opacity: 1; transform: rotate(-6deg) scale(1); }
.check__act { display: flex; justify-content: flex-end; padding: 18px 44px 28px; }
.btn { height: 50px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 15.5px/1 var(--sans); cursor: pointer; transition: background .2s; }
.btn:hover { background: #2a3a34; }

/* ----------------------------------------------------- other builds -- */
.range { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.range li { min-width: 0; }
.range li:nth-child(odd) { border-right: 1px solid var(--hair); }
.range li:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
.tile { display: flex; flex-direction: column; gap: 14px; width: 100%; height: 100%; padding: 22px 24px 20px; border: 0; border-radius: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: background .25s; }
.tile:hover, .tile[aria-pressed=true] { background: #fbf8f2; }
.ask .tile:focus-visible { outline-offset: -4px; }
.tile__n { font: 500 15.5px/1.2 var(--sans); }
.art { width: 100%; height: auto; max-height: 150px; overflow: visible; }
.art * { transition: transform .6s var(--ease), opacity .4s, fill .3s, stroke-dashoffset .8s var(--ease); }
.art .ln { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.art .ln--f { stroke-dasharray: 2 3; opacity: .55; }
.art .team-a circle { fill: var(--ink); }
.art .team-b circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.art .pass { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-dasharray: 130; stroke-dashoffset: 130; stroke-linecap: round; }
.art .runner { fill: var(--red); transform: translate(-94px, 48px); opacity: 0; }
.tile:hover .pass, .tile[aria-pressed=true] .pass { stroke-dashoffset: 0; }
.tile:hover .runner, .tile[aria-pressed=true] .runner { transform: none; opacity: 1; }
.tile:hover .team-b circle:nth-child(1), .tile[aria-pressed=true] .team-b circle:nth-child(1) { transform: translate(10px, -14px); }
.art .body { fill: #1e2925; }
.art .key { fill: #39463f; }
.art .key.is-target { transition-delay: .25s; }
.tile:hover .key.is-target, .tile[aria-pressed=true] .key.is-target { fill: var(--red); }
.art .mute { stroke: #fff8ec; stroke-width: 1.6; stroke-linecap: round; fill: none; opacity: 0; transition-delay: .25s; }
.tile:hover .mute, .tile[aria-pressed=true] .mute { opacity: 1; }
.art .say { font: italic 400 14px var(--serif); fill: var(--ink-2); }
.tile--web .body { fill: #fbf8f2; stroke: var(--ink-3); stroke-width: 1; }
.art .dot { fill: var(--ink-3); }
.art .ink { fill: var(--ink); }
.art .soft { fill: var(--ink-3); }
.art .win-mini { fill: var(--paper-2); stroke: var(--hair); }
.art .lens { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.tile:hover .page, .tile[aria-pressed=true] .page { transform: translateY(-8px); }
.tile:hover .lens, .tile[aria-pressed=true] .lens { transform: translateY(46px); }
.art .wave rect { fill: var(--ink); }
.art .wave--b rect { fill: var(--ink-3); }
.art .wave--b { transform: translateX(9px); }
.tile:hover .wave--b, .tile[aria-pressed=true] .wave--b { transform: none; }
.art .beat { stroke: var(--red); stroke-width: 1.4; }
.art .fader { fill: var(--ink); }
.tile:hover .fader, .tile[aria-pressed=true] .fader { transform: translateX(44px); }

/* ---------------------------------------------------------- your job -- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 22px 24px 20px; border-bottom: 1px solid var(--hair); }
.chip { height: 42px; padding: 0 18px; border: 1px solid var(--hair); border-radius: 999px; background: var(--paper); color: var(--ink); font: 500 14.5px/1 var(--sans); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chip:hover { border-color: #b9b09e; }
.chip[aria-checked=true] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.split { margin: 0; }
.split__r { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; min-height: 92px; padding: 0 30px 0 24px; }
.split__r + .split__r { border-top: 1px solid var(--hair); }
.split dt { font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.split__r:last-child dt { color: var(--red); }
.split dd { margin: 0; font: 400 clamp(22px, 2vw, 28px)/1.2 var(--serif); letter-spacing: -.01em; transition: opacity .18s; }
.split.is-swap dd { opacity: 0; }

/* ------------------------------------------------- about and contact -- */
.ask--end { height: auto; }
.ask__stage--end { position: relative; height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: stretch; padding-bottom: 0; }
.end { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; column-gap: clamp(40px, 5.5vw, 104px); margin: auto 0; }
.end__col { scroll-margin-top: calc(var(--pill-clear) + 24px); display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.end .ask__head { align-self: end; margin-bottom: 30px; }
.ask__q--sm { font-size: clamp(38px, 3.6vw, 58px); }
.win--who, .win--go { padding: 30px 32px 32px; min-height: 256px; }
.who__n { margin: 0 0 14px; font: 400 34px/1.1 var(--serif); letter-spacing: -.015em; }
.who__f { list-style: none; margin: 0; padding: 0; }
.who__f li { padding: 11px 0; border-top: 1px solid var(--hair); font: 400 16px/1.4 var(--sans); color: var(--ink-2); }
.go__t { margin: 0 0 26px; font: italic 400 40px/1.1 var(--serif); letter-spacing: -.015em; }
.mail { height: 54px; padding: 0 28px; border: 1.5px dashed var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 500 16px/1 var(--sans); cursor: pointer; }
.mail:hover { background: var(--paper-2); }
.mail__note { margin: 14px 0 0; font: 500 12px/1.4 var(--mono); color: var(--ink-2); transition: color .2s; }
.mail__note.is-flash { color: var(--red); }
.foot { display: flex; justify-content: space-between; gap: 16px; padding: 56px 0 26px; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; color: #fbf6ea; text-shadow: 0 1px 2px rgba(20, 10, 2, .6), 0 0 14px rgba(20, 10, 2, .55); }
.foot[data-tone=light] { color: var(--ink); }
.foot span:first-child { font-weight: 600; }

/* ------------------------------------------- the scrollbar: the scene -- */
.mini { position: fixed; z-index: 55; right: 18px; top: 24px; bottom: 24px; width: 14px; cursor: grab; }
.mini:active { cursor: grabbing; }
.mini__strip { position: absolute; inset: 0; border-radius: 3px; overflow: hidden; opacity: .82; transition: opacity .25s;
  box-shadow: 0 0 0 1px rgba(255, 252, 244, .55), 0 0 0 2px rgba(8, 18, 15, .28); }
.mini:hover .mini__strip { opacity: 1; }
.mini__strip img { display: block; width: 100%; height: 10%; object-fit: fill; pointer-events: none; user-select: none; }
.mini__lens { position: absolute; left: -4px; right: -4px; top: var(--lens-y, 0px); height: var(--lens-h, 20px); min-height: 10px; border: 1.5px solid #fffaf0; border-radius: 3px; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(8, 18, 15, .45), 0 2px 8px rgba(0, 0, 0, .35); }
.mini__lens::before { content: ''; position: absolute; left: -9px; top: 50%; width: 6px; height: 2px; margin-top: -1px; background: var(--red-l); border-radius: 1px; box-shadow: 0 0 0 1px rgba(8, 18, 15, .35); }

/* ------------------------------------------------------- reduced motion -- */
html.rm .ask *, html.rm .ask *::before, html.rm .ask *::after, html.rm .mini * { transition: none !important; animation: none !important; }

/* ------------------------------------------- narrower desktop windows -- */
@media (min-width: 761px) and (max-width: 1360px) {
  .rules { padding: 22px 18px; }
  .rule { gap: 10px; padding: 0 12px 0 14px; font-size: 15px; }
  .sw { width: 44px; }
  .rule[aria-checked=true] .sw::after { transform: translateX(16px); }
}

/* --------------------------------------- short desktop windows: no pin -- */
@media (min-width: 761px) and (max-height: 640px) {
  .ask { height: auto; }
  .ask__stage { position: relative; height: auto; min-height: 100svh; }
}

/* ---------------------------------------------------------------- phone -- */
@media (max-width: 760px) {
  .mini { display: none; }
  .ask { height: auto; }
  .ask__stage { position: relative; height: auto; display: block; padding: calc(var(--pill-clear) + 40px) 16px 56px; }
  .ask__head { margin-bottom: 28px; }
  .ask__no { margin-bottom: 16px; }
  .ask__q { font-size: clamp(36px, 10.2vw, 44px); }
  .ask__line { margin-top: 16px; font-size: 17px; }
  .ask__cue { margin-top: 20px; }
  .win__bar { padding: 0 7px; }
  .seg__opt { padding: 0 12px; font-size: 13.5px; }
  .win__full { font-size: 0; width: 40px; justify-content: center; padding: 0; }
  .win__full span { font-size: 16px; }
  .sim__go { height: 52px; padding: 0 20px 0 8px; font-size: 15px; }
  .sim__tri { width: 36px; height: 36px; }
  .sim__tri::after { left: 14px; top: 11px; }

  .ba { aspect-ratio: auto; height: 548px; }
  .notes { padding: 20px 18px 16px 50px; }
  .notes::before { left: 36px; }
  .notes .tag { right: 12px; top: 14px; }
  .notes__l { font-size: 17px; }
  .lesson { grid-template-columns: 1fr; align-content: start; gap: 12px; padding: 14px; }
  .sim--small { flex: none; aspect-ratio: 16 / 9; }
  .lesson__side { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .lesson__side .audio { align-content: center; padding: 10px; }
  .lesson__side .quiz { grid-column: 1 / -1; }

  .mark { grid-template-columns: 1fr; }
  .paper { padding: 20px 18px 16px; }
  .paper__q { max-width: calc(100% - 78px); font-size: 15px; }
  .score { right: 14px; top: 16px; width: 70px; height: 70px; }
  .score__n { font-size: 32px; }
  .hand { font-size: 22px; }
  .rules { border-left: 0; border-top: 1px solid var(--hair); padding: 18px; }
  .rule { min-height: 60px; }

  .steps__s { flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; height: 66px; padding: 0 12px; font-size: 13.5px; }
  .sheet { padding: 18px 18px 6px; }
  .stamp { left: 18px; }
  .check__act { padding: 16px 18px 20px; }
  .sheet__t tbody :is(th, td) { font-size: 20px; height: 48px; }

  .tile { padding: 16px 14px 14px; gap: 10px; }
  .tile__n { font-size: 14px; }

  .chips { padding: 16px; }
  .chip { height: 42px; padding: 0 14px; font-size: 14px; }
  .split__r { grid-template-columns: 62px minmax(0, 1fr); min-height: 80px; padding: 0 16px; }
  .split dd { font-size: 21px; }

  .ask__stage--end { min-height: 0; }
  .end { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 56px; }
  .end__col { display: flex; flex-direction: column; grid-row: auto; }
  .audio .tag { letter-spacing: .06em; white-space: nowrap; font-size: 9.5px; }
  .end .ask__head { margin-bottom: 22px; }
  .win--who, .win--go { padding: 24px 20px; min-height: 0; }
  .go__t { font-size: 34px; }
  .foot { flex-direction: column; gap: 4px; padding-top: 48px; }
}