[hidden]{display:none !important}   /* ← 消さないこと（引き継ぎ書/アプリの作りかた.md 4章） */

:root{
  --navy:#16386F; --blue:#2C5FA8; --orange:#E2761B; --ok:#1f8a4c;
  --bg:#f4f6f8; --card:#fff; --ink:#1d2430; --sub:#5d6878; --line:#d9dee6;
}
*{box-sizing:border-box}
html,body{margin:0}
/* 文字の大きさ（10/7 本人「PCだと文字が小さくて見えにくい」）：スマホは17px、広い画面は20pxにして、幅は760pxまで */
html{font-size:17px}
@media (min-width:700px){html{font-size:20px} body{max-width:760px;margin:0 auto;box-shadow:0 0 0 1px var(--line)}}
body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Hiragino Sans","Yu Gothic UI",sans-serif;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));-webkit-text-size-adjust:100%}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}

.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--navy);color:#fff;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px}
.bar h1{font-size:1.15rem;margin:0;letter-spacing:.05em}
.mic{border:2px solid #fff;background:transparent;color:#fff;border-radius:999px;padding:6px 14px;font-weight:700}
.mic[aria-pressed="true"]{background:var(--orange);border-color:var(--orange)}

.tabs{display:flex;background:var(--card);border-bottom:1px solid var(--line)}
.tab{flex:1;border:0;background:none;padding:12px 0;font-weight:700;color:var(--sub);border-bottom:3px solid transparent}
.tab[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--orange)}

.now{background:var(--card);margin:12px 16px;border-radius:14px;padding:16px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.06)}
/* 10/7 本人：スクロールしても音のバーが見えるように、画面の上に貼りつける。貼りついたら小さくする（曲のマスが隠れないように） */
.now{position:sticky;top:0;z-index:20}
#now-pin{height:1px;margin-bottom:-1px}
.now.stuck{margin:0;border-radius:0;padding:6px 16px 8px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.now.stuck .now-note{font-size:1.5rem;line-height:1.15}
.now.stuck .now-sub{display:none}
.now.stuck .meter{height:22px}
.now.stuck .meter-lbl{display:none}
.now-note{font-size:2.6rem;font-weight:800;margin:0;line-height:1.2;color:var(--navy);min-height:1.2em}
.now-sub{margin:4px 0 12px;color:var(--sub);font-size:1rem;min-height:1.3em}
.meter{position:relative;height:28px;border-radius:14px;background:linear-gradient(90deg,#f3d2b6,#eef1f5 35%,#eef1f5 65%,#f3d2b6)}
.meter-ok{position:absolute;left:37.5%;width:25%;top:0;bottom:0;background:rgba(31,138,76,.18)}
.meter-mid{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--ok)}
.needle{position:absolute;top:-4px;bottom:-4px;width:6px;margin-left:-3px;left:50%;border-radius:3px;background:var(--navy);
  opacity:0;transition:left .08s linear,opacity .2s}
.needle.on{opacity:1}
.needle.good{background:var(--ok)}
.meter-lbl{display:flex;justify-content:space-between;font-size:.85rem;color:var(--sub);margin:4px 2px 0}

.panel{margin:0 16px}
.panel-hint{color:var(--sub);font-size:1rem;line-height:1.6;margin:8px 0 12px}

.level{display:flex;align-items:center;gap:6px;margin:0 0 12px}
.level-lbl{font-size:.95rem;color:var(--sub);margin-right:2px}
.level button{flex:1;border:2px solid var(--line);background:var(--card);border-radius:999px;padding:6px 0;font-weight:700;font-size:.98rem;color:var(--sub)}
.level button[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);color:#fff}
.meter-ok{transition:left .2s,width .2s}
.scale{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.scale button{border:2px solid var(--line);background:var(--card);border-radius:10px;padding:12px 0;font-weight:700;font-size:1rem;color:var(--ink)}
.scale button.target{border-color:var(--orange);background:#fff3e8;color:var(--orange);animation:pulse 1.2s ease-in-out infinite}
.scale button.done{border-color:var(--ok);background:#e6f4ec;color:var(--ok)}
@keyframes pulse{50%{box-shadow:0 0 0 4px rgba(226,118,27,.25)}}
@media (max-width:380px){.scale button{font-size:.85rem;padding:10px 0}}
.judge{text-align:center;font-weight:700;font-size:1.1rem;margin:14px 0;min-height:1.5em}
.judge.good{color:var(--ok)}

.row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0}
.primary{border:0;background:var(--orange);color:#fff;border-radius:10px;padding:12px 18px;font-weight:700}
.primary:disabled{background:#c8ced8;cursor:default}
.ghost{border:2px solid var(--navy);background:var(--card);color:var(--navy);border-radius:10px;padding:10px 14px;font-weight:700}

/* 音域：鍵盤のような横の帯（C5〜C8） */
.keys{position:relative;height:44px;border-radius:8px;border:1px solid var(--line);
  background:linear-gradient(90deg,transparent calc(100%/3 - 1px),#9aa6b6 calc(100%/3 - 1px),#9aa6b6 calc(100%/3 + 1px),transparent calc(100%/3 + 1px),transparent calc(200%/3 - 1px),#9aa6b6 calc(200%/3 - 1px),#9aa6b6 calc(200%/3 + 1px),transparent calc(200%/3 + 1px)),repeating-linear-gradient(90deg,#fff 0,#fff calc(100%/36 - 1px),#e8ecf1 calc(100%/36 - 1px),#e8ecf1 calc(100%/36))}
.keys-band{position:absolute;top:0;bottom:0;background:rgba(44,95,168,.28);border-left:3px solid var(--blue);border-right:3px solid var(--blue)}
.keys-now{position:absolute;top:-5px;bottom:-5px;width:6px;margin-left:-3px;border-radius:3px;background:var(--orange)}
.keys-lbl{display:flex;justify-content:space-between;font-size:.85rem;color:var(--sub);margin:4px 0 12px}
.range-now{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}
.range-now div{background:var(--card);border-radius:10px;padding:10px 6px;text-align:center}
.range-now dt{font-size:.88rem;color:var(--sub)}
.range-now dd{margin:4px 0 0;font-weight:800;color:var(--navy);font-size:1.02rem}
.h2{font-size:1rem;margin:20px 0 6px;color:var(--navy)}
.best{margin:0 0 6px;font-weight:700}
.history{margin:0;padding-left:1.4em;color:var(--sub);font-size:.98rem;line-height:1.8}

.privacy{text-align:center;color:var(--sub);font-size:.9rem;margin:20px 16px 0}

.toast{position:fixed;left:0;right:0;margin:0 auto;width:max-content;max-width:calc(100% - 32px);
  bottom:calc(20px + env(safe-area-inset-bottom));background:rgba(20,28,40,.92);color:#fff;padding:10px 16px;border-radius:10px;font-size:.92rem}

/* 曲 */
.song-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.song-head select{font:inherit;font-weight:700;padding:8px 10px;border:2px solid var(--navy);border-radius:10px;background:var(--card);color:var(--navy)}
.song-origin{font-size:.9rem;color:var(--sub)}
.song-notes{display:flex;flex-wrap:wrap;gap:4px;max-height:150px;overflow-y:auto;padding:2px}
.song-notes span{min-width:2.3em;text-align:center;padding:5px 2px;border-radius:8px;border:2px solid var(--line);background:var(--card);font-size:1rem;font-weight:700}
.song-notes span.done{border-color:var(--ok);background:#e6f4ec;color:var(--ok)}
.song-notes span.target{border-color:var(--orange);background:#fff3e8;color:var(--orange);animation:pulse 1.2s ease-in-out infinite}
.song-prog{text-align:right;font-size:.9rem;color:var(--sub);margin:4px 0 0}
.song-note{font-size:.85rem;color:var(--sub);text-align:center;margin:4px 0 0}
.song-notes span.ok{border-color:var(--ok);background:#e6f4ec;color:var(--ok)}
.song-notes span.ng{border-color:#c0392b;background:#fbe9e7;color:#c0392b}
.song-notes span.miss{border-style:dashed;color:#9aa6b6;background:#f0f2f5}
.ghost:disabled{opacity:.4;cursor:default}
#song-best{text-align:center;font-size:1rem;color:var(--navy);margin:0}
.song-level{margin:10px 0 0;padding:8px 12px;border-radius:10px;background:#eef3fb;color:var(--navy);font-size:.98rem;line-height:1.5}
.song-stars{color:var(--orange);font-weight:800;letter-spacing:.05em}
.song-unlock{display:block;text-align:center;font-size:.95rem;color:var(--sub);margin:6px 0}
.sc-log{text-align:center;margin:0}
.sc-log button{border:0;background:none;color:var(--sub);text-decoration:underline;font-size:.9rem;padding:4px}
.tro-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.tro{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 12px;font-size:.88rem;line-height:1.6;white-space:nowrap;color:var(--sub);font-weight:700}
.tro.now{border-color:var(--navy);color:var(--navy)}
.tro small{margin-left:4px;color:var(--orange);font-size:.85em}
.bar-r{display:flex;align-items:center;gap:8px}
.help-btn{border:0;background:rgba(255,255,255,.15);color:#fff;border-radius:999px;padding:6px 12px;font-weight:700}
.guide{position:fixed;inset:0;background:rgba(10,20,40,.55);display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow-y:auto;z-index:20}
.guide-box{background:var(--card);border-radius:14px;max-width:640px;width:100%;padding:18px 20px 20px;margin:auto 0;line-height:1.7}
.guide-box h2{margin:0 0 6px;color:var(--navy);font-size:1.3rem}
.guide-box h3{margin:16px 0 4px;color:var(--navy);font-size:1.05rem}
.guide-box p,.guide-box li{margin:4px 0;font-size:1rem}
.guide-box ul{padding-left:1.3em;margin:4px 0}
.guide-note{color:var(--sub);font-size:.9rem !important;margin-top:14px !important}
.guide-close{display:block;width:100%;margin-top:14px;font-size:1.05rem}
.guide-box:focus{outline:none}
.trial-note{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#fff3e8;color:var(--ink);font-size:.95rem;line-height:1.6}
.trial-note a{color:var(--navy);font-weight:700}
.trial-mini{margin:-4px 0 12px;font-size:.9rem;color:var(--sub);background:#fff3e8;border-radius:8px;padding:6px 10px}