:root { color-scheme: light dark; --page: #fff; --page-rgb: 255,255,255; --ink: #111; --muted: #727272; --secondary: #505050; --line: #e5e5e5; --keycap-surface:#f6f6f6; --blur-rgb: 255,255,255; --button: #111; --button-ink: #fff; --canvas: #e4e4e4; --gutter: clamp(24px,5.2vw,80px); --hero-wall:#f1efec; --hero-wall-rgb:241,239,236; --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1); interpolate-size:allow-keywords; }
@media(prefers-color-scheme:dark) { :root { --page:#080808; --page-rgb:8,8,8; --ink:#f4f4f4; --muted:#999; --secondary:#b6b6b6; --line:#292929; --keycap-surface:#252525; --blur-rgb:8,8,8; --button:#f5f5f5; --button-ink:#111; --canvas:#1b1b1b; --hero-wall:#080706; --hero-wall-rgb:8,7,6; } }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; background:var(--page); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
button,a,[role=button] { -webkit-tap-highlight-color:transparent; }
img,video { -webkit-user-drag:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
a:focus-visible,button:focus-visible,summary:focus-visible,[role=button]:focus-visible { outline:2px solid var(--ink); outline-offset:6px; }
h1,h2,p,figure { margin:0; }
.wrap { width:min(100% - var(--gutter)*2,1200px); margin-inline:auto; }
.nowrap { white-space:nowrap; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:20px; top:-100px; z-index:100; padding:12px; background:var(--page); }
.skip-link:focus { top:12px; }

/* Header: unboxed progressive blur, tinted like the hero band while over it. */
.header { position:fixed; inset:0 0 auto; height:96px; z-index:20; pointer-events:none; }
.header-inner { height:88px; display:flex; align-items:center; justify-content:space-between; position:relative; }
.wordmark { display:flex; align-items:center; gap:11px; pointer-events:auto; font-size:25px; font-weight:600; letter-spacing:-1px; }
.wordmark img { border-radius:9px; display:block; }
.header nav { display:flex; align-items:center; gap:24px; pointer-events:auto; }
.github { font-size:14px; font-weight:500; white-space:nowrap; }
.github span { display:inline-block; margin-left:3px; }
.edge-blur { position:absolute; inset:0 0 -34px; pointer-events:none; background:linear-gradient(to bottom,rgba(var(--blur-rgb),.86),rgba(var(--blur-rgb),.65) 42%,rgba(var(--blur-rgb),0) 100%); }
.edge-blur i { position:absolute; inset:0; -webkit-backdrop-filter:blur(var(--radius)); backdrop-filter:blur(var(--radius)); -webkit-mask-image:var(--mask); mask-image:var(--mask); }
.edge-blur i:nth-child(1) { --radius:1px; --mask:linear-gradient(to top,transparent,black 18%,black); }
.edge-blur i:nth-child(2) { --radius:2px; --mask:linear-gradient(to top,transparent 12%,black 35%,black); }
.edge-blur i:nth-child(3) { --radius:4px; --mask:linear-gradient(to top,transparent 28%,black 52%,black); }
.edge-blur i:nth-child(4) { --radius:8px; --mask:linear-gradient(to top,transparent 44%,black 68%,black); }
.edge-blur i:nth-child(5) { --radius:12px; --mask:linear-gradient(to top,transparent 58%,black 82%,black); }
.edge-blur i:nth-child(6) { --radius:16px; --mask:linear-gradient(to top,transparent 72%,black 95%,black); }
:root.hero-under-header { --blur-rgb:var(--hero-wall-rgb); }
/* The header download's width follows the scroll, so it grows from the right edge and its gap opens with it. */
.header .header-download { box-sizing:border-box; flex-shrink:0; justify-content:flex-end; overflow:hidden; height:40px; gap:10px; font-size:14px;
  width:calc(var(--growth,0) * var(--full-width,180px)); margin-left:calc((var(--growth,0) - 1) * 24px); padding-inline:calc(var(--growth,0) * 18px);
  opacity:min(1, calc(var(--growth,0) * 3)); }
.header-download span,.header-download svg { flex-shrink:0; }
.header-download span { opacity:max(0, calc(var(--growth,0) * 2 - 1)); }
.header .header-download svg { width:15px; height:15px; }

/* Keys in body copy. */
.key-combo { display:inline-flex; align-items:center; gap:.15em; white-space:nowrap; vertical-align:baseline; }
.keycap { display:inline-flex; align-items:center; gap:.28em; padding:.15em .38em; border:1px solid var(--line); border-bottom-width:2px; border-radius:.35em; background:var(--keycap-surface); color:inherit; font-family:inherit; font-size:.73em; font-weight:500; letter-spacing:0; line-height:1.2; white-space:nowrap; vertical-align:baseline; }
.keycap::before { font-size:1.12em; line-height:1; }
.key-command::before { content:"⌘"; }
.key-tab::before { content:"⇥"; }
.key-option::before { content:"⌥"; }
.key-delete::before { content:"⌫"; }
.key-arrow,.key-letter { min-width:1.8em; justify-content:center; }

.download { white-space:nowrap; display:flex; align-items:center; justify-content:center; gap:19px; width:250px; height:66px; border-radius:100px; font-size:18px; font-weight:550; letter-spacing:-.015em; background:var(--button); color:var(--button-ink); }
.download svg { width:20px; height:20px; flex-shrink:0; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.download { transition:filter .25s ease, scale .25s var(--ease-out), opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.download:hover { filter:brightness(.87); }
.download:active { scale:.97; }
.compatibility { color:var(--muted); font-size:12px; line-height:1.5; margin-top:9px; }

/* Hero: the artifact's composition. The 16:10 frame spans the artifact width; the recorded
   display is 130% of it with its centre 64% across, so the switcher clears the copy. The band is
   Silk's flat edge tone, so the display's edges continue into it at any width. */
.hero { position:relative; overflow:hidden; background:var(--hero-wall); }
/* The wallpaper is already flat by the hero's foot, so this eases the band into the page without an edge. */
.hero::after { content:""; position:absolute; inset:auto 0 0; height:20%; z-index:1; pointer-events:none;
  background:linear-gradient(rgba(var(--page-rgb),0), rgba(var(--page-rgb),.12) 25%, rgba(var(--page-rgb),.4) 50%, rgba(var(--page-rgb),.78) 75%, var(--page)); }
.hero-frame { position:relative; width:min(100% - 32px, 1240px); margin-inline:auto; aspect-ratio:16/10; container-type:inline-size; }
.hero-media { position:absolute; inset:0; }
/* A switch slides windows off to the left, under the copy and past the display's edge; this
   layer dissolves them into the band there, and stays clear of the switcher at rest. */
.hero-media::after { content:""; position:absolute; inset:0 auto 0 -50vw; width:calc(50vw + 44cqw); z-index:1; pointer-events:none;
  background:linear-gradient(to right, var(--hero-wall) calc(50vw + 22cqw), rgba(var(--hero-wall-rgb),0)); }
.hero-demo { position:absolute; left:-1cqw; top:-9.4cqw; width:130cqw; aspect-ratio:16/10; overflow:visible; border-radius:0; background:transparent; }
.hero-copy { position:absolute; left:6cqw; top:50%; translate:0 -46%; width:34cqw; z-index:2; display:grid; gap:2cqw; justify-items:start; }
.hero h1 { font-size:clamp(32px,4cqw,58px); line-height:1.03; font-weight:500; letter-spacing:-.045em; text-wrap:balance; }
.hero-subline { max-width:30cqw; font-size:clamp(16px,1.55cqw,22px); line-height:1.45; letter-spacing:-.015em; color:var(--secondary); }
.hero-action { margin-top:.4cqw; }
.hero .download { width:clamp(210px,19cqw,250px); height:clamp(54px,5cqw,64px); font-size:clamp(16px,1.3cqw,18px); }
.hero-copy > * { animation:rise 1.2s var(--ease-out) both; }
.hero-copy > :nth-child(2) { animation-delay:.12s; }
.hero-copy > :nth-child(3) { animation-delay:.24s; }
.hero-copy > :nth-child(4) { animation-delay:.36s; }
.hero-media { animation:settle 1.6s var(--ease-out) both; }
@keyframes rise { from { opacity:0; transform:translateY(36px); } }
@keyframes settle { from { opacity:0; scale:1.04; } }
/* Chapters: one hairline per move in the loop, filling while that move plays. */
.hero-chapters { list-style:none; margin:.8cqw 0 0; padding:0; display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:1.6cqw; }
.hero-chapter { display:grid; gap:9px; width:100%; padding:0; border:0; background:none; text-align:left; font-size:clamp(12px,1.05cqw,14px); font-weight:500; letter-spacing:-.01em; line-height:1.3; color:var(--muted); cursor:pointer; transition:color .3s ease; }
.hero-chapter:hover,.hero-chapter[aria-current="step"] { color:var(--ink); }
.hero-chapter i { position:relative; height:2px; border-radius:1px; overflow:hidden; background:color-mix(in srgb, var(--ink) 14%, transparent); }
.hero-chapter i::after { content:""; position:absolute; inset:0; background:var(--ink); transform-origin:left; transform:scaleX(var(--progress,0)); }
.hero .media-error { position:absolute; left:6cqw; bottom:4cqw; z-index:2; }

/* Feature sections. */
.feature { padding-top:56px; padding-bottom:64px; }
.feature-copy { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; margin-bottom:40px; }
.feature-copy.single { grid-template-columns:1fr; }
h2 { font-size:clamp(34px,3.65vw,52px); font-weight:500; line-height:1.07; letter-spacing:-.038em; text-wrap:balance; }
.feature-description { padding-top:10px; font-size:18px; line-height:1.55; letter-spacing:-.017em; color:var(--secondary); }
.demo { position:relative; aspect-ratio:8/5; overflow:hidden; border-radius:18px; background:var(--canvas); cursor:pointer; isolation:isolate; }
.demo picture,.demo img,.demo video { display:block; width:100%; height:100%; }
.demo img,.demo video { object-fit:cover; }
.demo video { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .4s ease; }
.demo.ready video { opacity:1; }
/* The poster stays under the fading-in video, so the canvas never shows between them. */
.demo.ready picture,.demo.poster-missing picture { visibility:hidden; transition:visibility 0s .4s; }
/* A clip blurs and fades into the canvas over its last moments, and the next (or its restart) blurs in. */
.demo picture { transition:filter .4s ease, opacity .4s ease; }
.demo.is-ending picture,.demo.is-ending video { filter:blur(14px); opacity:0; transition:filter .4s ease, opacity .4s ease; }
.demo.is-switching picture,.demo.is-switching video { animation:blur-in .6s var(--ease-out) both; }
.manage-line.is-switching { animation:fade-in .5s ease both; }
@keyframes fade-in { from { opacity:0; } }
@keyframes blur-in { from { opacity:0; filter:blur(14px); } }

/* Scroll reveals: the class is only set by script, so without it, or with reduced motion, everything shows. */
[data-reveal] { transition:opacity .9s var(--ease-out), translate 1.2s var(--ease-out), scale 1.2s var(--ease-out); transition-delay:calc(var(--reveal-order,0) * 110ms); }
.reveals [data-reveal]:not(.is-revealed) { opacity:0; translate:0 48px; }
.reveals [data-reveal="media"]:not(.is-revealed) { scale:.96; }
.media-error { margin-top:14px; color:var(--muted); font-size:14px; }
.comparison-labels { text-align:center; margin-bottom:18px; font-size:14px; font-weight:500; }

/* Switchers: one stage showing one switcher at a time, each still drawn at the shared capture scale so
   their sizes compare. Without script, all three stack. */
.switchers { display:grid; gap:20px; justify-items:center; }
.switcher-choices { display:none; gap:2px; padding:4px; border-radius:999px; background:var(--canvas); }
.switchers.is-staged .switcher-choices { display:inline-flex; }
.switcher-choices button { display:grid; justify-items:center; border:0; border-radius:999px; padding:7px 20px; background:none; font-size:15px; font-weight:550; letter-spacing:-.01em; line-height:1.2; color:var(--secondary); cursor:pointer;
  transition:background-color .45s var(--ease-out), color .3s ease, box-shadow .45s var(--ease-out); }
.switcher-choices .choice-owner { font-size:.75em; font-weight:500; letter-spacing:0; color:var(--muted); transition:color .3s ease; }
.switcher-choices button:hover { color:var(--ink); }
.switcher-choices [aria-selected="true"] .choice-owner { color:var(--secondary); }
.switcher-choices [aria-selected="true"] { background:var(--page); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.14); }
.switcher-stage { display:grid; gap:40px; width:min(100%, 800px); }
.switchers.is-staged .switcher-stage > * { grid-area:1 / 1; }
.switcher { display:grid; justify-items:center; align-items:center; transition:opacity .6s ease, scale .9s var(--ease-out), visibility 0s; }
.switchers.is-staged .switcher:not(.is-shown) { opacity:0; scale:.97; visibility:hidden; transition:opacity .4s ease, scale .9s var(--ease-out), visibility 0s .4s; }
.switcher picture { width:100%; }
.switcher[data-switcher="macos"] picture { width:calc(2010 / 2232 * 100%); }
.switcher[data-switcher="debut"] picture { width:calc(1706 / 2232 * 100%); }
.switcher img { display:block; width:100%; height:auto; }

/* Managing Spaces: a tab list beside the clip, with a line that tracks the loop. */
.manage { display:grid; grid-template-columns:minmax(260px,1fr) 2.4fr; gap:48px; align-items:start; }
.manage-tabs { display:flex; flex-direction:column; gap:6px; }
.manage-tab { display:grid; padding:16px 18px; border:0; border-radius:16px; background:none; text-align:left; cursor:pointer; color:var(--muted); transition:background-color .45s var(--ease-out), color .3s ease; }
.manage-tab:hover { color:var(--ink); }
.tab-name { font-size:19px; font-weight:550; letter-spacing:-.015em; }
.tab-line-clip { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .55s var(--ease-out), opacity .35s ease; }
.tab-line { min-height:0; overflow:hidden; padding-top:8px; font-size:15px; line-height:1.55; color:var(--secondary); }
.tab-requirement { display:block; margin-top:8px; color:var(--muted); font-size:13px; }
.manage-tab[aria-selected="true"] { background:var(--canvas); color:var(--ink); }
.manage-tab[aria-selected="true"] .tab-line-clip { grid-template-rows:1fr; opacity:1; transition:grid-template-rows .55s var(--ease-out), opacity .5s ease .1s; }
.progress { display:none; height:2px; margin-top:16px; }
.progress i,.tab-progress i { display:block; height:100%; background:var(--ink); transform-origin:left; transform:scaleX(var(--progress,0)); }
.tab-progress { order:3; height:2px; margin-top:10px; border-radius:1px; background:var(--line); overflow:hidden; opacity:0; transition:opacity .4s ease; }
.manage-tab[aria-selected="true"] .tab-progress { opacity:1; }
.manage-tab:not([aria-selected="true"]) .tab-progress i { transform:none; scale:0 1; }
.manage-line { display:none; }

/* Speed comparison. */
.comparison-labels { display:grid; grid-template-columns:1fr 1fr; }
.speed-demo { aspect-ratio:16/5; }
.speed-desktop-media { position:absolute; inset:0; }
.speed-mobile-media { display:none; }
/* When each side's desktop is moving, from the video itself: macOS slides as bars, Debut's switches as ticks. */
.speed-timeline { position:relative; display:grid; gap:10px; margin-top:22px; --label:80px; }
.speed-timeline .track { display:grid; grid-template-columns:calc(var(--label) - 16px) 1fr; gap:16px; align-items:center; font-size:13px; font-weight:500; color:var(--secondary); }
.track-bar { position:relative; height:10px; border-radius:5px; background:var(--canvas); }
.track-bar .span { position:absolute; top:0; bottom:0; border-radius:5px; background:var(--ink); }
.track-bar .tick { width:3px !important; border-radius:2px; }
.speed-timeline .playhead { position:absolute; top:-5px; bottom:-5px; left:calc(var(--label) + (100% - var(--label)) * var(--time,0)); width:1.5px; background:var(--muted); }

/* Customization: the Watch-style viewer. The option groups sit beside the still as pills, the
   open one expanded into a card of choices as wide as their column, so they never cover the
   switcher they change. Closed groups clip their choices to nothing so each pill fits its name.
   The camera zooms each still to its switcher, so a size change reads as the switcher resizing. */
.customizer { display:grid; grid-template-columns:minmax(300px,340px) 1fr; grid-template-rows:1fr auto; overflow:hidden; border-radius:28px; background:var(--canvas); }
.customizer-stage { position:relative; grid-column:2; grid-row:1 / span 2; overflow:hidden; }
/* The camera is the whole display; each still carries only the part the view can show, placed where it sits. */
.customizer-camera { position:relative; aspect-ratio:16/10; transform-origin:0 0; transition:transform 1s var(--ease-in-out); background:center/100% 100% no-repeat; }
.customizer.is-near .customizer-camera { background-image:url(/assets/customize-backdrop-light.webp); }
@media(prefers-color-scheme:dark) { .customizer.is-near .customizer-camera { background-image:url(/assets/customize-backdrop-dark.webp); } }
.customizer-preview,.customizer-outgoing { position:absolute; display:block; pointer-events:none; }
.customizer-preview img { display:block; width:100%; height:100%; }
.customizer-controls { grid-column:1; grid-row:1; align-self:center; display:flex; align-items:center; gap:14px; padding:28px 24px; }
.customizer-steps { display:grid; gap:10px; }
.customizer-steps button { display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%; background:rgba(var(--page-rgb),.78); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); cursor:pointer; transition:background-color .25s ease, scale .25s var(--ease-out); }
.customizer-steps button:hover { background:rgba(var(--page-rgb),.95); }
.customizer-steps button:active { scale:.92; }
.customizer-steps svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.customizer-groups { flex:1; min-width:0; container-type:inline-size; display:grid; gap:10px; justify-items:start; }
.customize-group { transition:padding .5s var(--ease-out); border-radius:26px; background:rgba(var(--page-rgb),.78); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.group-pill { display:flex; align-items:center; gap:12px; padding:13px 20px 13px 14px; border:0; background:none; font-size:15px; font-weight:550; cursor:pointer; transition:font-size .5s var(--ease-out), gap .5s var(--ease-out); }
.pill-plus { position:relative; flex-shrink:0; width:22px; height:22px; border:1.5px solid currentColor; border-radius:50%; transition:width .5s var(--ease-out), opacity .3s ease, rotate .5s var(--ease-out), border-width .5s; }
.pill-plus::before,.pill-plus::after { content:""; position:absolute; left:50%; top:50%; width:10px; height:1.5px; background:currentColor; translate:-50% -50%; }
.pill-plus::after { rotate:90deg; }
.group-choices-clip { display:grid; grid-template-rows:0fr; max-width:0; overflow:hidden; opacity:0; transition:grid-template-rows .55s var(--ease-out), max-width .55s var(--ease-out), opacity .3s ease; }
.group-choices { display:flex; min-height:0; overflow:hidden; flex-wrap:wrap; gap:8px; width:100cqw; padding:0 20px; }
.customize-group.is-open { padding-block:4px 18px; }
.customize-group.is-open .group-pill { cursor:default; font-size:16px; gap:0; }
.customize-group.is-open .pill-plus { width:0; opacity:0; rotate:90deg; border-width:0; }
.customize-group.is-open .group-choices-clip { grid-template-rows:1fr; max-width:100cqw; opacity:1; transition:grid-template-rows .55s var(--ease-out), max-width .55s var(--ease-out), opacity .45s ease .12s; }
.group-choices [role=radio] { padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:var(--page); font-size:14px; font-weight:500; cursor:pointer; transition:background-color .3s ease, border-color .3s ease, color .3s ease, scale .25s var(--ease-out); }
.group-choices [role=radio]:active { scale:.95; }
.group-choices [aria-checked="true"] { border-color:var(--ink); background:var(--ink); color:var(--page); }
.group-requirement { flex-basis:100%; margin-top:4px; font-size:13px; color:var(--muted); }
.customizer-note { grid-column:1; grid-row:2; padding:0 24px 26px 76px; font-size:14px; color:var(--muted); }

/* Get Debut: the download beside the questions. */
.get { display:grid; grid-template-columns:1fr 1.3fr; gap:80px; align-items:start; padding-top:64px; padding-bottom:72px; }
.get-action .download { margin-top:28px; }
.get-action .compatibility { margin-top:12px; }
.faq { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:20px 0; font-size:18px; font-weight:550; letter-spacing:-.015em; cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:22px; font-weight:400; line-height:1; color:var(--muted); transition:rotate .4s var(--ease-out); }
.faq details[open] summary::after { rotate:45deg; }
.faq details::details-content { block-size:0; overflow:hidden; opacity:0; transition:block-size .5s var(--ease-out), opacity .35s ease, content-visibility .5s allow-discrete; }
.faq details[open]::details-content { block-size:auto; opacity:1; }
.faq details p { padding-bottom:22px; max-width:560px; font-size:16px; line-height:1.6; color:var(--secondary); }

.footer { padding-block:30px 42px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 30px; color:var(--muted); font-size:13px; line-height:1.65; }
.footer a { white-space:nowrap; }
.footer div { display:flex; align-items:flex-start; gap:26px; color:var(--secondary); }
.not-found { padding-block:80px; max-width:900px; }
.not-found h1 { margin-block:60px 24px; font-size:clamp(40px,6vw,70px); font-weight:500; letter-spacing:-.04em; }
.not-found p { font-size:18px; line-height:1.6; color:var(--secondary); }
.not-found p a { text-decoration:underline; text-underline-offset:3px; }

@media(max-width:900px) {
  /* Stacked hero: copy on the band, then the display cropped around the switcher. */
  .hero { padding-top:120px; }
  .hero-frame { width:auto; aspect-ratio:auto; display:flex; flex-direction:column-reverse; }
  .hero-copy { position:static; translate:none; width:auto; margin-inline:var(--gutter); gap:20px; }
  .hero h1 { font-size:clamp(34px,7.4vw,56px); max-width:640px; }
  .hero-subline { max-width:520px; font-size:clamp(17px,2.6vw,20px); }
  .hero .download { width:224px; height:58px; font-size:17px; }
  .hero-chapters { gap:14px; margin-top:4px; }
  .hero-media::after { display:none; }
  .hero-chapter { font-size:13px; }
  .hero-media { position:relative; inset:auto; height:62vw; margin-top:12px; overflow:hidden; container-type:inline-size; }
  .hero-demo { left:-35cqw; top:-31cqw; width:170cqw; }
  .hero-media::before { content:""; position:absolute; inset:0 0 auto; height:14%; z-index:1; pointer-events:none; background:linear-gradient(var(--hero-wall), rgba(var(--hero-wall-rgb),0)); }
  .hero::after { height:14%; }
  .feature-copy,.get { grid-template-columns:1fr; gap:22px; }
  .manage { grid-template-columns:1fr; gap:18px; }
  .manage-tabs { flex-direction:row; overflow-x:auto; gap:4px; scrollbar-width:none; }
  .manage-tab { flex-shrink:0; padding:10px 16px; border-radius:999px; }
  .tab-name { font-size:15px; }
  .tab-line-clip { display:none; }
  .tab-progress { display:none; }
  .progress { display:block; }
  .manage-line { display:block; margin-top:16px; font-size:16px; line-height:1.55; color:var(--secondary); }
  .customizer { display:flex; flex-direction:column; }
  .customizer-controls { align-self:stretch; padding:16px; align-items:flex-start; }
  .customizer-steps { display:none; }
  .customizer-groups { width:100%; }
  .customize-group { width:100%; }
  .customizer-note { padding:0 16px 18px; text-align:center; }
}
@media(max-width:600px) {
  :root { --gutter:24px; }
  .header-inner { height:78px; }
  .header nav { gap:14px; }
  .wordmark { gap:8px; font-size:22px; }
  .wordmark img { width:30px; height:30px; border-radius:8px; }
  .github { font-size:12px; }
  .header .header-download { height:36px; padding-inline:calc(var(--growth,0) * 14px); margin-left:calc((var(--growth,0) - 1) * 14px); font-size:13px; }
  .header .header-download svg { display:none; }
  .hero { padding-top:108px; }
  h2 { font-size:34px; }
  .feature { padding-top:36px; padding-bottom:40px; }
  .feature-description { font-size:17px; padding-top:0; }
  .demo { border-radius:11px; }
  .switcher-choices button { padding:6px clamp(8px,2.8vw,14px); font-size:clamp(12px,3.4vw,14px); }
  .comparison-labels { display:block; height:22px; margin-bottom:0; font-size:12px; }
  .comparison-labels span:last-child { display:none; }
  .speed-demo { aspect-ratio:auto; overflow:visible; border-radius:0; background:transparent; }
  .speed-desktop-media { display:none; }
  .speed-mobile-media { display:block; }
  .speed-panel { position:relative; aspect-ratio:8/5; overflow:hidden; border-radius:11px; background:var(--canvas); }
  .speed-panel picture { position:absolute; inset:0; }
  .speed-timeline { --label:58px; margin-top:16px; }
  .speed-timeline .track { font-size:12px; }
  .speed-mobile-label { display:flex; align-items:center; justify-content:center; height:calc((100vw - 48px)/12); font-size:12px; font-weight:500; }
  .customizer { border-radius:18px; }
  .get-action .download { margin-inline:auto; }
  .get-action .compatibility { text-align:center; }
  .get-action h2 { text-align:center; }
  .footer { font-size:12px; gap:18px; }
  .footer div { gap:16px; }
}
@media(max-width:360px) { .wordmark span { display:none; } .header-download span { font-size:12px; } .switcher-choices button { padding-inline:7px; font-size:11.5px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }
@media(prefers-reduced-transparency:reduce) { .edge-blur i { display:none; } .edge-blur { background:linear-gradient(to bottom,rgba(var(--blur-rgb),1) 55%,rgba(var(--blur-rgb),0)); } }
@supports not (backdrop-filter:blur(1px)) { .edge-blur { background:linear-gradient(to bottom,rgba(var(--blur-rgb),1) 55%,rgba(var(--blur-rgb),0)); } }