:root{
  --plastic:#f0ebe0;
  --page:#d8d0bf;
  --page-glow:#efe8d8;
  --ink:#3a382f;
  --ink-soft:#7d786a;
  --lcd-bg:#26291f;
  --lcd-bg2:#1f221a;
  --lcd-amber:#ffd06e;
  --lcd-dim:#5e5c46;
  --lcd-sub:#d8c58e;
  --lcd-dim2:#77745a;
  --lcd-eq:#8f854f;
  --lcd-border:#b9b19c;
  --accent:#ff6b57;
  --accent-hi:#ff8a70;
  --accent-edge:#c74a3a;
  --cell-off:#dcd5c5;
  --cell-shadow:inset 0 1px 2px rgba(90,80,60,.35), inset 0 -1px 0 rgba(255,255,255,.6);
  --r0:#ff5d8f; --r1:#ff8a5c; --r2:#ffc247; --r3:#a5d63f;
  --r4:#35c98f; --r5:#2fb7d9; --r6:#6e85f7;
  --bassA:#8a72ea; --bassB:#6a58d8;
  --hat:#9aa7b5; --clap:#e88bbf; --snare:#e8975a; --kick:#e05656;
  --radius:26px;
  --cell-r:6px;
  --device-hi:#f4efe4; --device-lo:#e9e3d4;
  --device-inset:rgba(255,255,255,.85);
  --key-hi:#fbf7ee; --key-lo:#e9e2d1; --key-edge:#c6bda7; --key-inset:#fff;
  --sel-hi:#4c473b; --sel-lo:#3a362c; --sel-edge:#26231c; --sel-text:#ffe9b0;
  --now-hi:#ffe1a8; --now-lo:#ffd06e; --now-edge:#cf9a35; --now-text:#5a4310;
  --track-hi:#cfc7b2; --track-lo:#ddd6c4;
  --thumb-hi:#fff; --thumb-lo:#efe9da; --thumb-edge:#b6ad96;
  --adv-bg:rgba(120,105,75,.08);
  --beatstripe:rgba(120,105,75,.10);
}
/* ---- スキン:プロ(本格ステップシーケンサー風のダーク) ---- */
body[data-skin="pro"]{
  --plastic:#2c2e36;
  --page:#17181d;
  --page-glow:#23242c;
  --ink:#e9e7df;
  --ink-soft:#9d9aa8;
  --lcd-bg:#101511;
  --lcd-bg2:#0b0f0c;
  --lcd-amber:#7dffa8;
  --lcd-dim:#2c4433;
  --lcd-sub:#5fce85;
  --lcd-dim2:#3d5c47;
  --lcd-eq:#4f9c68;
  --lcd-border:#41434d;
  --cell-off:#3a3d47;
  --cell-shadow:inset 0 1px 3px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.06);
  --radius:18px;
  --cell-r:4px;
  --device-hi:#33353e; --device-lo:#26282f;
  --device-inset:rgba(255,255,255,.07);
  --key-hi:#41444f; --key-lo:#33353e; --key-edge:#191a20; --key-inset:rgba(255,255,255,.12);
  --sel-hi:#f5f2e8; --sel-lo:#d9d4c4; --sel-edge:#8f8a78; --sel-text:#26231c;
  --now-hi:#ffe1a8; --now-lo:#ffd06e; --now-edge:#8a6a1e; --now-text:#5a4310;
  --track-hi:#1c1d23; --track-lo:#26272e;
  --thumb-hi:#4b4e59; --thumb-lo:#383b44; --thumb-edge:#15161b;
  --adv-bg:rgba(0,0,0,.25);
  --beatstripe:rgba(255,255,255,.05);
}
/* ---- スキン:よぞら(夜のパステルネオン) ---- */
body[data-skin="yozora"]{
  --plastic:#353052;
  --page:#211d3a;
  --page-glow:#2e2950;
  --ink:#f2edff;
  --ink-soft:#a99fce;
  --lcd-bg:#191430;
  --lcd-bg2:#131028;
  --lcd-amber:#ffb3d9;
  --lcd-dim:#4a3f6e;
  --lcd-sub:#c9a9ef;
  --lcd-dim2:#5c4f88;
  --lcd-eq:#8a76c2;
  --lcd-border:#57508a;
  --accent:#ff7ab8;
  --accent-hi:#ff9ccb;
  --accent-edge:#c24a86;
  --cell-off:#453e6b;
  --cell-shadow:inset 0 1px 3px rgba(0,0,10,.5), inset 0 -1px 0 rgba(255,255,255,.09);
  --device-hi:#3d3760; --device-lo:#2f2a4e;
  --device-inset:rgba(255,255,255,.1);
  --key-hi:#4d4677; --key-lo:#3d3762; --key-edge:#221e3e; --key-inset:rgba(255,255,255,.16);
  --sel-hi:#ffe9b0; --sel-lo:#ffd98a; --sel-edge:#b08a3a; --sel-text:#4a3a10;
  --now-hi:#b8f3ff; --now-lo:#8ce4f8; --now-edge:#3f93ab; --now-text:#0e4453;
  --track-hi:#282343; --track-lo:#332d54;
  --thumb-hi:#6a6198; --thumb-lo:#524a80; --thumb-edge:#292345;
  --adv-bg:rgba(0,0,20,.25);
  --beatstripe:rgba(255,255,255,.06);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px}
body{
  font-family:"M PLUS Rounded 1c",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--page-glow) 0%, transparent 60%),
    var(--page);
  color:var(--ink);
  min-height:100dvh;
  display:flex;justify-content:center;
  padding:14px 10px 40px;
  user-select:none;-webkit-user-select:none;
}
.device{
  width:100%;max-width:560px;
  background:linear-gradient(180deg,var(--device-hi) 0%,var(--plastic) 40%,var(--device-lo) 100%);
  border-radius:var(--radius);
  box-shadow:
    0 18px 40px rgba(0,0,0,.3),
    0 2px 0 var(--device-inset) inset,
    0 -3px 0 rgba(0,0,0,.12) inset;
  padding:20px 16px 24px;
}
header{display:flex;align-items:baseline;justify-content:space-between;padding:2px 4px 12px}
.logo{font-weight:800;font-size:1.5rem;letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.logo .mark{display:grid;grid-template-columns:repeat(2,9px);gap:2px}
.logo .mark i{width:9px;height:9px;border-radius:3px;display:block}
.logo .mark i:nth-child(1){background:var(--r0)}
.logo .mark i:nth-child(2){background:var(--r2)}
.logo .mark i:nth-child(3){background:var(--r4)}
.logo .mark i:nth-child(4){background:var(--r6)}
.tagline{font-size:.72rem;color:var(--ink-soft);font-weight:700}

/* ---- LCD ---- */
.lcd{
  background:linear-gradient(180deg,var(--lcd-bg2),var(--lcd-bg));
  border-radius:14px;
  border:2px solid var(--lcd-border);
  box-shadow:0 2px 0 var(--device-inset), inset 0 3px 10px rgba(0,0,0,.55);
  padding:10px 14px 9px;
  font-family:"DotGothic16",monospace;
  color:var(--lcd-amber);
  display:flex;flex-direction:column;gap:6px;
  margin-bottom:12px;
}
.lcd-top{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;letter-spacing:.05em;gap:8px}
.lcd-top .bpm b{font-size:1.2rem}
.lcd-pat{border:1.5px solid var(--lcd-dim);border-radius:5px;padding:1px 7px}
.lcd-msg{min-height:1.1em;font-size:.78rem;color:var(--lcd-sub)}
.stepdots{display:grid;grid-template-columns:repeat(16,1fr);gap:4px}
.stepdots i{height:5px;border-radius:2px;background:var(--lcd-dim);transition:background .05s}
.stepdots i:nth-child(4n+1){background:var(--lcd-dim2)}
.stepdots i.on{background:var(--lcd-amber);box-shadow:0 0 6px var(--lcd-amber)}
.eq{display:flex;gap:3px;align-items:flex-end;height:14px}
.eq i{width:4px;background:var(--lcd-eq);border-radius:1px;height:3px}
.playing .eq i{animation:eq .5s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:.12s}.eq i:nth-child(3){animation-delay:.24s}
.eq i:nth-child(4){animation-delay:.06s}.eq i:nth-child(5){animation-delay:.18s}
@keyframes eq{from{height:3px}to{height:14px}}

/* ---- transport ---- */
.transport{display:flex;gap:7px;align-items:center;margin-bottom:12px}
button{font-family:inherit;font-weight:700;color:var(--ink);cursor:pointer;border:none}
.btn-play{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  color:#fff;font-size:1.5rem;flex:none;
  box-shadow:0 5px 0 var(--accent-edge), 0 8px 14px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.5);
  transition:transform .06s, box-shadow .06s;
}
.btn-play:active{transform:translateY(4px);box-shadow:0 1px 0 var(--accent-edge), inset 0 2px 0 rgba(255,255,255,.5)}
.key{
  flex:1;height:52px;border-radius:14px;font-size:.72rem;
  background:linear-gradient(180deg,var(--key-hi),var(--key-lo));
  box-shadow:0 4px 0 var(--key-edge), inset 0 2px 0 var(--key-inset);
  transition:transform .06s, box-shadow .06s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
}
.key:active{transform:translateY(3px);box-shadow:0 1px 0 var(--key-edge), inset 0 2px 0 var(--key-inset)}
.key .ic{font-size:1.05rem;line-height:1}

/* ---- pattern tabs ---- */
.patrow{display:flex;gap:8px;margin-bottom:10px;align-items:stretch}
.pat-tab{
  flex:1;height:40px;border-radius:12px;font-size:.95rem;font-weight:800;
  background:linear-gradient(180deg,var(--key-hi),var(--key-lo));
  box-shadow:0 3px 0 var(--key-edge), inset 0 1px 0 var(--key-inset);
  transition:transform .06s, box-shadow .06s;
  position:relative;
}
.pat-tab:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key-edge)}
.pat-tab.sel{
  background:linear-gradient(180deg,var(--sel-hi),var(--sel-lo));color:var(--sel-text);
  box-shadow:0 3px 0 var(--sel-edge), inset 0 1px 0 rgba(255,255,255,.15);
}
.pat-tab.live::after{
  content:"";position:absolute;top:5px;right:7px;width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 5px var(--accent);
}
.pat-tab.armed{outline:3px dashed var(--accent);outline-offset:-2px}
.key-copy{flex:.9;height:40px;border-radius:12px;font-size:.74rem;
  background:linear-gradient(180deg,var(--key-hi),var(--key-lo));
  box-shadow:0 3px 0 var(--key-edge), inset 0 1px 0 var(--key-inset);
  transition:transform .06s, box-shadow .06s;}
.key-copy:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key-edge)}

/* ---- sequencer ---- */
.seq{display:flex;gap:6px;margin-bottom:6px}
.labels{display:grid;grid-template-rows:repeat(13,1fr);gap:4px;width:40px;flex:none}
.labels .lb{display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:800;color:var(--ink-soft);letter-spacing:.02em}
.labels .lb.note i{border-radius:50%;display:block}
.cellwrap{position:relative;flex:1}
.cells{
  display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(13,1fr);
  gap:4px;touch-action:none;
  background:repeating-linear-gradient(90deg,
    var(--beatstripe) 0 25%, transparent 25% 50%,
    var(--beatstripe) 50% 75%, transparent 75% 100%);
  border-radius:10px;padding:3px;
}
.cell{
  aspect-ratio:1;border-radius:var(--cell-r);position:relative;
  background:var(--cell-off);
  box-shadow:var(--cell-shadow);
  transition:transform .09s;
}
.cell.on.tjr::after{
  content:"";position:absolute;top:32%;bottom:32%;right:-5px;width:6px;
  background:var(--c);pointer-events:none;
}
.cell.drum{border-radius:50%}
.cell.on{
  background:var(--c);
  box-shadow:0 1px 3px rgba(60,50,30,.35), inset 0 2px 0 rgba(255,255,255,.55);
}
.cell.on.acc{
  filter:saturate(1.4) brightness(1.02);
  box-shadow:0 1px 4px rgba(60,50,30,.5), inset 0 0 0 2.5px rgba(255,255,255,.8);
}
.cell.hit{transform:scale(1.35)}
.playhead{
  position:absolute;top:0;bottom:0;width:calc(100%/16);
  background:rgba(255,208,110,.24);
  border-radius:8px;pointer-events:none;
  border:1.5px solid rgba(200,150,40,.45);
  display:none;
}
.playing .playhead{display:block}

/* ---- sliders & chips ---- */
.panel{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.sliderrow{display:flex;align-items:center;gap:10px;font-size:.78rem;font-weight:800}
.sliderrow label{width:58px;flex:none;color:var(--ink-soft)}
.sliderrow output{width:64px;flex:none;text-align:right;font-family:"DotGothic16",monospace;font-size:.9rem}
input[type=range]{
  flex:1;appearance:none;-webkit-appearance:none;height:10px;border-radius:5px;
  background:linear-gradient(180deg,var(--track-hi),var(--track-lo));
  box-shadow:inset 0 2px 3px rgba(90,80,60,.35);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(180deg,var(--thumb-hi),var(--thumb-lo));
  box-shadow:0 3px 0 var(--thumb-edge), 0 4px 8px rgba(0,0,0,.25);
  border:none;cursor:pointer;
}
input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid var(--accent)}
.chiprow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chiprow .cap{width:58px;flex:none;font-size:.78rem;font-weight:800;color:var(--ink-soft)}
.chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.chip{
  padding:8px 12px;border-radius:999px;font-size:.78rem;font-weight:800;
  background:linear-gradient(180deg,var(--key-hi),var(--key-lo));
  box-shadow:0 3px 0 var(--key-edge), inset 0 1px 0 var(--key-inset);
  transition:transform .06s, box-shadow .06s;
}
.chip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key-edge)}
.chip.sel{
  background:linear-gradient(180deg,var(--sel-hi),var(--sel-lo));color:var(--sel-text);
  box-shadow:0 3px 0 var(--sel-edge), inset 0 1px 0 rgba(255,255,255,.15);
}
.chainrow{display:flex;gap:5px;flex:1}
.slot{
  flex:1;height:36px;border-radius:9px;font-size:.85rem;font-weight:800;
  background:linear-gradient(180deg,var(--key-hi),var(--key-lo));
  box-shadow:0 3px 0 var(--key-edge), inset 0 1px 0 var(--key-inset);color:var(--ink-soft);
  transition:transform .06s, box-shadow .06s;
}
.slot:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key-edge)}
.slot.set{color:var(--ink)}
.slot.now{
  background:linear-gradient(180deg,var(--now-hi),var(--now-lo));
  box-shadow:0 3px 0 var(--now-edge), inset 0 1px 0 rgba(255,255,255,.6);color:var(--now-text);
}
.dim{opacity:.45}
.adv{background:var(--adv-bg);border-radius:14px;padding:2px 12px}
.adv summary{
  list-style:none;cursor:pointer;font-size:.78rem;font-weight:800;
  color:var(--ink-soft);padding:10px 2px;display:flex;align-items:center;gap:7px;
}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{content:"▸";display:inline-block;transition:transform .15s}
.adv[open] summary::before{transform:rotate(90deg)}
.adv .inner{display:flex;flex-direction:column;gap:12px;padding:2px 0 12px}
.hint{font-size:.66rem;color:var(--ink-soft);font-weight:500;margin-top:-6px;padding-left:66px;line-height:1.6}
.mixer{display:flex;gap:6px;flex:1;justify-content:space-between}
.fader{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
  touch-action:none;cursor:pointer;border-radius:8px;padding:4px 0;
}
.fader:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ftrack{
  position:relative;width:14px;height:88px;border-radius:7px;
  background:linear-gradient(180deg,var(--track-hi),var(--track-lo));
  box-shadow:inset 0 2px 4px rgba(90,80,60,.4);
}
.ffill{
  position:absolute;left:2px;right:2px;bottom:2px;border-radius:5px;
  background:var(--fc);opacity:.55;
}
.fthumb{
  position:absolute;left:50%;transform:translate(-50%,50%);
  width:28px;height:16px;border-radius:5px;
  background:linear-gradient(180deg,var(--thumb-hi),var(--thumb-lo));
  box-shadow:0 2px 0 var(--thumb-edge), 0 3px 6px rgba(0,0,0,.25), inset 0 1px 0 var(--key-inset);
}
.fthumb::after{
  content:"";position:absolute;left:5px;right:5px;top:50%;height:2px;
  transform:translateY(-50%);background:var(--fc);border-radius:1px;
}
.flabel{font-size:.6rem;font-weight:800;color:var(--fc);letter-spacing:.02em}
footer{margin-top:18px;text-align:center;font-size:.68rem;color:var(--ink-soft);line-height:1.8;font-weight:500}
footer b{font-weight:800}
.btn-guide{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  padding:12px 26px;border-radius:999px;font-size:.82rem;font-weight:800;
  color:var(--ink);text-decoration:none;
  background:linear-gradient(180deg,var(--key-hi),var(--key-lo));
  box-shadow:0 4px 0 var(--key-edge), inset 0 1px 0 var(--key-inset);
  transition:transform .06s, box-shadow .06s;
}
.btn-guide:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key-edge)}
.btn-guide svg{width:17px;height:17px}
.footer-links{margin-top:12px;padding-top:10px;border-top:1.5px dashed var(--key-edge);font-size:.7rem}
.footer-links a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
.footer-links .sep{margin:0 4px;opacity:.6}

/* ---- SVGアイコン ---- */
.ic{display:inline-flex;align-items:center;justify-content:center}
.ic svg{width:17px;height:17px;display:block}
.key .ic svg{width:19px;height:19px}
.btn-play svg{width:26px;height:26px;display:block;margin:auto}
.btn-play .ic-stop{display:none}
.playing .btn-play .ic-stop{display:block}
.playing .btn-play .ic-play{display:none}

/* ---- スタジオ:ぬりかた(たまに/連打)の表示 ---- */
.cell.on.fx1{
  opacity:.62;
  outline:2px dashed rgba(255,255,255,.85);
  outline-offset:-3px;
}
.cell.on.fx2::before{
  content:"";position:absolute;top:16%;bottom:16%;left:50%;width:2.5px;
  transform:translateX(-50%);background:rgba(255,255,255,.85);
  border-radius:2px;pointer-events:none;
}

/* ---- 保存モーダル ---- */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none !important}
.modal-bg{position:absolute;inset:0;background:rgba(25,20,10,.5)}
.modal-card{
  position:relative;width:100%;max-width:430px;max-height:calc(100dvh - 40px);overflow:auto;
  background:linear-gradient(180deg,var(--device-hi),var(--device-lo));
  border-radius:20px;padding:18px 16px 16px;
  box-shadow:0 20px 50px rgba(0,0,0,.4), 0 2px 0 var(--device-inset) inset;
  display:flex;flex-direction:column;gap:12px;
  opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .2s, transform .2s;
}
.modal.show .modal-card{opacity:1;transform:none}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.modal-head h2{font-size:1.02rem;font-weight:800;display:flex;align-items:center;gap:8px}
.modal-close{
  width:36px;height:36px;border-radius:50%;flex:none;
  background:linear-gradient(180deg,var(--key-hi),var(--key-lo));
  box-shadow:0 3px 0 var(--key-edge), inset 0 1px 0 var(--key-inset);
  display:flex;align-items:center;justify-content:center;
  transition:transform .06s, box-shadow .06s;
}
.modal-close:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key-edge)}
.modal-note{font-size:.7rem;color:var(--ink-soft);font-weight:500;line-height:1.7}
.note-sep{padding-bottom:12px;border-bottom:1.5px dashed var(--key-edge)}
.dl-info{
  font-family:"DotGothic16",monospace;font-size:.8rem;
  background:linear-gradient(180deg,var(--lcd-bg2),var(--lcd-bg));color:var(--lcd-amber);
  border-radius:10px;border:2px solid var(--lcd-border);padding:8px 12px;line-height:1.7;
}
.btn-dl{
  min-height:58px;flex:none;padding:14px 18px;margin-bottom:8px;
  border-radius:16px;font-size:1rem;font-weight:800;color:#fff;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  box-shadow:0 5px 0 var(--accent-edge), 0 8px 14px rgba(0,0,0,.22), inset 0 2px 0 rgba(255,255,255,.5);
  transition:transform .06s, box-shadow .06s;
  display:flex;align-items:center;justify-content:center;gap:9px;
}
.btn-dl:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-edge), inset 0 2px 0 rgba(255,255,255,.5)}
.btn-dl[disabled]{opacity:.55;pointer-events:none}
.btn-dl svg{width:20px;height:20px}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);
  background:#3a362c;color:#ffe9b0;font-weight:800;font-size:.8rem;/* トーストはスキン共通 */
  padding:10px 18px;border-radius:999px;opacity:0;pointer-events:none;
  transition:opacity .25s, transform .25s;box-shadow:0 8px 20px rgba(0,0,0,.3);
  max-width:92vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion: reduce){
  .cell.hit{transform:none}
  .playing .eq i{animation:none;height:9px}
  *{transition:none !important}
}
@media (min-width:480px){
  .device{padding:26px 24px 30px}
  .labels{width:48px}
  .labels .lb{font-size:.66rem}
  .transport{gap:10px}
  .key{font-size:.8rem}
}