/* ============================================================
   VibeDeck landing - The Onyx Command Deck
   Dark theme locked (the brand is onyx near-black by design).
   Tokens mirror DESIGN.md. Accent: Rebecca Purple, peak: pale lilac.
   ============================================================ */

/* ---------- fonts (self-hosted) ---------- */
@font-face{font-family:"Sora";src:url("assets/fonts/sora-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Sora";src:url("assets/fonts/sora-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Sora";src:url("assets/fonts/sora-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"InterLP";src:url("assets/fonts/inter-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"InterLP";src:url("assets/fonts/inter-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"InterLP";src:url("assets/fonts/inter-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JBMono";src:url("assets/fonts/jetbrains-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JBMono";src:url("assets/fonts/jetbrains-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --onyx-base:#0b0a0e; --onyx-raised:#100e13; --onyx-3:#16141b;
  --panel:#1b1822; --panel-2:#24212c; --panel-hi:#2f2b39;
  --terminal-bg:#0c0b11;
  --rebecca:#683293; --lilac:#a274c4; --pale-lilac:#c9a6e2; --accent-ink:#f4f1f8;
  --selection:#5a4382;
  --ink:#ece9f1; --ink-soft:#b3aec0; --muted:#7e7689; --muted-2:#5f5866;
  --good:#4ade80; --info:#4aa8ff;
  --border:rgba(236,233,241,.08); --border-strong:rgba(236,233,241,.14);
  --accent-soft:rgba(104,50,147,.14); --accent-soft2:rgba(104,50,147,.22); --accent-edge:rgba(162,116,196,.34);

  --sans:"InterLP","Segoe UI",-apple-system,sans-serif;
  --display:"Sora","InterLP","Segoe UI",sans-serif;
  --mono:"JBMono","Cascadia Code",ui-monospace,Consolas,monospace;

  --r-pill:999px; --r-panel:14px; --r-card:10px; --r-sm:6px;
  --maxw:1240px;

  --lift:inset 0 1px 0 rgba(236,233,241,.06);
  --cast:0 1px 2px rgba(0,0,0,.32),0 10px 30px -12px rgba(0,0,0,.6);
  --float:0 24px 80px -28px rgba(0,0,0,.78),0 2px 8px rgba(0,0,0,.4);
  --glow:0 0 0 1px rgba(162,116,196,.16),0 40px 140px -50px rgba(104,50,147,.62);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--sans);
  background:var(--onyx-base);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--selection);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}

/* ---------- fixed grain (perf-safe overlay) ---------- */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---------- icons ---------- */
.ic{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--sans);font-weight:600;font-size:15px;line-height:1;
  border-radius:var(--r-pill);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform .16s cubic-bezier(.16,1,.3,1),background-color .2s,color .2s,box-shadow .2s,border-color .2s;
}
.btn .ic{stroke-width:2}
.btn-primary{
  color:var(--accent-ink);
  background:linear-gradient(180deg,#7d3eae,#5d2c85);
  box-shadow:var(--lift),0 8px 24px -10px rgba(104,50,147,.7);
}
.btn-primary:hover{background:linear-gradient(180deg,#d4b6ea,#c9a6e2);color:#2a153b;transform:translateY(-1px);box-shadow:var(--lift),0 12px 30px -10px rgba(201,166,226,.5)}
.btn-primary:active{transform:translateY(0) scale(.985)}
.btn-ghost{color:var(--ink-soft);background:transparent;border-color:var(--border-strong)}
.btn-ghost:hover{color:var(--ink);background:var(--accent-soft);border-color:var(--accent-edge);transform:translateY(-1px)}
.btn-ghost:active{transform:translateY(0) scale(.985)}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.btn-lg{height:50px;padding:0 24px;font-size:16px}
.btn-xl{height:58px;padding:0 34px;font-size:18px}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--onyx-base),0 0 0 4px var(--accent-edge)}

.chip{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.01em;
  color:var(--lilac);background:var(--accent-soft2);
  border:1px solid var(--accent-edge);border-radius:var(--r-sm);
  padding:3px 9px;font-variant-numeric:tabular-nums;
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dot{color:var(--muted-2);padding:0 .15em}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;
  background:rgba(11,10,14,.72);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s}
.nav.scrolled{border-bottom-color:var(--border);background:rgba(11,10,14,.85)}
.nav-inner{height:68px;max-width:var(--maxw);margin-inline:auto;padding-inline:24px;
  display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{filter:drop-shadow(0 2px 10px rgba(104,50,147,.5))}
.brand-name{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em}
.nav-links{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav-links a{font-size:14.5px;color:var(--ink-soft);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav .btn-primary{margin-left:8px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding-top:48px;padding-bottom:96px;overflow:hidden}
.hero-glow{position:absolute;top:-180px;left:-120px;width:760px;height:620px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(104,50,147,.34),rgba(104,50,147,0) 70%);
  filter:blur(20px);opacity:.7}
.hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,600px) 1fr;gap:32px;align-items:center;
  min-height:calc(100dvh - 68px);padding-block:24px}
.hero-copy{max-width:600px}
.hero-title{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.05;
  font-size:clamp(33px,3.9vw,50px);text-wrap:balance}
.hero-sub{margin-top:22px;font-size:clamp(16px,1.4vw,19px);color:var(--ink-soft);max-width:40ch;line-height:1.55}
.hero-cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}
.hero-meta{margin-top:20px;display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px}
.hero-meta .dl-os{font-family:var(--mono);font-size:12.5px}

/* the app window, bleeding off the right viewport edge only */
.hero-shot{position:relative;justify-self:start;width:min(150%,1180px)}
.window{position:relative;border-radius:var(--r-panel);overflow:hidden;
  border:1px solid var(--border-strong);background:var(--onyx-raised);
  box-shadow:var(--glow),var(--float)}
.window::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:var(--lift);z-index:2}
.hero-shot .window{transform:perspective(1800px) rotateY(-3deg) rotateX(1.2deg)}

/* ============================================================
   CONNECTIONS STRIP
   ============================================================ */
.connections{padding-block:64px;border-top:1px solid var(--border)}
.strip-label{text-align:center;color:var(--ink-soft);font-size:15px}
.logo-wall{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:40px 56px;margin:34px auto 0;max-width:900px}
.logo-wall li{color:var(--muted);transition:color .25s,transform .25s;display:flex}
.logo-wall li:hover{color:var(--lilac);transform:translateY(-2px)}
.logo-wall svg{width:30px;height:30px;fill:currentColor;display:block}
.strip-note{margin:34px auto 0;max-width:60ch;text-align:center;color:var(--muted);font-size:14px}

/* ============================================================
   SPOTLIGHT (full-width media)
   ============================================================ */
.spotlight{padding-block:96px}
.spotlight-head{max-width:760px;margin-inline:auto;text-align:center}
.section-title{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(28px,3.4vw,46px)}
.section-lead{margin-top:18px;color:var(--ink-soft);font-size:clamp(15px,1.25vw,18px);max-width:62ch}
.spotlight-head .section-lead{margin-inline:auto}
.spotlight-shot{margin-top:48px}
.window-wide{max-width:1080px;margin-inline:auto}

/* ============================================================
   BENTO FEATURES
   ============================================================ */
.features{padding-block:64px 96px}
.features-head{margin-bottom:40px;max-width:680px}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lilac);margin-bottom:14px}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.cell{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-card);
  padding:26px;box-shadow:var(--lift);transition:border-color .25s,transform .25s,box-shadow .25s;overflow:hidden}
.cell:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:var(--lift),var(--cast)}
.cell h3{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em;margin-bottom:9px}
.cell p{color:var(--ink-soft);font-size:14.5px;max-width:46ch}
.cell-icon{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;margin-bottom:18px;
  color:var(--lilac);background:var(--accent-soft);border:1px solid var(--accent-edge)}
.cell-icon .ic{width:21px;height:21px}
/* spans */
.cell-lg{grid-column:span 3;grid-row:span 2;display:flex;flex-direction:column}
.cell:not(.cell-lg){grid-column:span 3}
.cell-lg .cell-body{margin-bottom:22px}
.cell-shot{margin-top:auto;border-radius:8px;overflow:hidden;border:1px solid var(--border);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.cell-shot img{width:100%}
.cell-accent{background:linear-gradient(165deg,rgba(104,50,147,.18),rgba(27,24,34,.6) 60%),var(--panel)}
.cell-accent .cell-icon{background:var(--accent-soft2)}

/* ============================================================
   RESUME (single zigzag split)
   ============================================================ */
.resume{padding-block:64px}
.resume-inner{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:56px;align-items:center}
.resume-shot .window{box-shadow:var(--float)}
.resume-copy{max-width:520px}
.resume-copy .section-title{font-size:clamp(26px,2.8vw,40px)}
.ticks{list-style:none;margin-top:26px;display:grid;gap:14px}
.ticks li{display:flex;align-items:flex-start;gap:12px;color:var(--ink-soft);font-size:15px}
.ticks .ic{color:var(--lilac);margin-top:3px;width:18px;height:18px;stroke-width:2.2}

/* ============================================================
   GET STARTED
   ============================================================ */
.get-started{padding-block:96px}
.gs-head{text-align:center;margin-bottom:52px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px;position:relative}
.step{position:relative;padding:28px 24px 8px 0;border-top:1px solid var(--border-strong)}
.step-icon{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;margin-bottom:20px;
  color:var(--accent-ink);background:linear-gradient(180deg,#7d3eae,#5d2c85);box-shadow:var(--lift),0 8px 20px -10px rgba(104,50,147,.7)}
.step-icon .ic{width:21px;height:21px;stroke-width:2}
.step h3{font-family:var(--display);font-weight:600;font-size:20px;margin-bottom:8px}
.step p{color:var(--ink-soft);font-size:14.5px;max-width:34ch}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta{position:relative;padding-block:120px;text-align:center;overflow:hidden;
  border-top:1px solid var(--border)}
.final-glow{position:absolute;left:50%;top:50%;translate:-50% -50%;width:900px;height:520px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(104,50,147,.30),rgba(104,50,147,0) 72%);filter:blur(18px)}
.final-inner{position:relative}
.final-title{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.04;
  font-size:clamp(34px,4.6vw,60px)}
.final-sub{margin-top:18px;color:var(--ink-soft);font-size:clamp(16px,1.4vw,20px)}
.final-cta .btn-xl{margin-top:38px}
.final-meta{margin-top:20px;color:var(--muted);font-size:13px}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{border-top:1px solid var(--border);padding-block:44px 36px;background:var(--onyx-raised)}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;justify-content:space-between}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-tag{color:var(--muted);font-size:14px;margin-left:6px}
.footer-links{display:flex;flex-wrap:wrap;gap:24px}
.footer-links a{color:var(--ink-soft);font-size:14px;transition:color .2s}
.footer-links a:hover{color:var(--lilac)}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:28px;
  padding-top:22px;border-top:1px solid var(--border);color:var(--muted-2);font-size:12.5px}

/* ============================================================
   TOAST
   ============================================================ */
.toast{position:fixed;left:50%;bottom:28px;translate:-50% 0;z-index:70;
  display:flex;align-items:center;gap:10px;
  background:var(--panel-2);border:1px solid var(--accent-edge);border-radius:var(--r-pill);
  padding:12px 20px;font-size:14px;color:var(--ink);box-shadow:var(--float),var(--lift);
  opacity:0;transform:translateY(12px) translateX(-50%);transition:opacity .3s,transform .3s}
.toast[hidden]{display:none}
.toast.show{opacity:1;transform:translateY(0) translateX(-50%)}
.toast .ic{color:var(--lilac)}
.toast a{color:var(--lilac);text-decoration:underline;text-underline-offset:2px}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
/* progressive enhancement: visible by default; only hidden/animated when JS is active */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  .hero-shot .window{transform:none}
  .btn,.cell,.logo-wall li{transition:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero-inner{grid-template-columns:1fr;min-height:auto;gap:40px;padding-top:8px}
  .hero-copy{max-width:none}
  .hero-sub{max-width:48ch}
  .hero-shot{justify-self:stretch;width:100%}
  .hero-shot .window{transform:none}
  .resume-inner{grid-template-columns:1fr;gap:36px}
  .resume-shot{max-width:520px}
}
@media (max-width:860px){
  .nav-links{display:none}
  .bento{grid-template-columns:1fr}
  .cell-lg,.cell:not(.cell-lg){grid-column:span 1}
  .cell-lg{grid-row:auto}
  .steps{grid-template-columns:1fr}
  .hero{padding-bottom:64px}
  .spotlight,.get-started{padding-block:64px}
  .final-cta{padding-block:84px}
}
@media (max-width:520px){
  .container,.nav-inner{padding-inline:18px}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .footer-inner{flex-direction:column;align-items:flex-start}
}


/* ============================================================
   VibeDeck UI recreation - live DOM, crisp at any size.
   Sizing: each host is a query container; .vd font-size scales
   with container width (cqi) so all em-based internals stay sharp.
   Corner radii are intentionally em-scaled (not the page's fixed px
   tokens) so they track the mock window as it resizes - this block is
   a faithful recreation of VibeDeck's own UI, not a page surface.
   ============================================================ */
/* impeccable-disable design-system-radius -- em-scaled radii recreate the product UI and must scale with the mock window */
.vd-host{container-type:inline-size}
.vd{position:relative;width:100%;font-size:clamp(7px,1.5cqi,13px);
  font-family:var(--sans);line-height:1.5;color:var(--ink);
  background:var(--onyx-raised);border:1px solid var(--border-strong);
  border-radius:1.1em;overflow:hidden;box-shadow:var(--glow),var(--float)}
.vd::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:var(--lift);z-index:6}

/* title bar */
.vd-tb{display:flex;align-items:center;gap:.7em;height:3.4em;padding:0 1.1em;
  background:linear-gradient(180deg,#16131c,#100e13);border-bottom:1px solid var(--border)}
.vd-tb-l{display:flex;align-items:center;gap:.7em;min-width:0}
.vd-tb-r{margin-left:auto;display:flex;align-items:center;gap:1.2em}
.vd-tgl{width:1.6em;height:1.4em;border:1.2px solid var(--muted-2);border-radius:.28em;position:relative;flex:0 0 auto}
.vd-tgl::before{content:"";position:absolute;left:.45em;top:.12em;bottom:.12em;width:1.2px;background:var(--muted-2)}
.vd-logo{width:1.5em;height:1.5em;flex:0 0 auto}
.vd-name{font-family:var(--display);font-weight:600;font-size:1.06em;letter-spacing:-.01em;white-space:nowrap}
.vd-wsname{color:var(--muted);font-size:.96em;white-space:nowrap}
.vd-layout{display:flex;gap:.55em;color:var(--muted-2)}
.vd-layout svg{width:1.55em;height:1.55em;stroke:currentColor;fill:none;stroke-width:1.5;display:block}
.vd-ctrls{display:flex;gap:1.05em;color:var(--muted)}
.vd-ctrls svg{width:1.05em;height:1.05em;stroke:currentColor;fill:none;stroke-width:1.4}

/* body */
.vd-body{display:flex;height:42em}
.vd-rail{flex:0 0 15.5em;display:flex;flex-direction:column;gap:.45em;padding:1.1em .85em;
  background:linear-gradient(180deg,#14111b,#100e13);border-right:1px solid var(--border)}
.vd-railh{display:flex;align-items:center;justify-content:space-between;padding:.2em .5em .7em;
  font-family:var(--mono);font-size:.78em;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.vd-railh svg{width:1.15em;height:1.15em;stroke:var(--muted);fill:none;stroke-width:1.7}
.vd-ws{list-style:none;display:flex;flex-direction:column;gap:.25em}
.vd-ws li{position:relative;display:flex;align-items:center;gap:.6em;padding:.6em .65em;
  border-radius:.5em;border:1px solid transparent;color:var(--ink-soft);font-size:1em;white-space:nowrap}
.vd-ws .sq{width:1em;height:1em;border:1.2px solid currentColor;border-radius:.22em;opacity:.55;flex:0 0 auto}
.vd-ws .cnt{margin-left:auto;font-family:var(--mono);font-size:.82em;color:var(--muted);
  background:var(--panel-2);border-radius:.32em;padding:.08em .5em}
.vd-ws li.on{background:var(--accent-soft2);border-color:var(--accent-edge);color:var(--ink)}
.vd-ws li.on::before{content:"";position:absolute;left:-.85em;top:.4em;bottom:.4em;width:.2em;
  background:var(--lilac);border-radius:2px}
.vd-ws li.on .sq{color:var(--lilac);opacity:1}
.vd-newterm{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:.55em;
  height:2.7em;border-radius:.55em;background:var(--panel-2);border:1px solid var(--border-strong);
  color:var(--ink-soft);font-size:1em;box-shadow:var(--lift)}
.vd-newterm svg{width:1.1em;height:1.1em;stroke:currentColor;fill:none;stroke-width:1.9}

/* work area + tiling */
.vd-work{flex:1;min-width:0;padding:1em;background:var(--onyx-base)}
.vd-grid{display:grid;gap:.7em;height:100%}
.vd-grid.g4{grid-template-columns:1.4fr 1fr;grid-template-rows:1.3fr 1fr}
.vd-grid.g1{grid-template-columns:1fr;grid-template-rows:1fr}

/* terminal tile */
.vd-term{display:flex;flex-direction:column;min-width:0;min-height:0;
  background:var(--terminal-bg);border:1px solid var(--border);border-radius:.6em;overflow:hidden}
.vd-term.on{border-color:rgba(162,116,196,.4);
  box-shadow:0 0 0 1px rgba(162,116,196,.16),0 16px 44px -28px rgba(104,50,147,.75)}
.vd-tbar{display:flex;align-items:center;gap:.65em;height:2.5em;padding:0 .8em;
  background:var(--onyx-3);border-bottom:1px solid var(--border)}
.vd-badge{font-family:var(--mono);font-size:.82em;color:var(--muted);background:var(--panel-2);
  border:1px solid var(--border-strong);border-radius:.32em;padding:.12em .55em;line-height:1.35}
.vd-term.on .vd-badge{color:var(--lilac)}
.vd-ttl{font-size:.95em;color:var(--ink-soft);white-space:nowrap}
.vd-tact{margin-left:auto;display:flex;gap:.5em;color:var(--muted-2)}
.vd-tact svg{width:1.25em;height:1.25em;stroke:currentColor;fill:none;stroke-width:1.6;display:block}
.vd-screen{flex:1;min-height:0;overflow:hidden;padding:.75em .95em;margin:0;
  font-family:var(--mono);font-size:.9em;line-height:1.62;color:var(--ink);white-space:pre;tab-size:2}
.vd-screen .m{color:var(--muted)}
.vd-screen .u{color:var(--lilac)}
.vd-screen .b{color:var(--lilac)}
.vd-screen .g{color:var(--good)}
.vd-screen .i{color:var(--info)}
.vd-cur{display:inline-block;width:.55em;height:1.05em;background:var(--lilac);vertical-align:-.18em;border-radius:1px}
html.js .vd-cur{animation:vd-blink 1.15s steps(1,end) infinite}
@keyframes vd-blink{50%{opacity:0}}
.vd-cur.vd-hide,.vd-hide{display:none!important}

/* sidebar: workspace icons + live "running" indicator */
.vd-ws .vd-wi{width:1.3em;height:1.3em;flex:0 0 auto;color:var(--muted);display:block}
.vd-ws .vd-wi svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.7;display:block}
.vd-ws li.on .vd-wi{color:var(--lilac)}
.vd-run{margin-left:auto;width:.5em;height:.5em;border-radius:50%;background:var(--good);flex:0 0 auto}
.vd-ws li.on .cnt{margin-left:.6em}
html.js .vd-run{animation:vd-pulse 2s ease-out infinite}
@keyframes vd-pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}70%{box-shadow:0 0 0 .6em rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}

/* active terminal: live agent dot in the tab */
.vd-term.on .vd-ttl{display:inline-flex;align-items:center;gap:.55em}
.vd-term.on .vd-ttl::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--lilac);box-shadow:0 0 .5em var(--lilac);flex:0 0 auto}
html.js .vd-term.on .vd-ttl::before{animation:vd-livedot 1.7s ease-in-out infinite}
@keyframes vd-livedot{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* agent "thinking" dots */
.vd-think{display:inline-flex;align-items:center;gap:.32em;vertical-align:-.05em}
.vd-think i{width:.42em;height:.42em;border-radius:50%;background:var(--muted);display:block}
html.js .vd-think i{animation:vd-think 1.2s ease-in-out infinite}
.vd-think i:nth-child(2){animation-delay:.16s}
.vd-think i:nth-child(3){animation-delay:.32s}
@keyframes vd-think{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-.22em)}}

@media (prefers-reduced-motion:reduce){
  html.js .vd-cur{animation:none}
  html.js .vd-run,html.js .vd-term.on .vd-ttl::before,html.js .vd-think i{animation:none}
}

/* placements */
.spotlight-shot{max-width:1080px;margin-inline:auto}
.spotlight-shot .vd-body{height:40em}
.cell-shot{display:block;border:none;box-shadow:none;background:none}
.cell-shot .vd-term{height:17em;font-size:clamp(7px,3cqi,12px);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}

/* simplify the app window on narrow containers so text stays readable */
@container (max-width:660px){
  .vd-app .vd-rail{display:none}
  .vd-app .vd-grid.g4{grid-template-columns:1fr;grid-template-rows:1fr}
  .vd-app .t-dev,.vd-app .t-git,.vd-app .t-server{display:none}
  .vd-app,.vd-spot{font-size:clamp(8px,2.7cqi,13px)}
  .vd-app .vd-body{height:28em}
  .vd-spot .vd-rail{display:none}
}

/* ===== Resume panel ===== */
.resume-shot{max-width:460px}
.vd-resume{position:relative;font-size:clamp(7px,2.7cqi,12.5px);font-family:var(--sans);color:var(--ink);
  background:#15131c;border:1px solid var(--border-strong);border-radius:1.2em;padding:1.7em;
  box-shadow:var(--float);line-height:1.5}
.vd-resume::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--lift)}
.vd-rsh{display:flex;align-items:center;gap:.7em;margin-bottom:1em}
.vd-rsh svg{width:1.5em;height:1.5em;stroke:var(--ink-soft);fill:none;stroke-width:1.6;flex:0 0 auto}
.vd-rsh b{font-family:var(--display);font-weight:600;font-size:1.35em}
.vd-rsh .x{margin-left:auto;color:var(--muted);width:1.2em;height:1.2em;stroke:currentColor;fill:none;stroke-width:1.6}
.vd-rs-intro{color:var(--muted);font-size:1em;margin-bottom:1.3em;max-width:48ch}
.vd-grp{border:1px solid var(--border);border-radius:.9em;background:#100d15;padding:1.1em;margin-bottom:1em}
.vd-grp-h{display:flex;align-items:center;gap:.6em;margin-bottom:.25em}
.vd-grp-h .dotm{width:.65em;height:.65em;border-radius:50%;background:var(--lilac);flex:0 0 auto}
.vd-grp-h b{font-family:var(--display);font-weight:600;font-size:1.18em}
.vd-pill{font-size:.8em;color:var(--pale-lilac);background:rgba(104,50,147,.3);
  border:1px solid var(--accent-edge);border-radius:1em;padding:.1em .65em}
.vd-grp-h .n{margin-left:auto;color:var(--muted);font-size:.9em}
.vd-grp-path{font-family:var(--mono);font-size:.9em;color:var(--muted);margin-bottom:.85em}
.vd-card{background:var(--panel-2);border:1px solid var(--border-strong);border-radius:.6em;padding:.75em .85em;margin-bottom:.55em}
.vd-card .p{font-weight:600;font-size:1em}
.vd-card .meta{display:flex;align-items:center;gap:.55em;color:var(--muted);font-family:var(--mono);font-size:.84em;margin-top:.45em}
.vd-card .meta .ic-c{width:1em;height:1em;border:1.2px solid currentColor;border-radius:50%;flex:0 0 auto}
.vd-grp-btns{display:flex;gap:.6em;margin-top:.85em}
.vd-rs-primary{background:linear-gradient(180deg,#7d3eae,#5d2c85);color:var(--accent-ink);
  border-radius:.55em;padding:.65em 1.15em;font-weight:600;font-size:.95em;box-shadow:var(--lift)}
.vd-rs-ghost{background:var(--panel-2);border:1px solid var(--border-strong);color:var(--ink-soft);
  border-radius:.55em;padding:.65em 1.15em;font-size:.95em}
.vd-rs-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.2em}
.vd-rs-foot .chk{display:flex;align-items:center;gap:.55em;color:var(--ink-soft);font-size:.95em}
.vd-rs-foot .box{width:1.2em;height:1.2em;border-radius:.28em;background:var(--rebecca);display:grid;place-items:center;flex:0 0 auto}
.vd-rs-foot .box svg{width:.85em;height:.85em;stroke:var(--accent-ink);fill:none;stroke-width:2.4}
.vd-rs-foot .now{background:var(--panel-2);border:1px solid var(--border-strong);color:var(--ink-soft);
  border-radius:.5em;padding:.55em 1em;font-size:.95em}

/* download button: Windows logo */
.ic-win{width:1.05em;height:1.05em;fill:currentColor;flex:0 0 auto}

/* footer tech logos */
.footer-tech{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:13px;flex-wrap:wrap}
.footer-tech .tech-lead{font-family:var(--mono);font-size:12px;color:var(--muted-2)}
.footer-tech ul{list-style:none;display:flex;align-items:center;gap:20px}
.footer-tech li{display:flex;align-items:center;gap:7px;color:var(--ink-soft);font-size:13px}
.footer-tech svg{width:18px;height:18px;fill:currentColor}