/* MEMENTO v6 — the manifesto (Memory Sphere) and MEMENTO/OS (demo and system). Loaded by the root document only.
   White paper, signature grey display language (#969696), readable ink for essential text, thin rules, 16 px windows / 10 px controls.
   Motion: transforms and opacity, driven by scroll progress variables (--p0e … --p6e) set by intro.js; the sphere runs its own loop only while it moves.
   Reduced motion / low power: progress is quantised by JS and every transform jumps; only opacity crossfades (≤ 200 ms). */

/* ============ tokens ============ */
:root {
  --paper: #ffffff; --paper-soft: #f7f7f5; --paper-raised: #fbfbfa; --paper-2: #f7f7f5;
  --memento-grey: #969696; --grey: #969696; --graphite: #595959; --ink: #151515; --ink-readable: #595959;
  --cline: #d9d9d6; --cline-2: #b9b9b5; --signal: #b6453c; --selection: #111111;
  --stmt: clamp(2.3rem, 6vw, 6.2rem);
  --dock-h: 5.9rem; --strip-h: 2.6rem;
  --r-window: 16px; --r-control: 10px; --r-chip: 8px;
}
html { scroll-behavior: auto; }
body[data-page="home"] { background: var(--paper); color: var(--ink); padding-bottom: 0; min-height: 100vh; overflow-x: hidden; }
html.portal-mode, html.portal-mode body { overflow: hidden; height: 100%; }
html.portal-mode #intro { display: none; }
::selection { background: var(--selection); color: #fff; }

/* logo (one-colour PNG recoloured through a mask; the grey PNG is the fallback) */
.logo { display: inline-block; aspect-ratio: 738 / 385; background: var(--memento-grey); -webkit-mask: url("logo/memento-mask-320.png") no-repeat center / contain; mask: url("logo/memento-mask-320.png") no-repeat center / contain; vertical-align: middle; }
@supports not (mask: url("logo/memento-mask-320.png")) { .logo { background: url("logo/memento-grey-320.png") no-repeat center / contain; } .logo-ink { background-image: url("logo/memento-ink-320.png"); } .logo-white { background-image: url("logo/memento-white-320.png"); } }
.logo-grey { background-color: var(--memento-grey); } .logo-ink { background-color: var(--ink); } .logo-white { background-color: #fff; }
.logo-xs { width: 1.5rem; } .logo-s { width: 2.6rem; } .logo-m { width: 5rem; } .logo-l { width: min(30vw, 14rem); }

/* ============ manifesto · layout ============ */
.intro { position: relative; width: 100%; height: 1200vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100dvh; width: 100%; overflow: hidden; }
.stage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--cline) 1px, transparent 1px), linear-gradient(to bottom, var(--cline) 1px, transparent 1px); background-size: 8.333vw 12.5vh; opacity: calc(var(--p1e, 0) * .28 * (1 - var(--p6e, 0) * .6)); pointer-events: none; }
.scenes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.scene { position: absolute; left: 0; right: 0; }
.scene .pin { position: sticky; top: 0; height: 100vh; height: 100dvh; padding: clamp(1.2rem, 3vw, 2.6rem); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr auto; opacity: 0; transition: opacity 240ms var(--ease); }
.scene.vis .pin { opacity: 1; }
.pin button, .pin a, .pin select { pointer-events: auto; }
.eyebrow { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: .8rem; }
.k { font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: #767674; }
.stmt, .stmt-2 { margin: 0; font-family: var(--display); font-stretch: 78%; font-weight: 600; font-size: var(--stmt); line-height: .96; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; max-width: 13ch; color: var(--memento-grey); }
.stmt { grid-column: 1; grid-row: 3; align-self: end; }
.stmt-2 { grid-column: 1; grid-row: 3; align-self: end; color: var(--ink-readable); }
.stmt .l, .stmt-2 .l { display: block; transform: translateY(.18em); opacity: 0; transition: transform 420ms var(--ease), opacity 320ms var(--ease); }
.scene.vis .stmt .l { transform: none; opacity: 1; }
.scene.vis .stmt .l:nth-child(2) { transition-delay: 60ms; } .scene.vis .stmt .l:nth-child(3) { transition-delay: 120ms; }
.scene.late-on .stmt { opacity: 0; transition: opacity 240ms var(--ease); }
.scene.vis .stmt { transition: opacity 240ms var(--ease) 120ms; }
.scene.late-on .stmt-2 .l { transform: none; opacity: 1; }
.scene.late-on .stmt-2 .l:nth-child(2) { transition-delay: 60ms; }
.s0 .stmt { color: var(--memento-grey); max-width: 24ch; font-size: calc(var(--stmt) * .88); }
.s0 .eyebrow .wordmark { font-family: var(--display); font-stretch: 78%; font-weight: 600; font-size: 1.1rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-strong); }
.s0 .eyebrow .logo-m { width: 3.4rem; }
.sub { font-size: 1.0625rem; max-width: 34ch; color: var(--ink-readable); line-height: 1.4; margin: .9em 0 0; }
.s0 .sub { grid-column: 1; grid-row: 4; }
.small-sub { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; max-width: 30ch; margin: 0; font-size: .8125rem; color: var(--ink-readable); }
.scroll-hint { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--memento-grey); display: grid; justify-items: center; gap: .5rem; }
.scroll-hint i { display: block; width: 1px; height: 2.6rem; background: var(--memento-grey); transform-origin: top; animation: hint 1.8s var(--ease) infinite; }
@keyframes hint { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: top; } 46% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
body.no-motion .scroll-hint i { animation: none; transform: none; }

/* tags */
.tag { display: inline-block; font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; padding: .12em .5em; border: 1px solid currentColor; border-radius: var(--r-chip); line-height: 1.5; vertical-align: .12em; }
.tag.demo, .tag.env[data-kind="demo"] { color: #767674; border-style: dotted; }
.tag.sim { color: var(--signal); }
.tag.proposed { color: #767674; }
.tag.no, .tag.env[data-kind="notdep"] { color: var(--signal); }
.tag.env[data-kind="system"] { color: var(--ink); }

/* capacity facts (scene 05) */
.s5 .capfacts { grid-column: 1; grid-row: 2; align-self: start; max-width: 27rem; margin: .8rem 0 0; display: grid; gap: .5rem; font-size: .8125rem; color: var(--ink-readable); }
.capfacts div { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .6rem; border-top: 1px solid var(--cline); padding-top: .5rem; }
.capfacts dt { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: #767674; padding-top: .15em; }
.capfacts dd { margin: 0; } .capfacts b { color: var(--ink); font-weight: 600; }

/* phase index (scene 03) */
.phases { grid-column: 1; grid-row: 2 / 5; list-style: none; margin: 0; padding: 0; align-self: center; display: grid; gap: .1rem; max-width: 23rem; }
.phases li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--cline); opacity: .45; transition: opacity 240ms var(--ease); }
.phases li.on { opacity: 1; } .phases li.done { opacity: .7; }
.phases .pn { font-family: var(--mono); font-size: .6875rem; color: var(--memento-grey); grid-row: 1 / 4; padding-top: .35em; }
.phases .pv { font-family: var(--display); font-stretch: 80%; font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 2rem); letter-spacing: -.01em; text-transform: uppercase; line-height: 1; color: var(--ink); }
.phases li:not(.on) .pv { color: var(--memento-grey); }
.phases .ps { font-size: .8125rem; color: var(--ink-readable); line-height: 1.4; max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease), margin 320ms var(--ease); }
.phases li.on .ps { max-height: 5rem; margin-top: .35rem; }
.phases .pf { display: grid; gap: .15rem; font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: #767674; max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease), margin 320ms var(--ease); }
.phases li.on .pf { max-height: 4rem; margin-top: .35rem; }
.phases .st { color: var(--signal); }
.phases li.on .pv::after { content: ""; display: inline-block; width: .4em; height: .4em; background: var(--ink); margin-left: .45em; vertical-align: .12em; }

/* gate + truth panel (scene 06) */
.s6 .gate { grid-column: 2; grid-row: 3; align-self: end; justify-self: end; display: grid; justify-items: end; gap: .8rem; }
.s6 .truth { grid-column: 2; grid-row: 4; margin: .8rem 0 0; font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; line-height: 1.6; color: var(--ink-readable); text-align: right; white-space: pre; border-top: 1px solid var(--cline); padding-top: .6rem; }
.gate .enter { pointer-events: auto; font-family: var(--display); font-stretch: 80%; font-weight: 600; font-size: clamp(1.2rem, 2.2vw, 1.8rem); letter-spacing: .01em; text-transform: uppercase; padding: .6em 1.2em .55em 1em; background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: var(--r-control); display: inline-grid; grid-auto-flow: column; align-items: center; gap: .8em; animation: gate-in 480ms var(--ease) both; min-height: 44px; }
.gate .enter:hover, .gate .enter:focus-visible { background: #fff; color: var(--ink); }
.gate .enter:hover .logo, .gate .enter:focus-visible .logo { background-color: var(--ink); }
.gate .gate-hint { font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: #767674; margin: 0; }
.gate .gate-skip { pointer-events: auto; font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: #595959; text-decoration: underline; text-underline-offset: 3px; padding: .4em 0; min-height: 32px; margin-top: .2rem; }
.gate .gate-skip:hover, .gate .gate-skip:focus-visible { color: var(--ink); }
@keyframes gate-in { from { opacity: 0; transform: translateY(.4rem); } to { opacity: 1; transform: none; } }
body.no-motion .gate .enter { animation: none; }

/* ============ manifesto · stage objects ============ */
.stage > * { position: absolute; }
.bgwords { inset: 0; pointer-events: none; overflow: hidden; }
.bgwords span { position: absolute; left: 4vw; font-family: var(--display); font-stretch: 70%; font-weight: 700; font-size: clamp(5rem, 17vw, 16rem); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; color: var(--memento-grey); opacity: calc(.16 * var(--p1e, 0) * (1 - var(--p2e, 0))); white-space: nowrap; transform: translateY(calc((var(--i) * 46vh) - var(--bgp, 0) * 190vh + 30vh)); }
.bgwords span:nth-child(1) { --i: 0; } .bgwords span:nth-child(2) { --i: 1; left: auto; right: 4vw; } .bgwords span:nth-child(3) { --i: 2; } .bgwords span:nth-child(4) { --i: 3; left: auto; right: 4vw; } .bgwords span:nth-child(5) { --i: 4; }
.intro[data-scene="0"] .bgwords, .intro[data-scene="3"] .bgwords, .intro[data-scene="4"] .bgwords, .intro[data-scene="5"] .bgwords, .intro[data-scene="6"] .bgwords { display: none; }
.sphere-wrap { inset: 0; }
#sphere { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline: none; }
#sphere.dragging { cursor: grabbing; }
#sphere:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.intro[data-scene="0"] .sphere-wrap { opacity: .62; transform: translateX(14vw) scale(.92); transform-origin: center; pointer-events: none; }
.intro[data-scene="0"] .sphere-hint, .intro[data-scene="0"] .sphere-count { opacity: 0; }
.intro[data-scene="4"] .sphere-wrap { opacity: 0; pointer-events: none; }
.intro[data-scene="2"] .sphere-wrap { opacity: .45; }
.sphere-wrap { transition: opacity 240ms var(--ease), transform 600ms var(--ease); }
.sphere-hint { position: absolute; left: 50%; bottom: 5.4rem; transform: translateX(-50%); margin: 0; color: var(--memento-grey); opacity: calc(var(--p1e, 0) * (1 - var(--p2e, 0))); pointer-events: none; }
.sphere-count { position: absolute; left: 50%; top: 1.3rem; transform: translateX(-50%); margin: 0; color: var(--memento-grey); white-space: nowrap; opacity: calc(var(--p1e, 0) * (1 - var(--p3e, 0))); pointer-events: none; }
.intro:not([data-scene="1"]) .sphere-preview, .intro:not([data-scene="1"]) .filmstrip { display: none !important; }
.sphere-preview { position: absolute; right: clamp(1.2rem, 3vw, 2.6rem); top: 50%; transform: translateY(calc(-50% + 6.4rem)); width: min(19rem, calc(100vw - 2.4rem)); background: #fff; border: 1px solid var(--cline); border-radius: var(--r-window); padding: .9rem 1rem 1rem; display: grid; gap: .4rem; box-shadow: 0 16px 40px -24px rgba(0, 0, 0, .25); pointer-events: auto; animation: pv-in 200ms var(--ease) both; }
@keyframes pv-in { from { opacity: 0; transform: translateY(calc(-50% + 6.9rem)); } to { opacity: 1; transform: translateY(calc(-50% + 6.4rem)); } }
.sp-h { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: #767674; }
.sp-h b { color: var(--ink); font-weight: 500; }
.sp-h .st { margin-left: auto; padding: .05em .45em; border: 1px dotted #767674; border-radius: var(--r-chip); } .sp-h .st.grey { color: var(--memento-grey); }
.sphere-preview h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.sphere-preview p { margin: 0; font-size: .8125rem; color: var(--ink-readable); line-height: 1.4; }
.sp-actions { display: flex; gap: .4rem; margin-top: .4rem; }
.sp-actions .btn, .dt-x, .intro .btn { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; padding: .6em .9em; border: 1px solid var(--ink); border-radius: var(--r-control); background: var(--ink); color: #fff; min-height: 36px; }
.sp-actions .btn.quiet, .intro .btn.quiet { background: #fff; color: var(--ink); border-color: var(--cline-2); }
.sp-actions .btn:hover, .intro .btn:hover, .intro .btn:focus-visible { background: #fff; color: var(--ink); border-color: var(--ink); }
.win .btn { background: #fff; color: var(--ink); border: 1px solid var(--cline-2); border-radius: var(--r-control); font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; padding: .55em .9em; min-height: 36px; }
.win .btn:hover, .win .btn:focus-visible { border-color: var(--ink); background: #fff; color: var(--ink); }
.win .btn.fill, .win .btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); } .win .btn.fill:hover, .win .btn.primary:hover { background: #fff; color: var(--ink); }
.filmstrip { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; gap: .4rem; padding: .4rem; background: #fff; border: 1px solid var(--cline); border-radius: var(--r-control); pointer-events: auto; max-width: calc(100vw - 2rem); overflow-x: auto; }
.filmstrip button, .dt-strip button { width: 3.4rem; height: 3.1rem; border-radius: 8px; overflow: hidden; border: 1px solid transparent; display: grid; grid-template-rows: 1fr auto; background: var(--paper-soft); padding: 0; flex: 0 0 auto; }
.filmstrip button img, .dt-strip button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.filmstrip button span, .dt-strip button span { display: grid; place-items: center; font-family: var(--mono); font-size: .625rem; color: var(--memento-grey); }
.filmstrip button i, .dt-strip button i { font-style: normal; font-family: var(--mono); font-size: .5625rem; color: #767674; padding: .1em 0; }
.filmstrip button[aria-current="true"], .dt-strip button[aria-current="true"] { border-color: var(--ink); }
.filmstrip button:hover, .filmstrip button:focus-visible, .dt-strip button:hover, .dt-strip button:focus-visible { border-color: var(--cline-2); }
/* the synchronised semantic list (visually hidden on desktop, visible under the sphere on phones) */
.sphere-list { position: absolute; left: 0; top: 0; list-style: none; margin: 0; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sphere-list button { font: inherit; }
.list-toggle { display: none; }

/* the human memory object (scenes 02–03) */
.sleeve { left: 50%; top: 50%; margin: 0; width: 16rem; transform: translate(-50%, -50%) translate(calc(46vw * (1 - var(--p2e, 0))), calc(52vh * (1 - var(--p2e, 0)))) rotate(calc(-4deg * (1 - var(--p2e, 0)))); opacity: calc(var(--p2e, 0) * 4); display: grid; background: #fff; border: 1px solid var(--cline); border-radius: 12px; overflow: hidden; transition: width 480ms var(--ease), border-color 320ms var(--ease); box-shadow: 0 18px 44px -28px rgba(0, 0, 0, .3); }
.intro[data-scene="2"] .sleeve { left: calc(50% + min(14vw, 12rem)); }
.intro[data-scene="0"] .sleeve, .intro[data-scene="1"] .sleeve, .intro[data-scene="4"] .sleeve, .intro[data-scene="5"] .sleeve, .intro[data-scene="6"] .sleeve { display: none; }
.intro[data-scene="3"] .sleeve { left: calc(50% + min(10vw, 9rem)); }
.sl-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.sl-meta { display: grid; gap: .3rem; padding: .7rem .8rem .8rem; font-size: .75rem; }
.sl-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: #767674; }
.sl-head b { color: var(--ink); font-weight: 500; }
.sl-row { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); gap: .5rem; }
.sl-row i { font-style: normal; font-family: var(--mono); font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase; color: #767674; padding-top: .2em; }
.sl-row b { font-weight: 400; overflow-wrap: anywhere; color: var(--ink-readable); }
.sl-row b.mono { font-size: .625rem; }
.sl-note { font-family: var(--serif); font-style: italic; font-size: .8125rem; color: var(--ink-readable); line-height: 1.35; margin-top: .25rem; }
.sl-note q { quotes: "“" "”"; }
.sl-note .sl-by { display: block; margin-top: .3rem; font-family: var(--mono); font-style: normal; font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--memento-grey); }
.sl-photo img { aspect-ratio: auto; max-height: 18rem; object-fit: contain; background: var(--paper-soft); }
.sl-verify { display: none; gap: .6rem; flex-wrap: wrap; font-family: var(--mono); font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase; color: #767674; margin-top: .35rem; }
.sl-verify span { display: inline-flex; align-items: center; gap: .3rem; }
.sl-verify i { width: .55rem; height: .55rem; border: 1px solid var(--ink); background: var(--ink); border-radius: 2px; }
.sl-verify .pending { color: var(--signal); } .sl-verify .pending i { background: transparent; border-color: var(--signal); }
.sl-syn, .sl-trace, .sl-cell { display: none; }
.sleeve[data-phase="-1"] .sl-head, .sleeve[data-phase="-1"] .sl-row:nth-child(4), .sleeve[data-phase="-1"] .sl-note { display: none; }
.sleeve[data-phase="0"], .sleeve[data-phase="1"], .sleeve[data-phase="2"], .sleeve[data-phase="3"], .sleeve[data-phase="4"] { border-color: var(--cline-2); }
.sleeve[data-phase="1"] .sl-verify, .sleeve[data-phase="2"] .sl-verify, .sleeve[data-phase="3"] .sl-verify, .sleeve[data-phase="4"] .sl-verify { display: flex; }
.sleeve[data-phase="2"], .sleeve[data-phase="3"], .sleeve[data-phase="4"] { width: 32rem; grid-template-columns: 1fr 1fr; }
.sleeve[data-phase="2"] .sl-photo, .sleeve[data-phase="3"] .sl-photo, .sleeve[data-phase="4"] .sl-photo, .sleeve[data-phase="2"] .sl-meta, .sleeve[data-phase="3"] .sl-meta, .sleeve[data-phase="4"] .sl-meta { grid-column: 1; }
.sleeve[data-phase="2"] .sl-syn, .sleeve[data-phase="3"] .sl-syn, .sleeve[data-phase="4"] .sl-syn { display: grid; grid-column: 2; grid-row: 1 / 3; align-content: start; gap: .5rem; padding: .7rem .8rem; border-left: 1px solid var(--cline); background: var(--paper-soft); color: #767674; position: relative; }
.sl-syn s { font-family: var(--serif); font-style: italic; font-size: .9375rem; line-height: 1.35; color: var(--ink-readable); text-decoration: none; opacity: calc(1 - var(--erase, 0) * .5); transition: opacity 320ms var(--ease); }
.sleeve.struck .sl-syn s { text-decoration: line-through; text-decoration-color: var(--signal); text-decoration-thickness: 2px; }
.sl-syn .mono { font-size: .5625rem; overflow-wrap: anywhere; opacity: .8; }
.sl-syn::after { content: "ERASED · HASH KEPT"; position: absolute; right: .7rem; bottom: .6rem; font-family: var(--mono); font-size: .5625rem; letter-spacing: .1em; color: var(--signal); opacity: var(--erase, 0); }
.sleeve[data-phase="3"] .sl-cell, .sleeve[data-phase="4"] .sl-cell { display: grid; grid-column: 1 / -1; justify-items: center; gap: .5rem; padding: .6rem .8rem .8rem; border-top: 1px solid var(--cline); }
.sl-cell canvas { width: 100%; height: auto; display: block; border: 1px solid var(--cline); }
.sleeve[data-phase="4"] .sl-trace { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--cline); }
.sl-trace > span { padding: .5rem .55rem; font-family: var(--mono); font-size: .5625rem; letter-spacing: .06em; text-transform: uppercase; color: #767674; border-right: 1px solid var(--cline); display: grid; gap: .2rem; opacity: .35; min-width: 0; }
.sl-trace > span:last-child { border-right: 0; }
.sl-trace > span.on { opacity: 1; }
.sl-trace > span b { font-weight: 500; font-size: .625rem; color: var(--ink); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.sl-trace > span.on b { color: var(--signal); }

/* consequence (scene 04) */
.rlab { left: auto; right: clamp(1.2rem, 3vw, 2.6rem); top: 50%; transform: translateY(-50%); width: min(52rem, 60vw); display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.2rem; opacity: 0; }
.intro[data-scene="4"] .rlab { opacity: 1; transition: opacity 240ms var(--ease); }
.chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.chain li { display: grid; gap: .15rem; padding: .55rem 0 .6rem; border-top: 1px solid var(--cline); position: relative; }
.chain li span { font-family: var(--mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: #767674; }
.chain li b { font-weight: 500; font-size: .8125rem; color: var(--ink); overflow-wrap: anywhere; }
.chain li + li::before { content: "↓"; position: absolute; right: 0; top: -.75rem; font-family: var(--mono); font-size: .75rem; color: var(--memento-grey); background: #fff; padding: 0 .2rem; }
.chain.big li { opacity: .4; transition: opacity 240ms var(--ease); } .chain.big li.on { opacity: 1; } .chain.big li.on b { color: var(--signal); }
.rlab-cmp { display: grid; gap: .7rem; }
.rlab-q { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1.8vw, 1.5rem); color: var(--ink); margin: 0; }
.rlab-ab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--cline); border: 1px solid var(--cline); border-radius: 12px; overflow: hidden; }
.rlab-ab > div { background: #fff; padding: .9rem 1rem 1rem; display: grid; gap: .5rem; align-content: start; }
.rlab-ab .k { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.rlab-ab p { margin: 0; font-size: .9375rem; line-height: 1.45; max-width: none; color: var(--ink-readable); }
.lseg { transition: opacity 320ms var(--ease), color 320ms var(--ease); }
.rlab.struck .lseg.from { text-decoration: line-through; text-decoration-color: var(--signal); text-decoration-thickness: 2px; color: var(--memento-grey); }
.lseg.to { color: var(--ink); font-weight: 500; opacity: calc(.25 + var(--lab, 0) * .75); }
.rlab.struck .lseg.to { background: rgba(182, 69, 60, .1); box-shadow: 0 1px 0 var(--signal); }

/* record detail (OPEN) */
.detail { position: fixed; inset: 0; z-index: 8; background: rgba(255, 255, 255, .92); display: grid; grid-template-rows: auto 1fr auto; padding: clamp(.8rem, 2vw, 1.6rem); }
.dt-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--cline); }
.dt-x { width: 44px; height: 44px; padding: 0; font-size: 1.3rem; line-height: 1; border-radius: 50%; background: #fff; color: var(--ink); border-color: var(--cline-2); }
.dt-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: start; overflow: auto; padding: 1.2rem 0; }
.dt-media img { width: 100%; max-height: 62vh; object-fit: contain; border-radius: 12px; display: block; background: var(--paper-soft); }
.dt-slip { background: #fff; border: 1px solid var(--cline); border-radius: 12px; padding: 1.4rem 1.6rem; display: grid; gap: .6rem; }
.dt-slip.grey { background: var(--paper-soft); color: #767674; }
.dt-slip .excerpt { font-size: 1.25rem; }
.dt-info { display: grid; gap: .8rem; }
.dt-info h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.dt-info .excerpt { font-family: var(--serif); font-style: italic; font-size: 1.0625rem; color: var(--ink-readable); line-height: 1.45; margin: 0; }
.dt-info .kv { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .3rem .8rem; font-size: .8125rem; margin: 0; }
.dt-info .kv dt { font-family: var(--mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: #767674; padding-top: .2em; }
.dt-info .kv dd { margin: 0; color: var(--ink-readable); } .dt-info .kv dd.wrap { overflow-wrap: anywhere; }
.dt-cons { display: grid; gap: .4rem; }
.dt-strip { display: flex; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--cline); overflow-x: auto; }
.intro.leaving .scenes, .intro.leaving .stage > *:not(.sphere-wrap) { opacity: 0 !important; transition: opacity 240ms var(--ease); }

/* ============ MEMENTO/OS ============ */
.portal { position: fixed; inset: 0; z-index: 10; background: var(--paper); color: var(--ink); overflow: hidden; }
.portal::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--cline) 1px, transparent 1px), linear-gradient(to bottom, var(--cline) 1px, transparent 1px); background-size: 8.333vw 12.5vh; opacity: .28; pointer-events: none; }
.portal.entering { opacity: 0; }
.wall { position: absolute; inset: 0; width: 100%; height: 100%; }
.strip { position: absolute; left: 0; right: 0; top: 0; height: var(--strip-h); display: flex; align-items: center; gap: 1rem; padding: 0 .8rem; font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: #767674; background: rgba(255, 255, 255, .8); border-bottom: 1px solid var(--cline); z-index: 30; }
.strip-home { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .5rem; border-radius: var(--r-chip); color: var(--ink); font: inherit; letter-spacing: inherit; text-transform: inherit; min-height: 32px; }
.strip-home:hover, .strip-home:focus-visible { background: var(--paper-soft); }
.strip-name { font-weight: 500; }
.strip-meta { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.strip-meta .tag { font-size: .625rem; }
.strip-keys { margin-left: auto; color: var(--memento-grey); }
.os-desk { position: absolute; inset: var(--strip-h) 0 var(--dock-h) 0; }
.wins { position: absolute; inset: var(--strip-h) 0 var(--dock-h) 0; pointer-events: none; }
.wins > * { pointer-events: auto; }

/* artifacts on the desk */
.os-desk .art { position: absolute; width: max-content; margin: 0; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.os-desk .art.dragging { cursor: grabbing; }
.os-desk .art > :first-child { border-radius: 10px; overflow: hidden; }
.os-desk .art.selected > :first-child { box-shadow: 0 0 0 2px var(--ink); }
.os-desk .art:focus-visible { outline: none; } .os-desk .art:focus-visible > :first-child { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #fff; }
.os-desk .art .lab { position: absolute; left: 0; right: auto; top: calc(100% + .3rem); opacity: 1; display: flex; gap: .5rem; font-family: var(--mono); font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase; color: #767674; white-space: nowrap; }
.os-desk .art .lab b { color: var(--ink-readable); font-weight: 500; }
.os-desk .art.open > :first-child { opacity: .35; }
.art-file { width: 9rem; padding: .6rem .7rem; background: #fff; border: 1px solid var(--cline); display: grid; gap: .2rem; font-size: .75rem; }
.art-file b { font-family: var(--mono); font-weight: 500; font-size: .75rem; color: var(--ink); }
.art-file span { color: #767674; font-size: .625rem; }
.fi { display: block; width: 1.2rem; height: 1.2rem; border: 1px solid var(--ink); border-radius: 4px; position: relative; margin-bottom: .2rem; }
.fi-ver::after { content: ""; position: absolute; inset: 30% 20%; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.fi-cap::after { content: ""; position: absolute; left: 20%; right: 20%; top: 50%; height: 30%; background: repeating-linear-gradient(45deg, var(--ink) 0 1px, transparent 1px 3px); }
.fi-sys { border-radius: 50%; } .fi-sys::after { content: ""; position: absolute; inset: 35%; background: var(--ink); border-radius: 50%; }
.sys-card .art-file { border-color: var(--ink); }
.os-desk.empty-desk { display: grid; place-items: center; }
.sys-note { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); }
.empty-desk-note { max-width: 30rem; text-align: center; display: grid; gap: .6rem; color: var(--ink-readable); font-size: .9375rem; padding: 2rem; }
.empty-desk-note .logo { margin: 0 auto .6rem; }

/* windows */
.win { position: absolute; z-index: 20; background: #fff; color: var(--ink); border: 1px solid var(--cline-2); border-radius: var(--r-window); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 24px 60px -30px rgba(0, 0, 0, .28); display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 18rem; min-height: 12rem; max-width: calc(100vw - 1rem); max-height: calc(100vh - var(--dock-h) - var(--strip-h) - 1rem); overflow: hidden; }
.win.focused { border-color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 30px 70px -30px rgba(0, 0, 0, .35); }
.win.max { left: .5rem !important; top: .5rem !important; width: calc(100vw - 1rem) !important; height: calc(100vh - var(--dock-h) - var(--strip-h) - 1rem) !important; }
.win-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .5rem .5rem .5rem 1rem; border-bottom: 1px solid var(--cline); background: var(--paper-raised); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; min-height: 3rem; }
.win-bar:active { cursor: grabbing; }
.win-bar .ttl { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; min-width: 0; font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: #767674; }
.win-bar .ttl b { font-family: var(--display); font-stretch: 88%; font-weight: 600; font-size: .9375rem; letter-spacing: 0; text-transform: none; color: var(--ink); }
.win-bar .ttl .st { display: inline-block; padding: .08em .5em; border: 1px dotted #a3a3a0; border-radius: var(--r-chip); white-space: nowrap; }
.win-bar .ttl .st.red { color: var(--signal); border-color: var(--signal); }
.win-ctl { display: flex; gap: .2rem; }
.win-ctl button { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--r-control); color: var(--ink); }
.win-ctl button svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.win-ctl button:hover, .win-ctl button:focus-visible { border-color: var(--cline-2); background: #fff; }
.win-ctl button.x:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.win-body { position: relative; overflow: auto; min-height: 0; min-width: 0; }
.win.app .win-body { overflow: hidden; display: block; }
.win.native-app .win-body { overflow: auto; display: block; }
.win.rec > .win-body { display: block; }
.win.app iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--paper); }
.win.app .win-body::after { content: ""; position: absolute; inset: 0; display: none; }
.portal.dragging .win.app .win-body::after { display: block; }
.win-rs { position: absolute; right: 0; bottom: 0; width: 1.4rem; height: 1.4rem; cursor: nwse-resize; touch-action: none; }
.win-rs::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 8px; height: 8px; border-right: 1.5px solid var(--cline-2); border-bottom: 1.5px solid var(--cline-2); border-radius: 0 0 3px 0; }
.win-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem .9rem; border-top: 1px solid var(--cline); font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: #767674; background: var(--paper-raised); flex-wrap: wrap; }
.win-foot .btn-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.win-foot .btn { min-height: 36px; padding: .5em .8em; }
.win.rec { width: min(36rem, calc(100vw - 1rem)); grid-template-rows: auto minmax(0, 1fr) auto; }
.win-loading { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: #767674; background: var(--paper); pointer-events: none; transition: opacity 200ms var(--ease); }
.win.loaded .win-loading { opacity: 0; }
.trace-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--cline); background: #fff; }
.trace-strip button { padding: .55rem .55rem; text-align: left; border-right: 1px solid var(--cline); font-family: var(--mono); font-size: .5625rem; letter-spacing: .06em; text-transform: uppercase; color: #767674; display: grid; gap: .2rem; min-width: 0; min-height: 44px; }
.trace-strip button:last-child { border-right: 0; }
.trace-strip button b { font-weight: 500; font-size: .625rem; color: var(--ink); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.trace-strip button:hover, .trace-strip button:focus-visible { background: var(--paper-soft); }
.trace-strip button.red b { color: var(--signal); }

/* native windows */
.native { padding: 1rem 1.2rem 1.2rem; display: grid; gap: .8rem; align-content: start; font-size: .8125rem; }
.native h2 { font-size: 1.0625rem; font-weight: 600; }
.native .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--cline); }
.native .row p { margin: 0; color: var(--ink-readable); }
.native .row .k { display: block; margin-bottom: .15rem; }
.native .btn { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; padding: .55em .9em; border: 1px solid var(--cline-2); border-radius: var(--r-control); background: #fff; color: var(--ink); text-decoration: none; display: inline-block; min-height: 36px; }
.native .btn:hover, .native .btn:focus-visible { border-color: var(--ink); }
.native .btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.native .btn.red { color: var(--signal); border-color: var(--signal); } .native .btn.red:hover { background: var(--signal); color: #fff; }
.native .btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); } .native .btn.primary:hover { background: #fff; color: var(--ink); }
.native kbd { font-family: var(--mono); font-size: .625rem; border: 1px solid var(--cline-2); border-radius: 4px; padding: .05em .35em; background: #fff; justify-self: start; white-space: nowrap; }
.native .keys { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .8rem; font-size: .75rem; color: var(--ink-readable); }
.arch-list { display: grid; gap: 1px; background: var(--cline); border: 1px solid var(--cline); border-radius: 12px; overflow: hidden; }
.arch-list button { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .55rem .7rem; background: #fff; text-align: left; font-size: .8125rem; min-height: 44px; }
.arch-list button:hover, .arch-list button:focus-visible { background: var(--paper-soft); }
.arch-list .th { width: 3rem; height: 2.25rem; background: var(--paper-soft); overflow: hidden; display: grid; place-items: center; font-family: var(--mono); font-size: .5625rem; color: #767674; border-radius: 6px; }
.arch-list .th img { width: 100%; height: 100%; object-fit: cover; }
.arch-list .m { display: block; font-family: var(--mono); font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase; color: #767674; }
.arch-list b { font-weight: 600; }
.arch-list .r { font-family: var(--mono); font-size: .625rem; color: #767674; }
.arch-filter { display: flex; gap: .3rem; flex-wrap: wrap; }
.arch-filter button { font-family: var(--mono); font-size: .625rem; letter-spacing: .06em; text-transform: uppercase; padding: .45em .7em; border: 1px solid var(--cline-2); border-radius: var(--r-chip); background: #fff; min-height: 32px; }
.arch-filter button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
/* the system threshold */
.threshold { display: grid; gap: 1rem; padding: 1.4rem 1.6rem 1.6rem; }
.threshold h2 { font-family: var(--display); font-stretch: 80%; font-weight: 600; font-size: 1.6rem; letter-spacing: -.01em; text-transform: uppercase; color: var(--memento-grey); }
.threshold .three { display: grid; gap: 0; border-top: 1px solid var(--cline); }
.threshold .three > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--cline); font-size: .875rem; color: var(--ink-readable); }
.threshold .three b { font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); font-weight: 500; padding-top: .2em; }
.threshold .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.threshold .status { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: #767674; display: grid; gap: .2rem; }

/* dock */
.dock { position: absolute; left: 50%; bottom: .7rem; transform: translateX(-50%); display: flex; align-items: end; gap: .15rem; padding: .35rem .45rem; background: rgba(255, 255, 255, .92); border: 1px solid var(--cline-2); border-radius: 14px; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .3); z-index: 40; max-width: calc(100vw - 1rem); }
/* v8 · every dock item shows its name permanently beneath the icon */
.dk { position: relative; width: 4.3rem; min-height: 4.2rem; display: grid; grid-template-rows: auto auto; justify-items: center; align-content: start; gap: .3rem; padding: .35rem .15rem .3rem; color: var(--ink); border: 1px solid transparent; border-radius: var(--r-control); transition: transform 160ms var(--ease), background 160ms var(--ease); }
/* v7 · one coloured squircle family: simple white marks on a tinted container, readable at 24–32px */
.dk-i { width: 2.25rem; height: 2.25rem; border-radius: 30%; display: grid; place-items: center; background: var(--c, #969696); color: #fff; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .06); transition: transform 160ms var(--ease); }
.dk-i[data-c="index"] { --c: #3b6fd6; } .dk-i[data-c="add"] { --c: #d9605a; } .dk-i[data-c="mind"] { --c: #6b5bd2; } .dk-i[data-c="capacity"] { --c: #2f9e7a; } .dk-i[data-c="protocol"] { --c: #d29a2a; } .dk-i[data-c="archive"] { --c: #b6453c; } .dk-i[data-c="settings"] { --c: #55585d; } .dk-i[data-c="profile"] { --c: #8a6d5c; }
.dk svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.dk svg .f { fill: currentColor; stroke: none; }
.dk svg .d { stroke-dasharray: 2 2; }
.dk:hover, .dk:focus-visible { transform: translateY(-3px); background: var(--paper-soft); }
.dk.active::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); transform: translateX(-50%); }
.dk[aria-pressed="true"] { background: var(--paper-soft); border-color: var(--ink); } .dk[aria-pressed="true"]::after { width: 14px; border-radius: 3px; }
.dk.has-min::before { content: ""; position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px dashed var(--ink); background: #fff; }
.dk.has-min:not(.active)::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--ink); background: #fff; transform: translateX(-50%); }
.dk.tour-hi .dk-i { outline: 2px solid var(--ink); outline-offset: 2px; }
.dk-l { font-family: var(--mono); font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-readable); white-space: nowrap; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dk[aria-pressed="true"] .dk-l { color: var(--ink-strong); font-weight: 600; }
.dock-sep { width: 1px; align-self: stretch; margin: .4rem .25rem; background: var(--cline-2); }
.dock-min { display: flex; gap: .2rem; align-items: end; margin-left: .3rem; padding-left: .45rem; border-left: 1px solid var(--cline); }
.dock-min:empty { display: none; }
.dm { width: 2.5rem; height: 3.1rem; display: grid; grid-template-rows: 1fr auto; place-items: center; gap: .2rem; padding: .3rem .2rem .25rem; color: var(--ink); border: 1px solid transparent; border-radius: var(--r-control); transition: transform 160ms var(--ease), background 160ms var(--ease); }
.dm:hover, .dm:focus-visible { transform: translateY(-4px); background: var(--paper-soft); }
.dm i { width: 1.1rem; height: .8rem; border: 1px solid var(--ink); border-radius: 3px; background: var(--c, #fff); }
.dm span { font-family: var(--mono); font-size: .5rem; letter-spacing: .04em; max-width: 2.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* toasts */
body[data-page="home"] .toast { position: fixed; left: 50%; bottom: calc(var(--dock-h) + 1rem); transform: translate(-50%, 8px); background: var(--ink); color: #fff; font-family: var(--mono); font-size: .75rem; padding: .65em 1em; border-radius: var(--r-control); opacity: 0; transition: opacity 160ms var(--ease), transform 160ms var(--ease); z-index: 95; pointer-events: none; max-width: calc(100vw - 2rem); }
body[data-page="home"] .toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ============ reduced motion / low power ============ */
body.no-motion .stmt .l, body.no-motion .stmt-2 .l, body.no-motion .scene .pin, body.no-motion .sleeve, body.no-motion .rlab, body.no-motion .sphere-wrap, body.no-motion .bgwords span { transition: opacity 200ms var(--ease) !important; }
body.no-motion .dk, body.no-motion .dm, body.no-motion .sphere-preview { transition: none; animation: none; }
body.no-motion .dk:hover { transform: none; }

/* ============ tablet ============ */
@media (max-width: 1180px) {
  :root { --stmt: clamp(2.1rem, 6.6vw, 4.8rem); }
  .rlab { width: min(46rem, 62vw); grid-template-columns: 1fr; gap: .8rem; }
  .chain.big { grid-template-columns: repeat(4, minmax(0, 1fr)); } .chain.big li { border-top: 0; border-left: 1px solid var(--cline); padding: .2rem .6rem; } .chain.big li + li::before { display: none; }
  .win.rec { width: min(32rem, calc(100vw - 1rem)); }
  .os-desk .art > :first-child { zoom: .8; }
  .strip-keys { display: none; }
}

/* ============ mobile ============ */
@media (max-width: 860px) {
  :root { --stmt: clamp(2rem, 10.5vw, 3.2rem); --dock-h: 5.4rem; --strip-h: 2.4rem; }
  .scene .pin { padding: 1rem 1rem 1.2rem; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto auto; }
  .stmt, .stmt-2 { max-width: 11ch; }
  .small-sub { grid-column: 1; grid-row: 4; justify-self: start; text-align: left; max-width: 28ch; margin-top: .5rem; }
  .s0 .sub { grid-row: 4; }
  .s5 .capfacts { grid-column: 1; grid-row: 4; max-width: none; font-size: .75rem; margin-top: .5rem; }
  .capfacts div { grid-template-columns: 4rem minmax(0, 1fr); }
  .s6 .gate { grid-column: 1; grid-row: 4; justify-self: start; justify-items: start; margin-top: .8rem; }
  .s6 .truth { grid-column: 1; grid-row: 5; text-align: left; white-space: pre-wrap; }
  .bgwords span { font-size: clamp(3.4rem, 19vw, 5rem); }
  .sphere-wrap { inset: 12% 0 auto 0; height: 46vh; }
  .intro[data-scene="0"] .sphere-wrap { transform: translateY(-6vh) scale(.9); opacity: .5; }
  .sphere-hint { bottom: .4rem; } .sphere-count { top: .3rem; font-size: .5625rem; }
  .sphere-preview { right: 1rem; left: 1rem; width: auto; top: auto; bottom: 4.6rem; transform: none; }
  @keyframes pv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .filmstrip { bottom: .6rem; }
  .sphere-list { position: absolute; left: 1rem; right: 1rem; top: auto; bottom: 0; width: auto; height: auto; clip: auto; overflow: auto; white-space: normal; max-height: 26vh; background: #fff; border: 1px solid var(--cline); border-radius: 10px; }
  .intro[data-scene="1"] .sphere-list.open { display: block; } .intro:not([data-scene="1"]) .sphere-list, .sphere-list:not(.open) { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden; border: 0; }
  .list-toggle { display: inline-block; position: absolute; right: 1rem; bottom: .4rem; pointer-events: auto; font-family: var(--mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; padding: .5em .7em; border: 1px solid var(--cline-2); border-radius: var(--r-chip); background: #fff; color: var(--ink); min-height: 36px; }
  .sphere-list li + li { border-top: 1px solid var(--cline); }
  .sphere-list button { width: 100%; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: .5rem; align-items: baseline; padding: .55rem .7rem; text-align: left; font-size: .75rem; min-height: 44px; }
  .sphere-list button .mono { font-family: var(--mono); font-size: .625rem; color: #767674; } .sphere-list button b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
  .sphere-list button[aria-current="true"] { background: var(--paper-soft); }
  .s1 .small-sub { display: none; }
  .sleeve { top: 40%; width: 13.5rem; } .intro[data-scene="2"] .sleeve, .intro[data-scene="3"] .sleeve { left: 50%; } .intro[data-scene="2"] .sleeve { top: 34%; }
  .intro[data-scene="3"] .sleeve { top: 48%; }
  .sleeve[data-phase="2"], .sleeve[data-phase="3"], .sleeve[data-phase="4"] { width: min(22rem, calc(100vw - 2rem)); grid-template-columns: 1fr; }
  .sleeve[data-phase="2"] .sl-syn, .sleeve[data-phase="3"] .sl-syn, .sleeve[data-phase="4"] .sl-syn { grid-column: 1; grid-row: auto; border-left: 0; border-top: 1px solid var(--cline); }
  .sleeve[data-phase="2"] .sl-photo, .sleeve[data-phase="3"] .sl-photo, .sleeve[data-phase="4"] .sl-photo { display: none; }
  .phases { align-self: start; max-width: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; }
  .phases li { grid-template-columns: 1fr; grid-template-rows: auto auto; padding: .35rem 0; }
  .phases .pn { grid-row: 1; padding: 0; }
  .phases .pv { font-size: .8rem; }
  .phases .ps, .phases .pf { display: none; }
  .phases li.on .ps { display: block; position: absolute; left: 1rem; right: 1rem; bottom: 4.6rem; max-height: none; font-size: .8125rem; }
  .phases li.on .pf { display: grid; position: absolute; left: 1rem; right: 1rem; bottom: 1.2rem; max-height: none; }
  .rlab { left: 1rem; right: auto; top: 42%; width: calc(100vw - 2rem); gap: .5rem; grid-template-columns: 1fr; }
  .rlab-q { font-size: 1rem; } .rlab-ab { grid-template-columns: 1fr; } .rlab-ab p { font-size: .8125rem; }
  .chain.big li { padding: .15rem .5rem; } .chain.big li b { font-size: .6875rem; }
  .dt-body { grid-template-columns: 1fr; }
  .os-desk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 1rem; align-content: start; padding: 1rem 1rem 1rem; overflow: auto; }
  .os-desk .art { position: relative !important; left: auto !important; top: auto !important; width: 100%; justify-self: center; cursor: pointer; transform: none !important; }
  .os-desk .art > :first-child { width: 100% !important; max-width: 7.5rem; margin: 0 auto; }
  .os-desk .art .lab { position: static; justify-content: center; margin-top: .35rem; white-space: normal; text-align: center; flex-direction: column; gap: .1rem; }
  .art-file { width: 100%; }
  .strip-meta span:first-child { display: none; }
  .win, .win.max { left: 0 !important; top: var(--strip-h) !important; width: 100vw !important; height: calc(100vh - var(--dock-h) - var(--strip-h)) !important; height: calc(100dvh - var(--dock-h) - var(--strip-h)) !important; max-width: none; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
  .win-rs { display: none; }
  .win.rec { width: 100vw; }
  .dock { left: 0; right: 0; bottom: 0; transform: none; max-width: none; justify-content: flex-start; overflow-x: auto; gap: 0; padding: .3rem .4rem calc(.3rem + env(safe-area-inset-bottom, 0px)); border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; scrollbar-width: none; }
  .dock::-webkit-scrollbar { display: none; }
  .dk { width: 4rem; flex: 0 0 auto; min-height: 4rem; padding-bottom: .25rem; }
  .dk-i { width: 2.1rem; height: 2.1rem; } .dk svg { width: 19px; height: 19px; }
  .dock { scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 .9rem, #000 calc(100% - .9rem), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 .9rem, #000 calc(100% - .9rem), transparent 100%); }
  .dock.at-start { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - .9rem), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - .9rem), transparent 100%); }
  .dock.at-end { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 .9rem, #000 100%); mask-image: linear-gradient(to right, transparent 0, #000 .9rem, #000 100%); }
  .dock.at-start.at-end { -webkit-mask-image: none; mask-image: none; }
  .dk { scroll-snap-align: center; }
  .dk-l { font-size: .5rem; }
  .dk:hover { transform: none; }
  .dock-min { margin-left: 0; }
}
@media (max-height: 640px) and (min-width: 861px) { .bgwords span { font-size: clamp(3rem, 12vw, 9rem); } }
picture { display: contents; }

/* ======================= v7 · START CREATING: the separate path into the real system ======================= */
.start-creating { position: absolute; right: 1rem; bottom: calc(var(--dock-h) + .9rem); z-index: 58; display: inline-flex; align-items: center; gap: .7rem; min-height: 2.9rem; padding: 0 1.15rem 0 1.25rem; background: var(--ink-strong); color: #fff; border-radius: 999px; font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45); transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease); }
.start-creating .arrow { transition: transform 180ms var(--ease); }
.start-creating:hover, .start-creating:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .5); }
.start-creating:hover .arrow { transform: translateX(3px); }
.start-creating:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.portal[data-mode="system"] .start-creating { display: none; }
body.no-motion .start-creating, body.no-motion .start-creating .arrow { transition: none; }
body.no-motion .start-creating:hover { transform: none; }
@media (max-width: 860px) {
  .start-creating { left: 0; right: 0; bottom: var(--dock-h); border-radius: 0; justify-content: center; min-height: 2.8rem; box-shadow: none; border-top: 1px solid var(--cline-2); }
  .start-creating:hover, .start-creating:focus-visible { transform: none; }
  .os-desk { padding-bottom: 3rem; }
}
/* ======================= v7 · System onboarding state ======================= */
.sys-welcome { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(34rem, calc(100% - 2rem)); background: #fff; border: 1px solid var(--cline-2); border-radius: var(--r-window); padding: 2rem 2rem 1.6rem; display: grid; gap: .9rem; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .28); }
.sys-welcome .eyebrow { font-family: var(--mono); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--memento-grey); display: flex; align-items: center; gap: .6rem; }
.sys-welcome h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.1; margin: 0; }
.sys-welcome p { margin: 0; font-size: 1rem; color: var(--ink-readable); line-height: 1.5; }
.sys-welcome .actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; }
.sys-welcome .status { display: grid; gap: .25rem; margin-top: .4rem; padding-top: .8rem; border-top: 1px solid var(--cline); font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--memento-grey); }
.sys-welcome .status b { color: var(--ink-readable); font-weight: 500; }
.portal[data-mode="system"] .empty-desk-note, .portal[data-mode="system"] .sys-note { display: none; }
@media (max-width: 860px) { .sys-welcome { position: static; transform: none; width: auto; max-width: 100%; grid-column: 1 / -1; order: -1; margin: .25rem 0 .75rem; padding: 1.3rem 1.1rem; } .sys-welcome h2 { font-size: 1.5rem; } }

/* ======================= v7 · guided tutorial ======================= */
.tour { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.tour-shade { position: fixed; background: rgba(21, 21, 21, .28); pointer-events: none; transition: all 220ms var(--ease); }
.tour-ring { position: fixed; border: 2px solid var(--ink-strong); border-radius: 12px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .85); pointer-events: none; transition: all 220ms var(--ease); }
.tour-callout { position: fixed; z-index: 2; width: min(22rem, calc(100vw - 1rem)); background: #fff; color: var(--ink-strong); border: 1px solid var(--line-strong); border-radius: 14px; padding: .9rem 1rem 1rem; box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .35); pointer-events: auto; display: grid; gap: .45rem; outline: none; }
.tour-callout:focus-visible { box-shadow: 0 0 0 2px var(--ink), 0 18px 50px -20px rgba(0, 0, 0, .35); }
.tour-callout::before { content: ""; position: absolute; width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); transform: rotate(45deg); display: none; }
.tour-callout[data-arrow="up"]::before { display: block; top: -7px; left: calc(50% - 6px); }
.tour-callout[data-arrow="down"]::before { display: block; bottom: -7px; left: calc(50% - 6px); transform: rotate(225deg); }
.tour-callout[data-arrow="left"]::before { display: block; left: -7px; top: 28px; transform: rotate(-45deg); }
.tour-callout[data-arrow="right"]::before { display: block; right: -7px; top: 28px; transform: rotate(135deg); }
.tour-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.tour-progress { font-family: var(--mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--memento-grey); }
.tour-x { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; color: var(--ink-readable); margin: -.35rem -.5rem -.35rem 0; }
.tour-x:hover, .tour-x:focus-visible { background: var(--paper-soft); color: var(--ink); }
.tour-callout h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.005em; margin: 0; line-height: 1.2; }
.tour-callout p { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--ink-readable); }
.tour-callout .tour-note { font-size: .6875rem; color: var(--warning); }
.tour-actions { display: flex; gap: .4rem; align-items: center; margin-top: .3rem; flex-wrap: wrap; }
.tour-actions .btn { min-height: 2.4rem; padding: 0 .9rem; }
.tour-actions #tour-next { margin-left: auto; }
.tour-resume { position: fixed; left: 1rem; bottom: calc(var(--dock-h) + .9rem); z-index: 2; display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .5rem .45rem .9rem; background: #fff; border: 1px solid var(--line-strong); border-radius: 999px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35); font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-readable); pointer-events: auto; }
.tour-resume .btn { min-height: 2.1rem; padding: 0 .8rem; font-size: .625rem; }
.strip-help { width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid var(--cline-2); color: var(--ink-readable); font: inherit; font-weight: 500; display: grid; place-items: center; margin-left: .4rem; }
.strip-help:hover, .strip-help:focus-visible { background: var(--ink); color: #fff; border-color: var(--ink); }
.portal.touring .win.focused { z-index: 21; }
.tour-hi { z-index: 26; }
.tour-hi.start-creating { z-index: 61; }
body.no-motion .tour-shade, body.no-motion .tour-ring { transition: none; }
@media (max-width: 860px) {
  .tour-callout { left: 0 !important; right: 0; top: auto !important; bottom: calc(var(--dock-h) + 2.8rem + env(safe-area-inset-bottom, 0px)); width: 100%; border-radius: 16px 16px 0 0; padding-bottom: 1rem; box-shadow: 0 -12px 40px rgba(0, 0, 0, .2); max-height: 55vh; overflow: auto; }
  .portal[data-mode="system"] .tour-callout { bottom: var(--dock-h); }
  .tour-callout::before { display: none !important; }
  .tour-actions .btn { min-height: 2.75rem; }
  .tour-resume { left: .5rem; right: .5rem; bottom: calc(var(--dock-h) + 3.3rem + env(safe-area-inset-bottom, 0px)); justify-content: space-between; border-radius: 12px; }
  .strip-help { margin-left: auto; }
}
.intro[data-scene="0"] .list-toggle { opacity: 0; pointer-events: none; }
@media (max-width: 860px) {
  .sys-welcome { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
  .sys-welcome .actions .btn { white-space: normal; text-align: left; }
}
@media (max-width: 380px) { .strip-meta > span:first-child, #strip-version { display: none; } .strip { gap: .5rem; } }
/* tablets: the CTA lives in the command strip so it never covers a window's controls; desktop keeps it bottom-right */
@media (max-width: 1180px) and (min-width: 861px) {
  .start-creating { top: .3rem; right: .6rem; bottom: auto; min-height: 2rem; padding: 0 .9rem 0 1rem; font-size: .6875rem; z-index: 31; box-shadow: none; }
  .strip { padding-right: 11rem; }
  .strip-keys { display: none; }
}

/* ================= v8 · community: profile application, report dialog ================= */
.profile-app { min-height: 100%; }
.prof { gap: 1rem; }
.prof h2 { font-size: 1.125rem; font-weight: 600; }
.prof h3 { font-size: .8125rem; font-weight: 600; }
.prof-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: start; padding-bottom: .8rem; border-bottom: 1px solid var(--cline); }
.prof-head p { margin: .2rem 0 0; color: var(--ink-readable); }
.prof-head .avatar { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--cline-2); background: var(--paper-soft) center/cover no-repeat; display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 1.1rem; color: var(--ink-readable); }
.prof-actions { display: grid; gap: .4rem; justify-items: end; }
.st-row { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.tag.ok { color: #4b6b4f; } .tag.red { color: var(--signal); }
.prof-list { display: grid; gap: .3rem; }
.prof-row, .mem-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; text-align: left; padding: .55rem .6rem; background: var(--paper-soft); border: 1px solid transparent; border-radius: var(--r-chip); font: inherit; color: inherit; min-height: 44px; }
.prof-row:hover, .mem-row:hover, .prof-row:focus-visible, .mem-row:focus-visible { border-color: var(--ink); }
.prof-row b, .mem-row b { font-weight: 600; }
.prof-row .m, .mem-row .m { grid-column: 1; font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em; color: var(--ink-readable); }
.prof-row .r, .mem-row .r { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.mem-block { display: grid; gap: .3rem; margin: .7rem 0; }
.mem-block p.small { margin: 0 0 .2rem; }
.note-box { border: 1px solid var(--cline); border-left: 2px solid var(--ink); border-radius: var(--r-chip); padding: .7rem .8rem; display: grid; gap: .35rem; background: var(--paper-soft); }
.note-box b { font-weight: 600; } .note-box p { margin: 0; color: var(--ink-readable); }
.note-box ul.plain { margin: 0; padding-left: 1rem; color: var(--ink-readable); }
.rec-code { text-align: center; margin: .6rem 0; }
.rec-code code { font-family: var(--mono); font-size: 1.0625rem; letter-spacing: .12em; padding: .5rem .8rem; border: 1px dashed var(--cline-2); border-radius: var(--r-chip); display: inline-block; }
.frm { display: grid; gap: .7rem; }
.fld { display: grid; gap: .25rem; }
.fld > .k { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-readable); }
.fld input, .fld textarea, .fld select { font-family: var(--display); font-weight: 400; font-size: .8125rem; padding: .55em .65em; border: 1px solid var(--cline-2); border-radius: var(--r-chip); background: #fff; color: var(--ink); min-height: 44px; width: 100%; }
.fld textarea { min-height: 5.5rem; resize: vertical; line-height: 1.5; }
.fld input:focus-visible, .fld textarea:focus-visible, .fld select:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.fld .hint { font-size: .75rem; color: var(--ink-readable); }
.cnt { font-family: var(--mono); }
.cnt.low { color: var(--ink-readable); } .cnt.ok { color: #4b6b4f; } .cnt.ok::after { content: " ✓"; } .cnt.over { color: var(--signal); } .cnt.over::after { content: " — too long"; }
.form-err { color: var(--signal); font-size: .8125rem; margin: 0; }
.seg { display: flex; flex-wrap: wrap; gap: .3rem; }
.seg button { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; padding: .5em .8em; border: 1px solid var(--cline-2); border-radius: var(--r-control); background: #fff; color: var(--ink-readable); min-height: 40px; }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.consents { border: 1px solid var(--cline); border-radius: var(--r-chip); padding: .7rem .8rem; display: grid; gap: .5rem; }
.consents legend { padding: 0 .3rem; }
.chk { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: start; font-size: .8125rem; line-height: 1.45; }
.chk input { width: 1rem; height: 1rem; margin-top: .2rem; }
.app-sec { display: grid; gap: .6rem; }
.app-frm textarea { min-height: 7rem; }
.prof .body { white-space: pre-wrap; line-height: 1.55; }
.prof .fld input, .prof .fld select { max-width: 26rem; }
.prof .fld textarea { max-width: 42rem; }
.confirm { margin-top: .4rem; }
.dlg-wrap { position: fixed; inset: 0; background: rgba(21, 21, 21, .32); display: grid; place-items: center; z-index: 200; padding: 1rem; }
.dlg { background: #fff; border: 1px solid var(--cline-2); border-radius: var(--r-window); padding: 1.2rem; width: min(30rem, 100%); max-height: 88vh; overflow: auto; display: grid; gap: .8rem; font-size: .8125rem; box-shadow: 0 24px 60px rgba(21,21,21,.18); }
.dlg h2 { font-size: 1.0625rem; font-weight: 600; margin: 0; }
.dlg .btn { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; padding: .55em .9em; border: 1px solid var(--cline-2); border-radius: var(--r-control); background: #fff; color: var(--ink); min-height: 44px; }
.dlg .btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.send-box { display: grid; gap: .6rem; margin-bottom: 1rem; }
@media (max-width: 640px) { .prof-head { grid-template-columns: auto minmax(0, 1fr); } .prof-actions { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; } }

/* ================= v8 · moderation workspace ================= */
.mod-page { max-width: 62rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; display: grid; gap: 1.2rem; }
.mod-top h1 { font-family: var(--display); font-stretch: 80%; font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.4rem); text-transform: uppercase; letter-spacing: -.01em; margin: .3rem 0 .4rem; }
.mod-who { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .6rem 0; font-size: .8125rem; }
.mod-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.mod-tabs button { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; padding: .6em 1em; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: #fff; color: var(--ink-2); min-height: 44px; }
.mod-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.mod-tabs .n { font-size: .625rem; opacity: .8; }
.mod-body { display: grid; gap: 1rem; font-size: .875rem; }
.mod-body .empty { color: var(--ink-2); padding: 2rem 0; border-top: 1px solid var(--line); }
.case { border: 1px solid var(--line); border-radius: var(--r-window); padding: 1rem 1.1rem; display: grid; gap: .7rem; background: #fff; }
.case header h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.case .ans { border-left: 2px solid var(--line); padding-left: .8rem; }
.case .ans h3 { margin: 0 0 .2rem; }
.case .ans p, .case .body { margin: 0; white-space: pre-wrap; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.case p, .case .small { max-width: 62ch; }
.mod-top .sub { max-width: 52ch; }
.mod-foot .small { max-width: 78ch; }
.side-by-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.mod-media { max-width: 100%; max-height: 16rem; border: 1px solid var(--line); border-radius: var(--r-chip); }
.dec { display: grid; gap: .6rem; border-top: 1px solid var(--line); padding-top: .7rem; }
.audit { width: 100%; border-collapse: collapse; font-size: .75rem; }
.audit th, .audit td { text-align: left; border-bottom: 1px solid var(--line); padding: .4rem .5rem; vertical-align: top; }
.mod-foot { border-top: 1px solid var(--line); padding-top: .8rem; }

/* ================= v8 · policy drafts ================= */
.policy-page { max-width: 44rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; display: grid; gap: 1.6rem; }
.policy-top h1 { font-family: var(--display); font-stretch: 80%; font-weight: 600; font-size: clamp(1.7rem, 5vw, 2.6rem); text-transform: uppercase; letter-spacing: -.01em; margin: .4rem 0 .5rem; }
.policy-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.policy-nav a { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; padding: .5em .8em; border: 1px solid var(--line-strong); border-radius: var(--r-control); color: var(--ink-2); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.policy-nav a:hover { border-color: var(--ink); color: var(--ink); }
.policy { display: grid; gap: .6rem; border-top: 1px solid var(--line); padding-top: 1.2rem; scroll-margin-top: 1rem; }
.policy h2 { font-family: var(--display); font-stretch: 82%; font-weight: 600; font-size: 1.3rem; text-transform: uppercase; margin: 0; }
.policy h3 { font-size: .9375rem; font-weight: 600; margin: .6rem 0 0; }
.policy p { margin: 0; line-height: 1.6; color: var(--ink-2); max-width: 40rem; }
.policy-foot { border-top: 1px solid var(--line); padding-top: .8rem; }