/* Layout: an Apple product page in Homeswift's own materials. Translucent nav over a warm/cool wash, a live
   accessory wall as the hero, then benchmarks, features, plugins, install and code, each a centred 1080px band. */
:root {
  --bg: #f4f5f9; --bg-raised: #ffffff; --wash-warm: #ffe6cf; --wash-cool: #d9ecff;
  --ink: #15171c; --muted: #555c6a; --faint: #686e7b; --line: rgba(20, 30, 50, 0.1);
  --glass: rgba(255, 255, 255, 0.64); --glass-edge: rgba(255, 255, 255, 0.85); --glass-solid: #fbfbfd;
  --tile: rgba(255, 255, 255, 0.62); --tile-on: #ffffff; --tile-off-icon: linear-gradient(160deg, #b4bbc7, #8b94a4);
  --accent: #ff7a1a; --accent-deep: #f0442e; --accent-ink: #b0460a; --on-accent: #ffffff;
  /* The primary button: white text needs a deeper orange than the accent (4.6:1 at its lightest). */
  --button-top: #c94c0a; --button-bottom: #a63119;
  --cool: #1f7fe8; --ok: #1f9d55; --track: rgba(120, 128, 142, 0.18);
  --code-bg: #15171c; --code-ink: #e8eaf0; --code-kw: #ff8fb0; --code-str: #ffb46b; --code-com: #7d8596; --code-type: #8fd0ff;
  --shadow: 0 12px 36px rgba(25, 34, 56, 0.12); --shadow-small: 0 2px 8px rgba(25, 34, 56, 0.08);
  --font: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 22px; --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* The web UI's shape scale (Sources/HomeswiftUI/Web/style.css), so the pages draw its widgets and controls alike. */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 26px; --radius-pill: 999px;
  /* One spring for everything: critically damped, so nothing overshoots; 400 ms for a response of 0.3 s,
     540 ms for 0.4 s. Browsers without linear() get a curve close to it. */
  --spring: cubic-bezier(0.2, 0.9, 0.25, 1);
  /* A press lands in 100 ms; the release springs back. */
  --press: 100ms ease-out;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.058, 0.181, 0.322, 0.456, 0.574, 0.672, 0.751, 0.813, 0.861, 0.897, 0.925, 0.945, 0.96, 0.971, 0.979, 0.985, 0.989, 0.992, 0.995, 0.997, 1); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0e13; --bg-raised: #161920; --wash-warm: #3a2414; --wash-cool: #12233a;
    --ink: #f3f4f7; --muted: #a2a9b5; --faint: #8d94a1; --line: rgba(255, 255, 255, 0.1);
    --glass: rgba(26, 29, 37, 0.66); --glass-edge: rgba(255, 255, 255, 0.12); --glass-solid: #1b1e26;
    --tile: rgba(44, 48, 60, 0.6); --tile-on: rgba(255, 255, 255, 0.94); --tile-off-icon: linear-gradient(160deg, #6c7484, #4d5462);
    --accent: #ff8a33; --accent-deep: #ff5a3c; --accent-ink: #ffa45c; --on-accent: #1a0d00; --button-top: #ff8a33; --button-bottom: #ff6a3c;
    --cool: #4aa3ff; --ok: #3ccf7a; --track: rgba(255, 255, 255, 0.12);
    --code-bg: #0f1116; --shadow: 0 14px 40px rgba(0, 0, 0, 0.45); --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c0e13; --bg-raised: #161920; --wash-warm: #3a2414; --wash-cool: #12233a;
  --ink: #f3f4f7; --muted: #a2a9b5; --faint: #8d94a1; --line: rgba(255, 255, 255, 0.1);
  --glass: rgba(26, 29, 37, 0.66); --glass-edge: rgba(255, 255, 255, 0.12); --glass-solid: #1b1e26;
  --tile: rgba(44, 48, 60, 0.6); --tile-on: rgba(255, 255, 255, 0.94); --tile-off-icon: linear-gradient(160deg, #6c7484, #4d5462);
  --accent: #ff8a33; --accent-deep: #ff5a3c; --accent-ink: #ffa45c; --on-accent: #1a0d00; --button-top: #ff8a33; --button-bottom: #ff6a3c;
  --cool: #4aa3ff; --ok: #3ccf7a; --track: rgba(255, 255, 255, 0.12);
  --code-bg: #0f1116; --shadow: 0 14px 40px rgba(0, 0, 0, 0.45); --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
body {
  background: var(--bg); color: var(--ink); font: 1rem/1.55 var(--font); font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(60rem 40rem at 0% -10%, var(--wash-warm), transparent 60%),
    radial-gradient(50rem 36rem at 100% 0%, var(--wash-cool), transparent 60%);
  background-repeat: no-repeat;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--glass-solid); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-xs); }

.band { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: 1080px; margin: 0 auto; }

/* Type: size-specific tracking and leading, tight as it grows. */
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.06; letter-spacing: -0.028em; font-weight: 700; }
h3 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.45; color: var(--muted); letter-spacing: -0.005em; max-width: 34em; }
.eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--accent-ink); }
.small { font-size: 0.8125rem; letter-spacing: 0.005em; color: var(--faint); }
code, pre { font-family: var(--mono); }

/* Nav: a translucent material, content scrolls under it; the edge is a soft fade, not a rule. */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; padding-block: 10px; }
.nav-bar { position: relative; display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 8px; border-radius: 999px;
  background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow-small); }
/* The scroll edge: where content passes under the bar, a band blurs and fades it out (no rule). It appears only once
   the page has scrolled, as the bar itself firms up from a lighter glass; browsers without scroll timelines keep both. */
.nav::before { content: ""; position: absolute; inset: 0 0 -18px; pointer-events: none;
  background: linear-gradient(var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 55%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
@supports (animation-timeline: scroll()) {
  .nav::before { animation: edge-in linear both; animation-timeline: scroll(root); animation-range: 0 64px; }
  .nav-bar { animation: bar-firm linear both; animation-timeline: scroll(root); animation-range: 0 96px; }
}
@keyframes edge-in { from { opacity: 0; } }
@keyframes bar-firm { from { box-shadow: none; background-color: color-mix(in srgb, var(--glass) 60%, transparent); } }
.brand { display: flex; align-items: center; gap: 9px; padding-right: 10px; text-decoration: none; font-weight: 650; letter-spacing: -0.01em; }
.brand svg { width: 30px; height: 30px; flex: none; }
.nav-links { display: flex; gap: 2px; margin-right: auto; }
.nav-links a { text-decoration: none; font-size: 0.9375rem; padding: 7px 12px; border-radius: 999px; color: var(--muted); transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out); }
@media (hover: hover) { .nav-links a:hover { color: var(--ink); background: var(--track); } }
.nav-links a:active { color: var(--ink); background: var(--track); transition-duration: 0ms; }
/* The section links never wrap: they leave the bar below 1000 px, where French or Portuguese labels (a third longer than
   English), six of them on the bridge page, or the home page's language picker would no longer fit beside the logo. */
.nav-links a { white-space: nowrap; }
@media (max-width: 1000px) { .nav-links { display: none; } .brand { margin-right: auto; } }
.btn { display: inline-flex; align-items: center; gap: 8px; font: 600 0.9375rem/1 var(--font); letter-spacing: -0.005em; text-decoration: none; padding: 11px 18px; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap;
  transition: transform 400ms var(--spring), filter 160ms var(--ease-out), background-color 160ms var(--ease-out); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn-primary { background: linear-gradient(180deg, var(--button-top), var(--button-bottom)); color: var(--on-accent); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn-plain { background: var(--bg-raised); color: var(--ink); box-shadow: var(--shadow-small); border: 1px solid var(--line); }
@media (hover: hover) { .btn-primary:hover { filter: brightness(1.06); } .btn-plain:hover { background: var(--tile-on); } }
.btn:active { transform: scale(0.97); filter: brightness(0.94); transition: transform var(--press), filter var(--press); }
.btn svg { width: 17px; height: 17px; }
.nav .btn { padding: 9px 14px; }

/* Hero */
.hero { padding-block: clamp(36px, 7vw, 88px) clamp(16px, 3vw, 32px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.75rem; color: var(--muted); }
.meta span { padding: 4px 10px; border-radius: 999px; background: var(--track); white-space: nowrap; }

/* The wall uses the web UI's compact rows, tall tiles and expanded control cards. */
.stage { container-type: inline-size; min-width: 0; }
.wall { --gap: 10px; --row: max(64px, calc(var(--u) * 0.36)); --u: calc((100cqw - 3 * var(--gap)) / 4); display: grid; grid-template-columns: repeat(4, var(--u)); grid-auto-rows: var(--row); gap: var(--gap); grid-auto-flow: row dense; }
@container (max-width: 440px) { .wall { --u: calc((100cqw - var(--gap)) / 2); grid-template-columns: repeat(2, var(--u)); } }
.w { color: var(--ink); position: relative; border-radius: var(--radius); background: var(--tile); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--shadow);
  padding: 12px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0; overflow: hidden;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 400ms var(--spring); }
.w.medium { grid-row: span 2; }
.wall .w.large { grid-column: span 2; grid-row: span 2; }
.wall .w.xlarge { grid-column: span 2; grid-row: span 3; }
.wall .w.small { flex-direction: row; align-items: center; gap: 10px; padding: 10px; }
.wall .w.small .w-head { flex: none; }
.wall .w.small .w-head .pct { display: none; }
.wall .w.small .icon { width: 28px; height: 28px; border-radius: 50%; }
.wall .w.small .who strong { white-space: nowrap; font-size: 0.75rem; }
.w.tap { cursor: pointer; }
.w.tap:active, .w.pressed { transform: scale(0.97); transition-duration: 200ms, 200ms, 100ms; transition-timing-function: var(--ease-out), var(--ease-out), ease-out; }
.w.on.small { background: var(--tile-on); color: #15171c; }
.w.on.small .status { color: rgba(21, 23, 28, 0.68); }
.w-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who { display: grid; min-width: 0; flex: 1; }
.who strong { font-size: 0.875rem; line-height: 1.25; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.small .who strong { white-space: normal; }
.status { font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 200ms var(--ease-out); }
.status.heat { color: var(--accent-ink); } .status.cool { color: var(--cool); } .status.ok { color: var(--ok); }
.icon { width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: none; color: #fff;
  background: var(--tile-off-icon); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); transition: background 200ms var(--ease-out), box-shadow 200ms var(--ease-out), color 200ms; }
.icon svg { width: 19px; height: 19px; }
.on .icon.light { background: linear-gradient(160deg, #ffd66b, #f0a01e); color: #3a2600; box-shadow: 0 4px 14px rgba(240,160,30,0.45), inset 0 1px 0 rgba(255,255,255,0.4); }
.on .icon.plug { background: linear-gradient(160deg, #5fd68a, #24a35a); }
.icon.heat { background: linear-gradient(160deg, #ffb15c, #f2711c); }
.icon.blind { background: linear-gradient(160deg, #6fb4ff, #2a7ae4); }
.icon.lock { background: linear-gradient(160deg, #6fb4ff, #2a7ae4); }
.unlocked .icon.lock { background: linear-gradient(160deg, #ffb15c, #f2711c); }
.big { font-size: 1.6rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }

/* Switch */
.switch { margin-left: auto; width: 46px; height: 28px; border-radius: 999px; border: 0; padding: 0; background: var(--track); position: relative; cursor: pointer; flex: none; transition: background-color 200ms var(--ease-out); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: transform 400ms var(--spring), width 400ms var(--spring); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
/* Pressed, the knob stretches toward where it will go, as iOS's does. */
.switch:active::after { width: 30px; transition-duration: 100ms; }
.switch[aria-checked="true"]:active::after { transform: translateX(12px); }

/* Slider: a bar that tracks the finger 1:1 from where it was grabbed. */
.slider { position: relative; height: 44px; border-radius: var(--radius-md); background: var(--track); overflow: hidden; cursor: ew-resize; touch-action: none; }
.slider .fill { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, #b6e27a, #dff3a8); transform: scaleX(var(--v, 0.7)); }
.off .slider .fill { background: linear-gradient(90deg, rgba(150,158,172,0.45), rgba(150,158,172,0.25)); }
.slider .labels { position: relative; display: flex; justify-content: space-between; align-items: center; height: 100%; padding: 0 14px; font-size: 0.8125rem; font-weight: 600; color: #22300c; font-variant-numeric: tabular-nums; }
.off .slider .labels { color: var(--muted); }
.slider .labels span:last-child { color: var(--ink); }

/* Thermostat */
.thermo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.round { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--bg-raised); color: var(--ink); box-shadow: var(--shadow-small); font: 500 1.25rem/1 var(--font); cursor: pointer; flex: none; transition: transform 400ms var(--spring); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.round:active { transform: scale(0.92); transition: transform var(--press); }
.target { text-align: center; display: grid; }
.target small, .inside small { font-size: 0.6875rem; color: var(--muted); }
.inside { display: grid; }

/* Shutter: drag it up or down; past either end it resists, then springs back. */
.shutter { touch-action: none; cursor: ns-resize; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 100ms ease-out; }
.shutter .slats { position: absolute; inset: 0 0 auto; height: calc(var(--closed, 0) * 100%); pointer-events: none;
  background: repeating-linear-gradient(180deg, var(--track) 0 7px, transparent 7px 9px); border-bottom: 1px solid var(--line); }
.shutter > * { position: relative; }
.shutter .pct { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.03em; margin-left: auto; font-variant-numeric: tabular-nums; }

/* Lock: a hold confirms, as the web UI asks for security accessories. */
.lock .hold { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 180ms var(--ease-out); }
.lock.holding .hold { transform: scaleX(1); transition: transform 650ms linear; }

.wire { margin-top: 14px; display: flex; gap: 10px; align-items: baseline; font: 0.75rem/1.4 var(--mono); color: var(--muted); min-width: 0; padding: 10px 14px; border-radius: var(--radius-md); background: var(--glass); border: 1px solid var(--glass-edge); }
.wire b { color: var(--accent-ink); font-weight: 600; flex: none; }
.wire span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.stage-note { margin-top: 8px; text-align: center; }

/* Sections */
section { padding-block: clamp(56px, 8vw, 104px); }
.section-head { display: grid; gap: 14px; max-width: 46rem; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head .lede { font-size: 1.125rem; }

/* Benchmarks: one scale per row, Homeswift beside HAP-NodeJS. */
.bench { display: grid; gap: 4px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(16px, 3vw, 28px); box-shadow: var(--shadow-small); }
.row { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 4.5rem; gap: 8px 20px; align-items: center; padding-block: 14px; border-top: 1px solid var(--line); }
.legend + .row { border-top: 0; }
.row-label { display: grid; min-width: 0; }
.row-label strong { font-weight: 600; font-size: 0.9375rem; }
.row-label span { font-size: 0.75rem; color: var(--faint); }
.bars { display: grid; gap: 6px; min-width: 0; }
.bar { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.bar i { display: block; height: 12px; border-radius: var(--radius-xs); flex: none; min-width: 3px; }
.bar.us i { background: linear-gradient(90deg, var(--accent), var(--accent-deep)); }
.bar.them i { background: var(--track); }
.bar.them { color: var(--muted); }
.ratio { text-align: right; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ratio small { display: block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0; color: var(--faint); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.8125rem; color: var(--muted); margin-bottom: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; }
.bench-foot { margin-top: 14px; max-width: 60rem; }

/* Features */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.card p { color: var(--muted); font-size: 0.9375rem; }
.card .glyph { width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; color: #fff; margin-bottom: 6px; }
.card .glyph svg { width: 21px; height: 21px; }
.card.wide { grid-column: span 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; }
.card.wide > div { display: grid; gap: 10px; }
.card.span2 { grid-column: span 2; }
.card.span2 p { max-width: 36rem; }

/* Setup code: HomeKit's label, 8 digits in two rows of four. */
.code-label { justify-self: center; display: grid; grid-template-columns: auto auto; gap: 14px; align-items: center; padding: 16px 20px; border-radius: var(--radius-md); background: #fff; color: #111; border: 2px solid #111; box-shadow: var(--shadow); }
.code-label svg { width: 40px; height: 40px; }
.code-label .digits { font: 600 1.6rem/1.15 var(--mono); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

/* Plugins */
.plugins { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 10px; }
.plugin { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--glass); border: 1px solid var(--glass-edge); min-width: 0; }
.plugin .mono { width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; font-weight: 700; font-size: 0.8125rem; letter-spacing: -0.02em; background: var(--track); color: var(--ink); flex: none; }
.plugin div { display: grid; min-width: 0; }
.plugin strong { font-size: 0.9375rem; font-weight: 600; }
.plugin span { font-size: 0.8125rem; color: var(--muted); }
.plugin.add { border-style: dashed; border-color: var(--line); background: transparent; text-decoration: none; }
.plugin.add .mono { background: none; border: 1.5px dashed var(--faint); color: var(--muted); }

/* Install */
.install { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.seg { position: relative; display: inline-flex; padding: 3px; border-radius: var(--radius-md); background: var(--track); gap: 2px; margin-bottom: 14px; max-width: 100%; overflow-x: auto; }
.seg button { position: relative; z-index: 1; font: 500 0.875rem/1 var(--font); border: 0; padding: 9px 16px; border-radius: calc(var(--radius-md) - 3px); background: none; color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 400ms var(--spring); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.seg button:active { transform: scale(0.96); transition: transform var(--press); }
.seg button[aria-selected="true"] { background: var(--bg-raised); color: var(--ink); box-shadow: var(--shadow-small); }
/* With site.js, the selection is one thumb that slides between the segments (--x and --w), springing from wherever it is. */
.seg.thumb::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0));
  border-radius: calc(var(--radius-md) - 3px); background: var(--bg-raised); box-shadow: var(--shadow-small); }
.seg.thumb.ready::before { transition: transform 400ms var(--spring), width 400ms var(--spring); }
.seg.thumb button[aria-selected="true"] { background: none; box-shadow: none; }
.term:not([hidden]) { animation: pane-in 280ms var(--ease-out); }
@keyframes pane-in { from { opacity: 0; } }
.term { position: relative; background: var(--code-bg); color: var(--code-ink); border-radius: var(--radius-lg); padding: 18px 20px; overflow-x: auto; font-size: 0.8125rem; line-height: 1.7; }
.term pre { margin: 0; white-space: pre; }
.term .c { color: var(--code-com); } .term .k { color: var(--code-kw); } .term .s { color: var(--code-str); } .term .t { color: var(--code-type); }
.copy { position: absolute; top: 10px; right: 10px; font: 500 0.75rem/1 var(--font); color: var(--code-ink); background: color-mix(in srgb, var(--code-ink) 12%, var(--code-bg)); border: 0; border-radius: var(--radius-sm); padding: 7px 10px; cursor: pointer;
  transition: transform 400ms var(--spring), background-color 160ms var(--ease-out); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (hover: hover) { .copy:hover { background: color-mix(in srgb, var(--code-ink) 18%, var(--code-bg)); } }
.copy:active { transform: scale(0.96); background: color-mix(in srgb, var(--code-ink) 24%, var(--code-bg)); transition: transform var(--press), background-color var(--press); }
.copy.done { background: color-mix(in srgb, var(--ok) 45%, var(--code-bg)); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; padding-top: 4px; }
.steps li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--track); font-size: 0.8125rem; font-weight: 600; }
.steps strong { display: block; font-weight: 600; }
.steps p { color: var(--muted); font-size: 0.9375rem; }

/* Code */
.dev { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.dev ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--muted); }
.dev li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.dev li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 0.6em; }

/* The graph section: a drawing of the Accessories page's graph (plugins in the web UI's palette, an unavailable
   accessory hollow) with a camera's card over its corner; on a narrow screen the card sits under it. */
.graph-lede { margin-top: 14px; font-size: 1.0625rem; }
.graph-stage { position: relative; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-small); padding: clamp(12px, 2vw, 20px); }
.graph-toolbar { display: flex; gap: 8px; font-size: 0.8125rem; color: var(--muted); }
.graph-pill { padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.graph-search { flex: 1; }
.graph-art { display: block; width: 100%; height: auto; }
.graph-art path { fill: none; stroke: var(--tone, var(--faint)); }
.graph-art .g-trunk { stroke-width: 2; stroke-opacity: 0.55; }
.graph-art .g-branch { stroke-width: 1.3; stroke-opacity: 0.55; }
.graph-art .g-leaf { stroke-width: 0.8; stroke-opacity: 0.3; }
.graph-art .g-node circle { fill: var(--bg-raised); stroke: var(--tone, var(--faint)); stroke-width: 2; }
.graph-art .g-node use { color: var(--tone, var(--faint)); }
.graph-art .g-bridge circle { stroke-width: 2.4; filter: drop-shadow(0 2px 6px rgba(20, 30, 50, 0.14)); }
.graph-art .g-plugin circle { stroke-width: 2.4; }
.graph-art .g-dot circle { stroke-width: 1.4; }
.graph-art .g-off circle { stroke-dasharray: 2 1.6; stroke-opacity: 0.7; }
.graph-art .g-off use { opacity: 0.4; }
.graph-art .g1 { --tone: #2a78d6; } .graph-art .g2 { --tone: #1baf7a; } .graph-art .g3 { --tone: #eb6834; } .graph-art .g4 { --tone: #6250d6; } .graph-art .g5 { --tone: #e87ba4; }
.graph-card { position: absolute; right: clamp(12px, 3vw, 24px); bottom: clamp(12px, 3vw, 24px); width: min(230px, 46%); background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 12px; display: grid; gap: 8px; font-size: 0.75rem; }
.graph-card-head { display: flex; gap: 8px; align-items: center; }
.graph-card-head i { flex: none; width: 28px; height: 28px; border-radius: var(--radius-sm); display: grid; place-items: center; color: #1baf7a; background: color-mix(in srgb, #1baf7a 14%, transparent); }
.graph-card-head svg { width: 16px; height: 16px; }
.graph-card-head b { display: block; font-size: 0.8125rem; }
.graph-card-head small { color: var(--muted); }
.graph-shot { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: linear-gradient(160deg, #9fc6a8, #4f7f68 55%, #2d4a3e); }
.graph-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.graph-shot span { position: absolute; top: 6px; right: 6px; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; background: rgba(0, 0, 0, 0.45); padding: 2px 6px; border-radius: 999px; }
.graph-card dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.graph-card dt { color: var(--muted); }
.graph-card dd { margin: 0; }
@media (max-width: 760px) { .graph-card { position: static; width: auto; margin-top: 10px; } }

footer { padding-block: 40px 56px; border-top: 1px solid var(--line); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.875rem; }
footer nav a { color: var(--muted); text-decoration: none; }
footer nav a:hover { color: var(--ink); }
footer .small { max-width: 34rem; }

@media (max-width: 900px) {
  .hero .wrap, .install, .dev { grid-template-columns: minmax(0, 1fr); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card.wide { grid-column: span 2; }
}
@media (max-width: 720px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .card.wide { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .card.span2 { grid-column: auto; }
  .row { grid-template-columns: minmax(0, 1fr) 4rem; }
  .row .bars { grid-column: 1 / -1; grid-row: 2; }
}
/* Reduced motion keeps the feedback that isn't movement: colour and opacity still cross-fade, briefly; nothing
   slides, scales, stretches or springs. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-property: opacity, color, background-color, border-color, box-shadow, filter !important; transition-duration: 160ms !important; transition-timing-function: ease !important; }
  html { scroll-behavior: auto; }
  .w.tap:active, .w.pressed, .btn:active, .round:active, .copy:active, .seg button:active { transform: none; }
  .switch:active::after { width: 24px; }
  .switch[aria-checked="true"]:active::after { transform: translateX(18px); }
  .lock .hold, .lock.holding .hold { transition: none !important; }
}
/* Reduced transparency: the glass turns solid, and the scroll edge becomes a plain fade. */
@media (prefers-reduced-transparency: reduce) {
  .nav-bar, .w, .wire, .plugin { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-bar { animation: none; }
}
/* More contrast: solid surfaces, defined edges, darker secondary text. */
@media (prefers-contrast: more) {
  :root { --muted: color-mix(in srgb, var(--ink) 82%, var(--bg)); --faint: color-mix(in srgb, var(--ink) 72%, var(--bg)); --line: color-mix(in srgb, var(--ink) 45%, transparent); --glass-edge: var(--line); --track: color-mix(in srgb, var(--ink) 16%, transparent); }
  .nav-bar, .w, .wire, .plugin { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-bar { animation: none; }
  .nav::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); -webkit-mask-image: none; mask-image: none; inset: 0; }
  .btn-plain, .card, .bench, .seg, .round { border: 1px solid var(--line); }
  :focus-visible { outline-width: 3px; }
}

/* Formerly inline: the sprite, the legend's keys, the feature glyphs' tones, the developers' title. */
.sprite { position: absolute; }
.legend i.key-us { background: linear-gradient(90deg, var(--accent), var(--accent-deep)); }
.legend i.key-them { background: var(--track); }
.glyph.tone-orange { background: linear-gradient(160deg, #ffb15c, #f0442e); }
.glyph.tone-violet { background: linear-gradient(160deg, #9b8cff, #5856d6); }
.glyph.tone-blue { background: linear-gradient(160deg, #6fb4ff, #2a7ae4); }
.glyph.tone-yellow { background: linear-gradient(160deg, #ffd66b, #f0a01e); }
.glyph.tone-green { background: linear-gradient(160deg, #5fd68a, #24a35a); }
.glyph.tone-grey { background: linear-gradient(160deg, #8a909c, #4d5462); }
.glyph.tone-pink { background: linear-gradient(160deg, #ff9fb8, #e5487a); }
.dev-title { margin-top: 14px; }

/* The privacy page: one column of reading text. */
.prose { max-width: 42rem; display: grid; gap: 14px; }
.prose h2 { margin-top: 18px; font-size: 1.375rem; }
.prose p { color: var(--muted); }
.prose .lede { color: var(--ink); }
.prose a { color: var(--accent-ink); }
.prose-title { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; }

/* Languages: EN · FR · ES · PT in the footer, the current one in ink. Each language is a static copy (fr/, es/, pt/). */
footer .langs ul { display: flex; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; letter-spacing: 0.02em; }
footer .langs li + li::before { content: "·"; content: "·" / ""; padding-inline: 7px; color: var(--faint); }
footer .langs a[aria-current="page"] { color: var(--ink); font-weight: 600; }