/* ATTIK site. The OFFSET site's system (SF faces, SF Mono labels, near-black surfaces, pills) in
   ATTIK's red, around a live rebuild of the bar and its notch island on a Mac desktop. */
:root {
  --bg: #030303;
  --panel: #090909;
  --ink: #f7f4ed;
  --muted: rgba(247, 244, 237, 0.62);
  --line: rgba(247, 244, 237, 0.22);
  --accent: #ff5f57;
  --on-accent: #030303;
  --done: #30d158;
  --waiting: #ffb340;
  --unread: #ff3b30;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(14px, 1.8vw, 28px);
  --radius: clamp(20px, 2.6vw, 40px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --spring: cubic-bezier(.3, 1.35, .45, 1);
  /* One deliberate dark look, on any host theme. */
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.is-loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lucide { width: 1em; height: 1em; flex: none; }

/* Hero: a Mac screen filling the frame. The wallpaper is a photo; the headline sits on the desktop
   and ATTIK starts tucked in the notch, then drops out to float. ------------------------------ */
.frame { position: relative; height: 100vh; height: 100svh; min-height: 620px; padding: clamp(8px, 1.1vw, 16px); }
.hero {
  position: relative; height: 100%; isolation: isolate; overflow: hidden;
  border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: stretch;
  padding: calc(var(--gutter) + clamp(44px, 3.6vw, 60px)) clamp(16px, 8vw, 150px) 0;
}
.apple { width: 13px; height: 15px; fill: currentColor; flex: none; }
.screen {
  position: relative; isolation: isolate; container-type: size; flex: 1; min-height: 0;
  border-radius: clamp(16px, 2.2cqw, 34px); overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  --mb: max(24px, 2.3cqw);
}
.wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* Shade behind the headline and along the edges, so white type reads on the photo. */
.screen::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 45% at 50% 46%, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, 0) 78%),
    linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, .4) 100%);
}
.menubar {
  position: absolute; inset: 0 0 auto; z-index: 4; height: var(--mb);
  display: flex; align-items: center; justify-content: space-between; padding: 0 max(14px, 2.4cqw);
  font-size: max(11px, 1.02cqw); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.menubar-left { display: inline-flex; align-items: center; gap: max(10px, 1.2cqw); }
.menubar-left .apple { width: max(11px, 1.05cqw); height: auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.menubar-left b { font-weight: 500; }
.menubar-clock { font-variant-numeric: tabular-nums; }

.hero-copy {
  position: absolute; z-index: 2; left: 50%; top: 42%; translate: -50% -50%;
  width: min(92%, 940px); display: grid; justify-items: center; text-align: center; gap: max(12px, 1.7cqw);
  color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
  transition: opacity .4s var(--ease);
}
.hero-title {
  margin: 0; display: grid;
  font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: clamp(34px, min(6.1cqw, 10cqh), 108px); line-height: .9; letter-spacing: -.035em;
}
.hero-title > span { padding: 0 .06em .02em; }
.hero-title > span:nth-child(2) > span { transition-delay: .07s; }
.hero-title > span:nth-child(3) > span { transition-delay: .14s; }
.hero-sub {
  margin: 0; max-width: 66ch;
  font-family: var(--mono); font-size: max(10px, min(1.02cqw, 1.8cqh)); line-height: 1.5; letter-spacing: .02em; text-transform: uppercase;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: max(6px, .55cqw);
  padding: max(5px, .4cqw) max(11px, .95cqw) max(5px, .4cqw) max(8px, .75cqw);
  border-radius: max(8px, .6cqw); background: #000; color: #fff; text-shadow: none;
  border: 1px solid rgba(255, 255, 255, .55);
  transition: scale .3s var(--ease), background-color .3s var(--ease);
}
.hero-badge .apple { width: max(14px, 1.35cqw); height: auto; }
.hero-badge > span { display: grid; text-align: left; font-size: max(13px, 1.2cqw); font-weight: 500; line-height: 1.02; letter-spacing: -.01em; }
.hero-badge small { font-size: .5em; font-weight: 400; letter-spacing: 0; }
.hero-badge:hover { scale: 1.04; }

.mode-switch {
  position: absolute; z-index: 5; left: 50%; bottom: max(14px, 3.4cqw); translate: -50% 0;
  display: inline-flex; padding: 3px; border-radius: 999px;
  background: rgba(3, 3, 3, .38); border: 1px solid rgba(247, 244, 237, .18);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.mode-switch button {
  /* The nav pills' size (.pill): same height, width and type. */
  height: clamp(32px, 2.5vw, 40px); min-width: clamp(88px, 8.5vw, 140px); padding: 0 16px;
  border-radius: 999px; color: rgba(247, 244, 237, .78);
  font: 400 clamp(10px, .72vw, 12px) var(--mono); letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.mode-switch button[aria-checked="true"] { background: #000; color: #fff; }
.mode-switch button:not([aria-checked="true"]):hover { color: #fff; }

.hero-foot {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: clamp(12px, 1.5vw, 20px) 0;
  font-family: var(--mono); font-size: clamp(9px, .65vw, 11px); letter-spacing: .1em; text-transform: uppercase;
}
.hero-foot .site-footer { display: inline-flex; align-items: center; gap: 10px; }
.hint { margin: 0; color: rgba(247, 244, 237, .82); white-space: nowrap; }

/* Flat near-black panels, as on the OFFSET site: no colour washes. */
.hero, .end-desk, .lab, .feature-visual.fv-status, .feature-visual.fv-unread { background: var(--panel); }

/* Header ----------------------------------------------------------------- */
.site-header {
  position: absolute; inset: var(--gutter) var(--gutter) auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  z-index: 7;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.nav { display: flex; gap: clamp(6px, .8vw, 12px); }
.pill {
  --h: clamp(32px, 2.5vw, 40px);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h);
  min-width: clamp(88px, 8.5vw, 140px);
  padding: 0 16px;
  border: 1px solid rgba(247, 244, 237, .85);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: clamp(10px, .72vw, 12px);
  letter-spacing: .08em;
  text-transform: uppercase;
  overflow: hidden;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pill-track { position: relative; display: block; height: 1.2em; line-height: 1.2em; overflow: hidden; }
.pill-track > span { display: block; transition: transform .45s var(--ease); }
.pill:hover .pill-track > span, .pill:focus-visible .pill-track > span { transform: translateY(-100%); }
.pill:hover { background: var(--ink); color: var(--bg); }
.pill.current { border-color: var(--accent); }
.pill.current:hover { background: var(--accent); color: var(--on-accent); }
.pill-download { justify-self: end; }
.dl-icon { display: inline-flex; font-size: 14px; }
.menu-toggle { display: none; }

/* Notch island ----------------------------------------------------------- */
.island {
  --w: 17cqw;
  --h: var(--mb);
  position: absolute; top: 0; left: 50%; z-index: 8;
  width: var(--w); height: var(--h);
  translate: -50% 0;
  background: #000;
  border-radius: 0 0 max(10px, 1.3cqw) max(10px, 1.3cqw);
  transition: width .5s var(--spring), height .5s var(--spring), border-radius .5s var(--ease);
  outline: none;
}
/* The ears: concave fillets where the island meets the top edge. */
.island::before, .island::after {
  content: ""; position: absolute; top: 0; width: 10px; height: 10px;
}
.island::before { right: 100%; background: radial-gradient(circle at 0 100%, transparent 9.5px, #000 10px); }
.island::after { left: 100%; background: radial-gradient(circle at 100% 100%, transparent 9.5px, #000 10px); }
.island-ears {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 max(8px, 1.1cqw);
  transition: opacity .2s var(--ease);
}
.island-mark { width: max(10px, 1.3cqw); height: max(10px, 1.3cqw); fill: var(--ink); }
.island-ear-app { width: max(12px, 1.6cqw); height: max(12px, 1.6cqw); position: relative; }
.island-ear-app svg { width: 100%; height: 100%; display: block; }
.island-ear-app.has-dot::after { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--done); box-shadow: 0 0 0 2px #000; }
.island-open {
  position: absolute; inset: 0; padding: 0 clamp(16px, 1.6vw, 24px);
  display: grid; grid-template-rows: var(--mb) 1fr; opacity: 0; pointer-events: none;
  transition: opacity .15s var(--ease);
}
/* Open, it stays clear of the header pills on either side. */
.island.is-open { --w: 56cqw; --h: max(76px, 9.4cqw); border-radius: 0 0 max(18px, 2.4cqw) max(18px, 2.4cqw); }
/* Floating: the notch is just the camera (ATTIK lives on the floating bar). */
.screen.is-floating .island-ears { opacity: 0; }
.island.is-open .island-ears { opacity: 0; }
.island.is-open .island-open { opacity: 1; pointer-events: auto; transition: opacity .25s var(--ease) .18s; }
.island-top {
  display: flex; align-items: center; gap: 14px;
  font-size: max(9px, 1.15cqw); font-weight: 600; white-space: nowrap;
}
.island-top .lucide { font-size: max(10px, 1.25cqw); }
.island-greeting, .island-weather { display: inline-flex; align-items: center; gap: 6px; }
.island-play { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; padding: 4px 8px; margin-right: -8px; border-radius: 999px; transition: background-color .2s; }
.island-play:hover { background: rgba(247, 244, 237, .14); }
.island-play span { display: inline-flex; font-size: max(10px, 1.25cqw); }
.island-apps { display: flex; align-items: center; gap: clamp(6px, .7vw, 10px); overflow: hidden; padding-bottom: 6px; }
.island-apps .island-logo { width: 24px; height: 4px; border-radius: 2px; background: var(--ink); margin-right: 6px; flex: none; }
.island-apps .mini { width: max(12px, 2.1cqw); height: max(12px, 2.1cqw); flex: none; position: relative; }
.island-apps .mini svg { width: 100%; height: 100%; display: block; }
.island-apps .mini.is-sep { width: 1px; height: 18px; background: rgba(247, 244, 237, .2); }

/* Reveal rows slide up from a clipped line. */
.reveal { overflow: hidden; }
.reveal > span { display: block; transition: transform .8s var(--ease); }
.is-loading .reveal > span { transform: translateY(105%); }
.hero-sub, .hero-badge, .screen, .hero-foot { transition: opacity .9s var(--ease) .25s, translate .9s var(--ease) .25s; }
.is-loading .hero-sub, .is-loading .hero-badge, .is-loading .screen, .is-loading .hero-foot { opacity: 0; translate: 0 24px; }
.footer-mark { width: 14px; height: 14px; fill: var(--ink); }

/* The bar ---------------------------------------------------------------- */
.desk-bar-wrap { position: absolute; left: 50%; top: 77%; z-index: 5; translate: 0 -50%; touch-action: none; }
/* Placed by desktop.js at the bar's logo end: left edge (or right, mirrored), or top (or bottom) when vertical. */
.desk-bar-wrap.is-mirrored { translate: -100% -50%; }
.desk-bar-wrap.is-vertical { translate: -50% 0; }
.desk-bar-wrap.is-vertical.is-mirrored { translate: -50% -100%; }
.desk-bar-wrap[hidden] { display: none; }
.desk-bar {
  --icon: clamp(30px, 2.7vw, 44px);
  --pad: calc(var(--icon) * .2);
  --cap: calc(var(--icon) + var(--pad) * 2);
  display: flex; align-items: center; gap: calc(var(--icon) * .3);
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.desk-bar.is-dragging { cursor: grabbing; }
.screen .desk-bar { --icon: clamp(16px, 3.3cqw, 46px); }
.bar-logo {
  position: relative; flex: none;
  width: var(--cap); height: var(--cap); border-radius: 50%;
  background: #000; display: grid; place-items: center;
}
.bar-logo svg { width: 46%; height: 46%; fill: var(--ink); transition: transform .5s var(--spring); }
.desk-bar.is-collapsed .bar-logo svg { transform: rotate(90deg); }
.bar-done {
  position: absolute; right: -6px; bottom: -4px; display: none; align-items: center; gap: 2px;
  height: 18px; padding: 0 6px; border-radius: 999px; background: var(--done); color: #052b10;
  font: 700 10px var(--mono); box-shadow: 0 0 0 2px #000;
}
.bar-done .lucide { font-size: 10px; stroke-width: 3; }
.bar-done.is-on { display: inline-flex; animation: pop .45s var(--spring); }
.bar-group {
  position: relative; flex: none;
  display: flex; align-items: center; gap: calc(var(--icon) * .26);
  height: var(--cap); padding: 0 var(--pad);
  border-radius: 999px; background: #000;
  max-width: 900px; overflow: visible;
  transition: max-width .55s var(--ease), max-height .55s var(--ease), padding .55s var(--ease), opacity .3s var(--ease), margin .55s var(--ease);
}
/* Necks: the black bridges joining the capsules, the app's taper: each side leaves its end circle high
   on the shoulder and eases into the waist. Drawn end-circle centre to end-circle centre, behind the caps. */
.bar-group::before, .bar-logo::after {
  content: ""; position: absolute; top: 0; z-index: -1; height: var(--cap); background: #000;
  width: calc(var(--cap) * 1.2143);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 242.9 200' preserveAspectRatio='none'%3E%3Cpath d='M0 100L34.2 6C73.5 20.3 82.2 45 121.4 45C160.7 45 169.4 20.3 208.7 6L242.9 100L208.7 194C169.4 179.7 160.7 155 121.4 155C82.2 155 73.5 179.7 34.2 194Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 242.9 200' preserveAspectRatio='none'%3E%3Cpath d='M0 100L34.2 6C73.5 20.3 82.2 45 121.4 45C160.7 45 169.4 20.3 208.7 6L242.9 100L208.7 194C169.4 179.7 160.7 155 121.4 155C82.2 155 73.5 179.7 34.2 194Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.bar-group::before { right: calc(100% - var(--cap) / 2); }
.bar-logo::after { left: 50%; }
.desk-bar.is-collapsed .bar-group { max-width: 0; padding: 0; opacity: 0; margin-left: calc(var(--icon) * -.3); pointer-events: none; }
/* Folded icons tuck under the logo: they must never take its clicks. */
/* Vertical (double-click the logo): the same bar turned 90°, necks and all. */
.desk-bar.is-vertical { flex-direction: column; }
.desk-bar.is-vertical .bar-group { flex-direction: column; height: auto; width: var(--cap); padding: var(--pad) 0; max-width: none; max-height: 900px; }
.desk-bar.is-vertical .bar-group::before, .desk-bar.is-vertical .bar-logo::after {
  left: 0; right: auto; width: var(--cap); height: calc(var(--cap) * 1.2143);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 242.9' preserveAspectRatio='none'%3E%3Cpath d='M100 0L6 34.2C20.3 73.5 45 82.2 45 121.4C45 160.7 20.3 169.4 6 208.7L100 242.9L194 208.7C179.7 169.4 155 160.7 155 121.4C155 82.2 179.7 73.5 194 34.2Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 242.9' preserveAspectRatio='none'%3E%3Cpath d='M100 0L6 34.2C20.3 73.5 45 82.2 45 121.4C45 160.7 20.3 169.4 6 208.7L100 242.9L194 208.7C179.7 169.4 155 160.7 155 121.4C155 82.2 179.7 73.5 194 34.2Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.desk-bar.is-vertical .bar-group::before { top: auto; bottom: calc(100% - var(--cap) / 2); }
.desk-bar.is-vertical .bar-logo::after { top: 50%; }
/* Mirrored (near the right or bottom edge): the logo at the far end, the bar opening back toward it. */
.desk-bar.is-mirrored { flex-direction: row-reverse; }
.desk-bar.is-vertical.is-mirrored { flex-direction: column-reverse; }
.desk-bar.is-mirrored:not(.is-vertical) .bar-group::before { right: auto; left: calc(100% - var(--cap) / 2); }
.desk-bar.is-mirrored:not(.is-vertical) .bar-logo::after { left: auto; right: 50%; }
.desk-bar.is-vertical.is-mirrored .bar-group::before { bottom: auto; top: calc(100% - var(--cap) / 2); }
.desk-bar.is-vertical.is-mirrored .bar-logo::after { top: auto; bottom: 50%; }
.desk-bar.is-mirrored:not(.is-vertical).is-collapsed .bar-group { margin-left: 0; margin-right: calc(var(--icon) * -.3); }
.desk-bar.is-vertical.is-mirrored.is-collapsed .bar-group { margin-top: 0; margin-bottom: calc(var(--icon) * -.3); }
/* The done count sits off the logo's right side, clear of the mark and the first group. */
.desk-bar.is-vertical .bar-done { right: auto; left: calc(100% - 6px); bottom: auto; top: 50%; translate: 0 -50%; }
.desk-bar.is-vertical.is-collapsed .bar-group { max-height: 0; padding: 0; margin-left: 0; margin-top: calc(var(--icon) * -.3); }
.screen .desk-bar.is-vertical { --icon: clamp(12px, 3.1cqh, 40px); }
.lab-bar.desk-bar.is-vertical { --icon: clamp(30px, 3.4vw, 52px); }
.fv-bar.desk-bar.is-vertical { --icon: clamp(24px, 2.2vw, 36px); }
.desk-bar.is-collapsed .bar-logo::after { opacity: 0; }

.app { position: relative; flex: none; width: var(--icon); height: var(--icon); border-radius: 22%; transition: transform .25s var(--spring); }
.app:hover { transform: translateY(-3px); }
.app-icon, .app-icon svg { display: block; width: 100%; height: 100%; }
.app-icon svg { border-radius: 23%; }
/* Real macOS icons carry ~9% transparent margin: fill the slot as ATTIK's bar does. */
.app-icon img { display: block; width: 100%; height: 100%; transform: scale(1.12); pointer-events: none; }
.island-apps .mini img, .island-ear-app img { display: block; width: 100%; height: 100%; transform: scale(1.12); }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.app .ring {
  position: absolute; inset: calc(var(--icon) * -.1); border-radius: 32%; padding: max(2.5px, calc(var(--icon) * .055)); opacity: 0;
  /* A light running around the icon with a fading tail, over a faint track. */
  background: conic-gradient(from var(--spin), rgba(247, 244, 237, .16) 0 38%, rgba(247, 244, 237, .45) 62%, #fff 80%, rgba(247, 244, 237, .16) 81% 100%);
  -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 exclude, linear-gradient(#000 0 0);
  transition: opacity .3s var(--ease); pointer-events: none;
}
.app[data-state="thinking"] .ring { opacity: 1; animation: spin 1.3s linear infinite; }
@keyframes spin { to { --spin: 360deg; } }
.app .dot {
  position: absolute; top: -3px; right: -3px; width: 34%; height: 34%; max-width: 14px; max-height: 14px; border-radius: 50%;
  box-shadow: 0 0 0 2px #000; display: none; place-items: center; color: #052b10;
}
.app .dot .lucide { width: 70%; height: 70%; stroke-width: 4; }
.app[data-state="done"] .dot { display: grid; background: var(--done); animation: pop .45s var(--spring); }
.app[data-state="waiting"] .dot { display: grid; background: var(--waiting); animation: pop .45s var(--spring), throb 1.2s ease-in-out .45s infinite; }
.app[data-state="error"] .dot { display: grid; background: var(--unread); }
.app[data-state="done"] .dot .lucide { display: block; }
.app .dot .lucide { display: none; }
@keyframes throb { 50% { scale: 1.25; } }
@keyframes pop { 0% { scale: 0; } 100% { scale: 1; } }
.app .badge {
  position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--unread); color: #fff; display: none; place-items: center;
  font: 700 10px/18px var(--sans); box-shadow: 0 0 0 2px #000;
}
.app[data-unread] .badge { display: grid; animation: pop .45s var(--spring); }
.app .timeline { position: absolute; left: 18%; right: 18%; bottom: calc(var(--pad) * -.9); height: 3px; border-radius: 2px; background: rgba(247, 244, 237, .22); display: none; overflow: hidden; }
.app .timeline > span { display: block; height: 100%; width: var(--p, 0%); background: var(--ink); border-radius: 2px; }
.app[data-playing] .timeline { display: block; }
.app.is-open { transform: translateY(-3px); }
.app.is-open::after { content: ""; position: absolute; inset: -3px; border-radius: 28%; box-shadow: 0 0 0 1.5px rgba(247, 244, 237, .45); }

/* The panel an icon opens, hanging above the bar by a neck. */
.bar-panel {
  position: absolute; bottom: calc(100% + 16px); left: var(--x, 50%); translate: -50% 0;
  width: clamp(180px, 19cqw, 240px); padding: 8px; border-radius: 16px; background: #000; z-index: 6;
  font-size: 12px; animation: panel-in .35s var(--spring);
}
/* The neck: concave fillets flare into the panel above and the bar below, pinching to a waist. */
.bar-panel::after {
  content: ""; position: absolute; top: calc(100% - 1px); left: var(--neck, 50%); translate: -50% 0; width: 44px; height: 18px; background: #000;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0H44A13 8 0 0 0 31 8A13 8 0 0 0 44 16H0A13 8 0 0 0 13 8A13 8 0 0 0 0 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0H44A13 8 0 0 0 31 8A13 8 0 0 0 44 16H0A13 8 0 0 0 13 8A13 8 0 0 0 0 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
@keyframes panel-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
/* The floating card for the page's other bars (panels.js), placed in the window by script. */
.bar-panel.is-fixed { position: fixed; bottom: auto; translate: none; width: 240px; z-index: 50; }
.desk-bar .app { cursor: pointer; }

/* Beside a vertical bar's icon: to its right (.is-right) or left (.is-left), the neck turned sideways. */
.bar-panel.is-right, .bar-panel.is-left { bottom: auto; translate: none; left: var(--px); top: var(--py); animation-name: panel-in-side; }
.bar-panel.is-right::after, .bar-panel.is-left::after {
  top: var(--neck, 50%); translate: 0 -50%; width: 18px; height: 44px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 44' preserveAspectRatio='none'%3E%3Cpath d='M0 0V44A8 13 0 0 1 8 31A8 13 0 0 1 16 44V0A8 13 0 0 1 8 13A8 13 0 0 1 0 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 44' preserveAspectRatio='none'%3E%3Cpath d='M0 0V44A8 13 0 0 1 8 31A8 13 0 0 1 16 44V0A8 13 0 0 1 8 13A8 13 0 0 1 0 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.bar-panel.is-right::after { left: auto; right: calc(100% - 1px); }
.bar-panel.is-left::after { left: calc(100% - 1px); }
@keyframes panel-in-side { from { opacity: 0; transform: scale(.96); } }

/* Near the top of the screen the panel hangs below the bar instead. */
.bar-panel.is-below { bottom: auto; top: calc(100% + 16px); animation-name: panel-in-below; }
.bar-panel.is-below::after { top: auto; bottom: calc(100% - 1px); }
@keyframes panel-in-below { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
/* While dragging: the bar on its own layer, icons still. */
.desk-bar.is-dragging .app { transition: none; transform: none; }
.desk-bar-wrap:has(.is-dragging) { will-change: transform; }
.panel-title { display: flex; justify-content: space-between; align-items: center; margin: 2px 4px 6px; font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.panel-row { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 9px; }
.panel-row:hover { background: rgba(247, 244, 237, .08); }
.panel-row b { font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-row i { font-style: normal; color: var(--muted); font-size: 10px; }
.panel-row .state { width: 13px; height: 13px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.panel-row .state.thinking { border: 2px solid rgba(247, 244, 237, .2); border-top-color: var(--ink); animation: spin-plain 1s linear infinite; }
.panel-row .state.done { background: var(--done); color: #052b10; }
.panel-row .state.done .lucide { width: 8px; height: 8px; stroke-width: 4; }
.panel-row .state.waiting { background: var(--waiting); }
.panel-row .file { width: 18px; height: 18px; flex: none; }
@keyframes spin-plain { to { rotate: 360deg; } }
.player { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: center; padding: 2px; }
.player .art { width: 46px; height: 46px; border-radius: 9px; background: #111 url("../img/night-drive.jpg") center / cover; }
.player b { display: block; font-size: 13px; } .player i { font-style: normal; color: var(--muted); }
.player .scrub { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font: 9px var(--mono); color: var(--muted); }
.player .scrub span { height: 3px; border-radius: 2px; background: rgba(247, 244, 237, .2); overflow: hidden; }
.player .scrub span::before { content: ""; display: block; height: 100%; width: var(--p, 30%); background: var(--ink); }
.player .controls { grid-column: 1 / -1; display: flex; justify-content: center; gap: 22px; font-size: 14px; }

/* Pong ------------------------------------------------------------------- */
.pong { position: absolute; inset: 0; z-index: 9; background: rgba(3, 3, 3, .18); }
/* While playing, the desktop steps back. */
.screen .desk-bar-wrap { transition: opacity .4s var(--ease); }
.screen.is-playing .desk-bar-wrap, .screen.is-playing .hero-copy { opacity: .15; }
.pong[hidden] { display: none; }
.pong-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: none; }
.pong-board {
  position: absolute; top: calc(var(--mb) + 12px); left: 50%; translate: -50% 0; width: 200px;
  padding: 10px 12px 12px; border-radius: 22px; background: #000; font-family: var(--sans);
}
.pong-board::before { content: ""; position: absolute; bottom: 100%; left: 50%; translate: -50% 0; width: 24px; height: 13px; background: #000; }
.pong-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 600; }
.pong-head > span { display: inline-flex; align-items: center; gap: 5px; }
.pong-head .lucide { font-size: 12px; }
.pong-close { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 14px; }
.pong-close:hover { background: rgba(247, 244, 237, .14); }
.pong-scores { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; margin-top: 6px; }
.pong-scores i { height: 48px; background: rgba(247, 244, 237, .2); }
.pong-score { display: grid; justify-items: center; font-size: 11px; font-weight: 600; }
.pong-score b { font-size: 40px; font-weight: 300; font-variant-numeric: tabular-nums; line-height: 1.05; }
.pong-result { display: grid; justify-items: center; gap: 8px; margin-top: 8px; }
.pong-result[hidden] { display: none; }
.pong-result b { font-size: 20px; }
.pong-again { padding: 5px 14px; border-radius: 999px; background: rgba(247, 244, 237, .15); font-size: 13px; font-weight: 600; }

/* About + status lab ------------------------------------------------------ */
.about { padding: clamp(96px, 16vh, 200px) clamp(8px, 1.1vw, 16px) clamp(8px, 1.1vw, 16px); }
.about-intro { max-width: 520px; margin: 0 auto clamp(56px, 10vh, 110px); padding: 0 var(--gutter); text-align: center; }
.about-logo { margin: 0 0 clamp(24px, 3vw, 40px); line-height: 0; }
.about-logo svg { width: clamp(170px, 17vw, 260px); height: auto; fill: var(--ink); }
.about-copy { margin: 0; font-family: var(--mono); font-size: clamp(11px, .8vw, 13px); line-height: 1.5; letter-spacing: .02em; text-transform: uppercase; }
.lab {
  position: relative;
  height: clamp(560px, 86vh, 900px);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid; grid-template-rows: 1fr auto; justify-items: center;
}
.lab-stage { align-self: center; display: grid; justify-items: center; gap: clamp(20px, 3vh, 36px); }
.lab-bar.desk-bar { --icon: clamp(54px, 6vw, 92px); }
.lab-bar.desk-bar .dot { max-width: 24px; max-height: 24px; }
.lab-bar.desk-bar .badge { min-width: 26px; height: 26px; font-size: 14px; line-height: 26px; top: -9px; right: -10px; }
.lab-caption { margin: 0; max-width: 420px; text-align: center; font-family: var(--mono); font-size: clamp(11px, .8vw, 13px); line-height: 1.5; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); min-height: 3em; }
.lab-states { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 16px clamp(24px, 4vh, 44px); }
.lab-state {
  min-width: clamp(120px, 9vw, 150px); height: clamp(34px, 4.4vh, 42px); padding: 0 16px;
  border: 1px solid rgba(247, 244, 237, .9); border-radius: 999px;
  font-family: var(--mono); font-size: clamp(11px, .8vw, 13px); letter-spacing: .06em; text-transform: uppercase;
  background: rgba(3, 3, 3, .2);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.lab-state:hover { background: rgba(247, 244, 237, .18); }
.lab-state[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.scroll-reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.scroll-reveal.in-view { opacity: 1; transform: none; }

/* Features --------------------------------------------------------------- */
.features { padding: clamp(96px, 14vh, 180px) clamp(8px, 1.1vw, 16px) clamp(96px, 14vh, 180px); }
.features-head { padding: 0 var(--gutter); margin-bottom: clamp(32px, 5vh, 60px); }
.gallery-title {
  margin: 0 0 clamp(18px, 2vw, 28px);
  font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: clamp(48px, 5vw, 92px); line-height: .9; letter-spacing: -.035em;
}
.gallery-copy { margin: 0; max-width: 470px; font-family: var(--mono); font-size: clamp(11px, .8vw, 13px); line-height: 1.5; letter-spacing: .02em; text-transform: uppercase; }
.features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.feature {
  display: grid; grid-template-columns: auto 1fr; align-content: start; column-gap: 12px;
  padding: 12px 12px clamp(20px, 2vw, 28px);
  border-radius: clamp(22px, 2.2vw, 32px);
  background: var(--panel);
  border: 1px solid rgba(247, 244, 237, .06);
}
.feature-visual {
  grid-column: 1 / -1; position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; margin-bottom: clamp(18px, 1.8vw, 26px);
  border-radius: clamp(14px, 1.5vw, 22px); background: #0d0d0d;
  display: grid; place-items: center;
}
.feature-num { padding-left: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--accent); line-height: 1.9; }
.feature-title { margin: 0 0 10px; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(22px, 1.9vw, 30px); line-height: .95; letter-spacing: -.02em; }
.feature-copy { grid-column: 2; margin: 0; padding-right: 8px; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.fv-bar.desk-bar { --icon: clamp(34px, 3.2vw, 48px); cursor: default; }

/* 02 notch */
.fv-notch { align-items: start; background: #0d0d0d; }
.fv-island {
  position: relative; width: 34%; height: 13%; background: #000; border-radius: 0 0 14px 14px;
  animation: fv-island 4.8s var(--ease) infinite;
}
.fv-island::before, .fv-island::after { content: ""; position: absolute; top: 0; width: 10px; height: 10px; }
.fv-island::before { right: 100%; background: radial-gradient(circle at 0 100%, transparent 9.5px, #000 10px); }
.fv-island::after { left: 100%; background: radial-gradient(circle at 100% 100%, transparent 9.5px, #000 10px); }
.fv-island-row {
  position: absolute; left: 7%; right: 7%; bottom: 18%; opacity: 0;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 3%;
  animation: fv-island-row 4.8s var(--ease) infinite;
}
.fv-island-app { aspect-ratio: 1; }
.fv-island-app img, .fv-island-app svg { display: block; width: 100%; height: 100%; }
@keyframes fv-island { 0%, 18%, 86%, 100% { width: 34%; height: 13%; border-radius: 0 0 14px 14px; } 30%, 74% { width: 86%; height: 38%; border-radius: 0 0 26px 26px; } }
@keyframes fv-island-row { 0%, 30%, 74%, 100% { opacity: 0; } 38%, 68% { opacity: 1; } }

/* 03 folders */
.fv-folders { background: #0d0d0d; }
.fv-folder { width: 30%; aspect-ratio: 1; }
.fv-folder svg { width: 100%; height: 100%; display: block; }
.fv-folder-name { position: absolute; bottom: 14%; font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fv-file {
  position: absolute; top: 14%; left: 12%; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: var(--bg);
  font: 600 11px var(--mono); box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  animation: fv-file 3.6s var(--ease) infinite;
}
@keyframes fv-file { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 12% { opacity: 1; } 55% { transform: translate(var(--dx, 150%), var(--dy, 150%)) scale(.5); opacity: 1; } 62%, 100% { transform: translate(var(--dx, 150%), var(--dy, 150%)) scale(.3); opacity: 0; } }

/* 05 music */
.fv-music { background: #0d0d0d; }
.fv-player { width: 74%; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 14px; border-radius: 20px; background: #000; }
.fv-art { width: 54px; height: 54px; border-radius: 10px; background: #111 url("../img/night-drive.jpg") center / cover; }
.fv-track b { display: block; font-size: 14px; } .fv-track i { font-style: normal; font-size: 12px; color: var(--muted); }
.fv-progress { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(247, 244, 237, .2); overflow: hidden; }
.fv-progress span { display: block; height: 100%; width: 0; background: var(--ink); animation: fv-progress 9s linear infinite; }
@keyframes fv-progress { to { width: 100%; } }
.fv-controls { grid-column: 1 / -1; display: flex; justify-content: center; gap: 26px; font-size: 16px; }
.fv-controls span { display: inline-flex; }

/* 06 pong */
.fv-pong { background: #0d0d0d; }
.fv-pong-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

@media (max-width: 1100px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .features-grid { grid-template-columns: 1fr; } }

/* Download ending ------------------------------------------------------- */
.site-end { position: relative; height: max(100svh, 720px); overflow: hidden; background: #000; isolation: isolate; }
.end-desk { position: absolute; inset: 0; z-index: -1; }
.end-marquee { width: 100vw; overflow: hidden; margin-bottom: clamp(36px, 7vh, 84px); }
.end-marquee-track { display: flex; gap: 4vw; width: max-content; animation: end-marquee 48s linear infinite; }
.end-marquee-track svg { width: min(37vw, 62vh); height: auto; flex: none; fill: var(--ink); opacity: .9; }
@keyframes end-marquee { to { transform: translateX(calc(-50% - 2vw)); } }
.end-bar { margin-bottom: clamp(36px, 7vh, 84px); }
.end-bar .desk-bar { --icon: clamp(34px, 3.4vw, 54px); cursor: default; }
.end-cta { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--gutter) + clamp(48px, 7vh, 88px)); translate: -50% 0; display: grid; justify-items: center; gap: clamp(16px, 2vw, 28px); text-align: center; }
.end-title { margin: 0; white-space: nowrap; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 52px); line-height: .95; letter-spacing: -.035em; }
.end-button {
  display: inline-flex; align-items: center; gap: 12px; height: clamp(48px, 3.6vw, 60px); padding: 0 clamp(24px, 2vw, 34px);
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font: 600 clamp(13px, .9vw, 15px) var(--mono); letter-spacing: .08em; text-transform: uppercase;
  transition: scale .3s var(--ease), background-color .3s var(--ease);
}
.end-button .lucide { font-size: 18px; }
.end-button:hover { scale: 1.04; background: var(--ink); }
.end-buy { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.end-buy:hover { color: var(--accent); }
.end-note { margin: 0; font: clamp(10px, .7vw, 12px) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.end-legal { margin: 0; max-width: 560px; font: 10px/1.5 var(--mono); letter-spacing: .04em; color: rgba(247, 244, 237, .42); }
.end-foot {
  position: absolute; z-index: 3; left: calc(var(--gutter) + clamp(8px, 1.1vw, 16px)); right: calc(var(--gutter) + clamp(8px, 1.1vw, 16px)); bottom: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--mono); font-size: clamp(10px, .7vw, 12px); letter-spacing: .08em; text-transform: uppercase;
}
.end-copy { display: flex; align-items: center; gap: 12px; }
.end-copy .footer-mark { width: 16px; height: 16px; }
.end-link { text-decoration: underline; text-underline-offset: 3px; }
.end-link:hover { color: var(--accent); }

/* Intro ------------------------------------------------------------------ */
.intro { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: var(--bg); transition: opacity .6s var(--ease); }
.intro-logo { width: min(46vw, 520px); fill: var(--ink); overflow: visible; }
.intro .letter { transform: translateY(40%); opacity: 0; }
.intro .block { transform: scale(0) rotate(-90deg); opacity: 0; }
.intro.is-assembling .letter, .intro.is-assembling .block { transform: none; opacity: 1; }
.intro.is-leaving { opacity: 0; }
.intro.is-gone { display: none; }

/* Updates page ----------------------------------------------------------- */
body.page { overflow: visible; }
.page-header {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: var(--gutter) calc(var(--gutter) + clamp(8px, 1.1vw, 16px));
  background: linear-gradient(180deg, rgba(3, 3, 3, .92) 60%, rgba(3, 3, 3, 0));
}
.monogram { display: block; justify-self: center; height: clamp(22px, 2vw, 30px); }
.monogram svg { height: 100%; width: auto; display: block; fill: var(--ink); transition: fill .3s var(--ease), transform .5s var(--spring); }
.monogram:hover svg { fill: var(--accent); transform: rotate(90deg); }
.updates { padding: clamp(48px, 9vh, 120px) clamp(8px, 1.1vw, 16px) clamp(64px, 10vh, 120px); }
.updates h1.gallery-title { font-size: clamp(56px, 7vw, 120px); }
.release { margin-bottom: clamp(40px, 6vh, 72px); }
.release-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 var(--gutter) 14px; margin-bottom: 16px; border-bottom: 1px solid rgba(247, 244, 237, .12); }
.release-version { margin: 0; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(24px, 2.2vw, 36px); letter-spacing: -.02em; }
.release-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.update-card { padding-top: 16px; min-height: 160px; }
.update-card .feature-copy b { color: var(--ink); font-weight: 600; }
.update-meta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin: 0 8px 22px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.update-tag { padding: 5px 10px; border-radius: 999px; background: #141414; color: var(--muted); }
.update-version { color: var(--accent); }
.updates-status { padding: 0 var(--gutter); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.page-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 calc(var(--gutter) + clamp(8px, 1.1vw, 16px)) var(--gutter); font-family: var(--mono); font-size: clamp(10px, .7vw, 12px); letter-spacing: .08em; text-transform: uppercase; }

/* Page transition: the ✱ wave (transition.js). */
html.mark-in::after { content: ""; position: fixed; inset: 0; z-index: 100; background: #030303; }
.mark-transition { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 101; pointer-events: none; }

/* Updates: the card that asks for suggestions (as on the OFFSET site). */
.suggest { margin-top: clamp(10px, 1.2vw, 18px); }
.suggest-card { border: 1px dashed rgba(255, 95, 87, .55); padding: 22px 12px 18px; }
.suggest-card .feature-num { font-size: 18px; line-height: 1.2; }
.suggest-input {
  grid-column: 2; margin: 18px 8px 0 0; padding: 14px 16px; resize: vertical; min-height: 110px;
  border-radius: 16px; border: 1px solid rgba(247, 244, 237, .16); background: #0d0d0d; color: var(--ink);
  font: 13px/1.5 var(--mono);
}
.suggest-input:focus { outline: none; border-color: var(--accent); }
.suggest-row { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 8px 0 0; }
.suggest-note { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.suggest-send { height: 40px; padding: 0 20px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: scale .2s var(--ease), opacity .2s; }
.suggest-send:hover { scale: 1.04; }
.suggest-send:disabled { opacity: .35; pointer-events: none; }

/* Small screens --------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-left { display: none; }
  .menu-toggle { display: inline-flex; min-width: 0; justify-self: start; }
  .pill { min-width: 0; padding: 0 16px; }
  .pill-download .pill-track { display: none; }
  .pill-download { width: var(--h); padding: 0; }
  /* A taller screen on phones: the bar keeps three groups at a usable size. */
  .hero { padding-inline: 12px; }
  .hero-sub { display: none; }
  .screen .desk-bar { --icon: clamp(22px, 8cqw, 34px); }
  .desk-bar .bar-group:nth-child(n + 4) { display: none; }
  .island.is-open { --w: 90cqw; --h: max(76px, 24cqw); }
  .island-weather, .menubar-left span { display: none; }
  .bar-panel { width: min(230px, 76cqw); }
  .hint { display: none; }
  .mobile-menu {
    position: absolute; inset: 0; z-index: 9;
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    padding: var(--gutter); background: rgba(3, 3, 3, .92);
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu a { font-weight: 900; font-style: italic; font-size: clamp(36px, 11vw, 68px); line-height: .95; letter-spacing: -.03em; text-transform: uppercase; }
  .mobile-menu a[aria-current] { color: var(--accent); }
  .lab-bar.desk-bar { --icon: clamp(40px, 12vw, 60px); }
  .lab-bar.desk-bar .bar-group:nth-child(n + 3) { display: none; }
  .end-bar .desk-bar .bar-group:nth-child(n + 4) { display: none; }
  .end-title { white-space: normal; font-size: clamp(28px, 9vw, 44px); }
  .end-marquee-track svg { width: 78vw; }
  .page-header { grid-template-columns: 1fr auto; }
  .page-header .nav { display: none; }
  .page-header .monogram { justify-self: start; }
  .release-head { flex-direction: column; gap: 6px; }
  .suggest-input, .suggest-row { grid-column: 1 / -1; margin-right: 0; }
  .suggest-row { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
  .app[data-state="thinking"] .ring { --spin: 120deg; }
}