:root {
  --ink: #ece8f6;
  --ink-dim: #9d97b3;
  --bar: #14121c;
  --bar-line: #2a2638;
  --panel: #1d1a28;
  --panel-2: #262236;
  --gold: #f2c14e;
  --hot: #ff5d73;
  --cyan: #4fd8e8;
  --kw: 34px;
  --bw: 22px;
  --kh: 150px;
  --font: 'Zen Kaku Gothic New', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); color: var(--ink); background: #0d0b13;
  display: grid; grid-template-columns: 168px 1fr; grid-template-rows: 56px 1fr;
  grid-template-areas: "top top" "pal stage"; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }

/* ---- 上部バー ---- */
.topbar {
  grid-area: top; display: flex; align-items: center; gap: 16px; padding: 0 16px;
  background: var(--bar); border-bottom: 1px solid var(--bar-line); position: relative; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.logo {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: conic-gradient(from 200deg, var(--gold), var(--hot), var(--cyan), var(--gold));
  box-shadow: 0 0 18px rgba(242, 193, 78, .35);
}
.title-input {
  background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--ink);
  font: 900 18px var(--font); padding: 4px 8px; min-width: 0; width: 100%; max-width: 320px;
}
.title-input:hover, .title-input:focus { border-color: var(--bar-line); outline: none; background: #1b1826; }
.modes { display: flex; background: #0d0b13; border-radius: 999px; padding: 3px; border: 1px solid var(--bar-line); }
.mode { border: 0; background: transparent; padding: 6px 18px; border-radius: 999px; font-weight: 700; color: var(--ink-dim); }
.mode.on { background: var(--gold); color: #1a1405; }
.tools { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; position: relative; }
.tool {
  border: 1px solid var(--bar-line); background: #1b1826; border-radius: 8px; padding: 6px 12px;
  font-weight: 700; font-size: 14px; white-space: nowrap;
}
.tool:disabled { opacity: .35; cursor: default; }
.tool.rec { color: var(--hot); }
.tool.rec.on { background: var(--hot); color: #fff; animation: pulse 1s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 93, 115, .2); } }
.rec-info { font: 500 13px var(--mono); color: var(--ink-dim); min-width: 70px; }
.menu {
  position: absolute; top: 44px; right: 0; background: var(--panel-2); border: 1px solid var(--bar-line);
  border-radius: 10px; padding: 6px; display: flex; flex-direction: column; min-width: 220px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.menu[hidden] { display: none; }
.menu button { text-align: left; border: 0; background: transparent; padding: 9px 12px; border-radius: 6px; font-size: 14px; }
.menu button:hover { background: #332e46; }
.menu .danger { color: var(--hot); }

/* ---- パレット ---- */
.palette {
  grid-area: pal; background: var(--bar); border-right: 1px solid var(--bar-line);
  padding: 14px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
}
.pal-head { font-size: 11px; letter-spacing: .12em; color: var(--ink-dim); margin: 6px 4px 2px; font-weight: 700; }
.pal-item {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--bar-line); font-weight: 700; font-size: 14px; text-align: left;
}
.pal-item:hover { border-color: var(--gold); }
.ic { width: 28px; height: 22px; border-radius: 4px; flex: none; position: relative; }
.ic-piano { background: repeating-linear-gradient(90deg, #f4f1ea 0 5px, #222 5px 6px); }
.ic-piano::after { content: ''; position: absolute; inset: 0 0 45% 0; background: repeating-linear-gradient(90deg, transparent 0 3px, #111 3px 7px, transparent 7px 12px); }
.ic-synth { background: linear-gradient(#3b3552, #2a2540); box-shadow: inset 0 -8px 0 #f4f1ea; }
.ic-synth::after { content: ''; position: absolute; left: 4px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 9px 0 0 var(--cyan), 18px 0 0 var(--hot); }
.ic-drums { background: radial-gradient(circle at 25% 30%, var(--hot) 3px, transparent 4px), radial-gradient(circle at 75% 30%, var(--gold) 3px, transparent 4px), radial-gradient(circle at 25% 75%, var(--cyan) 3px, transparent 4px), radial-gradient(circle at 75% 75%, #9b7bff 3px, transparent 4px), #2a2540; }
.ic-xy { background: radial-gradient(circle at 65% 40%, var(--cyan) 3px, rgba(79, 216, 232, .3) 6px, transparent 9px), linear-gradient(135deg, #20304a, #3a2150); }
.bg-swatches { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 2px; }
.sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; padding: 0; }
.sw.on { border-color: var(--gold); }
.sw-night { background: #16131f; } .sw-neon { background: linear-gradient(135deg, #2b0f3f, #0b2a3a); }
.sw-paper { background: #e9e4d8; } .sw-wood { background: #6b4528; } .sw-ocean { background: linear-gradient(#0e3b56, #082232); }
.pal-hint { font-size: 12px; color: var(--ink-dim); line-height: 1.7; margin: 10px 4px 0; }
kbd {
  font: 700 11px var(--mono); border: 1px solid #3a3550; border-bottom-width: 2px;
  border-radius: 4px; padding: 0 4px; background: #1b1826;
}

/* ---- ステージ ---- */
.stage { grid-area: stage; position: relative; overflow: auto; touch-action: pan-x pan-y; }
.stage::before { content: ''; display: block; width: 1500px; height: 960px; pointer-events: none; }
.stage[data-bg="night"] { background: #16131f radial-gradient(#ffffff0f 1px, transparent 1px) 0 0 / 24px 24px; }
.stage[data-bg="neon"] { background: radial-gradient(#ffffff12 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(135deg, #2b0f3f, #0b2a3a) fixed; }
.stage[data-bg="paper"] { background: #e9e4d8 radial-gradient(#00000014 1px, transparent 1px) 0 0 / 24px 24px; }
.stage[data-bg="wood"] { background: repeating-linear-gradient(92deg, #6b4528 0 40px, #74492a 40px 44px, #66412a 44px 90px); }
.stage[data-bg="ocean"] { background: radial-gradient(#ffffff10 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(#0e3b56, #082232) fixed; }
body.is-play .stage { background-image: none; }
body.is-play .stage[data-bg="neon"] { background: linear-gradient(135deg, #2b0f3f, #0b2a3a) fixed; }
body.is-play .stage[data-bg="ocean"] { background: linear-gradient(#0e3b56, #082232) fixed; }
.empty { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center; color: var(--ink-dim); pointer-events: none; }
.stage[data-bg="paper"] .empty { color: #6b6455; }
.empty[hidden] { display: none; }
.empty-big { font-size: 26px; font-weight: 900; margin: 0 0 6px; }

/* ---- 楽器パネル ---- */
.inst {
  position: absolute; background: var(--panel); border-radius: 14px;
  border: 1px solid #ffffff14; box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 #ffffff12;
  user-select: none; -webkit-user-select: none; transition: box-shadow .15s;
}
.inst.active { box-shadow: 0 0 0 2px var(--gold), 0 10px 30px rgba(0, 0, 0, .45); }
.inst.dragging { opacity: .9; box-shadow: 0 0 0 2px var(--gold), 0 24px 50px rgba(0, 0, 0, .6); z-index: 10; }
.inst-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #ffffff10;
  cursor: grab; touch-action: none;
}
body.is-play .inst-head { cursor: default; }
.inst-name { font-weight: 900; font-size: 13px; letter-spacing: .06em; }
.inst-oct { font: 700 12px var(--mono); color: var(--gold); margin-left: auto; }
.inst-x { border: 0; background: transparent; color: var(--ink-dim); font-size: 18px; line-height: 1; padding: 0 2px; }
.inst-x:hover { color: var(--hot); }
body.is-play .inst-x { display: none; }
.inst-body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.inst[data-type="piano"] { background: linear-gradient(#18161d, #0b0a0e); }
.inst[data-type="synth"] { background: linear-gradient(#2f2943, #221e31); }

/* 鍵盤 */
.keys { position: relative; height: var(--kh); width: calc(var(--nw) * var(--kw)); touch-action: none; }
body:not(.is-play) .keys, body:not(.is-play) .pads, body:not(.is-play) .xy { opacity: .75; }
.whites { display: flex; height: 100%; }
.key.white {
  width: var(--kw); height: 100%; background: linear-gradient(#fbf9f4, #e6e1d6);
  border: 1px solid #00000040; border-radius: 0 0 6px 6px; position: relative;
  box-shadow: inset 0 -5px 0 #d6d0c2;
}
.key.white.down { background: linear-gradient(#ffe7a6, var(--gold)); box-shadow: inset 0 -2px 0 #c99a2a; }
.key.black {
  position: absolute; top: 0; width: var(--bw); height: 62%; z-index: 2;
  background: linear-gradient(#2c2a33, #0c0b0f); border-radius: 0 0 4px 4px;
  box-shadow: inset 0 -4px 0 #000, 0 2px 3px #0008;
}
.key.black.down { background: linear-gradient(#5a4613, #c99a2a); }
.blacks { position: absolute; inset: 0; pointer-events: none; }
.blacks .key { pointer-events: auto; }
.klab { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font: 700 9px var(--mono); color: #8a8270; }
.inst[data-type="synth"] .key.white.down { background: linear-gradient(#b8f6ff, var(--cyan)); box-shadow: inset 0 -2px 0 #2aa9b8; }
.inst[data-type="synth"] .key.black.down { background: linear-gradient(#0f4a52, #2aa9b8); }

/* コントロール */
.ctl-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; max-width: 520px; }
.ctl { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ink-dim); font-weight: 700; }
.ctl input[type=range] { width: 96px; accent-color: var(--gold); }
.inst[data-type="synth"] .ctl input[type=range] { accent-color: var(--cyan); }
.seg { display: flex; background: #00000040; border-radius: 8px; padding: 2px; }
.seg button { border: 0; background: transparent; padding: 5px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--ink-dim); }
.seg button.on { background: var(--cyan); color: #04262b; }

/* パッド */
.pads { display: grid; grid-template-columns: repeat(4, 84px); gap: 8px; touch-action: none; }
.pad {
  height: 84px; border-radius: 10px; display: flex; flex-direction: column; justify-content: space-between;
  padding: 8px; background: #2c2840; box-shadow: inset 0 -4px 0 #00000055; transition: transform .05s;
}
.pad b { font-size: 12px; }
.pad kbd { align-self: flex-end; }
.pad:nth-child(4n+1) { --c: var(--hot); } .pad:nth-child(4n+2) { --c: var(--gold); }
.pad:nth-child(4n+3) { --c: var(--cyan); } .pad:nth-child(4n+4) { --c: #9b7bff; }
.pad { border-top: 3px solid var(--c); }
.pad.down { background: var(--c); color: #120f1a; transform: scale(.96); }

/* XY */
.xy {
  width: 260px; height: 190px; border-radius: 10px; position: relative; overflow: hidden; touch-action: none;
  background: linear-gradient(135deg, #20304a, #3a2150);
  background-image: linear-gradient(#ffffff10 1px, transparent 1px), linear-gradient(90deg, #ffffff10 1px, transparent 1px), linear-gradient(135deg, #20304a, #3a2150);
  background-size: 26px 26px, 26px 26px, auto;
}
.xy-dot {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 0 6px rgba(79, 216, 232, .2); opacity: .35; transition: opacity .15s;
}
.xy.on .xy-dot { opacity: 1; box-shadow: 0 0 24px 8px rgba(79, 216, 232, .5); }
.xy-l, .xy-b { position: absolute; font-size: 10px; color: #ffffff66; font-weight: 700; }
.xy-l { right: 8px; bottom: 6px; } .xy-b { left: 8px; top: 6px; }

/* トースト */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0;
  background: var(--panel-2); border: 1px solid var(--bar-line); padding: 10px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 700; transition: .2s; pointer-events: none; z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- スマホ ---- */
@media (max-width: 720px) {
  body { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "top" "stage" "pal"; }
  .topbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .brand { flex-basis: 100%; }
  .tools { flex: 1; }
  .palette { flex-direction: row; overflow-x: auto; padding: 8px 12px; border-right: 0; border-top: 1px solid var(--bar-line); }
  .pal-head, .pal-hint { display: none; }
  .pal-item { flex: none; padding: 8px 10px; }
  .bg-swatches { flex-wrap: nowrap; align-items: center; }
  :root { --kw: 30px; --bw: 20px; --kh: 130px; }
}

/* 鍵盤数の切り替え */
.keys-scroll { max-width: calc(100vw - 230px); overflow-x: auto; overscroll-behavior-x: contain; }
.key.white.mid-c::after { content: ''; position: absolute; left: 50%; bottom: 22px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #c9a24a; }
.keys[style*="--kw: 17px"] .klab, .keys[style*="--kw: 15px"] .klab { font-size: 7px; letter-spacing: -.04em; }
.ctl .seg { margin-top: 1px; }
.ctl .seg button { padding: 5px 7px; font-family: var(--mono); }
@media (max-width: 720px) { .keys-scroll { max-width: calc(100vw - 64px); } }