/* /for/developers/: the split hero, code windows, tabs, the goal demo, the API and MCP panels, figures and the "next" chips.
   The page also uses solo.css (buttons, cards). Windows are dark in both themes (they are screens); everything else uses the tokens. */
.dv{--w-bg:#0b0d10;--w-bar:#12151a;--w-bd:#242a33;--w-tx:#f5f7fa;--w-2:#a7b0bd;--w-3:#7b8492;--lime:#b8ff3c}
.dv .lg-doc,.dv .lg-doc>section,.dv-win,.dv-col{min-width:0}
.dv a:focus-visible,.dv button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* hero */
.dv-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center;margin-bottom:96px}
.dv-hero::before{content:"";position:absolute;inset:-60px 0 -40px;z-index:-1;background:radial-gradient(50% 55% at 78% 40%,var(--glow),transparent 70%),radial-gradient(30% 35% at 10% 80%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%);pointer-events:none}
.dv-lead{max-width:none}
.dv-lead h1{margin-bottom:16px;text-wrap:balance}
.dv-lead .lg-lede{max-width:42ch;margin-bottom:0}
.dv-btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:28px}
.dv-stage{position:relative;display:grid;gap:14px}

/* windows */
.dv-win{overflow:hidden;border:1px solid var(--w-bd);border-radius:16px;background:var(--w-bg);color:var(--w-tx);box-shadow:0 24px 60px -28px rgba(0,0,0,.55)}
.dv-win+.dv-win,.dv-win+.dv-pn{margin-top:14px}
.dv-bar{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 10px 0 14px;border-bottom:1px solid var(--w-bd);background:var(--w-bar)}
.dv-dots{display:flex;gap:6px;flex:none}
.dv-dots i{width:10px;height:10px;border-radius:50%;background:#2f3742}
.dv-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 12.5px/1 'Geist Mono',monospace;color:var(--w-3)}
.dv-copy{flex:none;height:28px;padding:0 12px;border:1px solid #2f3742;border-radius:999px;background:transparent;color:var(--w-2);font:500 12px/1 'Geist Mono',monospace;cursor:pointer;transition:border-color .2s,color .2s}
.dv-copy[hidden]{display:none}
.dv-copy:hover{border-color:#7b8492;color:var(--w-tx)}
.dv-copy.ok{border-color:var(--lime);color:var(--lime)}
.dv .dv-win pre{margin:0;padding:16px 18px;overflow-x:auto;border:0;border-radius:0;background:none;font:500 13.5px/1.7 'Geist Mono',monospace;color:var(--w-tx)}
.dv .dv-win pre+pre{border-top:1px solid var(--w-bd)}
.dv pre code{padding:0;border:0;background:none;font:inherit;white-space:pre}
.dv pre:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.h-t{color:#7cc4ff}.h-a{color:#ffb547}.h-s{color:#b8ff3c}.h-c{color:#7b8492}.h-k{color:#c9a7ff}.h-n{color:#ff9d7a}
.h-t,.h-a,.h-s,.h-c,.h-k,.h-n{font-style:normal}
.dv-pn{margin:12px 0 0;font-size:14.5px;line-height:1.55;color:var(--text-2)}
.dv-win .dv-pn{margin:0;padding:0 18px 14px;color:var(--w-2)}
.dv-win .dv-pn a{color:var(--w-tx);text-decoration:underline;text-underline-offset:3px}
.dv-win .dv-pn code{padding:1px 6px;border:1px solid var(--w-bd);border-radius:6px;background:var(--w-bar);font-size:.92em}
.dv-note{margin:16px 0 0;font-size:15px;color:var(--text-2)}
.dv-type pre{min-height:calc(6 * 1.7em + 32px)}
.dv-caret{display:inline-block;width:.55em;height:1.1em;margin-left:1px;vertical-align:-.2em;background:var(--lime);animation:dv-blink 1s steps(1) infinite}

/* the mini dashboard */
.dv-dash{padding:16px 18px;border:1px solid var(--w-bd);border-radius:16px;background:var(--w-bg);color:var(--w-tx);box-shadow:0 24px 60px -28px rgba(0,0,0,.55)}
.dv-dash-h{display:flex;align-items:center;gap:12px;margin-bottom:14px;font:500 12.5px/1 'Geist Mono',monospace;color:var(--w-3)}
.dv-dash-d{flex:1}
.dv-live{display:inline-flex;align-items:center;gap:7px;color:var(--w-tx)}
.dv-live i{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(184,255,60,.6);animation:dv-ping 1.8s ease-out infinite}
.dv-demo{padding:3px 8px;border:1px solid var(--w-bd);border-radius:999px;font:500 11px/1.2 'Geist Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--w-3)}
.dv-dash-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dv-dash-stats div{padding:12px 14px;border:1px solid var(--w-bd);border-radius:12px;background:var(--w-bar)}
.dv-dash-stats span{display:block;font-size:13px;color:var(--w-2)}
.dv-dash-stats b{display:block;margin-top:4px;font:700 28px/1.1 'Geist Mono',monospace;letter-spacing:-.02em}
.dv-dash ul{margin:12px 0 0;padding:0;list-style:none}
.dv-dash-goals li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--lime) 40%,var(--w-bd));border-radius:12px;background:color-mix(in srgb,var(--lime) 8%,transparent)}
.dv-goal-n{font:500 14px/1 'Geist Mono',monospace}
.dv-dash-goals b{font:700 15px/1 'Geist Mono',monospace;color:var(--lime)}
.dv-dash-goals li[hidden]{display:none}
.dv-bump{animation:dv-bump .5s cubic-bezier(.2,.8,.2,1)}
.dv-in{animation:dv-in .55s cubic-bezier(.2,.8,.2,1) both}

/* tabs */
.dv-tablist{display:flex;flex:1;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.dv-tablist::-webkit-scrollbar{display:none}
.dv-tab{flex:none;height:44px;padding:0 12px;border:0;border-bottom:2px solid transparent;background:none;color:var(--w-3);font:500 13px/1 'Geist Mono',monospace;cursor:pointer;transition:color .2s}
.dv-tab:hover{color:var(--w-tx)}
.dv-tab[aria-selected=true]{border-bottom-color:var(--lime);color:var(--w-tx)}
.dv-tab:focus-visible{outline-offset:-3px}
.dv-js .dv-panel[hidden]{display:none}
.dv:not(.dv-js) .dv-tablist{display:none}
.dv:not(.dv-js) .dv-panel+.dv-panel{border-top:1px solid var(--w-bd)}

/* the goal demo */
.dv-demo-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px;align-items:stretch}
.dv-fake,.dv-goalcard,.dv-chat{overflow:hidden;border:1px solid var(--w-bd);border-radius:16px;background:var(--w-bg);color:var(--w-tx);box-shadow:0 24px 60px -28px rgba(0,0,0,.55)}
.dv-fake-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 14px;border-bottom:1px solid var(--w-bd);background:var(--w-bar);font:500 12.5px/1 'Geist Mono',monospace;color:var(--w-2)}
.dv-fake-body{padding:28px 22px 24px}
.dv-fake-h{margin:0 0 6px;font-size:22px;font-weight:700;letter-spacing:-.02em}
.dv-fake-p{margin:0 0 18px;font-size:14.5px;line-height:1.5;color:var(--w-2)}
.dv-fake-btn{height:44px;padding:0 24px;border:0;border-radius:999px;background:var(--lime);color:#0b0d10;font:600 15px Geist,sans-serif;cursor:pointer;transition:transform .15s,box-shadow .2s}
.dv-fake-btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px -10px rgba(184,255,60,.6)}
.dv-fake-btn:active{transform:scale(.97)}
.dv-fake-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.dv-fake-code{border-top:1px solid var(--w-bd)}
.dv .dv-fake-code pre{margin:0;padding:12px 18px;overflow-x:auto;border:0;border-radius:0;background:none;color:var(--w-tx);font:500 12.5px/1.7 "Geist Mono",monospace}
.dv .dv-fake-code pre+pre{border-top:1px solid var(--w-bd)}
.dv-arrow{align-self:center;width:44px;height:2px;background:linear-gradient(90deg,transparent,var(--accent));position:relative}
.dv-arrow::after{content:"";position:absolute;right:-1px;top:-4px;width:9px;height:9px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);transform:rotate(45deg)}
.dv-goalcard{display:flex;flex-direction:column}
.dv-empty{margin:0;padding:28px 22px;font-size:14.5px;color:var(--w-3)}
.dv-goal-list{margin:0;padding:16px 18px 6px;list-style:none}
.dv-goal-list li[hidden]{display:none}
.dv-goal-list li{display:grid;grid-template-columns:1fr auto;gap:10px 12px;align-items:center}
.dv-goal-list b{font:700 22px/1 'Geist Mono',monospace;color:var(--lime)}
.dv-meter{grid-column:1/-1;height:6px;overflow:hidden;border-radius:6px;background:#1d2229}
.dv-meter i{display:block;height:100%;width:100%;border-radius:6px;background:var(--lime);transform-origin:left}
.dv-goal-list .dv-in .dv-meter i{animation:dv-grow .7s cubic-bezier(.2,.8,.2,1) both}
.dv-reset{align-self:flex-start;margin:10px 18px 16px;padding:0;border:0;background:none;color:var(--w-3);font:500 12.5px 'Geist Mono',monospace;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dv-reset[hidden]{display:none}
.dv-reset:hover{color:var(--w-tx)}
.dv-goalcard:has([data-row]:not([hidden])) [data-empty]{display:none}

/* read it from anywhere */
.dv-read{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.dv-col{display:flex;flex-direction:column;gap:14px}
.dv-col>.dv-pn{margin:0}
.dv-col>.dv-win{margin:0}
.dv-chat{display:flex;flex-direction:column;gap:10px;padding-bottom:18px}
.dv-chat .dv-fake-bar{margin-bottom:6px}
.dv-mcp{padding:3px 9px;border-radius:999px;background:var(--lime);color:#0b0d10;font-weight:600}
.dv-msg{margin:0 16px;padding:10px 14px;border-radius:14px;font-size:15px;line-height:1.45}
.dv-me{align-self:flex-end;max-width:84%;border-bottom-right-radius:4px;background:#1d2229}
.dv-ai{align-self:flex-start;max-width:90%;border-bottom-left-radius:4px;border:1px solid var(--w-bd);background:var(--w-bar)}
.dv-tool{display:flex;align-items:center;gap:8px;margin:0 16px;font:500 12.5px/1 'Geist Mono',monospace;color:var(--w-3)}
.dv-tool i{width:7px;height:7px;border-radius:50%;background:var(--lime)}

/* figures, cards, the next chips */
.lg .dv-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 14px;padding:0;list-style:none;border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden}
.lg .dv-figs li{display:flex;flex-direction:column;gap:6px;margin:0;padding:22px 20px}
.lg .dv-figs li+li{border-left:1px solid var(--border)}
.dv-figs b{font:700 clamp(28px,3.6vw,40px)/1 'Geist Mono',monospace;color:var(--accent)}
.dv-figs span{font-size:14.5px;color:var(--text-2)}
.lg .dv-next{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.lg .dv-next li{display:flex;align-items:center;gap:8px;margin:0;padding:7px 14px 7px 8px;border:1px dashed var(--border);border-radius:999px;color:var(--text-2);font-size:14.5px}
.dv-tag{flex:none;padding:3px 8px;border-radius:999px;background:var(--surface-2);font:500 11.5px/1.2 'Geist Mono',monospace;color:var(--text-3)}
.dv-one{max-width:820px}
.dv-repo{font-weight:600;color:var(--text)}

/* scroll reveal (website/dev.js sets data-rv, then .rv-in) */
[data-rv]{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
[data-rv].rv-in{opacity:1;transform:none}

@keyframes dv-blink{50%{opacity:0}}
@keyframes dv-ping{70%,100%{box-shadow:0 0 0 10px rgba(184,255,60,0)}}
@keyframes dv-bump{0%{transform:scale(1)}40%{transform:scale(1.18);color:var(--lime)}100%{transform:scale(1)}}
@keyframes dv-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes dv-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.dv-caret,.dv-live i,.dv-bump,.dv-in,.dv-goal-list .dv-in .dv-meter i{animation:none}[data-rv]{opacity:1;transform:none;transition:none}.dv-fake-btn,.dv-copy{transition:none}}

@media (max-width:900px){
  .dv-hero{grid-template-columns:minmax(0,1fr);gap:36px;margin-bottom:64px}
  .dv-demo-grid,.dv-read{grid-template-columns:minmax(0,1fr)}
  .dv-arrow{width:2px;height:28px;justify-self:center;background:linear-gradient(180deg,transparent,var(--accent))}
  .dv-arrow::after{right:-4px;top:auto;bottom:-1px;transform:rotate(135deg)}
}
@media (max-width:640px){
  .lg .dv-figs{grid-template-columns:1fr 1fr}
  .lg .dv-figs li:nth-child(3){border-left:0}
  .lg .dv-figs li:nth-child(n+3){border-top:1px solid var(--border)}
  .dv .dv-win pre{font-size:12.5px;padding:14px}
  .dv-bar{gap:8px;padding-left:12px}
  .dv-fake-body{padding:22px 16px 18px}
}