/* ============================================================
   BOOT INTRO — site content gating
   While body.booting is set, hide the site frame and main content so only
   the boot overlay shows. Removed at the end of the boot sequence.
   ============================================================ */
body.booting > .frame,
body.booting > main.content {
  opacity: 0;
  pointer-events: none;
}


body.booting.handoff-ready > main.content {
  z-index: 2;
}

/* The boot's own term-window animation ends at 560x700 to exactly match
   the site's terminal. Once boot ends and the site shows, both terminals
   visually align — no jump. */

/* ============================================
   BOOT INTRO — first-visit-only animated boot sequence
   All boot-specific styles live below.
   The boot overlay HTML lives inside #boot-root, which gets removed
   from the DOM at the end of the sequence.
   ============================================ */



* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #000;
  font-family: var(--font);
  color: var(--fg);
  overflow: hidden;
}



/* ============================================
   PHASE 0 — WELCOME GATE
   Sized to match the home page terminal body text.
   Container width is fixed so typing doesn't shift the layout.
   ============================================ */
.welcome-gate {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.45s ease;
}

.welcome-gate.gone {
  opacity: 0;
  pointer-events: none;
}

.welcome-inner {
  text-align: left;
  user-select: none;
  /* fixed width so the line div stays full width while typing,
     preventing any layout shift as characters fill in */
  width: 420px;
  padding: 32px 28px;
}

.welcome-text {
  margin-bottom: 48px;
}

.welcome-line {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: var(--fg);
  letter-spacing: 0.2px;
  line-height: 1.55;
  white-space: pre;
  min-height: 1.55em;
  /* full width of parent — guarantees no shift during typing */
  width: 100%;
}

.welcome-cursor {
  display: inline-block;
  width: 7px;
  height: 0.85em;
  background: var(--fg);
  vertical-align: -1px;
  margin-left: 3px;
  animation: blink 0.7s steps(2, end) infinite;
}

/* click-to-start — white border/text, goes green on hover
   Hidden until typing completes (gets .ready class), then hard-cuts in */
.welcome-btn {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--fg);
  border-radius: 4px;
  padding: 9px 16px;
  letter-spacing: 1.6px;
  cursor: pointer;
  text-transform: lowercase;
  line-height: 1;
  height: 28px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  /* hover still transitions, but opacity does NOT — hard cut on .ready */
  transition: color 0.18s ease, border-color 0.18s ease;
}

.welcome-btn.ready {
  opacity: 1;
  pointer-events: auto;
}

.welcome-btn:hover,
.welcome-btn:focus-visible,
.welcome-btn:active {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

/* ============================================
   PHASE 1 — CRT POWER-ON
   Quick white horizontal line snap, then expand to fill
   ============================================ */
.crt-power {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 110;
  pointer-events: none;
}

.crt-power::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  background: #fafafa;
  box-shadow: 0 0 60px 6px rgba(255,255,255,0.85);
  transform: translateY(-50%);
}

.crt-power.run::before {
  animation: crt-line 0.06s cubic-bezier(0.2, 0.7, 0.1, 1) forwards;
}

.crt-power::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
}

.crt-power.run::after {
  animation: crt-fill 0.07s 0.03s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

.crt-power.done {
  animation: crt-fade 0.05s 0.06s ease forwards;
}

@keyframes crt-line {
  0%   { height: 0; }
  40%  { height: 1px; }
  100% { height: 1px; }
}

@keyframes crt-fill {
  0%   { opacity: 0; transform: scaleY(0); }
  30%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

@keyframes crt-fade {
  to { opacity: 0; visibility: hidden; }
}

/* ============================================
   PHASE 2 — FRAME IGNITION
   Dot in center → snap-expand to page frame
   ============================================ */
.boot-frame {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border: 1px solid var(--accent);
  border-radius: 4px;
  opacity: 0;
  z-index: 30;
  pointer-events: none;
  background: transparent;
  box-shadow: 0 0 0 rgba(93,208,104,0);
}

.boot-frame.dot {
  opacity: 1;
  width: 5px;
  height: 5px;
  background: var(--accent);
  box-shadow: 0 0 12px 2px rgba(93,208,104,0.8);
  animation: frame-pulse 0.5s ease-in-out;
}

.boot-frame.expanded {
  top: 24px;
  left: 24px;
  width: calc(100vw - 48px);
  height: calc(100vh - 48px);
  transform: none;
  background: transparent;
  box-shadow: 0 0 24px rgba(93,208,104,0.25);
  transition:
    top 0.18s cubic-bezier(0.2, 0.7, 0.1, 1),
    left 0.18s cubic-bezier(0.2, 0.7, 0.1, 1),
    width 0.18s cubic-bezier(0.2, 0.7, 0.1, 1),
    height 0.18s cubic-bezier(0.2, 0.7, 0.1, 1),
    transform 0.18s cubic-bezier(0.2, 0.7, 0.1, 1),
    box-shadow 0.6s ease 0.3s,
    border-color 0.8s ease 0.4s;
}

.boot-frame.expanded.cool {
  border-color: var(--rule);
  box-shadow: 0 0 0 transparent;
}

@keyframes frame-pulse {
  /* Snap in, then two slow flickers, then settle. The dot reads as a
     filament warming up before the screen ignites. */
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0; }
  12%  { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
  28%  { transform: translate(-50%, -50%) scale(1.4); opacity: 0.18; }   /* flicker #1 dim */
  42%  { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }      /* flicker #1 back */
  62%  { transform: translate(-50%, -50%) scale(1.35); opacity: 0.32; }  /* flicker #2 dim */
  78%  { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }      /* flicker #2 back */
  100% { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}

/* ============================================
   PHASE 3-4 — CURSOR + BOOT LOG
   ============================================ */
.boot-log {
  position: fixed;
  top: 56px;
  left: 56px;
  right: 56px;
  font-family: var(--font);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg);
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.boot-log.visible { opacity: 1; }

.boot-line {
  white-space: pre;
  letter-spacing: 0.3px;
  display: block;
}

.boot-line .ok    { color: var(--accent); }
.boot-line .warn  { color: var(--warn); }
.boot-line .fail  { color: var(--hot); }
.boot-line .dim   { color: var(--muted); }
.boot-line .hex   { color: var(--cyan); }
.boot-line .grn   { color: var(--accent); }
.boot-line .acc   { color: var(--fg); font-weight: 600; }

.boot-cursor-block {
  display: inline-block;
  width: 8px;
  height: 13px;
  background: var(--fg);
  vertical-align: -2px;
  margin-left: 2px;
  animation: blink 0.7s steps(2, end) infinite;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* tracking lines that drift across the screen during boot */
.tracker {
  position: fixed;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(93,208,104,0.4), transparent);
  z-index: 60;
  pointer-events: none;
  opacity: 0;
}

.tracker.active {
  animation: tracker-sweep 1.2s linear forwards;
}

@keyframes tracker-sweep {
  0%   { top: -2px; opacity: 1; }
  100% { top: 105vh; opacity: 0.8; }
}

/* a glitch overlay for transition moments */
.glitch-flash {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.0);
  z-index: 90;
  pointer-events: none;
  mix-blend-mode: screen;
}

.glitch-flash.fire {
  animation: glitch 0.18s steps(3, end);
}

@keyframes glitch {
  0% { background: rgba(255,80,80,0.0); }
  25% { background: rgba(120,255,140,0.15); transform: translateX(-3px); }
  50% { background: rgba(80,200,255,0.12); transform: translateX(2px); }
  75% { background: rgba(255,255,255,0.18); transform: translateX(-1px); }
  100% { background: transparent; transform: none; }
}



/* Desktop→terminal transition — GRITTY SCANLINE SWEEP.
   A bright accent-green horizontal bar rips from the top of the screen
   to the bottom, flickering with CRT-style grit as it travels. Replaces
   the previous radial burst — straight-line motion matches the CRT
   power-on flash's discipline. The bar reveals the terminal that's
   materialising behind it. */
.radial-flash {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 8px;
  pointer-events: none;
  z-index: 92;
  opacity: 0;
  /* white-hot core, accent-green edges — same gradient grammar as the
     CRT power-on bar */
  background: linear-gradient(to bottom,
    rgba(93, 208, 104, 0) 0%,
    rgba(93, 208, 104, 0.9) 20%,
    rgba(255, 255, 255, 0.98) 48%,
    rgba(255, 255, 255, 0.98) 52%,
    rgba(93, 208, 104, 0.9) 80%,
    rgba(93, 208, 104, 0) 100%);
  box-shadow:
    0 0 24px rgba(93, 208, 104, 0.95),
    0 0 80px rgba(93, 208, 104, 0.55),
    0 0 140px rgba(93, 208, 104, 0.25);
  transform: translateY(-12px);
  /* No more radial — kill the old margin-based centring */
  margin: 0;
  border-radius: 0;
  mix-blend-mode: screen;
}

/* Gritty texture — vertical pixel stripes inside the bar, like a real
   CRT raster. Multiply over the bar's gradient so the bright stops show
   through with banding. */
.radial-flash::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Trailing diffusion glow — a wider, fuzzier band trailing above the
   hard bar so the sweep has weight and motion blur. */
.radial-flash::after {
  content: '';
  position: absolute;
  top: -28px;
  left: 0;
  right: 0;
  height: 56px;
  background: linear-gradient(to bottom,
    rgba(93, 208, 104, 0) 0%,
    rgba(93, 208, 104, 0.35) 50%,
    rgba(93, 208, 104, 0) 100%);
  filter: blur(10px);
  pointer-events: none;
}

.radial-flash.fire {
  animation: scanline-sweep 0.44s cubic-bezier(0.42, 0.1, 0.6, 1) forwards;
}

@keyframes scanline-sweep {
  /* Sweep from above the viewport to past the bottom, with brightness
     flickers along the way — the bar stutters in/out of phase like a
     loose CRT signal. */
  0%   { opacity: 0;   transform: translateY(-12px); }
  6%   { opacity: 1;   transform: translateY(0); }
  16%  { opacity: 0.35; transform: translateY(14vh); }   /* flicker dim */
  24%  { opacity: 1;   transform: translateY(24vh); }
  38%  { opacity: 0.5; transform: translateY(40vh); }    /* flicker dim */
  50%  { opacity: 1;   transform: translateY(54vh); }
  64%  { opacity: 0.3; transform: translateY(70vh); }    /* flicker dim */
  78%  { opacity: 1;   transform: translateY(86vh); }
  92%  { opacity: 0.7; transform: translateY(98vh); }
  100% { opacity: 0;   transform: translateY(108vh); }
}

/* ---- GREEN SCREEN FLASH ----
   The BIOS→desktop counterpart to the white CRT power-on flash. Mirrors
   that flash's grammar: thin green horizontal line snaps in at centre,
   then a green fill blooms vertically. Critical: every visible style
   (height, opacity, box-shadow, background) lives INSIDE the keyframes
   so the element is fully invisible in its static state and returns to
   invisible after the animation. */
.green-flash {
  position: fixed;
  inset: 0;
  z-index: 91;
  pointer-events: none;
  background: transparent;
}

.green-flash::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  transform: translateY(-50%);
  opacity: 0;
  /* No background, no box-shadow in the static state. A box-shadow on a
     0-tall element still renders its blur outward, which was leaving a
     persistent green halo across the screen before the animation fired. */
}

.green-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #5dd068;
  opacity: 0;
}

.green-flash.fire::before {
  animation: green-line 0.18s cubic-bezier(0.2, 0.7, 0.1, 1) both;
}

.green-flash.fire::after {
  animation: green-fill 0.16s 0.05s cubic-bezier(0.4, 0, 0.6, 1) both;
}

@keyframes green-line {
  0%   {
    height: 0; opacity: 0;
    background: transparent;
    box-shadow: 0 0 0 0 rgba(93, 208, 104, 0);
  }
  18%  {
    height: 2px; opacity: 1;
    background: #5dd068;
    box-shadow: 0 0 60px 8px rgba(93, 208, 104, 0.85);
  }
  70%  {
    height: 2px; opacity: 1;
    background: #5dd068;
    box-shadow: 0 0 60px 8px rgba(93, 208, 104, 0.85);
  }
  100% {
    height: 0; opacity: 0;
    background: transparent;
    box-shadow: 0 0 0 0 rgba(93, 208, 104, 0);
  }
}

@keyframes green-fill {
  0%   { opacity: 0;    transform: scaleY(0); }
  30%  { opacity: 0.95; transform: scaleY(1); }
  100% { opacity: 0;    transform: scaleY(1); }
}

/* ============================================
   PHASE 6 — DESKTOP
   thrill_wave brand upper-left, live clock lower-left,
   .elf icon centered — matches the home page chrome.
   ============================================ */
.desktop {
  position: fixed;
  inset: 24px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  z-index: 22;
  opacity: 0;
  pointer-events: none;
  background: var(--bg);
  /* Keep this visible so the chrome labels sit across the border,
     exactly like the real .frame labels on the live site. */
  overflow: visible;
}

.desktop::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.desktop.visible { opacity: 1; }

/* desktop frame labels mirror the actual homepage chrome */
.desktop-brand {
  position: absolute;
  z-index: 2;
  line-height: 1;
  top: -7px;
  left: 22px;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 2.5px;
  text-transform: lowercase;
  background: var(--bg);
  padding: 0 10px;
}

.desktop-page {
  position: absolute;
  z-index: 2;
  line-height: 1;
  bottom: -7px;
  right: 22px;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  background: var(--bg);
  padding: 0 10px;
}

/* live clock, lower-left — same position/style as homepage frame */
.desktop-clock {
  position: absolute;
  z-index: 2;
  line-height: 1;
  bottom: -7px;
  left: 22px;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 2.5px;
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  padding: 0 10px;
}

/* desktop icon */
.desktop-icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 4px;
  transition: background 0.12s ease, transform 0.12s ease;
}

.desktop-icon.clicked {
  background: rgba(93, 208, 104, 0.15);
  transform: translate(-50%, -50%) scale(0.96);
  filter: none;
}

.icon-glyph {
  width: 56px;
  height: 56px;
  border: 1px solid var(--accent);
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-family: var(--font);
  font-size: 14px;
  color: var(--accent);
  border-radius: 4px;
  padding: 10px;
  letter-spacing: 1px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.icon-glyph::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  height: 1px;
  background: var(--accent);
  opacity: 0.4;
}

.icon-glyph::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 1px, rgba(0,0,0,0.4) 1px 2px);
  pointer-events: none;
  mix-blend-mode: multiply;
}

.icon-label {
  font-family: var(--font);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  color: var(--fg);
  text-transform: lowercase;
}

/* fake mouse pointer */
.pointer {
  position: fixed;
  width: 12px;
  height: 12px;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, left 0.7s cubic-bezier(0.4, 0, 0.2, 1), top 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font);
  font-size: 13px;
  color: var(--accent);
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(93,208,104,0.6));
}

.pointer.visible { opacity: 1; }
.pointer::before {
  content: '◀';
  display: inline-block;
  transform: rotate(-45deg);
}

/* ============================================
   PHASE 7 — TERMINAL LAUNCH ANIMATION
   "Mac OS X genie meets sci-fi HUD"

   Total runtime: ~580ms from click to settled. Staged like a real
   window manager opening an app:
     A. Ignition  (0–80ms)   icon implodes into a spark
     B. Beam      (80–220ms) horizontal accent-green bar shoots
                             out from icon position to full width
     C. Lift      (220–280ms) bar rises from icon Y to the final
                             title-bar Y (above screen centre)
     D. Title     (280–340ms) bar thickens to title-bar height,
                             traffic-light dots stagger in
     E. Drop      (340–540ms) body extends downward; leading-edge
                             scan beam rides the bottom border
     F. Settle    (540–680ms) HUD corner brackets snap in,
                             border cools from accent to neutral

   The CSS variables --boot-origin-x and --boot-origin-y are set
   from JS at the moment of click (icon's viewport-centre). They
   default to 50%/50% so the animation works even if JS misses.
   ============================================ */
.boot-term-window {
  position: fixed;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 4px;
  z-index: 24;
  /* element grows DOWN from a fixed top edge — keeps the title bar
     anchored at the final title-bar position and lets the body drop */
  top: calc(50% - var(--term-h, 700px) / 2);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  opacity: 0;
  /* No overflow:hidden here — HUD brackets need to sit outside the edge.
     The .boot-term-clip child handles content clipping during the
     animation's body-drop reveal. */
  box-shadow: 0 0 0 rgba(93,208,104,0);
  will-change: width, height, top, opacity, box-shadow, border-color;
}

/* Clip wrapper: holds the title bar, lines, and scan beam. overflow:hidden
   here trims the inner content during growth without affecting the
   HUD brackets, which are siblings outside this wrapper. */
.boot-term-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  /* Below the brackets visually */
  z-index: 1;
}

.boot-term-window.opening {
  animation: term-open 0.58s cubic-bezier(0.18, 0.86, 0.22, 1) forwards;
}

@keyframes term-open {
  /* A. IGNITION — seed at icon position */
  0% {
    top: var(--boot-origin-y, 50%);
    width: 0;
    height: 0;
    opacity: 0;
    border-color: transparent;
    box-shadow: 0 0 0 rgba(93,208,104,0);
  }
  4% {
    top: var(--boot-origin-y, 50%);
    width: 10px;
    height: 2px;
    opacity: 1;
    border-color: var(--accent);
    box-shadow:
      0 0 24px rgba(93,208,104,0.95),
      0 0 60px rgba(93,208,104,0.45);
  }

  /* B. BEAM — horizontal expansion from icon point outward.
     The bar shoots out at high speed, glowing, with a touch of motion blur. */
  16% {
    top: var(--boot-origin-y, 50%);
    width: calc(var(--term-w, 560px) * 0.7);
    height: 2px;
    opacity: 1;
    border-color: var(--accent);
    box-shadow:
      0 0 36px rgba(93,208,104,1),
      0 0 90px rgba(93,208,104,0.65);
    filter: blur(0.3px);
  }
  28% {
    /* slight overshoot — feels like a hard snap */
    top: var(--boot-origin-y, 50%);
    width: calc(var(--term-w, 560px) * 1.02);
    height: 2px;
    opacity: 1;
    border-color: var(--accent);
    box-shadow:
      0 0 28px rgba(93,208,104,0.95),
      0 0 70px rgba(93,208,104,0.55);
    filter: blur(0);
  }
  34% {
    /* settle to exact width */
    top: var(--boot-origin-y, 50%);
    width: var(--term-w, 560px);
    height: 2px;
    opacity: 1;
    border-color: var(--accent);
    box-shadow:
      0 0 20px rgba(93,208,104,0.85),
      0 0 56px rgba(93,208,104,0.45);
  }

  /* C. LIFT — bar rises from icon Y to the title-bar position (top of final terminal) */
  44% {
    top: calc(50% - var(--term-h, 700px) / 2);
    width: var(--term-w, 560px);
    height: 2px;
    opacity: 1;
    border-color: var(--accent);
    box-shadow:
      0 0 24px rgba(93,208,104,0.9),
      0 0 64px rgba(93,208,104,0.5);
  }

  /* D. TITLE — bar thickens into title bar */
  56% {
    top: calc(50% - var(--term-h, 700px) / 2);
    width: var(--term-w, 560px);
    height: 38px;
    opacity: 1;
    border-color: rgba(93,208,104,0.7);
    box-shadow:
      0 0 22px rgba(93,208,104,0.65),
      0 0 50px rgba(93,208,104,0.3);
  }

  /* E. DROP — body extends downward from the title bar */
  88% {
    top: calc(50% - var(--term-h, 700px) / 2);
    width: var(--term-w, 560px);
    height: var(--term-h, 700px);
    opacity: 1;
    border-color: rgba(93,208,104,0.35);
    box-shadow:
      0 0 30px rgba(93,208,104,0.35),
      0 0 60px rgba(93,208,104,0.18);
  }

  /* F. SETTLE — border cools to the live-site terminal's neutral rule */
  100% {
    top: calc(50% - var(--term-h, 700px) / 2);
    width: var(--term-w, 560px);
    height: var(--term-h, 700px);
    opacity: 1;
    border-color: var(--terminal-rule);
    box-shadow: 0 0 40px rgba(93,208,104,0.1);
  }
}

/* ---- TITLE BAR + TRAFFIC-LIGHT DOTS ---- */
.boot-term-inner {
  padding: 0;
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--fg);
}

.boot-term-inner .boot-term-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: var(--terminal-bar);
  border-bottom: 1px solid #1a1a1a;
  height: 38px;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: lowercase;
  /* hidden during beam/lift; revealed during title-materialize phase */
  opacity: 0;
}

.boot-term-window.opening .boot-term-inner .boot-term-title {
  /* fade in just as the title bar thickens (phase D, ~280ms in) */
  animation: boot-title-show 0.18s ease 0.30s forwards;
}

@keyframes boot-title-show {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.boot-term-title-text { font-weight: 500; }

/* Traffic light dots — real circles, matching the live site exactly */
.boot-term-dots {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.boot-term-dots .boot-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dim);
  /* staggered scale-in during the title materialize phase */
  transform: scale(0);
  opacity: 0;
}

.boot-term-window.opening .boot-term-dots .boot-dot:nth-child(1) {
  animation: boot-dot-in 0.16s cubic-bezier(0.2, 1.4, 0.4, 1) 0.32s forwards;
}
.boot-term-window.opening .boot-term-dots .boot-dot:nth-child(2) {
  animation: boot-dot-in 0.16s cubic-bezier(0.2, 1.4, 0.4, 1) 0.34s forwards;
}
.boot-term-window.opening .boot-term-dots .boot-dot:nth-child(3) {
  animation: boot-dot-in 0.16s cubic-bezier(0.2, 1.4, 0.4, 1) 0.36s forwards,
             boot-dot-live 0.4s ease 0.50s forwards;
  background: var(--accent);
}

@keyframes boot-dot-in {
  0%   { transform: scale(0);   opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

@keyframes boot-dot-live {
  /* soft pulse on the active dot once it lands */
  0%   { box-shadow: 0 0 0 rgba(93,208,104,0); }
  50%  { box-shadow: 0 0 8px rgba(93,208,104,0.8); }
  100% { box-shadow: 0 0 4px rgba(93,208,104,0.5); }
}

/* ---- BODY LINES — fade in during the body drop phase ---- */
.boot-term-inner .boot-term-line {
  margin: 4px 22px 4px 22px;
  opacity: 0;
}
.boot-term-inner .boot-term-line:first-of-type { margin-top: 16px; }

.boot-term-window.opening .boot-term-inner .boot-term-line {
  animation: boot-line-in 0.18s ease forwards;
}
.boot-term-window.opening .boot-term-inner .boot-term-line:nth-of-type(1) { animation-delay: 0.46s; }
.boot-term-window.opening .boot-term-inner .boot-term-line:nth-of-type(2) { animation-delay: 0.49s; }
.boot-term-window.opening .boot-term-inner .boot-term-line:nth-of-type(3) { animation-delay: 0.52s; }
.boot-term-window.opening .boot-term-inner .boot-term-line:nth-of-type(4) { animation-delay: 0.54s; }

@keyframes boot-line-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}

.boot-term-inner .boot-term-prompt {
  color: var(--accent);
  margin-right: 8px;
}

/* ---- HUD CORNER BRACKETS ----
   Direct children of .boot-term-window (NOT inside the clip wrapper),
   so they can hang outside the window edge without being trimmed. */
.hud-bracket {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--accent);
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(93,208,104,0.7));
  /* Sit above the clip wrapper */
  z-index: 4;
}

.hud-bracket--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hud-bracket--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.hud-bracket--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.hud-bracket--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.boot-term-window.opening .hud-bracket {
  animation: hud-bracket-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1) 0.48s forwards;
}
.boot-term-window.opening .hud-bracket--tr { animation-delay: 0.50s; }
.boot-term-window.opening .hud-bracket--bl { animation-delay: 0.52s; }
.boot-term-window.opening .hud-bracket--br { animation-delay: 0.54s; }

@keyframes hud-bracket-in {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.85; transform: scale(1); }
}

/* ---- LEADING-EDGE SCAN BEAM ----
   A horizontal accent line that rides down the inside of the window as
   the body extends. Looks like a scanner reading the new surface. */
.boot-term-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  top: 38px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(93,208,104,0.0) 5%,
    rgba(93,208,104,0.9) 50%,
    rgba(93,208,104,0.0) 95%,
    transparent 100%);
  box-shadow: 0 0 12px rgba(93,208,104,0.7), 0 4px 18px rgba(93,208,104,0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transform: translateY(0);
}

.boot-term-window.opening .boot-term-scan {
  animation: boot-scan-sweep 0.34s cubic-bezier(0.4, 0.05, 0.6, 0.98) 0.30s forwards;
}

@keyframes boot-scan-sweep {
  0%   { opacity: 0; transform: translateY(0); }
  10%  { opacity: 1; }
  90%  { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(calc(var(--term-h, 700px) - 40px)); }
}

/* ============================================
   ICON IGNITION SPARK + IMPLOSION
   Spark fires from inside the icon glyph at the moment of click.
   Icon then collapses to nothing.
   ============================================ */
.icon-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--accent) 35%, rgba(93,208,104,0) 70%);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  opacity: 0;
  /* Position relative to the .icon-glyph centre, not the whole icon box */
  margin-top: -22px;
}

.desktop-icon.imploding .icon-spark {
  animation: icon-spark-burst 0.4s cubic-bezier(0.15, 0.8, 0.25, 1) forwards;
}

@keyframes icon-spark-burst {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(2.2); opacity: 1; }
  60%  { transform: translate(-50%, -50%) scale(4); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(6); opacity: 0; }
}

/* The icon glyph itself collapses — fast inward squish */
.desktop-icon.imploding .icon-glyph,
.desktop-icon.imploding .icon-label {
  animation: icon-implode 0.22s cubic-bezier(0.5, 0, 0.8, 0.4) forwards;
}

@keyframes icon-implode {
  0%   { transform: scale(1);    opacity: 1; filter: brightness(1); }
  35%  { transform: scale(1.06); opacity: 1; filter: brightness(2.4); }
  100% { transform: scale(0.0);  opacity: 0; filter: brightness(0.4); }
}

/* Once the window starts launching, hide the rest of the desktop chrome
   so labels and the icon socket don't peek around the new terminal. */
.desktop.consumed .desktop-brand,
.desktop.consumed .desktop-page,
.desktop.consumed .desktop-clock {
  transition: opacity 0.22s ease 0.05s;
  opacity: 0;
}

/* ---- REDUCED MOTION FALLBACK ----
   Users with prefers-reduced-motion get a clean fade-in to the final
   state, no beam/lift/scan effects. The terminal still appears, just
   without the kinetic flair. */
@media (prefers-reduced-motion: reduce) {
  .boot-term-window.opening {
    animation: term-open-static 0.22s ease forwards;
  }
  @keyframes term-open-static {
    from { opacity: 0; }
    to {
      opacity: 1;
      top: calc(50% - var(--term-h, 700px) / 2);
      width: var(--term-w, 560px);
      height: var(--term-h, 700px);
      border-color: var(--terminal-rule);
    }
  }
  .boot-term-window.opening .boot-term-inner .boot-term-title,
  .boot-term-window.opening .boot-term-inner .boot-term-line,
  .boot-term-window.opening .boot-term-dots .boot-dot,
  .boot-term-window.opening .hud-bracket,
  .boot-term-window.opening .boot-term-scan {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .boot-term-window.opening .boot-term-scan { opacity: 0; }
  .desktop-icon.imploding .icon-glyph,
  .desktop-icon.imploding .icon-label,
  .desktop-icon.imploding .icon-spark {
    animation-duration: 0.12s;
  }
  .radial-flash.fire {
    animation-duration: 0.18s;
  }
}

/* ============================================
   CRT GLOBAL OVERLAYS — scanlines, vignette, flicker
   ============================================ */
.crt-scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 1px,
    rgba(0,0,0,0.28) 1px,
    rgba(0,0,0,0.28) 2px
  );
  mix-blend-mode: multiply;
  animation: crt-flicker 6s steps(40, end) infinite;
}

.crt-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 199;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.55) 100%);
}

@keyframes crt-flicker {
  0%, 100%       { opacity: 1; }
  2.4%           { opacity: 0.85; }
  2.5%           { opacity: 1; }
  47.2%          { opacity: 0.92; }
  47.3%          { opacity: 1; }
  68%            { opacity: 0.88; }
  68.1%          { opacity: 1; }
}

/* a faint rolling tracker line that drifts down constantly */
.crt-roll {
  position: fixed;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.025) 50%,
    rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: 201;
  animation: crt-roll 9s linear infinite;
}

@keyframes crt-roll {
  0%   { top: -40px; }
  100% { top: 100vh; }
}


/* Clean handoff mode: after BIOS, the desktop drops CRT dirt and matches the site. */
#boot-root.clean-desktop .crt-scanlines,
#boot-root.clean-desktop .crt-roll,
#boot-root.clean-desktop .crt-vignette,
#boot-root.clean-desktop .tracker,
#boot-root.clean-desktop .glitch-flash {
  opacity: 0 !important;
  animation: none !important;
  display: none !important;
}

#boot-root.clean-desktop .icon-glyph::after {
  display: none;
}

/* ============================================
   CONTROLS
   ============================================ */
.controls {
  position: fixed;
  bottom: 8px;
  right: 8px;
  z-index: 1000;
  display: flex;
  gap: 4px;
  font-family: var(--font);
}

.controls button {
  background: transparent;
  border: none;
  font-family: var(--font);
  font-size: 9.5px;
  letter-spacing: 1.5px;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 10px;
  text-transform: lowercase;
  transition: color 0.15s ease;
}

.controls button:hover { color: var(--accent); }

.hidden { display: none !important; }


:root {
  --bg: #000;
  --fg: #f5f5f5;
  --muted: #777;
  --dim: #444;
  --rule: #2a2a2a;
  --terminal-bg: #000;
  --terminal-rule: #2e2e2e;
  --terminal-bar: #0a0a0a;
  --accent: #5dd068;
  --hot: #ff6b4a;
  --font: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;
  --term-w: 560px;
  --term-h: 700px;
  --menu-w: 260px;
  --gap: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 400;
  position: relative;
  overflow: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

.frame {
  position: fixed;
  inset: 24px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  pointer-events: none;
  z-index: 30;
}

.frame-label {
  position: absolute;
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 2.5px;
  background: var(--bg);
  padding: 0 10px;
  font-weight: 500;
  pointer-events: auto;
  text-decoration: none;
}

.frame-label--tl { top: -7px; left: 22px; }
.frame-label--bl { bottom: -7px; left: 22px; }
.frame-label--br { bottom: -7px; right: 22px; }

a.frame-label { transition: color 120ms ease; }
a.frame-label:hover, a.frame-label:focus-visible { color: var(--accent); outline: none; }

.frame-label .blink {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 8px;
  margin-bottom: 2px;
  animation: pulse 2s infinite;
  box-shadow: 0 0 6px rgba(93, 208, 104, 0.6);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ============================================
   audio visualizer — retro HUD-style EQ meter
   ============================================ */
.audio-glyph {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
}

.audio-viz {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  height: 24px;
  padding: 2px 4px;
  background: rgba(6, 14, 8, 0.6);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6);
}

/* scanline overlay — classic CRT phosphor look */
.audio-viz::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 1px,
    rgba(0, 0, 0, 0.45) 1px,
    rgba(0, 0, 0, 0.45) 2px
  );
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 2;
}

.viz-bar {
  display: inline-block;
  width: 1px;
  height: 2px;
  /* classic VU meter: green floor, yellow caution, red peak */
  background-image: linear-gradient(
    to top,
    rgb(60, 200, 80)   0%,
    rgb(80, 220, 100)  55%,
    rgb(220, 200, 60)  62%,
    rgb(240, 180, 50)  78%,
    rgb(255, 80, 50)   88%,
    rgb(255, 50, 40)   100%
  );
  background-size: 100% 20px;
  background-position: 0 bottom;
  background-repeat: no-repeat;
  opacity: 0.35;
  filter: brightness(0.85) saturate(0.9);
  transition: opacity 240ms ease, filter 240ms ease;
  /* no height transition — let it snap for responsive HUD feel */
  flex-shrink: 0;
  image-rendering: pixelated;
}

.audio-viz.active .viz-bar {
  opacity: 1;
  filter: brightness(1.05) saturate(1) drop-shadow(0 0 1px rgba(93, 208, 104, 0.6));
}

/* Mobile fallback animation. Web Audio analyser is disabled on mobile
   for reliability (mobile Safari can route the song into a suspended
   AudioContext and silence it). When music is playing on mobile, each
   bar runs a staggered height pulse so the EQ visibly moves. The
   heights cap at 18px so the meter still reads as a "halfway lit" VU
   rather than slamming red. */
.audio-viz.mobile-pulse .viz-bar {
  animation: viz-mobile-pulse 0.9s ease-in-out infinite;
}
.audio-viz.mobile-pulse .viz-bar:nth-child(1)  { animation-delay: -0.05s; animation-duration: 0.78s; }
.audio-viz.mobile-pulse .viz-bar:nth-child(2)  { animation-delay: -0.45s; animation-duration: 0.94s; }
.audio-viz.mobile-pulse .viz-bar:nth-child(3)  { animation-delay: -0.12s; animation-duration: 0.66s; }
.audio-viz.mobile-pulse .viz-bar:nth-child(4)  { animation-delay: -0.80s; animation-duration: 1.04s; }
.audio-viz.mobile-pulse .viz-bar:nth-child(5)  { animation-delay: -0.28s; animation-duration: 0.72s; }
.audio-viz.mobile-pulse .viz-bar:nth-child(6)  { animation-delay: -0.60s; animation-duration: 0.86s; }
.audio-viz.mobile-pulse .viz-bar:nth-child(7)  { animation-delay: -0.18s; animation-duration: 0.98s; }
.audio-viz.mobile-pulse .viz-bar:nth-child(8)  { animation-delay: -0.42s; animation-duration: 0.74s; }
.audio-viz.mobile-pulse .viz-bar:nth-child(9)  { animation-delay: -0.04s; animation-duration: 0.84s; }
.audio-viz.mobile-pulse .viz-bar:nth-child(10) { animation-delay: -0.66s; animation-duration: 0.92s; }
.audio-viz.mobile-pulse .viz-bar:nth-child(11) { animation-delay: -0.22s; animation-duration: 0.70s; }
.audio-viz.mobile-pulse .viz-bar:nth-child(12) { animation-delay: -0.48s; animation-duration: 0.88s; }
.audio-viz.mobile-pulse .viz-bar:nth-child(13) { animation-delay: -0.10s; animation-duration: 0.80s; }
.audio-viz.mobile-pulse .viz-bar:nth-child(14) { animation-delay: -0.36s; animation-duration: 0.96s; }

@keyframes viz-mobile-pulse {
  0%, 100% { height: 3px; }
  20%      { height: 11px; }
  45%      { height: 6px; }
  70%      { height: 16px; }
  90%      { height: 5px; }
}

/* subtle phosphor glow when playing */
.audio-viz.active {
  animation: viz-bloom 2.8s ease-in-out infinite;
}

@keyframes viz-bloom {
  0%, 100% { box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6), 0 0 2px rgba(93, 208, 104, 0.12); }
  50%      { box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6), 0 0 6px rgba(93, 208, 104, 0.28); }
}

.content {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 50px;
  position: relative;
  z-index: 2;
}

.stage-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.topbar {
  width: var(--term-w);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: width 320ms ease;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.menu-open .topbar {
  width: calc(var(--term-w) + var(--gap) + var(--menu-w));
}

.btn, .audio-btn {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--muted);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.6px;
  padding: 7px 13px;
  cursor: pointer;
  pointer-events: auto;
  text-decoration: none;
  text-transform: lowercase;
  transition: color 120ms ease, border-color 120ms ease;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1;
  height: 28px;
  box-sizing: border-box;
}

.btn:hover, .btn:focus-visible,
.audio-btn:hover, .audio-btn:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

.below-bar {
  width: var(--term-w);
  padding-inline: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  white-space: nowrap;
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.3px;
  overflow: hidden;
}

.below-bar a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--muted);
  text-underline-offset: 4px;
  transition: color 120ms ease, text-decoration-color 120ms ease, text-decoration-style 120ms ease;
}

.below-bar a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
  text-decoration-style: solid;
}

.below-bar .sep {
  margin: 0 8px;
  color: var(--dim);
}

.mobile-break { display: none; }

.stage {
  display: flex;
  gap: 0;
  align-items: flex-start;
  transition: gap 300ms ease;
}

body.menu-open .stage { gap: var(--gap); }

.terminal {
  background: var(--terminal-bg);
  border: 1px solid var(--terminal-rule);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.terminal.main {
  width: var(--term-w);
  height: var(--term-h);
  flex-shrink: 0;
  position: relative;
}

.terminal.main.is-loading::after {
  display: none;
}

.terminal.side {
  width: 0;
  height: var(--term-h);
  flex-shrink: 0;
  overflow: hidden;
  opacity: 0;
  transition: width 320ms ease, opacity 220ms ease;
}

body.menu-open .terminal.side {
  width: var(--menu-w);
  opacity: 1;
}

.terminal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: var(--terminal-bar);
  border-bottom: 1px solid #1a1a1a;
  flex-shrink: 0;
}

.terminal-bar .title {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.title-brand, .title-page {
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 160ms ease;
}
.title-brand:hover, .title-page:hover { color: var(--accent); }
.title-sep {
  color: var(--muted);
  pointer-events: none;
}

.terminal-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
  margin-left: 8px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2e2e2e;
}

.dot.live {
  background: var(--accent);
  box-shadow: 0 0 4px rgba(93, 208, 104, 0.5);
}

.terminal-body {
  flex: 1;
  padding: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--fg);
  letter-spacing: 0.3px;
  font-weight: 400;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 245, 245, 0.22) transparent;
  scrollbar-gutter: stable;
  position: relative;
}

/* Modern, Mac-style terminal scrollbar.
   Quiet by default, but visible enough to teach the page has depth. */
.terminal-body::-webkit-scrollbar {
  display: block;
  width: 10px;
}
.terminal-body::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}
.terminal-body::-webkit-scrollbar-thumb {
  background: rgba(245, 245, 245, 0.18);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
.terminal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 245, 245, 0.34);
  border: 3px solid transparent;
  background-clip: content-box;
}

section.page {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  min-height: 100%;
  padding: 28px 26px 88px;
  display: block;
  box-sizing: border-box;
  position: relative;
}

/* Section depth cue. Real buttons are injected by JS so the arrow can be clicked
   like Enter: snap to the next section. Final sections show a small END state. */
.section-jump,
.section-end {
  position: absolute;
  left: 26px;
  bottom: 18px;
  z-index: 3;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--muted);
  opacity: 0.42;
  animation: section-arrow-blink 1.25s ease-in-out infinite;
}

.section-jump {
  appearance: none;
  border: 0;
  padding: 7px 10px 7px 0;
  background: transparent;
  cursor: pointer;
}

.section-jump:hover,
.section-jump:focus-visible {
  color: var(--fg);
  opacity: 0.92;
  outline: none;
}

.section-end {
  text-transform: uppercase;
  pointer-events: none;
}

@keyframes section-arrow-blink {
  0%, 100% { opacity: 0.22; transform: translateY(0); }
  45%      { opacity: 0.9;  transform: translateY(5px); }
}

.section-header {
  display: flex;
  align-items: baseline;
  margin-bottom: 18px;
  font-size: 13.5px;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.hdr-bracket, .hdr-num, .hdr-slash, .hdr-name { flex-shrink: 0; white-space: pre; }
.hdr-bracket { color: var(--muted); }
.hdr-num { color: var(--accent); font-weight: 500; }
.hdr-slash { color: var(--muted); }
.hdr-name { color: var(--fg); font-weight: 500; }
.hdr-eq {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  white-space: pre;
  color: var(--dim);
  margin-left: 4px;
}

.page-content {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.section-rule {
  color: var(--dim);
  letter-spacing: 0;
  font-size: 13.5px;
  margin: 24px 0 14px;
  white-space: pre;
  overflow: hidden;
}

section.page a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--muted);
  text-underline-offset: 3px;
  transition: color 120ms ease, text-decoration-color 120ms ease, text-decoration-style 120ms ease;
}
section.page a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
  text-decoration-style: solid;
}

.cta-link {
  display: inline-block;
  color: var(--accent) !important;
  text-decoration: underline !important;
  text-decoration-style: solid !important;
  text-decoration-color: var(--accent) !important;
  font-weight: 500;
}
.cta-link:hover {
  color: var(--fg) !important;
  text-decoration-color: var(--fg) !important;
}

.muted { color: var(--muted); }
.dim { color: var(--dim); }
.accent { color: var(--accent); }
.prompt { color: var(--muted); }

.cursor {
  display: inline-block;
  width: 9px;
  height: 15px;
  background: var(--fg);
  vertical-align: -2px;
  margin-left: 2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.cascade {
  margin: 8px 0;
  transition: opacity 480ms ease;
}

.cascade-toggle {
  cursor: pointer;
  user-select: none;
  display: inline-block;
  transition: color 120ms ease;
}

.cascade-toggle:hover { color: var(--accent); }
.cascade-toggle .cmd-name { color: var(--accent); }

.cascade-toggle .toggle-mark {
  display: inline-block;
  margin-left: 8px;
  color: var(--muted);
}
.cascade-toggle .toggle-mark::before { content: '[+]'; }
.cascade[data-expanded="true"] .cascade-toggle .toggle-mark::before { content: '[-]'; }

.cascade-content {
  overflow: hidden;
  max-height: 0;
  margin: 0;
  opacity: 0;
  transition: max-height 480ms ease, opacity 320ms ease 120ms, margin 320ms ease;
}

.cascade[data-expanded="true"] .cascade-content {
  max-height: 320px;
  opacity: 1;
  margin: 10px 0 14px;
}

.cascade-video {
  display: flex;
  justify-content: center;
}

.cascade-video .vid-frame {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--terminal-rule);
  background: #000;
}

.cascade-video .vid-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.side .terminal-body {
  padding: 24px 18px;
  scroll-snap-type: none;
  white-space: normal;
}

/* ============================================
   triptych — sitrep ingest/synthesize/execute
   ============================================ */
.triptych {
  display: flex;
  gap: 10px;
  margin: 18px 0 18px;
}

.tile {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--rule);
  padding: 14px 10px 12px;
  position: relative;
  background: rgba(255, 255, 255, 0.012);
  text-align: center;
  transition: border-color 200ms ease;
}

.tile:hover { border-color: var(--muted); }

.tile-corner-num {
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 1.5px;
}

.tile-graphic {
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 6px 0 10px;
  color: var(--accent);
  font-size: 16px;
}

.tile-title {
  font-size: 10px;
  color: var(--fg);
  letter-spacing: 2.5px;
  font-weight: 500;
  margin-bottom: 10px;
}

.tile-list {
  list-style: none;
  padding: 0;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.4px;
  line-height: 1.65;
}

.tile-list li { margin: 2px 0; }

/* INGEST — arrows falling */
.ingest-graphic .glyph {
  display: inline-block;
  animation: ingest-fall 1.6s ease-in-out infinite;
}
.ingest-graphic .glyph:nth-child(1) { animation-delay: 0s; }
.ingest-graphic .glyph:nth-child(2) { animation-delay: 0.18s; }
.ingest-graphic .glyph:nth-child(3) { animation-delay: 0.36s; }

@keyframes ingest-fall {
  0% { transform: translateY(-14px); opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* SYNTHESIZE — rotating glyphs */
.synth-graphic .glyph {
  display: inline-block;
  animation: synth-rotate 2.2s ease-in-out infinite;
}
.synth-graphic .glyph:nth-child(1) { animation-delay: 0s; }
.synth-graphic .glyph:nth-child(2) { animation-delay: 0.3s; }
.synth-graphic .glyph:nth-child(3) { animation-delay: 0.6s; }

@keyframes synth-rotate {
  0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.5; }
  50% { transform: rotate(180deg) scale(1.25); opacity: 1; }
}

/* EXECUTE — pulsing bolts with glow */
.exec-graphic .glyph {
  display: inline-block;
  animation: exec-pulse 1s ease-in-out infinite;
}
.exec-graphic .glyph:nth-child(1) { animation-delay: 0s; }
.exec-graphic .glyph:nth-child(2) { animation-delay: 0.12s; }
.exec-graphic .glyph:nth-child(3) { animation-delay: 0.24s; }

@keyframes exec-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); filter: drop-shadow(0 0 0 var(--accent)); }
  50% { opacity: 1; transform: scale(1.28); filter: drop-shadow(0 0 8px var(--accent)); }
}

/* ============================================
   team grid — co-founder photos
   ============================================ */
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin: 18px 0 20px;
}

.team-card { text-align: center; }

.team-card .photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--rule);
  overflow: hidden;
  transition: border-color 280ms ease, transform 280ms ease;
}

.team-card .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(1.05);
  transition: filter 380ms ease;
}

.team-card:hover .photo {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.team-card:hover .photo img {
  filter: grayscale(0%) contrast(1);
}

.team-name {
  font-size: 12px;
  color: var(--fg);
  margin-top: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.team-role {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: 0.4px;
}

/* ============================================
   work cascades — tighter for our_work section
   ============================================ */
.work-cascade {
  margin: 2px 0;
}

.work-cascade .cascade-content {
  transition: max-height 360ms ease, opacity 240ms ease 80ms, margin 240ms ease;
}

.work-cascade[data-expanded="true"] .cascade-content {
  max-height: 280px;
  margin: 8px 0 10px;
}

.work-cascade .cascade-video .vid-frame {
  max-width: 460px;
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.menu-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 5px 10px;
  margin: 0 -6px;
  cursor: pointer;
  transition: color 120ms ease;
  text-decoration: none !important;
  color: inherit;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
}

.menu-item .num { color: var(--muted); font-size: 12.5px; }
.menu-item .name { color: var(--muted); font-weight: 500; }

.menu-item:hover, .menu-item:focus-visible {
  background: transparent;
  outline: none;
}
.menu-item:hover .num,
.menu-item:hover .name,
.menu-item:focus-visible .num,
.menu-item:focus-visible .name {
  color: var(--accent);
}

.menu-item.current { pointer-events: none; }
.menu-item.current .num, .menu-item.current .name { color: var(--fg); }
.menu-item.current::before {
  content: '>';
  color: var(--accent);
  margin-left: -16px;
  margin-right: 6px;
  font-weight: 700;
}

.next-link {
  margin-top: 28px;
  padding: 6px 0 24px;
  color: var(--muted);
}

section.page > .next-link:last-child {
  padding-bottom: 34px;
}
.next-link a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--muted);
  text-underline-offset: 3px;
}
.next-link a:hover {
  color: var(--fg);
  text-decoration-color: var(--fg);
  text-decoration-style: solid;
}

.reveal {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 380ms ease, transform 380ms ease;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 960px) {
  :root { --term-w: 480px; --term-h: 600px; --menu-w: 220px; }
}

@media (max-width: 820px) {
  :root { --term-w: 440px; --term-h: 550px; --menu-w: 200px; }
  .below-bar { font-size: 9.5px; }
  .below-bar .sep { margin: 0 5px; }
}

@media (max-width: 720px) {
  :root {
    --term-w: calc(100vw - 60px);
    --term-h: calc((100vw - 60px) * 1.25);
    --menu-w: calc(100vw - 80px);
  }
  .frame { inset: 16px; }
  .frame-label--tl, .frame-label--bl { left: 14px; }
  .frame-label--br { right: 14px; }
  .frame-label { font-size: 9.5px; letter-spacing: 1.8px; }
  .desktop { inset: 16px; }
  .desktop-brand, .desktop-clock { left: 14px; }
  .desktop-page { right: 14px; }
  .desktop-brand, .desktop-clock, .desktop-page { font-size: 9.5px; letter-spacing: 1.8px; }

  .content { padding: 60px 28px; }
  .btn { font-size: 10px; padding: 7px 11px; letter-spacing: 1.4px; }
  .terminal-body { padding: 0; font-size: 13px; }
  section.page { padding: 22px 18px 52px; }
  section.page:not(:last-of-type)::after { bottom: 14px; }
  .triptych { gap: 6px; margin: 12px 0; }
  .tile { padding: 10px 6px; }
  .tile-title { font-size: 9px; letter-spacing: 1.5px; }
  .tile-list { font-size: 9px; }
  .team-grid { gap: 10px; margin: 14px 0; }
  .below-bar { font-size: 9px; white-space: normal; flex-wrap: wrap; }
  .menu-item { font-size: 13px; }
  .terminal.side {
    position: fixed; top: 50px; right: 30px; bottom: 50px;
    height: auto; z-index: 55;
  }
  body.menu-open .terminal.side { width: min(calc(100vw - 60px), 320px); }
  body.menu-open .topbar { width: var(--term-w); }
  .stage { gap: 0 !important; }
  .section-header { font-size: 12px; }
}

@media (max-width: 420px) {
  .frame-label--bl { display: none; }
  .desktop-clock { display: none; }
}

/* Final desktop handoff polish:
   During the boot desktop phase the animated boot-frame was sitting above the
   desktop chrome, so its bottom border visually sliced through the lower-left
   clock. Once BIOS hands off to the clean desktop, put that frame behind the
   desktop and let the desktop draw the final chrome itself. */
#boot-root.clean-desktop .boot-frame.expanded {
  z-index: 18;
}

#boot-root.clean-desktop .desktop.visible {
  z-index: 42;
}

#boot-root.clean-desktop .desktop-brand,
#boot-root.clean-desktop .desktop-clock,
#boot-root.clean-desktop .desktop-page {
  z-index: 44;
  line-height: 1.2;
  bottom: auto;
}

#boot-root.clean-desktop .desktop-brand {
  top: -7px;
}

#boot-root.clean-desktop .desktop-clock,
#boot-root.clean-desktop .desktop-page {
  bottom: -7px;
}

/* remove bottom-left status dot next to live time */
.frame-label--bl .blink { display: none !important; }

/* ============================================================
   MOBILE PASS — taller terminal, cleaner wrapping, full boot-to-page fit
   Keeps desktop untouched. Phone layout uses a taller 4:6–4:7 feel so
   each terminal section has room to breathe like the desktop version.
   ============================================================ */
@media (max-width: 720px) {
  :root {
    --mobile-edge: 18px;
    --term-w: min(calc(100vw - 42px), 430px);
    --term-h: min(calc(var(--term-w) * 1.68), calc(100dvh - 118px));
    --menu-w: min(calc(100vw - 42px), 330px);
    --gap: 0px;
  }

  html, body {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
  }

  body {
    min-height: 100dvh;
  }

  .frame,
  .desktop {
    inset: 14px;
  }

  .frame-label,
  .desktop-brand,
  .desktop-clock,
  .desktop-page {
    font-size: 8.8px;
    letter-spacing: 1.15px;
    padding: 0 6px;
    line-height: 1.25;
  }

  .frame-label--tl,
  .desktop-brand {
    top: -6px;
    left: 12px;
  }

  .frame-label--bl,
  .desktop-clock {
    display: block;
    bottom: -6px;
    left: 12px;
  }

  .frame-label--br,
  .desktop-page {
    bottom: -6px;
    right: 12px;
    max-width: 58vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
  }

  .content {
    height: 100dvh;
    padding: 38px 0 36px;
    align-items: center;
    justify-content: center;
  }

  .stage-wrap {
    width: var(--term-w);
    gap: 8px;
  }

  .topbar,
  .below-bar {
    width: var(--term-w);
  }

  .topbar {
    gap: 6px;
  }

  .topbar-left {
    gap: 8px;
    min-width: 0;
  }

  .topbar-right {
    flex-shrink: 0;
  }

  .btn,
  .audio-btn {
    height: 26px;
    padding: 6px 10px;
    font-size: 9.8px;
    letter-spacing: 1.15px;
  }

  .audio-viz {
    height: 22px;
    max-width: 76px;
    overflow: hidden;
    flex-shrink: 1;
  }

  .stage {
    width: var(--term-w);
    position: relative;
  }

  .terminal.main {
    width: var(--term-w);
    height: var(--term-h);
  }

  .terminal-bar {
    padding: 9px 12px;
    min-height: 36px;
  }

  .terminal-bar .title {
    font-size: 9.8px;
    letter-spacing: 1.05px;
  }

  .terminal-dots {
    gap: 4px;
  }

  .dot {
    width: 5px;
    height: 5px;
  }

  .terminal-body {
    font-size: clamp(11.1px, 3.05vw, 12.4px);
    line-height: 1.58;
    letter-spacing: 0.12px;
    scrollbar-gutter: stable;
  }

  .terminal-body::-webkit-scrollbar {
    width: 8px;
  }

  .terminal-body::-webkit-scrollbar-track {
    margin: 6px 0;
  }

  .terminal-body::-webkit-scrollbar-thumb {
    border-width: 2px;
  }

  section.page {
    min-height: 100%;
    padding: 18px 18px 58px;
  }

  .section-header {
    font-size: 10.8px;
    line-height: 1.2;
    margin-bottom: 12px;
    letter-spacing: 0;
  }

  .hdr-name {
    max-width: 44vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .page-content,
  .split-copy,
  .principle-list,
  .deliverable-list,
  .matrix-table,
  .contact-grid,
  .intel-feed,
  .case-list {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .section-rule {
    font-size: 10.8px;
    margin: 14px 0 8px;
  }

  .section-jump,
  .section-end {
    left: 18px;
    bottom: 14px;
    font-size: 12px;
  }

  .next-link {
    margin-top: 18px;
    padding-bottom: 12px;
  }

  .below-bar {
    font-size: 8.8px;
    line-height: 1.45;
    letter-spacing: 0.08px;
    white-space: normal;
    overflow: visible;
    gap: 0;
  }

  .below-bar .sep {
    margin: 0 4px;
  }

  /* Keep visual systems distinct, but compact enough to fit a phone screen. */
  .triptych,
  .team-grid,
  .profile-grid {
    gap: 6px;
    margin: 10px 0 12px;
  }

  .triptych {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tile {
    padding: 10px 5px 8px;
  }

  .tile-corner-num {
    top: 4px;
    right: 5px;
    font-size: 7.5px;
  }

  .tile-graphic {
    height: 22px;
    margin: 5px 0 6px;
    font-size: 12px;
    gap: 3px;
  }

  .tile-title {
    font-size: 7.8px;
    letter-spacing: 1.1px;
    margin-bottom: 6px;
  }

  .tile-list {
    font-size: 7.8px;
    line-height: 1.45;
  }

  .team-grid,
  .profile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .team-name {
    font-size: 9.6px;
    margin-top: 6px;
  }

  .team-role {
    font-size: 7.8px;
    line-height: 1.25;
  }

  .cascade {
    margin: 6px 0;
  }

  .cascade[data-expanded="true"] .cascade-content {
    max-height: 210px;
    margin: 8px 0 10px;
  }

  .cascade-video .vid-frame,
  .work-cascade .cascade-video .vid-frame {
    max-width: 100%;
  }

  .work-cascade[data-expanded="true"] .cascade-content {
    max-height: 205px;
  }

  .terminal.side {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 0;
    height: min(calc(100dvh - 96px), 520px);
    max-height: calc(100dvh - 96px);
    z-index: 55;
    box-shadow: 0 0 0 1px var(--bg), 0 14px 60px rgba(0,0,0,0.72);
  }

  body.menu-open .terminal.side {
    width: var(--menu-w);
  }

  body.menu-open .topbar,
  body.menu-open .stage,
  body.menu-open .below-bar {
    width: var(--term-w);
  }

  .side .terminal-body {
    padding: 18px 16px;
    font-size: 13px;
  }

  .menu-item {
    font-size: 13px;
    line-height: 1.75;
    padding: 6px 10px;
  }

  /* Opening sequence: make every boot phase respect the same mobile frame. */
  .welcome-inner {
    width: min(calc(100vw - 48px), 380px);
    padding: 26px 20px;
  }

  .welcome-text {
    margin-bottom: 38px;
  }

  .welcome-line {
    font-size: 11.6px;
    line-height: 1.55;
    white-space: pre-wrap;
  }

  .welcome-btn {
    height: 27px;
    padding: 8px 14px;
    font-size: 10px;
  }

  .boot-frame.expanded {
    top: 14px;
    left: 14px;
    width: calc(100vw - 28px);
    height: calc(100dvh - 28px);
  }

  .boot-log {
    top: 36px;
    left: 28px;
    right: 28px;
    font-size: 10.5px;
    line-height: 1.45;
  }

  .boot-line {
    white-space: pre-wrap;
  }

  .desktop-icon {
    gap: 7px;
    padding: 12px 14px;
  }

  .icon-glyph {
    width: 50px;
    height: 50px;
    font-size: 13px;
  }

  .icon-label {
    font-size: 9.6px;
    letter-spacing: 1.1px;
  }

  .boot-term-inner {
    font-size: 11px;
  }

  .boot-term-inner .boot-term-title {
    font-size: 9.5px;
    letter-spacing: 1.2px;
    padding: 9px 12px;
    height: 32px;
  }

  .boot-term-inner .boot-term-line {
    margin-left: 14px;
    margin-right: 14px;
  }
  .boot-term-inner .boot-term-line:first-of-type {
    margin-top: 12px;
  }

  /* Smaller traffic-light dots on mobile to match the live site's chrome */
  .boot-term-dots .boot-dot {
    width: 7px;
    height: 7px;
  }
  .boot-term-dots { gap: 6px; }

  /* Tighter HUD brackets on small screens */
  .hud-bracket {
    width: 11px;
    height: 11px;
  }

  /* The unified desktop @keyframes term-open uses --term-w / --term-h
     variables and works on all viewports — no mobile-only override needed.
     The title bar's TOP anchor (calc(50% - var(--term-h) / 2)) adapts to
     the mobile --term-h automatically. */
}

@media (max-width: 390px) {
  :root {
    --term-w: calc(100vw - 34px);
    --term-h: min(calc(var(--term-w) * 1.72), calc(100dvh - 108px));
  }

  .content {
    padding-top: 34px;
    padding-bottom: 32px;
  }

  .frame,
  .desktop {
    inset: 12px;
  }

  .frame-label,
  .desktop-brand,
  .desktop-clock,
  .desktop-page {
    font-size: 8.2px;
    letter-spacing: 0.85px;
    padding: 0 5px;
  }

  .frame-label--tl,
  .frame-label--bl,
  .desktop-brand,
  .desktop-clock {
    left: 9px;
  }

  .frame-label--br,
  .desktop-page {
    right: 9px;
    max-width: 55vw;
  }

  .terminal-body {
    font-size: 11px;
    line-height: 1.52;
  }

  section.page {
    padding: 16px 15px 54px;
  }

  .section-header {
    font-size: 10px;
  }

  .triptych {
    gap: 4px;
  }

  .tile-list {
    display: none;
  }

  .tile {
    padding-bottom: 9px;
  }

  .audio-viz {
    max-width: 54px;
  }
}

@media (max-height: 680px) and (max-width: 720px) {
  :root {
    --term-h: calc(100dvh - 112px);
  }

  .content {
    padding-top: 32px;
    padding-bottom: 30px;
  }

  .terminal-body {
    font-size: 10.8px;
    line-height: 1.48;
  }

  section.page {
    padding-top: 14px;
    padding-bottom: 50px;
  }

  .section-header {
    margin-bottom: 9px;
  }

  .below-bar {
    display: none;
  }
}


/* ============================================================
   FINAL MOBILE POLISH — wider phone frame + cleaner bottom links
   ============================================================ */
@media (max-width: 720px) {
  :root {
    --term-w: min(calc(100vw - 22px), 450px);
    --term-h: min(calc(var(--term-w) * 1.68), calc(100dvh - 104px));
    --menu-w: min(calc(100vw - 24px), 360px);
  }

  .frame,
  .desktop {
    inset: 8px;
  }

  .content {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .below-bar {
    justify-content: center;
    text-align: center;
    row-gap: 4px;
    column-gap: 0;
    line-height: 1.5;
    padding: 0 2px;
  }

  .below-bar .mobile-break {
    display: block;
    flex-basis: 100%;
    height: 0;
  }

  .below-bar .social-sep {
    display: none;
  }

  .below-bar a {
    display: inline-block;
  }
}

@media (max-width: 390px) {
  :root {
    --term-w: calc(100vw - 18px);
    --term-h: min(calc(var(--term-w) * 1.72), calc(100dvh - 96px));
  }

  .frame,
  .desktop {
    inset: 7px;
  }

  .content {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}


/* ============================================================
   MOBILE FINAL PASS — requested mobile-only fixes
   ============================================================ */
@media (max-width: 720px) {
  /* Give phone screens a bit more usable width without touching desktop. */
  :root {
    --term-w: min(calc(100vw - 14px), 470px);
    --menu-w: min(calc(100vw - 18px), 380px);
  }

  .content {
    padding-left: 7px;
    padding-right: 7px;
  }

  .frame,
  .desktop {
    inset: 5px;
  }

  /* Keep bottom links on one compact line. */
  .below-bar {
    flex-wrap: nowrap;
    white-space: nowrap;
    justify-content: center;
    text-align: center;
    gap: 0;
    font-size: clamp(6.7px, 1.85vw, 8.2px);
    letter-spacing: 0.35px;
    line-height: 1.15;
    overflow: visible;
    width: var(--term-w);
  }

  .below-bar .sep {
    margin: 0 2.5px;
  }

  .below-bar .mobile-break {
    display: none !important;
  }

  /* Make the mobile menu reliably tappable above the terminal. */
  .terminal.side {
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
  }

  body.menu-open .terminal.side {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    width: var(--menu-w);
  }

  body.menu-open .terminal.side .terminal-body,
  body.menu-open .terminal.side .menu-item {
    pointer-events: auto;
  }

  .menu-item.current {
    pointer-events: auto;
  }

  /* Give cascade rows consistent spacing on mobile — matches regular .line height. */
  .cascade-toggle {
    display: inline-flex;
    align-items: center;
    min-height: unset;
    padding: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .cascade-toggle .toggle-mark {
    margin-left: 8px;
  }

  /* Slightly tighter video cascade expansion for small screens. */
  .cascade[data-expanded="true"] .cascade-content,
  .work-cascade[data-expanded="true"] .cascade-content {
    max-height: min(210px, 34dvh);
  }
}

@media (max-width: 390px) {
  :root {
    --term-w: calc(100vw - 10px);
  }

  .content {
    padding-left: 5px;
    padding-right: 5px;
  }

  .below-bar {
    font-size: clamp(6.1px, 1.68vw, 7.2px);
    letter-spacing: 0.2px;
  }

  .below-bar .sep {
    margin: 0 1.8px;
  }
}

/* ============================================================
   MOBILE MENU LAYERING
   The homepage intro/terminal content can sit visually near the mobile menu.
   Keep the menu as the top interactive layer so taps hit the menu items,
   not the homepage underneath.
   ============================================================ */
@media (max-width: 720px) {
  body.menu-open .terminal.side {
    z-index: 9999 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.menu-open .terminal.side .terminal-body,
  body.menu-open .terminal.side .menu-list,
  body.menu-open .terminal.side .menu-item {
    position: relative;
    z-index: 10000 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  body.menu-open .terminal.main,
  body.menu-open .below-bar,
  body.menu-open .topbar-left {
    pointer-events: none;
  }

  body.menu-open .topbar-right,
  body.menu-open #menu-btn,
  body.menu-open .terminal.side {
    pointer-events: auto;
  }
}


/* === TW hotfix: true-black outer/background surfaces === */
html,
body,
.welcome-gate,
.desktop,
.boot-frame.expanded,
.boot-term-window {
  background-color: #000;
}

/* Keep the outer chrome transparent so it does not cover the live terminal. */
.frame {
  background: transparent;
}

body {
  background: #000;
}

/* Keep any decorative texture from lifting the outer field off true black. */
body::before,
.desktop::before {
  opacity: 0;
}


/* === TW polish: section end behaves like an action, on desktop + mobile === */
.section-end {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: var(--font);
  cursor: pointer;
  pointer-events: auto;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.section-end:hover,
.section-end:focus-visible {
  color: var(--fg);
  outline: none;
}
@media (max-width: 720px) {
  .terminal.main.is-loading::after {
    left: 14px;
    bottom: 12px;
    font-size: 9.5px;
    padding: 5px 7px;
  }
  .section-end {
    font-size: 9.5px;
    letter-spacing: 1px;
  }
}


/* === TW final menu + section indicator polish === */
.section-jump,
.section-end {
  font-family: var(--font) !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  color: var(--fg) !important;
  opacity: 0;
  text-transform: none !important;
}

/* Section-jump (between sections) keeps the larger arrow and the
   vertical bounce — it's a literal "scroll down" hint. */
.section-jump {
  font-size: 15px !important;
  cursor: pointer;
  animation: section-arrow-blink 1.25s ease-in-out 1s infinite;
}

/* Section-end (end of page → next page) reads as a "go right to the
   next page" hint: smaller font, horizontal bounce instead of vertical. */
.section-end {
  font-size: 11px !important;
  animation: section-end-blink 1.25s ease-in-out 1s infinite;
}

.section-jump:hover,
.section-jump:focus-visible,
.section-end:hover,
.section-end:focus-visible {
  color: var(--accent) !important;
  opacity: 1;
  outline: none;
}
.section-end {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 7px 10px 7px 0;
  cursor: pointer;
  pointer-events: auto;
  white-space: nowrap;
}
#side-menu a.menu-item[data-real-link="true"] {
  pointer-events: auto;
}

/* Horizontal counterpart to section-arrow-blink — same opacity contour,
   bouncing right instead of down. The whole end-of-page link nudges to
   the right at the bright peak. */
@keyframes section-end-blink {
  0%, 100% { opacity: 0.22; transform: translateX(0); }
  45%      { opacity: 0.9;  transform: translateX(6px); }
}

@media (max-width: 720px) {
  .section-jump {
    font-size: 9.5px !important;
    letter-spacing: 1px !important;
  }
  .section-end {
    font-size: 9px !important;
    letter-spacing: 1px !important;
  }
}


/* === TW polish: menu hover matches site language === */
.menu-item:hover,
.menu-item:focus-visible {
  background: transparent !important;
}
.menu-item:hover .num,
.menu-item:hover .name,
.menu-item:focus-visible .num,
.menu-item:focus-visible .name {
  color: var(--accent) !important;
}


/* === TW polish: brand links + footer fit === */
a.frame-label:hover,
a.frame-label:focus-visible {
  color: var(--accent) !important;
  outline: none;
}

.below-bar {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

@media (max-width: 720px) {
  .below-bar {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}


/* Homepage polish: do not show the first down-arrow until the lander typing animation finishes. */
body.home-intro-running #hero > .section-jump,
body:not(.home-intro-complete) #hero > .section-jump {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.home-intro-complete #hero > .section-jump {
  visibility: visible;
}


/* === TW animation/cascade repair pass === */
/* Let the first homepage section cue wait until the lander finishes, then fade in gently. */
#hero > .section-jump {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1250ms ease 120ms, color 140ms ease !important;
}
body.home-intro-running #hero > .section-jump,
body:not(.home-intro-complete) #hero > .section-jump {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition-delay: 0ms !important;
}
body.home-intro-complete #hero > .section-jump {
  visibility: visible !important;
  opacity: 0.9 !important;
  pointer-events: auto !important;
}
body.home-intro-complete #hero > .section-jump:hover,
body.home-intro-complete #hero > .section-jump:focus-visible {
  color: var(--accent) !important;
  opacity: 1 !important;
}

/* The intro-cascade ("show intro_video") sits right under the
   "welcome to thrill wave." line. The default .cascade margin (8px top
   and bottom) made the gap between those two lines bigger than the
   line-height gap between "hi." and "welcome to thrill wave.". Zero
   out the top margin so the cascade toggle reads as just another
   prose line in the prompt sequence. */
.intro-cascade {
  margin-top: 0 !important;
}

/* Mobile intro cascade spacing: keep terminal wording readable on small screens. */
@media (max-width: 720px) {
  .intro-cascade .cascade-toggle {
    gap: 0.42em !important;
  }
  .intro-cascade .cascade-toggle .prompt {
    margin-right: 0.18em !important;
  }
  .intro-cascade .cascade-toggle .cmd-name {
    margin-left: 0.18em !important;
  }
}

/* === TW mobile polish: subtle inner breathing room inside outer frame === */
@media (max-width: 720px) {
  :root {
    --term-w: min(calc(100vw - 24px), 458px);
    --menu-w: min(calc(100vw - 28px), 368px);
  }

  .content {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 390px) {
  :root {
    --term-w: calc(100vw - 22px);
  }

  .content {
    padding-left: 11px;
    padding-right: 11px;
  }
}


/* ============================================================
   FINAL SHIP PATCH — opening handoff, clipped scanline, power modal
   ============================================================ */
:root {
  --tw-frame-inset: 24px;
  --tw-frame-label-x: 22px;
  --tw-frame-label-y: -7px;
}

/* Opening desktop mock should match the real static chrome exactly. */
.desktop {
  inset: var(--tw-frame-inset) !important;
  border-color: var(--rule) !important;
  border-radius: 4px !important;
  background: #000 !important;
}
.desktop-brand,
.desktop-clock,
.desktop-page,
.frame-label {
  background: #000 !important;
  line-height: 1.2 !important;
  font-size: 10.5px !important;
  letter-spacing: 2.5px !important;
  font-weight: 500 !important;
  padding: 0 10px !important;
  text-transform: none !important;
}
.desktop-brand,
.frame-label--tl {
  top: var(--tw-frame-label-y) !important;
  left: var(--tw-frame-label-x) !important;
}
.desktop-clock,
.frame-label--bl {
  bottom: var(--tw-frame-label-y) !important;
  left: var(--tw-frame-label-x) !important;
}
.desktop-page,
.frame-label--br {
  bottom: var(--tw-frame-label-y) !important;
  right: var(--tw-frame-label-x) !important;
}

/* Keep the green desktop→terminal scanline inside the outer frame and above the terminal. */
.radial-flash {
  z-index: 140 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  clip-path: inset(var(--tw-frame-inset) var(--tw-frame-inset) var(--tw-frame-inset) var(--tw-frame-inset) round 4px) !important;
}
.boot-term-window {
  z-index: 100 !important;
}
#boot-root.clean-desktop .desktop.visible {
  z-index: 42 !important;
}

/* The real outer power control: green hover, themed confirmation modal. */
.frame-label--tl {
  cursor: pointer;
}
.frame-label--tl:hover,
.frame-label--tl:focus-visible {
  color: var(--accent) !important;
  outline: none;
}

.power-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, visibility 160ms ease;
}
.power-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.power-modal__panel {
  width: min(420px, calc(100vw - 44px));
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #000;
  color: var(--fg);
  box-shadow: 0 0 0 1px rgba(93, 208, 104, 0.1), 0 18px 60px rgba(0,0,0,0.7);
  padding: 18px 18px 16px;
  font-family: var(--font);
}
.power-modal__title {
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 1.6px;
  margin-bottom: 12px;
  text-transform: lowercase;
}
.power-modal__copy {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
  margin-bottom: 16px;
}
.power-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.power-modal__btn {
  appearance: none;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 1.2px;
  padding: 8px 11px;
  cursor: pointer;
  text-transform: lowercase;
}
.power-modal__btn:hover,
.power-modal__btn:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}
.power-modal__btn--confirm:hover,
.power-modal__btn--confirm:focus-visible {
  color: var(--fg);
  border-color: var(--accent);
}

@media (max-width: 720px) {
  :root {
    --tw-frame-inset: 10px;
    --tw-frame-label-x: 10px;
    --tw-frame-label-y: -6px;
    --term-w: min(calc(100vw - 22px), 462px);
    --menu-w: min(calc(100vw - 26px), 372px);
  }
  .frame,
  .desktop {
    inset: 12px 6px !important;
  }
  .content {
    padding: 23px 7px 22px !important;
  }
  .desktop-brand,
  .desktop-clock,
  .desktop-page,
  .frame-label {
    font-size: 8.5px !important;
    letter-spacing: 0.95px !important;
    padding: 0 5px !important;
    line-height: 1.25 !important;
  }
  .desktop-brand,
  .frame-label--tl {
    top: -6px !important;
    left: 10px !important;
  }
  .desktop-clock,
  .frame-label--bl {
    bottom: -6px !important;
    left: 10px !important;
  }
  .desktop-page,
  .frame-label--br {
    bottom: -6px !important;
    right: 10px !important;
    max-width: 58vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .radial-flash {
    clip-path: inset(12px 6px 12px 6px round 4px) !important;
    z-index: 140 !important;
  }
  .boot-term-window {
    z-index: 100 !important;
  }
  .below-bar {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}

@media (max-width: 390px) {
  :root {
    --term-w: calc(100vw - 20px);
  }
  .frame,
  .desktop {
    inset: 11px 5px !important;
  }
  .content {
    padding: 22px 6px 21px !important;
  }
  .radial-flash {
    clip-path: inset(11px 5px 11px 5px round 4px) !important;
  }
}


/* FINAL correction: animate the scanline itself inside the frame dimensions instead of full-viewport. */
.radial-flash {
  top: var(--tw-frame-inset) !important;
  left: var(--tw-frame-inset) !important;
  right: var(--tw-frame-inset) !important;
  width: auto !important;
  clip-path: none !important;
}
.radial-flash.fire {
  animation: tw-frame-scanline-sweep 0.44s cubic-bezier(0.42, 0.1, 0.6, 1) forwards !important;
}
@keyframes tw-frame-scanline-sweep {
  0%   { opacity: 0;    transform: translateY(-12px); }
  6%   { opacity: 1;    transform: translateY(0); }
  16%  { opacity: 0.35; transform: translateY(calc((100vh - (var(--tw-frame-inset) * 2)) * 0.14)); }
  24%  { opacity: 1;    transform: translateY(calc((100vh - (var(--tw-frame-inset) * 2)) * 0.24)); }
  38%  { opacity: 0.5;  transform: translateY(calc((100vh - (var(--tw-frame-inset) * 2)) * 0.40)); }
  50%  { opacity: 1;    transform: translateY(calc((100vh - (var(--tw-frame-inset) * 2)) * 0.54)); }
  64%  { opacity: 0.3;  transform: translateY(calc((100vh - (var(--tw-frame-inset) * 2)) * 0.70)); }
  78%  { opacity: 1;    transform: translateY(calc((100vh - (var(--tw-frame-inset) * 2)) * 0.86)); }
  92%  { opacity: 0.7;  transform: translateY(calc((100vh - (var(--tw-frame-inset) * 2)) * 0.98)); }
  100% { opacity: 0;    transform: translateY(calc(100vh - (var(--tw-frame-inset) * 2) + 12px)); }
}
@media (max-width: 720px) {
  .radial-flash {
    top: 12px !important;
    left: 6px !important;
    right: 6px !important;
  }
}
@media (max-width: 390px) {
  .radial-flash {
    top: 11px !important;
    left: 5px !important;
    right: 5px !important;
  }
}


/* === TW power confirmation modal — final click-safe pass === */
.frame-label--tl {
  cursor: pointer;
  pointer-events: auto !important;
}
.power-modal {
  z-index: 2147483000 !important;
}
.power-modal__eyebrow {
  color: var(--dim);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: lowercase;
  margin-bottom: 7px;
}
.power-modal__title::before {
  content: "> ";
  color: var(--accent);
}
.power-modal-open .frame-label--tl {
  color: var(--accent) !important;
}
.power-modal__btn--confirm {
  color: var(--fg);
}
.power-modal__btn--confirm:hover,
.power-modal__btn--confirm:focus-visible {
  background: rgba(93, 208, 104, 0.08);
}


/* === TW terminal-styled power modal polish === */
.power-modal__panel.terminal {
  padding: 0 !important;
  overflow: hidden;
  background: var(--terminal-bg, #000) !important;
  border-color: var(--terminal-rule, var(--rule)) !important;
}

.power-modal__bar {
  min-height: 44px;
  padding: 11px 16px;
  border-bottom: 1px solid #1a1a1a;
  background: var(--terminal-bar, #0a0a0a);
}

.power-modal__bar-title {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 500;
  text-transform: lowercase;
}

.power-modal__body {
  padding: 20px 18px 17px;
}

.power-modal__btn,
.power-modal__btn--confirm {
  color: var(--muted) !important;
  background: transparent !important;
  border-color: var(--rule) !important;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.power-modal__btn:hover,
.power-modal__btn:focus-visible,
.power-modal__btn--confirm:hover,
.power-modal__btn--confirm:focus-visible {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: transparent !important;
  outline: none;
}

@media (max-width: 720px) {
  .power-modal__panel.terminal {
    width: min(calc(100vw - 44px), 390px);
  }
  .power-modal__bar {
    min-height: 40px;
    padding: 10px 14px;
  }
  .power-modal__body {
    padding: 18px 15px 15px;
  }
}


/* === TW power modal body clean-up === */
.power-modal__eyebrow,
.power-modal__copy {
  display: none !important;
}

.power-modal__body,
.power-modal__title {
  color: var(--fg) !important;
}

.power-modal__title::before {
  content: none !important;
}


/* === TW power modal prompt formatting final === */
.power-modal__body {
  font-size: 14px !important;
  line-height: 1.85 !important;
  color: var(--fg) !important;
}

.power-modal__title {
  color: var(--fg) !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  letter-spacing: 0 !important;
  margin: 0 0 18px !important;
  text-transform: lowercase !important;
  font-weight: 500 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.power-modal__title::before {
  content: "> " !important;
  color: var(--fg) !important;
}

.power-modal__actions {
  margin-top: 2px !important;
}

@media (max-width: 720px) {
  .power-modal__body,
  .power-modal__title {
    font-size: 12px !important;
    line-height: 1.75 !important;
  }
}


/* ============================================================
   FINAL OPENING POLISH — cleaner welcome size + exact terminal handoff
   ============================================================ */
/* Slightly larger welcome copy/button, still restrained and terminal-like. */
.welcome-line {
  font-size: 14px !important;
  line-height: 1.58 !important;
}
.welcome-btn {
  font-size: 11.6px !important;
  height: 29px !important;
  padding: 9px 17px !important;
}

/* The gritty scanline transition is back. It's already clipped to the
   outer frame border by the .radial-flash rules earlier in this file
   (clip-path: inset(var(--tw-frame-inset)) round 4px), so the sweep
   stays inside the 24px-inset frame instead of bleeding to viewport edge. */

/* Match the opening terminal's final landing spot to the real homepage
   terminal. The real terminal sits slightly below exact vertical center
   because the top controls and footer live in the same centered stack. */
:root {
  --boot-term-y-nudge: 8px;
  --boot-title-h: 39px;
}
.boot-term-window {
  top: calc(50% - var(--term-h, 700px) / 2 + var(--boot-term-y-nudge)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 0;
  height: 0;
}

/* Replace the previous sci-fi scanline reveal with a tighter early-00s
   app-launch feel: the clicked icon becomes a thin title bar, the bar snaps
   to the exact terminal position, then the window drops open from the title
   edge into the same dimensions as the live homepage terminal. */
.boot-term-window.opening {
  animation: tw-elf-terminal-launch 0.62s cubic-bezier(0.18, 0.86, 0.22, 1) forwards !important;
}

@keyframes tw-elf-terminal-launch {
  0% {
    left: var(--boot-origin-x, 50%);
    top: var(--boot-origin-y, 50%);
    transform: translate(-50%, -50%);
    width: 52px;
    height: 2px;
    opacity: 0;
    border-color: transparent;
    box-shadow: 0 0 0 rgba(93,208,104,0);
  }
  8% {
    left: var(--boot-origin-x, 50%);
    top: var(--boot-origin-y, 50%);
    transform: translate(-50%, -50%);
    width: 86px;
    height: 2px;
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 0 28px rgba(93,208,104,0.8), 0 0 64px rgba(93,208,104,0.35);
  }
  28% {
    left: 50%;
    top: calc(50% - var(--term-h, 700px) / 2 + var(--boot-term-y-nudge));
    transform: translateX(-50%);
    width: calc(var(--term-w, 560px) * 1.025);
    height: 2px;
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 0 30px rgba(93,208,104,0.8), 0 0 70px rgba(93,208,104,0.35);
  }
  38% {
    left: 50%;
    top: calc(50% - var(--term-h, 700px) / 2 + var(--boot-term-y-nudge));
    transform: translateX(-50%);
    width: var(--term-w, 560px);
    height: var(--boot-title-h);
    opacity: 1;
    border-color: rgba(93,208,104,0.6);
    box-shadow: 0 0 22px rgba(93,208,104,0.45), 0 0 48px rgba(93,208,104,0.2);
  }
  78% {
    left: 50%;
    top: calc(50% - var(--term-h, 700px) / 2 + var(--boot-term-y-nudge));
    transform: translateX(-50%);
    width: var(--term-w, 560px);
    height: var(--term-h, 700px);
    opacity: 1;
    border-color: rgba(93,208,104,0.28);
    box-shadow: 0 0 24px rgba(93,208,104,0.22), 0 0 52px rgba(93,208,104,0.12);
  }
  100% {
    left: 50%;
    top: calc(50% - var(--term-h, 700px) / 2 + var(--boot-term-y-nudge));
    transform: translateX(-50%);
    width: var(--term-w, 560px);
    height: var(--term-h, 700px);
    opacity: 1;
    border-color: var(--terminal-rule);
    box-shadow: none;
  }
}

/* Match the live terminal chrome exactly at the landing moment. */
.boot-term-inner .boot-term-title {
  height: auto !important;
  min-height: 39px !important;
  padding: 11px 16px !important;
  background: var(--terminal-bar) !important;
  border-bottom: 1px solid #1a1a1a !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
}
.boot-term-dots {
  gap: 5px !important;
}
.boot-term-dots .boot-dot {
  width: 6px !important;
  height: 6px !important;
  background: #2e2e2e !important;
}
.boot-term-dots .boot-dot.live,
.boot-term-dots .boot-dot:nth-child(3) {
  background: var(--accent) !important;
  box-shadow: 0 0 4px rgba(93,208,104,0.5) !important;
}
.boot-term-window.opening .boot-term-inner .boot-term-title {
  animation: boot-title-show 0.16s ease 0.22s forwards !important;
}
.boot-term-window.opening .boot-term-dots .boot-dot:nth-child(1) { animation-delay: 0.24s !important; }
.boot-term-window.opening .boot-term-dots .boot-dot:nth-child(2) { animation-delay: 0.26s !important; }
.boot-term-window.opening .boot-term-dots .boot-dot:nth-child(3) { animation-delay: 0.28s, 0.44s !important; }

/* These HUD/scan ornaments were the main source of the final-frame mismatch.
   The live homepage terminal has no corner brackets or internal scan beam. */
.hud-bracket,
.boot-term-scan {
  display: none !important;
}

@media (max-width: 720px) {
  :root {
    --boot-term-y-nudge: 7px;
    --boot-title-h: 36px;
  }
  .welcome-line {
    font-size: 13px !important;
  }
  .welcome-btn {
    font-size: 10.5px !important;
    height: 28px !important;
    padding: 8px 14px !important;
  }
  .boot-term-inner .boot-term-title {
    min-height: 36px !important;
    padding: 9px 12px !important;
    font-size: 9.8px !important;
    letter-spacing: 1.05px !important;
  }
}


/* ============================================================
   EXACT HOMEPAGE HANDOFF PATCH
   The opening terminal now lands on the measured live .terminal.main rect,
   while the real homepage shell is visible underneath. This removes the
   small vertical jump between the opening layer and the static homepage.
   ============================================================ */
body.booting.handoff-ready .desktop.consumed,
body.booting.handoff-ready #boot-root.clean-desktop .boot-frame.expanded {
  opacity: 0 !important;
  transition: opacity 120ms ease;
}

body.booting.handoff-ready .boot-term-window {
  z-index: 42;
}

body.booting.handoff-ready > .frame {
  z-index: 35;
}

/* Override the previous approximation-based launch. JS supplies exact px
   values for the live terminal's left/top/width/height. */
body.booting.handoff-ready .boot-term-window.opening {
  animation: tw-exact-homepage-terminal-launch 0.62s cubic-bezier(0.18, 0.86, 0.22, 1) forwards !important;
  transform: none !important;
}

@keyframes tw-exact-homepage-terminal-launch {
  0% {
    left: var(--boot-origin-x, 50%);
    top: var(--boot-origin-y, 50%);
    transform: translate(-50%, -50%);
    width: 54px;
    height: 2px;
    opacity: 0;
    border-color: transparent;
    box-shadow: 0 0 0 rgba(93,208,104,0);
  }
  10% {
    left: var(--boot-origin-x, 50%);
    top: var(--boot-origin-y, 50%);
    transform: translate(-50%, -50%);
    width: 90px;
    height: 2px;
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 0 24px rgba(93,208,104,0.75), 0 0 58px rgba(93,208,104,0.32);
  }
  34% {
    left: var(--boot-term-final-left, 50%);
    top: var(--boot-term-final-top, calc(50% - var(--term-h) / 2));
    transform: none;
    width: var(--boot-term-final-width, var(--term-w));
    height: 2px;
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 0 24px rgba(93,208,104,0.62), 0 0 48px rgba(93,208,104,0.24);
  }
  48% {
    left: var(--boot-term-final-left, 50%);
    top: var(--boot-term-final-top, calc(50% - var(--term-h) / 2));
    transform: none;
    width: var(--boot-term-final-width, var(--term-w));
    height: var(--boot-title-height, 39px);
    opacity: 1;
    border-color: rgba(93,208,104,0.5);
    box-shadow: 0 0 18px rgba(93,208,104,0.32);
  }
  88% {
    left: var(--boot-term-final-left, 50%);
    top: var(--boot-term-final-top, calc(50% - var(--term-h) / 2));
    transform: none;
    width: var(--boot-term-final-width, var(--term-w));
    height: var(--boot-term-final-height, var(--term-h));
    opacity: 1;
    border-color: rgba(93,208,104,0.2);
    box-shadow: 0 0 14px rgba(93,208,104,0.12);
  }
  100% {
    left: var(--boot-term-final-left, 50%);
    top: var(--boot-term-final-top, calc(50% - var(--term-h) / 2));
    transform: none;
    width: var(--boot-term-final-width, var(--term-w));
    height: var(--boot-term-final-height, var(--term-h));
    opacity: 0;
    border-color: var(--terminal-rule);
    box-shadow: none;
  }
}

/* The measured handoff uses the real terminal behind it, so any extra HUD
   ornaments on the boot terminal are removed to prevent a visible mismatch. */
body.booting.handoff-ready .hud-bracket,
body.booting.handoff-ready .boot-term-scan {
  display: none !important;
}

body.booting.handoff-ready .boot-term-inner .boot-term-title {
  height: var(--boot-title-height, 39px) !important;
  min-height: var(--boot-title-height, 39px) !important;
  padding: 11px 16px !important;
}

@media (max-width: 720px) {
  body.booting.handoff-ready .boot-term-inner .boot-term-title {
    padding: 9px 12px !important;
  }
}


/* ============================================================
   TW FINAL HANDOFF REPAIR — no static page underneath early
   ============================================================ */
body.booting.handoff-ready > .frame,
body.booting.handoff-ready > main.content {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Exact clones of the real homepage chrome. They appear only during the
   last half-second of opening, so the live site handoff has no hard pop. */
.boot-chrome-clone {
  position: fixed;
  inset: 0;
  z-index: 22;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}
.boot-chrome-clone.is-visible { opacity: 1; }
.boot-clone-piece {
  position: fixed !important;
  margin: 0 !important;
  pointer-events: none !important;
}
.boot-clone-frame {
  z-index: 22;
  animation: boot-chrome-in 240ms ease forwards;
}
.boot-clone-topbar,
.boot-clone-below {
  z-index: 23;
  opacity: 0;
  transform: translateY(3px);
  animation: boot-chrome-in 260ms ease 80ms forwards;
}
.boot-clone-topbar .audio-btn,
.boot-clone-topbar .btn,
.boot-clone-below a {
  pointer-events: none !important;
}
@keyframes boot-chrome-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The terminal reveal now lands on the measured live terminal rectangle.
   This avoids the little vertical jump between opening and homepage. */
.boot-term-window.opening {
  animation: term-open-exact 0.58s cubic-bezier(0.18, 0.86, 0.22, 1) forwards !important;
  z-index: 24;
}
@keyframes term-open-exact {
  0% {
    left: var(--boot-origin-x, 50%);
    top: var(--boot-origin-y, 50%);
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    opacity: 0;
    border-color: transparent;
    box-shadow: 0 0 0 rgba(93,208,104,0);
  }
  7% {
    left: var(--boot-origin-x, 50%);
    top: var(--boot-origin-y, 50%);
    transform: translate(-50%, -50%);
    width: 10px;
    height: 2px;
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 0 24px rgba(93,208,104,0.9), 0 0 54px rgba(93,208,104,0.38);
  }
  24% {
    left: var(--boot-term-final-left, calc(50% - var(--term-w, 560px) / 2));
    top: var(--boot-origin-y, 50%);
    transform: none;
    width: var(--boot-term-final-width, var(--term-w, 560px));
    height: 2px;
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 0 24px rgba(93,208,104,0.8), 0 0 58px rgba(93,208,104,0.32);
  }
  42% {
    left: var(--boot-term-final-left, calc(50% - var(--term-w, 560px) / 2));
    top: var(--boot-term-final-top, calc(50% - var(--term-h, 700px) / 2));
    transform: none;
    width: var(--boot-term-final-width, var(--term-w, 560px));
    height: 2px;
    opacity: 1;
    border-color: var(--accent);
  }
  56% {
    left: var(--boot-term-final-left, calc(50% - var(--term-w, 560px) / 2));
    top: var(--boot-term-final-top, calc(50% - var(--term-h, 700px) / 2));
    transform: none;
    width: var(--boot-term-final-width, var(--term-w, 560px));
    height: var(--boot-title-height, 39px);
    opacity: 1;
    border-color: rgba(93,208,104,0.5);
  }
  88% {
    left: var(--boot-term-final-left, calc(50% - var(--term-w, 560px) / 2));
    top: var(--boot-term-final-top, calc(50% - var(--term-h, 700px) / 2));
    transform: none;
    width: var(--boot-term-final-width, var(--term-w, 560px));
    height: var(--boot-term-final-height, var(--term-h, 700px));
    opacity: 1;
    border-color: rgba(93,208,104,0.28);
    box-shadow: 0 0 22px rgba(93,208,104,0.18);
  }
  100% {
    left: var(--boot-term-final-left, calc(50% - var(--term-w, 560px) / 2));
    top: var(--boot-term-final-top, calc(50% - var(--term-h, 700px) / 2));
    transform: none;
    width: var(--boot-term-final-width, var(--term-w, 560px));
    height: var(--boot-term-final-height, var(--term-h, 700px));
    opacity: 1;
    border-color: var(--terminal-rule);
    box-shadow: none;
  }
}

/* Keep the opening reveal clean, not HUD-y. */
.boot-term-window.opening .hud-bracket,
.boot-term-window.opening .boot-term-scan {
  display: none !important;
}

/* Mobile divider fix: keep a visible separator between phone and insta. */
@media (max-width: 720px) {
  .below-bar .social-sep,
  .boot-clone-below .social-sep {
    display: inline-block !important;
  }
}


/* ============================================================
   TW HANDOFF CLEANUP PATCH — terminal-only boot layer
   - no duplicate full-page chrome during kinetic launch
   - skip disappears after click-to-start
   - boot terminal dots/title match live terminal exactly
   - live shell appears only for the final settled beat to prevent jump
   ============================================================ */

/* Hide skip as soon as the opening actually starts. */
#boot-root.boot-running .controls,
.welcome-gate.gone ~ .controls {
  display: none !important;
}

/* The clone layer caused duplicate borders/half-cut time/page labels. */
.boot-chrome-clone {
  display: none !important;
}

/* Do not reveal the live site early, except for the final settled handoff. */
body.booting.handoff-ready > .frame,
body.booting.handoff-ready > main.content {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.booting.handoff-show-live > .frame,
body.booting.handoff-show-live > main.content {
  opacity: 1 !important;
  pointer-events: none !important;
}

/* During the final handoff beat, the boot terminal sits exactly over the
   real terminal, then fades just enough that the swap is not visible. */
body.booting.handoff-show-live .boot-term-window.opening {
  transition: opacity 170ms ease !important;
  opacity: 0.08 !important;
}

/* Match the live terminal chrome. The previous boot dots were larger than
   the real traffic lights, which made the handoff look like it shifted. */
.boot-term-inner .boot-term-title {
  height: var(--boot-title-height, 40px) !important;
  min-height: var(--boot-title-height, 40px) !important;
  padding: 11px 16px !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  line-height: normal !important;
}
.boot-term-dots {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
  margin-left: 8px !important;
}
.boot-term-dots .boot-dot {
  width: 6px !important;
  height: 6px !important;
}

/* The boot window should only be the terminal, never a second full-page bg. */
.boot-term-window.opening {
  z-index: 44 !important;
}

@media (max-width: 720px) {
  .boot-term-inner .boot-term-title {
    padding: 9px 12px !important;
  }
  .below-bar .social-sep {
    display: inline-block !important;
  }
}

/* ============================================================
   FINAL SHIP PATCH — scanline handoff + top-down UI reveals
   ============================================================ */

/* During the final boot handoff, do not mock another webpage. Reveal the
   actual homepage shell under one clipped scanline so there is no pixel jump. */
#boot-root.scan-handoff .desktop,
#boot-root.scan-handoff .boot-frame,
#boot-root.scan-handoff .pointer,
#boot-root.scan-handoff .boot-term-window,
#boot-root.scan-handoff .controls,
#boot-root.scan-handoff .radial-flash,
#boot-root.scan-handoff .tracker,
#boot-root.scan-handoff .crt-scanlines,
#boot-root.scan-handoff .crt-roll,
#boot-root.scan-handoff .crt-vignette {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  pointer-events: none !important;
}

body.booting.handoff-show-live > .frame,
body.booting.handoff-show-live > main.content {
  opacity: 1 !important;
  pointer-events: none !important;
}

/* The duplicate green-flash.frame-scan reveal has been retired. The
   handoff scan is now provided by body.tw-frame-scan::after (see below)
   which is the cool gritty version. Keep .green-flash itself for the
   BIOS→desktop blink. */
.green-flash.frame-scan,
.green-flash.frame-scan::before,
.green-flash.frame-scan::after {
  animation: none !important;
  opacity: 0 !important;
  display: none !important;
}

/* ---- ELF→TERMINAL HANDOFF ----
   After the user couldn't get the clip-path reveal perfectly in sync
   with the scan bar, we switched to the simpler approach: the live
   terminal/topbar/footer appear instantly when handoff fires, and the
   scan bar passes over the top to sell the reveal. Just the brightness
   sheen runs alongside for a "powering up" feel. */
body.booting.handoff-show-live .terminal.main,
body.booting.handoff-show-live .topbar,
body.booting.handoff-show-live .below-bar {
  animation: tw-interface-scan-sheen 0.52s cubic-bezier(0.16, 0.78, 0.2, 1) both;
}

@keyframes tw-interface-scan-sheen {
  0%   { filter: brightness(0.82); box-shadow: none; }
  18%  { filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(93,208,104,0.08), 0 0 34px rgba(93,208,104,0.16); }
  100% { filter: brightness(1); box-shadow: none; }
}

/* Replace the side-menu's old width wipe with a top-down terminal reveal. */
.terminal.side {
  width: 0;
  max-height: 0;
  clip-path: inset(0 0 100% 0);
  transform-origin: top center;
  opacity: 0;
  transition:
    clip-path 300ms cubic-bezier(0.2,0.82,0.22,1),
    max-height 300ms cubic-bezier(0.2,0.82,0.22,1),
    opacity 140ms ease,
    width 0ms linear 300ms;
}
body.menu-open .terminal.side {
  width: var(--menu-w);
  max-height: var(--term-h);
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition:
    width 0ms linear,
    clip-path 320ms cubic-bezier(0.16,0.86,0.24,1),
    max-height 320ms cubic-bezier(0.16,0.86,0.24,1),
    opacity 120ms ease;
}

/* Power modal uses the same top-to-bottom reveal language. */
.power-modal__panel {
  transform-origin: top center !important;
  transform: scaleY(0.04) !important;
  clip-path: inset(0 0 100% 0) !important;
  opacity: 0 !important;
  transition:
    transform 300ms cubic-bezier(0.16,0.86,0.24,1),
    clip-path 300ms cubic-bezier(0.16,0.86,0.24,1),
    opacity 120ms ease !important;
}
.power-modal.is-open .power-modal__panel {
  transform: scaleY(1) !important;
  clip-path: inset(0 0 0 0) !important;
  opacity: 1 !important;
}

/* Mobile alignment: music/menu button edges line up with the terminal edges. */
@media (max-width: 720px) {
  .stage-wrap,
  .topbar,
  .stage,
  .below-bar {
    width: var(--term-w) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .topbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .topbar-left,
  .topbar-right {
    margin: 0 !important;
  }
  .topbar-right {
    margin-left: auto !important;
  }
  .audio-btn,
  #menu-btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .terminal.side {
    width: var(--menu-w) !important;
    max-height: 0 !important;
    clip-path: inset(0 0 100% 0) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition:
      clip-path 300ms cubic-bezier(0.2,0.82,0.22,1),
      max-height 300ms cubic-bezier(0.2,0.82,0.22,1),
      opacity 120ms ease,
      visibility 0ms linear 300ms !important;
  }
  body.menu-open .terminal.side {
    width: var(--menu-w) !important;
    max-height: min(calc(100dvh - 96px), 520px) !important;
    clip-path: inset(0 0 0 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition:
      visibility 0ms linear,
      clip-path 320ms cubic-bezier(0.16,0.86,0.24,1),
      max-height 320ms cubic-bezier(0.16,0.86,0.24,1),
      opacity 120ms ease !important;
  }
  .green-flash.frame-scan {
    inset: 12px 6px !important;
  }
  @keyframes tw-frame-scan-reveal {
    0%   { opacity: 0; transform: translateY(-120%); }
    8%   { opacity: 1; }
    78%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(calc(100dvh - 24px + 120%)); }
  }
  .below-bar .social-sep {
    display: inline-block !important;
  }
}


/* ============================================================
   FINAL SCANLINE DEBUG PASS — reliable frame scan + 5s wake glow
   Uses body-level classes so the effect survives the boot overlay removal.
   ============================================================ */

/* Hard, visible phosphor scan beam clipped to the same inset as the real
   outer border. This replaces the fragile boot-root-only scan layer. */
/* The kinetic elf→terminal handoff scan. A short, gritty horizontal
   scanline sweeps from the top of the inner frame to the bottom, with
   a glowing green halo trailing behind it and a hot-white core. The
   bar has subtle CRT raster banding (see ::before-like effect via the
   gradient stops), and the box-shadow is wide enough to "reflect"
   against the surrounding background as it travels. */
body.tw-frame-scan::after {
  content: '';
  position: fixed;
  left: 24px;
  right: 24px;
  top: 24px;
  height: 6px;
  z-index: 100000;
  pointer-events: none;
  opacity: 0;
  border-radius: 0;
  /* hard horizontal bar with white-hot core and accent-green edges */
  background:
    repeating-linear-gradient(to right,
      rgba(0, 0, 0, 0.45) 0 1px,
      transparent 1px 3px),
    linear-gradient(to bottom,
      rgba(93, 208, 104, 0) 0%,
      rgba(93, 208, 104, 0.95) 18%,
      rgba(255, 255, 255, 0.98) 48%,
      rgba(255, 255, 255, 0.98) 52%,
      rgba(93, 208, 104, 0.9) 82%,
      rgba(93, 208, 104, 0) 100%);
  /* multi-stop bloom — the wide outer shadow is what gives the
     "reflecting against the background" look as the bar passes */
  box-shadow:
    0 0 22px rgba(93, 208, 104, 1),
    0 0 80px rgba(93, 208, 104, 0.55),
    0 0 160px rgba(93, 208, 104, 0.22);
  mix-blend-mode: screen;
  animation: tw-reliable-frame-scan 0.52s cubic-bezier(0.32, 0.0, 0.4, 1) both;
}

@keyframes tw-reliable-frame-scan {
  /* Single smooth sweep from above the top frame edge to past the bottom.
     The position interpolation runs from 0% → 100% with NO intermediate
     transform stops — the cubic-bezier handles the easing so the bar
     glides instead of jerking through flicker stops. Opacity has just
     two soft stops (fade in at the start, fade out at the end) to read
     as a clean flash rather than a stuttering CRT signal. Half-second
     duration matches the snappy feel of the white/green blink flashes. */
  0%   { opacity: 0;    transform: translateY(-42px) scaleY(0.75); }
  10%  { opacity: 1;    transform: translateY(calc((100vh - 48px) * 0.06)) scaleY(1); }
  88%  { opacity: 1;    transform: translateY(calc((100vh - 48px) * 0.94)) scaleY(1); }
  100% { opacity: 0;    transform: translateY(calc(100vh - 48px)) scaleY(0.9); }
}

/* Slow green system-wake reflection. It drifts down the actual interface for
   about five seconds, continuing underneath the music and homepage typing. */
/* The slow 5-second second scan (tw-system-wake) has been retired. It
   was reading as a duplicate, washed-out scan line and conflicting with
   the kinetic terminal clip-reveal. The single sharp scan from
   body.tw-frame-scan::after is now the only handoff effect. */
body.tw-system-wake .content::after {
  display: none !important;
  animation: none !important;
}
body.tw-system-wake .terminal.main,
body.tw-system-wake .topbar,
body.tw-system-wake .below-bar {
  animation: none !important;
}

@keyframes tw-system-wake-glow {
  0%   { opacity: 0; transform: translateY(-38%); }
  8%   { opacity: 0.72; }
  35%  { opacity: 0.58; }
  72%  { opacity: 0.32; }
  100% { opacity: 0; transform: translateY(46%); }
}

@keyframes tw-interface-wake-brightness {
  0%   { filter: brightness(0.9); }
  10%  { filter: brightness(1.14); }
  48%  { filter: brightness(1.06); }
  100% { filter: brightness(1); }
}

@media (max-width: 720px) {
  body.tw-frame-scan::after {
    left: 6px;
    right: 6px;
    top: 12px;
    height: 28px;
    animation-name: tw-reliable-frame-scan-mobile;
  }
  body.tw-system-wake .content::after {
    left: 6px;
    right: 6px;
    top: 12px;
    bottom: 12px;
  }
  @keyframes tw-reliable-frame-scan-mobile {
    0%   { opacity: 0; transform: translateY(-40px) scaleY(0.75); }
    6%   { opacity: 1; }
    72%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(calc(100dvh - 24px)) scaleY(0.9); }
  }
}


/* ============================================================
   TW refinement pass — cleaner scanline, border-native wake glow,
   desktop menu wipe, and cohesive terminal-style prompts
   ============================================================ */

/* The scanline should read as a gritty phosphor bar, not a black-gradient overlay. */
body.tw-frame-scan::after {
  height: 10px !important;
  border-radius: 2px !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.00) 0 5px,
      rgba(0,0,0,0.22) 5px 7px,
      rgba(255,255,255,0.18) 7px 8px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.18) 0 1px,
      rgba(93,208,104,0.94) 1px 3px,
      rgba(44,128,58,0.86) 3px 5px
    ),
    #5dd068 !important;
  box-shadow:
    0 0 10px rgba(93,208,104,0.92),
    0 0 28px rgba(93,208,104,0.62),
    0 0 70px rgba(93,208,104,0.24) !important;
  mix-blend-mode: screen;
}

/* Retire the big overlay glow. Make the real UI borders glow like tubes/metal catching light. */
body.tw-system-wake .content::after {
  display: none !important;
}

body.tw-system-wake .frame {
  animation: tw-neon-border-wake 5.1s ease both;
}

body.tw-system-wake .audio-btn,
body.tw-system-wake #menu-btn {
  animation: tw-neon-control-wake 4.8s ease 0.22s both;
}

body.tw-system-wake .audio-viz {
  animation: tw-neon-control-wake 4.8s ease 0.30s both;
}

body.tw-system-wake .terminal.main {
  animation: tw-neon-terminal-wake 5.15s ease 0.62s both !important;
}

body.tw-system-wake .terminal.main .terminal-bar {
  animation: tw-neon-terminal-bar-wake 4.6s ease 0.72s both;
}

body.tw-system-wake .below-bar {
  animation: tw-neon-footer-wake 4.5s ease 1.18s both !important;
}

@keyframes tw-neon-border-wake {
  0%   { border-color: var(--rule); box-shadow: none; filter: brightness(0.94); }
  10%  { border-color: rgba(93,208,104,0.78); box-shadow: 0 0 20px rgba(93,208,104,0.18), inset 0 0 14px rgba(93,208,104,0.06); }
  45%  { border-color: rgba(93,208,104,0.45); box-shadow: 0 0 26px rgba(93,208,104,0.12), inset 0 0 18px rgba(93,208,104,0.04); }
  100% { border-color: var(--rule); box-shadow: none; filter: brightness(1); }
}

@keyframes tw-neon-control-wake {
  0%   { border-color: var(--rule); box-shadow: none; color: var(--muted); }
  18%  { border-color: rgba(93,208,104,0.85); box-shadow: 0 0 22px rgba(93,208,104,0.22); color: var(--fg); }
  58%  { border-color: rgba(93,208,104,0.42); box-shadow: 0 0 18px rgba(93,208,104,0.12); }
  100% { border-color: var(--rule); box-shadow: none; color: var(--muted); }
}

@keyframes tw-neon-terminal-wake {
  0%   { border-color: var(--terminal-rule); box-shadow: none; filter: brightness(0.95); }
  16%  { border-color: rgba(93,208,104,0.82); box-shadow: 0 0 30px rgba(93,208,104,0.20), inset 0 0 20px rgba(93,208,104,0.055); filter: brightness(1.08); }
  54%  { border-color: rgba(93,208,104,0.40); box-shadow: 0 0 24px rgba(93,208,104,0.12), inset 0 0 16px rgba(93,208,104,0.035); }
  100% { border-color: var(--terminal-rule); box-shadow: none; filter: brightness(1); }
}

@keyframes tw-neon-terminal-bar-wake {
  0%   { border-bottom-color: #1a1a1a; box-shadow: none; }
  22%  { border-bottom-color: rgba(93,208,104,0.48); box-shadow: inset 0 -1px 0 rgba(93,208,104,0.25); }
  100% { border-bottom-color: #1a1a1a; box-shadow: none; }
}

@keyframes tw-neon-footer-wake {
  0%   { filter: brightness(0.92); text-shadow: none; }
  24%  { filter: brightness(1.16); text-shadow: 0 0 12px rgba(93,208,104,0.22); }
  100% { filter: brightness(1); text-shadow: none; }
}

/* Desktop menu returns to the original horizontal terminal drawer language. */
@media (min-width: 721px) {
  .terminal.side {
    width: 0 !important;
    max-height: var(--term-h) !important;
    clip-path: inset(0 100% 0 0) !important;
    opacity: 0;
    transform-origin: left center;
    transition:
      width 320ms cubic-bezier(0.16,0.86,0.24,1),
      clip-path 320ms cubic-bezier(0.16,0.86,0.24,1),
      opacity 140ms ease !important;
  }
  body.menu-open .terminal.side {
    width: var(--menu-w) !important;
    clip-path: inset(0 0 0 0) !important;
    opacity: 1;
  }
}

/* Mobile keeps the top-to-bottom menu reveal. */
@media (max-width: 720px) {
  .terminal.side {
    clip-path: inset(0 0 100% 0) !important;
    transform-origin: top center;
  }
  body.menu-open .terminal.side {
    clip-path: inset(0 0 0 0) !important;
  }
  body.tw-frame-scan::after {
    height: 9px !important;
  }
  .below-bar .social-sep {
    display: inline !important;
  }
}

/* Cohesive terminal grammar: remove triangle-bullet feeling and use ASCII prompts. */
.data-cell p::before,
.flowline p::before,
.principle-list p::before,
.terminal-form p::before,
.contact-grid em::before,
.stat-label::before,
.tile-list li::before {
  content: '>> ';
  color: var(--muted);
}

.tile-list li,
.data-cell p,
.flowline p,
.principle-list p,
.terminal-form p,
.contact-grid em,
.stat-label {
  position: relative;
}


/* ============================================================
   TW final animation + prompt-format pass
   ============================================================ */

/* Scanline: faster, thicker, cleaner green phosphor bar. */
body.tw-frame-scan::after {
  height: 18px !important;
  border-radius: 2px !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.12) 0 1px,
      rgba(93,208,104,0.98) 1px 16px,
      rgba(93,208,104,0.78) 16px 18px
    ),
    #5dd068 !important;
  box-shadow:
    0 0 16px rgba(93,208,104,0.98),
    0 0 42px rgba(93,208,104,0.58),
    0 0 86px rgba(93,208,104,0.22) !important;
  animation-duration: 0.82s !important;
  mix-blend-mode: screen;
}

@media (max-width: 720px) {
  body.tw-frame-scan::after { height: 16px !important; }
}

/* Wake glow: a shorter reflection that tracks downward, with light spilling
   softly onto the black field and catching the metal/tube borders. */
body.tw-system-wake .content::after {
  display: block !important;
  content: '';
  position: fixed;
  left: 18px;
  right: 18px;
  top: 20px;
  height: 78px;
  z-index: 35;
  pointer-events: none;
  opacity: 0;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(93,208,104,0) 0%,
    rgba(93,208,104,0.16) 34%,
    rgba(190,255,199,0.28) 50%,
    rgba(93,208,104,0.12) 66%,
    rgba(93,208,104,0) 100%
  );
  filter: blur(12px);
  mix-blend-mode: screen;
  animation: tw-tracking-neon-wake 4.8s cubic-bezier(0.16,0.76,0.18,1) both !important;
}

@keyframes tw-tracking-neon-wake {
  0%   { opacity: 0; transform: translateY(-120px); }
  8%   { opacity: 0.78; }
  44%  { opacity: 0.62; }
  78%  { opacity: 0.30; }
  100% { opacity: 0; transform: translateY(calc(100vh - 120px)); }
}

body.tw-system-wake .frame,
body.tw-system-wake .terminal.main,
body.tw-system-wake .audio-btn,
body.tw-system-wake #menu-btn,
body.tw-system-wake .audio-viz,
body.tw-system-wake .below-bar {
  animation-duration: 4.75s !important;
}

body.tw-system-wake .frame,
body.tw-system-wake .terminal.main {
  box-shadow:
    0 0 22px rgba(93,208,104,0.16),
    inset 0 0 18px rgba(93,208,104,0.035);
}

/* Terminal prompt grammar: every visible prompt marker should be white. */
.prompt,
.boot-term-prompt,
.section-jump,
.section-end,
.page-content,
.cascade-toggle .prompt,
.power-modal-line .prompt {
  color: var(--fg) !important;
}

/* Equalize cascade command spacing so the prompt reads like one terminal line. */
.cascade-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  white-space: normal;
}
.cascade-toggle .prompt { margin-right: 1ch; }
.cascade-toggle .cmd-name { margin-left: 1ch; }
.cascade-toggle .toggle-mark { margin-left: 1ch; }

/* Kill legacy pseudo-bullets that were adding extra >> spacing. */
.data-cell p::before,
.flowline p::before,
.principle-list p::before,
.terminal-form p::before,
.contact-grid em::before,
.stat-label::before,
.tile-list li::before {
  content: none !important;
}

@media (max-width: 720px) {
  body.tw-system-wake .content::after {
    left: 8px;
    right: 8px;
    top: 12px;
    height: 64px;
  }
}


/* ============================================================
   TW STRICT TERMINAL REGIME — cohesive copy/format pass
   Every terminal line uses white prompts, no icon bullets, no underlined end links.
   ============================================================ */
:root { --tw-prompt: #f4f3e8; }

.page-content,
.prompt,
.boot-term-prompt,
.section-jump,
.section-end,
.cascade-toggle .prompt,
.power-modal-line .prompt,
.data-cell p::before,
.flowline p::before,
.principle-list p::before,
.terminal-form p::before,
.contact-grid em::before,
.stat-label::before,
.tile-list li::before,
.check-columns div::before,
.case-row::before,
.team-name::before,
.team-role::before,
.label-line::before {
  color: var(--tw-prompt) !important;
}

section.page,
section.page * { text-align: left; }

section.page a,
section.page a:visited,
section.page a:hover,
section.page a:focus-visible,
.section-end,
.section-end:hover,
.section-end:focus-visible {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.section-end {
  display: inline-block !important;
  color: var(--tw-prompt) !important;
  left: 26px !important;
  text-transform: none !important;
  letter-spacing: 0.08em !important;
}
.section-end::before { content: '> '; color: var(--tw-prompt) !important; }

.data-cell p::before,
.flowline p::before,
.principle-list p::before,
.terminal-form p::before,
.contact-grid em::before,
.stat-label::before,
.tile-list li::before {
  content: '> ' !important;
  color: var(--tw-prompt) !important;
}

.check-columns div::before,
.case-row::before,
.team-name::before,
.team-role::before,
.label-line::before {
  content: '> ';
  color: var(--tw-prompt) !important;
}

.check-columns div,
.case-row,
.team-name,
.team-role,
.label-line,
.data-cell p,
.flowline p,
.principle-list p,
.terminal-form p,
.contact-grid em,
.stat-label,
.tile-list li { color: var(--fg) !important; }

ul.tile-list,
ul.tile-list li { list-style: none !important; margin-left: 0 !important; padding-left: 0 !important; }
.cta-link { color: var(--fg) !important; }

/* ============================================================
   TW INDEX PAGE REFINEMENT PASS — prompt rail, green links, team order
   ============================================================ */

/* A visual terminal prompt column. This makes every visual line — including
   wrapped lines and empty lines — read with a white > without double-typing
   prompt characters into the copy itself. */
.page-content.terminal-copy {
  position: relative;
  display: block;
  color: var(--fg) !important;
  line-height: 1.58;
  white-space: normal;
  word-break: normal;
  overflow: hidden;
  padding-left: 2.05ch;
  text-align: left !important;
}

.page-content.terminal-copy::before {
  content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";
  position: absolute;
  left: 0;
  top: 0;
  white-space: pre;
  line-height: inherit;
  color: var(--tw-prompt) !important;
  pointer-events: none;
}

.page-content.terminal-copy .line {
  display: block;
  min-height: 1.58em;
  white-space: pre-wrap;
  color: var(--fg) !important;
}

/* Links should read as live commands: green, no underline. */
section.page a,
section.page a:visited,
section.page a:hover,
section.page a:focus-visible,
.terminal a,
.terminal a:visited,
.below-bar a,
.below-bar a:visited {
  color: var(--accent) !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

section.page a:hover,
section.page a:focus-visible,
.terminal a:hover,
.terminal a:focus-visible,
.below-bar a:hover,
.below-bar a:focus-visible {
  color: var(--accent) !important;
  text-decoration: none !important;
  filter: drop-shadow(0 0 5px rgba(93,208,104,0.35));
}

/* Keep accents green but all body copy white. */
.page-content.terminal-copy .accent {
  color: var(--accent) !important;
}

.page-content.terminal-copy .dim,
.page-content.terminal-copy .muted,
#talk_to_us .muted {
  color: var(--fg) !important;
}

/* Work page toggles should sit at the same rhythm as text lines. */
#our_work .page-content.terminal-copy {
  margin-bottom: 0;
}

#our_work .work-cascade {
  margin: 0 !important;
  line-height: 1.58 !important;
}

#our_work .work-cascade .cascade-toggle {
  line-height: 1.58 !important;
  padding: 0 !important;
  margin: 0 !important;
}

#our_work .work-cascade + .work-cascade {
  margin-top: 0 !important;
}

/* Who-we-work-with and talk-to-us: remove divider-bar language and keep text left aligned. */
#who_we_work_with .dim,
#talk_to_us .section-rule {
  display: none !important;
}

#who_we_work_with,
#who_we_work_with *,
#talk_to_us,
#talk_to_us * {
  text-align: left !important;
}

/* Team captions: one terminal-style line, same size as normal copy. */
.team-card {
  text-align: left !important;
}

.team-caption {
  margin-top: 10px;
  font: inherit;
  font-size: inherit !important;
  line-height: 1.58;
  letter-spacing: 0;
  color: var(--fg) !important;
  text-align: left !important;
}

.team-caption::before {
  content: "> ";
  color: var(--tw-prompt) !important;
}

.team-name,
.team-role,
.team-name::before,
.team-role::before {
  display: none !important;
  content: none !important;
}

/* Final page CTA: green command, no underline. */
.section-end {
  color: var(--accent) !important;
  text-decoration: none !important;
  opacity: 0;
  text-transform: none !important;
}

.section-end::before {
  color: var(--tw-prompt) !important;
}

.section-end:hover,
.section-end:focus-visible {
  color: var(--accent) !important;
  text-decoration: none !important;
  filter: drop-shadow(0 0 6px rgba(93,208,104,0.4));
}

@media (max-width: 720px) {
  .page-content.terminal-copy {
    line-height: 1.52;
  }

  .page-content.terminal-copy .line {
    min-height: 1.52em;
  }

  .team-caption {
    line-height: 1.52;
  }

  #our_work .work-cascade,
  #our_work .work-cascade .cascade-toggle {
    line-height: 1.52 !important;
  }
}


/* ============================================================
   TW ABOUT PAGE REFINEMENT PASS — terminal copy + operator roster
   ============================================================ */
#hero .page-content.terminal-copy {
  margin-bottom: 0;
}

.about-signal {
  margin-top: 0;
  color: var(--fg) !important;
}

.about-signal pre {
  margin: 0;
  color: var(--fg) !important;
  line-height: 1.58;
  white-space: pre;
  overflow-x: auto;
}

#origin .origin-copy,
#team .team-bio-copy,
#philosophy .philosophy-copy,
#next-step .page-content.terminal-copy {
  max-width: 78ch;
}

#origin .split-block,
#origin .split-copy,
#origin .stat-stack,
#philosophy .principle-list {
  display: none !important;
}

#team .about-team-grid {
  margin: 4px 0 20px;
}

#team .team-card,
#team .team-card * {
  text-align: left !important;
}

#team .team-caption {
  font: inherit !important;
  font-size: inherit !important;
  line-height: 1.58 !important;
  color: var(--fg) !important;
  letter-spacing: 0 !important;
  margin-top: 10px;
}

#team .team-caption::before {
  content: "> ";
  color: var(--tw-prompt) !important;
}

#next-step .next-link,
#next-step .next-link a,
#next-step .cta-link,
#next-step .section-end {
  color: var(--accent) !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.section-end {
  color: var(--accent) !important;
}

@media (max-width: 720px) {
  .about-signal pre {
    line-height: 1.52;
    font-size: 11px;
  }

  #team .about-team-grid {
    margin-top: 2px;
    margin-bottom: 14px;
  }
}


/* ============================================================
   SITREP + HOMEPAGE REFINEMENT PASS
   ============================================================ */

/* Header/title links return to gray, with green hover only. */
.terminal-bar .title a.title-brand,
.terminal-bar .title a.title-page,
.terminal-bar .title a.title-brand:visited,
.terminal-bar .title a.title-page:visited {
  color: var(--muted) !important;
  text-decoration: none !important;
  filter: none !important;
}
.terminal-bar .title a.title-brand:hover,
.terminal-bar .title a.title-page:hover,
.terminal-bar .title a.title-brand:focus-visible,
.terminal-bar .title a.title-page:focus-visible {
  color: var(--accent) !important;
  text-decoration: none !important;
  filter: drop-shadow(0 0 5px rgba(93,208,104,0.35)) !important;
}

/* Footer contact/social links: white at rest, green on hover. */
.below-bar a,
.below-bar a:visited {
  color: var(--fg) !important;
  text-decoration: none !important;
  filter: none !important;
}
.below-bar a:hover,
.below-bar a:focus-visible {
  color: var(--accent) !important;
  text-decoration: none !important;
  filter: drop-shadow(0 0 5px rgba(93,208,104,0.35)) !important;
}

/* Homepage should not use tabbed copy indentation for now. */
body:not(.booting) #terminal-body .page-content.terminal-copy .line {
  padding-left: 0 !important;
  text-indent: 0 !important;
}

/* Team captions: smaller, cleaner, max two-line feel. */
#the_team .team-caption,
#team .team-caption {
  font-size: 11.5px !important;
  line-height: 1.34 !important;
  letter-spacing: 0.1px !important;
  max-width: 100% !important;
}
@media (max-width: 720px) {
  #the_team .team-caption,
  #team .team-caption {
    font-size: 10.25px !important;
    line-height: 1.3 !important;
  }
}

/* Dynamic end-of-page prompt: white at rest, green on hover. */
.section-end,
.section-end:visited {
  color: var(--fg) !important;
  text-decoration: none !important;
  filter: none !important;
}
.section-end::before {
  color: var(--tw-prompt) !important;
}
.section-end:hover,
.section-end:focus-visible {
  color: var(--accent) !important;
  text-decoration: none !important;
  filter: drop-shadow(0 0 6px rgba(93,208,104,0.4)) !important;
}

/* Sitrep triptych stays compact enough to share the hero page with copy. */
.sitrep-triptych {
  margin: 14px 0 6px !important;
  gap: 8px !important;
}
.sitrep-triptych .tile,
.single-tile .tile {
  padding: 11px 9px 10px !important;
}
.sitrep-triptych .tile-graphic,
.single-tile .tile-graphic {
  height: 26px !important;
  margin: 4px 0 8px !important;
}
.sitrep-triptych .tile-title,
.single-tile .tile-title {
  margin-bottom: 6px !important;
}
.sitrep-triptych .tile-list,
.single-tile .tile-list {
  line-height: 1.38 !important;
}
.single-tile {
  max-width: 230px;
  margin: 0 0 14px !important;
}
.single-tile .tile {
  flex: 0 0 100%;
}
.sitrep-copy {
  margin-top: 0 !important;
}

@media (max-width: 720px) {
  .sitrep-triptych {
    gap: 5px !important;
    margin: 10px 0 4px !important;
  }
  .sitrep-triptych .tile {
    padding: 9px 5px 8px !important;
  }
  .sitrep-triptych .tile-graphic {
    height: 22px !important;
    font-size: 13px !important;
  }
  .sitrep-triptych .tile-title {
    font-size: 8px !important;
    letter-spacing: 1px !important;
  }
  .sitrep-triptych .tile-list {
    font-size: 8px !important;
    line-height: 1.3 !important;
  }
  .single-tile {
    max-width: 210px;
  }
}


/* Button-based internal navigation repair.
   These replace broken internal anchors while keeping the exact terminal look. */
button.tw-page-link {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none !important;
}

section.page button.tw-page-link:not(.menu-item),
.next-link button.tw-page-link,
button.cta-link.tw-page-link {
  display: inline;
  padding: 0;
  margin: 0;
  color: var(--accent) !important;
  text-decoration: none !important;
}

section.page button.tw-page-link:not(.menu-item):hover,
section.page button.tw-page-link:not(.menu-item):focus-visible,
.next-link button.tw-page-link:hover,
.next-link button.tw-page-link:focus-visible,
button.cta-link.tw-page-link:hover,
button.cta-link.tw-page-link:focus-visible {
  color: var(--fg) !important;
  outline: none;
  filter: drop-shadow(0 0 5px rgba(93,208,104,0.35));
}

#side-menu button.menu-item.tw-page-link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: calc(100% + 12px);
  padding: 5px 10px;
  margin: 0 -6px;
  color: inherit;
}

#side-menu button.menu-item.tw-page-link:hover,
#side-menu button.menu-item.tw-page-link:focus-visible {
  background: transparent;
  outline: none;
}

#side-menu button.menu-item.tw-page-link .num,
#side-menu button.menu-item.tw-page-link .name {
  pointer-events: none;
}


/* ============================================================
   TW BIG CONTENT PASS — section-specific refinements
   ============================================================ */

/* Homepage who-we-work-with: white at rest, green on hover, no tabbed indentation. */
#who_we_work_with .page-content.terminal-copy .accent,
#who_we_work_with .page-content.terminal-copy a,
#who_we_work_with .page-content.terminal-copy a:visited {
  color: var(--fg) !important;
  text-decoration: none !important;
  filter: none !important;
}
#who_we_work_with .page-content.terminal-copy a:hover,
#who_we_work_with .page-content.terminal-copy a:focus-visible {
  color: var(--accent) !important;
  filter: drop-shadow(0 0 5px rgba(93,208,104,0.35)) !important;
}

/* Flashing and footer next-page prompts: white at rest, green on hover across pages. */
.next-link,
.next-link button.tw-page-link,
section.page .next-link button.tw-page-link,
.section-end,
.section-end:visited {
  color: var(--fg) !important;
  text-decoration: none !important;
  filter: none !important;
}
.next-link button.tw-page-link:hover,
.next-link button.tw-page-link:focus-visible,
section.page .next-link button.tw-page-link:hover,
section.page .next-link button.tw-page-link:focus-visible,
.section-end:hover,
.section-end:focus-visible {
  color: var(--accent) !important;
  text-decoration: none !important;
  filter: drop-shadow(0 0 6px rgba(93,208,104,0.4)) !important;
}

/* About 02D: make the in-copy sitrep command green; leave the flashing prompt white. */
#next-step .page-content.terminal-copy button.cta-link.tw-page-link {
  color: var(--accent) !important;
}
#next-step .page-content.terminal-copy button.cta-link.tw-page-link:hover,
#next-step .page-content.terminal-copy button.cta-link.tw-page-link:focus-visible {
  color: var(--fg) !important;
}

/* Sitrep 03D company links are intentionally white, with green hover. */
#best-for a,
#best-for a:visited {
  color: var(--fg) !important;
  text-decoration: none !important;
  filter: none !important;
}
#best-for a:hover,
#best-for a:focus-visible {
  color: var(--accent) !important;
  filter: drop-shadow(0 0 5px rgba(93,208,104,0.35)) !important;
}

/* Work page: keep selected-file cascades tight and allow the landing copy to use full width. */
#selected .selected-copy { margin-bottom: 0 !important; }
#selected .work-cascade {
  margin: 0 !important;
  line-height: 1.58 !important;
}
#selected .work-cascade .cascade-toggle {
  line-height: 1.58 !important;
  padding: 0 !important;
  margin: 0 !important;
}
#landing .wide-copy,
#landing .page-content.terminal-copy {
  max-width: none !important;
  width: 100% !important;
}
#what-we-make .make-copy .accent {
  color: var(--accent) !important;
}

/* Intel feed: terminal RSS style. */
.intel-cascade {
  margin: 4px 0 !important;
  line-height: 1.58;
}
.intel-cascade .cascade-toggle { display: inline-block; }
.intel-cascade .cmd-action { color: var(--fg); margin-right: 1ch; }
.intel-cascade .cmd-name { color: var(--accent) !important; }
.intel-cascade .cascade-content {
  margin: 6px 0 12px 2ch;
}
.rss-copy {
  max-width: 86ch;
}
.newsletter-card pre {
  color: var(--fg) !important;
}

/* Contact terminal widgets. */
.contact-cascade {
  margin: 6px 0 10px !important;
  line-height: 1.58;
}
.contact-cascade .cmd-action { color: var(--fg); margin-right: 1ch; }
.contact-cascade .cmd-name { color: var(--accent) !important; }
.embed-frame {
  width: 100%;
  max-width: 980px;
  margin: 10px 0 18px 2ch;
  border: 1px solid rgba(93,208,104,0.35);
  box-shadow: 0 0 22px rgba(93,208,104,0.12);
  background: rgba(0,0,0,0.35);
}
.embed-frame iframe {
  display: block;
  width: 100%;
  border: 0;
  background: #050705;
}
.calendly-frame iframe { min-height: 660px; }
.map-frame iframe { min-height: 390px; filter: grayscale(1) contrast(1.05) brightness(0.85); }

@media (max-width: 720px) {
  #selected .work-cascade,
  #selected .work-cascade .cascade-toggle,
  .intel-cascade,
  .contact-cascade {
    line-height: 1.52 !important;
  }
  .embed-frame {
    margin-left: 0;
    max-width: 100%;
  }
  .calendly-frame iframe { min-height: 620px; }
  .map-frame iframe { min-height: 330px; }
}

/* Contact page should not show an automatic next-page/home prompt. */
#loop > .section-end {
  display: none !important;
}


/* ============================================================
   TW MICRO PASS — requested 2026-05-17
   ============================================================ */

/* Homepage 04: subsection labels are green again; company links stay white with green hover. */
#who_we_work_with .page-content.terminal-copy .accent {
  color: var(--accent) !important;
}
#who_we_work_with .page-content.terminal-copy a,
#who_we_work_with .page-content.terminal-copy a:visited {
  color: var(--fg) !important;
  text-decoration: none !important;
  filter: none !important;
}
#who_we_work_with .page-content.terminal-copy a:hover,
#who_we_work_with .page-content.terminal-copy a:focus-visible {
  color: var(--accent) !important;
  filter: drop-shadow(0 0 5px rgba(93,208,104,0.35)) !important;
}

/* About 02C: keep every philosophy line flush left. */
#philosophy .page-content.terminal-copy .line,
#philosophy .philosophy-copy .line {
  padding-left: 0 !important;
  text-indent: 0 !important;
  margin-left: 0 !important;
}

/* Non-floating work handoff: green at rest, white on hover. */
#landing .work-intel-next,
#landing .work-intel-next button.tw-page-link,
section#landing .work-intel-next button.tw-page-link {
  color: var(--accent) !important;
  text-decoration: none !important;
  filter: none !important;
}
#landing .work-intel-next button.tw-page-link:hover,
#landing .work-intel-next button.tw-page-link:focus-visible,
section#landing .work-intel-next button.tw-page-link:hover,
section#landing .work-intel-next button.tw-page-link:focus-visible {
  color: var(--fg) !important;
  text-decoration: none !important;
  filter: drop-shadow(0 0 5px rgba(93,208,104,0.35)) !important;
}

/* Floating click-for-next prompts stay white at rest, green on hover on every page. */
.section-end,
.section-end:visited,
#next-step .section-end,
#loop .section-end {
  color: var(--fg) !important;
  text-decoration: none !important;
  filter: none !important;
}
.section-end:hover,
.section-end:focus-visible,
#next-step .section-end:hover,
#next-step .section-end:focus-visible,
#loop .section-end:hover,
#loop .section-end:focus-visible {
  color: var(--accent) !important;
  text-decoration: none !important;
  filter: drop-shadow(0 0 6px rgba(93,208,104,0.4)) !important;
}

/* Re-enable the floating home prompt on the contact page. */
#loop > .section-end {
  display: inline-block !important;
}

/* Footer contact/social row: left edge of terminal, normal spacing. */
.below-bar {
  justify-content: flex-start !important;
  gap: 0 !important;
  padding-inline: 8px !important;
  overflow: visible !important;
}
.below-bar .sep {
  margin: 0 7px !important;
}
@media (max-width: 720px) {
  .below-bar {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 0 !important;
    row-gap: 2px !important;
  }
  .below-bar .sep {
    margin: 0 5px !important;
  }
}

/* ============================================================
   TW FOOTER ALIGNMENT PASS — centered muted contact/social row
   ============================================================ */
.below-bar,
.boot-clone-below {
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  padding-inline: 8px !important;
  text-align: center !important;
  color: var(--muted) !important;
  overflow: visible !important;
}

.below-bar a,
.below-bar a:visited,
.boot-clone-below a,
.boot-clone-below a:visited,
.below-bar .sep,
.boot-clone-below .sep {
  color: var(--muted) !important;
  text-decoration: none !important;
  filter: none !important;
}

.below-bar a:hover,
.below-bar a:focus-visible,
.boot-clone-below a:hover,
.boot-clone-below a:focus-visible {
  color: var(--accent) !important;
  text-decoration: none !important;
  filter: drop-shadow(0 0 5px rgba(93,208,104,0.35)) !important;
}

.below-bar .sep,
.boot-clone-below .sep {
  margin: 0 7px !important;
}

@media (max-width: 720px) {
  .below-bar,
  .boot-clone-below {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    row-gap: 2px !important;
  }

  .below-bar .sep,
  .boot-clone-below .sep {
    margin: 0 5px !important;
  }
}


/* ============================================================
   TW responsive prompt + snap refinement pass — 2026-05-17
   ============================================================ */

/* Let terminal copy wrap naturally again; the prompt rail stays locked to the left. */
.page-content.terminal-copy {
  overflow: visible !important;
  padding-left: 2.05ch !important;
  line-height: 1.58 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
.page-content.terminal-copy::before {
  left: 0 !important;
  top: 0 !important;
  line-height: inherit !important;
  font-size: inherit !important;
  color: var(--tw-prompt) !important;
}
.page-content.terminal-copy .line {
  display: block !important;
  min-height: 1.58em !important;
  line-height: inherit !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}
.page-content.terminal-copy a,
.page-content.terminal-copy button,
.page-content.terminal-copy .cta-link {
  font: inherit !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
}

/* Homepage hero animation: keep typed lines readable and avoid random mid-word mobile breaks. */
#intro-pre,
#intro-post {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Homepage 06 live links: green at rest, white on hover. */
#talk_to_us a,
#talk_to_us a:visited,
#talk_to_us .cta-link,
#talk_to_us .cta-link:visited {
  color: var(--accent) !important;
  text-decoration: none !important;
  filter: none !important;
}
#talk_to_us a:hover,
#talk_to_us a:focus-visible,
#talk_to_us .cta-link:hover,
#talk_to_us .cta-link:focus-visible {
  color: var(--fg) !important;
  text-decoration: none !important;
  filter: drop-shadow(0 0 5px rgba(93,208,104,0.35)) !important;
}

/* Sitrep 03A / 03B / 03C single tiles should read as square panels. */
#ingest .single-tile,
#process .single-tile,
#output .single-tile {
  width: min(230px, 52vw) !important;
  max-width: 230px !important;
}
#ingest .single-tile .tile,
#process .single-tile .tile,
#output .single-tile .tile {
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Intel feed spacing and article read-more links. */
#feed .intel-cascade {
  margin: 0 0 0.7em 0 !important;
  line-height: 1.58 !important;
}
#feed .intel-cascade .cascade-toggle {
  line-height: 1.58 !important;
  padding: 0 !important;
}
#feed .intel-cascade .cascade-content {
  margin: 0.45em 0 0.85em 0 !important;
}
#feed .rss-copy {
  margin: 0 !important;
  max-width: 92ch !important;
}
#feed .rss-copy a,
#feed .rss-copy a:visited {
  color: var(--accent) !important;
}
#feed .rss-copy a:hover,
#feed .rss-copy a:focus-visible {
  color: var(--fg) !important;
}

/* Contact widgets: default-expanded cascades should actually be roomy and readable. */
.contact-cascade[data-expanded="true"] .cascade-content {
  max-height: none !important;
  opacity: 1 !important;
  margin: 0.7em 0 1.1em 0 !important;
}
.map-cascade .embed-frame,
.calendly-cascade .embed-frame {
  margin-left: 0 !important;
}
.map-cascade .map-frame iframe { min-height: 360px !important; }
.calendly-cascade .calendly-frame iframe { min-height: 660px !important; }

/* Slightly bigger mobile down arrows across all sections. */
@media (max-width: 720px) {
  .section-jump {
    font-size: 14px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
  .section-end {
    font-size: 9.8px !important;
  }
  .page-content.terminal-copy {
    line-height: 1.54 !important;
    padding-left: 2.05ch !important;
  }
  .page-content.terminal-copy .line {
    min-height: 1.54em !important;
  }
  #intro-pre,
  #intro-post {
    font-size: clamp(11px, 3.1vw, 12.4px) !important;
    line-height: 1.55 !important;
  }
  #ingest .single-tile,
  #process .single-tile,
  #output .single-tile {
    width: min(210px, 58vw) !important;
    max-width: 210px !important;
  }
  .map-cascade .map-frame iframe { min-height: 315px !important; }
  .calendly-cascade .calendly-frame iframe { min-height: 620px !important; }
}

/* Phone landscape pass: push the terminal closer to the edges and reduce vertical chrome. */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 960px) {
  :root {
    --term-w: calc(100vw - 16px) !important;
    --term-h: calc(100dvh - 62px) !important;
    --menu-w: min(360px, calc(100vw - 24px)) !important;
  }
  .frame,
  .desktop {
    inset: 4px !important;
  }
  .content {
    padding: 22px 8px 18px !important;
  }
  .stage-wrap,
  .topbar,
  .stage,
  .terminal.main,
  .below-bar {
    width: var(--term-w) !important;
  }
  .terminal-bar {
    min-height: 30px !important;
    padding: 7px 11px !important;
  }
  .terminal-body {
    font-size: clamp(10px, 1.8vw, 11.4px) !important;
    line-height: 1.45 !important;
  }
  section.page {
    padding: 12px 18px 42px !important;
    min-height: 100% !important;
  }
  .section-header {
    margin-bottom: 8px !important;
    font-size: 10px !important;
  }
  .below-bar {
    display: flex !important;
    font-size: 7.8px !important;
    line-height: 1.2 !important;
  }
  .triptych,
  .team-grid {
    margin: 8px 0 !important;
  }
}


/* ============================================================
   TW prompt rail + snap corrective pass
   Fixes the runaway prompt column and restores clean section snap.
   ============================================================ */
.page-content.terminal-copy {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  padding-left: 2.05ch !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  line-height: 1.58 !important;
  text-align: left !important;
}

.page-content.terminal-copy::before {
  content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  display: block !important;
  width: 1ch !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  white-space: pre !important;
  line-height: inherit !important;
  font: inherit !important;
  color: var(--tw-prompt) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.page-content.terminal-copy .line {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  min-height: 1.58em !important;
  line-height: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Keep terminal sections predictable: CSS handles snap alignment; JS below handles one-gesture moves. */
.terminal-body {
  scroll-snap-type: y mandatory !important;
  scroll-padding-top: 0 !important;
  overscroll-behavior-y: contain !important;
}
section.page {
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

@media (max-width: 720px) {
  .page-content.terminal-copy {
    line-height: 1.54 !important;
    padding-left: 2.05ch !important;
  }
  .page-content.terminal-copy .line {
    min-height: 1.54em !important;
  }
}


/* ============================================================
   TW micro-polish pass — tighter content + safer snap feel
   ============================================================ */

/* Sitrep 03A/03B/03C tiles: keep 1:1, but reduce to the triptych feel. */
#ingest .single-tile,
#process .single-tile,
#output .single-tile {
  width: min(168px, 42vw) !important;
  max-width: 168px !important;
  margin: 0 0 10px !important;
}
#ingest .single-tile .tile,
#process .single-tile .tile,
#output .single-tile .tile {
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  padding: 9px 7px 8px !important;
}
#ingest .single-tile .tile-graphic,
#process .single-tile .tile-graphic,
#output .single-tile .tile-graphic {
  height: 22px !important;
  font-size: 13px !important;
  margin: 3px 0 6px !important;
}
#ingest .single-tile .tile-title,
#process .single-tile .tile-title,
#output .single-tile .tile-title {
  font-size: 8.5px !important;
  letter-spacing: 1.2px !important;
  margin-bottom: 5px !important;
}
#ingest .single-tile .tile-list,
#process .single-tile .tile-list,
#output .single-tile .tile-list {
  font-size: 8.5px !important;
  line-height: 1.25 !important;
}

/* Intel feed: article rows should breathe like normal terminal lines, not cards. */
#feed .intel-cascade {
  margin: 0 0 0.18em 0 !important;
  line-height: 1.5 !important;
}
#feed .intel-cascade .cascade-toggle {
  line-height: 1.5 !important;
  padding: 0 !important;
}
#feed .intel-cascade[data-expanded="true"] .cascade-content,
#feed .intel-cascade .cascade-content {
  margin: 0.12em 0 0.28em 0 !important;
  line-height: 1.5 !important;
}
#feed .rss-copy {
  margin: 0 !important;
  line-height: 1.5 !important;
}
#feed .rss-copy .line {
  min-height: 1.5em !important;
  line-height: 1.5 !important;
}
#feed .read-more-copy {
  margin-top: 0.35em !important;
}

/* Intel 05C next prompt: white at rest, green on hover. */
#next-step .next-link {
  color: var(--fg) !important;
}
#next-step .next-link button.tw-page-link {
  color: var(--fg) !important;
}
#next-step .next-link button.tw-page-link:hover,
#next-step .next-link button.tw-page-link:focus-visible {
  color: var(--accent) !important;
}

/* Contact widgets: smaller embeds so section 06 / 06A fit inside the terminal better. */
.contact-cascade {
  margin: 0.25em 0 0.45em !important;
  font-size: 0.88em !important;
  line-height: 1.35 !important;
}
.contact-cascade[data-expanded="true"] .cascade-content {
  margin: 0.32em 0 0.55em !important;
  max-height: none !important;
}
.contact-cascade .cascade-toggle {
  line-height: 1.35 !important;
}
.map-cascade .embed-frame,
.calendly-cascade .embed-frame {
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  margin: 0.35em 0 0 !important;
  box-shadow: 0 0 14px rgba(93,208,104,0.10) !important;
}
.map-cascade .map-frame iframe {
  min-height: 180px !important;
  height: 180px !important;
}
.calendly-cascade .calendly-frame iframe {
  min-height: 360px !important;
  height: 360px !important;
}
#loop .page-content.terminal-copy button.cta-link.tw-page-link {
  color: var(--accent) !important;
}
#loop .page-content.terminal-copy button.cta-link.tw-page-link:hover,
#loop .page-content.terminal-copy button.cta-link.tw-page-link:focus-visible {
  color: var(--fg) !important;
}

@media (max-width: 720px) {
  #ingest .single-tile,
  #process .single-tile,
  #output .single-tile {
    width: min(142px, 45vw) !important;
    max-width: 142px !important;
  }
  #feed .intel-cascade,
  #feed .intel-cascade .cascade-toggle,
  #feed .rss-copy,
  #feed .rss-copy .line {
    line-height: 1.42 !important;
  }
  #feed .rss-copy .line {
    min-height: 1.42em !important;
  }
  .contact-cascade {
    font-size: 0.82em !important;
    line-height: 1.3 !important;
  }
  .map-cascade .embed-frame,
  .calendly-cascade .embed-frame {
    max-width: 100% !important;
  }
  .map-cascade .map-frame iframe {
    min-height: 150px !important;
    height: 150px !important;
  }
  .calendly-cascade .calendly-frame iframe {
    min-height: 300px !important;
    height: 300px !important;
  }
}


/* ============================================================
   TW final interaction/content polish pass
   ============================================================ */

/* Let JS own snapping so native CSS momentum never double-snaps. */
.terminal-body {
  scroll-snap-type: none !important;
  scroll-padding-top: 0 !important;
  overscroll-behavior-y: contain !important;
}
section.page {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

/* Show-film and show-intro toggles stay white on hover. */
.work-cascade .cascade-toggle,
.work-cascade .cascade-toggle:hover,
.work-cascade .cascade-toggle:focus-visible,
.work-cascade .cascade-toggle .cmd-action,
.work-cascade .cascade-toggle .cmd-name,
.intro-cascade .cascade-toggle,
.intro-cascade .cascade-toggle:hover,
.intro-cascade .cascade-toggle:focus-visible,
.intro-cascade .cascade-toggle .cmd-action,
.intro-cascade .cascade-toggle .cmd-name {
  color: var(--fg) !important;
}
.work-cascade .cascade-toggle .toggle-mark,
.intro-cascade .cascade-toggle .toggle-mark {
  color: var(--muted) !important;
}

/* Sitrep 03A/03B/03C: one tile should match a single tile from the 03 triptych. */
#ingest .single-tile,
#process .single-tile,
#output .single-tile {
  display: flex !important;
  gap: 8px !important;
  width: calc((100% - 16px) / 3) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 10px 0 12px !important;
}
#ingest .single-tile .tile,
#process .single-tile .tile,
#output .single-tile .tile {
  flex: 1 1 auto !important;
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  padding: 11px 9px 10px !important;
}
#ingest .single-tile .tile-graphic,
#process .single-tile .tile-graphic,
#output .single-tile .tile-graphic {
  height: 26px !important;
  font-size: 16px !important;
  gap: 6px !important;
  margin: 4px 0 8px !important;
}
#ingest .single-tile .tile-title,
#process .single-tile .tile-title,
#output .single-tile .tile-title {
  font-size: 10px !important;
  letter-spacing: 2.5px !important;
  margin-bottom: 6px !important;
}
#ingest .single-tile .tile-list,
#process .single-tile .tile-list,
#output .single-tile .tile-list {
  font-size: 10px !important;
  line-height: 1.38 !important;
}

/* Intel feed: one-open-at-a-time articles with terminal-line spacing. */
#feed .intel-cascade {
  margin: 0 !important;
  line-height: 1.5 !important;
}
#feed .intel-cascade + .intel-cascade {
  margin-top: 0.12em !important;
}
#feed .intel-cascade .cascade-toggle {
  display: block !important;
  line-height: 1.5 !important;
  min-height: 1.5em !important;
  padding: 0 !important;
}
#feed .intel-cascade[data-expanded="true"] .cascade-content,
#feed .intel-cascade .cascade-content {
  margin: 0.08em 0 0.2em 0 !important;
  line-height: 1.5 !important;
}
#feed .rss-copy {
  margin: 0 !important;
  line-height: 1.5 !important;
}
#feed .rss-copy .line {
  min-height: 1.5em !important;
  line-height: 1.5 !important;
}
#feed .read-more-copy {
  margin-top: 0.12em !important;
}

/* Contact cascade triggers should match body terminal size on mobile too. */
.contact-cascade,
.contact-cascade .cascade-toggle {
  font-size: 1em !important;
  line-height: inherit !important;
}

/* Phone landscape: wider terminal, consistent type, overlay menu so it always appears. */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 980px) {
  :root {
    --term-w: calc(100vw - 12px) !important;
    --term-h: calc(100dvh - 48px) !important;
    --menu-w: min(330px, calc(100vw - 28px)) !important;
  }
  .frame,
  .desktop { inset: 3px !important; }
  .content { padding: 18px 6px 12px !important; align-items: center !important; }
  .stage-wrap,
  .topbar,
  .stage,
  .terminal.main,
  .below-bar { width: var(--term-w) !important; max-width: var(--term-w) !important; }
  .stage { position: relative !important; gap: 0 !important; }
  .terminal-bar { min-height: 28px !important; padding: 6px 10px !important; }
  .terminal-body,
  .page-content.terminal-copy,
  .page-content.terminal-copy .line,
  .cascade-toggle,
  .next-link,
  .section-header {
    font-size: 10.5px !important;
    line-height: 1.42 !important;
  }
  .page-content.terminal-copy { padding-left: 2ch !important; }
  .page-content.terminal-copy .line { min-height: 1.42em !important; }
  section.page { padding: 10px 16px 34px !important; min-height: 100% !important; }
  .section-header { margin-bottom: 7px !important; }
  .below-bar { justify-content: center !important; gap: 7px !important; font-size: 8px !important; line-height: 1.2 !important; }
  body.menu-open .topbar { width: var(--term-w) !important; }
  .terminal.side {
    position: absolute !important;
    top: 34px !important;
    right: 8px !important;
    width: var(--menu-w) !important;
    height: auto !important;
    max-height: 0 !important;
    z-index: 50 !important;
    visibility: hidden !important;
    clip-path: inset(0 0 100% 0) !important;
    opacity: 0 !important;
  }
  body.menu-open .terminal.side {
    width: var(--menu-w) !important;
    max-height: calc(100dvh - 58px) !important;
    clip-path: inset(0 0 0 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.menu-open .terminal.side .terminal-body {
    max-height: calc(100dvh - 92px) !important;
    overflow-y: auto !important;
    padding: 12px !important;
  }
  .menu-list { gap: 0 !important; }
  .menu-item { font-size: 10.5px !important; line-height: 1.45 !important; padding: 6px 0 !important; }
  .triptych { gap: 5px !important; margin: 8px 0 !important; }
  .tile { padding: 8px 5px 7px !important; }
  .tile-graphic { height: 20px !important; font-size: 12px !important; margin: 3px 0 5px !important; }
  .tile-title { font-size: 7.8px !important; letter-spacing: 1px !important; margin-bottom: 4px !important; }
  .tile-list { font-size: 7.8px !important; line-height: 1.2 !important; }
}

@media (max-width: 720px) {
  #ingest .single-tile,
  #process .single-tile,
  #output .single-tile {
    width: calc((100% - 10px) / 3) !important;
    max-width: none !important;
    margin: 8px 0 10px !important;
  }
  #ingest .single-tile .tile,
  #process .single-tile .tile,
  #output .single-tile .tile {
    padding: 9px 5px 8px !important;
  }
  #ingest .single-tile .tile-graphic,
  #process .single-tile .tile-graphic,
  #output .single-tile .tile-graphic {
    height: 22px !important;
    font-size: 13px !important;
    margin: 4px 0 7px !important;
  }
  #ingest .single-tile .tile-title,
  #process .single-tile .tile-title,
  #output .single-tile .tile-title {
    font-size: 8px !important;
    letter-spacing: 1px !important;
  }
  #ingest .single-tile .tile-list,
  #process .single-tile .tile-list,
  #output .single-tile .tile-list {
    font-size: 8px !important;
    line-height: 1.3 !important;
  }
  .contact-cascade,
  .contact-cascade .cascade-toggle {
    font-size: 1em !important;
    line-height: inherit !important;
  }
}

/* ============================================
   TW LOGO GLYPH SYSTEM — inline symbol, .elf easter egg, top HUD mark
   ============================================ */
.tw-logo-glyph {
  --tw-glyph-url: url('assets/img/tw-glyph-mask.png');
  display: inline-block;
  width: 1.35em;
  height: 0.96em;
  color: currentColor;
  background: currentColor;
  -webkit-mask: var(--tw-glyph-url) center / contain no-repeat;
  mask: var(--tw-glyph-url) center / contain no-repeat;
  vertical-align: -0.12em;
  flex: 0 0 auto;
}

.tw-logo-glyph--inline,
.tw-logo-glyph--welcome,
.tw-logo-glyph--bootline {
  width: 1.5em;
  height: 1.08em;
  margin-left: 0.16em;
  color: var(--fg);
  filter: drop-shadow(0 0 3px rgba(93, 208, 104, 0.5));
}

.tw-logo-glyph--welcome {
  color: var(--accent);
  animation: twGlyphBlinkIn 900ms steps(2, end) 1, twGlyphNeon 3.6s ease-in-out infinite 900ms;
}

.tw-logo-glyph--inline {
  color: var(--fg);
  animation: twGlyphNeon 4.2s ease-in-out infinite;
}

.tw-logo-glyph--bootline {
  color: var(--accent);
  filter: drop-shadow(0 0 4px rgba(93, 208, 104, 0.75));
}

.tw-logo-orb {
  width: 36px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  border: 1px solid var(--rule);
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 45%, rgba(93, 208, 104, 0.16), rgba(93, 208, 104, 0.04) 48%, rgba(0,0,0,0) 70%),
    rgba(0, 0, 0, 0.18);
  box-shadow:
    inset 0 0 8px rgba(93, 208, 104, 0.08),
    0 0 10px rgba(93, 208, 104, 0.08);
  position: relative;
  overflow: hidden;
  pointer-events: none;
}

.tw-logo-orb::before {
  content: '';
  position: absolute;
  inset: -35% -55%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.2) 50%, transparent 63%);
  transform: translateX(-55%) rotate(4deg);
  animation: twGlyphSweep 5.8s ease-in-out infinite;
  opacity: 0.65;
}

.tw-logo-orb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,0.35) 2px 3px);
  pointer-events: none;
  mix-blend-mode: multiply;
}

.tw-logo-glyph--orb {
  width: 25px;
  height: 18px;
  color: var(--accent);
  animation: twGlyphHoloRotate 9s linear infinite, twGlyphNeon 3.4s ease-in-out infinite;
  transform-origin: 50% 55%;
  filter: drop-shadow(0 0 3px rgba(93, 208, 104, 0.7));
  position: relative;
  z-index: 1;
}

.icon-glyph--logo {
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  color: var(--accent) !important;
  box-shadow:
    inset 0 0 10px rgba(93, 208, 104, 0.18),
    0 0 18px rgba(93, 208, 104, 0.18);
}

.icon-glyph--logo::before {
  top: 50% !important;
  left: 8px !important;
  right: 8px !important;
  height: 1px !important;
  opacity: 0.22 !important;
  transform: translateY(-50%);
}

.tw-logo-glyph--elf {
  width: 38px;
  height: 27px;
  color: var(--accent);
  filter: drop-shadow(0 0 5px rgba(93, 208, 104, 0.8));
  animation: twElfIdle 2.8s ease-in-out infinite;
}

.desktop-icon.clicked .tw-logo-glyph--elf,
.desktop-icon.imploding .tw-logo-glyph--elf {
  animation: twElfIgnite 520ms ease-out 1 forwards;
}

.topbar-right {
  gap: 8px !important;
}

.topbar-right .audio-viz {
  order: 0;
}
.topbar-right .audio-btn {
  order: 1;
}
.topbar-right #menu-btn {
  order: 2;
}

@keyframes twGlyphBlinkIn {
  0%, 28%, 52% { opacity: 0; }
  14%, 40%, 100% { opacity: 1; }
}

@keyframes twGlyphNeon {
  0%, 100% { opacity: 0.92; filter: drop-shadow(0 0 2px rgba(93, 208, 104, 0.55)); }
  50% { opacity: 1; filter: drop-shadow(0 0 6px rgba(93, 208, 104, 0.9)); }
}

@keyframes twGlyphSweep {
  0%, 64% { transform: translateX(-65%) rotate(4deg); opacity: 0; }
  73% { opacity: 0.75; }
  88%, 100% { transform: translateX(65%) rotate(4deg); opacity: 0; }
}

@keyframes twGlyphHoloRotate {
  0% { transform: rotateY(0deg) rotateZ(0deg); }
  48% { transform: rotateY(0deg) rotateZ(0deg); }
  52% { transform: rotateY(180deg) rotateZ(1deg); }
  56%, 100% { transform: rotateY(360deg) rotateZ(0deg); }
}

@keyframes twElfIdle {
  0%, 100% { opacity: 0.88; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-1px) scale(1.03); }
}

@keyframes twElfIgnite {
  0% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(93,208,104,0.75)); }
  55% { transform: scale(1.18); filter: drop-shadow(0 0 14px rgba(93,208,104,1)); }
  100% { transform: scale(0.94); filter: drop-shadow(0 0 8px rgba(93,208,104,0.85)); }
}

@media (max-width: 720px) {
  .tw-logo-orb {
    width: 32px;
    height: 26px;
  }
  .tw-logo-glyph--orb {
    width: 22px;
    height: 16px;
  }
  .topbar-right {
    gap: 6px !important;
  }
  .topbar-right .audio-viz {
    max-width: 62px !important;
  }
}

@media (max-width: 420px) {
  .topbar-right .audio-viz {
    max-width: 48px !important;
    padding-inline: 3px !important;
  }
  .topbar-right .viz-bar {
    width: 1px !important;
  }
  .btn,
  .audio-btn {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}

/* ============================================================
   TW logo micro-pass: welcome glyph, HUD glow, cascade label color
   ============================================================ */

/* Welcome/click-to-start inline logo: white, slightly lower, soft white glow. */
.tw-logo-glyph--welcome {
  color: var(--fg) !important;
  width: 1.46em !important;
  height: 0.98em !important;
  margin-left: 0.16em !important;
  vertical-align: -0.24em !important;
  -webkit-mask-position: center bottom !important;
  mask-position: center bottom !important;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,0.75))
    drop-shadow(0 0 6px rgba(255,255,255,0.22)) !important;
  animation: twGlyphBlinkIn 900ms steps(2, end) 1, twGlyphWhitePulse 4.8s ease-in-out infinite 900ms !important;
}

/* HUD logo: slower rotation with a constant faint hologram pulse. */
.tw-logo-orb {
  animation: twLogoOrbPulse 5.8s ease-in-out infinite !important;
}

.tw-logo-glyph--orb {
  animation: twGlyphHoloRotateSlow 22s linear infinite, twGlyphNeonSoft 5.8s ease-in-out infinite !important;
  filter: drop-shadow(0 0 3px rgba(93,208,104,0.55)) !important;
}

@keyframes twGlyphWhitePulse {
  0%, 100% {
    opacity: 0.92;
    filter:
      drop-shadow(0 0 2px rgba(255,255,255,0.7))
      drop-shadow(0 0 5px rgba(255,255,255,0.18));
  }
  50% {
    opacity: 1;
    filter:
      drop-shadow(0 0 3px rgba(255,255,255,0.95))
      drop-shadow(0 0 9px rgba(255,255,255,0.32));
  }
}

@keyframes twLogoOrbPulse {
  0%, 100% {
    box-shadow:
      inset 0 0 8px rgba(93,208,104,0.08),
      0 0 8px rgba(93,208,104,0.08),
      0 0 16px rgba(93,208,104,0.04);
  }
  50% {
    box-shadow:
      inset 0 0 10px rgba(93,208,104,0.13),
      0 0 14px rgba(93,208,104,0.16),
      0 0 28px rgba(93,208,104,0.08);
  }
}

@keyframes twGlyphNeonSoft {
  0%, 100% {
    opacity: 0.9;
    filter: drop-shadow(0 0 2px rgba(93,208,104,0.48));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(93,208,104,0.72));
  }
}

@keyframes twGlyphHoloRotateSlow {
  0% { transform: rotateY(0deg) rotateZ(0deg); }
  72% { transform: rotateY(0deg) rotateZ(0deg); }
  80% { transform: rotateY(180deg) rotateZ(1deg); }
  88%, 100% { transform: rotateY(360deg) rotateZ(0deg); }
}

/* Show/film command grammar:
   keep the word "show" white; make intro_video + film_0x green, white on hover. */
.work-cascade .cascade-toggle,
.intro-cascade .cascade-toggle {
  color: var(--fg) !important;
}

.work-cascade .cascade-toggle .cmd-action,
.intro-cascade .cascade-toggle .cmd-action,
.work-cascade .cascade-toggle:hover .cmd-action,
.work-cascade .cascade-toggle:focus-visible .cmd-action,
.intro-cascade .cascade-toggle:hover .cmd-action,
.intro-cascade .cascade-toggle:focus-visible .cmd-action {
  color: var(--fg) !important;
}

.work-cascade .cascade-toggle .cmd-name,
.intro-cascade .cascade-toggle .cmd-name {
  color: var(--accent) !important;
  transition: color 140ms ease, filter 140ms ease;
}

.work-cascade .cascade-toggle:hover .cmd-name,
.work-cascade .cascade-toggle:focus-visible .cmd-name,
.intro-cascade .cascade-toggle:hover .cmd-name,
.intro-cascade .cascade-toggle:focus-visible .cmd-name {
  color: var(--fg) !important;
  filter: drop-shadow(0 0 5px rgba(93,208,104,0.32));
}

/* ============================================================
   TW logo micro-pass v2: no flicker, tighter baseline, bigger HUD glow
   ============================================================ */

/* Welcome/click-to-start inline logo: stable white mark, closer to text, raised slightly. */
.tw-logo-glyph--welcome {
  color: var(--fg) !important;
  margin-left: 0.045em !important;
  vertical-align: -0.15em !important;
  opacity: 1 !important;
  animation: none !important;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,0.82))
    drop-shadow(0 0 6px rgba(255,255,255,0.24)) !important;
}

/* Make sure no parent/typing state can re-trigger the old blink/flicker. */
.typing-line .tw-logo-glyph--welcome,
.boot-line .tw-logo-glyph--welcome,
.click-start .tw-logo-glyph--welcome {
  animation: none !important;
  opacity: 1 !important;
}

/* Homepage HUD logo: larger, more visible slow green aura. */
.tw-logo-orb {
  animation: twLogoOrbPulseStronger 5.2s ease-in-out infinite !important;
  box-shadow:
    inset 0 0 12px rgba(93,208,104,0.15),
    0 0 16px rgba(93,208,104,0.18),
    0 0 34px rgba(93,208,104,0.11) !important;
}

.tw-logo-glyph--orb {
  filter:
    drop-shadow(0 0 5px rgba(93,208,104,0.8))
    drop-shadow(0 0 14px rgba(93,208,104,0.34)) !important;
  animation: twGlyphHoloRotateSlow 22s linear infinite, twGlyphNeonStronger 5.2s ease-in-out infinite !important;
}

@keyframes twLogoOrbPulseStronger {
  0%, 100% {
    box-shadow:
      inset 0 0 12px rgba(93,208,104,0.12),
      0 0 14px rgba(93,208,104,0.16),
      0 0 30px rgba(93,208,104,0.09),
      0 0 52px rgba(93,208,104,0.045);
  }
  50% {
    box-shadow:
      inset 0 0 16px rgba(93,208,104,0.2),
      0 0 22px rgba(93,208,104,0.26),
      0 0 46px rgba(93,208,104,0.16),
      0 0 76px rgba(93,208,104,0.075);
  }
}

@keyframes twGlyphNeonStronger {
  0%, 100% {
    opacity: 0.94;
    filter:
      drop-shadow(0 0 4px rgba(93,208,104,0.72))
      drop-shadow(0 0 10px rgba(93,208,104,0.28));
  }
  50% {
    opacity: 1;
    filter:
      drop-shadow(0 0 8px rgba(93,208,104,0.96))
      drop-shadow(0 0 22px rgba(93,208,104,0.44));
  }
}

/* ============================================================
   TW logo control + traffic-light minimize easter egg
   ============================================================ */

/* HUD logo is now an actual control: color drifts green <-> white. */
.tw-logo-orb.tw-home-restart,
button.tw-logo-orb {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid var(--rule) !important;
  padding: 0 !important;
  margin: 0 !important;
  font: inherit !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  color: var(--accent);
  background:
    radial-gradient(circle at 50% 45%, rgba(93, 208, 104, 0.18), rgba(93, 208, 104, 0.05) 48%, rgba(0,0,0,0) 70%),
    rgba(0, 0, 0, 0.18);
  animation: twLogoOrbColorDrift 8.5s ease-in-out infinite !important;
  transition: border-color 160ms ease, transform 180ms ease;
}

.tw-logo-orb.tw-home-restart:hover,
.tw-logo-orb.tw-home-restart:focus-visible {
  outline: none !important;
  border-color: currentColor !important;
  transform: translateY(-1px);
}

.tw-logo-orb.tw-home-restart:active {
  transform: translateY(0) scale(0.97);
}

.tw-logo-orb.tw-home-restart .tw-logo-glyph--orb,
button.tw-logo-orb .tw-logo-glyph--orb {
  color: currentColor !important;
  animation: twGlyphHoloRotateSlow 24s linear infinite, twLogoGlyphColorDrift 8.5s ease-in-out infinite !important;
}

/* Give the grouped equalizer/audio/menu controls a living glow too. */
.topbar-right {
  position: relative;
  isolation: isolate;
}

.topbar-right::before {
  content: '';
  position: absolute;
  inset: -7px -10px;
  border-radius: 8px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(93, 208, 104, 0.22), rgba(93, 208, 104, 0.08) 48%, rgba(0,0,0,0) 74%);
  filter: blur(11px);
  opacity: 0.62;
  animation: twControlGlowColorDrift 8.5s ease-in-out infinite;
}

.topbar-right > * {
  position: relative;
  z-index: 1;
}

@keyframes twLogoOrbColorDrift {
  0%, 100% {
    color: var(--accent);
    background:
      radial-gradient(circle at 50% 45%, rgba(93, 208, 104, 0.22), rgba(93, 208, 104, 0.06) 48%, rgba(0,0,0,0) 70%),
      rgba(0, 0, 0, 0.18);
    box-shadow:
      inset 0 0 15px rgba(93,208,104,0.18),
      0 0 18px rgba(93,208,104,0.22),
      0 0 38px rgba(93,208,104,0.14),
      0 0 72px rgba(93,208,104,0.07) !important;
  }
  46%, 58% {
    color: var(--fg);
    background:
      radial-gradient(circle at 50% 45%, rgba(255,255,255,0.24), rgba(255,255,255,0.07) 48%, rgba(0,0,0,0) 70%),
      rgba(0, 0, 0, 0.18);
    box-shadow:
      inset 0 0 15px rgba(255,255,255,0.16),
      0 0 18px rgba(255,255,255,0.2),
      0 0 38px rgba(255,255,255,0.12),
      0 0 72px rgba(255,255,255,0.055) !important;
  }
}

@keyframes twLogoGlyphColorDrift {
  0%, 100% {
    color: var(--accent);
    opacity: 0.96;
    filter:
      drop-shadow(0 0 5px rgba(93,208,104,0.86))
      drop-shadow(0 0 15px rgba(93,208,104,0.38));
  }
  46%, 58% {
    color: var(--fg);
    opacity: 1;
    filter:
      drop-shadow(0 0 5px rgba(255,255,255,0.8))
      drop-shadow(0 0 16px rgba(255,255,255,0.32));
  }
}

@keyframes twControlGlowColorDrift {
  0%, 100% {
    opacity: 0.68;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(93, 208, 104, 0.24), rgba(93, 208, 104, 0.08) 48%, rgba(0,0,0,0) 74%);
  }
  46%, 58% {
    opacity: 0.56;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.22), rgba(255,255,255,0.07) 48%, rgba(0,0,0,0) 74%);
  }
}

/* Green traffic-light easter egg: hover red, click to kinetic-minimize. */
.terminal.main,
.terminal.main .terminal-body,
.below-bar {
  transition:
    height 460ms cubic-bezier(.16, 1, .3, 1),
    max-height 460ms cubic-bezier(.16, 1, .3, 1),
    transform 460ms cubic-bezier(.16, 1, .3, 1),
    opacity 260ms ease,
    filter 360ms ease,
    box-shadow 460ms cubic-bezier(.16, 1, .3, 1);
}

.terminal.main .terminal-bar .dot.live {
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.terminal.main .terminal-bar .dot.live:hover,
.terminal.main .terminal-bar .dot.live:focus-visible,
body.tw-terminal-minimized .terminal.main .terminal-bar .dot.live {
  background: #ff5f56 !important;
  box-shadow: 0 0 5px rgba(255,95,86,0.75), 0 0 12px rgba(255,95,86,0.32) !important;
  transform: scale(1.12);
}

body.tw-terminal-minimized .terminal.main {
  height: 42px !important;
  max-height: 42px !important;
  transform: translateY(-2px) scaleX(0.988);
  box-shadow:
    0 0 18px rgba(255,95,86,0.08),
    0 0 34px rgba(93,208,104,0.05);
}

body.tw-terminal-minimized .terminal.main .terminal-body {
  opacity: 0;
  transform: translateY(-24px) scaleY(0.72);
  filter: blur(2px);
  pointer-events: none;
  overflow: hidden !important;
}

body.tw-terminal-minimized .below-bar {
  transform: translateY(-4px);
}

body.tw-terminal-minimized .section-jump,
body.tw-terminal-minimized .section-end {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 720px) {
  body.tw-terminal-minimized .terminal.main {
    height: 39px !important;
    max-height: 39px !important;
  }
  .topbar-right::before {
    inset: -5px -7px;
    filter: blur(9px);
  }
}

.topbar-right { z-index: 0; }


/* ============================================================
   TW minimize + scroll polish patch
   ============================================================ */

/* Normal state: green dot turns red on hover to hint close/minimize. */
body:not(.tw-terminal-minimized) .terminal.main .terminal-bar .dot.live {
  background: var(--accent) !important;
  box-shadow: 0 0 4px rgba(93,208,104,0.55) !important;
}
body:not(.tw-terminal-minimized) .terminal.main .terminal-bar .dot.live:hover,
body:not(.tw-terminal-minimized) .terminal.main .terminal-bar .dot.live:focus-visible {
  background: #ff5f56 !important;
  box-shadow: 0 0 5px rgba(255,95,86,0.75), 0 0 12px rgba(255,95,86,0.32) !important;
  transform: scale(1.12);
}

/* Minimized state: red at rest, green on hover to hint restore/open. */
body.tw-terminal-minimized .terminal.main .terminal-bar .dot.live {
  background: #ff5f56 !important;
  box-shadow: 0 0 5px rgba(255,95,86,0.74), 0 0 13px rgba(255,95,86,0.28) !important;
  transform: scale(1.05);
}
body.tw-terminal-minimized .terminal.main .terminal-bar .dot.live:hover,
body.tw-terminal-minimized .terminal.main .terminal-bar .dot.live:focus-visible {
  background: var(--accent) !important;
  box-shadow: 0 0 5px rgba(93,208,104,0.82), 0 0 14px rgba(93,208,104,0.36) !important;
  transform: scale(1.12);
}

/* Keep the terminal shell kinetic, but stop the body copy from doing the bouncy transform/fade. */
.terminal.main .terminal-body {
  transition: none !important;
  transform: none !important;
  filter: none !important;
}
body.tw-terminal-minimized .terminal.main .terminal-body {
  opacity: 0 !important;
  transform: none !important;
  filter: none !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Make the contact/social footer visibly ride upward with the minimized terminal. */
.below-bar {
  transition: transform 460ms cubic-bezier(.16, 1, .3, 1), opacity 220ms ease !important;
}
body.tw-terminal-minimized .below-bar {
  transform: translateY(-10px) !important;
}

@media (max-width: 720px) {
  body.tw-terminal-minimized .below-bar {
    transform: translateY(-7px) !important;
  }
}

/* ============================================================
   TW brandmark + minimize refinement pass — 2026-05-18
   Adds the wordmark to the HUD logo control, removes spin, and
   cleans up the minimize behavior without involving the footer.
   ============================================================ */

.tw-wordmark-glyph {
  --tw-wordmark-url: url('assets/img/tw-wordmark-mask.png');
  display: inline-block;
  width: 8.44em;
  height: 1em;
  color: currentColor;
  background: currentColor;
  -webkit-mask: var(--tw-wordmark-url) center / contain no-repeat;
  mask: var(--tw-wordmark-url) center / contain no-repeat;
  flex: 0 0 auto;
}

.tw-logo-orb.tw-brandmark,
button.tw-logo-orb.tw-brandmark {
  width: auto !important;
  min-width: 190px !important;
  height: 28px !important;
  padding: 0 10px !important;
  gap: 8px !important;
  justify-content: flex-start !important;
  align-items: center !important;
  overflow: hidden !important;
}

.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb {
  width: 25px !important;
  height: 18px !important;
  transform: none !important;
  transform-origin: center !important;
  animation: twLogoGlyphColorDrift 8.5s ease-in-out infinite !important;
}

.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb {
  width: 152px !important;
  height: 18px !important;
  color: currentColor !important;
  opacity: 0.96;
  animation: twLogoGlyphColorDrift 8.5s ease-in-out infinite !important;
  filter:
    drop-shadow(0 0 5px rgba(93,208,104,0.72))
    drop-shadow(0 0 15px rgba(93,208,104,0.32));
}

.tw-logo-orb.tw-brandmark:hover .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:focus-visible .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:hover .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-brandmark:focus-visible .tw-wordmark-glyph--orb {
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,0.78))
    drop-shadow(0 0 16px rgba(255,255,255,0.32)) !important;
}

/* The footer should no longer have its own kinetic minimize/restore movement. */
.below-bar {
  transition: color 160ms ease, opacity 160ms ease !important;
}
body.tw-terminal-minimized .below-bar {
  transform: none !important;
  opacity: 1 !important;
}

/* Mobile minimize should collapse from the terminal top instead of recentering the tiny window. */
@media (max-width: 720px) {
  body.tw-terminal-minimized .content {
    align-items: flex-start !important;
  }
  body.tw-terminal-minimized .stage-wrap {
    transform: none !important;
  }
  body.tw-terminal-minimized .terminal.main {
    height: 39px !important;
    max-height: 39px !important;
    transform: none !important;
  }
  body.tw-terminal-minimized .below-bar {
    transform: none !important;
  }

  .tw-logo-orb.tw-brandmark,
  button.tw-logo-orb.tw-brandmark {
    min-width: 150px !important;
    height: 26px !important;
    padding: 0 8px !important;
    gap: 6px !important;
  }
  .tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
  button.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb {
    width: 21px !important;
    height: 15px !important;
  }
  .tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
  button.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb {
    width: 116px !important;
    height: 15px !important;
  }
}

@media (max-width: 420px) {
  .tw-logo-orb.tw-brandmark,
  button.tw-logo-orb.tw-brandmark {
    min-width: 132px !important;
    padding: 0 7px !important;
    gap: 5px !important;
  }
  .tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
  button.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb {
    width: 19px !important;
    height: 14px !important;
  }
  .tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
  button.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb {
    width: 100px !important;
    height: 14px !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 980px) {
  .tw-logo-orb.tw-brandmark,
  button.tw-logo-orb.tw-brandmark {
    min-width: 146px !important;
    height: 25px !important;
  }
  .tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
  button.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb {
    width: 20px !important;
    height: 14px !important;
  }
  .tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
  button.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb {
    width: 112px !important;
    height: 14px !important;
  }
}

/* ============================================================
   Refinement pass — welcome glyph + clean brandmark HUD
   ============================================================ */

/* Opening welcome gate only: white wave glyph inline with the typed line. */
.welcome-line .tw-logo-glyph--welcome {
  color: var(--fg) !important;
  width: 1.34em !important;
  height: 0.96em !important;
  margin-left: 0.08em !important;
  vertical-align: -0.095em !important;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,0.58))
    drop-shadow(0 0 9px rgba(255,255,255,0.20)) !important;
  animation: none !important;
}

/* Remove the scanline/banding overlay from the logo + wordmark HUD control. */
.tw-logo-orb.tw-brandmark::after,
button.tw-logo-orb.tw-brandmark::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Keep the subtle hologram sweep/glow, but do not stripe the marks themselves. */
.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb {
  mix-blend-mode: normal !important;
}

/* Desktop only: make the wordmark smaller next to the wave mark. */
@media (min-width: 721px) {
  .tw-logo-orb.tw-brandmark,
  button.tw-logo-orb.tw-brandmark {
    min-width: 168px !important;
    gap: 7px !important;
  }

  .tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
  button.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb {
    width: 130px !important;
    height: 15.5px !important;
  }
}

/* ============================================================
   TW final logo HUD polish — no spin/sweep/banding; green <-> muted gray pulse only
   ============================================================ */

.tw-logo-orb.tw-brandmark,
button.tw-logo-orb.tw-brandmark {
  color: var(--accent) !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(93, 208, 104, 0.16), rgba(93, 208, 104, 0.045) 48%, rgba(0,0,0,0) 72%),
    rgba(0, 0, 0, 0.18) !important;
  animation: twBrandmarkMutedPulse 8.8s ease-in-out infinite !important;
  transition: border-color 160ms ease, transform 160ms ease !important;
}

/* No sweep, scanline, banding, rotation, shimmer, or stripe overlay on the HUD mark. */
.tw-logo-orb.tw-brandmark::before,
.tw-logo-orb.tw-brandmark::after,
button.tw-logo-orb.tw-brandmark::before,
button.tw-logo-orb.tw-brandmark::after {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
}

.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb {
  color: currentColor !important;
  background: currentColor !important;
  opacity: 0.96 !important;
  transform: none !important;
  mix-blend-mode: normal !important;
  animation: twBrandmarkGlyphMutedPulse 8.8s ease-in-out infinite !important;
  filter:
    drop-shadow(0 0 4px rgba(93,208,104,0.58))
    drop-shadow(0 0 13px rgba(93,208,104,0.24)) !important;
}

.tw-logo-orb.tw-brandmark:hover,
.tw-logo-orb.tw-brandmark:focus-visible,
button.tw-logo-orb.tw-brandmark:hover,
button.tw-logo-orb.tw-brandmark:focus-visible {
  border-color: currentColor !important;
  transform: translateY(-1px) !important;
}

.tw-logo-orb.tw-brandmark:hover .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:focus-visible .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:hover .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-brandmark:focus-visible .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark:hover .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark:focus-visible .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark:hover .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark:focus-visible .tw-wordmark-glyph--orb {
  filter:
    drop-shadow(0 0 4px rgba(93,208,104,0.58))
    drop-shadow(0 0 13px rgba(93,208,104,0.24)) !important;
}

/* Keep the control-table glow synced to green <-> muted gray, not white. */
.topbar-right::before {
  animation: twControlGlowMutedPulse 8.8s ease-in-out infinite !important;
}

@keyframes twBrandmarkMutedPulse {
  0%, 100% {
    color: var(--accent);
    background:
      radial-gradient(circle at 50% 45%, rgba(93, 208, 104, 0.17), rgba(93, 208, 104, 0.045) 48%, rgba(0,0,0,0) 72%),
      rgba(0, 0, 0, 0.18);
    box-shadow:
      inset 0 0 11px rgba(93,208,104,0.11),
      0 0 13px rgba(93,208,104,0.14),
      0 0 30px rgba(93,208,104,0.07) !important;
  }
  50% {
    color: var(--muted);
    background:
      radial-gradient(circle at 50% 45%, rgba(119,119,119,0.20), rgba(119,119,119,0.06) 48%, rgba(0,0,0,0) 72%),
      rgba(0, 0, 0, 0.18);
    box-shadow:
      inset 0 0 10px rgba(119,119,119,0.14),
      0 0 12px rgba(119,119,119,0.15),
      0 0 28px rgba(119,119,119,0.08) !important;
  }
}

@keyframes twBrandmarkGlyphMutedPulse {
  0%, 100% {
    color: var(--accent);
    opacity: 0.98;
    filter:
      drop-shadow(0 0 4px rgba(93,208,104,0.58))
      drop-shadow(0 0 13px rgba(93,208,104,0.24));
  }
  50% {
    color: var(--muted);
    opacity: 0.94;
    filter:
      drop-shadow(0 0 3px rgba(119,119,119,0.58))
      drop-shadow(0 0 12px rgba(119,119,119,0.25));
  }
}

@keyframes twControlGlowMutedPulse {
  0%, 100% {
    opacity: 0.58;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(93, 208, 104, 0.22), rgba(93, 208, 104, 0.075) 48%, rgba(0,0,0,0) 74%);
  }
  50% {
    opacity: 0.46;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(119,119,119,0.24), rgba(119,119,119,0.075) 48%, rgba(0,0,0,0) 74%);
  }
}

/* ============================================================
   TW final HUD brandmark + power reset animation
   ============================================================ */

/* Logo/wordmark now behave exactly like a system button: muted gray at rest,
   gray border, no glow/shimmer/pulse/spin, green only on hover/focus. */
.tw-logo-orb.tw-brandmark,
button.tw-logo-orb.tw-brandmark {
  color: var(--muted) !important;
  border: 1px solid var(--rule) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
  transform: none !important;
  transition: color 120ms ease, border-color 120ms ease !important;
}

.tw-logo-orb.tw-brandmark::before,
.tw-logo-orb.tw-brandmark::after,
button.tw-logo-orb.tw-brandmark::before,
button.tw-logo-orb.tw-brandmark::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb {
  color: currentColor !important;
  background: currentColor !important;
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
  mix-blend-mode: normal !important;
}

.tw-logo-orb.tw-brandmark:hover,
.tw-logo-orb.tw-brandmark:focus-visible,
button.tw-logo-orb.tw-brandmark:hover,
button.tw-logo-orb.tw-brandmark:focus-visible {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  outline: none !important;
}

.tw-logo-orb.tw-brandmark:hover .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:focus-visible .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:hover .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-brandmark:focus-visible .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark:hover .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark:focus-visible .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark:hover .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark:focus-visible .tw-wordmark-glyph--orb {
  color: var(--accent) !important;
  filter: none !important;
  animation: none !important;
}

/* Full system reset: after confirming power-off, the visible interface collapses
   like a CRT/old computer screen snapping down to a dot before the site reloads. */
.power-down-collapse {
  position: fixed;
  inset: 0;
  z-index: 250000;
  pointer-events: none;
  opacity: 0;
  background: #000;
}

.power-down-collapse::before,
.power-down-collapse::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.power-down-collapse::before {
  width: 0;
  height: 2px;
  background: rgba(235, 255, 236, 0.96);
  box-shadow:
    0 0 8px rgba(255,255,255,0.75),
    0 0 18px rgba(93,208,104,0.46),
    0 0 42px rgba(93,208,104,0.25);
}

.power-down-collapse::after {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(235, 255, 236, 0.98);
  box-shadow:
    0 0 8px rgba(255,255,255,0.86),
    0 0 22px rgba(93,208,104,0.54);
  opacity: 0;
}

body.tw-powering-down {
  overflow: hidden !important;
}

body.tw-powering-down main.content,
body.tw-powering-down .frame,
body.tw-powering-down #boot-root,
body.tw-powering-down .power-modal {
  animation: twSystemKineticClose 680ms cubic-bezier(.18,.86,.18,1) forwards !important;
  transform-origin: 50% 50% !important;
  will-change: transform, opacity, filter, clip-path;
}

body.tw-powering-down .power-modal {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  background: rgba(0,0,0,0.42) !important;
}

body.tw-powering-down .power-modal__panel {
  transition: none !important;
  animation: none !important;
}

body.tw-powering-down .power-down-collapse {
  opacity: 1;
  animation: twPowerOverlayHold 760ms steps(1,end) forwards;
}

body.tw-powering-down .power-down-collapse::before {
  animation: twPowerOffLine 760ms cubic-bezier(.16,.82,.22,1) forwards;
}

body.tw-powering-down .power-down-collapse::after {
  animation: twPowerOffDot 760ms cubic-bezier(.16,.82,.22,1) forwards;
}

@keyframes twSystemKineticClose {
  0% {
    opacity: 1;
    transform: scaleX(1) scaleY(1);
    clip-path: circle(145% at 50% 50%);
    filter: brightness(1) contrast(1);
  }
  36% {
    opacity: 1;
    transform: scaleX(1.012) scaleY(0.055);
    clip-path: ellipse(55% 4.8% at 50% 50%);
    filter: brightness(1.75) contrast(1.08);
  }
  62% {
    opacity: 0.92;
    transform: scaleX(0.18) scaleY(0.03);
    clip-path: ellipse(10% 2.4% at 50% 50%);
    filter: brightness(2.35) contrast(1.18);
  }
  82% {
    opacity: 0.48;
    transform: scale(0.035);
    clip-path: circle(2.6% at 50% 50%);
    filter: brightness(2.6) contrast(1.26);
  }
  100% {
    opacity: 0;
    transform: scale(0.002);
    clip-path: circle(0% at 50% 50%);
    filter: brightness(0) contrast(1.3);
  }
}

@keyframes twPowerOverlayHold {
  0% { opacity: 0; }
  2%, 100% { opacity: 1; }
}

@keyframes twPowerOffLine {
  0%, 11% {
    width: 0;
    height: 2px;
    opacity: 0;
  }
  26% {
    width: min(78vw, 920px);
    height: 3px;
    opacity: 1;
  }
  48% {
    width: min(56vw, 620px);
    height: 2px;
    opacity: 0.9;
  }
  68% {
    width: 22px;
    height: 2px;
    opacity: 0.86;
  }
  82%, 100% {
    width: 0;
    height: 0;
    opacity: 0;
  }
}

@keyframes twPowerOffDot {
  0%, 58% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
  74% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  92% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(0.44);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tw-powering-down main.content,
  body.tw-powering-down .frame,
  body.tw-powering-down #boot-root,
  body.tw-powering-down .power-modal {
    animation: twPowerFadeOnly 220ms ease forwards !important;
  }
  body.tw-powering-down .power-down-collapse::before,
  body.tw-powering-down .power-down-collapse::after {
    animation: none !important;
  }
}

@keyframes twPowerFadeOnly {
  to { opacity: 0; }
}

/* Keep the reset collapse visible: the overlay only draws the closing beam/dot;
   it does not black out the interface until the very end. */
.power-down-collapse {
  background: transparent !important;
}
@keyframes twPowerOverlayHold {
  0% { opacity: 0; background: transparent; }
  2%, 78% { opacity: 1; background: transparent; }
  100% { opacity: 1; background: #000; }
}

/* ============================================================
   TW AMBIENT v5
   ============================================================ */

/* ── Traffic light: single larger pulsing dot ── */
.terminal-bar .dot:not(.live) { display: none !important; }
.terminal-bar .dot.live { width: 11px !important; height: 11px !important; cursor: pointer; }

@keyframes twDotGreenPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(93,208,104,0.50), 0 0 12px rgba(93,208,104,0.22); }
  50%       { box-shadow: 0 0 11px rgba(93,208,104,0.80), 0 0 26px rgba(93,208,104,0.42), 0 0 44px rgba(93,208,104,0.16); }
}
body:not(.tw-terminal-minimized) .terminal.main .terminal-bar .dot.live {
  background: var(--accent) !important;
  animation: twDotGreenPulse 2.6s ease-in-out infinite !important;
}
body:not(.tw-terminal-minimized) .terminal.main .terminal-bar .dot.live:hover,
body:not(.tw-terminal-minimized) .terminal.main .terminal-bar .dot.live:focus-visible {
  background: #ff5f56 !important;
  box-shadow: 0 0 6px rgba(255,95,86,0.80), 0 0 14px rgba(255,95,86,0.36) !important;
  animation: none !important;
}
body.tw-terminal-minimized .terminal.main .terminal-bar .dot.live {
  background: #ff5f56 !important;
  box-shadow: 0 0 5px rgba(255,95,86,0.60), 0 0 12px rgba(255,95,86,0.26) !important;
  animation: none !important;
}
body.tw-terminal-minimized .terminal.main .terminal-bar .dot.live:hover,
body.tw-terminal-minimized .terminal.main .terminal-bar .dot.live:focus-visible {
  background: var(--accent) !important;
  box-shadow: 0 0 8px rgba(93,208,104,0.80), 0 0 20px rgba(93,208,104,0.38) !important;
}

/* ── Brandmark glyphs: slow gray↔white color shift ── */
body .tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
body .tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb {
  animation: twBrandmarkColorShift 8.5s ease-in-out infinite !important;
}
@keyframes twBrandmarkColorShift {
  0%, 100% { color: #7a7a7a; opacity: 0.80;
    filter: drop-shadow(0 0 3px rgba(150,150,150,0.28)) drop-shadow(0 0 7px rgba(150,150,150,0.10)); }
  46%, 54% { color: #e4e4e4; opacity: 1.0;
    filter: drop-shadow(0 0 6px rgba(215,215,215,0.55)) drop-shadow(0 0 14px rgba(215,215,215,0.22)); }
}

/* ── Ambient controls glow — keep the small HUD controls alive, but remove
   the old whole-frame / whole-terminal halo. The new border life below is a
   border-native neon beam, not a shadow floating outside the UI. ─────────── */
@keyframes twNeonBehindSm {
  0%   { box-shadow:  2px  3px 28px 0 rgba(93,208,104,0.04), -1px -2px 24px 0 rgba(93,208,104,0.03); }
  32%  { box-shadow:  3px  5px 40px 0 rgba(93,208,104,0.10), -1px -3px 32px 0 rgba(93,208,104,0.06), 2px -1px 26px 0 rgba(93,208,104,0.04); }
  68%  { box-shadow:  1px  2px 32px 0 rgba(93,208,104,0.05), -3px -1px 42px 0 rgba(93,208,104,0.08); }
  100% { box-shadow:  2px  3px 28px 0 rgba(93,208,104,0.04), -1px -2px 24px 0 rgba(93,208,104,0.03); }
}

.frame,
.terminal.main {
  animation: none !important;
  box-shadow: none;
}
.audio-btn        { animation: twNeonBehindSm 6.0s ease-in-out 1.4s infinite; }
#menu-btn         { animation: twNeonBehindSm 6.0s ease-in-out 3.8s infinite; }
.tw-logo-orb.tw-brandmark {
  animation: twNeonBehindSm 6.0s ease-in-out 0.8s infinite,
             twLogoOrbColorDrift 8.5s ease-in-out infinite !important;
}

/* ── Brandmark wake glow — intense custom keyframe, unmistakably visible ──
   Specificity (0,3,1) beats button.tw-logo-orb (0,1,1). Appended last.
   Peak brightness 1.8× + full green border + large bloom.              */
@keyframes tw-neon-brandmark-wake {
  0%   { border-color: var(--rule); box-shadow: 0 0 0px rgba(93,208,104,0); filter: brightness(0.88); }
  18%  { border-color: #5dd068;     box-shadow: 0 0 40px rgba(93,208,104,0.70), 0 0 80px rgba(93,208,104,0.38), inset 0 0 22px rgba(93,208,104,0.14); filter: brightness(1.80); }
  52%  { border-color: rgba(93,208,104,0.55); box-shadow: 0 0 28px rgba(93,208,104,0.42), 0 0 56px rgba(93,208,104,0.20); filter: brightness(1.22); }
  100% { border-color: var(--rule); box-shadow: 0 0 0px rgba(93,208,104,0); filter: brightness(1.00); }
}
body.tw-system-wake .tw-logo-orb.tw-brandmark {
  animation: tw-neon-brandmark-wake 5.0s ease 0.18s both !important;
}

/* ── Border-native traveling neon beam ─────────────────────────────────────
   Replaces the old rotating outside/inside glow. A short green beam lives on
   the actual 1px border using a masked conic gradient. It runs clockwise on
   the background frame first, then the terminal window, then repeats.         */
@property --tw-border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.terminal.main {
  position: relative;
}

.frame::before,
.terminal.main::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    conic-gradient(from var(--tw-border-angle),
      rgba(93,208,104,0.00) 0deg,
      rgba(93,208,104,0.00) 306deg,
      rgba(93,208,104,0.10) 318deg,
      rgba(93,208,104,0.42) 331deg,
      rgba(202,255,206,0.94) 345deg,
      rgba(93,208,104,0.58) 356deg,
      rgba(93,208,104,0.00) 360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  filter:
    drop-shadow(0 0 2px rgba(93,208,104,0.62))
    drop-shadow(0 0 5px rgba(93,208,104,0.22));
  opacity: 0;
}

.frame::before {
  z-index: 0;
  animation: twBorderBeamFrame 18s linear infinite;
}

.terminal.main::before {
  z-index: 7;
  animation: twBorderBeamTerminal 18s linear infinite;
}

@keyframes twBorderBeamFrame {
  0%      { --tw-border-angle: 0deg;   opacity: 0; }
  3%      { --tw-border-angle: 22deg;  opacity: 0.28; filter: drop-shadow(0 0 2px rgba(93,208,104,0.48)) drop-shadow(0 0 4px rgba(93,208,104,0.16)); }
  12%     { opacity: 0.46; filter: drop-shadow(0 0 3px rgba(93,208,104,0.72)) drop-shadow(0 0 7px rgba(93,208,104,0.26)); }
  24%     { opacity: 0.34; filter: drop-shadow(0 0 2px rgba(93,208,104,0.54)) drop-shadow(0 0 5px rgba(93,208,104,0.18)); }
  36%     { opacity: 0.50; filter: drop-shadow(0 0 3px rgba(93,208,104,0.76)) drop-shadow(0 0 8px rgba(93,208,104,0.28)); }
  47%     { --tw-border-angle: 360deg; opacity: 0.30; }
  50%     { --tw-border-angle: 382deg; opacity: 0; }
  50.001%,
  100%    { --tw-border-angle: 382deg; opacity: 0; }
}

@keyframes twBorderBeamTerminal {
  0%,
  49.999%  { --tw-border-angle: 0deg;   opacity: 0; }
  50%      { --tw-border-angle: 0deg;   opacity: 0; }
  53%      { --tw-border-angle: 22deg;  opacity: 0.34; filter: drop-shadow(0 0 2px rgba(93,208,104,0.52)) drop-shadow(0 0 4px rgba(93,208,104,0.16)); }
  62%      { opacity: 0.56; filter: drop-shadow(0 0 3px rgba(93,208,104,0.80)) drop-shadow(0 0 7px rgba(93,208,104,0.28)); }
  74%      { opacity: 0.40; filter: drop-shadow(0 0 2px rgba(93,208,104,0.58)) drop-shadow(0 0 5px rgba(93,208,104,0.18)); }
  86%      { opacity: 0.58; filter: drop-shadow(0 0 3px rgba(93,208,104,0.84)) drop-shadow(0 0 8px rgba(93,208,104,0.30)); }
  97%      { --tw-border-angle: 360deg; opacity: 0.32; }
  100%     { --tw-border-angle: 382deg; opacity: 0; }
}

/* Hide the ambient border beam during boot, scan handoff, menu, and power-down
   so it never fights the intro reveal or reset animation. */
body.booting .terminal.main::before,
body.booting .frame::before,
body.tw-frame-scan .terminal.main::before,
body.tw-frame-scan .frame::before,
body.menu-open .terminal.main::before,
body.tw-powering-down .terminal.main::before,
body.tw-powering-down .frame::before {
  animation: none !important;
  opacity: 0 !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .frame::before,
  .terminal.main::before {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ── Audio button focus reset ── */
.audio-btn:focus:not(:focus-visible) {
  color: var(--muted) !important;
  border-color: var(--rule) !important;
  outline: none;
}

/* ── Menu button: latch green when open, momentary on hover ── */
body.menu-open #menu-btn {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
body.menu-open #menu-btn:hover,
body.menu-open #menu-btn:focus-visible {
  color: var(--fg) !important;
  border-color: var(--fg) !important;
}
#menu-btn:focus:not(:focus-visible) {
  color: var(--muted) !important;
  border-color: var(--rule) !important;
  outline: none;
}

/* ── Thrillwave button: fully synchronised hover/active states ──────────────
   Root cause of desync: the button runs twLogoOrbColorDrift (color cycles
   green↔white continuously) and the glyphs run twBrandmarkColorShift (filter
   cycles gray↔white). On hover, !important rules fight the running animations
   at different cycle points → they switch at different instants.

   Fix: on :hover and :active we override the ENTIRE animation list so the
   colour-cycling animation is paused for the interaction. Only the ambient
   box-shadow pulse (twNeonBehindSm) continues. Both border and glyphs then
   respond to explicit colour values at exactly the same time with matching
   CSS transitions — identical to how the audio/menu buttons behave.          */

/* Add transitions to the button base so hover entry/exit is smooth */
.tw-logo-orb.tw-brandmark,
button.tw-logo-orb.tw-brandmark {
  transition: color 100ms ease, border-color 100ms ease !important;
}

/* Add matching transitions to glyphs */
.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb {
  transition: color 100ms ease, filter 100ms ease !important;
}

/* HOVER / FOCUS-VISIBLE: stop colour animation, apply explicit green */
.tw-logo-orb.tw-brandmark:hover,
button.tw-logo-orb.tw-brandmark:hover,
.tw-logo-orb.tw-brandmark:focus-visible,
button.tw-logo-orb.tw-brandmark:focus-visible {
  animation: twNeonBehindSm 6.0s ease-in-out 0.8s infinite !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.tw-logo-orb.tw-brandmark:hover .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:hover .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-brandmark:focus-visible .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:focus-visible .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark:hover .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark:hover .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark:focus-visible .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark:focus-visible .tw-wordmark-glyph--orb {
  animation: none !important;
  color: var(--accent) !important;
  filter: drop-shadow(0 0 5px rgba(93,208,104,0.75))
          drop-shadow(0 0 14px rgba(93,208,104,0.35)) !important;
}

/* ACTIVE (mousedown): stop colour animation, apply explicit gray */
.tw-logo-orb.tw-brandmark:active,
button.tw-logo-orb.tw-brandmark:active {
  animation: twNeonBehindSm 6.0s ease-in-out 0.8s infinite !important;
  color: var(--muted) !important;
  border-color: var(--rule) !important;
  transform: none !important;
}
.tw-logo-orb.tw-brandmark:active .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:active .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark:active .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark:active .tw-wordmark-glyph--orb {
  animation: none !important;
  color: #7a7a7a !important;
  filter: drop-shadow(0 0 2px rgba(130,130,130,0.28)) !important;
}

/* Focus-not-focus-visible: mouse-click focus reset (safety net after blur) */
.tw-logo-orb.tw-brandmark:focus:not(:focus-visible),
button.tw-logo-orb.tw-brandmark:focus:not(:focus-visible) {
  border-color: var(--rule) !important;
  transform: none !important;
  outline: none;
}

/* ── click-to-start: white on :active (click), green on hover, white at rest ── */
.welcome-btn:active {
  color: var(--fg) !important;
  border-color: var(--fg) !important;
}

/* ── Power modal traffic light ─────────────────────────────────────────────
   Green at rest (modal is open/active). Red on hover — signals dismiss/cancel,
   matching the terminal window's minimize-dot pattern exactly.
   Clicking closes the modal (wired in JS to closeModal).               */
.power-modal__bar .dot.live {
  cursor: pointer;
  pointer-events: auto;
  background: var(--accent) !important;
  box-shadow: 0 0 4px rgba(93,208,104,0.55) !important;
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.power-modal__bar .dot.live:hover,
.power-modal__bar .dot.live:focus-visible {
  background: #ff5f56 !important;
  box-shadow: 0 0 5px rgba(255,95,86,0.75), 0 0 12px rgba(255,95,86,0.32) !important;
  transform: scale(1.12);
}
.power-modal__bar .dot.live:active {
  background: #ff5f56 !important;
  box-shadow: 0 0 3px rgba(255,95,86,0.6) !important;
  transform: scale(0.94);
}

/* ============================================================
   TW brandmark design update — true-white <-> neon-green drift
   Keeps hover/click behavior authoritative after the home click.
   ============================================================ */
.tw-logo-orb.tw-brandmark,
button.tw-logo-orb.tw-brandmark {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  animation: twBrandmarkWhiteGreenDrift 9.6s ease-in-out infinite !important;
  transition:
    color 140ms ease,
    border-color 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease !important;
}

.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb {
  color: currentColor !important;
  background: currentColor !important;
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
  mix-blend-mode: normal !important;
}

.tw-logo-orb.tw-brandmark:is(:hover, :focus, :focus-visible),
button.tw-logo-orb.tw-brandmark:is(:hover, :focus, :focus-visible) {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: transparent !important;
  box-shadow:
    0 0 7px rgba(93,208,104,0.20),
    0 0 16px rgba(93,208,104,0.10) !important;
  filter: none !important;
  transform: none !important;
  outline: none !important;
  animation: none !important;
}

.tw-logo-orb.tw-brandmark:is(:hover, :focus, :focus-visible) .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:is(:hover, :focus, :focus-visible) .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark:is(:hover, :focus, :focus-visible) .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark:is(:hover, :focus, :focus-visible) .tw-wordmark-glyph--orb {
  color: var(--accent) !important;
  background: var(--accent) !important;
  filter: none !important;
  animation: none !important;
}

.tw-logo-orb.tw-brandmark:active,
button.tw-logo-orb.tw-brandmark:active {
  color: #ffffff !important;
  border-color: var(--accent) !important;
  transform: scale(0.985) !important;
  box-shadow:
    0 0 8px rgba(93,208,104,0.26),
    inset 0 0 8px rgba(93,208,104,0.10) !important;
  animation: none !important;
}

@keyframes twBrandmarkWhiteGreenDrift {
  0%, 100% {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.94);
    box-shadow: none;
  }
  48%, 58% {
    color: var(--accent);
    border-color: rgba(93, 208, 104, 0.96);
    box-shadow:
      0 0 6px rgba(93,208,104,0.16),
      0 0 14px rgba(93,208,104,0.08);
  }
}

/* ============================================================
   TW design fix — brand button gray reset, fixed control widths,
   and longer/brighter border beam
   ============================================================ */

/* Brandmark returns to the same gray HUD language as audio/menu. */
.tw-logo-orb.tw-brandmark,
button.tw-logo-orb.tw-brandmark {
  color: var(--muted) !important;
  border-color: var(--rule) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
  transition:
    color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease !important;
}

.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb {
  color: var(--muted) !important;
  background: var(--muted) !important;
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
  mix-blend-mode: normal !important;
  transition:
    color 120ms ease,
    background-color 120ms ease,
    filter 120ms ease !important;
}

.tw-logo-orb.tw-brandmark:hover,
button.tw-logo-orb.tw-brandmark:hover,
.tw-logo-orb.tw-brandmark:focus-visible,
button.tw-logo-orb.tw-brandmark:focus-visible {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: transparent !important;
  box-shadow:
    0 0 7px rgba(93,208,104,0.20),
    0 0 16px rgba(93,208,104,0.10) !important;
  filter: none !important;
  transform: none !important;
  outline: none !important;
  animation: none !important;
}

.tw-logo-orb.tw-brandmark:hover .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:hover .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-brandmark:focus-visible .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:focus-visible .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark:hover .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark:hover .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark:focus-visible .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark:focus-visible .tw-wordmark-glyph--orb {
  color: var(--accent) !important;
  background: var(--accent) !important;
  filter: none !important;
  animation: none !important;
}

/* After a mouse click, keep the button reset to gray so the next hover lights green again. */
.tw-logo-orb.tw-brandmark:focus:not(:focus-visible),
button.tw-logo-orb.tw-brandmark:focus:not(:focus-visible) {
  color: var(--muted) !important;
  border-color: var(--rule) !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
  animation: none !important;
}

.tw-logo-orb.tw-brandmark:focus:not(:focus-visible) .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:focus:not(:focus-visible) .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark:focus:not(:focus-visible) .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark:focus:not(:focus-visible) .tw-wordmark-glyph--orb {
  color: var(--muted) !important;
  background: var(--muted) !important;
  filter: none !important;
  animation: none !important;
}

.tw-logo-orb.tw-brandmark:active,
button.tw-logo-orb.tw-brandmark:active {
  color: var(--muted) !important;
  border-color: var(--accent) !important;
  transform: scale(0.985) !important;
  box-shadow:
    0 0 7px rgba(93,208,104,0.22),
    inset 0 0 7px rgba(93,208,104,0.08) !important;
  animation: none !important;
}

/* Fixed-width top controls so audio/mute and menu/close never resize the topbar. */
.topbar-right .audio-btn,
.topbar-right #menu-btn {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}

@media (max-width: 720px) {
  .topbar-right .audio-btn,
  .topbar-right #menu-btn {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
  }
}

/* Longer, brighter border-native beam on both the outer frame and terminal border. */
.frame::before,
.terminal.main::before {
  background:
    conic-gradient(from var(--tw-border-angle),
      rgba(93,208,104,0.00) 0deg,
      rgba(93,208,104,0.00) 246deg,
      rgba(93,208,104,0.10) 262deg,
      rgba(93,208,104,0.36) 282deg,
      rgba(93,208,104,0.76) 306deg,
      rgba(204,255,208,1.00) 330deg,
      rgba(93,208,104,0.88) 348deg,
      rgba(93,208,104,0.18) 358deg,
      rgba(93,208,104,0.00) 360deg) !important;
  filter:
    drop-shadow(0 0 3px rgba(93,208,104,0.90))
    drop-shadow(0 0 8px rgba(93,208,104,0.46))
    drop-shadow(0 0 14px rgba(93,208,104,0.18)) !important;
}

@keyframes twBorderBeamFrame {
  0%      { --tw-border-angle: 0deg;   opacity: 0; }
  3%      { --tw-border-angle: 22deg;  opacity: 0.48; filter: drop-shadow(0 0 3px rgba(93,208,104,0.72)) drop-shadow(0 0 8px rgba(93,208,104,0.32)) drop-shadow(0 0 14px rgba(93,208,104,0.12)); }
  12%     { opacity: 0.78; filter: drop-shadow(0 0 4px rgba(93,208,104,0.98)) drop-shadow(0 0 10px rgba(93,208,104,0.48)) drop-shadow(0 0 18px rgba(93,208,104,0.18)); }
  24%     { opacity: 0.58; filter: drop-shadow(0 0 3px rgba(93,208,104,0.78)) drop-shadow(0 0 8px rgba(93,208,104,0.34)) drop-shadow(0 0 14px rgba(93,208,104,0.12)); }
  36%     { opacity: 0.82; filter: drop-shadow(0 0 4px rgba(93,208,104,1.00)) drop-shadow(0 0 11px rgba(93,208,104,0.52)) drop-shadow(0 0 20px rgba(93,208,104,0.20)); }
  47%     { --tw-border-angle: 360deg; opacity: 0.48; }
  50%     { --tw-border-angle: 382deg; opacity: 0; }
  50.001%,
  100%    { --tw-border-angle: 382deg; opacity: 0; }
}

@keyframes twBorderBeamTerminal {
  0%,
  49.999%  { --tw-border-angle: 0deg;   opacity: 0; }
  50%      { --tw-border-angle: 0deg;   opacity: 0; }
  53%      { --tw-border-angle: 22deg;  opacity: 0.52; filter: drop-shadow(0 0 3px rgba(93,208,104,0.76)) drop-shadow(0 0 8px rgba(93,208,104,0.34)) drop-shadow(0 0 14px rgba(93,208,104,0.12)); }
  62%      { opacity: 0.86; filter: drop-shadow(0 0 4px rgba(93,208,104,1.00)) drop-shadow(0 0 10px rgba(93,208,104,0.50)) drop-shadow(0 0 18px rgba(93,208,104,0.18)); }
  74%      { opacity: 0.64; filter: drop-shadow(0 0 3px rgba(93,208,104,0.82)) drop-shadow(0 0 8px rgba(93,208,104,0.36)) drop-shadow(0 0 14px rgba(93,208,104,0.12)); }
  86%      { opacity: 0.88; filter: drop-shadow(0 0 4px rgba(93,208,104,1.00)) drop-shadow(0 0 11px rgba(93,208,104,0.54)) drop-shadow(0 0 20px rgba(93,208,104,0.20)); }
  97%      { --tw-border-angle: 360deg; opacity: 0.52; }
  100%     { --tw-border-angle: 382deg; opacity: 0; }
}

/* ============================================================
   TW patch — brandmark matches audio button interaction exactly
   ============================================================ */
.tw-logo-orb.tw-brandmark,
button.tw-logo-orb.tw-brandmark,
.tw-logo-orb.tw-home-restart,
button.tw-logo-orb.tw-home-restart {
  color: var(--muted) !important;
  border: 1px solid var(--rule) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  animation: none !important;
  transform: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: color 120ms ease, border-color 120ms ease !important;
}

.tw-logo-orb.tw-brandmark::before,
.tw-logo-orb.tw-brandmark::after,
button.tw-logo-orb.tw-brandmark::before,
button.tw-logo-orb.tw-brandmark::after,
.tw-logo-orb.tw-home-restart::before,
.tw-logo-orb.tw-home-restart::after,
button.tw-logo-orb.tw-home-restart::before,
button.tw-logo-orb.tw-home-restart::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-home-restart .tw-logo-glyph--orb,
.tw-logo-orb.tw-home-restart .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-home-restart .tw-logo-glyph--orb,
button.tw-logo-orb.tw-home-restart .tw-wordmark-glyph--orb {
  color: var(--muted) !important;
  background: var(--muted) !important;
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
  mix-blend-mode: normal !important;
  transition: color 120ms ease, background-color 120ms ease !important;
}

.tw-logo-orb.tw-brandmark:hover,
.tw-logo-orb.tw-brandmark:focus-visible,
.tw-logo-orb.tw-brandmark:active,
button.tw-logo-orb.tw-brandmark:hover,
button.tw-logo-orb.tw-brandmark:focus-visible,
button.tw-logo-orb.tw-brandmark:active,
.tw-logo-orb.tw-home-restart:hover,
.tw-logo-orb.tw-home-restart:focus-visible,
.tw-logo-orb.tw-home-restart:active,
button.tw-logo-orb.tw-home-restart:hover,
button.tw-logo-orb.tw-home-restart:focus-visible,
button.tw-logo-orb.tw-home-restart:active {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  outline: none !important;
  animation: none !important;
}

.tw-logo-orb.tw-brandmark:hover .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:hover .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-brandmark:focus-visible .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:focus-visible .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-brandmark:active .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:active .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark:hover .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark:hover .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark:focus-visible .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark:focus-visible .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark:active .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark:active .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-home-restart:hover .tw-logo-glyph--orb,
.tw-logo-orb.tw-home-restart:hover .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-home-restart:focus-visible .tw-logo-glyph--orb,
.tw-logo-orb.tw-home-restart:focus-visible .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-home-restart:active .tw-logo-glyph--orb,
.tw-logo-orb.tw-home-restart:active .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-home-restart:hover .tw-logo-glyph--orb,
button.tw-logo-orb.tw-home-restart:hover .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-home-restart:focus-visible .tw-logo-glyph--orb,
button.tw-logo-orb.tw-home-restart:focus-visible .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-home-restart:active .tw-logo-glyph--orb,
button.tw-logo-orb.tw-home-restart:active .tw-wordmark-glyph--orb {
  color: var(--accent) !important;
  background: var(--accent) !important;
  filter: none !important;
  animation: none !important;
}

.tw-logo-orb.tw-brandmark:focus:not(:focus-visible):not(:hover):not(:active),
button.tw-logo-orb.tw-brandmark:focus:not(:focus-visible):not(:hover):not(:active),
.tw-logo-orb.tw-home-restart:focus:not(:focus-visible):not(:hover):not(:active),
button.tw-logo-orb.tw-home-restart:focus:not(:focus-visible):not(:hover):not(:active) {
  color: var(--muted) !important;
  border-color: var(--rule) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  outline: none !important;
  animation: none !important;
}

.tw-logo-orb.tw-brandmark:focus:not(:focus-visible):not(:hover):not(:active) .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:focus:not(:focus-visible):not(:hover):not(:active) .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark:focus:not(:focus-visible):not(:hover):not(:active) .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark:focus:not(:focus-visible):not(:hover):not(:active) .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-home-restart:focus:not(:focus-visible):not(:hover):not(:active) .tw-logo-glyph--orb,
.tw-logo-orb.tw-home-restart:focus:not(:focus-visible):not(:hover):not(:active) .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-home-restart:focus:not(:focus-visible):not(:hover):not(:active) .tw-logo-glyph--orb,
button.tw-logo-orb.tw-home-restart:focus:not(:focus-visible):not(:hover):not(:active) .tw-wordmark-glyph--orb {
  color: var(--muted) !important;
  background: var(--muted) !important;
  filter: none !important;
  animation: none !important;
}

/* ============================================================
   TW patch — brand hover-after-click focus fix + beam tuning
   ============================================================ */

/* The browser keeps the logo button focused after mouse click. These higher-
   specificity rules make focused+hovered behave exactly like the audio button:
   green while hovered/pressed, muted gray the moment it is not hovered. */
button.tw-logo-orb.tw-brandmark.tw-home-restart:focus:not(:focus-visible):hover,
.tw-logo-orb.tw-brandmark.tw-home-restart:focus:not(:focus-visible):hover,
button.tw-logo-orb.tw-brandmark.tw-home-restart:focus:not(:focus-visible):active,
.tw-logo-orb.tw-brandmark.tw-home-restart:focus:not(:focus-visible):active {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  outline: none !important;
  animation: none !important;
}

button.tw-logo-orb.tw-brandmark.tw-home-restart:focus:not(:focus-visible):hover .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark.tw-home-restart:focus:not(:focus-visible):hover .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-brandmark.tw-home-restart:focus:not(:focus-visible):hover .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark.tw-home-restart:focus:not(:focus-visible):hover .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark.tw-home-restart:focus:not(:focus-visible):active .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark.tw-home-restart:focus:not(:focus-visible):active .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-brandmark.tw-home-restart:focus:not(:focus-visible):active .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark.tw-home-restart:focus:not(:focus-visible):active .tw-wordmark-glyph--orb {
  color: var(--accent) !important;
  background: var(--accent) !important;
  filter: none !important;
  animation: none !important;
}

button.tw-logo-orb.tw-brandmark.tw-home-restart:focus:not(:focus-visible):not(:hover):not(:active),
.tw-logo-orb.tw-brandmark.tw-home-restart:focus:not(:focus-visible):not(:hover):not(:active) {
  color: var(--muted) !important;
  border-color: var(--rule) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  outline: none !important;
  animation: none !important;
}

button.tw-logo-orb.tw-brandmark.tw-home-restart:focus:not(:focus-visible):not(:hover):not(:active) .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark.tw-home-restart:focus:not(:focus-visible):not(:hover):not(:active) .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-brandmark.tw-home-restart:focus:not(:focus-visible):not(:hover):not(:active) .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark.tw-home-restart:focus:not(:focus-visible):not(:hover):not(:active) .tw-wordmark-glyph--orb {
  color: var(--muted) !important;
  background: var(--muted) !important;
  filter: none !important;
  animation: none !important;
}

/* Beam: slow back down slightly and make the hot core neon green instead of white. */
.frame::before,
.terminal.main::before {
  background:
    conic-gradient(from var(--tw-border-angle),
      rgba(93,208,104,0.00) 0deg,
      rgba(93,208,104,0.00) 246deg,
      rgba(93,255,112,0.12) 262deg,
      rgba(93,255,112,0.40) 282deg,
      rgba(93,255,112,0.82) 306deg,
      rgba(105,255,126,0.98) 330deg,
      rgba(93,255,112,0.92) 348deg,
      rgba(93,255,112,0.20) 358deg,
      rgba(93,208,104,0.00) 360deg) !important;
  filter:
    drop-shadow(0 0 3px rgba(93,255,112,0.92))
    drop-shadow(0 0 8px rgba(93,255,112,0.50))
    drop-shadow(0 0 14px rgba(93,255,112,0.20)) !important;
}

.frame::before {
  animation: twBorderBeamFrame 20s linear infinite !important;
}

.terminal.main::before {
  animation: twBorderBeamTerminal 20s linear infinite !important;
}

/* ============================================================
   TW patch — brand click feedback + beam timing v2
   ============================================================ */

/* Beam: slightly slower, with a longer quiet handoff between the outer
   desktop frame pass and the terminal-window pass. */
.frame::before {
  animation: twBorderBeamFrame 22s linear infinite !important;
}

.terminal.main::before {
  animation: twBorderBeamTerminal 22s linear infinite !important;
}

@keyframes twBorderBeamFrame {
  0%      { --tw-border-angle: 0deg;   opacity: 0; }
  4%      { --tw-border-angle: 24deg;  opacity: 0.46; filter: drop-shadow(0 0 3px rgba(93,255,112,0.74)) drop-shadow(0 0 8px rgba(93,255,112,0.34)) drop-shadow(0 0 14px rgba(93,255,112,0.13)); }
  13%     { opacity: 0.76; filter: drop-shadow(0 0 4px rgba(93,255,112,0.98)) drop-shadow(0 0 10px rgba(93,255,112,0.48)) drop-shadow(0 0 18px rgba(93,255,112,0.18)); }
  24%     { opacity: 0.56; filter: drop-shadow(0 0 3px rgba(93,255,112,0.78)) drop-shadow(0 0 8px rgba(93,255,112,0.34)) drop-shadow(0 0 14px rgba(93,255,112,0.12)); }
  36%     { opacity: 0.80; filter: drop-shadow(0 0 4px rgba(93,255,112,1.00)) drop-shadow(0 0 11px rgba(93,255,112,0.52)) drop-shadow(0 0 20px rgba(93,255,112,0.20)); }
  43%     { --tw-border-angle: 360deg; opacity: 0.44; }
  47%     { --tw-border-angle: 382deg; opacity: 0; }
  47.001%,
  100%    { --tw-border-angle: 382deg; opacity: 0; }
}

@keyframes twBorderBeamTerminal {
  0%,
  57.999%  { --tw-border-angle: 0deg;   opacity: 0; }
  58%      { --tw-border-angle: 0deg;   opacity: 0; }
  62%      { --tw-border-angle: 24deg;  opacity: 0.50; filter: drop-shadow(0 0 3px rgba(93,255,112,0.76)) drop-shadow(0 0 8px rgba(93,255,112,0.34)) drop-shadow(0 0 14px rgba(93,255,112,0.12)); }
  70%      { opacity: 0.84; filter: drop-shadow(0 0 4px rgba(93,255,112,1.00)) drop-shadow(0 0 10px rgba(93,255,112,0.50)) drop-shadow(0 0 18px rgba(93,255,112,0.18)); }
  80%      { opacity: 0.62; filter: drop-shadow(0 0 3px rgba(93,255,112,0.82)) drop-shadow(0 0 8px rgba(93,255,112,0.36)) drop-shadow(0 0 14px rgba(93,255,112,0.12)); }
  91%      { opacity: 0.86; filter: drop-shadow(0 0 4px rgba(93,255,112,1.00)) drop-shadow(0 0 11px rgba(93,255,112,0.54)) drop-shadow(0 0 20px rgba(93,255,112,0.20)); }
  97%      { --tw-border-angle: 360deg; opacity: 0.48; }
  100%     { --tw-border-angle: 382deg; opacity: 0; }
}

/* Brand button: after the hover/focus fixes, force the actual mousedown
   moment to match the audio/menu button behavior: it flashes back to muted
   gray while pressed, then returns to green if the cursor is still hovering. */
button.tw-logo-orb.tw-brandmark.tw-home-restart:active,
.tw-logo-orb.tw-brandmark.tw-home-restart:active,
button.tw-logo-orb.tw-brandmark:active,
.tw-logo-orb.tw-brandmark:active,
button.tw-logo-orb.tw-home-restart:active,
.tw-logo-orb.tw-home-restart:active {
  color: var(--muted) !important;
  border-color: var(--rule) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  outline: none !important;
  animation: none !important;
}

button.tw-logo-orb.tw-brandmark.tw-home-restart:active .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark.tw-home-restart:active .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-brandmark.tw-home-restart:active .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark.tw-home-restart:active .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark:active .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark:active .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-brandmark:active .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:active .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-home-restart:active .tw-logo-glyph--orb,
button.tw-logo-orb.tw-home-restart:active .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-home-restart:active .tw-logo-glyph--orb,
.tw-logo-orb.tw-home-restart:active .tw-wordmark-glyph--orb {
  color: var(--muted) !important;
  background: var(--muted) !important;
  filter: none !important;
  animation: none !important;
}


/* ============================================================
   TW patch — brandmark true pressed state
   JS adds .tw-brandmark-pressing on pointerdown so the click flash
   is visible even when the home-route handler blurs/reroutes instantly.
   ============================================================ */
body .tw-logo-orb.tw-brandmark.tw-brandmark-pressing,
body button.tw-logo-orb.tw-brandmark.tw-brandmark-pressing,
body .tw-logo-orb.tw-home-restart.tw-brandmark-pressing,
body button.tw-logo-orb.tw-home-restart.tw-brandmark-pressing,
body .tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing,
body button.tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing,
body .tw-logo-orb.tw-brandmark.tw-brandmark-pressing:hover,
body button.tw-logo-orb.tw-brandmark.tw-brandmark-pressing:hover,
body .tw-logo-orb.tw-home-restart.tw-brandmark-pressing:hover,
body button.tw-logo-orb.tw-home-restart.tw-brandmark-pressing:hover,
body .tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing:hover,
body button.tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing:hover,
body .tw-logo-orb.tw-brandmark.tw-brandmark-pressing:focus,
body button.tw-logo-orb.tw-brandmark.tw-brandmark-pressing:focus,
body .tw-logo-orb.tw-home-restart.tw-brandmark-pressing:focus,
body button.tw-logo-orb.tw-home-restart.tw-brandmark-pressing:focus,
body .tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing:focus,
body button.tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing:focus,
body .tw-logo-orb.tw-brandmark.tw-brandmark-pressing:active,
body button.tw-logo-orb.tw-brandmark.tw-brandmark-pressing:active,
body .tw-logo-orb.tw-home-restart.tw-brandmark-pressing:active,
body button.tw-logo-orb.tw-home-restart.tw-brandmark-pressing:active,
body .tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing:active,
body button.tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing:active {
  color: var(--muted) !important;
  border-color: var(--rule) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
  outline: none !important;
  animation: none !important;
  transition: none !important;
}

body .tw-logo-orb.tw-brandmark.tw-brandmark-pressing .tw-logo-glyph--orb,
body .tw-logo-orb.tw-brandmark.tw-brandmark-pressing .tw-wordmark-glyph--orb,
body button.tw-logo-orb.tw-brandmark.tw-brandmark-pressing .tw-logo-glyph--orb,
body button.tw-logo-orb.tw-brandmark.tw-brandmark-pressing .tw-wordmark-glyph--orb,
body .tw-logo-orb.tw-home-restart.tw-brandmark-pressing .tw-logo-glyph--orb,
body .tw-logo-orb.tw-home-restart.tw-brandmark-pressing .tw-wordmark-glyph--orb,
body button.tw-logo-orb.tw-home-restart.tw-brandmark-pressing .tw-logo-glyph--orb,
body button.tw-logo-orb.tw-home-restart.tw-brandmark-pressing .tw-wordmark-glyph--orb,
body .tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing .tw-logo-glyph--orb,
body .tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing .tw-wordmark-glyph--orb,
body button.tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing .tw-logo-glyph--orb,
body button.tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing .tw-wordmark-glyph--orb {
  color: var(--muted) !important;
  background: var(--muted) !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}


/* ============================================================
   TW patch — brandmark active-click final override
   The press state is now also painted by JS inline for one brief beat,
   but these selectors keep the CSS side locked to the audio button feel.
   ============================================================ */
html body button.tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing,
html body .tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing,
html body button.tw-logo-orb.tw-brandmark.tw-brandmark-pressing,
html body .tw-logo-orb.tw-brandmark.tw-brandmark-pressing,
html body button.tw-logo-orb.tw-home-restart.tw-brandmark-pressing,
html body .tw-logo-orb.tw-home-restart.tw-brandmark-pressing,
html body button.tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing:hover,
html body .tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing:hover,
html body button.tw-logo-orb.tw-brandmark.tw-brandmark-pressing:hover,
html body .tw-logo-orb.tw-brandmark.tw-brandmark-pressing:hover,
html body button.tw-logo-orb.tw-home-restart.tw-brandmark-pressing:hover,
html body .tw-logo-orb.tw-home-restart.tw-brandmark-pressing:hover,
html body button.tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing:focus,
html body .tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing:focus,
html body button.tw-logo-orb.tw-brandmark.tw-brandmark-pressing:focus,
html body .tw-logo-orb.tw-brandmark.tw-brandmark-pressing:focus,
html body button.tw-logo-orb.tw-home-restart.tw-brandmark-pressing:focus,
html body .tw-logo-orb.tw-home-restart.tw-brandmark-pressing:focus,
html body button.tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing:active,
html body .tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing:active,
html body button.tw-logo-orb.tw-brandmark.tw-brandmark-pressing:active,
html body .tw-logo-orb.tw-brandmark.tw-brandmark-pressing:active,
html body button.tw-logo-orb.tw-home-restart.tw-brandmark-pressing:active,
html body .tw-logo-orb.tw-home-restart.tw-brandmark-pressing:active {
  color: var(--muted) !important;
  border-color: var(--rule) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
  outline: none !important;
  animation: none !important;
  transition: none !important;
}

html body button.tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing .tw-logo-glyph--orb,
html body button.tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing .tw-wordmark-glyph--orb,
html body .tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing .tw-logo-glyph--orb,
html body .tw-logo-orb.tw-brandmark.tw-home-restart.tw-brandmark-pressing .tw-wordmark-glyph--orb,
html body button.tw-logo-orb.tw-brandmark.tw-brandmark-pressing .tw-logo-glyph--orb,
html body button.tw-logo-orb.tw-brandmark.tw-brandmark-pressing .tw-wordmark-glyph--orb,
html body .tw-logo-orb.tw-brandmark.tw-brandmark-pressing .tw-logo-glyph--orb,
html body .tw-logo-orb.tw-brandmark.tw-brandmark-pressing .tw-wordmark-glyph--orb,
html body button.tw-logo-orb.tw-home-restart.tw-brandmark-pressing .tw-logo-glyph--orb,
html body button.tw-logo-orb.tw-home-restart.tw-brandmark-pressing .tw-wordmark-glyph--orb,
html body .tw-logo-orb.tw-home-restart.tw-brandmark-pressing .tw-logo-glyph--orb,
html body .tw-logo-orb.tw-home-restart.tw-brandmark-pressing .tw-wordmark-glyph--orb {
  color: var(--muted) !important;
  background: var(--muted) !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}


/* ============================================================
   TW brandmark instant release / audio-button click match
   ============================================================ */
.tw-logo-orb.tw-brandmark.tw-brandmark-pressing,
.tw-logo-orb.tw-brandmark:active,
.tw-logo-orb.tw-brandmark:hover:active,
.tw-logo-orb.tw-brandmark:focus-visible:active,
button.tw-logo-orb.tw-brandmark.tw-brandmark-pressing,
button.tw-logo-orb.tw-brandmark:active,
button.tw-logo-orb.tw-brandmark:hover:active,
button.tw-logo-orb.tw-brandmark:focus-visible:active {
  color: var(--muted) !important;
  border-color: var(--rule) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.tw-logo-orb.tw-brandmark.tw-brandmark-pressing .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark.tw-brandmark-pressing .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-brandmark:active .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:active .tw-wordmark-glyph--orb,
.tw-logo-orb.tw-brandmark:hover:active .tw-logo-glyph--orb,
.tw-logo-orb.tw-brandmark:hover:active .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark.tw-brandmark-pressing .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark.tw-brandmark-pressing .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark:active .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark:active .tw-wordmark-glyph--orb,
button.tw-logo-orb.tw-brandmark:hover:active .tw-logo-glyph--orb,
button.tw-logo-orb.tw-brandmark:hover:active .tw-wordmark-glyph--orb {
  color: var(--muted) !important;
  background: var(--muted) !important;
  filter: none !important;
  animation: none !important;
}

/* ============================================================
   TW patch — restore original ELF handoff glow behavior
   Reuses the existing wake keyframes already used by the terminal,
   audio, and menu controls. No new glow-hit effect is introduced here.
   ============================================================ */

/* The rotating border beam patch set .frame animation to none !important.
   This restores the original outer/background frame wake hit during the
   post-.elf handoff using the existing tw-neon-border-wake keyframe. */
html body.tw-system-wake > .frame {
  animation: tw-neon-border-wake 5.1s ease both !important;
}

/* Give the Thrill Wave brandmark button the same border glow hit as the
   audio/menu controls by reusing their existing tw-neon-control-wake keyframe. */
html body.tw-system-wake .tw-logo-orb.tw-brandmark,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark,
html body.tw-system-wake .tw-logo-orb.tw-home-restart,
html body.tw-system-wake button.tw-logo-orb.tw-home-restart {
  animation: tw-neon-control-wake 4.8s ease 0.22s both !important;
}

/* Keep the ambient rotating beam out of the way while the original glow hit
   is firing, then let it return normally once tw-system-wake is removed. */
html body.tw-system-wake > .frame::before,
html body.tw-system-wake .terminal.main::before {
  animation: none !important;
  opacity: 0 !important;
  filter: none !important;
}

/* ============================================================
   TW patch — sync ELF handoff border wake + brandmark terminal glow
   - Delays the outer frame wake so it lands with the terminal wake hit.
   - Applies the same terminal-window wake keyframe to the Thrill Wave
     brandmark border, then mirrors that timing on the logo/wordmark glyphs.
   ============================================================ */

/* The previous restore brought the outer frame glow back, but it started
   early. Match the terminal window's wake timing so the background frame
   hits with the rest of the interface during the post-.elf handoff. */
html body.tw-system-wake > .frame {
  animation: tw-neon-border-wake 5.1s ease 0.62s both !important;
}

/* Brandmark border: reuse the terminal window's original wake animation
   directly, instead of a custom glow. This gives the Thrill Wave button the
   same neon hit / slow fade behavior as the terminal frame. */
html body.tw-system-wake .tw-logo-orb.tw-brandmark,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark,
html body.tw-system-wake .tw-logo-orb.tw-home-restart,
html body.tw-system-wake button.tw-logo-orb.tw-home-restart {
  animation: tw-neon-terminal-wake 5.15s ease 0.62s both !important;
  color: var(--muted) !important;
  background: transparent !important;
  transform: none !important;
}

/* Logo + wordmark: same timing curve as the terminal wake, translated to
   glyph color/drop-shadow so the mark catches the same light as the border. */
html body.tw-system-wake .tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
html body.tw-system-wake .tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
html body.tw-system-wake .tw-logo-orb.tw-home-restart .tw-logo-glyph--orb,
html body.tw-system-wake .tw-logo-orb.tw-home-restart .tw-wordmark-glyph--orb,
html body.tw-system-wake button.tw-logo-orb.tw-home-restart .tw-logo-glyph--orb,
html body.tw-system-wake button.tw-logo-orb.tw-home-restart .tw-wordmark-glyph--orb {
  animation: tw-brandmark-terminal-glyph-wake 5.15s ease 0.62s both !important;
  background: currentColor !important;
  opacity: 1 !important;
}

@keyframes tw-brandmark-terminal-glyph-wake {
  0% {
    color: var(--muted);
    filter: none;
  }
  16% {
    color: var(--accent);
    filter:
      drop-shadow(0 0 5px rgba(93,208,104,0.82))
      drop-shadow(0 0 14px rgba(93,208,104,0.42))
      drop-shadow(0 0 24px rgba(93,208,104,0.18));
  }
  54% {
    color: rgba(93,208,104,0.86);
    filter:
      drop-shadow(0 0 4px rgba(93,208,104,0.58))
      drop-shadow(0 0 12px rgba(93,208,104,0.26));
  }
  100% {
    color: var(--muted);
    filter: none;
  }
}

/* ============================================================
   TW intro wake repair — brandmark glow proxy
   The brandmark's normal state intentionally locks box-shadow/filter to none
   with !important so it behaves like the audio/menu buttons after click.
   CSS keyframes cannot override those important base declarations, so the
   intro glow is drawn on temporary overlay layers instead. The timing and
   intensity mirror the terminal window wake hit.
   ============================================================ */
body.tw-system-wake .tw-logo-orb.tw-brandmark,
body.tw-system-wake button.tw-logo-orb.tw-brandmark {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

body.tw-system-wake .tw-logo-orb.tw-brandmark::before,
body.tw-system-wake button.tw-logo-orb.tw-brandmark::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border: 1px solid transparent !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none;
  filter: none;
  opacity: 0;
  animation: tw-brandmark-terminal-border-wake 5.15s ease 0.62s both !important;
}

body.tw-system-wake .tw-logo-orb.tw-brandmark::after,
body.tw-system-wake button.tw-logo-orb.tw-brandmark::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: -7px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 8px !important;
  background: radial-gradient(ellipse at 50% 50%, rgba(93,208,104,0.24), rgba(93,208,104,0.075) 52%, rgba(0,0,0,0) 76%) !important;
  box-shadow: none !important;
  filter: blur(10px) !important;
  opacity: 0;
  animation: tw-brandmark-terminal-aura-wake 5.15s ease 0.62s both !important;
}

body.tw-system-wake .tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
body.tw-system-wake .tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
body.tw-system-wake button.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
body.tw-system-wake button.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb {
  position: relative !important;
  z-index: 2 !important;
  overflow: visible !important;
}

body.tw-system-wake .tw-logo-orb.tw-brandmark .tw-logo-glyph--orb::after,
body.tw-system-wake button.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: var(--accent) !important;
  -webkit-mask: var(--tw-glyph-url) center / contain no-repeat !important;
          mask: var(--tw-glyph-url) center / contain no-repeat !important;
  opacity: 0;
  filter: none;
  animation: tw-brandmark-terminal-glyph-wake 5.15s ease 0.62s both !important;
}

body.tw-system-wake .tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb::after,
body.tw-system-wake button.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: var(--accent) !important;
  -webkit-mask: var(--tw-wordmark-url) center / contain no-repeat !important;
          mask: var(--tw-wordmark-url) center / contain no-repeat !important;
  opacity: 0;
  filter: none;
  animation: tw-brandmark-terminal-glyph-wake 5.15s ease 0.62s both !important;
}

@keyframes tw-brandmark-terminal-border-wake {
  0% {
    opacity: 0;
    border-color: transparent;
    box-shadow: none;
    filter: brightness(0.95);
  }
  16% {
    opacity: 1;
    border-color: rgba(93,208,104,0.82);
    box-shadow:
      0 0 30px rgba(93,208,104,0.20),
      inset 0 0 20px rgba(93,208,104,0.055);
    filter: brightness(1.08);
  }
  54% {
    opacity: 1;
    border-color: rgba(93,208,104,0.40);
    box-shadow:
      0 0 24px rgba(93,208,104,0.12),
      inset 0 0 16px rgba(93,208,104,0.035);
  }
  100% {
    opacity: 0;
    border-color: transparent;
    box-shadow: none;
    filter: brightness(1);
  }
}

@keyframes tw-brandmark-terminal-aura-wake {
  0%   { opacity: 0; }
  16%  { opacity: 0.54; }
  54%  { opacity: 0.24; }
  100% { opacity: 0; }
}

@keyframes tw-brandmark-terminal-glyph-wake {
  0% {
    opacity: 0;
    filter: drop-shadow(0 0 0 rgba(93,208,104,0));
  }
  16% {
    opacity: 1;
    filter:
      drop-shadow(0 0 5px rgba(93,208,104,0.82))
      drop-shadow(0 0 14px rgba(93,208,104,0.38));
  }
  54% {
    opacity: 0.58;
    filter:
      drop-shadow(0 0 4px rgba(93,208,104,0.46))
      drop-shadow(0 0 10px rgba(93,208,104,0.20));
  }
  100% {
    opacity: 0;
    filter: drop-shadow(0 0 0 rgba(93,208,104,0));
  }
}

/* ============================================================
   TW intro wake timing refinement — earlier synced glow hit
   Starts every post-ELF glow hit from the same earlier beat, while keeping
   the ambient border beam disabled during the wake handoff.
   ============================================================ */
:root {
  --tw-intro-glow-delay: 0.42s;
}

html body.tw-system-wake > .frame {
  animation: tw-neon-border-wake 5.1s ease var(--tw-intro-glow-delay) both !important;
}

html body.tw-system-wake .terminal.main {
  animation: tw-neon-terminal-wake 5.15s ease var(--tw-intro-glow-delay) both !important;
}

html body.tw-system-wake .terminal.main .terminal-bar {
  animation: tw-neon-terminal-bar-wake 5.15s ease var(--tw-intro-glow-delay) both !important;
}

html body.tw-system-wake .audio-btn,
html body.tw-system-wake #menu-btn,
html body.tw-system-wake .audio-viz {
  animation: tw-neon-control-wake 4.8s ease var(--tw-intro-glow-delay) both !important;
}

/* Let the proxy layer do the brandmark glow so the normal hover/click rules
   stay untouched after the opening sequence. */
html body.tw-system-wake .tw-logo-orb.tw-brandmark,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark,
html body.tw-system-wake .tw-logo-orb.tw-home-restart,
html body.tw-system-wake button.tw-logo-orb.tw-home-restart {
  animation: none !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

/* Brandmark border glow: same attack/sustain/release/decay contour as
   tw-neon-terminal-wake, with only opacity added so the proxy disappears
   cleanly when the wake pass ends. */
html body.tw-system-wake .tw-logo-orb.tw-brandmark::before,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark::before,
html body.tw-system-wake .tw-logo-orb.tw-home-restart::before,
html body.tw-system-wake button.tw-logo-orb.tw-home-restart::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border: 1px solid transparent !important;
  border-radius: inherit !important;
  background: transparent !important;
  opacity: 0 !important;
  filter: none;
  box-shadow: none;
  animation: tw-brandmark-terminal-border-match 5.15s ease var(--tw-intro-glow-delay) both !important;
}

/* Soft spill around the button, timed to the same border envelope so it does
   not blink out early compared with the terminal frame. */
html body.tw-system-wake .tw-logo-orb.tw-brandmark::after,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark::after,
html body.tw-system-wake .tw-logo-orb.tw-home-restart::after,
html body.tw-system-wake button.tw-logo-orb.tw-home-restart::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: -8px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 9px !important;
  background: radial-gradient(ellipse at 50% 50%, rgba(93,208,104,0.26), rgba(93,208,104,0.08) 54%, rgba(0,0,0,0) 78%) !important;
  box-shadow: none !important;
  filter: blur(10px) !important;
  opacity: 0 !important;
  animation: tw-brandmark-terminal-aura-match 5.15s ease var(--tw-intro-glow-delay) both !important;
}

html body.tw-system-wake .tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
html body.tw-system-wake .tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
html body.tw-system-wake .tw-logo-orb.tw-home-restart .tw-logo-glyph--orb,
html body.tw-system-wake .tw-logo-orb.tw-home-restart .tw-wordmark-glyph--orb,
html body.tw-system-wake button.tw-logo-orb.tw-home-restart .tw-logo-glyph--orb,
html body.tw-system-wake button.tw-logo-orb.tw-home-restart .tw-wordmark-glyph--orb {
  position: relative !important;
  z-index: 2 !important;
  overflow: visible !important;
}

html body.tw-system-wake .tw-logo-orb.tw-brandmark .tw-logo-glyph--orb::after,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb::after,
html body.tw-system-wake .tw-logo-orb.tw-home-restart .tw-logo-glyph--orb::after,
html body.tw-system-wake button.tw-logo-orb.tw-home-restart .tw-logo-glyph--orb::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: var(--accent) !important;
  -webkit-mask: var(--tw-glyph-url) center / contain no-repeat !important;
          mask: var(--tw-glyph-url) center / contain no-repeat !important;
  opacity: 0 !important;
  filter: none;
  animation: tw-brandmark-terminal-glyph-match 5.15s ease var(--tw-intro-glow-delay) both !important;
}

html body.tw-system-wake .tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb::after,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb::after,
html body.tw-system-wake .tw-logo-orb.tw-home-restart .tw-wordmark-glyph--orb::after,
html body.tw-system-wake button.tw-logo-orb.tw-home-restart .tw-wordmark-glyph--orb::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: var(--accent) !important;
  -webkit-mask: var(--tw-wordmark-url) center / contain no-repeat !important;
          mask: var(--tw-wordmark-url) center / contain no-repeat !important;
  opacity: 0 !important;
  filter: none;
  animation: tw-brandmark-terminal-glyph-match 5.15s ease var(--tw-intro-glow-delay) both !important;
}

@keyframes tw-brandmark-terminal-border-match {
  0% {
    opacity: 1;
    border-color: transparent;
    box-shadow: none;
    filter: brightness(0.95);
  }
  16% {
    opacity: 1;
    border-color: rgba(93,208,104,0.82);
    box-shadow:
      0 0 30px rgba(93,208,104,0.20),
      inset 0 0 20px rgba(93,208,104,0.055);
    filter: brightness(1.08);
  }
  54% {
    opacity: 1;
    border-color: rgba(93,208,104,0.40);
    box-shadow:
      0 0 24px rgba(93,208,104,0.12),
      inset 0 0 16px rgba(93,208,104,0.035);
    filter: brightness(1);
  }
  99% {
    opacity: 1;
    border-color: transparent;
    box-shadow: none;
    filter: brightness(1);
  }
  100% {
    opacity: 0;
    border-color: transparent;
    box-shadow: none;
    filter: brightness(1);
  }
}

@keyframes tw-brandmark-terminal-aura-match {
  0%   { opacity: 0; }
  16%  { opacity: 0.54; }
  54%  { opacity: 0.24; }
  99%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes tw-brandmark-terminal-glyph-match {
  0% {
    opacity: 0;
    filter: drop-shadow(0 0 0 rgba(93,208,104,0));
  }
  16% {
    opacity: 1;
    filter:
      drop-shadow(0 0 5px rgba(93,208,104,0.82))
      drop-shadow(0 0 14px rgba(93,208,104,0.38));
  }
  54% {
    opacity: 0.58;
    filter:
      drop-shadow(0 0 4px rgba(93,208,104,0.46))
      drop-shadow(0 0 10px rgba(93,208,104,0.20));
  }
  99% {
    opacity: 0;
    filter: drop-shadow(0 0 0 rgba(93,208,104,0));
  }
  100% {
    opacity: 0;
    filter: drop-shadow(0 0 0 rgba(93,208,104,0));
  }
}


/* ============================================================
   TW intro wake final repair — earlier sync + visible brandmark glow
   ------------------------------------------------------------
   The earlier proxy tried to animate child glyph layers, but the brandmark
   normal-state rules intentionally suppress those layers so the button stays
   clean after clicks. This version draws the wake pass from the brandmark
   button itself: one border/glow proxy and one masked logo+wordmark proxy.
   It starts the entire interface wake sooner after the ELF click, while all
   wake hits still begin together from the same timing variable.
   ============================================================ */
:root {
  --tw-intro-glow-delay: 0.06s;
  --tw-brand-glyph-mask: url('assets/img/tw-glyph-mask.png');
  --tw-brand-wordmark-mask: url('assets/img/tw-wordmark-mask.png');
}

html body.tw-system-wake > .frame {
  animation: tw-neon-border-wake 5.1s ease var(--tw-intro-glow-delay) both !important;
}

html body.tw-system-wake .terminal.main {
  animation: tw-neon-terminal-wake 5.15s ease var(--tw-intro-glow-delay) both !important;
}

html body.tw-system-wake .terminal.main .terminal-bar {
  animation: tw-neon-terminal-bar-wake 5.15s ease var(--tw-intro-glow-delay) both !important;
}

html body.tw-system-wake .audio-btn,
html body.tw-system-wake #menu-btn,
html body.tw-system-wake .audio-viz {
  animation: tw-neon-control-wake 4.8s ease var(--tw-intro-glow-delay) both !important;
}

/* Hide the ambient travelling beams during the one-time wake hit so the
   border flash reads cleanly, then the beams resume once tw-system-wake drops. */
html body.tw-system-wake > .frame::before,
html body.tw-system-wake .terminal.main::before {
  animation: none !important;
  opacity: 0 !important;
  filter: none !important;
}

/* Brandmark parent: create a clean stacking context, but do not alter the
   regular hover/click behavior after the wake class is gone. */
html body.tw-system-wake button.tw-logo-orb.tw-brandmark,
html body.tw-system-wake .tw-logo-orb.tw-brandmark,
html body.tw-system-wake button.tw-logo-orb.tw-home-restart,
html body.tw-system-wake .tw-logo-orb.tw-home-restart {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  animation: none !important;
}

html body.tw-system-wake button.tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
html body.tw-system-wake .tw-logo-orb.tw-brandmark .tw-logo-glyph--orb,
html body.tw-system-wake .tw-logo-orb.tw-brandmark .tw-wordmark-glyph--orb,
html body.tw-system-wake button.tw-logo-orb.tw-home-restart .tw-logo-glyph--orb,
html body.tw-system-wake button.tw-logo-orb.tw-home-restart .tw-wordmark-glyph--orb,
html body.tw-system-wake .tw-logo-orb.tw-home-restart .tw-logo-glyph--orb,
html body.tw-system-wake .tw-logo-orb.tw-home-restart .tw-wordmark-glyph--orb {
  position: relative !important;
  z-index: 2 !important;
}

/* Border/glow proxy. This intentionally uses the same envelope as the live
   terminal border wake: 0 → 16 attack, 16 → 54 sustain/release, 54 → 100 decay. */
html body.tw-system-wake button.tw-logo-orb.tw-brandmark::before,
html body.tw-system-wake .tw-logo-orb.tw-brandmark::before,
html body.tw-system-wake button.tw-logo-orb.tw-home-restart::before,
html body.tw-system-wake .tw-logo-orb.tw-home-restart::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: 4 !important;
  pointer-events: none !important;
  border: 1px solid transparent !important;
  border-radius: inherit !important;
  background: transparent !important;
  opacity: 0 !important;
  filter: none !important;
  box-shadow: none !important;
  mix-blend-mode: screen !important;
  animation: tw-brandmark-terminal-border-visible 5.15s ease var(--tw-intro-glow-delay) both !important;
}

/* Logo + wordmark proxy drawn from the button itself. This avoids child-level
   pseudo-element suppression and keeps the glow perfectly aligned to the mark. */
html body.tw-system-wake button.tw-logo-orb.tw-brandmark::after,
html body.tw-system-wake .tw-logo-orb.tw-brandmark::after,
html body.tw-system-wake button.tw-logo-orb.tw-home-restart::after,
html body.tw-system-wake .tw-logo-orb.tw-home-restart::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background: var(--accent) !important;
  opacity: 0 !important;
  filter: none !important;
  box-shadow: none !important;
  mix-blend-mode: screen !important;
  -webkit-mask-image: var(--tw-brand-glyph-mask), var(--tw-brand-wordmark-mask) !important;
          mask-image: var(--tw-brand-glyph-mask), var(--tw-brand-wordmark-mask) !important;
  -webkit-mask-position: 10px center, 43px center !important;
          mask-position: 10px center, 43px center !important;
  -webkit-mask-size: 25px 18px, 152px 18px !important;
          mask-size: 25px 18px, 152px 18px !important;
  -webkit-mask-repeat: no-repeat, no-repeat !important;
          mask-repeat: no-repeat, no-repeat !important;
  animation: tw-brandmark-terminal-glyph-visible 5.15s ease var(--tw-intro-glow-delay) both !important;
}

@keyframes tw-brandmark-terminal-border-visible {
  0% {
    opacity: 0;
    border-color: transparent;
    box-shadow: none;
    filter: brightness(0.95);
  }
  16% {
    opacity: 1;
    border-color: rgba(93,208,104,0.82);
    box-shadow:
      0 0 30px rgba(93,208,104,0.20),
      inset 0 0 20px rgba(93,208,104,0.055);
    filter: brightness(1.08);
  }
  54% {
    opacity: 1;
    border-color: rgba(93,208,104,0.40);
    box-shadow:
      0 0 24px rgba(93,208,104,0.12),
      inset 0 0 16px rgba(93,208,104,0.035);
    filter: brightness(1);
  }
  100% {
    opacity: 0;
    border-color: transparent;
    box-shadow: none;
    filter: brightness(1);
  }
}

@keyframes tw-brandmark-terminal-glyph-visible {
  0% {
    opacity: 0;
    filter: drop-shadow(0 0 0 rgba(93,208,104,0));
  }
  16% {
    opacity: 1;
    filter:
      drop-shadow(0 0 5px rgba(93,208,104,0.82))
      drop-shadow(0 0 14px rgba(93,208,104,0.38));
  }
  54% {
    opacity: 0.58;
    filter:
      drop-shadow(0 0 4px rgba(93,208,104,0.46))
      drop-shadow(0 0 10px rgba(93,208,104,0.20));
  }
  100% {
    opacity: 0;
    filter: drop-shadow(0 0 0 rgba(93,208,104,0));
  }
}

/* ============================================================
   TW surgical fix — brandmark wake glow cannot be suppressed
   ------------------------------------------------------------
   The brandmark button has several important cleanup rules that correctly keep
   the normal hover/click state clean. Those same rules can also suppress a
   traditional keyframed box-shadow/border animation. This pass drives the glow
   with inherited custom properties instead: the important declarations stay in
   control, but their values are animated by --tw-brand-wake.
   ============================================================ */
@property --tw-brand-wake {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --tw-brand-glyph-wake {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

html body.tw-system-wake .topbar-left button.tw-logo-orb.tw-brandmark.tw-home-restart,
html body.tw-system-wake .topbar-left .tw-logo-orb.tw-brandmark.tw-home-restart,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark.tw-home-restart,
html body.tw-system-wake .tw-logo-orb.tw-brandmark.tw-home-restart {
  --tw-brand-wake: 0;
  --tw-brand-glyph-wake: 0;
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  color: var(--muted) !important;
  background: transparent !important;
  transform: none !important;
  animation: tw-brandmark-wake-driver 5.15s ease var(--tw-intro-glow-delay) both !important;

  /* Direct element glow, driven by the animated custom prop so important
     cleanup rules no longer block the wake hit. */
  border-color: rgba(93, 208, 104, calc(0.82 * var(--tw-brand-wake))) !important;
  box-shadow:
    0 0 calc(30px * var(--tw-brand-wake)) rgba(93, 208, 104, calc(0.22 * var(--tw-brand-wake))),
    0 0 calc(64px * var(--tw-brand-wake)) rgba(93, 208, 104, calc(0.13 * var(--tw-brand-wake))),
    inset 0 0 calc(20px * var(--tw-brand-wake)) rgba(93, 208, 104, calc(0.06 * var(--tw-brand-wake))) !important;
  filter: brightness(calc(1 + (0.08 * var(--tw-brand-wake)))) !important;
}

/* Border trace layer: lives above the button border, but below the glyphs. */
html body.tw-system-wake .topbar-left button.tw-logo-orb.tw-brandmark.tw-home-restart::before,
html body.tw-system-wake .topbar-left .tw-logo-orb.tw-brandmark.tw-home-restart::before,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark.tw-home-restart::before,
html body.tw-system-wake .tw-logo-orb.tw-brandmark.tw-home-restart::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: -2px !important;
  z-index: 6 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  border: 1px solid rgba(93, 208, 104, calc(0.95 * var(--tw-brand-wake))) !important;
  background: transparent !important;
  opacity: var(--tw-brand-wake) !important;
  box-shadow:
    0 0 calc(24px * var(--tw-brand-wake)) rgba(93, 208, 104, calc(0.46 * var(--tw-brand-wake))),
    0 0 calc(58px * var(--tw-brand-wake)) rgba(93, 208, 104, calc(0.22 * var(--tw-brand-wake))),
    inset 0 0 calc(18px * var(--tw-brand-wake)) rgba(93, 208, 104, calc(0.075 * var(--tw-brand-wake))) !important;
  filter: none !important;
  mix-blend-mode: screen !important;
  animation: none !important;
}

/* Soft spill behind the brandmark. This replaces the older hidden ::after
   without touching the normal button state after tw-system-wake is removed. */
html body.tw-system-wake .topbar-left button.tw-logo-orb.tw-brandmark.tw-home-restart::after,
html body.tw-system-wake .topbar-left .tw-logo-orb.tw-brandmark.tw-home-restart::after,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark.tw-home-restart::after,
html body.tw-system-wake .tw-logo-orb.tw-brandmark.tw-home-restart::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: -9px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 10px !important;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(93, 208, 104, calc(0.34 * var(--tw-brand-wake))) 0%,
      rgba(93, 208, 104, calc(0.16 * var(--tw-brand-wake))) 46%,
      rgba(93, 208, 104, 0) 76%) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  filter: blur(11px) !important;
  mix-blend-mode: screen !important;
  animation: none !important;
}

html body.tw-system-wake .topbar-left button.tw-logo-orb.tw-brandmark.tw-home-restart .tw-logo-glyph--orb,
html body.tw-system-wake .topbar-left button.tw-logo-orb.tw-brandmark.tw-home-restart .tw-wordmark-glyph--orb,
html body.tw-system-wake .topbar-left .tw-logo-orb.tw-brandmark.tw-home-restart .tw-logo-glyph--orb,
html body.tw-system-wake .topbar-left .tw-logo-orb.tw-brandmark.tw-home-restart .tw-wordmark-glyph--orb,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark.tw-home-restart .tw-logo-glyph--orb,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark.tw-home-restart .tw-wordmark-glyph--orb,
html body.tw-system-wake .tw-logo-orb.tw-brandmark.tw-home-restart .tw-logo-glyph--orb,
html body.tw-system-wake .tw-logo-orb.tw-brandmark.tw-home-restart .tw-wordmark-glyph--orb {
  position: relative !important;
  z-index: 8 !important;
  overflow: visible !important;
  animation: none !important;
  color: currentColor !important;
  background: currentColor !important;
  filter:
    drop-shadow(0 0 calc(5px * var(--tw-brand-glyph-wake)) rgba(93, 208, 104, calc(0.82 * var(--tw-brand-glyph-wake))))
    drop-shadow(0 0 calc(16px * var(--tw-brand-glyph-wake)) rgba(93, 208, 104, calc(0.36 * var(--tw-brand-glyph-wake)))) !important;
}

/* Draw a green duplicate directly on top of the actual logo and wordmark. This
   makes the hit visible even when the base mark is gray and even if parent
   box-shadow/filter animation is ignored by the browser. */
html body.tw-system-wake .topbar-left button.tw-logo-orb.tw-brandmark.tw-home-restart .tw-logo-glyph--orb::after,
html body.tw-system-wake .topbar-left .tw-logo-orb.tw-brandmark.tw-home-restart .tw-logo-glyph--orb::after,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark.tw-home-restart .tw-logo-glyph--orb::after,
html body.tw-system-wake .tw-logo-orb.tw-brandmark.tw-home-restart .tw-logo-glyph--orb::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: var(--accent) !important;
  opacity: var(--tw-brand-glyph-wake) !important;
  -webkit-mask: var(--tw-glyph-url) center / contain no-repeat !important;
          mask: var(--tw-glyph-url) center / contain no-repeat !important;
  filter:
    drop-shadow(0 0 calc(6px * var(--tw-brand-glyph-wake)) rgba(93, 208, 104, calc(0.92 * var(--tw-brand-glyph-wake))))
    drop-shadow(0 0 calc(18px * var(--tw-brand-glyph-wake)) rgba(93, 208, 104, calc(0.42 * var(--tw-brand-glyph-wake)))) !important;
  mix-blend-mode: screen !important;
}

html body.tw-system-wake .topbar-left button.tw-logo-orb.tw-brandmark.tw-home-restart .tw-wordmark-glyph--orb::after,
html body.tw-system-wake .topbar-left .tw-logo-orb.tw-brandmark.tw-home-restart .tw-wordmark-glyph--orb::after,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark.tw-home-restart .tw-wordmark-glyph--orb::after,
html body.tw-system-wake .tw-logo-orb.tw-brandmark.tw-home-restart .tw-wordmark-glyph--orb::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: var(--accent) !important;
  opacity: var(--tw-brand-glyph-wake) !important;
  -webkit-mask: var(--tw-wordmark-url) center / contain no-repeat !important;
          mask: var(--tw-wordmark-url) center / contain no-repeat !important;
  filter:
    drop-shadow(0 0 calc(5px * var(--tw-brand-glyph-wake)) rgba(93, 208, 104, calc(0.82 * var(--tw-brand-glyph-wake))))
    drop-shadow(0 0 calc(15px * var(--tw-brand-glyph-wake)) rgba(93, 208, 104, calc(0.34 * var(--tw-brand-glyph-wake)))) !important;
  mix-blend-mode: screen !important;
}

@keyframes tw-brandmark-wake-driver {
  0% {
    --tw-brand-wake: 0;
    --tw-brand-glyph-wake: 0;
  }
  16% {
    --tw-brand-wake: 1;
    --tw-brand-glyph-wake: 1;
  }
  54% {
    --tw-brand-wake: 0.48;
    --tw-brand-glyph-wake: 0.58;
  }
  100% {
    --tw-brand-wake: 0;
    --tw-brand-glyph-wake: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.tw-system-wake .topbar-left button.tw-logo-orb.tw-brandmark.tw-home-restart,
  html body.tw-system-wake .topbar-left .tw-logo-orb.tw-brandmark.tw-home-restart {
    animation: none !important;
    --tw-brand-wake: 0;
    --tw-brand-glyph-wake: 0;
  }
}

/* ============================================================
   TW cleanup — keep brandmark wake overlay locked to the button
   The forced wake layer reused ::before, which still inherited the old
   decorative sweep transform from the base logo orb. Reset every transform
   longhand so the glow border sits squarely on the Thrill Wave button.
   ============================================================ */
html body.tw-system-wake .topbar-left button.tw-logo-orb.tw-brandmark.tw-home-restart::before,
html body.tw-system-wake .topbar-left .tw-logo-orb.tw-brandmark.tw-home-restart::before,
html body.tw-system-wake button.tw-logo-orb.tw-brandmark.tw-home-restart::before,
html body.tw-system-wake .tw-logo-orb.tw-brandmark.tw-home-restart::before {
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  transform-origin: 50% 50% !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  clip-path: none !important;
  box-sizing: border-box !important;
}

/* ============================================================
   TW secret break room easter egg
   The main terminal traffic-light cluster opens the hidden arcade.
   ============================================================ */
.terminal.main .terminal-bar .terminal-dots {
  cursor: pointer;
  padding: 8px;
  margin: -8px -8px -8px 0;
  border-radius: 999px;
  transition: filter 160ms ease, background 160ms ease;
}

.terminal.main .terminal-bar .terminal-dots:hover,
.terminal.main .terminal-bar .terminal-dots:focus-visible {
  background: rgba(93, 208, 104, 0.06);
  filter: drop-shadow(0 0 8px rgba(93, 208, 104, 0.42));
  outline: none;
}

.terminal.main .terminal-bar .terminal-dots:hover .dot,
.terminal.main .terminal-bar .terminal-dots:focus-visible .dot {
  background: rgba(93, 208, 104, 0.45);
}

.terminal.main .terminal-bar .terminal-dots:hover .dot.live,
.terminal.main .terminal-bar .terminal-dots:focus-visible .dot.live {
  background: var(--accent);
  box-shadow: 0 0 5px rgba(93, 208, 104, 0.72), 0 0 16px rgba(93, 208, 104, 0.38);
}

/* ============================================================
   TW integrated secret break room
   Lives behind the main terminal and appears when the traffic light minimizes it.
   ============================================================ */
.stage {
  position: relative !important;
  min-height: var(--term-h) !important;
}

.terminal.main {
  position: relative !important;
  z-index: 2 !important;
}

.terminal.side {
  position: relative !important;
  z-index: 3 !important;
}

.tw-breakroom {
  position: absolute;
  left: 0;
  top: 54px;
  width: var(--term-w);
  height: calc(var(--term-h) - 54px);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  color: var(--fg);
  font-family: var(--font);
  transform: translateY(-10px);
  filter: blur(1px) brightness(0.86);
  transition: opacity 220ms ease 120ms, filter 320ms ease, transform 460ms cubic-bezier(.16, 1, .3, 1);
}

/* CRT banding / hidden room atmosphere */
.tw-breakroom::before,
.tw-breakroom::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.tw-breakroom::before {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 1px,
      rgba(93,208,104,0.016) 2px,
      transparent 5px
    ),
    linear-gradient(110deg, transparent 0%, rgba(93,208,104,0.075) 44%, rgba(255,255,255,0.055) 52%, transparent 76%);
  opacity: 0;
  mix-blend-mode: screen;
}

.tw-breakroom::after {
  height: 34px;
  inset: auto 0 100% 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,255,255,0.08) 28%,
    rgba(93,208,104,0.28) 48%,
    rgba(255,255,255,0.07) 62%,
    transparent 100%
  );
  box-shadow: 0 0 24px rgba(93,208,104,0.22), 0 0 55px rgba(255,255,255,0.08);
  opacity: 0;
}

body.tw-terminal-minimized .tw-breakroom {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  filter: none;
}

body.tw-terminal-minimized .tw-breakroom::before {
  opacity: 1;
  animation: tw-breakroom-banding 7.5s steps(8, end) infinite;
}

body.tw-terminal-minimized .tw-breakroom::after {
  display: none;
  animation: none;
}

.tw-breakroom-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 22px 30px 16px;
  overflow-y: auto;
  overflow-x: hidden;
}

.tw-breakroom-inner::before {
  content: 'off-duty mode';
  position: absolute;
  right: 24px;
  bottom: 14px;
  z-index: -1;
  color: rgba(245,245,245,0.035);
  font: 700 28px/1 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-6deg);
  pointer-events: none;
}

.tw-breakroom-copy.page-content.terminal-copy {
  font-size: 14px !important;
  line-height: 1.58 !important;
  color: var(--fg) !important;
  margin: 0 0 14px !important;
  max-width: 100% !important;
  text-shadow: 0 0 6px rgba(255,255,255,0.7), 0 0 18px rgba(255,255,255,0.28), 0 0 32px rgba(93,208,104,0.13);
}

.tw-breakroom-copy.page-content.terminal-copy::before {
  text-shadow: 0 0 7px rgba(255,255,255,0.72), 0 0 18px rgba(93,208,104,0.26);
}

.tw-breakroom-copy.page-content.terminal-copy .line.is-typing::after,
.tw-breakroom-copy.page-content.terminal-copy .line.cursor-live::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 0.92em;
  margin-left: 4px;
  vertical-align: -1px;
  background: var(--fg);
  box-shadow: 0 0 8px rgba(255,255,255,0.82), 0 0 18px rgba(93,208,104,0.34);
  animation: tw-breakroom-cursor 0.72s steps(2, end) infinite;
}

.tw-breakroom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 13px;
}

.tw-breakroom-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 138px;
  padding: 11px 9px 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,0.11), transparent 21%),
    linear-gradient(145deg, rgba(255,255,255,0.038), rgba(0,0,0,0.2) 38%, rgba(93,208,104,0.035));
  color: var(--fg);
  text-decoration: none;
  font: 400 11px/1.45 var(--font);
  letter-spacing: 0.3px;
  opacity: 0.42;
  transform: translateY(8px) scale(0.985);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.018), 0 0 0 rgba(93,208,104,0);
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease, transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.tw-breakroom-card::before,
.tw-breakroom-card::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.tw-breakroom-card > span {
  position: relative;
  z-index: 2;
}

.tw-breakroom-card::before {
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: 0.35;
  image-rendering: pixelated;
}

.tw-breakroom-card::after {
  z-index: 4;
  top: -40%;
  left: -85%;
  width: 48%;
  height: 190%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), rgba(255,255,255,0.06), transparent);
  transform: translateX(-160%) rotate(18deg);
  opacity: 0;
}

body.tw-terminal-minimized .tw-breakroom-card {
  animation: tw-breakroom-card-rise 420ms cubic-bezier(.2,.9,.2,1) both;
}

body.tw-terminal-minimized .tw-breakroom-card::after {
  animation: tw-breakroom-card-glare 9s cubic-bezier(.2,.7,.1,1) infinite;
}

body.tw-terminal-minimized .tw-breakroom-card:nth-child(1) {
  animation-delay: 0.82s;
}
body.tw-terminal-minimized .tw-breakroom-card:nth-child(1)::after {
  animation-delay: 1.15s;
}

body.tw-terminal-minimized .tw-breakroom-card:nth-child(2) {
  animation-delay: 0.96s;
}
body.tw-terminal-minimized .tw-breakroom-card:nth-child(2)::after {
  animation-delay: 4.15s;
}

body.tw-terminal-minimized .tw-breakroom-card:nth-child(3) {
  animation-delay: 1.10s;
}
body.tw-terminal-minimized .tw-breakroom-card:nth-child(3)::after {
  animation-delay: 7.15s;
}

.tw-breakroom-card:hover,
.tw-breakroom-card:focus-visible {
  outline: none;
  color: var(--accent);
  border-color: var(--accent);
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,0.15), transparent 22%),
    linear-gradient(145deg, rgba(255,255,255,0.05), rgba(0,0,0,0.18) 36%, rgba(93,208,104,0.095));
  transform: translateY(-2px) scale(1.012);
  box-shadow: 0 0 18px rgba(93, 208, 104, 0.12), inset 0 0 0 1px rgba(93,208,104,0.08);
}

.tw-breakroom-card__sprite {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0 0 8px 2px;
  border: 1px solid rgba(245,245,245,0.18);
  border-radius: 3px;
  background: rgba(0,0,0,0.38);
  font-size: 18px;
  line-height: 1;
  filter: grayscale(0.1) drop-shadow(0 0 7px rgba(255,255,255,0.18));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035), 0 0 10px rgba(255,255,255,0.05);
  image-rendering: pixelated;
}

body.tw-terminal-minimized .tw-breakroom-card__sprite {
  animation: tw-breakroom-sprite-idle 2.8s steps(2, end) infinite;
}

body.tw-terminal-minimized .tw-breakroom-card:nth-child(2) .tw-breakroom-card__sprite { animation-delay: 0.5s; }
body.tw-terminal-minimized .tw-breakroom-card:nth-child(3) .tw-breakroom-card__sprite { animation-delay: 1s; }

.tw-breakroom-card__num,
.tw-breakroom-card__copy {
  color: var(--muted);
}

.tw-breakroom-card__num {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: 1.2px;
}

.tw-breakroom-card__title {
  display: block;
  max-width: 100%;
  color: var(--fg);
  font-size: 13px;
  line-height: 1.15;
  margin-bottom: 8px;
  text-transform: lowercase;
  text-shadow: 0 0 5px rgba(255,255,255,0.16);
}

.tw-breakroom-card:hover .tw-breakroom-card__title,
.tw-breakroom-card:focus-visible .tw-breakroom-card__title,
.tw-breakroom-card:hover .tw-breakroom-card__launch,
.tw-breakroom-card:focus-visible .tw-breakroom-card__launch {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(93,208,104,0.35);
}

.tw-breakroom-card__copy {
  display: block;
  flex: 1;
  padding-right: 2px;
}

.tw-breakroom-card__launch {
  display: block;
  margin-top: 10px;
  color: var(--fg);
  font-size: 10px;
}

.tw-breakroom-exit {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: 400 14px/1.58 var(--font);
  letter-spacing: 0.3px;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  text-shadow: 0 0 6px rgba(255,255,255,0.7), 0 0 18px rgba(255,255,255,0.28), 0 0 32px rgba(93,208,104,0.13);
}

.tw-breakroom-exit:hover,
.tw-breakroom-exit:focus-visible {
  color: var(--accent);
  text-decoration: none;
  outline: none;
}

body.tw-terminal-minimized .below-bar {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.tw-terminal-minimized .content {
  align-items: center !important;
}

body.tw-terminal-minimized .stage-wrap {
  transform: none !important;
}

body.tw-terminal-minimized .terminal.main {
  transform: translateY(0) scaleX(0.988) !important;
}

body.tw-terminal-minimized .terminal.main .terminal-body {
  opacity: 0 !important;
  pointer-events: none !important;
}

@keyframes tw-breakroom-banding {
  0%, 100% { transform: translateY(0); opacity: 0.94; }
  18% { transform: translateY(2px); opacity: 1; }
  42% { transform: translateY(-1px); opacity: 0.76; }
  64% { transform: translateY(3px); opacity: 1; }
}

@keyframes tw-breakroom-scanline {
  0%, 68% { transform: translateY(0); opacity: 0; }
  72% { opacity: 0.92; }
  92% { transform: translateY(calc(var(--term-h) - 54px + 42px)); opacity: 0.55; }
  100% { transform: translateY(calc(var(--term-h) - 54px + 42px)); opacity: 0; }
}

@keyframes tw-breakroom-cursor {
  0%, 46% { opacity: 1; }
  47%, 100% { opacity: 0; }
}

@keyframes tw-breakroom-card-rise {
  0% { opacity: 0; transform: translateY(11px) scale(0.972); filter: blur(1px); }
  72% { opacity: 1; transform: translateY(-1px) scale(1.005); filter: none; }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}

@keyframes tw-breakroom-card-glare {
  0%, 12%, 100% { transform: translateX(-170%) rotate(18deg); opacity: 0; }
  3% { opacity: 0.72; }
  8% { transform: translateX(430%) rotate(18deg); opacity: 0; }
}

@keyframes tw-breakroom-sprite-idle {
  0%, 100% { transform: translateY(0); filter: grayscale(0.1) drop-shadow(0 0 6px rgba(255,255,255,0.1)); }
  50% { transform: translateY(-1px); filter: grayscale(0.1) drop-shadow(0 0 8px rgba(93,208,104,0.2)); }
}

@media (max-width: 820px) {
  .tw-breakroom {
    top: 50px;
    height: calc(var(--term-h) - 50px);
  }

  .tw-breakroom-inner {
    padding: 20px 20px 12px;
  }

  .tw-breakroom-grid {
    gap: 8px;
  }

  .tw-breakroom-card {
    min-height: 126px;
    padding: 10px 8px;
  }

  .tw-breakroom-card__sprite {
    width: 26px;
    height: 26px;
    margin-bottom: 7px;
    font-size: 16px;
  }

  .tw-breakroom-card__title {
    font-size: 12px;
  }

  .tw-breakroom-card__copy {
    font-size: 10px;
  }
}

@media (max-width: 600px) {
  .tw-breakroom {
    top: 47px;
    height: calc(var(--term-h) - 47px);
  }

  .tw-breakroom-inner {
    padding: 14px 18px 12px;
  }

  .tw-breakroom-copy.page-content.terminal-copy,
  .tw-breakroom-exit {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .tw-breakroom-grid {
    grid-template-columns: 1fr;
  }

  .tw-breakroom-card {
    min-height: 74px;
    padding-right: 10px;
  }

  .tw-breakroom-card__copy {
    display: none;
  }

  .tw-breakroom-card__launch {
    margin-top: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tw-terminal-minimized .tw-breakroom::before,
  body.tw-terminal-minimized .tw-breakroom::after,
  body.tw-terminal-minimized .tw-breakroom-card,
  body.tw-terminal-minimized .tw-breakroom-card::after,
  body.tw-terminal-minimized .tw-breakroom-card__sprite,
  .tw-breakroom-copy.page-content.terminal-copy .line.is-typing::after,
  .tw-breakroom-copy.page-content.terminal-copy .line.cursor-live::after {
    animation: none !important;
  }

  body.tw-terminal-minimized .tw-breakroom-card {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   TW break room refinement: clipped glow/banding + clickable game tiles
   ============================================================ */
.tw-breakroom,
.tw-breakroom-inner {
  background: transparent !important;
}

/* Keep the room background plain black. The CRT/BIOs energy now lives only on the copy/cards. */
.tw-breakroom::before,
.tw-breakroom::after,
.tw-breakroom-inner::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  animation: none !important;
  background: none !important;
}

.tw-breakroom-copy.page-content.terminal-copy {
  text-shadow:
    0 0 4px rgba(255,255,255,1),
    0 0 11px rgba(255,255,255,0.78),
    0 0 22px rgba(255,255,255,0.34),
    0 0 34px rgba(93,208,104,0.18) !important;
  animation: tw-breakroom-element-band 6.6s steps(7, end) infinite;
}

.tw-breakroom-copy.page-content.terminal-copy::before {
  text-shadow:
    0 0 5px rgba(255,255,255,1),
    0 0 14px rgba(255,255,255,0.72),
    0 0 26px rgba(93,208,104,0.34) !important;
}

.tw-breakroom-copy.page-content.terminal-copy .line.is-typing::after,
.tw-breakroom-copy.page-content.terminal-copy .line.cursor-live::after {
  box-shadow:
    0 0 6px rgba(255,255,255,1),
    0 0 15px rgba(255,255,255,0.82),
    0 0 26px rgba(93,208,104,0.44) !important;
}

.tw-breakroom-card {
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.028),
    inset 0 0 22px rgba(255,255,255,0.026),
    0 0 20px rgba(255,255,255,0.03),
    0 0 24px rgba(93,208,104,0.055) !important;
}

body.tw-terminal-minimized .tw-breakroom-card {
  animation-name: tw-breakroom-card-rise, tw-breakroom-element-band !important;
  animation-duration: 420ms, 7.4s !important;
  animation-timing-function: cubic-bezier(.2,.9,.2,1), steps(8, end) !important;
  animation-fill-mode: both, none !important;
  animation-iteration-count: 1, infinite !important;
}

.tw-breakroom-card:hover,
.tw-breakroom-card:focus-visible {
  box-shadow:
    0 0 16px rgba(255,255,255,0.11),
    0 0 30px rgba(93,208,104,0.17),
    inset 0 0 0 1px rgba(93,208,104,0.13),
    inset 0 0 24px rgba(255,255,255,0.045) !important;
}

.tw-breakroom-card__sprite,
.tw-breakroom-card__title,
.tw-breakroom-card__launch,
.tw-breakroom-exit {
  text-shadow:
    0 0 4px rgba(255,255,255,0.86),
    0 0 12px rgba(255,255,255,0.38),
    0 0 22px rgba(93,208,104,0.16) !important;
}

.tw-breakroom-exit {
  text-decoration: none !important;
  animation: tw-breakroom-element-band 7s steps(7, end) infinite;
}

.tw-breakroom-launching .tw-breakroom-card:not(:hover) {
  opacity: 0.55 !important;
}

.tw-breakroom-launching .tw-breakroom-card:hover,
.tw-breakroom-launching .tw-breakroom-card:focus-visible {
  transform: translateY(-2px) scale(1.025) !important;
  filter: brightness(1.18) !important;
}

/* The transparent minimized terminal should not block clicks on the hidden room. */
body.tw-terminal-minimized .terminal.main {
  pointer-events: none !important;
}

body.tw-terminal-minimized .terminal.main .terminal-bar,
body.tw-terminal-minimized .terminal.main .terminal-bar *,
body.tw-terminal-minimized .terminal.main .terminal-dots,
body.tw-terminal-minimized .terminal.main .terminal-dots * {
  pointer-events: auto !important;
}

body.tw-terminal-minimized .terminal.main .terminal-body {
  pointer-events: none !important;
}

@keyframes tw-breakroom-element-band {
  0%, 100% { filter: brightness(1) contrast(1); opacity: 1; }
  16% { filter: brightness(1.22) contrast(1.1); opacity: 0.98; }
  28% { filter: brightness(0.94) contrast(1.05); opacity: 0.94; }
  47% { filter: brightness(1.14) contrast(1.18); opacity: 1; }
  71% { filter: brightness(0.9) contrast(1.08); opacity: 0.96; }
  84% { filter: brightness(1.28) contrast(1.12); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-breakroom-copy.page-content.terminal-copy,
  .tw-breakroom-exit {
    animation: none !important;
  }

  body.tw-terminal-minimized .tw-breakroom-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   TW break room tile launch hardening
   Keeps the minimized terminal elegant while making the cards
   the top clickable layer in the room.
   ============================================================ */
body.tw-terminal-minimized .tw-breakroom {
  z-index: 6 !important;
  pointer-events: auto !important;
}

body.tw-terminal-minimized .tw-breakroom-inner,
body.tw-terminal-minimized .tw-breakroom-grid,
body.tw-terminal-minimized .tw-breakroom-card,
body.tw-terminal-minimized .tw-breakroom-card * {
  pointer-events: auto !important;
}

body.tw-terminal-minimized .tw-breakroom-card {
  position: relative !important;
  z-index: 7 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(93,208,104,0.16);
}

body.tw-terminal-minimized .tw-breakroom-card.is-launching {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  transform: translateY(-3px) scale(1.028) !important;
  filter: brightness(1.22) !important;
  box-shadow:
    0 0 18px rgba(255,255,255,0.16),
    0 0 36px rgba(93,208,104,0.22),
    inset 0 0 0 1px rgba(93,208,104,0.18),
    inset 0 0 28px rgba(255,255,255,0.06) !important;
}

body.tw-terminal-minimized .terminal.main {
  z-index: 5 !important;
  pointer-events: none !important;
}

body.tw-terminal-minimized .terminal.main .terminal-bar,
body.tw-terminal-minimized .terminal.main .terminal-bar *,
body.tw-terminal-minimized .terminal.main .terminal-dots,
body.tw-terminal-minimized .terminal.main .terminal-dots * {
  pointer-events: auto !important;
}


/* ============================================================
   TW break room game-screen placeholder pass
   Keeps the social/footer line alive and turns the room into a
   clean hidden game surface before we wire in the playable builds.
   ============================================================ */
body.tw-terminal-minimized .below-bar {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  position: relative !important;
  z-index: 12 !important;
  filter: none !important;
}

body.tw-terminal-minimized .below-bar a,
body.tw-terminal-minimized .below-bar .sep {
  pointer-events: auto !important;
}

body.tw-terminal-minimized .stage-wrap {
  position: relative !important;
}

body.tw-terminal-minimized .tw-breakroom {
  z-index: 8 !important;
  pointer-events: auto !important;
}

.tw-breakroom-inner {
  position: relative !important;
}

.tw-breakroom-menu {
  position: relative;
  z-index: 2;
  transition: opacity 220ms ease, transform 420ms cubic-bezier(.16,1,.3,1), filter 240ms ease;
}

body.tw-breakroom-game-active .tw-breakroom-menu {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.985) translateY(-6px);
  filter: blur(1px) brightness(0.75);
}

.tw-breakroom-game-screen {
  position: absolute;
  inset: 0;
  z-index: 9;
  box-sizing: border-box;
  padding: 18px 30px 18px;
  opacity: 0;
  pointer-events: none;
  transform-origin: top left;
  color: var(--fg);
  font-family: var(--font);
  overflow: hidden;
  background: transparent;
  border-left: 1px solid rgba(245,245,245,0.10);
  border-right: 1px solid rgba(245,245,245,0.10);
  border-bottom: 1px solid rgba(245,245,245,0.10);
  box-shadow:
    inset 0 0 0 1px rgba(93,208,104,0.035),
    inset 0 0 34px rgba(255,255,255,0.025),
    inset 0 -20px 60px rgba(93,208,104,0.035),
    0 0 26px rgba(255,255,255,0.035);
}

body.tw-breakroom-game-active .tw-breakroom-game-screen {
  opacity: 1;
  pointer-events: auto;
}

.tw-breakroom-game-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(93,208,104,0.08), transparent 14%, transparent 86%, rgba(93,208,104,0.08)),
    radial-gradient(circle at 50% 43%, rgba(255,255,255,0.065), transparent 34%);
  opacity: 0.78;
  mix-blend-mode: screen;
}

.tw-breakroom-game-screen::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(245,245,245,0.22), rgba(93,208,104,0.20), transparent);
  box-shadow: 0 0 16px rgba(255,255,255,0.12), 0 0 24px rgba(93,208,104,0.08);
}

.tw-breakroom-game-hud {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: 0.35px;
  text-shadow:
    0 0 4px rgba(255,255,255,0.92),
    0 0 14px rgba(255,255,255,0.34),
    0 0 24px rgba(93,208,104,0.16);
}

.tw-breakroom-game-status {
  color: var(--muted);
}

.tw-breakroom-game-back {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-align: right;
  text-decoration: none;
  text-shadow:
    0 0 4px rgba(255,255,255,0.9),
    0 0 14px rgba(255,255,255,0.3);
}

.tw-breakroom-game-back:hover,
.tw-breakroom-game-back:focus-visible {
  color: var(--accent);
  outline: none;
}

.tw-breakroom-game-placeholder {
  position: relative;
  z-index: 2;
  min-height: calc(100% - 36px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px solid rgba(245,245,245,0.12);
  border-radius: 4px;
  background:
    linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, rgba(93,208,104,0.06), transparent 42%);
  background-size: 100% 16px, 18px 100%, auto;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    inset 0 0 28px rgba(255,255,255,0.026),
    0 0 24px rgba(93,208,104,0.06);
  overflow: hidden;
}

.tw-breakroom-game-chip {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 1px;
}

.tw-breakroom-game-title {
  color: var(--fg);
  font-size: clamp(21px, 4vw, 36px);
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  text-align: center;
  text-shadow:
    0 0 5px rgba(255,255,255,1),
    0 0 18px rgba(255,255,255,0.42),
    0 0 32px rgba(93,208,104,0.18);
}

.tw-breakroom-game-note {
  color: var(--muted);
  max-width: 420px;
  text-align: center;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.28px;
}

.tw-breakroom-game-gridline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.08) 46%, transparent 58%);
  transform: translateX(-115%);
  animation: tw-game-placeholder-glare 5.8s cubic-bezier(.2,.8,.2,1) infinite;
}

@keyframes tw-game-placeholder-glare {
  0%, 60%, 100% { transform: translateX(-115%); opacity: 0; }
  68% { opacity: 0.55; }
  82% { transform: translateX(115%); opacity: 0; }
}

@media (max-width: 820px) {
  .tw-breakroom-game-screen {
    padding: 16px 20px 16px;
  }
  .tw-breakroom-game-hud {
    font-size: 10.5px;
    gap: 10px;
  }
}

@media (max-width: 600px) {
  .tw-breakroom-game-screen {
    padding: 13px 18px 14px;
  }
  .tw-breakroom-game-hud {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 10px;
  }
  .tw-breakroom-game-back {
    text-align: left;
  }
  .tw-breakroom-game-placeholder {
    min-height: calc(100% - 62px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tw-breakroom-menu,
  .tw-breakroom-game-gridline {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   TW break room refinement — stable title bar, staged reveal,
   and clean game-surface choreography
   ============================================================ */
body.tw-terminal-minimized .terminal.main {
  width: var(--term-w) !important;
  min-width: var(--term-w) !important;
  max-width: var(--term-w) !important;
  transform: none !important;
  height: 42px !important;
  max-height: 42px !important;
  transform-origin: top center !important;
}

body.tw-terminal-minimized .terminal.main .terminal-bar {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
}

body.tw-terminal-minimized .terminal.main .terminal-body {
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
}

.tw-breakroom:not(.tw-breakroom-cards-ready) .tw-breakroom-grid {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(12px) scale(0.992) !important;
  filter: blur(1px) brightness(0.72) !important;
}

.tw-breakroom.tw-breakroom-cards-ready .tw-breakroom-grid {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition:
    opacity 360ms ease,
    transform 520ms cubic-bezier(.16,1,.3,1),
    filter 360ms ease !important;
}

body.tw-terminal-minimized .tw-breakroom:not(.tw-breakroom-cards-ready) .tw-breakroom-card {
  animation: none !important;
  opacity: 0 !important;
  transform: translateY(10px) scale(0.985) !important;
}

.tw-breakroom:not(.tw-breakroom-exit-ready) .tw-breakroom-exit {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
}

.tw-breakroom.tw-breakroom-exit-ready .tw-breakroom-exit {
  opacity: 1 !important;
  transform: none !important;
  transition:
    opacity 240ms ease,
    transform 360ms cubic-bezier(.16,1,.3,1),
    color 140ms ease !important;
}

.tw-breakroom-exit.is-typing::after,
.tw-breakroom-exit.cursor-live::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 0.92em;
  margin-left: 4px;
  vertical-align: -1px;
  background: var(--fg);
  box-shadow:
    0 0 8px rgba(255,255,255,0.82),
    0 0 18px rgba(93,208,104,0.34);
  animation: tw-breakroom-cursor 0.72s steps(2, end) infinite;
}

body.tw-terminal-minimized .tw-breakroom.tw-breakroom-typed .tw-breakroom-card {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

body.tw-terminal-minimized .tw-breakroom.tw-breakroom-typed .tw-breakroom-card::after {
  animation: tw-breakroom-card-glare 9s cubic-bezier(.2,.7,.1,1) infinite !important;
}

body.tw-terminal-minimized .tw-breakroom.tw-breakroom-typed .tw-breakroom-card:nth-child(1)::after { animation-delay: 1.15s !important; }
body.tw-terminal-minimized .tw-breakroom.tw-breakroom-typed .tw-breakroom-card:nth-child(2)::after { animation-delay: 4.15s !important; }
body.tw-terminal-minimized .tw-breakroom.tw-breakroom-typed .tw-breakroom-card:nth-child(3)::after { animation-delay: 7.15s !important; }

@media (max-width: 720px) {
  body.tw-terminal-minimized .terminal.main {
    width: var(--term-w) !important;
    min-width: 0 !important;
    max-width: var(--term-w) !important;
    transform: none !important;
    height: 39px !important;
    max-height: 39px !important;
  }

  body.tw-terminal-minimized .terminal.main .terminal-bar {
    height: 39px !important;
    min-height: 39px !important;
    max-height: 39px !important;
  }
}

/* ============================================================
   TW break room playable iframe bolt-in
   The selected cartridge now lives inside the hidden game surface.
   ============================================================ */
.tw-breakroom-game-placeholder {
  display: block !important;
  min-height: calc(100% - 36px) !important;
  padding: 0 !important;
  place-items: initial !important;
  align-content: initial !important;
}

.tw-breakroom-game-loader {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 45%, rgba(93,208,104,0.085), transparent 40%),
    rgba(0,0,0,0.78);
  opacity: 1;
  pointer-events: none;
  transition: opacity 260ms ease, filter 260ms ease;
}

.tw-breakroom-game-screen.is-loaded .tw-breakroom-game-loader {
  opacity: 0;
  filter: blur(1px);
}

.tw-breakroom-game-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  opacity: 0;
  pointer-events: auto;
  color-scheme: dark;
  transition: opacity 320ms ease 80ms, filter 320ms ease;
}

.tw-breakroom-game-screen.is-loaded .tw-breakroom-game-frame {
  opacity: 1;
  filter: none;
}

.tw-breakroom-game-screen.is-loading .tw-breakroom-game-frame {
  opacity: 0;
  filter: blur(1px) brightness(0.72);
}

.tw-breakroom-game-screen .tw-breakroom-game-gridline {
  z-index: 6;
}

@media (max-width: 600px) {
  .tw-breakroom-game-placeholder {
    min-height: calc(100% - 62px) !important;
  }
}

/* ============================================================
   TW break room cartridge/button launch repair + clean staged reveal
   ============================================================ */
.tw-breakroom-card,
button.tw-breakroom-card {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid var(--rule);
  text-align: left !important;
  width: 100% !important;
  font-family: var(--font) !important;
  cursor: pointer !important;
  user-select: none;
  pointer-events: auto !important;
}

button.tw-breakroom-card:disabled {
  opacity: 0.55 !important;
  cursor: wait !important;
}

body.tw-terminal-minimized .tw-breakroom {
  z-index: 80 !important;
  pointer-events: auto !important;
}

body.tw-terminal-minimized .terminal.main {
  z-index: 60 !important;
}

body.tw-terminal-minimized .terminal.main .terminal-body,
body.tw-terminal-minimized .terminal.main .terminal-body * {
  pointer-events: none !important;
}

body.tw-terminal-minimized .terminal.main .terminal-bar {
  pointer-events: none !important;
}

body.tw-terminal-minimized .terminal.main .terminal-dots,
body.tw-terminal-minimized .terminal.main .terminal-dots *,
body.tw-terminal-minimized .terminal.main .terminal-bar .dot.live {
  pointer-events: auto !important;
}

body.tw-terminal-minimized .tw-breakroom-grid,
body.tw-terminal-minimized .tw-breakroom-card,
body.tw-terminal-minimized .tw-breakroom-card * {
  pointer-events: auto !important;
}

/* Reveal cartridges only after the typed copy is finished. */
body.tw-terminal-minimized .tw-breakroom:not(.tw-breakroom-cards-ready) .tw-breakroom-card,
.tw-breakroom:not(.tw-breakroom-cards-ready) .tw-breakroom-card {
  animation: none !important;
  opacity: 0 !important;
  transform: translateY(12px) scale(0.982) !important;
  filter: blur(1px) brightness(0.68) !important;
  pointer-events: none !important;
}

body.tw-terminal-minimized .tw-breakroom.tw-breakroom-cards-ready:not(.tw-breakroom-typed) .tw-breakroom-card {
  animation: tw-breakroom-card-rise 520ms cubic-bezier(.16,1,.3,1) both !important;
}

body.tw-terminal-minimized .tw-breakroom.tw-breakroom-cards-ready:not(.tw-breakroom-typed) .tw-breakroom-card:nth-child(1) { animation-delay: 0ms !important; }
body.tw-terminal-minimized .tw-breakroom.tw-breakroom-cards-ready:not(.tw-breakroom-typed) .tw-breakroom-card:nth-child(2) { animation-delay: 145ms !important; }
body.tw-terminal-minimized .tw-breakroom.tw-breakroom-cards-ready:not(.tw-breakroom-typed) .tw-breakroom-card:nth-child(3) { animation-delay: 290ms !important; }

body.tw-terminal-minimized .tw-breakroom.tw-breakroom-cards-ready.tw-breakroom-typed .tw-breakroom-card {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

body.tw-terminal-minimized .tw-breakroom-card.is-launching {
  pointer-events: none !important;
}

/* ============================================================
   TW root bolt-in pass: stable break room controls + iframe game surface
   ============================================================ */
body.tw-terminal-minimized .tw-breakroom {
  background: #000 !important;
  pointer-events: auto !important;
}

body.tw-terminal-minimized .tw-breakroom-menu {
  pointer-events: auto !important;
}

body.tw-terminal-minimized .tw-breakroom-card {
  cursor: pointer !important;
  user-select: none !important;
  touch-action: manipulation !important;
}

.tw-breakroom-card:disabled {
  opacity: .45 !important;
  cursor: default !important;
}

.tw-breakroom-exit {
  position: relative !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-height: 1.58em !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--fg) !important;
  text-decoration: none !important;
}

.tw-breakroom-exit:hover,
.tw-breakroom-exit:focus-visible {
  color: var(--accent) !important;
  text-decoration: none !important;
  outline: none !important;
  text-shadow:
    0 0 6px rgba(93,208,104,.85),
    0 0 18px rgba(93,208,104,.36),
    0 0 28px rgba(255,255,255,.18) !important;
}

body.tw-breakroom-game-active .tw-breakroom-game-screen {
  z-index: 30 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.tw-breakroom-game-active .tw-breakroom-game-frame {
  pointer-events: auto !important;
}

.tw-breakroom-game-frame {
  border: 0 !important;
  background: #000 !important;
}

.tw-breakroom-game-loader[aria-hidden="true"] {
  pointer-events: none !important;
}

.tw-breakroom-game-back {
  position: relative !important;
  z-index: 35 !important;
  pointer-events: auto !important;
  text-decoration: none !important;
}

.tw-breakroom-game-back:hover,
.tw-breakroom-game-back:focus-visible {
  color: var(--accent) !important;
  text-decoration: none !important;
}

.tw-breakroom.tw-breakroom-cards-ready .tw-breakroom-grid,
.tw-breakroom.tw-breakroom-exit-ready .tw-breakroom-exit {
  pointer-events: auto !important;
}


/* ============================================================
   TW HARD FIX: reliable break-room controls + cartridge surface
   ============================================================ */
body.tw-terminal-minimized #tw-breakroom {
  z-index: 500 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: transparent !important;
}

body.tw-terminal-minimized #tw-breakroom .tw-breakroom-inner,
body.tw-terminal-minimized #tw-breakroom .tw-breakroom-menu,
body.tw-terminal-minimized #tw-breakroom .tw-breakroom-grid,
body.tw-terminal-minimized #tw-breakroom .tw-breakroom-card,
body.tw-terminal-minimized #tw-breakroom .tw-breakroom-card *,
body.tw-terminal-minimized #tw-breakroom [data-breakroom-exit] {
  pointer-events: auto !important;
}

body.tw-terminal-minimized .terminal.main {
  z-index: 600 !important;
  pointer-events: none !important;
}

body.tw-terminal-minimized .terminal.main .terminal-bar,
body.tw-terminal-minimized .terminal.main .terminal-bar *,
body.tw-terminal-minimized .terminal.main .terminal-dots,
body.tw-terminal-minimized .terminal.main .terminal-dots * {
  pointer-events: auto !important;
}

body.tw-terminal-minimized .terminal.main .terminal-body,
body.tw-terminal-minimized .terminal.main .terminal-body * {
  pointer-events: none !important;
}

#tw-breakroom .tw-breakroom-card {
  position: relative !important;
  z-index: 20 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(93,208,104,.18) !important;
}

#tw-breakroom .tw-breakroom-card:hover,
#tw-breakroom .tw-breakroom-card:focus-visible,
#tw-breakroom .tw-breakroom-card.is-launching {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  outline: none !important;
}

#tw-breakroom .tw-breakroom-exit,
#tw-breakroom a.tw-breakroom-exit,
#tw-breakroom button.tw-breakroom-exit {
  position: relative !important;
  z-index: 25 !important;
  display: inline-flex !important;
  align-items: center !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--fg) !important;
  text-decoration: none !important;
  width: fit-content !important;
  min-height: 1.58em !important;
}

#tw-breakroom .tw-breakroom-exit:hover,
#tw-breakroom .tw-breakroom-exit:focus-visible {
  color: var(--accent) !important;
  text-decoration: none !important;
  outline: none !important;
  text-shadow:
    0 0 6px rgba(93,208,104,.9),
    0 0 18px rgba(93,208,104,.42),
    0 0 30px rgba(255,255,255,.18) !important;
}

body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-menu {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(.985) translateY(-6px) !important;
  filter: blur(1px) brightness(.72) !important;
}

#tw-breakroom .tw-breakroom-game-screen {
  z-index: 60 !important;
}

body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-game-screen {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-game-frame {
  pointer-events: auto !important;
}

#tw-breakroom .tw-breakroom-game-frame {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #000 !important;
}

#tw-breakroom .tw-breakroom-game-back {
  position: relative !important;
  z-index: 80 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

#tw-breakroom .tw-breakroom-game-back:hover,
#tw-breakroom .tw-breakroom-game-back:focus-visible {
  color: var(--accent) !important;
  text-decoration: none !important;
  outline: none !important;
}


/* ============================================================
   TW BREAK ROOM HIT LAYER
   Transparent control surface that mirrors hover/click onto the
   visible cards. This avoids old terminal layers swallowing clicks.
   ============================================================ */
.tw-breakroom-hit-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  pointer-events: none !important;
  background: transparent !important;
}
.tw-breakroom-proxy {
  position: fixed !important;
  z-index: 2147483001 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  display: none;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: transparent !important;
  opacity: 0.01 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(93,208,104,.16) !important;
}
.tw-breakroom-proxy:focus-visible {
  outline: 1px solid var(--accent) !important;
  outline-offset: 3px !important;
}
#tw-breakroom .tw-breakroom-card.tw-proxy-hover,
#tw-breakroom .tw-breakroom-card:hover,
#tw-breakroom .tw-breakroom-card:focus-visible,
#tw-breakroom .tw-breakroom-card.is-launching {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  transform: translateY(-2px) scale(1.012) !important;
  box-shadow:
    0 0 16px rgba(255,255,255,0.11),
    0 0 30px rgba(93,208,104,0.17),
    inset 0 0 0 1px rgba(93,208,104,0.13),
    inset 0 0 24px rgba(255,255,255,0.045) !important;
}
#tw-breakroom .tw-breakroom-card.tw-proxy-hover .tw-breakroom-card__title,
#tw-breakroom .tw-breakroom-card.tw-proxy-hover .tw-breakroom-card__launch,
#tw-breakroom .tw-breakroom-card:hover .tw-breakroom-card__title,
#tw-breakroom .tw-breakroom-card:hover .tw-breakroom-card__launch,
#tw-breakroom .tw-breakroom-card:focus-visible .tw-breakroom-card__title,
#tw-breakroom .tw-breakroom-card:focus-visible .tw-breakroom-card__launch {
  color: var(--accent) !important;
  text-shadow: 0 0 8px rgba(93,208,104,0.35) !important;
}
#tw-breakroom .tw-breakroom-exit.tw-proxy-hover,
#tw-breakroom .tw-breakroom-exit:hover,
#tw-breakroom .tw-breakroom-exit:focus-visible {
  color: var(--accent) !important;
  text-decoration: none !important;
  outline: none !important;
  text-shadow:
    0 0 6px rgba(93,208,104,.9),
    0 0 18px rgba(93,208,104,.42),
    0 0 30px rgba(255,255,255,.18) !important;
}
body.tw-breakroom-game-active .tw-breakroom-hit-layer {
  display: none !important;
}

/* ============================================================
   TW FINAL: frameless break-room cartridge screen
   Expands the playable iframe to the room edges while keeping
   the back-to-games row clear and clickable.
   ============================================================ */
body.tw-breakroom-game-active #tw-breakroom {
  background: transparent !important;
}

body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-inner {
  overflow: hidden !important;
}

body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-game-screen {
  inset: 0 !important;
  padding: 18px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-game-screen::before,
body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-game-screen::after,
body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-game-gridline {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
  background: none !important;
}

body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-game-hud {
  height: 30px !important;
  min-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row !important;
  gap: 16px !important;
  margin: 0 0 8px !important;
  padding: 0 30px !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
}

body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-game-status,
body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-game-back {
  white-space: nowrap !important;
}

body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-game-placeholder {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: calc(100% - 38px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-game-loader {
  inset: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-game-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
}

@media (max-width: 820px) {
  body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-game-screen {
    padding-top: 14px !important;
  }
  body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-game-hud {
    height: 28px !important;
    min-height: 28px !important;
    margin-bottom: 6px !important;
    padding: 0 18px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }
  body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-game-placeholder {
    height: calc(100% - 34px) !important;
  }
}

@media (max-width: 520px) {
  body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-game-screen {
    padding-top: 10px !important;
  }
  body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-game-hud {
    height: 26px !important;
    min-height: 26px !important;
    margin-bottom: 5px !important;
    padding: 0 12px !important;
    font-size: 9px !important;
    letter-spacing: 0.12px !important;
  }
  body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-game-status {
    max-width: 48% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.tw-breakroom-game-active #tw-breakroom .tw-breakroom-game-placeholder {
    height: calc(100% - 31px) !important;
  }
}


/* ============================================================
   TW BREAK ROOM SCOREBOARD + GAME HUD BUTTONS
   ============================================================ */
#tw-breakroom .tw-breakroom-game-hud {
  justify-content: flex-end !important;
  gap: clamp(10px, 2vw, 22px) !important;
}

#tw-breakroom .tw-breakroom-game-action {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--fg) !important;
  font: inherit !important;
  line-height: 1.1 !important;
  padding: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  text-align: right !important;
  text-transform: lowercase !important;
  letter-spacing: inherit !important;
  cursor: pointer !important;
  text-decoration: none !important;
  text-shadow:
    0 0 4px rgba(255,255,255,.9),
    0 0 14px rgba(255,255,255,.3) !important;
}

#tw-breakroom .tw-breakroom-game-action:hover,
#tw-breakroom .tw-breakroom-game-action:focus-visible {
  color: var(--accent) !important;
  outline: none !important;
  text-shadow:
    0 0 6px rgba(93,208,104,.9),
    0 0 18px rgba(93,208,104,.45) !important;
}

#tw-breakroom .tw-breakroom-game-name {
  margin-right: auto !important;
  text-align: left !important;
  max-width: 38% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#tw-breakroom .tw-breakroom-score-panel {
  position: absolute;
  inset: 48px clamp(18px, 4vw, 54px) auto;
  z-index: 80;
  display: none;
  pointer-events: none;
}

#tw-breakroom .tw-breakroom-score-panel.is-open {
  display: block;
  pointer-events: auto;
}

#tw-breakroom .tw-breakroom-score-card {
  width: min(520px, 100%);
  margin: 0 auto;
  padding: 18px 20px 20px;
  color: var(--fg);
  font: 12px/1.5 var(--font);
  letter-spacing: .25px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    rgba(0,0,0,.94);
  background-size: 100% 12px, 14px 100%, auto;
  border: 1px solid rgba(245,245,245,.18);
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(93,208,104,.08),
    0 0 32px rgba(93,208,104,.20),
    0 18px 70px rgba(0,0,0,.72),
    inset 0 0 34px rgba(255,255,255,.035);
  text-shadow:
    0 0 4px rgba(255,255,255,.72),
    0 0 14px rgba(255,255,255,.18);
}

#tw-breakroom .tw-score-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 8px;
  color: var(--fg);
}

#tw-breakroom .tw-score-head button,
#tw-breakroom .tw-name-actions button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  padding: 0;
  height: auto;
  letter-spacing: inherit;
  text-transform: lowercase;
}

#tw-breakroom .tw-score-head button:hover,
#tw-breakroom .tw-score-head button:focus-visible,
#tw-breakroom .tw-name-actions button:hover,
#tw-breakroom .tw-name-actions button:focus-visible {
  color: var(--accent);
  outline: none;
}

#tw-breakroom .tw-score-sub,
#tw-breakroom .tw-name-label {
  color: var(--muted);
  margin-bottom: 14px;
  display: block;
  text-transform: lowercase;
}

#tw-breakroom .tw-score-table {
  display: grid;
  gap: 5px;
}

#tw-breakroom .tw-score-row {
  display: grid;
  grid-template-columns: 42px 1fr 86px 74px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(245,245,245,.075);
  color: rgba(245,245,245,.86);
}

#tw-breakroom .tw-score-row--head {
  color: var(--muted);
  border-bottom-color: rgba(93,208,104,.20);
}

#tw-breakroom .tw-score-row.is-new {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(93,208,104,.45);
}

#tw-breakroom .tw-score-empty,
#tw-breakroom .tw-name-rules,
#tw-breakroom .tw-name-error {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

#tw-breakroom .tw-name-error {
  min-height: 20px;
  margin-top: 8px;
  color: #ff6b4a;
}

#tw-breakroom .tw-name-input {
  width: 100%;
  height: 42px;
  margin: 4px 0 10px;
  padding: 0 12px;
  border: 1px solid rgba(245,245,245,.20);
  border-radius: 3px;
  background: rgba(0,0,0,.72);
  color: var(--fg);
  font: 15px/1 var(--font);
  letter-spacing: .45px;
  outline: none;
  box-shadow: inset 0 0 20px rgba(255,255,255,.035);
}

#tw-breakroom .tw-name-input:focus {
  border-color: var(--accent);
  box-shadow:
    0 0 16px rgba(93,208,104,.22),
    inset 0 0 20px rgba(255,255,255,.04);
}

#tw-breakroom .tw-name-actions {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 14px;
}

@media (max-width: 820px) {
  #tw-breakroom .tw-breakroom-game-hud {
    gap: 12px !important;
  }
  #tw-breakroom .tw-breakroom-game-name {
    max-width: 34% !important;
  }
  #tw-breakroom .tw-breakroom-score-panel {
    inset: 40px 12px auto;
  }
  #tw-breakroom .tw-breakroom-score-card {
    padding: 14px 14px 16px;
    font-size: 10.5px;
  }
  #tw-breakroom .tw-score-row {
    grid-template-columns: 30px 1fr 62px 54px;
    gap: 7px;
  }
}

@media (max-width: 520px) {
  #tw-breakroom .tw-breakroom-game-hud {
    font-size: 8.6px !important;
    gap: 8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  #tw-breakroom .tw-breakroom-game-name {
    max-width: 32% !important;
  }
  #tw-breakroom .tw-breakroom-score-panel {
    inset: 34px 8px auto;
  }
  #tw-breakroom .tw-score-row {
    grid-template-columns: 24px 1fr 52px;
  }
  #tw-breakroom .tw-score-row span:last-child {
    display: none;
  }
}


/* TW patch: softer break room type, plain traffic dot hover/click, easier score close. */
#tw-breakroom .tw-breakroom-copy.page-content.terminal-copy {
  text-shadow:
    0 0 3px rgba(255,255,255,0.48),
    0 0 9px rgba(255,255,255,0.16),
    0 0 14px rgba(93,208,104,0.08) !important;
}
#tw-breakroom .tw-breakroom-exit {
  text-shadow:
    0 0 3px rgba(255,255,255,0.46),
    0 0 9px rgba(255,255,255,0.14) !important;
}
.terminal.main .terminal-bar .dot.live,
.terminal.main .terminal-bar .dot.live:hover,
.terminal.main .terminal-bar .dot.live:focus-visible,
.terminal.main .terminal-bar .dot.live:active,
.terminal.main .terminal-bar .terminal-dots:hover .dot.live,
.terminal.main .terminal-bar .terminal-dots:focus-visible .dot.live,
body:not(.tw-terminal-minimized) .terminal.main .terminal-bar .dot.live,
body:not(.tw-terminal-minimized) .terminal.main .terminal-bar .dot.live:hover,
body:not(.tw-terminal-minimized) .terminal.main .terminal-bar .dot.live:focus-visible,
body.tw-terminal-minimized .terminal.main .terminal-bar .dot.live,
body.tw-terminal-minimized .terminal.main .terminal-bar .dot.live:hover,
body.tw-terminal-minimized .terminal.main .terminal-bar .dot.live:focus-visible {
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}
#tw-breakroom .tw-score-head button[data-score-close] {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  display: inline-grid !important;
  place-items: center !important;
  margin: -12px -12px -8px 8px !important;
  font-size: 34px !important;
  line-height: 1 !important;
  border: 1px solid rgba(245,245,245,.16) !important;
  border-radius: 3px !important;
  background: rgba(0,0,0,.28) !important;
  text-shadow: 0 0 8px rgba(255,255,255,.42) !important;
}
#tw-breakroom .tw-score-head button[data-score-close]:hover,
#tw-breakroom .tw-score-head button[data-score-close]:focus-visible {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}


/* TW surgical pass: traffic light has no green hover/click halo. */
.terminal.main .terminal-bar .terminal-dots,
.terminal.main .terminal-bar .terminal-dots:hover,
.terminal.main .terminal-bar .terminal-dots:focus-visible,
.terminal.main .terminal-bar .terminal-dots:active {
  background: transparent !important;
  filter: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}
.terminal.main .terminal-bar .terminal-dots::before,
.terminal.main .terminal-bar .terminal-dots::after {
  content: none !important;
  display: none !important;
}
.terminal.main .terminal-bar .terminal-dots:hover .dot,
.terminal.main .terminal-bar .terminal-dots:focus-visible .dot,
.terminal.main .terminal-bar .terminal-dots:active .dot {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.terminal.main .terminal-bar .dot.live,
.terminal.main .terminal-bar .dot.live:hover,
.terminal.main .terminal-bar .dot.live:focus-visible,
.terminal.main .terminal-bar .dot.live:active,
.terminal.main .terminal-bar .terminal-dots:hover .dot.live,
.terminal.main .terminal-bar .terminal-dots:focus-visible .dot.live,
.terminal.main .terminal-bar .terminal-dots:active .dot.live,
body:not(.tw-terminal-minimized) .terminal.main .terminal-bar .dot.live,
body:not(.tw-terminal-minimized) .terminal.main .terminal-bar .dot.live:hover,
body:not(.tw-terminal-minimized) .terminal.main .terminal-bar .dot.live:focus-visible,
body.tw-terminal-minimized .terminal.main .terminal-bar .dot.live,
body.tw-terminal-minimized .terminal.main .terminal-bar .dot.live:hover,
body.tw-terminal-minimized .terminal.main .terminal-bar .dot.live:focus-visible {
  background: #ff5f56 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}


/* ============================================================
   TW traffic light state polish: green open, red minimized.
   Tiny realistic glow only on the dot; no group halo.
   ============================================================ */
@keyframes twTrafficPulseGreen {
  0%,100% {
    box-shadow:
      inset 0 -1px 2px rgba(0,0,0,.50),
      inset 0 1px 1px rgba(255,255,255,.34),
      0 0 2px rgba(93,208,104,.62),
      0 0 5px rgba(93,208,104,.26) !important;
  }
  50% {
    box-shadow:
      inset 0 -1px 2px rgba(0,0,0,.46),
      inset 0 1px 1px rgba(255,255,255,.40),
      0 0 3px rgba(93,208,104,.78),
      0 0 7px rgba(93,208,104,.32) !important;
  }
}
@keyframes twTrafficPulseRed {
  0%,100% {
    box-shadow:
      inset 0 -1px 2px rgba(0,0,0,.50),
      inset 0 1px 1px rgba(255,255,255,.32),
      0 0 2px rgba(255,95,86,.62),
      0 0 5px rgba(255,95,86,.24) !important;
  }
  50% {
    box-shadow:
      inset 0 -1px 2px rgba(0,0,0,.46),
      inset 0 1px 1px rgba(255,255,255,.38),
      0 0 3px rgba(255,95,86,.78),
      0 0 7px rgba(255,95,86,.30) !important;
  }
}
.terminal.main .terminal-bar .terminal-dots,
.terminal.main .terminal-bar .terminal-dots:hover,
.terminal.main .terminal-bar .terminal-dots:focus-visible,
.terminal.main .terminal-bar .terminal-dots:active {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: 0 !important;
}
.terminal.main .terminal-bar .terminal-dots:hover .dot:not(.live),
.terminal.main .terminal-bar .terminal-dots:focus-visible .dot:not(.live),
.terminal.main .terminal-bar .terminal-dots:active .dot:not(.live) {
  background: #2e2e2e !important;
  box-shadow: none !important;
  filter: none !important;
}
body:not(.tw-terminal-minimized) .terminal.main .terminal-bar .dot.live {
  background: #5dd068 !important;
  transform: none !important;
  filter: none !important;
  animation: twTrafficPulseGreen 2.85s ease-in-out infinite !important;
}
body:not(.tw-terminal-minimized) .terminal.main .terminal-bar .terminal-dots:hover .dot.live,
body:not(.tw-terminal-minimized) .terminal.main .terminal-bar .dot.live:hover,
body:not(.tw-terminal-minimized) .terminal.main .terminal-bar .dot.live:focus-visible {
  background: #ff5f56 !important;
  transform: none !important;
  filter: none !important;
  animation: twTrafficPulseRed 2.85s ease-in-out infinite !important;
}
body:not(.tw-terminal-minimized) .terminal.main .terminal-bar .terminal-dots:active .dot.live,
body:not(.tw-terminal-minimized) .terminal.main .terminal-bar .dot.live:active {
  background: #b8423c !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  box-shadow:
    inset 0 -1px 2px rgba(0,0,0,.62),
    inset 0 1px 1px rgba(255,255,255,.20),
    0 0 2px rgba(184,66,60,.60),
    0 0 5px rgba(184,66,60,.22) !important;
}
body.tw-terminal-minimized .terminal.main .terminal-bar .dot.live {
  background: #ff5f56 !important;
  transform: none !important;
  filter: none !important;
  animation: twTrafficPulseRed 2.85s ease-in-out infinite !important;
}
body.tw-terminal-minimized .terminal.main .terminal-bar .terminal-dots:hover .dot.live,
body.tw-terminal-minimized .terminal.main .terminal-bar .dot.live:hover,
body.tw-terminal-minimized .terminal.main .terminal-bar .dot.live:focus-visible {
  background: #5dd068 !important;
  transform: none !important;
  filter: none !important;
  animation: twTrafficPulseGreen 2.85s ease-in-out infinite !important;
}
body.tw-terminal-minimized .terminal.main .terminal-bar .terminal-dots:active .dot.live,
body.tw-terminal-minimized .terminal.main .terminal-bar .dot.live:active {
  background: #3f9b48 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  box-shadow:
    inset 0 -1px 2px rgba(0,0,0,.62),
    inset 0 1px 1px rgba(255,255,255,.20),
    0 0 2px rgba(63,155,72,.58),
    0 0 5px rgba(63,155,72,.20) !important;
}


/* ============================================================
   TW patch: stable minimized title bar + audible break-room typing
   ============================================================ */
.terminal.main .terminal-bar,
body.tw-terminal-minimized .terminal.main .terminal-bar {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.terminal.main .terminal-bar .title,
.terminal.main .terminal-bar .title-page,
.terminal.main .terminal-bar .title-brand {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  transform: none !important;
}

body.tw-terminal-minimized .terminal.main {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
}

body.tw-terminal-minimized .terminal.main .terminal-bar .title,
body.tw-terminal-minimized .terminal.main .terminal-bar .title-page,
body.tw-terminal-minimized .terminal.main .terminal-bar .title-brand {
  transform: none !important;
  translate: none !important;
}


/* ============================================================
   TW PATCH — 2026-05-20 homepage + break room typing fixes
   - raises the home lander content closer to the terminal title bar
   - lets the home post-copy type as full-width sentences with natural wraps
   - keeps a white prompt visible on every visual wrapped line
   - prevents the break room's second prompt from appearing before its line types
   ============================================================ */

#hero {
  padding-top: 16px !important;
  padding-bottom: 74px !important;
}

body.page-index #hero {
  padding-top: 10px !important;
  padding-bottom: 80px !important;
}

#hero > .page-content:first-child {
  margin-top: 0 !important;
}

#intro-post {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 2.05ch !important;
  white-space: pre-wrap !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  line-height: inherit !important;
  text-align: left !important;
}

#intro-post::before {
  content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 0 !important;
  white-space: pre !important;
  line-height: inherit !important;
  font: inherit !important;
  color: var(--tw-prompt, #f4f3e8) !important;
  pointer-events: none !important;
}

#intro-post > * {
  position: relative !important;
  z-index: 1 !important;
}

/* The break room now types literal prompt characters from the HTML data attrs.
   Disable the automatic prompt rail here so empty/future lines stay invisible. */
#tw-breakroom .tw-breakroom-copy.page-content.terminal-copy {
  padding-left: 0 !important;
  overflow: visible !important;
}

#tw-breakroom .tw-breakroom-copy.page-content.terminal-copy::before {
  content: none !important;
  display: none !important;
}

#tw-breakroom .tw-breakroom-copy.page-content.terminal-copy .line:empty:not(.is-typing):not(.cursor-live) {
  display: none !important;
  min-height: 0 !important;
}

@media (max-width: 720px) {
  #hero {
    padding-top: 14px !important;
    padding-bottom: 62px !important;
  }

  body.page-index #hero {
    padding-top: 8px !important;
    padding-bottom: 68px !important;
  }

  #intro-post {
    padding-left: 2.05ch !important;
    line-height: 1.64 !important;
  }
}

/* ============================================================
   TW HOTFIX — mobile menu overlay position repair
   The integrated break-room layer makes .terminal.side position:relative
   later in the cascade. On phones that pushes the menu back into the
   flex/stage layout, leaving it visible only at the far right edge.
   Restore the mobile menu as a centered fixed overlay.
   ============================================================ */
@media (max-width: 720px) {
  .terminal.side {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: var(--menu-w) !important;
    height: min(calc(100dvh - 96px), 520px) !important;
    max-height: 0 !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    clip-path: inset(0 0 100% 0) !important;
    box-shadow: 0 0 0 1px var(--bg), 0 14px 60px rgba(0,0,0,0.72) !important;
  }

  body.menu-open .terminal.side {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: var(--menu-w) !important;
    height: min(calc(100dvh - 96px), 520px) !important;
    max-height: min(calc(100dvh - 96px), 520px) !important;
    clip-path: inset(0 0 0 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* ============================================================
   TW HOTFIX — menu-window traffic light closes menu
   Makes the side-menu traffic light behave like a close control.
   ============================================================ */
.terminal.side .terminal-bar .terminal-dots,
.terminal.side .terminal-bar .dot.live {
  cursor: pointer !important;
}

.terminal.side .terminal-bar .dot.live {
  background: #5dd068 !important;
  transform: none !important;
  filter: none !important;
  animation: twTrafficPulseGreen 2.85s ease-in-out infinite !important;
}

.terminal.side .terminal-bar .terminal-dots:hover .dot.live,
.terminal.side .terminal-bar .dot.live:hover,
.terminal.side .terminal-bar .dot.live:focus-visible {
  background: #ff5f56 !important;
  transform: none !important;
  filter: none !important;
  animation: twTrafficPulseRed 2.85s ease-in-out infinite !important;
}

.terminal.side .terminal-bar .terminal-dots:active .dot.live,
.terminal.side .terminal-bar .dot.live:active {
  background: #b8423c !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  box-shadow:
    inset 0 -1px 2px rgba(0,0,0,.62),
    inset 0 1px 1px rgba(255,255,255,.20),
    0 0 2px rgba(184,66,60,.60),
    0 0 5px rgba(184,66,60,.22) !important;
}



/* ============================================================
   ABOUT PAGE SIGNAL BOARD PASS
   ============================================================ */
#hero .about-kicker {
  color: var(--fg) !important;
}

#hero .about-hero-copy {
  margin-bottom: 14px;
}

.about-signal-board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 76px 42px minmax(180px, .8fr);
  gap: 12px;
  align-items: stretch;
  margin: 12px 0 18px;
  color: var(--fg);
}

.about-signal-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.about-signal-chip,
.about-signal-output,
.about-signal-core {
  position: relative;
  min-width: 0;
  border: 1px solid var(--rule);
  background: rgba(255,255,255,.012);
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.about-signal-chip {
  min-height: 76px;
  padding: 12px 12px 10px;
}

.about-signal-chip:hover,
.about-signal-output:hover,
.about-signal-core:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(93,208,104,.08);
}

.about-signal-chip::after,
.about-signal-output::after,
.about-signal-core::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, rgba(93,208,104,.08) 48%, transparent 56%);
  transform: translateX(-120%);
  opacity: 0;
}

.about-signal-chip:hover::after,
.about-signal-output:hover::after,
.about-signal-core:hover::after {
  animation: about-card-sheen 700ms ease both;
}

@keyframes about-card-sheen {
  0% { opacity: 0; transform: translateX(-120%); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateX(120%); }
}

.chip-num,
.output-num {
  position: absolute;
  top: 7px;
  right: 9px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 1.5px;
}

.chip-label,
.output-title {
  display: block;
  margin-top: 18px;
  color: var(--fg);
  font-size: 10px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.chip-pulse {
  display: block;
  margin-top: 9px;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 3px;
  animation: about-chip-pulse 1.8s ease-in-out infinite;
}

.about-signal-chip:nth-child(2) .chip-pulse { animation-delay: .18s; }
.about-signal-chip:nth-child(3) .chip-pulse { animation-delay: .36s; }
.about-signal-chip:nth-child(4) .chip-pulse { animation-delay: .54s; }

@keyframes about-chip-pulse {
  0%, 100% { opacity: .38; filter: drop-shadow(0 0 0 rgba(93,208,104,0)); }
  50% { opacity: 1; filter: drop-shadow(0 0 7px rgba(93,208,104,.55)); }
}

.about-signal-core {
  display: grid;
  place-items: center;
  min-height: 162px;
  overflow: hidden;
}

.core-ring {
  position: absolute;
  width: 46px;
  height: 46px;
  border: 1px solid var(--accent);
  transform: rotate(45deg);
  opacity: .75;
  animation: about-core-rotate 3.2s ease-in-out infinite;
}

.core-label {
  position: relative;
  z-index: 2;
  color: var(--fg);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.core-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(93,208,104,.18) 50%, transparent 100%);
  transform: translateY(-110%);
  animation: about-core-scan 2.4s linear infinite;
}

@keyframes about-core-rotate {
  0%, 100% { transform: rotate(45deg) scale(.92); opacity: .45; }
  50% { transform: rotate(225deg) scale(1.08); opacity: 1; }
}

@keyframes about-core-scan {
  0% { transform: translateY(-110%); }
  100% { transform: translateY(110%); }
}

.about-signal-path {
  display: grid;
  place-content: center;
  gap: 8px;
  color: var(--accent);
}

.about-signal-path span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--accent);
  opacity: .35;
  box-shadow: 0 0 8px rgba(93,208,104,.35);
  animation: about-path-hit 1.2s ease-in-out infinite;
}

.about-signal-path span:nth-child(2) { animation-delay: .14s; }
.about-signal-path span:nth-child(3) { animation-delay: .28s; }

@keyframes about-path-hit {
  0%, 100% { opacity: .22; transform: scaleX(.72); }
  50% { opacity: 1; transform: scaleX(1.08); }
}

.about-signal-output {
  min-height: 162px;
  padding: 20px 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.output-title {
  margin-top: 0;
  color: var(--accent);
}

.output-copy {
  display: block;
  margin-top: 12px;
  color: var(--fg);
  font-size: 11px;
  line-height: 1.65;
  letter-spacing: .3px;
}

#philosophy .philosophy-copy .accent {
  color: var(--accent) !important;
}

@media (max-width: 720px) {
  .about-signal-board {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .about-signal-inputs {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .about-signal-chip {
    min-height: 64px;
    padding: 10px 9px 8px;
  }

  .about-signal-core {
    min-height: 78px;
  }

  .about-signal-path {
    grid-template-columns: repeat(3, 18px);
    gap: 6px;
    justify-content: center;
    transform: rotate(90deg);
    margin: -2px 0;
  }

  .about-signal-output {
    min-height: 92px;
    padding: 18px 12px 12px;
  }

  .chip-label,
  .output-title,
  .core-label {
    font-size: 9px;
    letter-spacing: 1.5px;
  }

  .chip-pulse {
    font-size: 9px;
    letter-spacing: 2px;
  }
}

/* ============================================================
   ABOUT PAGE TWEAK PASS — flow arrows, team captions, mobile fit
   ============================================================ */
.about-signal-path {
  grid-template-rows: repeat(2, 1px);
}

.about-signal-path span {
  position: relative;
  width: 28px;
  height: 2px;
  opacity: .46;
}

.about-signal-path span::after {
  content: "›";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-55%);
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(93,208,104,.45);
}

.about-signal-path span:nth-child(2) {
  animation-delay: .18s;
}

.chip-label br {
  display: block;
}

#team .about-team-grid .team-caption::before {
  content: none !important;
}

#team .team-bio-copy .accent {
  color: var(--accent) !important;
}

@media (max-width: 960px) and (orientation: landscape) {
  .about-signal-board {
    grid-template-columns: minmax(0, 1.15fr) 60px 34px minmax(145px, .82fr);
    gap: 8px;
    margin: 8px 0 12px;
  }

  .about-signal-inputs {
    gap: 8px;
  }

  .about-signal-chip {
    min-height: 56px;
    padding: 9px 9px 7px;
  }

  .about-signal-core,
  .about-signal-output {
    min-height: 120px;
  }

  .chip-label,
  .output-title,
  .core-label {
    font-size: 8.5px;
    letter-spacing: 1.25px;
    line-height: 1.18;
  }

  .chip-pulse,
  .output-copy {
    font-size: 9px;
    letter-spacing: 1.6px;
  }
}

@media (max-width: 720px) {
  .about-signal-path {
    grid-template-columns: repeat(2, 22px) !important;
    grid-template-rows: none;
    gap: 7px;
  }

  .about-signal-path span {
    width: 22px;
    height: 2px;
  }

  .about-signal-path span::after {
    right: -10px;
    font-size: 15px;
  }
}

@media (max-width: 380px) {
  .about-signal-inputs {
    grid-template-columns: 1fr;
  }

  .about-signal-chip {
    min-height: 58px;
  }

  .chip-label br {
    display: none;
  }
}

/* ============================================================
   ABOUT MOBILE SIGNAL BOARD FINAL PASS
   Keeps the signal graph compact and horizontal on mobile.
   ============================================================ */
@media (max-width: 720px) {
  #hero .about-hero-copy {
    margin-bottom: 8px;
  }

  .about-signal-board {
    display: grid !important;
    grid-template-columns: minmax(118px, 1.1fr) 42px 24px minmax(84px, .78fr) !important;
    gap: 5px !important;
    align-items: stretch !important;
    margin: 6px 0 10px !important;
    transform: none !important;
  }

  .about-signal-inputs {
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
  }

  .about-signal-chip {
    min-height: 43px !important;
    padding: 6px 6px 5px !important;
  }

  .about-signal-core,
  .about-signal-output {
    min-height: 91px !important;
  }

  .about-signal-core {
    overflow: hidden !important;
  }

  .about-signal-output {
    padding: 12px 7px 8px !important;
  }

  .about-signal-path {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(2, 2px) !important;
    place-content: center !important;
    gap: 8px !important;
    transform: none !important;
    margin: 0 !important;
  }

  .about-signal-path span {
    width: 15px !important;
    height: 2px !important;
  }

  .about-signal-path span::after {
    right: -8px !important;
    font-size: 12px !important;
  }

  .chip-num,
  .output-num {
    top: 4px !important;
    right: 5px !important;
    font-size: 7px !important;
    letter-spacing: .9px !important;
  }

  .chip-label,
  .output-title,
  .core-label {
    margin-top: 11px !important;
    font-size: 7px !important;
    line-height: 1.12 !important;
    letter-spacing: .95px !important;
  }

  .chip-pulse {
    margin-top: 4px !important;
    font-size: 7px !important;
    letter-spacing: 1.1px !important;
  }

  .core-ring {
    width: 24px !important;
    height: 24px !important;
  }

  .output-copy {
    margin-top: 7px !important;
    font-size: 7.5px !important;
    line-height: 1.35 !important;
    letter-spacing: .15px !important;
  }
}

@media (max-width: 380px) {
  .about-signal-board {
    grid-template-columns: minmax(106px, 1.05fr) 34px 20px minmax(74px, .72fr) !important;
    gap: 4px !important;
  }

  .about-signal-inputs {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
  }

  .about-signal-chip {
    min-height: 39px !important;
    padding: 5px 5px 4px !important;
  }

  .about-signal-core,
  .about-signal-output {
    min-height: 82px !important;
  }

  .about-signal-output {
    padding: 10px 6px 7px !important;
  }

  .chip-label br {
    display: block !important;
  }

  .chip-label,
  .output-title,
  .core-label {
    font-size: 6.5px !important;
    letter-spacing: .8px !important;
  }

  .chip-pulse,
  .output-copy {
    font-size: 6.8px !important;
  }
}

/* ============================================================
   MOBILE PROMPT ALIGNMENT FIX
   The shared ::before column on the container goes out of sync
   when any .line wraps to a second visual row. Fix: hide the
   shared column and use a hanging-indent on each .line so its
   own inline ::before always sits in the left gutter — and
   wrapped text auto-aligns under the text start, not the >.
   ============================================================ */
@media (max-width: 720px) {
  /* Hide the shared > column — each line handles its own */
  .page-content.terminal-copy::before {
    display: none !important;
  }
  /* text-indent pulls the FIRST line of each .line leftward into
     the container's padding gutter; wrapped lines stay indented */
  .page-content.terminal-copy .line {
    display: block !important;
    padding: 0 !important;
    text-indent: -2.05ch !important;
  }
  /* Inline > sits in the gutter created by the hanging indent */
  .page-content.terminal-copy .line::before {
    content: '> ';
    white-space: pre !important;
    color: var(--tw-prompt) !important;
    pointer-events: none !important;
  }
}

/* ============================================================
   TEAM CAPTIONS — no > prompt
   Captions are visual labels, not terminal lines.
   ============================================================ */
.team-caption::before,
#the_team .team-caption::before,
#team .team-caption::before {
  content: none !important;
  display: none !important;
}

/* ============================================================
   TW MOBILE PROMPT RAIL FINAL FIX
   Uses a measured DOM rail on mobile so prompt marks stay locked
   to actual wrapped rows and never spill a stray > at the bottom.
   ============================================================ */
.tw-prompt-rail {
  display: none;
}

@media (max-width: 720px) {
  #terminal-body {
    --tw-mobile-copy-lh: 18px;
  }

  #terminal-body .page-content.terminal-copy:not(.tw-breakroom-copy),
  #intro-post {
    position: relative !important;
    padding-left: 2.05ch !important;
    line-height: var(--tw-mobile-copy-lh) !important;
    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-align: left !important;
  }

  #terminal-body .page-content.terminal-copy:not(.tw-breakroom-copy)::before,
  #intro-post::before {
    content: none !important;
    display: none !important;
  }

  #terminal-body .page-content.terminal-copy:not(.tw-breakroom-copy) > .tw-prompt-rail,
  #intro-post > .tw-prompt-rail {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 0 !important;
    width: 1ch !important;
    height: calc(var(--tw-rail-rows, 0) * var(--tw-mobile-copy-lh)) !important;
    max-height: calc(var(--tw-rail-rows, 0) * var(--tw-mobile-copy-lh)) !important;
    overflow: hidden !important;
    white-space: pre !important;
    font: inherit !important;
    line-height: var(--tw-mobile-copy-lh) !important;
    letter-spacing: inherit !important;
    color: var(--tw-prompt, var(--fg)) !important;
    pointer-events: none !important;
    user-select: none !important;
  }

  #terminal-body .page-content.terminal-copy:not(.tw-breakroom-copy) > :not(.tw-prompt-rail),
  #intro-post > :not(.tw-prompt-rail) {
    position: relative !important;
    z-index: 1 !important;
  }

  #terminal-body .page-content.terminal-copy:not(.tw-breakroom-copy) .line {
    display: block !important;
    min-height: var(--tw-mobile-copy-lh) !important;
    line-height: var(--tw-mobile-copy-lh) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  #terminal-body .page-content.terminal-copy:not(.tw-breakroom-copy) .line::before {
    content: none !important;
    display: none !important;
  }

  #terminal-body .page-content.terminal-copy:not(.tw-breakroom-copy) a,
  #terminal-body .page-content.terminal-copy:not(.tw-breakroom-copy) button,
  #terminal-body .page-content.terminal-copy:not(.tw-breakroom-copy) .cta-link {
    font: inherit !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
  }

  #terminal-body .cascade,
  #terminal-body .cascade-toggle,
  #terminal-body .cascade-content {
    line-height: var(--tw-mobile-copy-lh) !important;
  }
}

@media (max-width: 380px), (max-height: 680px) and (max-width: 720px) {
  #terminal-body {
    --tw-mobile-copy-lh: 17px;
  }
}

@media (max-width: 720px) {
  #intro-post {
    white-space: pre-wrap !important;
  }
}

/* Sitrep 03B/03C/03D: each step's tile sits where that step falls in the 03A triptych:
   ingest on the left, synthesize in the middle, execute on the right. */
html body #process .single-tile { margin-left: auto !important; margin-right: auto !important; }
html body #output .single-tile { margin-left: auto !important; margin-right: 0 !important; }