/* Ramen Stall stage prototype v02. Tokens + reset come from ../../splash.css; sky from ../../sky.css.
   Stack (back to front): sky -> backdrop (location) -> stage rig (plate + live screens) -> 3D Bebop (full viewport,
   same camera as the plate) -> glow -> rain -> UI. The rig is transformed for the click-to-zoom camera. */
html, body { height: 100%; }
body { overflow: hidden; }
.world { position: relative; height: 100svh; display: grid; grid-template-rows: auto 1fr auto auto; place-items: center; overflow: hidden; }
.world > :not(.sky) { position: relative; z-index: 4; }
.world > .backdrop { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.world > .stage { z-index: 1; }
.world > .bot3d-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease-out-expo); }
.bot3d-layer.ready { opacity: 1; }
.rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

/* ---- 2AM Terminal re-ink (2026-10-27, BRAND_BRIEF v3.1): graphite ground, cream, ONE red, teal structure, cyan glow only.
   splash.css still carries the retired rust tokens for the old pages, so the stall re-points them here (this file only loads in the stall). */
:root {
  --ground: #19191B; --panel: #202023; --card: #27272B; --line: #37373C; --letterbox: #0E0E10;
  --cream: #E9DCC4; --cream-dim: #A39886; --ink: #4A4036;
  --red: #AD3434; --red-hover: #9C2D2D; --red-down: #8F2828;
  --teal: #3FA89A; --sage: #6E8B5E; --cyan: #00E5D1; --camel: #C89A66;
  --clr-bg: var(--ground); --clr-bg-alt: var(--panel); --clr-bg-card: var(--card); --clr-border: var(--line);
  --clr-orange: var(--red); --clr-ember-text: var(--cream); --clr-text: var(--cream); --clr-text-dim: var(--cream-dim); --clr-text-bright: var(--cream);
  --ui-cyan: var(--cyan); --ui-text: var(--cream); --ui-dim: var(--cream-dim);   /* panels render outside .world: same tokens page-wide */
}
.wordmark .dot { color: var(--red); }
::selection { background: var(--red); color: var(--cream); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.brandline { justify-self: start; display: flex; gap: 14px; align-items: baseline; padding: 14px 16px 0; }
.brandline .wordmark { font-size: clamp(1rem, 2.4vw, 1.4rem); }
.proto { font-size: .72rem; letter-spacing: .12em; color: var(--cream-dim); }

/* HUD controls: square-cut graphite glass (3px corners, like the HQ panels), cream-dim at rest, teal + brackets on hover/focus */
.hud { position: absolute !important; top: 12px; right: 112px; display: flex; gap: 6px; }
.hud__btn { min-height: 36px; padding: 0 12px; border-radius: 3px; border: 1px solid var(--line); background-color: rgba(25, 25, 27, .78);
            color: var(--cream-dim); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; backdrop-filter: blur(4px); }
.hud__k { color: var(--cream-dim); }
.hud__btn #locName { color: var(--cream); }
.hud__btn:hover, .hud__btn:focus-visible { border-color: var(--teal); color: var(--cream); }
.hud__btn[aria-pressed="true"] { border-color: var(--teal); color: var(--cream); }
.hud__btn[aria-pressed="true"]::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; vertical-align: 1px;
  background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }   /* cyan = live: the one glow on the control */
/* the stage box = the plate's frame at rest; zoomed content spills past it (the world clips) */
/* v03: full-bleed. The plate COVERS the viewport (rendered with overscan, centre-safe), so no edge ever shows. */
.world > .stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
                  width: max(100vw, calc(100svh * var(--ar, 1.7778))); aspect-ratio: var(--ar, 16 / 9); }
.rig { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.rig--front { pointer-events: none; }
.plates { position: absolute; inset: 0; }
.plate { position: absolute; left: 0; top: 0; display: block; max-width: none; user-select: none; -webkit-user-drag: none; transition: opacity 1.1s ease; }
.screens { position: absolute; inset: 0; pointer-events: none; z-index: 5; }   /* above the day/night plates (they carry z-index 1-2) */
.screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; image-rendering: auto; }
.screen--tv, .screen--terminal { filter: drop-shadow(0 0 4px rgba(0, 229, 209, .35)); }
.screen--nowplaying { filter: none; }   /* v3: a printed album sleeve, not a glowing screen */
.glow { display: block; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .25s var(--ease-out-expo);
        filter: drop-shadow(0 0 6px rgba(0, 229, 209, .9)) drop-shadow(0 0 18px rgba(0, 229, 209, .5)); }
.glow.on { opacity: .55; }
.stage.hot { cursor: pointer; }
.stage.zoomed .glow { opacity: 0; }
.tip { position: absolute; transform: translate(-50%, -140%); white-space: nowrap; pointer-events: none; padding: 4px 10px; border-radius: 3px; z-index: 5;
       background: rgba(25, 25, 27, .9); border: 1px solid var(--teal); color: var(--cream); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.tip::before { content: "> "; color: var(--teal); }

.back { position: absolute !important; left: 16px; top: 56px; min-height: 40px; padding: 0 14px; border-radius: 3px; border: 1px solid var(--line);
        background-color: rgba(25, 25, 27, .86); color: var(--cream); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.back:hover, .back:focus-visible { border-color: var(--teal); }

.objects { align-self: end; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 4px 16px; }
.objects button { padding: 6px 10px; min-height: 36px; border: 1px solid var(--line); border-radius: 3px; color: var(--cream-dim);
                  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; background-color: rgba(25, 25, 27, .78); }
.objects button:hover, .objects button:focus-visible { border-color: var(--teal); color: var(--cream); }

/* fast lane: one red CTA, the rest are cream text on a teal hairline */
.lane { width: 100%; display: flex; justify-content: center; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: rgba(25, 25, 27, .9); border-top: 1px solid var(--line); backdrop-filter: blur(6px); }
.lane a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 3px; color: var(--cream); background-color: rgba(25, 25, 27, .78);
          font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; border: 1px solid rgba(63, 168, 154, .5); }
.lane a:hover, .lane a:focus-visible { border-color: var(--teal); background-color: rgba(32, 32, 35, .95); }
.lane .lane__book { background-color: var(--red); border-color: var(--red); color: var(--cream); }
.lane .lane__book:hover, .lane .lane__book:focus-visible { background-color: var(--red-hover); border-color: var(--red-hover); }
.lane .lane__book:active { background-color: var(--red-down); }

/* panel = a HUD card beside the zoomed object (non-modal: the camera shot stays visible).
   CH tab (data-ch, set by stage.js open()) on the top edge · boot line = the eyebrow · corner brackets snap on with focus/hover */
.panel { position: fixed; z-index: 10; margin: 0; inset: auto 24px auto auto; top: 50%; transform: translateY(-50%);
         max-width: min(420px, calc(100vw - 32px)); width: 100%; padding: 36px 22px 20px; border: 1px solid var(--line); border-radius: 3px;
         background-color: var(--panel); color: var(--cream); font-family: var(--font-body);
         box-shadow: 6px 8px 0 rgba(0, 0, 0, .35), 0 20px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(233, 220, 196, .06); }
.panel { max-height: min(84vh, 760px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.panel[data-ch]::before { content: "CH " attr(data-ch); position: absolute; top: 0; left: 18px; padding: 5px 18px 5px 9px;
  font: .7rem/1 var(--font-body); letter-spacing: .18em; color: var(--ground); background: var(--teal);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
#panelBody:empty, .panel__links:empty { display: none; }
.panel[open] { animation: panelIn .45s var(--ease-out-expo) both; }
@keyframes panelIn { from { opacity: 0; transform: translate(24px, -50%); } }
.panel h2 { font-family: var(--font-display); font-weight: 700; color: var(--cream); font-size: 1.25rem; letter-spacing: .06em; text-transform: uppercase; margin: .15em 0 .5em; }
/* boot line: the object answers as the card opens ("> the record player_" types on, the caret blinks) */
.panel__eyebrow { margin: 0; color: var(--cream-dim); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel__eyebrow::before { content: "> "; color: var(--teal); }
.panel__eyebrow::after { content: ""; display: inline-block; width: .55em; height: 1em; margin-left: 3px; vertical-align: -2px; background: var(--cyan); opacity: .8;
  animation: bootCaret 1s steps(1) infinite; }
.panel[open] .panel__eyebrow { animation: bootType .5s steps(14) both; }
@keyframes bootType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bootCaret { 50% { opacity: 0; } }
.panel__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.panel__links a { padding: 9px 14px; border: 1px solid var(--teal); border-radius: 3px; color: var(--teal); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.panel__links a:hover, .panel__links a:focus-visible { background-color: rgba(63, 168, 154, .14); color: var(--cream); }
.panel__close { position: absolute; right: 10px; top: 4px; width: 40px; height: 40px; font-size: 1.4rem; color: var(--cream-dim); }
.panel__close:hover, .panel__close:focus-visible { color: var(--cream); }

@media (max-width: 980px) { .proto { display: none; } }
@media (max-width: 600px) {
  .proto, .hud__k { display: none; }
  .hud { top: 54px; right: 12px; }
  .back { top: 100px; left: 12px; }
  .panel { inset: auto 12px calc(76px + env(safe-area-inset-bottom)) 12px; top: auto; transform: none; max-width: none; width: auto; max-height: 64svh; }
  @keyframes panelIn { from { opacity: 0; transform: translateY(24px); } }
}
@media (prefers-reduced-motion: reduce) {
  .glow, .bot3d-layer, .panel[open], .panel[open] .panel__eyebrow { transition: none; animation: none; }
  .panel__eyebrow::after { animation: none; }
}

/* the sky dial is built by sky_dial.js inside .world: keep it pinned top-right (the generic .world > * rule made it a grid row under the lane) */
.world > .skydial { position: absolute !important; top: 12px; right: 16px; z-index: 20; }

/* ---- v05 hidden getaway: the big striped synthwave sun lives in the site sky (it still moves with the clock) */
.world .sky__orb--sun { left: 50% !important; top: min(var(--sky-orb-y, 50%), 30svh) !important; width: clamp(160px, 40vmin, 520px);   /* centred behind the stall; it still rises/sets with the clock */
  background: linear-gradient(180deg, #FFE9AE 0%, #FFB494 30%, #F98A92 55%, #E9608F 100%);
  box-shadow: 0 0 120px 40px rgba(247, 160, 160, .28);
  -webkit-mask-image: linear-gradient(180deg, #000 0 30%, transparent 30% 31.5%, #000 31.5% 38%, transparent 38% 40.5%, #000 40.5% 47%, transparent 47% 50.5%, #000 50.5% 57%, transparent 57% 61.5%, #000 61.5% 68%, transparent 68% 74%, #000 74% 80%, transparent 80% 87%, #000 87%);
          mask-image: linear-gradient(180deg, #000 0 30%, transparent 30% 31.5%, #000 31.5% 38%, transparent 38% 40.5%, #000 40.5% 47%, transparent 47% 50.5%, #000 50.5% 57%, transparent 57% 61.5%, #000 61.5% 68%, transparent 68% 74%, #000 74% 80%, transparent 80% 87%, #000 87%); }

/* ---- panel extras: music player, TV, terminal */
.panel__extra:empty { display: none; }
.panel__extra { margin-top: 12px; }
.pl__row { display: flex; gap: 8px; }
.pl button, .tv__row button { padding: 8px 14px; border-radius: 3px; border: 1px solid rgba(63, 168, 154, .55); color: var(--cream); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.pl button:hover, .pl button:focus-visible, .tv__row button:hover, .tv__row button:focus-visible { border-color: var(--teal); background-color: rgba(63, 168, 154, .12); }
.pl .pl__main { background: var(--red); border-color: var(--red); color: var(--cream); min-width: 92px; }
.pl__list { list-style: none; padding: 0; margin: 12px 0 6px; display: grid; gap: 4px; }
.pl__list button { width: 100%; text-align: left; border-color: var(--line); color: var(--ui-text); text-transform: none; letter-spacing: .02em; font-size: .9rem; }
.pl__list button.on { border-color: var(--teal); color: var(--cream); background-color: rgba(63, 168, 154, .1); }
.pl__list button.on::before { content: "> "; color: var(--teal); }
.pl__note { color: var(--ui-dim); font-size: .74rem; }
.tv__big { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: var(--letterbox); display: block; object-fit: cover; }
.tv__title { color: var(--ui-dim); font-size: .8rem; margin: 8px 0; }
.tv__row { display: flex; flex-wrap: wrap; gap: 6px; }
.term__out { height: 220px; overflow: auto; margin: 0; padding: 10px; border-radius: 3px; background: var(--letterbox); color: var(--cream);
  font: .82rem/1.45 "Share Tech Mono", "Courier New", monospace; white-space: pre-wrap; border: 1px solid var(--line); }
.term__in { width: 100%; margin-top: 6px; padding: 9px 10px; border-radius: 0; background: var(--letterbox); color: var(--cream); border: 0; border-bottom: 1px solid var(--cyan);
  font: .9rem "Share Tech Mono", "Courier New", monospace; text-transform: uppercase; caret-color: var(--cyan); }
.term__in:focus { outline: 0; box-shadow: 0 1px 0 var(--cyan), 0 6px 14px -8px rgba(0, 229, 209, .6); }

/* ---- night: a synthwave moon to match the sun (centred behind the stall, striped base, faint craters, cool glow) */
.world .sky__orb--moon { left: 50% !important; top: min(var(--sky-orb-y, 50%), 28svh) !important; width: clamp(150px, 36vmin, 470px);
  background:
    radial-gradient(circle at 32% 30%, rgba(120, 110, 170, .2) 0 6%, transparent 7.5%),
    radial-gradient(circle at 62% 22%, rgba(120, 110, 170, .16) 0 3.5%, transparent 5%),
    radial-gradient(circle at 55% 36%, rgba(120, 110, 170, .14) 0 8%, transparent 10%),
    radial-gradient(circle at 70% 60%, rgba(60, 50, 120, .28), transparent 62%),
    linear-gradient(180deg, #F3EEFF 0%, #CFC6F2 45%, #9FB4EC 100%);
  box-shadow: 0 0 110px 36px rgba(170, 180, 255, .22), 0 0 260px 90px rgba(120, 140, 230, .12);
  -webkit-mask-image: linear-gradient(180deg, #000 0 40%, transparent 40% 41.2%, #000 41.2% 49%, transparent 49% 51%, #000 51% 59%, transparent 59% 62%, #000 62% 70%, transparent 70% 74%, #000 74% 82%, transparent 82% 87%, #000 87%);
          mask-image: linear-gradient(180deg, #000 0 40%, transparent 40% 41.2%, #000 41.2% 49%, transparent 49% 51%, #000 51% 59%, transparent 59% 62%, #000 62% 70%, transparent 70% 74%, #000 74% 82%, transparent 82% 87%, #000 87%); }

/* ---- content panels (copy in content.js): work reel, packages, about, contact */
.work__meta { margin: 10px 0 12px; }
.work__label { display: inline-block; padding: 3px 8px; border-radius: 2px; background: var(--red); color: var(--cream); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.work__title { font-family: var(--font-display); font-weight: 700; color: var(--cream); font-size: .95rem; letter-spacing: .04em; margin: 8px 0 4px; }
.work__text { margin: 0 0 8px; font-size: .9rem; line-height: 1.5; }
.work__tags, .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.work__tags span { padding: 2px 8px; border-radius: 2px; border: 1px solid rgba(63, 168, 154, .45); color: var(--cream-dim); font-size: .72rem; }
.work__strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.work__ch { position: relative; padding: 0; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--letterbox); }
.work__ch img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .7; transition: opacity .2s; }
.work__ch span { position: absolute; left: 4px; bottom: 3px; font-size: .62rem; letter-spacing: .1em; color: var(--cream); text-shadow: 0 1px 3px var(--letterbox); }
.work__ch:hover img, .work__ch.on img { opacity: 1; }
.work__ch.on { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 10px rgba(0, 229, 209, .35); }   /* the channel on air = live */

.panel__extra { counter-reset: sec; }
.sec__h { position: relative; counter-increment: sec; font-family: var(--font-display); font-weight: 700; color: var(--cream); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; margin: 26px 0 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.sec__h::before { content: "// "; color: var(--teal); }
.sec__h::after { content: counter(sec, decimal-leading-zero); position: absolute; right: 0; top: -2px; font: 700 2.4rem/1 var(--font-display);   /* ghost number */
  color: transparent; -webkit-text-stroke: 1px rgba(233, 220, 196, .12); pointer-events: none; }
.sec__lead { margin: 16px 0 0; line-height: 1.55; }
.sec__lead--title { margin-top: 0; color: var(--cream); font-size: 1.02rem; }
.sec__note { color: var(--ui-dim); font-size: .8rem; margin: 10px 0 0; }
.sec__cta { margin: 20px 0 0; padding: 14px; border-radius: 3px; background: var(--card); border-left: 3px solid var(--red); line-height: 1.5; }
.sec__cta a, .pk__ask, .call a, .call button { display: inline-block; margin-top: 6px; padding: 9px 14px; border-radius: 3px; border: 1px solid rgba(63, 168, 154, .55); color: var(--cream);
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.sec__cta a, .call .call__main { background-color: var(--red); border-color: var(--red); color: var(--cream); }
.pk__ask:hover, .call a:hover, .call button:hover, .pk__ask:focus-visible, .call a:focus-visible, .call button:focus-visible { border-color: var(--teal); background-color: rgba(63, 168, 154, .12); }
.sec__cta a:hover, .call .call__main:hover, .sec__cta a:focus-visible, .call .call__main:focus-visible { background-color: var(--red-hover); border-color: var(--red-hover); }
.pk { display: grid; gap: 10px; }
.pk__card { padding: 14px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); }
.pk__card--hot { border-top: 3px solid var(--red); }
.pk__tier { margin: 0; color: var(--ui-dim); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; }
.pk__card--hot .pk__tier { color: var(--cream); }
.pk__card h3 { font-family: var(--font-display); font-weight: 700; color: var(--cream); font-size: 1rem; letter-spacing: .06em; margin: 4px 0; }
.pk__price { margin: 0 0 8px; color: var(--cream); font-size: 1.25rem; }
.pk__price small { color: var(--ui-dim); font-size: .74rem; }
.pk__card ul { margin: 0; padding-left: 18px; font-size: .86rem; line-height: 1.55; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: .88rem; line-height: 1.5; }
.steps strong, .faq summary { color: var(--cream); }
.faq details { border-top: 1px solid var(--line); padding: 9px 0; }
.faq summary { cursor: pointer; font-size: .9rem; }
.faq p { margin: 8px 0 2px; font-size: .86rem; line-height: 1.5; }
.panel__extra > p { line-height: 1.6; }
.quote { margin: 14px 0; padding: 12px 14px; border-left: 3px solid var(--sage); background: var(--card); border-radius: 0 3px 3px 0; font-size: .9rem; line-height: 1.5; }
.quote span { color: var(--sage); font-family: var(--font-display); font-size: .74rem; letter-spacing: .12em; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .86rem; }
.facts dt { color: var(--ui-dim); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; padding-top: 2px; }
.facts dd { margin: 0; }
.call { display: flex; flex-wrap: wrap; gap: 8px; }
/* the live screens use 3D (matrix3d) transforms, which can paint over the fixed panel: keep the whole scene in its own layer */
.world { isolation: isolate; }
.panel { z-index: 20; }

/* ---- Pulse panel + payphone */
.pulse__cv { width: 100%; aspect-ratio: 16 / 9; display: block; border-radius: 3px; background: var(--letterbox); }
.pulse__ctl { display: grid; gap: 6px; margin: 8px 0 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { padding: 6px 11px; border-radius: 3px; border: 1px solid var(--line); color: var(--ui-text); font-size: .74rem; letter-spacing: .06em; }
.chips button[aria-pressed="true"] { border-color: var(--teal); color: var(--ground); background: var(--teal); }
.pl .pl__mic[aria-pressed="true"] { border-color: var(--cyan); color: var(--cream); box-shadow: 0 0 8px rgba(0, 229, 209, .35); }   /* mic live = cyan, not a second red */
.pp { padding: 14px; border-radius: 6px; background: linear-gradient(var(--card), var(--ground)); border: 1px solid var(--line); margin-top: 12px; }
.pp__lcd { display: block; min-height: 2.6em; padding: 8px 10px; border-radius: 3px; background: var(--sage); color: var(--ground); font-family: var(--font-body);
  font-size: .82rem; letter-spacing: .08em; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35); overflow-wrap: anywhere; }
.pp__lcd--msg { letter-spacing: .02em; line-height: 1.4; }
.pp__pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.pp__pad button { display: grid; place-items: center; padding: 8px 0 6px; border-radius: 4px; background: linear-gradient(var(--cream), #D2C4AA); color: var(--ground);
  box-shadow: 0 2px 0 #8E8270; }
.pp__pad button:active { transform: translateY(2px); box-shadow: none; }
.pp__pad b { font-size: 1.15rem; line-height: 1; }
.pp__pad small { font-size: .55rem; letter-spacing: .12em; min-height: 1em; color: var(--ink); }
.pp__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pp__row button, .pp__send, .pp__copy { padding: 9px 14px; border-radius: 3px; border: 1px solid rgba(63, 168, 154, .55); color: var(--cream); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.pp__row .pp__call, .pp__send { background-color: var(--red); border-color: var(--red); color: var(--cream); }
.pp__row .pp__call:hover, .pp__send:hover, .pp__row .pp__call:focus-visible, .pp__send:focus-visible { background-color: var(--red-hover); }
.pp__copy { text-transform: none; letter-spacing: .04em; }
.pp__form { display: grid; gap: 8px; }
.pp__in { width: 100%; padding: 9px 10px; border-radius: 3px; background: var(--letterbox); color: var(--ui-text); border: 1px solid var(--line); font: inherit; font-size: .88rem; resize: vertical; }
.pp__in:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.pp__send { justify-self: start; }
/* when zoomed in, the wordmark can land on top of busy plate detail (the neon sign): give it a backing */
.world:has(.stage.zoomed) .brandline { background: rgba(25, 25, 27, .86); border-radius: 0 0 3px 0; padding-bottom: 10px; padding-right: 18px; backdrop-filter: blur(6px); }

/* petals drift over the scene but under every control (pointer-events off) */
.petals { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
/* mesh node: the beacon glow spills past its tiny quad + adds light; the OLED gets a faint green halo */
.screen--beacon { mix-blend-mode: screen; filter: drop-shadow(0 0 5px rgba(255, 60, 40, .9)); }
.screen--radio { filter: drop-shadow(0 0 3px rgba(0, 229, 209, .35)); }

/* "Start a project" wrapped onto two lines on phones */
.lane a { white-space: nowrap; }
@media (max-width: 420px) { .lane a { padding-left: 12px; padding-right: 12px; letter-spacing: .08em; } }
/* payphone keys glow: only the light, over the real keys */
.screen--phonekeys { mix-blend-mode: screen; }
.screen--phonelcd { filter: drop-shadow(0 0 2px rgba(110, 139, 94, .5)); }

/* close-ups: 3x renders of the zoomed region, faded in on arrival (z 2: above the plates, under the noren loop + screens) */
.closeup { position: absolute; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .45s ease; }
.closeup.on { opacity: 1; }
.closeup img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* vending machine panel (HOT_Vending) = a mini vending machine */
.vm { --trim: var(--ground); background: linear-gradient(180deg, var(--cream), #D6C8AE); border-radius: 6px; padding: 10px;
  box-shadow: inset 0 0 0 2px #C4B59A, 6px 8px 0 rgba(0, 0, 0, .3); color: var(--ground); max-width: 420px; }
.vm--shake { animation: vmShake .38s cubic-bezier(.36, .07, .19, .97); }
@keyframes vmShake { 10%, 90% { transform: translateX(-1px) rotate(-.3deg); } 20%, 80% { transform: translateX(3px) rotate(.4deg); } 30%, 50%, 70% { transform: translateX(-5px) rotate(-.6deg); } 40%, 60% { transform: translateX(5px) rotate(.6deg); } }
.vm__head { background: var(--ground); border-radius: 3px; padding: 8px 10px 9px; text-align: center; font-family: var(--font-display); font-weight: 700;
  letter-spacing: .14em; font-size: .95rem; color: var(--cream); text-shadow: 0 0 6px rgba(0, 229, 209, .55), 0 0 14px rgba(0, 229, 209, .25);
  border-bottom: 3px solid var(--cyan); box-shadow: 0 3px 10px rgba(0, 229, 209, .35); }
.vm__window { margin: 10px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; padding: 12px 10px;
  border-radius: 3px; border: 4px solid var(--trim);
  background: linear-gradient(115deg, rgba(255, 255, 255, .28) 0 18%, rgba(255, 255, 255, 0) 30%), linear-gradient(180deg, #F3E9D6, var(--cream)); }
.vm__slot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 6px; border-bottom: 3px solid #A39886; }
.vm__slot--out .vm__item { opacity: .35; filter: grayscale(.6); }
.vm__item { position: relative; display: grid; place-items: center; width: 30px; height: 50px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent 30%, rgba(255, 255, 255, .45) 45%, transparent 60%, rgba(0, 0, 0, .25)), var(--c); }
.vm__item--can::before { content: ''; position: absolute; top: -3px; left: 3px; right: 3px; height: 5px; border-radius: 3px; background: #C9C9CC; }
.vm__item--bottle { width: 26px; height: 54px; border-radius: 9px 9px 6px 6px; }
.vm__item--bottle::before { content: ''; position: absolute; top: -12px; left: 8px; width: 10px; height: 13px; border-radius: 3px 3px 0 0; background: var(--c); }
.vm__item--bottle::after { content: ''; position: absolute; top: -16px; left: 7px; width: 12px; height: 5px; border-radius: 2px; background: var(--l); }
.vm__label { font: 700 7px/1 var(--font-display); letter-spacing: .04em; color: var(--c); background: var(--l); padding: 3px 2px; border-radius: 2px; transform: rotate(-90deg); white-space: nowrap; }
.vm__btn { display: flex; align-items: center; gap: 5px; font: .7rem/1.1 "Share Tech Mono", "Courier New", monospace; letter-spacing: .02em;
  padding: 4px 7px; border-radius: 3px; border: 1px solid var(--ground); background: var(--card); color: var(--cream); cursor: pointer; text-transform: uppercase; }
.vm__btn:hover, .vm__btn:focus-visible { background: var(--ground); outline: 2px solid var(--cyan); outline-offset: 1px; }
.vm__btn:disabled { cursor: not-allowed; background: var(--ground); color: var(--cream-dim); border-color: var(--ground); }
.vm__lamp { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.vm__btn:disabled .vm__lamp { background: var(--red); box-shadow: 0 0 6px var(--red); }
.vm__panel { display: flex; align-items: stretch; gap: 10px; }
.vm__lcd { flex: 1; margin: 0; min-height: 3.6em; padding: 8px 10px; border-radius: 4px; background: var(--letterbox); color: var(--cyan);
  font: .78rem/1.35 "Share Tech Mono", "Courier New", monospace; text-shadow: 0 0 6px rgba(0, 229, 209, .55); box-shadow: inset 0 0 0 2px var(--line); }
.vm__lcd--new { animation: vmLcd .35s steps(3); }
@keyframes vmLcd { 0% { opacity: .2; } 100% { opacity: 1; } }
.vm__coin { width: 22px; border-radius: 4px; background: linear-gradient(90deg, #8E8E92, #E8E8EA, #8E8E92); position: relative; }
.vm__coin::after { content: ''; position: absolute; left: 9px; top: 25%; bottom: 25%; width: 4px; border-radius: 2px; background: #111; }
.vm__bottom { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.vm__flap { flex: 1; height: 54px; border-radius: 3px; background: linear-gradient(180deg, var(--letterbox), var(--card)); box-shadow: inset 0 6px 10px rgba(0, 0, 0, .7);
  display: grid; place-items: center; overflow: hidden; }
.vm__item--dropped { transform: rotate(90deg); animation: vmDrop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes vmDrop { from { transform: translateY(-60px) rotate(40deg); } to { transform: translateY(0) rotate(90deg); } }
.vm__kick { font: 700 .7rem/1 var(--font-display); letter-spacing: .1em; padding: 14px 12px; border-radius: 3px; cursor: pointer;
  border: 0; color: var(--cream); background: var(--red); box-shadow: 0 3px 0 var(--red-down); }
.vm__kick:hover, .vm__kick:focus-visible { background: var(--red-hover); }
.vm__kick:active { transform: translateY(2px); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .vm--shake, .vm__item--dropped, .vm__lcd--new { animation: none; } }

/* Explore (v2): one pill above the fast lane; the object list pops up over the plaza only when asked */
.objects { position: relative; align-self: end; display: flex; justify-content: center; padding: 4px 16px; gap: 0; }
.objects__toggle { padding: 6px 16px; min-height: 34px; border: 1px solid var(--line); border-radius: 3px;
  background-color: rgba(25, 25, 27, .82); color: var(--cream-dim); font: inherit; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.objects__toggle::before { content: '▴  '; color: var(--teal); }
.objects__toggle[aria-expanded="true"]::before { content: '▾  '; }
.objects__toggle:hover, .objects__toggle:focus-visible, .objects__toggle[aria-expanded="true"] { color: var(--cream); border-color: var(--teal); }
.objects__list { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 15;
  display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 6px; padding: 12px; border-radius: 3px;
  background-color: rgba(32, 32, 35, .97); border: 1px solid var(--line); box-shadow: 6px 8px 0 rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .5);
  backdrop-filter: blur(6px); animation: panelIn .25s var(--ease-out-expo) both; }
.objects__list[hidden] { display: none; }
.objects__list button { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; border-radius: 3px; text-align: left; background-color: var(--card); }
.objects__list button[data-ch]::after { content: attr(data-ch); margin-left: auto; font-size: .7rem; letter-spacing: .1em; color: var(--cream-dim); }   /* = the CH tab on its card */

/* ---- device shells (Brett: make the panels the objects themselves, like the payphone + vending machine) ---- */
/* TV: wood cabinet, curved CRT glass, channel knob */
.dev-tv { display: flex; gap: 10px; padding: 12px; border-radius: 8px; background: linear-gradient(160deg, var(--card), var(--ground));
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(233, 220, 196, .08), 6px 8px 0 rgba(0, 0, 0, .3); }
.dev-tv__screen { position: relative; flex: 1; padding: 8px; border-radius: 22px / 18px; background: var(--letterbox); box-shadow: inset 0 0 0 3px #08080A; }
.dev-tv__screen .tv__big { border-radius: 16px / 13px; }
.dev-tv__screen::after { content: ''; position: absolute; inset: 8px; border-radius: 16px / 13px; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .12), transparent 55%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); }
.dev-tv__side { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 58px; padding: 6px 0; }
.dev-tv__ch { font: .78rem/1 "Share Tech Mono", "Courier New", monospace; color: var(--cyan); background: var(--letterbox); padding: 5px 6px; border-radius: 3px;
  text-shadow: 0 0 6px rgba(0, 229, 209, .7); box-shadow: inset 0 0 0 1px var(--line); }
.dev-tv__knob { --turn: 0deg; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; transform: rotate(var(--turn)); transition: transform .3s;
  background: radial-gradient(circle at 40% 35%, var(--cream), #8E8270 70%); box-shadow: 0 3px 6px rgba(0, 0, 0, .5), inset 0 0 0 2px var(--ink); position: relative; }
.dev-tv__knob::after { content: ''; position: absolute; left: 50%; top: 4px; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 2px; background: var(--ground); }
.dev-tv__knob:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.dev-tv__grille { flex: 1; width: 40px; border-radius: 3px; background: repeating-linear-gradient(0deg, var(--letterbox) 0 3px, var(--line) 3px 6px); min-height: 40px; }
@media (max-width: 520px) { .dev-tv__side { width: 46px; } .dev-tv__knob { width: 36px; height: 36px; } }

/* Record player: receiver screen + a spinning deck (click the record to play / pause) */
.dev-rx { position: relative; padding: 10px; border-radius: 6px; background: linear-gradient(180deg, var(--cream), #CDBEA2);
  box-shadow: inset 0 0 0 2px #B9A98C, 6px 8px 0 rgba(0, 0, 0, .3); }
.dev-rx__screen { padding: 6px; border-radius: 3px; background: var(--letterbox); box-shadow: inset 0 0 0 2px var(--ink); }
.dev-rx__screen .pulse__cv { border-radius: 4px; }
.dev-rx__badge { position: absolute; right: 16px; bottom: 2px; font: 700 .58rem/1 var(--font-display); letter-spacing: .2em; color: var(--ink); }
.dev-deck { position: relative; height: 150px; margin: 10px 0; border-radius: 6px; overflow: hidden;
  background: linear-gradient(160deg, var(--card), var(--ground)); box-shadow: inset 0 0 0 1px var(--line), 6px 8px 0 rgba(0, 0, 0, .3); }
.dev-deck__disc { position: absolute; left: 18px; top: 9px; width: 132px; height: 132px; border-radius: 50%; cursor: pointer;
  background: repeating-radial-gradient(circle, #111 0 2px, #1C1C1C 2px 4px); box-shadow: 0 0 0 6px #2E2E30, 0 4px 10px rgba(0, 0, 0, .6); }
.dev-deck__disc::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 30%, rgba(255, 255, 255, .12) 36%, transparent 42% 80%, rgba(255, 255, 255, .08) 86%, transparent 92%); }
.dev-deck__label { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px; border-radius: 50%;
  background: radial-gradient(circle, var(--ground) 0 3px, var(--red) 4px 100%); box-shadow: inset 0 0 0 4px var(--teal); }
.dev-deck--on .dev-deck__disc { animation: deckSpin 1.8s linear infinite; }
@keyframes deckSpin { to { transform: rotate(360deg); } }
.dev-deck__arm { position: absolute; left: 160px; top: 14px; width: 8px; height: 110px; border-radius: 4px; background: linear-gradient(90deg, var(--cream), var(--cream-dim));
  transform-origin: 4px 4px; transform: rotate(12deg); transition: transform .6s var(--ease-out-expo); }
.dev-deck__arm::after { content: ''; position: absolute; bottom: -6px; left: -5px; width: 18px; height: 14px; border-radius: 3px; background: var(--ground); }
.dev-deck--on .dev-deck__arm { transform: rotate(28deg); }
.dev-deck__brand { position: absolute; right: 14px; bottom: 10px; font: 700 .66rem/1 var(--font-display); letter-spacing: .2em; color: var(--camel); opacity: .85; }
@media (prefers-reduced-motion: reduce) { .dev-deck--on .dev-deck__disc { animation: none; } }

/* About: the chalkboard menu */
.dev-chalk { position: relative; padding: 18px 18px 28px; border-radius: 4px; background: radial-gradient(ellipse at 30% 20%, #29302A, #1C1F1D 70%);
  border: 8px solid var(--camel); box-shadow: inset 0 0 30px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .4); color: var(--cream); }
.dev-chalk p, .dev-chalk dd { text-shadow: 0 0 1px rgba(233, 220, 196, .6); }
.dev-chalk__title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .08em; color: var(--cream); margin-top: 0; border-bottom: 2px dashed rgba(233, 220, 196, .35); padding-bottom: 8px; }
.dev-chalk .quote { border-left-color: var(--red); color: var(--cream); }
.dev-chalk dt { color: var(--teal); }
.dev-chalk__chalk { position: absolute; right: 16px; bottom: 8px; width: 46px; height: 8px; border-radius: 3px; background: var(--cream); box-shadow: -54px 0 0 var(--camel); }

/* Terminal: the beige computer */
.dev-crt { padding: 14px 14px 0; border-radius: 10px 10px 6px 6px; background: linear-gradient(180deg, var(--cream), #CDBEA2); box-shadow: inset 0 0 0 2px #B9A98C, 6px 8px 0 rgba(0, 0, 0, .3); }
.dev-crt__glass { padding: 10px; border-radius: 14px / 12px; background: var(--letterbox); box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 24px rgba(0, 0, 0, .9); position: relative; }
.dev-crt__glass::after { content: ''; position: absolute; inset: 4px; border-radius: 12px / 10px; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px); }
.dev-crt__glass .term__out, .dev-crt__glass .term__in { background: transparent; border-radius: 4px; }
.dev-crt__chin { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 10px; }
.dev-crt__badge { font: 700 .62rem/1 var(--font-display); letter-spacing: .22em; color: var(--ink); }
.dev-crt__led { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }

/* Pirate radio: the rooftop mesh node */
.dev-node { position: relative; margin-top: 18px; padding: 12px; border-radius: 6px; background: linear-gradient(180deg, var(--card), var(--ground));
  box-shadow: inset 0 0 0 1px var(--line), 6px 8px 0 rgba(0, 0, 0, .3); }
.dev-node__ant { position: absolute; right: 22px; top: -18px; width: 5px; height: 22px; border-radius: 3px 3px 0 0; background: var(--line); }
.dev-node__ant::after { content: ''; position: absolute; top: -4px; left: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: nodeBlink 1.6s steps(1) infinite; }
@keyframes nodeBlink { 0%, 10%, 20%, 30% { opacity: 1; } 5%, 15%, 25%, 100% { opacity: .15; } }
.dev-node__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font: 700 .7rem/1 var(--font-display); letter-spacing: .14em; color: var(--cream-dim); }
.dev-node__leds { margin-left: auto; display: flex; gap: 6px; }
.dev-node__leds i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); animation: nodeLed 1.2s infinite; }
.dev-node__leds i:nth-child(2) { background: var(--teal); animation-delay: .4s; } .dev-node__leds i:nth-child(3) { background: var(--cream); animation-delay: .8s; }
@keyframes nodeLed { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.dev-node__oled { padding: 6px; border-radius: 3px; background: var(--letterbox); box-shadow: inset 0 0 0 1px var(--line); }
.dev-node__oled .radio__log { background: transparent; color: var(--cyan); text-shadow: 0 0 5px rgba(0, 229, 209, .5); }
@media (prefers-reduced-motion: reduce) { .dev-node__ant::after, .dev-node__leds i { animation: none; } }

/* B3BOP: speech bubble + things to make him do */
.dev-bop__bubble { position: relative; margin: 4px 0 16px; padding: 14px 16px; border-radius: 6px; background: var(--letterbox); color: var(--cream);
  border: 1px solid rgba(0, 229, 209, .45); font: .92rem/1.45 "Share Tech Mono", "Courier New", monospace; box-shadow: 0 0 18px rgba(0, 229, 209, .15); }
.dev-bop__bubble::after { content: ''; position: absolute; left: 28px; bottom: -9px; width: 16px; height: 16px; background: var(--letterbox);
  border-right: 1px solid rgba(0, 229, 209, .45); border-bottom: 1px solid rgba(0, 229, 209, .45); transform: rotate(45deg); }
.dev-bop__row { display: flex; flex-wrap: wrap; gap: 8px; }
.dev-bop__row button { padding: 8px 14px; border-radius: 3px; border: 1px solid rgba(63, 168, 154, .55); color: var(--cream); background-color: transparent; font: inherit;
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.dev-bop__row button:hover, .dev-bop__row button:focus-visible { border-color: var(--teal); background-color: rgba(63, 168, 154, .12); }

/* ---- Pulse Deck v3: a futuristic holo-glass music player (record player panel) ---- */
.fxp { --c: var(--cyan); position: relative; padding: 14px; border-radius: 3px; color: var(--cream);
  background: linear-gradient(160deg, var(--card), var(--ground)),
              repeating-linear-gradient(0deg, rgba(63, 168, 154, .05) 0 1px, transparent 1px 22px),
              repeating-linear-gradient(90deg, rgba(63, 168, 154, .05) 0 1px, transparent 1px 22px);
  border: 1px solid var(--line);
  box-shadow: 6px 8px 0 rgba(0, 0, 0, .3), 0 14px 34px rgba(0, 0, 0, .45); }
.fxp::before, .fxp::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--teal); pointer-events: none; }
.fxp::before { top: 5px; left: 5px; border-right: 0; border-bottom: 0; }
.fxp::after { bottom: 5px; right: 5px; border-left: 0; border-top: 0; }
.fxp__hud { display: flex; align-items: center; gap: 10px; margin: 2px 4px 10px; font: .7rem/1 "Share Tech Mono", "Courier New", monospace; letter-spacing: .14em; }
.fxp__brand { color: var(--cream-dim); }
.fxp__status { margin-left: auto; padding: 4px 8px; border-radius: 3px; border: 1px solid rgba(233, 220, 196, .25); color: var(--cream-dim); }
.fxp__status::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--cream-dim); vertical-align: 1px; }
.fxp--on .fxp__status { color: var(--cream); border-color: var(--teal); }
.fxp--on .fxp__status::before { background: var(--c); box-shadow: 0 0 8px var(--c); animation: fxpPulse 1s ease-in-out infinite; }
.fxp--mic .fxp__status { color: var(--cream); border-color: var(--red); } .fxp--mic .fxp__status::before { background: var(--red); box-shadow: 0 0 8px var(--red); }
@keyframes fxpPulse { 50% { opacity: .35; } }
.fxp__time { color: var(--c); text-shadow: 0 0 8px rgba(0, 229, 209, .6); font-size: .74rem; }
.fxp__screen { position: relative; border-radius: 3px; overflow: hidden; background: radial-gradient(ellipse at 50% 120%, rgba(0, 229, 209, .14), var(--letterbox) 65%);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 0 30px rgba(0, 0, 0, .8); }
.fxp__cv { display: block; width: 100%; aspect-ratio: 20 / 9; }
.fxp__screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); }
.fxp__over { position: absolute; left: 14px; right: 14px; bottom: 10px; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.fxp__title { font: 700 1rem/1.15 var(--font-display); letter-spacing: .06em; color: var(--cream); text-shadow: 0 0 12px rgba(0, 229, 209, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxp__artist { font: .72rem/1 "Share Tech Mono", "Courier New", monospace; letter-spacing: .12em; color: var(--cream-dim); }
.fxp__seek { --p: 0%; width: 100%; margin: 12px 0 4px; height: 18px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.fxp__seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--c) var(--p), rgba(233, 220, 196, .15) var(--p)); box-shadow: 0 0 8px rgba(0, 229, 209, .35); }
.fxp__seek::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--c) var(--p), rgba(233, 220, 196, .15) var(--p)); }
.fxp__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 3px rgba(0, 229, 209, .5), 0 0 12px var(--c); }
.fxp__seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 3px rgba(0, 229, 209, .5), 0 0 12px var(--c); }
.fxp__seek:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; border-radius: 6px; }
.fxp__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.fxp__transport { display: flex; align-items: center; gap: 8px; }
.fxp__btn { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(233, 220, 196, .22); background: rgba(255, 255, 255, .04); color: var(--cream); transition: background .15s, border-color .15s, transform .1s; }
.fxp__btn svg { width: 20px; height: 20px; fill: currentColor; }
.fxp__btn:hover, .fxp__btn:focus-visible { border-color: var(--teal); background: rgba(63, 168, 154, .12); }
.fxp__btn:active { transform: scale(.94); }
.fxp__btn[aria-pressed="true"] { border-color: var(--cyan); box-shadow: 0 0 10px rgba(0, 229, 209, .45); }
.fxp__mic[aria-pressed="true"] { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.fxp__play { --p: 0deg; width: 60px; height: 60px; border: 0; color: var(--cream); background: var(--red); box-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
.fxp__play svg { width: 26px; height: 26px; position: relative; }
.fxp__play:hover, .fxp__play:focus-visible { color: var(--cream); background: var(--red-hover); border-color: transparent; }
.fxp__ring { position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--c) var(--p), rgba(233, 220, 196, .12) var(--p)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); }
.fxp__volwrap { display: flex; align-items: center; gap: 6px; color: var(--cream-dim); }
.fxp__volwrap svg { width: 18px; height: 18px; fill: currentColor; }
.fxp__vol { width: 96px; accent-color: var(--c); }
.fxp__looks { display: grid; gap: 6px; margin-bottom: 10px; }
.fxp__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fxp__list button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 3px; cursor: pointer; text-align: left;
  border: 1px solid transparent; background: rgba(255, 255, 255, .03); color: var(--cream); font: inherit; font-size: .86rem; }
.fxp__list button:hover, .fxp__list button:focus-visible { border-color: rgba(63, 168, 154, .55); }
.fxp__list button.on { border-color: var(--teal); background: rgba(63, 168, 154, .1); color: var(--cream); }
.fxp__n { font: .7rem/1 "Share Tech Mono", "Courier New", monospace; color: var(--teal); letter-spacing: .1em; }
.fxp__tt { flex: 1; }
.fxp__eq { display: none; gap: 2px; align-items: flex-end; height: 14px; }
.fxp__list button.live .fxp__eq { display: inline-flex; }
.fxp__eq i { width: 3px; height: 100%; background: var(--c); animation: fxpEq .9s ease-in-out infinite; transform-origin: bottom; }
.fxp__eq i:nth-child(2) { animation-delay: .25s; } .fxp__eq i:nth-child(3) { animation-delay: .5s; }
@keyframes fxpEq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (max-width: 520px) { .fxp__btn { width: 38px; height: 38px; } .fxp__play { width: 54px; height: 54px; } .fxp__vol { width: 80px; } .fxp__row { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .fxp__eq i, .fxp--on .fxp__status::before { animation: none; } }

/* sun + moon set/rise behind the skyline (stage.js setOrbs): sink below the rooftops at full brightness, no grey fade */
.world .sky__orb--sun { top: calc(30svh + var(--orb-sink, 0) * 32svh) !important; opacity: var(--orb-op, var(--sky-orb-opacity, 0)) !important; }
.world .sky__orb--moon { top: calc(29svh + var(--orb-sink, 0) * 32svh) !important; opacity: var(--orb-op, var(--sky-orb-opacity, 0)) !important; }

/* ---- sun/moon glow: its own unmasked layer (the stripe mask clipped the orb's box-shadow, so the discs looked flat) */
.world .sky__halo { position: absolute; left: 50%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;
  opacity: var(--orb-op, 0); transition: opacity .6s; }
.world .sky__halo--sun { width: clamp(360px, 90vmin, 1200px); top: calc(30svh + var(--orb-sink, 0) * 32svh);
  background: radial-gradient(circle, rgba(255, 190, 150, .34) 0 18%, rgba(249, 120, 140, .16) 34%, rgba(233, 96, 143, .05) 52%, transparent 68%); }
.world .sky__halo--moon { width: clamp(320px, 78vmin, 1000px); top: calc(29svh + var(--orb-sink, 0) * 32svh);
  background: radial-gradient(circle, rgba(200, 205, 255, .2) 0 18%, rgba(140, 155, 240, .08) 36%, transparent 64%); }

/* ---- easter egg: the Swordfish II flyby (radio ping x3 / terminal `swordfish`). One 6 KB silhouette, climbs past the moon. */
.world .swordfish { position: absolute; left: 47%; top: 62svh; width: clamp(84px, 16vmin, 180px); aspect-ratio: 300 / 383;
  background: url(assets/swordfish.webp) center / contain no-repeat; opacity: 0; pointer-events: none; transform: translate(-50%, 0); }
.world .swordfish::after { content: ""; position: absolute; left: 50%; bottom: -9%; width: 26%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, #FFF1C9 0 18%, #FF9A4A 42%, rgba(255, 110, 60, .35) 60%, transparent 72%); animation: sfThrust .09s steps(2) infinite; }
.world .swordfish.is-flying { animation: sfFly 4.6s cubic-bezier(.4, .05, .7, .9) forwards; }
@keyframes sfFly {
  0%   { opacity: 1; transform: translate(-50%, 0) rotate(-10deg) scale(1.2); }
  100% { opacity: 1; transform: translate(calc(-50% + 9vw), -80svh) rotate(5deg) scale(.4); }
}
@keyframes sfThrust { to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .world .swordfish.is-flying { animation-duration: 9s; } }
.dev-node__ping { margin-top: 8px; width: 100%; padding: 8px; border-radius: 3px; border: 1px solid rgba(63, 168, 154, .55); background: var(--letterbox);
  color: var(--cream); font: .8rem "Share Tech Mono", "Courier New", monospace; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.dev-node__ping:hover, .dev-node__ping:focus-visible { border-color: var(--teal); }
.dev-node__ping:active { background: var(--card); }

/* ---- quest: recipe card (an index card), reward, chip, toast, bulbs, dog tap */
.rc { background: repeating-linear-gradient(180deg, var(--cream) 0 27px, #D2C4AA 27px 28px); color: var(--ground); border-radius: 3px; padding: 14px 16px 10px;
  font: .86rem/1.55 "Share Tech Mono", "Courier New", monospace; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transform: rotate(-.6deg); }
.rc__title { font-family: var(--font-display); font-weight: 700; color: var(--red); letter-spacing: .06em; margin: 0 0 6px; }
.rc__list { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.rc__list b { display: block; letter-spacing: .12em; color: var(--ink); }
.rc__list li.on b { color: var(--red); }
.rc__list span { font-size: .78rem; color: var(--ink); }
.rc__text { margin: 0 0 10px; }
.rc__walls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.rc__wall, .rc__signal { display: inline-block; padding: 8px 12px; border-radius: 3px; background: var(--red); color: var(--cream); text-decoration: none; font-size: .8rem; }
.rc__signal { background: transparent; color: var(--ground); border: 1px solid var(--ink); }
.dev-node--alert .dev-node__leds i { background: var(--red) !important; animation: sfThrust .4s steps(2) infinite; }
.quest__chip { margin-left: 8px; padding: 8px 14px; border-radius: 3px; border: 1px solid var(--line); border-left: 3px solid var(--red); background-color: rgba(25, 25, 27, .82); color: var(--cream);
  font: .72rem "Share Tech Mono", "Courier New", monospace; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.quest__toast { position: absolute; left: 50%; top: 84px; transform: translate(-50%, -8px); z-index: 30; max-width: min(88vw, 420px); padding: 10px 16px;
  border-radius: 3px; background: rgba(32, 32, 35, .95); border: 1px solid var(--line); border-top: 3px solid var(--red); color: var(--cream); text-align: center; pointer-events: none;
  font: .82rem/1.4 "Share Tech Mono", "Courier New", monospace; opacity: 0; transition: opacity .35s, transform .35s; }
.quest__toast b { display: block; color: var(--cream); letter-spacing: .2em; }
.quest__toast.show { opacity: 1; transform: translate(-50%, 0); }
.quest__bulb { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .6s; }
.quest__bulb.on { opacity: 1; background: radial-gradient(circle, #FFF4D6 0 25%, rgba(200, 154, 102, .75) 45%, transparent 72%); box-shadow: 0 0 18px 6px rgba(200, 154, 102, .35); }
.quest__dog { position: absolute; background: transparent; border: 0; padding: 0; cursor: pointer; z-index: 3; }

.rc__hint { margin: -2px 0 10px; font-size: .74rem; color: var(--ink); }
@media (max-width: 700px) { .quest__toast { top: 118px; } }   /* below the Music/Rain/Sound row on phones */

/* ---- toys.js round 1: the city dances / neon overload / vending jackpot */
.world.is-dancing .sky__glow { filter: brightness(calc(1 + var(--beat, 0) * 1.3)); }
.world.is-dancing .sky__halo { scale: calc(1 + var(--beat, 0) * .14); }
.world.is-dancing .quest__bulb { opacity: calc(.25 + var(--mid, 0) * 1.1);
  background: radial-gradient(circle, #FFF4D6 0 25%, rgba(255, 190, 110, .7) 45%, transparent 72%); box-shadow: 0 0 18px 6px rgba(255, 180, 90, .35); }
.world.is-shorting .stage { animation: toyShort .09s steps(2) 6; }
@keyframes toyShort { 0% { translate: 2px -1px; } 50% { translate: -2px 1px; } 100% { translate: 0 0; } }
.toy-can { position: absolute; width: var(--w); height: var(--h); margin: calc(var(--h) * -1) 0 0 calc(var(--w) / -2); border-radius: 30% / 50%; z-index: 3;
  pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .55) 0 9%, var(--c) 9% 88%, rgba(255, 255, 255, .4) 88%);
  box-shadow: 0 5px 6px rgba(0, 0, 0, .45); animation: toyCan 2.8s cubic-bezier(.15, .6, .3, 1) forwards; }
@keyframes toyCan {
  0% { opacity: 1; transform: translate(0, -60%) rotate(0); }
  12% { opacity: 1; transform: translate(calc(var(--dx) * .06), 0) rotate(calc(var(--r) * .3)); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
}

/* ---- toys.js round 2: shooting stars / drone delivery / hologram glitch */
.toy-star { position: absolute; width: var(--len); height: 2px; border-radius: 2px; pointer-events: none; transform-origin: 0 50%; opacity: 0;
  background: linear-gradient(90deg, #FFFFFF, rgba(200, 225, 255, .75) 14%, rgba(160, 190, 255, 0)); filter: drop-shadow(0 0 4px rgba(200, 225, 255, .9));
  animation: toyStar 1.1s cubic-bezier(.3, .6, .4, 1) forwards; }
@keyframes toyStar {
  0% { opacity: 0; transform: rotate(var(--rot)) translateX(0) scaleX(.15); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--rot)) translateX(var(--run)) scaleX(1); }
}
.toy-drone, .toy-box { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; }
.toy-drone img, .toy-box svg { display: block; width: 100%; height: auto; overflow: visible; }
.toy-drone img { animation: toyBob 1.1s ease-in-out infinite alternate; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }
.toy-drone::after { content: ""; position: absolute; left: 50%; bottom: -10%; width: 34%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(140, 255, 245, .9) 0 15%, rgba(63, 168, 154, .45) 40%, transparent 70%); animation: sfThrust .1s steps(2) infinite; }
@keyframes toyBob { to { transform: translateY(5%); } }
.toy-drone__line { position: absolute; width: 2px; margin-left: -1px; height: 0; z-index: 4; pointer-events: none; background: rgba(230, 230, 230, .8); }
.toy-glitch { position: absolute; z-index: 3; pointer-events: none; mix-blend-mode: screen; }
@media (prefers-reduced-motion: reduce) { .toy-drone img { animation: none; } }

.toy-bird { position: absolute; width: 22px; height: 10px; pointer-events: none; opacity: 0; animation: toyBird 2.3s ease-out forwards; }
.toy-bird svg { display: block; width: 100%; height: 100%; animation: toyFlap .22s ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes toyBird { 0% { opacity: 0; transform: translate(0, 0) scale(var(--s)); } 10% { opacity: .9; } 80% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(calc(var(--s) * .6)); } }
@keyframes toyFlap { to { transform: scaleY(-.5); } }
@media (prefers-reduced-motion: reduce) { .toy-bird svg { animation: none; } }

/* ---- desktop: the fast lane floats (no bar) so the plaza and the dog show through; only the buttons catch clicks */
@media (min-width: 768px) {
  .lane { background: transparent; border-top: 0; backdrop-filter: none; pointer-events: none; }
  .lane a { pointer-events: auto; backdrop-filter: blur(6px); }
}

/* ---- clarity batch (critique 2026-10-21): one-liner, offer, menu, contact-first, grouped Explore, work filters */
.brandline { flex-wrap: wrap; row-gap: 2px; }
.brandline__tag { margin: 0; flex-basis: 100%; max-width: 34ch; font: .74rem/1.45 "Share Tech Mono", "Courier New", monospace; color: var(--cream-dim);
  letter-spacing: .04em; text-shadow: 0 1px 6px rgba(0, 0, 0, .75); }
.brandline__tag b { color: var(--cream); font-weight: 400; }
.brandline__tag b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 2px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }   /* open for work = live */
@media (min-width: 768px) { .brandline__tag { max-width: none; font-size: .82rem; } }
.offer__lead { font-size: 1.02rem; color: var(--cream); margin-top: 0; }
.offer { list-style: none; padding: 0; margin: 10px 0 12px; display: grid; gap: 8px; }
.offer li { padding: 10px 12px; border: 1px solid var(--line); border-left: 2px solid var(--teal); border-radius: 3px; background: var(--card); }
.offer b { display: block; color: var(--cream); font-weight: 400; letter-spacing: .06em; }
.offer span { color: var(--cream-dim); font-size: .88rem; }
.call button { font-family: inherit; cursor: pointer; background-color: transparent; }
.menu { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 12px; }
.menu__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--cream); letter-spacing: .04em; }
.menu__name em { margin-left: 8px; font-family: var(--font-body); font-weight: 400; font-style: normal; font-size: .72rem; color: var(--camel); letter-spacing: .14em; text-transform: uppercase; }
.menu__text { margin: 2px 0 6px; font-size: .9rem; }
.menu__row { display: flex; gap: 8px; flex-wrap: wrap; }
.menu__row button { padding: 6px 12px; border-radius: 3px; border: 1px dashed rgba(233, 220, 196, .45); background: transparent; color: var(--cream); font: inherit; font-size: .8rem; cursor: pointer; }
.menu__row .menu__order { border-style: solid; border-color: var(--red); color: var(--cream); }   /* outline: a red fill on every dish would shout */
.menu__row .menu__order:hover, .menu__row .menu__order:focus-visible { background-color: var(--red); }
.menu__footer { font-size: .86rem; color: var(--camel); }
.menu__sub { font-style: italic; }
.dev-chalk__title--2 { margin-top: 18px; }
.pp__sent { margin: 8px 0 0; padding: 8px 12px; border-radius: 3px; border: 1px solid var(--teal); color: var(--cream); font-size: .86rem; }
.objects__group { margin: 6px 4px 2px; font: .7rem "Share Tech Mono", "Courier New", monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-dim); }
.objects__group:first-child { margin-top: 0; }
.objects__group::before { content: "// "; color: var(--sage); }
.work__filters { margin: 10px 0 8px; }
.work__ch { position: relative; }
.work__ch[hidden] { display: none; }
.work__fresh { position: absolute; top: 4px; right: 4px; padding: 1px 5px; border-radius: 2px; background: var(--red); color: var(--cream); font: .7rem/1.3 "Share Tech Mono", monospace; letter-spacing: .1em; font-style: normal; }
.objects__group { grid-column: 1 / -1; }
.brandline__tag { padding: 4px 8px; margin-left: -8px; border-radius: 3px; background: rgba(25, 25, 27, .7); backdrop-filter: blur(4px); }
@media (max-width: 767px) { .brandline__tag { margin-top: 46px; max-width: calc(100vw - 24px); } }
.brandline__tag { width: fit-content; }
.world:has(.stage.zoomed) .brandline__tag { display: none; }   /* inside a panel the back button owns that spot */
/* tagline never runs under the top-right controls (Brett's first review, 10-21): it wraps inside the space left of them */
@media (min-width: 768px) { .brandline__tag { max-width: min(48ch, calc(100vw - 500px)); } }
@media (max-width: 767px) { .brandline__tag { margin-top: 62px; } }
.brandline { flex-direction: column; align-items: flex-start; row-gap: 4px; }   /* the tagline always sits UNDER the wordmark */

/* ---- HQ corner brackets (2026-10-27): controls snap four teal corners on when hovered / focused (instant under reduced motion).
   Drawn as background layers so they sit inside the box; only background-color is set elsewhere on these, never the shorthand. */
@property --bk { syntax: '<length>'; inherits: false; initial-value: 0px; }
.hud__btn, .back, .objects__toggle, .objects__list button, .lane a, .panel {
  --bk-c: var(--teal);
  background-image:
    linear-gradient(var(--bk-c), var(--bk-c)), linear-gradient(var(--bk-c), var(--bk-c)), linear-gradient(var(--bk-c), var(--bk-c)), linear-gradient(var(--bk-c), var(--bk-c)),
    linear-gradient(var(--bk-c), var(--bk-c)), linear-gradient(var(--bk-c), var(--bk-c)), linear-gradient(var(--bk-c), var(--bk-c)), linear-gradient(var(--bk-c), var(--bk-c));
  background-repeat: no-repeat;
  background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
  background-size: var(--bk) 2px, 2px var(--bk), var(--bk) 2px, 2px var(--bk), var(--bk) 2px, 2px var(--bk), var(--bk) 2px, 2px var(--bk);
  transition: --bk .14s steps(2);
}
.hud__btn:hover, .hud__btn:focus-visible, .back:hover, .back:focus-visible, .objects__toggle:hover, .objects__toggle:focus-visible, .objects__toggle[aria-expanded="true"],
.objects__list button:hover, .objects__list button:focus-visible, .lane a:hover, .lane a:focus-visible { --bk: 8px; }
.lane .lane__book { --bk-c: var(--cream); }
.panel { --bk: 10px; }   /* default attachment (scroll) = the brackets stay on the card frame while the copy scrolls */
.panel:hover, .panel:focus-within { --bk: 16px; }
@media (prefers-reduced-motion: reduce) { .hud__btn, .back, .objects__toggle, .objects__list button, .lane a, .panel { transition: none; } }

/* ---- the sky dial (shared sky.css) re-inked for the stall only */
.world .skydial, .world .skydial__toggle, .world .skydial__panel button { color: var(--cream); }
.world .skydial__toggle { border-radius: 3px; border-color: var(--line); background: rgba(25, 25, 27, .78); }
.world .skydial__toggle:hover, .world .skydial__toggle[aria-expanded="true"] { border-color: var(--teal); background: rgba(25, 25, 27, .9); }
.world .skydial__icon { color: var(--camel); }
.world .skydial.is-preview .skydial__toggle { border-style: dashed; border-color: var(--cream-dim); }   /* dashed = not your real time */
.world .skydial__panel { border-radius: 3px; border-color: var(--line); background: rgba(32, 32, 35, .96); box-shadow: 6px 8px 0 rgba(0, 0, 0, .35); }
.world .skydial__phase { color: var(--cream); }
.world .skydial__mode { color: var(--cream-dim); }
.world .skydial__range { accent-color: var(--teal); }
.world .skydial__panel button { border-radius: 3px; border-color: var(--line); }
.world .skydial__panel button:hover { border-color: var(--teal); }
.world .skydial__live[aria-pressed="true"] { border-color: var(--cyan); color: var(--cream); box-shadow: 0 0 8px rgba(0, 229, 209, .35); }