/* Nyabooshka site · Graphite Glass pass (preview, 21 Oct 2026).
   Loaded after the build's stylesheet: only the tokens and the surfaces change, the layout stays.
   Values are the design system's tokens.json (semantic layer): bg graphite-900, surface-glass,
   glass-edge, ink / muted / dim, mint (text) + the cta gradient, eye-gold. Dark theme only. */

@font-face{font-family:Onest;src:url("./fonts/Onest-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Onest;src:url("./fonts/Onest-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Onest;src:url("./fonts/Onest-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:Onest;src:url("./fonts/Onest-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root:not([data-theme=light]){
  --bg:#121110;
  --surface:rgba(42,40,37,.55);          /* surface-glass */
  --surface-2:#2a2825;                   /* panel-raised */
  --ink:#ece7df;                         /* ink */
  --ink-bright:#f6f2ea;
  --muted:#aaa398;                       /* muted (7.4:1) */
  --dim:#938c81;
  --mint:#86e6c9;                        /* mint as text / icon */
  --mint-ink:#0b2a24;                    /* on-accent */
  --gold:#f2c14e;                        /* eye-gold */
  --line:rgba(255,245,230,.12);          /* glass-edge */
  --hairline:rgba(255,245,230,.08);
  --subtle:rgba(255,245,230,.04);        /* fill-quiet */
  --header:rgba(18,17,16,.9);
  --shadow:inset 0 1px 0 rgba(255,245,230,.08),0 10px 40px rgba(0,0,0,.45);   /* lift */
  --radius:22px;                         /* radius-surface */
  --ease:cubic-bezier(.25,.9,.3,1);
  --frost:blur(24px) saturate(160%);
}

/* The page: graphite with the gold wash top-left and a faint mint light bottom-right (as the apps). */
:root:not([data-theme=light]) body{
  /* The washes scroll with the page: background-attachment:fixed + backdrop-filter makes
     Safari paint stray bands over the content. */
  background:
    radial-gradient(ellipse 1200px 700px at 10% 0px,rgba(242,193,78,.10),transparent 60%),
    radial-gradient(ellipse 1100px 800px at 90% 100%,rgba(134,230,201,.06),transparent 60%),
    var(--bg);
}
/* Onest for text in both themes (owner, 21 Oct 2026); the wordmark keeps the build's Manrope. */
body{font-family:Onest,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-variant-numeric:tabular-nums}
h1,h2,h3,h4,.partner-art>span,.partner-rates strong,.package-card>strong,.token-destination{font-family:Onest,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
h1,h2,h3{font-weight:700;letter-spacing:-.02em}
h1{letter-spacing:-.025em}

:root:not([data-theme=light]) h1,
:root:not([data-theme=light]) h2{color:var(--ink-bright)}
:root:not([data-theme=light]) h2 em{color:var(--mint)}

/* Brand: the whole name in gold with the gold paw, as in the apps and the bot (owner, 21 Oct 2026);
   «VPN» quiet. The wordmark keeps the build's Manrope. */
/* Both themes: the light one uses its own darker gold (--gold #93651f on cream, ≥5:1). */
.wordmark,.wordmark svg,.welcome-brand{color:var(--gold)}
.wordmark small,.welcome-brand small{color:var(--muted);font-weight:500}
.brand-eyes{color:inherit}

/* Header: translucent graphite, no blur (owner, 21 Oct 2026 — Safari compositor artefacts). */
:root:not([data-theme=light]) .header{
  background:rgba(18,17,16,.94);
  border-bottom:1px solid var(--hairline);
}
:root:not([data-theme=light]) .header.scrolled{box-shadow:0 10px 40px rgba(0,0,0,.45)}

/* The one primary: the mint cta gradient, on-accent text, radius 14, accent shadow. */
:root:not([data-theme=light]) .button{
  background:linear-gradient(180deg,#a3f7de,#6fe0bf);
  color:var(--mint-ink);
  border-radius:14px;
  min-height:50px;
  box-shadow:0 8px 26px rgba(111,224,191,.22);
}
:root:not([data-theme=light]) .button.small{border-radius:12px;min-height:36px}
:root:not([data-theme=light]) .button.unavailable{
  background:var(--subtle);color:var(--muted);
  border:1px solid var(--line);box-shadow:none;
}
:root:not([data-theme=light]) .text-link{color:var(--mint)}
:root:not([data-theme=light]) .skip{background:linear-gradient(180deg,#a3f7de,#6fe0bf);color:var(--mint-ink)}

/* Glass surfaces: surface-glass + frost + the 1px warm rim + lift, radius 22. */
:root:not([data-theme=light]) .feature,
:root:not([data-theme=light]) .package-card,
:root:not([data-theme=light]) .partner-card,
:root:not([data-theme=light]) .development-card,
:root:not([data-theme=light]) .guide-panel,
:root:not([data-theme=light]) .device-stage,
:root:not([data-theme=light]) .nya-dialog,
:root:not([data-theme=light]) .download-dock{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
/* Frost only on the layers that float over content (the in-flow cards sit on solid graphite,
   and backdrop-filter on big scrolling blocks is what trips Safari's compositor). */
:root:not([data-theme=light]) .download-dock{background:rgba(30,29,27,.94)}
:root:not([data-theme=light]) .feature,
:root:not([data-theme=light]) .partner-card,
:root:not([data-theme=light]) .development-card,
:root:not([data-theme=light]) .guide-panel,
:root:not([data-theme=light]) .device-stage{border-radius:22px}
:root:not([data-theme=light]) .nya-dialog{border-radius:32px;background:#1d1c1a;box-shadow:inset 0 1px 0 rgba(255,245,230,.10),0 24px 70px rgba(0,0,0,.6)}
/* The sticky dialog header must match the dialog exactly (a translucent plate over a translucent
   sheet showed as a band), and the dialog itself needs no focus ring — its close button keeps one. */
:root:not([data-theme=light]) .dialog-top{background:#1d1c1a}
:root:not([data-theme=light]) .nya-dialog:focus-visible{outline:none}
:root:not([data-theme=light]) .package-card{border-radius:22px}

/* Quiet plates and lines inside glass: fill-quiet, hairlines. */
:root:not([data-theme=light]) .devices-section,
:root:not([data-theme=light]) .faq-section{background:var(--subtle);border-block:1px solid var(--hairline)}
:root:not([data-theme=light]) .faq-list details{border-bottom:1px solid var(--hairline)}
:root:not([data-theme=light]) .partner-rates,
:root:not([data-theme=light]) .package-download{border-color:var(--hairline)}
:root:not([data-theme=light]) .footer-bottom{border-top:1px solid var(--hairline)}
:root:not([data-theme=light]) .device-tabs{background:rgba(255,245,230,.08);border:0;border-radius:999px;padding:4px}
:root:not([data-theme=light]) .feature-icon{color:var(--mint);background:rgba(138,244,212,.14);border:0;border-radius:10px}
:root:not([data-theme=light]) .icon-button,
:root:not([data-theme=light]) .language-toggle{border-color:var(--line)}
:root:not([data-theme=light]) .icon-button:hover{background:var(--subtle)}
:root:not([data-theme=light]) .guide-track>button{border:1px solid var(--line);border-radius:14px;background:var(--subtle)}
:root:not([data-theme=light]) .outlined-tag{color:var(--gold);background:rgba(242,193,78,.14);border:0}
:root:not([data-theme=light]) .eyebrow{color:var(--dim);letter-spacing:.08em;text-transform:none}
:root:not([data-theme=light]) .status-dot{background:var(--mint);box-shadow:0 0 8px rgba(134,230,201,.6)}
:root:not([data-theme=light]) .help-topics button{border-radius:12px}
:root:not([data-theme=light]) .scene-caption{background:rgba(30,29,27,.85);color:var(--ink)}
:root:not([data-theme=light]) .gold{background:var(--gold)}

/* Selected tab / step / topic: the quiet mint-select plate with mint text (the design system's
   active tab), not a second filled button. */
:root:not([data-theme=light]) .guide-track>button[aria-selected=true],
:root:not([data-theme=light]) .device-tabs button[aria-selected=true],
:root:not([data-theme=light]) .device-tabs button[aria-selected=true]:hover,
:root:not([data-theme=light]) .help-topics button[aria-selected=true]{
  background:rgba(138,244,212,.14);
  color:var(--mint);
  border-color:rgba(138,244,212,.35);
  box-shadow:none;
}
:root:not([data-theme=light]) .guide-track>button[aria-selected=true]>span{color:var(--mint)}
:root:not([data-theme=light]) .device-tabs button[aria-selected=true] .eye-cut{fill:var(--mint)}


/* The design system's radii in both themes (owner, 21 Oct 2026): surfaces 22, sheets 32,
   buttons 14 (small 12), tiles 10, capsule tabs. */
:root{--radius:22px}
.button{border-radius:14px;min-height:50px}
.button.small{border-radius:12px;min-height:36px}
.feature,.partner-card,.development-card,.guide-panel,.device-stage,.package-card{border-radius:22px}
.nya-dialog{border-radius:32px}
.device-tabs{border-radius:999px;padding:4px}
/* The tabs are capsules like their track, and the focus ring hugs the same shape (owner, 21 Oct 2026). */
.device-tabs button{border-radius:999px}
.device-tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.feature-icon{border-radius:10px}
.guide-track>button{border-radius:14px}
.help-topics button{border-radius:12px}
.icon-button,.language-toggle{border-radius:999px}

/* The footer paw trail walks toward «see you around.»: the build rotates the paws 75° with
   `transform`, but its step animation (paw-step) animates `transform` too and drops the rotation,
   leaving the paws upright. The rotation moves to the separate `rotate` property, which the
   animation leaves alone (owner, 21 Oct 2026). */
.footer-route svg{transform:none;rotate:75deg}
.footer-route svg:nth-child(2n){transform:translateY(8px);rotate:75deg}

/* Without backdrop-filter the glass is solid panel. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root:not([data-theme=light]){--surface:#1d1c1a}
}