:root {
    --bg: #0b0b0f;
    --panel: #15151c;
    --panel2: #1b1b24;
    --text: #e8e8ef;
    --muted: #9a9aab;
    --line: #2a2a36;
    --accent: #ff33cc;
    --accent2: #4b5cff;
    --ok: #7dffb0;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; background: var(--bg); color: var(--text); }
  body {
    font-family: system-ui, -apple-system, "Segoe UI", "Yu Gothic UI", "Meiryo", sans-serif;
    font-size: 14px;
  }
  /* 画面構成：左にプレビュー、右に操作パネル（狭い画面では縦に並ぶ） */
  .app {
    display: grid; gap: 16px; padding: 16px;
    grid-template-columns: minmax(0, 1fr);
    max-width: 1500px; margin: 0 auto;
  }
  @media (min-width: 1000px) {
    .app { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
    .stage { position: sticky; top: 16px; }
  }
  .stage { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .stage-inner {
    width: 100%; display: flex; justify-content: center; align-items: center;
    /* 透明背景のときに分かるよう市松模様 */
    background: repeating-conic-gradient(#1a1a22 0 25%, #121218 0 50%) 0 0 / 24px 24px;
    border: 1px solid var(--line); border-radius: 10px; padding: 10px;
  }
  canvas#cv { display: block; max-width: 100%; max-height: calc(100vh - 150px); }
  .title { font-size: 20px; font-weight: 800; letter-spacing: .02em; margin: 0; }
  .title span { color: var(--accent); }
  .panel { display: flex; flex-direction: column; gap: 12px; }
  .sec {
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
    padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
  }
  .sec h2 { margin: 0; font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing: .08em; }
  .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
  .row > label { flex: 1 1 140px; }
  label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
  label .val { color: var(--text); font-variant-numeric: tabular-nums; }
  label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--text); font-size: 13px; }
  textarea, input[type=text], input[type=number], select {
    width: 100%; background: #0e0e14; color: var(--text); border: 1px solid var(--line);
    border-radius: 6px; padding: 7px 9px; font-size: 14px; font-family: inherit;
  }
  textarea { resize: vertical; min-height: 64px; line-height: 1.4; }
  input[type=range] { width: 100%; accent-color: var(--accent); }
  input[type=color] { width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 6px; background: #0e0e14; padding: 2px; }
  button {
    background: var(--accent); color: #fff; border: 0; border-radius: 8px;
    padding: 10px 16px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
  }
  button.sub { background: #2a2a36; }
  button.dice { background: linear-gradient(90deg, var(--accent), var(--accent2)); font-size: 15px; width: 100%; }
  button:disabled { opacity: .5; cursor: default; }
  .swatches { display: flex; gap: 6px; }
  .swatches span { flex: 1; height: 10px; border-radius: 3px; }
  .hint { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5; }
  #loopInfo { font-size: 12px; color: var(--ok); line-height: 1.5; }
  #status { font-size: 12px; color: var(--muted); min-height: 1em; line-height: 1.5; }
  progress { width: 100%; height: 8px; display: none; accent-color: var(--accent); }
  [hidden] { display: none !important; }
  /* ?clean を付けて開くと操作パネルを隠し、ロゴだけを全画面表示（画面録画ソフト用） */
  body.clean .panel, body.clean .title { display: none; }
  body.clean .app { display: flex; padding: 0; min-height: 100vh; align-items: center; justify-content: center; }
  body.clean .stage-inner { border: 0; padding: 0; background: #000; }
  body.clean canvas#cv { max-height: 100vh; }
  :root{--bg:#080a10;--panel:#10141e;--panel2:#151b29;--line:#263043;--accent:#c2ff68;--accent2:#67e8f9;--muted:#95a2b8;--text:#f0f4fa}
  body{background:radial-gradient(ellipse at 12% 0%,#17212c 0,transparent 48%),#080a10}
  .masthead{max-width:1540px;margin:auto;padding:26px 28px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
  .brand{font-weight:900;font-size:19px;letter-spacing:.08em;display:flex;align-items:center;gap:9px}.brand>span:not(.brand-icon){font-weight:400;color:#a7b2c5}.brand-icon{font-size:32px;color:var(--accent)}.brand small{font-size:9px;color:var(--muted);margin-left:16px;letter-spacing:.16em}
  .local-badge,.preview-badge{font-size:10px;letter-spacing:.12em;color:var(--accent);border:1px solid #465b35;border-radius:30px;padding:8px 12px;white-space:nowrap}
  .back-tools{font-size:11px;letter-spacing:.08em;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:30px;padding:8px 12px;white-space:nowrap}.back-tools:hover{color:var(--text);border-color:var(--accent)}
  .app{max-width:1540px;padding:28px;gap:28px}.stage{gap:0}.stage-heading{width:100%;display:flex;align-items:center;justify-content:space-between;margin:8px 0 26px}.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--accent);font-weight:700}h1{font-size:34px;margin:9px 0;font-weight:800;letter-spacing:.02em}.stage-heading p{color:var(--muted);font-size:12px;margin:0}.stage-inner{padding:0;overflow:hidden;border-radius:16px;background-color:#04050a;box-shadow:0 24px 80px #0005}canvas#cv{width:100%;height:auto;object-fit:contain;max-height:46vh}
  .transport{padding:14px 0;display:flex;align-items:center;gap:8px;width:100%;flex-wrap:wrap}.transport button{padding:8px 10px;font-size:11px}.transport #timecode{margin-left:auto;font:11px monospace;color:var(--muted)}#seek{flex-basis:100%;margin-top:6px}.preset-area{width:100%;border-top:1px solid var(--line);padding-top:20px}.eyebrow span{color:var(--muted);font-weight:400;letter-spacing:0;margin-left:12px}#presets{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.preset{min-height:96px;text-align:left;background:radial-gradient(ellipse at 100% 0%,var(--tint),transparent 80%),#10141e;border:1px solid var(--line);padding:14px;color:var(--text);transition:transform .2s,border-color .2s}.preset:hover{transform:translateY(-3px);border-color:var(--accent)}.preset b{display:block;font-size:18px;letter-spacing:.04em}.preset small{display:block;font-size:10px;font-weight:400;color:#b7c2d4;margin-top:13px}.stage-foot{align-self:flex-start;color:var(--muted);font-size:10px;margin-top:20px}.panel{gap:14px}.sec{border-radius:12px;padding:18px;gap:13px}.sec h2{font-size:11px;color:#d1dae8}button{color:#111920;transition:filter .15s}button:hover{filter:brightness(1.14)}button.sub{background:#202a3a;color:var(--text)}button.dice{background:var(--accent);font-size:13px;color:#182114;padding:14px}select,textarea,input[type=number],input[type=text]{background:#090d15;border-color:#293447;border-radius:8px;padding:10px}textarea{font-weight:700;letter-spacing:.04em;font-size:18px}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}.title{font-size:15px;letter-spacing:.12em}.swatches span{height:7px}#status{overflow-wrap:anywhere}.stage-inner:fullscreen{background:#000;display:flex;align-items:center;justify-content:center}.stage-inner:fullscreen canvas#cv{max-height:100vh;width:100%;height:100%;object-fit:contain}
  body.clean .masthead,body.clean .stage-heading,body.clean .transport,body.clean .preset-area,body.clean .stage-foot{display:none}
  @media(min-width:1000px){.app{grid-template-columns:minmax(0,1fr) 350px}.stage{top:22px}}
  @media(max-width:700px){.masthead{padding:15px}.brand{font-size:13px}.brand small,.local-badge,.preview-badge{display:none}.app{padding:15px}.stage-heading{margin-top:0}h1{font-size:26px}#presets{grid-template-columns:repeat(2,1fr)}.preset{min-height:82px}canvas#cv{max-height:60vh}}
  @media(prefers-reduced-motion:reduce){*{transition:none!important}}


input[type=search]{width:100%;background:#090d15;color:var(--text);border:1px solid #293447;border-radius:8px;padding:10px;font:inherit}#fontLink{color:var(--accent2)}

.advanced{border-top:1px solid var(--line);padding-top:12px}.advanced summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--text);padding:3px 0;list-style-position:inside}.advanced summary span{font-size:10px;font-weight:400;color:var(--muted);margin-left:8px}.advanced summary:focus-visible{outline:2px solid var(--accent2);outline-offset:5px}.detail-body{display:flex;flex-direction:column;gap:14px;padding-top:16px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}.detail-range>span{display:flex;justify-content:space-between;gap:6px;font-size:10px}.detail-range output{color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}.detail-body button{font-size:11px;padding:9px}.detail-body .row>label{flex-basis:90px}.advanced[open]{padding-bottom:3px}.detail-range input{margin:8px 0 0}#presets{gap:8px}.preset{min-height:82px}.preset b{font-size:16px}.preset small{margin-top:9px} .stage-inner{background:#04050b}body.clean .advanced{display:none}

/* ===== モーション拡張 ===== */
#presetsLoud{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.preset-area .eyebrow+div+.eyebrow{display:block;margin-top:22px}
.preset.loud{background:radial-gradient(ellipse at 100% 0%,var(--tint),transparent 75%),linear-gradient(135deg,#1a1024,#0c1320);border-color:#3a2a4a}
.preset.loud b{background:linear-gradient(90deg,#fff,var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}

button.boost{width:100%;font-size:13px;padding:12px;background:linear-gradient(90deg,#ff3fa4,#ffb000);color:#1b0b12}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.chips label.check{font-size:12px;background:#0b1019;border:1px solid var(--line);border-radius:8px;padding:8px 9px}
.chips label.check:has(input:checked){border-color:var(--accent);background:#141d10}
@media(max-width:700px){#presetsLoud{grid-template-columns:repeat(2,1fr)}}
/* ===== プリセット切り替え（矢印・スワイプ） ===== */
.stage-inner{position:relative}
canvas#cv{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:56px;padding:0;border-radius:10px;background:rgba(8,10,16,.45);color:#fff;font-size:30px;line-height:1;opacity:.6;backdrop-filter:blur(4px)}
.nav-arrow:hover{opacity:1}.nav-arrow.prev{left:8px}.nav-arrow.next{right:8px}
#swipeHint{position:absolute;left:50%;bottom:12px;transform:translate(-50%,8px);max-width:calc(100% - 110px);background:rgba(8,10,16,.75);border:1px solid var(--line);border-radius:12px;padding:8px 14px;text-align:center;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s}
#swipeHint.show{opacity:1;transform:translate(-50%,0)}
#swipeHint b{display:block;font-size:15px;letter-spacing:.06em}#swipeHint small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.preset.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
body.clean .nav-arrow,body.clean #swipeHint,.stage-inner:fullscreen .nav-arrow{display:none}
/* スマホ・タブレット：プレビューを画面の上に固定して、操作しながら結果を見られるようにする */
@media(max-width:999px){
  body:not(.clean) .stage{display:contents}
  body:not(.clean) .app{row-gap:12px}
  body:not(.clean) .stage-inner{position:sticky;top:0;z-index:20;box-shadow:0 0 0 15px #080a10,0 18px 24px -6px #000c}
  body:not(.clean) canvas#cv{max-height:34vh}
  .nav-arrow{width:34px;height:48px;font-size:26px}
}