/* メトロノームがそろうまで */
:root{--bg:#16202c;--panel:#1c2836;--line:#2c3b4a;--ink:#e8f0f4;--muted:#a3b4bf;--acc:#ffc95a;--pin:#ff7a6b;
  --f-display:'Dela Gothic One','Yu Gothic',sans-serif;--f-body:'Zen Kaku Gothic New','Yu Gothic',system-ui,sans-serif;--f-mono:'IBM Plex Mono',Consolas,monospace;color-scheme:dark}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body)}
#app{max-width:1100px;margin:0 auto}
#top{padding:12px 16px 4px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
#top h1{font-family:var(--f-display);font-weight:400;font-size:22px;margin:0}
#top .sub{color:var(--muted);font-size:13px}
.langsw{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;align-self:center;margin-left:auto}
.langsw button{font:inherit;border:0;background:none;padding:3px 8px;min-height:30px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);border-radius:0}
.langsw button[aria-pressed="true"]{background:var(--acc);color:#1a1a1a}
:root[lang=en] [lang=ja],:root:not([lang=en]) [lang=en]{display:none!important}
/* 上に固定する部分（図＋つぎへ） */
#pin{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
#cvwrap{position:relative;height:min(56vh,460px)}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation;cursor:pointer}
.ov{position:absolute;left:10px;top:26px}
button{font:inherit;font-size:14px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;min-height:36px;padding:4px 12px;cursor:pointer}
button:hover{border-color:var(--muted)}
button.on{background:var(--acc);color:#1a1a1a;border-color:var(--acc)}
#hold.on{background:var(--pin);border-color:var(--pin);color:#1a1a1a}
#tour{display:flex;align-items:center;gap:10px;padding:8px 16px}
#tourNum{font-family:var(--f-mono);color:var(--acc);font-size:13px;white-space:nowrap}
#tourText{margin:0;flex:1;font-size:14px;line-height:1.6}
#next{background:var(--acc);color:#1a1a1a;border-color:var(--acc);font-weight:700;white-space:nowrap}
/* スクロールする部分 */
#graph{padding:10px 16px 0}
.ghead{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:14px}
.gnote{color:var(--muted);font-size:12px}
#gv{width:100%;height:180px;display:block;margin-top:6px}
#controls{padding:8px 16px;display:flex;flex-direction:column;gap:8px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.row .lab{width:6.5em;color:var(--muted);font-size:13px}
.row .note{color:var(--muted);font-size:12px;flex-basis:100%;padding-left:calc(6.5em + 6px)}
.about{padding:8px 16px 32px;color:var(--muted);font-size:14px;line-height:1.8}
.about summary{cursor:pointer;color:var(--ink);font-size:15px}
.about h3{color:var(--ink);font-size:15px;margin:14px 0 4px}
.about a{color:var(--acc)}
@media (max-width:560px){
  #top h1{font-size:19px}
  #cvwrap{height:40vh;min-height:230px}
  #tour{padding:6px 12px;gap:8px}
  #tourText{font-size:13px;line-height:1.5}
  #graph,#controls,.about{padding-left:12px;padding-right:12px}
  .row .lab{width:100%}
  .row .note{padding-left:0}
}