/* Light Swarm — 画面部品 */
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--deep); color: var(--ink); overflow: hidden; }
body { font-family: var(--font-text); font-size: var(--size-body); line-height: 1.7; -webkit-font-smoothing: antialiased; }
canvas.stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* 左上の短い説明 */
.cap { position: fixed; left: var(--s3); top: var(--s3); right: var(--s3); z-index: 2; pointer-events: none; }
.cap b { display: block; font: 600 var(--size-big)/1.1 var(--font-display); letter-spacing: .01em; color: var(--ink); }
.cap span { display: block; margin-top: var(--s1); color: var(--ink-2); font-size: var(--size-body); max-width: 30em; }
.back { position: fixed; right: var(--s3); top: var(--s3); z-index: 3; min-height: var(--tap); display: inline-flex; align-items: center;
        padding: 0 var(--s2); color: var(--ink-2); text-decoration: none; font: 500 var(--size-label)/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
        border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); background: rgba(14,18,32,.72); }
.back:focus-visible, .seg button:focus-visible, .play:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }

/* パネル */
.ui { position: fixed; left: 50%; bottom: var(--s2); transform: translateX(-50%); width: min(calc(100% - 32px), var(--pillar)); z-index: 3; display: grid; gap: var(--s1); }
/* ぼかし（backdrop-filter）は動く3Dの上で重い（実測：26fps→外すと58fps）。ぼかしの代わりに濃い半透明にする */
.panel { background: rgba(14,18,32,.86); border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius);
         box-shadow: rgba(0,0,0,.73) 0 18px 50px -20px; padding: var(--s2); }
.row { display: grid; grid-template-columns: 7.6em 1fr; align-items: center; gap: var(--s2); min-height: var(--tap); }
.row > label, .row > .lab { white-space: nowrap; }
.row + .row { border-top: 1px solid rgba(255,255,255,.06); }
.row > label, .row > .lab { color: var(--ink-3); font: 500 var(--size-label)/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; min-height: var(--tap); padding: 0 var(--s1); color: var(--ink-2); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
              border-radius: 10px; font: 500 13px/1 var(--font-text); cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { color: #0e1220; background: #eef4ff; border-color: #eef4ff; }
input[type=range] { width: 100%; accent-color: var(--cyan); min-height: var(--tap); }
.num { font: 600 var(--size-big)/1 "DM Mono", var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.num small { font-size: var(--size-label); color: var(--ink-3); margin-left: 4px; }
.read { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.read .hint { color: var(--ink-3); font-size: var(--size-label); }
.play { min-width: var(--tap); min-height: var(--tap); border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,180,84,.14); color: var(--amber); font: 600 14px/1 var(--font-display); cursor: pointer; }
#err { position: fixed; inset: 0; display: none; place-items: center; text-align: center; padding: var(--s3); z-index: 9; background: var(--deep); }