/* Rivioo design system. Dev-tool language (Launch UI / Linear).
   Dark first. Tokens only in :root and the theme blocks; components use tokens. */
:root{
  --bg:#0a0a0a; --card:#101010; --card-2:#141414; --fg:#fafafa; --muted:#a1a1a1; --muted-2:#888888;
  --border:rgba(255,255,255,.1); --border-2:rgba(255,255,255,.16); --border-3:rgba(255,255,255,.06);
  --brand:hsl(38 96% 58%); --brand-fg:hsl(38 96% 70%); --brand-glow:hsla(38,96%,58%,.26); --brand-soft:hsla(38,96%,58%,.12);
  --glass:rgba(255,255,255,.05); --glass-h:rgba(255,255,255,.09);
  --primary:#fafafa; --primary-fg:#0a0a0a;
  --ok:#3ecf8e; --bad:#f0655d; --rate-5:hsl(38 96% 58%); --rate-4:hsl(44 88% 66%); --rate-3:#8a8a8a; --rate-2:hsl(18 78% 60%); --rate-1:hsl(4 82% 62%); --ok-soft:rgba(62,207,142,.12); --bad-soft:rgba(240,101,93,.12); --code-fn:hsl(210 90% 72%); --code-kw:hsl(268 85% 78%); --code-opt:hsl(186 70% 62%); --code-num:hsl(16 90% 70%); --code-var:hsl(330 80% 76%);
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;
  --card-pad:24px; --card-gap:16px; --page-gap:24px; --row-y:12px; --gutter:24px;
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --logo-invert:1;
  --mockup-shadow:0 0 50px -12px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.8);
  --nav-h:64px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#ffffff; --card:#fafafa; --card-2:#f4f4f4; --fg:#0a0a0a; --muted:#5c5c5c; --muted-2:#6e6e6e;
    --border:rgba(0,0,0,.09); --border-2:rgba(0,0,0,.14); --border-3:rgba(0,0,0,.05);
    --brand:hsl(32 96% 50%); --brand-fg:hsl(32 96% 33%); --brand-glow:hsla(32,96%,55%,.28); --brand-soft:hsla(32,96%,55%,.1);
    --glass:rgba(0,0,0,.04); --glass-h:rgba(0,0,0,.07);
    --primary:#0a0a0a; --primary-fg:#fafafa;
    --ok:#187b4f; --bad:#c6392f; --ok-soft:rgba(24,123,79,.11); --bad-soft:rgba(198,57,47,.09); --rate-5:hsl(32 96% 48%); --rate-4:hsl(40 90% 58%); --rate-3:#9a9a9a; --rate-2:hsl(16 80% 56%); --rate-1:#d44a42; --code-fn:hsl(214 80% 44%); --code-kw:hsl(265 60% 50%); --code-opt:hsl(188 85% 27%); --code-num:hsl(14 78% 43%); --code-var:hsl(330 65% 46%);
    --logo-invert:0;
    --mockup-shadow:0 0 50px -12px rgba(0,0,0,.2),0 40px 80px -30px rgba(0,0,0,.25);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#ffffff; --card:#fafafa; --card-2:#f4f4f4; --fg:#0a0a0a; --muted:#5c5c5c; --muted-2:#6e6e6e;
  --border:rgba(0,0,0,.09); --border-2:rgba(0,0,0,.14); --border-3:rgba(0,0,0,.05);
  --brand:hsl(32 96% 50%); --brand-fg:hsl(32 96% 33%); --brand-glow:hsla(32,96%,55%,.28); --brand-soft:hsla(32,96%,55%,.1);
  --glass:rgba(0,0,0,.04); --glass-h:rgba(0,0,0,.07);
  --primary:#0a0a0a; --primary-fg:#fafafa;
  --ok:#187b4f; --bad:#c6392f; --ok-soft:rgba(24,123,79,.11); --bad-soft:rgba(198,57,47,.09); --rate-5:hsl(32 96% 48%); --rate-4:hsl(40 90% 58%); --rate-3:#9a9a9a; --rate-2:hsl(16 80% 56%); --rate-1:#d44a42; --code-fn:hsl(214 80% 44%); --code-kw:hsl(265 60% 50%); --code-opt:hsl(188 85% 27%); --code-num:hsl(14 78% 43%); --code-var:hsl(330 65% 46%);
  --logo-invert:0;
  --mockup-shadow:0 0 50px -12px rgba(0,0,0,.2),0 40px 80px -30px rgba(0,0,0,.25);
  color-scheme:light;
}

/* base */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--brand);color:#0a0a0a}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
p{color:var(--muted)}
strong,b{font-weight:600;color:var(--fg)}
[hidden]{display:none!important}
.container{max-width:1280px;margin:0 auto;padding-inline:24px}
@media(min-width:768px){.container{padding-inline:32px}}
.container-narrow{max-width:880px;margin:0 auto;padding-inline:24px}
.section{padding-block:48px}
@media(min-width:768px){.section{padding-block:96px}}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
svg.i{width:16px;height:16px;flex:none}
.lucide,[data-lucide]{width:16px;height:16px;flex:none}
.grad{background:linear-gradient(180deg,var(--fg) 0%,var(--fg) 55%,var(--muted) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* motion */
.ap{opacity:0;transform:translateY(8px);filter:blur(4px);animation:appear .7s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}.d4{animation-delay:.45s}.d5{animation-delay:.6s}.d6{animation-delay:.8s}
@keyframes appear{to{opacity:1;transform:none;filter:none}}
.io{opacity:0;transform:translateY(10px);filter:blur(4px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),filter .7s}
.io.in{opacity:1;transform:none;filter:none}
.no-js .io,.no-io .io{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.ap,.io{opacity:1;transform:none;filter:none;animation:none;transition:none}}
.glow{position:absolute;left:50%;width:min(1200px,140vw);height:520px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(ellipse at center,var(--brand-glow) 0%,transparent 60%);filter:blur(30px);opacity:0;animation:appear-zoom 1.2s .5s ease-out forwards}
@keyframes appear-zoom{from{opacity:0;transform:translateX(-50%) scale(.8)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){.glow{opacity:1;animation:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border-radius:var(--r-md);font-weight:500;font-size:14px;height:40px;padding:0 16px;border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .15s,opacity .2s;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.btn-sm{height:34px;padding:0 12px;font-size:13px}
.btn-lg{height:44px;padding:0 24px;font-size:15px}
.btn-primary{background:var(--primary);color:var(--primary-fg)}
.btn-primary:hover{background:color-mix(in srgb,var(--primary) 88%,var(--muted))}
.btn-glow{background:var(--glass);border-color:var(--border);color:var(--fg);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.btn-glow:hover{background:var(--glass-h);border-color:var(--border-2)}
.btn-brand{background:linear-gradient(180deg,var(--brand-fg),var(--brand));color:#0a0a0a;font-weight:600}
.btn-brand:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--fg);background:var(--glass)}
.btn-danger{background:transparent;border-color:color-mix(in srgb,var(--bad) 40%,var(--border));color:var(--bad)}
.btn-danger:hover{background:var(--bad-soft)}
.btn-link{background:none;border:0;padding:0;height:auto;color:var(--brand-fg);font-weight:500}
.btn-link:hover{text-decoration:underline;text-underline-offset:3px}
.btn-block{width:100%}
.btn .lucide,.btn svg{width:16px;height:16px}

/* badge, tag, pill */
.badge{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 4px 0 12px;border:1px solid var(--border);border-radius:999px;background:var(--glass);font-size:13px;color:var(--muted);font-weight:500}
.badge a{display:inline-flex;align-items:center;gap:4px;color:var(--fg);padding:0 8px;height:22px;border-radius:999px;background:var(--glass)}
.badge a svg{width:12px;height:12px}
.tag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:0;border-radius:999px;background:var(--glass-h);font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap}
.tag i{width:6px;height:6px;border-radius:50%;background:var(--ok);display:inline-block}
.tag.ok{color:color-mix(in srgb,var(--ok) 85%,var(--fg));background:var(--ok-soft)}
.tag.bad{color:color-mix(in srgb,var(--bad) 85%,var(--fg));background:var(--bad-soft)}
.tag.brand{color:var(--brand-fg);background:var(--brand-soft)}

/* forms */
.field{display:flex;flex-direction:column;gap:8px}
.field>label,.f-label{font-size:13px;font-weight:500;color:var(--fg)}
.field .help{font-size:12.5px;color:var(--muted)}
.input,.select{height:40px;width:100%;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);padding:0 12px;color:var(--fg);font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s}
.input::placeholder{color:var(--muted-2)}
.input:focus,.select:focus{border-color:var(--border-2);box-shadow:0 0 0 3px var(--glass-h)}
.select{-webkit-appearance:none;appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.select option{color:#0a0a0a;background:#fff}
.check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--fg);cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--brand);margin:0}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;background:var(--glass);border:1px solid var(--border-3);border-radius:var(--r-md);padding:3px}
.seg>*{height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:7px;color:var(--muted);font-size:13px;font-weight:500;border:0;background:transparent;cursor:pointer;transition:background .2s,color .2s}
.seg>.active,.seg>.on{background:var(--glass-h);color:var(--fg)}
.seg svg,.seg .lucide{width:13px;height:13px}
.seg .brand-icon{width:13px;height:13px}

/* surfaces */
.card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card);padding:var(--card-pad)}
@media(min-width:768px){:root{--gutter:32px}}
@media(max-width:640px){:root{--card-pad:16px;--gutter:16px}}
.card-sm{padding:16px;border-radius:var(--r-md)}
.tile{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--card) 0%,var(--bg) 100%);padding:32px;display:flex;flex-direction:column;gap:8px}
.tile h3{font-size:22px}
.tile p{font-size:15px;max-width:44ch;line-height:1.5}
.mockup-frame{background:var(--glass);border:1px solid var(--border-3);border-radius:var(--r-xl);padding:8px}
.mockup{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--border-3);border-top-color:var(--border-2);box-shadow:var(--mockup-shadow);background:var(--card);text-align:left}
hr{border:0;border-top:1px solid var(--border)}
.divider{border:0;border-top:1px solid var(--border)}

/* code */
code{font-family:var(--mono);font-size:.9em}
:not(pre)>code{background:var(--glass);border:1px solid var(--border-3);border-radius:4px;padding:1px 5px;color:var(--fg)}
pre{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 18px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--fg)}
pre code{background:none;border:0;padding:0;font-size:inherit}
.code-block{border:1px solid var(--border);border-radius:var(--r-md);background:var(--card);overflow:hidden}
.code-block .bar{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted)}
.code-block .bar .lang{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2)}
.code-block pre{border:0;border-radius:0;background:transparent}
.code-block .bar .copy{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid var(--border);border-radius:var(--r-sm);background:none;color:var(--muted);font-size:12px;cursor:pointer}
.code-block .bar .lang+.copy{margin-left:0}
.code-block .bar .copy:hover{color:var(--fg);border-color:var(--border-2)}
.code-block .bar .copy .lucide{width:12px;height:12px}
.seg.inline{display:inline-grid;grid-auto-columns:auto;align-self:flex-start}
.seg.inline>*{padding:0 14px}
.seg.sm>*{height:28px;padding:0 12px;font-size:12.5px}
.seg>*:focus-visible{outline:2px solid var(--border-2);outline-offset:-2px}
.seg .brand-mark{width:14px;height:14px;flex:none}
.menu{position:absolute;right:8px;top:calc(100% - 6px);z-index:10;min-width:170px;padding:4px;border:1px solid var(--border-2);border-radius:var(--r-md);background:var(--card-2);box-shadow:var(--mockup-shadow)}
.menu button{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:0;border-radius:var(--r-sm);background:none;color:var(--fg);font-size:13px;text-align:left;cursor:pointer}
.menu button:hover,.menu button:focus-visible{background:var(--glass)}
.menu button.danger{color:var(--bad)}
.menu .lucide{width:14px;height:14px}
/* Code colours, applied by js/code-colors.js to every code block. Plain text stays --fg. */
.tok-k,pre .k{color:var(--brand-fg)}
.tok-s,pre .s{color:var(--ok)}
.tok-f,pre .f{color:var(--code-fn)}
.tok-w{color:var(--code-kw)}
.tok-o{color:var(--code-opt)}
.tok-n{color:var(--code-num)}
.tok-v{color:var(--code-var)}
.tok-p{color:var(--muted)}
.tok-c,pre .c{color:var(--muted-2)}

/* tables */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{font-weight:500;color:var(--muted);text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--glass);font-size:12px}
.table td{padding:11px 14px;border-bottom:1px solid var(--border-3);vertical-align:top}
.table tr:last-child td{border-bottom:0}
.table td.m,.table .m{font-family:var(--mono);color:var(--muted);font-size:12px}
.table-wrap{border:1px solid var(--border);border-radius:var(--r-md);overflow:auto}
/* list table: sits inside a card, which is its frame. Quiet headers, hairline rows, text flush with the card edge. */
.table.list{table-layout:fixed}
.table.list th{background:none;padding:0 16px 10px;font-size:12px;font-weight:500;color:var(--muted-2);border-bottom:1px solid var(--border)}
.table.list td{height:52px;padding:0 16px;border-bottom:1px solid var(--border-3);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table.list th:first-child,.table.list td:first-child{padding-left:0}
.table.list th:last-child,.table.list td:last-child{padding-right:0}
.table.list tbody:last-of-type tr:last-child td{border-bottom:0}
.stars{display:inline-flex;gap:2px}
.stars svg{width:11px;height:11px;fill:var(--border-2);stroke:none}
.stars svg.f{fill:var(--brand)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-3)}
.nav .container{height:var(--nav-h);display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center}
.logo img{height:20px;width:auto;filter:invert(var(--logo-invert))}
.nav-links{display:flex;gap:2px;margin-left:8px}
.nav-links a{font-size:14px;color:var(--muted);padding:8px 12px;border-radius:var(--r-sm);transition:color .2s,background .2s;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--fg);background:var(--glass)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-right .btn{height:36px;padding:0 14px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--border);border-radius:var(--r-sm);width:36px;height:36px;align-items:center;justify-content:center;cursor:pointer;color:var(--fg)}
.nav-mobile{display:none;border-top:1px solid var(--border-3);padding:8px 24px 16px;flex-direction:column;gap:2px;background:var(--bg)}
.nav-mobile a{padding:10px 8px;font-size:15px;border-radius:var(--r-sm)}
.nav-mobile a:not(.btn){color:var(--muted)}
.nav-mobile a:not(.btn):hover{color:var(--fg);background:var(--glass)}
.nav-mobile .btn{margin-top:8px}
.nav.open .nav-mobile{display:flex}
@media(max-width:860px){.nav-links,.nav-right{display:none}.burger{display:inline-flex}}

/* footer */
.site-footer{border-top:1px solid var(--border)}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-block:48px}
@media(max-width:800px){.foot{grid-template-columns:1fr 1fr}}
.foot h5{font-size:13px;font-weight:600;margin-bottom:14px;color:var(--fg)}
.foot a{display:block;font-size:14px;color:var(--muted);padding:4px 0}
.foot a:hover{color:var(--fg)}
.foot .brand img{height:20px;width:auto;filter:invert(var(--logo-invert))}
.foot .brand p{margin-top:14px;font-size:14px;color:var(--muted);max-width:28ch}
.foot-b{border-top:1px solid var(--border);padding-block:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted)}
.foot-b a{color:var(--muted)}
.foot-b a:hover{color:var(--fg)}

/* section heads */
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-bottom:48px}
.sec-head h2{font-size:clamp(28px,3.6vw,44px)}
.sec-head p{font-size:clamp(15px,1.3vw,18px);max-width:60ch;font-weight:500}

/* faq (details based) */
.faq-list{display:flex;flex-direction:column}
.q{border-bottom:1px solid var(--border)}
.q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;font-weight:500;font-size:16px;color:var(--fg)}
.q summary::-webkit-details-marker{display:none}
.q summary .lucide,.q summary svg{width:16px;height:16px;color:var(--muted);transition:transform .2s;flex:none}
.q[open] summary svg{transform:rotate(45deg)}
.q .a{padding:0 0 20px;color:var(--muted);font-size:15px;line-height:1.6;max-width:64ch}
.q .a a{color:var(--brand-fg)}

/* notices */
.notice{border:1px solid var(--border);border-radius:var(--r-md);background:var(--card);padding:12px 14px;font-size:14px;color:var(--fg);display:flex;gap:10px;align-items:flex-start}
.notice.ok{border-color:color-mix(in srgb,var(--ok) 40%,var(--border));background:var(--ok-soft)}
.notice.bad{border-color:color-mix(in srgb,var(--bad) 40%,var(--border));background:var(--bad-soft)}
.notice.brand{border-color:color-mix(in srgb,var(--brand) 40%,var(--border));background:var(--brand-soft)}
.notice .lucide{margin-top:2px}

/* app shell (workspace + hero mockup) */
.app-shell{display:grid;grid-template-columns:232px 1fr;min-height:100%}
.app-side{border-right:1px solid var(--border);padding:14px 10px;display:flex;flex-direction:column;gap:2px;background:var(--card-2);font-size:13px}
.app-side .brand{display:flex;align-items:center;gap:8px;padding:6px 8px 14px;font-weight:600;font-size:13px;color:var(--fg)}
.app-side .brand img{height:16px;width:auto;filter:invert(var(--logo-invert))}
.app-side .brand span{color:var(--muted);font-weight:400}
.app-side a,.app-side button{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r-sm);color:var(--muted);font-size:13px;width:100%;text-align:left;background:none;border:0;cursor:pointer;transition:background .15s,color .15s}
.app-side a:hover,.app-side button:hover{color:var(--fg);background:var(--glass)}
.app-side a svg,.app-side button svg,.app-side .lucide{width:15px;height:15px}
.app-side .on,.app-side .selected,.app-side [aria-current="page"]{background:var(--glass-h);color:var(--fg)}
.app-side .sec{font-size:11px;color:var(--muted-2);padding:14px 8px 4px;font-weight:500;letter-spacing:.02em}
.app-side .bottom{margin-top:auto;padding:12px 8px 4px;font-size:12px;color:var(--muted-2);font-family:var(--mono);word-break:break-all}
.app-top{height:48px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:0 18px;color:var(--muted);font-size:13px}
.app-top b{color:var(--fg);font-weight:500}
.app-top .right{margin-left:auto;display:flex;gap:8px;align-items:center}
@media(max-width:860px){.app-shell{grid-template-columns:1fr}.app-side{border-right:0;border-bottom:1px solid var(--border);flex-direction:row;flex-wrap:wrap;gap:4px;padding:10px}.app-side .sec,.app-side .bottom,.app-side .brand{display:none}.app-side a,.app-side button{width:auto}}

/* stat + meter */
.stat{display:flex;flex-direction:column;gap:8px}
.stat .l{font-size:12px;color:var(--muted);font-weight:500}
.stat .big{font-size:28px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--fg)}
.stat .big small{font-size:13px;color:var(--muted);font-weight:400;letter-spacing:0}
.meter{height:6px;background:var(--glass-h);border-radius:3px;overflow:hidden}
.meter i,.meter>span{display:block;height:100%;background:var(--brand);border-radius:3px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
/* charts: one hue per chart, flat marks, hairline solid baselines */
.chart-tip{position:absolute;z-index:5;pointer-events:none;display:flex;flex-direction:column;gap:1px;padding:6px 9px;border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--card-2);font-size:12px;line-height:1.4;color:var(--muted);white-space:nowrap;transform:translate(-50%,calc(-100% - 10px))}
.chart-tip b{color:var(--fg);font-weight:600}
.chart-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--muted-2)}
/* quota meter: one hue brightening toward the filled edge; the only glow in the workspace sits at that edge ("you are here") and goes out at 100% */
/* the track clips the glow, so it only lights the track just ahead of the fill */
.meter-glow{position:relative;height:10px;margin:0;border-radius:5px;background:var(--glass-h);overflow:hidden}
.meter-glow .fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:5px;background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 30%,transparent),var(--brand));transition:width .7s cubic-bezier(.2,.7,.2,1)}
.meter-glow .fill::after{content:"";position:absolute;right:-18px;top:50%;width:56px;height:36px;transform:translateY(-50%);background:radial-gradient(ellipse at center,var(--brand-glow),transparent 70%);pointer-events:none}
.meter-glow.empty .fill::after{display:none}
.meter-glow.over .fill{background:var(--bad)}
.meter-glow.over .fill::after{display:none}
@media(prefers-reduced-motion:reduce){.meter-glow .fill{transition:none}}
.spark{display:flex;gap:6px;align-items:flex-end;height:44px;border-bottom:1px solid var(--border)}
.spark .spark-day{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;cursor:default;outline:none}
.spark .bar{width:100%;max-width:24px;display:flex;flex-direction:column;gap:2px}
.spark .bar b{display:block;background:var(--muted-2)}
.spark .bar b:first-child{border-radius:4px 4px 0 0}
.spark .spark-day.today .bar b.ok{background:linear-gradient(0deg,color-mix(in srgb,var(--brand) 30%,transparent),var(--brand))}
.spark .bar b.err{background:var(--bad)}
.spark .spark-day:hover .bar b.ok,.spark .spark-day:focus-visible .bar b.ok{filter:brightness(1.25)}
progress.meter{-webkit-appearance:none;appearance:none;width:100%;border:0}
progress.meter::-webkit-progress-bar{background:var(--glass-h);border-radius:3px}
progress.meter::-webkit-progress-value{background:var(--brand);border-radius:3px}
progress.meter::-moz-progress-bar{background:var(--brand);border-radius:3px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--border);border-radius:var(--r-md);padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.step .st{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.step .dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border-2);display:grid;place-items:center;flex:none}
.step.done .dot{background:var(--ok);border-color:var(--ok)}
.step.done .dot svg{width:9px;height:9px;color:#0a0a0a;stroke-width:3}
.step.now{border-color:color-mix(in srgb,var(--brand) 50%,var(--border))}
.step.now .dot{border-color:var(--brand);background:var(--brand)}
.step h4{font-size:13.5px;font-weight:500;color:var(--fg)}
.step a{font-size:12.5px;color:var(--brand-fg)}
/* checklist variant: equal-height cards; status and actions sit in fixed slots so a state change never resizes the row */
.steps.checklist{grid-template-columns:repeat(3,1fr);gap:12px;list-style:none}
@media(max-width:900px){.steps.checklist{grid-template-columns:1fr}}
.checklist .step{padding:16px;gap:6px}
.checklist .st{min-height:18px}
.checklist .status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--brand-fg);font-weight:500}
.checklist .status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)}
.checklist .step h4{font-size:14px;margin-top:4px}
.checklist .step p{font-size:13px;line-height:1.5;color:var(--muted);min-height:3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.checklist .step.locked h4{color:var(--muted)}
.checklist .step-foot{margin-top:auto;padding-top:10px;display:flex;gap:8px;flex-wrap:wrap}

/* dialog */
dialog{margin:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card);color:var(--fg);max-width:440px;padding:var(--card-pad);box-shadow:var(--mockup-shadow)}
dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
dialog h2{font-size:18px;margin-bottom:8px}
dialog{width:min(440px,calc(100vw - 32px))}
dialog p{font-size:14px;line-height:1.5}
dialog .field{margin-top:20px}
dialog .row{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}

/* prose (blog, legal, docs) */
.prose{color:var(--muted);font-size:16px;line-height:1.75}
.prose h1{color:var(--fg);font-size:clamp(30px,4vw,44px);margin:0 0 16px}
.prose h2{color:var(--fg);font-size:clamp(22px,2.6vw,28px);margin:48px 0 12px}
.prose h3{color:var(--fg);font-size:19px;margin:32px 0 10px}
.prose p,.prose ul,.prose ol{margin:0 0 18px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:6px 0}
.prose a{color:var(--brand-fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.prose a:hover{text-decoration-color:var(--brand-fg)}
.prose strong{color:var(--fg)}
.prose blockquote{border-left:2px solid var(--brand);padding:4px 0 4px 18px;margin:0 0 18px;color:var(--fg)}
.prose img{border-radius:var(--r-md);border:1px solid var(--border)}
.prose table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.prose th{color:var(--muted);font-weight:500;font-size:12.5px}
.prose pre{margin:0 0 20px}
/* cookie choice (public/js/consent.js) */
.consent{position:fixed;left:16px;bottom:16px;z-index:60;width:min(400px,calc(100vw - 32px));background:var(--card);border:1px solid var(--border-2);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:12px}
.consent p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.consent a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.consent-actions{display:flex;gap:8px;justify-content:flex-end}
.consent-actions .btn{min-width:88px}