/* ---- split deck: the whole article held in one viewport, visual and text swap sides between sections ---- */
#reader .inner.deckmode { max-width: none; padding: 0; }
.dk { --dk-h: calc(100vh - var(--barh, 73px)); --dk-dark: #141220; --dk-soft: #cfc9dd; --dk-dim: #6f6a86; --dk-line: #2c2840; --dk-v: 56%; position: relative; }
.dk-track { position: relative; }
.dk-snap { height: 62vh; scroll-snap-align: start; }
.dk-stage { position: sticky; top: var(--barh, 73px); height: var(--dk-h); overflow: hidden; background: var(--paper); margin-bottom: calc(-1 * var(--dk-h)); z-index: 1; }
.dk-spacer { height: var(--dk-h); }
.dk-pane { position: absolute; top: 0; bottom: 0; transition: left 0.95s cubic-bezier(.7,0,.2,1), width 0.95s cubic-bezier(.7,0,.2,1); }
.dk-v { width: var(--dk-v); left: 0; background: var(--dk-dark); overflow: hidden; }
.dk-t { width: calc(100% - var(--dk-v)); left: var(--dk-v); overflow: hidden; }
.dk.flip .dk-v { left: calc(100% - var(--dk-v)); }
.dk.flip .dk-t { left: 0; }
.dk-t.dark { background: var(--dk-dark); color: #ece8f4; }

/* layers crossfade on section change */
.dk-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease, transform .8s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.dk-layer.on { opacity: 1; pointer-events: auto; }
.dk-v .dk-layer { transform: scale(1.035); }
.dk-v .dk-layer.on { transform: none; transition-delay: .25s; }
.dk-t .dk-layer { transform: translateY(24px); }
.dk-t .dk-layer.on { transform: none; transition-delay: .35s; }

/* text pane */
.dk-txt { position: absolute; inset: 0; overflow: hidden; }
.dk-scroll { padding: 12vh 4.6vw 40vh; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.dk-lab { font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); display: flex; gap: 14px; align-items: center; }
.dk-lab i { width: 30px; height: 1px; background: currentColor; opacity: .6; display: inline-block; }
.dk-h { font: 500 clamp(38px, 3.7vw, 66px)/0.92 var(--display); text-transform: uppercase; margin-top: 18px; max-width: 15ch; }
.dk-h em { font-style: normal; color: var(--accent); }
.dk-p { font: 400 18.5px/1.7 var(--serif); color: var(--ink); margin-top: 22px; max-width: 58ch; opacity: .28; transition: opacity .5s ease; }
.dk-p.on { opacity: 1; }
.dk-p.seen { opacity: .55; }
.dk-p em { font-style: normal; color: var(--accent); }
.dk-k { display: block; font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.dk-pull { margin-top: 26px; font: italic 300 clamp(22px, 1.9vw, 30px)/1.3 var(--serif); max-width: 30ch; border-top: 1px solid var(--ink); padding-top: 18px; }
.dk-pull em { color: var(--accent); font-style: italic; }
.dk-cap { margin-top: 20px; font: 500 10px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dk-t.dark .dk-p { color: #ece8f4; } .dk-t.dark .dk-h em, .dk-t.dark .dk-lab { color: #a98cf0; }
/* hero text */
.dk-eyb { font: 500 11px/1.6 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.dk-eyb span { color: var(--muted); }
#reader .dk h1.dk-title { font: 500 clamp(50px, 5vw, 96px)/0.88 var(--display); text-transform: uppercase; margin-top: 24px; display: block; background: none; -webkit-text-fill-color: currentColor; color: var(--ink); letter-spacing: 0; }
#reader .dk h1.dk-title em { font-style: normal; color: var(--accent); -webkit-text-fill-color: var(--accent); }
.dk-dek { margin-top: 22px; font: italic 300 clamp(19px, 1.5vw, 24px)/1.45 var(--serif); color: var(--ink2); max-width: 34ch; }
.dk-meta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.dk-meta span { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); border: 1px solid var(--rule2); padding: 7px 10px; }
.dk-hint { margin-top: 34px; font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.dk-hint i { width: 1px; height: 36px; background: linear-gradient(var(--accent), transparent); animation: dkDrip 2.2s ease-in-out infinite; }
@keyframes dkDrip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* HUD: progress, section counter, chapter */
.dk-hud { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; display: flex; align-items: center; gap: 18px; padding: 0 22px; z-index: 5; pointer-events: none; background: linear-gradient(0deg, rgba(20,18,32,.85), rgba(20,18,32,0)); color: #ece8f4; font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.dk-hud b { font: 500 22px/1 var(--display); letter-spacing: 0; }
.dk-hud small { color: var(--dk-dim); font-size: 10px; }
.dk-bar { flex: 1; height: 2px; background: rgba(255,255,255,.14); position: relative; }
.dk-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--dawn1), #a98cf0); transition: width .5s ease; }
.dk-nav { pointer-events: auto; display: flex; gap: 6px; }
.dk-nav a { width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; display: grid; place-items: center; cursor: pointer; font: 500 14px/1 var(--mono); color: #fff; }
.dk-nav a:hover { background: #fff; color: var(--dk-dark); }

/* ---------- visual kinds ---------- */
.dv { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 6vh 3.4vw 9vh; color: #ece8f4; }
.dv.bleed { padding: 0; }
.dv.bleed > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dv .fig { position: absolute; right: 18px; top: 16px; font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #cfc9dd; background: rgba(20,18,32,.6); padding: 6px 8px; z-index: 2; }
.dv .cap { width: 100%; margin-top: 12px; font: 500 10px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dk-dim); }
.dv .cap b { color: #a98cf0; font-weight: 500; margin-right: 8px; }
.dv .fit { position: relative; max-width: 100%; max-height: 100%; }
.dv .fit img { display: block; max-width: 100%; max-height: calc(var(--dk-h) - 22vh); margin: 0 auto; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
/* stage (zoom + boxes) */
.dv .frame { position: relative; width: min(100%, calc((var(--dk-h) - 22vh) * var(--ar, 1.339))); aspect-ratio: var(--ar, 1.339); overflow: hidden; background: #0f0d18; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.dv .cam { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1.1s cubic-bezier(.22,.7,.18,1); }
.dv .cam img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dv .ov { position: absolute; inset: 0; pointer-events: none; }
.dv .note { width: min(100%, calc((var(--dk-h) - 22vh) * var(--ar, 1.339))); margin-top: 14px; font: 400 17px/1.4 var(--serif); color: var(--dk-soft); min-height: 24px; transition: opacity .3s; }
.dk .hb { position: absolute; border: 2px solid #8b5cf6; border-radius: 5px; opacity: 0; box-shadow: 0 0 20px rgba(139,92,246,.5); transition: left 1.1s cubic-bezier(.22,.7,.18,1), top 1.1s cubic-bezier(.22,.7,.18,1), width 1.1s cubic-bezier(.22,.7,.18,1), height 1.1s cubic-bezier(.22,.7,.18,1), opacity .4s ease .6s; }
.dk .hb.on { opacity: 1; }
.dk .hb.spot { box-shadow: 0 0 20px rgba(139,92,246,.5), 0 0 0 200vmax rgba(20,18,32,.36); }
.dk .hb b { position: absolute; left: -2px; bottom: calc(100% + 6px); white-space: nowrap; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: #6a3fd6; padding: 6px 8px 5px; border-radius: 3px; }
.dk .hb.low b { bottom: auto; top: calc(100% + 6px); } .dk .hb.rt b { left: auto; right: -2px; }
/* data */
.dv.data { align-items: stretch; justify-content: center; gap: 0; padding: 6vh 4.5vw 9vh; }
.dv.data .it { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 22px; padding: 2.2vh 0; border-bottom: 1px solid var(--dk-line); opacity: .25; transition: opacity .6s; }
.dv.data .it.on { opacity: 1; }
.dv.data .num { font: 500 clamp(80px, 11vh, 150px)/0.8 var(--display); color: #f4f0e8; font-variant-numeric: tabular-nums; }
.dv.data .num small { font-size: .3em; color: #a98cf0; margin-left: 6px; }
.dv.data .il { font: 500 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-soft); padding-bottom: 10px; }
/* statement */
.dv.statement { align-items: flex-start; padding: 8vh 5vw 10vh; }
.dv.statement .big { font: 300 clamp(34px, 3.7vw, 64px)/1.08 var(--serif); letter-spacing: -.01em; color: #f4f0e8; max-width: 17ch; }
.dv.statement .big em { font-style: italic; color: #a98cf0; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 3px; background-repeat: no-repeat; background-position: 0 92%; transition: background-size 1.4s cubic-bezier(.7,0,.2,1) .9s; }
.dk-layer.on .dv.statement .big em { background-size: 100% 3px; }
.dv.statement .lab2 { font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #a98cf0; margin-bottom: 28px; }
.dv.light { background: var(--paper2); color: var(--ink); }
.dv.light .big { color: var(--ink); } .dv.light .big em { color: var(--accent); }
/* compare */
.dv .cmp { position: relative; width: min(100%, calc((var(--dk-h) - 26vh) * var(--ar, 1.3))); aspect-ratio: var(--ar, 1.3); overflow: hidden; user-select: none; touch-action: pan-y; cursor: ew-resize; background: #0f0d18; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.dv .cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dv .cmp .b { clip-path: inset(0 0 0 var(--cut, 50%)); }
.dv .cmp .bar { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; background: #fff; box-shadow: 0 0 22px rgba(139,92,246,.9); }
.dv .cmp .bar::after { content: '\2194'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--dk-dark); font: 500 17px/42px var(--mono); text-align: center; }
.dv .cmp .tg { position: absolute; top: 12px; font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 7px 9px; background: rgba(20,18,32,.85); }
.dv .cmp .tg.l { left: 12px; } .dv .cmp .tg.r { right: 12px; background: #6a3fd6; }
.dv .switch { display: inline-flex; margin-top: 16px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 4px; gap: 4px; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.dv .switch span { padding: 8px 12px; border-radius: 999px; cursor: pointer; color: var(--dk-soft); }
.dv .switch span.on { background: #fff; color: var(--dk-dark); }
.dv .switch small { align-self: center; padding: 0 8px 0 6px; color: var(--dk-dim); font-size: 9.5px; }
.dv .pair { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; width: 100%; height: 100%; }
.dv .pair.cols { grid-template-rows: none; grid-template-columns: 1fr 1fr; height: auto; }
.dv .pair figure { margin: 0; position: relative; overflow: hidden; min-height: 0; display: flex; flex-direction: column; }
.dv .pair .im { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #0f0d18; }
.dv .pair .im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dv .pair .tag { position: absolute; left: 10px; top: 10px; z-index: 1; font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 6px 8px; background: #6a3fd6; color: #fff; }
.dv .pair figure:first-child .tag { background: rgba(20,18,32,.85); }
.dv .pair figcaption { font: 500 9.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dk-dim); margin-top: 8px; }
/* process */
.dv .chips { width: 100%; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; margin-top: 16px; position: relative; }
.dv .chips .c { border-top: 2px solid var(--dk-line); padding-top: 12px; opacity: .35; transition: opacity .5s, border-color .5s; }
.dv .chips .c.on { opacity: 1; border-color: #a98cf0; }
.dv .chips .c b { font: 500 11px/1 var(--mono); color: #a98cf0; }
.dv .chips .c h5 { font: 500 clamp(18px, 1.5vw, 24px)/1 var(--display); text-transform: uppercase; margin: 8px 0 6px; color: #f4f0e8; }
.dv .chips .c p { font: 400 13.5px/1.45 var(--serif); color: var(--dk-soft); margin: 0; }
/* scale */
.dv.scale .n { position: absolute; left: 3.4vw; top: 4vh; font: 500 clamp(120px, 20vh, 240px)/0.8 var(--display); color: #f4f0e8; z-index: 2; mix-blend-mode: difference; }
.dv.scale .n small { font-size: .26em; color: #a98cf0; margin-left: 6px; }
/* catalog */
.dv .grid { width: 100%; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 1px; background: var(--dk-line); border: 1px solid var(--dk-line); }
.dv .grid .cell { background: var(--dk-dark); position: relative; opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .6s ease; }
.dk-layer.on .dv .grid .cell { opacity: 1; transform: none; }
.dv .grid .cell img { width: 100%; display: block; }
.dv .grid .cell .lb { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 10px 10px; font: 500 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #ece8f4; border-top: 1px solid var(--dk-line); }
.dv .grid .cell .lb i { font-style: normal; color: var(--dk-dim); display: inline-flex; align-items: center; gap: 6px; }
.dv .grid .cell .lb i::before { content: ''; width: 9px; height: 9px; border-radius: 2px; background: var(--sw, #888); }
/* list */
.dv.list { align-items: stretch; padding: 7vh 4.5vw 10vh; }
.dv.list .li { display: grid; grid-template-columns: 70px 1fr; gap: 18px; padding: 2.4vh 0; border-bottom: 1px solid var(--dk-line); opacity: .3; transition: opacity .5s; }
.dv.list .li.on { opacity: 1; }
.dv.list .li .k { font: 500 44px/0.9 var(--display); color: #a98cf0; }
.dv.list .li h5 { font: 500 clamp(22px, 2vw, 32px)/0.95 var(--display); text-transform: uppercase; color: #f4f0e8; margin: 0; }
.dv.list .li p { font: 400 15px/1.5 var(--serif); color: var(--dk-soft); margin: 8px 0 0; }
/* cinema */
.dv.cinema { padding: 0; justify-content: flex-end; align-items: flex-start; }
.dv.cinema .bg { position: absolute; inset: -4%; background-size: cover; background-position: center; animation: dkDrift 24s ease-in-out infinite alternate; }
.dv.cinema::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(0,0,0,.7) 100%), linear-gradient(0deg, rgba(10,8,18,.88), rgba(10,8,18,0) 55%); }
@keyframes dkDrift { from { transform: scale(1.02) translateX(-1.5%); } to { transform: scale(1.1) translateX(1.5%); } }
.dv.cinema .tagl { position: relative; z-index: 2; padding: 0 4vw 11vh; font: 500 clamp(40px, 4.6vw, 86px)/0.9 var(--display); text-transform: uppercase; text-shadow: 0 0 30px rgba(88,225,255,.35); }
.dv.cinema .tagl > span { display: block; opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .8s ease; }
.dk-layer.on .dv.cinema .tagl > span { opacity: 1; transform: none; }
.dk-layer.on .dv.cinema .tagl > span:nth-child(2) { transition-delay: .5s; } .dk-layer.on .dv.cinema .tagl > span:nth-child(3) { transition-delay: 1s; color: #8fe3ff; }
/* ui kit (live components) */
.dv.uikit { gap: 18px; }
.dv.uikit .deck2 { width: 100%; display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.dv.uikit .plate { position: relative; background: linear-gradient(180deg, #2a2735, #1d1b26); border: 1px solid #3c3849; border-radius: 10px; padding: 18px; }
.dv.uikit .glass { margin-top: 10px; border-radius: 6px; background: linear-gradient(135deg, rgba(120,200,255,.10), rgba(120,200,255,.02)); border: 1px solid rgba(160,210,255,.18); padding: 12px; }
.dv.uikit .ttl { font: 500 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #8fe3ff; }
.dv.uikit .kv { display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); color: #c9c4d6; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.dv.uikit .kv b { color: #fff; font-weight: 500; }
.dv.uikit .btns { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.dv.uikit .btn { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #e8e4f2; background: linear-gradient(180deg, #2c2938, #211e2b); border: 1px solid #3f3b4d; border-radius: 8px; padding: 15px; text-align: center; cursor: pointer; transition: box-shadow .25s, border-color .25s; position: relative; overflow: hidden; }
.dv.uikit .btn:hover, .dv.uikit .btn.demo { border-color: #58e1ff; box-shadow: 0 0 0 1px #58e1ff, 0 0 18px rgba(88,225,255,.55); }
.dv.uikit .btn.primary { background: linear-gradient(180deg, #ea7a2b, #c85a14); border-color: #f09a57; color: #1b1109; padding-bottom: 23px; }
.dv.uikit .btn.primary::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(-45deg, #1b1109 0 7px, #f2b46b 7px 14px); }
.dv.uikit .real { width: 100%; }
.dv.uikit .real img { width: 100%; display: block; border: 1px solid var(--dk-line); }

@media (prefers-reduced-motion: reduce) {
  .dk-pane, .dk-layer, .dv .cam, .dk .hb, .dk-scroll { transition: none !important; }
  .dv.cinema .bg, .dk-hint i { animation: none; }
}

@media (max-width: 900px), ((pointer: coarse) and (hover: none)) {
  .dk-snap { height: 55vh; }
  .dk-v { width: 100% !important; left: 0 !important; height: 44%; bottom: auto; }
  .dk-t { width: 100% !important; left: 0 !important; top: 44%; }
  .dv { padding: 10px 12px 12px; }
  .dv .fit img { max-height: calc(var(--dk-h) * .44 - 50px); }
  .dv .frame { width: min(100%, calc((var(--dk-h) * .44 - 50px) * var(--ar, 1.339))); }
  .dv .note { display: none; }
  .dv .cmp { width: min(100%, calc((var(--dk-h) * .44 - 70px) * var(--ar, 1.3))); }
  .dv .switch { margin-top: 8px; }
  .dv.data { padding: 12px 16px; } .dv.data .num { font-size: 58px; } .dv.data .it { padding: 8px 0; }
  .dv.statement { padding: 18px 18px; } .dv.statement .big { font-size: 28px; } .dv.statement .lab2 { margin-bottom: 12px; }
  .dv .chips { display: none; }
  .dv .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dv .grid .cell .lb { display: none; }
  .dv.list { padding: 10px 16px; } .dv.list .li { padding: 6px 0; grid-template-columns: 40px 1fr; } .dv.list .li .k { font-size: 26px; } .dv.list .li p { display: none; }
  .dv.cinema .tagl { font-size: 34px; padding: 0 16px 18px; }
  .dv.scale .n { font-size: 90px; }
  .dv.uikit .deck2 { grid-template-columns: 1fr 1fr; } .dv.uikit .real { display: none; } .dv.uikit .glass .kv:nth-child(n+3) { display: none; }
  .dk-scroll { padding: 22px 16px 34vh; }
  .dk-h { font-size: 34px; }
  .dk-p { font-size: 17px; margin-top: 14px; }
  #reader .dk h1.dk-title { font-size: 40px; }
  .dk-dek { font-size: 17px; }
  .dk-hud { height: 38px; padding: 0 12px; } .dk-hud .chap { display: none; }
  .dk .hb b { font-size: 8.5px; padding: 4px 5px; }
}

#reader .dk figure { margin: 0; }
#reader .dk .real img, #reader .dk .pair img, #reader .dk .grid img, #reader .dk .cam img, #reader .dk .bleed > img { box-shadow: none; border-radius: 0; }
.dk-scroll { padding-bottom: 12vh; }
@media (max-width: 900px), ((pointer: coarse) and (hover: none)) { .dv:not(.bleed):not(.cinema) { padding-bottom: 46px; } .dv .cmp { width: min(100%, calc((var(--dk-h) * .44 - 100px) * var(--ar, 1.3))); } }
.dk-txt { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.dk-scroll { min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 9vh; padding-bottom: 12vh; box-sizing: border-box; }

/* chapters as blocks: the frame holds still inside a chapter; the next chapter scrolls in as a new block */
.dk-spacer { height: calc(var(--dk-h) - 62vh); }
.dk + .dk { border-top: 1px solid var(--ink); }
.dk-pane { transition: none; }
@media (max-width: 900px), ((pointer: coarse) and (hover: none)) { .dk-spacer { height: calc(var(--dk-h) - 55vh); } }

/* ---- natural-scroll two-column blocks ---- */
.nk { --nk-h: calc(100vh - var(--barh, 73px)); --dk-h: var(--nk-h); --dk-dark: #141220; --dk-soft: #cfc9dd; --dk-dim: #6f6a86; --dk-line: #2c2840; }
.nk-block { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); border-top: 1px solid var(--ink); }
.nk-block:first-child { border-top: 0; }
.nk-block.flip .nk-v { order: 2; }
.nk-v { background: var(--dk-dark); position: relative; }
.nk-stick { position: sticky; top: var(--barh, 73px); height: var(--nk-h); overflow: hidden; }
.nk-stick > .dk-layer { transition: opacity .9s ease; transform: none !important; }
.nk-stick > .dk-layer.on { transition-delay: 0s; }
.nk-t { padding: 0 4.8vw; }
.nk-sec { min-height: 70vh; padding: 16vh 0 10vh; display: flex; flex-direction: column; justify-content: center; }
.nk-sec + .nk-sec { border-top: 1px solid var(--rule); }
.nk-sec .dk-p, .nk-sec .dk-p.seen, .nk-sec .dk-p.on { opacity: 1; }
.nk .dv .cam { transition: transform 1.6s cubic-bezier(.25,.6,.2,1); }
.nk .dv.cinema .bg { animation-duration: 40s; }
#reader .nk figure { margin: 0; }
#reader .nk .real img, #reader .nk .pair img, #reader .nk .grid img, #reader .nk .cam img, #reader .nk .bleed > img { box-shadow: none; border-radius: 0; }
#reader .nk h1.dk-title { font: 500 clamp(50px, 5vw, 96px)/0.88 var(--display); text-transform: uppercase; margin-top: 24px; display: block; background: none; -webkit-text-fill-color: currentColor; color: var(--ink); letter-spacing: 0; }
#reader .nk h1.dk-title em { font-style: normal; color: var(--accent); -webkit-text-fill-color: var(--accent); }
.nk .hb { position: absolute; border: 2px solid #8b5cf6; border-radius: 5px; opacity: 0; box-shadow: 0 0 20px rgba(139,92,246,.5); transition: left 1.6s cubic-bezier(.25,.6,.2,1), top 1.6s cubic-bezier(.25,.6,.2,1), width 1.6s cubic-bezier(.25,.6,.2,1), height 1.6s cubic-bezier(.25,.6,.2,1), opacity .6s ease .8s; }
.nk .hb.on { opacity: 1; }
.nk .hb.spot { box-shadow: 0 0 20px rgba(139,92,246,.5), 0 0 0 200vmax rgba(20,18,32,.3); }
.nk .hb b { position: absolute; left: -2px; bottom: calc(100% + 6px); white-space: nowrap; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: #6a3fd6; padding: 6px 8px 5px; border-radius: 3px; }
.nk .hb.low b { bottom: auto; top: calc(100% + 6px); } .nk .hb.rt b { left: auto; right: -2px; }
@media (max-width: 900px), ((pointer: coarse) and (hover: none)) {
  .nk-block { grid-template-columns: minmax(0, 1fr); }
  .nk-block.flip .nk-v { order: 0; }
  .nk-v { position: sticky; top: var(--barh, 73px); z-index: 2; height: 42vh; }
  .nk-stick { position: relative; top: 0; height: 42vh; }
  .nk-t { padding: 0 16px; }
  .nk-sec { min-height: 0; padding: 36px 0 30px; }
  .nk .dv .fit img { max-height: calc(42vh - 50px); }
  .nk .dv .frame { width: min(100%, calc((42vh - 50px) * var(--ar, 1.339))); }
  .nk .dv .cmp { width: min(100%, calc((42vh - 90px) * var(--ar, 1.3))); }
}

/* annotated scenes get real scroll room: one highlight per step, visual stays pinned */
.nk-scene.stepped { padding: 6vh 0 4vh; }
.nk-scene.stepped > .dk-lab, .nk-scene.stepped > .dk-h { padding-top: 8vh; }
.nk-step { min-height: 82vh; margin: 0; display: flex; flex-direction: column; justify-content: center; opacity: .32; transition: opacity .5s ease; }
.nk-step.on, .nk-scene.stepped .dk-p:first-of-type { }
.nk-step { opacity: 1; }
.nk-sec, .nk-scene { min-height: 86vh; }
.nk-scene { padding: 12vh 0; display: flex; flex-direction: column; justify-content: center; }
.nk-scene.stepped { display: block; }
.nk-t > .nk-scene:last-child { min-height: 92vh; padding-bottom: 22vh; }

/* phone: real section sizing (the earlier override named a class that does not exist) */
@media (max-width: 900px), ((pointer: coarse) and (hover: none)) {
  .nk-scene, .nk-t > .nk-scene:last-child { min-height: 0; padding: 26px 0 22px; display: block; }
  .nk-scene.stepped { padding: 8px 0 12px; }
  .nk-scene.stepped > .dk-lab, .nk-scene.stepped > .dk-h { padding-top: 0; }
  .nk-step { min-height: 54vh; padding: 10px 0; }
  .nk-t > .nk-scene:last-child { padding-bottom: 70px; }
  .nk .dv { padding: 10px 12px; }
  .nk .dv .pair { grid-template-rows: none; grid-template-columns: 1fr 1fr; gap: 8px; height: 100%; }
  .nk .dv .pair figcaption { display: none; }
  .nk .dv .fit img { max-height: calc(42vh - 44px); }
  .nk .dv.data { padding: 8px 14px; } .nk .dv.data .it { padding: 6px 0; gap: 10px; } .nk .dv.data .num { font-size: 46px; } .nk .dv.data .il { font-size: 9.5px; padding-bottom: 4px; }
  .nk .dv.statement { padding: 14px 16px; } .nk .dv.statement .big { font-size: 24px; } .nk .dv.statement .lab2 { margin-bottom: 10px; font-size: 9.5px; }
  .nk .dv.list { padding: 8px 14px; } .nk .dv.list .li { padding: 5px 0; grid-template-columns: 34px 1fr; } .nk .dv.list .li .k { font-size: 22px; } .nk .dv.list .li h5 { font-size: 16px; } .nk .dv.list .li p { display: none; }
  .nk .dv .cap { font-size: 8.5px; margin-top: 6px; }
  .nk .dv .note { display: block; font-size: 12px; margin-top: 6px; }
  .dk-h { font-size: 30px; margin-top: 12px; }
  .dk-pull { font-size: 19px; margin-top: 16px; padding-top: 12px; }
  .dk-p { font-size: 16.5px; line-height: 1.6; margin-top: 12px; }
  .dk-lab { font-size: 10px; }
  #reader .nk h1.dk-title { font-size: 38px; margin-top: 12px; }
  .dk-dek { font-size: 16px; margin-top: 12px; }
  .dk-meta { margin-top: 14px; } .dk-meta span { font-size: 9px; padding: 6px 8px; }
  .dk-hint { display: none; }
}
@media (max-width: 900px), ((pointer: coarse) and (hover: none)) { .nk .dv.bleed > img { object-position: 0% 50%; } .nk .dv .fig { font-size: 8px; right: 10px; top: 10px; } }
/* natural-scroll layout: staged visuals are readable without waiting on a reveal */
.nk .dv.list .li, .nk .dv.data .it, .nk .dv .chips .c { opacity: 1; }

/* ---- PHONE: visual above its text, nothing pinned, nothing overlapping ---- */
.nk-phone { display: block; }
.nk-phone .nk-ms { display: block; border-top: 1px solid var(--rule); }
.nk-phone .nk-ms:first-child { border-top: 0; }
.nk-phone .nk-mv { position: relative; height: 46vh; min-height: 260px; max-height: 420px; background: var(--dk-dark, #141220); overflow: hidden; }
.nk-phone .nk-ms-hero .nk-mv { height: 58vw; min-height: 200px; }
.nk-phone .nk-mv > .dk-layer { position: absolute; inset: 0; opacity: 1; transform: none; transition: none; pointer-events: auto; }
.nk-phone .nk-mv .dv { padding: 10px 12px 12px; }
.nk-phone .nk-mv .dv.bleed { padding: 0; }
.nk-phone .nk-mv .dv .fit img { max-height: calc(46vh - 52px); }
.nk-phone .nk-mv .dv .frame { width: min(100%, calc((46vh - 60px) * var(--ar, 1.339))); }
.nk-phone .nk-mv .dv .cmp { width: min(100%, calc((46vh - 90px) * var(--ar, 1.3))); }
.nk-phone .nk-mv .dv .note { display: block; font-size: 12px; margin-top: 6px; color: var(--dk-soft, #cfc9dd); }
.nk-phone .nk-mt { padding: 0 16px; }
.nk-phone .nk-scene { min-height: 0; padding: 22px 0 26px; display: block; }
.nk-phone .nk-scene.stepped { padding: 18px 0 22px; }
.nk-phone .nk-step { min-height: 0; padding: 0; margin-top: 14px; opacity: 1; }
.nk-phone .dk-p, .nk-phone .dk-p.seen { opacity: 1; }
.nk-phone .nk-ms-statement .nk-mv { height: auto; min-height: 0; max-height: none; }
.nk-phone .nk-ms-statement .nk-mv > .dk-layer { position: relative; }
.nk-phone .nk-ms-statement .dv { position: relative; inset: auto; }
.nk-phone .hb b { font-size: 8.5px; padding: 4px 5px; }
/* text is never dimmed in the scroll reader */
.nk .dk-p, .nk .dk-p.seen, .nk .nk-step, .nk-phone .dk-p { opacity: 1 !important; }

/* ---- PHONE flow v2: visuals size to their content, numbered callouts, nothing pinned ---- */
.nk-phone .nk-mv { height: auto !important; min-height: 0 !important; max-height: none !important; }
.nk-phone .nk-mv > .dk-layer { position: relative; inset: auto; }
.nk-phone .nk-mv .dv { position: relative; inset: auto; display: block; padding: 14px 14px 12px; }
.nk-phone .nk-mv .dv.bleed { padding: 0; height: 58vw; min-height: 200px; }
.nk-phone .nk-mv .dv .fit { max-height: none; }
.nk-phone .nk-mv .dv .fit img { max-height: none !important; width: 100%; height: auto; margin: 0; }
.nk-phone .nk-mv .dv .frame { width: 100% !important; }
.nk-phone .nk-mv .dv .note { display: none; }
.nk-phone .nk-mv .dv .cmp { width: 100% !important; }
.nk-phone .nk-mv .dv .switch { margin-top: 10px; }
.nk-phone .nk-mv .dv .pair { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 10px; height: auto; }
.nk-phone .nk-mv .dv .pair figure { display: block; }
.nk-phone .nk-mv .dv .pair .im { position: relative; aspect-ratio: 1.3; }
.nk-phone .nk-mv .dv .pair figcaption { display: block; margin-top: 6px; }
.nk-phone .nk-mv .dv .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nk-phone .nk-mv .dv.data { padding: 10px 16px; } .nk-phone .nk-mv .dv.data .it { padding: 8px 0; }
.nk-phone .nk-mv .dv.list { padding: 10px 16px; } .nk-phone .nk-mv .dv.list .li p { display: block; font-size: 13px; }
.nk-phone .nk-mv .dv.cinema { height: 60vw; min-height: 220px; padding: 0; display: flex; }
.nk-phone .nk-mv .dv.scale .n { position: absolute; }
.nk-phone .nk-mv .dv.uikit .real { display: block; }
.nk-phone .nk-mv .dv .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.nk-phone .nk-mv .dv .chips .c h5 { font-size: 15px; } .nk-phone .nk-mv .dv .chips .c p { font-size: 12px; }
.nk-phone .nk-mv .dv .cap { font-size: 9px; margin-top: 8px; }
/* numbered callouts on annotated images, with a key below */
.nk-phone .hb { border-width: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.4) inset, 0 0 14px rgba(139,92,246,.6); }
.nk-phone .hb.spot { box-shadow: 0 0 14px rgba(139,92,246,.6); }
.nk-phone .hb b { left: -2px; bottom: auto; top: -12px; font: 500 11px/1 var(--mono); padding: 5px 8px; border-radius: 999px; background: #6a3fd6; color: #fff; letter-spacing: 0; }
.nk-phone .hb.rt b { left: auto; right: -2px; }
.nk-keys { list-style: none; margin: 0; padding: 12px 14px 4px; display: grid; gap: 8px; }
.nk-keys li { display: grid; grid-template-columns: 26px 1fr; gap: 0 10px; align-items: baseline; color: #ece8f4; font: 400 14px/1.4 var(--serif); }
.nk-keys li b { font: 500 11px/22px var(--mono); width: 22px; height: 22px; border-radius: 999px; background: #6a3fd6; color: #fff; text-align: center; }
.nk-keys li span { font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #a98cf0; }
.nk-keys li em { grid-column: 2; font-style: normal; color: #cfc9dd; }

/* ================= motion pass (Oct 26, 2026) =================
   Everything below only applies under .mo, which deck.js sets when the browser can observe scrolling
   and the reader hasn't asked for reduced motion. Without it the page renders fully, statically. */

/* words rise into place: titles, headings, pull quotes, statements, cinema lines */
.mo .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .04em .14em; margin: -.1em -.04em -.14em; }
.mo .w > span { display: inline-block; transform: translateY(115%); transition: transform 1s cubic-bezier(.16,.84,.24,1); transition-delay: calc(var(--i, 0) * 38ms); }
.mo .dkr .w > span { transform: none; }

/* reading column: each block eases up as it scrolls in, once, and then never dims */
.mo .dk-p, .mo .dk-dek, .mo .dk-meta, .mo .dk-eyb, .mo .dk-cap, .mo .dk-hint, .mo .dk-lab { transition: opacity .8s ease, transform 1s cubic-bezier(.16,.84,.24,1); }
.mo .dk-p:not(.dkr), .mo .dk-dek:not(.dkr), .mo .dk-meta:not(.dkr), .mo .dk-eyb:not(.dkr), .mo .dk-cap:not(.dkr), .mo .dk-hint:not(.dkr), .mo .dk-lab:not(.dkr) { opacity: 0 !important; transform: translateY(22px); }
.mo .dk-lab i { transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.7,0,.2,1) .2s; }
.mo .dk-lab.dkr i { transform: none; }
.mo .dk-pull { border-top-color: transparent; position: relative; }
.mo .dk-pull::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 1.3s cubic-bezier(.7,0,.2,1) .1s; }
.mo .dk-pull.dkr::before { transform: none; }

/* visuals: a curtain lifts off each picture the first time its scene arrives, and the picture settles */
.mo .dk-layer .fit, .mo .dk-layer .pair .im, .mo .dk-layer .sp-live { position: relative; }
.mo .dk-layer .fit::after, .mo .dk-layer .pair .im::after, .mo .dk-layer .frame::after, .mo .dk-layer .cmp::after, .mo .dk-layer .sp-live::after {
  content: ''; position: absolute; inset: 0; background: #1d1a2c; transform-origin: 50% 100%; transition: transform 1.25s cubic-bezier(.76,0,.18,1) .12s; z-index: 4; pointer-events: none; }
.mo .dk-layer.dkr .fit::after, .mo .dk-layer.dkr .pair .im::after, .mo .dk-layer.dkr .frame::after, .mo .dk-layer.dkr .cmp::after, .mo .dk-layer.dkr .sp-live::after { transform: scaleY(0); }
.mo .dk-layer .pair figure:nth-child(2) .im::after { transition-delay: .42s; }
.mo .dk-layer .pair figure:nth-child(3) .im::after { transition-delay: .7s; }
.mo .dk-layer .fit img, .mo .dk-layer .pair .im img { transform: scale(1.07); transition: transform 2.2s cubic-bezier(.2,.7,.2,1) .12s; }
.mo .dk-layer.dkr .fit img, .mo .dk-layer.dkr .pair .im img { transform: none; }
.mo .dk-layer .pair figcaption, .mo .dk-layer .dv > .cap { transition: opacity .8s ease 1s; }
.mo .dk-layer:not(.dkr) .pair figcaption, .mo .dk-layer:not(.dkr) .dv > .cap { opacity: 0; }
/* hero develops in, then drifts */
.dv.hero > img { animation: dkDrift 36s ease-in-out infinite alternate; }
.mo .dk-layer .dv.hero > img { transition: opacity 1.6s ease, filter 2s ease; }
.mo .dk-layer:not(.dkr) .dv.hero > img { opacity: 0; filter: blur(14px) brightness(.55); }
/* scene change: the incoming visual pushes in, the outgoing one falls back */
.mo .nk-stick > .dk-layer > .dv { transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.mo .nk-stick > .dk-layer:not(.on) > .dv { transform: scale(1.06); }

/* statements: an outline numeral for the scene and a slow light behind the line */
.dv.statement { overflow: hidden; }
.dv.statement > .lab2, .dv.statement > .big { position: relative; z-index: 1; }
.dv.statement .ghost { position: absolute; right: -1vw; bottom: -6vh; font: 500 clamp(240px, 54vh, 640px)/0.78 var(--display); color: transparent; -webkit-text-stroke: 1.5px rgba(169,140,240,.2); pointer-events: none; user-select: none; }
.dv.statement.light .ghost { -webkit-text-stroke-color: rgba(106,63,214,.15); }
.mo .dv.statement .ghost { opacity: 0; transform: translateY(16%); transition: transform 2.8s cubic-bezier(.16,.84,.24,1) .2s, opacity 1.8s ease .2s; }
.mo .dk-layer.dkr .dv.statement .ghost { opacity: 1; transform: none; }
.dv.statement:not(.light)::before { content: ''; position: absolute; inset: -30%; pointer-events: none;
  background: radial-gradient(30% 28% at 28% 38%, rgba(106,63,214,.32), rgba(106,63,214,0) 70%), radial-gradient(24% 22% at 74% 70%, rgba(88,225,255,.10), rgba(88,225,255,0) 70%);
  animation: dkGlow 16s ease-in-out infinite alternate; }
.dv.statement.light::before { content: ''; position: absolute; inset: -30%; pointer-events: none; background: radial-gradient(30% 28% at 70% 30%, rgba(106,63,214,.10), rgba(106,63,214,0) 70%); animation: dkGlow 18s ease-in-out infinite alternate; }
@keyframes dkGlow { from { transform: translate(-4%, -2%) scale(1); } to { transform: translate(5%, 4%) scale(1.14); } }

/* staged visuals come back: numbers, list rows and steps arrive one by one */
.nk.mo .dv.data .it, .nk.mo .dv.list .li, .nk.mo .dv .chips .c { transition: opacity .7s ease, transform .95s cubic-bezier(.16,.84,.24,1), border-color .5s; }
.nk.mo .dv.data .it:not(.on), .nk.mo .dv.list .li:not(.on), .nk.mo .dv .chips .c:not(.on) { opacity: 0; transform: translateY(28px); }
.dv.data .it { position: relative; }
.dv.data .it::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, #a98cf0, rgba(169,140,240,0)); transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.7,0,.2,1) .25s; }
.dv.data .it.on::after, .nk:not(.mo) .dv.data .it::after { transform: none; }
.mo .dk-layer:not(.dkr) .dv.scrub, .mo .dk-layer:not(.dkr) .dv.chart .cset { opacity: 0; }
.mo .dk-layer .dv.scrub { transition: opacity 1s ease; }

/* ---- chart: live bars ---- */
.dv.chart { align-items: stretch; justify-content: flex-start; padding: 7vh 3.6vw 7vh; }
.dv.chart .chead { display: flex; flex-direction: column; gap: 10px; margin-bottom: 3.4vh; }
.dv.chart .ckick { font: 500 10px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #a98cf0; }
.dv.chart .cset { font: 500 clamp(34px, 3.6vw, 64px)/.9 var(--display); text-transform: uppercase; color: #f4f0e8; min-height: .9em; transition: opacity .8s; }
.dv.chart .cset em { font-style: normal; color: #a98cf0; }
.dv.chart .cset.in { animation: dkSetIn .85s cubic-bezier(.16,.84,.24,1) both; }
@keyframes dkSetIn { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.dv.chart .cplot { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--nb), minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 28px); margin-bottom: 40px; }
.dv.chart .cgrid { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, rgba(255,255,255,0) 1px 20%); pointer-events: none; }
.dv.chart .czero { position: absolute; left: -1vw; right: -1vw; height: 1px; background: rgba(244,240,232,.5); z-index: 1; transition: bottom 1.1s cubic-bezier(.16,.84,.24,1), left 1.1s cubic-bezier(.16,.84,.24,1); }
.dv.chart .cb { position: relative; transition: opacity .6s; }
.dv.chart .cb.off { opacity: 0; }
.dv.chart .ct { position: absolute; inset: 0; }
.dv.chart .ct i { position: absolute; left: 13%; right: 13%; bottom: 0; height: 0; overflow: hidden; background: linear-gradient(180deg, #c6b2ff, #6a3fd6); border-radius: 2px 2px 0 0;
  transition: height 1.2s cubic-bezier(.16,.84,.24,1) calc(var(--k) * 70ms), bottom 1.2s cubic-bezier(.16,.84,.24,1) calc(var(--k) * 70ms), width 1.2s cubic-bezier(.16,.84,.24,1) calc(var(--k) * 70ms), left 1.2s cubic-bezier(.16,.84,.24,1) calc(var(--k) * 70ms), opacity .5s, box-shadow .6s; }
.dv.chart .cb.neg i { background: linear-gradient(0deg, #ffa36e, #c94c18); border-radius: 0 0 2px 2px; }
.dv.chart .cb.hl i { box-shadow: 0 0 36px rgba(169,140,240,.6); }
.dv.chart .cb.neg.hl i { box-shadow: 0 0 36px rgba(255,122,69,.55); }
.dv.chart .cb.hl i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 70%); transform: translateX(-120%); animation: dkShine 3.8s ease-in-out 1.4s infinite; }
@keyframes dkShine { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } }
.dv.chart .cb.dim i { opacity: .38; }
.dv.chart .cb.dim .cv { opacity: .55; }
.dv.chart .cv { position: absolute; left: -30%; right: -30%; bottom: 0; text-align: center; white-space: nowrap; transform: translateY(-10px); font: 500 clamp(16px, 1.55vw, 26px)/1 var(--display); color: #f4f0e8; font-variant-numeric: tabular-nums;
  transition: bottom 1.2s cubic-bezier(.16,.84,.24,1) calc(var(--k) * 70ms), left 1.2s cubic-bezier(.16,.84,.24,1) calc(var(--k) * 70ms), opacity .5s; }
.dv.chart .cb.lo .cv { transform: translateY(calc(100% + 10px)); }
.dv.chart .cb.neg .cv { color: #ffa36e; }
.dv.chart .cl { position: absolute; top: calc(100% + 12px); left: -10%; right: -10%; text-align: center; font: 500 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dk-soft); }
.dv.chart .cb.hl .cl { color: #f4f0e8; }
.dv.chart .cl em { font-style: normal; color: #a98cf0; }
/* horizontal */
.dv.chart.h .cplot { grid-template-columns: none; grid-template-rows: repeat(var(--nb), minmax(0, 1fr)); padding-left: 24%; margin-bottom: 0; gap: clamp(8px, 1.6vh, 20px); }
.dv.chart.h .cgrid { left: 24%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, rgba(255,255,255,0) 1px 20%); }
.dv.chart.h .czero { top: -1vh; bottom: -1vh; right: auto; width: 1px; height: auto; margin-left: 24%; }
.dv.chart.h .ct i { top: 16%; bottom: 16%; left: 0; right: auto; width: 0; height: auto; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #6a3fd6, #c6b2ff); }
.dv.chart.h .cb.neg i { background: linear-gradient(90deg, #c94c18, #ffa36e); }
.dv.chart.h .cb.lo i { border-radius: 2px 0 0 2px; }
.dv.chart.h .cv { left: 0; right: auto; bottom: auto; top: 50%; transform: translate(12px, -50%); text-align: left; }
.dv.chart.h .cb.lo .cv { transform: translate(calc(-100% - 12px), -50%); }
.dv.chart.h .cl { top: 50%; left: auto; right: calc(100% + 16px); width: 30vw; max-width: 340px; transform: translateY(-50%); text-align: right; }
/* set tabs, which double as the step progress */
.dv.chart .ctabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 22px; border-top: 1px solid var(--dk-line); }
.dv.chart.h .ctabs { margin-top: 3vh; }
.dv.chart .ctabs span { position: relative; padding: 12px 10px 0 0; font: 500 9.5px/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dk-dim); cursor: pointer; transition: color .4s; }
.dv.chart .ctabs span::before { content: ''; position: absolute; left: 0; right: 10px; top: -1px; height: 2px; background: #a98cf0; transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.7,0,.2,1); }
.dv.chart .ctabs span.on { color: #f4f0e8; }
.dv.chart .ctabs span.on::before { transform: none; }
.dv.chart > .cap { margin-top: 14px; }

/* ---- sprite: the real sheet, played ---- */
.dv.sprite { gap: 16px; }
.dv.sprite .sp-live { position: relative; height: 54%; aspect-ratio: var(--ar, 1); max-width: 100%; overflow: hidden; border: 1px solid var(--dk-line);
  background: radial-gradient(52% 48% at 46% 64%, rgba(106,63,214,.42), rgba(106,63,214,0) 72%), linear-gradient(180deg, #17142a, #0d0b16); }
.dv.sprite .sp-live::before { content: ''; position: absolute; left: 12%; right: 12%; bottom: 9%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,0)); }
.dv.sprite .sp-px { position: absolute; inset: 2% 4% 4% 4%; background-repeat: no-repeat; image-rendering: pixelated; }
.dv.sprite .sp-ct { position: absolute; left: 14px; top: 12px; z-index: 2; font: 500 10px/1 var(--mono); letter-spacing: .16em; color: var(--dk-dim); display: flex; align-items: baseline; gap: 4px; }
.dv.sprite .sp-ct b { font: 500 38px/1 var(--display); color: #f4f0e8; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.dv.sprite .sp-sheet { position: relative; width: 100%; background: #100e1a; border: 1px solid var(--dk-line); }
.dv.sprite .sp-sheet img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: .5; }
.dv.sprite .sp-hl { position: absolute; left: 0; top: 0; border: 2px solid #a98cf0; box-shadow: 0 0 18px rgba(169,140,240,.65), inset 0 0 0 999px rgba(169,140,240,.14); }

/* ---- scrub: real captures from several angles ---- */
.dv.scrub { perspective: 1400px; gap: 18px; cursor: ew-resize; touch-action: pan-y; }
.dv.scrub .sc-stage { position: relative; height: calc(var(--dk-h) - 27vh); aspect-ratio: var(--ar, .7); max-width: 100%; transition: transform 1s cubic-bezier(.16,.84,.24,1); }
.dv.scrub .sc-f { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .5s ease; filter: drop-shadow(0 40px 50px rgba(0,0,0,.6)); }
.dv.scrub .sc-f.on { opacity: 1; }
.dv.scrub .sc-glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; border-radius: 12px; background: linear-gradient(100deg, rgba(255,255,255,0) 36%, rgba(255,255,255,.12) 50%, rgba(255,255,255,0) 64%); background-size: 260% 100%; background-position: var(--gx, 50%) 0; transition: background-position 1s cubic-bezier(.16,.84,.24,1); }
.dv.scrub .sc-track { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(100%, 460px); border-top: 1px solid var(--dk-line); }
.dv.scrub .sc-track i { position: absolute; top: -2px; left: 0; width: calc(100% / var(--n)); height: 3px; background: #a98cf0; box-shadow: 0 0 12px rgba(169,140,240,.7); transition: left .7s cubic-bezier(.16,.84,.24,1); }
.dv.scrub .sc-track span { padding-top: 10px; text-align: center; font: 500 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-dim); cursor: pointer; transition: color .3s; }
.dv.scrub .sc-track span.on { color: #f4f0e8; }

/* ---- phone sizes for the new kinds ---- */
.nk-phone .dv.statement .ghost { font-size: 170px; bottom: -24px; right: -8px; }
.nk-phone .nk-mv .dv.chart { padding: 16px 14px 14px; }
.nk-phone .dv.chart .chead { margin-bottom: 14px; gap: 6px; }
.nk-phone .dv.chart .cset { font-size: 28px; }
.nk-phone .dv.chart .ckick { font-size: 9px; }
.nk-phone .dv.chart .cplot { height: 56vw; min-height: 210px; max-height: 340px; margin-bottom: 34px; gap: 8px; }
.nk-phone .dv.chart.h .cplot { padding-left: 32%; margin-bottom: 0; gap: 6px; }
.nk-phone .dv.chart.h .cgrid { left: 32%; }
.nk-phone .dv.chart.h .czero { margin-left: 32%; }
.nk-phone .dv.chart .cv { font-size: 14px; }
.nk-phone .dv.chart.h .cv { transform: translate(6px, -50%); }
.nk-phone .dv.chart.h .cb.lo .cv { transform: translate(calc(-100% - 6px), -50%); }
.nk-phone .dv.chart .cl { font-size: 8px; letter-spacing: .06em; top: calc(100% + 8px); }
.nk-phone .dv.chart.h .cl { right: calc(100% + 8px); width: 30vw; top: 50%; }
.nk-phone .dv.chart .ctabs { margin-top: 14px; }
.nk-phone .dv.chart .ctabs span { font-size: 8px; letter-spacing: .06em; padding: 10px 6px 0 0; }
.nk-phone .dv.sprite .sp-live { height: auto; width: 68%; margin: 0 auto 12px; display: block; }
.nk-phone .nk-mv .dv.scrub { display: flex; flex-direction: column; align-items: center; }
.nk-phone .dv.scrub .sc-stage { height: auto; width: 66%; }
@media (max-width: 900px), ((pointer: coarse) and (hover: none)) { .dv.chart .cb.hl i::after { animation: none; } }
@media (prefers-reduced-motion: reduce) { .dv.hero > img, .dv.statement::before, .dv.chart .cb.hl i::after { animation: none !important; } }
/* chart headroom: values sit past the bar ends without clipping */
.dv.chart:not(.h) .ct { top: 12%; }
.dv.chart.h .ct { right: 15%; }
.dv.chart .cb.dim i { opacity: .62; }
.dv.chart .cb.dim .cv { opacity: .75; }
.nk-phone .dv.chart.h .ct { right: 22%; }
/* a value under zero sits inside the end of its bar, clear of the axis labels */
.dv.chart:not(.h) .cb.lo .cv { transform: translateY(-10px); color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
/* the shell's generic .bar rule gave the slider divider a fixed height; stretch it to the frame again */
#reader .dv .cmp .bar { position: absolute; top: 0; bottom: 0; height: auto; z-index: 2; background: #fff; border: 0; }
.mo .dk-layer .cmp .tg { transition: opacity .6s ease 1.1s; } .mo .dk-layer:not(.dkr) .cmp .tg { opacity: 0; }

/* phone: chart values and axis labels stay within their own column */
.nk-phone .dv.chart .cv { left: -6%; right: -6%; }
.nk-phone .dv.chart .cl { left: 0; right: 0; }
.nk-phone .dv.chart.h .cv { left: 0; right: auto; }
/* scene swaps inside a block: the outgoing visual clears before the incoming one rises, so two never overlap */
.mo .nk-stick > .dk-layer { transition: opacity .3s ease; }
.mo .nk-stick > .dk-layer.on { transition: opacity .85s ease .24s; }
/* label boxes sized to their gutter, so nothing reaches past the stage */
.dv.chart .cv { left: -14%; right: -14%; }
.dv.chart.h .cv { left: 0; right: auto; }
.dv.chart.h .cl { width: calc(31% - 16px); max-width: none; }
.nk-phone .dv.chart.h .cl { width: calc(46% - 8px); }
/* phone fixes: horizontal chart labels stay in their gutter; cinema lines wrap to the frame and the frame grows to fit them */
.nk-phone .dv.chart.h .cl { left: auto; right: calc(100% + 8px); }
.dv.cinema .tagl { width: 100%; box-sizing: border-box; }
.nk-phone .nk-mv .dv.cinema { height: auto; min-height: 62vw; padding-top: 56px; }
.nk-phone .dv.cinema .tagl { font-size: 30px; padding-bottom: 20px; }

/* ---- the article's own ending: scroll stops here, nothing chains to the page underneath ---- */
#reader { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.nk-t > .nk-scene:last-child { min-height: 80vh; padding-bottom: 10vh; }
.nk-foot { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto; gap: 4vw; align-items: end; padding: 9vh 5vw 10vh; background: #141220; color: #ece8f4; border-top: 1px solid var(--ink); }
.nk-foot small { display: block; font: 500 10px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #a98cf0; margin-bottom: 10px; }
.nk-foot .nf-end b { display: block; font: 500 clamp(26px, 2.4vw, 40px)/0.95 var(--display); text-transform: uppercase; color: #f4f0e8; }
.nk-foot .nf-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid #2c2840; }
.nk-foot .nf-a { display: block; padding: 16px 18px 0 0; cursor: pointer; color: #cfc9dd; }
.nk-foot .nf-a + .nf-a, .nk-foot .nf-nav span + .nf-a { padding-left: 18px; border-left: 1px solid #2c2840; }
.nk-foot .nf-a b { display: block; font: 400 17px/1.35 var(--serif); color: #ece8f4; transition: color .25s; }
.nk-foot .nf-a:hover b { color: #a98cf0; }
.nk-foot .nf-back { cursor: pointer; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #f4f0e8; border: 1px solid #f4f0e8; padding: 15px 20px; white-space: nowrap; transition: background .25s, color .25s; }
.nk-foot .nf-back:hover { background: #f4f0e8; color: #141220; }
@media (max-width: 900px), ((pointer: coarse) and (hover: none)) {
  .nk-t > .nk-scene:last-child { min-height: 0; padding-bottom: 40px; }
  .nk-foot { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 40px 16px 48px; }
  .nk-foot .nf-nav { grid-template-columns: 1fr; }
  .nk-foot .nf-a + .nf-a, .nk-foot .nf-nav span + .nf-a { padding-left: 0; border-left: 0; border-top: 1px solid #2c2840; margin-top: 14px; }
  .nk-foot .nf-back { text-align: center; padding: 16px; }
}

/* ---- heat table: real values, coloured by size; steps light the columns and cells the text names ---- */
.dv.heat { align-items: stretch; justify-content: center; padding: 6vh 3vw 7vh; }
.dv.heat .chead { margin-bottom: 2.4vh; }
.dv.heat .hgrid { display: grid; grid-template-columns: repeat(var(--parts, 2), minmax(0, 1fr)); gap: 2vw; }
.dv.heat .ht { display: grid; gap: 3px; }
.dv.heat .hr { display: grid; grid-template-columns: 54px repeat(5, minmax(0, 1fr)); gap: 3px; align-items: center; }
.dv.heat .hh span { font: 500 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-dim); text-align: center; padding: 4px 0 6px; transition: color .4s; }
.dv.heat .hh span.hcol { color: #f4f0e8; }
.dv.heat .hn { font: 500 10px/1 var(--mono); letter-spacing: .08em; color: #cfc9dd; text-align: right; padding-right: 6px; }
.dv.heat .hc { position: relative; font: 500 10.5px/1 var(--mono); color: #f4f0e8; text-align: center; padding: 7px 0; border-radius: 2px; font-variant-numeric: tabular-nums;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease; }
.dv.heat .hgrid.dim .hc { opacity: .2; }
.dv.heat .hgrid.dim .hc.hcol { opacity: .95; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.dv.heat .hgrid.dim .hc.hon { opacity: 1; z-index: 2; transform: scale(1.12); box-shadow: 0 0 0 2px #fff, 0 0 22px rgba(169,140,240,.85); }
.mo .dk-layer .dv.heat .hc { transition-delay: calc(var(--i, 0) * 18ms); }
.mo .dk-layer:not(.dkr) .dv.heat .hc { opacity: 0; transform: scale(.7); }
.nk-phone .nk-mv .dv.heat { padding: 14px 12px; }
.nk-phone .dv.heat .hgrid { grid-template-columns: minmax(0, 1fr); gap: 3px; }
.nk-phone .dv.heat .ht + .ht .hh { display: none; }
.nk-phone .dv.heat .hr { grid-template-columns: 44px repeat(5, minmax(0, 1fr)); gap: 2px; }
.nk-phone .dv.heat .hc { font-size: 9.5px; padding: 5px 0; }

/* ---- race: one frame per year, fast, then it holds ---- */
.dv.chart.race .ct i, .dv.chart.race .cv { transition-duration: .13s !important; transition-delay: 0s !important; transition-timing-function: linear !important; }
.dv.chart.race .cset { font-variant-numeric: tabular-nums; font-size: clamp(44px, 5vw, 92px); }
.dv.chart .ctabs .creplay { color: #f4f0e8; }
.dv.chart .ctabs .creplay::before { transform: none; }

/* ---- routines wall: every routine of one character, playing at once ---- */
.dv.sprite.wall { justify-content: center; padding: 6vh 3vw 7vh; }
.dv.sprite.wall .sw-grid { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dv.sprite.wall .sw-t { margin: 0; background: radial-gradient(60% 55% at 50% 62%, rgba(106,63,214,.34), rgba(106,63,214,0) 72%), linear-gradient(180deg, #17142a, #0d0b16); border: 1px solid var(--dk-line); padding: 8px 8px 10px; display: flex; flex-direction: column; justify-content: flex-end; }
.dv.sprite.wall .sw-t:nth-child(7) { grid-column: span 2; }
.dv.sprite.wall .sw-px { width: 100%; background-repeat: no-repeat; image-rendering: pixelated; }
.dv.sprite.wall .sw-t:nth-child(7) .sw-px { width: 72%; margin: 0 auto; }
.dv.sprite.wall figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-top: 8px; border-top: 1px solid var(--dk-line); padding-top: 7px; }
.dv.sprite.wall figcaption b { font: 500 15px/1 var(--display); text-transform: uppercase; color: #f4f0e8; letter-spacing: .02em; }
.dv.sprite.wall figcaption span { font: 500 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #a98cf0; }
.mo .dk-layer .dv.sprite.wall .sw-t { transition: opacity .6s ease, transform .8s cubic-bezier(.16,.84,.24,1); }
.mo .dk-layer .dv.sprite.wall .sw-t:nth-child(2) { transition-delay: .08s; } .mo .dk-layer .dv.sprite.wall .sw-t:nth-child(3) { transition-delay: .16s; }
.mo .dk-layer .dv.sprite.wall .sw-t:nth-child(4) { transition-delay: .24s; } .mo .dk-layer .dv.sprite.wall .sw-t:nth-child(5) { transition-delay: .32s; }
.mo .dk-layer .dv.sprite.wall .sw-t:nth-child(6) { transition-delay: .40s; } .mo .dk-layer .dv.sprite.wall .sw-t:nth-child(7) { transition-delay: .48s; }
.mo .dk-layer:not(.dkr) .dv.sprite.wall .sw-t { opacity: 0; transform: translateY(18px); }
.nk-phone .nk-mv .dv.sprite.wall { padding: 12px; }
.nk-phone .dv.sprite.wall .sw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.nk-phone .dv.sprite.wall .sw-t:nth-child(7) { grid-column: span 3; }
.nk-phone .dv.sprite.wall .sw-t:nth-child(7) .sw-px { width: 52%; }
.nk-phone .dv.sprite.wall figcaption b { font-size: 12px; } .nk-phone .dv.sprite.wall figcaption span { font-size: 8px; }
/* horizontal values under zero read just right of the zero line */
.dv.chart.h .cb.lo .cv { transform: translate(12px, -50%); color: #ffa36e; }
.nk-phone .dv.chart.h .cb.lo .cv { transform: translate(6px, -50%); }
.dv.heat .ckick { font: 500 10px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #a98cf0; }
/* scale over a busy picture: a dark scrim and a solid number, so every character reads */
.dv.scale.scrim::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(155deg, rgba(13,11,22,.92) 0%, rgba(13,11,22,.7) 30%, rgba(13,11,22,0) 62%); }
.dv.scale.scrim .n { mix-blend-mode: normal; color: #f4f0e8; text-shadow: 0 6px 30px rgba(0,0,0,.5); }
.dv.scale.scrim .n small { color: #c6b2ff; }

/* ---- reel: one large real clip per step ---- */
.dv.reel { gap: 16px; }
.dv.reel .rl-stage { position: relative; height: calc(var(--dk-h) - 18vh); aspect-ratio: var(--ar, .75); max-width: 100%; overflow: hidden; box-shadow: 0 34px 80px rgba(0,0,0,.55); background: #0d0b16; }
.dv.reel .rl-c { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.dv.reel .rl-c.on { opacity: 1; }
.dv.reel .rl-chip { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 11px; background: rgba(13,11,22,.82); border-left: 2px solid #a98cf0; }
.dv.reel .rl-chip b { font: 500 26px/1 var(--display); text-transform: uppercase; color: #f4f0e8; }
.dv.reel .rl-chip span { font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #a98cf0; }
.dv.reel .rl-chip.in { animation: dkSetIn .7s cubic-bezier(.16,.84,.24,1) both; }
.dv.reel .rl-track { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(100%, 520px); border-top: 1px solid var(--dk-line); }
.dv.reel .rl-track i { position: absolute; top: -2px; left: 0; width: calc(100% / var(--n)); height: 3px; background: #a98cf0; box-shadow: 0 0 12px rgba(169,140,240,.7); transition: left .7s cubic-bezier(.16,.84,.24,1); }
.dv.reel .rl-track span { padding-top: 10px; text-align: center; font: 500 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-dim); cursor: pointer; transition: color .3s; }
.dv.reel .rl-track span.on { color: #f4f0e8; }
.mo .dk-layer .dv.reel .rl-stage { transition: opacity 1s ease, transform 1.4s cubic-bezier(.16,.84,.24,1); }
.mo .dk-layer:not(.dkr) .dv.reel .rl-stage { opacity: 0; transform: scale(1.04); }
.nk-phone .nk-mv .dv.reel { display: flex; flex-direction: column; align-items: center; padding: 12px; }
.nk-phone .dv.reel .rl-stage { height: auto; width: 82%; }
.nk-phone .dv.reel .rl-chip b { font-size: 18px; }

/* ---- side-by-side pairs keep each picture's own shape ---- */
.dv .pair.cols { align-items: start; gap: 14px; }
.dv .pair.cols .im { flex: none; aspect-ratio: var(--par, .75); }
.dv .pair.cols .im img { object-fit: cover; }
.nk-phone .nk-mv .dv .pair.cols .im { aspect-ratio: var(--par, .75); }

/* ---- visuals take more of the stage; text keeps a steady rhythm instead of floating in big gaps ---- */
.nk .dv .fit img { max-height: calc(var(--dk-h) - 14vh); }
.nk .dv .frame { width: min(100%, calc((var(--dk-h) - 16vh) * var(--ar, 1.339))); }
.nk .dv .note { width: min(100%, calc((var(--dk-h) - 16vh) * var(--ar, 1.339))); }
.nk .dv .cmp { width: min(100%, calc((var(--dk-h) - 20vh) * var(--ar, 1.3))); }
.nk .dv.scrub .sc-stage { height: calc(var(--dk-h) - 20vh); }
.nk-sec, .nk-scene { min-height: 74vh; }
.nk-scene { padding: 9vh 0; }
.nk-step { min-height: 62vh; }
.nk-scene.stepped > .dk-lab, .nk-scene.stepped > .dk-h { padding-top: 6vh; }
@media (max-width: 900px), ((pointer: coarse) and (hover: none)) { .nk-scene { padding: 26px 0 22px; } .nk-step { min-height: 0; } }
.dv.sprite .sp-live { height: 62%; }
.dv .grid .cell .lb i::before { width: 11px; height: 11px; box-shadow: 0 0 10px var(--sw, #888); }
.nk-step { min-height: 40vh; }
/* a single highlight dims the rest of the picture only lightly, so light screenshots don't go muddy */
.nk .hb.spot { box-shadow: 0 0 20px rgba(139,92,246,.5), 0 0 0 200vmax rgba(20,18,32,.16); }

/* a hero that is a composed picture: shown whole, never cropped or zoomed */
.nk .dv.hero.whole { background: #0b0a12; }
.nk .dv.hero.whole > img { object-fit: contain; animation: none; transform: none; }
.nk-phone .nk-ms-hero .nk-mv:has(.whole), .nk-phone .nk-mv .dv.hero.whole { height: auto; min-height: 0; }
.nk-phone .nk-mv .dv.hero.whole { aspect-ratio: var(--har); }
@media (max-width: 900px), ((pointer: coarse) and (hover: none)) { .nk .dv.hero.whole > img { object-position: 50% 50%; } }