/* ビートこうば の殻の見た目。設計は .claude/rules/beat-kouba/design/(screens / pads / ring / transport / shelf-share / kotoba)。
   掟: 明るさ・不透明度を「振る」演出を作らない(押下の縮み・発音の弾み・脈は transform だけ)。
   状態の絵(から ⇄ ある・縁の色)は JS 側の床(STATE_MIN 500ms)を通ってから変わる。
   動きをへらす設定のブロックは**ファイルの末尾**に置く(あとから足した規則に負けないため)。 */

:root, html[data-theme="neon"] {
  --bg: #12131f; --bg-2: #1a1c2c; --ink: #fdf6ec; --ink-dim: rgba(253, 246, 236, .62);
  --btn: #262a3d; --btn-ink: #fdf6ec; --line: rgba(253, 246, 236, .18);
  --row-0: #ff7a45; --row-1: #9d7bff; --row-2: #2fd6c9; --row-3: #ff5fb8;
  --pat-0: #ffe08a; --pat-1: #8fc8ff; --pat-2: #9fe8a0;
  --pad-off-a: .10; --pad-on-a: .32; --pad-off-ink-a: .55; --pad-off-line-a: .45; --glow: 1;
  --pad: 82px; --gap: 8px; --play: 56px; --topbar: 48px; --caption: 24px; --deck-h: 56px;
  --pads-w: calc(4 * var(--pad) + 3 * var(--gap));
}
html[data-theme="toy"] {
  --bg: #fff4e4; --bg-2: #fbe7cf; --ink: #2b2530; --ink-dim: rgba(43, 37, 48, .62);
  --btn: #ffffff; --btn-ink: #2b2530; --line: rgba(43, 37, 48, .18);
  --row-0: #d94f1e; --row-1: #6a4fd8; --row-2: #0b8a82; --row-3: #d63c8f;
  --pat-0: #a06d00; --pat-1: #2f6fd6; --pat-2: #2e8b57;
  --pad-off-a: .10; --pad-on-a: .45; --pad-off-ink-a: .6; --pad-off-line-a: .5; --glow: 0;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 16px; line-height: 1.3;
  overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus { outline: none; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
svg { display: block; }

/* ---------------------------------------------------------------- 幕(screen) */
.screen {
  position: fixed; inset: 0; background: var(--bg); z-index: 20;
  opacity: 0; transition: opacity .2s ease;
  display: flex; flex-direction: column; align-items: center;
}
.screen.show { opacity: 1; }
.screen.sheet { align-items: stretch; padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); overflow-y: auto; touch-action: pan-y; scrollbar-gutter: stable; }   /* 安全網: 支える帯の端で押せるものが枠から出ない(デザイナーレビュー 2026-09-06 の重大 4) */
.screen.scroll { overflow-y: auto; touch-action: pan-y; scrollbar-gutter: stable; }
.screen.veil { background: rgba(0, 0, 0, .35); justify-content: safe center; overflow-y: auto; touch-action: pan-y; z-index: 30; }
.bar { display: flex; align-items: center; gap: 12px; height: 48px; flex: 0 0 48px; }
.bar h2 { margin: 0; font-size: 20px; font-weight: 700; }

/* ---------------------------------------------------------------- ボタン */
.btn {
  min-width: 48px; min-height: 48px; padding: 0 14px; border: 2px solid var(--line); border-radius: 14px;
  background: var(--btn); color: var(--btn-ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  overflow-wrap: anywhere; position: relative;
}
.btn > span, .btn > svg, .btn > i { transition: transform .08s ease; }
.btn:active > span, .btn:active > svg, .btn.pressed > span, .btn.pressed > svg { transform: scale(.92); }
.btn.icon { width: 48px; height: 48px; padding: 0; }
.btn.icon svg { width: 30px; height: 30px; }
.btn.ghost { background: transparent; border-color: var(--line); }
.btn.wide { min-width: 120px; width: 100%; }
#tools { display: flex; align-items: center; gap: 8px; }


#copy[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
@keyframes call { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ---------------------------------------------------------------- よみこみ・題名 */
#boot { justify-content: center; gap: 18px; z-index: 40; }
.boot-title { font-size: clamp(20px, 7.2vw, 30px); font-weight: 800; }
.progress { width: 240px; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.progress.thin { height: 2px; border-radius: 1px; width: 60%; margin: 6px auto 0; }
.boot-text, .note { color: var(--ink-dim); font-size: 15px; }

#title { justify-content: flex-start; padding-top: max(8px, env(safe-area-inset-top)); z-index: 25; }
#title .factory { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 40%; pointer-events: none; }
.factory .f-box, .factory .f-tower, .factory .f-cap { fill: var(--bg-2); stroke: var(--line); stroke-width: 2; }
.factory .f-gear { fill: none; stroke: var(--line); stroke-width: 4; stroke-dasharray: 6 6; }
.factory .f-belt { fill: var(--line); }
.factory .f-lamp[data-row="0"] { fill: var(--row-0); } .factory .f-lamp[data-row="1"] { fill: var(--row-1); }
.factory .f-lamp[data-row="2"] { fill: var(--row-2); } .factory .f-lamp[data-row="3"] { fill: var(--row-3); }
#lang-btn { position: absolute; left: 8px; top: max(8px, env(safe-area-inset-top)); min-width: 83px; height: 48px; }
#app-title { margin: 72px 16px 0; font-size: clamp(28px, 9vw, 44px); max-width: 92vw; text-align: center; overflow-wrap: anywhere; }
#gift { position: absolute; top: 24%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gift-text { font-size: 15px; color: var(--ink-dim); }
#start {
  position: absolute; top: 58%; transform: translateY(-50%); width: min(280px, 80vw); height: 72px;
  font-size: 22px; font-weight: 800; white-space: nowrap; overflow: hidden; border-radius: 20px;
}
#start .fill { position: absolute; inset: 0; background: var(--line); transform-origin: left; transform: scaleX(0); transition: transform .15s linear; }
#start span { position: relative; }
#start.ready .fill { transform: scaleX(1); background: transparent; }
#start.ready { box-shadow: 0 0 0 3px var(--pat-0) inset; }
#start.loading span { color: var(--ink-dim); }
#title-note { position: absolute; top: calc(58% + 48px); }
.wiggle { animation: wiggle .4s ease; }
@keyframes wiggle { 0%, 100% { transform: translateY(-50%) translateX(0); } 25% { transform: translateY(-50%) translateX(-6px); } 75% { transform: translateY(-50%) translateX(6px); } }
.slot.wiggle { animation: slot-wiggle .4s ease; }
@keyframes slot-wiggle { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------------------------------------------------------------- スタジオ(縦) */
#studio {
  position: fixed; inset: 0; z-index: 10; display: grid; height: 100dvh; box-sizing: border-box;
  grid-template-rows: var(--topbar) minmax(0, 1fr) var(--deck-h) auto;
  grid-template-areas: "top" "score" "deck" "pads";
  row-gap: 8px; padding: max(0px, env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
}
#topbar { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 4px; }

/* 譜面(score.md 3.4)。**升とチップは隣接する**(隙間 0・境は罫線)。的の短辺は 44 以上。
   絵は「有無」と transform だけ —— 明るさ・不透明度を振らない(明滅の規約) */
#score { grid-area: score; margin: 0 -4px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
#studio[data-tight="1"] #score { overflow-y: auto; touch-action: pan-y; scrollbar-gutter: stable; }   /* 俯瞰と拡大の境は、内側の境(4px)より強く */
#score[data-cols="2"] { flex-direction: row; align-items: stretch; gap: 8px; }
#score[data-cols="2"] #song, #score[data-cols="2"] #staff { flex: 1 1 0; min-width: 0; }
/* **俯瞰は横 1 行のページ送り**(2026-09-09 の利用者の指示)。並びは [◀] [小節 x N] [+] [−] [▶]。
   200 小節を折り返して全部ならべる道は原理的に無いので、**縦に送るのをやめてページで出す**。
   高さは曲の長さに寄らず 44px 固定 —— 2026-09-07 のデザイナー重大 2(俯瞰が高さ 0 になる)は、
   **縮む余地そのものが無くなった**ので構造的に起きない。
   **列は 1 つずつ名指しする**(要素側の `grid-column`)—— ◀ や [+] が隠れたときに
   小節が横へずれないため(押し続けたい的が指の下から逃げない ← coding.md 3 章) */
#song {
  position: relative;                                  /* ページの帯の基準(帯は高さを 1px も食わない) */
  flex: 0 0 auto; height: 44px; display: grid; gap: 0;
  grid-template-columns: 44px repeat(var(--per-page, 5), minmax(0, 1fr)) 44px 44px 44px;
}
.chip {
  position: relative; height: 44px; min-width: 0; min-height: 44px; padding: 0; margin: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 0; background: transparent;
  display: block; overflow: hidden;
}
.chip[data-open="1"] { border: 2px solid var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.chip[data-live="1"]::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--play, 0); width: 2px; background: var(--ink);
}
.chip.tip { display: flex; align-items: center; justify-content: center; border-style: dashed; }
/* ページ送りは「小節の仲間」ではないので**実線**(破線の [+] [−] と役が違うことを枠で言う) */
.chip.tip[data-tip="prev"], .chip.tip[data-tip="next"] { border-style: solid; }
.chip.tip svg { width: 24px; height: 24px; }
.chip.tip .sign { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; fill: none; }
#staff { position: relative; display: flex; flex-direction: column; gap: 4px; }
.srow { display: flex; }
.cell {
  position: relative; flex: 1 1 0; min-width: 0; min-height: 44px; height: var(--row-h, 44px); padding: 0; margin: 0;
  border: 0; border-radius: 0; box-shadow: inset -1px 0 0 color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--ink) 4%, transparent); display: block; overflow: hidden;
}
.cell.beat-end { box-shadow: inset -2px 0 0 color-mix(in srgb, var(--ink) 30%, transparent); }   /* 拍の境。『拍子に乗せる』の絵の本体 */
.srow .cell:first-child { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ink) 50%, transparent), inset -1px 0 0 color-mix(in srgb, var(--ink) 12%, transparent); }
.srow .cell.beat-end:first-child { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ink) 50%, transparent), inset -2px 0 0 color-mix(in srgb, var(--ink) 30%, transparent); }
.srow .cell:last-child { box-shadow: inset -3px 0 0 color-mix(in srgb, var(--ink) 50%, transparent); }
.srow .cell:first-child:last-child { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ink) 50%, transparent), inset -3px 0 0 color-mix(in srgb, var(--ink) 50%, transparent); }
.srow[data-row="0"] { border-top: 3px solid color-mix(in srgb, var(--ink) 50%, transparent); }
.srow[data-row="3"] { border-bottom: 3px solid color-mix(in srgb, var(--ink) 50%, transparent); }
.srow[data-row="0"] .cell { background: color-mix(in srgb, var(--row-0) 7%, transparent); }
.srow[data-row="1"] .cell { background: color-mix(in srgb, var(--row-1) 7%, transparent); }
.srow[data-row="2"] .cell { background: color-mix(in srgb, var(--row-2) 7%, transparent); }
.srow[data-row="3"] .cell { background: color-mix(in srgb, var(--row-3) 7%, transparent); }
/* ペンの的(型C の幕の見出し)。**升から幅を奪わない**ようにここへ置く */
.pens { display: flex; gap: 6px; margin-left: auto; }
.cell.penpick { width: 44px; height: 44px; flex: 0 0 44px; min-width: 44px; min-height: 44px; border-radius: 6px; }
.cell.penpick .mk rect { opacity: .3; }
.cell.penpick .mk.pen rect { opacity: 1; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cell.pressed, .chip.pressed { transform: scale(.97); }
.marks, .rules { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.marks .mk[data-row="0"] rect { fill: var(--row-0); }
.marks .mk[data-row="1"] rect { fill: var(--row-1); }
.marks .mk[data-row="2"] rect { fill: var(--row-2); }
.marks .mk[data-row="3"] rect { fill: var(--row-3); }
.cell .marks .mk.pen rect { stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rules line { stroke: color-mix(in srgb, var(--ink) 12%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rules line.beat { stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 2; }
.chip .hold, .cell .hold { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.chip .hold rect, .cell .hold rect { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 160; stroke-dashoffset: 160; vector-effect: non-scaling-stroke; }
.chip.holding .hold, .cell.holding .hold { opacity: 1; }
.chip.holding .hold rect, .cell.holding .hold rect { animation: hold .55s linear forwards; }
.staff-needle { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--ink); pointer-events: none; }
/* ものさし(型C。見るだけ) */

#placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
#placeholder .factory { width: 100%; height: 80%; }
#placeholder .f-lamp { transform-box: fill-box; transform-origin: center; transition: transform .08s; }
#unity-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .3s; pointer-events: none; }
#unity-canvas.ready { opacity: 1; }
/* ひとこと帯は body の直下に居る(#studio の中だと幕より上へ出られない)。
   **z-index は幕(.screen = 20)より上・ことばの一覧(.veil = 30)と題名(25)より下** */
#caption {
  position: fixed; left: var(--caption-x, 12px); width: var(--caption-w, 200px); bottom: var(--caption-y, 12px);
  font-size: 15px; line-height: 20px; text-align: center; color: var(--ink); min-height: 24px;
  overflow: hidden; word-break: keep-all; pointer-events: none; z-index: 22;
}
#caption:not(:empty) { background: var(--bg); }
/* 幕が開いているあいだは画面の下端へ寄せる(譜面の下端に置くと棚の格子の真ん中に浮く)。
   **明るさ・不透明度を振らない**(絶対ルール 7)—— 枠を出すだけ */
#caption[data-over="1"] {
  left: 12px; right: 12px; width: auto; bottom: max(12px, env(safe-area-inset-bottom));
}
#caption[data-over="1"]:not(:empty) {
  border: 2px solid var(--line); border-radius: 12px; padding: 4px 8px; box-sizing: border-box;
}
#deck { grid-area: deck; display: flex; align-items: center; gap: 8px; }
.deck-left { display: flex; gap: 8px; }
.deck-left .btn.icon { width: 48px; height: 48px; }
#play { width: var(--play, 56px); height: var(--play, 56px); min-width: 0; min-height: 0; padding: 0; border-radius: 50%; flex: 0 0 auto; }
#play svg { width: 60%; height: 60%; }
#play .ic-pause { display: none; }
#play[aria-pressed="true"] .ic-play { display: none; }
#play[aria-pressed="true"] .ic-pause { display: block; }
#play:active svg { transform: scale(.9); }

/* リングの部品(色は行 = 色相、縁 = パターン色) */
/* 盤(レコード)。パターン色は 2026-09-06 に消えたので**共通の 1 色**(色の言語は「行 = 色相」だけ) */
.disc .rim { stroke: var(--pat-0); }
.disc .label { fill: var(--pat-0); }
.disc .bar-mark { fill: var(--bg); opacity: .55; }
.disc .bar-mark[data-empty="1"] { opacity: .25; }

.disc .disc-body { fill: var(--bg-2); }
.disc .hole { fill: var(--bg); }
#ring .groove, .disc .groove { stroke: var(--ink); stroke-opacity: .12; stroke-width: 1; }
#ring .tick { stroke: var(--ink); stroke-opacity: .6; }
#ring .needle line, #ring .needle path { stroke: var(--ink); fill: var(--ink); }
#ring .queued { stroke-linecap: round; }
/* 点は塗り、帯は輪(3px の stroke だけ)。**帯に fill を書かない** —— 書くと特異性で .band { fill: none } に勝って
   r=46 の円盤になり、内側の軌道が隠れる(デザイナーレビュー 2026-09-06 の重大 2) */
.dot[data-row="0"] { fill: var(--row-0); stroke: var(--row-0); } .band[data-row="0"] { stroke: var(--row-0); }
.dot[data-row="1"] { fill: var(--row-1); stroke: var(--row-1); } .band[data-row="1"] { stroke: var(--row-1); }
.dot[data-row="2"] { fill: var(--row-2); stroke: var(--row-2); } .band[data-row="2"] { stroke: var(--row-2); }
.dot[data-row="3"] { fill: var(--row-3); stroke: var(--row-3); } .band[data-row="3"] { stroke: var(--row-3); }
.band, .band[data-row] { fill: none; }

/* フェーダー(44 x 120。的は溝ぜんぶ) */
#fader { flex: 1 1 auto; height: 44px; min-width: 96px; position: relative; display: flex; flex-direction: row; align-items: center; touch-action: none; border-radius: 10px; }
#fader .cap { width: 12px; height: 12px; flex: 0 0 auto; border-left: 2px solid var(--ink-dim); border-bottom: 2px solid var(--ink-dim); transform: rotate(45deg); margin: 0 -2px 0 4px; }
#fader .cap.high { transform: rotate(225deg); margin: 0 4px 0 -2px; }
#fader .track { position: relative; flex: 1 1 auto; height: 10px; border-radius: 5px; background: var(--line); }
#fader .mid { position: absolute; top: -8px; bottom: -8px; left: 50%; width: 2px; margin-left: -1px; background: var(--ink-dim); }
#fader .mid::before, #fader .mid::after { content: ""; position: absolute; left: 0; height: 6px; width: 2px; background: var(--ink-dim); }
#fader .mid::before { top: -6px; } #fader .mid::after { bottom: -6px; }
#fader .knob { position: absolute; top: 50%; left: 50%; width: 28px; height: 40px; margin: -20px 0 0 -14px; border-radius: 8px; background: var(--btn); border: 2px solid var(--ink); }
#fader.snap .knob { transition: left .08s ease; }

/* ---------------------------------------------------------------- パッド 4x4 */
/* `position: relative` は ならべかた(#pad-menu = #pads の子・inset 0)のため(2026-09-11。design/pattern-menu.md 3.1) */
#pads { grid-area: pads; display: grid; grid-template-rows: repeat(4, var(--pad)); row-gap: var(--gap); justify-content: center; align-content: end; position: relative; }
.pad-row { display: grid; grid-template-columns: repeat(4, var(--pad)); column-gap: var(--gap); }
/* **`.tile`(ならべかたの 16 枚)はパッドの規則を選択子で共有する**(複製しない ← design/pattern-menu.md 13 章 5)。
   タイル [i] の矩形 = 窓の中のパッド [i] の矩形(見張り PM2) */
.pad, .tile {
  position: relative; width: var(--pad); height: var(--pad); padding: 0; border-radius: min(14px, calc(var(--pad) * .16));
  border: 2px solid; background: transparent; color: var(--row);
}
.pad[data-row="0"], .tile[data-row="0"] { --row: var(--row-0); } .pad[data-row="1"], .tile[data-row="1"] { --row: var(--row-1); }
.pad[data-row="2"], .tile[data-row="2"] { --row: var(--row-2); } .pad[data-row="3"], .tile[data-row="3"] { --row: var(--row-3); }
.pad[data-state="off"], .tile[data-state="off"] { border-color: color-mix(in srgb, var(--row) calc(var(--pad-off-line-a) * 100%), transparent); background: color-mix(in srgb, var(--row) calc(var(--pad-off-a) * 100%), transparent); }
.pad[data-state="off"] .pict, .tile[data-state="off"] .pict { opacity: var(--pad-off-ink-a); }
/* **パターンの絵(`.pat`)は薄めない**(2026-09-11 のデザイナー 重大 1)。線幅 1.5px の折れ線をパッドのピクトと同じ α で
   薄めると、合成後の線が下地に対して neon 2.81:1 / toy 2.07:1(3:1 割れ)—— 12 枚は「読まずに選ぶ」絵そのもの。
   「ある」は縁・地・光が言うので、絵まで暗くする必要が無い(見張り PM6 の「線の画素」の行) */
.pad[data-state="on"], .tile[data-state="on"] { border-color: var(--row); background: color-mix(in srgb, var(--row) calc(var(--pad-on-a) * 100%), transparent); box-shadow: 0 0 calc(14px * var(--glow)) color-mix(in srgb, var(--row) 55%, transparent); }
/* ペン(その行で「いま書く音」)。**縁と三角だけ**で見せる = 「ある / から」と別の軸(pads.md の追記 A) */
.pad[data-pen="1"] { border-width: 3px; }
.pad[data-pen="1"]::after {
  content: ""; position: absolute; top: 4px; right: 4px; width: 0; height: 0;
  border-top: 7px solid var(--row); border-left: 7px solid transparent; pointer-events: none;
}
.pad .face, .tile .face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: scale(1); transition: transform .06s ease; }
.pad.pressed .face, .tile.pressed .face { transform: scale(.94); transition: none; }
.pad.punch .face { animation: punch .09s ease; }
@keyframes punch { 0% { transform: scale(1); } 50% { transform: scale(.96); } 100% { transform: scale(1); } }
.pad .pict, .tile .pict { width: calc(var(--pad) * .42); height: calc(var(--pad) * .42); color: var(--row); }
.pad .hold { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); pointer-events: none; opacity: 0; }
.pad .hold circle { fill: none; stroke: var(--row); stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: center; }
.pad.holding .hold { opacity: 1; }
.pad.holding .hold circle { animation: hold .55s linear forwards; }
@keyframes hold { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------- スタジオ(横) */
/* 横は「デッキ列(96)/ **譜面** / パッド」の 3 列(2026-09-07 に機械を外し、その場所を譜面へ) */
#studio[data-orient="landscape"], #studio[data-orient="low"] {
  grid-template-columns: 48px 48px minmax(0, 1fr) var(--pads-w);
  grid-template-rows: 48px 48px 48px 44px minmax(0, 1fr);
  grid-template-areas:
    "shelf set score pads"
    "undo loop score pads"
    "clear play score pads"
    "fader fader score pads"
    "copy rep score pads";
  column-gap: 8px; row-gap: 8px; padding: 12px;
}
#studio[data-orient="low"] {
  grid-template-columns: 44px 44px 44px minmax(0, 1fr) var(--pads-w);
  grid-template-rows: 44px 44px 44px minmax(0, 1fr);
  grid-template-areas:
    "shelf set clear score pads"
    "undo loop play score pads"
    "fader fader fader score pads"
    "copy rep sp score pads";
  column-gap: 8px; row-gap: 4px; padding: 8px;
}
#studio[data-orient="landscape"] #score, #studio[data-orient="low"] #score { margin: 0; }
#studio[data-orient="landscape"] #topbar, #studio[data-orient="landscape"] #tools, #studio[data-orient="landscape"] #deck, #studio[data-orient="landscape"] .deck-left,
#studio[data-orient="low"] #topbar, #studio[data-orient="low"] #tools, #studio[data-orient="low"] #deck, #studio[data-orient="low"] .deck-left { display: contents; }
#studio[data-orient="landscape"] #shelf-btn, #studio[data-orient="low"] #shelf-btn { grid-area: shelf; }
#studio[data-orient="landscape"] #settings-btn, #studio[data-orient="low"] #settings-btn { grid-area: set; }
#studio[data-orient="landscape"] #copy, #studio[data-orient="low"] #copy { grid-area: copy; }
#studio[data-orient="landscape"] #play { grid-area: play; width: 48px; height: 48px; }
#studio[data-orient="low"] #play { grid-area: play; width: 44px; height: 44px; }
#studio[data-orient="landscape"] #undo, #studio[data-orient="low"] #undo { grid-area: undo; }
#studio[data-orient="landscape"] #clear, #studio[data-orient="low"] #clear { grid-area: clear; }
#studio[data-orient="landscape"] .btn.icon { width: 48px; height: 48px; }
#studio[data-orient="low"] .btn.icon { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
#studio[data-orient="landscape"] #fader, #studio[data-orient="low"] #fader { grid-area: fader; align-self: center; height: 44px; min-width: 0; }
#studio[data-orient="landscape"] #pads, #studio[data-orient="low"] #pads { grid-area: pads; align-self: center; align-content: center; }
#studio[data-orient="low"] .pad-row { column-gap: 6px; }
#studio[data-orient="landscape"] ~ #caption, #studio[data-orient="low"] ~ #caption {
  background: var(--bg);
}

/* 運ぶ層(drag-place.md 3.1〜3.3)。**指に透明**・**transform だけ**・塗りを 1 画素も持たない */
#drag-layer { position: fixed; inset: 0; pointer-events: none; z-index: 45; }
.chit {
  position: absolute; left: 0; top: 0; width: var(--chit, 44px); height: var(--chit, 44px);
  margin: calc(var(--chit, 44px) / -2) 0 0 calc(var(--chit, 44px) / -2);
  border-radius: 10px; border: 2px solid currentColor; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.chit svg { width: 62%; height: 62%; }
.chit .stem { position: absolute; left: 50%; top: 100%; width: 2px; height: 36px; margin-left: -1px; background: currentColor; }
.chit[data-row="0"], .drop-ring[data-row="0"] { color: var(--row-0); }
.chit[data-row="1"], .drop-ring[data-row="1"] { color: var(--row-1); }
.chit[data-row="2"], .drop-ring[data-row="2"] { color: var(--row-2); }
.chit[data-row="3"], .drop-ring[data-row="3"] { color: var(--row-3); }
.drop-ring { position: absolute; left: 0; top: 0; border: 3px solid currentColor; border-radius: 4px; box-sizing: border-box; }
/* 柱は**輪の左右の縁**に 1 本ずつ(2026-09-07 の年齢適合レビュー 重大 3)。
   直す前は中心に 1 本で、320x568 では**輪が 1 画素も見えないまま置ける**状態だった
   (`#staff` は送れるので、輪が送られた先に居ることがある)—— 残る手掛かりが 2px の線 1 本になり、
   「細かくしたぶんの担保は輪 1 つ」が空になる。2 本なら**16 分の幅**がそのまま読める。
   増える面積は 375x812 で +0.25%(明滅の勘定 0.43% に足しても 0.7% 未満)、動かすのは transform だけ */
.drop-ring i { position: absolute; width: 2px; background: currentColor; }
.drop-ring i.up, .drop-ring i.down { left: -4px; }      /* 枠 3px + 1px = 輪の外の縁 */
.drop-ring i.up2, .drop-ring i.down2 { right: -4px; }
/* 枠線ぶん(3px)重ねる —— border-box のパディング箱基準だと柱が拡大の端に届かない */
.drop-ring i.up, .drop-ring i.up2 { bottom: calc(100% - 3px); }
.drop-ring i.down, .drop-ring i.down2 { top: calc(100% - 3px); }
.pad[data-carry="1"] .face, .tile[data-carry="1"] .face { transform: scale(.94); }

/* ---------------------------------------------------------------- おとえらび / ならべかた(design/sound-picker.md。2026-09-15)
   パッドを短くタップすると、**同じ 4x4 の格子**が おとえらび([0] もどる / [1..15] その列の 15 音)になり、
   ワンショットの行は音を選ぶと ならべかた([0] もどる / [1..13] / [14] ドラッグ / [15] たたく)へ 1 段進む。
   **#pads と同じ格子・同じ gap・同じ align-content** = タイル [i] の矩形 = 窓の中のパッド [i] の矩形(PM2)。
   出入りは **transform(押したパッドから育つ scale)だけ**。明るさ・不透明度を振らない(絶対ルール 7)。
   開閉そのものは pads.gate(StateGate の鍵 'menu')が 520ms の床で畳む —— **閉じるときは即座に hidden**
   (閉じる側にも 180ms の遷移を掛けると、hidden の変化の最短間隔が 340ms になって規約を割る) */
#pad-menu {
  position: absolute; inset: 0; z-index: 3; display: grid; grid-template-rows: repeat(4, var(--pad)); row-gap: var(--gap);
  justify-content: center; align-content: end; transform: scale(.65); transition: transform .18s ease-out;   /* 始点 .2 → .65(2026-09-11 の対象者視点 軽微 1。.2 だと開くたびに画面の 35% が 180ms 下地の暗さへ落ちる = 輝度 41 → 21。.65 なら「あのパッドから出た」は読めたまま振れが半分以下) */
}
#pad-menu[hidden] { display: none; }
#pad-menu.open { transform: scale(1); }
.tile-row { display: grid; grid-template-columns: repeat(4, var(--pad)); column-gap: var(--gap); }
#studio[data-orient="landscape"] #pad-menu, #studio[data-orient="low"] #pad-menu { align-content: center; }
#studio[data-orient="low"] .tile-row { column-gap: 6px; }
/* 開いている間、下の 4 行は**焦点も指も取らない**(inert は JS)。visibility は layout を保つ。
   **`data-menu` は 3 値**("0" 閉 / "sound" おとえらび / "pattern" ならべかた)なので、
   「開いている」は **`:not([data-menu="0"])`** で受ける(値を 2 か所に書き写さない ← sound-picker.md 3.1) */
#pads:not([data-menu="0"]) .pad-row { visibility: hidden; }
/* [1..13] パルスの絵: 横線 1 本の上に矩形のパルスが立つ**1 本の折れ線**(点・丸を使わない・塗りなし・単色・数字なし)。
   幅は S·.78(ピクトの .42 では 16 分 1 つが 2px = 読めない) */
.tile .pat { width: calc(var(--pad) * .78); height: calc(var(--pad) * .78 * .44); overflow: visible; }
.tile .pat path { fill: none; stroke: var(--row); stroke-width: 1.5px; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
/* [14] [15] は**操作**なので `.btn.icon` の見た目(中立の縁・地・線)= 「音ではない」が色で分かれる */
.tile[data-kind="drag"], .tile[data-kind="back"] { border-color: var(--line); background: var(--btn); color: var(--btn-ink); }
/* 絵は [0] のピクトと同じ S·.42(2026-09-11 のデザイナー 軽微 4 / 年齢適合 軽微 4。30px 固定だと 736x260 で
   音の絵 23.7px より操作の絵が大きく階層が逆・375 では 34px まで育つ余地を捨てていた) */
.tile[data-kind="drag"] .pict, .tile[data-kind="back"] .pict { width: calc(var(--pad) * .42); height: calc(var(--pad) * .42); color: var(--btn-ink); opacity: 1; }
/* **「えらんでいる」**(おとえらび で いま試し聴きしている音。2026-09-16 の年齢適合 重大 1)。
   ワンショットの行は**もう一度押すと ならべかたへ進む**ので、「もう一度」がどれかを言う唯一の印である。
   **「ある」(`data-state` = その小節でこの列が鳴らしている音)とは別の軸**なので、色ではなく**枠**で描く。
   `outline` は箱の外に描かれるので**当たり判定も寸法も 1px も動かない**(`:active` で縮めると
   当たり判定まで縮む ← coding.md 1 章)。**明るさ・不透明度は 1 つも振らない**(絶対ルール 7)。
   中立の `--ink` なので、行の色(= 音)とも、`.btn.icon` の器の色(= 操作)とも混ざらない */
.tile[data-sel="1"] { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---------------------------------------------------------------- 棚 */
#shelf .now { display: flex; gap: 16px; align-items: center; justify-content: center; height: 104px; margin: 8px 0; }
/* いまの盤の右: 1 行目 = たなに おく(全幅)/ 2 行目 = わたす + ダウンロード(48)。
   **高さは 104px のまま**(48 + 8 + 48)—— #slots の SL は (h - 228) / 4 でこの高さを引いている
   ので、行を 3 つに積むと狭い画面でスロットが 80px を割る(shelf-share.md 3.2) */
#shelf .now .col { display: grid; grid-template-columns: 1fr 48px; gap: 8px; }
#shelf .now .col #put { grid-column: 1 / -1; }
#shelf .now .col .btn { min-width: 0; }
/* 焼いているあいだ。**静止した縮みだけ** —— 明るさ・不透明度・アニメーションを
   1 つも使わない(絶対ルール 7)。`disabled` ではなく `aria-disabled` なのは、
   **自分を disabled にすると Chrome が焦点を外して戻さない**から(焼くのに 6.4 秒かかる曲がある) */
#download[aria-disabled="true"] > svg { transform: scale(.92); }
#now-disc { width: 96px; height: 96px; }
#slots { display: grid; grid-template-columns: repeat(2, var(--slot, 120px)); grid-template-rows: repeat(4, var(--slot, 120px)); gap: 8px; justify-content: center; margin: 8px auto; }
.slot { position: relative; width: var(--slot, 120px); height: var(--slot, 120px); border-radius: 50%; border: 2px dashed var(--ink-dim); background: transparent; padding: 0; display: flex; align-items: center; justify-content: center; }
.slot[data-filled="1"] { border-style: solid; border-color: transparent; }
.slot .disc { transition: transform .08s; }
.slot.pressed .disc { transform: scale(.94); }
.slot .hold { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); pointer-events: none; opacity: 0; }
.slot .hold circle { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: center; }
.slot.holding .hold { opacity: 1; }
.slot.holding .hold circle { animation: hold .75s linear forwards; }
#shelf .left { display: flex; flex-direction: column; min-height: 0; }
/* 横: 左の列(幅 200)に もどる・いまの盤・置く・わたす を縦に、右に 4 x 2(shelf-share.md 3 章) */
#shelf[data-orient="landscape"] { flex-direction: row; align-items: flex-start; gap: 16px; }
#shelf[data-orient="landscape"] .left { width: 200px; flex: 0 0 200px; }
#shelf[data-orient="landscape"][data-narrow="1"] .left { width: 160px; flex-basis: 160px; }   /* w < 600: 4 列 x 80 + 左列 200 で 584 > 568 になる */
#shelf[data-orient="landscape"][data-low="1"] .now { height: auto; margin: 4px 0; }           /* h < 300: 盤を小さく、ボタン 2 つを横に */
#shelf[data-orient="landscape"][data-low="1"] #now-disc { width: 64px; height: 64px; }
#shelf[data-orient="landscape"][data-low="1"] .now .col { display: flex; flex-direction: row; gap: 8px; }
/* 低い横は 3 つ横並び。**幅は字の長さに比例して配る**(`1 1 0` だと等分になり、
   長い訳語のほうだけ 4 行に折れる —— fr「Poser sur l'étagère」が 68px で 87px 高になった) */
/* **語の途中で折らない**(`.btn` の `overflow-wrap: anywhere` を低い横だけ戻す)。
   `anywhere` は min-content の寄与を 1 文字まで縮めるので、幅の配分でも不利になる ——
   実測で es「Compartir」が Com / parti / r の 3 行になり、行が 48 → 66.4px に育っていた
   (2026-09-09 のデザイナー再レビュー 軽微 2)。**基準は語の幅**(`flex-basis: min-content`) */
#shelf[data-orient="landscape"][data-low="1"] .now .col .btn {
  width: auto; flex: 1 1 min-content; min-width: 48px; padding: 0 6px; overflow-wrap: normal;
}
#shelf[data-orient="landscape"][data-low="1"] .now .col #download { flex: 0 0 48px; padding: 0; }
#shelf[data-orient="landscape"] .now { flex-direction: column; height: auto; }
#shelf[data-orient="landscape"] .now .col { width: 100%; }
#shelf[data-orient="landscape"] .now .col .btn { width: 100%; }
#shelf[data-orient="landscape"] .now .col #download { width: 48px; justify-self: end; }
#shelf[data-orient="landscape"] #slots { grid-template-columns: repeat(4, var(--slot, 120px)); grid-template-rows: repeat(2, var(--slot, 120px)); margin: 8px 0; }
#urlbox { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
#urlbox input { font: inherit; padding: 8px; border-radius: 8px; border: 2px solid var(--line); background: var(--btn); color: var(--btn-ink); -webkit-user-select: text; user-select: text; }

/* ---------------------------------------------------------------- 設定・ことば・クレジット */
.rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: min(360px, 100%); margin: 8px auto; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--btn); color: var(--btn-ink); text-align: left; }
.row.static { flex-direction: column; align-items: stretch; }
.row.static > span, .row summary { font-weight: 700; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.card { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 56px; padding: 8px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); }
.card[aria-checked="true"] { border-color: var(--ink); border-width: 3px; }
.card[aria-checked="true"]::after { content: "✓"; font-weight: 800; }
.card:active .swatch { transform: scale(.94); }
.swatch { width: 100%; height: 40px; border-radius: 8px; }
.swatch.neon { background: linear-gradient(90deg, #ff7a45 0 25%, #9d7bff 25% 50%, #2fd6c9 50% 75%, #ff5fb8 75%); border: 6px solid #12131f; }
.swatch.toy { background: radial-gradient(circle at 20% 50%, #d94f1e 0 8px, transparent 9px), radial-gradient(circle at 45% 50%, #6a4fd8 0 8px, transparent 9px), radial-gradient(circle at 70% 50%, #0b8a82 0 8px, transparent 9px), radial-gradient(circle at 92% 50%, #d63c8f 0 8px, transparent 9px), #fff; border: 2px solid #ddd; }
details.row summary { cursor: pointer; list-style: none; min-height: 40px; display: flex; align-items: center; }
details.row summary::after { content: "▸"; margin-left: auto; }
details.row[open] summary::after { content: "▾"; }
.keys { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; align-items: start; margin-top: 4px; }   /* 上 8→4・行の隙間 12→8(2026-09-11。9 行目を入れると 736x260 で 6px 足りない) */
/* 行間 1.25: キーの一覧が 9 行になった(2026-09-11 の keys.menu)。既定の行間だと 736x260(ja)/ 568x320(es)/
   320x568(fr)で展開した行が画面より高くなり、送っても届かない(6〜13px 超え)。文言を削らずに行間で 25〜60px 稼ぐ */
.keys ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.25; }
.keys .note { grid-column: 1 / -1; margin: 0; font-size: 13px; }
.keymap { width: 120px; height: 120px; }
.keymap rect { fill: var(--bg); stroke: var(--line); stroke-width: 2; }
.keymap text { fill: var(--ink); font-size: 16px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.lang-sheet { background: var(--bg); border-radius: 16px; padding: 12px; width: min(360px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 8px; }
#lang-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lang-item { min-height: 56px; }
.lang-item[aria-selected="true"] { border-color: var(--ink); border-width: 3px; }
#cred-list { width: min(560px, 100%); margin: 8px auto; display: grid; gap: 6px; padding-bottom: 24px; }
.cred { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; -webkit-user-select: text; user-select: text; }
.cred b { font-size: 15px; }
.cred .src { color: var(--ink-dim); overflow-wrap: anywhere; }
#credits::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 24px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }

/* 絵の対比: OFF の絵は薄くしすぎない。おもちゃ(明るい地)では行の色を文字色へ寄せる(パッドの地の上で 3:1 ← pads.md 3.3。
   2026-09-06 の年齢適合レビューが ON 2.1〜2.7 / OFF 2.06〜2.35 を実測) */
/* **おとえらび のタイルの絵も、パッドとまったく同じ規則で描く**(2026-09-16 のデザイナー 重大 2)。
   8 章は「その音のパッドの絵をそのまま」と書いているのに、この 2 行が `.pad` だけを指していたので
   タイルだけ `--pad-off-ink-a`(.55 / .6)と行の色そのままで描かれ、実測の対比が
   **neon 4.89:1 → 2.83:1 / toy 4.51:1 → 2.07:1**(= 15 枚を見分ける唯一の手掛かりが 3:1 を割る)だった。
   **同じ絵は同じ規則で**(下の `.tile .pat path` と同じ形で `.tile` を並べる) */
.pad[data-state="off"] .pict, .tile[data-state="off"] .pict { opacity: .85; }
/* **`[data-row]` で絞る**(= 音の絵を持つタイルだけ)。`.tile` ぜんぶに掛けると
   [0] もどる / [14] ドラッグ の `.pict`(`var(--btn-ink)` の操作の色)まで行の色に染まり、
   「色 = 意味」(操作は中立・音は行の色)が toy でだけ崩れる */
html[data-theme="toy"] .pad .pict, html[data-theme="toy"] .tile[data-row] .pict { color: color-mix(in srgb, var(--row) 55%, #2b2530); }
/* パターンの絵も toy ではピクトと同じ規則で墨を混ぜる(2026-09-11。行の色そのままだと「ある」の地(行の色 45%)の上で
   線が 2.12:1 = 光っている 1 枚の形だけ読めない。PM6 の「線の画素」が両テーマ・13 枚で 3:1 を見る) */
html[data-theme="toy"] .tile .pat path { stroke: color-mix(in srgb, var(--row) 55%, #2b2530); }
html[data-theme="toy"] .pad .hold circle { stroke: color-mix(in srgb, var(--row) 55%, #2b2530); }

/* 低い横向き(812x375 など)の設定: 4 行を 2 列に。開いたキー一覧が溢れたときだけ縦に流す(安全網) */
@media (orientation: landscape) and (max-height: 480px) {
  #settings .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(720px, 100%); align-items: start; }
  /* **キーそうさを開いたら 2 列ぶんに広げる**(2026-09-07 に `keys.del` の行を足して踏んだ)。
     260px の桁に 120px の絵が入ると一覧の幅が 96px しか残らず、1 項目が 4〜5 行に折り返して
     **行そのものが画面より高くなる**(568x320 で 416.8px)—— 高すぎる要素は
     どこへ送っても枠に収まらないので、「届く」の見張りが原理的に通らない。
     **一覧を 2 列にする直しは逆効果**(幅が半分になり折り返しが増えて 398.9px)。 */
  #settings #set-keys[open] { grid-column: 1 / -1; }
  /* **2 列ぶんに広げたうえで、一覧そのものも 2 列にする**(2026-09-11 に `keys.menu` で 9 行になり、
     736x260 で 8 言語とも 6px はみ出た。行間 1.25・隙間 8px まで詰めても足りない)。
     上の「2 列は逆効果」は **260px の桁の中で** 2 列にした話 —— 広げた 560px を 2 列に割れば
     1 列 270px で、折り返しを足しても行数はほぼ半分になる([実測] 736x260: 266 → 196px) */
  #settings #set-keys[open] .keys ul { columns: 2; column-gap: 16px; }
  #settings #set-keys[open] .keys li { break-inside: avoid; }
}
/* 狭い縦(320x568 など): キーの絵(120px)を一覧の横に置くと一覧の幅が 160px しか残らず、
   es / fr / de / pt の 9 行が 30 行に折り返して行が画面より高くなる(598px > 568)。
   絵を上に、一覧を下に積む([実測] 320x568 es: 598 → 4xx px) */
@media (max-width: 340px) {
  .keys { grid-template-columns: minmax(0, 1fr); }
  .keymap { justify-self: center; }
}
/* 低い横: ことばの一覧を 4 列に畳む(**10 言語 = 3 行**)。2 列のままだと 5 行 = 392px になり、
   実測 2026-09-12 で 812x375 は「とじる」の下が 5.0px 切れ、568x320 では枠の外(332..380 / 画面 320)へ出た。
   **帯が 300px だったころは 8 言語 = 4 行 336px** で 375 の画面に収まっていた —— つまり
   **9 つ目(インドネシア語)が越えさせた**ので、帯のほうを 420px へ広げる。
   **語を短く(`Indonesia`)しても 1 行も減らない** —— 効くのは札の数であって語の長さではない。
   **10 個目(イタリア語。2026-09-13。#665)は 4 列で 3 行のまま**で、2 列でも 5 行のまま
   —— 実測で一覧の矩形が 1px も動いていない。**12 個目まではこの帯で持つ**。
   **11 個目(繁体字中国語 zh-hant。2026-09-14。#663)も 4 列 3 行のまま**。縦の 2 列は 5 → 6 行になるが、
   実測で「とじる」の下端は 375x812 で 622 / 360x640 で 536 / 320x568 で 500(どれも枠の中)。 */
@media (orientation: landscape) and (max-height: 420px) {
  #lang-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lang-sheet { width: min(600px, calc(100% - 24px)); }
}
/* 題名の余白は**いままでどおり 300px の帯だけ**。上の帯と一緒に広げると、
   いま収まっている画面(812x375 など)の題名が動く —— この直しは
   **ことばの一覧のほかを 1px も動かさない**と決めてある(2026-09-12) */
@media (orientation: landscape) and (max-height: 300px) {
  #app-title { margin-top: 8px; }   /* 題名が はじめる(58%)に重ならないように */
}
/* 機械の場所を叩いたときの応え(feedback.md 4.4)。transform だけ = 何回叩いても明滅にならない */

/* ---------------------------------------------------------------- 動きをへらす設定(このブロックは末尾に保つ) */
/* ---------------------------------------------------------------- ページの帯(俯瞰の下だけ。2026-09-09)
   **2026-09-15: 行の帯(払いの窓)は横払いと一緒に消えた**(sound-picker.md 0.1)——
   `.pad-row` の `clip-path` / `.pad-strip` / 行ごとの `.page-bar` / `.pad[data-in="0"]` も同じ回に消えている。
   残るのは**俯瞰の下の 1 本だけ**(copyright-freeze 1 章「ページの帯を出してよいのは 1 か所」)。
   **溝 1 本 + つまみ 1 つ**(点にしない・区切らない・刻まない・数字を出さない)。**指に透明**(飾り。的ではない) */
.page-bar {
  position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 1.5px;
  /* **溝は中立の色**(行の色ではない)。行の色を薄めた線は、どのテーマでも 1.6〜2.4:1 にしかならず
     「続きがある」が見えなかった(2026-09-08 の実測) */
  background: color-mix(in srgb, var(--ink) 56%, transparent); pointer-events: none;
}
/* 俯瞰の帯は行の色を持たない(俯瞰は 4 行ぜんぶの俯瞰なので)。つまみは地の文字色。
   下端は -6px(#score の gap 10px の中。拡大の上端と 4px 空く) */
.song-bar { color: var(--ink); bottom: -6px; }
.page-thumb { position: absolute; left: 0; top: 0; bottom: 0; width: 20%; border-radius: 1.5px; background: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .page-thumb { transition: none !important; }   /* 俯瞰の帯のつまみは即座(2026-09-08) */
  .screen { transition: none; }
  .chip, .cell { transition: none; }
  .chip.holding .hold rect, .cell.holding .hold rect { animation: none; stroke-dashoffset: 0; }
  .pad .face, .tile .face { transition: none; }
  .pad.punch .face { animation: none; }
  #pad-menu { transition: none; }             /* メニューの出入りは即座(床は StateGate が同じだけ効く ← sound-picker.md 10 章) */
  #patterns[data-copy="1"] .btn.pat[aria-checked="false"] { animation: none; border-style: dashed; }
  .wiggle, .slot.wiggle { animation: none; }
  #fader.snap .knob { transition: none; }
  #unity-canvas { transition: none; }
  #start .fill { transition: none; }
  .btn > span, .btn > svg, .btn > i, .slot .disc { transition: none; }
}

/* ---- くりかえし(通し ⇄ いまの 1 小節)。設計は design/loop-range.md
   **絵は升の数(3 ⇄ 1)で読ませる。明るさを振る演出は作らない**(1 秒 3 回の規約) */
#loop[aria-pressed="false"] .loop-bar { display: none; }
#loop[aria-pressed="true"] .loop-all { display: none; }
/* 押された見た目(2026-09-07 のデザイナー軽微 2)。**明るさを振らない**規約があるので、
   地色の比は 1.14 しか出ない —— **縁の色と太さ**で差を出す(升の数 3 ⇄ 1 と合わせて 3 つ目の手掛かり) */
#loop[aria-pressed="true"] { background: color-mix(in srgb, var(--ink) 14%, transparent);
  border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* 反復記号: 拡大の左右の縁(小節の枠 3px の**内側**)。疑似要素なので
   **升の当たり判定も寸法も 1px も変わらない**(score.md 11.2 #5 の再発を構造から止める) */
/* **点は真ん中に寄せ、線は二重にする**(2026-09-07 のデザイナー重大 1)。
   直す前は 3.2px の点が 98.6px 離れていて(31 倍)、対に見えず「汚れ」に読めた ——
   ボタンの絵は 2.8 倍。**点を増やさない・横に並べない**(copyright-freeze 1 章)ので、
   **太さと位置だけ**で直す。二重線にするのは、針(2px の 1 本)と見分けるため */
#score[data-loop="bar"] #staff::before,
#score[data-loop="bar"] #staff::after {
  content: ''; position: absolute; top: 4px; bottom: 4px; width: 8px; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle 2.6px at 5px calc(50% - 11px), var(--ink) 99%, transparent 100%) no-repeat,
    radial-gradient(circle 2.6px at 5px calc(50% + 11px), var(--ink) 99%, transparent 100%) no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 0 / 2px 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) 3px 0 / 1px 100% no-repeat;
}
#score[data-loop="bar"] #staff::before { left: 4px; }
#score[data-loop="bar"] #staff::after { right: 4px; transform: scaleX(-1); }
/* 俯瞰は縮小形(線だけ)。チップは 44px しかないので点を描かない。
   **出るのは「回している 1 枚」だけ**(`data-cyc`)—— `data-open` で出すと、
   回数 4 の run では 4 枚に出て「どれを回しているか」が消える(2026-09-07 のデザイナー重大 3) */
#song .chip[data-cyc="1"]::before {
  content: ''; position: absolute; inset: 2px; pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 2px 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) right 0 top 0 / 2px 100% no-repeat;
}

/* **横向きでも居場所を名指しする**(2026-09-07 のデザイナー軽微 1)。
   直す前は grid-area が auto で、空いている sp セルへ**自動配置**されて落ちていた ——
   次に #studio へ子を 1 つ足した人が、ボタンを黙って別の場所へ動かせる。
   **くりかえしは もどす の隣・ぜんぶけす が列の最後**(同日に利用者の指示で入れ替えた ←
   loop-range.md 15.4)。**格子の名前は要素と同じ綴りのまま**にしてある —— 名前を据え置いて
   中身だけ入れ替えると、次に読む人が必ず誤読する。**両方とも見張りが名指しを見る** */
#studio[data-orient="landscape"] #loop, #studio[data-orient="low"] #loop { grid-area: loop; }
/* くりかえし(回数)も**名指し**する(自動配置に流れない ← loop-range.md 14.8 の軽微 1) */
#studio[data-orient="landscape"] #repeat, #studio[data-orient="low"] #repeat { grid-area: rep; }

/* 1 小節ループ中、回していない小節を沈める(2026-09-07 の利用者の報告)。
   **塗り替えは score の床 1 本を通る**ので 1 秒に 2 回を超えない。遷移は持たない(静止した 2 姿勢) */
/* **先祖の条件に `data-loop` を使わない**(2026-09-07 のデザイナー重大 1)。
   `data-loop` は床を通らない(記号は即座に出す)ので、AND にすると**戻るほうだけ 0ms で効き**、
   連打で見えている姿が **1 秒に 10 回**明暗した(`data-out` は 2 回なので見張りは緑のまま)。
   いまは沈める印の出入りが**両方向とも paint の床 1 本**を通る(実測 2 回 / 最短 516ms)。
   `.38` から `.65` へ上げたのは、**沈んだチップの帯が地に対して 1.87〜2.41:1 しか無かった**ため
   (押せる的なので 3:1 を降ろせない)。**回している小節の目立ちは 9.6% しか落ちない** ——
   あれを立たせているのは隣の暗さではなく、**自分の 2px の縁と 6% の地と反復記号**である。 */
#song[data-dim="1"] .chip[data-out="1"] { opacity: .65; }

/* ---- おなじ小節をふやす(repeat-bars.md 3.3)。**新しい記号を 1 つも作らない** ——
   1 小節ループが使っている反復記号を、**run の外側の縁**(小節の枠の位置)に置くだけ。
   内(ひらいている印の内側)= 聴き方 / 外(枠の位置)= 曲の一部、で入れ子になる(重ならない) */
/* **`::after` を使わない**(2026-09-07 の著作権レビュー 参考 1)—— あれは針
   (`.chip[data-live="1"]::after`)のもので、`#song .chip[data-run]::after` は特異性で勝つ。
   直す前は **run の端のチップに針が乗っているあいだ針が消えていた**(回数 2 なら 4 秒まるごと)。
   **見張りは `data-live` の属性では書けない**(属性は正しく回っている)—— 描かれた線を見る */
#song .chip .rep-edge { display: none; }
#song .chip[data-run="head"] .rep-edge, #song .chip[data-run="tail"] .rep-edge {
  display: block; position: absolute; top: 3px; bottom: 3px; width: 8px; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle 2.6px at 5px calc(50% - 8px), var(--ink) 99%, transparent 100%) no-repeat,
    radial-gradient(circle 2.6px at 5px calc(50% + 8px), var(--ink) 99%, transparent 100%) no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 0 / 2px 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) 3px 0 / 1px 100% no-repeat;
}
/* **回数の数字**(2026-09-07 の利用者の指示で、数字は出してよくなった。**文字は出さない**)。
   置き場所は **run のはじめのチップ**(開く反復記号の側)。記譜は閉じる側に書くが、
   **狭い 3 画面(360x640 / 320x568 / 736x260)では俯瞰に 4 枚しか出ず、run の終わりが画面の外**
   になる(2026-09-07 の対象者視点レビュー 軽微 1 の実測)—— **はじめなら必ず一緒に見える**。
   **絵の上に乗るだけ**(絶対配置・`pointer-events: none`)なので、升とチップの当たり判定は 1px も動かない。
   `data-run` が変わるのは layout のときだけなので、**明滅の床とは無関係**(1 秒に 1 回も変わらない) */
#song .chip .rep-num {
  position: absolute; top: 0; left: 11px; z-index: 3; pointer-events: none; font-style: normal;
  font-size: 12px; font-weight: 700; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums;
}
#song .chip[data-run="head"] .rep-edge { left: 0; }
#song .chip[data-run="tail"] .rep-edge { right: 0; transform: scaleX(-1); }
/* run が 1 枚しか無いことは起きない(回数 1 は data-run を持たない) */
#repeat .hold { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
#repeat .hold rect { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 160; stroke-dashoffset: 160; vector-effect: non-scaling-stroke; }
#repeat.holding .hold { opacity: 1; }
#repeat.holding .hold rect { animation: hold .55s linear forwards; }