:root { --note-ink: #27372e; --note-blue: #1554ad; --note-red: #bd3e34; }
body { min-height: 100svh; }
html:has(dialog[open]) { overflow:hidden; }
.preview-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px max(24px,calc((100vw - 880px)/2)); border-bottom:1px solid var(--line); padding-top:calc(18px + env(safe-area-inset-top,0px)); }
.brand-link { display:flex; align-items:center; gap:12px; }
.brand-link > span { font-weight:700; line-height:1.4; }
.brand-link small { display:block; font-size:12px; letter-spacing:.12em; margin-top:2px; }
.preview-status { color:var(--green); font-size:12px; background:var(--light); padding:6px 10px; border-radius:5px; }
main { max-width:760px; margin:0 auto; padding:48px 24px calc(40px + env(safe-area-inset-bottom,0px)); }
h1 { max-width:580px; font-size:32px; letter-spacing:-.03em; }
.intro { margin-top:14px; color:var(--muted); font-size:15px; line-height:1.75; max-width:640px; }
.phrase { margin-top:30px; background:var(--white); border:1px solid var(--line); border-radius:12px; padding:25px; }
.phrase h2, .examples h2 { font-size:20px; letter-spacing:-.025em; }
.phrase > p { color:var(--muted); margin-top:7px; }
.phrase-scroll { margin-top:20px; overflow-x:auto; scrollbar-color:#b2bdb1 transparent; }
.melodic-phrase { display:grid; grid-template-columns:repeat(10,minmax(40px,1fr)); min-width:400px; padding:2px 0 9px; }
.phrase-column { display:flex; flex-direction:column; align-items:center; }
.phrase-chord { display:flex; align-items:center; height:28px; font-size:16px; font-weight:700; color:#4a6b4c; }
.melody-note { color:var(--tone); font:700 20px Arial,sans-serif; min-height:44px; min-width:40px; padding:8px 4px; border-radius:6px; text-underline-offset:5px; text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--tone) 32%,transparent); }
.melody-note:hover { background:color-mix(in srgb,var(--tone) 8%,white); }
.phrase .phrase-help { margin-top:18px; font-size:14px; line-height:1.7; }
.examples { margin-top:34px; }
.example-buttons { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.example-note { display:flex; align-items:center; gap:10px; min-height:48px; border:1px solid var(--line); background:white; border-radius:8px; padding:9px 14px; color:var(--tone); }
.example-note strong { font:700 20px Arial,sans-serif; }
.example-note span { font-size:14px; }
.examples > p { font-size:14px; color:var(--muted); line-height:1.75; margin-top:14px; }
.reference { margin-top:34px; border-top:1px solid var(--line); padding-top:20px; }
.reference summary { padding:9px 0; cursor:pointer; font-size:14px; color:var(--green); font-weight:600; }
.reference img { width:100%; max-width:592px; height:auto; margin-top:20px; display:block; }
.back-link { display:inline-flex; align-items:center; min-height:44px; margin-top:22px; font-size:14px; color:var(--green); text-decoration:underline; text-underline-offset:4px; }
dialog { border:0; padding:0; width:min(680px,calc(100vw - 28px)); max-height:calc(100dvh - 36px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); border-radius:15px; background:var(--paper); color:var(--ink); box-shadow:0 24px 70px #11251c40; overflow:auto; }
dialog::backdrop { background:#12231f99; }
.note-dialog-body { padding:30px; position:relative; }
.close-dialog { position:absolute; top:13px; right:13px; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; }
.close-dialog:hover { background:var(--light); }
#note-title { font-size:28px; margin-right:36px; letter-spacing:-.03em; }
#note-region { display:flex; align-items:center; gap:8px; color:var(--selected-color); font-size:14px; font-weight:700; margin-top:9px; }
#note-region::before { content:""; width:9px; height:9px; background:var(--selected-color); border-radius:50%; }
#note-explanation { color:var(--muted); font-size:14px; line-height:1.6; margin-top:16px; }
.keyboard-scroll { overflow-x:auto; margin-top:19px; border-radius:8px; scrollbar-color:#b2bdb1 transparent; scroll-behavior:auto; }
.note-keyboard { position:relative; height:266px; isolation:isolate; }
.keyboard-regions { position:absolute; top:0; left:0; right:0; height:36px; display:flex; gap:0; }
.keyboard-region { display:flex; align-items:center; justify-content:center; color:var(--region-color); flex:1; font-size:12px; font-weight:700; border-bottom:2px solid var(--region-color); }
.note-white { position:absolute; top:42px; width:28px; height:166px; background:#fff; border:1px solid #7e867d; border-radius:0 0 3px 3px; z-index:1; }
.note-white .note-dot { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); width:8px; height:8px; border-radius:50%; background:var(--region-color); }
.note-key-label { position:absolute; top:168px; left:0; width:100%; text-align:center; color:var(--region-color); font:600 12px Arial,sans-serif; }
.note-black { position:absolute; top:42px; width:17px; height:104px; background:#20261f; border:1px solid #141b16; border-radius:0 0 3px 3px; z-index:2; }
.note-white.is-selected { background:var(--selected-color); border-color:var(--selected-color); }
.note-white.is-selected .note-dot { background:white; width:10px; height:10px; }
.note-black.is-selected { background:var(--selected-color); border:2px solid white; outline:2px solid var(--selected-color); outline-offset:-1px; }
.selected-label { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); color:white; font:700 12px Arial,sans-serif; }
.note-black .selected-label { bottom:10px; }
.central-anchor { position:absolute; top:241px; color:var(--ink); transform:translateX(-50%); font-size:12px; white-space:nowrap; }
.central-anchor svg { position:absolute; left:calc(50% - 4px); top:-16px; width:8px; height:14px; }
.keyboard-hint { font-size:12px; color:var(--muted); margin-top:8px; }
.region-legend { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin:18px 0 22px; font-size:12px; font-weight:600; }
.region-legend span::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:currentColor; margin-right:6px; }
.below { color:var(--note-red); } .central { color:var(--note-ink); } .above { color:var(--note-blue); }
.transpose-control { display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid var(--line); padding-top:20px; }
.transpose-control strong { display:block; font-size:12px; }
#offset-status { display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.transpose-buttons { display:flex; border:1px solid var(--line); background:white; border-radius:7px; overflow:hidden; }
.transpose-buttons button { min-height:44px; min-width:44px; padding:5px 10px; font-size:16px; }
.transpose-buttons button + button { border-left:1px solid var(--line); }
#transpose-reset { font-size:12px; }
.note-origin { font-size:12px; color:var(--muted); line-height:1.7; margin-top:14px; min-height:19px; }
.close-bottom { width:100%; margin-top:20px; }
button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline:3px solid var(--copper); outline-offset:3px; }
::selection { background:#d9e5d0; color:var(--ink); }
@media (max-width:520px) {
  .preview-header { padding-left:20px; padding-right:20px; }
  main { padding:30px 20px calc(30px + env(safe-area-inset-bottom,0px)); }
  h1 { font-size:28px; }
  .intro { font-size:14px; }
  .phrase { padding:20px 16px; }
  .example-buttons { gap:8px; }
  .example-note { padding:8px 11px; }
  .note-dialog-body { padding:25px 20px 22px; }
  #note-title { font-size:26px; }
}