@font-face {
  font-family: 'Patrick Hand SC';
  src: url('../fonts/PatrickHandSC.woff2') format('woff2');
  font-display: swap;
}
:root { --bg: #cfe0f8; --panel: #fff; --ink: #1d1d1f; --muted: #6b6a66; --line: #b5cbec; --accent: #1565c0; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font: 16px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink); background: var(--bg);
  display: grid; place-items: start center; min-height: 100vh; padding: clamp(32px, 11vh, 120px) 16px 40px;
}
.home { width: 100%; max-width: 560px; text-align: center; }
h1 {
  font: 56px/1.1 'Patrick Hand SC', 'Comic Sans MS', cursive;
  -webkit-text-stroke: 1.4px currentColor; margin: 0 0 8px; color: var(--ink);
}
.lead { color: #3f4f6b; margin: 0 0 32px; }
/* A square frame around all the buttons in the seven note colors (the same colors as the Note colors option),
   each color an equal length, running clockwise from the top-left corner: red, orange, yellow, green, blue, purple, pink.
   Drawn as seven dashed copies of one rectangle so the lengths stay equal at any frame size. */
.button-frame { position: relative; margin: 0 -28px; padding: 32px 34px 34px; }
.frame-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.frame-art .fr {
  x: 3px; y: 3px; width: calc(100% - 6px); height: calc(100% - 6px);
  fill: none; stroke-width: 6; stroke-dasharray: 1 6; stroke-linecap: square;   /* square ends fill the corners */
}
.button-frame .help-link { margin-top: 22px; }
@media (max-width: 620px) { .button-frame { margin: 0; padding: 22px 18px 24px; } }
.choices { display: flex; flex-direction: column; gap: 14px; }
.choice {
  display: block; padding: 18px 20px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  font: 30px/1.1 'Patrick Hand SC', 'Comic Sans MS', cursive;
  box-shadow: 0 2px 8px rgba(40,50,120,.12);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.choice-note { display: block; margin-top: 6px; font: 15px/1.35 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--muted); }
.choice:hover, .choice:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(21,101,192,.3), 0 8px 20px rgba(40,50,120,.18); transform: translateY(-1px); outline: none; }
.help-link {
  display: inline-block; margin-top: 28px; padding: 9px 18px; border-radius: 9px;
  background: transparent; border: 1px solid #94afd8; color: var(--ink); text-decoration: none;
  transition: border-color .12s, color .12s;
}
.help-link + .help-link { margin-left: 10px; }
.help-link:hover, .help-link:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
@media (max-width: 480px) { h1 { font-size: 40px; } .choice { font-size: 26px; } }

/* ---------- Small blue treble clefs on either side of the title ---------- */
@font-face { font-family: 'Bravura'; src: url('../fonts/Bravura.woff2') format('woff2'); font-display: block; }
h1 { display: flex; justify-content: center; align-items: center; gap: 18px; margin-left: -90px; margin-right: -90px; }
.title-clef {
  font: 40px/1 'Bravura'; -webkit-text-stroke: 0; color: #1565c0;
  position: relative; top: .3em; user-select: none;
}
/* Narrow screens: no room for the clefs beside the title. */
@media (max-width: 760px) { h1 { margin-left: 0; margin-right: 0; } .title-clef { display: none; } }

/* ---------- Examples page ---------- */
/* Back to home page button in the top-left corner (Examples), styled like the one on the other pages. */
.back-home {
  position: absolute; top: 12px; left: 16px; text-decoration: none; color: var(--ink);
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff;
}
.back-home:hover, .back-home:focus-visible { border-color: #8fb0e0; outline: none; }
.example-empty { margin: 8px 0; color: #3f4f6b; }
.pdf-tag { font-size: 13px; color: var(--accent); }