/* Tech in the Box design source of truth.
   Edit tokens first. Shared components belong here; page markup contains no styles.
   Unboxing is approved. The final section owns new component design;
   preceding Phase-0/alternative study rules are historical previews. */
@layer tokens, base, layout, components, utilities;

@layer utilities {
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* Afterlight's contained arcade palette. The surrounding shell retains Unboxing. */
@layer tokens {
  :root {
    --game-void: #080f16; --game-floor: #101c25; --game-wall: #273b44;
    --game-edge: #39515a; --game-shine: #9bb9b5; --game-gold: #ffd17c;
    --game-cyan: #72eadb; --game-danger: #ff7c83; --game-violet: #bba0f4;
    --game-ink: #e8efe9; --game-muted: #9cafaf; --game-shade: #04090eee;
    --game-white: #ffffff; --game-moss: #89bf9a; --game-heart: #ff9ab4;
    --game-district-0: #89bf9a; --game-district-1: #eeb277; --game-district-2: #72eadb;
    --game-district-3: #e6a2bc; --game-district-4: #ff7c83; --game-district-5: #ffd17c;
    --game-district-6: #bba0f4; --game-district-7: #8fbbef; --game-district-8: #e4a3e7; --game-district-9: #fff0b9;
  }
  [data-afterlight][data-level="2"] { --game-wall: #48392e; --game-edge: #655348; --game-floor: #211d1b; }
  [data-afterlight][data-level="3"] { --game-wall: #254247; --game-edge: #3b6469; --game-floor: #101f29; }
  [data-afterlight][data-level="4"] { --game-wall: #43344d; --game-edge: #635270; --game-floor: #201827; }
  [data-afterlight][data-level="5"] { --game-wall: #462f37; --game-edge: #684551; --game-floor: #211820; }
  [data-afterlight][data-level="6"] { --game-wall: #494334; --game-edge: #696249; --game-floor: #222019; }
  [data-afterlight][data-level="7"] { --game-wall: #39334f; --game-edge: #5c507c; --game-floor: #1c1929; }
  [data-afterlight][data-level="8"] { --game-wall: #2d3d55; --game-edge: #455c7b; --game-floor: #141e2c; }
  [data-afterlight][data-level="9"] { --game-wall: #492f4a; --game-edge: #6d496b; --game-floor: #231725; }
  [data-afterlight][data-level="10"] { --game-wall: #454234; --game-edge: #68644f; --game-floor: #1e211f; }
}
@layer components {
  .afterlight-page { padding-block: var(--space-6) var(--space-8); }
  .afterlight-intro { display: flex; justify-content: space-between; align-items: end; gap: var(--space-5); margin-bottom: var(--space-6); }
  .afterlight-intro > * { min-width: 0; }
  .afterlight-intro .ui-link { font-size: var(--text-small); }
  .afterlight-intro .ui-overline { margin-top: var(--space-6); }
  .afterlight-intro h1 { font: 600 clamp(2.5rem,6.6vw,6rem)/1.1 var(--font-display); letter-spacing: -.075em; margin-top: var(--space-3); white-space: nowrap; }
  .afterlight-intro h1 > span:first-child { color: var(--accent); }
  .afterlight-intro .afterlight-title-dot { display: inline-block; font-size: .25em; vertical-align: top; margin: .35em 0 0 .5em; color: var(--accent); }
  .afterlight-intro > :last-child { max-width: 24rem; padding-bottom: .25rem; }
  .afterlight-intro > :last-child > p:last-child { color: var(--muted); font-size: .92rem; margin-top: var(--space-3); line-height: 1.7; }
  .afterlight-deck { font: 500 1.5rem/1.15 var(--font-display); letter-spacing: -.025em; }
  .afterlight-deck em { font-family: var(--font-editorial); font-weight: 400; }
  .afterlight-game { --surface: var(--game-floor); --surface-raised: var(--game-wall); --ink: var(--game-ink); --muted: var(--game-muted); --line: var(--game-edge); --accent: var(--game-gold); --accent-contrast: var(--game-void); --accent-soft: var(--game-wall); color-scheme: dark; color: var(--game-ink); background: var(--game-void); border: 1px solid var(--game-edge); border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 1.8rem 4rem color-mix(in srgb,var(--game-void) 15%,transparent); }
  .afterlight-game :is(button,select,input):focus-visible { outline: 2px solid var(--game-cyan); outline-offset: 3px; }
  .afterlight-toolbar { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1.4rem; gap: 1rem; border-bottom: 1px solid var(--game-edge); }
  .afterlight-live { display: flex; align-items: center; gap: .6rem; font: .67rem var(--font-label); letter-spacing: .1em; }
  .afterlight-live > span:first-child { width: .4rem; height: .4rem; border-radius: 50%; background: var(--game-cyan); box-shadow: 0 0 10px var(--game-cyan); }
  .afterlight-edition { color: var(--game-muted); border-left: 1px solid var(--game-edge); padding-left: .7rem; margin-left: .3rem; }
  .afterlight-options { display: flex; gap: .5rem; flex-wrap: wrap; }
  .afterlight-game .afterlight-small-button { font-size: .7rem; min-height: 2.75rem; padding: .4rem .7rem; border-color: var(--game-edge); color: var(--game-ink); background: var(--game-floor); gap: .4rem; }
  .afterlight-layout { display: grid; grid-template-columns: minmax(0,1fr) 15rem; }
  .afterlight-layout > * { min-width: 0; }
  .afterlight-field { padding: .7rem; border-right: 1px solid var(--game-edge); }
  .afterlight-field-heading { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .5rem .5rem 1rem; font: .63rem/1.5 var(--font-label); color: var(--game-muted); }
  .afterlight-field-heading b { color: var(--game-gold); font-size: .9rem; }
  .afterlight-field-heading [data-level-name] { margin-left: .5rem; color: var(--game-ink); }
  .afterlight-field-heading > :last-child { color: var(--game-cyan); font-size: .57rem; letter-spacing: .05em; text-align: right; }
  .afterlight-viewport { position: relative; isolation: isolate; background: var(--game-floor); }
  .afterlight-viewport canvas { display: block; width: 100%; aspect-ratio: 25 / 19; height: auto; touch-action: pan-y pinch-zoom; }
  .afterlight-game[data-state="playing"] canvas { touch-action: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
  .afterlight-touch-intro, .afterlight-touch-help { display: none; }
  .afterlight-viewport canvas:focus-visible { outline: 2px solid var(--game-gold); outline-offset: -3px; }
  .afterlight-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: color-mix(in srgb,var(--game-void) 40%,transparent); overflow-y: auto; }
  .afterlight-brief { width: min(100%,28rem); text-align: center; padding: clamp(1rem,3vw,2.3rem); border: 1px solid var(--game-edge); background: color-mix(in srgb,var(--game-void) 94%,transparent); box-shadow: 0 1rem 4rem var(--game-shade); border-radius: .8rem; }
  .afterlight-eyebrow { color: var(--game-muted); font: .64rem/1.6 var(--font-label); letter-spacing: .13em; text-transform: uppercase; }
  .afterlight-brief h2 { font: 500 clamp(1.5rem,3vw,2.65rem)/1.08 var(--font-display); letter-spacing: -.05em; margin: 1rem 0; color: var(--game-ink); }
  .afterlight-brief > p:not(.afterlight-eyebrow) { font-size: .87rem; line-height: 1.6; color: var(--game-muted); }
  .afterlight-brief .afterlight-unlock { color: var(--game-cyan); margin: 1rem 0; font-size: .75rem; }
  .afterlight-game .afterlight-start { width: 100%; background: var(--game-gold); color: var(--game-void); border-color: var(--game-gold); justify-content: space-between; font-size: .87rem; }
  .afterlight-start:hover { filter: brightness(1.08); }
  .afterlight-sound-choice { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; color: var(--game-muted); font-size: .73rem; cursor: pointer; }
  .afterlight-sound-choice input { accent-color: var(--game-gold); }
  .afterlight-brief .afterlight-brief-foot { font-size: .64rem; margin-top: .5rem; }
  .afterlight-underboard { display: flex; justify-content: space-between; gap: .5rem; padding: 1rem .5rem .4rem; font: .63rem/1.5 var(--font-label); color: var(--game-muted); }
  .afterlight-underboard > span { display: flex; align-items: center; gap: .45rem; }
  .afterlight-key { display: inline-block; width: .4rem; height: .4rem; flex-shrink: 0; transform: rotate(45deg); background: var(--game-gold); }
  .afterlight-key--core { width: .65rem; height: .65rem; border: 1px solid var(--game-cyan); background: transparent; border-radius: 50%; box-shadow: 0 0 7px color-mix(in srgb,var(--game-cyan) 25%,transparent); }
  .afterlight-key--exit { width: .55rem; height: .55rem; border: 1px solid var(--game-muted); background: transparent; }
  .afterlight-console { padding: 1.5rem 1.25rem; display: grid; align-content: start; gap: 1.3rem; background: color-mix(in srgb,var(--game-floor) 60%,var(--game-void)); }
  .afterlight-score > strong { display: block; font: 500 clamp(1.8rem,2.8vw,2.8rem)/1.35 var(--font-display); letter-spacing: -.04em; color: var(--game-gold); font-variant-numeric: tabular-nums; }
  .afterlight-score > p:last-child { font: .64rem/1.5 var(--font-label); color: var(--game-muted); }
  .afterlight-score > p:last-child > span { margin-left: .5rem; color: var(--game-ink); }
  .afterlight-stats { display: grid; gap: .75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--game-edge); font: .68rem/1.4 var(--font-label); }
  .afterlight-stats > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
  .afterlight-stats span { color: var(--game-muted); }
  .afterlight-stats strong { font-weight: 500; }
  .afterlight-stats [data-hearts] { color: var(--game-danger); letter-spacing: .1em; }
  .afterlight-stats [data-power] { font-size: .58rem; color: var(--game-cyan); }
  .afterlight-battery > div { display: flex; justify-content: space-between; gap: .25rem; font: .65rem/1.5 var(--font-label); }
  .afterlight-battery > div > span { color: var(--game-cyan); font-size: .59rem; }
  .afterlight-battery progress { display: block; width: 100%; height: .35rem; border: 0; border-radius: 0; margin-top: .65rem; background: var(--game-edge); accent-color: var(--game-cyan); }
  .afterlight-battery progress::-webkit-progress-bar { background: var(--game-edge); }
  .afterlight-battery progress::-webkit-progress-value { background: var(--game-cyan); }
  .afterlight-battery progress::-moz-progress-bar { background: var(--game-cyan); }
  .afterlight-battery p { margin-top: .6rem; font-size: .68rem; line-height: 1.6; color: var(--game-muted); }
  .afterlight-intel { padding: 1rem; border: 1px solid var(--game-edge); border-radius: .5rem; }
  .afterlight-enemy-heading { display: flex; align-items: center; gap: .7rem; margin-block: .75rem .5rem; }
  .afterlight-enemy-heading h3 { font: 500 1rem var(--font-display); color: var(--game-ink); }
  .afterlight-sentry-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--game-danger); color: var(--game-danger); font-size: 1.5rem; border-radius: .4rem; }
  .afterlight-intel > p:last-child { font-size: .7rem; line-height: 1.6; color: var(--game-muted); }
  .afterlight-route-dots { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(10,1fr); gap: 3px; margin: .7rem 0; }
  .afterlight-route-dots li { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; font: .5rem var(--font-label); border: 1px solid var(--game-edge); color: var(--game-muted); }
  .afterlight-route-dots li[data-reached="true"] { color: var(--game-gold); border-color: var(--game-gold); }
  .afterlight-route-dots li[aria-current="step"] { color: var(--game-void); background: var(--game-gold); }
  .afterlight-route .ui-input { width: 100%; min-width: 0; font-size: 1rem; color: var(--game-ink); background: var(--game-floor); border-color: var(--game-edge); padding: .5rem; }
  .afterlight-route > p { font-size: .6rem; line-height: 1.65; color: var(--game-muted); margin-top: .6rem; }
  .afterlight-controls { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.5rem; border-top: 1px solid var(--game-edge); gap: 1.5rem; }
  .afterlight-dpad { display: grid; grid-template-columns: repeat(3,44px); grid-template-rows: repeat(3,44px); flex: 0 0 auto; gap: 3px; align-items: center; justify-items: center; }
  .afterlight-dpad > button { width: 44px; height: 44px; font-size: 1.3rem; color: var(--game-ink); background: var(--game-floor); border: 1px solid var(--game-edge); border-radius: .35rem; cursor: pointer; touch-action: manipulation; }
  .afterlight-dpad > :first-child { grid-column: 2; }
  .afterlight-dpad > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .afterlight-dpad > :nth-child(3) { grid-column: 2; grid-row: 2; font: .5rem var(--font-label); letter-spacing: .05em; color: var(--game-muted); }
  .afterlight-dpad > :nth-child(4) { grid-column: 3; grid-row: 2; }
  .afterlight-dpad > :last-child { grid-column: 2; grid-row: 3; }
  .afterlight-abilities { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .5rem; flex: 1; max-width: 35rem; }
  .afterlight-abilities button { min-height: 5.5rem; border: 1px solid var(--game-edge); background: var(--game-floor); color: var(--game-ink); display: grid; align-content: center; justify-items: center; gap: .3rem; border-radius: .5rem; cursor: pointer; padding: .5rem; touch-action: none; user-select: none; }
  .afterlight-abilities button:disabled { opacity: .45; cursor: default; }
  .afterlight-abilities button[data-ready="true"] { border-color: color-mix(in srgb,var(--game-cyan) 50%,var(--game-edge)); }
  .afterlight-abilities button[data-active="true"], .afterlight-abilities button:not(:disabled):active, .afterlight-dpad button:active { background: var(--game-wall); border-color: var(--game-cyan); }
  .afterlight-abilities kbd { color: var(--game-muted); font: .58rem var(--font-label); }
  .afterlight-abilities span { font: 500 .8rem var(--font-display); }
  .afterlight-abilities small { color: var(--game-cyan); font: .6rem var(--font-label); }
  .afterlight-control-note { font: .66rem/1.9 var(--font-label); color: var(--game-muted); }
  .afterlight-controls kbd { font-family: var(--font-label); }
  .afterlight-notes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); margin-top: var(--space-7); padding-top: var(--space-7); border-top: 1px solid var(--line); }
  .afterlight-notes > * { min-width: 0; }
  .afterlight-notes h2 { font: 500 clamp(2rem,3.4vw,3rem)/1.1 var(--font-display); letter-spacing: -.045em; margin: 1rem 0 1.5rem; }
  .afterlight-notes h2 em { font-family: var(--font-editorial); font-weight: 400; }
  .afterlight-notes p:not(.ui-overline) { color: var(--muted); line-height: 1.8; font-size: .95rem; margin-bottom: 1rem; }
  .afterlight-guide h3 { font: 500 1.3rem var(--font-display); margin-bottom: 1.2rem; }
  .afterlight-field-guide { padding-left: 1.3rem; }
  .afterlight-field-guide li { margin-block: 1.5rem; }
  .afterlight-field-guide h4 { margin-bottom: .5rem; }
  .afterlight-poster { position: relative; gap: 1.3rem; background: var(--game-void); color: var(--game-gold); }
  .afterlight-poster > strong { font: 500 clamp(2rem,4vw,3.5rem) var(--font-display); letter-spacing: -.06em; z-index: 1; }
  .afterlight-poster-grid { position: relative; width: 17rem; height: 12rem; background: repeating-linear-gradient(0deg,transparent 0 38px,var(--game-edge) 39px 40px),repeating-linear-gradient(90deg,transparent 0 38px,var(--game-edge) 39px 40px); border: 1px solid var(--game-edge); transform: perspective(600px) rotateX(22deg) rotateZ(-12deg); }
  .afterlight-poster-pip { position: absolute; left: 6rem; top: 3rem; width: 4.2rem; height: 4.5rem; border-radius: 1.2rem 1.2rem .7rem .7rem; background: var(--game-gold); box-shadow: 0 10px 0 var(--game-wall),0 0 60px color-mix(in srgb,var(--game-gold) 25%,transparent); border-top: .3rem solid var(--game-white); }
  .afterlight-poster-pip::before { content: ""; position: absolute; left: .4rem; right: .4rem; top: .8rem; height: 1.5rem; border-radius: .4rem; background: var(--game-void); }
  .afterlight-poster-pip::after { content: ""; position: absolute; width: .5rem; height: .4rem; left: 1rem; top: 1.3rem; background: var(--game-cyan); box-shadow: 1.5rem 0 var(--game-cyan); }
  .afterlight-poster-pip i { position: absolute; width: .2rem; height: 1rem; top: -1.1rem; background: var(--game-gold); }
  .afterlight-poster-spark { position: absolute; left: 2rem; top: 1rem; font-size: 2rem; color: var(--game-cyan); text-shadow: 7rem 6rem var(--game-gold),11rem 0 var(--game-gold); }
  .afterlight-game:fullscreen { width: 100%; height: 100%; overflow-y: auto; border-radius: 0; }
  .afterlight-game:fullscreen .afterlight-layout { max-width: 76rem; margin-inline: auto; }
  .afterlight-game:fullscreen .afterlight-controls { justify-content: center; }
  @media (max-width: 68rem) {
    .afterlight-layout { grid-template-columns: minmax(0,1fr) 12.5rem; }
    .afterlight-console { padding: 1rem; gap: 1rem; }
    .afterlight-intel { padding: .75rem; }
    .afterlight-control-note, .afterlight-edition { display: none; }
  }
  @media (max-width: 50rem) {
    .afterlight-intro { align-items: start; flex-direction: column; gap: 1.2rem; }
    .afterlight-intro h1 { font-size: clamp(2.6rem,10.5vw,5rem); }
    .afterlight-intro .ui-overline { margin-top: 1.7rem; }
    .afterlight-intro > :last-child { max-width: none; }
    .afterlight-deck { display: none; }
    .afterlight-intro > :last-child > p:last-child { margin: 0; }
    .afterlight-game { display: flex; flex-direction: column; }
    .afterlight-layout { display: contents; }
    .afterlight-field { order: 1; }
    .afterlight-controls { order: 2; }
    .afterlight-console { order: 3; }
    .afterlight-field { border-right: 0; padding: .35rem; }
    .afterlight-console { grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; border-top: 1px solid var(--game-edge); }
    .afterlight-stats { border: 0; padding: 0; }
    .afterlight-battery { grid-column: 1 / -1; }
    .afterlight-intel { display: none; }
    .afterlight-route { grid-column: 1 / -1; }
    .afterlight-route-dots, .afterlight-route > p { display: none; }
    .afterlight-route { display: flex; gap: 1rem; align-items: center; }
    .afterlight-route .ui-input { max-width: 65%; }
    .afterlight-controls { padding: .8rem; gap: .75rem; }
    .afterlight-abilities { gap: .3rem; }
    .afterlight-abilities button { padding: .35rem; }
    .afterlight-notes { grid-template-columns: 1fr; gap: 1.5rem; }
  }
  @media (max-width: 35rem) {
    .afterlight-page { width: min(100% - 1rem,var(--content-max)); padding-top: 1.5rem; }
    .afterlight-intro { padding-inline: .6rem; margin-bottom: 1.5rem; }
    .afterlight-toolbar { padding: .45rem .65rem; gap: .4rem; }
    .afterlight-options { gap: .3rem; }
    .afterlight-live { font-size: .59rem; }
    .afterlight-game .afterlight-small-button { padding: .4rem .5rem; font-size: .63rem; }
    .afterlight-field-heading { padding-block: .4rem .6rem; font-size: .56rem; }
    .afterlight-field-heading > :last-child { max-width: 6rem; font-size: .48rem; }
    .afterlight-overlay { padding: .5rem; }
    .afterlight-game:not([data-state="playing"]) .afterlight-viewport { min-height: 22rem; }
    .afterlight-brief { padding: .8rem; }
    .afterlight-brief h2 { font-size: 1.55rem; margin: .45rem 0; }
    .afterlight-brief .afterlight-eyebrow { font-size: .52rem; }
    .afterlight-brief > p:not(.afterlight-eyebrow) { font-size: .71rem; line-height: 1.45; }
    .afterlight-brief .afterlight-unlock { margin: .5rem 0; font-size: .64rem; }
    .afterlight-brief .afterlight-brief-foot { display: none; }
    .afterlight-game .afterlight-start { font-size: .75rem; min-height: 44px; padding: .6rem .8rem; }
    .afterlight-sound-choice { font-size: .65rem; }
    .afterlight-underboard { font-size: .53rem; padding: .65rem .3rem; gap: .25rem; }
    .afterlight-underboard > span { gap: .3rem; }
    .afterlight-controls { align-items: center; gap: .6rem; }
    .afterlight-abilities { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .afterlight-abilities button { min-height: 3.5rem; gap: .15rem; }
    .afterlight-abilities kbd { display: none; }
    .afterlight-abilities span { font-size: .72rem; }
    .afterlight-abilities small { font-size: .54rem; }
    .afterlight-console { padding: .8rem 1rem; gap: .7rem 1rem; }
    .afterlight-score > strong { font-size: 1.8rem; }
    .afterlight-stats { gap: .5rem; font-size: .63rem; }
    .afterlight-battery p { display: none; }
    .afterlight-notes { padding-inline: .8rem; }
  }
  @media (pointer: coarse) {
    .afterlight-touch-intro { display: block; margin-bottom: .6rem; }
    .afterlight-touch-help { display: flex; }
    .afterlight-options { flex-wrap: nowrap; }
    .afterlight-live { letter-spacing: 0; }
    .afterlight-live > span:first-child { display: none; }
    .afterlight-abilities kbd { display: none; }
  }
  .afterlight-touch-help { order: 4; flex-wrap: wrap; justify-content: center; gap: .4rem 1rem; padding: .6rem; border-top: 1px solid var(--game-edge); color: var(--game-muted); font: .64rem/1.5 var(--font-label); text-align: center; }
  .afterlight-touch-help strong { display: block; color: var(--game-cyan); font-weight: 500; }
  html.afterlight-play-open, .afterlight-play-open body { overflow: hidden; overscroll-behavior: none; }
  .afterlight-play-dialog { inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--game-void); color: var(--game-ink); overflow: hidden; overscroll-behavior: none; }
  .afterlight-play-dialog::backdrop { background: var(--game-void); }
  .afterlight-game[data-focus="true"] { height: 100%; width: 100%; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto auto auto; border: 0; border-radius: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .afterlight-game[data-focus="true"] .afterlight-layout { display: contents; }
  .afterlight-game[data-focus="true"] .afterlight-toolbar { grid-row: 1; padding: .35rem .6rem; gap: .3rem; }
  .afterlight-game[data-focus="true"] .afterlight-edition { display: none; }
  .afterlight-game[data-focus="true"] .afterlight-field { grid-row: 2; display: grid; grid-template-rows: auto minmax(0,1fr); min-height: 0; padding: .25rem; border: 0; }
  .afterlight-game[data-focus="true"] .afterlight-field-heading { padding: .2rem .3rem; }
  .afterlight-game[data-focus="true"] .afterlight-viewport { min-height: 0; overflow: hidden; }
  .afterlight-game[data-focus="true"] canvas { width: 100%; height: 100%; object-fit: contain; background: var(--game-void); }
  .afterlight-game[data-focus="true"] .afterlight-underboard, .afterlight-game[data-focus="true"] .afterlight-intel, .afterlight-game[data-focus="true"] .afterlight-route, .afterlight-game[data-focus="true"] .afterlight-control-note { display: none; }
  .afterlight-game[data-focus="true"] .afterlight-console { grid-row: 3; grid-template-columns: 1fr 2fr; gap: .3rem .8rem; padding: .5rem .7rem; border-top: 1px solid var(--game-edge); }
  .afterlight-game[data-focus="true"] .afterlight-score > strong { font-size: 1.35rem; }
  .afterlight-game[data-focus="true"] .afterlight-score > p:last-child, .afterlight-game[data-focus="true"] .afterlight-battery > p { display: none; }
  .afterlight-game[data-focus="true"] .afterlight-stats { padding: 0; border: 0; gap: .1rem; }
  .afterlight-game[data-focus="true"] .afterlight-battery { grid-column: 1 / -1; }
  .afterlight-game[data-focus="true"] .afterlight-battery progress { margin-top: .25rem; }
  .afterlight-game[data-focus="true"] .afterlight-controls { grid-row: 4; padding: .4rem .6rem; gap: .6rem; }
  .afterlight-game[data-focus="true"] .afterlight-dpad { display: none; }
  .afterlight-game[data-focus="true"] .afterlight-abilities { grid-template-columns: repeat(4,minmax(0,1fr)); max-width: none; }
  .afterlight-game[data-focus="true"] .afterlight-abilities button { min-height: 3.5rem; padding: .35rem; }
  .afterlight-game[data-focus="true"] .afterlight-abilities kbd { display: none; }
  .afterlight-game[data-focus="true"] .afterlight-touch-help { display: flex; grid-row: 5; padding: .35rem; gap: .25rem .8rem; }
  .afterlight-game[data-focus="true"] .afterlight-overlay { padding: .5rem; align-items: safe center; overscroll-behavior: contain; }
  .afterlight-game[data-focus="true"] .afterlight-brief { padding: .7rem; }
  .afterlight-game[data-focus="true"] .afterlight-brief h2 { font-size: 1.6rem; margin: .4rem 0; }
  .afterlight-game[data-focus="true"] .afterlight-brief > p { font-size: .75rem; line-height: 1.4; }
  .afterlight-game[data-focus="true"] .afterlight-brief .afterlight-unlock { margin: .5rem 0; }
  .afterlight-game[data-focus="true"] .afterlight-brief-foot, .afterlight-game[data-focus="true"] .afterlight-touch-intro { display: none; }
  /* Briefings get the full middle area; disabled controls need not crowd them. */
  .afterlight-game[data-focus="true"]:not([data-state="playing"]) .afterlight-controls,
  .afterlight-game[data-focus="true"]:not([data-state="playing"]) .afterlight-console { display: none; }
  @media (min-width: 38rem) and (max-height: 35rem) {
    .afterlight-game[data-focus="true"] { grid-template-columns: minmax(0,1fr) 12rem; grid-template-rows: auto minmax(0,1fr) auto auto; }
    .afterlight-game[data-focus="true"] .afterlight-toolbar { grid-column: 1 / -1; }
    .afterlight-game[data-focus="true"] .afterlight-field { grid-column: 1; grid-row: 2 / 5; }
    .afterlight-game[data-focus="true"] .afterlight-console { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; padding: .4rem; }
    .afterlight-game[data-focus="true"] .afterlight-score { display: none; }
    .afterlight-game[data-focus="true"] .afterlight-stats { font-size: .6rem; }
    .afterlight-game[data-focus="true"] .afterlight-controls { grid-column: 2; grid-row: 3; padding: .35rem; }
    .afterlight-game[data-focus="true"] .afterlight-abilities { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .afterlight-game[data-focus="true"] .afterlight-dpad { display: none; }
    .afterlight-game[data-focus="true"] .afterlight-touch-help { grid-column: 2; grid-row: 4; font-size: .59rem; }
    .afterlight-game[data-focus="true"]:not([data-state="playing"]) .afterlight-field { grid-column: 1 / -1; grid-row: 2 / 4; }
    .afterlight-game[data-focus="true"]:not([data-state="playing"]) .afterlight-touch-help { grid-column: 1 / -1; }
  }
}

/* PRISM 01 is an isolated Blender form study, not a new public design theme. */
@layer components {
  .tesseract-study { padding-block: var(--space-7); }
  .tesseract-intro { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: var(--space-6); margin-bottom: var(--space-6); }
  .tesseract-intro h1 { font: 600 var(--text-hero)/1.04 var(--font-display); letter-spacing: -.055em; margin-block: 1rem 0; }
  .tesseract-intro h1 em { font-style: normal; color: var(--accent); }
  .tesseract-stage {
    --tesseract-void: #050912;
    --tesseract-blue: #3484ff;
    --tesseract-violet: #9265ff;
    --tesseract-cyan: #49ddff;
    --tesseract-white: #baf3ff;
    --tesseract-ink: #deefff;
    --tesseract-muted: #9aadc6;
    position: relative; height: clamp(30rem,60vw,43rem); overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--radius-card);
    background: var(--tesseract-void); color: var(--tesseract-ink); isolation: isolate;
  }
  .tesseract-poster { width: 100%; height: 100%; object-fit: contain; }
  .tesseract-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y pinch-zoom; cursor: grab; }
  .tesseract-stage canvas:active { cursor: grabbing; }
  .tesseract-stage canvas:focus-visible { outline: 2px solid var(--tesseract-cyan); outline-offset: -6px; }
  .tesseract-stage[data-touch="rotate"] canvas { touch-action: none; }
  .tesseract-stamp { position: absolute; inset: 1.5rem 1.5rem auto; display: flex; justify-content: space-between; gap: 1rem; pointer-events: none; }
  .tesseract-stamp, .tesseract-stage-note, .tesseract-load > span { font: 600 .67rem/1.5 var(--font-label); letter-spacing: .14em; }
  .tesseract-stage-note { position: absolute; left: 1.5rem; bottom: 1.5rem; pointer-events: none; color: var(--tesseract-muted); }
  .tesseract-load { position: absolute; inset: auto 0 4rem; display: grid; justify-items: center; gap: .75rem; }
  .tesseract-load > span { color: var(--tesseract-ink); background: var(--tesseract-void); padding: .3rem .6rem; border-radius: var(--radius-small); }
  [data-tesseract][data-state="ready"] .tesseract-poster, [data-tesseract][data-state="ready"] .tesseract-load { display: none; }
  .tesseract-controls { margin-block: 1.5rem 2rem; padding: clamp(1rem,3vw,2rem); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); }
  .tesseract-settings { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 1.5rem; margin-block: 1.5rem; }
  .tesseract-settings > * { min-width: 0; }
  .tesseract-settings input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 2rem; }
  .tesseract-footer { display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 1.5rem; padding-block: 1rem; }
  .tesseract-footer > p { max-width: 38rem; }
  @media(max-width: 48rem) {
    .tesseract-intro { grid-template-columns: 1fr; gap: 1.5rem; }
    .tesseract-stage { height: 29rem; }
    .tesseract-settings { grid-template-columns: 1fr; gap: 1rem; }
    .tesseract-stamp { inset: 1rem 1rem auto; font-size: .6rem; }
    .tesseract-stage-note { left: 1rem; bottom: 1rem; font-size: .55rem; }
  }
}

@layer tokens {
  :root {
    --font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-display: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-label: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --text-small: .8125rem;
    --text-body: 1.0625rem;
    --text-lead: clamp(1.18rem, 1.7vw, 1.5rem);
    --text-heading: clamp(2rem, 3.7vw, 3.25rem);
    --text-hero: clamp(2.75rem, 5.4vw, 5rem);
    --content-max: 78rem;
    --reading-max: 43rem;
    --gutter: clamp(1.25rem, 4vw, 4rem);
    --space-1: .375rem;
    --space-2: .75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4rem;
    --space-8: clamp(4rem, 8vw, 7rem);
    --radius-small: .5rem;
    --radius-card: 1.25rem;
    --radius-pill: 100rem;
    --motion-fast: 180ms;
    --motion-slow: 800ms;
    --ease-out: cubic-bezier(.2, .7, .2, 1);
    --surface: #f7f7f2;
    --surface-raised: #ffffff;
    --surface-soft: #eeeFE8;
    --ink: #202923;
    --muted: #5c675e;
    --line: #d9dfd5;
    --accent: #235caf;
    --accent-contrast: #ffffff;
    --accent-soft: #e7edfa;
    --shadow-soft: 0 1.4rem 4rem #152e1c0d;
    --logo-surface: #172322;
    --logo-edge: #35453f;
    color-scheme: light;
  }

  /* No-JavaScript fallback respects the device. Explicit modes win below. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --surface: #101918;
      --surface-raised: #172220;
      --surface-soft: #14201e;
      --ink: #f2f4eb;
      --muted: #afbdb5;
      --line: #34453e;
      --accent: #9cbffc;
      --accent-contrast: #112235;
      --accent-soft: #22354b;
      --shadow-soft: 0 1.4rem 4rem #00000020;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --surface: #101918;
    --surface-raised: #172220;
    --surface-soft: #14201e;
    --ink: #f2f4eb;
    --muted: #afbdb5;
    --line: #34453e;
    --accent: #9cbffc;
    --accent-contrast: #112235;
    --accent-soft: #22354b;
    --shadow-soft: 0 1.4rem 4rem #00000020;
    color-scheme: dark;
  }
  :root[data-phase="sunrise"] {
    --accent: #a2491f;
    --accent-soft: #fae7d8;
  }
  :root[data-phase="dusk"] {
    --accent: #97414f;
    --accent-soft: #f8e5e9;
  }
  :root[data-phase="night"] {
    --accent: #5550a1;
    --accent-soft: #ebe9fa;
  }
  :root[data-theme="dark"][data-phase="sunrise"] {
    --accent: #f4b68a;
    --accent-soft: #39291f;
    --accent-contrast: #292016;
  }
  :root[data-theme="dark"][data-phase="dusk"] {
    --accent: #eeb0b5;
    --accent-soft: #39282d;
    --accent-contrast: #302029;
  }
  :root[data-theme="dark"][data-phase="night"] {
    --accent: #b8b3f3;
    --accent-soft: #2a2941;
    --accent-contrast: #221f3d;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
  body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--motion-slow), color var(--motion-slow);
  }
  h1, h2, h3, p, figure { margin: 0; }
  h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; text-wrap: balance; }
  h1 { font-size: var(--text-hero); letter-spacing: -.055em; font-weight: 650; }
  h2 { font-size: var(--text-heading); letter-spacing: -.045em; font-weight: 600; }
  h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); letter-spacing: -.035em; font-weight: 600; }
  p { color: var(--muted); }
  a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
  button, select { font: inherit; }
  button, select, a { -webkit-tap-highlight-color: transparent; }
  button, select { color: var(--ink); }
  img { display: block; max-width: 100%; height: auto; }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
  ::selection { background: var(--accent); color: var(--accent-contrast); }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0s; animation: none; }
  }
}

@layer layout {
  .container { width: min(100% - var(--gutter) * 2, var(--content-max)); margin-inline: auto; }
  .section { padding-block: var(--space-8); }
  .section-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--space-6); margin-bottom: var(--space-6); }
  .section-heading > p { max-width: 24rem; }
  .section-heading .eyebrow, .split-section .eyebrow { margin-bottom: var(--space-3); }
  .section-tinted { background: var(--surface-soft); border-block: 1px solid var(--line); }
  .hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-6); align-items: center; padding-block: clamp(4rem, 7vw, 7rem); min-height: 43rem; }
  .hero-copy > .eyebrow { margin-bottom: var(--space-5); }
  .hero-copy > .lead { max-width: 31rem; margin-top: var(--space-5); }
  .hero-copy > .actions { margin-top: var(--space-6); }
  .hero-note { font-size: var(--text-small); margin-top: var(--space-5); }
  .page-intro { padding-block: var(--space-8) var(--space-6); }
  .page-intro h1 { margin-block: var(--space-4) var(--space-5); }
  .page-intro .caption { margin-top: var(--space-5); max-width: var(--reading-max); }
  .split-section { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .product-grid, .people-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-4); }
  .preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .swatch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-5); }
  .actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
  .footer-main { display: grid; grid-template-columns: 1.2fr .8fr .8fr 1fr; gap: var(--space-5); }
  .footer-bottom { display: flex; justify-content: space-between; gap: var(--space-3); border-top: 1px solid var(--line); margin-top: var(--space-6); padding-top: var(--space-4); font-size: var(--text-small); color: var(--muted); }

  @media (max-width: 64rem) {
    .hero { gap: var(--space-5); min-height: auto; }
    .footer-main { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
    .product-grid, .people-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 48rem) {
    .hero, .split-section { grid-template-columns: 1fr; }
    .hero { padding-block: var(--space-6); gap: var(--space-6); }
    .hero-copy > .eyebrow { margin-bottom: var(--space-4); }
    .hero-copy > .actions { margin-top: var(--space-5); }
    .section-heading { display: block; }
    .section-heading > p { margin-top: var(--space-4); }
    .product-grid, .people-grid, .preview-grid { grid-template-columns: 1fr; }
    .swatch-grid { grid-template-columns: 1fr 1fr; }
    .footer-bottom { flex-direction: column; }
  }
  @media (max-width: 30rem) {
    .footer-main { grid-template-columns: 1fr; gap: var(--space-5); }
  }
}

@layer components {
  .site-header { border-bottom: 1px solid var(--line); background: var(--surface); }
  .header-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 5.5rem; position: relative; }
  .brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 750; letter-spacing: -.045em; font-size: 1.05rem; text-decoration: none; white-space: nowrap; color: var(--ink); }
  .brand-name > span, .brand-quiet { font-weight: 400; font-size: .8em; letter-spacing: -.02em; }
  .brand-icon { width: 1.35rem; height: 1.35rem; border: 2px solid var(--accent); border-radius: .2rem; box-shadow: inset .3rem -.3rem 0 var(--accent-soft); }
  .site-nav { display: flex; align-items: center; gap: var(--space-5); }
  .site-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .9375rem; text-decoration: none; color: var(--muted); }
  .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }
  .site-nav .nav-contact { color: var(--ink); gap: var(--space-2); }
  .menu-toggle { display: none; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-raised); padding: .5rem 1rem; min-height: 2.75rem; cursor: pointer; font-size: .875rem; }
  .menu-toggle span { padding-left: .5rem; }
  .skip-link { position: fixed; top: .5rem; left: 1rem; transform: translateY(-200%); padding: .6rem 1rem; background: var(--accent); color: var(--accent-contrast); z-index: 10; border-radius: var(--radius-small); }
  .skip-link:focus { transform: translateY(0); }
  .eyebrow { font-family: var(--font-label); font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .13em; line-height: 1.6; color: var(--muted); }
  .signal-dot { display: inline-block; width: .45rem; height: .45rem; background: var(--accent); border-radius: 50%; margin-right: .45rem; vertical-align: .05rem; }
  .lead { font-size: var(--text-lead); line-height: 1.6; }
  .caption { font-size: var(--text-small); }
  .text-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; color: var(--ink); font-weight: 600; font-size: .95rem; text-decoration: none; }
  .text-link:hover { color: var(--accent); text-decoration: underline; }
  .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); padding: .85rem 1.35rem; min-height: 3rem; border-radius: var(--radius-pill); text-decoration: none; font-weight: 600; font-size: .875rem; cursor: pointer; transition: transform var(--motion-fast) var(--ease-out), background-color var(--motion-fast); }
  .button:hover { transform: translateY(-2px); }
  .button-primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
  .button-quiet { background: transparent; }
  .button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
  .brand-stage { display: grid; justify-items: center; padding: var(--space-4); }
  .logo-square { width: min(100%, 23rem); aspect-ratio: 1; display: grid; place-items: center; background: var(--logo-surface); border: 1px solid var(--logo-edge); border-radius: var(--radius-card); padding: var(--space-5); box-shadow: var(--shadow-soft); }
  .logo-square img { width: 100%; }
  .brand-stage figcaption { display: flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--text-small); margin-top: var(--space-4); }
  .stage-line { width: 2rem; height: 1px; background: var(--line); }
  .product-card { padding: clamp(1.5rem, 3.2vw, 3rem); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-card); display: flex; flex-direction: column; align-items: start; box-shadow: var(--shadow-soft); }
  .product-card-primary { background: var(--accent-soft); }
  .card-meta { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; margin-bottom: var(--space-6); }
  .product-card h3 { font-size: clamp(1.9rem, 3.2vw, 2.65rem); }
  .product-card p { margin-block: var(--space-4) var(--space-5); max-width: 38rem; }
  .product-card .text-link { margin-top: auto; }
  .status-tag { display: inline-flex; font-size: .6875rem; line-height: 1.5; padding: .35rem .65rem; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--muted); white-space: nowrap; }
  .preview-card { border-top: 1px solid var(--line); padding-top: var(--space-5); }
  .preview-card h3 { margin-block: var(--space-4) var(--space-3); }
  .prose > * + * { margin-top: var(--space-4); }
  .prose .lead { color: var(--ink); }
  .person-card { border-top: 1px solid var(--line); padding-block: var(--space-5); }
  .person-initial { display: grid; place-items: center; width: 4rem; height: 4rem; font-size: 1.8rem; background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-card); margin-bottom: var(--space-4); }
  .person-card .eyebrow { margin-block: var(--space-2) var(--space-4); }
  .person-card > p:last-child { max-width: 32rem; }
  .site-footer { border-top: 1px solid var(--line); padding-block: var(--space-6) var(--space-5); }
  .footer-intro > p { font-size: .9rem; margin-top: var(--space-2); }
  .footer-heading { display: block; font-size: .8125rem; font-weight: 650; margin-bottom: var(--space-3); letter-spacing: 0; }
  .link-list { list-style: none; margin: 0; padding: 0; }
  .link-list a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--muted); font-size: .875rem; text-decoration: none; }
  .link-list a:hover { color: var(--accent); text-decoration: underline; }
  select { max-width: 100%; min-height: 2.75rem; width: 100%; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface-raised); padding: .5rem .6rem; font-size: .875rem; cursor: pointer; }
  .appearance-control .caption { margin-top: var(--space-2); }
  .preview-label { color: var(--muted); }
  .swatch { min-height: 9rem; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); display: flex; flex-direction: column; justify-content: end; }
  .swatch span { font-size: var(--text-small); }
  .swatch-base { background: var(--surface); }
  .swatch-raised { background: var(--surface-raised); }
  .swatch-soft { background: var(--surface-soft); }
  .swatch-accent { background: var(--accent); color: var(--accent-contrast); }
  .disclosure { border-block: 1px solid var(--line); margin-top: var(--space-6); padding-block: var(--space-4); }
  .disclosure summary { cursor: pointer; font-weight: 600; padding-block: var(--space-2); }
  .disclosure p { margin-top: var(--space-3); max-width: var(--reading-max); }

  @media (max-width: 48rem) {
    .header-inner { flex-wrap: wrap; min-height: 4.75rem; padding-block: var(--space-3); }
    .menu-toggle:not([hidden]) { display: inline-flex; align-items: center; }
    .site-nav { flex-basis: 100%; flex-wrap: wrap; gap: var(--space-3); }
    .site-nav.is-enhanced { display: none; }
    .site-nav.is-enhanced.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--space-2); }
    .site-nav.is-enhanced a { padding: .5rem var(--space-3); }
    .brand-stage { padding: var(--space-3); }
    .logo-square { width: min(100%, 18rem); }
    .card-meta { margin-bottom: var(--space-5); }
  }
}
@layer utilities {
  /* Hidden enhancement controls must stay hidden even when components use flex/grid. */
  [hidden] { display: none; }
  .reading-width { max-width: var(--reading-max); }
  .text-accent, .accent-dot { color: var(--accent); }
  /* Last layer also overrides transition shorthands in individual components. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0s; animation: none; }
  }
}

/* Phase 1: isolated design studies. All visual choices remain in this file. */
@font-face { font-family: "TITB Grotesk"; src: url("/fonts/space-grotesk-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "TITB Hanken"; src: url("/fonts/hanken-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

@layer tokens {
  body:where([data-study]:not([data-study=""])) {
    --font-body: "TITB Hanken", "Segoe UI", sans-serif;
    --font-display: "TITB Grotesk", "Segoe UI", sans-serif;
    --study-serif: Georgia, "Times New Roman", serif;
    --study-gutter: clamp(1.25rem, 5vw, 5.5rem);
    --study-rule: 1px solid var(--line);
    --study-max: 90rem;
    --study-accent: #a94b2d;
    --study-muted: #786f65;
    --study-paper: #f4f0e7;
    --study-ink: #292820;
    --study-panel: #e9e2d5;
    --study-border: #c8c1b3;
    --study-on-accent: #fff8ed;
    --study-glow: #be652626;
  }
  body[data-study="2"] {
    --font-display: "TITB Grotesk", sans-serif;
    --study-accent: #bfe599; --study-paper: #141b19; --study-ink: #e9efde;
    --study-panel: #1d2822; --study-muted: #a2afa3; --study-border: #465447; --study-on-accent: #1a2818; --study-glow: #bae09715;
  }
  body[data-study="3"] { --font-display: var(--study-serif); --study-accent: #a43831; --study-paper: #f5f0e7; --study-ink: #312824; --study-panel: #e9e0d2; --study-muted: #786d64; --study-border: #c9bfb1; --study-on-accent: #fff6e9; }
  body[data-study="4"] { --study-accent: #d0befd; --study-paper: #111522; --study-ink: #edeaf7; --study-panel: #1c2234; --study-muted: #aab2c9; --study-border: #414d68; --study-on-accent: #211a37; --study-glow: #8270d829; }
  body[data-study="1"][data-study-tone="dark"], body[data-study="3"][data-study-tone="dark"] {
    --study-paper: #211e1b; --study-ink: #f1eadd; --study-panel: #302a25; --study-muted: #bdb1a1; --study-border: #594a3c; --study-accent: #ecb38e; --study-on-accent: #302017;
  }
  body[data-study="2"][data-study-tone="light"] { --study-paper: #eef1e7; --study-ink: #1d3529; --study-panel: #e0e7d6; --study-muted: #556750; --study-border: #b6c6ab; --study-accent: #356533; --study-on-accent: #f6faef; }
  body[data-study="4"][data-study-tone="light"] { --study-paper: #eeeff7; --study-ink: #272d49; --study-panel: #dfe2f1; --study-muted: #5e6581; --study-border: #bcc3dd; --study-accent: #654a9e; --study-on-accent: #fbf6ff; --study-glow: #8170d815; }
  body[data-study][data-study-phase="sunrise"] { --study-accent: #a34e24; --study-on-accent: #fff8ef; }
  body[data-study][data-study-phase="dusk"] { --study-accent: #973d5c; --study-on-accent: #fff5f8; }
  body[data-study][data-study-phase="night"] { --study-accent: #60569c; --study-on-accent: #faf7ff; }
  body[data-study][data-study-tone="dark"][data-study-phase="sunrise"] { --study-accent: #f0b48a; --study-on-accent: #302016; }
  body[data-study][data-study-tone="dark"][data-study-phase="dusk"] { --study-accent: #f1b1c5; --study-on-accent: #351f2d; }
  body[data-study][data-study-tone="dark"][data-study-phase="night"] { --study-accent: #c7bbed; --study-on-accent: #29213e; }
  body[data-study]:not([data-study=""]) {
    --surface: var(--study-paper); --surface-raised: var(--study-panel); --surface-soft: var(--study-panel);
    --ink: var(--study-ink); --muted: var(--study-muted); --line: var(--study-border);
    --accent: var(--study-accent); --accent-contrast: var(--study-on-accent); --accent-soft: var(--study-panel);
    background: var(--surface); color: var(--ink);
  }
  body[data-study-tone="dark"] { color-scheme: dark; }
  body[data-study-tone="light"] { color-scheme: light; }
}

@layer components {
  body[data-study]:not([data-study=""]):not([data-study="gallery"]) > .site-header { display: none; }
  /* The study toolbar owns comparison lighting; avoid a second conflicting control. */
  body[data-study]:not([data-study=""]):not([data-study="gallery"]) .site-footer .appearance-control { display: none; }
  body[data-study]:not([data-study=""]) h1, body[data-study]:not([data-study=""]) h2 { font-weight: 500; }
  body[data-study]:not([data-study=""]) em { font-family: var(--study-serif); font-weight: 400; }
  .study-shell { max-width: var(--study-max); margin-inline: auto; padding-inline: var(--study-gutter); }
  .study-toolbar { display: flex; align-items: center; gap: 1.5rem; padding: .8rem clamp(1rem, 2vw, 2rem); background: var(--surface-raised); border-bottom: var(--study-rule); font-size: .75rem; position: relative; z-index: 5; }
  .study-toolbar a { text-decoration: none; }
  .study-home { white-space: nowrap; }
  .study-switcher { display: flex; gap: .4rem; flex: 1; }
  .study-switcher a { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .7rem; border: 1px solid transparent; border-radius: .2rem; min-height: 2.5rem; }
  .study-switcher a[aria-current="page"] { border-color: var(--line); background: var(--surface); }
  .study-switcher a:hover { background: var(--surface); }
  .study-switcher a > span:first-child { color: var(--accent); font-weight: 700; }
  .study-light-controls { display: flex; gap: .75rem; }
  .study-light-controls label { display: flex; gap: .4rem; align-items: center; color: var(--muted); }
  .study-light-controls select { font-size: .72rem; min-height: 2.3rem; width: auto; max-width: 8.5rem; background: var(--surface); }
  .concept-nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 2rem; }
  .concept-brand { font-family: "TITB Grotesk", sans-serif; font-size: 1.2rem; font-weight: 700; letter-spacing: -.06em; text-decoration: none; white-space: nowrap; }
  .concept-brand > span:not(.brand-period) { font-size: .75em; font-weight: 400; }
  .brand-period { font-size: .55em; vertical-align: top; margin-left: .3rem; }
  .concept-nav nav { display: flex; align-items: center; gap: 2rem; }
  .concept-nav nav a { font-size: .85rem; text-decoration: none; min-height: 2.75rem; display: inline-flex; align-items: center; }
  .concept-nav a:hover { color: var(--accent); }
  .study-link { display: inline-flex; align-items: center; gap: 1rem; border: 0; border-bottom: 1px solid var(--line); padding: .65rem 0; min-height: 2.75rem; font: inherit; font-size: .9rem; font-weight: 600; color: var(--ink); text-decoration: none; background: transparent; cursor: pointer; }
  .study-link:hover { color: var(--accent); border-color: var(--accent); }
  .study-control { border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .75rem; padding: .6rem .85rem; min-height: 2.75rem; border-radius: .3rem; cursor: pointer; }
  .study-control:hover { border-color: var(--accent); color: var(--accent); }
  .study-note { padding: 2rem 0; max-width: 46rem; }
  .study-reading { border-top: var(--study-rule); padding-block: 6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; }
  .reading-intro h2 { font-size: clamp(2.8rem,4.8vw,4.5rem); margin: 1.5rem 0; }
  .reading-intro > p { max-width: 27rem; }
  .reading-intro > .study-link { margin-top: 1.5rem; }
  .article-sample { max-width: 40rem; padding-top: .3rem; }
  .article-sample h3 { font-size: 1.9rem; margin-block: 1.5rem; line-height: 1.3; }
  .article-sample > p + p { margin-top: 1rem; }
  .article-sample details { border-top: var(--study-rule); margin-top: 1.5rem; padding-top: 1rem; }
  .article-sample summary { cursor: pointer; padding-block: .5rem; font-size: .9rem; }
  .article-sample details p { margin-top: 1rem; }
  .article-credit { font-size: .75rem; margin-top: 2rem; }
  .reading-room { padding: 0; width: min(56rem,calc(100% - 2rem)); max-height: 90dvh; color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
  .reading-room::backdrop { background: #10131bbd; }
  .reader-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 2rem; border-bottom: var(--study-rule); background: var(--surface); position: sticky; top: 0; }
  .reader-content { padding: clamp(1.5rem,6vw,5rem); }
  .reader-content h2 { font-size: clamp(2.8rem,6vw,4.5rem); margin-block: 1rem 2rem; }
  .reader-content p { margin-block: 1rem; }
  .reader-content h3 { margin-top: 2.5rem; }
  .reader-content blockquote { border-left: 2px solid var(--accent); padding-left: 1.5rem; margin: 2.5rem 0; font-family: var(--study-serif); font-size: 1.75rem; line-height: 1.3; }
  .reader-lead { font-size: 1.4rem; color: var(--ink); }
  .reader-open { overflow: hidden; }
  .design-argument { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; border-top: var(--study-rule); padding-block: 4rem 6rem; }
  .design-argument h2 { font-size: 2.5rem; margin-block: 1rem; }
  .argument-summary { max-width: 27rem; font-size: 1.2rem; }
  .design-argument h3 { font-family: var(--font-body); font-size: 1rem; margin-bottom: .75rem; }
  .design-argument p + h3 { margin-top: 2rem; }
  .design-argument .caption { margin-top: 2rem; }

  /* Comparison lobby: four large doors, each with its own visual grammar. */
  .lab-index { padding-block: 5rem; }
  .lab-index h1 { font-size: clamp(3.5rem,7vw,6.5rem); margin-block: 1.5rem 2rem; }
  .study-directory { margin-top: 4rem; display: grid; grid-template-columns: 1fr 1fr; border-top: var(--study-rule); border-left: var(--study-rule); }
  .study-door { padding: clamp(1.5rem,3vw,3rem); border-right: var(--study-rule); border-bottom: var(--study-rule); position: relative; text-decoration: none; transition: background-color .3s; min-width: 0; }
  .study-door:hover { background: var(--surface-raised); }
  .door-number { font-size: .8rem; color: var(--accent); }
  .door-preview { height: 15rem; display: grid; place-items: center; overflow: hidden; }
  .study-door h2 { font-size: clamp(1.6rem,2.5vw,2.5rem); margin-block: .5rem 1rem; display: flex; justify-content: space-between; gap: 1rem; }
  .study-door p:not(.eyebrow) { font-size: .95rem; max-width: 30rem; }
  .mini-cube { display: block; width: 8rem; height: 8rem; background: #303b32; color: #f3ede0; font-family: "TITB Grotesk",sans-serif; font-weight: 700; line-height: .9; font-size: 2rem; text-align: center; padding-top: .8rem; box-shadow: 1rem .7rem 0 #b1b9a5; transform: rotate(-10deg); transition: transform .5s; }
  .mini-cube small { font-size: .55rem; letter-spacing: .15em; }
  .study-door:hover .mini-cube { transform: rotate(2deg); }
  .mini-network { font-size: 3rem; color: #386d41; display: flex; align-items: center; gap: 1rem; }
  .mini-network span { padding: 1.5rem; font-size: 4rem; border: 1px solid #8d9e80; }
  .mini-editorial { display: flex; gap: 1.5rem; align-items: center; color: #9c4838; font-family: var(--study-serif); font-size: 6rem; font-style: italic; }
  .mini-editorial span { font-size: 1.2rem; line-height: 1.4; font-style: normal; }
  .mini-orbit { position: relative; display: grid; place-items: center; width: 13rem; height: 9rem; border: 1px solid #8a79af; border-radius: 50%; transform: rotate(-25deg); }
  .mini-orbit b { font-size: 4rem; color: #7d62ac; font-weight: 400; }
  .mini-orbit i { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #dca16c; position: absolute; top: 0; left: 2rem; }
  .lab-guidance { margin-top: 4rem; max-width: 46rem; }
  .lab-guidance h2 { font-size: 2rem; margin-bottom: 1rem; }
  .lab-guidance p + p { margin-top: 1rem; }

  /* 01 — The Unboxing: a physical object in an editorial space. */
  body[data-study="1"] .unbox-hero { display: grid; grid-template-columns: 1.5fr .65fr; column-gap: 4rem; }
  body[data-study="1"] .unbox-title { grid-column: 1 / -1; padding-top: 3rem; position: relative; z-index: 1; }
  body[data-study="1"] .unbox-title h1 { font-size: clamp(3.8rem,8vw,7rem); line-height: 1.02; margin-top: 1.2rem; letter-spacing: -.06em; }
  body[data-study="1"] .unbox-title em { color: var(--accent); }
  .unbox-stage { position: relative; min-width: 0; padding-block: 3rem 2rem; display: grid; justify-items: center; --cube-size: clamp(12rem,24vw,20rem); }
  .cube-viewport { width: 100%; height: 27rem; display: grid; place-items: center; perspective: 1200px; cursor: grab; touch-action: pan-y; }
  .cube-viewport:active { cursor: grabbing; }
  .concept-cube { width: var(--cube-size); height: var(--cube-size); position: relative; transform-style: preserve-3d; transition: transform 1800ms cubic-bezier(.22,.7,.2,1); }
  .cube-face { position: absolute; inset: 0; padding: 1.8rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .65rem; background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); backface-visibility: hidden; font-family: "TITB Grotesk",sans-serif; cursor: pointer; }
  .cube-face strong { font-size: clamp(2.3rem,5vw,4.5rem); line-height: .9; letter-spacing: -.08em; text-align: center; }
  .cube-face span { font-size: .9rem; }
  .cube-face small { font-family: var(--font-body); font-size: .65rem; letter-spacing: .05em; margin-block: .5rem; }
  .cube-front { transform: translateZ(calc(var(--cube-size) / 2)); background: var(--ink); color: var(--surface); }
  .cube-front strong { font-size: clamp(4rem,7.3vw,6.5rem); }
  .cube-front > span { font-family: var(--study-serif); font-style: italic; font-size: 1.25rem; }
  .cube-right { transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }
  .cube-back { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); background: var(--accent); color: var(--accent-contrast); }
  .cube-left { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
  .cube-top { transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); font-size: .8rem; letter-spacing: .2em; }
  .cube-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }
  .unbox-stage[data-intro="flat"] .concept-cube { transform: translateZ(calc(var(--cube-size) / -2)); }
  .unbox-stage[data-intro="open"][data-face="0"] .concept-cube { transform: translateZ(calc(var(--cube-size) / -2)) rotateX(-13deg) rotateY(-24deg); }
  .unbox-stage[data-intro="open"][data-face="1"] .concept-cube { transform: translateZ(calc(var(--cube-size) / -2)) rotateX(-13deg) rotateY(-114deg); }
  .unbox-stage[data-intro="open"][data-face="2"] .concept-cube { transform: translateZ(calc(var(--cube-size) / -2)) rotateX(-13deg) rotateY(-204deg); }
  .unbox-stage[data-intro="open"][data-face="3"] .concept-cube { transform: translateZ(calc(var(--cube-size) / -2)) rotateX(-13deg) rotateY(-294deg); }
  .cube-halo { position: absolute; inset: 2rem 0 4rem; background: radial-gradient(ellipse,var(--study-glow),transparent 65%); pointer-events: none; }
  .cube-controls { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; }
  .interaction-hint { font-size: .75rem; text-align: center; max-width: 27rem; margin-top: 1rem; }
  .unbox-caption { align-self: center; padding-block: 3rem; max-width: 22rem; }
  .chapter-number { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
  .unbox-caption h2 { font-size: 2.2rem; margin-block: 1.5rem; }
  .unbox-caption p { min-height: 8rem; }
  .unbox-caption .study-link { margin-top: 1rem; }
  .unbox-index { display: grid; grid-template-columns: repeat(3,1fr); border-block: var(--study-rule); padding-block: 1.5rem; gap: 2rem; margin-block: 1rem 5rem; }
  .unbox-index a { display: flex; flex-direction: column; gap: .5rem; font-size: 1.25rem; text-decoration: none; }
  .unbox-index a:hover { color: var(--accent); }
  .unbox-index span { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

  /* 02 — Connected Studio: a spatial, explorable explanation. */
  .system-intro { padding-top: 3rem; position: relative; }
  .system-intro h1 { font-size: clamp(3.7rem,7vw,6.5rem); margin-top: 1.5rem; line-height: 1.04; }
  .system-intro h1 em { font-family: "TITB Grotesk",sans-serif; font-style: normal; color: var(--accent); }
  .system-intro > p:last-child { position: absolute; bottom: .5rem; right: 0; max-width: 23rem; font-size: 1.1rem; }
  .system-experience { display: grid; grid-template-columns: 1.7fr .8fr; margin-block: 3rem 4rem; border-block: var(--study-rule); }
  .system-map { position: relative; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: 1fr .8fr 1fr; gap: 1.5rem; padding: 4rem 1.5rem; min-height: 34rem; background-image: radial-gradient(var(--line) .7px,transparent .7px); background-size: 19px 19px; }
  .system-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 7; opacity: .55; }
  .system-core { grid-column: 2; grid-row: 2; align-self: center; justify-self: center; display: grid; text-align: center; padding: 1rem 1.4rem; line-height: .9; font-family: "TITB Grotesk",sans-serif; font-size: 1.9rem; color: var(--accent); border: 1px solid var(--accent); background: var(--surface); transform: rotate(-6deg); }
  .system-core span { font-size: .7rem; padding: .4rem; }
  .system-node { min-width: 0; position: relative; align-self: center; display: grid; gap: .5rem; text-align: left; border: 1px solid var(--line); background: var(--surface); padding: 1rem; cursor: pointer; color: var(--ink); transition: border-color .2s,transform .2s; }
  .system-node > span { font-size: .7rem; color: var(--accent); }
  .system-node strong { font-size: .9rem; font-weight: 500; }
  .system-node small { color: var(--muted); font-size: .68rem; line-height: 1.4; }
  .system-node[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-raised); transform: translateY(-4px); box-shadow: 0 0 1.8rem var(--study-glow); }
  .node-direction { grid-column: 1; grid-row: 1; }.node-studio { grid-column: 2; grid-row: 1; }.node-agent { grid-column: 3; grid-row: 1; }.node-commerce { grid-column: 1; grid-row: 3; }.node-product { grid-column: 2; grid-row: 3; }.node-story { grid-column: 3; grid-row: 3; }
  .map-coordinate { position: absolute; font-size: .56rem; letter-spacing: .1em; color: var(--muted); }
  .map-coordinate-a { top: 1rem; left: 1.5rem; }.map-coordinate-b { bottom: 1rem; right: 1.5rem; }
  .system-inspector { border-left: var(--study-rule); padding: 2.5rem; align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-height: 30rem; }
  .system-inspector h2 { font-size: 1.85rem; line-height: 1.25; margin-block: 1.5rem; }
  .system-inspector > p:not(.eyebrow):not(.caption) { font-size: .95rem; }
  .system-inspector .system-output { margin-top: 1.5rem; color: var(--accent); font-size: .75rem; }
  .system-inspector .study-link { align-self: start; margin-top: 1rem; }
  .system-inspector .caption { margin-top: 2rem; font-size: .65rem; }
  .system-product-strip { margin-block: 3rem 5rem; }
  .system-product-strip a { display: flex; justify-content: space-between; align-items: center; padding-block: 1.5rem; border-bottom: var(--study-rule); text-decoration: none; font-size: 1.7rem; }
  .system-product-strip a span { font-size: .85rem; color: var(--accent); }

  /* 03 — Field Notes: publication-scale typography and a tactile story. */
  body[data-study="3"] .concept-brand { font-family: "TITB Hanken", sans-serif; }
  .editorial-edition { display: flex; justify-content: space-between; border-block: var(--study-rule); padding-block: .7rem; font-size: .68rem; margin-top: 1rem; text-transform: uppercase; letter-spacing: .07em; gap: 1rem; }
  .editorial-hero h1 { font-size: clamp(4.5rem,12vw,11.5rem); font-weight: 400; line-height: .91; letter-spacing: -.065em; padding-block: 3rem 2rem; }
  .editorial-hero h1 em { color: var(--accent); }
  .editorial-stop { color: var(--accent); }
  .editorial-deck { display: flex; justify-content: space-between; gap: 2rem; padding-block: 1rem 4rem; align-items: center; }
  .editorial-deck > p { font-size: 1.1rem; margin-left: 1rem; border-left: 1px solid var(--accent); padding-left: 1.5rem; }
  .editorial-disc { width: 7rem; height: 7rem; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; line-height: 1.3; background: var(--accent); color: var(--accent-contrast); text-decoration: none; font-size: .8rem; transition: transform .4s; }
  .editorial-disc:hover { transform: rotate(-12deg); }
  .editorial-disc span { margin-top: .4rem; font-size: 1.5rem; }
  .making-story { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--study-rule); padding-block: 4rem 5rem; gap: 5rem; }
  .making-visual { padding: 2rem; background: var(--surface-raised); display: grid; place-items: center; overflow: hidden; }
  .making-sheet { position: relative; width: 100%; max-width: 27rem; aspect-ratio: .8; padding: 2rem; border: 1px solid var(--line); background: var(--surface); transform: rotate(-5deg); transition: transform 900ms var(--ease-out); }
  .sheet-label { font-size: .65rem; text-transform: uppercase; color: var(--muted); letter-spacing: .08em; }
  .sheet-art { height: 55%; position: relative; margin-top: 1.5rem; }
  .art-orbit { position: absolute; inset: 10% 0 20%; border: 1px solid var(--accent); border-radius: 50%; transform: rotate(-35deg); transition: transform 900ms,opacity 900ms; }
  .art-orbit-b { transform: rotate(30deg); }.art-orbit-c { transform: rotate(90deg); }
  .art-sun { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--accent); position: absolute; top: 32%; left: 39%; transition: transform 900ms; }
  .sheet-type { font-family: "TITB Grotesk",sans-serif; font-weight: 700; font-size: clamp(1.75rem,3vw,3rem); line-height: .95; letter-spacing: -.065em; margin-top: .5rem; }
  .sheet-type em { font-family: inherit; font-size: .8em; }
  .sheet-caption { font-size: .6rem; margin-top: 1rem; }
  .making-story[data-step="0"] .art-orbit-b, .making-story[data-step="0"] .art-orbit-c { opacity: .15; }
  .making-story[data-step="0"] .sheet-type { opacity: .3; }
  .making-story[data-step="1"] .making-sheet { transform: rotate(4deg); }
  .making-story[data-step="1"] .art-orbit-a { transform: rotate(45deg); }
  .making-story[data-step="2"] .making-sheet { transform: rotate(0deg); }
  .making-story[data-step="2"] .art-orbit-a { transform: rotate(-20deg); }
  .making-story[data-step="2"] .art-orbit-b { transform: rotate(20deg); }
  .making-story[data-step="3"] .making-sheet { transform: rotate(-2deg) scale(.93); }
  .making-story[data-step="3"] .art-sun { transform: scale(1.35); }
  .making-copy { padding-block: 1rem; align-self: center; }
  .making-copy h2 { font-size: clamp(2.6rem,4vw,4rem); margin-block: 1.5rem 2rem; }
  .making-copy h3 { font-family: var(--font-body); font-size: 1rem; margin-bottom: .5rem; }
  .making-copy [aria-live] { min-height: 8rem; }
  .making-scrubber { padding-block: 1.5rem; }
  .making-scrubber label { display: block; font-size: .8rem; margin-bottom: .75rem; }
  .making-scrubber input { width: 100%; accent-color: var(--accent); cursor: ew-resize; min-height: 2.75rem; margin: 0; }
  .scrub-labels { display: flex; justify-content: space-between; font-size: .65rem; color: var(--muted); }
  .making-copy > .caption { font-size: .7rem; }
  .making-copy .study-link { margin-top: 1rem; }
  .editorial-ticker { display: flex; gap: 2rem; justify-content: space-between; border-top: var(--study-rule); padding-block: 2rem; font-size: clamp(1.3rem,3vw,2.5rem); font-family: var(--study-serif); font-style: italic; }
  body[data-study="3"] .reading-intro h2 { font-size: clamp(3rem,5vw,5rem); }
  body[data-study="3"] .article-sample p { font-family: var(--study-serif); font-size: 1.15rem; }

  /* 04 — Pocket Universe: discover a destination without chasing moving links. */
  .universe-intro { text-align: center; padding-block: 3rem 0; position: relative; z-index: 1; }
  .universe-intro h1 { font-size: clamp(4rem,8vw,7rem); line-height: 1; margin-block: 1.5rem; }
  .universe-intro h1 em { color: var(--accent); }
  .universe-intro > p:last-child { font-size: 1.05rem; }
  .universe-map { position: relative; max-width: 62rem; margin-inline: auto; height: 38rem; isolation: isolate; }
  .space-grain { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--line) .8px,transparent 1px),radial-gradient(var(--study-glow),transparent 65%); background-size: 61px 53px,100% 100%; mask-image: radial-gradient(ellipse,#000 40%,transparent 72%); }
  .orbit-ring { position: absolute; left: 50%; top: 50%; border: 1px solid var(--line); border-radius: 50%; transform: translate(-50%,-50%); width: 44%; aspect-ratio: 1; pointer-events: none; animation: study-orbit 65s linear infinite; }
  .ring-b { width: 65%; animation-duration: 100s; animation-direction: reverse; }.ring-c { width: 86%; animation-duration: 140s; }
  .orbit-ring i { position: absolute; left: 50%; top: -.2rem; width: .4rem; height: .4rem; background: var(--accent); border-radius: 50%; box-shadow: 0 0 .6rem var(--accent); }
  .universe-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-9deg); width: 8rem; height: 8rem; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: "TITB Grotesk",sans-serif; font-size: 2.2rem; line-height: .95; border: 1px solid var(--accent); background: var(--surface); box-shadow: 0 0 4rem var(--study-glow); }
  .universe-core span { font-size: .75rem; margin-block: .5rem; }
  .destination { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; border: 0; background: var(--surface); color: var(--ink); padding: .5rem; cursor: pointer; min-width: 9rem; transition: transform .3s; }
  .destination strong { font-size: .85rem; font-weight: 500; }
  .destination small { font-size: .65rem; color: var(--muted); }
  .destination[aria-pressed="true"] { transform: translateY(-5px); }
  .destination[aria-pressed="true"] strong { color: var(--accent); }
  .destination[aria-pressed="true"] .world-dot { outline: 1px solid var(--accent); outline-offset: .5rem; }
  .destination-wear { top: 20%; left: 14%; }.destination-play { top: 18%; right: 15%; }.destination-read { bottom: 14%; left: 20%; }.destination-wonder { bottom: 12%; right: 15%; }
  .world-dot { width: 2.5rem; height: 2.5rem; border-radius: 50%; margin-bottom: .8rem; box-shadow: inset -.5rem -.3rem 1rem #13132088; }
  .world-amber { background: #e9ac70; }.world-pink { background: #d596b2; }.world-blue { background: #96b7e9; }.world-green { background: #add4ba; }
  .universe-bottom { display: grid; grid-template-columns: 1fr .5fr; gap: 4rem; border-top: var(--study-rule); padding-block: 2rem 5rem; }
  .destination-copy { max-width: 36rem; min-height: 15rem; }
  .destination-copy h2 { font-size: 2.5rem; margin-block: 1rem; }
  .destination-copy .study-link { margin-top: 1rem; }
  .universe-controls { align-self: center; max-width: 18rem; justify-self: end; }
  .universe-controls label { font-size: .8rem; display: block; margin-bottom: .75rem; }
  .universe-controls .caption { font-size: .7rem; margin-top: .75rem; }
  .universe-experience[data-speed="fast"] .orbit-ring { animation-duration: 12s; }
  .universe-experience[data-speed="paused"] .orbit-ring, .universe-experience[data-visible="false"] .orbit-ring, .universe-experience[data-hidden="true"] .orbit-ring { animation-play-state: paused; }
  @keyframes study-orbit { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }

  @media (max-width: 75rem) {
    .study-switcher-name { display: none; }
    .system-inspector { padding: 1.5rem; }
    .system-map { padding-inline: .75rem; gap: .75rem; }
  }
  @media (max-width: 55rem) {
    .study-reading, .design-argument { gap: 3rem; }
    .system-experience { grid-template-columns: 1fr; }
    .system-inspector { border-left: 0; border-top: var(--study-rule); min-height: 21rem; padding: 2rem; }
    .system-inspector > p { max-width: 38rem; }
    .system-intro > p:last-child { position: static; margin-top: 1.5rem; }
    .making-story { gap: 2.5rem; }
    .making-visual { padding: 1rem; }
    .making-sheet { padding: 1.3rem; }
  }
  @media (max-width: 42rem) {
    .study-toolbar { flex-wrap: wrap; gap: .5rem 1rem; padding: .75rem 1rem; }
    .study-home { font-size: .7rem; }
    .study-switcher { justify-content: end; }
    .study-switcher a { padding: .4rem .65rem; }
    .study-light-controls { flex-basis: 100%; justify-content: space-between; gap: .5rem; padding-top: .25rem; }
    .study-light-controls label { font-size: .65rem; min-width: 0; }
    .study-light-controls select { min-width: 0; }
    .concept-nav { flex-wrap: wrap; gap: .8rem; padding-block: 1.5rem; }
    .concept-nav nav { width: 100%; gap: 1.25rem; }
    .concept-nav nav a { font-size: .75rem; }
    .concept-brand { font-size: 1rem; }
    .study-reading, .design-argument { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 3rem; }
    .study-directory { grid-template-columns: 1fr; }
    .lab-index { padding-block: 3rem; }
    .lab-index h1 { font-size: 3.3rem; }
    .door-preview { height: 12rem; }
    .reader-bar { padding: .75rem 1rem; }
    .reader-bar .eyebrow { font-size: .6rem; }
    .reader-content h2 { font-size: 2.8rem; }
    body[data-study="1"] .unbox-hero { grid-template-columns: 1fr; }
    body[data-study="1"] .unbox-title { padding-top: 1.5rem; }
    body[data-study="1"] .unbox-title h1 { font-size: 3.4rem; }
    .unbox-stage { --cube-size: 13rem; padding-block: 1rem; }
    .cube-viewport { height: 21rem; }
    .cube-face { padding: 1rem; }
    .cube-face strong { font-size: 2.7rem; }
    .cube-front strong { font-size: 4.5rem; }
    .cube-face span { font-size: .7rem; }.cube-face small { font-size: .55rem; }
    .unbox-caption { padding-block: 2rem; max-width: none; }
    .unbox-caption p { min-height: auto; }
    .unbox-index { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 3rem; }
    .unbox-index a { flex-direction: row; justify-content: space-between; font-size: 1rem; align-items: center; }
    .system-intro { padding-top: 1rem; }
    .system-intro h1 { font-size: 3.4rem; }
    .system-map { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3,1fr); gap: 1.1rem; padding-block: 3rem; min-height: 31rem; }
    .system-core { display: none; }
    .system-wires { opacity: .25; }
    .system-node { grid-column: auto; grid-row: auto; padding: .8rem; min-height: 7.3rem; }
    .system-node strong { font-size: .9rem; }
    .system-inspector { padding: 1.5rem 0; }
    .system-inspector h2 { font-size: 1.7rem; }
    .system-product-strip a { font-size: 1.3rem; gap: 1rem; }
    .system-product-strip a span { font-size: .7rem; text-align: right; }
    .editorial-edition { font-size: .53rem; align-items: center; }
    .editorial-edition > span:last-child { text-align: right; }
    .editorial-hero h1 { font-size: clamp(3.6rem,14vw,5.8rem); padding-block: 2rem; }
    .editorial-deck { padding-bottom: 2.5rem; gap: 1rem; }
    .editorial-deck > p { font-size: .85rem; margin: 0; padding-left: .8rem; }
    .editorial-disc { width: 5rem; height: 5rem; flex-shrink: 0; font-size: .65rem; }
    .making-story { grid-template-columns: 1fr; padding-block: 2rem 3rem; gap: 2rem; }
    .making-sheet { max-width: 21rem; }
    .sheet-type { font-size: 2.4rem; }
    .making-copy h2 { font-size: 2.8rem; }
    .making-copy [aria-live] { min-height: 7rem; }
    .editorial-ticker { gap: .5rem; font-size: 1.1rem; }
    .universe-intro { padding-top: 1rem; }
    .universe-intro h1 { font-size: 3.8rem; }
    .universe-intro > p:last-child { font-size: .9rem; }
    .universe-map { height: 29rem; margin-inline: -.75rem; }
    .universe-core { width: 5rem; height: 5rem; font-size: 1.4rem; }
    .universe-core span { font-size: .55rem; margin-block: .3rem; }
    .orbit-ring { width: 43%; }.ring-b { width: 70%; }.ring-c { width: 97%; }
    .destination { min-width: 7.2rem; padding: .4rem; }
    .destination strong { font-size: .67rem; }.destination small { font-size: .6rem; }
    .destination-wear { left: 0; top: 12%; }.destination-play { right: 0; top: 13%; }.destination-read { left: 0; bottom: 10%; }.destination-wonder { right: 0; bottom: 10%; }
    .world-dot { width: 2rem; height: 2rem; }
    .universe-bottom { grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 3rem; }
    .universe-controls { justify-self: start; width: 100%; max-width: none; }
    .destination-copy { min-height: 15rem; }
  }
}
@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    body[data-study] *, body[data-study] *::before, body[data-study] *::after { transition-duration: 0s; animation: none; }
  }
}

/* Approved direction 01: Unboxing. Canonical reusable components below.
   Old studies remain isolated review archives, not competing design authorities. */
@layer tokens {
  body[data-design="unboxing"] {
    --font-brand: "TITB Grotesk", "Segoe UI", sans-serif;
    --font-display: "TITB Grotesk", "Segoe UI", sans-serif;
    --font-body: "TITB Hanken", "Segoe UI", sans-serif;
    --font-label: "TITB Hanken", "Segoe UI", sans-serif;
    --font-editorial: Georgia, "Times New Roman", serif;
    --text-small: .875rem; --text-body: 1.0625rem; --text-lead: clamp(1.2rem, 1.8vw, 1.5rem);
    --text-heading: clamp(2rem, 4vw, 3.25rem); --text-hero: clamp(3.1rem, 7.4vw, 7rem);
    --reading-max: 42rem; --content-max: 82rem;
    --space-2: .5rem;
    --radius-small: .3rem; --radius-card: .5rem; --radius-pill: 100rem;
    --motion-fast: 180ms; --motion-slow: 700ms;
    --u-paper: #f4f0e7; --u-raised: #faf7f0; --u-soft: #e9e2d5;
    --u-ink: #292820; --u-muted: #70675d; --u-line: #c8c1b3; --u-input: #82796c;
    --u-accent: #a94b2d; --u-on-accent: #fff8ed;
    --u-success: #326443; --u-success-soft: #e2ebde;
    --u-warning: #795312; --u-warning-soft: #f2e7c9;
    --u-error: #a33432; --u-error-soft: #f6e3df;
    --shadow-soft: 0 1rem 3rem #2928200d;
    --surface: var(--u-paper); --surface-raised: var(--u-raised); --surface-soft: var(--u-soft);
    --ink: var(--u-ink); --muted: var(--u-muted); --line: var(--u-line);
    --accent: var(--u-accent); --accent-contrast: var(--u-on-accent); --accent-soft: var(--u-soft);
    color-scheme: light;
  }
  :root[data-theme="dark"] body[data-design="unboxing"]:not([data-design-tone]):not([data-study="1"]),
  body[data-design="unboxing"][data-design-tone="dark"],
  body[data-design="unboxing"][data-study-tone="dark"] {
    --u-paper: #211e1b; --u-raised: #2a2521; --u-soft: #342d27;
    --u-ink: #f1eadd; --u-muted: #bdb1a1; --u-line: #594a3c; --u-input: #a18e7b;
    --u-accent: #ecb38e; --u-on-accent: #302017;
    --u-success: #a7d5b3; --u-success-soft: #26382b;
    --u-warning: #e9c785; --u-warning-soft: #3c3222;
    --u-error: #f3aaa3; --u-error-soft: #442b29; color-scheme: dark;
  }
  body[data-design="unboxing"]:is([data-design-phase="sunrise"],[data-study-phase="sunrise"]) { --u-accent: #a34e24; }
  body[data-design="unboxing"]:is([data-design-phase="dusk"],[data-study-phase="dusk"]) { --u-accent: #973d5c; }
  body[data-design="unboxing"]:is([data-design-phase="night"],[data-study-phase="night"]) { --u-accent: #60569c; }
  body[data-design="unboxing"]:is([data-design-tone="dark"],[data-study-tone="dark"]):is([data-design-phase="sunrise"],[data-study-phase="sunrise"]) { --u-accent: #f0b48a; }
  body[data-design="unboxing"]:is([data-design-tone="dark"],[data-study-tone="dark"]):is([data-design-phase="dusk"],[data-study-phase="dusk"]) { --u-accent: #f1b1c5; }
  body[data-design="unboxing"]:is([data-design-tone="dark"],[data-study-tone="dark"]):is([data-design-phase="night"],[data-study-phase="night"]) { --u-accent: #c7bbed; }
  /* Study 1 consumes the approved tokens as well as its archived composition. */
  body[data-design="unboxing"][data-study="1"] {
    --surface: var(--u-paper); --surface-raised: var(--u-raised); --surface-soft: var(--u-soft);
    --ink: var(--u-ink); --muted: var(--u-muted); --line: var(--u-line);
    --accent: var(--u-accent); --accent-contrast: var(--u-on-accent);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) body[data-design="unboxing"]:not([data-design-tone]):not([data-study="1"]) {
      --u-paper: #211e1b; --u-raised: #2a2521; --u-soft: #342d27;
      --u-ink: #f1eadd; --u-muted: #bdb1a1; --u-line: #594a3c; --u-input: #a18e7b;
      --u-accent: #ecb38e; --u-on-accent: #302017;
      --u-success: #a7d5b3; --u-success-soft: #26382b;
      --u-warning: #e9c785; --u-warning-soft: #3c3222;
      --u-error: #f3aaa3; --u-error-soft: #442b29; color-scheme: dark;
    }
  }
}
@layer components {
  .titb-wordmark { display: inline-flex; align-items: baseline; gap: .17em; font-family: var(--font-brand, "TITB Grotesk"), sans-serif; font-style: normal; line-height: 1; letter-spacing: -.055em; }
  .titb-wordmark strong { font-family: inherit; font-size: 1em; font-weight: 700; line-height: 1; letter-spacing: inherit; }
  .titb-wordmark .titb-wordmark-join { font-family: inherit; font-size: .52em; font-style: normal; font-weight: 500; letter-spacing: -.02em; }
  .titb-wordmark--stacked { flex-direction: column; align-items: center; justify-content: center; gap: .18em; }
  .titb-wordmark--stacked .titb-wordmark-join { font-size: .22em; letter-spacing: .02em; }
  .cube-front > .titb-wordmark { font-family: "TITB Grotesk", sans-serif; font-style: normal; font-size: clamp(4rem,7.3vw,6.5rem); }
  .cube-front .titb-wordmark strong { font-family: inherit; font-size: 1em; line-height: .95; }
  .cube-front .titb-wordmark .titb-wordmark-join { font-family: inherit; font-style: normal; font-size: .22em; }
  .concept-brand .titb-wordmark-join { font-family: inherit; font-style: normal; }
  .concept-brand > .titb-wordmark { font-size: inherit; }
  body[data-design="unboxing"] h1, body[data-design="unboxing"] h2, body[data-design="unboxing"] h3 { font-weight: 500; }
  body[data-design="unboxing"] em { font-family: var(--font-editorial); font-weight: 400; }
  body[data-design="unboxing"]:not([data-study="1"]):not([data-public-design="true"]) > .site-header { display: none; }
  body[data-design="unboxing"]:not([data-public-design="true"]) .site-footer .appearance-control { display: none; }
  body[data-design="unboxing"] :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
  body[data-design="unboxing"] code { overflow-wrap: anywhere; }
  .ui-overline { font: 650 .75rem/1.5 var(--font-label); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
  .ui-lead { font-size: var(--text-lead); line-height: 1.6; color: var(--ink); }
  .ui-help { font-size: var(--text-small); line-height: 1.6; color: var(--muted); }
  .ui-display { font-family: var(--font-display); font-size: var(--text-hero); line-height: 1.05; letter-spacing: -.06em; color: var(--ink); }
  .ui-display em { color: var(--accent); }
  .ui-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
  .ui-button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 2.75rem; padding: .7rem 1.15rem; border: 1px solid var(--u-input); border-radius: var(--radius-small); background: transparent; color: var(--ink); font: 600 .9rem/1.4 var(--font-body); text-decoration: none; cursor: pointer; transition: transform var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast); }
  .ui-button:hover:not(:disabled) { transform: translateY(-2px); background: var(--surface-soft); border-color: var(--ink); }
  .ui-button:active:not(:disabled) { transform: translateY(0); }
  .ui-button--primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
  .ui-button--primary:hover:not(:disabled) { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); box-shadow: var(--shadow-soft); }
  .ui-button--quiet { border-color: transparent; }
  .ui-button--danger { color: var(--u-error); border-color: var(--u-error); }
  .ui-button:disabled { cursor: not-allowed; opacity: .55; }
  .ui-icon-button { min-width: 2.75rem; padding: .6rem; font-size: 1.2rem; }
  .ui-link { display: inline-flex; align-items: center; gap: .65rem; min-height: 2.75rem; color: var(--ink); font-weight: 600; font-size: .9rem; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .5rem; }
  .ui-link:hover { color: var(--accent); text-decoration-color: currentColor; }
  .ui-badge { display: inline-flex; gap: .3rem; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: .75rem; line-height: 1.4; color: var(--muted); }
  .ui-badge--success { color: var(--u-success); border-color: currentColor; }.ui-badge--warning { color: var(--u-warning); border-color: currentColor; }.ui-badge--error { color: var(--u-error); border-color: currentColor; }
  .ui-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25rem; }
  .ui-card { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--motion-fast), box-shadow var(--motion-fast); }
  .ui-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
  .ui-card:focus-within { border-color: var(--accent); }
  .ui-card-art { aspect-ratio: 1.35; display: grid; place-items: center; overflow: hidden; background: var(--surface-soft); color: var(--accent); }
  .ui-card-art span { font-size: clamp(2rem,4vw,3.5rem); font-family: var(--font-editorial); font-style: italic; transform: rotate(-8deg); }
  .ui-card-art--play { background: var(--ink); color: var(--surface); background-image: linear-gradient(90deg,transparent 49.7%,var(--u-input) 50%,transparent 50.3%),linear-gradient(transparent 49.7%,var(--u-input) 50%,transparent 50.3%); background-size: 50% 50%; }
  .ui-card-art--play span { font-family: var(--font-display); font-style: normal; padding: .3rem 1.1rem; background: var(--accent); color: var(--accent-contrast); border-radius: var(--radius-small); }
  .ui-card-art--read { background: var(--accent); color: var(--accent-contrast); }
  .ui-card-content { padding: 1.4rem; display: flex; flex-direction: column; align-items: start; gap: .85rem; flex: 1; }
  .ui-card-content h3 { font-size: clamp(1.35rem,2vw,1.8rem); line-height: 1.2; }
  .ui-card-content h3 a { text-decoration: none; }.ui-card-content h3 a:hover { text-decoration: underline; }
  .ui-card-content > p:not(.ui-overline) { font-size: .95rem; }.ui-card-content > .ui-link { margin-top: auto; }
  .ui-card-grid[data-compact="true"] .ui-card-art { aspect-ratio: 2.6; }
  .ui-card-grid[data-compact="true"] .ui-card-content { padding: 1rem; }
  .ui-feature { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; padding: clamp(1.5rem,4vw,3rem); margin-top: 2rem; background: var(--surface-soft); border-radius: var(--radius-card); }
  .ui-feature h3 { font-size: clamp(2rem,3.6vw,3.3rem); line-height: 1.1; margin-block: 1.3rem; }
  .ui-feature .ui-link { margin-top: 1rem; }
  .ui-feature-symbol { display: grid; place-items: center; align-self: center; justify-self: center; width: 10rem; aspect-ratio: 1; background: var(--ink); color: var(--surface); transform: rotate(-8deg); font-size: 2.8rem; }
  .ui-list-item { display: flex; align-items: center; gap: 1.5rem; padding-block: 1.5rem; border-block: 1px solid var(--line); margin-block: 2rem; }
  .ui-list-item > div { flex: 1; }.ui-list-item h3 { font-size: 1.3rem; margin-bottom: .5rem; }.ui-list-item p { font-size: .95rem; }
  .ui-prose { max-width: var(--reading-max); line-height: 1.8; }
  .ui-prose > * + * { margin-top: 1.5rem; }
  .ui-prose h3, .ui-prose h4 { color: var(--ink); line-height: 1.2; }
  .ui-prose h4 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; margin-top: 2.5rem; }
  .ui-prose strong { color: var(--ink); }
  /* Editorial link colour must not override embedded button variants. */
  .ui-prose :where(a:not(.ui-button)) { color: var(--accent); }
  .ui-prose ul, .ui-prose ol, .ui-instructions { padding-left: 1.4rem; color: var(--muted); }
  .ui-prose li + li, .ui-instructions li + li { margin-top: .65rem; }
  .ui-prose blockquote { border-left: 2px solid var(--accent); padding: .3rem 0 .3rem 1.5rem; margin-inline: 0; font: italic 1.65rem/1.4 var(--font-editorial); }
  .ui-prose blockquote p { color: var(--ink); }
  .ui-prose pre { max-width: 100%; overflow-x: auto; padding: 1.3rem; background: var(--surface-soft); border-radius: var(--radius-small); font-size: .8rem; }
  .ui-prose pre code { white-space: pre; overflow-wrap: normal; }
  .ui-prose :not(pre) > code, .language-recipe code, .language-specimen li code { background: var(--surface-soft); padding: .15em .3em; font-size: .83em; border-radius: .15rem; }
  .ui-prose figcaption { font-size: var(--text-small); color: var(--muted); line-height: 1.6; margin-top: .75rem; }
  .ui-prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2rem; }
  .ui-article-title { font-size: clamp(2.2rem,4.5vw,3.5rem); letter-spacing: -.045em; }
  .ui-article-meta { font-size: var(--text-small); }
  .ui-note { padding: 1.25rem 1.5rem; background: var(--surface-soft); border-left: 2px solid var(--accent); margin-block: 1.5rem; border-radius: 0 var(--radius-small) var(--radius-small) 0; }
  .ui-note p { font-size: .95rem; margin-top: .5rem; }
  .ui-field { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
  .ui-field > label, .ui-field > legend, .ui-choice-group > legend { font-size: .9rem; font-weight: 600; color: var(--ink); margin-bottom: .15rem; }
  .ui-field > legend { margin-bottom: .7rem; }.ui-optional { color: var(--muted); font-size: .8rem; font-weight: 400; margin-left: .3rem; }
  .ui-input { width: 100%; min-width: 0; min-height: 3rem; padding: .8rem .9rem; border: 1px solid var(--u-input); border-radius: var(--radius-small); background: var(--surface-raised); color: var(--ink); font: 400 1rem/1.5 var(--font-body); transition: border-color var(--motion-fast); }
  .ui-input:hover:not(:disabled) { border-color: var(--ink); }.ui-input:focus { border-color: var(--accent); }
  .ui-input::placeholder { color: var(--muted); opacity: 1; }.ui-input[readonly] { background: var(--surface-soft); }
  textarea.ui-input { resize: vertical; }.ui-input:disabled, fieldset:disabled .ui-input { opacity: .6; cursor: not-allowed; }
  .ui-input[aria-invalid="true"] { border-color: var(--u-error); border-width: 2px; }
  .ui-field-error { color: var(--u-error); font-size: var(--text-small); line-height: 1.5; }
  .ui-choice-group { border: 0; padding: 0; margin: 0; min-width: 0; }.ui-choice-group legend { margin-bottom: 1rem; }
  .ui-choice { display: flex; align-items: flex-start; gap: .8rem; min-height: 2.75rem; padding-block: .65rem; cursor: pointer; font-size: 1rem; line-height: 1.5; }
  .ui-choice input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--accent); cursor: pointer; }
  .ui-choice small { display: block; color: var(--muted); font-size: var(--text-small); margin-top: .2rem; }
  .ui-choice:has(input:disabled) { color: var(--muted); cursor: not-allowed; }.ui-choice input:disabled { cursor: not-allowed; }
  .ui-switch input { appearance: none; width: 2.8rem; height: 1.6rem; border: 1px solid var(--u-input); border-radius: 2rem; background: var(--surface-soft); position: relative; margin-top: 0; transition: background var(--motion-fast); }
  .ui-switch input::before { content: ""; position: absolute; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--muted); top: .18rem; left: .2rem; transition: transform var(--motion-fast); }
  .ui-switch input:checked { background: var(--accent); border-color: var(--accent); }.ui-switch input:checked::before { transform: translateX(1.15rem); background: var(--accent-contrast); }
  .ui-form-result { min-height: 1.7rem; font-size: .95rem; }.ui-form-result[data-result="success"] { color: var(--u-success); }.ui-form-result[data-result="error"] { color: var(--u-error); }
  .ui-notice { padding: 1.2rem 1.4rem; border: 1px solid currentColor; border-radius: var(--radius-small); }
  .ui-notice p { color: inherit; font-size: .95rem; margin-top: .35rem; }
  .ui-notice--success { color: var(--u-success); background: var(--u-success-soft); }.ui-notice--warning { color: var(--u-warning); background: var(--u-warning-soft); }.ui-notice--error { color: var(--u-error); background: var(--u-error-soft); }
  .ui-empty { border: 1px dashed var(--u-input); padding: 2.5rem; text-align: center; border-radius: var(--radius-card); margin-block: 2rem; }
  .ui-empty-symbol { font-size: 3.5rem; color: var(--accent); }.ui-empty h3 { font-size: 1.6rem; margin-block: 1rem; }.ui-empty p { max-width: 32rem; margin: 0 auto 1rem; }
  .ui-progress { display: block; width: 100%; height: .65rem; border: 0; border-radius: 1rem; overflow: hidden; accent-color: var(--accent); background: var(--surface-soft); margin-block: 1rem; }
  .ui-progress::-webkit-progress-bar { background: var(--surface-soft); }.ui-progress::-webkit-progress-value { background: var(--accent); }.ui-progress::-moz-progress-bar { background: var(--accent); }
  .ui-spinner { width: 1rem; height: 1rem; border: 2px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: ui-spin 1.1s linear infinite; }
  @keyframes ui-spin { to { transform: rotate(360deg); } }
  .ui-dialog { width: min(36rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: clamp(1.25rem,4vw,2.5rem); margin: auto; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--u-input); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); overflow-y: auto; }
  .ui-dialog::backdrop { background: #151310b3; }.ui-dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .ui-dialog h2 { font-size: clamp(2rem,4vw,3rem); margin-block: 1.5rem; }.ui-dialog > .ui-actions { margin-top: 2rem; }.ui-modal-open { overflow: hidden; }
  .ui-toast { position: fixed; z-index: 20; bottom: 1.5rem; right: 1.5rem; width: min(24rem,calc(100vw - 3rem)); padding: 1rem 1.5rem; background: var(--ink); color: var(--surface); border: 1px solid var(--surface); border-radius: var(--radius-small); box-shadow: var(--shadow-soft); font-size: .95rem; }
  .ui-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; font-size: .85rem; color: var(--muted); margin-bottom: 1.5rem; }.ui-breadcrumb a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .ui-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); gap: .3rem; }
  .ui-tab { border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); padding: .8rem 1rem; min-height: 2.75rem; cursor: pointer; font: 600 .95rem/1.4 var(--font-body); }
  .ui-tab[aria-selected="true"] { color: var(--accent); border-color: var(--accent); }.ui-tab:hover { background: var(--surface-soft); }
  .ui-tab-panel { padding: 1.5rem 0 .5rem; min-height: 10rem; }.ui-tab-panel h3 { font-size: 1.5rem; margin-bottom: .75rem; }
  .ui-disclosure { border-bottom: 1px solid var(--line); }.ui-disclosure summary { cursor: pointer; padding: 1.2rem .25rem; min-height: 2.75rem; font-weight: 600; }.ui-disclosure > div { padding: 0 .25rem 1.5rem; max-width: var(--reading-max); }
  .ui-table-scroll { overflow-x: auto; margin-block: 2rem; }.ui-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .95rem; }.ui-table caption { text-align: left; padding-bottom: 1rem; font-weight: 600; }
  .ui-table td, .ui-table th { padding: 1rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }.ui-table thead { background: var(--surface-soft); }.ui-table th { font-weight: 600; }.ui-table td { color: var(--muted); }

  /* Reference-page composition. Components above are intentionally page-independent. */
  .language-page { max-width: 94rem; padding-inline: clamp(1.25rem,5vw,5rem); margin: auto; }
  .language-top { display: flex; align-items: center; gap: 1rem; justify-content: space-between; border-bottom: 1px solid var(--line); min-height: 5rem; font-size: .85rem; flex-wrap: wrap; padding-block: .75rem; }.language-top > a { min-height: 2.75rem; display: inline-flex; align-items: center; text-decoration: none; }
  .language-intro { padding-block: clamp(3rem,6vw,6rem); }
  .language-intro h1 { font-size: var(--text-hero); line-height: 1.02; letter-spacing: -.06em; margin-top: 1.5rem; }.language-intro h1 em { color: var(--accent); }
  .language-intro-bottom { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 2.5rem; }.language-intro-bottom > p { max-width: 40rem; }
  .language-seal { flex: 0 0 auto; background: var(--ink); color: var(--surface); width: 9rem; aspect-ratio: 1; display: grid; place-items: center; transform: rotate(-7deg); font-size: 2.6rem; margin-right: 2rem; }
  .language-lighting { margin-top: 3rem; padding: 1.25rem; background: var(--surface-soft); display: flex; align-items: end; gap: 1.5rem; border-radius: var(--radius-card); }
  .language-lighting label { font-size: .85rem; flex: 0 0 11rem; }.language-lighting select { margin-top: .5rem; }.language-lighting p { max-width: 28rem; }
  .language-layout { display: grid; grid-template-columns: 11rem minmax(0,1fr); gap: clamp(2rem,5vw,5rem); }
  .language-sections { min-width: 0; }
  .language-index { position: sticky; top: 1rem; align-self: start; display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 1rem; }
  .language-index a { min-height: 2.75rem; padding: .65rem 0; text-decoration: none; font-size: .85rem; color: var(--muted); }.language-index a:hover { color: var(--accent); }
  .language-section { border-top: 1px solid var(--line); padding-block: 3rem 4.5rem; scroll-margin-top: 1.5rem; }
  .language-section-head { max-width: 38rem; margin-bottom: 2rem; }.language-section-head h2 { font-size: var(--text-heading); line-height: 1.1; margin-block: 1rem 1.25rem; }
  .language-section-head h2 em { color: var(--accent); }
  .language-brand-grid { display: grid; grid-template-columns: 1fr 1.6fr; min-height: 17rem; border: 1px solid var(--line); }
  .language-brand-square { display: grid; place-items: center; background: var(--ink); color: var(--surface); padding: 2rem; font-size: clamp(3.5rem,6vw,5.5rem); }
  .language-brand-inline { display: flex; flex-direction: column; justify-content: center; align-items: start; padding: 2rem; gap: 1.5rem; }.language-brand-inline > .titb-wordmark { font-size: clamp(1.35rem,2.5vw,2rem); }
  .language-recipe { font-size: .85rem; color: var(--muted); padding-top: 1.5rem; line-height: 1.9; }
  .language-type-sheet > div:first-child { padding-block: 1rem 2rem; }.language-type-sheet .ui-display { margin-top: 1rem; font-size: clamp(3rem,6vw,5.5rem); }
  .language-type-row { border-top: 1px solid var(--line); padding-block: 1.4rem; display: grid; grid-template-columns: 9rem minmax(0,1fr); gap: 1rem; align-items: baseline; }.language-type-row > code { font-size: .75rem; color: var(--muted); }.language-type-row h2 { font-size: var(--text-heading); }.language-type-row h3 { font-size: 1.5rem; }
  .language-swatches { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; }.language-swatch { display: flex; flex-direction: column; justify-content: end; min-height: 9rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-small); }.language-swatch code { font-size: .75rem; margin-top: .5rem; }
  .swatch-ink { background: var(--ink); color: var(--surface); }.swatch-line { border: 3px solid var(--line); }
  .language-spacing { display: flex; align-items: end; gap: 1.5rem; flex-wrap: wrap; padding-block: 2rem; }.language-spacing > div { display: flex; flex-direction: column; gap: .5rem; min-width: 7rem; }.language-spacing small { color: var(--muted); font-size: .8rem; }.space-demo { background: var(--accent); width: 4rem; }.space-demo-1 { height: var(--space-2); }.space-demo-2 { height: var(--space-3); }.space-demo-3 { height: var(--space-4); }.space-demo-4 { height: var(--space-6); }
  .language-specimen { padding: clamp(1.25rem,3vw,2rem); border: 1px solid var(--line); border-radius: var(--radius-card); margin-block: 1.5rem; }.language-specimen > .ui-actions + .ui-actions { margin-top: 1.5rem; }.language-specimen h3 { margin-bottom: 1rem; font-size: 1.5rem; }
  .language-reading-paper { margin-inline: auto; background: var(--surface-raised); padding: clamp(1.25rem,3vw,2.5rem); border: 1px solid var(--line); border-radius: var(--radius-card); }
  .language-figure { display: flex; flex-wrap: wrap; gap: .7rem; padding: 2rem 1rem; background: var(--surface-soft); justify-content: center; align-items: center; }.language-figure span { border: 1px solid var(--u-input); padding: .5rem .7rem; font-size: .85rem; }.language-figure span + span::before { content: "→ "; color: var(--accent); }
  .language-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.75rem; }.ui-field--wide { grid-column: 1 / -1; }.language-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
  .language-validation { padding: 2rem; background: var(--surface-soft); border-radius: var(--radius-card); display: grid; gap: 1rem; }.language-validation > .ui-button { justify-self: start; }.language-validation > .ui-field { max-width: 32rem; }.language-validation h3 { font-size: 1.6rem; }
  .language-notices { display: grid; gap: 1rem; margin-block: 1.5rem; }
  .language-behaviour { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; counter-reset: behaviour; }.language-behaviour li { padding-block: 1.5rem; border-top: 1px solid var(--line); counter-increment: behaviour; }.language-behaviour strong::before { content: "0" counter(behaviour) " / "; color: var(--accent); }.language-behaviour p { margin-top: .7rem; font-size: 1rem; }
  @media (max-width: 70rem) { .language-layout { grid-template-columns: 1fr; gap: 2rem; }.language-index { position: static; display: grid; grid-template-columns: repeat(5,1fr); gap: .5rem; border-bottom: 1px solid var(--line); padding-block: .75rem; }.language-lighting { flex-wrap: wrap; }.language-lighting p { max-width: none; flex-basis: 100%; }.language-section-head { max-width: 42rem; } }
  @media (max-width: 44rem) {
    .language-top { justify-content: start; gap: .5rem 1rem; font-size: .8rem; }.language-top .ui-badge { order: 3; }.language-intro-bottom { align-items: start; }.language-seal { display: none; }
    .language-lighting { gap: 1rem; padding: 1rem; }.language-lighting label { flex: 1 1 8rem; }.language-index { grid-template-columns: 1fr 1fr; }.language-section { padding-block: 2.5rem 3rem; }
    .language-brand-grid { grid-template-columns: 1fr; }.language-brand-square { min-height: 16rem; }.language-brand-inline { min-height: 10rem; align-items: center; text-align: center; }
    .language-type-row { grid-template-columns: 1fr; gap: .75rem; }.language-swatches { grid-template-columns: 1fr 1fr; }.language-swatch { padding: 1rem; min-height: 8rem; }
    .ui-card-grid { grid-template-columns: 1fr; }.ui-card-art { aspect-ratio: 1.8; }.ui-card-art span { font-size: 3rem; }.ui-card-content { padding: 1.5rem; }.ui-card-content h3 { font-size: 1.8rem; }
    .ui-feature { grid-template-columns: 1fr; }.ui-feature-symbol { width: 7rem; font-size: 2rem; margin-block: 1rem; }.ui-list-item { flex-wrap: wrap; }.ui-list-item > div { flex-basis: 100%; }
    .language-form-grid, .language-choice-grid, .language-behaviour { grid-template-columns: 1fr; }.language-validation { padding: 1.25rem; }.ui-empty { padding: 1.5rem; }
    .ui-tab { padding-inline: .65rem; font-size: .9rem; }.ui-table { min-width: 30rem; }.cube-front > .titb-wordmark { font-size: 4.5rem; }
  }
  @media (forced-colors: active) { .ui-switch input { appearance: auto; }.ui-switch input::before { display: none; } }
}
/* Phase 2 / Public Unboxing. Geometry, colour and motion tuning live here. */
@layer tokens {
  body[data-public-design="true"] {
    --cube-size: clamp(13.5rem, 25vw, 22rem); --cube-half: calc(var(--cube-size) / 2);
    --cube-wake-ms: 700; --cube-intro-ms: 4000; --cube-idle-ms: 20000;
    --cube-flourish-ms: 420; --cube-drift-degrees: 4;
  }
  :root[data-phase="sunrise"] body[data-public-design="true"] { --u-accent: #a34e24; }
  :root[data-phase="dusk"] body[data-public-design="true"] { --u-accent: #973d5c; }
  :root[data-phase="night"] body[data-public-design="true"] { --u-accent: #60569c; }
  :root[data-theme="dark"][data-phase="sunrise"] body[data-design="unboxing"][data-public-design="true"] { --u-accent: #f0b48a; }
  :root[data-theme="dark"][data-phase="dusk"] body[data-design="unboxing"][data-public-design="true"] { --u-accent: #f1b1c5; }
  :root[data-theme="dark"][data-phase="night"] body[data-design="unboxing"][data-public-design="true"] { --u-accent: #c7bbed; }
}
@layer layout {
  .unbox-hero { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: clamp(2rem,5vw,5rem); padding-block: clamp(3rem,6vw,6rem) 3rem; }
  .unbox-intro { min-width: 0; }
  .unbox-intro h1 { margin: 1.5rem 0; font-size: clamp(3.2rem,6.3vw,6.3rem); }
  .unbox-intro .ui-lead { max-width: 33rem; font-size: clamp(1.1rem,1.6vw,1.35rem); }
  .unbox-intro .ui-actions { margin-top: 2rem; }
  .unbox-margin-note { margin-top: 2.5rem; padding-left: 1rem; border-left: 1px solid var(--line); font-size: .8rem; line-height: 1.6; color: var(--muted); }
  .unbox-divider { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; border-block: 1px solid var(--line); font-size: var(--text-small); color: var(--muted); }
  .unbox-divider a { display: grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 50%; text-decoration: none; color: var(--ink); }
  .unbox-section { padding-block: clamp(3.5rem,8vw,7rem); scroll-margin-top: 2rem; }
  .unbox-section-heading { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 2rem; margin-bottom: 3rem; }
  .unbox-section h2, .unbox-invitation h2 { font-size: var(--text-heading); letter-spacing: -.045em; line-height: 1.12; margin: .75rem 0; }
  .unbox-section-heading > p, .unbox-section-heading > div > p:not(.ui-overline) { max-width: 30rem; color: var(--muted); line-height: 1.7; }
  .unbox-band { background: var(--surface-soft); border-block: 1px solid var(--line); transition: background-color var(--motion-slow); }
  .unbox-tools { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }
  .unbox-tools article { padding: 2rem 1.5rem 1rem 0; min-width: 0; }
  .unbox-tools article + article { padding-left: 1.5rem; border-left: 1px solid var(--line); }
  .unbox-tools h3 { font-size: 1.35rem; margin: 1rem 0; }
  .unbox-tools p:not(.ui-overline) { color: var(--muted); font-size: 1rem; line-height: 1.65; }
  .unbox-footnote { margin-top: 2rem; }
  .unbox-next-grid, .unbox-people, .unbox-two-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; }
  .unbox-invitation { text-align: center; border-top: 1px solid var(--line); padding-block: clamp(3rem,8vw,7rem); }
  .unbox-invitation h2 { font-size: clamp(2.5rem,5vw,4.7rem); }
  .unbox-invitation p:not(.ui-overline) { margin: 1.5rem auto; color: var(--muted); }
  .unbox-invitation > a { margin: 1rem .3rem 0; }
  .unbox-about-intro { padding-block: clamp(3rem,7vw,7rem) 2rem; }
  .unbox-about-intro h1 { margin: 2rem 0 3rem; font-size: clamp(3rem,5.5vw,5.5rem); }
  .unbox-about-opening { display: grid; grid-template-columns: .65fr 1fr; align-items: center; gap: 4rem; padding-block: 2rem; border-block: 1px solid var(--line); }
  .unbox-editorial { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,5vw,6rem); }
  .unbox-editorial .ui-prose { padding-top: 1rem; }
  .unbox-editorial-signature { display: inline-grid; place-items: center; margin-top: 4rem; width: 10rem; aspect-ratio: 1; border: 1px solid var(--line); transform: rotate(-6deg); color: var(--accent); font-size: 2.5rem; }
  body[data-public-design="true"] .header-inner { gap: 1rem; }
  body[data-public-design="true"] .site-nav { gap: clamp(.65rem,1.5vw,1.5rem); }
  @media (max-width: 68rem) {
    body[data-public-design="true"] .header-inner { flex-wrap: wrap; }
    body[data-public-design="true"] .site-nav { flex-wrap: wrap; }
  }
  @media (max-width: 54rem) {
    .unbox-hero { grid-template-columns: 1fr; gap: 2rem; }
    .unbox-intro { max-width: 40rem; }
    .unbox-intro h1 { font-size: clamp(3.1rem,9vw,5.5rem); }
    .unbox-margin-note { margin-top: 1.5rem; }
    .signature { max-width: 36rem; width: 100%; justify-self: center; }
    body[data-public-design="true"] { --cube-size: clamp(12rem,52vw,20rem); }
    .unbox-tools { grid-template-columns: repeat(2,1fr); }
    .unbox-tools article:nth-child(3) { padding-left: 0; border-left: 0; }
    .unbox-tools article:nth-child(n+3) { border-top: 1px solid var(--line); }
  }
  @media (max-width: 38rem) {
    .unbox-section-heading, .unbox-next-grid, .unbox-people, .unbox-about-opening, .unbox-editorial { grid-template-columns: 1fr; gap: 1.5rem; }
    .unbox-two-cards { grid-template-columns: 1fr; }
    .unbox-divider span:nth-child(2) { display: none; }
    .unbox-section-heading { margin-bottom: 2rem; }
    .unbox-tools article { padding-right: .8rem; }
    .unbox-tools article + article { padding-left: .8rem; }
    .unbox-editorial-signature { display: none; }
  }
}
@layer components {
  body[data-public-design="true"] { transition: color var(--motion-slow), background-color var(--motion-slow); }
  body[data-public-design="true"] .site-header, body[data-public-design="true"] .site-footer { background: var(--surface); }
  .unbox-product { display: grid; grid-template-columns: 1.05fr 1fr; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); overflow: hidden; margin-bottom: 2rem; }
  .unbox-product-art { position: relative; display: grid; place-items: center; min-height: 30rem; padding: 4rem 2rem; background: var(--surface-soft); overflow: hidden; }
  .unbox-product--wear .unbox-product-art { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); }
  .unbox-art-caption { position: absolute; bottom: 1.2rem; left: 1.5rem; font-size: .7rem; letter-spacing: .04em; color: var(--muted); }
  .unbox-art-index { position: absolute; top: 1rem; right: 1.5rem; font: 400 2.5rem var(--font-editorial); color: var(--accent); }
  .unbox-product-copy { align-self: center; padding: clamp(1.5rem,4vw,4rem); }
  .unbox-product-copy h3 { font-size: clamp(1.8rem,2.8vw,2.75rem); line-height: 1.14; letter-spacing: -.04em; margin: 1rem 0 1.5rem; }
  .unbox-product-copy p:not(.ui-overline) { color: var(--muted); line-height: 1.75; }
  .unbox-product-copy > a { margin: .8rem .5rem 0 0; }
  .unbox-shirt { width: min(100%,23rem); aspect-ratio: 360 / 400; transform: rotate(-4deg); transition: transform var(--motion-slow); }
  .polygon-shirt { display: block; width: 100%; height: auto; overflow: visible; }
  .polygon-shirt-base { fill: var(--ink); stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: bevel; }
  .polygon-shirt-facets { stroke: color-mix(in srgb,var(--accent) 45%,var(--surface)); stroke-width: .8; stroke-linejoin: bevel; }
  .shirt-facet--light { fill: color-mix(in srgb,var(--accent) 45%,var(--surface-raised)); }
  .shirt-facet--mid { fill: color-mix(in srgb,var(--accent) 58%,var(--surface-soft)); }
  .shirt-facet--shade { fill: color-mix(in srgb,var(--accent) 48%,var(--ink)); }
  .shirt-facet--accent { fill: var(--accent); }
  .shirt-facet--print { fill: var(--ink); }
  .polygon-shirt-seams { fill: none; stroke: var(--surface); stroke-width: 1; opacity: .55; }
  .polygon-shirt-registration { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .35; }
  .polygon-shirt-print { fill: var(--surface); font-family: var(--font-display); font-size: 34px; font-weight: 650; letter-spacing: -.035em; }
  .polygon-shirt-question { font-size: 43px; letter-spacing: -.045em; }
  .polygon-shirt-nodes { fill: var(--surface-raised); stroke: var(--accent); stroke-width: 1; }
  .unbox-product:hover .unbox-shirt { transform: rotate(-1deg) translateY(-5px); }
  .unbox-product--play { grid-template-columns: 1fr 1.05fr; }
  .unbox-product--play .unbox-product-art { order: 2; }
  .unbox-puzzle { width: min(100%,18rem); display: grid; grid-template-columns: repeat(4,1fr); gap: .4rem; padding: .6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); transform: rotate(7deg); transition: transform var(--motion-slow); }
  .unbox-puzzle > span { aspect-ratio: 1; display: grid; place-items: center; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-small); font: 500 clamp(1.2rem,2.5vw,2rem) var(--font-display); }
  .unbox-puzzle > .unbox-puzzle-space { background: var(--accent); color: var(--accent-contrast); }
  .unbox-product:hover .unbox-puzzle { transform: rotate(2deg); }
  .unbox-next { position: relative; padding: clamp(1.5rem,3vw,3rem); border: 1px solid var(--line); border-radius: var(--radius-card); min-width: 0; scroll-margin-top: 2rem; }
  .unbox-next h3 { font-size: clamp(2rem,3vw,3rem); line-height: 1.12; letter-spacing: -.04em; margin: 2rem 0 1.5rem; }
  .unbox-next p:not(.ui-overline), .unbox-next li { color: var(--muted); }
  .unbox-next ul { padding-left: 1.2rem; line-height: 2; margin-block: 1.5rem; }
  .unbox-orbit-mark { position: relative; height: 7rem; margin: 1.5rem 0; display: grid; place-items: center; overflow: hidden; }
  .unbox-orbit-mark span { position: absolute; width: 70%; height: 55%; border: 1px solid var(--line); border-radius: 50%; transform: rotate(-18deg); }
  .unbox-orbit-mark span:nth-child(2) { width: 40%; height: 40%; }
  .unbox-orbit-mark span:nth-child(3) { width: 1.8rem; height: 1.8rem; background: var(--accent); border: 0; }
  .unbox-maker-mark span { font: 500 clamp(4rem,9vw,8rem)/1 var(--font-display); letter-spacing: -.09em; color: var(--accent); }
  .unbox-maker-mark small { display: block; margin-top: 1rem; color: var(--muted); }
  .unbox-people article { display: flex; align-items: start; gap: 2rem; padding-block: 2rem; border-top: 1px solid var(--line); }
  .unbox-person-initial { font: 400 clamp(3rem,6vw,5rem)/1 var(--font-editorial); color: var(--accent); }
  .unbox-people h3 { font-size: 2rem; margin: .6rem 0 1rem; }
  .unbox-people p:not(.ui-overline) { color: var(--muted); line-height: 1.7; }
  .ui-card-grid.unbox-two-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  /* Six opaque planes. JS may animate orientation only; never typography or colours. */
  .signature { min-width: 0; }
  .signature-meta, .signature-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem .7rem; }
  .signature-coordinate { font: 400 .75rem var(--font-label); color: var(--muted); }
  .signature-stage { position: relative; height: calc(var(--cube-size) * 1.6); display: grid; place-items: center; perspective: 1100px; touch-action: pan-y; user-select: none; -webkit-user-select: none; isolation: isolate; }
  .signature-stage:focus-visible { border-radius: var(--radius-card); }
  .signature-object { width: var(--cube-size); height: var(--cube-size); position: relative; transform-style: preserve-3d; }
  .signature-face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1rem; border: 1px solid var(--ink); backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--surface-raised); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 6px var(--surface-raised), inset 0 0 0 7px var(--line); transition: background-color var(--motion-slow), color var(--motion-slow), transform var(--motion-slow), opacity var(--motion-fast); cursor: pointer; }
  .signature-front { transform: translateZ(var(--cube-half)); }
  .signature-right { transform: rotateY(90deg) translateZ(var(--cube-half)); background: var(--accent); color: var(--accent-contrast); box-shadow: inset 0 0 0 6px var(--accent), inset 0 0 0 7px currentColor; }
  .signature-back { transform: rotateY(180deg) translateZ(var(--cube-half)); background: var(--surface-soft); }
  .signature-left { transform: rotateY(-90deg) translateZ(var(--cube-half)); }
  .signature-top { transform: rotateX(90deg) translateZ(var(--cube-half)); background: var(--surface-soft); }
  .signature-bottom { transform: rotateX(-90deg) translateZ(var(--cube-half)); background: var(--ink); color: var(--surface); box-shadow: inset 0 0 0 6px var(--ink), inset 0 0 0 7px currentColor; }
  .signature-face > .titb-wordmark { font-size: calc(var(--cube-size) * .245); }
  .signature-face-number, .signature-face-footer { position: absolute; left: 1rem; right: 1rem; font: 500 clamp(.55rem,.85vw,.72rem)/1.4 var(--font-label); letter-spacing: .015em; }
  .signature-face-number { top: 1rem; }
  .signature-face-footer { bottom: 1rem; text-align: right; }
  .signature-face-title { font: 650 calc(var(--cube-size) * .15)/.95 var(--font-display); letter-spacing: -.07em; }
  .signature-face-title em { font-size: 1.12em; }
  .signature-face-title--editorial { font: 400 calc(var(--cube-size) * .19)/.9 var(--font-editorial); }
  .signature-spark { font-size: calc(var(--cube-size) * .53); line-height: 1; color: var(--accent); }
  .signature-mini-puzzle { display: grid; width: 55%; grid-template-columns: repeat(2,1fr); gap: .3rem; transform: rotate(-8deg); }
  .signature-mini-puzzle > span { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--line); font: 500 calc(var(--cube-size) * .14) var(--font-display); background: var(--surface-raised); }
  .signature-mini-puzzle > span:last-child { background: var(--accent); color: var(--accent-contrast); }
  .signature-shadow { position: absolute; bottom: 3%; width: 75%; height: 8%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb,var(--ink) 16%,transparent),transparent 70%); transform: scale(.8); opacity: .8; transition: transform var(--motion-slow), opacity var(--motion-slow); pointer-events: none; }
  .signature[data-flat="true"] .signature-face { transform: translateZ(0); }
  .signature[data-flat="true"] .signature-face:not(.signature-front) { opacity: 0; pointer-events: none; }
  .signature[data-flat="true"] .signature-shadow { opacity: .3; transform: scale(.6); }
  .signature-wake { position: absolute; bottom: .6rem; background: var(--surface); z-index: 2; }
  .signature[data-free="true"] .signature-stage { touch-action: none; cursor: grab; }
  .signature[data-state="dragging"] .signature-stage { cursor: grabbing; }
  .signature[data-state="choosing"] .signature-face { pointer-events: none; }
  .signature-panel { border-top: 1px solid var(--line); padding-top: .7rem; }
  .signature-heading p { margin: .35rem 0; }
  .signature-heading { display: grid; grid-template-columns: 1fr; gap: 0; }
  .signature-heading > span { font-size: .75rem; min-height: 2.4em; }
  .signature-faces { display: flex; flex-wrap: wrap; gap: .3rem; margin-block: .7rem; }
  .signature-faces button { min-height: 44px; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: transparent; color: var(--ink); font: 600 .8rem var(--font-body); cursor: pointer; }
  .signature-faces button:hover { border-color: var(--ink); }
  .signature-faces button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
  .signature-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
  .signature-actions > div { display: flex; gap: .3rem; }
  .signature-actions .ui-button { padding: .5rem .65rem; font-size: .8rem; }
  .signature-actions button[aria-pressed="true"] { background: var(--surface-soft); border-color: var(--ink); }
  .signature-instructions { margin: .7rem 0 0; font-size: .75rem; }
  .signature-dialog h2 { font-size: var(--text-heading); line-height: 1.1; margin-block: 1rem; }
  .signature-dialog > button:first-child { display: flex; margin-left: auto; }
  .signature-dialog [data-another-spark] { margin-top: 1rem; }
  @media (max-width: 54rem) {
    .signature-face-number, .signature-face-footer { font-size: clamp(.55rem,1.5vw,.75rem); }
  }
  @media (max-width: 38rem) {
    .unbox-product, .unbox-product--play { grid-template-columns: 1fr; }
    .ui-card-grid.unbox-two-cards { grid-template-columns: 1fr; }
    .unbox-product--play .unbox-product-art { order: 0; }
    .unbox-product-art { min-height: 23rem; }
    .unbox-shirt { width: min(100%,19rem); }
    .unbox-puzzle { width: 15rem; }
    .unbox-people article { gap: 1rem; }
  }
  @supports not (transform-style: preserve-3d) {
    .signature-face:not(.signature-front) { display: none; }
  }
}
/* Phase 3 / Work stories. Authentic media keeps its own colour in every theme. */
@layer tokens {
  body[data-public-design="true"], body[data-design="unboxing"] {
    --work-media-paper: #ecebea; --work-media-ink: #15171c; --work-media-caption: #c5c8ce;
  }
}
@layer components {
  .work-intro { padding-block: clamp(3rem,7vw,6rem) 3rem; }
  .work-intro h1 { margin-block: 1.5rem; }
  .work-intro > p:last-child { max-width: 44rem; }
  .work-collection { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
  .work-feature { display: grid; grid-template-columns: 1.1fr 1fr; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--surface-raised); }
  .work-feature-media { display: grid; place-items: center; padding: 2rem; min-width: 0; min-height: 30rem; text-decoration: none; }
  .work-feature-media img { width: 100%; height: auto; max-height: 32rem; object-fit: contain; transition: transform var(--motion-slow); }
  .work-feature-media:hover img, .work-feature-media:focus-visible img { transform: translateY(-5px); }
  .work-product-photo { background: var(--work-media-paper); color: var(--work-media-ink); }
  .work-game-photo { background: var(--work-media-ink); }
  .work-game-photo img { max-width: 14rem; border-radius: 1.2rem; }
  .work-feature-copy { padding: clamp(1.5rem,4vw,4rem); align-self: center; min-width: 0; }
  .work-feature-copy h2, .work-principle h2, .work-editorial h2 { font-size: var(--text-heading); line-height: 1.12; letter-spacing: -.045em; margin-block: 1rem 1.5rem; }
  .work-feature-copy > p:not(.ui-overline) { color: var(--muted); line-height: 1.75; }
  .work-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1.5rem; }
  .work-feature-copy > a { margin-top: 1rem; }
  .work-feature--game .work-feature-media { order: 2; }
  .work-principle { border-top: 1px solid var(--line); }
  .work-principle .ui-prose { margin-top: 2rem; }
  .work-story-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; padding-block: clamp(2rem,5vw,5rem); }
  .work-story-hero > div { min-width: 0; }
  .work-story-hero .ui-breadcrumb { margin-bottom: 3rem; flex-wrap: wrap; }
  .work-story-hero h1 { font-size: clamp(3rem,5.5vw,5.5rem); margin-block: 1.5rem; }
  .work-story-hero .ui-actions { margin-block: 2rem 1rem; }
  .work-hero-product { margin: 0; padding: clamp(1rem,2vw,2rem); border-radius: var(--radius-card); }
  .work-hero-product img { display: block; width: 100%; height: auto; }
  .work-hero-product figcaption { font-size: .8rem; line-height: 1.6; padding: 1rem; }
  .work-editorial { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,6vw,6rem); border-top: 1px solid var(--line); }
  .work-closing { border-bottom: 1px solid var(--line); }
  .work-explorer { min-width: 0; }
  .work-explorer [data-explorer-panel] { scroll-margin-top: 2rem; }
  .work-explorer:not([data-enhanced]) [data-explorer-panel] + [data-explorer-panel] { margin-top: 2rem; }
  .journey-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .5rem; margin-bottom: 1.5rem; }
  .journey-steps a { min-height: 4rem; padding: .75rem 1rem; display: flex; align-items: center; gap: .75rem; background: var(--surface); border: 1px solid var(--u-input); border-radius: var(--radius-small); color: var(--ink); text-decoration: none; font-size: .95rem; font-weight: 600; }
  .journey-steps a > span { font: 400 1.5rem var(--font-editorial); color: var(--accent); }
  .work-explorer [role="tab"] { transition: background-color var(--motion-fast), border-color var(--motion-fast); }
  .work-explorer [role="tab"][aria-selected="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); }
  .work-explorer [role="tab"][aria-selected="true"] .ui-overline, .work-explorer [role="tab"][aria-selected="true"] > span { color: inherit; }
  .journey-panel { display: grid; grid-template-columns: 1fr 1fr; min-height: 32rem; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
  .journey-copy { padding: clamp(1.5rem,3vw,3rem); align-self: center; min-width: 0; }
  .journey-copy h3, .world-panel h3 { font-size: clamp(1.8rem,3vw,3rem); line-height: 1.13; letter-spacing: -.035em; margin: 1rem 0 1.5rem; }
  .journey-copy > p:not(.ui-overline) { color: var(--muted); line-height: 1.75; }
  .journey-panel > figure { margin: 0; display: flex; flex-direction: column; justify-content: center; padding: 2rem; }
  .journey-panel > figure img { width: 100%; height: auto; object-fit: contain; max-height: 28rem; }
  .journey-panel figcaption { font-size: .8rem; margin-top: 1rem; }
  .journey-artwork { background: var(--work-media-ink); color: var(--work-media-caption); }
  .journey-brief-art { padding: clamp(1.5rem,3vw,3rem); background: var(--surface); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
  .journey-brief-art strong { font: 600 clamp(2.5rem,4vw,4rem)/1.05 var(--font-display); letter-spacing: -.045em; }
  .journey-brief-art strong em { color: var(--accent); }
  .journey-brief-art > span:last-child { font-size: .85rem; color: var(--muted); }
  .journey-story-art { padding: clamp(1.5rem,3vw,3rem); background: var(--surface); display: flex; flex-direction: column; align-items: start; justify-content: center; gap: 1.5rem; }
  .journey-story-art h3 { font-size: clamp(2rem,3vw,3rem); line-height: 1.16; letter-spacing: -.045em; }
  .ecosystem-direction { padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--surface-soft); margin-bottom: 1.5rem; }
  .ecosystem-direction p { margin: .4rem 0 0; }
  .ecosystem-nodes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
  .ecosystem-node { display: flex; position: relative; flex-direction: column; gap: .75rem; min-height: 8rem; padding: 1.25rem; border: 1px solid var(--u-input); border-radius: var(--radius-card); background: var(--surface-raised); color: var(--ink); text-decoration: none; }
  .ecosystem-node::after { content: ""; position: absolute; right: -1.25rem; top: 50%; width: 1.25rem; border-top: 1px solid var(--line); }
  .ecosystem-node:nth-child(3n)::after { content: none; }
  .ecosystem-node strong { font: 500 clamp(1.1rem,1.8vw,1.5rem) var(--font-display); padding-right: 1rem; }
  .ecosystem-node-arrow { position: absolute; right: 1rem; bottom: 1rem; }
  .ecosystem-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2rem; border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(1.5rem,3vw,3rem); background: var(--surface-soft); min-height: 17rem; }
  .ecosystem-panel h3 { margin: .75rem 0; font-size: clamp(1.7rem,2.5vw,2.5rem); line-height: 1.15; letter-spacing: -.035em; }
  .ecosystem-panel p { line-height: 1.7; }
  .ecosystem-connection { border-top: 1px solid var(--line); padding-top: 1rem; font-size: .95rem; color: var(--muted); }
  .ecosystem > .ui-help { margin-top: 1rem; }
  .work-phone { margin: 0; text-align: center; min-width: 0; }
  .work-phone img { width: min(100%,17rem); height: auto; display: block; margin-inline: auto; border: 1px solid var(--line); border-radius: 1.3rem; }
  .work-phone figcaption { margin-top: .75rem; color: var(--muted); font-size: .8rem; }
  .work-hero-phone { background: var(--surface-soft); padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius-card); }
  .work-hero-phone img { width: min(100%,15rem); }
  .world-choices { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
  .world-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1.5rem,4vw,4rem); padding: clamp(1.5rem,4vw,4rem); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); min-height: 44rem; }
  .world-panel > div { min-width: 0; }
  .work-sound p { line-height: 1.75; }
  .work-audio-player { border: 1px solid var(--line); background: var(--surface-soft); padding: 1.5rem; border-radius: var(--radius-card); margin-top: 1.5rem; }
  .work-audio-player audio { width: 100%; display: block; margin-block: 1rem; }
  .work-audio-player [data-audio-status]:empty { display: none; }
  .work-mode-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; }
  .work-mode-grid article { border-top: 1px solid var(--line); padding-top: 1.5rem; }
  .work-mode-grid h3 { font-size: 1.4rem; margin-block: 1rem; }
  .work-mode-grid article > p { color: var(--muted); line-height: 1.7; }
  .work-play-modes { border-top: 1px solid var(--line); }
  @media (max-width: 54rem) {
    .work-feature, .work-story-hero { grid-template-columns: 1fr; }
    .work-story-hero h1 { font-size: clamp(3rem,8vw,5.5rem); }
    .work-feature--game .work-feature-media { order: 0; }
    .work-feature-media { min-height: 22rem; }
    .work-hero-product { max-width: 35rem; width: 100%; justify-self: center; }
    .work-hero-phone { width: 100%; }
    .work-editorial { grid-template-columns: 1fr; gap: 1.5rem; }
    .journey-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .journey-panel { grid-template-columns: 1fr; }
    .journey-panel > figure { min-height: 20rem; }
    .journey-brief-art, .journey-story-art { min-height: 24rem; }
    .journey-brief-art strong { font-size: clamp(2.2rem,8vw,4rem); }
    .ecosystem-panel { grid-template-columns: 1fr; gap: 1rem; min-height: 23rem; }
    .world-panel { grid-template-columns: 1fr; min-height: 56rem; }
    .world-panel .work-phone img { max-width: 14rem; }
  }
  @media (max-width: 38rem) {
    .ecosystem-nodes { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
    .ecosystem-node { padding: .9rem; min-height: 9rem; }
    .ecosystem-node::after { content: none; }
    .ecosystem-node .ui-overline { font-size: .65rem; }
    .work-mode-grid { grid-template-columns: 1fr; gap: 1rem; }
    .journey-steps a { font-size: .85rem; gap: .5rem; padding: .65rem; }
    .work-feature-media { padding: 1rem; }
    .work-intro h1 { font-size: clamp(3rem,11vw,4.5rem); }
  }
}
/* Phase 4 / Journal and private editorial tools. Shared design tokens remain authoritative. */
@layer components {
  .journal-hero, .journal-article-heading { padding-block: clamp(3rem, 8vw, 7rem) 3rem; max-width: 62rem; }
  .journal-hero .ui-lead, .journal-article-heading .ui-lead { max-width: var(--reading-max); margin-block: 1.5rem; }
  .journal-section { padding-block: 1rem 4rem; }
  .journal-categories { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
  .journal-categories a { padding: .7rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-small); min-height: 2.75rem; text-decoration: none; text-transform: capitalize; }
  .journal-categories a[aria-current="page"] { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
  .journal-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; }
  .journal-card { display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); min-width: 0; }
  .journal-card h2 { font-size: clamp(1.6rem, 2.4vw, 2.15rem); line-height: 1.15; }
  .journal-card h2 a { text-decoration: none; }
  .journal-card > .ui-link { margin-top: auto; }
  .journal-card .ui-article-meta, .journal-article .ui-article-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
  .journal-empty { max-width: 48rem; padding: clamp(1.5rem, 4vw, 3rem); }
  .journal-empty h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
  .journal-empty p { margin-block: 1rem; }
  .journal-pagination { margin-top: 2rem; }
  .journal-method { margin-bottom: 5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
  .journal-article { padding-bottom: 5rem; }
  .journal-article-heading .journal-title { font-size: clamp(2.5rem, 6vw, 5rem); overflow-wrap: anywhere; }
  .journal-article-heading .ui-breadcrumb { margin-bottom: 2rem; }
  .journal-body, .journal-sources, .journal-end, .journal-related { margin-inline: auto; max-width: var(--reading-max); }
  .journal-body { font-size: clamp(1.08rem, 1.5vw, 1.2rem); }
  .journal-body h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.2; margin-top: 2.5rem; color: var(--ink); }
  .journal-body img { max-width: 100%; height: auto; border-radius: var(--radius-card); }
  .journal-body a, .journal-sources a { overflow-wrap: anywhere; }
  .journal-sources, .journal-related, .journal-end { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
  .journal-related { display: flex; flex-wrap: wrap; gap: 1rem; }
  .journal-related > p { width: 100%; }
  .admin-shell { padding-block: 3rem 5rem; }
  .admin-shell h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.05; overflow-wrap: anywhere; }
  .admin-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
  .admin-login { max-width: 48rem; }
  .admin-login > * + *, .admin-form > * + * { margin-top: 1.5rem; }
  .admin-policy, .admin-form { margin-block: 2rem; }
  .admin-policy p { margin-top: .6rem; }
  .admin-articles { display: grid; gap: 1rem; }
  .admin-article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, .65fr); gap: 2rem; padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); }
  .admin-article h2 { margin-block: .75rem; font-size: 1.8rem; }
  .admin-article .ui-actions { align-content: start; }
  .admin-source { width: 100%; min-height: 32rem; resize: vertical; font: 1rem/1.6 ui-monospace, monospace; tab-size: 2; }
  .admin-preview-banner { padding-block: 1.5rem; background: var(--accent-soft); border-block: 1px solid var(--line); }
  .admin-media-preview { display: block; max-width: 100%; max-height: 25rem; object-fit: contain; margin-top: 1rem; }
  .admin-shell pre, .admin-shell code { overflow-wrap: anywhere; white-space: pre-wrap; }
  .validation-summary-valid { display: none; }
  /* Audience pages use the shared Unboxing tokens and native form controls. */
  .audience-shell { padding-block: var(--space-6, 3rem) var(--space-8, 5rem); }
  .audience-shell > * + * { margin-top: var(--space-4, 1.5rem); }
  .audience-narrow { max-width: var(--reading-max); }
  .audience-columns, .audience-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5, 2rem); margin-block: var(--space-5, 2rem); }
  .audience-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .audience-columns > *, .audience-stats > * { min-width: 0; }
  .audience-panel { background: var(--surface-raised); padding: var(--space-5, 2rem); border: 1px solid var(--line); border-radius: var(--radius-card); }
  .audience-number { font-family: var(--font-display); font-size: var(--text-heading); }
  .audience-number small { font-size: var(--text-body); }
  .audience-table { max-width: 100%; overflow-x: auto; margin-block: var(--space-4, 1.5rem); }
  .audience-table td { overflow-wrap: anywhere; vertical-align: top; }
  .audience-table table { width: 100%; }
  .audience-nav { margin-bottom: var(--space-5, 2rem); }
  .audience-export { padding-block: var(--space-4, 1.5rem); }
  .audience-honeypot { display: none; }
  .audience-shell .ui-choice { align-items: flex-start; }
  @media (max-width: 48rem) { .audience-columns, .audience-stats { grid-template-columns: minmax(0, 1fr); } }
  .input-validation-error { border-color: var(--u-error); }
  .field-validation-error { color: var(--u-error); }
}
/* Observatory: shared art tokens, a contained night sky, ordinary theme-aware controls. */
@layer tokens {
  :root { --sun-void: #090e16; --sun-ember: #521109; --sun-fire: #e9480b; --sun-gold: #ffac32; --sun-hot: #fff2b8; }
}
@layer components {
  .sun-experience { padding-bottom: 2rem; }
  .sun-stage { position: relative; height: clamp(29rem,50vw,42rem); overflow: hidden; isolation: isolate; background: var(--sun-void); border: 1px solid var(--solar-orbit); border-radius: var(--radius-card); color: var(--solar-ink); }
  .sun-stage canvas { display: block; width: 100%; height: 100%; touch-action: pan-y pinch-zoom; cursor: grab; }
  .sun-stage canvas:active { cursor: grabbing; }
  .sun-stage canvas:focus-visible { outline: 2px solid var(--solar-selected); outline-offset: -5px; }
  .sun-stage[data-touch="true"] canvas { touch-action: none; }
  .sun-caption { position: absolute; top: 2rem; left: clamp(1.2rem,3vw,3rem); pointer-events: none; }
  .sun-caption .ui-overline { color: var(--sun-gold); }
  .sun-caption h2 { font-size: clamp(1.7rem,3vw,2.8rem); line-height: 1.08; color: var(--solar-ink); margin-top: .7rem; text-shadow: 0 2px 20px var(--sun-void); }
  .sun-stage-bottom { position: absolute; bottom: 1.2rem; left: 1.5rem; right: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; color: var(--solar-muted); font: .65rem/1.5 var(--font-label); letter-spacing: .12em; pointer-events: none; }
  .sun-stage-bottom > :first-child { color: var(--sun-gold); }
  .sun-fallback-art { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
  .sun-fallback-art span { width: min(45%,20rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%,var(--sun-hot),var(--sun-gold) 30%,var(--sun-fire) 65%,var(--sun-ember)); box-shadow: 0 0 50px color-mix(in srgb,var(--sun-fire) 45%,transparent),0 0 110px color-mix(in srgb,var(--sun-gold) 12%,transparent); }
  [data-sun][data-state="ready"] .sun-fallback-art { display: none; }
  [data-sun][data-state="fallback"] canvas { visibility: hidden; }
  .sun-toolbar { padding-top: 1.5rem; }
  .sun-settings { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1.5rem; align-items: center; margin-block: 1.5rem; }
  .sun-settings > * { min-width: 0; }
  .sun-settings input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--accent); }
  .sun-settings .ui-input { width: 100%; }
  .sun-status { margin-block: 1rem .5rem; }
  .sun-art-note { color: var(--muted); font-size: .8rem; max-width: 60rem; }
  .solar-atlas-heading { padding-block: 3rem 2rem; border-top: 1px solid var(--line); scroll-margin-top: 2rem; }
  .solar-atlas-heading h2 { font-size: clamp(2rem,4vw,3.5rem); margin-bottom: 1rem; }
  @media(max-width:48rem) { .sun-settings { grid-template-columns: 1fr 1fr; gap: .8rem; }.sun-stage { height: 32rem; }.sun-caption { top: 1.25rem; }.sun-stage-bottom { left: 1rem; right: 1rem; font-size: .6rem; } }
}
@layer tokens {
  :root {
    --solar-space: #101b28; --solar-ink: #edf2f6; --solar-muted: #b8c5d2;
    --solar-orbit: #496075; --solar-selected: #ffd08a; --solar-sun: #ffc16d;
    --solar-shade: #162335; --solar-ring: #cabd9e; --solar-land: #93b59e;
    --solar-mercury: #b7aaa0; --solar-venus: #e2be8d; --solar-earth: #6eafd0;
    --solar-mars: #df8c6a; --solar-jupiter: #cba887; --solar-saturn: #ddc99b;
    --solar-uranus: #a1d4d9; --solar-neptune: #688dc8;
  }
  :root[data-phase="dusk"] { --solar-selected: #f3b4aa; --solar-sun: #f5a784; }
  :root[data-phase="night"] { --solar-selected: #c6c0ff; --solar-sun: #f5c185; }
  [data-world="mercury"] { --planet-color: var(--solar-mercury); }
  [data-world="venus"] { --planet-color: var(--solar-venus); }
  [data-world="earth"] { --planet-color: var(--solar-earth); }
  [data-world="mars"] { --planet-color: var(--solar-mars); }
  [data-world="jupiter"] { --planet-color: var(--solar-jupiter); }
  [data-world="saturn"] { --planet-color: var(--solar-saturn); }
  [data-world="uranus"] { --planet-color: var(--solar-uranus); }
  [data-world="neptune"] { --planet-color: var(--solar-neptune); }
}
@layer components {
  .playground-feature { display: grid; grid-template-columns: 1.1fr 1fr; border-block: 1px solid var(--line); }
  .playground-art { min-height: 26rem; display: grid; place-content: center; gap: 3rem; overflow: hidden; background: var(--solar-space); color: var(--solar-ink); text-align: center; text-decoration: none; padding: 2rem; }
  .playground-art > span { font: .7rem var(--font-label); letter-spacing: .16em; }
  .playground-orrery { position: relative; width: min(19rem,60vw); aspect-ratio: 1; display: grid; place-items: center; }
  .playground-orrery span { position: absolute; width: 100%; height: 65%; border: 1px solid var(--solar-orbit); border-radius: 50%; transform: rotate(-28deg); }
  .playground-orrery span:nth-child(2) { width: 68%; height: 40%; }
  .playground-orrery span:nth-child(3) { width: 30%; height: 30%; border: none; background: var(--solar-sun); box-shadow: 0 0 65px color-mix(in srgb,var(--solar-sun) 30%,transparent); }
  .playground-orrery b { position: absolute; inset: 10% 8% auto auto; color: var(--solar-muted); font: .8rem var(--font-label); }
  .playground-copy { display: grid; align-content: center; justify-items: start; gap: 1.25rem; padding: clamp(1.5rem,4vw,4rem); }
  .playground-copy h2, .solar-notes h2 { font-size: clamp(2rem,4vw,3.5rem); }
  .solar-intro { padding-block: 3rem 2rem; }
  .solar-intro > .ui-overline { margin-top: 2rem; }
  .solar-intro h1 { font-size: clamp(2.8rem,6vw,5.5rem); }
  .solar-intro .ui-lead { margin-top: 1rem; }
  .solar-stage { border-radius: var(--radius-card); overflow: hidden; background: var(--solar-space); color: var(--solar-ink); border: 1px solid var(--solar-orbit); }
  .solar-stage-heading, .solar-stage-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; font: .7rem/1.6 var(--font-label); letter-spacing: .09em; color: var(--solar-muted); }
  .solar-stage-heading { border-bottom: 1px solid var(--solar-orbit); }
  .solar-stage-footer { border-top: 1px solid var(--solar-orbit); }
  .solar-stage-heading [data-solar-state] { color: var(--solar-selected); }
  .solar-stage canvas { width: 100%; height: clamp(22rem,48vw,36rem); display: block; touch-action: pan-y; cursor: grab; }
  .solar-stage canvas:active { cursor: grabbing; }
  .solar-stage canvas:focus-visible { outline: 2px solid var(--solar-selected); outline-offset: -5px; }
  .solar-stage[data-touch="true"] canvas { touch-action: none; }
  .solar-controls { padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
  .solar-settings { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1rem; margin-block: 1.5rem; }
  .solar-settings > *, .solar-reading > *, .solar-notes > *, .playground-feature > * { min-width: 0; }
  .solar-settings .ui-input { width: 100%; }
  .solar-settings input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--accent); }
  .solar-options { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1rem; }
  .solar-reading { display: grid; grid-template-columns: 15rem minmax(0,1fr); gap: clamp(1.5rem,5vw,5rem); padding-block: 3rem; }
  .solar-planets { display: grid; align-content: start; }
  .solar-planet-link { display: flex; align-items: center; gap: .8rem; padding: .9rem .6rem; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; min-height: 48px; }
  .solar-planet-link > span:last-child { margin-left: auto; }
  .solar-planet-link[aria-current="true"] { background: var(--accent-soft); border-color: var(--accent); font-weight: 700; }
  .solar-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; background: var(--planet-color); box-shadow: inset -2px -2px 3px var(--solar-shade); flex: 0 0 auto; }
  .solar-fact { scroll-margin-top: 7rem; margin-bottom: 2rem; }
  .solar-fact-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
  .solar-fact-heading h2 { font-size: clamp(2.5rem,5vw,4rem); }
  .solar-portrait { display: block; flex: 0 0 auto; width: clamp(4rem,8vw,7rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 25%,var(--planet-color) 20%,var(--solar-shade) 95%); box-shadow: inset -4px -3px 9px var(--solar-shade); position: relative; }
  .solar-portrait[data-world="saturn"]::after { content: ""; position: absolute; inset: 30% -25%; border: 6px solid var(--solar-ring); border-radius: 50%; transform: rotate(-25deg); }
  .solar-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; border-block: 1px solid var(--line); padding-block: 1.5rem; margin-block: 1.5rem; }
  .solar-metrics dt { font: .75rem/1.6 var(--font-body); color: var(--muted); }
  .solar-metrics dd { margin: .5rem 0 0; font: clamp(1.3rem,2vw,1.9rem) var(--font-display); }
  .solar-metrics small { display: block; font: .75rem var(--font-body); color: var(--muted); margin-top: .5rem; }
  .solar-discovery { padding: 1.5rem; border-left: 2px solid var(--accent); background: var(--surface-raised); }
  .solar-discovery > * + * { margin-top: 1rem; }
  .solar-notes { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2rem,6vw,6rem); border-top: 1px solid var(--line); }
  .solar-notes > div > p { margin-block: 1.5rem; }
  @media(max-width:60rem) { .solar-settings { grid-template-columns: repeat(3,minmax(0,1fr)); }.solar-reading { grid-template-columns: 12rem minmax(0,1fr); } }
  @media(max-width:42rem) {
    .playground-feature,.solar-reading,.solar-notes { grid-template-columns: minmax(0,1fr); }
    .solar-settings { grid-template-columns: repeat(2,minmax(0,1fr)); }.solar-settings > :last-child { grid-column: 1 / -1; }
    .solar-stage-heading,.solar-stage-footer { padding: .8rem; font-size: .6rem; letter-spacing: .03em; flex-wrap: wrap; gap: .25rem .7rem; }
    .solar-planets { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 .75rem; }
    .solar-metrics { gap: .6rem; }.solar-options { gap: .4rem 1rem; }.solar-reading { gap: 2rem; }
  }
}
/* Phase 6C — a shared observatory, with CSS-owned discovery overlays. */
@layer tokens {
  :root { --galaxy-haze: #8c9cce; --galaxy-core: #dcc8b7; --galaxy-dust: #080b13; --galaxy-star-cool: #cfdef7; --galaxy-star-warm: #ffe2b3; }
  :root { --solar-cloud: #ecf1ed; --space-callout-surface: #101b28eb; --space-line: #f2c78e; --earth-ocean: #07405c; --earth-atmosphere: #489cee; --earth-moon: #999d9d; }
  [data-world="sol"] { --planet-color: var(--solar-sun); }
}
@layer components {
  .system-stage { position: relative; background: var(--sun-void); color: var(--solar-ink); border: 1px solid var(--solar-orbit); border-radius: var(--radius-card); overflow: hidden; isolation: isolate; }
  .system-viewport { position: relative; height: clamp(30rem,53vw,44rem); }
  .system-viewport canvas { display: block; width: 100%; height: 100%; touch-action: pan-y pinch-zoom; cursor: grab; }
  .system-viewport canvas:active { cursor: grabbing; }
  .system-viewport canvas:focus-visible { outline: 2px solid var(--solar-selected); outline-offset: -5px; }
  .system-stage[data-touch="true"] canvas { touch-action: none; }
  .system-caption { position: absolute; top: 1.6rem; left: 1.7rem; pointer-events: none; transition: opacity var(--motion-fast); }
  .system-caption .ui-overline { color: var(--solar-muted); font-size: .65rem; }
  .system-caption h2 { color: var(--solar-ink); margin-top: .6rem; font: clamp(1.6rem,3vw,2.6rem)/1.1 var(--font-display); }
  .system-stage-bottom { position: absolute; bottom: 1.2rem; left: 1.7rem; right: 1.7rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--solar-muted); font: .65rem/1.5 var(--font-label); letter-spacing: .08em; pointer-events: none; }
  .system-stage-bottom > :first-child { color: var(--solar-selected); }
  .system-fallback { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
  [data-system][data-state="ready"] .system-fallback { display: none; }
  [data-system]:not([data-state="ready"]) canvas, [data-system]:not([data-state="ready"]) .system-labels { visibility: hidden; }
  .system-labels { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
  .system-labels text { fill: var(--solar-muted); font: 11px var(--font-label); letter-spacing: 1.2px; text-anchor: middle; paint-order: stroke; stroke: var(--sun-void); stroke-width: 3px; }
  .system-picker { display: flex; flex-wrap: wrap; gap: .25rem; padding-block: 1rem .25rem; }
  .system-picker .solar-planet-link { flex: 1 0 auto; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: .65rem .9rem; font-size: .85rem; }
  .system-picker .solar-planet-link[aria-current] { border-color: var(--accent); }
  .system-zoom { display: flex; align-items: center; gap: .25rem; }
  .system-zoom .ui-button { padding-inline: .8rem; }
  .system-zoom input { min-width: 0; }
  .system-scale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: 1.4rem; font: .65rem/1.5 var(--font-label); letter-spacing: .06em; color: var(--muted); }
  .system-guide { margin-block: 2.5rem; }
  .earth-controls { border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(1rem,3vw,1.75rem); margin-block: 1rem; background: var(--surface-raised); display: grid; gap: 1rem; }
  .earth-controls h3 { font: 1.65rem/1.2 var(--font-display); margin-block: .5rem; }
  .earth-controls > *, .earth-options > * { min-width: 0; }
  .earth-options { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem 1.5rem; }
  .earth-options .ui-field { flex: 1 1 15rem; }
  .earth-options select { width: 100%; }
  .earth-controls > .ui-button { justify-self: start; }
  .system-reference { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .system-reference dd { font-size: clamp(1.15rem,2vw,1.6rem); }
  .system-reference p { margin-top: .75rem; font-size: .9rem; line-height: 1.6; color: var(--muted); }
  .space-callouts { position: absolute; inset: 0; pointer-events: none; }
  .space-leaders { width: 100%; height: 100%; position: absolute; inset: 0; overflow: hidden; }
  .space-leaders path { fill: none; stroke: var(--space-line); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; animation: space-trace .65s ease-out both; }
  .space-callout { position: absolute; width: 23%; padding: 1rem; border-top: 1px solid var(--space-line); background: var(--space-callout-surface); pointer-events: auto; animation: space-reveal .45s .16s ease-out both; }
  .space-callout:nth-of-type(1) { left: 2%; top: 15%; }
  .space-callout:nth-of-type(2) { right: 2%; top: 15%; }
  .space-callout:nth-of-type(3) { left: 2%; bottom: 12%; }
  .space-callout:nth-of-type(4) { right: 2%; bottom: 12%; }
  .space-callout [data-fact-label] { font: .67rem/1.5 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--solar-muted); }
  .space-callout h3 { font: clamp(1.05rem,1.65vw,1.55rem)/1.2 var(--font-display); margin-block: .55rem; color: var(--solar-ink); }
  .space-callout [data-fact-detail] { font: .85rem/1.55 var(--font-body); color: var(--solar-muted); }
  [data-facts="true"] .sun-caption, [data-facts="true"] .system-caption { opacity: 0; }
  .sun-experience > .ui-disclosure { margin-top: 1rem; }
  @keyframes space-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes space-reveal { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: translateY(0); } }
  @media(max-width:60rem) {
    .space-specimen { height: auto; padding-top: 20rem; }
    .space-specimen .sun-fallback-art { bottom: auto; height: 20rem; }
    .space-callouts { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; padding: 1rem; background: var(--sun-void); }
    .space-leaders { display: none; }
    .space-callout { position: static; width: auto; padding: .8rem; }
    .space-callout h3 { font-size: 1.15rem; }
    [data-facts="true"] .sun-stage { height: auto; }
    [data-facts="true"] .sun-stage canvas { height: 32rem; }
    [data-facts="true"] .sun-stage-bottom { top: 29rem; bottom: auto; }
    [data-facts="true"] .sun-caption, [data-facts="true"] .system-caption { opacity: 1; }
    .system-reference { grid-template-columns: repeat(2,minmax(0,1fr)); }
  }
  @media(max-width:30rem) {
    .system-labels text { font-size: 26px; letter-spacing: .5px; }
    .system-picker .solar-planet-link { flex-basis: 29%; padding: .55rem; }
    .system-caption { left: 1rem; }.system-stage-bottom { left: 1rem; right: 1rem; font-size: .6rem; flex-wrap: wrap; }
    .space-callouts { grid-template-columns: minmax(0,1fr); }
    .space-callout { display: grid; grid-template-columns: 1fr; }
  }
  @media(prefers-reduced-motion:reduce) { .space-leaders path,.space-callout { animation: none; }.system-caption { transition: none; } }
}
@layer components {
  @media (max-width: 60rem) { .journal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
  @media (max-width: 42rem) { .journal-grid, .admin-article { grid-template-columns: minmax(0,1fr); }.admin-article { padding: 1.25rem; }.admin-heading { flex-wrap: wrap; } }
}

/* Orbital Chess / shared station, board and game-console compositions. */
@layer tokens {
  :root {
    --chess-void:#080e19; --chess-panel:#101a29; --chess-panel-raised:#172537;
    --chess-line:#304157; --chess-ink:#eef1f4; --chess-muted:#a8b7c9;
    --chess-gold:#f4c788; --chess-blue:#8ecce6; --chess-danger:#ff8e96;
    --chess-ivory:#f7dfb4; --chess-night:#294f70; --chess-rim:#303f52;
    --chess-tile-light:#8e9aa5; --chess-tile-dark:#233649;
    --chess-light:#dce8ff; --chess-planet:#b99a7b;
  }
}
@layer components {
  .chess-page { padding-block:var(--space-6) var(--space-8); }
  .chess-intro { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:2.5rem; }
  .chess-intro .ui-overline { margin-top:2.5rem; }
  .chess-intro h1 { font:500 clamp(2.8rem,6.4vw,6rem)/1.15 var(--font-display); letter-spacing:-.065em; margin-top:.5rem; }
  .chess-intro h1 span { color:var(--accent); }
  .chess-intro h1 i { font:normal .25em var(--font-body); vertical-align:top; display:inline-block; margin:.7em 0 0 .6em; }
  .chess-intro > p { font:500 clamp(1.1rem,2vw,1.45rem)/1.45 var(--font-display); padding-bottom:.35rem; }
  .chess-intro em,.chess-guide em { font-family:var(--font-editorial); font-weight:400; }
  .chess-station { --surface:var(--chess-panel); --surface-raised:var(--chess-panel-raised); --ink:var(--chess-ink); --muted:var(--chess-muted); --line:var(--chess-line); --accent:var(--chess-gold); --accent-contrast:var(--chess-void); --accent-soft:var(--chess-panel-raised); color:var(--chess-ink); background:var(--chess-void); border:1px solid var(--chess-line); border-radius:var(--radius-card); overflow:hidden; color-scheme:dark; }
  .chess-station .ui-button { font-size:.8rem; min-height:44px; }
  .chess-station .ui-input { background:var(--chess-panel); color:var(--chess-ink); min-height:48px; border-color:var(--chess-line); width:100%; font-size:1rem; }
  .chess-station :is(button,input,select):focus-visible { outline:2px solid var(--chess-blue); outline-offset:3px; }
  .chess-bar { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:.65rem 1rem; padding:1rem 1.5rem; border-bottom:1px solid var(--chess-line); font:.65rem/1.5 var(--font-label); letter-spacing:.09em; }
  .chess-signal { display:flex; gap:.7rem; align-items:center; }
  .chess-signal i { width:6px; height:6px; background:var(--chess-blue); border-radius:50%; box-shadow:0 0 12px var(--chess-blue); }
  .chess-bar [data-connection] { color:var(--chess-muted); margin-left:auto; }
  .chess-bar .ui-button { padding:.35rem .7rem; }
  .chess-message { margin:0; padding:.9rem 1.5rem; color:var(--chess-blue); font-size:.82rem; line-height:1.6; border-bottom:1px solid var(--chess-line); }
  .chess-message[data-error="true"] { color:var(--chess-danger); }
  .chess-lobby-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .chess-departures { padding:clamp(1.4rem,3.5vw,3.2rem); }
  .chess-eyebrow { font:.65rem/1.6 var(--font-label); letter-spacing:.14em; text-transform:uppercase; color:var(--chess-gold); }
  .chess-departures h2 { font:500 clamp(1.6rem,3vw,2.6rem)/1.14 var(--font-display); letter-spacing:-.045em; margin:.9rem 0 1.25rem; }
  .chess-muted { color:var(--chess-muted); line-height:1.7; font-size:.9rem; }
  .chess-join { margin-top:2.6rem; }
  .chess-join label,.chess-bot label { display:block; font-size:.85rem; margin-bottom:.6rem; }
  .chess-join > div { display:flex; gap:.6rem; }
  .chess-join input { min-width:0; }
  .chess-join button { flex-shrink:0; }
  .chess-join > p,.chess-help { color:var(--chess-muted); font-size:.75rem; line-height:1.7; margin-top:.8rem; }
  .chess-room-heading { display:flex; align-items:start; gap:1rem; justify-content:space-between; }
  .chess-room-heading h2 { font-size:1.65rem; overflow-wrap:anywhere; }
  .chess-count { color:var(--chess-blue); font-size:.7rem; white-space:nowrap; padding:.4rem .6rem; border:1px solid var(--chess-line); border-radius:var(--radius-pill); }
  .chess-players { margin-top:1.3rem; max-height:22rem; overflow:auto; }
  .chess-empty { border:1px dashed var(--chess-line); padding:1.5rem; text-align:center; }
  .chess-empty > span { display:block; font-size:2rem; color:var(--chess-gold); margin-bottom:.5rem; }
  .chess-empty strong { font-size:.9rem; font-weight:500; }
  .chess-empty p { font-size:.8rem; line-height:1.7; color:var(--chess-muted); margin-top:.5rem; }
  .chess-player { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.8rem 0; border-bottom:1px solid var(--chess-line); }
  .chess-player-identity { display:flex; align-items:center; gap:.6rem; min-width:0; }
  .chess-player strong { font-size:.85rem; overflow-wrap:anywhere; }
  .chess-avatar { display:grid; place-items:center; flex:0 0 2.4rem; height:2.4rem; border-radius:50%; color:var(--chess-gold); border:1px solid var(--chess-line); font-size:.7rem; }
  .chess-player .ui-button { flex-shrink:0; padding:.4rem .7rem; font-size:.73rem; }
  .chess-invitation { padding:1rem; margin-top:1rem; border:1px solid var(--chess-blue); background:var(--chess-panel); border-radius:var(--radius-small); }
  .chess-invitation p { font-size:.9rem; overflow-wrap:anywhere; }
  .chess-inline-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
  .chess-bot { margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--chess-line); }
  .chess-bot h3 { font:500 1.25rem var(--font-display); margin:.4rem 0 1.5rem; }
  .chess-bot label { margin-top:.85rem; }
  .chess-bot > button { width:100%; margin-top:1rem; justify-content:space-between; }
  .chess-poster { position:relative; overflow:hidden; min-height:570px; background:radial-gradient(ellipse at 16% 15%,color-mix(in srgb,var(--chess-gold) 16%,transparent),transparent 45%),radial-gradient(ellipse at 85% 65%,color-mix(in srgb,var(--chess-blue) 12%,transparent),transparent 50%),var(--chess-void); border-left:1px solid var(--chess-line); }
  .chess-poster::before { content:""; position:absolute; inset:0; background-image:radial-gradient(circle,var(--chess-muted) 1px,transparent 1.5px),radial-gradient(circle,var(--chess-gold) 1px,transparent 1.5px); background-size:87px 103px,137px 181px; background-position:10px 35px,71px 25px; opacity:.45; }
  .chess-poster-coordinate { position:absolute; left:2rem; top:2rem; color:var(--chess-muted); font:.6rem var(--font-label); letter-spacing:.13em; }
  .chess-poster-orbit { width:700px; height:380px; position:absolute; border:1px solid var(--chess-line); border-radius:50%; top:10px; left:-40px; transform:rotate(-28deg); }
  .chess-poster-sun { width:110px; height:110px; position:absolute; top:10%; left:9%; border-radius:50%; background:radial-gradient(circle at 35% 32%,var(--chess-ivory),var(--chess-gold) 40%,var(--chess-planet)); box-shadow:0 0 50px color-mix(in srgb,var(--chess-gold) 25%,transparent),0 0 100px color-mix(in srgb,var(--chess-gold) 12%,transparent); }
  .chess-poster-planet { width:90px; height:90px; position:absolute; right:8%; top:22%; border-radius:50%; background:radial-gradient(circle at 25% 20%,var(--chess-blue),var(--chess-night) 50%,var(--chess-void) 85%); }
  .chess-poster-planet::after { content:""; position:absolute; inset:30% -28%; border:7px solid color-mix(in srgb,var(--chess-blue) 42%,transparent); border-radius:50%; transform:rotate(-30deg); }
  .chess-poster-board { position:absolute; width:58%; aspect-ratio:1; left:32%; top:16%; display:grid; grid-template-columns:repeat(8,1fr); border:8px solid var(--chess-rim); transform:perspective(650px) rotateX(46deg) rotateZ(-24deg); box-shadow:-8px 12px 0 var(--chess-panel-raised),-12px 20px 55px var(--chess-void); }
  .chess-poster-board span { display:grid; place-items:center; background:var(--chess-tile-dark); color:var(--chess-ivory); font:clamp(1rem,2.7vw,2.5rem)/1 Georgia,serif; }
  .chess-poster-board span[data-tone="1"] { background:var(--chess-tile-light); color:var(--chess-void); }
  .chess-poster-caption { position:absolute; bottom:3rem; left:3rem; right:2rem; }
  .chess-poster-caption > span { font:.65rem var(--font-label); letter-spacing:.18em; color:var(--chess-gold); }
  .chess-poster-caption strong { display:block; margin-top:.8rem; font:500 clamp(2.1rem,3.6vw,3.6rem)/1.05 var(--font-display); letter-spacing:-.045em; }
  .chess-poster-caption em { font-family:var(--font-editorial); font-weight:400; color:var(--chess-gold); }
  .chess-poster-caption p { color:var(--chess-muted); font-size:.8rem; margin-top:1.2rem; }
  .chess-match-heading { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.5rem; border-bottom:1px solid var(--chess-line); }
  .chess-match-heading h2 { font:500 clamp(1.5rem,2.8vw,2.1rem) var(--font-display); margin:.3rem 0; overflow-wrap:anywhere; }
  .chess-match-heading .chess-muted { font-size:.75rem; }
  .chess-toolbar { display:flex; gap:.45rem; flex-wrap:wrap; justify-content:end; }
  .chess-toolbar .ui-button { padding:.45rem .65rem; font-size:.68rem; }
  .chess-play-layout { display:grid; grid-template-columns:minmax(0,1fr) 240px; }
  .chess-play-layout > * { min-width:0; }
  .chess-playfield { min-width:0; padding:1rem; border-right:1px solid var(--chess-line); }
  .chess-stage { position:relative; aspect-ratio:1.3; background:var(--chess-void); overflow:hidden; }
  .chess-stage canvas { width:100%; height:100%; display:block; touch-action:pan-y pinch-zoom; cursor:grab; user-select:none; }
  .chess-stage canvas[data-orbit-active="true"] { touch-action:none; cursor:grab; }
  .chess-stage canvas[data-dragging="true"] { cursor:grabbing; }
  .chess-render-status { position:absolute; inset:0; display:grid; place-items:center; color:var(--chess-muted); font-size:.9rem; background:var(--chess-void); }
  .chess-seat { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.6rem .2rem; font:.8rem var(--font-label); }
  .chess-seat > :first-child { overflow-wrap:anywhere; }
  .chess-seat > :last-child { color:var(--chess-muted); font-size:.6rem; letter-spacing:.08em; flex-shrink:0; }
  .chess-seat--lunar { color:var(--chess-blue); }.chess-seat--solar { color:var(--chess-gold); }
  .chess-camera { display:flex; gap:.4rem; flex-wrap:wrap; margin:.8rem 0; }
  .chess-camera .ui-button { padding:.35rem .7rem; font-size:.75rem; }
  .chess-console { display:flex; flex-direction:column; padding:1.4rem 1rem; background:var(--chess-panel); }
  .chess-console h3 { font:500 1.2rem var(--font-display); margin:.6rem 0; }
  .chess-console-heading > p:last-child { font-size:.8rem; color:var(--chess-muted); }
  .chess-move-scroll { max-height:330px; min-height:125px; overflow:auto; margin-top:1.4rem; }
  .chess-moves { width:100%; border-collapse:collapse; font:.75rem/1.8 var(--font-label); }
  .chess-moves th { color:var(--chess-muted); text-align:left; font-weight:400; font-size:.64rem; }.chess-moves td,.chess-moves th { padding:.4rem .15rem; border-bottom:1px solid var(--chess-line); white-space:nowrap; }
  .chess-moves td:nth-child(2) { color:var(--chess-gold); }.chess-moves td:nth-child(3) { color:var(--chess-blue); }
  .chess-game-actions { display:grid; gap:.6rem; margin-top:auto; padding-top:1.5rem; }
  .chess-result { padding:1rem 0; border-top:1px solid var(--chess-line); margin-top:1rem; }
  .chess-result p:not(.chess-eyebrow) { font-size:.8rem; line-height:1.6; color:var(--chess-muted); margin-bottom:1rem; }
  .chess-result .ui-button { padding:.6rem .8rem; }
  .chess-flat { max-width:650px; margin:auto; }
  .chess-board-frame { --chess-coordinate-edge:clamp(1rem,3vw,1.6rem); display:grid; grid-template-columns:var(--chess-coordinate-edge) minmax(0,1fr) var(--chess-coordinate-edge); grid-template-rows:var(--chess-coordinate-edge) auto var(--chess-coordinate-edge); border:1px solid var(--chess-line); background:var(--chess-rim); }
  .chess-board { display:grid; grid-column:2; grid-row:2; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); width:100%; min-width:0; aspect-ratio:1; }
  .chess-coordinates { display:grid; color:var(--chess-ink); font:500 clamp(.6rem,1.5vw,.8rem)/1 var(--font-label); user-select:none; }
  .chess-coordinates span { display:grid; place-items:center; }
  .chess-coordinates--top,.chess-coordinates--bottom { grid-column:2; grid-template-columns:repeat(8,minmax(0,1fr)); }
  .chess-coordinates--top { grid-row:1; }.chess-coordinates--bottom { grid-row:3; }
  .chess-coordinates--left,.chess-coordinates--right { grid-row:2; grid-template-rows:repeat(8,minmax(0,1fr)); }
  .chess-coordinates--left { grid-column:1; }.chess-coordinates--right { grid-column:3; }
  .chess-board button { position:relative; background:var(--chess-tile-dark); border:0; border-radius:0; color:var(--chess-ivory); display:grid; place-items:center; min-width:0; padding:0; cursor:pointer; }
  .chess-board button[data-tone="1"] { background:var(--chess-tile-light); }
  .chess-piece-glyph { font:clamp(1.6rem,4.8vw,3.4rem)/1 Georgia,serif; text-shadow:0 1px 2px var(--chess-void); transform:scaleY(1.2); }
  .chess-board button[data-color="black"] .chess-piece-glyph { color:var(--chess-void); text-shadow:0 0 2px var(--chess-blue),0 1px 1px var(--chess-blue); }
  .chess-board button[data-last="true"] { box-shadow:inset 0 0 0 3px var(--chess-gold); }
  .chess-board button[data-selected="true"] { box-shadow:inset 0 0 0 4px var(--chess-blue); }
  .chess-board button[data-legal="true"]::after { content:""; position:absolute; width:22%; aspect-ratio:1; border-radius:50%; border:3px solid var(--chess-blue); background:var(--chess-void); opacity:.85; }
  .chess-board button[data-check="true"] { box-shadow:inset 0 0 0 4px var(--chess-danger); }
  .chess-board button:focus-visible { outline:3px solid var(--chess-blue); outline-offset:-4px; z-index:1; }
  .chess-guide { display:grid; grid-template-columns:1fr 1fr; gap:4rem; margin-top:4rem; }
  .chess-guide h2 { font:500 clamp(1.8rem,3vw,2.6rem)/1.15 var(--font-display); letter-spacing:-.04em; margin:1rem 0; }
  .chess-guide p { color:var(--muted); line-height:1.8; font-size:.93rem; }
  .chess-guide .ui-link { display:inline-flex; margin-top:1.5rem; }
  .chess-dialog { max-width:min(90vw,30rem); padding:2rem; }.chess-dialog h2 { margin-bottom:1rem; }.chess-dialog p { line-height:1.7; margin-bottom:1rem; }.chess-promotion-options { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-block:1rem; }
  .chess-hub-art { background:radial-gradient(ellipse at 15% 20%,var(--chess-night),var(--chess-void) 75%); color:var(--chess-ivory); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1.5rem; }
  .chess-hub-art .chess-hub-pieces { font:clamp(3rem,7vw,6rem) Georgia,serif; color:var(--chess-gold); }.chess-hub-art strong { font:500 1.5rem var(--font-display); letter-spacing:.08em; }
  @media(max-width:1000px) {
    .chess-join > div { flex-direction:column; }.chess-poster-caption { left:2rem; }.chess-match-heading { align-items:start; }.chess-toolbar { max-width:15rem; }.chess-play-layout { grid-template-columns:minmax(0,1fr) 205px; }.chess-stage { aspect-ratio:1; }
  }
  @media(max-width:760px) {
    .chess-intro { align-items:start; flex-direction:column; gap:.75rem; }.chess-intro > p { font-size:1.15rem; }.chess-intro > p br { display:none; }.chess-intro .ui-overline { margin-top:1.7rem; }
    .chess-lobby-layout { grid-template-columns:1fr; }.chess-poster { display:none; }.chess-departures { padding:1.5rem; }.chess-join > div { flex-direction:row; }.chess-guide { grid-template-columns:1fr; gap:2rem; }
    .chess-match-heading { flex-direction:column; gap:1rem; padding:1rem; }.chess-toolbar { max-width:none; justify-content:start; }.chess-play-layout { grid-template-columns:1fr; }.chess-playfield { border-right:0; padding:.6rem; }.chess-stage { aspect-ratio:1.08; }.chess-console { border-top:1px solid var(--chess-line); }.chess-move-scroll { max-height:180px; min-height:0; }.chess-game-actions { grid-template-columns:1fr 1fr; }
    .chess-piece-glyph { font-size:clamp(1.7rem,8vw,3.3rem); }.chess-flat { max-width:520px; margin:auto; }.chess-bar { padding:.8rem 1rem; }.chess-message { padding:.7rem 1rem; }
  }
  @media(max-width:380px) { .chess-join > div { flex-direction:column; }.chess-departures { padding:1rem; }.chess-player { align-items:start; }.chess-player-identity { gap:.35rem; }.chess-avatar { display:none; }.chess-bar [data-connection] { margin-left:0; }.chess-toolbar .ui-button { font-size:.65rem; padding:.4rem .5rem; }.chess-camera .ui-button { padding:.35rem .6rem; } }
}