/* 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, reserve
   320px on the right for the controls panel so the wordmark rasterizes into
   the visible region. 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}
/* Wordart effects read cv.clientWidth/Height and rely on the canvas filling
   the stage. Force-stretch so each effect's fitCanvas() picks up the correct
   pixel size regardless of intrinsic canvas defaults. */
.wa-stage canvas{display:block;width:100% !important;height:100% !important}
@media (min-width:641px){
  .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; }
}

/* Fused switcher — prev ‹ | name | › next as one pill */
.effect-switcher{
  display:flex; align-items:stretch;
  border:1px solid var(--bar-border);
  border-radius:4px;
  overflow:hidden;
  flex:0 0 auto;
  height:28px;
  box-sizing:border-box;
}
.effect-switcher .effect-nav-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; padding:0; margin:0;
  height:100%; min-height:0; box-sizing:border-box;
  border:none; border-radius:0;
  color:var(--text); opacity:.6;
  text-decoration:none;
  font-family:var(--kami-font-mono); font-size:14px;
  background:transparent;
  transition:opacity .15s, background .15s;
  flex:0 0 auto;
  cursor:pointer;
}
.effect-switcher .effect-nav-arrow:first-child{
  border-right:1px solid var(--bar-border);
}
.effect-switcher .effect-nav-arrow:last-child{
  border-left:1px solid var(--bar-border);
}
.effect-switcher .effect-nav-arrow:hover{ opacity:1; background:rgba(128,128,128,.1); }
.effect-switcher .effect-nav-current{
  min-width:140px;
  display:inline-flex; align-items:center; justify-content:center; gap:0;
  background:transparent;
  border:none; border-radius:0;
  padding:4px 10px;
  font-family:var(--kami-font-body); font-size:12px;
  color:var(--text);
  cursor:pointer;
  transition:background .15s;
}
.effect-switcher .effect-nav-current:hover{ background:rgba(128,128,128,.08); }
.effect-switcher .effect-nav-chev{ display:none; }
@media (max-width:640px){
  .effect-switcher .effect-nav-current{ min-width:100px; }
}

/* ---------- 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;
  height:28px; box-sizing:border-box;
  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 }
/* ---------- MODE BUTTONS (Animate / Cursor) ----------
   Live in .wa-actions header on desktop; in .wa-mode-bottom on mobile. */
.wa-mode-btn{
  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;
  height:28px; box-sizing:border-box;
  transition:background .15s, color .15s, border-color .15s;
  letter-spacing:.02em;
}
.wa-mode-btn:hover{ background:var(--text); color:var(--bg); border-color:var(--text) }
.wa-mode-btn.active{ background:var(--accent); color:var(--bg); border-color:var(--accent) }

/* ---------- PANEL TOGGLE (desktop) ---------- */
@media (min-width:641px){
  body.panel-hidden .wg{ display:none; }
  body.panel-hidden .wa-stage{ right:0 !important; }
}

/* 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{
  height:28px; box-sizing:border-box;
  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 }

/* Brutalist effect-switcher: one outer shadow, no per-arrow shadows */
html[data-theme="brutalist"] .effect-switcher{
  border:2px solid #000;
  box-shadow:3px 3px 0 #000;
}
html[data-theme="brutalist"] .effect-switcher .effect-nav-arrow{
  box-shadow:none; transform:none; background:#fff; color:#000;
  border:none; border-right:2px solid #000;
}
html[data-theme="brutalist"] .effect-switcher .effect-nav-arrow:last-child{
  border-right:none; border-left:2px solid #000;
}
html[data-theme="brutalist"] .effect-switcher .effect-nav-arrow:hover{
  background:#d946ef; box-shadow:none; transform:none;
}
html[data-theme="brutalist"] .effect-switcher .effect-nav-current{
  box-shadow:none; background:#fff; color:#000;
  font-family:var(--kami-font-mono);
}
html[data-theme="brutalist"] .effect-switcher .effect-nav-current:hover{
  background:#d946ef; transform:none; box-shadow:none;
}
/* Brutalist mode buttons */
html[data-theme="brutalist"] .wa-mode-btn{
  background:#fff; color:#000; border:2px solid #000; 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-mode-btn:hover{
  background:#d946ef; color:#000; box-shadow:4px 4px 0 #000; transform:translate(-1px,-1px);
}
html[data-theme="brutalist"] .wa-mode-btn.active{
  background:#d946ef; color:#000; border-color:#000; box-shadow:3px 3px 0 #000;
  transform:none;
}

/* --- 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; }

/* Editorial effect-switcher: remove individual arrow borders (outer border suffices) */
html[data-theme="editorial"] .effect-switcher .effect-nav-arrow{
  border:none; border-radius:0;
}
html[data-theme="editorial"] .effect-switcher .effect-nav-arrow:first-child{ border-right:1px solid rgba(22,20,12,.25); }
html[data-theme="editorial"] .effect-switcher .effect-nav-arrow:last-child{ border-left:1px solid rgba(22,20,12,.25); }
/* Editorial mode buttons */
html[data-theme="editorial"] .wa-mode-btn{
  background:transparent; color:#16140c; border:1px solid rgba(22,20,12,.25); border-radius:2px;
  font-family:Georgia, 'EB Garamond', serif; font-style:italic;
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}
html[data-theme="editorial"] .wa-mode-btn:hover,
html[data-theme="editorial"] .wa-mode-btn.active{
  background:#16140c; color:#f3eee2; border-color:#16140c;
}

/* --- 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 }

/* Terminal effect-switcher: remove individual arrow borders */
html[data-theme="terminal"] .effect-switcher .effect-nav-arrow{
  border:none;
}
html[data-theme="terminal"] .effect-switcher .effect-nav-arrow:first-child{ border-right:1px dashed rgba(255,209,102,.45); }
html[data-theme="terminal"] .effect-switcher .effect-nav-arrow:last-child{ border-left:1px dashed rgba(255,209,102,.45); }
/* Terminal mode buttons */
html[data-theme="terminal"] .wa-mode-btn{
  background:transparent; color:#ffd166; border:1px dashed rgba(255,209,102,.45);
  font-family:var(--kami-font-mono); text-transform:uppercase; letter-spacing:.04em;
  transition:background 16ms linear, color 16ms linear;
}
html[data-theme="terminal"] .wa-mode-btn::before{ content:"["; opacity:.55; margin-right:1px }
html[data-theme="terminal"] .wa-mode-btn::after{ content:"]"; opacity:.55; margin-left:1px }
html[data-theme="terminal"] .wa-mode-btn:hover,
html[data-theme="terminal"] .wa-mode-btn.active{
  background:#ffd166; color:#0d1117; border-color:#ffd166; border-style:solid;
}

/* --- 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 }

/* Zen effect-switcher: remove individual arrow borders */
html[data-theme="zen"] .effect-switcher .effect-nav-arrow{
  border:none;
}
html[data-theme="zen"] .effect-switcher .effect-nav-arrow:first-child{ border-right:1px solid rgba(58,58,50,.25); }
html[data-theme="zen"] .effect-switcher .effect-nav-arrow:last-child{ border-left:1px solid rgba(58,58,50,.25); }
/* Zen mode buttons */
html[data-theme="zen"] .wa-mode-btn{
  background:transparent; color:#3a3a32; border:1px solid rgba(58,58,50,.25); border-radius:999px;
  font-weight:300; letter-spacing:.04em; text-transform:lowercase;
  transition:background .6s cubic-bezier(.22,1,.36,1), color .6s, border-color .6s;
}
html[data-theme="zen"] .wa-mode-btn:hover{
  background:rgba(58,58,50,.1); color:#1f1f1c; border-color:#1f1f1c;
}
html[data-theme="zen"] .wa-mode-btn.active{
  background:#3a3a32; color:#ecead8; border-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; }

  /* Hide help button from header on mobile (stays desktop-only) */
  .wa-actions button#help-btn{ display:none; }
}