:root{
  --bg:#E4E7EA; --bg2:#C9CFD4; --ink:#1C2730; --muted:#56636D; --line:rgba(28,39,48,.14);
  --panel:rgba(247,249,250,.78); --knob:#FFFFFF; --track:#B9C1C7; --accent:#7B0F43; --on-accent:#FFFFFF;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#1A2025; --bg2:#0E1215; --ink:#E2E7EA; --muted:#94A1AA; --line:rgba(226,231,234,.12);
  --panel:rgba(27,33,38,.8); --knob:#E2E7EA; --track:#3A444C; --accent:#C2276B; --on-accent:#FFFFFF; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#1A2025; --bg2:#0E1215; --ink:#E2E7EA; --muted:#94A1AA; --line:rgba(226,231,234,.12);
  --panel:rgba(27,33,38,.8); --knob:#E2E7EA; --track:#3A444C; --accent:#C2276B; --on-accent:#FFFFFF; color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;margin:0;overflow:hidden;color:var(--ink);
  background:radial-gradient(120% 90% at 40% 35%, var(--bg) 0%, var(--bg) 45%, var(--bg2) 100%);
  font-family:"IBM Plex Sans Condensed","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased}
#stage{position:fixed;inset:0}
#stage canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}

.title{position:fixed;left:clamp(16px,3vw,40px);top:calc(env(safe-area-inset-top,0px) + clamp(16px,3vw,36px));
  max-width:26rem;pointer-events:none}
.title h1{margin:0;font-weight:600;font-size:clamp(1.9rem,4.2vw,3.3rem);line-height:.95;letter-spacing:-.01em}
.title p{margin:.7rem 0 0;color:var(--muted);font-size:1rem;max-width:22rem}

.panel{position:fixed;right:clamp(12px,2.4vw,32px);top:50%;transform:translateY(-50%);
  width:17.5rem;background:var(--panel);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--line);border-radius:14px;padding:.5rem .9rem .9rem}
.row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.72rem 0;border-bottom:1px solid var(--line)}
.row:last-of-type{border-bottom:0}
.row .lbl{font-weight:500}
.row .sub{display:block;color:var(--muted);font-size:.84rem;font-weight:400}
.sw{appearance:none;border:0;background:var(--track);width:46px;height:26px;border-radius:13px;position:relative;cursor:pointer;flex:none;transition:background .2s}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--knob);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .22s cubic-bezier(.3,.7,.3,1)}
.sw[aria-pressed="true"]{background:var(--accent)}
.sw[aria-pressed="true"]::after{transform:translateX(20px);background:#fff}
.btn{font:inherit;font-weight:500;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:8px;padding:.35rem .8rem;cursor:pointer}
.btn:hover{border-color:var(--muted)}
.slider{padding:.72rem 0 .5rem;border-bottom:1px solid var(--line)}
.slider .top{display:flex;justify-content:space-between;align-items:baseline}
.slider output{font-variant-numeric:tabular-nums;color:var(--muted)}
input[type=range]{width:100%;margin:.6rem 0 .1rem;accent-color:var(--accent)}
.run{margin-top:.9rem;width:100%;font:inherit;font-weight:600;font-size:1.05rem;border:0;border-radius:10px;padding:.8rem 1rem;
  background:var(--accent);color:var(--on-accent);cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.run .st{font-weight:400;font-variant-numeric:tabular-nums;opacity:.8}
button:disabled,input:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.foot{position:fixed;left:clamp(16px,3vw,40px);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(14px,2.5vw,28px));
  right:22rem;display:flex;gap:1.5rem;align-items:flex-end;flex-wrap:wrap;pointer-events:none}
.part{pointer-events:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.55rem .8rem;max-width:24rem;display:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.part.show{display:block}
.part b{font-weight:600;display:block}
.part span{color:var(--muted);font-size:.86rem}
.hint{color:var(--muted);font-size:.9rem}
.copy{position:fixed;right:clamp(12px,2.4vw,32px);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(12px,2vw,22px));
  color:var(--muted);font-size:.8rem;letter-spacing:.01em;pointer-events:none;user-select:none;-webkit-user-select:none;opacity:.85}

#loader{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none}
#loader div{text-align:center;color:var(--muted)}
#loader .bar{width:12rem;height:2px;background:var(--line);margin:.8rem auto 0;overflow:hidden;border-radius:2px}
#loader .bar i{display:block;height:100%;width:30%;background:var(--accent);animation:ld 1.1s ease-in-out infinite}
@keyframes ld{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
#loader.err .bar{display:none}

@media (max-width:760px){
  .title p{display:none}
  .panel{top:auto;transform:none;left:0;right:0;bottom:0;width:auto;border-radius:16px 16px 0 0;border-bottom:0;
    padding:.2rem 1rem calc(env(safe-area-inset-bottom,0px) + .8rem);max-height:46vh;overflow:auto}
  .row{padding:.55rem 0}
  .row .sub{display:none}
  .foot{right:16px;bottom:calc(46vh + 10px)}
  .hint{display:none}
  .copy{right:auto;left:16px;bottom:calc(46vh + 10px);font-size:.74rem;background:var(--panel);padding:.12rem .45rem;border-radius:6px;opacity:1}
  .foot{bottom:calc(46vh + 30px)}
}
@media (prefers-reduced-motion:reduce){ .sw,.sw::after{transition:none} #loader .bar i{animation:none;width:100%} }

/* ---- self-hosted fonts ---- */
/* @font-face rules are in fonts.css, loaded before this file */

/* ---- determinate loading bar ---- */
#loader .bar i{width:0;animation:none;transition:width .2s ease-out}
#ldTxt{font-variant-numeric:tabular-nums}

/* ---- embedded mode: no oversized title, controls stay usable in a small frame ---- */
:root[data-embed] .title h1{font-size:clamp(1.2rem,3.4vw,1.8rem)}
:root[data-embed] .title p{display:none}
:root[data-embed] .panel{max-height:calc(100% - 76px);overflow:auto}
#zoomHint{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .2s;z-index:5}
#zoomHint span{background:rgba(20,26,30,.82);color:#fff;padding:.5rem .9rem;border-radius:10px;font-size:.95rem}
#zoomHint.show{opacity:1}
.iconbtn{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;z-index:6;width:40px;height:40px;
  display:none;place-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--ink);cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
:root[data-embed] .iconbtn{display:grid}
@media (max-width:760px){ :root[data-embed] .panel{max-height:40vh} }