@font-face{font-family:'JetBrains Mono';src:url('assets/JetBrainsMono-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('assets/JetBrainsMono-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('assets/IBMPlexSans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('assets/IBMPlexSans-SemiBold.ttf') format('truetype');font-weight:500 700;font-display:swap}

/* Four token sets, one per theme and appearance. Everything below reads these and
   nothing else, so Code stays flat and monospace while macOS becomes Liquid Glass
   over a wallpaper veil -- the same recipe as the app's Theme.swift. */
:root{
 --bg:#0a0b0d;--surface:#16181d;--tile:#1e2127;--line:#2a2d35;--ink:#e6e8ec;--ink2:#a7adb8;
 --green:#4ade80;--green-text:#4ade80;--green-tint:rgba(74,222,128,.12);--green-ring:rgba(74,222,128,.4);
 --btn:#4ade80;--btn-ink:#04140a;--btn-glow:none;--btn-face:var(--tile);--btn-hair:var(--line);--btn-hover:#2a2d35;
 --font:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;--font-h:'JetBrains Mono',monospace;
 --r:6px;--r-lg:8px;--pill:5px;--kbd-r:4px;
 --nav-bg:rgba(10,11,13,.9);--glass:none;--veil-bg:none;
 --shadow:inset 0 0 0 1px var(--line);--tile-bg:var(--surface);--tile-shadow:inset 0 0 0 1px var(--line);--tile-hover:#22252c;
 --seg-off-bg:var(--tile);--seg-off-ring:var(--line);--seg-on-bg:var(--green-tint);--seg-on-ink:var(--green-text);--seg-on-ring:var(--green-text);
 --seg-gap:6px;--seg-pad:0px;--seg-track:transparent;--seg-hair:transparent;--seg-hover:#262931;
 --win:#282b33;--win-card:#31353d;--agent:#31353d;
 --win-bar-bg:linear-gradient(#3f434bf5,#32363eea);--win-bar-ink:#c0c5cf;--addr-bg:#ffffff12;--addr-ink:#e0e3e9;
 --menubar-bg:rgba(18,27,33,.28);--menubar-ink:rgba(255,255,255,.95);
 --edge-fill:#141a21;--edge-hair:#343d48;--edge-row:rgba(255,255,255,.14);--edge-ink:#eef2f7;--edge-green:#4ade80;
 --shot-shadow:drop-shadow(0 14px 30px rgba(0,0,0,.42));
 --desk:radial-gradient(ellipse 105% 115% at 108% -18%,transparent 39%,#66e3b34d 40%,#1f947954 43%,transparent 53%),radial-gradient(ellipse 90% 105% at -9% 115%,#113f59 20%,#1b6b6959 43%,transparent 64%),radial-gradient(ellipse 70% 90% at 86% 102%,#74c59180,transparent 65%),linear-gradient(133deg,#061e24 4%,#124b48 43%,#276548 70%,#0d2632);
 --look-desk:linear-gradient(157deg,#1c5cab 0%,#2e7cc4 24%,#4f9fc9 44%,#7ec1c0 64%,#a6d1b2 82%,#dcd3a4 100%);
 color-scheme:dark}
:root[data-appearance=light]{
 --bg:#f5f6f8;--surface:#fff;--tile:#eceef2;--line:#cbd0d8;--ink:#20242c;--ink2:#555e6b;
 --green:#25b95c;--green-text:#14743a;--green-tint:rgba(21,128,61,.09);--green-ring:rgba(21,128,61,.4);
 --btn:#32c96b;--btn-ink:#062914;--btn-hover:#dfe3ea;--tile-hover:#e3e6ec;--seg-hover:#e3e6ec;
 --nav-bg:rgba(245,246,248,.94);
 --win:#fff;--win-card:#f1f3f6;--agent:rgba(255,255,255,.94);
 --win-bar-bg:linear-gradient(#fbfcfde8,#e9edf1e8);--win-bar-ink:#777d85;--addr-bg:#ffffffc2;--addr-ink:#4c525b;
 --edge-fill:#fbfbfd;--edge-hair:rgba(0,0,0,.08);--edge-row:rgba(0,0,0,.08);--edge-ink:#1b1d22;--edge-green:#16a34a;
 --shot-shadow:drop-shadow(0 14px 30px rgba(10,20,40,.16));
 color-scheme:light}
:root[data-profile=macos]{
 --bg:#e8eef5;--surface:rgba(255,255,255,.40);--tile:rgba(255,255,255,.58);--line:rgba(20,30,45,.10);
 --ink:#1d1d1f;--ink2:rgba(29,29,31,.72);
 --green:#2fb750;--green-text:#117a38;--green-tint:rgba(52,199,89,.16);--green-ring:rgba(47,183,80,.7);
 --btn:linear-gradient(180deg,#4ad86e,#2ebc52);--btn-ink:#fff;
 --btn-glow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 0 0 .5px rgba(9,84,38,.4),0 2px 6px rgba(20,120,60,.25);
 --btn-face:rgba(255,255,255,.56);--btn-hair:rgba(20,30,45,.10);--btn-hover:rgba(255,255,255,.86);
 --font:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;--font-h:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
 --r:14px;--r-lg:26px;--pill:999px;--kbd-r:8px;
 --nav-bg:rgba(240,246,252,.52);--glass:blur(28px) saturate(1.7);
 --shadow:inset 0 1px 0 rgba(255,255,255,.78),inset 0 0 0 1px rgba(255,255,255,.45),0 14px 36px rgba(24,40,72,.12);
 --tile-bg:var(--tile);--tile-hover:rgba(255,255,255,.84);
 --tile-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.35),0 6px 16px rgba(24,40,72,.08);
 --seg-off-bg:transparent;--seg-off-ring:transparent;--seg-on-bg:var(--btn);--seg-on-ink:#fff;--seg-on-ring:rgba(9,84,38,.35);
 --seg-gap:0px;--seg-pad:3px;--seg-track:rgba(255,255,255,.38);--seg-hair:rgba(20,30,45,.08);--seg-hover:rgba(255,255,255,.55);
 --veil:rgba(236,241,247,.74);
 --desk:radial-gradient(ellipse 110% 135% at 112% -26%,transparent 39%,#d3f6ffb3 39.8%,#69cff08c 43%,#2471c426 49%,transparent 55%),radial-gradient(ellipse 100% 110% at -15% 112%,#112d91 19%,#487fdf 34%,#9edbef99 41%,transparent 54%),radial-gradient(ellipse 72% 83% at 96% 105%,#fbe5b3 3%,#c7eddfb3 30%,transparent 66%),linear-gradient(137deg,#102c75 2%,#3a79c6 34%,#80cce0 65%,#aec6e6 88%,#e0cfe6);
 --veil-bg:linear-gradient(var(--veil),var(--veil)),var(--desk);
 --win:#fff;--win-card:#f6f7f9;--agent:rgba(255,255,255,.66);
 --win-bar-bg:linear-gradient(#fbfcfde8,#e9edf1e8);--win-bar-ink:#777d85;--addr-bg:rgba(255,255,255,.76);--addr-ink:#4c525b;
 --menubar-bg:rgba(228,240,245,.53);--menubar-ink:#172b40;
 --edge-fill:rgba(255,255,255,.72);--edge-hair:rgba(255,255,255,.6);--edge-row:rgba(0,0,0,.08);--edge-ink:#1b1d22;--edge-green:#16a34a;
 --shot-shadow:drop-shadow(0 14px 30px rgba(10,20,40,.16));
 color-scheme:light}
:root[data-profile=macos][data-appearance=dark]{
 --bg:#0d131a;--surface:rgba(30,34,42,.42);--tile:rgba(255,255,255,.11);--line:rgba(255,255,255,.12);
 --ink:#f0f3f7;--ink2:rgba(240,243,247,.72);
 --green:#34c759;--green-text:#7be8a4;--green-tint:rgba(52,199,89,.16);--green-ring:rgba(52,199,89,.7);
 --nav-bg:rgba(14,20,28,.55);
 --shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.10),0 14px 36px rgba(0,0,0,.38);
 --tile-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.08),0 6px 16px rgba(0,0,0,.25);
 --tile-hover:rgba(255,255,255,.18);
 --btn-face:rgba(255,255,255,.11);--btn-hair:rgba(255,255,255,.14);--btn-hover:rgba(255,255,255,.18);
 --seg-track:rgba(255,255,255,.08);--seg-hair:rgba(255,255,255,.10);--seg-hover:rgba(255,255,255,.14);
 --veil:rgba(10,15,22,.70);
 --win:#252c36;--win-card:#303b47;--agent:rgba(30,36,44,.62);
 --win-bar-bg:linear-gradient(#3f434bf5,#32363eea);--win-bar-ink:#c0c5cf;--addr-bg:#ffffff12;--addr-ink:#e0e3e9;
 --menubar-bg:rgba(18,27,33,.4);--menubar-ink:rgba(255,255,255,.95);
 --edge-fill:rgba(255,255,255,.14);--edge-hair:rgba(255,255,255,.22);--edge-row:rgba(255,255,255,.14);--edge-ink:#eef2f7;--edge-green:#4ade80;
 --shot-shadow:drop-shadow(0 14px 30px rgba(0,0,0,.42));
 color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height,84px) + 16px)}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.6 var(--font);-webkit-font-smoothing:antialiased;min-height:100vh}
body:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--veil-bg);background-attachment:fixed}
a{color:inherit;text-decoration:none}
a:hover{color:var(--green-text)}
button{font-family:inherit}
img{max-width:100%}
.wrap{max-width:1168px;margin:auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:40;padding:10px 16px;background:var(--surface);color:var(--ink);border-radius:var(--r)}
.skip:focus{left:16px;top:10px}
:focus-visible{outline:2px solid var(--green-text);outline-offset:2px}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

/* Header: brand, section links, appearance and theme pickers, price. */
header{position:sticky;top:0;z-index:20;background:var(--nav-bg);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);border-bottom:1px solid var(--line)}
.navigation{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;min-height:60px;padding-top:10px;padding-bottom:10px}
.brand{display:inline-flex;align-items:center;gap:10px;font:700 15px var(--font-h);letter-spacing:.02em}
.brand img{display:block;flex:none}
header nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-right:auto;margin-left:8px}
header nav a{display:flex;align-items:center;min-height:32px;font-size:13px;color:var(--ink2)}
.price-pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:var(--pill);background:var(--btn);color:var(--btn-ink);box-shadow:var(--btn-glow);font-size:12.5px;font-weight:700;white-space:nowrap}
.price-pill:hover{color:var(--btn-ink);filter:brightness(1.06)}
.price-pill s{opacity:.7;font-weight:400}

/* One segmented control, four sizes. The selected segment is a green chip under Code
   and the accent capsule under macOS, exactly as the app draws its own. */
.segmented{display:inline-flex;gap:var(--seg-gap);padding:var(--seg-pad);border-radius:calc(var(--pill) + 3px);background:var(--seg-track);box-shadow:inset 0 0 0 1px var(--seg-hair)}
.segmented button{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1 1 auto;height:32px;min-height:32px;min-width:56px;padding:0 14px;border:0;cursor:pointer;font:500 13px/1 var(--font);border-radius:var(--pill);white-space:nowrap;background:var(--seg-off-bg);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--seg-off-ring);transition:background .18s,color .18s}
.segmented button svg{flex:none}
.segmented button[aria-pressed=true]{font-weight:700;background:var(--seg-on-bg);color:var(--seg-on-ink);box-shadow:inset 0 0 0 1px var(--seg-on-ring)}
.segmented.icons button{flex:none;min-width:32px;padding:0}
.segmented.large button{height:40px;min-height:40px;min-width:102px}
.segmented.large.appearance button{min-width:90px}
.segmented.medium button{height:38px;min-height:38px;min-width:80px}
@media(hover:hover){.segmented button:hover{background:var(--seg-hover);color:var(--ink)}.segmented button[aria-pressed=true]:hover{background:var(--seg-on-bg);color:var(--seg-on-ink)}}

/* Buttons. The primary is the accent; the ghost is the page's own material. */
.primary{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.85rem 1.6rem;border:0;border-radius:var(--pill);background:var(--btn);color:var(--btn-ink);box-shadow:var(--btn-glow);font:600 16px/1.4 var(--font);cursor:pointer}
.primary:hover{filter:brightness(1.06)}
.ghost{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:.85rem 1.4rem;border:0;border-radius:var(--pill);background:var(--btn-face);box-shadow:inset 0 0 0 1px var(--btn-hair);color:var(--ink);font:600 15px/1.4 var(--font);cursor:pointer}
.ghost:hover{background:var(--btn-hover);color:var(--ink)}
kbd{display:inline-flex;align-items:center;font:400 13px/1.5 var(--font-h);padding:2px 7px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--btn-hair);border-radius:var(--kbd-r)}
.notice:empty{display:none}
.notice{margin:10px 0 0;font-size:14px;color:var(--green-text)}

/* Hero. */
.hero{padding:72px 0 24px;display:flex;flex-direction:column;align-items:center;text-align:center}
.eyebrow{margin:0;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--pill);background:var(--tile-bg);box-shadow:var(--tile-shadow);font:400 13px var(--font-h);color:var(--green-text)}
.hero .eyebrow{margin-bottom:18px}
.hero h1{margin:0;max-width:900px;font:700 clamp(2.5rem,6vw,4.5rem)/1.04 var(--font-h);letter-spacing:-.04em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--green-text)}
.hero .intro{margin:22px 0 0;max-width:640px;color:var(--ink2);font-size:1.125rem;line-height:1.55;text-wrap:pretty}
.hero .intro kbd{font-size:14px;line-height:1.3}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:30px}
.fine{margin:14px 0 0;font-size:14px;color:var(--ink2)}
.chip-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:22px 0 0}
.chip-label{font-size:12px;color:var(--ink2);margin-right:4px}
.chip{font:500 12px/1 var(--font);padding:6px 9px;border-radius:var(--pill);background:var(--tile-bg);box-shadow:var(--tile-shadow)}

/* The 4-second loop. One 1080x600 desktop, scaled to whatever width it is given, so
   every element inside it keeps its real proportions instead of being re-laid out. */
.demo{padding:24px 0 48px}
.desk{position:relative;aspect-ratio:1080/600;overflow:hidden;border-radius:16px;background:var(--desk);isolation:isolate;box-shadow:0 30px 70px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.12);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif}
.desktop-canvas{position:absolute;left:0;top:0;width:1080px;height:600px;transform-origin:top left;transform:scale(var(--desktop-scale,1))}
.menubar{position:absolute;left:0;right:0;top:0;z-index:6;height:26px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;background:var(--menubar-bg);backdrop-filter:blur(30px) saturate(1.15);-webkit-backdrop-filter:blur(30px) saturate(1.15);color:var(--menubar-ink);font-size:11px;line-height:1}
.menu-app,.menu-status{display:flex;align-items:center;white-space:nowrap}
.menu-app{gap:14px}
.menu-app b{font-weight:700}
.menu-status{gap:11px}
.menu-status .clock{font-size:10.5px;font-weight:500;font-variant-numeric:tabular-nums}
.apple-mark{display:inline-flex;align-items:center}
.apple-mark svg{display:block}
.demo-caption{position:absolute;left:40px;top:42px;z-index:8;margin:0;padding:6px 14px;background:#07120ee6;border:1px solid #ffffff30;color:#fff;border-radius:30px;font:400 14px/1.5 var(--font-h);animation:rise .25s}
.browser-window{position:absolute;left:40px;top:90px;width:560px;border-radius:12px;overflow:hidden;background:var(--win);box-shadow:0 30px 65px #05112266,0 8px 18px #05112233,0 0 0 1px #0005,inset 0 1px 0 #ffffff3b}
.window-bar{display:flex;align-items:center;gap:14px;min-height:48px;padding:0 14px;background:var(--win-bar-bg);border-bottom:1px solid #0003;color:var(--win-bar-ink);font-size:12px}
.traffic-lights{display:flex;align-items:center;gap:8px;flex:none}
.traffic-lights>span{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 .5px #0003}
.traffic-lights>span:nth-child(1){background:#ff5f57}
.traffic-lights>span:nth-child(2){background:#febc2e}
.traffic-lights>span:nth-child(3){background:#28c840}
.browser-tools,.browser-actions{display:flex;align-items:center;gap:13px;flex:none}
.address-field{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;min-height:27px;padding:5px 24px;background:var(--addr-bg);border-radius:7px;color:var(--addr-ink);white-space:nowrap}
.browser-content{padding:20px 24px 26px;font-family:var(--font);color:var(--ink)}
.mini-brand{font:700 14px var(--font-h);color:var(--ink2)}
.browser-content h3{margin:16px 0 0;font:700 21px/1.2 var(--font-h)}
.browser-content>p{margin:5px 0 18px;font-size:14px;color:var(--ink2)}
.capture-target{position:relative;max-width:270px;padding:18px;background:var(--win-card);box-shadow:inset 0 0 0 1px var(--line);border-radius:6px}
.capture-target strong{font:700 32px/1.3 var(--font-h)}
.capture-target strong small{font:400 14px var(--font)}
.capture-target p{font-size:14px;margin:12px 0;color:var(--ink2)}
.mock-button{display:inline-block;background:#4ade80;color:#04140a;padding:4px 12px;border-radius:4px;font-size:14px;font-weight:700}
.marquee{position:absolute;left:-5px;top:-5px;width:calc(100% + 10px);height:calc(100% + 10px);border:2px solid #4ade80;border-radius:8px;box-shadow:0 0 0 999px #0005;pointer-events:none;opacity:0}
[data-phase="1"] .marquee{opacity:1;animation:pop .2s ease-out}

/* The edge handle, drawn to the native EdgeTrigger metrics. */
.demo-shelf{position:absolute;right:-4px;top:50%;transform:translateY(-50%);z-index:9;display:flex;align-items:center;gap:7px;padding:7px 11px 7px 7px;min-height:86px;border-radius:9px 0 0 9px;background:var(--edge-fill);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:inset 1px 1px 0 var(--edge-hair),inset 0 -1px 0 var(--edge-hair),-4px 0 12px #0004}
.edge-rows{display:flex;flex-direction:column;gap:4px;width:13px;flex:none}
.edge-rows>span{display:flex;width:13px;height:8px;border-radius:2px 0 0 2px;background:var(--edge-row)}
.edge-rows>span>i{display:block;width:4px;height:8px;border-radius:2px;background:var(--edge-ink)}
.edge-rows>span:first-child>i{background:var(--edge-green)}
.caught{flex:none;width:0;height:72px;opacity:0;overflow:hidden;transition:width .26s cubic-bezier(.32,.72,0,1),opacity .18s}
[data-phase="2"] .caught{width:88px;opacity:1}
.capture-preview{position:relative;width:88px;height:72px;overflow:hidden;border-radius:4px;background:var(--win-card);box-shadow:inset 0 0 0 .5px var(--edge-hair)}
.capture-mini{width:270px;height:220px;padding:20px;transform:scale(.326);transform-origin:left top;color:var(--ink);background:var(--win-card);font:16px/1.6 var(--font)}
.capture-mini strong{display:block;font:700 32px/1.3 var(--font-h)}
.capture-mini small{font-size:14px}
.capture-mini p{margin:16px 0;color:var(--ink2)}
.capture-mini span{display:inline-block;padding:4px 12px;border-radius:4px;background:#4ade80;color:#04140a;font-size:14px;font-weight:700}
.copy-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffff26;color:#fff;opacity:0;transition:opacity .2s}
[data-phase="2"] .copy-check{opacity:1;transition-delay:.4s}
.copy-check svg{box-sizing:content-box;padding:5px;background:var(--edge-green);border-radius:50%;box-shadow:0 1px 4px #0003}

/* The agent composer. The attachment only takes space once it has been pasted. */
.composer{position:absolute;left:540px;right:70px;bottom:70px;z-index:5;padding:18px;border-radius:12px;background:var(--agent);box-shadow:0 22px 50px #0005,inset 0 0 0 1px #ffffff30;backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);font-family:var(--font);color:var(--ink)}
.composer-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--ink2)}
.composer-model{font:400 12px var(--font-h)}
.attachment{display:flex;gap:8px;align-items:center;max-height:0;margin-top:0;padding:0 8px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--green-ring);border-radius:6px;font-size:14px;opacity:0;overflow:hidden;transition:max-height .24s,margin-top .24s,padding .24s,opacity .24s}
[data-phase="3"] .attachment{max-height:44px;margin-top:14px;padding:6px 8px;opacity:1;animation:rise .24s ease-out}
.attachment-thumb{background:#f6f7f9;color:#17181c;padding:1px 8px;border-bottom:5px solid #4ade80;font-weight:700}
.attachment .check{color:var(--green-text)}

/* A pointer, a camera and a keystroke badge, so each step reads without the rail below.
   The scene lives in .camera, which zooms toward the shelf as the capture lands and toward the
   prompt for the paste. Every beat is a CSS animation keyed to data-phase, so it restarts with
   the phase and never drifts from the JS timer; its length matches `durations` in app.js.
   Reduce Motion gets none of it: the loop is parked on its last frame there. */
.camera{position:absolute;inset:0;transform-origin:1080px 300px}
.demo-cursor{position:absolute;left:0;top:0;z-index:20;pointer-events:none;translate:430px 200px}
.demo-cursor svg{position:absolute;filter:drop-shadow(0 1px 1.5px #0006)}
.demo-cursor .arrow{left:-2px;top:-1px}
.demo-cursor .cross{left:-12.5px;top:-12.5px;opacity:0}
.demo-keys{position:absolute;left:50%;top:40px;z-index:9;margin:0;translate:-50% 0;pointer-events:none}
.demo-keys>span{display:none;gap:6px;padding:8px 10px;border-radius:14px;background:#07120ee6;box-shadow:0 10px 30px #0005,inset 0 0 0 1px #ffffff26}
.demo-keys kbd{min-width:38px;padding:6px 10px;border-radius:8px;background:#ffffff1f;box-shadow:inset 0 -2px 0 #0006,inset 0 0 0 1px #ffffff30;color:#fff;font:600 22px/1.2 -apple-system,BlinkMacSystemFont,sans-serif;text-align:center}
@media (prefers-reduced-motion:no-preference){
.camera{will-change:transform}
[data-phase="0"] .demo-cursor{animation:cur-rest .9s both}
[data-phase="1"] .demo-cursor{animation:cur-drag 1.6s both}
[data-phase="1"] .demo-cursor .arrow{animation:to-cross 1.6s both}
[data-phase="1"] .demo-cursor .cross{animation:from-cross 1.6s both}
[data-phase="1"] .marquee{animation:grow 1.6s both}
[data-phase="1"] .keys-capture{display:inline-flex;animation:badge 1.6s both}
[data-phase="2"] .demo-cursor{animation:cur-hide 2s both}
[data-phase="2"] .camera{transform-origin:1080px 300px;animation:zoom-shelf 2s both}
[data-phase="3"] .camera{transform-origin:800px 500px;animation:zoom-prompt 2.6s both}
[data-phase="3"] .demo-cursor{animation:cur-paste 2.6s both}
[data-phase="3"] .keys-paste{display:inline-flex;animation:badge-late 2.6s both}
[data-phase="3"] .attachment{transition-delay:1s;animation:rise .24s ease-out 1s backwards}
}
@keyframes cur-rest{from,to{translate:430px 200px;opacity:1}}
@keyframes cur-drag{0%{translate:430px 200px}35%{translate:60px 266px;animation-timing-function:cubic-bezier(.4,0,.2,1)}85%,100%{translate:338px 451px}}
@keyframes to-cross{0%,33%{opacity:1}36%,100%{opacity:0}}
@keyframes from-cross{0%,33%{opacity:0}36%,100%{opacity:1}}
@keyframes grow{0%,35%{width:0;height:0;opacity:0}37%{opacity:1;width:0;height:0}85%,100%{width:calc(100% + 10px);height:calc(100% + 10px);opacity:1}}
@keyframes badge{0%{opacity:0;scale:.9}10%,80%{opacity:1;scale:1}100%{opacity:0}}
@keyframes badge-late{0%,34%{opacity:0;scale:.9}40%,70%{opacity:1;scale:1}78%,100%{opacity:0}}
@keyframes cur-hide{0%{translate:338px 451px;opacity:1}12%,100%{translate:338px 451px;opacity:0}}
@keyframes zoom-shelf{0%{scale:1}28%,72%{scale:1.7}100%{scale:1}}
@keyframes zoom-prompt{0%{scale:1}25%,80%{scale:1.3}100%{scale:1}}
@keyframes cur-paste{0%{translate:640px 300px;opacity:0}8%{opacity:1}28%{translate:770px 497px;scale:1}32%{scale:.8}36%{scale:1}100%{translate:770px 497px;opacity:1}}
.prompt{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;font-size:17px;line-height:1.4}
.send{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border-radius:6px;background:var(--btn);color:var(--btn-ink)}

/* The three steps, lit in time with the loop, and the playback controls. */
.step-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px;list-style:none;padding:0;margin:20px 0 0}
.step-rail li{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--tile-bg);box-shadow:var(--tile-shadow);border-radius:var(--r)}
.step-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:var(--green-tint);box-shadow:inset 0 0 0 1px var(--green-ring);transition:opacity .2s}
.step-rail li.active .step-glow{opacity:1}
.step-rail kbd{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:38px;padding:0 10px;font:400 15px var(--font-h);white-space:nowrap}
.step-text{display:flex;flex-direction:column;line-height:1.35}
.step-text b{font-size:15px}
.step-text span{font-size:13px;color:var(--ink2)}
.playback{display:flex;align-items:center;justify-content:flex-end;gap:8px;background:none!important;box-shadow:none!important;padding:0!important}
.playback button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:.65rem 1rem;border:0;border-radius:var(--pill);background:var(--btn-face);box-shadow:inset 0 0 0 1px var(--btn-hair);color:var(--ink);font:600 14px/1.4 var(--font);cursor:pointer}
.playback button:hover{background:var(--btn-hover)}
.playback button[disabled]{opacity:.5;cursor:default}

/* Sections, headings and cards. */
.section{padding:48px 0}
.section-heading{max-width:720px;margin-bottom:28px}
.section-heading h2{margin:0;font:700 clamp(1.625rem,3vw,2.375rem)/1.15 var(--font-h);letter-spacing:-.03em;text-wrap:balance}
.section-heading p{margin:12px 0 0;color:var(--ink2);font-size:1.0625rem;text-wrap:pretty}
.section-note{margin:18px 0 0;font-size:14px;color:var(--ink2)}
.panel{padding:40px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px}
.card{padding:26px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass)}
.card.is-shelf{box-shadow:var(--shadow),0 0 0 1.5px var(--green-ring)}
.card-eyebrow{display:block;margin-bottom:16px;font:400 13px var(--font-h);color:var(--ink2)}
.card.is-shelf .card-eyebrow{color:var(--green-text)}
.card h3{margin:0 0 14px;font:700 18px/1.25 var(--font-h)}
.card p{margin:0;color:var(--ink2);font-size:15px}
.card-keys{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px!important;align-items:center}
.card-keys kbd{padding:4px 8px}
.card-keys span{font-size:13px;color:var(--ink2)}

/* A split panel: copy on one side, a real screenshot on the other. */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:40px 64px;align-items:center}
.split.top{align-items:start}
.split.top .split-copy{padding-top:8px}
#layouts .split{gap:40px 70px}
.split-copy{min-width:0}
.split-copy .eyebrow{display:block;margin:0 0 14px;padding:0;background:none;box-shadow:none;font:400 14px var(--font-h);color:var(--green-text)}
.split-copy h2{margin:0 0 18px;font:700 clamp(1.625rem,3vw,2.25rem)/1.15 var(--font-h);letter-spacing:-.03em;text-wrap:balance}
.split-copy>p{margin:0 0 16px;color:var(--ink2)}
.split-copy>p:last-of-type{margin-bottom:0}
.split-copy kbd{padding:1px 6px;line-height:1.3}
.key-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:10px;margin-top:26px}
.key-tiles>div{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--tile-bg);box-shadow:var(--tile-shadow);border-radius:var(--r);font-size:14px}
.key-tiles kbd{padding:4px 8px}
.details{margin:24px 0 0;display:grid;gap:18px}
.details.two-up{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:22px 28px;margin-top:0}
.details dt{font:700 15px var(--font-h);margin-bottom:4px}
.details dd{margin:0;color:var(--ink2);font-size:15px;line-height:1.55}
.details.two-up dt{margin-bottom:6px}

/* Real screenshots. Each export carries its own corner shape in its alpha channel --
   rounded on the two left corners, square on the right, because the shelf docks to the
   screen edge -- so nothing sits behind them and the shadow follows the pixels. */
.shot{margin:0;min-width:0;justify-self:center;width:100%;max-width:340px}
.settings-shot{max-width:360px}
.shot>a{display:block;position:relative;overflow:hidden;cursor:zoom-in}
.shot img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover;object-position:top;filter:var(--shot-shadow);will-change:transform}
#layouts .shot img{max-height:600px}
.settings-shot img{max-height:720px}
.shot figcaption{margin-top:14px;font-size:13px;color:var(--ink2)}
#layouts .shot figcaption{margin-top:16px;font-size:14px}
.shot .segmented{display:flex;margin-bottom:16px}
.key-strip{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin-bottom:18px}
.key-strip kbd{display:grid;place-items:center;aspect-ratio:1;padding:0;font:400 15px var(--font-h)}
.key-strip kbd.filled{font-weight:700;background:var(--btn);color:var(--btn-ink);box-shadow:var(--btn-glow)}
/* A stack longer than its frame is cropped, not shrunk. Fade the cut edge on exactly
   the frames that overflow, so it reads as "the list continues". */
.shot>a.is-cropped img{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 88px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 88px),transparent)}
.native-image-enter{animation:rise .24s ease-out}

/* Two looks: a crop of a real desktop, wallpaper and menu bar included, with the shelf
   docked hard against the right screen edge the way it actually sits. */
.looks-heading{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px 24px;margin-bottom:24px}
.looks-heading .section-heading{margin:0}
.looks-heading .section-heading h2{font-size:clamp(1.625rem,3vw,2.25rem)}
.looks-heading .section-heading p{font-size:1rem}
.looks-controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.looks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px}
.look{margin:0;min-width:0;display:flex;flex-direction:column;padding:20px 20px 0;overflow:hidden;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass)}
:root[data-profile=code] .look[data-look=code],:root[data-profile=macos] .look[data-look=macos]{box-shadow:var(--shadow),0 0 0 1.5px var(--green-ring)}
.look figcaption{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 20px}
.look figcaption h3{margin:0 0 6px;font:700 20px/1.2 var(--font-h)}
.look figcaption p{margin:0;color:var(--ink2);font-size:14px;line-height:1.5}
.look-select{position:static;display:inline-flex;align-items:center;gap:6px;flex-shrink:0;min-height:36px;padding:7px 12px;border:0;border-radius:999px;cursor:pointer;font:600 13px var(--font);background:var(--btn-face);color:var(--ink);box-shadow:inset 0 0 0 1px var(--btn-hair);white-space:nowrap}
.look-select[aria-pressed=true]{font-weight:700;background:var(--green-tint);color:var(--green-text);box-shadow:inset 0 0 0 1px var(--green-ring)}
.look-select:after{content:'';position:absolute;inset:0;z-index:4;cursor:pointer;border-radius:var(--r-lg)}
.look-select[aria-pressed=false] .when-selected,.look-select[aria-pressed=false] .look-check,.look-select[aria-pressed=true] .when-unselected{display:none}
.look-select:focus-visible{outline:none}
.look-select:focus-visible:after{outline:3px solid var(--green-text);outline-offset:-5px}
/* The whole card is the target, so hovering it answers on both the pill and the card
   ring. The already-selected card stays put: there is nothing to switch to. */
@media(hover:hover){
 .look-select[aria-pressed=false]:hover{background:var(--btn-hover)}
 .look:has(.look-select[aria-pressed=false]:hover){box-shadow:var(--shadow),0 0 0 1.5px var(--green-ring)}
}
.look{position:relative}
.look-stage{position:relative;flex:none;height:390px;display:flex;justify-content:flex-end;align-items:flex-start;padding:48px 0 0 24px;overflow:hidden;border-radius:10px 10px 0 0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);background:var(--look-desk)}
.look-menubar{position:absolute;left:0;right:0;top:0;height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:rgba(240,246,252,.42);color:#132434;font:400 11px/1 -apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;white-space:nowrap;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.look-menubar .menu-app{display:flex;gap:12px;align-items:center}
.look-stage img{display:block;width:290px;max-width:82%;height:auto;filter:drop-shadow(-8px 8px 18px rgba(5,18,38,.24));will-change:transform}
.mac-stage img{width:252px;max-width:72%}
.look-stage:before{content:'';position:absolute;left:0;right:0;bottom:0;height:48px;z-index:1;pointer-events:none;background:linear-gradient(transparent,rgba(0,0,0,.18))}

/* Pricing: one price, $15, no launch discount (27 Sep). */
.price-card{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:40px;align-items:center}
.pricing-section{padding-bottom:96px}
.release-banner{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:4px 10px 4px 4px;border-radius:var(--pill);box-shadow:inset 0 0 0 1px var(--green-ring);font-size:13px;color:var(--ink2)}
.release-banner b{padding:3px 9px;border-radius:var(--pill);background:var(--btn);color:var(--btn-ink);font-weight:700}
.release-banner span{white-space:nowrap}
.release-banner s{color:var(--ink2)}
.price-card h2{margin:0;font:700 22px/1.2 var(--font-h);letter-spacing:-.02em}
.price-amount{margin:16px 0 20px;font:700 clamp(3.5rem,7vw,5.375rem)/1.1 var(--font-h);letter-spacing:-.04em;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.price-amount s{color:var(--ink2);font-size:.5em;letter-spacing:-.02em;font-weight:400}
.price-amount .once{font:400 16px var(--font);letter-spacing:0;color:var(--ink2)}
.purchase{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.purchase .primary{min-height:48px;padding:.8rem 1.5rem;font-size:15px}
.purchase .muted{font-size:14px;color:var(--ink2)}
.included{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.included li{display:flex;gap:12px;align-items:baseline}
.included li:before{content:'✓';color:var(--green-text);font-weight:700}

footer{border-top:1px solid var(--line);padding:24px 0;color:var(--ink2);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer .brand{color:var(--ink)}
footer .footer-links{display:flex;gap:18px}
footer .footer-links a{color:inherit;text-decoration:none}
footer .footer-links a:hover{color:var(--ink);text-decoration:underline}
/* /privacy: one column of plain text in the site's chrome. */
.legal{max-width:680px;margin:0 auto;padding:56px 0 72px}
.legal h1{font:600 36px/1.2 var(--font-h);margin:0 0 8px}
.legal h2{font:600 20px/1.3 var(--font-h);margin:36px 0 10px}
.legal p,.legal li{color:var(--ink2);line-height:1.6}
.legal ul{padding-left:20px}
.legal pre{overflow-x:auto;padding:12px 14px;border-radius:8px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line);font:13px/1.6 var(--font-mono,ui-monospace,monospace)}
.legal .updated{font-size:14px}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.footer-by a{color:var(--ink);border-bottom:1px solid var(--green-ring)}
.footer-by a:hover{color:var(--green-text);border-bottom-color:var(--green-text)}

@media(max-width:1000px){
 header nav{gap:4px 14px;margin-left:0}
 .menu-extra{display:none}
}
@media(max-width:820px){
 .navigation{gap:10px 14px}
 header nav{order:3;flex-basis:100%;margin:0;justify-content:space-between;gap:4px 10px}
 .price-pill{margin-left:auto}
 .segmented.icons{margin-left:auto}
}
/* Too narrow for one row of controls: the brand and the price keep the first line, the
   two pickers take the second, and the section links the third. */
@media(max-width:600px){
 .navigation{gap:10px 12px}
 .brand{margin-right:auto}
 .navigation:after{content:'';order:2;flex-basis:100%;height:0}
 .price-pill{order:1;margin-left:0}
 .segmented.icons{order:3;margin-left:0}
 .segmented.compact{order:4}
 header nav{order:5}
}
@media(max-width:760px){
 .hero{padding-top:48px}
 .looks-heading{display:block}
 .looks-controls{margin-top:18px}
 .looks-controls .segmented{flex:1 1 220px}
 .panel{padding:28px}
 .split{gap:32px}
}
@media(max-width:640px){
 .wrap{padding-left:20px;padding-right:20px}
 .section{padding:36px 0}
 .pricing-section{padding-bottom:64px}
 .hero{padding-top:36px}
 .cta-row{flex-direction:column;align-items:stretch;width:100%}
 .cta-row .primary,.cta-row .ghost{width:100%}
 .panel{padding:22px}
 .card{padding:20px}
 .playback{justify-content:flex-start}
 .price-pill s{display:none}
 .segmented.large button{min-width:0;flex:1 1 0}
 .look{padding:16px 16px 0}
 .look-stage{height:340px}
 .look-stage img{width:250px}
 .mac-stage img{width:216px}
 footer .wrap{flex-direction:column;gap:8px}
}
@media(max-width:480px){
 .wrap{padding-left:16px;padding-right:16px}
 header nav{justify-content:flex-start;gap:2px 12px}
 header nav a{font-size:12.5px}
 .segmented.medium button{min-width:0;flex:1 1 0;padding:0 8px}
 .key-strip{gap:4px}
 .key-strip kbd{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*:before,*:after{transition:none!important;animation:none!important}
}

/* ---- Videos ----------------------------------------------------------------------------------
   Real recordings of Shelf, one per feature. Each is a dark desktop, so the frame keeps a dark
   backing in every theme and the poster holds the space until the video loads. */
.hero-stage{margin:36px 0 8px}
.clip{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-lg);background:#12111a;box-shadow:var(--shadow),0 22px 60px rgba(8,10,30,.28)}
.clip video{display:block;width:100%;height:100%;object-fit:cover}
.clip-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(10,12,20,.62);color:#fff;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.clip-play:hover{background:rgba(10,12,20,.78)}
.clip-play[hidden]{display:none}
.hero-clip{max-width:1120px;margin-inline:auto}
.hero-steps{list-style:none;margin:20px auto 0;padding:0;max-width:1120px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hero-steps li{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--tile-bg);box-shadow:var(--tile-shadow);border-radius:var(--r);font-size:14px;color:var(--ink2)}
.hero-steps kbd{padding:4px 9px;color:var(--ink)}
.hero-steps b{color:var(--ink);font-weight:600}

/* Before / after */
.compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.compare-steps{margin:0;padding-left:22px;display:grid;gap:9px;color:var(--ink2);font-size:15px}
.compare-steps kbd{padding:1px 6px;color:var(--ink)}
.compare-total{margin:20px 0 0!important;font:700 26px/1 var(--font-h);letter-spacing:-.02em;color:var(--ink)!important}
.card.is-shelf .compare-total{color:var(--green-text)!important}
.compare-note{margin-top:10px!important;font-size:14px!important}

/* Feature rows: the video takes the wider column, alternating sides down the page. */
.feature{padding:40px 0}
.feature-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px;align-items:center}
.feature.flip .feature-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.feature.flip .clip{order:2}
.step-count{display:inline-block;margin:6px 0 0!important;padding:5px 11px;border-radius:var(--pill);background:var(--green-tint);color:var(--green-text)!important;font:400 13px var(--font-h)}
.feature .key-tiles{margin-top:22px}
#features{scroll-margin-top:calc(var(--header-height,72px) + 8px)}

@media(max-width:900px){
 .feature-grid,.feature.flip .feature-grid{grid-template-columns:1fr;gap:24px}
 .feature.flip .clip{order:0}
 .hero-steps{grid-template-columns:1fr}
}
@media(max-width:640px){
 .feature{padding:28px 0}
 .hero-stage{margin-top:28px}
}