:root{
  /* スクロールバーとネイティブ部品をダークで描かせる */
  color-scheme:dark;
  --bg:#0b0d10; --panel:#10151c; --panel2:#0e1218; --line:#1a2029;
  --ink:#dde3ea; --muted:#6a7784; --faint:#56616e;
  --accent:#8fb8ff; --accent-soft:#2c4a7a; --accent-face:rgba(143,184,255,.10);
  --on-accent:#0b0d10; --danger:#d98c7a;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Roboto Mono",monospace;
  --jp:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--jp);
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
button{font-family:inherit;color:inherit;cursor:pointer}

.app{
  display:flex; flex-direction:column; height:100%;
  max-width:560px; margin:0 auto;
}
.scroll{flex:1; overflow:auto; padding:calc(26px + env(safe-area-inset-top)) 20px 12px; -webkit-overflow-scrolling:touch}

/* header */
header{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px}
h1{font-size:22px; font-weight:650; letter-spacing:.04em; margin:0}
.sub{color:var(--muted); font-size:12.5px; margin:5px 0 0; max-width:26ch; text-wrap:pretty}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:10.5px; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:5px 9px; white-space:nowrap; margin-top:4px}
.dot{width:6px; height:6px; border-radius:50%; background:var(--accent)}

/* hero waveform */
.hero{background:var(--panel); border:1px solid var(--line); border-radius:20px;
  padding:16px 16px 13px; margin-bottom:20px}
canvas{display:block; width:100%; height:88px; margin-bottom:12px}
.hero-foot{display:flex; justify-content:space-between; align-items:center; gap:12px}
.now{font:600 12px/1 var(--mono); color:var(--accent); letter-spacing:.08em}
.preview-btn{border:1px solid var(--accent-soft); background:transparent; color:var(--accent);
  font-size:13px; font-weight:600; padding:7px 15px; border-radius:10px; min-height:44px;
  display:inline-flex; align-items:center; gap:7px; transition:background .14s}
.preview-btn:active{transform:translateY(1px)}
.preview-btn .ico{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent var(--accent)}
.preview-btn.playing{background:var(--accent-face)}
.preview-btn.playing .ico{width:8px;height:9px;border:none;background:var(--accent);border-radius:1px}

/* segments */
.segment{display:flex; gap:6px; background:var(--panel2); border:1px solid var(--line);
  border-radius:12px; padding:4px}
.segment button{flex:1; border:none; background:transparent; color:var(--muted);
  font-size:13px; font-weight:600; padding:8px 0; border-radius:9px;
  transition:background .14s,color .14s}
.segment button[aria-pressed="true"]{background:var(--accent); color:var(--on-accent)}
.cats{margin-bottom:12px}

/* type grid */
.types{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:20px}
@media(max-width:359px){.types{grid-template-columns:1fr}}
.type{appearance:none; text-align:left; background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:14px; padding:12px 13px; min-height:44px;
  transition:border-color .14s,background .14s}
.type:active{transform:translateY(1px)}
.type .nm{font-size:15px; font-weight:600; margin-bottom:3px}
.type .ds{font-size:10.5px; color:var(--muted); line-height:1.45; text-wrap:pretty}
.type[aria-pressed="true"]{background:var(--accent-face); border-color:var(--accent)}
.type[aria-pressed="true"] .nm{color:var(--accent)}

/* per-noise settings card */
.np{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:14px 14px 16px; margin-bottom:24px}
.np[hidden]{display:none}
.np-h{font-size:11px; letter-spacing:.14em; font-weight:600; color:var(--faint); margin:0 0 12px}
.np-body{display:flex; flex-direction:column; gap:14px}
.np .segment{background:var(--panel2)}
.np .segment button{font-size:12px}

/* sliders */
.lab{font-size:11px; letter-spacing:.14em; font-weight:600; color:var(--faint); margin:0 0 12px 2px}
.ctrls{display:flex; flex-direction:column; gap:18px; margin-bottom:20px}
.ctrl-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:2px}
.ctrl-top .k{font-size:14px}
.ctrl-top .v{font:600 14px/1 var(--mono); color:var(--accent)}
/* つまみは 22px だが、タップ領域を 40px 確保するために input 自体を 40px にする
   （box-sizing:border-box なので padding では稼げない） */
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:40px; background:transparent;
  padding:0; margin:0; display:block; outline:none;
}
/* トラックはグラデーションで塗り分ける。--pct は JS が更新する */
input[type=range]::-webkit-slider-runnable-track{
  height:4px; border-radius:99px;
  background:linear-gradient(90deg,var(--accent) var(--pct,50%),var(--line) var(--pct,50%));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; margin-top:-9px; border-radius:50%;
  background:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.5);
}
input[type=range]::-moz-range-track{height:4px; border-radius:99px; background:var(--line)}
input[type=range]::-moz-range-progress{height:4px; border-radius:99px; background:var(--accent)}
input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border:none; border-radius:50%;
  background:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.5);
}
input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ink); outline-offset:3px}
input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid var(--ink); outline-offset:3px}

/* toggles */
.toggles{display:flex; gap:9px; margin-bottom:24px}
.tg{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:11px 13px; display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:13px; min-height:44px}
.tg .sw{width:38px; height:22px; border-radius:99px; background:var(--line); position:relative;
  transition:background .16s; flex:none}
.tg .sw::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#cfd6df; transition:transform .16s,background .16s}
.tg[aria-pressed="true"] .sw{background:var(--accent-soft)}
.tg[aria-pressed="true"] .sw::after{transform:translateX(16px); background:var(--accent)}

/* save */
.fmt{display:flex; gap:9px; align-items:stretch; margin-bottom:12px}
.seg-fmt{flex:none; padding:0; border-radius:12px; overflow:hidden; background:var(--panel); gap:0}
.seg-fmt button{font:600 13px/1 var(--mono); padding:11px 17px; border-radius:0; flex:none; min-height:44px}
.chip{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:11px 13px; font-size:13px; display:flex; justify-content:space-between;
  align-items:center; gap:8px; min-height:44px}
/* class の display が [hidden] の既定を上書きしてしまうので明示する */
.chip[hidden]{display:none}
.chip-hint{color:var(--faint); font-size:12px}
.readout{border:1px dashed var(--line); border-radius:14px; padding:13px 15px;
  display:flex; justify-content:space-between; align-items:center; gap:12px}
.readout .r-k{font-size:12px; color:var(--muted)}
.readout .r-v{font:600 18px/1 var(--mono)}
.readout .r-v small{font-size:12px; color:var(--muted); font-weight:400; margin-left:4px}
.warn{color:var(--danger); font-size:12px; margin:9px 0 0}
.warn[hidden]{display:none}

footer{margin-top:28px; padding-top:18px; border-top:1px solid var(--line);
  color:var(--faint); font-size:11px; line-height:1.7}
footer a{color:var(--muted)}
footer p{margin:0 0 6px}

/* fixed bar */
.bar{padding:12px 20px calc(26px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:rgba(11,13,16,.96)}
.prog{height:6px; border-radius:99px; background:var(--line); overflow:hidden; margin-bottom:10px}
.prog[hidden]{display:none}
.prog i{display:block; height:100%; width:0%; border-radius:99px; background:var(--accent); transition:width .12s}
.go{width:100%; border:none; font-size:16px; font-weight:650; color:var(--on-accent);
  padding:16px; border-radius:15px; background:var(--accent)}
.go:active{transform:translateY(1px)}
.go:disabled{opacity:.55; cursor:default}
.status{text-align:center; font-size:12px; color:var(--muted); margin:9px 0 0; min-height:16px}
.status strong{color:var(--ink); font-weight:600}

@media(prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}