/* Tuck branding on the Omarchy-native layout; the panel stays docked on a real desktop.
   Loads after ../styles.css. Paper notes and clocks keep the shared styles.
   Surfaces are cool charcoal in the manner of Linear and Obsidian: near-black
   bar and panel, a slightly lighter page, hairline cool borders, LED orange for
   the brand and actions, and a quiet violet for system state. */

:root {
  --night: #111318;
  --night-deep: #0b0c10;
  --surface: #181b21;
  --surface-hi: #1f232b;
  --bright: #eef0f5;
  --fg: #b6bcc8;
  --fg-dim: #7f8695;
  --accent: #f6a81b;
  --accent-hi: #ffc44a;
  --violet: #9d95f5;
  --violet-dim: #7b73d9;
  --green: var(--violet);
  --line: rgba(160, 174, 204, 0.16);
  --line-soft: rgba(160, 174, 204, 0.09);
  --glow: rgba(143, 134, 242, 0.14);
  --radius: 6px;
  --radius-lg: 10px;
  --sans: "DejaVu Sans", Arial, system-ui, sans-serif;
  --board: var(--night);
  --panel: var(--night-deep);
  --board-text: var(--bright);
  --board-muted: var(--fg);
  --board-line: var(--line);
  --board-line-soft: var(--line-soft);
  --gutter: clamp(16px, 4vw, 56px);
  --panel-w: 320px;
  --bar-top-h: 44px;
  --bar-main-h: 52px;
  --bar-h: calc(var(--bar-top-h) + var(--bar-main-h) + 2px); /* two hairlines */
  --t-quick: 120ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: dark;
}

html { scroll-padding-top: calc(var(--bar-h) + 12px); }
body { font-family: var(--sans); font-size: calc(15px + var(--mobile-type-increase, 0px)); line-height: 1.6; color: var(--fg); background: var(--night); }
h1, h2, h3 { color: var(--bright); }
a { color: var(--accent); text-decoration-thickness: 1px; text-decoration-color: rgba(246, 168, 27, 0.45); }
a:hover { color: var(--accent-hi); text-decoration-color: currentColor; }
code, kbd { font-size: 1em; }
code { color: var(--bright); }
kbd { border-color: var(--line); background: var(--surface); border-radius: 4px; color: var(--bright); }
::selection { background: rgba(143, 134, 242, 0.35); color: var(--bright); }
.paper ::selection { background: rgba(0, 0, 0, 0.15); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.paper :focus-visible, .paper:focus-visible { outline-color: var(--ink); }
.skip { position: fixed; background: var(--accent); color: var(--night-deep); font-weight: 600; border-radius: var(--radius); }
a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* Feedback on real controls: short colour/border transitions and a light press. */
.btn, .tool, .copy, .ws, .intro-platform a, .feature-tools > button, .feature-playback button, .journey button:not(.circle):not(.map-note) { transition: background-color var(--t-quick) ease, border-color var(--t-quick) ease, color var(--t-quick) ease, transform 160ms var(--ease-out); }
.btn:active, .tool:active, .copy:active, .feature-tools > button:active, .feature-playback button:active, .journey button:not(.circle):not(.map-note):active { transform: scale(0.97); }

main { padding: 0; }
.wrap { width: min(1440px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted, .fine { color: var(--fg-dim); }
.fine { font-size: calc(13px + var(--mobile-type-increase, 0px)); line-height: 1.55; }

/* Header: two rows that stick together. The company row names the owner and
   lists its products; the product row carries Tuck, its sections and Install.
   Translucent over the page so scrolled content shows through faintly. */
.bar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(11, 12, 16, 0.84);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
  font-size: calc(13px + var(--mobile-type-increase, 0px)); line-height: 1;
  font-family: var(--mono);
}
.bar a { text-decoration: none; color: var(--fg); }
.bar a:hover { color: var(--bright); }

/* Company row: quiet, one tone brighter on hover. */
.bar-company { position: relative; border-bottom: 1px solid var(--line-soft); }
.bar-company-row { display: flex; align-items: center; gap: 10px; height: var(--bar-top-h); }
.bar a.company-mark { display: inline-flex; align-items: center; height: 100%; padding-right: 6px; border-radius: 4px; opacity: .92; transition: opacity var(--t-quick) ease; }
.bar a.company-mark:hover, .bar a.company-mark:focus-visible { opacity: 1; }
.bar a.company-mark img { display: block; width: 98px; height: 32px; }
.products { position: static; height: 100%; }
.products-toggle { display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 8px; cursor: pointer; list-style: none; color: var(--fg); border-radius: 5px; transition: color var(--t-quick) ease, background-color var(--t-quick) ease; }
.products-toggle::-webkit-details-marker { display: none; }
.products-toggle:hover, .products[open] > .products-toggle { color: var(--bright); }
.products-toggle svg { transition: transform var(--t-quick) ease; }
.products[open] > .products-toggle svg { transform: rotate(180deg); }
.products-menu {
  position: absolute; left: var(--gutter); top: calc(100% + 6px); z-index: 11;
  width: min(300px, calc(100% - 2 * var(--gutter)));
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}
.wrap > .products .products-menu { left: max(var(--gutter), calc(50% - 720px + var(--gutter))); }
.bar .products-menu a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; border-radius: var(--radius); color: var(--fg); }
.bar .products-menu a:hover, .bar .products-menu a:focus-visible { background: var(--surface-hi); color: var(--bright); }
.bar .products-menu a[aria-current="page"] strong { color: var(--accent); }
.products-menu img { width: 20px; height: 20px; flex: none; }
.products-menu span { display: grid; gap: 4px; }
.products-menu strong { font: 700 calc(14px + var(--mobile-type-increase, 0px))/1 var(--sans); letter-spacing: -.02em; color: var(--bright); }
.products-menu small { font-size: calc(12px + var(--mobile-type-increase, 0px)); line-height: 1.3; color: var(--fg-dim); }

/* Product row: Tuck, its sections, then the repository and Install. */
.bar-product { display: flex; align-items: center; gap: 18px; height: var(--bar-main-h); }
.bar a.bar-brand { display: inline-flex; align-items: center; gap: 5px; margin-right: 6px; color: var(--accent); }
.bar a.bar-brand:hover { color: var(--accent-hi); }
.bar-brand img { display: block; width: 20px; height: 20px; }
.bar-brand span { font: 700 calc(22px + var(--mobile-type-increase, 0px))/1 var(--sans); letter-spacing: -.07em; }
.bar-sections { display: flex; align-items: stretch; gap: 2px; flex: 1 1 auto; min-width: 0; height: 100%; }
.ws { position: relative; display: inline-flex; align-items: center; height: 100%; padding: 0 10px; color: var(--fg); white-space: nowrap; }
.ws::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 1px; background: transparent; transition: background-color var(--t-quick) ease; }
.ws:hover { color: var(--bright); }
.ws[aria-current="location"] { color: var(--bright); }
.ws[aria-current="location"]::after { background: var(--accent); }
.bar-right { display: flex; align-items: center; gap: 16px; margin-left: auto; flex: none; }
.bar-repo { padding-block: 12px; white-space: nowrap; }
.bar a.ws.bar-install { height: 30px; padding: 0 12px; border: 1px solid var(--accent); border-radius: 5px; background: var(--accent); color: var(--night-deep); font-weight: 600; }
.bar a.ws.bar-install::after { display: none; }
.bar a.ws.bar-install:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--night-deep); }
.bar a.ws.bar-install[aria-current="location"] { box-shadow: 0 0 0 2px var(--night-deep), 0 0 0 3px var(--accent); }

/* Intro copy: the first section under the full-viewport desk mockup. */
.intro {
  position: relative; isolation: isolate; overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
  gap: 32px clamp(32px, 5vw, 72px);
  padding-top: clamp(28px, 4vh, 44px); padding-bottom: clamp(28px, 4vh, 44px);
}
.intro::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -10%; top: -30%; width: 70%; height: 130%;
  background: radial-gradient(closest-side at 30% 30%, var(--glow), transparent 100%);
}
.intro > :not(.retro-field) { position: relative; z-index: 1; }
.retro-field {
  position: absolute; z-index: 0; inset: 0;
  width: 100%; height: 100%; pointer-events: none;
  opacity: 0.72; image-rendering: pixelated;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 96%, transparent 100%);
}
/* Keep the office image as the hero's only decorative visual. */
.intro .retro-field, .intro::before { visibility: hidden; opacity: 0; }
/* The intro copy is an editorial grid on the same columns as every section:
   the identity sits in the 300px rail, the headline fills the content column.
   Below 1024px the two stack, identity first. */
.intro-copy { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(32px, 6vw, 96px); align-items: start; }
.intro-identity, .intro-message { min-width: 0; }

.intro-brand { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; color: var(--accent); font: 700 clamp(76px, 10vw, 144px)/1 var(--sans); letter-spacing: -.085em; }
.intro-brand img { display: block; width: .9em; height: .9em; flex-shrink: 0; }
.intro-brand span { padding-right: .1em; }
/* Platform signature: a quiet secondary line beneath the lockup. The image is
   the official Omarchy pixel wordmark; the link names the platform only. */
.intro-platform { margin: -6px 0 26px; font-size: calc(14px + var(--mobile-type-increase, 0px)); line-height: 1; }
.intro-platform a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px; margin-left: -8px; border-radius: var(--radius); color: var(--fg); text-decoration: none; }
.intro-platform a:hover, .intro-platform a:focus-visible { color: var(--bright); background: rgba(160, 174, 204, 0.08); }
.intro-platform img { display: block; width: 132px; height: auto; }
@media (min-width: 1024px) {
  .intro-copy { grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); }
  .intro-brand { font-size: calc(100px + var(--mobile-type-increase, 0px)); margin-bottom: 14px; }
  .intro-platform { margin-bottom: 0; }
}
h1 { font-size: calc(clamp(42px, 11.5vw, 52px) + var(--mobile-type-increase, 0px)); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; max-width: 14ch; text-wrap: balance; }
@media (min-width: 1024px) { h1 { font-size: calc(clamp(56px, 6vw, 88px) + var(--mobile-type-increase, 0px)); margin-top: 2px; } }
.lede { margin-top: 22px; max-width: 60ch; font-size: calc(16px + var(--mobile-type-increase, 0px)); line-height: 1.6; color: var(--fg); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.btn {
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--bright);
  padding: 9px 16px; font-size: calc(14px + var(--mobile-type-increase, 0px));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.35);
}
.btn:hover { border-color: rgba(160, 174, 204, 0.32); background: var(--surface-hi); color: var(--bright); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--night-deep); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.35); }
.btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--night-deep); }
.intro .fine { margin-top: 16px; }

/* The desk: one mockup, and the page's opening screen. The wide coastal
   office photograph fills the whole viewport under the header; its monitor's
   display is covered by native Omarchy captures and the live panel; the
   window behind the desk is a muted looping sea-and-cloud video.
   The stage is the viewport: x 0, 100vw, header bottom to the bottom edge.
   Inside it, .scene-artwork keeps the photograph's own aspect ratio
   (1672 x 941) and is cover-sized: as wide as the stage, or taller when the
   stage is taller. Photo and screen both fill the artwork, so the screen's
   percentages resolve against the same box as the pixels they cover.
   Display measured in the 1672 x 941 source (luma profiles at the centre
   lines, 2026-10-17): inner panel x 431-1236, y 183-645, bezel x 412-1254,
   y 165-663. The screen box is inset half a source pixel: 431.5/183.5,
   805 x 462. The screen is the monitor's own logical layout, 2560 x 1470
   (the display's 1.742 ratio): the native 26px top bar across the full
   width, then the 2240px desktop capture beside the panel's reserved 320px.
   The desktop capture is 2240 x 1414 logical, drawn into 2240 x 1444: a 2%
   vertical stretch, never a crop. scene.js sets the same cover geometry in
   pixels and biases the crop toward the panel on portrait viewports;
   without it the CSS below is the desktop framing. */
/* Overview lands with the stage exactly under the header: the page's extra
   12px of scroll padding is taken back here. */
.scene { padding-top: 0; padding-bottom: clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--line-soft); scroll-margin-top: -12px; }
.scene-figure { margin: 0; min-width: 0; }
/* Keyboard users can pass the scaled screen's many stops and reach the controls. */
.scene-skip { position: absolute; left: var(--gutter); padding: 6px 10px; margin-top: 4px; background: var(--accent); color: var(--night-deep); font-weight: 600; border-radius: var(--radius); text-decoration: none; z-index: 3; }
.scene-skip:not(:focus) { width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.scene-noscript { margin-top: 12px; }
.scene-stage {
  --stage-h: calc(100svh - var(--bar-h));
  --image-w: 1672; --image-h: 941;
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; height: var(--stage-h); min-height: 240px;
  background: var(--night-deep);
}
.scene-artwork {
  position: absolute; left: 50%; top: 50%;
  width: max(100%, calc(var(--stage-h) * var(--image-w) / var(--image-h)));
  min-width: 100%; aspect-ratio: var(--image-w) / var(--image-h);
  transform: translate(-50%, -50%);
  background: transparent;
}
/* One uninterrupted ocean layer sits behind the frameless desk cutout. */
.scene-exterior { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; }
.scene-sea { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; background: transparent; }
.scene-photo { position: relative; display: block; width: 100%; height: 100%; object-fit: fill; }
.scene-screen {
  position: absolute; left: 28.409%; top: 19.872%; width: 43.301%; height: 41.020%;
  overflow: hidden; background: var(--night-deep);
  container-type: inline-size;
  --screen-scale: 0.6;
}
@supports (scale: calc(1cqw / 1px)) {
  .scene-screen { --screen-scale: calc(100cqw / 2560px); }
}
.scene-frame {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--panel-w); grid-template-rows: 26px minmax(0, 1fr);
  width: 2560px; height: 1365px;
  transform-origin: 0 0; transform: scale(var(--screen-scale));
  background: var(--night-deep);
}
.workspace-bar { grid-column: 1 / -1; min-width: 0; overflow: hidden; background: #000; }
.workspace-bar img { display: block; width: 100%; height: 100%; object-fit: fill; object-position: left center; }
.workspace { position: relative; overflow: hidden; min-width: 0; background: var(--night-deep); }
.workspace img { display: block; width: 100%; height: 100%; object-fit: fill; margin: 0; }
.scene .panel { height: 100%; min-height: 0; border-left: 1px solid var(--line); border-top: 0; font-family: var(--mono); }
.panel-head { position: static; gap: 2px; padding: 6px 8px 6px 12px; }
.panel-title { margin-right: auto; font-size: calc(13px + var(--mobile-type-increase, 0px)); color: var(--fg-dim); }
.tool { border-radius: var(--radius); }
.tool:hover { color: var(--bright); background: rgba(160, 174, 204, 0.08); }
.scene .board { max-width: none; min-height: 0; }

/* Focus screen: the same stage without the photograph, framed for reading.
   The stage leaves the viewport framing: it takes its height from the
   screen, the artwork flows at full width without a crop, and the controls
   return to a row beneath it. The frame is 1110 x 637 here, scaled to the
   content width and never above 1, so the panel reads at its natural size;
   the bar row stays 26px and both captures are contained whole on the dark
   frame. Below 900px the bar and workspace step aside and the panel renders
   at its natural size, so paper controls are full size on phones and small
   tablets instead of a frame scaled under 0.8. */
.scene.is-focus .scene-photo, .scene.is-focus .scene-exterior { display: none; }
.scene.is-focus .scene-artwork { background: transparent; }
.scene.is-focus .scene-stage { height: auto; min-height: 0; overflow: visible; width: min(1440px, 100%); margin-inline: auto; padding: 16px var(--gutter) 0; background: transparent; }
.scene.is-focus .scene-artwork { position: static; width: 100%; min-width: 0; aspect-ratio: auto; transform: none; }
.scene.is-focus .scene-frame { margin-inline: auto; width: 1110px; height: 637px; }
.scene.is-focus .workspace-bar img, .scene.is-focus .workspace img { object-fit: contain; }
.scene.is-focus .scene-screen {
  position: relative; left: auto; top: auto; width: 100%;
  height: calc(637px * var(--screen-scale));
  border-radius: var(--radius-lg); border: 1px solid var(--line);
}
@supports (scale: calc(1cqw / 1px)) {
  .scene.is-focus .scene-screen { --screen-scale: min(1, calc(100cqw / 1110px)); }
}
@media (max-width: 899px) {
  .scene.is-focus .scene-screen { height: auto; container-type: normal; }
  .scene.is-focus .scene-frame { display: block; width: 100%; height: auto; transform: none; }
  .scene.is-focus .workspace, .scene.is-focus .workspace-bar { display: none; }
  .scene.is-focus .panel { height: auto; border-left: 0; }
  .scene.is-focus .board { overflow: visible; width: 100%; max-width: 600px; margin-inline: auto; }
  .scene.is-focus .panel-head { width: 100%; max-width: 600px; margin-inline: auto; }
}

/* Controls: a compact row over the foot of the photograph, where the desk
   is, so the demo can be paused from the first screen. Playback at the left,
   framing at the right; both wrap inward on narrow stages. Solid charcoal
   surfaces keep the labels legible over the white desk. In focus mode the
   row returns to the flow under the screen. The demo's own status keeps its
   id and live region in the foot below. */
.scene-controls { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 12px; pointer-events: none; }
.scene-controls > * { pointer-events: auto; }
.scene-playback, .scene-framing { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.scene-framing { margin-left: auto; justify-content: flex-end; }
.scene-controls .btn { margin: 0; font-size: calc(13px + var(--mobile-type-increase, 0px)); padding: 8px 12px; background: var(--night-deep); border-color: rgba(160, 174, 204, 0.28); color: var(--bright); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(0, 0, 0, 0.35); }
.scene-controls .btn:hover { background: var(--surface); border-color: rgba(160, 174, 204, 0.45); }
.scene-controls[hidden], .scene-controls [hidden] { display: none; }
.scene.is-focus .scene-controls { position: static; margin-top: 16px; align-items: center; pointer-events: auto; }
.scene.is-focus .scene-controls .btn { background: var(--surface); border-color: var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.35); }
.scene.is-focus .scene-controls .btn:hover { background: var(--surface-hi); border-color: rgba(160, 174, 204, 0.32); }

/* Autoplay presentation. These classes are drawn by scene.js on top of the
   real notes and removed before any real input reaches the screen. The
   note's logical state, inert flags and aria never change. */
.scene .task.is-shown-done .task-text { text-decoration: line-through; color: var(--ink-2); }
.scene .task.is-shown-done .circle { background: var(--ink); border-color: transparent; }
.scene .task.is-shown-done .circle svg { opacity: 1; }
.scene .note.is-shown-folded { margin-bottom: 6px; }
.scene .note.is-shown-folded .fold { display: none; }
.scene .note.is-shown-folded .reveal { grid-template-rows: 0fr; }
.scene .note.is-shown-folded .peek { display: block; }
.scene .note.is-shown-folded .under { opacity: 1; }
.scene .note.is-shown-folded .act, .scene .note.is-shown-folded .acts-end { display: none; }
/* Editing a note: the shared stylesheet drops the textarea outline, so the sheet carries it. */
.scene .note:has(.editor:focus) { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Interactive paper controls keep their drawn size; only their own hit area grows to at least 24px.
   Read-only circle spans and the stage stay untouched. */
button.circle { position: relative; }
button.circle::before, button.fold::before { content: ""; position: absolute; inset: -4px; }
@media (pointer: coarse), (hover: none) {
  .note .act { width: 36px; height: 36px; }
}

/* The live preview demonstrates state changes. Creation grows like paper
   feeding from the panel edge; deletion holds, detaches, then drops. */
.scene .note.is-created {
  transform-origin: top center;
  animation: note-create 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.scene .note.is-preview-deleting {
  position: relative; z-index: 8; pointer-events: none;
  transform-origin: 18% 0;
  animation: note-delete 720ms cubic-bezier(0.3, 0, 0.7, 1) both;
}
.scene .note.is-preview-deleting.is-leaving { animation-name: note-delete; }
@keyframes note-create {
  0% { clip-path: inset(0 0 100%); transform: translateY(-12px) scaleY(0.25); opacity: 0; }
  58% { clip-path: inset(0); transform: translateY(2px) scaleY(1.025); opacity: 1; }
  100% { clip-path: inset(0); transform: none; opacity: 1; }
}
@keyframes note-delete {
  0%, 18% { transform: translateY(0) rotate(0); opacity: 1; }
  38% { transform: translateY(10px) rotate(0); opacity: 1; }
  70% { transform: translateY(92px) rotate(3deg); opacity: 1; }
  100% { transform: translateY(220px) rotate(-5deg); opacity: 0; }
}

/* Sections: heading column at the left, content at the right. */
/* One shared grid for every section: the same heading column, gap and content
   column at every breakpoint. Demo panels fill the content column; only prose
   keeps a measure. The :last-child rule overrides the shared stylesheet's
   extra bottom padding so Install matches the other sections. */
.sec { max-width: none; display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 28px clamp(32px, 6vw, 96px); padding-block: clamp(48px, 7vw, 80px); border-top: 1px solid var(--line-soft); }
.sec:last-child { padding-bottom: clamp(48px, 7vw, 80px); }
.sec:first-of-type { border-top: 0; }
/* Section titles are set at display size inside the sticky 300px rail; balanced
   wrapping gives each one a deliberate two-line break. */
h2 { font-size: calc(clamp(32px, 2.9vw, 42px) + var(--mobile-type-increase, 0px)); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; max-width: none; text-wrap: balance; }
@media (min-width: 1024px) {
  .sec-head { position: sticky; top: calc(var(--bar-h) + 28px); align-self: start; }
}
.sec-head > p { margin-top: 16px; color: var(--fg-dim); max-width: 36ch; }
.sec-body { min-width: 0; }
h3 { font-size: calc(15px + var(--mobile-type-increase, 0px)); font-weight: 600; margin-top: 32px; }
h3:first-child { margin-top: 0; }
.rows { margin: 0; max-width: 72ch; }
.rows > div { display: grid; grid-template-columns: minmax(150px, 11em) 1fr; gap: 6px 24px; padding-block: 12px; border-top: 1px solid var(--line-soft); }
.rows > div:first-child { border-top: 0; padding-top: 0; }
.rows dt { color: var(--bright); font-weight: 600; }
.rows dd { margin: 0; max-width: 56ch; }
.sec-body .rows + .disclosures, .sec-body .rows + .fine, .sec-body .term + .rows { margin-top: 24px; }
.plain { margin: 12px 0 0; padding-left: 1.3em; max-width: 60ch; }
.plain li + li { margin-top: 6px; }
.plain li::marker { color: var(--fg-dim); }

.disclosures details { border-top: 1px solid var(--line-soft); }
.disclosures details:last-child { border-bottom: 1px solid var(--line-soft); }
.disclosures summary { cursor: pointer; padding: 12px 0; color: var(--bright); font-weight: 600; list-style: none; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.disclosures summary::-webkit-details-marker { display: none; }
.disclosures summary::before { content: "+"; width: 1em; color: var(--fg-dim); font-weight: 400; }
.disclosures details[open] summary::before { content: "−"; }
.disclosures summary:hover::before { color: var(--bright); }
.disclosures summary span { font-weight: 400; color: var(--fg-dim); }
.disclosures details p { margin: 0 0 16px 2em; max-width: 56ch; }

/* Terminal blocks: the deepest surface, hairline border, soft corner. */
.term { margin: 0; padding: 14px 16px; background: var(--night-deep); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); color: var(--bright); font-family: var(--mono); font-size: calc(14px + var(--mobile-type-increase, 0px)); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; max-width: none; }
.term .prompt { color: var(--green); }
.term .dir { color: var(--accent); }
.term .dim { color: var(--fg-dim); }
.cmd-term { max-width: none; white-space: normal; }
.cmd-row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
.cmd-row pre { flex: 1 1 320px; min-width: 0; margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; position: relative; padding-left: 1.6em; border-radius: 4px; }
.cmd-row pre::before { content: "❯"; position: absolute; left: 0; color: var(--green); }
.copy { flex: none; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--bright); cursor: pointer; font: inherit; font-size: calc(13px + var(--mobile-type-increase, 0px)); }
.copy:hover { border-color: var(--accent); background: var(--surface-hi); }
.cmd-status { margin-top: 10px; font-size: calc(13px + var(--mobile-type-increase, 0px)); color: var(--green); position: relative; }
.cmd-status:empty { display: none; }
.cmd-status.is-error { color: var(--accent-hi); }
.sec-body .cmd-term + .fine { margin-top: 12px; }
.sec-body .fine { max-width: 72ch; }

/* Footer. */
footer.foot { max-width: none; width: min(1440px, 100%); padding: 36px var(--gutter) 44px; border-top: 1px solid var(--line-soft); font-size: calc(13px + var(--mobile-type-increase, 0px)); color: var(--fg-dim); }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; max-width: 110ch; }
.foot-name { color: var(--bright); font-weight: 600; margin-bottom: 8px; }
.foot-name.tuck-name { color: var(--accent); font: 700 calc(32px + var(--mobile-type-increase, 0px))/1 var(--sans); letter-spacing: -.07em; }
.foot p + p { margin-top: 8px; }
.foot .fine { margin-top: 28px; max-width: 90ch; }

/* Responsive. */
@media (max-width: 1023px) {
  .sec { grid-template-columns: 1fr; gap: 20px; }
  .sec-head > p { max-width: 60ch; }
}
@media (max-width: 720px) {
  :root { --bar-top-h: 44px; --bar-main-h: 48px; }
  .bar-product { gap: 10px; }
  .bar a.bar-brand { margin-right: 0; }
  .bar-sections { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); }
  .bar-sections::-webkit-scrollbar { display: none; }
  .ws { padding: 0 8px; font-size: calc(12px + var(--mobile-type-increase, 0px)); }
  .ws::after { left: 8px; right: 8px; }
  .bar-right { gap: 10px; }
  .bar-repo { font-size: calc(12px + var(--mobile-type-increase, 0px)); }
  .bar a.ws.bar-install { font-size: calc(12px + var(--mobile-type-increase, 0px)); padding: 0 10px; }
  .foot-cols { grid-template-columns: 1fr; }
  .rows > div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 479px) {
  body { font-size: calc(14px + var(--mobile-type-increase, 0px)); }
  .bar-brand span { display: none; }
  .intro { padding-top: 28px; }
  .lede { font-size: calc(15px + var(--mobile-type-increase, 0px)); }
  .term { font-size: calc(13px + var(--mobile-type-increase, 0px)); }
  .disclosures details p { margin-left: 0; }
}
@media (hover: none) {
  .ws:not([aria-current="location"]):hover { color: var(--fg); }
  .products-toggle:hover { color: var(--fg); }
  .tool:hover { background: transparent; }
  .copy:hover { border-color: var(--line); background: var(--surface); }
  .bar a.ws.bar-install:hover { background: var(--accent); border-color: var(--accent); }
  .feature-tools > button:not([aria-pressed="true"]):not(.is-key-active):hover { border-color: var(--line); color: var(--fg); }
  .feature-swatches > button:not([aria-pressed="true"]):hover { border-color: transparent; }
  .feature-playback button:hover { border-color: transparent; color: var(--fg); }
  .feature-playback button + button:hover { color: var(--fg-dim); }
  .disclosures summary:hover::before { color: var(--fg-dim); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .retro-field { opacity: 0.42; }
  .scene .note.is-created, .scene .note.is-preview-deleting,
  .scene .note.is-preview-deleting.is-leaving { animation: none; }
}

/* Feature workspaces: actual sheets on the desktop, with quiet controls below.
   A reserved stage keeps every fold, paste and reorder inside its own space. */
.feature-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; min-width: 0; }
/* Paper still life across the whole content column. A 16:9 crop keeps the
   folded note, the mint strip and the clock inside the frame. */
.feature-still { grid-column: 1 / -1; margin: 0; min-width: 0; }
.feature-still img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 55%; border-radius: var(--radius-lg); }
/* Each stage reserves what its tallest state needs (measured 2026-10-17), paired per grid row so captions align. */
.feature { --stage: 330px; min-width: 0; display: grid; grid-template-rows: auto minmax(96px, auto) var(--stage) auto; align-content: start; }
[data-feature="colors"], [data-feature="tasks"] { --stage: 248px; }
[data-feature="format"], [data-feature="fold"] { --stage: 272px; }
[data-feature="copy"], [data-feature="keyboard"] { --stage: 340px; }
.feature h3 { margin: 0 0 10px; font-size: calc(15px + var(--mobile-type-increase, 0px)); }
.feature > p { font-size: calc(13px + var(--mobile-type-increase, 0px)); line-height: 1.65; max-width: 46ch; }
.feature-stage { height: var(--stage); min-width: 0; position: relative; padding-top: 24px; isolation: isolate; }
.feature-note { --dur: 400ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); width: 100%; font-size: calc(14px + var(--mobile-type-increase, 0px)); }
.feature-note .content { padding: 16px 24px 34px 18px; }
.feature-note .sheet { transition: background-color 400ms var(--ease); }
.feature-note .content a { transition: color 400ms var(--ease); }
.feature-note .act { opacity: 1; visibility: visible; color: var(--ink-3); width: 32px; height: 32px; }
.feature-note .act:hover, .feature-note .act:focus-visible { color: var(--ink); }
.feature-note .circle { min-width: 20px; min-height: 20px; }
.feature-note .task { margin-top: 10px; }
.feature-note .task-text { transition: color 180ms ease-out; }
.feature-note .circle svg { transform: scale(0.7); transition: transform 180ms ease-out, opacity 180ms ease-out; }
.feature-note .circle[aria-checked="true"] svg { transform: scale(1); }
.feature-tools { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.feature-tools > button, .feature-playback button { background: transparent; border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 10px; cursor: pointer; color: var(--fg); font-size: calc(12px + var(--mobile-type-increase, 0px)); line-height: 1.5; min-height: 34px; }
.feature-tools > button:hover, .feature-playback button:hover { color: var(--bright); border-color: var(--accent); }
.feature-tools > button[aria-pressed="true"] { border-color: var(--accent); color: var(--bright); background: var(--surface); }
.feature-tools kbd { padding: 0; border: 0; background: transparent; color: var(--bright); }
.feature-tools button kbd + span { margin-left: 6px; }
.feature-swatches { gap: 10px; }
.feature-swatches > button { width: 38px; height: 38px; padding: 7px; border-color: transparent; }
.feature-swatches button span { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--swatch); }
.feature-swatches button[aria-pressed="true"] { border-color: var(--fg-dim); }
.feature-caption { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.feature-playback { display: flex; align-items: center; gap: 8px; }
.feature-playback button { border-color: transparent; padding: 4px 0; min-width: 48px; text-align: left; }
.feature-playback button + button { color: var(--fg-dim); }
.feature.is-playing .feature-playback button:first-child { color: var(--bright); }
.feature-extra-task { visibility: hidden; opacity: 0; transform: translateY(-8px); transition: transform 300ms var(--ease), opacity 300ms var(--ease), visibility 300ms; }
.feature-extra-task.is-added { visibility: visible; opacity: 1; transform: none; }
.feature-bold { border-bottom: 1px solid var(--ink-3); }
.feature-bold.is-formatted { border-bottom-color: transparent; }
.feature-url { overflow-wrap: anywhere; }

/* Fold in two paper planes. The sheet keeps its dimensions; only its crop and
   body transform change. The same corner button opens the full collapsed strip. */
.feature-fold-note .sheet { height: 188px; clip-path: inset(0); transition: clip-path 440ms var(--ease); }
.feature-fold-note .content { padding-top: 16px; }
.feature-fold-note .fold { width: 24px; height: 24px; }
.feature-fold-note .feature-fold-body { margin-top: 12px; transform-origin: center top; transition: transform 440ms var(--ease), opacity 240ms ease-out; }
.feature-fold-note .under { top: 42px; bottom: auto; height: 12px; transform: translateY(-5px); transition: transform 440ms var(--ease), opacity 360ms var(--ease); box-shadow: 0 3px 0 -1px var(--paper-under), 0 6px 5px rgba(0, 0, 0, 0.12); }
.feature-fold-note.feature-is-folded .sheet { clip-path: inset(0 0 140px); }
.feature-fold-note.feature-is-folded .feature-fold-body { transform: scaleY(0.08) translateY(-8px); opacity: 0; }
.feature-fold-note.feature-is-folded .under { opacity: 1; transform: none; }
.feature-fold-note.feature-is-folded .fold { width: 100%; height: 48px; background: transparent; }
.feature-fold-note.feature-is-folded .fold:focus-visible { outline-offset: -3px; }

.feature-copy-source .content { padding-top: 12px; padding-bottom: 30px; }
.feature-copy-source .content p + p { margin-top: 4px; }
.feature-copy-source .task { margin-top: 0; }
.feature-copy-source .task:first-of-type { margin-top: 4px; }
.feature-static-circle { cursor: default; }
.feature-paste { position: relative; margin-top: 16px; padding: 24px 14px 10px; height: 128px; border-left: 2px solid var(--line); color: var(--fg); font-size: calc(13px + var(--mobile-type-increase, 0px)); line-height: 1.5; transition: border-color 300ms ease-out; }
.feature-paste.has-paste { border-left-color: var(--violet); }
.feature-paste-label { position: absolute; top: 0; left: 14px; color: var(--fg-dim); font-size: calc(11px + var(--mobile-type-increase, 0px)); }
.feature-paste-empty { color: var(--fg-dim); padding-top: 10px; }
.feature-paste-result, .feature-paste-plain { animation: feature-paste-in 360ms cubic-bezier(0.2, 0, 0, 1); }
.feature-paste-plain { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.feature-paste-marker { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes feature-paste-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.feature-key-board { position: relative; height: 204px; }
.feature-key-board .feature-note { position: absolute; top: 0; left: 0; transition: transform 420ms var(--ease), opacity 280ms var(--ease); }
.feature-key-board .content { padding: 12px 16px; }
.feature-key-board .feature-key-new { opacity: 0; visibility: hidden; transform: translateY(-12px) scaleY(0.9); transform-origin: top; }
.feature-key-board.has-new .feature-key-new { opacity: 1; visibility: visible; transform: none; }
.feature-key-board.has-new .feature-key-existing { transform: translateY(104px); }
.feature-key-board.has-new.new-is-down .feature-key-new { transform: translateY(104px); }
.feature-key-board.has-new.new-is-down .feature-key-existing { transform: none; }
.feature-key-tools { gap: 4px; }
.feature-key-tools > button { padding: 5px 6px; display: flex; flex-direction: column; align-items: flex-start; }
.feature-key-tools button kbd + span { margin: 0; color: var(--fg-dim); font-size: calc(11px + var(--mobile-type-increase, 0px)); }
.feature-key-tools .is-key-active { border-color: var(--accent); background: var(--surface); }
@media (min-width: 1024px) and (max-width: 1199px) {
  .feature-gallery { column-gap: 24px; }
}
@media (max-width: 640px) {
  .feature-still img { aspect-ratio: 3 / 2; }
  .feature-gallery { grid-template-columns: 1fr; gap: 36px; }
  .feature { grid-template-rows: auto auto var(--stage) auto; }
  /* One column: each stage reserves only its own tallest state (measured at 390px). */
  [data-feature="colors"] { --stage: 216px; }
  [data-feature="tasks"] { --stage: 256px; }
  [data-feature="format"] { --stage: 192px; }
  [data-feature="fold"] { --stage: 272px; }
  [data-feature="copy"] { --stage: 346px; }
  [data-feature="keyboard"] { --stage: 300px; }
  .feature > p { max-width: 50ch; }
  .feature-stage { max-width: 400px; width: 100%; }
  .feature-caption { max-width: 400px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature *, .feature *::before, .feature *::after { animation: none !important; transition: none !important; }
}

/* One opening composition: live HTML over the window, with a clear monitor. */
.scene-stage { height: auto; min-height: max(720px, 100svh); display: grid; align-items: center; background: #c8deed url("assets/california-window-poster.webp") center / cover no-repeat; }
.scene-stage::after { display: none; }
.scene .intro { z-index: 2; width: 100%; margin: 0; padding: var(--intro-top, 120px) var(--gutter) 100px; border: 0; overflow: visible; pointer-events: none; align-self: start; }
.scene .intro-copy { display: block; width: 40%; max-width: 600px; margin-left: auto; }
.scene .intro-copy { pointer-events: auto; user-select: text; }
.scene .intro a { pointer-events: auto; }
.scene .intro-copy { color: #17252c; text-shadow: 0 1px 12px rgba(255,255,255,.75); }
.scene .intro-platform a, .scene h1 { color: #17252c; }
.scene .intro-platform img { filter: brightness(.55) saturate(1.2); }
.scene .intro-brand { font-size: calc(clamp(76px, 7vw, 100px) + var(--mobile-type-increase, 0px)); margin-bottom: 18px; }
.scene .intro-platform { margin-bottom: 30px; }
.scene h1 { font-size: calc(clamp(40px, 4vw, 58px) + var(--mobile-type-increase, 0px)); line-height: 1.06; margin: 0; }
.scene .lede { font-size: calc(15px + var(--mobile-type-increase, 0px)); line-height: 1.65; color: #17252c; margin-top: 20px; }
.scene .intro .fine { font-size: calc(12px + var(--mobile-type-increase, 0px)); line-height: 1.6; color: #263b46; max-width: 36ch; }
.scene.is-focus .intro, .scene.is-focus .scene-stage::after { display: none; }
.bar-platform { display: inline-flex; align-items: center; gap: 8px; flex: none; padding-left: 0; }
.bar-platform-for { color: var(--fg); font: 400 calc(12px + var(--mobile-type-increase, 0px))/1 var(--sans); }
.bar-platform img { display: block; width: 64px; height: auto; }
@media (max-width: 899px) {
  .scene-stage { height: max(900px, 100svh); min-height: 0; align-items: start; }
  .scene .intro { padding: var(--intro-top, 148px) 18px 64px; }
  .scene .intro-copy { width: 50%; max-width: 500px; margin-left: auto; }
  .scene .intro-brand { font-size: calc(76px + var(--mobile-type-increase, 0px)); }
  .scene .intro-platform { margin-bottom: 26px; }
  .scene h1 { font-size: calc(clamp(26px, 5vw, 42px) + var(--mobile-type-increase, 0px)); max-width: 15ch; }
  .scene .lede { font-size: calc(13px + var(--mobile-type-increase, 0px)); line-height: 1.55; }
  .scene .intro .fine { font-size: calc(11px + var(--mobile-type-increase, 0px)); }
  .scene .actions { gap: 10px; }
  .scene .actions .btn { font-size: calc(12px + var(--mobile-type-increase, 0px)); padding: 10px 12px; }

}
@media (max-width: 720px) {
  :root { --bar-main-h: 86px; }
  .bar-product { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: 44px 42px; gap: 0 12px; }
  .bar-brand span { display: inline; }
  .bar-platform { justify-self: start; padding-left: 0; }
  .bar-platform img { width: 64px; }
  .bar-right { grid-column: 3; grid-row: 1; }
  .bar-sections { grid-column: 1 / -1; grid-row: 2; overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .bar-sections .ws { flex: 1; justify-content: center; }
  .bar-repo { display: none; }
}

/* Product annotations share the office photograph's coordinates. */
.scene-callouts { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; color: #000; }
.scene-callout > path { fill: none; stroke: rgba(100, 110, 120, .5); stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.scene.is-focus .scene-callouts { display: none; }


.scene .promo-labels { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 14px; color: #17252c; font-size: calc(15px + var(--mobile-type-increase, 0px)); font-weight: 700; line-height: 1.65; text-shadow: none; }

.scene .promo-labels { position: relative; display: block; margin-bottom: 24px; font-size: calc(14px + var(--mobile-type-increase, 0px)); line-height: 18px; }
.scene .promo-labels li { position: absolute; left: 0; width: 100%; }

@media (max-width: 899px) { .scene .promo-labels { font-size: calc(12px + var(--mobile-type-increase, 0px)); line-height: 17px; } }

/* The first feature section continues the pale stone desk surface. */
.scene { padding-bottom: 0; border-bottom: 0; }
#files {
  --bright: #252b30;
  --fg: #4e555d;
  --fg-dim: #626970;
  --surface: #e6e2de;
  --surface-hi: #dedad5;
  --line: rgba(44, 50, 56, .2);
  --line-soft: rgba(44, 50, 56, .12);
  --violet: #5e4f9f;
  --accent: #9c6000;
  --accent-hi: #754800;
  color-scheme: light;
  color: var(--fg);
  background: #ede5e6;
  width: 100%;
  max-width: none;
  padding-inline: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter)));
}
#files ::selection { background: rgba(246,168,27,.3); color: #252b30; }

.feature-playback[hidden] { display: none; }

/* Each feature reads as one unit: heading, explanation, then its live example. */
#notes .feature-gallery { gap: 24px; }
#notes .feature {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
#notes .feature h3 { margin: 0 0 8px; font-size: calc(17px + var(--mobile-type-increase, 0px)); }
#notes .feature > p { margin: 0 0 20px; max-width: none; }
#notes .feature-stage { padding-top: 0; flex-shrink: 0; }
#notes .feature-caption { padding: 0; margin: 0; border: 0; height: 0; }
@media (max-width: 640px) {
  #notes .feature { padding: 20px; }
  #notes .feature-stage { max-width: none; }
}

.files-illustration { margin: 0 0 28px; }
.files-illustration img { display: block; width: 100%; height: auto; border-radius: 12px; }

.widget-illustrations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.widget-illustration { min-width: 0; margin: 0; }
.widget-illustration img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; }
.widget-illustration figcaption { padding-top: 16px; }
.widget-illustration h4 { margin: 0 0 8px; color: var(--bright); font-size: calc(17px + var(--mobile-type-increase, 0px)); }
.widget-illustration p { margin: 0; color: var(--fg); font-size: calc(13px + var(--mobile-type-increase, 0px)); line-height: 1.65; }
@media (max-width: 640px) { .widget-illustrations { grid-template-columns: 1fr; gap: 32px; } }

/* Floating window-frame header, in translucent white glass. */
:root { --bar-h: 104px; }
.bar {
  --bright: #18262f;
  --fg: #394750;
  --fg-dim: #59656d;
  --line: rgba(38,48,56,.15);
  --surface: #f5f1ef;
  --surface-hi: #e7e2de;
  position: fixed;
  top: 16px;
  left: max(16px, calc((100vw - 1330px) / 2));
  right: max(16px, calc((100vw - 1330px) / 2));
  display: flex;
  align-items: center;
  gap: 18px;
  height: 72px;
  padding: 0 22px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(29,48,62,.12);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  font-family: var(--sans);
}
.bar .bar-company, .bar .bar-company-row, .bar .bar-product { display: contents; }
.bar a.company-mark { height: 40px; padding: 0; opacity: 1; flex: none; }
.bar .products { height: 34px; margin-left: -12px; }
.bar .products-toggle { padding: 0; font-size: calc(12px + var(--mobile-type-increase, 0px)); gap: 7px; }
.bar .products-toggle svg { width: 9px; }
.bar .products-menu { left: 18px; top: calc(100% + 8px); background: rgba(255,255,255,.96); box-shadow: 0 12px 30px rgba(29,48,62,.16); }
.bar a.bar-brand { padding-left: 20px; margin: 0 -6px 0 0; border-left: 1px solid rgba(38,48,56,.18); height: 26px; }
.bar .bar-platform { gap: 6px; }
.bar .bar-platform img { width: 64px; filter: brightness(.65) saturate(1.1); }
.bar .bar-platform-for { color: #59656d; font-size: calc(11px + var(--mobile-type-increase, 0px)); }
.bar .bar-sections { flex: 1; height: 100%; justify-content: flex-end; gap: 0; overflow: visible; mask-image: none; -webkit-mask-image: none; }
.bar .ws { font-size: calc(12px + var(--mobile-type-increase, 0px)); padding: 0 10px; }
.bar .bar-right { margin-left: 0; gap: 0; }
.bar .bar-repo { display: none; }
.bar a.ws.bar-install { height: 38px; padding: 0 18px; background: #f6a81b; color: #241d12; border: 0; font-family: var(--sans); }
.bar a.ws.bar-install:hover { background: #e99b0e; }
.bar .ws[aria-current="location"], .marketplace-page .bar .ws[aria-current="page"] { color: #202d35; font-weight: 700; }
.bar .ws[aria-current="location"]::after, .marketplace-page .bar .ws[aria-current="page"]::after { background: #263038; bottom: 12px; height: 1px; }
.scene-stage { --stage-h: 100svh; }
.marketplace-page .bar { background: rgba(255,255,255,.68); }
.marketplace-page .market-shell { padding-top: 140px; }
@media (max-width: 1050px) and (min-width: 721px) {
  .bar { gap: 12px; padding-inline: 16px; }
  .bar a.company-mark img { width: 84px; }
  .bar .ws { padding-inline: 7px; font-size: calc(11px + var(--mobile-type-increase, 0px)); }
  .bar .bar-platform img { width: 56px; }
  .bar a.bar-brand { padding-left: 12px; }
}
@media (max-width: 720px) {
  :root { --bar-h: 128px; }
  .bar { top: 12px; left: 12px; right: 12px; height: 104px; display: grid; grid-template-columns: 32px auto 1fr auto; grid-template-rows: 52px 42px; column-gap: 10px; row-gap: 0; padding: 4px 14px; border-radius: 12px; }
  .bar a.company-mark { grid-column: 1; grid-row: 1; width: 32px; overflow: hidden; }
  .bar a.company-mark img { width: 98px; max-width: none; flex: none; }
  .bar .products { display: none; }
  .bar a.bar-brand { grid-column: 2; grid-row: 1; padding: 0; border: 0; margin: 0; gap: 4px; }
  .bar .bar-brand img { width: 18px; height: 18px; }
  .bar .bar-brand span { font-size: calc(22px + var(--mobile-type-increase, 0px)); }
  .bar .bar-platform { grid-column: 3; grid-row: 1; padding: 0; gap: 5px; }
  .bar .bar-platform img { width: 56px; }
  .bar .bar-platform-for { font-size: calc(10px + var(--mobile-type-increase, 0px)); }
  .bar .bar-right { grid-column: 4; grid-row: 1; }
  .bar a.ws.bar-install { height: 34px; padding-inline: 12px; font-size: calc(11px + var(--mobile-type-increase, 0px)); }
  .bar .bar-sections { grid-column: 1/-1; grid-row: 2; justify-content: space-between; width: 100%; }
  .bar .bar-sections .ws { padding: 0 4px; font-size: calc(11px + var(--mobile-type-increase, 0px)); flex: none; }
  .bar .ws[aria-current="location"]::after, .marketplace-page .bar .ws[aria-current="page"]::after { bottom: 2px; left: 4px; right: 4px; }
  .marketplace-page .market-shell { padding-top: 146px; }
}
@media (max-width: 359px) {
  .bar { column-gap: 7px; padding-inline: 10px; }
  .bar .bar-platform img { width: 48px; }
  .bar .bar-platform-for { display: none; }
}



.bar a.bar-brand { color: #c45d00; }
.bar a.bar-brand:hover { color: #a84c00; }


#cards .marketplace-section-action { margin: 20px 0; font-size: calc(15px + var(--mobile-type-increase, 0px)); font-weight: 700; }

.scene .promo-labels + .lede { margin-top: 28px; }

#cards .marketplace-section-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: calc(14px + var(--mobile-type-increase, 0px)); }

/* Fine static grain on the Markdown section's dark surface only. */
#files {
  width: 100%; max-width: none;
  padding-inline: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter)));
  background-image: url("assets/surface-grain.png");
  background-repeat: repeat;
  background-size: 192px 192px;
}

#files .term { background: var(--surface); color: var(--bright); box-shadow: none; }
#files .term .prompt { color: var(--violet); }
#files .agent-note { margin-top: 32px; }
#files .agent-note h3 { margin: 0 0 10px; font-size: calc(19px + var(--mobile-type-increase, 0px)); line-height: 1.3; }
#files .agent-note p { margin: 0; font-size: calc(14px + var(--mobile-type-increase, 0px)); line-height: 1.7; }

/* Reverse the glass and foreground inks as dark sections pass beneath it. */
.bar { transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.bar.is-on-dark {
  --bright: #f4f5f8;
  --fg: #d3d8e1;
  --fg-dim: #b2bcc7;
  --line: rgba(231,238,249,.18);
  --surface: #1b2027;
  --surface-hi: #282f38;
  background: rgba(15,19,24,.76);
  border-color: rgba(231,238,249,.2);
  box-shadow: 0 8px 28px rgba(0,0,0,.2);
}
.bar.is-on-dark a.company-mark img { filter: brightness(0) invert(1); }
.bar.is-on-dark a.bar-brand { color: #f6a81b; border-left-color: rgba(231,238,249,.2); }
.bar.is-on-dark a.bar-brand:hover { color: #ffc44a; }
.bar.is-on-dark .bar-brand img { content: url("../brand/tuck-mark-flat.svg"); }
.bar.is-on-dark .bar-platform img { filter: none; }
.bar.is-on-dark .bar-platform-for { color: #b2bcc7; }
.bar.is-on-dark .ws[aria-current="location"] { color: #f4f5f8; }
.bar.is-on-dark .ws[aria-current="location"]::after { background: #f4f5f8; }
.bar.is-on-dark .products-menu { background: rgba(23,28,34,.97); border-color: rgba(231,238,249,.18); }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }

/* An additive mobile type step preserves the existing hierarchy and inheritance. */
@media (max-width: 899px) { :root { --mobile-type-increase: 2px; } }

/* Lead with the product; the company follows as an attribution. */
.bar .bar-company-row { display: flex; align-items: center; gap: 20px; width: auto; margin: 0; padding: 0; }
.bar .products { display: block; height: 34px; margin: 0; }
.bar .products-toggle { gap: 10px; }
.bar .products-toggle .bar-brand { display: inline-flex; align-items: center; gap: 5px; color: #c45d00; }
.bar .products-toggle .bar-brand img { width: 20px; height: 20px; }
.bar .products-toggle .bar-brand span { font-size: calc(24px + var(--mobile-type-increase, 0px)); }
.bar .products-toggle .bar-platform { display: inline-flex; }
.bar .products-toggle > svg { margin-left: 2px; flex: none; }
.bar a.company-mark { display: inline-flex; align-items: center; gap: 5px; height: 26px; width: auto; overflow: visible; padding-left: 14px; border-left: 1px solid var(--line); }
.bar a.company-mark img { width: 68px; height: auto; }
.bar .company-by, .bar .company-designs { font-size: 10px; white-space: nowrap; }
.bar.is-on-dark .products-toggle .bar-brand { color: #f6a81b; }
@media (max-width: 1100px) { .bar .bar-company-row { gap: 12px; } .bar a.company-mark { padding-left: 12px; } .bar .company-designs { display: none; } }
@media (max-width: 720px) {
  :root { --bar-h: 148px; }
  .bar { height: 124px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 44px 30px 36px; }
  .bar .bar-company-row { grid-column: 1; grid-row: 1; }
  .bar .products-toggle { gap: 7px; }
  .bar .products-toggle .bar-brand img { width: 18px; height: 18px; }
  .bar .products-toggle .bar-brand span { font-size: calc(22px + var(--mobile-type-increase, 0px)); }
  .bar a.company-mark { position: absolute; top: 48px; left: 14px; height: 26px; padding: 0; border: 0; gap: 5px; }
  .bar a.company-mark img { width: 48px; height: auto; }
  .bar .company-by, .bar .company-designs { font-size: 10px; display: inline; }
  .bar .bar-right { grid-column: 2; grid-row: 1; }
  .bar .bar-sections { grid-row: 3; }
  .marketplace-page .market-shell { padding-top: 166px; }
}

/* Keep the company credit quiet until it is approached. */
.bar a.company-mark { opacity: .5; transition: opacity var(--t-quick) ease; }
.bar a.company-mark:hover, .bar a.company-mark:focus-visible { opacity: 1; }

/* A quiet company product rail sits above the Tuck navigation. */
.pavot-products { position: fixed; z-index: 11; top: 5px; left: max(16px, calc((100vw - 1330px) / 2)); right: max(16px, calc((100vw - 1330px) / 2)); height: 34px; display: flex; align-items: center; gap: 18px; padding-inline: 10px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; font: 12px/1.3 var(--sans); color: #263038; }
.pavot-products::-webkit-scrollbar { display: none; }
.pavot-products a { flex: none; color: inherit; text-decoration: none; opacity: .6; transition: opacity var(--t-quick) ease; }
.pavot-products a:hover, .pavot-products a:focus-visible, .pavot-products a[aria-current] { opacity: 1; }
.pavot-products-brand { display: inline-flex; align-items: center; gap: 7px; }
.pavot-products-brand img { width: 115px; height: auto; }
.bar { top: 44px; }
:root { --bar-h: 132px; }
.bar .product-identity { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.bar .product-identity .bar-brand { display: inline-flex; align-items: center; gap: 5px; color: #c45d00; }
.bar .product-identity .bar-brand span { font-size: calc(24px + var(--mobile-type-increase, 0px)); }
.bar.is-on-dark .product-identity .bar-brand { color: #f6a81b; }
body:has(.bar.is-on-dark) .pavot-products { color: #e7edf4; }
body:has(.bar.is-on-dark) .pavot-products-brand img { filter: brightness(0) invert(1); }
.marketplace-page .market-shell { padding-top: 168px; }
@media (max-width: 720px) {
  .pavot-products { left: 12px; right: 12px; gap: 14px; font-size: 12px; padding-inline: 3px; }
  .pavot-products-brand img { width: 100px; }
  :root { --bar-h: 172px; }
  .bar { top: 44px; height: 104px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 52px 42px; }
  .bar .product-identity { grid-column: 1; grid-row: 1; gap: 7px; }
  .bar .product-identity .bar-brand span { font-size: calc(22px + var(--mobile-type-increase, 0px)); }
  .bar .bar-sections { grid-row: 2; }
  .marketplace-page .market-shell { padding-top: 178px; }
}

/* Reveal the whole product rail together, including its logo and links. */
.pavot-products { opacity: .35; transition: opacity var(--t-quick) ease; }
.pavot-products:hover, .pavot-products:focus-within { opacity: 1; }
.pavot-products a { opacity: 1; }

/* Retire the company rail once the page scrolls; keep Tuck navigation close. */
.pavot-products { transition: opacity var(--t-quick) ease, transform var(--t-quick) ease, visibility var(--t-quick); }
body.has-scrolled .pavot-products { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); }
.bar { transition: top 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
body.has-scrolled .bar { top: 16px; }
@media (max-width: 720px) { body.has-scrolled .bar { top: 12px; } }
@media (prefers-reduced-motion: reduce) { .bar, .pavot-products { transition: none; } }

/* A quiet compatibility signature, visually separate from actions. */
.scene .designed-for { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 20px 0 0; padding: 0; border: 0; background: transparent; color: #fff; opacity: .85; font-size: 11px; line-height: 1.4; white-space: nowrap; text-shadow: none; }
.scene .designed-for img { display: block; width: 80px; height: auto; flex: none; filter: brightness(0) invert(1); }
@media (max-width: 899px) { .scene .designed-for img { width: 64px; } }

/* JS bounds the artwork height; wide viewports must not stretch that box. */
.scene-artwork { min-width: 0; }

/* Hardware stays opaque; the ocean remains one continuous background. */
.scene-stage { background-image: url("assets/california-window-poster.webp"); }
.scene-artwork { z-index: 1; -webkit-mask-image: none; mask-image: none; }

/* A single-row mobile header; section and company links share one disclosure. */
.bar .mobile-menu-toggle, .bar .bar-menu { display: none; }
@media (max-width: 720px) {
  :root { --bar-h: 96px; }
  .bar.menu-ready { top: 12px; height: 64px; display: flex; gap: 8px; padding: 0 12px; }
  .bar.menu-ready .product-identity { flex: 1; min-width: 0; }
  .bar.menu-ready .bar-right { margin: 0; flex: none; }
  .bar.menu-ready .mobile-menu-toggle { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 6px; padding: 10px; background: transparent; color: var(--bright); cursor: pointer; }
  .mobile-menu-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
  .mobile-menu-toggle .menu-close { display: none; }
  .menu-open .mobile-menu-toggle .menu-bars { display: none; }
  .menu-open .mobile-menu-toggle .menu-close { display: block; }
  .bar.menu-ready .mobile-menu-toggle:hover { background: var(--surface-hi); }
  .bar.menu-ready .bar-menu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 10px 26px rgba(20,32,42,.14); max-height: calc(100dvh - 108px); overflow-y: auto; overscroll-behavior: contain; }
  .bar.menu-ready.menu-open .bar-menu { display: block; }
  .bar.menu-ready .bar-menu .bar-sections { display: grid; height: auto; width: 100%; gap: 4px; margin: 0; }
  .bar.menu-ready .bar-menu .ws { justify-content: flex-start; height: auto; min-height: 44px; padding: 10px 12px; font-size: 15px; line-height: 1.4; border-radius: 6px; }
  .bar.menu-ready .bar-menu .ws::after { display: none; }
  .bar.menu-ready .bar-menu .ws[aria-current] { background: var(--surface-hi); }
  .bar.menu-ready .pavot-products { display: flex; position: static; flex-direction: column; align-items: stretch; width: 100%; height: auto; margin: 12px 0 0; padding: 12px 0 0; gap: 0; border-top: 1px solid var(--line); overflow: visible; white-space: normal; color: var(--fg); opacity: 1; visibility: visible; transform: none; transition: none; }
  .bar.menu-ready .pavot-products a { min-height: 40px; padding: 10px 12px; font-size: 12px; line-height: 1.5; }
  .bar.menu-ready .pavot-products-brand { gap: 8px; flex-wrap: wrap; }
  .bar.menu-ready .pavot-products-brand img { width: 80px; }
  .bar.menu-ready .pavot-products-brand span { font-size: 10px; }
  .marketplace-page .market-shell { padding-top: 106px; }
}