:root {
  /* 單色：黑紙白墨。顏色的差異交給著色器的印法（網點、細線網、抖色） */
  --ink: #08080A;
  --bone: #EDEDE6;
  --bone-hi: #F6F6F1;   /* 桁架上的選單字 */
  --paper: #FFFFFF;     /* 白底按鈕滑過去 */
  /* 線條、外框：由暗到亮 */
  --line-1: #222228;    /* 表格的分隔線 */
  --line: #26262B;
  --line-2: #2E2E34;    /* 區塊標題的底線 */
  --line-3: #34343A;    /* 選項、卡片的外框 */
  --line-4: #45454C;    /* 按鈕的外框 */
  --line-5: #5A5A62;    /* 連結底線 */
  --control: #6E6E76;   /* 輸入框、選項圈（對墨色背景 3:1 以上，看得出是可以填的欄位） */
  /* 底色 */
  --surface: #0D0D11;   /* 彈出的選擇器、對話框 */
  --surface-hi: #1A1A1E;
  /* 文字：由亮到暗（都在墨色背景上量過，對比 4.5 以上） */
  --text-hi: #E2E2E4;
  --text-1: #D2D2D5;    /* 導言 */
  --text-2: #C8C8CC;    /* 內文 */
  --text-3: #B8B8BE;
  --text-4: #ADADB3;    /* 說明文字 */
  --text-5: #A2A2A8;
  --text-6: #8A8A90;    /* 次要的小字 */
  --dim: #7E7E84;       /* 標籤、英文小字 */
  --err: #FF9B8A;       /* 錯誤、超過時間 */
  /* 半透明：白墨淡淡一層（滑過去、選到）、墨色的底（欄位、卡片、蓋住舞台） */
  --tint-1: rgba(237, 237, 230, 0.04);  /* 滑過去 */
  --tint-2: rgba(237, 237, 230, 0.06);  /* 選到、行事曆的行程 */
  --tint-3: rgba(237, 237, 230, 0.08);  /* 按下去 */
  --field: rgba(14, 14, 17, 0.9);       /* 輸入框、手機選單按鈕 */
  --card: rgba(12, 12, 15, 0.55);       /* 卡片 */
  --card-solid: rgba(12, 12, 15, 0.8);  /* 試算結果、行事曆清單 */
  --scrim: rgba(8, 8, 10, 0.97);        /* 手機整頁、返回列：把舞台整個蓋住 */
  --backdrop: rgba(4, 4, 7, 0.72);      /* 對話框後面那一層 */
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", monospace; /* 中文接黑體（Windows 的等寬字預設是細明體） */
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }

html, body { background: var(--ink); color: var(--bone); }
body {
  font-family: var(--sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  line-break: strict;
}

/* ── Hero ─────────────────────────────── */

.hero {
  position: relative;
  height: 100vh;  /* 舊瀏覽器（iOS 15.3 以前）看不懂 svh，先用 vh */
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  overflow: clip; /* 連程式（focus、scrollIntoView）都捲不動：畫面不會突然整個往上跳 */
  isolation: isolate;
}
.hero__stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.is-print .grain { display: none; } /* 印刷模式的紙張纖維由著色器畫 */
.grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: screen;
}

/* ── 桁架選單：每個連結疊在一個倒三角上 ── */

.truss-nav { position: absolute; inset: 0; pointer-events: none; }

.truss-nav a {
  position: absolute;
  height: var(--h);
  pointer-events: auto;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--h) * 0.07);
  padding-top: calc(var(--r) + var(--h) * 0.13);
  color: var(--bone);
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.truss-nav .lbl {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--bone-hi);
  line-height: 1;
  white-space: nowrap;
  opacity: var(--lbl, 0);
  transform: translateY(calc((1 - var(--lbl, 0)) * -7px));
  transition: color 0.12s linear;
}

.truss-nav .idx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--text-5);
  font-weight: 600;
  opacity: var(--idx, 0);
  transition: color 0.12s linear;
}

.truss-nav a.is-lit .lbl,
.truss-nav a.is-lit .idx { color: var(--ink); }

.truss-nav a:not(.is-ready) { pointer-events: none; }

/* ── 可點的器材區 ── */

.zone {
  position: absolute;
  color: var(--dim);
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.zone:not(.is-ready) { pointer-events: none; }

/* 用鍵盤選到舞台上的器材（燈光區、喇叭）：框起來 */
.zone:focus-visible { outline: 1px dashed var(--bone); outline-offset: 4px; }

/* ── HUD：控台的小字 ── */

.hud {
  position: absolute;
  top: 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.hud--l { left: 24px; }
.hud--r { right: 24px; }

.hud__beats { display: flex; gap: 4px; }
.hud__beats i {
  width: 6px; height: 6px;
  border: 1px solid var(--line-3);
}
.hud__beats i.on { background: var(--bone); border-color: var(--bone); }

.hud__replay {
  font: inherit;
  letter-spacing: inherit;
  color: var(--dim);
  background: none;
  border: 1px solid var(--line);
  padding: 5px 9px;
  cursor: pointer;
}
.hud__replay:hover { color: var(--bone); border-color: var(--line-3); }
.hud__replay:focus-visible { outline: 1px solid var(--bone); outline-offset: 2px; }

/* 用鍵盤（Tab）選到選單時，看得出來現在在哪一格 */
.truss-nav a:focus-visible .lbl { outline: 1px solid var(--bone); outline-offset: 5px; }

/* ── 手機 ── */

/* 手機、分享連結：一開始就不顯示聲音關卡（boot.js 在 <html> 加上 no-gate） */
.no-gate .gate { display: none; }
.is-narrow .hud { top: 14px; gap: 12px; font-size: 11px; }
.is-narrow .hud--l { left: 16px; }
.is-narrow .hud--r { right: 16px; }
.is-narrow .hud__bpm { display: none; }
/* 手機的 HUD 只留現在的 Cue 和聲音開關；打開某一頁時整條收起來（上面換成返回列） */
.is-narrow :is(.hud__tc, .hud__vol, .hud__replay) { display: none; }
.is-narrow:not([data-shot="wide"]) .hud { opacity: 0; pointer-events: none; visibility: hidden; }
.is-narrow .hud__sound { padding: 8px 12px; min-height: 44px; }

/* 舞台下面的選單：手機 2 × 3、平板 3 × 2、橫拿的手機一排 6 顆。
   手機、直拿的平板（桁架太窄，字會被三角形切掉）、橫拿的手機（桁架太矮）：選單改成舞台下面的大按鈕，桁架上不放字。
   用 CSS 判斷（不等程式）：網路慢的時候，選單按鈕一打開就看得到、點得到。
   什麼時候換成大按鈕只寫在下面這一個 @media：main.js 讀 --mnav 知道現在是哪一種，不用另外再寫一次 */
.mnav { display: none; }
@media (max-width: 719px), (orientation: portrait) and (max-width: 1100px), (pointer: coarse) and (max-height: 520px) {
  :root { --mnav: 1; }
  .truss-nav { display: none; }
  .mnav {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(8, 8, 10, 0), var(--ink) 14px);
  transition: opacity 0.4s ease, translate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
  }
}
/* 藏起來時用 visibility：鍵盤（Tab）也選不到 */
.hero[data-shot]:not([data-shot="wide"]) .mnav { opacity: 0; translate: 0 16px; pointer-events: none; visibility: hidden; transition: opacity 0.4s ease, translate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.5s; }
.mnav a {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 3px 10px; align-items: baseline;
  min-height: 64px; padding: 13px 14px 12px;
  border: 1px solid var(--line-3); background: var(--field);
  color: var(--bone); text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.mnav i { grid-row: span 2; font: normal 500 11px/1 var(--mono); letter-spacing: 0.1em; color: var(--dim); }
.mnav b { font-size: 18px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; }
.mnav span { font: 500 11px/1 var(--mono); letter-spacing: 0.16em; color: var(--dim); }
.mnav a:active { border-color: var(--bone); background: var(--tint-3); }
.mnav a:focus-visible { outline: 1px solid var(--bone); outline-offset: 2px; }
.mnav .mnav__hot { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.mnav .mnav__hot :is(i, span) { color: var(--line-4); }
.mnav .mnav__hot:active { background: var(--paper); }
/* 平板、橫拿的手機：要放在上面 .mnav a 那幾條的後面，才蓋得過去 */
@media (min-width: 720px) and (orientation: portrait) { .mnav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 24px calc(20px + env(safe-area-inset-bottom)); } }
@media (orientation: landscape) and (pointer: coarse) and (max-height: 520px) {
  .mnav { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 8px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .mnav a { grid-template-columns: 1fr; min-height: 52px; padding: 9px 10px 8px; gap: 4px; }
  .mnav i { display: none; }
  .mnav b { font-size: 16px; letter-spacing: 0.06em; }
}

/* 打開某一頁時最上面的返回列 */
.mbar { display: none; }
.is-mobile .mbar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 6;
  display: flex; align-items: center; gap: 14px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--scrim); border-bottom: 1px solid var(--line);
  opacity: 0; translate: 0 -100%; pointer-events: none; visibility: hidden;
  transition: opacity 0.3s ease, translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.4s;
}
@media (prefers-reduced-motion: reduce) { .mnav, .is-mobile .mbar { translate: none !important; } }
.is-mobile .mbar.is-on { opacity: 1; translate: 0 0; pointer-events: auto; visibility: visible; transition: opacity 0.3s ease, translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
.mbar__back {
  font: 500 15px/1 var(--sans); letter-spacing: 0.1em; color: var(--bone);
  background: none; border: 1px solid var(--line-4); padding: 11px 14px; min-height: 44px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.mbar__back:focus-visible { outline: 1px solid var(--bone); outline-offset: 2px; }
.mbar__title { font: 700 16px/1.2 var(--sans); letter-spacing: 0.1em; }

/* 橫拿的手機：畫面很矮，不要撐出外面那一層捲動 */
@media (max-height: 560px) { .hero { min-height: 0; } }

/* 程式沒辦法執行時的備援畫面 */
.nojs { position: absolute; inset: 0; z-index: 20; display: none; place-items: center; padding: 24px; background: var(--ink); }
.nojs:not([hidden]) { display: grid; }
.nojs__box { max-width: 560px; display: grid; gap: 18px; }
.nojs__code { font: 500 12px/1.4 var(--mono); letter-spacing: 0.18em; color: var(--dim); }
.nojs__title { font-size: 28px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.35; }
.nojs__text { font-size: 16px; line-height: 1.8; color: var(--text-2); }
.nojs__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* ── 鏡頭：世界容器跟著鏡頭縮放、平移 ── */

.world {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  pointer-events: none;
}
.world .zone.is-ready { pointer-events: auto; }


/* ── 世界裡的圖層：每一層依自己的深度縮放 ── */
.layer {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  pointer-events: none;
}

/* 跳到文字版：平常藏起來，用鍵盤（Tab）選到時出現在左上角 */
.skip { position: absolute; left: 16px; top: 12px; z-index: 30; padding: 12px 16px; background: var(--surface); color: var(--bone); border: 1px solid var(--bone); font-size: 15px; text-decoration: none; translate: 0 -200%; }
.skip:focus-visible { translate: 0 0; outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.hud__sound {
  font: inherit;
  letter-spacing: inherit;
  color: var(--bone);
  background: none;
  border: 1px solid var(--line-4);
  padding: 5px 9px;
  cursor: pointer;
}
.hud__sound[aria-pressed="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.hud__sound:focus-visible { outline: 1px solid var(--bone); outline-offset: 2px; }

.hud { z-index: 4; }
/* 用手指操作的平板、觸控筆電（還是桌機版面）：右上角的按鈕要夠大才點得到 */
@media (pointer: coarse) { .hud :is(.hud__sound, .hud__replay) { min-height: 44px; padding-inline: 12px; } .hud__vol input { height: 44px; } }
/* 控台視角：手指在控台上拖推桿時，不要變成捲動畫面（雙指縮放照樣可以） */
.hero:is([data-shot="light"], [data-shot="audio"]) .hero__stage { touch-action: pinch-zoom; }

/* ── 進站的聲音詢問：一支控台推桿 ── */

.gate {
  --lvl: 0;
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, var(--tint-2) 1px, transparent 1.6px) 0 0 / 8px 8px,
    radial-gradient(ellipse at 50% 50%, rgba(8, 8, 10, 0.2), var(--ink) 62%);
  background-color: var(--ink);
  /* 離場只動 opacity / transform（不動 clip-path），後面的 3D 畫面才不會卡 */
  transition: opacity 0.6s ease;
  will-change: opacity;
}
.gate.is-out { opacity: 0; pointer-events: none; }
.gate__inner { transition: transform 0.6s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.4s ease; }
.gate.is-out .gate__inner { transform: scale(1.06); opacity: 0; }
.gate[hidden] { display: none; }

.gate__inner { display: grid; justify-items: center; gap: 18px; text-align: center; }
.gate__code {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; color: var(--dim);
  animation: gate-in 0.8s ease both;
}
.gate__title {
  font-size: clamp(28px, 4vw, 44px); font-weight: 700; letter-spacing: 0.12em; line-height: 1.25;
  animation: gate-wipe 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
}

.gate__desk { display: flex; align-items: stretch; gap: 16px; height: 240px; margin: 8px 0 4px; }
.gate__meter { display: flex; flex-direction: column-reverse; gap: 4px; padding: 6px 0; }
.gate__meter i {
  width: 12px; flex: 1; border: 1px solid var(--line-3);
  transition: background-color 0.06s linear, border-color 0.06s linear;
}
.gate__meter i.on { background: var(--bone); border-color: var(--bone); }
.gate__meter i.on:nth-child(n + 10) { background: var(--text-5); border-color: var(--text-5); }

.gate__track {
  position: relative; width: 44px; cursor: ns-resize; touch-action: none;
  animation: gate-grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
  transform-origin: bottom;
}
/* 推桿的溝 */
.gate__track::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; translate: -50% 0;
  background: var(--surface-hi); border: 1px solid var(--line-4);
}
/* 刻度線：一條一條真的線（用重複漸層畫，在手機這種非整數縮放的螢幕上，有幾條 1px 的線會被吃掉）
   從推桿頭中心的最高點排到最低點，單數那幾條（長一點、亮一點）對齊右邊的 +10、0、−10、−30、−∞ */
.gate__ticks {
  position: absolute; inset: 22px 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none;
}
.gate__ticks i { display: block; height: 1px; margin-top: -1px; background: linear-gradient(90deg, var(--line-3) 0 24%, transparent 24% 76%, var(--line-3) 76%); }
.gate__ticks i:nth-child(odd) { background: linear-gradient(90deg, var(--line-4) 0 30%, transparent 30% 70%, var(--line-4) 70%); }
.gate__cap {
  position: absolute; left: 50%; bottom: calc(var(--lvl) * (100% - 44px));
  width: 44px; height: 44px; translate: -50% 0; z-index: 1;
  background:
    linear-gradient(to bottom, transparent 47%, var(--ink) 47% 53%, transparent 53%),
    var(--bone);
  border: 0; cursor: grab;
  animation: gate-breathe 1.6s ease-in-out 1.2s infinite;
}
.gate__cap:active { cursor: grabbing; }
.gate__cap:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; }
.gate.is-drag .gate__cap { animation: none; }

.gate__scale {
  display: flex; flex-direction: column; justify-content: space-between; padding: 16px 0; /* 22px（推桿頭一半）－ 6px（行高一半）：字的中間對齊長的刻度線 */
  font-family: var(--mono); font-size: 11px; line-height: 12px; letter-spacing: 0.1em; color: var(--dim); text-align: left;
}
.gate__hint { font-size: 13px; letter-spacing: 0.24em; color: var(--bone); animation: gate-in 0.8s ease 0.8s both; }
.gate__mute {
  font: 500 12px/1 var(--sans); letter-spacing: 0.18em; color: var(--dim);
  background: none; border: 1px solid var(--line-3); padding: 10px 18px; cursor: pointer;
  animation: gate-in 0.8s ease 1s both;
}
.gate__mute:hover { color: var(--bone); border-color: var(--line-5); }
.gate__mute:focus-visible { outline: 1px solid var(--bone); outline-offset: 3px; }
.gate__note { font-size: 11px; letter-spacing: 0.12em; color: var(--dim); animation: gate-in 0.8s ease 1.1s both; }

@keyframes gate-in { from { opacity: 0; translate: 0 8px; } }
@keyframes gate-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gate-grow { from { transform: scaleY(0); } }
@keyframes gate-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(237, 237, 230, 0); translate: -50% 0; }
  50% { box-shadow: 0 0 0 10px var(--tint-3); translate: -50% -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .gate *, .gate { animation: none !important; transition: none !important; }
}
.is-narrow .gate__desk { height: 200px; }

/* 音量滑桿：一條細的推桿溝 + 方形推桿頭，跟控台同一套語言 */
.hud__vol { display: flex; align-items: center; }
.hud__vol input {
  --v: 0.7;
  appearance: none; -webkit-appearance: none;
  width: 84px; height: 16px; background: none; cursor: pointer; margin: 0;
}
.hud__vol input::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(90deg, var(--bone) calc(var(--v) * 100%), var(--line-3) calc(var(--v) * 100%));
}
.hud__vol input::-moz-range-track { height: 3px; background: var(--line-3); }
.hud__vol input::-moz-range-progress { height: 3px; background: var(--bone); }
.hud__vol input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 14px; margin-top: -5.5px;
  background: var(--bone); border: 0;
}
.hud__vol input::-moz-range-thumb { width: 10px; height: 14px; background: var(--bone); border: 0; border-radius: 0; }
.hud__vol input:focus-visible { outline: 1px solid var(--bone); outline-offset: 3px; }
.is-narrow .hud__vol input { width: 56px; }
.is-narrow .hud__beats { display: none; }