/* workspace-x.com v2 — stripped-down terminal presentation.
   Small mono type, dense rows, no marketing blocks. */

:root{--bg:#0a0d12;--bg-1:#0e1116;--bg-2:#131a23;--bg-3:#1a232f;--rule:#1e2733;--rule-soft:#18202b;--fg:#e8edf4;--fg-dim:#b3bdca;--fg-muted:#76828f;--fg-faint:#4a5562;--accent:#5ab0ff;--accent-soft:#2f80d6;--accent-glow:rgba(90,176,255,0.18);--c-question:#e6b450;--c-stalled:#e06a5a;--c-waiting:#5ab0ff;--c-thinking:#b694f0;--c-complete:#5bc98a;--c-idle:#76828f;--mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;--sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;--maxw:1080px;--gutter:clamp(18px,4vw,48px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;background:linear-gradient(var(--rule-soft) 1px,transparent 1px) 0 0/100% 64px,linear-gradient(90deg,var(--rule-soft) 1px,transparent 1px) 0 0/64px 100%;opacity:.42;mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 78%);pointer-events:none;z-index:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
.mono{font-family:var(--mono)}
.accent{color:var(--accent)}

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.scrolled{border-bottom-color:var(--rule)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;gap:28px}
.brand{font-family:var(--mono);font-weight:700;font-size:16px;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:9px}
.brand:hover{color:inherit}
.brand .blink{width:9px;height:16px;background:var(--accent);display:inline-block;border-radius:1px;animation:blink 1.15s steps(1) infinite;box-shadow:0 0 10px var(--accent-glow)}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.brand .blink{animation:none}}
.brand b{color:var(--accent)}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-links a{font-size:14px;color:var(--fg-muted);padding:8px 12px;border-radius:7px;transition:color .15s,background .15s;font-weight:500}
.nav-links a:hover{color:var(--fg);background:var(--bg-2)}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:13px;font-weight:500;padding:9px 14px;border-radius:8px;cursor:pointer;border:1px solid var(--rule);background:var(--bg-2);color:var(--fg);transition:border-color .15s,background .15s,transform .1s;white-space:nowrap}
.btn:hover{background:var(--bg-3);border-color:#2c3a4a;color:var(--fg)}
.btn:active{transform:translateY(1px)}
.btn svg{width:15px;height:15px;flex:0 0 auto}
.btn-primary{background:var(--accent);color:#05121f;border-color:var(--accent)}
.btn-primary:hover{background:#74bdff;border-color:#74bdff;color:#05121f}
.btn-ghost{background:transparent}
/* phones: the nav has no room for four links plus the Star button; GitHub is still one tap away in the hero and footer */
@media (max-width:600px){.nav-inner{gap:14px}.nav-links{gap:2px}.nav-links a{font-size:13px;padding:8px 7px}.nav-links .btn-ghost{display:none}}
@media (max-width:380px){.nav-links a[href="#how"]{display:none}}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{padding:clamp(36px,6vw,68px) 0 clamp(28px,4vw,44px)}
h1{font-family:var(--mono);font-weight:500;font-size:clamp(17px,2.2vw,21px);line-height:1.45;letter-spacing:-.01em;margin:0 0 6px;color:var(--fg);text-wrap:pretty;max-width:56ch}
h1 .dim{color:var(--fg-muted)}
.hero .sub{font-family:var(--mono);font-size:13px;color:var(--fg-muted);margin:0 0 22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 0}
.hero-note{font-family:var(--mono);font-size:12px;color:var(--fg-muted);margin:14px 0 0}

/* ── terminal window ──────────────────────────────────────────────────── */
.term{background:var(--bg-1);border:1px solid var(--rule);border-radius:8px;overflow:hidden}
/* hero shell: a prompt and the ? help pane — nothing faked as output */
.hero-term{margin:26px 0 0}
.shell{font-family:var(--mono);font-size:13.5px;line-height:1.9}
.shell .ln{color:var(--fg)}
.shell .pfx{color:var(--accent)}
.shell .cur{display:inline-block;width:8px;height:15px;background:var(--accent);margin-left:3px;transform:translateY(2px);animation:blink 1.1s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.shell .cur{animation:none}}
.shell .hint{color:var(--fg-muted);font-size:12.5px;margin:0}
.shell .hint-2{margin:10px 0 0;max-width:74ch;line-height:1.75;text-wrap:pretty}
.shell .hint-2 a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.shell .hint-2 a:hover{text-decoration-color:var(--accent)}

/* stills rendered from the sandbox (demo/stills): the hero dashboard, the attached view in #see */
.still{margin:0;padding:0}
.hero .still{margin:26px 0 0}
.still img{display:block;width:100%;height:auto}
.still figcaption{font-family:var(--mono);font-size:12px;color:var(--fg-muted);padding:10px 14px;border-top:1px solid var(--rule);text-wrap:pretty}
#see .still{margin:0 0 20px}
/* bar-theme thumbnails under the hero: two clickable stills, full size in the lightbox */
.thumbs{margin:14px 0 0}
.thumbs-label{font-family:var(--mono);font-size:12px;color:var(--fg-muted);margin:0 0 10px;text-wrap:pretty}
.thumbs-label a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.thumbs-label a:hover{text-decoration-color:var(--accent)}
.thumb-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:620px){.thumb-row{grid-template-columns:1fr}}
.thumb{display:block;width:100%;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:zoom-in;transition:border-color .15s,transform .15s}
.thumb:hover,.thumb:focus-visible{border-color:var(--accent-soft);outline:none}
.thumb:focus-visible{box-shadow:0 0 0 3px var(--accent-glow)}
.thumb img{display:block;width:100%;height:auto}
.thumb-cap{display:block;font-family:var(--mono);font-size:11.5px;color:var(--fg-muted);padding:8px 12px;border-top:1px solid var(--rule)}
.thumb:hover .thumb-cap{color:var(--fg-dim)}
/* lightbox: native <dialog>, so Esc, focus and the backdrop click come for free */
.lightbox{background:var(--bg-1);color:var(--fg);border:1px solid var(--rule);border-radius:8px;padding:0;max-width:min(96vw,1640px);width:auto;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox::backdrop{background:rgba(4,7,11,.78);backdrop-filter:blur(4px)}
.lightbox img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain}
.lightbox-cap{font-family:var(--mono);font-size:12px;color:var(--fg-muted);margin:0;padding:10px 44px 10px 14px;border-top:1px solid var(--rule);text-wrap:pretty}
.lightbox-close{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:7px;border:1px solid var(--rule);background:color-mix(in srgb,var(--bg-1) 85%,transparent);color:var(--fg-dim);font:20px/1 var(--mono);cursor:pointer}
.lightbox-close:hover{color:var(--fg);background:var(--bg-3)}

/* ── sections ─────────────────────────────────────────────────────────── */
section{padding:clamp(38px,5.5vw,62px) 0;position:relative}
.divider{height:1px;background:var(--rule);border:0;max-width:var(--maxw);margin:0 auto}
.sec-head{display:flex;align-items:baseline;gap:14px;margin:0 0 22px;flex-wrap:wrap}
h2{font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.02em;margin:0;color:var(--fg)}
h2 .pfx{color:var(--accent)}
.sec-head .note{font-family:var(--mono);font-size:12px;color:var(--fg-muted);margin:0}
.sec-head .rule{flex:1;min-width:24px;height:1px;background:var(--rule)}

/* ── value prop rows ──────────────────────────────────────────────────── */
.props{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-soft)}
.prop{display:grid;grid-template-columns:22px 21ch minmax(0,1fr);gap:16px;align-items:baseline;padding:13px 4px;border-bottom:1px solid var(--rule-soft);transition:background .15s}
.prop:hover{background:var(--bg-1)}
.prop .g{font-family:var(--mono);font-size:14px;font-weight:700;text-align:center}
.prop .name{font-family:var(--mono);font-size:13.5px;color:var(--fg);letter-spacing:-.01em}
.prop .desc{font-size:14px;color:var(--fg-muted);line-height:1.55;text-wrap:pretty;margin:0}
.prop .desc .mono{color:var(--fg-dim);font-size:13px}
@media (max-width:720px){.prop{grid-template-columns:20px minmax(0,1fr);gap:6px 12px}.prop .desc{grid-column:2}}
.g-blue{color:var(--c-waiting)}.g-green{color:var(--c-complete)}.g-violet{color:var(--c-thinking)}.g-amber{color:var(--c-question)}.g-red{color:var(--c-stalled)}

/* ── quickstart block ─────────────────────────────────────────────────── */
.cmd{font-family:var(--mono);font-size:13px;line-height:1.95;background:var(--bg-1);border:1px solid var(--rule);border-radius:10px;padding:15px 56px 15px 16px;position:relative}
.cmd-row{display:flex;align-items:baseline;gap:10px;white-space:nowrap;overflow:hidden}
.cmd-row .pfx{color:var(--accent);user-select:none;flex:0 0 auto}
.cmd-row .txt{color:var(--fg-dim);text-overflow:ellipsis;overflow:hidden}
.cmd-row .cmt{color:var(--fg-muted);margin-left:auto;padding-left:18px}
@media (max-width:620px){.cmd{overflow-x:auto}.cmd-row{overflow:visible}.cmd-row .cmt{display:none}.cmd-row .txt{overflow:visible;text-overflow:clip}}
.copy-btn{position:absolute;top:10px;right:10px;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:7px;background:var(--bg-2);color:var(--fg-muted);cursor:pointer;transition:all .15s}
.copy-btn:hover{color:var(--fg);border-color:#2c3a4a;background:var(--bg-3)}
.copy-btn svg{width:14px;height:14px}
.copy-btn.copied{color:var(--c-complete);border-color:color-mix(in srgb,var(--c-complete) 50%,var(--rule))}

/* ── screencasts ──────────────────────────────────────────────────────── */
.casts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:760px){.casts{grid-template-columns:1fr}}
.cast-media{position:relative;aspect-ratio:16/9;background:var(--bg)}
.cast-media video{width:100%;height:100%;display:block;object-fit:cover;background:#05080c}
.cast-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;background:repeating-linear-gradient(45deg,transparent,transparent 11px,rgba(90,176,255,.025) 11px,rgba(90,176,255,.025) 22px),var(--bg-1);color:var(--fg-muted);font-family:var(--mono);font-size:12px;padding:20px}
.cast-ph .play{width:46px;height:46px;border-radius:50%;border:1px solid var(--rule);display:grid;place-items:center;background:var(--bg-2);color:var(--accent)}
.cast-ph .play svg{width:17px;height:17px;margin-left:3px}
.cast-cap{display:block;font-family:var(--mono);font-size:12px;color:var(--fg-muted);margin:10px 0 0}
.cast-cap .n{color:var(--accent)}

/* ── closing ──────────────────────────────────────────────────────────── */
#cta{padding:clamp(40px,6vw,72px) 0}
.cta-line{font-family:var(--mono);font-size:14px;color:var(--fg-dim);margin:0 0 18px;overflow-wrap:anywhere}
.cta-line .pfx{color:var(--accent)}

/* ── footer ─────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--rule);padding:48px 0 56px}
.foot-inner{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;justify-content:space-between}
.foot-brand{max-width:320px}
.foot-brand p{color:var(--fg-muted);font-size:14px;margin:14px 0 0;line-height:1.6}
.foot-cols{display:flex;gap:60px;flex-wrap:wrap}
.foot-col h4{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-muted);margin:0 0 14px;font-weight:600}
.foot-col a{display:block;color:var(--fg-muted);font-size:14px;padding:5px 0;transition:color .15s}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{margin-top:40px;padding-top:22px;border-top:1px solid var(--rule-soft);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;color:var(--fg-muted);font-size:13px;font-family:var(--mono)}

/* ── reveal ───────────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.06s}
.reveal[data-d="2"]{transition-delay:.12s}
.reveal[data-d="3"]{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}