:root {
  font-family: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  color: #182a43;
  background: #f4f6fa;
  font-synthesis: none;
  --paper: #fff;
  --ink: #182a43;
  --muted: #506078;
  --line: #cbd5e2;
  --blue: #245bd5;
  --mint: #e0f3ed;
  --amber: #fff0cb;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 16px; }
button, input, select { font: inherit; }
button { min-height: 44px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 10px; background: #eaf0f8; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.35; cursor: pointer; }
button:hover:not(:disabled) { background: #dce7fa; border-color: #7c9ad0; }
button:active:not(:disabled) { transform: translateY(1px); }
button.primary, .primary { background: var(--blue); border-color: var(--blue); color: white; }
button.primary:hover:not(:disabled) { background: #194ab5; border-color: #194ab5; }
button.outlined { background: white; border-color: #8398b7; }
button.quiet { background: transparent; }
button.active, button[aria-pressed=true] { color: white; background: var(--blue); border-color: var(--blue); }
button.active:hover:not(:disabled), button[aria-pressed=true]:hover:not(:disabled) { background: #194ab5; }
button:disabled { background: #eef1f5; color: #697586; border-color: #d2dae4; cursor: not-allowed; box-shadow: none; }
:where(button, input, select, a, summary, [tabindex]):focus-visible { outline: 3px solid #386ce8; outline-offset: 3px; }
input[type=range] { accent-color: var(--blue); min-height: 44px; max-width: 100%; }
input[type=checkbox] { accent-color: var(--blue); width: 20px; height: 20px; flex-shrink: 0; }
select { min-height: 44px; border: 1px solid #9daec5; border-radius: 9px; padding: 8px 10px; background: white; color: var(--ink); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.3; letter-spacing: -.035em; }
p { line-height: 1.6; }
small { font-size: 14px; color: var(--muted); }
svg { display: block; }
header { max-width: 1240px; min-height: 76px; margin: auto; padding: 12px 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 800; letter-spacing: -.04em; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; background: var(--blue); color: white; border-radius: 12px; font-size: 28px; }
.brand small { display: block; margin-top: 2px; letter-spacing: 0; font-weight: 500; }
.head-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.local-tag { font-size: 14px; color: var(--muted); }
.home, .workspace, .concert { max-width: 1200px; margin: auto; padding: 28px 28px 36px; }
.eyebrow { display: block; color: #315bb0; font-size: 14px; font-weight: 800; letter-spacing: .04em; margin-bottom: 10px; }
.intro { padding: 14px 0 22px; }
.intro h1 { font-size: clamp(30px, 3.7vw, 46px); margin-bottom: 12px; }
.intro h1 em { color: var(--blue); font-style: normal; }
.intro p { font-size: 18px; color: var(--muted); margin-bottom: 16px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero-actions button { font-size: 16px; padding: 12px 20px; }
.section-label { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.section-label h2 { font-size: 22px; margin: 0; }
.section-label > span { color: var(--muted); font-size: 14px; }
.mood-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mood { display: flex; flex-direction: column; padding: 22px; border: 2px solid #d5dfeb; border-radius: 16px; background: white; }
.mood.chosen { border-color: #386ce8; background: #f0f5ff; }
.mood-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.mood-number, .mood-icon { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 12px; background: #e7efff; color: #2452a9; font-size: 20px; font-weight: 800; }
.mood:nth-child(2) .mood-number { background: var(--mint); color: #22634e; }
.mood:nth-child(3) .mood-number { background: var(--amber); color: #85551a; }
.pill { padding: 5px 10px; border-radius: 20px; background: #e1eaff; font-size: 14px; color: #244f9b; }
.mood h3 { margin-bottom: 8px; font-size: 22px; }
.mood p { color: var(--muted); font-size: 16px; margin-bottom: 12px; }
.chord-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 20px; }
.chord-strip span { min-width: 34px; padding: 5px 8px; border: 1px solid #bdcce0; border-radius: 7px; background: white; text-align: center; font-size: 16px; font-weight: 700; }
.mood-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.mood-actions button { flex: 1 1 100px; padding: 10px 8px; }
.mood.chosen .select-mood { background: var(--blue); border-color: var(--blue); color: white; }
.home-tip { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 18px 20px; margin-top: 22px; border: 1px solid #c7dace; border-radius: 12px; background: #e9f5ef; font-size: 16px; line-height: 1.6; }
.home-tip p { margin: 0; }
.home footer { margin-top: 22px; font-size: 14px; line-height: 1.6; color: var(--muted); text-align: center; }
.workspace { padding-top: 18px; }
.work-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.work-heading > div:first-child { min-width: 0; flex: 1; }
.work-heading .eyebrow { margin-bottom: 4px; }
.song-title { width: min(440px, 100%); min-width: 0; min-height: 44px; border: 0; border-bottom: 1px solid #a3b4cb; padding: 5px 0; background: transparent; color: var(--ink); font-size: 26px; font-weight: 800; }
.work-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.palette { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.duration-group { display: flex; flex-wrap: wrap; gap: 6px; }
.duration-group button { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 78px; padding: 8px 12px; }
.duration-group b { font-family: 'Segoe UI Symbol', 'Apple Symbols', serif; font-size: 24px; font-weight: normal; line-height: 1; }
.duration-group span { font-size: 14px; }
.tool-toggle, .toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; cursor: pointer; }
.instruction { margin: 12px 0; font-size: 18px; line-height: 1.5; color: #28456e; }
.instruction strong { color: #163b83; }
.score-book { border: 1px solid #b7c6d9; border-radius: 14px; background: white; overflow: hidden; }
.system + .system { border-top: 1px solid #cbd5e2; }
.system-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 16px 0; font-size: 16px; font-weight: 700; }
.system-heading > span { color: #3b526f; }
.system-heading button { padding: 8px 12px; }
.staff-scroll { overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: thin; scrollbar-color: #8fa6c7 #edf2f9; }
.sheet { width: 100%; min-width: 920px; height: auto; color: var(--ink); user-select: none; -webkit-user-select: none; }
.sheet .note { touch-action: none; cursor: grab; }
.sheet .note:active { cursor: grabbing; }
.staff-line { stroke: #8190a1; stroke-width: 1.1; }
.bar-line { stroke: #64748b; stroke-width: 1.6; }
.bar-bg { fill: transparent; }
.bar-bg.active, .active .bar-bg { fill: #edf4ff; }
.bar-label { fill: #344b68; font-size: 16px; font-weight: 700; }
.chord-label { fill: #214d9b; font-size: 24px; font-weight: 800; }
.guide-label { fill: #435f83; font-size: 14px; }
.chord-guide { fill: #386ce8; fill-opacity: .09; pointer-events: none; }
.guide-dot { fill: #386ce8; pointer-events: none; }
.guide-pitch { fill: #315d9f; font-size: 14px; pointer-events: none; }
.clef { font-family: 'Segoe UI Symbol', 'Apple Symbols', serif; font-size: 80px; fill: #182a43; }
.meter { font-family: Georgia, serif; font-size: 27px; font-weight: bold; fill: #182a43; }
.beat-number { fill: #506078; font-size: 14px; text-anchor: middle; }
.note-hit, .note-hit rect { fill: transparent; }
.note.selected { color: #245bd5; }
.note.selected .note-hit { fill: #386ce8; fill-opacity: .13; stroke: #386ce8; stroke-width: 1.5; }
.note.selected ellipse { stroke: #245bd5; stroke-width: 2; }
.note.sounding { color: #9d5b0b; }
.note.sounding .note-hit { fill: #ffd57d; fill-opacity: .4; }
.note:focus-visible { outline: none; }
.note:focus-visible .note-hit { stroke: #245bd5; stroke-width: 3; stroke-dasharray: 4 3; }
.note-head, .note-fill { fill: currentColor; pointer-events: none; }
.note-head.hollow { fill: white; stroke: currentColor; stroke-width: 2.5; }
.stem, .ledger { stroke: currentColor; stroke-width: 2; pointer-events: none; }
.flag { fill: currentColor; pointer-events: none; }
.rest-symbol { font-family: 'Segoe UI Symbol', 'Apple Symbols', serif; font-size: 37px; fill: currentColor; pointer-events: none; }
.note-name, .note-label { font-size: 14px; fill: currentColor; text-anchor: middle; pointer-events: none; }
.empty-staff { fill: #506078; font-size: 16px; text-anchor: middle; }
.keyboard-panel { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.current-chord { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; font-size: 16px; line-height: 1.5; }
.current-chord strong, .current-chord b { font-size: 18px; color: #214d9b; }
.pitch-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.pitch-keys button { flex: 1 0 52px; min-width: 52px; min-height: 62px; padding: 6px 4px; background: #fff; box-shadow: 0 3px 0 #d5deeb; }
.pitch-keys b, .pitch-keys button > span { display: block; font-size: 18px; line-height: 1.4; }
.pitch-keys small { display: block; font-size: 14px; line-height: 1.4; }
.pitch-keys button.recommended { background: #e7efff; border-color: #7b9fe8; }
.pitch-keys button.active { background: var(--blue); color: white; border-color: var(--blue); box-shadow: 0 3px 0 #163c91; }
.pitch-keys button.active small { color: white; }
.pitch-keys button:disabled { background: #eef1f5; color: #697586; box-shadow: none; }
.pitch-keys button:disabled small { color: #697586; }
.note-select { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 3px; }
.note-select:empty { display: none; }
.note-select button { flex-shrink: 0; font-size: 14px; padding: 8px 10px; }
.transport { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding: 14px 0; }
.play-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.play-buttons button { font-size: 16px; }
.transport label { display: flex; align-items: center; gap: 7px; min-height: 44px; font-size: 14px; }
.transport input[type=range] { width: 110px; }
.transport output { min-width: 30px; font-variant-numeric: tabular-nums; }
.compare { padding: 12px 16px; background: #edf1f7; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; }
.compare summary { cursor: pointer; min-height: 44px; padding: 10px 0; font-size: 16px; font-weight: 700; }
.compare > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.compare p { margin: 0; }
.compare button { margin: 4px 4px 4px 0; }
.autosave { font-size: 14px; color: var(--muted); }
.swipe-hint { font-size: 14px; color: var(--muted); }
.concert-hero { text-align: center; padding: 10px 0 20px; }
.concert-hero h1 { font-size: clamp(28px, 4vw, 40px); overflow-wrap: anywhere; margin: 12px 0; }
.concert-hero p { color: var(--muted); font-size: 18px; }
.concert-icon { font-size: 44px; color: var(--blue); }
.badge-row, .concert-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.badge-row span { padding: 7px 14px; background: var(--mint); color: #245e49; border: 1px solid #a9cdbb; border-radius: 24px; font-size: 14px; }
.full-score { display: grid; grid-template-columns: 1fr; gap: 16px; }
.full-score .system { border: 1px solid var(--line); border-radius: 12px; background: white; overflow: hidden; }
.concert-caption { text-align: center; margin: 20px 0; color: var(--muted); font-size: 16px; }
#toast { position: fixed; z-index: 50; bottom: 24px; left: 50%; max-width: calc(100vw - 32px); width: max-content; padding: 14px 20px; border-radius: 12px; background: #182a43; color: white; box-shadow: 0 6px 24px #182a4329; font-size: 16px; line-height: 1.5; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .15s, transform .15s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; padding: 20px; display: grid; place-items: center; background: #182a4377; }
.dialog { width: min(480px, 100%); padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 18px 70px #182a4333; }
.dialog h2 { font-size: 24px; }
.dialog p { font-size: 16px; }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
@media (min-width: 800px) and (max-height: 820px) {
  header { min-height: 66px; padding-top: 8px; padding-bottom: 8px; }
  .workspace { padding-top: 12px; }
  .work-heading { margin-bottom: 10px; }
  .palette { padding: 8px 12px; }
  .instruction { margin: 8px 0; }
  .system-heading { padding-top: 4px; }
  .system-heading button { padding-top: 6px; padding-bottom: 6px; }
  .keyboard-panel { margin-top: 10px; }
}
@media (max-width: 799px) {
  header { padding: 12px 18px; }
  .home, .workspace, .concert { padding: 20px 18px 30px; }
  .local-tag { display: none; }
  .mood-grid { grid-template-columns: 1fr; }
  .mood { padding: 20px; }
  .mood-top { margin-bottom: 10px; }
  .work-heading { flex-wrap: wrap; }
  .work-actions { margin-left: auto; }
  .palette { gap: 8px; }
  .sheet { min-width: 920px; }
  .instruction { font-size: 18px; }
  .pitch-keys button { flex-basis: 58px; }
  .home-tip { flex-direction: column; }
}
@media (max-width: 540px) {
  header { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
  .brand { font-size: 18px; gap: 9px; }
  .brand-mark { width: 40px; height: 40px; }
  .head-actions { gap: 6px; }
  .head-actions button { padding: 8px 10px; }
  .home, .workspace, .concert { padding: 18px 14px 28px; }
  .intro { padding-top: 6px; }
  .intro h1 { font-size: 30px; }
  .intro p { font-size: 16px; }
  .hero-actions button { flex: 1 1 160px; }
  .work-heading > div:first-child { flex-basis: 100%; }
  .song-title { width: 100%; font-size: 24px; }
  .work-actions { width: 100%; }
  .work-actions button { flex: 1; }
  .palette { padding: 10px; }
  .duration-group { width: 100%; }
  .duration-group button { flex: 1; }
  .palette > button { flex: 1 1 auto; }
  .system-heading { padding-right: 10px; padding-left: 10px; }
  .keyboard-panel { padding: 12px 10px; }
  .pitch-keys button { flex-basis: 52px; }
  .play-buttons { width: 100%; }
  .play-buttons button { flex: 1; }
  .transport { gap: 8px 14px; }
  .transport label { flex-wrap: wrap; }
  .concert-buttons button { flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  @page { size: A4; margin: 14mm; }
  body { background: white; color: #182a43; }
  header, .home, .workspace, .concert-buttons, .transport, #toast, .autosave, .modal-backdrop, .swipe-hint { display: none !important; }
  .concert { display: block !important; max-width: none; padding: 0; }
  .concert-hero { padding: 0 0 12px; }
  .concert-icon { display: none; }
  .concert-hero h1 { font-size: 26px; }
  .concert-hero p { font-size: 14px; }
  .full-score { display: block; }
  .full-score .system { break-inside: avoid; margin-bottom: 16px; border: 1px solid #8190a1; border-radius: 0; }
  .staff-scroll { overflow: visible; }
  .sheet { min-width: 0; width: 100%; height: auto; }
  .system-heading { padding: 8px 12px 0; }
  .bar-bg.active, .active .bar-bg { fill: transparent; }
  .note.selected, .note.sounding { color: #182a43; }
  .note.selected .note-hit, .note.sounding .note-hit { fill: transparent; stroke: none; }
  .concert-caption { font-size: 14px; }
  button { display: none !important; }
}

/* Keep tablet guides consistent with the pitch keys and retain mobile rhythm choices. */
.bar-bg.playing { fill: #fff0cb; }
.note-hit { touch-action: none; }
.scroll-hint { display: none; color: #435f83; font-size: 14px; margin: 8px 0; }
@media(max-width:960px){.scroll-hint{display:block;}}
@media(max-width:600px){.duration-group {display:grid;grid-template-columns:repeat(4,1fr);}.duration-group button {min-width:0;padding:8px 4px;gap:4px;}.duration-group b {font-size:22px;}}

.chord-strip {display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}.chord-strip span {display:flex;flex-direction:column;align-items:center;gap:3px;font-size:18px;font-weight:800;}.chord-strip small {font-size:14px;font-weight:500;color:var(--muted);}.intro {background:radial-gradient(ellipse at 92% 20%,#dfeaff 0,transparent 48%);border-radius:22px;}


.sheet,.staff-scroll {touch-action:pan-x pan-y;}


/* Illustrations belong to the world around the score, never underneath the notes. */
:root { background:#f5f2eb; --paper:#fffefa; --ink:#26354b; --muted:#536078; --line:#ced1df; --blue:#4965ad; }
body { background:radial-gradient(ellipse at 8% 5%,#deefe2 0,transparent 42%),radial-gradient(ellipse at 95% 34%,#ece3f5 0,transparent 46%),#f5f2eb; }
header { background:#fffcf3ef; border:1px solid #e1dddb; border-top:0; border-radius:0 0 22px 22px; }
.brand { color:#344762; }
.brand-mark { color:#fff1c7; background:linear-gradient(145deg,#4a7d79,#354d70); border-radius:13px 13px 18px 18px; }
.brand small { color:#5d687a; }
button { border-radius:11px; }
button.primary,.primary { background:#4965ad; border-color:#4965ad; box-shadow:inset 0 1px 0 #ffffff23,0 3px 0 #344b85; }
button.primary:hover:not(:disabled) { background:#3e5799; border-color:#3e5799; }
button:disabled { box-shadow:none; }
.home { padding-top:22px; }
.home .intro { min-height:370px; display:flex; align-items:center; padding:26px; margin-bottom:24px; border:1px solid #d0dbc9; border-radius:24px; background:#dcebdc url('./assets/art/hero.webp') center / cover no-repeat; box-shadow:0 10px 28px #44634813; }
.home .intro { position:relative; overflow:hidden; }
.entrance-film { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.entrance-control { position:absolute; right:12px; top:12px; z-index:2; min-height:44px; padding:8px 12px; color:#24483c; background:#fffdf3f5; border-color:#c1d5c8; font-size:13px; }
.intro-copy { position:relative; z-index:1; width:min(430px,56%); padding:24px; border:1px solid #ffffffb8; border-radius:20px; background:#fffdf3ef; box-shadow:0 6px 24px #37543b12; }
.home .intro .eyebrow { color:#426c58; letter-spacing:.04em; }
.home .intro h1 { color:#304c4b; font-size:clamp(30px,3.5vw,44px); line-height:1.25; letter-spacing:-.04em; }
.home .intro .realm-title span { display:block; margin-top:8px; font-size:.6em; font-weight:600; letter-spacing:.02em; color:#597167; }
.home .intro p { color:#435b57; font-size:16px; }
.home .intro .hero-actions { margin-top:18px; }
.home .intro .primary { background:#426d58; border-color:#426d58; color:white; box-shadow:0 3px 0 #2a4c3b; }
.home .intro .primary:hover:not(:disabled) { background:#345b48; border-color:#345b48; }
.mood-grid { gap:18px; }
.mood { position:relative; background:#fffefa; border-color:#dcd9d2; border-radius:20px; padding:20px; box-shadow:0 5px 18px #38496208; }
.mood-art { display:block; width:calc(100% + 40px); max-width:none; height:auto; aspect-ratio:3/2; margin:-20px -20px 16px; border-radius:19px 19px 0 0; }
.mood.chosen { background:#f4faf3; border-color:#547e70; box-shadow:0 0 0 2px #547e7035,0 6px 18px #344f6810; }
.mood-number { align-self:flex-start; min-height:30px; height:auto; padding:5px 9px; margin-bottom:10px; font-size:13px; background:#eaf0e6; color:#435e4e; border:1px solid #cddac7; border-radius:9px; }
.mood h2 { margin-bottom:8px; font-size:23px; color:#2d4056; }
.mood p { font-size:15px; line-height:1.6; }
.chord-strip { margin-bottom:14px; }
.chord-strip span { background:#fffefa; border-color:#d9d7cd; }
.chord-strip small { color:#606978; }
.mood-actions .outlined { background:#fffdf6; border-color:#9daebd; }
.home-tip { background:#e8f0e8; border-color:#c4d7cc; color:#35574e; border-radius:14px; }
.home footer { color:#556179; }
.home footer a { color:#435c94; text-underline-offset:3px; }
.theme-banner { display:flex; align-items:center; gap:16px; min-height:82px; margin:0 0 12px; padding:8px 14px 8px 8px; border:1px solid #d5dfce; border-radius:16px; background:#f0f5e9; }
.theme-banner img { width:108px; height:auto; flex-shrink:0; border-radius:10px; }
.theme-banner > div { display:grid; gap:3px; }
.theme-banner .eyebrow { margin:0; font-size:12px; color:#4f6d5b; }
.theme-banner strong { font-size:18px; color:#304e43; }
.theme-banner div > span:last-child { font-size:14px; line-height:1.4; color:#536078; }
[data-theme=pop] .theme-banner { background:#fff0e8; border-color:#e7d1c4; }
[data-theme=warm] .theme-banner { background:#fff4dd; border-color:#e7d7b1; }
[data-theme=dream] .theme-banner { background:#eeebfa; border-color:#d8d1eb; }
[data-theme=journey] .theme-banner { background:#eaf5fc; border-color:#c4ddeb; }
[data-theme=moon] .theme-banner { background:#f2eafa; border-color:#decee9; }
.workspace .palette,.keyboard-panel { background:#fffdf7; border-color:#cdd2dd; }
.workspace .instruction { color:#38546b; }
.score-book { background:white; border-color:#b8c5d5; box-shadow:0 5px 22px #3547620c; }
.system-heading { background:#fbfcff; }
.sheet { background:white; }
.compare { background:#e4e9ef; }
.concert-hero { padding-top:6px; }
.concert-art { display:block; width:180px; height:auto; border-radius:18px; margin:0 auto 14px; }
.concert-hero h1 { color:#344c68; }
.badge-row span { background:#e0eee4; }
.duration-group .duration-icon { display:block; width:28px; height:36px; flex-shrink:0; fill:currentColor; }
.duration-group button.active svg { color:white; }
/* Keep note lengths reachable while children work on the lower staff. */
.palette { position:sticky; top:8px; z-index:20; box-shadow:0 4px 18px #3a436a12; }
.duration-group button:disabled { opacity:.55; }
@media(max-width:799px) {
 .home .intro { padding:20px; min-height:350px; }
 .intro-copy { width:min(430px,70%); padding:20px; }
 .mood-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .mood { padding:18px; }
 .mood-art { width:calc(100% + 36px); margin:-18px -18px 14px; }
}
@media(max-width:540px) {
 header { border-radius:0 0 16px 16px; }
 .brand { min-width:0; font-size:17px; }
 .brand > span:last-child { min-width:0; overflow-wrap:anywhere; }
 .brand small { font-size:14px; }
 .home .intro { min-height:470px; padding:170px 12px 12px; align-items:flex-end; border-radius:20px; background-position:center top; background-size:auto 100%; }
 .intro-copy { width:100%; padding:20px; }
 .home .intro h1 { font-size:30px; }
 .mood-grid { grid-template-columns:1fr; }
 .mood-actions button { min-width:0; }
 .theme-banner { gap:10px; padding:7px; }
 .theme-banner img { width:90px; }
 .theme-banner .eyebrow { display:none; }
 .theme-banner strong { font-size:16px; }
 .theme-banner div > span:last-child { font-size:13px; }
}
@media print {
 :root,body { background:white; }
 .sheet { background:white; }
 .score-book,.full-score .system { box-shadow:none; }
 .system-heading { background:white; }
 .palette,.concert-art,.theme-banner { display:none; }
}

.save-help{display:flex;flex-wrap:wrap;gap:5px 18px;margin:0 0 14px;padding:10px 14px;border-radius:12px;background:#eef4eb;color:#405447;font-size:13px;line-height:1.6}.save-status{font-weight:700}.save-help span:last-child{color:#4f5d6d}.intro{scroll-margin-top:12px}@media print{.save-help{display:none}}