/* Fremspace. The page is drawn with the app's own things: a Mac, its desktops, slots, windows, the
   notch, keys. Colours come from the icon: its navy ground, its blue slot, its white slot, its grey
   slot. Type: Bricolage Grotesque for everything read, Instrument Serif in italic for the turn of a
   headline, JetBrains Mono for the small print. Inside the drawn Mac, the system's own fonts. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  color-scheme: dark;
  --night: #070b1d;    /* the page */
  --rim: #232b52;      /* rules on the page */
  --paper: #eef1f7;    /* the icon's white slot: text, and one light band */
  --mist: #a9b2cf;     /* quieter text */
  --blue: #4f9bff;     /* the icon's blue slot */
  --blue-hi: #8fbeff;  /* the same blue, for words on the night */
  --cobalt: #2150ea;   /* the same blue, deep enough to carry white text */
  --steel: #8a91a5;    /* the icon's grey slot */
  --ink: #0a1030;      /* text on the light slots */
  --black: #07080c;    /* bezels and the notch */

  --display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
  --ui-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bar: 38px;         /* the page's menu bar */
  --nw: 196px;         /* the page's notch */
  --pad: clamp(76px, 10vw, 150px);
  --spring: cubic-bezier(.3, 1.4, .45, 1);
  --out: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--bar) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font: 400 1.0625rem/1.6 var(--display);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.03em; }
h1 { font-size: clamp(2.75rem, 7.4vw, 6.5rem); line-height: 0.98; letter-spacing: -0.035em; white-space: nowrap; }
h2 { font-size: clamp(2.1rem, 5vw, 3.9rem); line-height: 1.02; text-wrap: balance; }
h3 { font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.02em; }
/* The turn of a headline is set in the serif, in italic. */
h1 em, h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: var(--blue-hi); }
h1 em { font-size: 1.1em; }
h2 em { white-space: nowrap; }
h2 em { font-size: 1.08em; }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100% - 32px, 1360px); margin-inline: auto; }
.lede { max-width: 36em; color: var(--mist); font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.55; }
.fine { color: var(--mist); font: 400 0.78rem/1.65 var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 90; padding: 10px 14px; border-radius: 10px; background: var(--paper); color: var(--ink); font-weight: 600; }
.skip:focus { top: calc(var(--bar) + 10px); }

/* The headline's words arrive a little off their place and settle into it, as the windows do
   under them a moment later. */
h1 .w { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  h1 .w { animation: settle 0.8s var(--spring) both; animation-delay: calc(var(--i) * 70ms + 80ms); }
  @keyframes settle { from { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
}

/* --- Keys --------------------------------------------------------------------------------------- */
kbd {
  display: inline-grid; place-items: center; min-width: 1.75em; height: 1.75em; padding: 0 0.42em;
  border-radius: 0.42em; font: 600 0.9em/1 var(--ui); color: inherit;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 1.5px 0 rgba(0, 0, 0, 0.5);
}
.chord, .hud { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.chord kbd, .hud kbd { font-size: 1rem; min-width: 2.05em; height: 2.05em; transition: transform 0.08s, background 0.14s, color 0.14s, box-shadow 0.14s; }
.chord span, .hud span { margin: 0 12px 0 8px; color: var(--mist); font: 400 0.8125rem var(--mono); }
kbd.is-down { transform: translateY(2px); background: var(--blue); color: #04102e; box-shadow: none; }

/* --- Buttons ------------------------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px;
  border: 0; border-radius: 999px; background: var(--paper); color: var(--ink);
  font: 600 1rem var(--display); text-decoration: none; cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.btn:hover { background: #fff; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3); }
.btn.ghost:hover { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn.small { min-height: 40px; padding: 0 18px; font-size: 0.9rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- The page's menu bar and notch -------------------------------------------------------------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--bar);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px));
  background: rgba(7, 11, 29, 0.74);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
  font-size: 0.875rem;
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 1rem; letter-spacing: -0.02em; }
.bar-right { display: flex; align-items: center; gap: 16px; }
.bar-link { color: var(--mist); text-decoration: none; font-weight: 500; }
.bar-link:hover { color: #fff; }
.bar-get { padding: 4px 13px; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 600; text-decoration: none; }
.bar-get:hover { background: #fff; }

.notch { position: fixed; top: 0; left: 50%; z-index: 50; width: var(--nw); height: var(--bar); margin-left: calc(var(--nw) / -2); }
.notch-pill {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 0 0 13px 13px; background: #000; cursor: pointer;
}
.notch-pill::before, .notch-pill::after { content: ""; position: absolute; top: 0; width: 8px; height: 8px; }
.notch-pill::before { right: 100%; background: radial-gradient(circle at 0 100%, transparent 7.5px, #000 8px); }
.notch-pill::after { left: 100%; background: radial-gradient(circle at 100% 100%, transparent 7.5px, #000 8px); }
.notch-pill:focus-visible { outline-offset: -4px; border-radius: 0 0 13px 13px; }
.notch-dots { display: flex; gap: 5px; }
.notch-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transition: background 0.3s; }
.notch-dots i.on { background: #fff; }
/* The name of the part of the page you reach hangs under the notch, then goes back up. */
.notch-drop {
  position: absolute; inset: 0 0 auto 0; z-index: 2; height: calc(var(--bar) + 30px);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 9px;
  border-radius: 0 0 15px 15px; background: #000; color: #fff;
  font: 600 0.8125rem var(--ui); white-space: nowrap; pointer-events: none;
  transform: translateY(-31px); transition: transform 0.5s var(--spring);
}
.notch.is-speaking .notch-drop { transform: none; }
/* The map opens out of the notch when the pointer rests on it. */
.notch-map {
  position: absolute; top: 0; left: 50%; z-index: 1; width: min(720px, 100vw - 16px);
  transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
  padding: calc(var(--bar) + 12px) 14px 14px;
  border-radius: 0 0 26px 26px; background: #000;
  visibility: hidden;
  clip-path: inset(0 calc(50% - var(--nw) / 2) calc(100% - var(--bar)) calc(50% - var(--nw) / 2) round 0 0 13px 13px);
  transition: clip-path 0.36s var(--out), visibility 0s 0.36s;
}
.notch.is-open .notch-map, .notch:focus-within .notch-map {
  visibility: visible; clip-path: inset(0 0 0 0 round 0 0 26px 26px);
  transition: clip-path 0.5s var(--out), visibility 0s;
}
@media (hover: hover) {
  .notch:hover .notch-map {
    visibility: visible; clip-path: inset(0 0 0 0 round 0 0 26px 26px);
    transition: clip-path 0.5s var(--out) 0.12s, visibility 0s 0.12s;
  }
}
.notch.is-shut .notch-map {
  visibility: hidden;
  clip-path: inset(0 calc(50% - var(--nw) / 2) calc(100% - var(--bar)) calc(50% - var(--nw) / 2) round 0 0 13px 13px);
  transition: clip-path 0.3s var(--out), visibility 0s 0.3s;
}
.notch-map a {
  display: grid; gap: 7px; justify-items: center; align-content: start; padding: 12px 6px 10px;
  border: 2px solid transparent; border-radius: 14px;
  color: rgba(255, 255, 255, 0.66); font: 500 0.8125rem/1.2 var(--ui); text-align: center; text-decoration: none;
}
.notch-map svg { width: min(72px, 100%); fill: currentColor; opacity: 0.6; }
.notch-map a:hover, .notch-map a:focus-visible { border-color: var(--blue); color: #fff; outline: 0; }
.notch-map a[aria-current] { color: #fff; font-weight: 700; }
.notch-map a[aria-current] svg { opacity: 1; }

/* --- Scenes: drawn at a fixed size, scaled to fit ------------------------------------------------ */
.fit { position: relative; width: 100%; }
.fit-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

/* A display is placed by its screen; the bezel, the stand or the base are drawn around it. */
.display { position: absolute; }
.display::before {
  content: ""; position: absolute; inset: -12px; border-radius: 16px; background: var(--black);
  box-shadow: 0 0 0 1.5px #4a4f5c, 0 0 0 3px #0c0d12, 0 60px 90px -50px rgba(0, 0, 0, 0.95);
}
.display.laptop::before {
  inset: -11px -11px -14px; border-radius: 18px 18px 5px 5px;
  box-shadow: 0 0 0 2px #aeb4c1, 0 0 0 3px #5d6370;
}
.stand {
  position: absolute; left: 50%; top: calc(100% + 12px); width: 104px; height: 96px; margin-left: -52px;
  background: linear-gradient(90deg, #8d93a2, #cfd3dc 22%, #eceef3 48%, #c0c5d0 76%, #858b9b);
}
.stand::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(10, 14, 34, 0.55), transparent 30%); }
.stand::after {
  content: ""; position: absolute; left: -104px; right: -104px; bottom: -6px; height: 11px; border-radius: 7px 7px 3px 3px;
  background: linear-gradient(#eef0f5, #b9bfcb 55%, #858c9c); box-shadow: 0 22px 30px -8px rgba(0, 0, 0, 0.75);
}
.base {
  position: absolute; left: -66px; right: -66px; top: calc(100% + 14px); height: 17px;
  border-radius: 3px 3px 17px 17px / 3px 3px 13px 13px;
  background: linear-gradient(#f3f5f8 0, #d3d7df 16%, #b6bbc8 55%, #7c8393 100%);
  box-shadow: inset 0 1px 0 #fff, 0 26px 34px -12px rgba(0, 0, 0, 0.85);
}
.base::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 104px; height: 7px; margin-left: -52px;
  border-radius: 0 0 9px 9px; background: linear-gradient(#858b9a, #b4b9c5);
}
.screen, .lid-screen { --mb: 24px; --dk: 32px; --wf: 11px; }
.screen, .lid-screen, .page {
  /* The wallpaper: the blue hour, the icon's blue rising from under the horizon. */
  background:
    radial-gradient(135% 86% at 50% 122%, #b9d6ff 0%, #6ea4f7 20%, #3a6bdb 40%, rgba(40, 72, 176, 0) 72%),
    linear-gradient(180deg, #152461 0%, #2240a2 50%, #3463d6 100%);
}
/* Other desktops, other hours: Arrakis at dusk, then green and violet. Deep, so windows stay in front. */
.page.tint-1 {
  background:
    radial-gradient(135% 86% at 50% 122%, #ffe2b4 0%, #eea763 20%, #c26a42 40%, rgba(150, 72, 62, 0) 72%),
    linear-gradient(180deg, #2a1b45 0%, #5a2c54 50%, #9a4b46 100%);
}
.page.tint-2 {
  background:
    radial-gradient(135% 86% at 50% 122%, #c6f3e6 0%, #5cc0b0 20%, #258581 40%, rgba(24, 104, 104, 0) 72%),
    linear-gradient(180deg, #0b2a3e 0%, #114a5c 50%, #1c6d74 100%);
}
.page.tint-3 {
  background:
    radial-gradient(135% 86% at 50% 122%, #e4d4ff 0%, #a388f3 20%, #6652d0 40%, rgba(84, 64, 184, 0) 72%),
    linear-gradient(180deg, #1a1447 0%, #2d2579 50%, #473db2 100%);
}
.screen { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; }
/* While windows are away from their slots they may cross from one display to another. */
.is-loose .screen { overflow: visible; }

.mbar {
  position: absolute; inset: 0 0 auto 0; z-index: 1; height: var(--mb);
  display: flex; align-items: center; gap: 1.3em; padding: 0 1em;
  background: rgba(8, 13, 40, 0.32); color: #fff;
  font: 500 calc(var(--mb) * 0.46)/1 var(--ui); white-space: nowrap;
}
.mbar b { font-weight: 700; }
.mbar em { display: flex; align-items: center; gap: 1.1em; margin-left: auto; font-style: normal; }
.mbar i { flex: none; display: block; }
/* Fremspace lives in the menu bar: its three slots. */
.mb-fold {
  width: 1.15em; height: 0.95em; border-radius: 0.16em;
  background: linear-gradient(#fff, #fff) 0 0 / 52% 100% no-repeat, linear-gradient(#fff, #fff) 100% 0 / 38% 42% no-repeat, linear-gradient(#fff, #fff) 100% 100% / 38% 42% no-repeat;
}
.mb-batt { position: relative; width: 1.9em; height: 0.92em; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 0.3em; }
.mb-batt::before { content: ""; position: absolute; inset: 1.5px 22% 1.5px 1.5px; border-radius: 0.14em; background: #fff; }
.mb-batt::after { content: ""; position: absolute; left: calc(100% + 1.5px); top: 28%; width: 1.5px; height: 44%; border-radius: 1px; background: rgba(255, 255, 255, 0.75); }
.mb-find { position: relative; width: 0.78em; height: 0.78em; border: 1.5px solid #fff; border-radius: 50%; }
.mb-find::after { content: ""; position: absolute; left: 88%; top: 88%; width: 0.42em; height: 1.5px; background: #fff; transform: rotate(45deg); transform-origin: 0 50%; }
.lnotch {
  position: absolute; top: 0; left: 50%; z-index: 60; width: 86px; height: 20px; margin-left: -43px; border-radius: 0 0 8px 8px;
  background: radial-gradient(circle at 50% 46%, #23304f 0 2px, #0d1220 2.2px 3.4px, transparent 3.6px), var(--black);
}

.dock {
  position: absolute; left: 50%; bottom: calc(var(--dk) * 0.22); z-index: 1; transform: translateX(-50%);
  display: flex; gap: calc(var(--dk) * 0.16); padding: calc(var(--dk) * 0.16);
  border-radius: calc(var(--dk) * 0.44); background: rgba(235, 242, 255, 0.24);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.5), 0 8px 22px rgba(4, 10, 40, 0.28);
}
.dock .ico { position: relative; width: var(--dk); height: var(--dk); }
.dock .ico.run::after { content: ""; position: absolute; left: 50%; top: calc(100% + 1.5px); width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); }

.ico {
  flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 24%;
  background: linear-gradient(180deg, var(--i1, #9aa0b0), var(--i2, #6f7587));
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.45), inset 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.28);
}
.ico svg { width: 68%; height: 68%; fill: none; stroke: var(--ig, #fff); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ico .f { fill: var(--ig, #fff); stroke: none; }
.ico-finder { --i1: #6fc3ff; --i2: #2a86ee; }
.ico-code { --i1: #5aa8ff; --i2: #2463dc; }
.ico-safari { --i1: #fdfdff; --i2: #dfe4ee; --ig: #1c7cf0; }
.ico-terminal { --i1: #3a3c44; --i2: #17181c; }
.ico-mail { --i1: #5bb8ff; --i2: #1f7af0; }
.ico-messages { --i1: #6fe07a; --i2: #24b33f; }
.ico-calendar { --i1: #fdfdff; --i2: #e4e7ee; --ig: #f0453a; }
.ico-notes { --i1: #ffe27a; --i2: #f4b81f; --ig: #7a5600; }
.ico-music { --i1: #ff7189; --i2: #f02d55; }
.ico-desktop, .ico-scene, .ico-command { --i1: #62677a; --i2: #454959; }

.slot {
  position: absolute; display: grid; place-items: center; border-radius: 11px;
  border: 1.5px dashed rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.78); font: 600 calc(var(--wf) * 1.1) var(--ui);
}

/* --- Windows ------------------------------------------------------------------------------------
   Sized in em, so the same window is drawn larger where the Mac is seen from closer. */
.win {
  position: absolute; left: 0; top: 0; z-index: 2; display: flex; flex-direction: column;
  overflow: hidden; border-radius: 0.95em; background: #fff; color: #1d1d1f;
  font: 400 var(--wf)/1.35 var(--ui);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.32), 0 2px 5px rgba(3, 8, 30, 0.2), 0 14px 34px -4px rgba(3, 8, 30, 0.42);
  -webkit-user-select: none; user-select: none;
}
.win.is-key { box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.36), 0 3px 8px rgba(3, 8, 30, 0.24), 0 24px 54px -6px rgba(3, 8, 30, 0.62); }
.hero .win { cursor: grab; touch-action: pan-y; will-change: transform; }
.hero .win.is-held { cursor: grabbing; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.4), 0 6px 14px rgba(3, 8, 30, 0.3), 0 40px 70px -8px rgba(3, 8, 30, 0.75); }
.win-bar {
  position: relative; flex: 0 0 2.55em; display: flex; align-items: center; padding: 0 0.95em;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.16); background: #ebebed; color: #a2a2a7; font-size: 0.96em; font-weight: 600;
}
.win.is-key .win-bar { background: #e9e9eb; color: #3c3c40; }
.lights { flex: none; display: flex; gap: 0.62em; }
.lights i { width: 1em; height: 1em; border-radius: 50%; background: #d3d3d7; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.14); }
.win.is-key .lights i:nth-child(1) { background: #ff5f57; }
.win.is-key .lights i:nth-child(2) { background: #febc2e; }
.win.is-key .lights i:nth-child(3) { background: #28c840; }
.win-title { position: absolute; left: 6.2em; right: 6.2em; overflow: hidden; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.win-body { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; container-type: inline-size; }
.win-body p, .win-body h4, .win-body figure { margin: 0; }
.win-body i, .win-body em, .win-body u { font-style: normal; text-decoration: none; }
.app-code .win-bar, .app-terminal .win-bar, .app-music .win-bar { border-bottom-color: #000; background: #2a2b30; color: #77787f; }
.app-code.is-key .win-bar, .app-terminal.is-key .win-bar, .app-music.is-key .win-bar { background: #303136; color: #d2d3d9; }
.app-code .lights i, .app-terminal .lights i, .app-music .lights i { background: #4b4c53; }

/* Safari: the address in the toolbar, then a page of a magazine. */
.app-safari .win-bar { flex-basis: 3em; }
.url {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.45em; max-width: 26em; height: 1.85em; margin: 0 auto; padding: 0 0.8em;
  overflow: hidden; border-radius: 0.55em; background: #dcdce0; color: #55555a; font-size: 0.93em; font-weight: 400; white-space: nowrap;
}
.url i { position: relative; flex: none; width: 0.6em; height: 0.5em; margin-top: 0.2em; border-radius: 0.12em; background: #8a8a90; }
.url i::before { content: ""; position: absolute; left: 16%; right: 16%; bottom: 92%; height: 0.36em; border: 0.1em solid #8a8a90; border-bottom: 0; border-radius: 0.3em 0.3em 0 0; }
.app-safari .lights { margin-right: 0.9em; }
.sk-web { display: flex; flex-direction: column; height: 100%; background: #fff; --tone: #b0522a; }
.sk-web header { flex: none; display: flex; align-items: baseline; gap: 1.4em; padding: 0.75em 1.6em 0.65em; overflow: hidden; border-bottom: 0.5px solid #e4e4e8; color: #6e6e73; font-size: 0.88em; white-space: nowrap; }
.sk-web header b { margin-right: 0.3em; color: #1d1d1f; font: italic 700 1.5em Georgia, "Times New Roman", serif; }
.sk-web .col { flex: 1; display: grid; grid-template-columns: minmax(0, 44em); justify-content: center; gap: 0.7em; align-content: start; min-height: 0; padding: 1.2em 1.6em 0; }
.sk-web figure {
  height: 8em; border-radius: 0.6em;
  background:
    radial-gradient(circle at 68% 30%, #fff3d6 0 3.4%, transparent 3.9%),
    radial-gradient(circle at 79% 48%, #ffe2b8 0 1.9%, transparent 2.4%),
    radial-gradient(95% 130% at 8% 142%, #7a3b1d 0 55%, transparent 55.6%),
    radial-gradient(95% 120% at 92% 152%, #b5652f 0 55%, transparent 55.6%),
    linear-gradient(#f3b561, #ea8a4a 55%, #d2603c);
}
.sk-web small { color: var(--tone); font-size: 0.78em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sk-web h4 { color: #1d1d1f; font: 700 1.65em/1.12 Georgia, "Times New Roman", serif; letter-spacing: -0.01em; }
.sk-web p { color: #48484d; font-size: 0.96em; line-height: 1.5; }
.sk-web.tone-1 { --tone: #8a5a2a; }
.sk-web.tone-1 figure {
  background:
    radial-gradient(60% 100% at 26% 128%, #5b3a2e 0 60%, transparent 60.6%),
    radial-gradient(74% 120% at 80% 134%, #7a4d3a 0 60%, transparent 60.6%),
    linear-gradient(#f6dcae, #efba84 60%, #d98d5d);
}
.sk-web.tone-2 { --tone: #17707c; }
.sk-web.tone-2 figure {
  background:
    radial-gradient(70% 90% at 24% 150%, #0f4a5c 0 60%, transparent 60.6%),
    radial-gradient(80% 80% at 78% 150%, #17667a 0 60%, transparent 60.6%),
    linear-gradient(#a9cdd5, #74a8b7 55%, #44849a);
}

/* Terminal: a build and its tests. */
.sk-term { height: 100%; padding: 0.8em 1.05em; background: #1b1c20; color: #dcdde3; font: 500 0.94em/1.62 var(--ui-mono); white-space: nowrap; }
.sk-term b { color: #6cc7f5; font-weight: 600; }
.sk-term .dim { color: #8c8e98; }
.sk-term .ok { color: #72d48d; }
.sk-term u { display: inline-block; width: 0.6em; height: 1.15em; vertical-align: -0.22em; background: #dcdde3; animation: blink 1.1s steps(2, jump-none) infinite; }
@keyframes blink { to { opacity: 0; } }

/* Code: files on the left, tabs, a Swift file. */
.sk-code { display: flex; height: 100%; background: #1f2126; color: #d9dbe2; }
.sk-code aside { flex: 0 0 10.6em; display: grid; gap: 0.12em; align-content: start; padding: 0.8em 0.6em; border-right: 0.5px solid #000; background: #25272d; color: #b9bbc5; font-size: 0.93em; }
.sk-code aside b { padding: 0.15em 0.5em 0.45em; color: #fff; font-weight: 600; }
.sk-code aside span { padding: 0.24em 0.5em 0.24em 1.5em; overflow: hidden; border-radius: 0.4em; white-space: nowrap; text-overflow: ellipsis; }
.sk-code aside .d { margin-top: 0.35em; padding-left: 0.5em; color: #878993; font-size: 0.88em; font-weight: 600; }
.sk-code aside .on { background: #3567d6; color: #fff; }
.sk-code .ed { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sk-code nav { flex: none; display: flex; border-bottom: 0.5px solid #000; background: #25272d; color: #878993; font-size: 0.9em; }
.sk-code nav span { padding: 0.5em 1.3em; border-right: 0.5px solid #000; }
.sk-code nav .on { background: #1f2126; color: #e8e9ee; }
.sk-code pre { margin: 0; padding: 0.7em 0; overflow: hidden; font: 500 0.94em/1.62 var(--ui-mono); white-space: pre; }
.sk-code pre p { min-height: 1.62em; }
.sk-code pre i { display: inline-block; width: 2.7em; padding-right: 1.1em; color: #5c5e68; text-align: right; }
.sk-code pre b { font-weight: inherit; }
.sk-code .k { color: #ff7ab2; }
.sk-code .t { color: #a8ecdc; }
.sk-code .f { color: #7cc4ff; }
.sk-code .s { color: #ff8f7a; }
.sk-code .c { color: #7f8c98; }
@container (max-width: 30em) { .sk-code aside { display: none; } }

/* Notes: the list of notes, and a shopping list. */
.sk-notes { display: flex; height: 100%; background: #fff; }
.sk-notes aside { flex: 0 0 11.5em; display: grid; gap: 0.15em; align-content: start; padding: 0.6em; border-right: 0.5px solid #e2e2e6; background: #f3f3f5; }
.sk-notes aside p { display: grid; gap: 0.1em; padding: 0.5em 0.7em; border-radius: 0.55em; }
.sk-notes aside b { font-weight: 700; }
.sk-notes aside span { overflow: hidden; color: #77777c; font-size: 0.86em; white-space: nowrap; text-overflow: ellipsis; }
.sk-notes aside .on { background: #fbdb6f; }
.sk-notes aside .on span { color: #6b5a1e; }
.sk-notes article { flex: 1; min-width: 0; padding: 0.8em 1.5em; }
.sk-notes small { display: block; margin-bottom: 0.9em; overflow: hidden; color: #a3a3a8; font-size: 0.84em; text-align: center; white-space: nowrap; }
.sk-notes h4 { margin-bottom: 0.55em; font-size: 1.5em; font-weight: 700; letter-spacing: -0.015em; }
.sk-notes ul { display: grid; gap: 0.5em; margin: 0; padding: 0; list-style: none; }
.sk-notes li { display: flex; align-items: center; gap: 0.65em; white-space: nowrap; }
.sk-notes li::before { content: ""; flex: none; width: 1.1em; height: 1.1em; border: 1.5px solid #c6c6ca; border-radius: 50%; }
.sk-notes li.done { color: #a3a3a8; text-decoration: line-through; }
.sk-notes li.done::before { border-color: #e9b61c; background: radial-gradient(circle, #fff 0 24%, #e9b61c 27%); }
@container (max-width: 25em) { .sk-notes aside { display: none; } }

/* Mail: the inbox and one message. */
.sk-mail { display: flex; height: 100%; background: #fff; }
.sk-mail aside { flex: 0 0 15em; display: grid; align-content: start; border-right: 0.5px solid #e2e2e6; background: #fbfbfc; }
.sk-mail aside p { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1em 0.6em; padding: 0.6em 0.9em; border-bottom: 0.5px solid #e8e8ec; }
.sk-mail aside b { font-weight: 700; }
.sk-mail aside i { color: #8a8a90; font-size: 0.86em; }
.sk-mail aside span, .sk-mail aside em { grid-column: 1 / -1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sk-mail aside span { font-size: 0.95em; }
.sk-mail aside em { color: #8a8a90; font-size: 0.88em; }
.sk-mail aside .on { background: #2b7bf2; color: #fff; }
.sk-mail aside .on i, .sk-mail aside .on em { color: rgba(255, 255, 255, 0.8); }
.sk-mail article { flex: 1; display: grid; gap: 0.75em; align-content: start; min-width: 0; padding: 1.1em 1.5em; }
.sk-mail h4 { font-size: 1.3em; font-weight: 700; letter-spacing: -0.01em; }
.sk-mail small { margin-top: -0.4em; padding-bottom: 0.8em; border-bottom: 0.5px solid #e6e6ea; color: #8a8a90; font-size: 0.88em; }
.sk-mail article p { color: #3a3a3f; line-height: 1.5; }
.sk-mail article div { display: flex; align-items: baseline; gap: 0.9em; padding: 0.8em 1em; border-radius: 0.7em; background: #f1f4fa; }
.sk-mail article div b { font-size: 1.5em; font-weight: 700; font-variant-numeric: tabular-nums; }
.sk-mail article div span { color: #55555a; }
@container (max-width: 30em) { .sk-mail aside { display: none; } }

/* Messages: one conversation. */
.sk-msg { display: flex; flex-direction: column; height: 100%; background: #fff; }
.sk-msg header { flex: none; display: grid; justify-items: center; gap: 0.25em; padding: 0.6em 0 0.5em; border-bottom: 0.5px solid #e6e6ea; background: #f8f8fa; font-size: 0.86em; }
.sk-msg header i { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: linear-gradient(#b5bac6, #878d9d); color: #fff; font-weight: 700; }
.sk-msg > div { flex: 1; display: flex; flex-direction: column; gap: 0.38em; min-height: 0; padding: 0.9em 1em; overflow: hidden; }
.sk-msg p { align-self: flex-start; max-width: 80%; padding: 0.45em 0.9em; border-radius: 1.2em; background: #e9e9eb; line-height: 1.3; }
.sk-msg p.me { align-self: flex-end; background: #2b8cff; color: #fff; }

/* Calendar: a week. */
.sk-cal { display: flex; flex-direction: column; height: 100%; background: #fff; }
.sk-cal header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.7em 1em; white-space: nowrap; }
.sk-cal header b { font-size: 1.3em; font-weight: 700; letter-spacing: -0.01em; }
.sk-cal header span { display: flex; padding: 0.15em; border-radius: 0.55em; background: #ececef; font-size: 0.86em; }
.sk-cal header i { padding: 0.2em 0.85em; border-radius: 0.42em; color: #55555a; }
.sk-cal header i.on { background: #fff; box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.22); color: #1d1d1f; font-weight: 600; }
.sk-cal .days { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: 0; border-top: 0.5px solid #dedee2; }
.sk-cal .days > div { position: relative; border-left: 0.5px solid #ececf0; background: repeating-linear-gradient(#fff 0 2.38em, #ededf1 2.38em 2.44em) 0 2.1em no-repeat; }
.sk-cal .days > div:first-child { border-left: 0; }
.sk-cal .days b { display: flex; align-items: center; gap: 0.35em; height: 2.1em; padding: 0 0.55em; font-weight: 500; white-space: nowrap; }
.sk-cal .days b span { color: #77777c; font-size: 0.86em; }
.sk-cal .days b u { font-size: 0.92em; font-weight: 600; }
.sk-cal .today b u { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: #ff3b30; color: #fff; }
.sk-cal .days em { position: absolute; left: 0.2em; right: 0.2em; padding: 0.2em 0.5em; overflow: hidden; border-radius: 0.4em; }
.sk-cal .days em span { display: block; overflow: hidden; font-size: 0.84em; font-weight: 600; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.sk-cal .e1 { background: #dce9ff; box-shadow: inset 2.5px 0 0 #3b82f6; color: #1d57b8; }
.sk-cal .e2 { background: #ffe2df; box-shadow: inset 2.5px 0 0 #ff3b30; color: #b3261e; }
.sk-cal .e3 { background: #dcf5e3; box-shadow: inset 2.5px 0 0 #34c759; color: #1b7a3c; }
.sk-cal .e4 { background: #efe3ff; box-shadow: inset 2.5px 0 0 #af52de; color: #7334c0; }
.sk-cal .e5 { background: #ffecd6; box-shadow: inset 2.5px 0 0 #ff9500; color: #a35a00; }
@container (max-width: 27em) {
  .sk-cal header span { display: none; }
  .sk-cal .days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sk-cal .days > div:nth-child(-n+2) { display: none; }
}

/* Music: what is playing, and what comes next. */
.sk-music { display: flex; flex-direction: column; height: 100%; background: linear-gradient(160deg, #3b2242, #1a1527 72%); color: #fff; }
.sk-music .now { flex: none; display: flex; align-items: center; gap: 1.1em; padding: 1.1em; }
.sk-music .now em {
  flex: none; width: 6em; height: 6em; border-radius: 0.6em; box-shadow: 0 0.6em 1.4em rgba(0, 0, 0, 0.45);
  background:
    radial-gradient(circle at 50% 118%, transparent 0 34%, rgba(255, 255, 255, 0.5) 34.5% 36%, transparent 36.5% 48%, rgba(255, 255, 255, 0.35) 48.5% 50%, transparent 50.5% 62%, rgba(255, 255, 255, 0.2) 62.5% 64%, transparent 64.5%),
    linear-gradient(150deg, #ff8a5c, #e23d74 55%, #5b3fc4);
}
.sk-music .now > div { flex: 1; display: grid; gap: 0.3em; min-width: 0; max-width: 26em; }
.sk-music .now b { font-size: 1.2em; font-weight: 700; letter-spacing: -0.01em; }
.sk-music .now span { color: rgba(255, 255, 255, 0.6); }
.sk-music .seek { height: 0.3em; margin-top: 0.45em; border-radius: 0.2em; background: rgba(255, 255, 255, 0.2); }
.sk-music .seek i { display: block; width: 42%; height: 100%; border-radius: inherit; background: #ff6b9a; }
.sk-music .ctl { display: flex; align-items: center; gap: 1.3em; margin-top: 0.5em; }
.sk-music .ctl i { width: 1.05em; height: 1.05em; background: #fff; }
.sk-music .prev { clip-path: polygon(100% 0, 100% 100%, 50% 50%, 50% 100%, 0 50%, 50% 0, 50% 50%); }
.sk-music .pause { clip-path: polygon(8% 0, 38% 0, 38% 100%, 8% 100%, 8% 0, 62% 0, 62% 100%, 92% 100%, 92% 0, 62% 0); }
.sk-music .next { clip-path: polygon(0 0, 0 100%, 50% 50%, 50% 100%, 100% 50%, 50% 0, 50% 50%); }
.sk-music ol { flex: 1; min-height: 0; margin: 0; padding: 0 0.7em; overflow: hidden; border-top: 0.5px solid rgba(255, 255, 255, 0.12); list-style: none; }
.sk-music li { display: flex; justify-content: space-between; gap: 1em; padding: 0.55em 0.5em; border-bottom: 0.5px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.78); white-space: nowrap; }
.sk-music li b { font-weight: 500; }
.sk-music li span { color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; }
.sk-music li.on { color: #ff86ad; }

/* --- Hero --------------------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: clip;
  padding: calc(var(--bar) + clamp(26px, 5vh, 52px)) 0 clamp(40px, 6vw, 84px);
  background: radial-gradient(70% 44% at 56% 70%, rgba(40, 80, 234, 0.3), transparent 72%), var(--night);
}
/* As wide as the other sections, and as wide as the desk on the screens where the desk is wider. */
.hero-top {
  width: min(100% - 32px, max(1360px, min(1500px, 100% - 420px)));
  display: grid; grid-template-columns: auto minmax(0, 30rem); justify-content: space-between; align-items: end; gap: 28px 56px;
}
.hero-side { display: grid; gap: 16px; padding-bottom: 8px; }
.desk { position: relative; width: min(100% - 32px, 1500px, max(960px, (100svh - 350px) * 2.406)); margin: clamp(22px, 3.6vh, 40px) auto 0; }
.desk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 8px; margin-top: 18px; }
.desk-hint { margin-right: auto; color: var(--mist); font: 400 0.78rem/1.5 var(--mono); }
/* On a wide screen the keys sit in the quiet corner above the MacBook. */
@media (min-width: 901px) {
  .desk-foot { position: absolute; left: 4.7%; bottom: 65%; width: 34%; margin: 0; display: grid; gap: 10px; justify-items: start; }
  .desk-hint { margin: 0; }
}

/* --- The story: a stage that stays while the text scrolls ---------------------------------------- */
.story { padding-top: var(--pad); }
.story-head { display: grid; gap: 20px; }
.story-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 15fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
/* As tall as its display, not as the window: centred in a window-high box, the display left a hole
   under the heading that grew with the window. It starts under the heading and stays under the bar. */
.story-stage { order: 2; position: sticky; top: calc(var(--bar) + clamp(12px, 4svh, 56px)); margin-top: clamp(20px, 4vh, 48px); }
/* Led by the script inside a frame that does not scroll: it glides to where the reader is. */
.story-stage.is-led { transition: transform 0.28s cubic-bezier(.2, .7, .3, 1); }
.stage-box { width: min(100%, (100svh - 190px) * 1.482); margin-inline: auto; }
/* The far view grows out of the near one: nothing of it may spill on the text beside. */
.stage-box .fit { overflow: hidden; }
.stage-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; min-height: 42px; margin-top: 10px; }
/* Which step of how many. */
.prog { display: flex; align-items: center; gap: 5px; color: var(--mist); font: 400 0.78rem var(--mono); }
.prog b { color: var(--paper); font-weight: 500; }
.prog span { margin-right: 7px; }
.prog i { width: 12px; height: 3px; border-radius: 2px; background: var(--rim); transition: background 0.3s, width 0.3s var(--out); }
.prog i.on { width: 26px; background: var(--blue); }
.hud { grid-column: 2; justify-content: center; }
.hud span { margin-right: 0; }
/* Heights are bounded: inside a frame taller than the window, a share of the viewport means nothing. */
.steps { order: 1; padding: clamp(20px, 4vh, 48px) 0 clamp(60px, 14vh, 150px); }
.step { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: clamp(440px, 76vh, 760px); transition: opacity 0.35s; }
/* The first one starts where the display does. */
.step:first-child { justify-content: flex-start; min-height: clamp(320px, 52vh, 520px); padding-top: 8px; }
.steps.is-live .step { opacity: 0.36; }
.steps.is-live .step.is-on { opacity: 1; }
.step h3 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.08; letter-spacing: -0.03em; }
.step p { max-width: 24em; color: var(--mist); font-size: 1.125rem; line-height: 1.55; }
.step .chord { margin-top: 4px; }
/* With the stage live, the chord is pressed under the display instead. */
.steps.is-live .chord { display: none; }

/* The desktops of a display, in a row: changing desktop slides the row, as macOS does. */
.strip { position: absolute; inset: 0; z-index: 0; display: flex; transition: transform 0.85s cubic-bezier(.3, .86, .22, 1); }
.page { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; }
.page .win.fixed { transition: opacity 0.4s, transform 0.5s var(--out); }
.win.is-top { z-index: 400 !important; }
/* Focus: the other windows of the desktop are gone while one has it all. */
.page.is-focus .win.fixed { opacity: 0; transform: scale(0.94); }

/* A desktop's name, as Fremspace says it: a pill under the menu bar, or out of the notch. */
.pill {
  position: absolute; top: calc(var(--mb) + 14px); left: 50%; z-index: 700; display: flex; align-items: center; gap: 11px;
  padding: 10px 20px; border-radius: 999px; background: rgba(28, 30, 38, 0.86); color: #fff; font: 600 16px var(--ui); white-space: nowrap;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.28), 0 12px 32px rgba(0, 0, 0, 0.4);
  opacity: 0; transform: translate(-50%, -16px) scale(0.9); transition: opacity 0.25s, transform 0.5s var(--spring); pointer-events: none;
}
.pill.is-on { opacity: 1; transform: translate(-50%, 0); }
.ndrop {
  position: absolute; top: 0; left: 50%; z-index: 55; min-width: 86px; padding: 25px 14px 7px;
  display: grid; justify-items: center; gap: 4px; border-radius: 0 0 11px 11px; background: var(--black); color: #fff; font: 600 10.5px var(--ui); white-space: nowrap;
  transform: translate(-50%, -100%); transition: transform 0.5s var(--spring);
}
.ndrop.is-on { transform: translate(-50%, 0); }
.pill em, .ndrop em, .mark em, .lid-drop em { display: flex; align-items: center; gap: 4px; }
.pill u, .mark u, .lid-drop u { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.36); }
.ndrop em { gap: 3px; }
.ndrop u { width: 3.5px; height: 3.5px; border-radius: 50%; background: rgba(255, 255, 255, 0.36); }
.pill u.on, .ndrop u.on, .mark u.on, .lid-drop u.on { background: #fff; }

/* Two views of the same desk: Main from close, then the Laptop and Main from further away. The
   far view is scaled so that its Main lies exactly on the near one: the change reads as a step back. */
.stage-main, .desk2 { position: absolute; inset: 0; transform-origin: 0 0; transition: opacity 0.5s, transform 0.8s var(--out); }
.stage-main .screen { --mb: 26px; --dk: 36px; --wf: 12.5px; }
.show-desk .stage-main { opacity: 0; transform: translate(476px, 184px) scale(0.56); pointer-events: none; }
.desk2 { opacity: 0; transform: translate(-850px, -328px) scale(1.786); pointer-events: none; }
.show-desk .desk2 { opacity: 1; transform: none; }
.desk2-in { position: absolute; left: 13px; top: 170px; width: 1660px; height: 690px; transform: scale(0.647); transform-origin: 0 0; }
.desk2 .display { transition: transform 0.9s var(--out), opacity 0.5s; }
.desk2 .pill { font-size: 19px; }
.tag { position: absolute; left: 0; right: 0; top: calc(100% + 136px); color: var(--mist); font: 400 24px var(--mono); text-align: center; transition: opacity 0.3s; }
.laptop .tag { top: calc(100% + 46px); }
.desk2.alone .ext { opacity: 0; transform: translateX(120px) scale(0.92); }
.desk2.alone .laptop { transform: translate(482px, -118px) scale(1.62); }
.desk2.alone .tag { opacity: 0; }
/* The two configurations, named as their owner would name them. */
.configs { position: absolute; inset: 40px 0 auto 0; display: flex; justify-content: center; gap: 12px; opacity: 0; transform: translateY(-8px); transition: opacity 0.4s, transform 0.4s var(--out); }
.show-configs .configs { opacity: 1; transform: none; }
.configs span { display: grid; gap: 2px; min-width: 190px; padding: 10px 24px 11px; border-radius: 18px; color: var(--mist); text-align: center; box-shadow: inset 0 0 0 1.5px var(--rim); transition: background 0.3s, color 0.3s; }
.configs b { font: 600 22px/1.1 var(--display); letter-spacing: -0.02em; }
.configs i { font: 400 12.5px var(--mono); font-style: normal; }
.desk2:not(.alone) .configs .is-desk, .desk2.alone .configs .is-alone { background: var(--paper); color: var(--ink); box-shadow: none; }

.drawer { position: absolute; top: var(--mb); bottom: 60px; z-index: 500; width: 372px; transition: transform 0.75s cubic-bezier(.22, 1.1, .36, 1); }
.drawer.left { left: 0; transform: translateX(-100%); }
.drawer.right { right: 0; transform: translateX(100%); }
.drawer.is-open { transform: none; }
.drawer::after { content: ""; position: absolute; top: 50%; width: 5px; height: 70px; margin-top: -35px; border-radius: 3px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
.drawer.left::after { right: -10px; }
.drawer.right::after { left: -10px; }
.drawer .win { box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.4), 0 6px 14px rgba(3, 8, 30, 0.3), 0 30px 70px rgba(3, 8, 30, 0.75); }

.mark {
  position: absolute; z-index: 600; display: flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px;
  background: rgba(22, 23, 28, 0.9); color: #fff; font: 500 14px var(--ui); white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translate(-50%, 8px); transition: opacity 0.2s, transform 0.3s var(--out);
}
.mark.is-on { opacity: 1; transform: translate(-50%, 0); }
.mark b { font-weight: 700; }

/* A restart: black with a bar, then the login field, then the windows come back one by one. */
.boot { position: absolute; inset: 0; z-index: 900; display: grid; place-items: center; background: #000; opacity: 0; visibility: hidden; transition: opacity 0.45s, visibility 0s 0.45s; }
.is-boot .boot { opacity: 1; visibility: visible; transition: opacity 0.45s; }
.boot b { width: 210px; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.22); }
.boot i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.is-boot .boot i { transform: scaleX(1); transition: transform 1.8s linear 0.4s; }
.login {
  position: absolute; inset: 0; z-index: 890; display: grid; place-content: center; justify-items: center; gap: 20px;
  background: rgba(8, 12, 36, 0.5); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  opacity: 0; visibility: hidden; transition: opacity 0.45s, visibility 0s 0.45s;
}
.is-login .login { opacity: 1; visibility: visible; transition: opacity 0.45s; }
.login > i {
  width: 92px; height: 92px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
  background: radial-gradient(circle at 50% 38%, #f4f6fb 0 17%, transparent 18%), radial-gradient(62% 50% at 50% 104%, #f4f6fb 0 98%, transparent 100%), linear-gradient(#9da6c0, #68718e);
}
.login > b { display: flex; align-items: center; gap: 8px; width: 210px; height: 38px; padding: 0 16px; border-radius: 19px; background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32); }
.login u { width: 9px; height: 9px; border-radius: 50%; background: #fff; opacity: 0; }
.is-login .login u { animation: typed 0.01s linear both; }
.is-login .login u:nth-child(1) { animation-delay: 0.5s; }
.is-login .login u:nth-child(2) { animation-delay: 0.72s; }
.is-login .login u:nth-child(3) { animation-delay: 0.94s; }
.is-login .login u:nth-child(4) { animation-delay: 1.16s; }
.is-login .login u:nth-child(5) { animation-delay: 1.38s; }
@keyframes typed { to { opacity: 1; } }
.wins-out .win { opacity: 0; transition: none; }
.wins-pop .win { animation: pop 0.8s var(--spring) both; animation-delay: var(--d, 0s); }
@keyframes pop { from { opacity: 0; transform: translateY(46%) scale(0.3); } }

/* --- The palette, on the blue of its selected row ------------------------------------------------ */
.band-blue { padding: var(--pad) 0; background: var(--cobalt); color: #fff; }
.band-blue :focus-visible { outline-color: #fff; }
.band-blue h2 em { color: #fff; }
.band-blue .lede { color: rgba(255, 255, 255, 0.9); }
.band-blue .chord span { color: rgba(255, 255, 255, 0.9); }
.band-blue kbd { background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 1.5px 0 rgba(4, 16, 80, 0.5); }
.pal-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.pal-copy { display: grid; gap: 22px; }
.finds { display: grid; margin: 6px 0 0; }
.finds div { display: grid; grid-template-columns: 11.5em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.3); }
.finds dt { font-weight: 600; }
.finds dd { margin: 0; color: rgba(255, 255, 255, 0.9); }

.pal {
  overflow: hidden; border-radius: 22px; background: #26272d; color: #f2f3f7; font-family: var(--ui);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 10px 24px rgba(3, 10, 60, 0.3), 0 60px 100px -24px rgba(3, 10, 60, 0.85);
}
.pal-field { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.pal-field:focus-within { box-shadow: inset 0 0 0 2px var(--blue); border-radius: 22px 22px 0 0; }
.pal-glyph { flex: none; display: grid; grid-template: 1fr 1fr / 12px 8px; gap: 2.5px; width: 22.5px; height: 20px; }
.pal-glyph i { border-radius: 2.5px; background: #9aa0ae; }
.pal-glyph i:first-child { grid-row: span 2; }
.pal-field input { flex: 1; min-width: 0; padding: 2px 0; border: 0; outline: 0; background: none; color: inherit; font: 400 1.35rem var(--ui); }
.pal-field input::placeholder { color: #9499a8; opacity: 1; }
.pal-map { display: grid; gap: 12px; padding: 16px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

.map-row { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 12px; align-items: center; }
.map-name { color: #a9aebb; font-size: 0.8125rem; line-height: 1.2; }
.map-tiles { display: flex; gap: 12px; min-width: 0; }
.map-tile { flex: 0 1 108px; display: grid; gap: 5px; justify-items: center; min-width: 0; color: #a9aebb; font-size: 0.75rem; text-align: center; }
.map-tile > span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.map-box { position: relative; width: 100%; aspect-ratio: 16 / 9.4; border-radius: 6px; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 0.15s; }
.map-box i { position: absolute; display: grid; place-items: center; border: 1.5px solid transparent; border-radius: 6px; background: rgba(255, 255, 255, 0.1) padding-box; }
.map-box.free { border: 1.5px dashed rgba(255, 255, 255, 0.32); }
.map-box .ico { width: 44%; max-width: 20px; height: auto; aspect-ratio: 1; }
.map-tile.is-shown { color: #fff; font-weight: 700; }
.map-tile.is-shown .map-box i { background-color: rgba(255, 255, 255, 0.22); }
.map-tile.is-hit .map-box { outline-color: #4b8dff; }

.pal-list { height: calc(6 * 54px + 16px); margin: 0; padding: 8px; overflow: hidden; list-style: none; }
.pal-list li { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 14px; border-radius: 12px; }
.pal-list li.is-sel { background: #2f6df6; }
.pal-list .ico { width: 32px; height: 32px; }
.pal-t { display: grid; min-width: 0; line-height: 1.25; }
.pal-t b { overflow: hidden; font-size: 1rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.pal-t small { overflow: hidden; color: #a9aebb; font-size: 0.8125rem; white-space: nowrap; text-overflow: ellipsis; }
.pal-list .is-sel small, .pal-list .is-sel .pal-k { color: #fff; }
.pal-k { margin-left: auto; color: #a9aebb; font-size: 0.875rem; letter-spacing: 0.1em; white-space: nowrap; }
.pal-none { color: #a9aebb; }
.pal-note { min-height: 3.4em; margin: 18px 4px 0; color: rgba(255, 255, 255, 0.92); font: 400 0.8125rem/1.6 var(--mono); }

/* --- Scenes: three displays, and the key that sets them all -------------------------------------- */
.scenes {
  /* Less under it: the notch, which follows on the same night, brings its own space. */
  overflow: clip; padding: var(--pad) 0 calc(var(--pad) * 0.4);
  background: radial-gradient(62% 40% at 50% 58%, rgba(40, 80, 234, 0.3), transparent 72%), var(--night);
}
.scenes-copy { display: grid; gap: 26px; }
.scene-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: clamp(30px, 4.4vw, 60px); }
.scene-chips { display: flex; flex-wrap: wrap; gap: 10px; }
/* A scene to choose: its keys, then its name. The one that is shown is on the icon's white. */
.scene-chip {
  display: inline-flex; align-items: center; gap: 12px; min-height: 50px; margin: 0; padding: 0 22px 0 13px;
  border: 0; border-radius: 999px; background: transparent; color: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3);
  font: 600 1rem var(--display); white-space: nowrap; cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.scene-chip:hover { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1.5px currentColor; }
.scene-chip[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: none; }
.scene-chip b { font-weight: inherit; }
.scene-keys { display: flex; gap: 3px; font-size: 0.8125rem; }
.scene-keys kbd { transition: transform 0.08s, background 0.14s, color 0.14s, box-shadow 0.14s; }
.scene-chip[aria-pressed="true"] kbd { background: rgba(10, 16, 48, 0.07); box-shadow: inset 0 0 0 1px rgba(10, 16, 48, 0.24), 0 1.5px 0 rgba(10, 16, 48, 0.22); }
.scene-chip kbd.is-down { background: var(--blue); color: #04102e; box-shadow: none; }
/* What the scene did, in words. Two lines are kept for it, so the desk under it does not move. */
.scene-status { flex: 1 1 24em; display: flex; align-items: center; min-height: 3.2em; color: var(--mist); font: 400 0.8125rem/1.6 var(--mono); }

/* As wide as the hero's desk. Each display is drawn at its own size, then placed and scaled. */
.scene-desk { width: min(100% - 32px, 1500px); margin: clamp(20px, 2.4vw, 34px) auto 0; }
.scenes .screen { --mb: 26px; --dk: 36px; --wf: 12.5px; }
.scenes .display { transform-origin: 0 0; }
.scenes .pill { font-size: 19px; }
.scenes .ndrop { font-size: 12.5px; }
/* Under each display, its name and the desktop it shows, at the same size on the page whatever
   the scale of the drawing. */
.scenes .tag { font-size: calc(13px * var(--inv, 1.4) / var(--s, 1)); white-space: nowrap; }
.scenes .tag b { font-weight: 400; }
.scenes .tag span { margin-left: 0.8em; color: var(--paper); font-weight: 500; }

.scene-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(24px, 3.2vw, 52px); margin: clamp(34px, 4.6vw, 64px) 0 0; }
.scene-facts div { display: grid; gap: 8px; align-content: start; padding: 20px 0 0; border-top: 1.5px solid var(--rim); }
.scene-facts dt { font-weight: 600; }
.scene-facts dd { margin: 0; color: var(--mist); }
.scene-facts kbd { margin-right: 2px; font-size: 0.78em; }
.scene-facts code { color: var(--paper); font: 0.82em var(--mono); overflow-wrap: anywhere; }

/* --- The notch, close up ------------------------------------------------------------------------ */
.notch-sec { overflow: clip; padding-top: var(--pad); background: linear-gradient(var(--night), #04060f); }
.notch-copy { display: grid; gap: 26px; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 29em)); gap: 12px 56px; color: var(--mist); font-size: 1.125rem; }
.lid-crop { --ls: 1; position: relative; height: calc(430px * var(--ls)); margin-top: clamp(36px, 5vw, 68px); overflow: hidden; }
.lid {
  position: absolute; left: 50%; top: 0; width: 1100px; height: 480px; margin-left: -550px; padding: 14px 14px 0;
  border-radius: 32px 32px 0 0; background: var(--black);
  box-shadow: inset 0 0 0 2.5px #a4aab7, inset 0 0 0 4px #3a3e49;
  transform: scale(var(--ls)); transform-origin: 50% 0;
}
.lid-screen { --mb: 36px; --wf: 15.5px; position: relative; height: 100%; overflow: hidden; border-radius: 16px 16px 0 0; }
.lid-pages { position: absolute; inset: 0; display: flex; transition: transform 0.75s cubic-bezier(.32, .9, .25, 1); }
.lid-page { position: relative; flex: 0 0 100%; height: 100%; }
.lid .mbar { z-index: 5; padding: 0 1.4em; }
/* The notch starts above the screen's edge, so no seam shows what is tucked behind it. */
.lid-notch {
  position: absolute; top: -4px; left: 50%; z-index: 40; width: 200px; height: 40px; margin-left: -100px; border-radius: 0 0 13px 13px;
  background: radial-gradient(circle at 50% 52%, #26345a 0 3.5px, #0e1322 3.8px 6px, transparent 6.4px), var(--black);
}
.lid-drop {
  position: absolute; top: 0; left: 50%; z-index: 30; width: 200px; height: 80px; margin-left: -100px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; padding-bottom: 10px;
  border-radius: 0 0 18px 18px; background: var(--black); color: #fff; font: 600 15px var(--ui);
  transform: translateY(-46px); transition: transform 0.5s var(--spring);
}
.lid-drop.is-on { transform: none; }
.lid-drop u { width: 5px; height: 5px; }
.lid-map {
  position: absolute; top: 0; left: 50%; z-index: 35; width: 580px; margin-left: -290px; padding: 56px 28px 24px;
  display: grid; gap: 14px; border-radius: 0 0 28px 28px; background: var(--black); color: #fff; font-family: var(--ui);
  visibility: hidden; clip-path: inset(0 190px calc(100% - 36px) 190px round 0 0 13px 13px);
  transition: clip-path 0.36s var(--out), visibility 0s 0.36s;
}
.map-open .lid-map { visibility: visible; clip-path: inset(0 0 0 0 round 0 0 28px 28px); transition: clip-path 0.5s var(--out), visibility 0s; }
.lid-map .map-tile { cursor: pointer; font-size: 13px; }
.lid-map .map-name { font-size: 13.5px; }
.lid-cursor { position: absolute; left: 0; top: 0; z-index: 70; width: 20px; height: 24px; opacity: 0; pointer-events: none; transition: transform 0.85s cubic-bezier(.4, 0, .2, 1), opacity 0.3s; }
.lid-cursor.is-on { opacity: 1; }

/* --- The keyboard, on the icon's white ----------------------------------------------------------- */
.band-paper { padding: var(--pad) 0; background: var(--paper); color: var(--ink); }
.band-paper :focus-visible { outline-color: var(--cobalt); }
.band-paper h2 em { color: var(--cobalt); }
.band-paper .lede, .band-paper p { color: #39426a; }
.band-paper .fine { color: #4a5479; }
.band-paper kbd { background: rgba(10, 16, 48, 0.07); box-shadow: inset 0 0 0 1px rgba(10, 16, 48, 0.24), 0 1.5px 0 rgba(10, 16, 48, 0.22); }
.keys-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 84px); align-items: start; }
.keys-copy { display: grid; gap: 18px; }
.keys-copy .fine { max-width: 34em; }
.switch {
  justify-self: start; display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 22px 0 13px;
  border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 600 1rem var(--display); cursor: pointer;
}
.switch i { position: relative; flex: none; width: 42px; height: 26px; border-radius: 13px; background: rgba(255, 255, 255, 0.26); transition: background 0.2s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.3s var(--spring); }
.switch[aria-checked="true"] i { background: var(--blue); }
.switch[aria-checked="true"] i::after { transform: translateX(16px); }

.kb {
  container-type: inline-size; padding: 1.5%; border-radius: 16px;
  background: linear-gradient(#e2e5ee, #c6cbd9);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #a9afc2, 0 0 0 1px #aab0c3, 0 40px 60px -36px rgba(10, 16, 48, 0.6);
}
.kb-row { display: flex; gap: 5px; gap: 0.75cqw; }
.kb-row + .kb-row { margin-top: 5px; margin-top: 0.75cqw; }
.key {
  position: relative; flex: 1 1 0; display: grid; place-items: center; min-width: 0; height: 36px; height: 5.7cqw;
  border-radius: 5px; border-radius: 0.9cqw; background: linear-gradient(#24272f, #191b22); color: #e9ecf5;
  font: 500 12px var(--ui); font-size: 1.95cqw; box-shadow: 0 2px 0 #090b12; box-shadow: 0 0.28cqw 0 #090b12, inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
  transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.08s;
}
.key.pair { display: grid; grid-template-rows: 1fr 1fr; gap: 0.4cqw; background: none; box-shadow: none; }
.key.pair .key { width: 100%; height: auto; border-radius: 0.6cqw; font-size: 1.25cqw; box-shadow: none; }
.key.is-lit { background: var(--cobalt); color: #fff; box-shadow: 0 0.28cqw 0 #1535a2, 0 0 0 0.4cqw rgba(33, 80, 234, 0.26); }
.key.pair .key.is-lit { box-shadow: 0 0 0 0.3cqw rgba(33, 80, 234, 0.26); }
.key.is-pressed { transform: translateY(0.22cqw); background: var(--blue); color: #04102e; }

.kb-hint { margin-top: 14px; }
@media (hover: none) { .kb-hint { display: none; } }
.cuts { margin: 18px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 28px; }
.cuts li { break-inside: avoid; border-top: 1px solid rgba(10, 16, 48, 0.17); }
.cuts button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 50px; margin: 0; padding: 6px 10px;
  border: 0; border-radius: 10px; background: none; color: inherit; font: 500 1rem var(--display); text-align: left; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cuts button.is-on { background: var(--ink); color: #fff; }
.cut-keys { flex: none; display: flex; align-items: center; gap: 3px; font-size: 0.8125rem; }
.cut-keys i { font-style: normal; }
.cuts .is-on kbd { background: rgba(255, 255, 255, 0.15); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }

/* --- The editor --------------------------------------------------------------------------------- */
.editor-sec { overflow: clip; padding: var(--pad) 0 0; }
.editor-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 76px); align-items: start; }
.editor-copy { display: grid; gap: 22px; }
.rest { display: grid; margin: 4px 0 0; }
.rest div { display: grid; grid-template-columns: 10.5em minmax(0, 1fr); gap: 12px; padding: 13px 0; border-top: 1px solid var(--rim); }
.rest dt { font-weight: 600; }
.rest dd { margin: 0; color: var(--mist); }
.rest code { color: var(--paper); font: 0.82em var(--mono); overflow-wrap: anywhere; }
.editor-shot { margin: 0; }
.editor-shot img { width: 132%; max-width: none; aspect-ratio: 1600 / 820; object-fit: cover; object-position: 0 0; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 50px 100px -30px #000; }

/* --- Before you install ------------------------------------------------------------------------- */
.honest { padding: var(--pad) 0; }
.honest-head { display: grid; gap: 20px; margin-bottom: clamp(28px, 4vw, 52px); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 84px); }
.facts article { display: grid; gap: 10px; align-content: start; padding: 24px 0 30px; border-top: 1.5px solid var(--rim); }
.facts p { max-width: 34em; color: var(--mist); }

/* --- Download: the icon, at the size of a section ------------------------------------------------ */
.get { padding: 0 12px clamp(12px, 2vw, 28px); }
.get-slots {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px;
  width: min(100%, 1392px); padding: 12px; border-radius: 46px; background: linear-gradient(#1d2749, #0d1226);
}
.get-slots > div { display: grid; gap: 14px; align-content: center; padding: clamp(24px, 3.4vw, 48px); border-radius: 34px; color: var(--ink); }
.get-slots :focus-visible { outline-color: var(--ink); }
.get-main { grid-row: span 2; gap: 20px !important; padding: clamp(28px, 5vw, 76px) !important; background: var(--blue); }
.get-main img { width: 72px; height: 72px; }
.get-main h2 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 0.98; }
.get-main h2 em { color: var(--ink); }
.get-main p { max-width: 27em; font-size: 1.125rem; line-height: 1.5; }
.get-main .btn { background: var(--ink); color: #fff; }
.get-main .btn:hover { background: #000; }
.get-main .btn.ghost { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(10, 16, 48, 0.55); }
.get-main .btn.ghost:hover { background: rgba(10, 16, 48, 0.08); box-shadow: inset 0 0 0 1.5px var(--ink); }
.get-install { background: var(--paper); }
.get-install ol { margin: 0; padding-left: 1.3em; font-size: 1.125rem; }
.get-install li { padding: 2px 0 2px 4px; }
.get-install li::marker { font-weight: 600; }
.get-build { background: var(--steel); }
.get-build pre { margin: 4px 0 0; padding: 14px 16px; overflow-x: auto; border-radius: 14px; background: var(--ink); color: var(--paper); font: 0.8125rem/1.7 var(--mono); }

.foot { padding: 26px 0 44px; color: var(--mist); font: 400 0.78rem/1.6 var(--mono); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot span { margin-right: auto; }
.foot p { flex-basis: 100%; }
.foot a:hover { color: #fff; }

/* Without JavaScript the drawings are not there: their empty frames and controls go too. */
html:not(.js) .desk-foot, html:not(.js) .story-stage, html:not(.js) .pal-side, html:not(.js) .lid-crop,
html:not(.js) .kb, html:not(.js) .kb-hint, html:not(.js) .switch, html:not(.js) .scene-bar, html:not(.js) .scene-desk { display: none; }

/* --- Narrower ----------------------------------------------------------------------------------- */
@media (max-width: 900px) {
  h1 { font-size: 11.6vw; }
  .hero-top, .pal-grid, .keys-grid, .editor-grid { grid-template-columns: minmax(0, 1fr); }
  .cols, .facts, .get-slots { grid-template-columns: minmax(0, 1fr); }
  .get-main { grid-row: auto; }
  .editor-shot img { width: 100%; }
  .desk { width: calc(100% - 32px); }
  /* The displays are piled, Main above the two others: no wider than a pile reads well. */
  .scene-desk { max-width: 600px; }
  .scene-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene-facts div { padding-bottom: 22px; }

  .story-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* The stage stays under the menu bar and the text goes by beneath it. */
  .story-stage {
    order: 0; top: var(--bar); z-index: 5; height: auto; margin: 18px -16px 0; padding: 14px 16px 6px;
    background: var(--night); box-shadow: 0 16px 20px -8px var(--night);
  }
  .stage-box { width: min(100%, (100svh - var(--bar)) * 0.62); }
  .stage-foot { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 2px; min-height: 0; margin-top: 6px; }
  .hud { grid-column: 1; min-height: 62px; align-content: center; }
  .hud kbd { font-size: 0.875rem; }
  .steps { padding: 3vh 0 clamp(40px, 8vh, 90px); }
  .step, .step:first-child { justify-content: flex-start; min-height: clamp(230px, 34vh, 330px); padding-top: 18px; }
  .step p { font-size: 1.0625rem; }
}
@media (max-width: 700px) {
  .bar-link { display: none; }
}
@media (max-width: 600px) {
  :root { --nw: 112px; }
  .brand { font-size: 0.9375rem; gap: 6px; }
  .bar-get { padding: 4px 11px; }
  h1 { font-size: 13.6vw; }
  .notch-map { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 8px; }
  .notch-map a { padding: 10px 2px 8px; font-size: 0.75rem; }
  .desk-foot .chord span { margin-right: 0; }
  .desk-hint { flex-basis: 100%; order: 3; }
  .finds div, .rest div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pal-field { padding: 15px 16px; }
  .pal-field input { font-size: 1.0625rem; }
  .pal-map { padding: 14px 16px; }
  .map-row { grid-template-columns: 4.6em minmax(0, 1fr); gap: 8px; }
  .map-tiles { gap: 8px; }
  .pal-list li { padding: 0 10px; }
  .cuts { columns: 1; }
  /* The three scenes side by side, each with its keys under its name. */
  .scene-chips { flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .scene-chip { flex-direction: column-reverse; justify-content: center; gap: 7px; min-height: 68px; padding: 8px 4px; border-radius: 18px; font-size: 0.9375rem; }
  .scene-keys { font-size: 0.6875rem; }
  .scene-status { flex-basis: 100%; min-height: 4.8em; align-items: flex-start; }
  .scene-facts { grid-template-columns: minmax(0, 1fr); }
  .get-slots { border-radius: 34px; }
  .get-slots > div { border-radius: 24px; }
  .key { font-size: 9px; font-size: 2.3cqw; }
}

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

/* 404.html: one slot in the middle of the night. */
.lost { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px)); }
.lost-slot { display: grid; justify-items: start; gap: 18px; width: min(100%, 620px); padding: clamp(28px, 6vw, 56px); border-radius: 28px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--rim); }
.lost-slot img { border-radius: 15px; }
.lost-code { font: 500 0.8125rem var(--mono); color: var(--mist); }
.lost h1 { font-size: clamp(1.9rem, 5.4vw, 3rem); line-height: 1.06; white-space: normal; text-wrap: balance; }
.lost-slot > p:not(.lost-code) { color: var(--mist); }
.lost .btn { margin-top: 8px; }