/* Landing-page presentation of workbench/src/index.css and ui/button.tsx tokens. */
:root {
  --wb-background: #fff;
  --wb-secondary: #f9fafc;
  --wb-tertiary: #f5f5f5;
  --wb-primary: #0846a6;
  --wb-text: #232830;
  --wb-muted: #707583;
  --wb-border: #d4d4d4;
  --wb-success: #00875a;
}
html[data-theme="dark"] {
  --wb-background: #111827;
  --wb-secondary: #1f2937;
  --wb-tertiary: #181e2a;
  --wb-primary: #3b82f6;
  --wb-text: #e5e7eb;
  --wb-muted: #9ca3af;
  --wb-border: #374151;
  --wb-success: #38b889;
}
html[data-theme] {
  --ink: var(--wb-text);
  --muted: var(--wb-muted);
  --blue: var(--wb-primary);
  --line: var(--wb-border);
  --soft: var(--wb-secondary);
}
html[data-theme] body { background:var(--wb-background); font-size:14px; line-height:1.6 }
h1,h2,h3 { letter-spacing:-.025em; font-weight:600 }
h1 { font-size:clamp(36px,3.6vw,50px); line-height:1.15 }
h2 { font-size:32px; line-height:1.25 }
html[data-theme] .site-header { background:var(--wb-background); border-color:var(--wb-border); box-shadow:0 1px 2px #00000008 }
.nav-row { min-height:64px; gap:24px }
html[data-theme] .brand { color:var(--wb-primary); font-size:20px; gap:10px; letter-spacing:0 }
.nav-row nav,.nav-actions { font-size:13px; gap:20px; font-weight:500 }
html[data-theme] .button { min-height:36px; padding:8px 16px; border-radius:6px; font-size:14px; font-weight:500; gap:8px; box-shadow:0 1px 2px #0000000d; transition:background .15s }
html[data-theme] .button:hover { transform:none; opacity:.9 }
html[data-theme] .button:not(.button-outline):not(.button-white):not(.button-dark-outline) { background:var(--wb-primary); border-color:var(--wb-primary) }
html[data-theme] .button-outline { background:transparent; border-color:var(--wb-border); color:var(--wb-text) }
.theme-toggle { width:36px; height:36px; border-radius:6px }
.hero { gap:48px; padding-block:64px; grid-template-columns:1fr 1.08fr }
.hero-lead { font-size:17px; font-weight:500 }
html[data-theme] .eyebrow { color:var(--wb-primary); font-size:11px; letter-spacing:.04em; font-weight:600 }
html[data-theme] .product-window,html[data-theme] .feature-preview,html[data-theme] .feature-code,html[data-theme] .comparison,html[data-theme] .context-panel { background:var(--wb-background); border:1px solid var(--wb-border); border-radius:8px; box-shadow:0 1px 3px #0000000a }
.hero-product { background:var(--wb-secondary); border:1px solid var(--wb-border); border-radius:10px; padding:16px }
html[data-theme] .window-bar { padding:12px; color:var(--wb-text); background:var(--wb-background); font-size:11px; gap:8px }
.window-logo { width:18px; height:20px }
.window-bar strong { color:var(--wb-primary); font-size:13px }
.window-state { color:var(--wb-muted); font-size:10px }
.workbench-tabs { display:flex; border-bottom:1px solid var(--wb-border); background:var(--wb-secondary); font-size:10px; color:var(--wb-muted) }
.workbench-tabs span { padding:10px 14px; border-right:1px solid var(--wb-border) }
.workbench-tabs .selected { color:var(--wb-primary); border-bottom:2px solid var(--wb-primary); background:var(--wb-background) }
.feature-preview { margin:16px 0 0 }
.panel-heading { padding:14px 16px; background:var(--wb-secondary) }
html[data-theme] .tiny-label { color:var(--wb-muted); font-size:9px; letter-spacing:.04em }
.mini-flow { padding-inline:16px }
.mini-flow li { font-size:11px; padding-block:14px }
html[data-theme] .pill,html[data-theme] .run-success { color:var(--wb-success); background:color-mix(in srgb,var(--wb-success) 10%,transparent); border:0; border-radius:4px; font-size:10px }
.integration-strip { border-top:0; padding-block:24px }
.section { padding-block:64px }
.split { gap:64px }
html[data-theme] .feature-section,html[data-theme] .difference-section { background:var(--wb-secondary); border-block:1px solid var(--wb-border) }
.context-panel { padding:24px }
.context-panel h3 { font-size:16px }
.context-list dt { font-size:14px }
html[data-theme] .context-list dd { font-size:12px; color:var(--wb-muted) }
html[data-theme] .context-icon,html[data-theme] .feature-symbol,html[data-theme] .purple { background:color-mix(in srgb,var(--wb-primary) 8%,transparent); color:var(--wb-primary); border:0; width:28px; height:28px; padding:5px; border-radius:4px }
.ui-icon { width:18px; height:18px; display:block; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.examples li:before { background:var(--wb-success); box-shadow:none }
html[data-theme] .runtime-card { background:var(--wb-background); color:var(--wb-text); border:1px solid var(--wb-border); border-radius:8px; padding:24px; box-shadow:0 1px 3px #0000000a }
html[data-theme] .runtime-card h3 { color:var(--wb-text); font-size:22px }
html[data-theme] .runtime-card>p:not(.eyebrow) { color:var(--wb-muted); font-size:13px }
html[data-theme] .runtime-card .runtime-close { color:var(--wb-text)!important }
.runtime-tags { color:var(--wb-text); font-size:11px }
.runtime-tags span:before { background:var(--wb-success) }
.run-gantt { background:var(--wb-background); border-color:var(--wb-border); border-radius:8px }
.run-gantt figcaption { background:var(--wb-secondary); border-color:var(--wb-border); padding:14px }
.run-gantt figcaption strong { color:var(--wb-text); font-size:14px }
.gantt-scale { background:var(--wb-tertiary); color:var(--wb-muted) }
.gantt-row { border-top:1px solid var(--wb-border); min-height:54px }
.gantt-row>span { color:var(--wb-text); font-family:var(--font) }
.gantt-row small { color:var(--wb-muted) }
.gantt-track { background:linear-gradient(to right,var(--wb-border) 1px,transparent 1px) 0 0/50% 100%; border-color:var(--wb-border) }
.run-gantt .gantt-row .gantt-bar { background:#00875a; border:0; color:white; border-radius:4px; font-size:9px; line-height:22px }
.gantt-footer { color:var(--wb-muted); border-color:var(--wb-border); background:var(--wb-secondary) }
.gantt-footer>span:last-child { color:var(--wb-muted) }
html[data-theme] th,html[data-theme] th:last-child { background:var(--wb-tertiary); color:var(--wb-text); font-size:13px }
html[data-theme] th:last-child { color:var(--wb-primary) }
html[data-theme] td,html[data-theme] td:last-child { color:var(--wb-muted); background:var(--wb-background); font-size:13px }
html[data-theme] td:last-child { color:var(--wb-text) }
.closing { background:#111827; border-top:1px solid #374151 }
html[data-theme] .closing .eyebrow { color:#93baff }
html[data-theme] .brand img,html[data-theme] img.reason-icon { filter:none }
@media(max-width:1050px) { .nav-row nav,.nav-actions { gap:12px } .hero { gap:28px } .split { gap:36px } }
@media(max-width:760px) { .hero { grid-template-columns:1fr; padding-block:40px } .nav-row { gap:12px } .nav-row nav { gap:10px; font-size:12px } .nav-actions { gap:10px } .brand { font-size:18px!important } .hero-product { padding:12px } .split { grid-template-columns:1fr } .section { padding-block:48px } h1 { font-size:38px } h2 { font-size:29px } .feature-preview { margin-left:0 } .runtime-card { padding:18px!important } }
@media(max-width:420px) { .nav-actions .sign-in { display:none } .nav-actions .button { font-size:12px; padding-inline:10px } .container { width:calc(100% - 32px) } }