:root{
  --surface-0:#F5F4F0; --surface-1:#EDECE6; --surface-2:#FFFFFF;
  --text-primary:#26261F; --text-secondary:#5F5E5A; --text-muted:#888780;
  --text-accent:#185FA5; --text-danger:#A32D2D; --text-success:#0F6E56;
  --border:rgba(0,0,0,.12); --border-strong:rgba(0,0,0,.24);
  --font-sans:system-ui,-apple-system,"Noto Sans TC","Helvetica Neue",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --tgt-text:#B26500;
}
@media (prefers-color-scheme:dark){
:root{
  --surface-0:#17171A; --surface-1:#212125; --surface-2:#2A2A2F;
  --text-primary:#EAE9E4; --text-secondary:#A9A8A2; --text-muted:#7D7C77;
  --text-accent:#85B7EB; --text-danger:#F09595; --text-success:#5DCAA5;
  --border:rgba(255,255,255,.14); --border-strong:rgba(255,255,255,.28);
  --tgt-text:#EF9F27;
}
}
*{box-sizing:border-box}
body{margin:0;padding:24px 16px 48px;background:var(--surface-0);color:var(--text-primary);
  font-family:var(--font-sans);font-size:16px;line-height:1.6;-webkit-text-size-adjust:100%}
#hsi text{font-family:var(--font-mono)}
button,select{font-family:inherit;font-size:14px;height:36px;padding:0 12px;
  color:var(--text-primary);background:transparent;border:1px solid var(--border-strong);
  border-radius:8px;cursor:pointer;touch-action:manipulation}
button:hover,select:hover{background:var(--surface-1)}
button:active{transform:scale(.98)}
button:focus-visible,select:focus-visible,.tape:focus-visible{outline:2px solid var(--text-accent);outline-offset:2px}
/* 旋鈕帶:像 G1000 航向帶,左右拖曳、359→000 無縫接續。固定深色,不隨主題變 */
.tape{height:36px;border-radius:8px;background:#0B0F12;overflow:hidden;cursor:ew-resize;
  touch-action:none;user-select:none;-webkit-user-select:none}
.tape svg{display:block;width:100%;height:100%}
.tape text{font-family:var(--font-mono)}

/* ===== 電腦/平板版(≥600px):儀表與平面圖並排,三個旋鈕同時顯示 ===== */
main{max-width:1040px;margin:0 auto;display:grid;gap:16px 24px;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"head" "ask" "panes" "knobs"}
.head{grid-area:head}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
h1{font-size:20px;font-weight:500;margin:0}
p.lede{margin:4px 0 0;font-size:14px;color:var(--text-secondary)}
#more,.view,.chips{display:none}
/* 並排時限制寬度,讓出題區 + 兩個儀表在一般筆電螢幕高度內放得下 */
.panes{grid-area:panes;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;
  width:100%;max-width:max(560px,calc(200vh - 784px));margin:0 auto}
.pane svg{display:block;width:100%;height:auto}
#map{touch-action:none;cursor:grab}
/* 平面圖文字:放射線方位、目標 radial、CRS。底下描一圈背景色,壓在線上也看得清楚 */
#map text{font-family:var(--font-mono)}
.map-lbl,#roselbl text{paint-order:stroke;stroke:var(--surface-1);stroke-width:3px;stroke-linejoin:round}
.map-lbl{font-size:10px}
.tgt-lbl{fill:var(--tgt-text)}
.crs-lbl{fill:var(--text-accent)}
/* 隱藏相對站台位置模式:蓋住平面圖,也順便擋住拖曳 */
.pane-map{position:relative}
.map-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:16px;text-align:center;border-radius:12px;background:var(--surface-1);color:var(--text-secondary);font-size:14px}
.map-cover[hidden]{display:none}
.map-cover strong{color:var(--text-primary);font-weight:500;font-size:15px}
.settings button[aria-pressed=true]{background:var(--text-primary);border-color:var(--text-primary);color:var(--surface-0)}
/* 旋鈕區寬度跟儀表並排區對齊 */
.knobs{grid-area:knobs;display:grid;gap:8px;align-content:start;border-top:1px solid var(--border);padding-top:16px;
  width:100%;max-width:max(560px,calc(200vh - 784px));margin:0 auto}
.knob{display:grid;grid-template-columns:104px 44px 44px minmax(60px,1fr) 44px 44px 72px;gap:6px;align-items:center}
/* 旋鈕讀數模仿 PFD,固定深色,不隨主題變 */
.kl{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 10px;
  border-radius:8px;background:#0B0F12;color:#B8C0C4;font-size:12px}
.kl b,.chip b{font-family:var(--font-mono);font-weight:400;font-size:15px}
.c-obs{color:#00E03C}.c-bug{color:#00CFFF}.c-hdg{color:#FFFFFF}
.step{padding:0;font-family:var(--font-mono);font-size:13px}
/* 旋鈕列最右邊的動作鍵(CRS 的 PUSH、航向的轉到 bug):深色,文字用該旋鈕讀數的顏色 */
.knob-act{padding:0 4px;font-size:12px;background:#0B0F12;border-color:#0B0F12;color:#FFFFFF}
.knob-act:hover{background:#1A2126}
#push{font-family:var(--font-mono);letter-spacing:.04em;color:#00E03C}
/* 出題區:題目、出題、檢查同一排;回饋在題目正下方;出題設定最下面 */
.ask{grid-area:ask;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 10px;align-items:stretch}
.ask .settings,#fb{grid-column:1 / -1}
#gen,#chk{height:auto;min-height:44px;padding:0 20px;font-weight:500;border-color:var(--text-accent)}
#gen{color:var(--text-accent)}
#chk,#chk:hover{background:var(--text-accent);color:var(--surface-0)}
#task{font-size:16px;line-height:1.5;padding:10px 14px;border-radius:8px;background:var(--surface-1);
  border-left:3px solid var(--text-accent)}
#fb{font-size:14px;color:var(--text-secondary);min-height:22px}
.settings{display:flex;flex-wrap:wrap;gap:8px}

/* ===== 手機版(<600px):一屏放完,儀表/平面圖切換,旋鈕一次調一個 ===== */
@media (max-width:599px){
  body{padding:12px 16px}
  main{height:calc(100vh - 24px);height:calc(100svh - 24px);min-height:560px;gap:8px;
    grid-template-rows:auto auto auto minmax(200px,1fr) auto;
    grid-template-areas:"head" "ask" "view" "panes" "knobs"}
  h1{font-size:17px}
  p.lede{display:none}
  button,select{height:44px}
  #more{display:inline-block;height:36px}
  .view{grid-area:view;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;
    border-radius:10px;background:var(--surface-1)}
  .view button{height:32px;border:0;border-radius:7px}
  .view button[aria-pressed=true]{background:var(--surface-2);box-shadow:0 1px 2px rgba(0,0,0,.15)}
  .panes{display:block;position:relative;max-width:none}
  .pane{position:absolute;inset:0}
  .pane svg{width:100%;height:100%}
  .panes[data-view=hsi] .pane-map,.panes[data-view=map] .pane-hsi{display:none}
  .knobs{border:0;padding:0;max-width:none}
  .knobs{gap:6px}
  .chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .chip{height:48px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    line-height:1.15;font-size:11px;color:#B8C0C4;background:#0B0F12;border:2px solid #0B0F12}
  .chip:hover{background:#0B0F12}
  .chip[aria-pressed=true]{border-color:#FFFFFF}
  .knob{display:none;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"s s s s"}
  .knob[data-k=obs],.knob[data-k=hdg]{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-areas:"s s s s s"}
  .knob.active{display:grid}
  .knob .tape{grid-area:s;height:40px}
  .kl{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .settings{display:none}
  main.show-settings .settings{display:flex}
  .ask{grid-template-columns:1fr 1fr}
  /* 題目、回饋各預留兩行高度:出題、檢查時文字長短改變,HSI 才不會跟著縮放 */
  #task{grid-column:1 / -1;font-size:14px;padding:8px 12px;min-height:58px}
  #fb{min-height:2.8em;font-size:13px;line-height:1.4}
}