:root {
      color-scheme: light;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #73c9f1;
      color: #173147;
    }
    * { box-sizing: border-box; }
    html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
    body {
      background: linear-gradient(#219fe3 0%, #55b7e7 100%);
      transition: background .8s ease;
    }
    body.mist-powered {
      background:
        radial-gradient(circle at 50% 52%, rgba(43, 230, 255, .34) 0 8%, rgba(85, 97, 255, .2) 25%, transparent 52%),
        radial-gradient(circle at 50% 92%, rgba(50, 245, 215, .26), transparent 48%),
        linear-gradient(145deg, #10558d 0%, #236eb1 44%, #55a8c5 72%, #acdcd4 100%);
    }
    button { font: inherit; }
    #scene {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      height: 100dvh;
    }
    canvas { display: block; width: 100%; height: 100%; cursor: grab; image-rendering: auto; touch-action: none; }
    canvas.is-dragging { cursor: grabbing; }
    .topbar {
      position: fixed;
      inset: 20px 22px auto 22px;
      z-index: 12;
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      pointer-events: none;
    }
    .brand,
    .controls {
      pointer-events: auto;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px;
      border: 1px solid rgba(255,255,255,.5);
      border-radius: 999px;
      background: rgba(246, 250, 244, .82);
      box-shadow: 0 16px 40px rgba(35, 81, 111, .16);
      backdrop-filter: blur(16px) saturate(1.2);
    }
    .brand { padding: 10px 16px 10px 11px; gap: 11px; }
    .brand--live {
      appearance: none;
      color: #173147;
      cursor: pointer;
      text-align: left;
      transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .brand--live:hover, .brand--live:focus-visible {
      border-color: rgba(255,255,255,.82);
      background: rgba(255,255,255,.94);
      box-shadow: 0 18px 46px rgba(35,81,111,.2);
      outline: none;
    }
    .brand-mark {
      width: 31px; height: 31px; display: grid; place-items: center;
      border-radius: 50%; background: #2a8fc8; color: white; font-size: 14px; font-weight: 900;
      box-shadow: inset 0 0 0 4px rgba(255,255,255,.18);
    }
    .brand strong { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
    .brand span { display: block; margin-top: 1px; color: #667d88; font: 500 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
    .control {
      min-height: 34px; padding: 0 13px; border: 0; border-radius: 999px;
      background: transparent; color: #294958; cursor: pointer; font-weight: 700; font-size: 12px;
    }
    .control:hover, .control:focus-visible { background: white; outline: none; }
    .control--story {
      padding-inline: 16px;
      color: white;
      background: #173f63;
      box-shadow: 0 8px 20px rgba(22, 67, 103, .2);
    }
    .control--story:hover, .control--story:focus-visible { color: white; background: #0f3150; }
    .control--mist {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #15506d;
      background: rgba(224, 247, 249, .84);
      box-shadow: inset 0 0 0 1px rgba(68, 191, 216, .18);
    }
    .control--mist::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #45cfe9;
      box-shadow: 0 0 9px rgba(54, 207, 234, .8);
    }
    .control--mist:hover,
    .control--mist:focus-visible,
    .control--mist[aria-pressed='true'] {
      color: white;
      background: #13779d;
      box-shadow: 0 7px 18px rgba(15, 104, 143, .24), inset 0 0 0 1px rgba(255,255,255,.16);
    }
    .control--live { display: inline-flex; align-items: center; gap: 7px; }
    .control--live::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #9aaab0;
      box-shadow: 0 0 0 0 rgba(34, 198, 134, 0);
      transition: background .2s ease, box-shadow .2s ease;
    }
    .control--live.is-active::before {
      background: #21c985;
      box-shadow: 0 0 0 4px rgba(33, 201, 133, .15), 0 0 12px rgba(33, 201, 133, .8);
    }
    .live-console {
      --hud-gold: #c8a15e;
      --hud-gold-light: #f4e0ad;
      --hud-ivory: #f4ead2;
      --hud-navy: #061d34;
      --hud-navy-deep: #031426;
      --hud-green: #70e247;
      position: fixed;
      z-index: 5;
      top: 12px;
      left: 50%;
      width: min(760px, calc(100vw - 580px));
      min-width: 620px;
      padding: 82px 22px 17px;
      overflow: hidden;
      isolation: isolate;
      color: var(--hud-ivory);
      background:
        linear-gradient(135deg, #fff8e7 0%, #d6bd88 18%, #fff2d1 48%, #b99150 72%, #f5e5bc 100%);
      clip-path: polygon(
        0 25px, 10px 25px, 10px 17px, 35% 17px, 35% 9px,
        43% 9px, 43% 0, 57% 0, 57% 9px, 65% 9px,
        65% 17px, calc(100% - 10px) 17px, calc(100% - 10px) 25px, 100% 25px,
        100% calc(100% - 24px), calc(100% - 10px) calc(100% - 24px),
        calc(100% - 10px) calc(100% - 14px), 57% calc(100% - 14px),
        54% 100%, 46% 100%, 43% calc(100% - 14px),
        10px calc(100% - 14px), 10px calc(100% - 24px), 0 calc(100% - 24px)
      );
      filter: drop-shadow(0 18px 26px rgba(2, 15, 27, .36)) drop-shadow(0 3px 3px rgba(3, 18, 28, .28));
      transform: translateX(-50%) scale(.58);
      transform-origin: top center;
      transition: opacity .25s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility .25s ease;
    }
    .live-console::before {
      content: '';
      position: absolute;
      z-index: 0;
      inset: 7px;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 2%, rgba(65, 99, 123, .2), transparent 35%),
        linear-gradient(180deg, #092743 0%, var(--hud-navy) 45%, var(--hud-navy-deep) 100%);
      box-shadow:
        inset 0 0 0 2px rgba(174, 135, 70, .92),
        inset 0 0 0 4px rgba(2, 13, 25, .75),
        inset 0 0 42px rgba(0, 7, 16, .45);
      clip-path: polygon(
        0 23px, 9px 23px, 9px 15px, 35% 15px, 35% 7px,
        43% 7px, 43% 0, 57% 0, 57% 7px, 65% 7px,
        65% 15px, calc(100% - 9px) 15px, calc(100% - 9px) 23px, 100% 23px,
        100% calc(100% - 20px), calc(100% - 9px) calc(100% - 20px),
        calc(100% - 9px) calc(100% - 11px), 57% calc(100% - 11px),
        54% 100%, 46% 100%, 43% calc(100% - 11px),
        9px calc(100% - 11px), 9px calc(100% - 20px), 0 calc(100% - 20px)
      );
    }
    .live-console::after {
      content: '';
      position: absolute;
      z-index: 1;
      inset: 14px 16px 20px;
      pointer-events: none;
      border: 1px solid rgba(204, 164, 94, .5);
      box-shadow: inset 0 0 18px rgba(196, 151, 76, .06);
    }
    body.live-ops-hidden .live-console {
      opacity: 0;
      visibility: hidden;
      transform: translate(-50%, -10px) scale(.55);
    }
    body.building-focused .live-console {
      opacity: 0;
      visibility: hidden;
      transform: translate(-50%, -12px) scale(.54);
      pointer-events: none;
    }
    .live-console__head,
    .live-console__title,
    .live-metrics,
    .live-flow,
    .live-flow__route,
    .live-flow__event { display: flex; align-items: center; }
    .live-console__head {
      position: relative;
      z-index: 2;
      justify-content: center;
      min-height: 24px;
      padding: 20px 16px 12px;
    }
    .live-console__crest {
      position: absolute;
      top: -78px;
      left: 50%;
      z-index: 4;
      display: grid;
      place-items: center;
      width: 70px;
      height: 70px;
      border: 4px solid #9c7135;
      border-radius: 50%;
      color: #d4aa5c;
      background: radial-gradient(circle at 40% 32%, #153553, #06172b 68%);
      box-shadow:
        0 0 0 3px var(--hud-gold-light),
        0 0 0 6px #87602e,
        0 8px 14px rgba(0, 8, 18, .45),
        inset 0 0 13px rgba(225, 186, 106, .16);
      font: 700 37px/1 Georgia, 'Times New Roman', serif;
      transform: translateX(-50%);
      text-shadow: 0 2px 0 #493017, 0 0 8px rgba(236, 194, 110, .24);
    }
    .live-console__crest::before,
    .live-console__crest::after {
      position: absolute;
      bottom: -12px;
      color: #bd9147;
      font: 700 34px/1 Georgia, serif;
      text-shadow: 0 2px 1px rgba(34, 20, 8, .65);
    }
    .live-console__crest::before { content: '❧'; right: 55px; transform: rotate(-35deg); }
    .live-console__crest::after { content: '❧'; left: 55px; transform: scaleX(-1) rotate(-35deg); }
    .live-console__title {
      display: block;
      min-width: 0;
      width: 100%;
      color: #d9c59b;
      text-align: center;
    }
    .live-console__eyebrow { display: none; }
    .live-console__title strong {
      display: block;
      overflow: hidden;
      font: 700 20px/1.1 Georgia, 'Times New Roman', serif;
      letter-spacing: .17em;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
      text-shadow: 0 2px 1px rgba(0, 7, 16, .9);
    }
    .live-console__level,
    .live-console__signal,
    .live-speed { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .live-metrics {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
      margin-top: 0;
      border: 1px solid rgba(181, 143, 80, .74);
      background: rgba(3, 16, 30, .54);
      box-shadow: 0 0 0 3px rgba(0, 8, 16, .5), inset 0 0 20px rgba(0, 6, 15, .28);
    }
    .live-metric {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-width: 0;
      min-height: 128px;
      padding: 16px 10px 14px;
      border-right: 1px solid rgba(181, 143, 80, .58);
    }
    .live-metric:last-child { border-right: 0; }
    .live-metric__icon {
      display: grid !important;
      place-items: center;
      order: 2;
      width: 38px;
      height: 38px;
      margin-top: 10px;
      overflow: visible !important;
      border: 2px solid rgba(187, 145, 75, .72);
      border-radius: 50%;
      color: #d0a457 !important;
      background: rgba(16, 40, 57, .54);
      box-shadow: inset 0 0 0 2px rgba(3, 15, 27, .75), 0 3px 8px rgba(0, 5, 12, .28);
      font: 700 21px/1 Georgia, 'Times New Roman', serif !important;
      text-shadow: 0 1px 0 #2a1b0a;
    }
    .live-metric__icon svg {
      width: 25px;
      height: 25px;
      overflow: visible;
      fill: currentColor;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .live-metric__copy { display: contents; min-width: 0; }
    .live-metric__label {
      order: 1;
      display: block;
      overflow: hidden;
      color: #ccb98f;
      font: 800 20px/1 'Arial Narrow', Inter, sans-serif;
      letter-spacing: .08em;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .live-metric strong {
      order: 3;
      display: block;
      margin-top: 10px;
      color: #fff9ed;
      font: 700 30px/1 Georgia, 'Times New Roman', serif;
      letter-spacing: .01em;
      text-shadow: 0 2px 2px rgba(0, 5, 13, .85);
      white-space: nowrap;
    }
    .live-metric small { display: none; }
    .live-meter { display: none; }
    .live-flow {
      display: none;
      position: relative;
      z-index: 2;
      justify-content: center;
      min-height: 34px;
      margin-top: 0;
      padding: 10px 7px 0;
    }
    .live-network { display: flex; align-items: center; justify-content: center; min-width: 0; }
    .live-network__label,
    .live-flow__route,
    .live-flow__event { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .live-network__health {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: #83d54c;
      font: 800 12px/1 Georgia, 'Times New Roman', serif;
      letter-spacing: .14em;
      white-space: nowrap;
    }
    .live-network__health::before {
      content: '';
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #65df42;
      box-shadow: 0 0 0 2px rgba(43, 91, 26, .85), 0 0 10px rgba(106, 228, 68, .4);
    }
    .live-stage.is-active { background: #43c6ec; }
    body.story-active .live-console { opacity: .28; transform: translate(-50%, -6px) scale(.56); pointer-events: none; }
    @keyframes live-breathe { 50% { opacity: .62; transform: scale(.78); } }
    .district-activity-layer {
      position: fixed;
      inset: 0;
      z-index: 3;
      overflow: hidden;
      pointer-events: none;
      transition: opacity .25s ease, visibility .25s ease;
    }
    .district-activity {
      --activity-accent: #66d4ee;
      --activity-x: 0px;
      --activity-y: 0px;
      --activity-tail-x: 0px;
      position: absolute;
      top: 0;
      left: 0;
      width: 158px;
      padding: 9px 10px 10px;
      color: #f9f2df;
      background:
        linear-gradient(135deg, rgba(255,255,255,.08), transparent 38%),
        linear-gradient(180deg, rgba(9,37,61,.96), rgba(3,20,36,.96));
      border: 1px solid rgba(220,185,119,.72);
      border-radius: 8px 8px 10px 10px;
      box-shadow:
        0 0 0 2px rgba(2,15,28,.64),
        0 12px 28px rgba(2,15,28,.32),
        inset 0 0 18px rgba(0,0,0,.22);
      transform: translate3d(var(--activity-x), var(--activity-y), 0) translate(-50%, calc(-100% - 24px));
      transform-origin: 50% 100%;
      opacity: 1;
      cursor: pointer;
      pointer-events: auto;
      will-change: transform, opacity;
      transition: width .24s ease, opacity .24s ease, filter .24s ease;
    }
    .district-activity:hover,
    .district-activity:focus-visible {
      border-color: rgba(255,225,166,.96);
      filter: brightness(1.09);
      outline: none;
    }
    .district-activity::before {
      content: '';
      position: absolute;
      top: 0;
      left: 10px;
      right: 10px;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--activity-accent), transparent);
      box-shadow: 0 0 10px var(--activity-accent);
    }
    .district-activity::after {
      content: '';
      position: absolute;
      left: calc(50% + var(--activity-tail-x));
      top: 100%;
      width: 1px;
      height: 25px;
      background: linear-gradient(var(--activity-accent), rgba(255,255,255,.12));
      box-shadow: 0 0 7px color-mix(in srgb, var(--activity-accent) 62%, transparent);
    }
    .district-activity__pin {
      position: absolute;
      left: calc(50% + var(--activity-tail-x));
      top: calc(100% + 22px);
      width: 7px;
      height: 7px;
      border: 1px solid rgba(255,255,255,.9);
      background: var(--activity-accent);
      box-shadow: 0 0 0 3px rgba(5,27,44,.72), 0 0 12px var(--activity-accent);
      transform: translateX(-50%) rotate(45deg);
    }
    .district-activity__head {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      color: #d8c395;
      font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: .11em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .district-activity__pulse {
      flex: 0 0 auto;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--activity-accent);
      box-shadow: 0 0 9px var(--activity-accent);
      animation: activity-pulse 1.5s ease-in-out infinite;
    }
    .district-activity__head strong {
      overflow: hidden;
      color: #f3dfb6;
      text-overflow: ellipsis;
    }
    .district-activity__live {
      margin-left: auto;
      color: #6ee5a6;
      font-size: 7px;
      letter-spacing: .08em;
    }
    .district-activity__primary {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin-top: 7px;
      min-width: 0;
    }
    .district-activity__primary b {
      color: #fffaf0;
      font: 700 18px/1 Georgia, 'Times New Roman', serif;
      letter-spacing: .01em;
      text-shadow: 0 2px 2px rgba(0,0,0,.5);
      white-space: nowrap;
    }
    .district-activity__primary span {
      overflow: hidden;
      color: #9db5bf;
      font: 700 8px/1.15 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: .06em;
      text-overflow: ellipsis;
      text-transform: uppercase;
    }
    .district-activity__details {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 5px;
      max-height: 0;
      margin-top: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height .24s ease, margin-top .24s ease, opacity .2s ease;
    }
    .district-activity__stat {
      min-width: 0;
      padding: 6px 4px 5px;
      border: 1px solid rgba(193,158,96,.25);
      border-radius: 5px;
      background: rgba(255,255,255,.035);
      text-align: center;
    }
    .district-activity__stat span {
      display: block;
      overflow: hidden;
      color: #7f9ba7;
      font: 700 6px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: .05em;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .district-activity__stat b {
      display: block;
      margin-top: 4px;
      overflow: hidden;
      color: #f5e6c6;
      font: 700 10px/1 Georgia, 'Times New Roman', serif;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .district-activity[data-lod='medium'] { width: 176px; }
    .district-activity[data-lod='medium'] .district-activity__details {
      grid-template-columns: 1fr;
      max-height: 40px;
      margin-top: 7px;
      opacity: 1;
    }
    .district-activity[data-lod='medium'] .district-activity__stat { display: none; }
    .district-activity[data-lod='medium'] .district-activity__stat:first-child {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-inline: 7px;
      text-align: left;
    }
    .district-activity[data-lod='medium'] .district-activity__stat:first-child b { margin-top: 0; }
    .district-activity[data-lod='detail'] {
      width: 248px;
      padding: 12px 13px 13px;
      border-color: rgba(238,202,132,.9);
      box-shadow:
        0 0 0 2px rgba(2,15,28,.72),
        0 18px 44px rgba(2,15,28,.4),
        0 0 22px color-mix(in srgb, var(--activity-accent) 22%, transparent),
        inset 0 0 24px rgba(0,0,0,.24);
    }
    .district-activity[data-lod='detail'] .district-activity__head { font-size: 10px; }
    .district-activity[data-lod='detail'] .district-activity__primary b { font-size: 28px; }
    .district-activity[data-lod='detail'] .district-activity__primary span { font-size: 9px; }
    .district-activity[data-lod='detail'] .district-activity__details {
      max-height: 58px;
      margin-top: 9px;
      opacity: 1;
    }
    .district-activity.is-muted { opacity: .1; filter: saturate(.25); }
    .district-activity.is-muted:hover,
    .district-activity.is-muted:focus-visible { opacity: .34; }
    .district-activity.is-offscreen { opacity: 0; visibility: hidden; }
    body.live-ops-hidden .district-activity-layer,
    body.story-active .district-activity-layer { opacity: 0; visibility: hidden; }
    body.mist-command-active .district-activity-layer { z-index: 9; opacity: 1; filter: none; }
    body.mist-command-active .district-activity[data-district="fairshare"]::after,
    body.mist-command-active .district-activity[data-district="droplets"]::after,
    body.mist-command-active .district-activity[data-district="repapp"]::after,
    body.mist-command-active .district-activity[data-district="fairshare"] .district-activity__pin,
    body.mist-command-active .district-activity[data-district="droplets"] .district-activity__pin,
    body.mist-command-active .district-activity[data-district="repapp"] .district-activity__pin { display: none; }
    @keyframes activity-pulse { 50% { opacity: .45; transform: scale(.7); } }
    #scene { transition: filter .28s ease; }
    body.mist-command-active #scene { filter: brightness(.98) saturate(.98); }
    .mist-command-shell {
      position: fixed;
      inset: 0;
      z-index: 8;
      display: grid;
      place-items: center;
      padding: 88px 24px 64px;
      pointer-events: none;
      opacity: 0;
      transition: opacity .25s ease;
    }
    .mist-command-shell[hidden] { display: none; }
    .mist-command-shell.is-open { opacity: 1; }
    .mist-command-card {
      position: relative;
      width: min(460px, calc(100vw - 48px));
      padding: 20px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.68);
      border-radius: 26px;
      color: #122d40;
      background:
        linear-gradient(145deg, rgba(255,255,255,.58), rgba(225,246,249,.34) 48%, rgba(255,255,255,.44)),
        rgba(225, 244, 246, .24);
      box-shadow:
        0 28px 80px rgba(4, 35, 55, .22),
        0 5px 18px rgba(4, 35, 55, .13),
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 -1px 0 rgba(56,137,163,.16);
      backdrop-filter: blur(28px) saturate(1.35);
      -webkit-backdrop-filter: blur(28px) saturate(1.35);
      pointer-events: auto;
      text-align: center;
      transform: translateY(14px) scale(.985);
      transition: transform .32s cubic-bezier(.2,.8,.2,1);
    }
    .mist-command-card::before {
      content: '';
      position: absolute;
      inset: 1px 12% auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
      pointer-events: none;
    }
    .mist-command-shell.is-open .mist-command-card { transform: translateY(0) scale(1); }
    .mist-command-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 9px;
      color: #2a829d;
      font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .mist-command-kicker::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #4de6ed;
      box-shadow: 0 0 0 4px rgba(77,230,237,.14), 0 0 14px rgba(77,230,237,.9);
    }
    .mist-command-card h2 {
      margin: 0;
      color: #153449;
      font-size: clamp(22px, 2.15vw, 28px);
      font-weight: 650;
      letter-spacing: -.045em;
    }
    .mist-command-lede {
      margin: 6px 0 14px;
      color: #58727d;
      font-size: 12px;
    }
    .mist-composer {
      padding: 13px 14px 10px;
      border: 1px solid rgba(255,255,255,.78);
      border-radius: 22px;
      background: rgba(251, 253, 250, .68);
      box-shadow:
        0 12px 32px rgba(2, 25, 43, .11),
        inset 0 0 0 1px rgba(28, 98, 127, .08);
      text-align: left;
      backdrop-filter: blur(16px) saturate(1.1);
    }
    .mist-composer textarea {
      display: block;
      width: 100%;
      min-height: 50px;
      max-height: 140px;
      padding: 0;
      resize: none;
      overflow-y: auto;
      border: 0;
      outline: 0;
      color: #163246;
      background: transparent;
      font: 500 16px/1.45 Inter, ui-sans-serif, system-ui, sans-serif;
    }
    .mist-composer textarea::placeholder { color: #8a989d; }
    .mist-composer-toolbar {
      display: flex;
      align-items: center;
      gap: 11px;
      min-height: 36px;
      margin-top: 5px;
    }
    .mist-composer-plus {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border: 1px solid rgba(18, 58, 78, .14);
      border-radius: 50%;
      color: #24495c;
      background: #f4f6f2;
      font-size: 21px;
      line-height: 1;
    }
    .mist-composer-model {
      margin-left: auto;
      color: #58717c;
      font: 750 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .mist-composer-mic {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      color: #284b5d;
      font-size: 19px;
    }
    .mist-composer-mic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
    .mist-composer-submit {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      color: white;
      background: #173f63;
      cursor: pointer;
      font-size: 20px;
      box-shadow: 0 8px 18px rgba(18, 64, 93, .24);
      transition: transform .18s ease, background .18s ease, opacity .18s ease;
    }
    .mist-composer-submit:hover,
    .mist-composer-submit:focus-visible { background: #0d769a; outline: none; transform: translateY(-1px); }
    .mist-composer-submit:disabled { cursor: default; opacity: .28; transform: none; }
    .mist-command-result {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 11px 3px 0;
      padding: 10px 12px;
      border: 1px solid rgba(65, 164, 187, .18);
      border-radius: 13px;
      color: #244d60;
      background: rgba(230, 250, 250, .48);
      box-shadow: 0 8px 24px rgba(1, 23, 38, .08);
      text-align: left;
      backdrop-filter: blur(16px);
    }
    .mist-command-result[hidden] { display: none; }
    .mist-command-result__pulse {
      flex: 0 0 auto;
      width: 8px;
      height: 8px;
      margin-top: 5px;
      border-radius: 50%;
      background: #52e4e8;
      box-shadow: 0 0 12px rgba(82,228,232,.9);
      animation: activity-pulse 1.25s ease-in-out infinite;
    }
    .mist-command-result strong { display: block; font-size: 12px; letter-spacing: .03em; }
    .mist-command-result span:last-child { display: block; margin-top: 3px; color: #65808a; font-size: 11px; line-height: 1.4; }
    body.mist-command-active .status { opacity: 0; }
    .status {
      position: fixed; z-index: 4; left: 50%; bottom: 20px; transform: translateX(-50%);
      display: flex; align-items: center; gap: 12px; min-width: 320px; justify-content: center;
      padding: 10px 16px; border-radius: 999px; background: rgba(248,250,244,.78);
      border: 1px solid rgba(255,255,255,.55); box-shadow: 0 14px 40px rgba(25,77,112,.13);
      backdrop-filter: blur(16px); color: #496370; font-size: 11px; pointer-events: none;
    }
    .status b { color: #21485f; text-transform: uppercase; letter-spacing: .11em; font-size: 10px; }
    .dot { width: 5px; height: 5px; border-radius: 50%; background: #5fb2d9; }
    #loading {
      position: fixed; inset: 0; z-index: 10; display: grid; place-items: center;
      background: linear-gradient(#53b8eb, #cde9e7); color: white;
      transition: opacity .42s ease, visibility .42s ease;
    }
    .is-ready #loading { opacity: 0; visibility: hidden; }
    .loader-card { text-align: center; text-shadow: 0 2px 18px rgba(0,65,105,.24); }
    .loader-mark { margin: 0 auto 16px; width: 44px; height: 44px; border: 7px solid rgba(255,255,255,.34); border-top-color: white; border-radius: 50%; animation: spin .8s linear infinite; }
    .loader-card strong { display: block; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; }
    .loader-card span { display: block; margin-top: 7px; font-size: 12px; opacity: .82; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .story-panel {
      position: fixed;
      z-index: 9;
      left: 28px;
      bottom: 26px;
      width: min(510px, calc(100vw - 56px));
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .72);
      border-radius: 26px;
      background: rgba(250, 248, 241, .94);
      box-shadow: 0 28px 80px rgba(15, 47, 70, .28), 0 4px 18px rgba(15, 47, 70, .1);
      backdrop-filter: blur(22px) saturate(1.12);
      transform: translateY(18px) scale(.985);
      opacity: 0;
      transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
    }
    .story-panel.is-open { transform: translateY(0) scale(1); opacity: 1; }
    .story-progress { height: 4px; overflow: hidden; background: rgba(44, 91, 119, .1); }
    .story-progress span {
      display: block;
      width: 0;
      height: 100%;
      border-radius: 0 999px 999px 0;
      background: linear-gradient(90deg, #46b8dd, #317dcc);
      transition: width .45s cubic-bezier(.2,.8,.2,1);
    }
    .story-inner { padding: 22px 24px 20px; }
    .story-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .story-kicker {
      color: #2d91b5;
      font: 800 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .story-exit {
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      padding: 0;
      border: 1px solid rgba(38, 67, 80, .13);
      border-radius: 50%;
      background: rgba(255,255,255,.7);
      color: #4c6068;
      cursor: pointer;
      font-size: 20px;
      line-height: 1;
    }
    .story-exit:hover, .story-exit:focus-visible { background: white; color: #183a51; outline: none; }
    .story-panel h2 {
      max-width: 440px;
      margin: 13px 0 11px;
      color: #172e3e;
      font-size: clamp(25px, 2.4vw, 36px);
      line-height: 1.04;
      letter-spacing: -.045em;
    }
    .story-copy {
      margin: 0;
      color: #56686e;
      font-size: 15px;
      line-height: 1.58;
    }
    .story-copy b { color: #203c4c; font-weight: 780; }
    .story-example {
      display: grid;
      gap: 6px;
      margin-top: 16px;
      padding: 13px 15px;
      border: 1px solid rgba(64, 160, 194, .24);
      border-radius: 16px;
      background: rgba(228, 247, 248, .62);
    }
    .story-example[hidden] { display: none; }
    .story-example-label {
      color: #2385aa;
      font: 800 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: .15em;
      text-transform: uppercase;
    }
    .story-example strong { color: #183c50; font-size: 13px; line-height: 1.35; }
    .story-example span:last-child { color: #61757b; font-size: 12px; line-height: 1.45; }
    .story-actions { display: flex; align-items: center; gap: 9px; margin-top: 20px; }
    .story-action {
      min-height: 42px;
      padding: 0 17px;
      border: 1px solid rgba(34, 72, 94, .14);
      border-radius: 999px;
      background: white;
      color: #294958;
      cursor: pointer;
      font-weight: 800;
      font-size: 12px;
    }
    .story-action:disabled { opacity: .35; cursor: default; }
    .story-action--next { margin-left: auto; padding-inline: 22px; border-color: transparent; background: #173f63; color: white; }
    .story-action--next:hover, .story-action--next:focus-visible { background: #0f3150; outline: none; }
    .story-position { min-width: 42px; color: #839297; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
    body.story-active .status { opacity: 0; }
    @media (max-width: 680px) {
      .topbar { inset: 12px; }
      .brand span { display: none; }
      .controls { gap: 2px; }
      .control { padding-inline: 10px; }
      .control--story { padding-inline: 13px; }
      .live-console { top: 66px; width: calc(100vw - 16px); min-width: 0; padding: 69px 14px 22px; }
      .live-console { transform: translateX(-50%) scale(.88); }
      body.live-ops-hidden .live-console { transform: translate(-50%, -10px) scale(.84); }
      body.story-active .live-console { transform: translate(-50%, -6px) scale(.86); }
      .live-console__crest { top: -65px; }
      .live-console__crest { width: 58px; height: 58px; font-size: 30px; }
      .live-console__crest::before { right: 45px; }
      .live-console__crest::after { left: 45px; }
      .live-console__title strong { font-size: 13px; letter-spacing: .11em; }
      .live-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .live-metric { min-height: 86px; padding: 10px 6px; }
      .live-metric:nth-child(2) { border-right: 0; }
      .live-metric:nth-child(-n+2) { border-bottom: 1px solid rgba(181, 143, 80, .58); }
      .live-metric__icon { width: 28px; height: 28px; margin-top: 6px; font-size: 16px !important; }
      .live-metric__icon svg { width: 19px; height: 19px; }
      .live-metric strong { margin-top: 6px; font-size: 22px; }
      .live-metric__label { font-size: 13px; }
      .status { min-width: 0; width: calc(100% - 24px); bottom: 12px; }
      #metrics { display: none; }
      .story-panel { left: 10px; bottom: 10px; width: calc(100vw - 20px); border-radius: 22px; }
      .story-inner { padding: 18px 18px 16px; }
      .story-panel h2 { margin-top: 10px; font-size: 27px; }
      .story-copy { font-size: 14px; line-height: 1.5; }
      .mist-command-shell { padding: 84px 12px 54px; }
      .mist-command-card { width: 100%; }
      .mist-command-card h2 { font-size: 26px; }
      .mist-command-lede { margin-bottom: 17px; }
      .mist-composer { padding: 16px 16px 13px; border-radius: 22px; }
      .mist-composer textarea { min-height: 100px; font-size: 17px; }
      .mist-composer-model { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .loader-mark { animation: none; }
      .story-panel, .story-progress span { transition: none; }
      .live-pulse { animation: none; }
    }
    @media (min-width: 1181px) and (max-width: 1350px) {
      .live-console { top: 78px; left: 50%; width: min(700px, calc(100vw - 520px)); min-width: 600px; }
      .live-metric strong { font-size: 30px; }
      .live-console__title strong { font-size: 20px; }
    }
    @media (min-width: 681px) and (max-width: 1180px) {
      .live-console { top: 76px; width: min(680px, calc(100vw - 32px)); min-width: 0; }
      .live-metric strong { font-size: 28px; }
      .live-console__title strong { font-size: 18px; }
      .live-metric__label { font-size: 17px; }
    }

/* Fluid World 2 website-only scrollytelling layer.
   This file is appended during deployment and never touches voxel-paris-v2.html. */
html.fw2-scroll-mode,
body.fw2-scroll-mode {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
}

body.fw2-scroll-mode #scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

html.fw2-site-scroll .topbar { inset: 84px 22px auto 22px; }

body.fw2-scroll-mode #scene canvas { pointer-events: none; }
body.fw2-scroll-mode .topbar,
body.fw2-scroll-mode .status,
body.fw2-scroll-mode .story-panel,
body.fw2-scroll-mode .district-activity-layer,
body.fw2-scroll-mode .live-console {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.fw2-scroll-story {
  --scroll-ink: #102b42;
  --scroll-muted: #607780;
  --scroll-blue: #277da5;
  --scroll-cyan: #53d4e7;
  --scroll-ivory: rgba(252, 250, 243, .89);
  position: relative;
  z-index: 8;
  width: 100%;
  color: var(--scroll-ink);
  pointer-events: none;
  isolation: isolate;
}

.fw2-scroll-story::before {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 39, 62, .13), transparent 30% 70%, rgba(8, 39, 62, .1)),
    linear-gradient(180deg, rgba(30, 121, 169, .06), transparent 28% 72%, rgba(8, 46, 72, .12));
}

.fw2-scroll-meter {
  position: fixed;
  z-index: 14;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  overflow: hidden;
  background: rgba(255,255,255,.28);
  box-shadow: 0 1px 0 rgba(15, 53, 76, .08);
}

.fw2-scroll-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #3cc8e2, #386ecf 66%, #8065ea);
  box-shadow: 0 0 18px rgba(66, 203, 233, .74);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}

.fw2-scroll-count {
  position: fixed;
  z-index: 13;
  right: 24px;
  top: 84px;
  min-width: 72px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 999px;
  color: #254b61;
  background: rgba(248, 251, 247, .76);
  box-shadow: 0 12px 34px rgba(20, 64, 91, .14);
  backdrop-filter: blur(18px) saturate(1.2);
  font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  text-align: center;
}

.fw2-scroll-intro,
.fw2-scroll-finale,
.fw2-scroll-step {
  position: relative;
  width: 100%;
  min-height: 100svh;
}

.fw2-scroll-intro {
  display: flex;
  align-items: flex-end;
  padding: 9vh clamp(24px, 5vw, 82px);
}

.fw2-scroll-intro__card,
.fw2-scroll-finale__card {
  pointer-events: auto;
  width: min(680px, calc(100vw - 48px));
  padding: clamp(25px, 4vw, 48px);
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(241,248,245,.75)),
    rgba(250, 249, 242, .82);
  box-shadow: 0 34px 90px rgba(11, 49, 73, .24), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(26px) saturate(1.16);
}

.fw2-scroll-eyebrow,
.fw2-scroll-card__kicker {
  color: #278eb3;
  font: 850 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.fw2-scroll-intro h1,
.fw2-scroll-finale h2 {
  margin: 15px 0 15px;
  color: #102c43;
  font-size: clamp(42px, 5vw, 76px);
  line-height: .98;
  letter-spacing: -.055em;
}

.fw2-scroll-intro p,
.fw2-scroll-finale p {
  max-width: 600px;
  margin: 0;
  color: #536c77;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.55;
}

.fw2-scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
  color: #214b62;
  font: 800 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fw2-scroll-cue i {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 34px;
  border: 1.5px solid rgba(25, 70, 94, .44);
  border-radius: 999px;
}

.fw2-scroll-cue i::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  width: 4px;
  height: 7px;
  border-radius: 999px;
  background: #2a9bc1;
  transform: translateX(-50%);
  animation: fw2-scroll-cue 1.8s ease-in-out infinite;
}

@keyframes fw2-scroll-cue {
  0%, 100% { transform: translate(-50%, 0); opacity: .35; }
  45% { transform: translate(-50%, 11px); opacity: 1; }
}

.fw2-scroll-chapters { position: relative; }

.fw2-scroll-step {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 94svh;
  padding: 12vh clamp(24px, 5vw, 82px);
  content-visibility: auto;
  contain-intrinsic-size: auto 94svh;
}

.fw2-scroll-step[data-side='right'] { justify-content: flex-start; }

.fw2-scroll-card {
  position: relative;
  width: min(455px, calc(100vw - 48px));
  padding: 24px 26px 25px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(244,248,243,.78)),
    var(--scroll-ivory);
  box-shadow: 0 26px 72px rgba(12, 46, 68, .22), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(24px) saturate(1.13);
  opacity: .18;
  transform: translateY(28px) scale(.94);
  transition:
    opacity .5s ease,
    transform .65s cubic-bezier(.2,.8,.2,1),
    border-color .4s ease,
    box-shadow .5s ease;
}

.fw2-scroll-step[data-side='left'] .fw2-scroll-card { transform: translate(-24px, 28px) scale(.94); }
.fw2-scroll-step[data-side='right'] .fw2-scroll-card { transform: translate(-24px, 28px) scale(.94); }

.fw2-scroll-step.is-active .fw2-scroll-card {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  border-color: rgba(132, 225, 235, .82);
  box-shadow: 0 32px 88px rgba(9, 42, 64, .28), 0 0 0 1px rgba(72, 191, 218, .12), inset 0 1px 0 white;
}

.fw2-scroll-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4ecfe0, #477bd5);
  opacity: .8;
}

.fw2-scroll-card--mist::before { background: linear-gradient(90deg, #49e3e6, #6269f0, #a15ce4); }
.fw2-scroll-card--mist { background: linear-gradient(145deg, rgba(244,255,255,.94), rgba(238,241,255,.82)); }
.fw2-scroll-card--final::before { background: linear-gradient(90deg, #e7bd68, #55cee2); }

.fw2-scroll-card__number {
  float: right;
  margin: -2px 0 8px 16px;
  color: rgba(42, 115, 147, .38);
  font: 800 27px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -.08em;
}

.fw2-scroll-card h2 {
  clear: both;
  max-width: 420px;
  margin: 12px 0 10px;
  color: #142e41;
  font-size: clamp(27px, 2.5vw, 38px);
  line-height: 1.03;
  letter-spacing: -.045em;
}

.fw2-scroll-card p {
  margin: 0;
  color: #405d67;
  font-size: clamp(17px, 1.18vw, 19px);
  line-height: 1.58;
}

.fw2-scroll-finale {
  display: grid;
  place-items: center;
  min-height: 112svh;
  padding: 14vh 24px 18vh;
  text-align: center;
}

.fw2-scroll-finale__card { width: min(760px, calc(100vw - 48px)); }

.fw2-scroll-finale button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  margin-top: 26px;
  padding: 0 25px;
  border: 0;
  border-radius: 999px;
  color: white;
  background: #143f61;
  box-shadow: 0 15px 34px rgba(16, 61, 94, .25);
  cursor: pointer;
  font-weight: 850;
}

.fw2-scroll-finale button:hover,
.fw2-scroll-finale button:focus-visible {
  outline: none;
  background: #0d304c;
  transform: translateY(-1px);
}

.fw2-scroll-story[hidden] { display: none !important; }

@media (max-width: 760px) {
  html.fw2-site-scroll .topbar { inset: 76px 12px auto 12px; }
  .fw2-scroll-count { top: 78px; right: 14px; }
  .fw2-scroll-intro { align-items: flex-end; padding: 90px 14px 28px; }
  .fw2-scroll-intro__card,
  .fw2-scroll-finale__card { width: 100%; padding: 24px 21px; border-radius: 24px; }
  .fw2-scroll-intro h1,
  .fw2-scroll-finale h2 { font-size: clamp(38px, 11vw, 54px); }
  .fw2-scroll-step,
  .fw2-scroll-step[data-side='right'] {
    align-items: flex-end;
    justify-content: center;
    min-height: 100svh;
    padding: 18vh 12px 5vh;
  }
  .fw2-scroll-card { width: 100%; padding: 21px 21px 22px; border-radius: 21px; }
  .fw2-scroll-card h2 { font-size: 28px; }
  .fw2-scroll-story::before {
    background: linear-gradient(180deg, transparent 0 48%, rgba(10, 45, 67, .12) 75%, rgba(10, 45, 67, .24));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.fw2-scroll-mode,
  body.fw2-scroll-mode { scroll-behavior: auto; }
  .fw2-scroll-card,
  .fw2-scroll-meter span { transition: none; }
  .fw2-scroll-cue i::after { animation: none; }
}

/* ---- GLOBAL PASS · the bespoke mega-dropdown nav was deleted here ----
   The `nav{position:fixed}` ELEMENT selector that led this block is why it
   had to go rather than just be left dead: the canonical chassis puts a real
   <nav class="nav-actions"> inside the header, and an element-wide
   `position:fixed` would have ripped the link row out of the bar. The
   `.tdd-*` panel, its thumbnails, its stagger animation and the last
   hardcoded "SF Mono" on this page went with it. */

/* ============================================================================
   WE-COMMERCE BRAND LAYER — Cité Fluid (tour)
   Restyle 2026-07. Re-skins only the DOM/CSS that sits OVER the voxel city:
   the scroll-story cards, the intro title, the scene chrome and the dialogs.
   three.min.js / we-three-world2.min.js / #scene / canvas are untouched.
   Conventions: BRAND-SYSTEM-INDEX §1 tears · §2 paper · §6 type · §8 buttons.
   ============================================================================ */

/* --- tokens lifted verbatim from the gold reference (assets/teardown-rhode.css):
       procedural paper, shadow tiers, repeating tear tiles. Page-local by
       design — this theme has no shared token layer. --- */
:root{

  --pp-grain-w:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27g%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.95%27%20numOctaves%3D%272%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%270.5%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%270.5%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%270.5%27%2F%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270%27%20intercept%3D%270.52%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E");
  --pp-speck-w:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27s%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.46%27%20numOctaves%3D%273%27%20seed%3D%2710%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27discrete%27%20tableValues%3D%270%200%200%200%200%200%200%200%200%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%27%2F%3E%3CfeFuncG%20type%3D%27discrete%27%20tableValues%3D%270%200%200%200%200%200%200%200%200%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%27%2F%3E%3CfeFuncB%20type%3D%27discrete%27%20tableValues%3D%270%200%200%200%200%200%200%200%200%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%27%2F%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270%27%20intercept%3D%270.64%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23s%29%27%2F%3E%3C%2Fsvg%3E");
  --pp-grain-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27g%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%271.8%27%20numOctaves%3D%274%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%27-0.5%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%27-0.5%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%27-0.5%27%2F%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270%27%20intercept%3D%270.32%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E");
  --pp-speck-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27s%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.52%27%20numOctaves%3D%274%27%20seed%3D%271%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27discrete%27%20tableValues%3D%271%201%201%201%201%201%201%201%201%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%27%2F%3E%3CfeFuncG%20type%3D%27discrete%27%20tableValues%3D%271%201%201%201%201%201%201%201%201%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%27%2F%3E%3CfeFuncB%20type%3D%27discrete%27%20tableValues%3D%271%201%201%201%201%201%201%201%201%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%27%2F%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270%27%20intercept%3D%270.34%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23s%29%27%2F%3E%3C%2Fsvg%3E");
  --pp-g-size:304px 304px;
  --pp-s-size:280px 280px;
  --pp-gb-size:304px 304px;
  --pp-sb-size:800px 800px} :root{ --hand:"FluidHand",Inter,-apple-system,sans-serif;

  --sh-rgb:0,0,0;
  --sh1-y:16px;
  --sh1-blur:34px;
  --sh1-spread:-20px;
  --sh1-aa:.5;
  --sh1-ca:.28;
  --shadow-1:0 2px 3px rgba(var(--sh-rgb),var(--sh1-ca)),0 var(--sh1-y) var(--sh1-blur) var(--sh1-spread) rgba(var(--sh-rgb),var(--sh1-aa));
  --sh2-x:2px;
  --sh2-y:9px;
  --sh2-blur:12px;
  --sh2-a:.5;
  --sh2-cy:3px;
  --sh2-cblur:3px;
  --sh2-ca:.3;
  --slip-shadow:drop-shadow(0 var(--sh2-cy) var(--sh2-cblur) rgba(var(--sh-rgb),var(--sh2-ca))) drop-shadow(var(--sh2-x) var(--sh2-y) var(--sh2-blur) rgba(var(--sh-rgb),var(--sh2-a)));
  --shadow-1-hover:0 2px 3px rgba(var(--sh-rgb),var(--sh1-ca)),0 calc(var(--sh1-y) + 8px) calc(var(--sh1-blur) + 8px) calc(var(--sh1-spread) + 4px) rgba(var(--sh-rgb),calc(var(--sh1-aa) + .12));
  --slip-shadow-hover:drop-shadow(0 var(--sh2-cy) var(--sh2-cblur) rgba(var(--sh-rgb),var(--sh2-ca))) drop-shadow(calc(var(--sh2-x) + 1px) calc(var(--sh2-y) + 4px) calc(var(--sh2-blur) + 4px) rgba(var(--sh-rgb),calc(var(--sh2-a) + .15)));
  --t3-y:2px;
  --t3-blur:3px;
  --t3-a:.24;
  --tear-sh:drop-shadow(0 var(--t3-y) var(--t3-blur) rgba(var(--sh-rgb),var(--t3-a)));
  --tear-sh-up:drop-shadow(0 calc(0px - var(--t3-y)) var(--t3-blur) rgba(var(--sh-rgb),var(--t3-a)));
  --tear-sh-strong:drop-shadow(0 var(--t3-y) var(--t3-blur) rgba(var(--sh-rgb),calc(var(--t3-a) * 1.7)));
  --shadow-1-d:drop-shadow(0 2px 3px rgba(var(--sh-rgb),var(--sh1-ca))) drop-shadow(0 var(--sh1-y) calc(var(--sh1-blur) * .7) rgba(var(--sh-rgb),var(--sh1-aa)));
  --tear-slip:drop-shadow(0 var(--t3-y) var(--t3-blur) rgba(var(--sh-rgb),calc(var(--t3-a) * .7))) drop-shadow(0 calc(var(--t3-y) * 3.5) calc(var(--t3-blur) * 4) rgba(var(--sh-rgb),calc(var(--t3-a) * 1.4)));
  --tear-box:0 calc(var(--t3-y) + 6px) calc(var(--t3-blur) * 6) calc(-1 * (var(--t3-blur) + 8px)) rgba(var(--sh-rgb),calc(var(--t3-a) * 2.2));

  --tx1:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2048'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='300'%20height='48'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.02%200.052'%20numOctaves='3'%20seed='131'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='19'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-4,-12%20304,-12%20304,24%20-4,24'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tx2:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2048'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='300'%20height='48'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.017%200.045'%20numOctaves='3'%20seed='137'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='20'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-4,-12%20304,-12%20304,24%20-4,24'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tx3:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2048'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='300'%20height='48'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.025%200.05'%20numOctaves='3'%20seed='149'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='18'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-4,-12%20304,-12%20304,24%20-4,24'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tx4:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2048'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='300'%20height='48'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.019%200.06'%20numOctaves='3'%20seed='151'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='19'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-4,-12%20304,-12%20304,24%20-4,24'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tv-l1:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%20300'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='48'%20height='300'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.052%200.02'%20numOctaves='3'%20seed='251'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='19'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='24,-4%2060,-4%2060,304%2024,304'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tv-l2:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%20300'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='48'%20height='300'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.045%200.017'%20numOctaves='3'%20seed='263'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='20'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='24,-4%2060,-4%2060,304%2024,304'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tv-l3:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%20300'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='48'%20height='300'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.05%200.025'%20numOctaves='3'%20seed='267'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='18'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='24,-4%2060,-4%2060,304%2024,304'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tv-r1:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%20300'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='48'%20height='300'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.052%200.02'%20numOctaves='3'%20seed='211'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='19'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-12,-4%2024,-4%2024,304%20-12,304'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tv-r2:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%20300'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='48'%20height='300'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.045%200.017'%20numOctaves='3'%20seed='223'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='20'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-12,-4%2024,-4%2024,304%20-12,304'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tv-r3:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%20300'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='48'%20height='300'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.05%200.025'%20numOctaves='3'%20seed='227'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='18'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-12,-4%2024,-4%2024,304%20-12,304'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  --tear-amp:26px;
  --paint-underline:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%2018'%20preserveAspectRatio='none'%3E%3Cpath%20d='M4%2011%20C60%205,120%2014,180%209%20C230%205,280%2013,316%208'%20fill='none'%20stroke='%23fff'%20stroke-width='5.5'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%2015%20C70%2011,150%2017,230%2013%20C270%2011,300%2015,312%2013'%20fill='none'%20stroke='%23fff'%20stroke-width='2.5'%20stroke-linecap='round'%20opacity='0.55'/%3E%3C/svg%3E");

  --wefw2-ink:#141109;
  --wefw2-ink-2:#2a2318;
  --wefw2-ink-3:#4a4234;
  --wefw2-blue:#42b1ff;
  --wefw2-fl:"FLBold","Arial Black",sans-serif;
  --wefw2-haas:"WeHaas","Neue Haas Display","Helvetica Neue",sans-serif;
}

/* ---------- 1. Paper cards ------------------------------------------------ */
/* The white-paper recipe (index §2): two procedural noise layers multiplied
   over #fff, a torn bottom edge from a repeating tile, and the drop-shadow
   cast by an UNMASKED wrapper because a mask clips its own shadow (gotcha 4). */

.fw2-scroll-intro__card,
.fw2-scroll-finale__card,
.fw2-scroll-card,
.story-panel,
.mist-command-card{
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:
    var(--pp-speck-w) var(--pp-sp,0 0)/var(--pp-s-size) repeat,
    var(--pp-grain-w) var(--pp-gp,0 0)/var(--pp-g-size) repeat #fff;
  background-blend-mode:multiply,multiply;
  -webkit-mask-repeat:repeat-x,no-repeat;      mask-repeat:repeat-x,no-repeat;
  -webkit-mask-size:300px 48px,100% calc(100% - 46px);
          mask-size:300px 48px,100% calc(100% - 46px);
  -webkit-mask-position:bottom left,top;       mask-position:bottom left,top;
  -webkit-mask-image:var(--wefw2-tile,var(--tx1)),linear-gradient(#000,#000);
          mask-image:var(--wefw2-tile,var(--tx1)),linear-gradient(#000,#000);
}

.we-fw2-sh{filter:var(--shadow-1-d)}

/* photocopy grime riding the torn edge — cropped by the mask, like real toner */
.fw2-scroll-intro__card::after,
.fw2-scroll-finale__card::after,
.fw2-scroll-card::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:var(--wefw2-speck-x,8%);bottom:var(--wefw2-speck-y,2px);
  width:104px;height:82px;
  background:var(--wefw2-speck,var(--we-tex-speck-1)) center/contain no-repeat;
  opacity:.15;mix-blend-mode:multiply;
}

/* --- intro / finale / chapter cards ------------------------------------- */
.fw2-scroll-intro__card,
.fw2-scroll-finale__card,
.fw2-scroll-card{
  position:relative;
  overflow:visible;
  border-radius:11px 11px 0 0;
}

.fw2-scroll-intro__card,
.fw2-scroll-finale__card{
  padding:clamp(25px,4vw,46px) clamp(25px,4vw,48px) calc(clamp(25px,4vw,40px) + var(--tear-amp));
}

.fw2-scroll-card{padding:24px 26px calc(25px + var(--tear-amp))}

/* the AI gradient rules that capped every card are gone, not recoloured */
.fw2-scroll-card::before,
.fw2-scroll-card--mist::before,
.fw2-scroll-card--final::before{content:none;display:none}

/* rotation: hand-picked per card so no two sit at the same angle (index §1b) */
.we-fw2-sh--intro   .fw2-scroll-intro__card {rotate:-.8deg;  --wefw2-tile:var(--tx2);--pp-sp:40px 90px;  --pp-gp:120px 30px}
.we-fw2-sh--finale  .fw2-scroll-finale__card{rotate:.7deg;   --wefw2-tile:var(--tx4);--pp-sp:210px 40px; --pp-gp:60px 180px}

.fw2-scroll-step:nth-of-type(1)  .fw2-scroll-card{rotate:-1.4deg;--wefw2-tile:var(--tx1);--pp-sp:0 0;        --pp-gp:0 0}
.fw2-scroll-step:nth-of-type(2)  .fw2-scroll-card{rotate:.9deg;  --wefw2-tile:var(--tx3);--pp-sp:120px 70px; --pp-gp:40px 150px}
.fw2-scroll-step:nth-of-type(3)  .fw2-scroll-card{rotate:-.5deg; --wefw2-tile:var(--tx2);--pp-sp:200px 130px;--pp-gp:90px 60px}
.fw2-scroll-step:nth-of-type(4)  .fw2-scroll-card{rotate:1.2deg; --wefw2-tile:var(--tx4);--pp-sp:60px 210px; --pp-gp:170px 20px}
.fw2-scroll-step:nth-of-type(5)  .fw2-scroll-card{rotate:-1.1deg;--wefw2-tile:var(--tx1);--pp-sp:240px 20px; --pp-gp:10px 110px}
.fw2-scroll-step:nth-of-type(6)  .fw2-scroll-card{rotate:.6deg;  --wefw2-tile:var(--tx3);--pp-sp:30px 160px; --pp-gp:200px 90px}
.fw2-scroll-step:nth-of-type(7)  .fw2-scroll-card{rotate:-1.6deg;--wefw2-tile:var(--tx2);--pp-sp:150px 100px;--pp-gp:70px 190px}
.fw2-scroll-step:nth-of-type(8)  .fw2-scroll-card{rotate:1deg;   --wefw2-tile:var(--tx4);--pp-sp:90px 250px; --pp-gp:130px 40px}
.fw2-scroll-step:nth-of-type(9)  .fw2-scroll-card{rotate:-.7deg; --wefw2-tile:var(--tx1);--pp-sp:180px 60px; --pp-gp:20px 230px}
.fw2-scroll-step:nth-of-type(10) .fw2-scroll-card{rotate:1.4deg; --wefw2-tile:var(--tx3);--pp-sp:70px 30px;  --pp-gp:160px 130px}
.fw2-scroll-step:nth-of-type(11) .fw2-scroll-card{rotate:-1.2deg;--wefw2-tile:var(--tx2);--pp-sp:260px 180px;--pp-gp:100px 70px}

/* only a couple of cards carry grime, and never the same fleck twice */
.fw2-scroll-step:nth-of-type(3)  .fw2-scroll-card{--wefw2-speck:var(--we-tex-speck-5);--wefw2-speck-x:62%}
.fw2-scroll-step:nth-of-type(6)  .fw2-scroll-card{--wefw2-speck:var(--we-tex-speck-2);--wefw2-speck-x:14%}
.fw2-scroll-step:nth-of-type(9)  .fw2-scroll-card{--wefw2-speck:var(--we-tex-speck-6);--wefw2-speck-x:70%}
.fw2-scroll-step:nth-of-type(1)  .fw2-scroll-card::after,
.fw2-scroll-step:nth-of-type(2)  .fw2-scroll-card::after,
.fw2-scroll-step:nth-of-type(4)  .fw2-scroll-card::after,
.fw2-scroll-step:nth-of-type(5)  .fw2-scroll-card::after,
.fw2-scroll-step:nth-of-type(7)  .fw2-scroll-card::after,
.fw2-scroll-step:nth-of-type(8)  .fw2-scroll-card::after,
.fw2-scroll-step:nth-of-type(10) .fw2-scroll-card::after,
.fw2-scroll-step:nth-of-type(11) .fw2-scroll-card::after{content:none}
.fw2-scroll-intro__card{--wefw2-speck:var(--we-tex-speck-7);--wefw2-speck-x:71%}
.fw2-scroll-finale__card{--wefw2-speck:var(--we-tex-speck-1);--wefw2-speck-x:9%}

/* the reveal keeps its translate/scale; rotation composes via the individual
   `rotate` property, so the two never fight (gotcha 6) */
.fw2-scroll-step.is-active .fw2-scroll-card{
  border-color:transparent;
  box-shadow:none;
}
.we-fw2-sh--card{transition:filter .5s ease;filter:var(--slip-shadow)}
.fw2-scroll-step.is-active .we-fw2-sh--card{filter:var(--shadow-1-d)}

/* ---------- 2. Type ------------------------------------------------------- */
/* Every ui-monospace HUD label is gone. The FL brush face carries the poster
   headlines, eyebrows, numerals and counters; Neue Haas carries the chapter
   headlines (13-word sentences are unreadable in an all-caps brush); Inter
   stays on body copy. Blue never sets type on white paper — ink does
   (DECISIONS: contrast failure on light → black, never a darkened blue). */

.fw2-scroll-eyebrow,
.fw2-scroll-card__kicker{
  display:inline-block;
  color:var(--wefw2-ink);
  font-family:var(--wefw2-fl);
  font-weight:400;
  font-size:15px;
  line-height:1.1;
  letter-spacing:.04em;
  text-transform:uppercase;
  rotate:-.7deg;
}
.fw2-scroll-card__kicker{font-size:14px;rotate:.5deg}

/* the gradient cap bars were the only thing marking the MIST + payoff chapters
   apart. They are gone, so the distinction moves to the brand's own emphasis
   mark: a painted stroke under those kickers. */
.fw2-scroll-card--mist .fw2-scroll-card__kicker,
.fw2-scroll-card--final .fw2-scroll-card__kicker{position:relative}
.fw2-scroll-card--mist .fw2-scroll-card__kicker::after,
.fw2-scroll-card--final .fw2-scroll-card__kicker::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:-.3em;height:.42em;
  background:var(--wefw2-blue);
  -webkit-mask:var(--paint-underline) center/100% 100% no-repeat;
          mask:var(--paint-underline) center/100% 100% no-repeat;
  pointer-events:none;
}

.fw2-scroll-intro h1,
.fw2-scroll-finale h2{
  margin:18px 0 20px;
  color:var(--wefw2-ink);
  font-family:var(--wefw2-fl);
  font-weight:400;
  font-size:clamp(34px,3.9vw,58px);
  line-height:.98;
  letter-spacing:.005em;
}
/* the finale sets centred — an all-caps brush face needs a shorter measure
   there or the ragged centre axis reads as noise */
.fw2-scroll-finale h2{font-size:clamp(29px,3.05vw,45px);line-height:1.02}

.fw2-scroll-card h2{
  clear:both;
  max-width:420px;
  margin:12px 0 11px;
  color:var(--wefw2-ink);
  font-family:var(--wefw2-haas);
  font-weight:800;
  font-size:clamp(25px,2.3vw,34px);
  line-height:1.06;
  letter-spacing:-.025em;
}

.fw2-scroll-intro p,
.fw2-scroll-finale p,
.fw2-scroll-card p{color:var(--wefw2-ink-2)}

/* chapter numeral — ink, with the one deliberate blue accent on the card:
   a painted stroke under it (mirrors the play numeral in the reference §7b) */
.fw2-scroll-card__number{
  position:relative;
  float:right;
  margin:-2px 0 8px 16px;
  color:var(--wefw2-ink);
  font-family:var(--wefw2-fl);
  font-weight:400;
  font-size:30px;
  line-height:1;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  rotate:1.4deg;
}
.fw2-scroll-card__number::after{
  content:"";position:absolute;right:-3px;bottom:-7px;z-index:0;
  width:52px;height:14px;
  background:var(--wefw2-blue);
  -webkit-mask:var(--paint-underline) right center/contain no-repeat;
          mask:var(--paint-underline) right center/contain no-repeat;
  opacity:.92;pointer-events:none;rotate:-1.5deg;
}

.fw2-scroll-cue{
  color:var(--wefw2-ink-2);
  /* GLOBAL PASS · button FACE reverted to the reference §8 sans (DECISIONS,
     tour handoff §2). This page had set labels in the FL brush caps at 15px
     because the page is otherwise carried by FL — it reads well in isolation
     but disagreed with Home, Mist, the index and all 19 teardowns, whose
     buttons are 700-weight sans. The CHASSIS is untouched: 4px radius, the
     3px 3px 0 hard offset, the −0.6deg tilt all stay. FL caps remains the
     flagged alternative if Chey would rather promote it site-wide. */
  font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:-.01em;
}
.fw2-scroll-cue i{border-color:rgba(20,17,9,.42)}
.fw2-scroll-cue i::after{background:var(--wefw2-ink-2)}

/* ---------- 3. The intro title, hand-animated ---------------------------- */
/* Stop-motion, not easing: each word snaps in over four discrete frames on an
   irregular hand-picked delay and settles at its own angle, like brush type
   set by hand. The whole line carries .we-wob, so the shared 4fps turbulence
   seed-stepper in theme.liquid boils the ink edges while it reads. */

.we-fw2-set span{
  display:inline-block;
  opacity:0;
  animation:we-fw2-set .38s steps(4,end) var(--wefw2-d,0ms) both;
}
@keyframes we-fw2-set{
  from{opacity:0;translate:0 .34em;rotate:-4deg}
  to  {opacity:1;translate:0 0;    rotate:var(--wefw2-r,0deg)}
}
.we-fw2-set span:nth-of-type(1) {--wefw2-d:60ms;  --wefw2-r:-1.1deg}
.we-fw2-set span:nth-of-type(2) {--wefw2-d:190ms; --wefw2-r:.6deg}
.we-fw2-set span:nth-of-type(3) {--wefw2-d:270ms; --wefw2-r:-.4deg}
.we-fw2-set span:nth-of-type(4) {--wefw2-d:350ms; --wefw2-r:1.2deg}
.we-fw2-set span:nth-of-type(5) {--wefw2-d:490ms; --wefw2-r:-.8deg}
.we-fw2-set span:nth-of-type(6) {--wefw2-d:680ms; --wefw2-r:.9deg}
.we-fw2-set span:nth-of-type(7) {--wefw2-d:760ms; --wefw2-r:-1.3deg}
.we-fw2-set span:nth-of-type(8) {--wefw2-d:820ms; --wefw2-r:.5deg}
.we-fw2-set span:nth-of-type(9) {--wefw2-d:910ms; --wefw2-r:-.6deg}
.we-fw2-set span:nth-of-type(10){--wefw2-d:1040ms;--wefw2-r:1deg}
.we-fw2-set span:nth-of-type(11){--wefw2-d:1140ms;--wefw2-r:-.9deg}
.we-fw2-set span:nth-of-type(12){--wefw2-d:1240ms;--wefw2-r:1.4deg}

/* the painted underline draws on after "one store." lands — scoped, so the
   shared .we-underline utility is not redefined for other pages (gotcha 9) */
/* the shared utility hangs at -.34em, which lands on the next line at this
   display size — pull it up into the descender gap of its own line */
.fw2-scroll-intro .we-underline::after{
  bottom:-.05em;
  height:.2em;
  width:0;
  /* accent-inked: the heading is ink-black on paper, and the site-wide
     annotation rule (Chey, 2026-07-27) bans same-ink marks on text */
  background:var(--wefw2-blue);
  animation:we-fw2-ink .46s steps(5,end) 1.5s forwards;
}
@keyframes we-fw2-ink{to{width:102%}}

@media (prefers-reduced-motion:reduce){
  .we-fw2-set span{animation:none;opacity:1;rotate:var(--wefw2-r,0deg)}
  .fw2-scroll-intro .we-underline::after{animation:none;width:102%}
}

/* ---------- 4. Buttons (index §8) ---------------------------------------- */
/* One chassis everywhere: 4px radius, hard offset shadow with no blur, and the
   −0.6deg tilt. White paper by default, ink for the primary action. */

.control,
.story-action,
.story-exit,
.fw2-scroll-finale button,
.mist-composer-submit{
  min-height:44px;
  padding:0 20px;
  border:0;
  border-radius:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:#fff;
  color:#07101a;
  cursor:pointer;
  /* GLOBAL PASS · button FACE reverted to the reference §8 sans (DECISIONS,
     tour handoff §2). This page had set labels in the FL brush caps at 15px
     because the page is otherwise carried by FL — it reads well in isolation
     but disagreed with Home, Mist, the index and all 19 teardowns, whose
     buttons are 700-weight sans. The CHASSIS is untouched: 4px radius, the
     3px 3px 0 hard offset, the −0.6deg tilt all stay. FL caps remains the
     flagged alternative if Chey would rather promote it site-wide. */
  font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:-.01em;
  box-shadow:3px 3px 0 rgba(0,0,0,.5);
  transform:rotate(-.6deg);
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
}
.control:hover,.control:focus-visible,
.story-action:hover:not(:disabled),.story-action:focus-visible,
.story-exit:hover,.story-exit:focus-visible,
.fw2-scroll-finale button:hover,.fw2-scroll-finale button:focus-visible,
.mist-composer-submit:hover:not(:disabled),.mist-composer-submit:focus-visible{
  outline:none;
  background:#fff;
  transform:rotate(-.6deg) translateY(-2px);
  box-shadow:4px 5px 0 rgba(0,0,0,.55);
}

.control--story,
.story-action--next,
.fw2-scroll-finale button,
.mist-composer-submit{background:#0c0d10;color:#fff}
.control--story:hover,.control--story:focus-visible,
.story-action--next:hover,.story-action--next:focus-visible,
.fw2-scroll-finale button:hover,.fw2-scroll-finale button:focus-visible,
.mist-composer-submit:hover:not(:disabled),.mist-composer-submit:focus-visible{
  background:#0c0d10;color:#fff;
}

/* the one accent that survives on a white button: the MIST status dot */
.control--mist{background:#fff;color:#07101a;box-shadow:3px 3px 0 rgba(0,0,0,.5)}
.control--mist::before{background:var(--wefw2-blue);box-shadow:none}
.control--mist[aria-pressed='true']{background:#0c0d10;color:#fff}
.control--mist:hover,.control--mist:focus-visible{background:#fff;color:#07101a}
.control--mist[aria-pressed='true']:hover{background:#0c0d10;color:#fff}

/* the glassy pill that held the scene controls is gone — the buttons stand
   on their own paper, which is what gives the cluster its hand-set look */
.controls{
  padding:0;
  gap:11px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.control--story{transform:rotate(.7deg)}
.control--story:hover,.control--story:focus-visible{transform:rotate(.7deg) translateY(-2px)}
.control--mist{transform:rotate(-1.1deg)}
.control--mist:hover,.control--mist:focus-visible{transform:rotate(-1.1deg) translateY(-2px)}

.story-exit{min-height:34px;width:34px;padding:0;border-radius:4px;font-size:19px}
.mist-composer-submit{min-height:38px;width:38px;padding:0;border-radius:4px;font-size:18px}
.mist-composer-submit:disabled{opacity:.28;transform:rotate(-.6deg);box-shadow:2px 2px 0 rgba(0,0,0,.4)}
/* 19px was tuned for the FL caps; at 700-weight sans that reads shouty on a
   54px button, so it comes down proportionally (the reference is .85rem at 44px). */
.fw2-scroll-finale button{min-height:54px;padding:0 26px;font-size:1rem;margin-top:28px}
.story-action:disabled{opacity:.35;cursor:default;box-shadow:2px 2px 0 rgba(0,0,0,.35)}

/* ---------- 5. Scene chrome ---------------------------------------------- */
/* Glassy translucent pills → small white paper slips with torn vertical edges. */

/* both floating slips: the wrapper owns the fixed position AND the shadow,
   because the tear mask on the slip would clip a shadow cast by the slip */
.we-fw2-sh--count{position:fixed;z-index:13;right:24px;top:84px;filter:var(--slip-shadow)}
.we-fw2-sh--status{position:fixed;z-index:4;left:50%;bottom:20px;transform:translateX(-50%);filter:var(--slip-shadow)}
body.mist-command-active .we-fw2-sh--status,
body.story-active .we-fw2-sh--status,
body.fw2-scroll-mode .we-fw2-sh--status{opacity:0;visibility:hidden;pointer-events:none}

.fw2-scroll-count{
  position:static;
  min-width:82px;
  padding:9px 14px 9px calc(13px + var(--tear-amp));
  border:0;
  border-radius:0;
  color:var(--wefw2-ink);
  box-shadow:none;
  backdrop-filter:none;
  font-family:var(--wefw2-fl);
  font-weight:400;
  font-size:15px;
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  rotate:1.2deg;
  background:
    var(--pp-speck-w) 30px 90px/var(--pp-s-size) repeat,
    var(--pp-grain-w) 110px 20px/var(--pp-g-size) repeat #fff;
  background-blend-mode:multiply,multiply;
  -webkit-mask-image:var(--tv-l1),linear-gradient(#000,#000);
          mask-image:var(--tv-l1),linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-y,no-repeat;  mask-repeat:repeat-y,no-repeat;
  -webkit-mask-size:48px 300px,calc(100% - 46px) 100%;
          mask-size:48px 300px,calc(100% - 46px) 100%;
  -webkit-mask-position:left top,right;    mask-position:left top,right;
}

.status{
  position:static;
  transform:none;
  padding:11px calc(18px + var(--tear-amp));
  border:0;
  border-radius:0;
  color:var(--wefw2-ink-2);
  box-shadow:none;
  backdrop-filter:none;
  font-size:12px;
  rotate:-.6deg;
  background:
    var(--pp-speck-w) 170px 40px/var(--pp-s-size) repeat,
    var(--pp-grain-w) 20px 140px/var(--pp-g-size) repeat #fff;
  background-blend-mode:multiply,multiply;
  -webkit-mask-image:var(--tv-l2),var(--tv-r1),linear-gradient(#000,#000);
          mask-image:var(--tv-l2),var(--tv-r1),linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-y,repeat-y,no-repeat;
          mask-repeat:repeat-y,repeat-y,no-repeat;
  -webkit-mask-size:48px 300px,48px 300px,calc(100% - 92px) 100%;
          mask-size:48px 300px,48px 300px,calc(100% - 92px) 100%;
  -webkit-mask-position:left top,right top,center;
          mask-position:left top,right top,center;
}
.status b{
  color:var(--wefw2-ink);
  font-family:var(--wefw2-fl);
  font-weight:400;
  font-size:13px;
  letter-spacing:.04em;
}
.dot{width:5px;height:5px;border-radius:0;background:var(--wefw2-blue);rotate:45deg}

/* progress meter — dot-free, but blue on a blue sky is invisible, so ink */
.fw2-scroll-meter{background:rgba(20,17,9,.16);box-shadow:none}
.fw2-scroll-meter span{background:var(--wefw2-ink);box-shadow:none}

/* the veil the story layer paints over the city */
.fw2-scroll-story::before{
  background:
    linear-gradient(90deg,rgba(12,13,16,.14),transparent 32% 68%,rgba(12,13,16,.11)),
    linear-gradient(180deg,rgba(12,13,16,.06),transparent 26% 74%,rgba(12,13,16,.13));
}

/* ---------- 6. Loading curtain ------------------------------------------- */
/* Was an AI sky gradient. Now the brand's dark paper stock, so the city tears
   open from the same surface every other page is printed on (index §3). */
#loading{
  background-color:#05070a;
  background-image:var(--we-paper-dark);
  background-size:cover;
  background-position:center;
  color:#f7f8fa;
}
.loader-card{text-shadow:none}
.loader-card strong{
  font-family:var(--wefw2-fl);
  font-weight:400;
  font-size:19px;
  letter-spacing:.05em;
}
.loader-mark{
  border-width:6px;
  border-color:rgba(255,255,255,.22);
  border-top-color:var(--wefw2-blue);
}

/* ---------- 7. Dialogs: story panel + Ask MIST --------------------------- */
/* Both were navy-tinted frosted glass. Both become paper. The unmasked
   wrapper now owns the fixed position AND the shadow — a mask on the panel
   would otherwise clip its own shadow, and a filter on a static ancestor
   would capture the panel's `position:fixed` (index §1b, gotcha 4). */

.we-fw2-sh--story{
  position:fixed;z-index:9;left:28px;bottom:26px;
  width:min(510px,calc(100vw - 56px));
  filter:var(--shadow-1-d);
}
.story-panel{
  position:static;
  width:100%;
  overflow:visible;
  border:0;
  border-radius:11px 11px 0 0;
  box-shadow:none;
  backdrop-filter:none;
  rotate:-.6deg;
}
.story-panel[hidden]{display:none}
.we-fw2-sh--story:has(.story-panel[hidden]){filter:none}

/* Chapter progress. A square-cornered machine track butted against the top of
   a torn paper card read as a black sliver stuck on the sheet — its corners
   overhung the card's 11px radius, and a ruled bar is the wrong idiom next to
   a torn edge. It is now the page's own painted stroke (§7b, the same brush
   mask as the numerals), inset clear of both corners: a ghosted stroke for the
   whole chapter arc, filling with blue ink as you advance.
   --wefw2-prog-w must track the inset width so the ink registers with the
   ghost — the mask is anchored left at the FULL stroke length, and the span's
   JS-driven width reveals it left to right. */
.story-progress{
  --wefw2-prog-w:calc(min(510px,100vw - 56px) - 48px);
  position:relative;
  height:12px;
  margin:15px 24px 1px;
  overflow:visible;
  background:none;
}
.story-progress::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--wefw2-ink);opacity:.15;
  -webkit-mask:var(--paint-underline) left center/100% 100% no-repeat;
          mask:var(--paint-underline) left center/100% 100% no-repeat;
}
.story-progress span{
  position:relative;
  height:100%;
  border-radius:0;
  background:var(--wefw2-blue);
  -webkit-mask:var(--paint-underline) left center/var(--wefw2-prog-w) 100% no-repeat;
          mask:var(--paint-underline) left center/var(--wefw2-prog-w) 100% no-repeat;
}
.story-inner{padding:22px 24px calc(20px + var(--tear-amp))}
.story-kicker{
  color:var(--wefw2-ink);
  font-family:var(--wefw2-fl);
  font-weight:400;
  font-size:14px;
  line-height:1.1;
  letter-spacing:.04em;
  text-transform:uppercase;
  rotate:-.7deg;
  display:inline-block;
}
.story-panel h2{
  color:var(--wefw2-ink);
  font-family:var(--wefw2-haas);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.06;
}
.story-copy{color:var(--wefw2-ink-2)}
.story-copy b{color:var(--wefw2-ink)}
.story-example{
  border:0;
  border-radius:0;
  padding:14px 16px 15px;
  background:
    var(--pp-speck-b) 90px 40px/var(--pp-sb-size) repeat,
    var(--pp-grain-b) 20px 120px/var(--pp-gb-size) repeat #0c0d10;
  background-blend-mode:screen,screen;
  color:#e7eaef;
  rotate:.5deg;
}
.story-example-label{
  color:#fff;
  font-family:var(--wefw2-fl);
  font-weight:400;
  font-size:13px;
  line-height:1.15;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.story-example strong{color:#fff}
.story-example span:last-child{color:#c9ced6}
.story-position{
  min-width:46px;
  color:var(--wefw2-ink-3);
  font-family:var(--wefw2-fl);
  font-weight:400;
  font-size:14px;
  line-height:1;
  letter-spacing:.05em;
  font-variant-numeric:tabular-nums;
  text-align:center;
}

.we-fw2-sh--mist{filter:var(--shadow-1-d);pointer-events:auto}
.mist-command-card{
  position:relative;
  width:min(460px,calc(100vw - 48px));
  padding:22px 22px calc(20px + var(--tear-amp));
  overflow:visible;
  border:0;
  border-radius:11px 11px 0 0;
  color:var(--wefw2-ink-2);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  rotate:.5deg;
}
.mist-command-card::before{content:none}
.mist-command-kicker{
  color:var(--wefw2-ink);
  font-family:var(--wefw2-fl);
  font-weight:400;
  font-size:14px;
  line-height:1.1;
  letter-spacing:.04em;
  text-transform:uppercase;
  rotate:-.7deg;
}
.mist-command-kicker::before{background:var(--wefw2-blue);box-shadow:none;border-radius:0;rotate:45deg}
.mist-command-card h2{
  color:var(--wefw2-ink);
  font-family:var(--wefw2-haas);
  font-weight:800;
  letter-spacing:-.03em;
}
.mist-command-lede{color:var(--wefw2-ink-3);font-size:13px}
.mist-composer{
  border:1.5px solid rgba(20,17,9,.22);
  border-radius:4px;
  background:rgba(255,255,255,.62);
  box-shadow:none;
  backdrop-filter:none;
}
.mist-composer textarea{color:var(--wefw2-ink-2)}
.mist-composer textarea::placeholder{color:var(--wefw2-ink-3)}
.mist-composer-plus{
  border:1.5px solid rgba(20,17,9,.2);
  border-radius:4px;
  background:none;
  color:var(--wefw2-ink-2);
}
.mist-composer-model{
  color:var(--wefw2-ink-3);
  font-family:var(--wefw2-fl);
  font-weight:400;
  font-size:12px;
  line-height:1;
  letter-spacing:.05em;
}
.mist-composer-mic{color:var(--wefw2-ink-2)}
.mist-command-result{
  border:0;
  border-radius:0;
  padding:11px 13px;
  background:
    var(--pp-speck-b) 40px 150px/var(--pp-sb-size) repeat,
    var(--pp-grain-b) 130px 60px/var(--pp-gb-size) repeat #0c0d10;
  background-blend-mode:screen,screen;
  color:#e7eaef;
  box-shadow:none;
  backdrop-filter:none;
  rotate:-.5deg;
}
.mist-command-result strong{color:#fff;font-family:var(--wefw2-haas);font-weight:800}
.mist-command-result span:last-child{color:#c9ced6}
.mist-command-result__pulse{background:var(--wefw2-blue);box-shadow:none;border-radius:0;rotate:45deg}

/* ---------- 8. District pins (3D-anchored overlay) ----------------------- */
/* Position is driven by the 3D layer through --activity-x/y and `transform`,
   so only the surface changes here: navy glass → black paper, FL labels. */
.district-activity{
  border:0;
  border-radius:0;
  color:#e7eaef;
  background:
    var(--pp-speck-b) var(--pp-sp,0 0)/var(--pp-sb-size) repeat,
    var(--pp-grain-b) var(--pp-gp,0 0)/var(--pp-gb-size) repeat #0c0d10;
  background-blend-mode:screen,screen;
  box-shadow:2px 3px 0 rgba(0,0,0,.5);
}
.district-activity::before{background:var(--wefw2-blue);box-shadow:none}
.district-activity__head{
  color:#c9ced6;
  font-family:var(--wefw2-fl);
  font-weight:400;
  font-size:12px;
  line-height:1;
  letter-spacing:.04em;
}
.district-activity__head strong{color:#fff}
/* the stray green "LIVE" was the only non-#42b1ff accent left on the page */
.district-activity__live{color:var(--wefw2-blue);letter-spacing:.05em}
.district-activity__primary b{
  color:#fff;
  font-family:var(--wefw2-haas);
  font-weight:800;
  font-size:19px;
  line-height:1;
  text-shadow:none;
}
.district-activity__primary span{
  color:#c2c8d2;
  font-family:var(--wefw2-fl);
  font-weight:400;
  font-size:11px;
  line-height:1.15;
  letter-spacing:.03em;
}
.district-activity__stat{border:1px solid rgba(255,255,255,.18);border-radius:0;background:none}
.district-activity__stat span{
  color:#9aa3ae;
  font-family:var(--wefw2-fl);
  font-weight:400;
  font-size:9px;
  line-height:1.1;
  letter-spacing:.03em;
}
.district-activity__stat b{color:#f2f4f7;font-family:var(--wefw2-haas);font-weight:800;font-size:11px;line-height:1}
.district-activity__pin{border-radius:0;background:var(--wefw2-blue);box-shadow:0 0 0 3px rgba(12,13,16,.72)}
.district-activity[data-lod='detail']{border:0;box-shadow:3px 4px 0 rgba(0,0,0,.55)}
.district-activity[data-lod='detail'] .district-activity__primary b{font-size:28px}

/* ---------- 9. Mobile ----------------------------------------------------- */
@media (max-width:760px){
  .fw2-scroll-card{padding:21px 21px calc(22px + var(--tear-amp));border-radius:11px 11px 0 0}
  .fw2-scroll-intro__card,
  .fw2-scroll-finale__card{padding:24px 21px calc(22px + var(--tear-amp));border-radius:11px 11px 0 0}
  .fw2-scroll-intro h1,
  .fw2-scroll-finale h2{font-size:clamp(30px,8.6vw,42px)}
  .fw2-scroll-card h2{font-size:25px}
  .fw2-scroll-count{min-width:0;font-size:13px}
  .we-fw2-sh--count{top:78px;right:14px}
}
@media (max-width:680px){
  .we-fw2-sh--story{left:10px;bottom:10px;width:calc(100vw - 20px)}
  .story-inner{padding:18px 18px calc(16px + var(--tear-amp))}
  .story-progress{margin-inline:18px;--wefw2-prog-w:calc(100vw - 56px)}
  .controls{gap:8px}
  .control{padding-inline:14px;font-size:14px}
  .we-fw2-sh--status{bottom:12px;width:calc(100% - 24px)}
  .status{padding:10px calc(14px + var(--tear-amp));font-size:11px}
  .mist-command-card{width:100%;padding:20px 18px calc(18px + var(--tear-amp))}
}

/* ============================================================
   CANONICAL SITE NAV — ported by the global pass
   ------------------------------------------------------------
   One nav across all 26 pages. This page previously carried the
   bespoke `nav#nav` mega-dropdown; the markup is now the teardown
   chassis (header.nav#siteNav > .nav-inner > a.brand + nav.nav-actions
   + .dd#teardownsDd, with the torn strip hanging off the bar) and
   these rules are its stylesheet, transcribed from the COMPUTED
   styles of the reference page rather than from its cascade — the
   teardown sheets override several nav rules further down the file
   (the CTA's hard offset shadow becomes a soft ambient one, .dd-head
   becomes FLBold in brand colour), so reading the source rules alone
   would have ported a nav that does not match what ships.

   Every token the nav needs is declared ON .nav rather than on :root,
   so this block cannot re-tint the page around it (gotcha 9) and is
   byte-identical in all five files that received it.
   ============================================================ */
.nav{
  --nav-bg:#05070a;
  --nav-ink:#f7f8fa;
  --nav-line:rgba(255,255,255,.1);
  --nav-brand:#42b1ff;
  --nav-label:"WeHaas","Neue Haas Display","Helvetica Neue",sans-serif;
  --nav-sans:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  /* rag depth; the bar's own painted height derives from it — see the
     global-pass note in assets/teardown-rhode.css for the derivation. */
  --nav-tear-h:24px;
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:calc(69px - .558 * var(--nav-tear-h));
  transition:box-shadow .3s,border-color .3s;
  background-color:var(--nav-bg);
  background-image:linear-gradient(rgba(5,7,10,.34),rgba(5,7,10,.52)),var(--we-paper-dark);
  background-size:cover;background-position:center;background-attachment:fixed;
  border-bottom:1px solid transparent;
  /* pinned: .btn-cta and .nav-link carry no line-height of their own, so they
     inherited each host page's body metric and the CTA measured anywhere from
     34px to 40.4px across the five. */
  font-family:var(--nav-sans);line-height:1.65}
@media(max-width:640px){.nav{--nav-tear-h:18px}}
.nav.scrolled{border-bottom-color:var(--nav-line);
  box-shadow:0 8px 18px -11px rgba(0,0,0,.53)}
/* the content box stays 68px and overflows the shorter painted bar, so
   the raised strip supplies the last stretch of paper; z-index 6 keeps
   the CTA and its shadow above the strip (which is 5). */
.nav-inner{max-width:1120px;margin:0 auto;padding:0 24px;height:68px;display:flex;
  align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:6}
/* the host page may already own a .brand class (the tour's 3D-scene HUD does,
   with its own padding) — reset rather than inherit it. */
.nav .brand{display:flex;align-items:center;flex:0 0 auto;height:68px;
  padding:0;margin:0;gap:0;background:none;border:0;text-decoration:none}
.nav .brand img{display:block;width:auto;height:36px;max-width:208px;object-fit:contain}
.nav-actions{display:flex;align-items:center;gap:30px}
.nav-link{color:var(--nav-ink);font-size:.92rem;text-decoration:none;transition:color .18s ease}
.nav-link:hover{color:#fff}
.nav-link[aria-current="page"]{color:#fff}
.nav .btn-cta{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:4px;
  font-size:.85rem;font-weight:700;letter-spacing:-.01em;text-decoration:none;
  background:var(--nav-brand);color:#050a12;white-space:nowrap;
  /* BATCH (V1-F5): the §8 nav-CTA spec is a blur-free hard offset. The
     de-glow pass had replaced it with a soft ambient shadow, making this the
     only button in the theme without the analog signature. Edited HERE rather
     than appended: this rule is `.nav .btn-cta` (0,2,0) and a later bare
     `.btn-cta` (0,1,0) loses to it silently. */
  box-shadow:2px 2px 0 rgba(0,0,0,.5);
  transform:rotate(-.6deg);transition:box-shadow .18s ease,transform .18s ease}
.nav .btn-cta:hover{box-shadow:3px 4px 0 rgba(0,0,0,.55);transform:rotate(-.6deg) translateY(-1px)}
.nav .dd{position:relative}
/* `font:inherit` is a SHORTHAND and resets font-size, so it has to come
   first — after `font-size` it silently put the trigger back to the button's
   16px while the sibling .nav-links stayed at .92rem (V6-2). */
.dd-trigger{display:inline-flex;align-items:center;gap:7px;color:var(--nav-ink);
  font:inherit;font-size:.92rem;border:0;background:none;cursor:pointer;transition:color .18s ease}
.dd-trigger:hover,.dd:hover .dd-trigger,.dd.open .dd-trigger,.dd:focus-within .dd-trigger{color:#fff}
.dd-trigger svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .22s ease}
.dd:hover .dd-trigger svg,.dd.open .dd-trigger svg,.dd:focus-within .dd-trigger svg{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;width:302px;padding:8px;
  border:1px solid var(--nav-line);border-radius:12px;background:rgba(11,15,21,.98);
  box-shadow:0 30px 70px -30px #000,0 0 0 1px rgba(66,177,255,.06);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:70}
.dd:hover .dd-panel,.dd.open .dd-panel,.dd:focus-within .dd-panel{opacity:1;visibility:visible;transform:translateY(0)}
.dd-panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.dd-head{font-family:"FLBold","Arial Black",sans-serif;font-size:.74rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--nav-brand);padding:8px 12px 6px;
  transform:rotate(-.6deg);display:inline-block}
.dd-item{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:9px;
  text-decoration:none;transition:background .18s ease}
.dd-item:hover{background:color-mix(in srgb,var(--nav-brand) 10%,transparent)}
.dd-item .ic{flex:0 0 26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:linear-gradient(150deg,#123a63,#0a1a2e);border:1px solid rgba(66,177,255,.28);
  color:var(--nav-brand);font-family:var(--nav-label);font-size:.62rem;font-weight:700;margin-top:1px}
.dd-item .tt{display:block;color:var(--nav-ink);font-size:.86rem;font-weight:560;line-height:1.25}
.dd-item .ds{display:block;color:var(--nav-ink);font-size:.72rem;line-height:1.3;margin-top:3px}
.dd-item.now{background:color-mix(in srgb,var(--nav-brand) 10%,transparent)}
.dd-item.now .tt{color:var(--nav-brand)}
.dd-item.now .ic{border-color:color-mix(in srgb,var(--nav-brand) 60%,transparent)}
/* the torn bottom edge. Same paper stock AND same darkening veil as the
   bar, both at background-attachment:fixed so the texture and the veil
   register to the viewport — that is what makes the strip a seamless
   continuation of the bar rather than a lighter band under it. */
.nav .tstrip--nav{position:absolute;left:0;right:0;top:100%;margin-top:-1px;
  height:var(--nav-tear-h);pointer-events:none;z-index:5;
  background-color:var(--nav-bg);
  background-image:linear-gradient(rgba(5,7,10,.34),rgba(5,7,10,.52)),var(--we-paper-dark);
  background-size:cover;background-position:center;background-attachment:fixed;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.408));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-position:0 0;mask-position:0 0;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='-5%25'%20y='-50%25'%20width='110%25'%20height='200%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.04%200.02'%20numOctaves='3'%20seed='31'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='14'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-120,-30%201320,-30%201320,70%20-120,64'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='-5%25'%20y='-50%25'%20width='110%25'%20height='200%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.04%200.02'%20numOctaves='3'%20seed='31'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='14'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-120,-30%201320,-30%201320,70%20-120,64'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E")}
@media(max-width:880px){.nav-actions .nav-link,.nav-actions .dd{display:none}}
@media(max-width:480px){.nav .brand img{height:28px;max-width:158px}.nav .btn-cta{padding:9px 14px;font-size:.82rem}}

/* ---- BATCH · the Intelligence dropdown was the last navy AI card (V1-F3) ----
   `.dd-panel` shipped as rgba(11,15,21,.98) with a 12px radius, a hairline
   stroke and a blue inner ring; its `.ic` chips were 26px navy-gradient tiles.
   Only surviving navy + AI-gradient element in the theme, and it rode on
   EVERY page. V1 puts the 03:13 screenshot ring precisely on "Intelligence",
   so this is plausibly what that task was pointing at.

   It becomes a torn piece of the same dark paper the nav bar is printed on:
   `--we-paper-dark` from theme.liquid :root, which every page already has, so
   this needs no new tokens and is byte-identical in all 25 nav stylesheets.

   Three mechanics worth keeping straight:
   - the tear is the REPEATING 300x48 tile, not the full-width strip mask. The
     strip mask is a 1200x120 viewBox stretched with preserveAspectRatio:none;
     squeezed into a 28px band it renders ~1.6px of rag, i.e. a straight line
     (measured — it is the same squeeze V2-F5 raised about the nav strip).
   - the shadow is a FILTER, not a box-shadow. A mask clips an element's own
     box-shadow to its box (gotcha 4); drop-shadow() runs on the masked result
     and hugs the torn contour.
   - the bottom padding clears the rag, so the tear eats paper rather than the
     "See all teardowns" row.
   The panel hangs off a fixed nav and is not inside a masked parent, so the
   tear survives here (unlike a .tstrip in a masked zone, gotcha 5). */
.dd-panel{
  border:0;border-radius:0;
  background-color:#14120d;
  background-image:var(--we-paper-dark);
  background-size:cover;background-position:center;
  padding:10px 8px 46px;
  box-shadow:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)) drop-shadow(0 20px 34px rgba(0,0,0,.5));
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2048'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='300'%20height='48'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.02%200.052'%20numOctaves='3'%20seed='131'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='19'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-4,-12%20304,-12%20304,24%20-4,24'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2048'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='300'%20height='48'%20filterUnits='userSpaceOnUse'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.02%200.052'%20numOctaves='3'%20seed='131'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='19'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon%20points='-4,-12%20304,-12%20304,24%20-4,24'%20fill='%23fff'%20filter='url(%23t)'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
  -webkit-mask-size:300px 48px,100% calc(100% - 46px);
  mask-size:300px 48px,100% calc(100% - 46px);
  -webkit-mask-position:bottom left,top;mask-position:bottom left,top;
}
/* numerals become little white paper tabs with ink on them — the house
   artifact — instead of navy gradient tiles with cyan type. */
.dd-item .ic{
  background:#f4f2e9;border:0;border-radius:2px;
  color:#141109;font-family:"FLBold","Arial Black",sans-serif;
  font-size:.68rem;letter-spacing:0;rotate:-1.5deg;
}
.dd-item:nth-child(odd) .ic{rotate:1.2deg}
/* the current-page row was a blue-tinted rounded slab, which reads as another
   soft UI card on paper. It becomes a torn-off paper marker instead: the row
   keeps the stock, the numeral tab goes full white, and the title takes the
   brand blue (legal here — the ground is dark). */
.dd-item.now{background:rgba(255,255,255,.06);border-radius:0}
.dd-item.now .ic{background:#fff;color:#141109}
.dd-item:hover{border-radius:0}

/* ---- BATCH · nav CTA lost the hard offset shadow (V1-F5) ----
   The de-glow pass replaced the brand's blur-free offset with a soft ambient
   `0 10px 30px -12px`, which BRAND-SYSTEM-INDEX §8 already flags as "worth
   revisiting" — it made the nav CTA the only button in the theme without the
   analog signature. Restored to the §8 nav-CTA spec exactly (2px 2px 0, and
   3px 4px 0 on hover — the small-button values, not the larger `.button`'s).
   Radius and tilt unchanged. */
.btn-cta{box-shadow:2px 2px 0 rgba(0,0,0,.5)}
.btn-cta:hover{box-shadow:3px 4px 0 rgba(0,0,0,.55);transform:rotate(-.6deg) translateY(-1px)}