/* Perlin Terrain の見た目。地形図（等高線・高さによる色分け）を手がかりにした配色。 */

:root {
  color-scheme: light dark;

  --paper: #edf1ee;        /* 背景（紙の色） */
  --surface: #ffffff;
  --ink: #17262c;          /* 文字の色 */
  --ink-2: #4c5d62;
  --line: #c7d2ce;
  --grid: #e3e9e6;
  --sea: #1f6f8b;          /* 主な操作ボタン */
  --sea-ink: #ffffff;
  --sea-soft: #e2eff3;
  --contour: #8f5426;      /* 等高線の茶色。強調に使う */
  --err: #a8361f;
  --err-soft: #fbece8;
  --ok: #2c7a4b;
  --code-bg: #f6f8f7;
  --sky: #d3e4ec;
  --changed: #2c7a4b;
  --changed-soft: #e6f3ea;

  /* ブロック編集での、文の種類ごとの色 */
  --cat-def: #8f5426;
  --cat-loop: #1f6f8b;
  --cat-cond: #6a4fa3;
  --cat-assign: #7c8a8d;
  --cat-show: #2c7a4b;
  --cat-flow: #7c8a8d;
  --cat-other: #a9b5b3;

  /* 高さによる色分け（ステップの道のりに使う） */
  --tint-low: #9cc08a;
  --tint-mid: #d9d3a0;
  --tint-high: #c4a57c;
  --tint-peak: #f4f4f1;

  /* グラフの線の色（順番を固定して使う） */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #6250d6;
  --series-8: #e34948;

  --font-body: "BIZ UDPGothic", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-title: "BIZ UDPMincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --font-code: "Cascadia Mono", Consolas, "SF Mono", Menlo, "Noto Sans Mono", "BIZ UDGothic", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f181c;
    --surface: #172329;
    --ink: #e2ebe9;
    --ink-2: #a1b3b5;
    --line: #2f4148;
    --grid: #24343a;
    --sea: #6dc1d9;
    --sea-ink: #0b1a1f;
    --sea-soft: #1d3540;
    --contour: #dba56e;
    --err: #f39a85;
    --err-soft: #3a211c;
    --ok: #7fcf9d;
    --code-bg: #121c21;
    --sky: #1b2f3a;
    --changed: #7fcf9d;
    --changed-soft: #1c3327;

    --cat-def: #dba56e;
    --cat-loop: #6dc1d9;
    --cat-cond: #b3a0e6;
    --cat-assign: #8fa1a4;
    --cat-show: #7fcf9d;
    --cat-flow: #8fa1a4;
    --cat-other: #5b6c70;

    --tint-low: #2f5a3c;
    --tint-mid: #5c6140;
    --tint-high: #6b5438;
    --tint-peak: #b9c2c2;

    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
}

h1, h2, p, ol, dl, dd, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: var(--font-code); font-size: 0.92em; }
a { color: var(--sea); }

:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }

/* ---------- 上のバー ---------- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 10px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-name { font-family: var(--font-title); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; }
.brand-version { font-size: 0.8rem; color: var(--ink-2); }

.tabs { display: flex; gap: 4px; }
.tab {
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  padding: 4px 14px;
  cursor: pointer;
}
.tab:hover { background: var(--paper); }
.tab[aria-pressed="true"] { background: var(--ink); color: var(--surface); }

.py-status {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.py-status::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--contour);
}
.py-status[data-state="ready"]::before { background: var(--ok); }
.py-status[data-state="failed"]::before { background: var(--err); }
.py-status[data-state="loading"]::before,
.py-status[data-state="running"]::before { animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: 0.25; } to { opacity: 1; } }

.page-note { padding: 16px 20px; }

/* ---------- ページの枠 ---------- */
.tabpage { max-width: 1320px; margin: 0 auto; padding: 0 20px 48px; }
.tabpage[hidden] { display: none; }

/* ---------- ステップの道のり ---------- */
.trail {
  position: relative;
  height: 104px;
  margin: 12px 0 20px;
}
.trail svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.trail .tint-low { stop-color: var(--tint-low); }
.trail .tint-mid { stop-color: var(--tint-mid); }
.trail .tint-high { stop-color: var(--tint-high); }
.trail .tint-peak { stop-color: var(--tint-peak); }
.trail-contours line { stroke: var(--contour); stroke-width: 0.6; opacity: 0.35; vector-effect: non-scaling-stroke; }
.trail-ridge { fill: none; stroke: var(--contour); stroke-width: 2; }

.trail-step {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  padding: 0;
  border: 2px solid var(--contour);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.trail-step:hover { background: var(--sea-soft); }
.trail-step.done { background: var(--contour); color: var(--surface); }
.trail-step.current {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--ink);
}

/* ---------- ステップの説明 ---------- */
.lesson-head { margin-bottom: 16px; }
.lesson-step { font-size: 0.9rem; color: var(--contour); font-weight: 700; }
.lesson-head h1 {
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 4.2vw, 2.3rem);
  line-height: 1.35;
  font-weight: 700;
  text-wrap: balance;
}

.lesson-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 40px;
  margin-bottom: 28px;
}
.lesson-intro { max-width: 40em; }
.lesson-main { min-width: 0; }
.lesson-table { margin-top: 14px; max-width: 40em; }
/* せまい画面では、表を押しつぶさずに横へスクロールさせる */
.data.compare { min-width: max(100%, 29em); }
/* 比べる表: 文章が入るので左寄せにする */
.data.compare th, .data.compare td { text-align: left; white-space: normal; }
.data.compare thead th { text-align: left; }
.data.compare tbody th { white-space: nowrap; }
.lesson-intro p + p { margin-top: 0.8em; }
.lesson-intro b { color: var(--contour); }

.lesson-figure { margin: 0 0 14px; max-width: 40em; }
.fig { display: block; width: 100%; height: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.fig text { font-family: var(--font-body); fill: var(--ink); }
.fig .fg-title { font-size: 13px; font-weight: 700; }
.fig .fg-text { font-size: 13px; }
.fig .fg-small { font-size: 12px; fill: var(--ink-2); }
.fig .fg-big { font-size: 24px; font-weight: 700; }
.fig .fg-axis { stroke: var(--line); stroke-width: 1; fill: none; }
.fig .fg-frame { stroke: var(--ink-2); stroke-width: 1; fill: none; }
.fig .fg-dash { stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 4 4; fill: none; }
.fig .fg-line-a { stroke: var(--series-1); stroke-width: 2.5; fill: none; stroke-linejoin: round; }
.fig .fg-line-b { stroke: var(--series-2); stroke-width: 2.5; fill: none; }
.fig .fg-line-c { stroke: var(--series-3); stroke-width: 2.5; fill: none; }
.fig .fg-line-ink { stroke: var(--ink); stroke-width: 3; fill: none; stroke-linejoin: round; }
.fig .fg-dot-a { fill: var(--series-1); stroke: var(--surface); stroke-width: 2; }
.fig .fg-dot-b { fill: var(--series-2); stroke: var(--surface); stroke-width: 2; }
.fig .fg-fill-b { fill: var(--series-2); }
.fig rect[class^="bk-"] { stroke: var(--surface); stroke-width: 0.6; }
.fig .bk-water { fill: #3a80c4; }
.fig .bk-sand { fill: #dccb8c; }
.fig .bk-grass { fill: #5fa84a; }
.fig .bk-dirt { fill: #8a6240; }
.fig .bk-stone { fill: #8c8f92; }
.fig rect.bk-snow { fill: #f2f5f7; stroke: var(--ink-2); }

.lesson-terms { max-width: 40em; font-size: 0.93rem; }
.lesson-terms dt { font-weight: 700; margin-top: 8px; }
.lesson-terms dt:first-child { margin-top: 0; }
.lesson-terms dd { color: var(--ink-2); }

.task-q code, .task-a code {
  font-family: var(--font-code); font-size: 0.92em;
  background: var(--code-bg); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* やってみよう（課題カード）: コードと結果のすぐ上に置く */
.taskcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--contour);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.taskcard-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 8px; }
.taskcard-head h2 { font-size: 1rem; }
.task-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.task-chip {
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 2px solid var(--contour); background: var(--surface); color: var(--ink);
  font-size: 0.85rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.task-chip:hover { background: var(--sea-soft); }
.task-chip.done { background: var(--contour); color: var(--surface); }
.task-chip[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.taskcard-body { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.task-q { flex: 1; min-width: 0; }
.task-no { color: var(--contour); margin-right: 10px; white-space: nowrap; }
.task-done { flex: none; display: flex; align-items: center; gap: 6px; font-size: 0.9rem; cursor: pointer; white-space: nowrap; padding: 2px 10px; border: 1px solid var(--line); border-radius: 4px; }
.task-done input { accent-color: var(--changed); width: 16px; height: 16px; margin: 0; }
.task-a { margin-top: 6px; }
.task-a summary { cursor: pointer; font-size: 0.9rem; color: var(--sea); width: fit-content; }
.task-a p { margin-top: 6px; padding: 8px 12px; background: var(--code-bg); border-left: 3px solid var(--contour); font-size: 0.95rem; max-width: 60em; }
.lesson-text code {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 使い方の案内 */
.guide {
  background: var(--sea-soft);
  border: 1px solid var(--sea);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: end;
}
.guide[hidden] { display: none; }
.guide h2 { font-size: 1rem; grid-column: 1 / -1; }
.guide ul { margin: 0; padding-left: 1.2em; font-size: 0.93rem; }
.guide-num {
  display: inline-block; font-family: var(--font-code); font-size: 0.85em; line-height: 1.4;
  padding: 0 6px; margin-right: 6px; border: 1px solid var(--contour); border-radius: 3px; background: var(--surface); color: var(--contour);
}
.guide-grip {
  display: inline-block; width: 12px; height: 16px; margin-right: 8px; vertical-align: -2px;
  background-image: radial-gradient(circle, var(--ink-2) 1.4px, transparent 1.6px); background-size: 6px 6px;
}

/* ---------- 作業場（コードと結果） ---------- */
.workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (min-width: 960px) {
  .lesson-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .workbench { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  min-width: 0;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.code-panel { container-type: inline-size; }
.toolbar-end { margin-left: auto; display: flex; flex-wrap: wrap; gap: 2px; }
@container (max-width: 700px) {
  .toolbar-end { margin-left: -8px; flex-basis: 100%; }
}
.toolbar .segmented button { padding: 5px 14px; font-size: 0.95rem; }
.auto-run { margin-right: 0; }
[hidden] { display: none !important; }

/* 部品 */
.palette { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--code-bg); }
.palette-label { font-size: 0.8rem; color: var(--ink-2); }
.palette-items { display: flex; flex-wrap: wrap; gap: 6px; }
.palette-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  border: 1px dashed var(--contour); border-radius: 4px; background: var(--surface);
  padding: 3px 10px; cursor: grab; text-align: left; line-height: 1.4; touch-action: none; max-width: 100%;
}
.palette-item:hover { border-style: solid; }
.palette-name { font-size: 0.8rem; font-weight: 700; }
.palette-item code { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }

.editor-note { padding: 8px 14px; background: var(--err-soft); border-bottom: 1px solid var(--line); font-size: 0.9rem; }

/* ---------- ブロック編集 ----------
   1 行の並び: [つまみ 18px][開閉 16px][コード][目印][道具（右端に固定）]
   どの行も同じ並びにして、同じ深さの行のコードが同じ位置から始まるようにする。 */
.block-editor { background: var(--code-bg); }
.blk-scroll {
  position: relative;
  max-height: clamp(360px, 70vh, 760px);
  overflow: auto;
  padding: 10px 0 16px 40px;
  font-family: var(--font-code);
  font-size: 14px;
  line-height: 1.5;
}
.blk-list { display: flex; flex-direction: column; gap: 2px; min-width: max-content; }
.blk-root { padding-right: 10px; }
.blk { --cat: var(--cat-other); margin-top: calc(var(--gap, 0) * 5px); border-left: 3px solid var(--cat); border-radius: 3px; background: var(--surface); }
.blk.cat-def { --cat: var(--cat-def); }
.blk.cat-loop { --cat: var(--cat-loop); }
.blk.cat-cond { --cat: var(--cat-cond); }
.blk.cat-assign { --cat: var(--cat-assign); }
.blk.cat-show { --cat: var(--cat-show); }
.blk.cat-flow { --cat: var(--cat-flow); }
.blk.cat-comment { background: none; }
.blk.is-pass { opacity: 0.55; }
.blk-note { color: var(--ink-2); font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; padding: 3px 8px 0 40px; white-space: normal; max-width: 64ch; }
.blk-row { display: flex; align-items: center; min-height: 28px; border-radius: 0 3px 3px 0; }
.blk-row::before {
  content: attr(data-line);
  position: absolute; left: 0; width: 30px;
  text-align: right; font-family: var(--font-code); font-size: 11px; color: var(--ink-2); opacity: 0.7;
}
.blk-row.has-error { background: var(--err-soft); outline: 2px solid var(--err); outline-offset: -1px; }
.blk-grip, .blk-grip-space { flex: none; width: 18px; align-self: stretch; }
.blk-grip {
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; background: transparent; cursor: grab; touch-action: none; border-radius: 3px; color: var(--ink-2);
}
.blk-grip::before {
  content: ""; width: 10px; height: 15px; opacity: 0.6;
  background: radial-gradient(circle, currentColor 1.3px, transparent 1.6px) 0 0 / 5px 5px;
}
.blk-row:hover > .blk-grip, .blk-grip:focus-visible { background: var(--sea-soft); color: var(--ink); }
.blk-row:hover > .blk-grip::before, .blk-grip:focus-visible::before { opacity: 1; }
.blk-fold, .blk-fold-space { flex: none; width: 16px; margin-left: 2px; }
.blk-fold { height: 22px; border: 0; padding: 0; background: none; cursor: pointer; color: var(--ink-2); font-size: 12px; line-height: 22px; text-align: center; }
.blk-fold::before { content: "▾"; }
.blk-fold[aria-expanded="false"]::before { content: "▸"; }
.blk-code { flex: none; font-family: inherit; white-space: pre; padding: 3px 0; margin-left: 4px; }
.blk-more { flex: none; border: 0; background: none; color: var(--sea); cursor: pointer; font-family: var(--font-body); font-size: 12.5px; padding: 0 6px; white-space: nowrap; }
.blk-tag { flex: none; margin-left: 10px; font-family: var(--font-body); font-size: 11px; line-height: 1.4; color: var(--contour); white-space: nowrap; border: 1px solid var(--contour); border-radius: 3px; padding: 0 5px; background: var(--surface); }
/* 中身: つまみの列の真下に縦線を引き、そこから一定の幅だけ字下げする */
.blk-body { margin-left: 8px; padding: 2px 0 2px 16px; border-left: 2px solid color-mix(in srgb, var(--cat) 45%, transparent); min-height: 28px; }
.blk.folded > .blk-body, .blk.folded > .blk-foot { display: none; }
.blk-foot { height: 6px; }
.blk.focus { box-shadow: inset 0 0 0 1px var(--contour); background: color-mix(in srgb, var(--contour) 7%, var(--surface)); }
.blk.selected { outline: 2px solid var(--sea); outline-offset: 0; }
.blk.dragging { opacity: 0.35; }
.blk.just-added { animation: added 1.2s ease-out; }
@keyframes added { from { background: var(--changed-soft); box-shadow: 0 0 0 2px var(--changed); } to { box-shadow: 0 0 0 2px transparent; } }

/* 道具は行の右端に固定し、出したり消したりしても行の幅が変わらないようにする */
.blk-tools {
  display: inline-flex; gap: 2px; flex: none; margin-left: auto; padding: 0 6px 0 12px;
  position: sticky; right: 0; visibility: hidden;
}
.blk-row:hover > .blk-tools, .blk.selected > .blk-row > .blk-tools, .blk-row:focus-within > .blk-tools { visibility: visible; }
.blk-tool { width: 24px; height: 22px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); padding: 0; cursor: pointer; font-size: 11px; line-height: 20px; color: var(--ink-2); }
.blk-tool:hover { border-color: var(--ink-2); color: var(--ink); }
.blk-tool.t-up::before { content: "▲"; }
.blk-tool.t-down::before { content: "▼"; }
.blk-tool.t-copy::before { content: "複"; font-family: var(--font-body); }
.blk-tool.t-del::before { content: "✕"; }
.blk-tool.t-del:hover { border-color: var(--err); color: var(--err); }

.blk-num {
  font: inherit; line-height: 20px; color: var(--contour); font-weight: 700; text-align: center;
  border: 1px solid var(--contour); border-radius: 3px; background: var(--surface);
  padding: 0 4px; margin: -2px 1px; height: 22px; min-width: 22px; box-sizing: border-box; vertical-align: baseline;
}
.blk-num:hover { background: var(--sea-soft); }
.blk-num:focus { outline: 2px solid var(--sea); outline-offset: 0; }
.blk-num.invalid { border-color: var(--err); color: var(--err); background: var(--err-soft); }
.blk-name-wrap { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--ok); border-radius: 3px; background: var(--surface); padding: 0 2px 0 4px; margin: -2px 1px; height: 22px; box-sizing: border-box; vertical-align: middle; }
.blk-swatch { width: 11px; height: 11px; border: 1px solid var(--ink-2); background: var(--sw, #999); }
.blk-name-wrap[data-name="water"] { --sw: #3a80c4; }
.blk-name-wrap[data-name="sand"] { --sw: #dccb8c; }
.blk-name-wrap[data-name="grass"] { --sw: #5fa84a; }
.blk-name-wrap[data-name="forest"] { --sw: #2f6f3c; }
.blk-name-wrap[data-name="dirt"] { --sw: #8a6240; }
.blk-name-wrap[data-name="stone"] { --sw: #8c8f92; }
.blk-name-wrap[data-name="snow"] { --sw: #f2f5f7; }
.blk-name-wrap[data-name="ice"] { --sw: #bfe2ee; }
.blk-name-wrap[data-name="lava"] { --sw: #e0521c; }
.blk-name { font: inherit; color: var(--ok); border: 0; background: transparent; padding: 0; cursor: pointer; max-width: 18ch; }
.tk-kw { color: var(--sea); font-weight: 700; }
.tk-def { font-weight: 700; }
.tk-builtin { color: var(--sea); }
.tk-str { color: var(--ok); }
.tk-num { color: var(--contour); }
.tk-com { color: var(--ink-2); font-family: var(--font-body); font-size: 12.5px; }

.blk-drop { position: absolute; height: 4px; border-radius: 2px; background: var(--sea); pointer-events: none; z-index: 2; box-shadow: 0 0 0 2px var(--code-bg); }
.blk-ghost {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; max-height: 180px; overflow: hidden;
  font-family: var(--font-code); font-size: 14px; line-height: 1.5;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.28); opacity: 0.82; outline: 2px solid var(--sea);
}
.blk-ghost .blk-row::before { content: none; }
.blk-ghost .blk-tools { display: none !important; }
body.dragging-block { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.dragging-block * { cursor: grabbing !important; }
@media (hover: none) {
  /* 指で操作する端末では、選んだブロックにだけ道具を出す */
  .blk-row:hover > .blk-tools { visibility: hidden; }
  .blk.selected > .blk-row > .blk-tools { visibility: visible; }
  .blk-tool { width: 32px; height: 28px; line-height: 26px; }
  .blk-row { min-height: 34px; }
  .blk-num, .blk-name-wrap { height: 26px; }
}

.btn {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  padding: 6px 16px;
  cursor: pointer;
  line-height: 1.5;
}
.btn:hover:not(:disabled) { border-color: var(--ink-2); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.primary { background: var(--sea); border-color: var(--sea); color: var(--sea-ink); font-weight: 700; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); border-color: var(--sea); }
.btn.quiet { border-color: transparent; background: none; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.btn.quiet:hover:not(:disabled) { border-color: transparent; color: var(--ink); }
.btn.small { padding: 2px 8px; font-size: 0.85rem; }
.btn.danger { color: var(--err); border-color: var(--err); }

/* エディタ */
.editor { font-size: 14px; }
.editor .CodeMirror {
  height: clamp(320px, 64vh, 660px);
  font-family: var(--font-code);
  line-height: 1.6;
  background: var(--code-bg);
  color: var(--ink);
}
.plain-editor {
  display: block;
  width: 100%;
  height: clamp(320px, 64vh, 660px);
  border: 0;
  padding: 10px;
  background: var(--code-bg);
  font-family: var(--font-code);
  line-height: 1.6;
  resize: vertical;
  tab-size: 4;
}
.cm-s-terrain .CodeMirror-gutters { background: var(--code-bg); border-right: 1px solid var(--line); }
.cm-s-terrain .CodeMirror-linenumber { color: var(--ink-2); opacity: 0.75; }
.cm-s-terrain .CodeMirror-cursor { border-left: 2px solid var(--ink); }
.cm-s-terrain .CodeMirror-selected { background: var(--sea-soft); }
.cm-s-terrain.CodeMirror-focused .CodeMirror-selected { background: var(--sea-soft); }
.cm-s-terrain .CodeMirror-matchingbracket { color: inherit !important; outline: 1px solid var(--ink-2); }
.cm-s-terrain .cm-keyword { color: var(--sea); font-weight: 700; }
.cm-s-terrain .cm-def { color: var(--ink); font-weight: 700; }
.cm-s-terrain .cm-builtin { color: var(--sea); }
.cm-s-terrain .cm-string { color: var(--ok); }
.cm-s-terrain .cm-number { color: var(--contour); }
.cm-s-terrain .cm-comment { color: var(--ink-2); }
.cm-s-terrain .cm-operator { color: var(--ink); }
.cm-s-terrain .cm-variable, .cm-s-terrain .cm-variable-2, .cm-s-terrain .cm-property { color: var(--ink); }
.cm-s-terrain .error-line { background: var(--err-soft); }

.errorbox {
  border-top: 2px solid var(--err);
  background: var(--err-soft);
  padding: 12px 14px;
}
.error-title { font-weight: 700; color: var(--err); overflow-wrap: anywhere; }
.error-where { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.error-where code { background: var(--surface); border-radius: 3px; padding: 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.error-trace { font-size: 0.9rem; color: var(--ink-2); }
.error-hint { margin-top: 6px; }

.console { border-top: 1px solid var(--line); padding: 10px 14px 12px; }
.console h2 { font-size: 0.85rem; color: var(--ink-2); font-weight: 400; }
.console pre {
  margin: 4px 0 0;
  max-height: 220px;
  overflow: auto;
  font-family: var(--font-code);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 結果 */
.out-panel { padding: 14px; display: flex; flex-direction: column; gap: 18px; }
.run-note {
  font-size: 0.9rem; line-height: 1.5; padding: 6px 12px; border-radius: 4px;
  background: var(--code-bg); border-left: 4px solid var(--line); color: var(--ink-2);
}
.run-note[data-kind="changed"], .run-note[data-kind="ok"] { border-left-color: var(--changed); background: var(--changed-soft); color: var(--ink); }
.run-note[data-kind="same"] { border-left-color: var(--contour); color: var(--ink); }
.run-note[data-kind="pending"] { border-left-color: var(--sea); background: var(--sea-soft); color: var(--ink); }
.run-note[data-kind="error"] { border-left-color: var(--err); background: var(--err-soft); color: var(--ink); }
.out-panel.ran { animation: ran 0.7s ease-out; }
@keyframes ran { from { box-shadow: 0 0 0 3px var(--changed); } to { box-shadow: 0 0 0 3px transparent; } }
.out-head .check { margin-left: auto; margin-right: 0; }
.swatch.ghost { background: var(--ink-2); opacity: 0.5; height: 2px; }
/* ブロック表示の目印: 上から 草・土・石 */
.swatch.blocks { width: 12px; height: 12px; border-radius: 0; background: linear-gradient(to bottom, #5fa84a 0 33%, #8a6240 33% 66%, #8c8f92 66% 100%); }
/* 3D の下の操作: 1 行目に「自動で回す」とボタン、2 行目に操作の説明 */
.terrain-tools .check { margin-right: auto; }
.terrain-hint { order: 9; flex-basis: 100%; font-size: 0.8rem; color: var(--ink-2); }
.out-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 6px; }
.out-head h2 { font-size: 1rem; }
.note { font-size: 0.88rem; color: var(--ink-2); margin-top: 8px; }
.run-stats { font-size: 0.82rem; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 10px; }

.sliders { display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.slider-row {
  display: grid;
  grid-template-columns: minmax(0, 13em) minmax(0, 1fr) 3.2em;
  gap: 10px;
  align-items: center;
}
.slider-row label { font-size: 0.9rem; line-height: 1.4; }
.slider-row input[type="range"] { width: 100%; accent-color: var(--sea); min-height: 28px; }
.slider-row output { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
@media (max-width: 520px) {
  .slider-row { grid-template-columns: minmax(0, 1fr) 3.2em; }
  .slider-row label { grid-column: 1 / -1; margin-bottom: -6px; }
}

/* グラフ */
.plot-caption { font-size: 0.9rem; color: var(--ink-2); }
.plot-legend { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 0.85rem; color: var(--ink-2); }
.plot-legend li { display: flex; align-items: center; gap: 6px; }
.plot-legend[hidden], .plot-caption[hidden] { display: none; }
.swatch { display: inline-block; width: 16px; height: var(--w, 3px); border-radius: 2px; background: var(--c); flex: none; }
.swatch.dot { width: 9px; height: 9px; border-radius: 50%; }
.plot-frame { position: relative; }
.plot-canvas { display: block; width: 100%; touch-action: pan-y; cursor: crosshair; }
.plot-tip {
  position: absolute;
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 0.8rem;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.16);
  max-width: 340px;
  white-space: nowrap;
}
.plot-tip[hidden] { display: none; }
.tip-x { color: var(--ink-2); }
.tip-row { display: flex; align-items: center; gap: 6px; }
.tip-label { overflow: hidden; text-overflow: ellipsis; max-width: 150px; color: var(--ink-2); }
.tip-row b { margin-left: auto; padding-left: 8px; font-variant-numeric: tabular-nums; }

/* 3D */
.terrain {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 70vh;
  width: 100%;
  background: var(--sky);
  border: 1px solid var(--line);
  overflow: hidden;
}
.terrain[hidden] { display: none; }
.terrain canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.terrain canvas:active { cursor: grabbing; }
.terrain-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; }
.check { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--ink-2); cursor: pointer; margin-right: auto; }
.check input { accent-color: var(--sea); width: 16px; height: 16px; }

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.segmented button { border: 0; background: var(--surface); padding: 2px 12px; font-size: 0.85rem; cursor: pointer; }
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.segmented button:focus-visible { outline-offset: -3px; }

.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.pager-btn:disabled { visibility: hidden; }
.pager-btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 8px 18px; min-width: 0; }
.pager-btn:last-child { align-items: flex-end; text-align: right; }
.pager-dir { font-size: 0.8rem; opacity: 0.85; font-weight: 400; }
.pager-title { font-weight: 700; }
.error-original { font-family: var(--font-code); font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---------- 計測・記録のページ ---------- */
.prose-page { padding-top: 28px; }
.prose-page h1 { font-family: var(--font-title); font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.35; margin-bottom: 10px; }
.prose-page h2 { font-size: 1.1rem; margin: 30px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.prose-page > p { max-width: 46em; }
.prose-page > p + p { margin-top: 0.6em; }

.kv, .data { border-collapse: collapse; background: var(--surface); font-size: 0.92rem; }
.kv { width: 100%; max-width: 860px; border: 1px solid var(--line); }
.kv th, .kv td { text-align: left; padding: 6px 12px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.kv th { width: 44%; font-weight: 400; color: var(--ink-2); }
.kv td { overflow-wrap: anywhere; }
.kv tr:last-child th, .kv tr:last-child td { border-bottom: 0; }

.table-scroll { overflow-x: auto; margin-top: 12px; }
.data { border: 1px solid var(--line); min-width: 100%; }
.data th, .data td { padding: 6px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; line-height: 1.5; }
.data thead th { text-align: right; font-weight: 400; color: var(--ink-2); font-size: 0.85rem; border-bottom: 1px solid var(--ink-2); }
.data thead th:first-child, .data tbody th { text-align: left; }
.data tbody th { font-weight: 700; }
.data td { text-align: right; font-variant-numeric: tabular-nums; }
.data tbody tr:last-child th, .data tbody tr:last-child td { border-bottom: 0; }

.bench-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.bench-controls select { margin-left: 6px; padding: 4px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.bench-status { color: var(--ink-2); flex-basis: 100%; min-height: 1.8em; }
.bench-preview { max-width: 420px; margin-top: 8px; }
.exports { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.footer {
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px 20px 32px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  justify-content: space-between;
}

@media (max-width: 640px) {
  .guide { grid-template-columns: minmax(0, 1fr); }
  .guide .btn { justify-self: start; margin-top: 6px; }
  .taskcard-body { flex-direction: column; gap: 8px; }
  /* 図は小さくしすぎず、横に送って見られるようにする */
  .lesson-figure { overflow-x: auto; }
  .lesson-figure .fig { min-width: 520px; }
  .topbar { padding: 8px 16px; }
  .tabpage { padding: 0 16px 40px; }
  .footer { padding: 16px; }
  .py-status { flex-basis: 100%; margin-left: 0; }
  .trail { height: 88px; }
  .trail-step { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 0.78rem; }
  .out-panel { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .py-status::before, .out-panel.ran, .blk.just-added { animation: none !important; }
}