:root {
      --paper: #f4df8e;
      --ink: #171717;
      --dream: #fff2a8;
    }

    * { -webkit-tap-highlight-color: transparent; }

    html, body {
      min-height: 100%;
      background: #11130f;
      color: white;
    }

    body {
      overflow: hidden;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --weather-accent: 255, 242, 168;
      --weather-glow: 255, 224, 130;
    }

    .viewport {
      min-height: 100svh;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 30% 20%, rgba(255, 226, 130, .10), transparent 34%),
        radial-gradient(circle at 80% 70%, rgba(150, 255, 214, .06), transparent 32%),
        #10120e;
    }

    .stage-wrap {
      position: relative;
      width: 100vw;
      height: 100svh;
      overflow: hidden;
      touch-action: none;
    }

    .stage {
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(100vw, calc(100svh * 4080 / 2910));
      aspect-ratio: 4080 / 2910;
      transform: translate(-50%, -50%) scale(var(--zoom, 1));
      transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
      background-image: url("../assets/3a285ebc-97d1-4763-9eb9-b8c63604a91e~1.jpg");
      background-size: cover;
      background-position: center;
      box-shadow: 0 0 90px rgba(0,0,0,.75);
      animation: weatherMood 14s ease-in-out infinite;
      transition:
        transform 900ms ease-in-out,
        filter 700ms ease-in-out;
    }

    .stage.weather-active {
      filter:
        saturate(var(--weather-sat, 1.08))
        contrast(var(--weather-contrast, 1.08))
        brightness(var(--weather-brightness, 1))
        hue-rotate(var(--mood-hue, 0deg));
    }

    .stage.camera-active {
      filter: saturate(1.12) contrast(1.1) brightness(1.04) hue-rotate(var(--mood-hue, 0deg));
    }

    .stage.weather-cold {
      --weather-sat: .92;
      --weather-contrast: 1.14;
      --weather-brightness: .96;
      --spot-r: 190;
      --spot-g: 220;
      --spot-b: 255;
      --shadow-r: 2;
      --shadow-g: 9;
      --shadow-b: 22;
      --mood-hue: -12deg;
    }

    .stage.weather-warm {
      --weather-sat: 1.18;
      --weather-contrast: 1.06;
      --weather-brightness: 1.05;
      --spot-r: 255;
      --spot-g: 222;
      --spot-b: 150;
      --shadow-r: 20;
      --shadow-g: 10;
      --shadow-b: 0;
      --mood-hue: 8deg;
    }

    .stage.weather-rain {
      --weather-sat: .86;
      --weather-contrast: 1.2;
      --weather-brightness: .9;
      --spot-r: 150;
      --spot-g: 190;
      --spot-b: 255;
      --shadow-r: 0;
      --shadow-g: 10;
      --shadow-b: 30;
      --mood-hue: -22deg;
    }

    body.sky-clear { --weather-accent: 255, 232, 150; --weather-glow: 255, 206, 92; }
    body.sky-cloud { --weather-accent: 190, 220, 255; --weather-glow: 120, 170, 230; }
    body.sky-rain { --weather-accent: 155, 195, 255; --weather-glow: 80, 130, 220; }
    body.sky-frost { --weather-accent: 215, 245, 255; --weather-glow: 130, 220, 255; }

    .stage.gyro-active {
      transform:
        translate(-50%, -50%)
        scale(var(--zoom, 1))
        rotateX(var(--tilt-y, 0deg))
        rotateY(var(--tilt-x, 0deg));
    }

    .stage.camera-active::before {
      animation: shutterFlash 1.25s cubic-bezier(.22, 1, .36, 1) 1;
    }

    .stage::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      mix-blend-mode: screen;
      opacity: .22;
      background:
        linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.28) 48%, transparent 56% 100%);
      transform: translateX(-120%);
      animation: lightLeak 9s ease-in-out infinite, lampFlicker 7.6s steps(2) infinite;
    }

    .stage::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background:
        radial-gradient(circle at var(--mx, 50%) var(--my, 45%), rgba(var(--spot-r, 255), var(--spot-g, 245), var(--spot-b, 185), .28) 0 5%, transparent 18%, rgba(var(--shadow-r, 0), var(--shadow-g, 0), var(--shadow-b, 0), .48) 43%, rgba(0,0,0,.70) 100%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px);
      mix-blend-mode: multiply;
    }

    .weather-effects,
    .weather-effects::before,
    .weather-effects::after,
    .light-flicker {
      position: fixed;
      inset: 0;
      pointer-events: none;
    }

    .weather-effects {
      z-index: 27;
      opacity: .4;
      mix-blend-mode: screen;
      background:
        radial-gradient(circle at 18% 14%, rgba(var(--weather-accent), .16), transparent 22%),
        radial-gradient(circle at 80% 78%, rgba(var(--weather-glow), .1), transparent 28%);
      transition: opacity 900ms ease, background 900ms ease;
    }

    .weather-effects::before,
    .weather-effects::after {
      content: "";
      opacity: 0;
      transition: opacity 900ms ease;
    }

    body.sky-rain .weather-effects::before {
      opacity: .38;
      background: repeating-linear-gradient(108deg, transparent 0 16px, rgba(210, 230, 255, .42) 17px 19px, transparent 20px 30px);
      animation: rainFall .72s linear infinite;
    }

    body.sky-rain .weather-effects::after {
      opacity: .18;
      background: radial-gradient(circle at 50% 100%, rgba(120, 170, 255, .36), transparent 46%);
      animation: stormPulse 4.8s ease-in-out infinite;
    }

    body.sky-frost .weather-effects::before {
      opacity: .28;
      background:
        radial-gradient(circle at 12% 20%, rgba(235, 250, 255, .85) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 34%, rgba(235, 250, 255, .7) 0 1px, transparent 2px),
        radial-gradient(circle at 38% 72%, rgba(235, 250, 255, .75) 0 1px, transparent 2px);
      background-size: 90px 90px, 140px 140px, 120px 120px;
      animation: snowDrift 8s linear infinite;
    }

    body.sky-clear .weather-effects::after {
      opacity: .18;
      background: linear-gradient(115deg, transparent 20%, rgba(255, 230, 130, .34), transparent 52%);
      transform: translateX(-80%);
      animation: sunSweep 11s ease-in-out infinite;
    }

    body.sky-cloud .weather-effects::before {
      opacity: .2;
      background:
        radial-gradient(ellipse at 20% 24%, rgba(220, 235, 255, .34), transparent 28%),
        radial-gradient(ellipse at 76% 42%, rgba(165, 190, 230, .24), transparent 30%);
      animation: cloudDrift 18s ease-in-out infinite;
    }

    .light-flicker {
      z-index: 28;
      opacity: .08;
      mix-blend-mode: screen;
      background:
        radial-gradient(circle at 48% 34%, rgba(255, 235, 160, .24), transparent 7%),
        radial-gradient(circle at 58% 52%, rgba(255, 246, 190, .1), transparent 18%);
      animation: smallLightFlicker 4.8s steps(4) infinite;
    }

    .grain {
      position: fixed;
      inset: -50%;
      z-index: 30;
      pointer-events: none;
      opacity: .12;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
      animation: grainMove .7s steps(2) infinite;
    }

    .hotspot {
      position: absolute;
      z-index: 8;
      border: 0;
      background: transparent;
      cursor: pointer;
      border-radius: 1rem;
    }

    .hotspot-coming { left: 26.5%; top: 25.3%; width: 25.2%; height: 22.4%; }
    .hotspot-soon { left: 42.1%; top: 43.3%; width: 26.1%; height: 22.5%; }
    .hotspot-brand { left: 68.5%; top: 73.0%; width: 26.2%; height: 20.8%; }
    .watch-hotspot { left: 32.8%; top: 9.2%; width: 42.5%; height: 11.1%; }
    .hotspot-heart { left: 55.2%; top: 22.0%; width: 13.0%; height: 18.8%; }
    .hotspot-biscuits { left: 71.0%; top: 25.8%; width: 10.7%; height: 26.4%; }
    .hotspot-marker { left: 13.8%; top: 56.2%; width: 26.0%; height: 16.7%; transform: rotate(-28deg); }
    .hotspot-memory { left: 46.5%; top: 77.0%; width: 13.0%; height: 6.2%; }
    .hotspot-microsd { left: 84.0%; top: 54.3%; width: 6.5%; height: 11.3%; }
    .hotspot-key { left: 14.0%; top: 47.4%; width: 7.6%; height: 6.0%; }
    .hotspot-storage-one { left: 20.8%; top: 11.5%; width: 3.2%; height: 5.8%; }
    .hotspot-storage-two { left: 18.6%; top: 32.7%; width: 4.2%; height: 5.0%; }

    .hotspot::before {
      content: "";
      position: absolute;
      inset: -4px;
      border-radius: inherit;
      opacity: 0;
      background: rgba(255, 242, 166, .16);
      outline: 1px solid rgba(255, 232, 130, .35);
      box-shadow: 0 0 24px rgba(255, 220, 100, .38), inset 0 0 22px rgba(255,255,255,.08);
      transition: opacity .25s ease, transform .25s ease;
      transform: scale(.98);
    }

    .hotspot:hover::before,
    .hotspot:focus-visible::before,
    .hotspot.is-active::before {
      opacity: 1;
      transform: scale(1);
    }

    .tooltip {
      position: absolute;
      left: 50%;
      bottom: calc(100% + 12px);
      transform: translateX(-50%) translateY(8px) scale(.96);
      width: max-content;
      max-width: 280px;
      padding: .72rem .95rem;
      border-radius: 999px;
      background: rgba(18, 18, 16, .82);
      color: #fff8cf;
      font-size: clamp(.72rem, 1vw, .95rem);
      font-weight: 650;
      letter-spacing: .01em;
      text-align: center;
      backdrop-filter: blur(12px);
      box-shadow: 0 12px 30px rgba(0,0,0,.35);
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease, transform .25s ease;
      white-space: normal;
    }

    .tooltip::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 100%;
      transform: translateX(-50%);
      border: 8px solid transparent;
      border-top-color: rgba(18,18,16,.82);
    }

    .hotspot:hover .tooltip,
    .hotspot:focus-visible .tooltip,
    .hotspot.is-active .tooltip {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1);
    }

    .media-signal,
    .media-signal::before,
    .media-signal::after {
      position: fixed;
      inset: 0;
      pointer-events: none;
    }

    .media-signal {
      z-index: 32;
      opacity: .36;
      mix-blend-mode: screen;
      background:
        linear-gradient(90deg, transparent 0 46%, rgba(255,255,255,.12) 48%, transparent 50%),
        repeating-linear-gradient(180deg, transparent 0 38px, rgba(255,255,255,.035) 39px 40px);
      clip-path: polygon(0 0, 100% 0, 100% 18%, 0 14%);
      animation: spliceBar 9s steps(1) infinite;
    }

    .media-signal::before {
      content: "FRAME 00 / DREAM SIGNAL / LONDON WINDOW";
      top: 9vh;
      left: 3vw;
      right: auto;
      bottom: auto;
      width: min(560px, 92vw);
      color: rgba(255,248,207,.42);
      font-size: clamp(.68rem, 1.3vw, 1rem);
      font-weight: 900;
      letter-spacing: .42em;
      white-space: nowrap;
      transform: rotate(-2deg);
      animation: titleJitter 5.8s steps(2) infinite;
    }

    .media-signal::after {
      content: "";
      background:
        linear-gradient(90deg, rgba(255, 244, 180, .18), transparent 18% 76%, rgba(120, 220, 255, .16)),
        repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,255,255,.08) 55px 56px);
      clip-path: polygon(0 68%, 100% 60%, 100% 78%, 0 86%);
      animation: tapeSkew 7.2s cubic-bezier(.45, 0, .55, 1) infinite;
    }

    .draw-zone {
      position: absolute;
      left: 3.0%;
      top: 73.7%;
      width: 26.5%;
      height: 19.7%;
      z-index: 12;
      border-radius: .35rem;
      overflow: hidden;
      cursor: crosshair;
      transform: rotate(.2deg);
      touch-action: none;
    }

    #drawCanvas {
      width: 100%;
      height: 100%;
      display: block;
      opacity: .92;
      mix-blend-mode: multiply;
    }

    .draw-tools {
      position: absolute;
      left: 3.4%;
      top: 70.1%;
      z-index: 20;
      display: flex;
      align-items: center;
      gap: .45rem;
      padding: .42rem .5rem;
      border-radius: 999px;
      background: rgba(10, 10, 9, .62);
      color: #fff8cf;
      border: 1px solid rgba(255,255,255,.13);
      backdrop-filter: blur(12px);
      box-shadow: 0 10px 30px rgba(0,0,0,.32);
      animation: floatTools 5s ease-in-out infinite;
    }

    .draw-tools button,
    .draw-tools input {
      width: 2rem;
      height: 2rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.15);
      background: rgba(255,255,255,.08);
      color: #fff8cf;
      font-weight: 800;
    }

    .draw-tools input { padding: 0; overflow: hidden; }

    .draw-tools span {
      font-size: .75rem;
      font-weight: 700;
      padding-inline: .25rem;
      white-space: nowrap;
    }

    .time-overlay {
      position: fixed;
      inset: 0;
      z-index: 60;
      pointer-events: none;
      display: grid;
      place-items: center;
      opacity: 0;
      transition: opacity 900ms cubic-bezier(.22, 1, .36, 1);
    }

    .time-overlay.active {
      opacity: 1;
    }

    .time-overlay-inner {
      position: relative;
      padding: 2rem 2.4rem;
      border-radius: 2rem;
      overflow: hidden;
      background: rgba(10, 10, 10, .52);
      border: 1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(24px);
      box-shadow:
        0 0 80px rgba(255, 230, 120, .12),
        0 40px 100px rgba(0,0,0,.45);
      transform: scale(.78) rotate(-4deg);
      transition: transform 1200ms cubic-bezier(.16, 1, .3, 1);
    }

    .time-overlay.active .time-overlay-inner {
      transform: scale(1) rotate(0deg);
    }

    .time-overlay-inner::before {
      content: "";
      position: absolute;
      inset: -30%;
      background:
        conic-gradient(from 180deg, transparent, rgba(255,255,255,.22), transparent 34%),
        radial-gradient(circle, rgba(255,240,180,.12), transparent 60%);
      animation: timeSpin 9s linear infinite;
    }

    .time-city,
    .time-value,
    .time-sub {
      position: relative;
      z-index: 2;
    }

    .time-city {
      text-transform: uppercase;
      letter-spacing: .5em;
      font-size: .72rem;
      color: rgba(255,248,207,.72);
      margin-bottom: .7rem;
    }

    .time-value {
      font-size: clamp(2.4rem, 8vw, 6rem);
      line-height: 1;
      font-weight: 900;
      color: #fff8cf;
      text-shadow: 0 0 40px rgba(255,245,180,.22);
      animation: clockPulse 3s cubic-bezier(.22, 1, .36, 1) infinite;
    }

    .time-sub {
      margin-top: .8rem;
      letter-spacing: .2em;
      text-transform: lowercase;
      font-style: italic;
      color: rgba(255,248,207,.55);
    }

    @keyframes timeSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes clockPulse {
      0%, 100% {
        transform: scale(1);
        filter: blur(0px);
      }
      50% {
        transform: scale(1.03);
        filter: blur(.3px);
      }
    }

    .weather-notice {
      position: fixed;
      top: max(1rem, env(safe-area-inset-top));
      right: max(1rem, env(safe-area-inset-right));
      left: auto;
      z-index: 50;
      width: min(260px, calc(100vw - 2rem));
      padding: .65rem .75rem;
      border-radius: 1rem;
      background: rgba(5, 8, 10, .58);
      border: 1px solid rgba(255,255,255,.13);
      color: #fff8cf;
      backdrop-filter: blur(16px);
      box-shadow: 0 20px 55px rgba(0,0,0,.34);
      transform: none;
      opacity: 1;
      transition:
        background 300ms ease,
        border-color 300ms ease;
    }

    .weather-notice.active {
      transform: none;
      opacity: 1;
    }

    .weather-title {
      font-size: .62rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(255,248,207,.64);
      margin-bottom: 0;
    }

    .weather-kicker {
      display: flex;
      align-items: center;
      gap: .4rem;
      margin-bottom: .32rem;
    }

    .live-dot {
      width: .48rem;
      height: .48rem;
      border-radius: 999px;
      background: rgb(var(--weather-accent));
      box-shadow: 0 0 16px rgba(var(--weather-accent), .78);
      animation: liveBlink 1.9s ease-in-out infinite;
    }

    .weather-main {
      font-weight: 850;
      font-size: .82rem;
    }

    .weather-sub {
      margin-top: .2rem;
      font-size: .68rem;
      color: rgba(255,248,207,.68);
    }

    .weather-details {
      display: none;
      margin-top: .3rem;
      font-size: .66rem;
      line-height: 1.45;
      color: rgba(255,248,207,.7);
    }

    .weather-temp-pill {
      display: none;
      font-size: .86rem;
      font-weight: 850;
      white-space: nowrap;
    }

    .weather-blurb {
      margin-top: .38rem;
      font-size: .68rem;
      line-height: 1.45;
      color: rgba(255,248,207,.76);
    }

    .weather-made {
      display: none;
      margin-top: .4rem;
      font-size: .68rem;
      color: rgba(255,248,207,.56);
    }

    .weather-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .38rem;
      justify-content: flex-end;
      margin-top: .5rem;
    }

    .weather-actions button,
    .weather-actions a,
    .skybox-close {
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.09);
      color: #fff8cf;
      cursor: pointer;
      transition: transform 300ms cubic-bezier(.19, 1, .22, 1), background 300ms ease;
    }

    .weather-actions button,
    .weather-actions a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 2.1rem;
      padding: 0 .68rem;
      border-radius: 999px;
      font-size: .66rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      text-decoration: none;
    }

    .weather-actions button:hover,
    .weather-actions button:focus-visible,
    .weather-actions a:hover,
    .weather-actions a:focus-visible,
    .skybox-close:hover,
    .skybox-close:focus-visible {
      transform: translateY(-1px) scale(1.03);
      background: rgba(255,255,255,.17);
    }

    .skybox-overlay {
      position: fixed;
      inset: 0;
      z-index: 70;
      display: grid;
      place-items: center;
      padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
      background: rgba(0, 0, 0, .68);
      backdrop-filter: blur(18px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 420ms ease;
    }

    .skybox-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .skybox-frame {
      position: relative;
      width: min(760px, 94vw);
      max-height: 88svh;
      transform: scale(.96);
      transition: transform 520ms cubic-bezier(.19, 1, .22, 1);
    }

    .skybox-overlay.active .skybox-frame {
      transform: scale(1);
    }

    .skybox-frame img {
      display: block;
      width: 100%;
      max-height: 88svh;
      object-fit: contain;
      border-radius: 1rem;
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: 0 40px 110px rgba(0,0,0,.58);
      background: #080808;
    }

    .skybox-close {
      position: absolute;
      right: .75rem;
      top: .75rem;
      width: 2.2rem;
      height: 2.2rem;
      border-radius: 999px;
      font-size: 1.15rem;
      line-height: 1;
    }

    .clock-close {
      position: absolute;
      right: .85rem;
      top: .85rem;
      z-index: 4;
      width: 2.1rem;
      height: 2.1rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.08);
      color: #fff8cf;
      font-size: 1.1rem;
      line-height: 1;
      cursor: pointer;
      pointer-events: auto;
      transition: transform 300ms cubic-bezier(.19, 1, .22, 1), background 300ms ease;
    }

    .clock-close:hover {
      transform: scale(1.08) rotate(8deg);
      background: rgba(255,255,255,.16);
    }

    .mobile-hint {
      position: fixed;
      left: 50%;
      bottom: max(1rem, env(safe-area-inset-bottom));
      transform: translateX(-50%);
      z-index: 40;
      background: rgba(0,0,0,.58);
      backdrop-filter: blur(10px);
      color: #fff6bd;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 999px;
      padding: .7rem 1rem;
      font-size: .82rem;
      box-shadow: 0 18px 45px rgba(0,0,0,.35);
      animation: hintPulse 3s ease-in-out infinite;
    }

    .dream-wisp {
      position: fixed;
      z-index: 31;
      pointer-events: none;
      color: rgba(255, 246, 189, .55);
      font-family: Georgia, serif;
      font-style: italic;
      letter-spacing: .16em;
      text-transform: lowercase;
      filter: blur(.2px);
      mix-blend-mode: screen;
      animation: driftWisp 12s cubic-bezier(.45, 0, .55, 1) infinite;
    }

    .dream-wisp.one { left: 8vw; top: 16vh; animation-delay: -2s; }
    .dream-wisp.two { right: 7vw; top: 28vh; animation-delay: -7s; }
    .dream-wisp.three { left: 52vw; bottom: 13vh; animation-delay: -4s; }

    .edge-flicker {
      position: fixed;
      inset: 0;
      z-index: 29;
      pointer-events: none;
      opacity: .16;
      mix-blend-mode: screen;
      background:
        linear-gradient(90deg, rgba(255,0,80,.18), transparent 12%, transparent 88%, rgba(0,200,255,.18)),
        repeating-linear-gradient(90deg, transparent 0 7px, rgba(255,255,255,.05) 7px 8px);
      animation: edgeFlicker 6s steps(3) infinite;
    }

    @keyframes driftWisp {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); opacity: .08; }
      25% { opacity: .5; }
      50% { transform: translate3d(18px, -22px, 0) rotate(2deg); opacity: .22; }
      75% { opacity: .42; }
    }

    @keyframes edgeFlicker {
      0%, 100% { transform: translateX(0); opacity: .08; }
      28% { transform: translateX(-1px); opacity: .18; }
      61% { transform: translateX(2px); opacity: .12; }
      79% { transform: translateX(-2px); opacity: .2; }
    }

    @keyframes spliceBar {
      0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 18%, 0 14%); transform: translateY(0); opacity: .18; }
      18% { clip-path: polygon(0 34%, 100% 28%, 100% 43%, 0 48%); transform: translateY(-1vh); opacity: .38; }
      19% { clip-path: polygon(0 2%, 100% 0, 100% 9%, 0 15%); transform: translateY(1vh); opacity: .22; }
      52% { clip-path: polygon(0 72%, 100% 65%, 100% 80%, 0 86%); transform: translateY(0); opacity: .3; }
      53% { clip-path: polygon(0 12%, 100% 18%, 100% 25%, 0 19%); opacity: .16; }
    }

    @keyframes titleJitter {
      0%, 100% { transform: translateX(0) rotate(-2deg); opacity: .24; filter: blur(0); }
      24% { transform: translateX(8px) rotate(-1deg); opacity: .5; }
      25% { transform: translateX(-12px) rotate(-3deg); opacity: .18; filter: blur(.5px); }
      72% { transform: translateX(4px) rotate(-2deg); opacity: .36; }
    }

    @keyframes tapeSkew {
      0%, 100% { transform: translate3d(-4vw, 0, 0) skewY(-2deg); opacity: .08; }
      45% { transform: translate3d(5vw, -2vh, 0) skewY(2deg); opacity: .24; }
      48% { transform: translate3d(-2vw, 1vh, 0) skewY(-5deg); opacity: .36; }
    }

    @keyframes rainFall {
      from { transform: translate3d(0, -22px, 0); }
      to { transform: translate3d(-18px, 24px, 0); }
    }

    @keyframes stormPulse {
      0%, 100% { opacity: .1; }
      48% { opacity: .22; }
      50% { opacity: .55; }
      53% { opacity: .16; }
    }

    @keyframes snowDrift {
      from { transform: translate3d(0, -30px, 0); }
      to { transform: translate3d(30px, 42px, 0); }
    }

    @keyframes sunSweep {
      0%, 100% { transform: translateX(-90%); opacity: .04; }
      55% { transform: translateX(80%); opacity: .22; }
    }

    @keyframes cloudDrift {
      0%, 100% { transform: translateX(-1.5vw); }
      50% { transform: translateX(2.5vw); }
    }

    @keyframes smallLightFlicker {
      0%, 100% { opacity: .06; }
      12% { opacity: .12; }
      14% { opacity: .04; }
      16% { opacity: .14; }
      68% { opacity: .08; }
      70% { opacity: .12; }
    }

    @keyframes liveBlink {
      0%, 100% { opacity: .6; transform: scale(.86); }
      50% { opacity: 1; transform: scale(1.08); }
    }

    @keyframes shutterFlash {
      0% { opacity: .35; }
      18% { opacity: .78; }
      42% { opacity: .18; }
      100% { opacity: .22; }
    }

    @keyframes lampFlicker {
      0%, 100% { opacity: .16; }
      7% { opacity: .08; }
      8% { opacity: .24; }
      9% { opacity: .12; }
      42% { opacity: .18; }
      43% { opacity: .07; }
      44% { opacity: .22; }
      79% { opacity: .14; }
    }

    @keyframes weatherMood {
      0%, 100% {
        filter:
          saturate(calc(var(--weather-sat, 1.04) - .05))
          contrast(var(--weather-contrast, 1.04))
          brightness(var(--weather-brightness, 1))
          hue-rotate(var(--mood-hue, 0deg));
      }
      50% {
        filter:
          saturate(calc(var(--weather-sat, 1.04) + .08))
          contrast(calc(var(--weather-contrast, 1.04) + .04))
          brightness(calc(var(--weather-brightness, 1) + .03))
          hue-rotate(var(--mood-hue, 0deg));
      }
    }

    @keyframes lightLeak {
      0%, 58%, 100% { transform: translateX(-130%); opacity: 0; }
      68% { opacity: .22; }
      82% { transform: translateX(130%); opacity: 0; }
    }

    @keyframes grainMove {
      0% { transform: translate(0,0); }
      100% { transform: translate(-7%, 5%); }
    }

    @keyframes floatTools {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }

    @keyframes hintPulse {
      0%, 100% { opacity: .82; }
      50% { opacity: 1; }
    }

    @media (max-width: 800px) {
      .stage-wrap {
        cursor: grab;
        overflow: hidden;
        touch-action: none;
      }

      .stage-wrap.is-dragging { cursor: grabbing; }

      .stage {
        width: auto;
        height: 120svh;
        min-width: 175vw;
        left: 0;
        top: 0;
        transform: translate3d(0, 0, 0) scale(1);
        transform-origin: top left;
      }

      .tooltip {
        position: fixed;
        left: 50%;
        bottom: calc(env(safe-area-inset-bottom) + var(--mobile-tooltip-bottom, 4.5rem));
        top: auto;
        width: min(88vw, 340px);
        max-width: none;
        border-radius: 1.1rem;
        font-size: .88rem;
        padding: .85rem 1rem;
        transform: translateX(-50%) translateY(10px) scale(.98);
      }

      .tooltip::after { display: none; }

      .hotspot:hover .tooltip,
      .hotspot:focus-visible .tooltip,
      .hotspot.is-active .tooltip {
        transform: translateX(-50%) translateY(0) scale(1);
      }

      .draw-tools {
        left: 50%;
        top: auto;
        bottom: calc(env(safe-area-inset-bottom) + 4.6rem);
        transform: translateX(-50%);
        animation: none;
      }

      .draw-tools span { display: none; }

      .weather-notice {
        top: max(.75rem, env(safe-area-inset-top));
        right: max(.75rem, env(safe-area-inset-right));
        width: auto;
        min-width: 4.6rem;
        max-width: calc(100vw - 1.5rem);
        padding: .55rem .7rem;
        border-radius: 999px;
        cursor: pointer;
      }

      .weather-temp-pill {
        display: block;
      }

      .weather-notice:not(.expanded) .weather-kicker,
      .weather-notice:not(.expanded) .weather-main,
      .weather-notice:not(.expanded) .weather-sub,
      .weather-notice:not(.expanded) .weather-details,
      .weather-notice:not(.expanded) .weather-blurb,
      .weather-notice:not(.expanded) .weather-made,
      .weather-notice:not(.expanded) .weather-actions {
        display: none;
      }

      .weather-notice.expanded {
        width: min(280px, calc(100vw - 1.5rem));
        border-radius: 1rem;
      }

      .weather-notice.expanded .weather-temp-pill {
        display: none;
      }

      .weather-notice.expanded .weather-details {
        display: block;
      }

      .weather-notice.expanded .weather-actions {
        justify-content: flex-start;
      }

      .media-signal::before {
        top: 14vh;
        left: 7vw;
        width: 130vw;
        font-size: .58rem;
        letter-spacing: .26em;
      }

      .mobile-hint {
        width: max-content;
        max-width: 92vw;
        text-align: center;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation: none !important;
        transition: none !important;
      }
    }