/* 兩個頁面共用的樣式：設計權杖（顏色、字型）與基礎元素。
   這裡只放「每一頁都會用到」的東西；版面（琴鍵、混音台、鋼琴演奏…）留在各頁的
   <style>。載入順序是 theme.css 先、頁面的 <style> 後，所以頁面規則自然勝出。 */
:root {
  --bg: #f3f4f7; --panel: #ffffff; --text: #1b1d24; --muted: #62677a;
  --line: #d9dce5; --accent: #3558d6; --accent-text: #ffffff; --wave: #3558d6;
  --key-white: #ffffff; --key-white-text: #62677a; --key-black: #22252f; --key-black-text: #c6cad8;
  --font-display: "Silkscreen", ui-monospace, monospace;
  --font-body: system-ui, -apple-system, "Noto Sans TC", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121420; --panel: #1b1e2c; --text: #e8eaf2; --muted: #9ba1b7;
    --line: #313548; --accent: #7d9bff; --accent-text: #0e1020; --wave: #7d9bff;
    --key-white: #d9dce7; --key-white-text: #4a4f63; --key-black: #0b0c14; --key-black-text: #8a90a8;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121420; --panel: #1b1e2c; --text: #e8eaf2; --muted: #9ba1b7;
  --line: #313548; --accent: #7d9bff; --accent-text: #0e1020; --wave: #7d9bff;
  --key-white: #d9dce7; --key-white-text: #4a4f63; --key-black: #0b0c14; --key-black-text: #8a90a8;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 var(--font-body); }
main { max-width: 56rem; margin: 0 auto; padding: 16px; }
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; text-wrap: balance; }
h1 { font-size: 1.5rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
header { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
a { color: var(--accent); }
section { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
/* 可收合的區塊（markup 加 data-collapse，行為在 page/ui.js）：標題本身就是切換鈕。
   收合時只留標題，所以下緣的間距要自己收掉，不然會多出一段空白。 */
section[data-collapse] > h2 { margin: 0; }
section[data-collapse].collapsed { padding-bottom: 16px; }
section[data-collapse].collapsed > :not(h2) { display: none; }
h2 > .twist { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 0; background: none; border: 0; color: inherit; font: inherit;
  cursor: pointer; text-align: start; }
h2 > .twist:hover { color: var(--accent); }
h2 > .twist .caret { flex: 0 0 auto; width: .5em; height: .5em; margin-inline-end: .25em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease; }
section[data-collapse]:not(.collapsed) > h2 > .twist .caret { transform: rotate(45deg); }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
button, select, input[type=number] {
  font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: .4rem .75rem; min-height: 2.25rem;
}
button { cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
button.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
input[type=range] { accent-color: var(--accent); }
.muted { color: var(--muted); font-size: 13px; }
label.inline { display: inline-flex; gap: 6px; align-items: center; }

/* 頁首的區塊導覽：長頁面在手機上要靠它跳段 */
.nav { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; }

/* 「⬇ 下載 App」：永遠顯示的安裝連結，跟導覽同一排但靠右。
 * 長得像連結（不是按鈕），因為它要跟「樂器／琴鍵」那些連結並排看起來一致；
 * 說明文字自己換行，不擠壓連結。 */
.install-bar { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; margin-left: auto; }
.install-link { border: 0; background: none; padding: 0; min-height: 0; font: inherit;
                color: var(--accent); text-decoration: none; cursor: pointer; }
.install-link:hover { text-decoration: underline; }
.install-link:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.install-note { flex: 1 1 14rem; min-width: 0; }

/* 樂器入口：一整塊可點的大按鈕（比一排小按鈕好按，手機上也看得懂） */
.biglink { display: flex; flex-direction: column; gap: 2px; flex: 1 1 12rem; min-width: 10rem;
           padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
           background: var(--panel); color: var(--text); text-decoration: none; font-weight: 600;
           font-size: 15px; line-height: 1.35; }
.biglink span { font-weight: 400; font-size: 12px; color: var(--muted); }
.biglink:hover { border-color: var(--accent); color: var(--accent); }

/* 觸控螢幕：頁首的文字連結只有 22px 高，手指按不準；上下加點空間把可按範圍撐到約 44px */
@media (pointer: coarse) {
  .nav a, .install-link { padding-block: 11px; }
}