/* self-hosted fonts (assets/fonts, from Google Fonts): latin + latin-ext, variable where available.
   block, not swap: the files are local and preloaded, so text waits a beat instead of flashing a fallback. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:block;src:url("assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:block;src:url("assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 700;font-display:block;src:url("assets/fonts/source-serif-4-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 700;font-display:block;src:url("assets/fonts/source-serif-4-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:block;src:url("assets/fonts/space-mono-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:block;src:url("assets/fonts/space-mono-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:block;src:url("assets/fonts/space-mono-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:block;src:url("assets/fonts/space-mono-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

:root{
  /* brand palette: bananarky-research-and-direction.html */
  --peel:#FEBB11;
  --brand-yellow:#FEBB11;   /* fixed: the logo yellow, never re-themed */
  --orange:#F5831F;
  --cherry:#F3755E;
  --bruise:#035388;
  --leaf:#0072BB;
  /* tints/shades: assets/colors all.png (yellow + gray rows) */
  --peel-2:#FED077;
  --peel-3:#FFECAC;
  --peel-4:#FFFBE5;
  --peel-deep:#D09C2A;
  --peel-dark:#544118;
  --peel-ink:#3C2D13;
  --ink:#050708;
  --ink-2:#141516;
  --ink-3:#212222;
  --ink-4:#3E4140;
  --ash:#ABADAA;

  --paper:#FFF7E3;
  --card:#FCFEFF;
  --clay:#895C24;
  --cocoa:#5F4419;
  --bark:#362913;

  /* theme tokens (dark default) */
  --bg:var(--ink);
  --surface:var(--ink-2);
  --line:rgba(254,187,17,.28);
  --line-strong:var(--peel);
  --text:var(--peel-3);
  --text-dim:var(--peel-2);
  --text-mute:rgba(254,208,119,.62);
  --heading:var(--peel-4);
  --accent-text:var(--peel);
  --hover:var(--peel-ink);
  --nav-bg:rgba(5,7,8,.86);
  --spec-bg:rgba(20,21,22,.75);
  --btn-shadow:var(--peel-dark);
  --grid:rgba(254,187,17,.06);
  --glow:rgba(254,187,17,.16);
  --input-bg:var(--peel-4);
  --on-peel:var(--ink);
  color-scheme:dark;

  --sans:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --mono:"Space Mono",ui-monospace,Menlo,monospace;
  --wrap:1180px;
}
:root[data-theme="light"]{
  --cherry:#ED1C24;
  --bg:var(--paper);
  --surface:var(--card);
  --line:rgba(5,7,8,.22);
  --line-strong:var(--ink);
  --text:var(--ink);
  --text-dim:var(--cocoa);
  --text-mute:var(--clay);
  --heading:var(--ink);
  --accent-text:var(--ink);
  --hover:var(--peel-3);
  --nav-bg:rgba(255,247,227,.88);
  --spec-bg:rgba(252,254,255,.7);
  --btn-shadow:var(--ink);
  --grid:rgba(5,7,8,.05);
  --glow:rgba(255,255,255,.9);
  --input-bg:var(--card);
  color-scheme:light;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{overflow-x:hidden;}
.wrap>*{min-width:0;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--peel);color:var(--on-peel);}
a{color:inherit;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}
h1,h2,h3{font-family:var(--sans);letter-spacing:-.035em;line-height:.96;margin:0;font-weight:800;}
.eyebrow{
  font-family:var(--serif);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--accent-text);
}
:focus-visible{outline:3px solid var(--cherry);outline-offset:3px;}

/* light mode: yellow becomes paint, not type */
:root[data-theme="light"] .hero h1 em,
:root[data-theme="light"] .sec-head h2 em,
:root[data-theme="light"] .voice .big em{
  color:var(--on-peel);padding:0 .08em;margin:0 -.04em;
  background-image:linear-gradient(var(--peel),var(--peel));background-repeat:no-repeat;
  background-size:100% 72%;background-position:0 58%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
:root[data-theme="light"] .hero h1 .strike{color:var(--clay);}
.hero-mark .lk-light{display:none;}
:root[data-theme="light"] .hero-mark .lk-dark{display:none;}
:root[data-theme="light"] .hero-mark .lk-light{display:block;filter:none;}
:root[data-theme="light"] .prod .meta .st.soon{background:var(--peel-3);color:var(--ink);}
:root[data-theme="light"] .cta{border-top:2px solid var(--ink);}
:root[data-theme="light"] .btn.ghost:hover{background:var(--peel-3);}

/* ---------- theme toggle ---------- */
.theme{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:2px solid var(--line-strong);background:transparent;color:var(--accent-text);cursor:pointer;padding:0;
}
.theme:hover{background:var(--hover);}
.theme svg{width:18px;height:18px;display:block;}
.theme .sun{display:none;}
:root[data-theme="light"] .theme .sun{display:block;}
:root[data-theme="light"] .theme .moon{display:none;}
.nav .right{display:flex;align-items:center;gap:12px;margin-left:auto;}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--nav-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:2px solid var(--line-strong);
}
.nav .wrap{display:flex;align-items:center;justify-content:flex-start;height:64px;gap:36px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.brand svg{height:30px;width:auto;display:block;}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;font-family:var(--serif);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;}
.nav ul a{text-decoration:none;color:var(--text-dim);}
.nav ul a:hover{color:var(--accent-text);}
@media(max-width:720px){.nav .wrap{gap:16px;}.nav ul{gap:16px;}}
.btn{
  display:inline-block;font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:0;
  padding:13px 22px;border:2px solid var(--line-strong);color:var(--on-peel);background:var(--peel);text-decoration:none;
  transition:transform .12s ease,box-shadow .12s ease;box-shadow:4px 4px 0 var(--btn-shadow);
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--btn-shadow);}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--btn-shadow);}
.btn.ghost{background:transparent;color:var(--accent-text);box-shadow:none;}
.btn.ghost:hover{background:color-mix(in srgb,var(--peel) 10%,transparent);transform:none;box-shadow:none;}
.nav .btn{padding:9px 16px;font-size:12px;box-shadow:none;}
.nav .btn:hover{transform:none;box-shadow:none;background:var(--peel-2);}
.nav .btn.icon img{display:none;height:24px;width:auto;}
@media(max-width:720px){.nav .btn.icon{padding:6px 14px;line-height:0;}.nav .btn.icon .label{display:none;}.nav .btn.icon img{display:block;}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(56px,9vw,120px) 0 clamp(64px,9vw,110px);border-bottom:2px solid var(--line-strong);}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 78% 20%,var(--glow),transparent 70%),
    repeating-linear-gradient(0deg,transparent 0 47px,var(--grid) 47px 48px),
    repeating-linear-gradient(90deg,transparent 0 47px,var(--grid) 47px 48px);
  mask-image:linear-gradient(180deg,#000 40%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);
}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:stretch;}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;}}
.hero-side{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,4vw,48px);}
.hero-mark{display:flex;justify-content:center;}
.hero-mark img{display:block;width:min(100%,300px);height:auto;filter:drop-shadow(0 10px 30px color-mix(in srgb,var(--peel) 25%,transparent));}
@media(max-width:900px){.hero-side{display:contents;}.hero-mark{order:-1;justify-content:center;margin-bottom:8px;}.hero-mark img{width:min(100%,260px);}}
.hero h1{
  font-size:clamp(46px,8.4vw,120px);text-transform:uppercase;color:var(--heading);
  margin:0 0 .28em;
}
.hero h1 em{font-style:normal;color:var(--accent-text);}
.hero h1 .strike{position:relative;color:var(--text-mute);}
.hero h1 .strike::after{content:"";position:absolute;left:-.04em;right:-.04em;top:52%;height:.11em;background:var(--cherry);transform:rotate(-2.5deg);}
.hero .lede{font-size:clamp(19px,2.2vw,25px);font-weight:500;line-height:1.3;max-width:30ch;color:var(--text-dim);margin:0 0 34px;}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.spec{
  border:2px solid var(--line-strong);padding:22px 24px;background:var(--spec-bg);
  font-family:var(--serif);font-size:13px;letter-spacing:.06em;
}
.spec .row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px dashed var(--line);}
.spec .row:first-of-type{border-top:none;padding-top:0;}
.spec .k{text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--text-mute);font-weight:700;}
.spec .v{font-family:var(--mono);font-size:12.5px;letter-spacing:0;color:var(--text);text-align:right;}
.spec .v b{color:var(--accent-text);}
.spec .title{font-family:var(--sans);font-weight:800;letter-spacing:-.03em;font-size:20px;color:var(--accent-text);margin:0 0 12px;text-transform:uppercase;}

/* ---------- sections ---------- */
section{padding:clamp(70px,9vw,120px) 0;border-bottom:1px solid var(--line);}
.sec-head{display:grid;gap:20px;margin-bottom:clamp(34px,5vw,56px);}
.sec-head h2{font-size:clamp(34px,5.4vw,68px);color:var(--heading);}
.sec-head h2 em{font-style:normal;color:var(--accent-text);}
.sec-head p{margin:0;max-width:60ch;color:var(--text-mute);font-size:18px;}

/* positioning */
.spine{background:var(--ink-2);color:var(--peel-3);}
:root[data-theme="light"] .spine{background:var(--bark);}
.spine .eyebrow{color:var(--peel);}
.spine .quote{font-size:clamp(26px,4.4vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.08;max-width:24ch;margin:0;color:var(--peel-4);}
.spine .quote .hl{color:var(--peel);}
.spine .quote .hl2{color:var(--text-mute);text-decoration:line-through;text-decoration-color:var(--cherry);text-decoration-thickness:.08em;}
.spine .foot{margin:28px 0 0;font-family:var(--serif);color:color-mix(in srgb,var(--peel-2) 62%,transparent);max-width:56ch;font-size:16px;}
.spine .foot b{color:var(--peel);font-weight:600;}

/* products */
.prods{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:2px solid var(--line-strong);}
@media(max-width:760px){.prods{grid-template-columns:1fr;}}
.prod{
  padding:30px 28px 32px;border-right:2px solid var(--line-strong);border-bottom:2px solid var(--line-strong);
  background:var(--bg);position:relative;display:flex;flex-direction:column;gap:14px;
  transition:background .15s ease;
}
.prod:nth-child(2n){border-right:none;}
.prod:nth-last-child(-n+2){border-bottom:none;}
@media(max-width:760px){.prod{border-right:none;}.prod:nth-last-child(2){border-bottom:2px solid var(--line-strong);}}
.prod:hover{background:var(--hover);}
.prod .meta{display:flex;justify-content:space-between;align-items:center;font-family:var(--serif);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--text-mute);}
.prod .meta .st{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--on-peel);background:var(--peel);padding:4px 11px;border-radius:999px;}
.prod .meta .st.soon{color:var(--peel-3);background:var(--peel-dark);}
.prod h3{font-size:clamp(26px,3vw,36px);color:var(--accent-text);}
.prod h3 small{display:block;font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:0;color:var(--text-dim);margin-top:8px;line-height:1.4;text-transform:none;}
.prod p{margin:0;color:var(--text-dim);font-size:16px;flex:1;}
.prod .take{font-family:var(--serif);font-size:13px;color:var(--text-mute);border-top:1px dashed var(--line);padding-top:12px;}
.prod .take b{color:var(--heading);font-weight:600;}
.prod .take .src{color:var(--cherry);}

/* manual / principles */
.manual{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media(max-width:860px){.manual{grid-template-columns:1fr;}}
.rule{border-top:2px solid var(--line-strong);padding-top:20px;}
.rule h3{font-size:28px;color:var(--heading);margin:14px 0 12px;}
.rule p{margin:0;color:var(--text-dim);font-size:16px;}
.rule p + p{margin-top:10px;}
.rule .no{color:var(--cherry);font-family:var(--serif);font-weight:700;}

/* diagram */
.diagram{margin-top:clamp(40px,6vw,70px);border:2px solid var(--line-strong);display:grid;grid-template-columns:1fr 1fr;}
@media(max-width:760px){.diagram{grid-template-columns:1fr;}}
.diagram > div{padding:28px;}
.diagram .rent{border-right:2px solid var(--line-strong);background:var(--surface);}
@media(max-width:760px){.diagram .rent{border-right:none;border-bottom:2px solid var(--line-strong);}}
.diagram .own{background:var(--peel);color:var(--on-peel);}
.diagram h4{font-family:var(--sans);font-weight:800;letter-spacing:-.03em;font-size:clamp(24px,3vw,34px);margin:0 0 16px;line-height:1;}
.diagram .rent h4{color:var(--text-dim);}
.diagram ul{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:13.5px;}
.diagram li{padding:8px 0 8px 24px;position:relative;border-top:1px dashed color-mix(in srgb,var(--peel) 25%,transparent);}
.diagram .own li{border-color:color-mix(in srgb,var(--ink) 25%,transparent);}
.diagram li:first-child{border-top:none;}
.diagram .rent li::before{content:"✕";position:absolute;left:0;color:var(--cherry);font-weight:700;}
.diagram .own li::before{content:"✓";position:absolute;left:0;font-weight:700;}

/* voice */
.voice{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start;}
@media(max-width:860px){.voice{grid-template-columns:1fr;}}
.voice .big{font-size:clamp(28px,4vw,48px);font-weight:800;letter-spacing:-.035em;line-height:1.04;color:var(--heading);margin:0 0 22px;}
.voice .big em{font-style:normal;color:var(--accent-text);}
.voice p{color:var(--text-dim);margin:0 0 14px;max-width:52ch;}
.traits{border:2px solid var(--line-strong);display:grid;grid-template-columns:1fr 1fr;}
.trait{padding:20px 22px;border-right:2px solid var(--line-strong);border-bottom:2px solid var(--line-strong);}
.trait:nth-child(2n){border-right:none;}
.trait:nth-last-child(-n+2){border-bottom:none;}
.trait .k{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--accent-text);}
.trait p{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--text-mute);font-family:var(--mono);}

/* cta */
.cta{background:var(--peel);color:var(--on-peel);border-bottom:none;position:relative;overflow:hidden;}
.cta .wrap{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center;position:relative;}
@media(max-width:860px){.cta .wrap{grid-template-columns:1fr;}}
.cta h2{font-size:clamp(38px,6.2vw,84px);text-transform:uppercase;color:var(--on-peel);}
.cta .cta-icon{display:block;height:clamp(64px,8vw,100px);width:auto;margin:0 0 18px;}
.cta p{margin:14px 0 0;font-size:18px;max-width:46ch;font-weight:500;color:var(--peel-ink);}
.cta form{display:flex;gap:0;max-width:440px;width:100%;}
.cta input{flex:1;min-width:0;font:inherit;font-size:15px;padding:14px 16px;border:2px solid var(--ink);background:var(--input-bg);color:var(--ink);}
.cta input::placeholder{color:var(--peel-dark);}
.cta button{font:inherit;font-family:var(--mono);font-weight:700;font-size:14px;padding:14px 20px;border:2px solid var(--ink);border-left:none;background:var(--ink);color:var(--peel);cursor:pointer;}
.cta button:hover{background:var(--ink-3);}
.cta small{display:block;margin-top:10px;font-family:var(--mono);font-size:12px;letter-spacing:0;color:var(--peel-ink);}
.cta .bigmark{position:absolute;right:-40px;bottom:-80px;height:420px;width:auto;opacity:.12;pointer-events:none;}
@media(max-width:860px){.cta .bigmark{display:none;}}

/* footer */
footer{background:var(--bg);border-top:2px solid var(--line-strong);padding:36px 0 40px;font-family:var(--serif);font-size:13px;letter-spacing:.05em;color:var(--text-mute);}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
footer .brand img{display:block;height:34px;width:auto;}
footer ul{list-style:none;margin:0;padding:0;display:flex;gap:22px;text-transform:uppercase;font-size:11px;letter-spacing:.16em;font-weight:700;}
footer a{text-decoration:none;color:var(--text-dim);}
footer a:hover{color:var(--accent-text);}
footer .ook-item{display:none;}
@media(hover:none) and (pointer:coarse){footer .ook-item{display:block;}}
footer .copy{font-family:var(--mono);font-size:12px;letter-spacing:0;}

/* ---------- formerly inline ---------- */
.svg-defs{position:absolute;width:0;height:0;}
.spine .quote{margin-top:20px;}
#voice{background:var(--surface);}
.visually-hidden{position:absolute;left:-9999px;}

/* ============================================================
   Style guide (styleguide.html only)
   ============================================================ */
.sg-intro{color:var(--text-dim);max-width:60ch;margin:0;font-size:18px;}
.sg-block{margin-top:clamp(34px,5vw,56px);}
.sg-block + .sg-block{padding-top:clamp(30px,4vw,44px);border-top:1px dashed var(--line);}
.sg-label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 16px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute);font-weight:700;}
.sg-label code{font-weight:400;text-transform:none;letter-spacing:0;color:var(--accent-text);}
.sg-note{font-family:var(--serif);font-size:15px;color:var(--text-mute);max-width:64ch;margin:12px 0 0;}
.sg-note b{color:var(--heading);font-weight:600;}
code{font-family:var(--mono);font-size:.85em;}

/* swatches */
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0;border:2px solid var(--line-strong);}
.sg-row10{grid-template-columns:repeat(10,1fr);}
@media(max-width:900px){.sg-row10{grid-template-columns:repeat(5,1fr);}}
@media(max-width:520px){.sg-row10{grid-template-columns:repeat(2,1fr);}}
.sg-row10 .sg-sw{aspect-ratio:1/1.35;padding:10px 8px;}
.sg-row10 .sg-sw .n{font-size:12px;}
.sg-row10 .sg-sw .h{font-size:10px;}
.sg-row10 .sg-sw .t{font-family:var(--mono);font-size:9.5px;text-transform:none;letter-spacing:0;}
.sg-sw{aspect-ratio:1/1.05;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;border-right:2px solid var(--line-strong);border-bottom:2px solid var(--line-strong);}
.sg-sw .n{font-family:var(--sans);font-weight:800;letter-spacing:-.02em;font-size:15px;line-height:1.05;}
.sg-sw .h{font-family:var(--mono);font-size:11px;}
.sg-sw .t{font-family:var(--serif);font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.75;}
.sg-sw.on-dark{color:var(--peel-4);}
.sg-sw.on-light{color:var(--ink);}

/* palette rows sampled from assets/colors all.png */
.c-cherry-0{background:#361113;}
.c-cherry-1{background:#4E1113;}
.c-cherry-2{background:#781114;}
.c-cherry-3{background:#9E1C20;}
.c-cherry-4{background:#C62127;}
.c-cherry-5{background:#ED1C24;}
.c-cherry-6{background:#F04F3A;}
.c-cherry-7{background:#F3755E;}
.c-cherry-8{background:#FF9494;}
.c-cherry-9{background:#FDE6E4;}
.c-orange-0{background:#3B190B;}
.c-orange-1{background:#522B0E;}
.c-orange-2{background:#7C421B;}
.c-orange-3{background:#A15725;}
.c-orange-4{background:#CC6F29;}
.c-orange-5{background:#F5831F;}
.c-orange-6{background:#F79257;}
.c-orange-7{background:#FAB07A;}
.c-orange-8{background:#FDD1B2;}
.c-orange-9{background:#FEF2E2;}
.c-peel-0{background:#3C2D13;}
.c-peel-1{background:#544118;}
.c-peel-2{background:#7E6025;}
.c-peel-3{background:#A67F2D;}
.c-peel-4{background:#D09C2A;}
.c-peel-5{background:#FEBB11;}
.c-peel-6{background:#FEC24C;}
.c-peel-7{background:#FED077;}
.c-peel-8{background:#FFECAC;}
.c-peel-9{background:#FFFBE5;}
.c-clay-0{background:#26130D;}
.c-clay-1{background:#3F2C12;}
.c-clay-2{background:#5E3F16;}
.c-clay-3{background:#6B4A1C;}
.c-clay-4{background:#7A5321;}
.c-clay-5{background:#895C24;}
.c-clay-6{background:#8F6F44;}
.c-clay-7{background:#A88E6E;}
.c-clay-8{background:#C0B099;}
.c-clay-9{background:#E7DFD6;}
.c-bark-0{background:#20100C;}
.c-bark-1{background:#281B11;}
.c-bark-2{background:var(--bark);}
.c-bark-3{background:#453315;}
.c-bark-4{background:#533C17;}
.c-bark-5{background:#5F4419;}
.c-bark-6{background:#6B5634;}
.c-bark-7{background:#8D7C61;}
.c-bark-8{background:#ADA28F;}
.c-bark-9{background:#DDDAD3;}
.c-bruise-0{background:#0E101A;}
.c-bruise-1{background:#0F122D;}
.c-bruise-2{background:#092647;}
.c-bruise-3{background:#10385F;}
.c-bruise-4{background:#094976;}
.c-bruise-5{background:#035388;}
.c-bruise-6{background:#03649B;}
.c-bruise-7{background:#0974A9;}
.c-bruise-8{background:#65AACB;}
.c-bruise-9{background:#CAEBFC;}
.c-leaf-0{background:#11112C;}
.c-leaf-1{background:#081F41;}
.c-leaf-2{background:#0F3860;}
.c-leaf-3{background:#054D7C;}
.c-leaf-4{background:#00609E;}
.c-leaf-5{background:#0072BB;}
.c-leaf-6{background:#0F93D0;}
.c-leaf-7{background:#1C96D3;}
.c-leaf-8{background:#6CB7DC;}
.c-leaf-9{background:#DFF3FD;}
.c-ink-0{background:#050708;}
.c-ink-1{background:#141516;}
.c-ink-2{background:#212222;}
.c-ink-3{background:#3E4140;}
.c-ink-4{background:#484C4B;}
.c-ink-5{background:#585E5B;}
.c-ink-6{background:#ABADAA;}
.c-ink-7{background:#D5D9DB;}
.c-ink-8{background:#F0F9FE;}
.c-ink-9{background:#FCFEFF;}

/* theme token table */
.sg-tokens{width:100%;border-collapse:collapse;border:2px solid var(--line-strong);font-size:14px;}
.sg-tokens th,.sg-tokens td{padding:10px 14px;text-align:left;border-bottom:1px dashed var(--line);vertical-align:middle;}
.sg-tokens th{font-family:var(--serif);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute);}
.sg-tokens tr:last-child td{border-bottom:none;}
.sg-tokens td:first-child{font-family:var(--mono);color:var(--accent-text);white-space:nowrap;}
.sg-tokens .chip{display:inline-block;width:18px;height:18px;border:1px solid var(--line-strong);vertical-align:middle;margin-right:8px;}
.chip-bg{background:var(--bg);} .chip-surface{background:var(--surface);} .chip-line{background:var(--line-strong);}
.chip-text{background:var(--text);} .chip-dim{background:var(--text-dim);} .chip-mute{background:var(--text-mute);}
.chip-heading{background:var(--heading);} .chip-accent{background:var(--accent-text);} .chip-hover{background:var(--hover);}
.sg-scroll{overflow-x:auto;}

/* type specimens */
.sg-type{border:2px solid var(--line-strong);display:grid;grid-template-columns:repeat(3,1fr);}
@media(max-width:860px){.sg-type{grid-template-columns:1fr;}}
.sg-face{padding:24px;border-right:2px solid var(--line-strong);}
.sg-face:last-child{border-right:none;}
@media(max-width:860px){.sg-face{border-right:none;border-bottom:2px solid var(--line-strong);}.sg-face:last-child{border-bottom:none;}}
.sg-face .big{font-size:clamp(44px,6vw,72px);line-height:.95;letter-spacing:-.03em;color:var(--heading);}
.sg-face.f-sans .big{font-family:var(--sans);font-weight:800;}
.sg-face.f-serif .big{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;}
.sg-face.f-mono .big{font-family:var(--mono);font-weight:700;letter-spacing:0;font-size:clamp(34px,4.6vw,56px);}
.sg-face .name{font-family:var(--serif);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--text-mute);margin:0 0 14px;}
.sg-face .sample{margin:16px 0 0;font-size:15px;color:var(--text-dim);}
.sg-face.f-serif .sample{font-family:var(--serif);}
.sg-face.f-mono .sample{font-family:var(--mono);font-size:13px;}
.sg-face ul{margin:14px 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:12px;color:var(--text-mute);}
.sg-face li{padding:5px 0;border-top:1px dashed var(--line);}
.sg-face li:first-child{border-top:none;}

.sg-scale{border:2px solid var(--line-strong);}
.sg-scale > div{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:baseline;padding:16px 22px;border-bottom:1px dashed var(--line);}
.sg-scale > div:last-child{border-bottom:none;}
@media(max-width:640px){.sg-scale > div{grid-template-columns:1fr;gap:6px;}}
.sg-scale .m{font-family:var(--mono);font-size:12px;color:var(--text-mute);}
.sg-scale .m b{display:block;color:var(--accent-text);font-weight:700;}
.sg-scale .x-h1{font-family:var(--sans);font-weight:800;letter-spacing:-.035em;line-height:.96;font-size:clamp(40px,6vw,84px);text-transform:uppercase;color:var(--heading);}
.sg-scale .x-h2{font-family:var(--sans);font-weight:800;letter-spacing:-.035em;line-height:.96;font-size:clamp(30px,4vw,52px);color:var(--heading);}
.sg-scale .x-h3{font-family:var(--sans);font-weight:800;letter-spacing:-.035em;line-height:1;font-size:28px;color:var(--heading);}
.sg-scale .x-lede{font-size:clamp(19px,2.2vw,25px);font-weight:500;line-height:1.3;color:var(--text-dim);}
.sg-scale .x-body{font-size:17px;color:var(--text);}
.sg-scale .x-small{font-family:var(--serif);font-size:13px;color:var(--text-mute);}

/* component demos */
.sg-demo{border:2px solid var(--line-strong);padding:28px;background:var(--surface);}
.sg-demo.plain{background:var(--bg);}
.sg-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
.sg-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;}
@media(max-width:860px){.sg-cols{grid-template-columns:1fr;}}
.sg-demo .prods{grid-template-columns:1fr;}
.sg-demo .prod{border-right:none;border-bottom:none;}
.sg-demo .cta{padding:32px;}
.sg-demo .cta .wrap{padding:0;}
.sg-demo .cta h2{font-size:clamp(28px,4vw,48px);}
.sg-demo .spec{max-width:440px;}

/* conventions */
.sg-rules{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:2px solid var(--line-strong);}
@media(max-width:760px){.sg-rules{grid-template-columns:1fr;}}
.sg-rule{padding:22px 24px;border-right:2px solid var(--line-strong);border-bottom:2px solid var(--line-strong);}
.sg-rule:nth-child(2n){border-right:none;}
.sg-rule:nth-last-child(-n+2){border-bottom:none;}
@media(max-width:760px){.sg-rule{border-right:none;}.sg-rule:nth-last-child(2){border-bottom:2px solid var(--line-strong);}}
.sg-rule h4{font-family:var(--serif);font-weight:700;font-size:20px;margin:0 0 8px;color:var(--accent-text);letter-spacing:-.01em;}
.sg-rule p{margin:0;font-size:15px;color:var(--text-dim);}
.sg-rule .ex{display:block;margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--text-mute);}
.sg-rule .ex em{font-style:normal;color:var(--accent-text);}
.hl-demo{color:var(--ink);padding:0 .08em;background-image:linear-gradient(var(--peel),var(--peel));background-repeat:no-repeat;background-size:100% 72%;background-position:0 58%;}
:root:not([data-theme="light"]) .hl-demo{background:none;color:var(--peel);padding:0;}
/* inline component samples inside the guide */
.sg-inline{position:static;background:transparent;border:none;padding:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;display:inline-flex;}
.sg-demo .prod.sg-inline{display:inline-flex;}
.sg-demo .rule.sg-inline{padding-top:0;border-top:none;}
.sg-cols .prods{grid-template-columns:1fr;}
.sg-cols .prod{border-right:none;border-bottom:none;}
.sg-demo .cta{padding:32px 0;}

/* ============================================================
   Game overlay ("Ook" easter egg) — DOM is created by game.js
   ============================================================ */
body.game-open{overflow:hidden;}
.game-overlay{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;}
.game-frame{position:relative;border:2px solid var(--peel);box-shadow:8px 8px 0 var(--peel-dark);background:var(--ink);}
.game-canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;}
.game-hud{position:absolute;top:8px;left:10px;display:flex;gap:14px;align-items:center;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--peel);text-shadow:1px 1px 0 var(--ink);pointer-events:none;}
.game-lives{letter-spacing:2px;}
.game-banana{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--peel);border:1px solid var(--ink);}
.game-banana.cool{background:var(--peel-dark);}
.game-card[hidden],.game-hud[hidden]{display:none;}
.game-card{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:var(--mono);color:var(--peel-3);background:color-mix(in srgb,var(--ink) 55%,transparent);}
.game-card h1{font-family:var(--sans);font-weight:800;font-size:clamp(32px,6vw,72px);letter-spacing:-.03em;color:var(--peel);margin:0 0 10px;text-transform:uppercase;}
.game-card p{margin:6px 0;font-size:13px;}
.game-card kbd{font-family:var(--mono);border:1px solid var(--peel);padding:1px 6px;font-size:11px;color:var(--peel);}
.game-dead{font-family:var(--sans);font-weight:800;font-size:clamp(40px,8vw,96px);color:var(--peel);letter-spacing:-.03em;}
.game-stamp{display:inline-block;font-family:var(--sans);font-weight:800;font-size:clamp(40px,8vw,96px);letter-spacing:-.03em;text-transform:uppercase;color:var(--ink);background:var(--peel);padding:.05em .3em;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--peel-dark);transform:rotate(-8deg);animation:stampIn .35s cubic-bezier(.2,1.4,.4,1) both;}
@keyframes stampIn{from{transform:rotate(-8deg) scale(2.2);opacity:0;}to{transform:rotate(-8deg) scale(1);opacity:1;}}
.game-won-time{margin-top:18px;font-size:16px;font-weight:700;color:var(--peel);}
.game-hint{font-family:var(--mono);font-size:11px;color:var(--peel-2);opacity:.8;}
.game-corner{position:absolute;right:10px;bottom:8px;pointer-events:none;}
@media(prefers-reduced-motion:reduce){.game-stamp{animation:none;}}
/* touch controls: hidden with a mouse, shown on coarse pointers */
.game-overlay{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.game-touch,.game-top,.game-taps,.game-rotate{display:none;}
/* same look as .btn: peel fill, hard border, offset shadow that collapses when pressed */
.game-btn{min-width:64px;height:56px;padding:0 14px;border:2px solid var(--line-strong);border-radius:0;background:var(--peel);color:var(--on-peel);font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:0;box-shadow:4px 4px 0 var(--btn-shadow);transition:transform .08s ease,box-shadow .08s ease;touch-action:none;-webkit-tap-highlight-color:transparent;}
.game-btn.down{transform:translate(2px,2px);box-shadow:0 0 0 var(--btn-shadow);}
.game-btn-sm{min-width:40px;height:40px;padding:0 10px;font-size:13px;box-shadow:3px 3px 0 var(--btn-shadow);}
.game-btn-sm:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--btn-shadow);}
.game-frame{z-index:1;}
.game-touch,.game-top,.game-rotate{z-index:2;}
@media(hover:none) and (pointer:coarse){
  .game-keys{display:none;}
  .game-taps{display:block;}
  .game-touch{display:flex;justify-content:space-between;align-items:flex-end;position:fixed;left:16px;right:16px;bottom:16px;pointer-events:none;}
  .game-pad{display:flex;gap:14px;pointer-events:auto;}
  .game-top{display:flex;gap:8px;position:fixed;top:12px;right:12px;}
  .game-rotate{position:fixed;top:20px;left:16px;right:120px;}
}
@media(hover:none) and (pointer:coarse) and (orientation:portrait){.game-rotate{display:block;}}

/* ============================================================
   Test page (tests/index.html only)
   ============================================================ */
.test-page{padding:24px;}
.test-out{font-family:var(--mono);font-size:13px;white-space:pre-wrap;color:var(--text);}

/* ---------- placeholder image boxes (swap for real <img> when ready) ---------- */
.ph{min-width:0;
  position:relative;margin:0;border:2px dashed var(--line-strong);background-color:var(--surface);
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
  background-image:
    linear-gradient(to top right,transparent calc(50% - 1px),var(--line) calc(50% - 1px),var(--line) calc(50% + 1px),transparent calc(50% + 1px)),
    linear-gradient(to top left,transparent calc(50% - 1px),var(--line) calc(50% - 1px),var(--line) calc(50% + 1px),transparent calc(50% + 1px));
}
.ph.tall{aspect-ratio:9/19;}
.ph.square{aspect-ratio:1;}
.ph.banner{aspect-ratio:8/3;margin-top:26px;}
.ph figcaption{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--text-mute);text-align:center;padding:12px 16px;background:var(--surface);border:1px dashed var(--line);max-width:80%;}
.hero .ph,.hero .shot{width:100%;}
.shot{display:block;width:100%;height:auto;}
.shot.banner{margin-top:26px;}
.shot.lk-light{display:none;}
:root[data-theme="light"] .shot.lk-dark{display:none;}
:root[data-theme="light"] .shot.lk-light{display:block;}
@media(max-width:900px){.hero .ph,.hero .shot{order:-1;margin-bottom:8px;}}

/* ---------- fonkey page ---------- */
.feats{border:2px solid var(--line-strong);display:grid;grid-template-columns:repeat(4,1fr);}
.feat{padding:24px 22px 26px;border-right:2px solid var(--line-strong);border-bottom:2px solid var(--line-strong);background:var(--bg);}
.feat:nth-child(4n){border-right:none;}
.feat:nth-last-child(-n+4){border-bottom:none;}
.feat h3{font-size:21px;letter-spacing:-.02em;color:var(--accent-text);margin:0 0 10px;}
.feat p{margin:0;font-size:15px;line-height:1.5;color:var(--text-dim);}
@media(max-width:1000px){
  .feats{grid-template-columns:repeat(2,1fr);}
  .feat:nth-child(4n){border-right:2px solid var(--line-strong);}
  .feat:nth-child(2n){border-right:none;}
  .feat:nth-last-child(-n+4){border-bottom:2px solid var(--line-strong);}
  .feat:nth-last-child(-n+2){border-bottom:none;}
}
@media(max-width:600px){
  .feats{grid-template-columns:1fr;}
  .feat{border-right:none;}
  .feat:nth-last-child(-n+2){border-bottom:2px solid var(--line-strong);}
  .feat:last-child{border-bottom:none;}
}

.ticks{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:13.5px;color:var(--text-dim);}
.ticks li{padding:8px 0;border-top:1px dashed var(--line);}
.ticks li:first-child{border-top:none;}

.decks{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;}
@media(max-width:860px){.decks{grid-template-columns:1fr;}}
.deck{border:2px solid var(--line-strong);background:var(--bg);}
.deck .ph{border-width:0 0 2px;}
.deck .shot{border-bottom:2px solid var(--line-strong);}
.deck .body{padding:22px 24px 26px;}
.deck .tag{font-family:var(--serif);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--text-mute);margin:0 0 8px;}
.deck h3{font-size:clamp(24px,2.6vw,30px);color:var(--accent-text);margin:0 0 10px;}
.deck p{margin:0 0 16px;color:var(--text-dim);font-size:16px;}
.deck p.tag{margin-bottom:8px;}

.viz .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:26px;}
@media(max-width:760px){.viz .tiles{grid-template-columns:1fr;}}
.viz .names{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.viz .names li{font-family:var(--mono);font-size:12px;padding:6px 12px;border:1px solid var(--line);color:var(--text-dim);}

.phone{display:grid;grid-template-columns:1.1fr .5fr;gap:48px;align-items:start;}
@media(max-width:860px){.phone{grid-template-columns:1fr;}}
.phone .big{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.025em;line-height:1.2;color:var(--heading);margin:0 0 22px;max-width:30ch;}
.phone .ph,.phone .phone-shot{width:100%;max-width:320px;justify-self:center;}
.phone .note{font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--text-mute);border-top:1px dashed var(--line);padding-top:14px;margin:22px 0 0;max-width:52ch;}
.phone .note b{color:var(--heading);font-weight:600;}

.fine .trait .k{color:var(--brand-yellow);}

/* product card that links to its own page */
.prod h3 a{color:inherit;text-decoration:none;}
.prod h3 a::after{content:"";position:absolute;inset:0;}

/* ---------- fonkey page: Fonkey's purple in place of the brand yellow ---------- */
:root:not([data-theme="light"]) .fonkey{
  --peel:#C865E0;        /* lighter purple on dark (Fonkey accentText, dark) */
  --peel-2:#DDA3EC;
  --peel-3:#EFD6F7;
  --peel-4:#FAF1FC;
  --peel-deep:#980EBB;
  --peel-dark:#4A0A5C;
  --peel-ink:#2B0836;
  --line:rgba(114,7,140,.7);
  --text:#EFD6F7;        /* pale purple, as the home page uses pale yellow */
  --text-dim:#DDA3EC;
  --text-mute:rgba(221,163,236,.62);
  --grid:rgba(200,101,224,.06);
  --glow:rgba(200,101,224,.16);
  --line-strong:#72078C;
  --accent-text:#C865E0;
  --heading:#FAF1FC;
  --btn-shadow:#4A0A5C;
  --hover:#2B0836;
  --input-bg:#FAF1FC;
}
:root[data-theme="light"] .fonkey{
  --peel:#980EBB;        /* darker purple on light (Fonkey accent) */
  --peel-2:#B04FCC;
  --peel-3:#E3B5F0;
  --peel-4:#F6E6FA;
  --peel-deep:#72078C;
  --peel-dark:#4A0A5C;
  --peel-ink:#F3DDFA;    /* text on purple paint */
  --on-peel:#FFFFFF;
  --hover:#F6E6FA;
  --line:rgba(152,14,187,.25);
  --line-strong:#E3B5F0;
  --bg:#FBF6FE;          /* faint purple tint instead of cream */
  --surface:#FDFAFF;
  --nav-bg:rgba(251,246,254,.88);
}

/* current page in the header and footer nav */
.nav ul a[aria-current="page"],footer a[aria-current="page"]{color:var(--accent-text);text-decoration:underline;text-underline-offset:.45em;text-decoration-thickness:2px;}
:root[data-theme="light"] .fonkey .btn,:root[data-theme="light"] .fonkey .theme{border-color:var(--peel-deep);}
/* the black Fonkey icon turns white on purple paint, matching --on-peel */
:root[data-theme="light"] .fonkey .btn.icon img,:root[data-theme="light"] .fonkey .cta-icon{filter:brightness(0) invert(1);}

/* ---------- styleguide: logo + main colors ---------- */
.sg-logos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media(max-width:860px){.sg-logos{grid-template-columns:1fr;}}
.sg-logo .art{border:2px solid var(--line-strong);background:var(--surface);padding:28px;display:flex;align-items:center;justify-content:center;min-height:220px;}
.sg-logo .art img{display:block;max-width:100%;max-height:170px;width:auto;height:auto;}
:root:not([data-theme="light"]) .sg-logo .art img[src="assets/wordmark.png"]{filter:invert(1) brightness(1.2);}
.sg-figure{border:2px solid var(--line-strong);background:var(--card);padding:28px;display:flex;justify-content:center;}
.sg-figure img{display:block;max-width:100%;height:auto;}
.sg-main{grid-template-columns:repeat(9,1fr);}
@media(max-width:900px){.sg-main{grid-template-columns:repeat(3,1fr);}}
.sg-main .sg-sw{aspect-ratio:1/1.2;}
.sg-demo .feats{grid-template-columns:1fr 1fr;}
.sg-demo .feat:nth-child(2n){border-right:none;}
.sg-demo .shot{max-width:200px;}
.sg-demo .ph{max-width:100%;}
.sg-demo .nav{position:static;background:transparent;border-bottom:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
.sg-demo .nav .wrap{padding:0;}
.sg-demo .phone .phone-shot{max-width:200px;}
.sg-demo.fonkey{background:var(--bg);}
.sg-note + .sg-demo,.sg-note + .sg-cols,.sg-note + .traits,.sg-note + .sg-figure,.sg-note + .sg-logos,.sg-note + .sg-swatches,.sg-note + .sg-rules{margin-top:16px;}

/* ---------- visualizer video modal (fonkey page) ---------- */
.viz .names li{padding:0;}
.viz .names button{font:inherit;font-family:var(--mono);font-size:12px;padding:6px 12px;border:none;background:transparent;color:var(--text-dim);cursor:pointer;}
.viz .names button:hover{background:var(--hover);color:var(--accent-text);}
.vizmodal{border:none;padding:0;background:transparent;max-width:none;max-height:none;overflow:visible;}
.vizmodal::backdrop{background:color-mix(in srgb,var(--ink) 82%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.vizmodal .frame{border:2px solid var(--line-strong);background:var(--bg);color:var(--text);width:fit-content;max-width:92vw;}
.vizmodal .bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:2px solid var(--line-strong);}
.vizmodal .bar .eyebrow{margin:0;}
.vizmodal .close,.vizmodal .steps button{font:inherit;font-family:var(--mono);font-weight:700;font-size:13px;background:transparent;border:2px solid var(--line-strong);color:var(--accent-text);cursor:pointer;padding:6px 12px;}
.vizmodal .close:hover,.vizmodal .steps button:hover{background:var(--hover);}
.vizmodal .close{padding:4px 9px;}
.vizmodal video{display:block;width:auto;height:auto;max-height:72vh;max-width:92vw;aspect-ratio:884/1920;background:var(--ink);}
.vizmodal .stage{position:relative;display:flex;justify-content:center;}
.vizmodal .replay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;display:grid;place-items:center;background:var(--peel);color:var(--on-peel);border:2px solid var(--line-strong);box-shadow:4px 4px 0 var(--btn-shadow);cursor:pointer;padding:0;}
.vizmodal .replay svg{width:34px;height:34px;}
.vizmodal .replay:hover{transform:translate(calc(-50% - 2px),calc(-50% - 2px));box-shadow:6px 6px 0 var(--btn-shadow);}
.vizmodal .replay[hidden]{display:none;}
.vizmodal .steps{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-top:2px solid var(--line-strong);font-family:var(--mono);font-size:12px;color:var(--text-mute);}
.vizmodal .steps .count b{color:var(--accent-text);}
body.modal-open{overflow:hidden;}