:root {
  color-scheme: light dark;
  --graph-background: #ffffff;
  --graph-foreground: #27344b;
  --graph-grid: #dfe5ef;
  --graph-prediction: #4f6c9b;
  --graph-correct: #e35635;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  color: #172033;
  background: #f7f9fd;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
.lab { max-width: 960px; margin: 0 auto; padding: 22px; }
header { margin-bottom: 16px; }
.eyebrow { margin: 0 0 5px; color: #3157b7; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
h1 { margin: 0; font-size: clamp(23px, 5vw, 36px); }
header > p:last-child { margin: 7px 0 0; color: #56627a; }
.tabs, .actions { display: flex; flex-wrap: wrap; gap: 8px; }
button { min-height: 44px; padding: 8px 13px; border: 1px solid #abb6c9; border-radius: 10px; color: inherit; background: #fff; cursor: pointer; }
button.active, button.primary { border-color: #3157b7; color: #fff; background: #3157b7; }
.workspace { display: grid; gap: 12px; margin-top: 16px; }
.equation { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(23px, 5vw, 34px); font-weight: 750; text-align: center; }
.canvas-wrap { width: 100%; overflow: hidden; border: 1px solid #c9d1df; border-radius: 12px; background: var(--graph-background); }
canvas { display: block; width: 100%; height: clamp(330px, 55vw, 510px); touch-action: none; cursor: crosshair; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; color: #56627a; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 34px; height: 0; border-top: 3px solid; }
.legend i.prediction { border-color: var(--graph-prediction); border-top-style: dashed; }
.legend i.correct { border-color: var(--graph-correct); }
.actions { justify-content: center; }
.controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; padding: 18px; border-radius: 14px; background: #eaf0ff; }
.controls label { display: grid; gap: 7px; }
.controls label span { display: flex; justify-content: space-between; }
.controls input { width: 100%; min-height: 36px; accent-color: #3157b7; }
.controls p { grid-column: 1 / -1; margin: 0; color: #46536b; }
[hidden] { display: none !important; }

@media (max-width: 560px) {
  .lab { padding: 17px 12px; }
  .tabs button { flex: 1 1 42%; }
  .controls { grid-template-columns: 1fr; padding: 14px; }
  .controls p { grid-column: auto; }
  canvas { height: 390px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --graph-background: #111827;
    --graph-foreground: #e5eaf5;
    --graph-grid: #29344a;
    --graph-prediction: #87a7da;
    --graph-correct: #ff8062;
    color: #edf2ff;
    background: #101522;
  }
  header > p:last-child, .legend, .controls p { color: #b4bfd4; }
  button { color: #edf2ff; background: #1a2232; border-color: #4a5770; }
  .canvas-wrap { border-color: #445169; }
  .controls { background: #17213a; }
}

/* スライダーは指で操作するため、つまみを大きくして掴みやすくする。
   input の高さを44pxにすると余白が目立つので、つまみ側で当たり判定を確保する。 */
input[type="range"] { min-height: 44px; background: transparent; -webkit-appearance: none; appearance: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: #dbe5f2; }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: #dbe5f2; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -11px; border: 3px solid #fff; border-radius: 50%; background: #2f5fb7; box-shadow: 0 1px 4px #17384b55; cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid #fff; border-radius: 50%; background: #2f5fb7; box-shadow: 0 1px 4px #17384b55; cursor: pointer; }