/* Koolios Draw — flat, solid, rounded. No gradients, no shadows, no blur, no translucency. */
:root{
  --bg:#0f1117; --panel:#171a23; --panel2:#1f2330; --line:#2a2f40;
  --ink:#e8ebf4; --dim:#8b93a7; --accent:#5b8cff; --accent2:#39d98a;
  --danger:#ff5d6c; --r:16px; --rs:12px;
  --bar-h:56px; --tool-h:64px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#eef0f5; --panel:#ffffff; --panel2:#e7eaf2; --line:#d4d9e6;
    --ink:#1a1d26; --dim:#5d6579; --accent:#3d6ef5; --accent2:#13b56d; }
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  touch-action:none; user-select:none; -webkit-user-select:none;
  position:fixed; inset:0;
}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- stage ---- */
#stage{position:absolute;inset:0}
#stage canvas{position:absolute;left:0;top:0;width:100%;height:100%;touch-action:none}
#overlayCanvas{pointer-events:none}

/* ---- bars ---- */
.bar{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2px;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:6px;z-index:20}
#topbar{top:calc(env(safe-area-inset-top,0px) + 10px)}
#toolbar{bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}
.title{font-weight:800;font-size:13px;letter-spacing:2px;padding:0 12px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.tsep{width:1px;height:26px;background:var(--line);margin:0 4px;border-radius:1px}

.ibtn,.tbtn{
  width:44px;height:44px;border:none;border-radius:14px;background:var(--panel);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;
  transition:background .18s, transform .12s cubic-bezier(.34,1.56,.64,1), color .18s;
}
.ibtn svg,.tbtn svg{width:22px;height:22px}
.ibtn:active,.tbtn:active{transform:scale(.86)}
.tbtn.active{background:var(--accent);color:#fff;animation:pop .3s cubic-bezier(.34,1.7,.64,1)}
.ibtn.lit{color:var(--accent)}
.ibtn:disabled{color:var(--line);pointer-events:none}

.swatch{padding:8px}
#swatchInk{display:block;width:100%;height:100%;border-radius:10px;background:#5b8cff;
  border:2px solid var(--line);transition:background .2s, transform .2s}
.swatch:active #swatchInk{transform:scale(.85)}

/* ---- floating vertical sliders ---- */
#sliders{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:15}
.vslider{width:34px;height:150px;background:var(--panel);border:1px solid var(--line);
  border-radius:17px;position:relative;overflow:hidden;cursor:pointer;transition:height .25s}
.vslider-fill{position:absolute;left:0;right:0;bottom:0;background:var(--panel2);border-radius:0 0 16px 16px}
.vslider-dot{position:absolute;left:50%;width:18px;height:18px;border-radius:50%;
  background:var(--accent);transform:translateX(-50%);transition:transform .12s}
.vslider.dragging .vslider-dot{transform:translateX(-50%) scale(1.45)}

/* value bubble while dragging (touch) */
.vbubble{position:absolute;left:46px;background:var(--panel);border:2px solid var(--accent);
  border-radius:14px;padding:8px 13px;font-size:15px;font-weight:800;color:var(--ink);
  white-space:nowrap;pointer-events:none;transform:translateY(-50%) scale(0);
  transition:transform .18s cubic-bezier(.34,1.7,.64,1);z-index:16;font-variant-numeric:tabular-nums}
.vbubble.show{transform:translateY(-50%) scale(1)}
.vbubble::before{content:"";position:absolute;left:-7px;top:50%;width:10px;height:10px;
  background:var(--panel);border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-50%) rotate(45deg)}

/* always-visible values (desktop / fine pointer) */
.vlabel{display:none;text-align:center;font-size:11px;font-weight:700;color:var(--dim);
  margin:-8px 0 0;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  .vlabel{display:block}
}
.vslider.dragging{height:190px}

/* ---- buttons / chips ---- */
.btn{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:var(--rs);
  padding:11px 16px;font-size:14px;font-weight:600;cursor:pointer;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1), background .18s, border-color .18s;}
.btn:active{transform:scale(.94)}
.btn.wide{width:100%}
.btn.danger{color:var(--danger);border-color:var(--danger)}
.chip{background:var(--panel2);border:1px solid var(--line);color:var(--dim);border-radius:999px;
  padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer;
  transition:transform .15s cubic-bezier(.34,1.7,.64,1), background .18s, color .18s, border-color .18s;}
.chip:active{transform:scale(.9)}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.06)}
.toggle{background:var(--panel2);border:1px solid var(--line);color:var(--dim);border-radius:var(--rs);
  padding:10px 12px;font-size:13px;font-weight:600;cursor:pointer;flex:1;
  transition:background .2s, color .2s, border-color .2s, transform .12s;}
.toggle:active{transform:scale(.95)}
.toggle.on{background:var(--accent2);border-color:var(--accent2);color:#04140c}
.toggle.on::before{content:"● ";font-size:9px;vertical-align:2px}

/* ---- form rows ---- */
.row{display:flex;gap:8px;margin:10px 0;align-items:center}
.chiprow{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}
.togglerow{display:flex;gap:8px;margin:10px 0}
.preset-row{flex-wrap:wrap}
.srow{display:flex;align-items:center;gap:10px;margin:12px 0;font-size:13px;font-weight:600;color:var(--dim)}
.sval{min-width:34px;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.hint{font-size:12px;color:var(--dim);line-height:1.5;margin-top:10px}
h2.sub{margin-top:18px}

/* ---- range inputs (flat) ---- */
input[type=range]{flex:1;appearance:none;-webkit-appearance:none;height:34px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:var(--panel2);border:1px solid var(--line)}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin-top:-8px;
  border-radius:50%;background:var(--accent);border:none;transition:transform .15s cubic-bezier(.34,1.7,.64,1)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.35)}
input[type=range]::-moz-range-track{height:10px;border-radius:5px;background:var(--panel2);border:1px solid var(--line)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--accent);border:none}

input[type=text]{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:var(--rs);
  color:var(--ink);padding:11px 14px;font-size:15px;font-family:ui-monospace,monospace;outline:none;
  transition:border-color .2s}
input[type=text]:focus{border-color:var(--accent)}
select.btn{appearance:none;width:100%}

/* ---- zoom chip ---- */
#zoomChip{position:absolute;top:calc(env(safe-area-inset-top,0px) + 76px);left:50%;
  transform:translateX(-50%) scale(0);background:var(--panel);border:1px solid var(--line);
  color:var(--dim);border-radius:999px;padding:8px 16px;font-size:12px;font-weight:800;
  cursor:pointer;z-index:25;font-variant-numeric:tabular-nums;
  transition:transform .2s cubic-bezier(.34,1.7,.64,1)}
#zoomChip.show{transform:translateX(-50%) scale(1)}

.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}

.title{cursor:pointer;transition:color .2s}
.title:active{color:var(--accent)}

/* ---- toasts ---- */
#toasts{position:absolute;top:calc(env(safe-area-inset-top,0px) + 76px);left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;z-index:60;pointer-events:none;align-items:center}
.toast{background:var(--panel);color:var(--ink);border:1px solid var(--accent);border-radius:999px;
  padding:10px 20px;font-size:13px;font-weight:700;animation:toastIn .35s cubic-bezier(.34,1.56,.64,1);white-space:nowrap}
.toast.out{animation:toastOut .3s forwards}

/* ---- splash ---- */
#splash{position:fixed;inset:0;background:var(--bg);z-index:100;display:grid;place-items:center;transition:transform .5s cubic-bezier(.7,0,.3,1)}
#splash.gone{transform:translateY(-105%)}
.splash-logo{display:flex;flex-direction:column;align-items:center;gap:14px}
.splash-logo svg{border-radius:24px;animation:pop .6s cubic-bezier(.34,1.7,.64,1)}
.splash-name{font-weight:800;letter-spacing:6px;font-size:14px;color:var(--dim);animation:rise .6s .15s both}
.splash-stroke{stroke-dasharray:120;stroke-dashoffset:120;animation:drawline 1s .2s forwards ease-out}

/* ---- desktop ---- */
@media (min-width:1024px){
  #toolbar{bottom:24px}
  .ibtn:hover,.tbtn:hover{background:var(--panel2)}
  .tbtn.active:hover{background:var(--accent)}
  .btn:hover,.chip:hover{border-color:var(--accent)}
}