@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200..900&display=swap');
*,*::before,*::after{box-sizing:border-box;}

/* DEFAULT (classic) — neutral cream/dark, matches toys.iamkesava.com default */
:root{
  --bg:#f6f6f4; --text:#1d1d1f;
  --border:rgba(0,0,0,.08); --thumb:#1d1d1f; --rec-overlay:rgba(0,0,0,.78); --canvas-edge:rgba(0,0,0,.06);
  --ov-bg:rgba(20,20,22,.86); --ov-text:#fafafa; --ov-dim:#a8a8ad; --ov-mid:#dedee2; --ov-strong:#fff;
  --ov-border:rgba(255,255,255,.10); --ov-grid-bg:rgba(255,255,255,.02); --ov-row-bg:rgba(255,255,255,.02);
  --ov-row-border:rgba(255,255,255,.06); --ov-key-bg:rgba(255,255,255,.06); --ov-key-text:#dedee2; --ov-dot:#fafafa;
  --pill-bg:rgba(20,20,22,.06); --pill-border:rgba(20,20,22,.10); --pill-text:rgba(20,20,22,.55);
  --pill-text-active:rgba(20,20,22,.95); --pill-text-dim:rgba(20,20,22,.35);
  --pill-radius:100px; --drw-radius:18px;
  color-scheme:light;
}

/* BRUTALIST — white surface, hard black borders, magenta accent */
html[data-theme="brutalist"]{
  --bg:#ffffff; --text:#000000;
  --border:#000; --thumb:#000; --rec-overlay:rgba(0,0,0,.92); --canvas-edge:#000;
  --ov-bg:rgba(0,0,0,.92); --ov-text:#fff; --ov-dim:#bbb; --ov-mid:#fff; --ov-strong:#d946ef;
  --ov-border:rgba(255,255,255,.16); --ov-grid-bg:transparent; --ov-row-bg:transparent;
  --ov-row-border:rgba(255,255,255,.20); --ov-key-bg:#000; --ov-key-text:#d946ef; --ov-dot:#d946ef;
  --pill-bg:#fff; --pill-border:#000; --pill-text:#000; --pill-text-active:#d946ef; --pill-text-dim:#666;
  --pill-radius:0; --drw-radius:0;
  color-scheme:light;
}

/* EDITORIAL — warm cream, ink, deep ochre */
html[data-theme="editorial"]{
  --bg:#f3eee2; --text:#16140c;
  --border:#c8c0a8; --thumb:#16140c; --rec-overlay:rgba(22,20,12,.86); --canvas-edge:rgba(22,20,12,.10);
  --ov-bg:rgba(22,20,12,.88); --ov-text:#f3eee2; --ov-dim:#b8ad8c; --ov-mid:#e1d7b8; --ov-strong:#d4a040;
  --ov-border:rgba(243,238,226,.12); --ov-grid-bg:rgba(243,238,226,.03); --ov-row-bg:rgba(243,238,226,.03);
  --ov-row-border:rgba(243,238,226,.08); --ov-key-bg:rgba(243,238,226,.08); --ov-key-text:#e1d7b8; --ov-dot:#d4a040;
  --pill-bg:rgba(22,20,12,.05); --pill-border:rgba(22,20,12,.12); --pill-text:rgba(22,20,12,.55);
  --pill-text-active:#16140c; --pill-text-dim:rgba(22,20,12,.35);
  --pill-radius:4px; --drw-radius:6px;
  color-scheme:light;
}

/* TERMINAL (phosphor) — black background, phosphor green type, mono everywhere */
html[data-theme="terminal"]{
  --bg:#020806; --text:#26ff9d;
  --border:rgba(38,255,157,.18); --thumb:#26ff9d; --rec-overlay:rgba(2,8,6,.96); --canvas-edge:rgba(38,255,157,.12);
  --ov-bg:rgba(2,8,6,.96); --ov-text:#26ff9d; --ov-dim:rgba(38,255,157,.55); --ov-mid:rgba(38,255,157,.85);
  --ov-strong:#9eff00; --ov-border:rgba(38,255,157,.18); --ov-grid-bg:rgba(38,255,157,.02);
  --ov-row-bg:rgba(38,255,157,.02); --ov-row-border:rgba(38,255,157,.08);
  --ov-key-bg:rgba(38,255,157,.06); --ov-key-text:#9eff00; --ov-dot:#9eff00;
  --pill-bg:rgba(38,255,157,.04); --pill-border:rgba(38,255,157,.18); --pill-text:rgba(38,255,157,.55);
  --pill-text-active:#9eff00; --pill-text-dim:rgba(38,255,157,.30);
  --pill-radius:0; --drw-radius:0;
  color-scheme:dark;
}

/* ZEN — soft stone, minimal contrast */
html[data-theme="zen"]{
  --bg:#ecead8; --text:#3a3a32;
  --border:rgba(58,58,50,.10); --thumb:#3a3a32; --rec-overlay:rgba(58,58,50,.78); --canvas-edge:rgba(58,58,50,.06);
  --ov-bg:rgba(236,234,216,.96); --ov-text:#3a3a32; --ov-dim:#84847c; --ov-mid:#54544c; --ov-strong:#1f1f1c;
  --ov-border:rgba(58,58,50,.10); --ov-grid-bg:rgba(58,58,50,.02); --ov-row-bg:rgba(58,58,50,.02);
  --ov-row-border:rgba(58,58,50,.06); --ov-key-bg:rgba(58,58,50,.05); --ov-key-text:#54544c; --ov-dot:#1f1f1c;
  --pill-bg:rgba(58,58,50,.04); --pill-border:rgba(58,58,50,.10); --pill-text:rgba(58,58,50,.55);
  --pill-text-active:#1f1f1c; --pill-text-dim:rgba(58,58,50,.35);
  --pill-radius:100px; --drw-radius:18px;
  color-scheme:light;
}

html[data-theme="terminal"] body,
html[data-theme="terminal"] input,
html[data-theme="terminal"] button{font-family:'JetBrains Mono','Fira Mono','SF Mono',ui-monospace,monospace !important;}

html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:.06em;height:100dvh;overflow:hidden;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:background 200ms ease,color 200ms ease;}
body{position:relative;width:100vw;height:100dvh;overflow:hidden;}

/* SPLASH OVERLAY */
.ov{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--ov-bg);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);transition:opacity .5s cubic-bezier(.4,0,.2,1);padding:20px;overflow-y:auto;}
.ov.gone{opacity:0;pointer-events:none;}
.spl-inner{max-width:490px;width:100%;display:flex;flex-direction:column;align-items:center;}
.spl-title{font-size:clamp(.92rem,3vw,1.5rem);font-weight:200;letter-spacing:.3em;color:var(--ov-text);margin-bottom:7px;text-align:center;}
.spl-desc{font-size:clamp(.54rem,.82vw,.66rem);font-weight:300;letter-spacing:.1em;color:var(--ov-dim);line-height:2;text-align:center;margin-bottom:24px;max-width:360px;}
.sgrid{border:1px solid var(--ov-border);border-radius:10px;overflow:hidden;grid-template-columns:1fr 1fr;width:100%;background:var(--ov-grid-bg);}
.sck{display:grid;width:100%;margin-bottom:0;}
.sct{display:none;width:100%;margin-bottom:0;}
@media(hover:none) and (pointer:coarse){.sck{display:none;}.sct{display:grid;}}
@media(max-width:440px){.sgrid{grid-template-columns:1fr;}}
.srow{display:flex;align-items:center;padding:9px 12px;gap:9px;background:var(--ov-row-bg);border-right:1px solid var(--ov-row-border);border-bottom:1px solid var(--ov-row-border);}
.srow:nth-child(2n){border-right:none;}
.srow:nth-last-child(-n+2){border-bottom:none;}
.srow.cta{background:var(--ov-key-bg);border-bottom:none;grid-column:1/-1;}
.srow.cta .skey{color:var(--ov-strong);border-color:var(--ov-border);background:var(--ov-key-bg);letter-spacing:.06em;}
.cta-phrase{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;}
.cta-word{font-size:.52rem;font-weight:300;letter-spacing:.07em;color:var(--ov-mid);white-space:nowrap;}
.blink-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ov-dot);opacity:.4;flex-shrink:0;margin-left:4px;animation:blink 1.4s ease-in-out infinite;}
.skey{font-size:.5rem;font-weight:400;letter-spacing:.06em;color:var(--ov-key-text);background:var(--ov-key-bg);border:1px solid var(--ov-border);border-radius:4px;padding:2px 7px;white-space:nowrap;flex-shrink:0;min-width:38px;text-align:center;}
.sdsc{font-size:.52rem;font-weight:300;letter-spacing:.05em;color:var(--ov-dim);}
@media(max-width:440px){.srow{border-right:none;}.srow:nth-last-child(-n+2){border-bottom:1px solid var(--ov-row-border);}.srow:last-child{border-bottom:none;}.srow.cta{border-bottom:none;}}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.4;}}

/* TOP BAR */
#topbar{position:fixed;top:14px;right:14px;z-index:30;display:flex;gap:5px;transition:opacity .5s ease;}
.tb{font:300 13px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--pill-text);background:var(--pill-bg);border:1px solid var(--pill-border);border-radius:var(--pill-radius);min-width:36px;height:32px;padding:0 10px;display:flex;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:color .3s,background .3s;position:relative;-webkit-tap-highlight-color:transparent;}
.tb:hover{background:var(--pill-bg);color:var(--pill-text-active);}
.tb.rec-active{border-color:#c0392b;color:#c0392b;animation:blink .9s ease-in-out infinite;}
.tb .kbk{font-size:.34rem;opacity:.4;font-weight:300;letter-spacing:.04em;position:absolute;bottom:3px;right:7px;}
@media(hover:none) and (pointer:coarse){.tb .kbk{display:none;}}
.tb svg{width:14px;height:14px;display:block;}
.tb-theme-glyph{font-size:13px;line-height:1;display:inline-block;}

/* CONTROL BAR */
#controlbar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:3px;background:var(--pill-bg);border:1px solid var(--pill-border);border-radius:var(--pill-radius);padding:4px 6px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;max-width:calc(100vw - 32px);}
#controlbar::-webkit-scrollbar{display:none;}
.cbar-label{font:400 .56rem/1 inherit;letter-spacing:.16em;text-transform:uppercase;color:var(--pill-text-dim);padding:0 10px 0 6px;white-space:nowrap;}
.pb{font:400 .56rem/1 inherit;letter-spacing:.08em;text-transform:uppercase;color:var(--pill-text);background:none;border:none;border-radius:var(--pill-radius);padding:0 14px;min-height:44px;cursor:pointer;white-space:nowrap;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:color .2s;-webkit-tap-highlight-color:transparent;user-select:none;text-decoration:none;}
.pb:hover{color:var(--pill-text-active);}
.pb.on{color:var(--pill-text-active);}
.pb.on::after{content:'';position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;background:var(--pill-text-active);opacity:.6;}
.pb .kbk{font-size:.34rem;opacity:.25;font-weight:300;letter-spacing:.04em;}
@media(hover:none) and (pointer:coarse){.pb .kbk{display:none;}}

/* DRAWER */
#drawer{position:fixed;top:14px;right:14px;bottom:80px;width:320px;z-index:25;background:var(--pill-bg);border:1px solid var(--pill-border);border-radius:var(--drw-radius);padding:18px;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);transform:translateX(110%);transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s ease;display:flex;flex-direction:column;gap:14px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--pill-border) transparent;}
#drawer::-webkit-scrollbar{width:6px;}
#drawer::-webkit-scrollbar-thumb{background:var(--pill-border);border-radius:3px;}
#drawer.open{transform:translateX(0);}
.drw-section{display:flex;flex-direction:column;gap:6px;}
.drw-label{color:var(--pill-text-dim);font-size:9px;letter-spacing:.16em;text-transform:uppercase;}
#text-input{background:transparent;border:none;border-bottom:1px solid var(--pill-border);color:var(--text);font-family:inherit;font-size:14px;font-weight:600;letter-spacing:.04em;outline:none;padding:4px 0 5px;width:100%;text-transform:none;caret-color:var(--pill-text-active);min-width:0;}
#text-input::placeholder{color:var(--pill-text-dim);}
#text-input:focus{border-bottom-color:var(--pill-text-active);}
.fmt-row{display:flex;gap:4px;}
.fmt-btn{background:transparent;border:1px solid var(--pill-border);color:var(--pill-text);cursor:pointer;font-size:14px;flex:1;height:30px;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--drw-radius)*0.45);transition:border-color 80ms,color 80ms;line-height:1;}
.fmt-btn.active{border-color:var(--pill-text-active);color:var(--pill-text-active);}
.fmt-btn:hover:not(.active){color:var(--pill-text-active);}
.param-row{display:flex;flex-direction:column;gap:11px;}
.param{display:flex;flex-direction:column;gap:5px;min-width:0;}
.param-header{display:flex;justify-content:space-between;align-items:baseline;gap:4px;}
.param-label{color:var(--pill-text-dim);font-size:9px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;}
.param-val{color:var(--pill-text);font-size:9px;font-variant-numeric:tabular-nums;white-space:nowrap;}
input[type=range]{-webkit-appearance:none;width:100%;height:1px;background:var(--pill-border);outline:none;cursor:pointer;margin:0;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--pill-text-active);cursor:pointer;}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--pill-text-active);border:none;cursor:pointer;}
@media(max-width:540px){
  #drawer{top:auto;right:14px;left:14px;bottom:80px;width:auto;max-height:60vh;}
  input[type=range]::-webkit-slider-thumb{width:18px;height:18px;}
  input[type=range]::-moz-range-thumb{width:18px;height:18px;}
}
#topbar,#controlbar,#drawer{opacity:0;pointer-events:none;transition:opacity .5s ease;}
.chrome-on #topbar{opacity:1;pointer-events:auto;}
.chrome-on #controlbar.show{opacity:1;pointer-events:auto;}
.chrome-on #drawer.open{opacity:1;pointer-events:auto;}

#rec-overlay{display:none;position:fixed;inset:0;background:var(--rec-overlay);align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.rec-inner{display:flex;flex-direction:column;align-items:center;gap:16px;min-width:220px;}
.rec-dot{width:9px;height:9px;background:#c0392b;border-radius:50%;animation:blink .8s ease-in-out infinite;}
#rec-label{font-size:11px;letter-spacing:.2em;color:var(--ov-text);}
.rec-track{width:180px;height:1px;background:var(--ov-border);}
#rec-bar{height:1px;background:var(--ov-text);width:0%;}

main{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);overflow:hidden;transition:background 200ms ease;z-index:0;}
#canvas{display:block;box-shadow:0 0 0 1px var(--canvas-edge);}

/* — FORM DRAWER PARAMS (tooooools-style monospace control panel) — */
#drawer{font-family:"JetBrains Mono","SF Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.04em;}
#drawer #text-input{font-family:inherit;font-size:13px;letter-spacing:.02em;}
.fp-row{display:flex;align-items:center;gap:8px;padding:3px 0;min-height:22px;}
.fp-row .fp-lbl{flex:1;color:var(--pill-text);text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;font-size:10px;}
.fp-row.fp-slider input[type=range]{flex:1.4;min-width:60px;}
.fp-row.fp-slider .fp-val{font-variant-numeric:tabular-nums;color:var(--pill-text-active);font-size:10px;min-width:42px;text-align:right;}
.fp-check{background:transparent;border:none;color:var(--pill-text-active);cursor:pointer;font:inherit;padding:0 4px;line-height:1;}
.fp-row.fp-check{padding:2px 0;}
.fp-row.fp-check .fp-lbl{flex:1;}
.fp-row.fp-select{padding:2px 0;}
.fp-sel-prev,.fp-sel-next{background:transparent;border:none;color:var(--pill-text);cursor:pointer;font:inherit;padding:0 4px;line-height:1;}
.fp-sel-prev:hover,.fp-sel-next:hover{color:var(--pill-text-active);}
.fp-sel-val{color:var(--pill-text-active);min-width:54px;text-align:center;text-transform:uppercase;font-size:10px;letter-spacing:.1em;}
.fp-sep{height:1px;background:var(--pill-border);margin:8px 0;opacity:0.5;}
.fp-row.fp-btnrow{gap:6px;padding-top:4px;}
.fp-btn{flex:1;background:transparent;border:1px solid var(--pill-border);color:var(--pill-text-active);cursor:pointer;font:inherit;padding:6px 8px;border-radius:6px;text-align:left;display:flex;justify-content:space-between;align-items:center;letter-spacing:.08em;text-transform:uppercase;font-size:10px;}
.fp-btn:hover{border-color:var(--pill-text-active);background:rgba(127,127,127,0.04);}
.fp-key{opacity:0.4;font-size:9px;letter-spacing:0;}
html[data-theme="terminal"] #drawer{font-family:"JetBrains Mono","SF Mono",ui-monospace,monospace;}