/* StudioKing by NIRVANI: shared styles for the static pages (developers, integrations, status, changelog, trust).
   Generated pages live at the site root; tools/site/build-pages.mjs writes them. Same tokens as the app. */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/inter-latin.woff2') format('woff2') }
@font-face{ font-family:'Playfair Display'; font-style:normal; font-weight:500 700; font-display:swap; src:url('fonts/playfair-latin.woff2') format('woff2') }
@font-face{ font-family:'Inter Fallback'; src:local('Arial'), local('Helvetica'); size-adjust:107.1%; ascent-override:90.4%; descent-override:22.5%; line-gap-override:0% }
@font-face{ font-family:'Playfair Fallback'; src:local('Georgia'), local('Times New Roman'); size-adjust:104.2%; ascent-override:103.9%; descent-override:24.1%; line-gap-override:0% }
:root{ --bg:#05070d; --panel:#0c1220; --panel-2:#121a2c; --line:rgba(255,255,255,.08); --line-2:rgba(198,161,91,.22); --text:#eef1f7; --muted:#aab3c6; --muted-2:#8d97ad;
  --gold:#c6a15b; --gold-soft:#e7cf9a; --nv-orange:#e8913a; --nv-orange-soft:#f4b46a; --ok:#5fd6a0; --warn:#e8b873; --bad:#e8807f;
  --sans:'Inter','Inter Fallback',system-ui,-apple-system,Segoe UI,sans-serif; --serif:'Playfair Display','Playfair Fallback',Georgia,serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }
*{ box-sizing:border-box }
:root{ color-scheme:dark }
html{ scroll-padding-top:84px; -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--bg); color:var(--text); font:16px/1.65 var(--sans); -webkit-font-smoothing:antialiased }
a{ color:var(--gold-soft); text-underline-offset:3px } a:hover{ color:var(--nv-orange-soft) }
:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; border-radius:4px }
.skip{ position:fixed; left:12px; top:-60px; z-index:50; background:var(--gold); color:#0a0a0a; padding:10px 14px; border-radius:10px; font-weight:700; text-decoration:none } .skip:focus{ top:12px }
.sh{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:18px; padding:12px clamp(16px,4vw,40px); background:rgba(5,7,13,.86); backdrop-filter:blur(12px); border-bottom:1px solid transparent; border-image:linear-gradient(90deg, rgba(198,161,91,.3), rgba(232,145,58,.45) 50%, rgba(198,161,91,.1)) 1 }
.sh-lock{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--text); min-width:0; flex:none }
.sh-crown{ width:30px; height:auto; filter:drop-shadow(0 2px 6px rgba(232,145,58,.35)) }
.sh-name{ font:700 18px var(--serif); white-space:nowrap }
.k{ background:linear-gradient(180deg,#fff4cf 8%,#f0d48f 38%,#c6a15b 70%,#9c7330 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#e7cf9a }
.sh-by{ display:flex; align-items:center; gap:5px; font:italic 13px var(--serif); color:#c9cfdb }
.sh-by img{ height:13px; width:auto }
.sh nav{ display:flex; gap:4px; margin-left:auto; flex-wrap:wrap }
.sh nav a{ color:var(--muted); text-decoration:none; font-weight:600; font-size:14px; padding:7px 11px; border-radius:9px }
.sh nav a:hover{ color:#fff; background:rgba(255,255,255,.05) }
.sh nav a[aria-current="page"]{ color:#fff; background:rgba(198,161,91,.14) }
.sh-cta{ flex:none; font-weight:700; font-size:14px; color:#0a0a0a; text-decoration:none; padding:9px 16px; border-radius:999px; background:linear-gradient(180deg,var(--gold-soft),var(--gold)) }
.sh-cta:hover{ color:#0a0a0a; filter:brightness(1.06) }
main{ max-width:1080px; margin:0 auto; padding:0 clamp(16px,4vw,40px) 80px }
main:focus{ outline:none }
.hero{ padding:clamp(48px,8vw,88px) 0 24px; text-align:left; border-bottom:1px solid var(--line) }
.kick{ margin:0 0 10px; font:600 12px var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--nv-orange-soft) }
h1{ margin:0; font:700 clamp(34px,5.4vw,56px)/1.08 var(--serif); letter-spacing:-.01em; text-wrap:balance }
.lede{ margin:14px 0 0; max-width:66ch; font-size:18px; color:#c9d0de }
h2{ margin:56px 0 12px; font:700 clamp(24px,3.2vw,32px)/1.2 var(--serif) }
h3{ margin:30px 0 8px; font:700 18px/1.3 var(--sans) }
p, li{ color:#cfd5e1 } p{ margin:10px 0 } ul, ol{ padding-left:22px } li{ margin:6px 0 }
.muted{ color:var(--muted) } small{ color:var(--muted-2) }
code{ font:500 .9em var(--mono); background:rgba(255,255,255,.06); border:1px solid var(--line); padding:1px 6px; border-radius:6px; color:#f3e3bb; overflow-wrap:anywhere }
pre{ position:relative; margin:14px 0; padding:16px 18px; background:#0a0f1c; border:1px solid var(--line); border-radius:12px; overflow:auto; font:500 13px/1.6 var(--mono); color:#e6e9f1 }
pre code{ background:none; border:0; padding:0; color:inherit; font:inherit; overflow-wrap:normal }
.copy{ position:absolute; top:8px; right:8px; font:600 12px var(--sans); color:#0a0a0a; background:var(--gold-soft); border:0; border-radius:8px; padding:5px 10px; cursor:pointer }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:14px 0; border:1px solid var(--line); border-radius:12px }
table{ width:100%; border-collapse:collapse; min-width:540px; font-size:14.5px }
th, td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top }
th{ font:600 12px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:rgba(255,255,255,.02) }
tr:last-child td{ border-bottom:0 }
.ep{ margin:28px 0; padding:22px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008)) }
.ep h3{ margin:0 0 6px; font:600 16px var(--mono); display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.verb{ font:700 11.5px var(--mono); padding:3px 8px; border-radius:6px; background:rgba(95,214,160,.14); color:var(--ok); letter-spacing:.06em }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:14px; margin:18px 0 }
.card{ padding:20px; border:1px solid var(--line); border-top-color:rgba(232,145,58,.2); border-radius:16px; background:rgba(255,255,255,.02) }
.card h3{ margin:0 0 6px }
.card p{ margin:0; font-size:14.5px; color:var(--muted) }
.steps{ counter-reset:s; list-style:none; padding:0 } .steps > li{ counter-increment:s; position:relative; padding-left:40px; margin:14px 0 }
.steps > li::before{ content:counter(s); position:absolute; left:0; top:2px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font:700 12px var(--mono); color:#1a0d02; background:linear-gradient(180deg,var(--nv-orange-soft),var(--nv-orange)) }
details{ margin:12px 0; border:1px solid var(--line); border-radius:12px; padding:0 16px; background:rgba(255,255,255,.015) }
summary{ cursor:pointer; padding:12px 0; font-weight:600; color:#fff }
.chips{ display:flex; flex-wrap:wrap; gap:7px; padding:4px 0 16px; list-style:none; margin:0 } .chips li{ margin:0; font:500 12.5px var(--mono); padding:4px 9px; border-radius:8px; border:1px solid var(--line); color:#e6e9f1 }
.rel{ position:relative; padding:0 0 26px 26px; border-left:1px solid var(--line-2); margin-left:6px } .rel::before{ content:""; position:absolute; left:-6px; top:8px; width:11px; height:11px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(198,161,91,.15) }
.rel h3{ margin:0 0 4px } .rel time{ font:600 12px var(--mono); color:var(--nv-orange-soft); letter-spacing:.1em }
.status-pill{ display:inline-flex; align-items:center; gap:10px; margin-top:20px; padding:10px 16px; border-radius:999px; border:1px solid var(--line); font-weight:700 }
.dot{ width:10px; height:10px; border-radius:50%; background:var(--muted-2); flex:none } .ok .dot{ background:var(--ok); box-shadow:0 0 0 4px rgba(95,214,160,.15) } .bad .dot{ background:var(--bad); box-shadow:0 0 0 4px rgba(232,128,127,.15) } .warn .dot{ background:var(--warn) }
.status-row td:first-child{ font-weight:600 }
.note{ margin:18px 0; padding:14px 16px; border-left:3px solid var(--nv-orange); background:rgba(232,145,58,.06); border-radius:0 10px 10px 0 }
.sf{ border-top:1px solid var(--line); padding:44px clamp(16px,4vw,40px) 40px; background:radial-gradient(60% 100% at 50% 100%, rgba(198,161,91,.08), transparent 70%) }
.sf-grid{ max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:28px }
.sf h2{ margin:0 0 10px; font:600 12px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--nv-orange-soft) }
.sf ul{ list-style:none; padding:0; margin:0 } .sf li{ margin:6px 0 } .sf a{ color:var(--muted); text-decoration:none } .sf a:hover{ color:#fff }
.sf-brand p{ color:var(--muted); font-size:14px; max-width:34ch }
.sf-legal{ max-width:1080px; margin:28px auto 0; padding-top:18px; border-top:1px solid var(--line); font-size:13px; color:var(--muted-2); display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between }
@media(max-width:900px){ .sh{ flex-wrap:wrap; row-gap:6px } .sh nav{ order:3; width:100%; margin-left:0; flex-wrap:nowrap; overflow-x:auto; gap:2px } .sh nav a{ white-space:nowrap; padding:6px 10px } .sh-cta{ margin-left:auto } .sf-grid{ grid-template-columns:1fr 1fr } }
@media(max-width:520px){ .sh-by{ display:none } .sf-grid{ grid-template-columns:1fr } .sh{ gap:10px } }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
@media (forced-colors: active){ .k{ -webkit-text-fill-color:CanvasText; background:none } }
/* NIRVANI ember accents (orange energy, gold King) */
::selection{ background:rgba(232,145,58,.38); color:#fff }
main h2::after{ content:""; display:block; width:46px; height:3px; margin-top:12px; border-radius:3px; background:linear-gradient(90deg,var(--nv-orange),var(--gold-soft)) }
.sh nav a[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--nv-orange) }
.sh nav a:hover{ color:var(--nv-orange-soft) }
.sh-cta{ box-shadow:0 6px 20px -10px rgba(232,145,58,.85) }
.card{ transition:border-color .18s, transform .18s } .card:hover{ border-color:rgba(232,145,58,.45); transform:translateY(-2px) }
.ep{ border-left:3px solid rgba(232,145,58,.55) }
th{ border-bottom-color:rgba(232,145,58,.3) }
summary::marker{ color:var(--nv-orange) }
.copy:hover{ background:linear-gradient(180deg,var(--nv-orange-soft),var(--nv-orange)) }
.hero{ border-bottom:1px solid transparent; border-image:linear-gradient(90deg, rgba(232,145,58,.5), rgba(198,161,91,.25) 60%, transparent) 1 }
@media (prefers-reduced-motion: reduce){ .card:hover{ transform:none } }
/* client sign-off page (/review) */
.rv section{ margin-top:8px }
.rv .status-pill{ margin-top:26px } .status-pill.ok{ border-color:rgba(95,214,160,.4) } .status-pill.warn{ border-color:rgba(232,145,58,.5) } .status-pill.bad{ border-color:rgba(232,128,127,.5) }
.rv-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:16px; margin:18px 0 }
.rv-kit{ margin:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel) }
.rv-kit figcaption{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:12px 14px; font-size:14px }
.rv-kit figcaption b{ font:700 15px var(--serif); color:#fff; flex:1 1 100% } .rv-kit figcaption span{ color:var(--muted) } .rv-kit figcaption code{ margin-left:auto }
.rv-stage{ position:relative; isolation:isolate; overflow:hidden; min-height:220px; display:flex; background-color:#0b1224 }
.rv-stage.tall{ min-height:min(62vh,460px) }
.rv-mock{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:16px 20px 22px; width:100% }
.rv-mk-nav{ display:flex; align-items:center; gap:14px; width:100%; font-size:12.5px; opacity:.92; margin-bottom:auto } .rv-mk-nav b{ font:700 14px var(--serif); margin-right:auto }
.rv-mk-h{ font:700 clamp(20px,2.6vw,28px)/1.15 var(--serif); margin-top:26px; max-width:22ch; text-wrap:balance }
.rv-stage.tall .rv-mk-h{ font-size:clamp(28px,4.6vw,48px); margin-top:auto }
.rv-mk-p{ font-size:14px; opacity:.88; max-width:44ch }
.rv-mk-b{ font:700 13px var(--sans); padding:9px 16px; border-radius:999px; background:var(--gold-soft); color:#0a0a0a }
.rv-page{ border:1px solid var(--line); border-radius:16px; overflow:hidden; margin:18px 0 } .rv-page .rv-stage{ min-height:260px }
.rv-form{ max-width:640px; margin-top:12px }
.rv-form label{ display:block; font-weight:600; margin:16px 0 6px; color:#fff }
.rv-form input:not([type=radio]), .rv-form textarea{ width:100%; font:15px var(--sans); color:var(--text); background:var(--panel-2); border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:11px 12px }
.rv-form input:focus, .rv-form textarea:focus{ outline:none; border-color:var(--nv-orange-soft); box-shadow:0 0 0 3px rgba(232,145,58,.2) }
.rv-form [aria-invalid="true"]{ border-color:var(--bad) }
.rv-choice{ border:0; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:10px } .rv-choice legend{ font-weight:600; color:#fff; margin-bottom:10px; padding:0 }
.rv-form .rv-opt{ display:flex; gap:12px; align-items:flex-start; margin:0; padding:14px; border:1px solid var(--line); border-radius:12px; cursor:pointer; background:rgba(255,255,255,.02) }
.rv-opt input{ margin-top:4px; accent-color:var(--nv-orange) } .rv-opt b{ display:block } .rv-opt small{ display:block; color:var(--muted); font-weight:400; font-size:13.5px }
.rv-opt:has(input:checked){ border-color:var(--gold); background:rgba(198,161,91,.08); box-shadow:inset 3px 0 0 var(--nv-orange) }
.rv-two{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.rv-err{ color:#f3a6a5; min-height:1.4em; margin:12px 0 0; font-weight:600 }
.rv-submit{ margin-top:8px; font:700 15px var(--sans); color:#0a0a0a; border:0; border-radius:999px; padding:12px 22px; cursor:pointer; background:linear-gradient(180deg,var(--gold-soft),var(--gold)); box-shadow:0 8px 24px -12px rgba(232,145,58,.9) }
.rv-submit:hover{ filter:brightness(1.06) } .rv-submit:disabled{ opacity:.6; cursor:progress }
.small{ font-size:13px }
.rv-thread{ list-style:none; padding:0; margin:14px 0 } .rv-entry{ padding:12px 14px; border:1px solid var(--line); border-left:3px solid var(--nv-orange); border-radius:0 12px 12px 0; margin:10px 0 }
.rv-entry.ok{ border-left-color:var(--ok) } .rv-entry-h{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; color:var(--muted) } .rv-entry-h b{ color:#fff }
.rv-entry-c{ margin:8px 0 0; white-space:pre-wrap; color:#dfe4ee }
@media(max-width:560px){ .rv-two{ grid-template-columns:1fr } }