/* wordart shared chrome — kami-aligned with opaque top + bottom bars. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap');
@import url('theme-tokens.css');

*,*::before,*::after{box-sizing:border-box;}

:root{
  --kami-breadcrumb:#bbb;
  --kami-breadcrumb-hover:#1d1d1f;
  --kami-footer:#bbb;
  --kami-footer-link:#6b7280;
  --kami-footer-link-hover:#1d1d1f;
  --kami-font-display:'DM Sans', system-ui, sans-serif;
  --kami-font-body:'DM Sans', system-ui, sans-serif;
  --kami-font-mono:'JetBrains Mono', ui-monospace, monospace;
  --bar-bg:rgba(246,246,244,.92);
  --bar-border:rgba(0,0,0,.08);
}
html[data-theme="brutalist"]{
  --kami-breadcrumb:#666; --kami-breadcrumb-hover:#d946ef;
  --kami-footer:#666; --kami-footer-link:#000; --kami-footer-link-hover:#d946ef;
  --kami-font-display:var(--kami-font-mono); --kami-font-body:var(--kami-font-mono);
  --bar-bg:#fff; --bar-border:#000;
}
html[data-theme="editorial"]{
  --kami-breadcrumb:#8a2f1b80; --kami-breadcrumb-hover:#8a2f1b;
  --kami-footer:#8a2f1b80; --kami-footer-link:#8a2f1b; --kami-footer-link-hover:#2f2a26;
  --kami-font-display:Georgia, 'EB Garamond', serif; --kami-font-body:var(--kami-font-display);
  --bar-bg:rgba(243,238,226,.95); --bar-border:rgba(22,20,12,.18);
}
html[data-theme="terminal"]{
  --kami-breadcrumb:rgba(255,209,102,.55); --kami-breadcrumb-hover:#ffd166;
  --kami-footer:rgba(255,209,102,.55); --kami-footer-link:#ffd166; --kami-footer-link-hover:#ffe9a8;
  --kami-font-display:var(--kami-font-mono); --kami-font-body:var(--kami-font-mono);
  --bar-bg:rgba(13,17,23,.94); --bar-border:rgba(255,209,102,.25);
}
html[data-theme="zen"]{
  --kami-breadcrumb:#7a847180; --kami-breadcrumb-hover:#334155;
  --kami-footer:#7a847180; --kami-footer-link:#7a8471; --kami-footer-link-hover:#334155;
  --bar-bg:rgba(236,234,216,.95); --bar-border:rgba(58,58,50,.12);
}

html,body{
  margin:0; padding:0; height:100dvh;
  background:#000; color:var(--text);
  font-family:var(--kami-font-body);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
body.wa-effect{ background:#000; }

/* Stage: full-viewport canvas, between the two bars. On desktop, when the
   controls panel is uncollapsed, reserve ~320px on the right so the wordmark
   rasterizes into the visible region instead of disappearing under the panel.
   Effects read cv.clientWidth, so this shrinks the draw area cleanly. */
.wa-stage{position:fixed !important;top:0 !important;right:0 !important;bottom:0 !important;left:0 !important;overflow:hidden;background:#000;z-index:0}
/* Canvas is sized by shared/state.js applyRatio() to fit the selected ratio,
   centered with letterboxing. Effects read cv.clientWidth/Height which now
   honour the chosen ratio without any per-effect change. */
.wa-stage canvas{display:block}
@media (min-width:641px){
  body:not(.panel-collapsed) .wa-stage{ right:320px !important; }
}

/* ---------- TOP BAR ---------- */
.wa-top{
  position:fixed; top:0; left:0; right:0; height:44px;
  display:flex; align-items:center; gap:14px;
  padding:0 12px 0 8px;
  background:var(--bar-bg);
  border-bottom:1px solid var(--bar-border);
  color:var(--text);
  z-index:50;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.wa-top .grow{ flex:1 }

/* Kami breadcrumb (sits in top bar) */
.kami-breadcrumb{
  font-family:var(--kami-font-body); font-size:.78rem;
  color:var(--kami-breadcrumb);
  letter-spacing:.01em;
  display:flex; align-items:center; gap:.35rem;
}
.kami-breadcrumb a{ color:inherit; text-decoration:none; opacity:.7 }
.kami-breadcrumb a:hover{ color:var(--kami-breadcrumb-hover); opacity:1 }
.kami-breadcrumb .sep{ opacity:.45; user-select:none }
.kami-breadcrumb .current{ color:var(--text); opacity:1; font-weight:500 }

/* Effect nav — legacy flat strip (preserved for any unconverted pages). */
.effect-nav{
  display:flex; gap:6px;
  font-family:var(--kami-font-body); font-size:11px;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  max-width:60vw;
  flex-shrink:1;
  min-width:0;
}
.effect-nav::-webkit-scrollbar{ display:none; }
.effect-nav a{
  flex:0 0 auto;
  color:var(--text); opacity:.55;
  text-decoration:none;
  padding:4px 10px;
  border:1px solid var(--bar-border);
  border-radius:4px;
  transition:opacity .15s, border-color .15s;
}
.effect-nav a:hover{ opacity:1 }
.effect-nav a.active{ opacity:1; border-color:var(--text); }

/* Compact effect nav — current slug + chevron, opens overlay menu. */
.effect-nav.compact{
  display:flex; align-items:center; gap:6px;
  font-family:var(--kami-font-body); font-size:12px;
  overflow:visible; max-width:none;
}
.effect-nav.compact .effect-nav-home{
  color:var(--text); opacity:.5; text-decoration:none;
  font-family:var(--kami-font-mono); font-size:11px;
  letter-spacing:.02em;
  padding:4px 4px;
  transition:opacity .15s;
}
.effect-nav.compact .effect-nav-home:hover{ opacity:1; }
.effect-nav.compact .effect-nav-sep{
  opacity:.35; user-select:none;
  font-family:var(--kami-font-mono); font-size:11px;
}
.effect-nav.compact .effect-nav-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px;
  border:1px solid var(--bar-border);
  border-radius:6px;
  color:var(--text); opacity:.6;
  text-decoration:none;
  font-family:var(--kami-font-mono); font-size:14px;
  transition:opacity .15s, border-color .15s, background .15s;
}
.effect-nav.compact .effect-nav-arrow:hover{ opacity:1; border-color:var(--text); }
.effect-nav.compact .effect-nav-current{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent;
  border:1px solid var(--bar-border);
  border-radius:6px;
  padding:4px 10px;
  font-family:var(--kami-font-body); font-size:12px;
  color:var(--text);
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.effect-nav.compact .effect-nav-current:hover{
  border-color:var(--text);
}
.effect-nav.compact .effect-nav-name{
  font-weight:500; letter-spacing:.005em;
}
.effect-nav.compact .effect-nav-chev{
  opacity:.55; font-size:14px; line-height:1;
}
@media (max-width:640px){
  .effect-nav.compact{ flex:1 1 auto; min-width:0; justify-content:flex-end; }
  .effect-nav.compact .effect-nav-home, .effect-nav.compact .effect-nav-sep{ display:none; }
}

/* ---------- Nav overlay (⌘K / / / chevron-click) ---------- */
.pix-nav-overlay{
  position:fixed; inset:0;
  display:none;
  z-index:900;
  font-family:var(--kami-font-body);
}
.pix-nav-overlay.visible{ display:block; }
.pix-nav-overlay-bg{
  position:absolute; inset:0;
  background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.pix-nav-overlay-panel{
  position:absolute;
  top:80px; left:50%; transform:translateX(-50%);
  width:min(640px, calc(100vw - 32px));
  max-height:min(72vh, 640px);
  display:flex; flex-direction:column;
  background:var(--panel-bg, var(--bar-bg));
  border:1px solid var(--bar-border);
  border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.32);
  overflow:hidden;
  color:var(--text);
}
.pix-nav-overlay-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--bar-border);
}
.pix-nav-overlay-icon{
  font-family:var(--kami-font-mono); font-size:14px; opacity:.55;
}
.pix-nav-overlay-head input{
  flex:1; height:30px;
  background:transparent; border:0; outline:0;
  font-family:var(--kami-font-body); font-size:15px;
  color:var(--text);
}
.pix-nav-overlay-head input::placeholder{ opacity:.45; }
.pix-nav-overlay-close{
  background:transparent;
  color:var(--text); opacity:.6;
  border:1px solid var(--bar-border); border-radius:5px;
  padding:3px 8px;
  font-family:var(--kami-font-mono); font-size:10px;
  letter-spacing:.05em; cursor:pointer;
}
.pix-nav-overlay-close:hover{ opacity:1; border-color:var(--text); }

.pix-nav-overlay-body{
  flex:1; overflow-y:auto;
  padding:6px 14px 8px;
}
.pix-nav-group{
  padding:8px 0 6px;
  border-bottom:1px dashed var(--bar-border);
}
.pix-nav-group:last-child{ border-bottom:0; }
.pix-nav-group-title{
  font-family:var(--kami-font-mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase;
  opacity:.5;
  margin-bottom:6px;
}
.pix-nav-group-items{
  display:flex; flex-wrap:wrap; gap:6px;
}
.pix-nav-item{
  display:inline-block;
  padding:5px 10px;
  border:1px solid var(--bar-border);
  border-radius:5px;
  color:var(--text); opacity:.7;
  text-decoration:none;
  font-family:var(--kami-font-mono); font-size:12px;
  letter-spacing:.01em;
  transition:opacity .12s, border-color .12s, background .12s;
}
.pix-nav-item:hover, .pix-nav-item:focus{
  opacity:1; outline:0;
  border-color:var(--text);
  background:rgba(0,0,0,.05);
}
.pix-nav-item.active{
  opacity:1; background:var(--text); color:var(--bg); border-color:var(--text);
}
.pix-nav-overlay-foot{
  display:flex; gap:18px;
  padding:8px 14px;
  border-top:1px solid var(--bar-border);
  font-family:var(--kami-font-mono); font-size:10px;
  opacity:.55;
}
.pix-nav-overlay-foot kbd{
  display:inline-block;
  padding:1px 5px; margin:0 2px;
  border:1px solid var(--bar-border); border-radius:3px;
  background:transparent;
  font-family:var(--kami-font-mono); font-size:9.5px;
}
@media (max-width:640px){
  .pix-nav-overlay-panel{
    top:auto; bottom:0; left:0; transform:none;
    width:100%; max-height:80vh;
    border-radius:14px 14px 0 0;
  }
}

/* Export buttons */
.wa-actions{ display:flex; gap:6px; align-items:center }
.wa-actions button{
  font-family:var(--kami-font-body); font-size:12px;
  background:transparent; color:var(--text);
  border:1px solid var(--bar-border); border-radius:4px;
  padding:4px 12px; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
  letter-spacing:.02em;
}
.wa-actions button:hover{ background:var(--text); color:var(--bg); border-color:var(--text) }
.wa-actions button[disabled]{ opacity:.45; cursor:wait }
/* Icon buttons (png / mp4 export) — SVG inside; centre and remove inline-block gaps. */
.wa-actions button svg{ display:block; }
.wa-actions button#export-png,
.wa-actions button#export-mp4{
  padding:5px 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
/* Recording state on the mp4 button — pulsing red dot prefix and a
   subtle border tint so users know capture is in progress. */
.wa-actions button.recording{
  border-color:#ff3b30;
  color:#ff3b30;
  opacity:1; cursor:wait;
  padding-left:18px;
  position:relative;
}
.wa-actions button.recording::before{
  content:""; position:absolute;
  left:8px; top:50%;
  width:6px; height:6px;
  border-radius:50%;
  background:#ff3b30;
  transform:translateY(-50%);
  animation:wa-pulse 1s ease-in-out infinite;
}

/* ---------- THEME SWITCHER ---------- */
.theme-switcher-container{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
}
.theme-switcher-pill{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0;
  border:1px solid var(--bar-border);
  border-radius:8px;
  background:rgba(255,255,255,.85);
  color:var(--text); font-size:13px; font-family:inherit;
  cursor:pointer;
  transition:all .15s;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.theme-switcher-pill:hover{ box-shadow:0 2px 8px rgba(0,0,0,.1) }
html[data-theme="brutalist"] .theme-switcher-pill{ background:#fff; border:2px solid #000; border-radius:0; color:#000; box-shadow:2px 2px 0 #000; font-weight:700 }
html[data-theme="brutalist"] .theme-switcher-pill:hover{ background:#d946ef; box-shadow:3px 3px 0 #000; transform:translate(-1px,-1px) }
html[data-theme="editorial"] .theme-switcher-pill{ background:transparent; border:1px solid rgba(47,42,38,.25); border-radius:2px; color:#8a2f1b; font-family:Georgia, serif; box-shadow:none }
html[data-theme="editorial"] .theme-switcher-pill:hover{ background:#8a2f1b; color:#f8f3ea; border-color:#8a2f1b }
html[data-theme="terminal"] .theme-switcher-pill{ background:#0d1117; border:1px dashed rgba(255,209,102,.5); border-radius:0; color:#ffd166; box-shadow:none }
html[data-theme="terminal"] .theme-switcher-pill:hover{ background:#ffd166; color:#0d1117; border-style:solid }
html[data-theme="zen"] .theme-switcher-pill{ background:transparent; border:1px solid hsla(92,8%,48%,.3); border-radius:999px; color:#7a8471; box-shadow:none }
html[data-theme="zen"] .theme-switcher-pill:hover{ background:hsla(92,8%,48%,.1); color:#334155; border-color:#7a8471 }
.theme-switcher-pill-icon{ font-size:13px; line-height:1 }

.theme-switcher-picker{
  position:absolute; top:34px; left:0;
  display:none; flex-direction:column; gap:2px;
  background:var(--bar-bg); border:1px solid var(--bar-border); border-radius:8px;
  padding:6px; min-width:160px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  z-index:200;
}
.theme-switcher-container.open .theme-switcher-picker{ display:flex }
.theme-switcher-option{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px;
  background:transparent; border:none; border-radius:6px;
  color:var(--text); font-size:12px; font-family:var(--kami-font-body);
  cursor:pointer; text-align:left;
  transition:background .12s;
}
.theme-switcher-option:hover{ background:rgba(0,0,0,.05) }
.theme-switcher-option.active{ background:rgba(0,0,0,.07); font-weight:600 }
.theme-switcher-option-icon{ font-size:13px; width:18px; text-align:center }

/* ---------- BOTTOM BAR ---------- */
.wa-bottom{
  position:fixed; left:0; right:0; bottom:0;
  padding:8px 16px 10px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--bar-bg);
  border-top:1px solid var(--bar-border);
  z-index:50;
  font-family:var(--kami-font-mono); font-size:.7rem;
  color:var(--kami-footer);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.wa-bottom .row{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center }
.wa-bottom .row.made{ font-family:var(--kami-font-body); font-size:.75rem; opacity:.85 }
.wa-bottom a{ color:var(--kami-footer-link); text-decoration:none; opacity:.85 }
.wa-bottom a:hover{ color:var(--kami-footer-link-hover); opacity:1 }
.wa-bottom .sep{ opacity:.4 }
.wa-bottom .current{ color:var(--text); opacity:1; font-weight:600 }

/* ---------- THEMED COMPONENTS ----------
   UI controls (header buttons, effect-nav, sliders, checkboxes, panel buttons)
   take a distinct shape per theme so brutalist, editorial, phosphor, zen and
   classic don't all look the same. Text inputs and numeric readouts stay
   neutral on purpose — they remain readable across themes.
*/

/* Toggle switch base (replaces the previous checkbox visual). The native
   <input type=checkbox> stays — themes can still shape this via tokens. */
.wg input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:34px; height:18px;
  margin:0;
  border:1px solid var(--input-border);
  border-radius:999px;
  background:var(--slider-track);
  cursor:pointer;
  display:inline-block;
  position:relative;
  vertical-align:middle;
  transition:background .18s ease, border-color .18s ease;
}
.wg input[type="checkbox"]::after{
  content:""; position:absolute;
  left:1px; top:1px;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--text);
  transition:transform .18s ease, background .18s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
}
.wg input[type="checkbox"]:checked{
  background:var(--accent);
  border-color:var(--accent);
}
.wg input[type="checkbox"]:checked::after{
  transform:translateX(16px);
  background:var(--bg);
}

/* Both BRUTALIST and TERMINAL are zero-radius aesthetics by design. The
   per-element overrides further down cover the chrome surfaces, but each
   new control type or homepage card was leaking the default 4-12px radius
   through. A scoped catch-all keeps the geometry honest without needing a
   matching override for every new element class. !important is required
   because individual rules set border-radius explicitly. */
html[data-theme="brutalist"] *,
html[data-theme="brutalist"] *::before,
html[data-theme="brutalist"] *::after,
html[data-theme="terminal"] *,
html[data-theme="terminal"] *::before,
html[data-theme="terminal"] *::after{
  border-radius:0 !important;
}

/* --- BRUTALIST --- hard borders, 0 radius, magenta accent on hover --- */
html[data-theme="brutalist"] .wa-actions button,
html[data-theme="brutalist"] .effect-nav a,
html[data-theme="brutalist"] .wg-button button{
  background:#fff; color:#000;
  border:2px solid #000; border-radius:0;
  box-shadow:3px 3px 0 #000;
  font-family:var(--kami-font-mono);
  text-transform:uppercase; letter-spacing:.06em;
  transition:none;
}
html[data-theme="brutalist"] .wa-actions button:hover,
html[data-theme="brutalist"] .effect-nav a:hover,
html[data-theme="brutalist"] .wg-button button:hover{
  background:#d946ef; color:#000;
  box-shadow:4px 4px 0 #000; transform:translate(-1px,-1px);
}
html[data-theme="brutalist"] .effect-nav a.active{
  background:#000; color:#fff;
}
html[data-theme="brutalist"] .wg-track{
  background:#fff; border:2px solid #000; border-radius:0; height:18px;
}
html[data-theme="brutalist"] .wg-fill{ background:#000 }
html[data-theme="brutalist"] .wg-track::after{ background:#d946ef; width:3px }
/* Brutalist toggle: sharp 2px black border, magenta when on, black knob. */
html[data-theme="brutalist"] .wg input[type="checkbox"]{
  border:2px solid #000; background:#fff;
}
html[data-theme="brutalist"] .wg input[type="checkbox"]::after{
  background:#000; box-shadow:none;
}
html[data-theme="brutalist"] .wg input[type="checkbox"]:checked{
  background:#d946ef; border-color:#000;
}
html[data-theme="brutalist"] .wg input[type="checkbox"]:checked::after{
  background:#000;
}
html[data-theme="brutalist"] .wg{ border:2px solid #000; border-radius:0; box-shadow:6px 6px 0 #000 }
html[data-theme="brutalist"] .wg-collapse{ border:2px solid #000; border-radius:0; background:#fff; color:#000; box-shadow:2px 2px 0 #000 }

/* --- EDITORIAL --- serif italic, ink + ochre, subtle borders, 2px radius --- */
html[data-theme="editorial"] .wa-actions button,
html[data-theme="editorial"] .effect-nav a,
html[data-theme="editorial"] .wg-button button{
  background:transparent; color:#16140c;
  border:1px solid rgba(22,20,12,.25); border-radius:2px;
  font-family:Georgia, 'EB Garamond', serif;
  font-style:italic; letter-spacing:.01em;
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}
html[data-theme="editorial"] .wa-actions button:hover,
html[data-theme="editorial"] .effect-nav a:hover,
html[data-theme="editorial"] .wg-button button:hover{
  background:#16140c; color:#f3eee2; border-color:#16140c;
}
html[data-theme="editorial"] .effect-nav a.active{
  background:#16140c; color:#d4a040; border-color:#16140c;
}
html[data-theme="editorial"] .wg-track{ background:rgba(22,20,12,.05); border:1px solid rgba(22,20,12,.18); border-radius:2px }
html[data-theme="editorial"] .wg-fill{ background:rgba(22,20,12,.35) }
html[data-theme="editorial"] .wg-track::after{ background:#d4a040 }
html[data-theme="editorial"] .wg input[type="checkbox"]{ border:1px solid rgba(22,20,12,.25); background:rgba(22,20,12,.06); }
html[data-theme="editorial"] .wg input[type="checkbox"]::after{ background:#16140c; }
html[data-theme="editorial"] .wg input[type="checkbox"]:checked{ background:#d4a040; border-color:#d4a040 }
html[data-theme="editorial"] .wg input[type="checkbox"]:checked::after{ background:#f8f3ea; }

/* --- TERMINAL --- dashed borders, mono, phosphor amber, brackets --- */
html[data-theme="terminal"] .wa-actions button,
html[data-theme="terminal"] .effect-nav a,
html[data-theme="terminal"] .wg-button button{
  background:transparent; color:#ffd166;
  border:1px dashed rgba(255,209,102,.45); border-radius:0;
  font-family:var(--kami-font-mono);
  text-transform:uppercase; letter-spacing:.04em;
  transition:background 16ms linear, color 16ms linear;
}
html[data-theme="terminal"] .wa-actions button:hover,
html[data-theme="terminal"] .effect-nav a:hover,
html[data-theme="terminal"] .wg-button button:hover{
  background:#ffd166; color:#0d1117; border-color:#ffd166; border-style:solid;
}
html[data-theme="terminal"] .effect-nav a.active{
  background:#ffd166; color:#0d1117; border-color:#ffd166; border-style:solid;
}
html[data-theme="terminal"] .wa-actions button::before,
html[data-theme="terminal"] .effect-nav a::before{ content:"["; opacity:.55; margin-right:1px }
html[data-theme="terminal"] .wa-actions button::after,
html[data-theme="terminal"] .effect-nav a::after{ content:"]"; opacity:.55; margin-left:1px }
html[data-theme="terminal"] .wa-actions button,
html[data-theme="terminal"] .effect-nav a{ padding:4px 6px; }
html[data-theme="terminal"] .wg-track{ background:rgba(255,209,102,.04); border:1px dashed rgba(255,209,102,.4); border-radius:0; height:18px }
html[data-theme="terminal"] .wg-fill{ background:rgba(255,209,102,.35) }
html[data-theme="terminal"] .wg-track::after{ background:#ffd166 }
html[data-theme="terminal"] .wg input[type="checkbox"]{ border:1px dashed rgba(255,209,102,.5); background:rgba(38,255,157,.06); }
html[data-theme="terminal"] .wg input[type="checkbox"]::after{ background:#9eff00; }
html[data-theme="terminal"] .wg input[type="checkbox"]:checked{ background:#9eff00; border-color:#9eff00; border-style:solid }
html[data-theme="terminal"] .wg input[type="checkbox"]:checked::after{ background:#020806; }
html[data-theme="terminal"] .wg{ border:1px dashed rgba(255,209,102,.4); border-radius:0; background:#0d1117 }
html[data-theme="terminal"] .wg-collapse{ background:#0d1117; border:1px dashed rgba(255,209,102,.5); border-radius:0; color:#ffd166 }

/* --- ZEN --- pill shapes, sage, soft transitions --- */
html[data-theme="zen"] .wa-actions button,
html[data-theme="zen"] .effect-nav a,
html[data-theme="zen"] .wg-button button{
  background:transparent; color:#3a3a32;
  border:1px solid rgba(58,58,50,.25); border-radius:999px;
  font-weight:300; letter-spacing:.04em; text-transform:lowercase;
  padding:4px 10px;
  transition:background .6s cubic-bezier(.22,1,.36,1), color .6s, border-color .6s;
}
html[data-theme="zen"] .wa-actions button:hover,
html[data-theme="zen"] .effect-nav a:hover,
html[data-theme="zen"] .wg-button button:hover{
  background:rgba(58,58,50,.1); color:#1f1f1c; border-color:#1f1f1c;
}
html[data-theme="zen"] .effect-nav a.active{
  background:#3a3a32; color:#ecead8; border-color:#3a3a32;
}
html[data-theme="zen"] .wg-track{ background:rgba(58,58,50,.06); border:1px solid rgba(58,58,50,.12); border-radius:999px; height:14px }
html[data-theme="zen"] .wg-fill{ background:rgba(58,58,50,.25); border-radius:999px }
html[data-theme="zen"] .wg-track::after{ background:#1f1f1c; width:3px; border-radius:2px }
html[data-theme="zen"] .wg input[type="checkbox"]{ border:1px solid rgba(58,58,50,.25); background:rgba(58,58,50,.08); }
html[data-theme="zen"] .wg input[type="checkbox"]::after{ background:#3a3a32; }
html[data-theme="zen"] .wg input[type="checkbox"]:checked{ background:#3a3a32; border-color:#3a3a32 }
html[data-theme="zen"] .wg input[type="checkbox"]:checked::after{ background:#ecead8; }
html[data-theme="zen"] .wg{ border:1px solid rgba(58,58,50,.12); border-radius:14px }
html[data-theme="zen"] .wg-collapse{ border:1px solid rgba(58,58,50,.25); border-radius:999px; background:transparent; color:#3a3a32 }

/* ---------- SPLASH OVERLAY ---------- */
.wa-splash{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.86);
  color:#fff;
  font-family:var(--kami-font-body);
  z-index:1000;
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  cursor:pointer;
}
.wa-splash.visible{ display:flex }
.wa-splash-inner{ max-width:580px; padding:40px; text-align:center }
.wa-splash-title{ font-size:42px; font-weight:300; letter-spacing:.04em; margin-bottom:8px }
.wa-splash-tag{ font-size:13px; opacity:.6; margin-bottom:36px; font-family:var(--kami-font-mono); letter-spacing:.02em }
.wa-splash-grid{
  display:grid; grid-template-columns:auto 1fr;
  gap:10px 24px;
  text-align:left;
  margin-bottom:36px;
  font-family:var(--kami-font-mono);
  font-size:12px;
  line-height:1.5;
}
.wa-splash-grid > span:nth-child(odd){ justify-self:end; opacity:.9 }
.wa-splash-grid > span:nth-child(even){ opacity:.7 }
.wa-splash-grid kbd{
  display:inline-block;
  padding:2px 6px;
  margin:0 1px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:3px;
  font-family:var(--kami-font-mono);
  font-size:11px;
  min-width:18px; text-align:center;
}
.wa-splash-tap{
  font-size:10px;
  opacity:.45;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-family:var(--kami-font-mono);
}

/* ---------- RECORDING OVERLAY ---------- */
.wa-rec{ position:fixed; left:50%; bottom:36px; transform:translateX(-50%); z-index:80; background:rgba(0,0,0,.78); color:#fff; padding:8px 16px; border-radius:999px; font-family:var(--kami-font-mono); font-size:11px; display:none; align-items:center; gap:10px; }
.wa-rec.visible{ display:flex }
.wa-rec .dot{ width:8px; height:8px; border-radius:50%; background:#ff3b30; animation:wa-pulse 1s ease-in-out infinite }
.wa-rec .track{ width:120px; height:4px; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden }
.wa-rec .bar{ width:0%; height:100%; background:#fff; transition:width .25s linear }
@keyframes wa-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---------- MOBILE (<= 640px) ----------
   Strategy: keep header to a single row.
   - breadcrumb collapses to just `wordart` (hide leading crumbs)
   - effect-nav horizontal-scrolls (overflow-x:auto) — single row, no wrap
   - wa-actions stay visible to the right, shrunk padding, 36px min touch target
   - theme pill kept compact
   - splash title shrinks, kbd grid stacks single column
   - footer shrinks font/spacing
   (Panel responsiveness lives in gui.css.) */
@media (max-width:640px){
  .wa-top{
    height:48px;
    gap:8px;
    padding:0 8px;
  }
  /* Hide breadcrumb on mobile — toys link is in the footer and the page
     title is implicit. Frees room for effect-nav scroll strip. */
  .kami-breadcrumb{ display:none; }

  .wa-top .grow{ display:none; }

  .effect-nav{
    flex:1 1 auto;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
    gap:4px;
  }
  .effect-nav::-webkit-scrollbar{ display:none; }
  .effect-nav a{
    flex:0 0 auto;
    padding:6px 10px;
    font-size:12px;
    min-height:32px;
    display:inline-flex;
    align-items:center;
  }

  .wa-actions{
    flex:0 0 auto;
    gap:4px;
  }
  .wa-actions button{
    padding:0 8px;
    height:36px;
    min-width:36px;
    font-size:11px;
    letter-spacing:0;
  }

  .theme-switcher-container{ flex:0 0 auto; }
  .theme-switcher-pill{ width:24px; height:24px; border-radius:6px; }
  .theme-switcher-pill-icon{ font-size:11px; }

  /* Splash: shrink title, stack the kbd grid single column */
  .wa-splash-inner{ padding:24px 20px; max-width:100%; }
  .wa-splash-title{ font-size:30px; margin-bottom:6px; }
  .wa-splash-tag{ font-size:11px; margin-bottom:22px; }
  .wa-splash-grid{
    grid-template-columns:1fr;
    gap:14px 0;
    margin-bottom:24px;
    font-size:11px;
    text-align:center;
  }
  .wa-splash-grid > span:nth-child(odd){ justify-self:center; }
  .wa-splash-grid > span:nth-child(even){ margin-top:-8px; }

  /* Footer: tighter */
  .wa-bottom{ padding:6px 10px 8px; font-size:.64rem; gap:2px; }
  .wa-bottom .row.made{ font-size:.68rem; }
  .wa-bottom .row{ gap:.35rem; }
}