/* 科目B トレース帳 — 方眼ノート × 蛍光ペン × 赤ペン採点（ダークモードは黒板） */
:root {
  --paper: #F6F8FB;
  --grid: #E3EAF3;
  --sheet: #FFFFFF;
  --ink: #1D2740;
  --ink-soft: #56627A;
  --line: #CBD6E4;
  --pen: #2350C0;
  --pen-soft: #E6EDFB;
  --marker: #FFE45C;
  --marker-soft: #FFF5B8;
  --red: #D7322B;
  --red-soft: #FCE9E7;
  --ok: #1E7F4F;
  --shadow: 0 1px 0 rgba(29, 39, 64, .06), 0 8px 24px -16px rgba(29, 39, 64, .35);
  --hand: "Klee One", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --mono: "M PLUS 1 Code", "Osaka-Mono", "MS Gothic", ui-monospace, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #16231E;
    --grid: #1E2E28;
    --sheet: #1C2B25;
    --ink: #ECEFE4;
    --ink-soft: #A7B3A8;
    --line: #34493F;
    --pen: #9CC0FF;
    --pen-soft: #22383A;
    --marker: #8C7A1C;
    --marker-soft: #3A3A1E;
    --red: #FF8378;
    --red-soft: #3A2622;
    --ok: #7BD8A4;
    --shadow: 0 10px 30px -18px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #16231E;
  --grid: #1E2E28;
  --sheet: #1C2B25;
  --ink: #ECEFE4;
  --ink-soft: #A7B3A8;
  --line: #34493F;
  --pen: #9CC0FF;
  --pen-soft: #22383A;
  --marker: #8C7A1C;
  --marker-soft: #3A3A1E;
  --red: #FF8378;
  --red-soft: #3A2622;
  --ok: #7BD8A4;
  --shadow: 0 10px 30px -18px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font: 16px/1.75 var(--sans);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  min-height: 100vh;
}
a { color: var(--pen); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--pen); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--sheet); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
.noscript { padding: 24px; }

/* ---------- 上部バー ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 10px max(16px, calc((100vw - 1180px) / 2));
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--hand); font-weight: 600; font-size: 1.2rem; white-space: nowrap; }
.brand-mark { width: 30px; height: 30px; border-radius: 7px; background: var(--marker); display: grid; place-items: center; }
.brand-mark svg { width: 22px; height: 22px; }
.topnav { display: flex; gap: 4px; margin-left: 8px; }
.topnav a { white-space: nowrap; text-decoration: none; color: var(--ink-soft); padding: 4px 10px; border-radius: 6px; font-size: .92rem; }
.topnav a[aria-current="page"] { color: var(--ink); background: var(--marker-soft); }
.topnav a:hover { color: var(--ink); }
.lvbox { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: .85rem; white-space: nowrap; }
.lv { font-family: var(--hand); font-weight: 600; font-size: 1rem; }
.xpbar { width: 120px; height: 8px; border-radius: 4px; background: var(--grid); border: 1px solid var(--line); overflow: hidden; }
.xpbar i { display: block; height: 100%; background: var(--pen); transition: width .6s ease; }
.combo { color: var(--red); font-weight: 700; }
.theme-btn { border: 1px solid var(--line); background: var(--sheet); border-radius: 6px; padding: 2px 8px; cursor: pointer; }

main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 80px; outline: none; }

/* ---------- 共通部品 ---------- */
.sheet { background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 20px 22px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px solid var(--ink); background: var(--sheet); color: var(--ink);
  padding: 9px 18px; border-radius: 8px; cursor: pointer; text-decoration: none; font-weight: 600; line-height: 1.3;
}
.btn:hover { background: var(--marker-soft); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--pen); border-color: var(--pen); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.small { padding: 5px 12px; font-size: .9rem; }
.btn.ghost { border-color: var(--line); font-weight: 500; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
h1, h2, h3 { line-height: 1.35; }
.hand { font-family: var(--hand); }
.muted { color: var(--ink-soft); }
.sec { font-family: var(--hand); font-size: 1.05rem; font-weight: 600; margin: 22px 0 8px; display: flex; align-items: center; gap: 8px; }
.sec::before { content: ""; width: 14px; height: 14px; background: var(--marker); border-radius: 3px; transform: rotate(-4deg); }
.empty { padding: 28px; text-align: center; color: var(--ink-soft); border: 1.5px dashed var(--line); border-radius: 10px; }

/* ---------- コード表示 ---------- */
.code {
  font-family: var(--mono); font-size: .9rem; line-height: 1.85;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 0; overflow-x: auto; counter-reset: none;
}
.ln { display: flex; min-width: max-content; padding-right: 14px; }
.ln .no { width: 3.2em; flex: none; text-align: right; padding-right: 12px; color: var(--ink-soft); opacity: .6; user-select: none; }
.ln .src { white-space: pre; }
.ln.cur .src { background: linear-gradient(transparent 12%, var(--marker) 12%, var(--marker) 88%, transparent 88%); border-radius: 2px; }
.ln.cur .no { color: var(--ink); opacity: 1; font-weight: 600; }
.ln.cur .no::after { content: "▶"; font-size: .7em; margin-left: 4px; color: var(--red); }
.ln.err .src { text-decoration: underline wavy var(--red); text-underline-offset: 5px; }
.kw { color: var(--pen); font-weight: 600; }
.fn { color: var(--ink); font-weight: 600; }
.blank {
  display: inline-block; min-width: 3.2em; text-align: center; margin: 0 2px;
  border: 1.5px solid var(--ink); border-radius: 3px; line-height: 1.4; font-weight: 600;
  background: var(--sheet);
}

/* ---------- ホーム ---------- */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; margin: 12px 0 40px; }
.hero h1 { font-family: var(--hand); font-weight: 600; font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.3; margin: 0 0 16px; letter-spacing: .02em; }
.hero h1 .nw { white-space: nowrap; }
.hero h1 .hl { background: linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 92%, transparent 92%); }
.hero p { max-width: 34em; margin: 0 0 22px; color: var(--ink-soft); }
.demo { padding: 16px; transform: rotate(.6deg); }
.demo-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .85rem; color: var(--ink-soft); margin-bottom: 8px; }
.demo .code { font-size: .82rem; border: none; padding: 4px 0; }
.demo-note { font-family: var(--hand); min-height: 2.6em; margin: 10px 0 6px; font-size: .95rem; }
.demo-vars { display: flex; gap: 8px; flex-wrap: wrap; font-family: var(--mono); font-size: .85rem; }
.demo-vars span { border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px; background: var(--paper); transition: background .3s; }
.demo-vars span.chg { background: var(--marker-soft); border-color: var(--ink-soft); }

.progress-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 40px; padding: 0; overflow: hidden; }
.progress-strip > div { padding: 14px 18px; border-right: 1px dashed var(--line); }
.progress-strip > div:last-child { border-right: none; }
.progress-strip b { display: block; font-family: var(--hand); font-size: 1.6rem; line-height: 1.2; }
.progress-strip small { color: var(--ink-soft); }

.home-cols { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }
.toc h2, .side h2 { font-family: var(--hand); font-size: 1.4rem; margin: 0 0 12px; }
.toc ol.stages { list-style: none; margin: 0; padding: 0; }
.stage-row { display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.stage-row:first-child { border-top: none; }
.stage-icon { width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; font-size: 1.5rem; background: hsl(var(--hue) 70% 50% / .14); }
.stage-row h3 { margin: 0; font-family: var(--hand); font-size: 1.15rem; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.stage-row h3 small { font-family: var(--sans); font-size: .8rem; color: var(--ink-soft); font-weight: 400; }
.stage-row .stage-count { margin-left: auto; font-family: var(--sans); font-size: .8rem; color: var(--ink-soft); font-weight: 400; }
.plist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.plist a {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); background: var(--sheet); border-radius: 999px; padding: 3px 12px 3px 6px; font-size: .88rem;
}
.plist a:hover { border-color: var(--ink); }
.pmark { width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 50%; font-size: .75rem; color: var(--ink-soft); border: 1px dashed var(--line); }
.pmark.ok { border: none; color: var(--red); font-weight: 700; font-size: 1rem; }
.pmark.ng { border: none; color: var(--red); font-size: .95rem; }

.side .sheet + .sheet { margin-top: 16px; }
.mode-list { list-style: none; margin: 0; padding: 0; }
.mode-list li + li { border-top: 1px dashed var(--line); }
.mode-list a { display: block; padding: 12px 2px; text-decoration: none; color: var(--ink); }
.mode-list a b { display: block; font-family: var(--hand); font-size: 1.05rem; }
.mode-list a span { font-size: .85rem; color: var(--ink-soft); }
.mode-list a:hover b { text-decoration: underline; text-decoration-color: var(--marker); text-decoration-thickness: 4px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { font-size: .78rem; border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; color: var(--ink-soft); }
.badge.got { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.foot { margin-top: 48px; font-size: .85rem; color: var(--ink-soft); }
.linkbtn { background: none; border: none; color: var(--ink-soft); text-decoration: underline; cursor: pointer; padding: 0; }

/* ---------- 問題 ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .88rem; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); }
.crumbs > * + *::before { content: "/"; margin-right: 8px; opacity: .5; }
.attack-pill { color: var(--red); font-weight: 600; }
.attack-pill::before { content: none !important; }
.attack-pill { margin-left: auto; border: 1.5px solid var(--red); border-radius: 999px; padding: 0 12px; }
.prob-head { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; margin: 6px 0 18px; }
.prob-head h1 { font-family: var(--hand); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }
.prob-head .meta { display: flex; gap: 14px; font-size: .88rem; color: var(--ink-soft); align-items: baseline; }
.stars { color: var(--ink); letter-spacing: .1em; }
.timer { font-family: var(--mono); }
.prob-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.statement p { margin: 0 0 10px; }
.answer { position: sticky; top: 72px; }
.question { margin: 0 0 4px; font-weight: 600; }

.mascot { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 4px; }
.mascot svg { flex: none; width: 46px; height: 46px; }
.bubble { position: relative; font-family: var(--hand); background: var(--marker-soft); border-radius: 10px; padding: 8px 14px; font-size: .98rem; line-height: 1.6; }
.bubble::before { content: ""; position: absolute; left: -7px; top: 14px; border: 7px solid transparent; border-left: 0; border-right-color: var(--marker-soft); }
.bubble small { display: block; font-family: var(--sans); font-size: .72rem; color: var(--ink-soft); }

.choices { display: grid; gap: 8px; margin-bottom: 16px; }
.choice {
  display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; text-align: left;
  border: 1.5px solid var(--line); background: var(--sheet); border-radius: 8px; padding: 8px 12px 8px 6px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.choice:hover:not(:disabled) { border-color: var(--ink-soft); }
.choice[aria-checked="true"] { border-color: var(--ink); background: var(--pen-soft); }
.choice:disabled { cursor: default; }
.choice.is-correct { border-color: var(--red); }
.choice .lab { position: relative; width: 34px; height: 34px; display: grid; place-items: center; font-family: var(--hand); font-weight: 600; font-size: 1.15rem; }
.choice .body { font-size: .95rem; line-height: 1.6; min-width: 0; }
.choice code, .kv code { font-family: var(--mono); font-size: .88rem; overflow-wrap: anywhere; }
.kv { display: flex; gap: 8px; align-items: baseline; }
.kv + .kv { margin-top: 2px; }
.kv i { font-style: normal; font-family: var(--mono); font-size: .75rem; border: 1px solid var(--ink-soft); border-radius: 3px; padding: 0 5px; color: var(--ink-soft); }
.key-hint { font-size: .78rem; color: var(--ink-soft); margin: 8px 0 0; }

/* 赤ペンの◯とレ点 */
.mark { position: absolute; inset: -9px; width: 52px; height: 52px; pointer-events: none; overflow: visible; }
.mark path { fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .55s ease-out forwards; }
.mark.ng path { stroke-width: 6; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.result { margin-top: 18px; border-top: 1.5px dashed var(--line); padding-top: 16px; }
.verdict { display: flex; align-items: center; gap: 14px; }
.verdict h2 { font-family: var(--hand); font-size: 1.6rem; margin: 0; color: var(--red); }
.verdict p { margin: 0; font-size: .88rem; color: var(--ink-soft); }
.hanamaru { width: 76px; height: 76px; flex: none; }
.hanamaru path { fill: none; stroke: var(--red); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s ease-out forwards; }
.hanamaru path + path { animation-delay: .5s; }
.xp-lines { list-style: none; padding: 0; margin: 8px 0 0; font-size: .85rem; color: var(--ink-soft); }
.xp-lines li { display: flex; justify-content: space-between; max-width: 240px; }
.teacher { margin-top: 14px; border-left: 3px solid var(--red); padding: 4px 0 4px 14px; font-family: var(--hand); font-size: 1rem; line-height: 1.85; }
.teacher p { margin: 0 0 6px; }
.result .row { margin-top: 16px; }

/* ---------- トレーサー ---------- */
.tracer { margin-top: 24px; }
.tr-head { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.tr-head h2 { font-family: var(--hand); margin: 0; font-size: 1.35rem; }
.tr-call { display: flex; gap: 8px; align-items: center; flex: 1 1 320px; max-width: 560px; }
.tr-call label { font-size: .85rem; color: var(--ink-soft); white-space: nowrap; }
.tr-call input { flex: 1; min-width: 0; font-family: var(--mono); font-size: .9rem; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--paper); }
.tr-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 14px 0 6px; }
.tr-controls button { border: 1.5px solid var(--line); background: var(--sheet); border-radius: 6px; min-width: 40px; height: 36px; cursor: pointer; font-size: .9rem; }
.tr-controls button:hover { border-color: var(--ink); }
.tr-controls .play { min-width: 92px; font-weight: 600; border-color: var(--ink); }
.tr-controls input[type=range] { flex: 1 1 160px; accent-color: var(--pen); }
.tr-controls select { border: 1.5px solid var(--line); border-radius: 6px; background: var(--sheet); height: 36px; padding: 0 6px; }
.count { font-family: var(--mono); font-size: .85rem; color: var(--ink-soft); min-width: 6.5em; text-align: right; }
.tr-note { font-family: var(--hand); font-size: 1.05rem; min-height: 1.8em; margin: 6px 0 12px; padding: 6px 12px; background: var(--paper); border-radius: 8px; }
.tr-note.error { color: var(--red); background: var(--red-soft); }
.tr-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.tr-code { max-height: 520px; overflow: auto; }
.tr-side h3 { font-size: .85rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 6px; }
.tr-side h3:not(:first-child) { margin-top: 14px; }
.tr-stack { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-family: var(--mono); font-size: .8rem; }
.tr-stack span { border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; background: var(--paper); }
.tr-stack span:last-child { border-color: var(--ink); background: var(--marker-soft); }
.tr-stack i { color: var(--ink-soft); font-style: normal; }
.tr-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.tr-table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: .8rem; }
.tr-table th, .tr-table td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--grid); padding: 3px 8px; text-align: left; white-space: nowrap; }
.tr-table th { background: var(--paper); font-weight: 600; position: sticky; top: 0; }
.tr-table td.chg { color: var(--red); font-weight: 600; }
.tr-table tr.cur td { background: var(--marker-soft); }
.tr-table td.step { color: var(--ink-soft); }
.tr-out { margin: 0; min-height: 2.4em; font-family: var(--mono); font-size: .85rem; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; white-space: pre-wrap; }

/* ---------- タイムアタック・一覧 ---------- */
.narrow { max-width: 760px; margin: 0 auto; }
.page-title { font-family: var(--hand); font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 8px 0 8px; }
.rules { padding-left: 1.2em; }
.score-big { font-family: var(--hand); font-size: 3.4rem; line-height: 1; color: var(--red); }
.res-list { list-style: none; padding: 0; margin: 16px 0; }
.res-list li { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.res-list .m { color: var(--red); font-weight: 700; font-size: 1.1rem; text-align: center; }

/* ---------- プレイグラウンド ---------- */
.play-grid { display: grid; gap: 12px; }
.editor {
  width: 100%; min-height: 300px; resize: vertical; font-family: var(--mono); font-size: .9rem; line-height: 1.85;
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--sheet); tab-size: 2;
}
.symbols { display: flex; flex-wrap: wrap; gap: 6px; }
.symbols button { font-family: var(--mono); min-width: 40px; height: 34px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--sheet); cursor: pointer; }
.symbols button:hover { border-color: var(--ink); }
.field { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--ink-soft); }
.field input, .field select { font-family: var(--mono); color: var(--ink); padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--sheet); font-size: .9rem; }

/* ---------- 記法メモ ---------- */
.memo-table { width: 100%; border-collapse: collapse; margin: 8px 0 24px; font-size: .92rem; }
.memo-table th, .memo-table td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.memo-table th { font-weight: 600; width: 42%; }
.memo-table code { font-family: var(--mono); background: var(--paper); padding: 1px 6px; border-radius: 4px; }

/* ---------- トースト ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 40; max-width: calc(100vw - 32px); }
.toast { background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; box-shadow: var(--shadow); font-size: .9rem; animation: toast-in .3s ease-out; }
.toast b { font-family: var(--hand); font-size: 1rem; margin-right: 6px; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1080px) {
  .topnav { display: none; }
}
@media (max-width: 960px) {
  .hero, .home-cols, .prob-grid, .tr-body { grid-template-columns: minmax(0, 1fr); }
  .answer { position: static; }
  .progress-strip { grid-template-columns: repeat(2, 1fr); }
  .progress-strip > div:nth-child(2) { border-right: none; }
  .progress-strip > div:nth-child(-n+2) { border-bottom: 1px dashed var(--line); }
  .demo { transform: none; }
}
@media (max-width: 720px) {
  .topnav { display: none; }
  .xpbar { width: 64px; }
  .lvbox .title { display: none; }
  .sheet { padding: 16px; }
  .code { font-size: .8rem; }
  .tr-call { flex-basis: 100%; }
  .hero { gap: 24px; }
}
@media (max-width: 520px) {
  .topbar { gap: 8px; }
  .brand { font-size: 1rem; gap: 6px; }
  .lvbox { gap: 8px; }
  .xpbar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* ---------- 学習ノート ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.notes-head { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: end; margin-bottom: 20px; }
.notes-head p { max-width: 40em; margin: 0; }
.review-cta { display: grid; gap: 6px; justify-items: start; font-size: .85rem; }
.review-cta .big { font-family: var(--hand); font-size: 2.6rem; line-height: 1; color: var(--red); }
.review-cta .big small { font-size: 1rem; color: var(--ink); }
.notes-tools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 10px; }
.notes-tools .search { flex: 1 1 320px; }
.notes-tools input[type=search] { width: 100%; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--sheet); }
.due-only { font-size: .9rem; display: flex; gap: 6px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.chips button { border: 1.5px solid var(--line); background: var(--sheet); border-radius: 999px; padding: 3px 12px; cursor: pointer; font-size: .85rem; display: inline-flex; gap: 6px; align-items: baseline; }
.chips button small { color: var(--ink-soft); }
.chips button[aria-pressed="true"] { border-color: var(--ink); background: var(--marker-soft); font-weight: 600; }

.note-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.note-grid .empty { grid-column: 1 / -1; }
.note-card {
  display: flex; flex-direction: column; gap: 6px; height: 100%; text-decoration: none; color: var(--ink);
  background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 12px;
  box-shadow: var(--shadow); border-top: 4px solid var(--pen-soft);
}
.note-card:hover { border-color: var(--ink-soft); }
.note-card h3 { margin: 0; font-family: var(--hand); font-size: 1.15rem; }
.note-card p { margin: 0; font-size: .86rem; color: var(--ink-soft); line-height: 1.6; }
.nc-top { display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; color: var(--ink-soft); }
.nc-status { font-size: .75rem; border-radius: 4px; padding: 0 6px; white-space: nowrap; }
.nc-status.new { border: 1px dashed var(--line); color: var(--ink-soft); }
.nc-status.due { background: var(--red); color: var(--sheet); font-weight: 600; }
.nc-status.later { background: var(--pen-soft); color: var(--pen); }
.pills { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 2px; }
.pills code { font-family: var(--mono); font-size: .76rem; background: var(--marker-soft); border-radius: 4px; padding: 1px 6px; }
.pills small { font-size: .72rem; color: var(--ink-soft); }
.nc-foot { margin-top: auto; padding-top: 6px; display: flex; justify-content: space-between; font-size: .75rem; color: var(--ink-soft); }
.strength { color: var(--red); letter-spacing: .08em; font-size: .7rem; }
.nc-edited { color: var(--pen); }
.notes-foot { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.notes-foot p { margin: 2px 0 0; font-size: .85rem; }

.note-detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.note-body p { margin: 0 0 8px; }
.note-detail .side h2 { font-family: var(--hand); font-size: 1.15rem; margin: 0 0 8px; }
.note-detail .side p { margin: 0 0 10px; font-size: .92rem; }
.small-note { font-size: .8rem !important; margin-top: 10px !important; }
.tbl-wrap { overflow-x: auto; }
.trend-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.trend-table th, .trend-table td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.trend-table tr.fresh td { background: var(--marker-soft); }
.trend-table th { font-size: .8rem; color: var(--ink-soft); font-weight: 600; }
.trend-table td:nth-child(2) code { font-family: var(--mono); background: var(--marker-soft); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.trend-table td:nth-child(3) { color: var(--ink-soft); font-size: .85rem; }
.traps { margin: 0; padding-left: 1.2em; }
.traps li { margin-bottom: 4px; }
.traps li::marker { content: "✕  "; color: var(--red); }
.my-memo { background: var(--marker-soft); border-radius: 8px; padding: 10px 14px; font-family: var(--hand); }
.my-memo p { margin: 0 0 4px; }
.code-box { margin-top: 18px; }
.code-box summary { cursor: pointer; color: var(--pen); margin-bottom: 8px; }
.rel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rel-list a { display: inline-flex; gap: 6px; align-items: center; text-decoration: none; color: var(--ink); }
.rel-list a:hover { text-decoration: underline; }
.note-links { margin-top: 10px !important; padding-top: 12px; border-top: 1px dashed var(--line); }

.note-form { display: grid; gap: 16px; }
.note-form .field textarea, .note-form .field input { font-family: var(--sans); font-size: .95rem; color: var(--ink); padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--sheet); width: 100%; line-height: 1.6; resize: vertical; }
.note-form .mono { font-family: var(--mono) !important; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px; }
.field-set { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 0; }
.field-set legend { font-weight: 600; font-size: .9rem; padding: 0 6px; }
.field-set > p { font-size: .82rem; margin: 0 0 10px; }
.trend-row { display: grid; grid-template-columns: 1fr 1fr 1.2fr 32px; gap: 8px; align-items: end; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.trend-row.fresh { background: var(--marker-soft); border-radius: 6px; padding: 8px; }
.trend-row label { display: grid; gap: 2px; font-size: .75rem; color: var(--ink-soft); }
.trend-row input, .trap-row input { padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--sheet); font-size: .9rem; width: 100%; }
.trend-row input.mono { font-family: var(--mono); }
.trap-row { display: grid; grid-template-columns: 1fr 32px; gap: 8px; margin-bottom: 6px; }
.row-del { width: 32px; height: 32px; border: 1.5px solid var(--line); background: var(--sheet); border-radius: 6px; cursor: pointer; color: var(--ink-soft); }
.row-del:hover { border-color: var(--red); color: var(--red); }
.field-set > .btn { margin-top: 10px; }
.field-more summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.field-more > p { font-size: .82rem; margin: 6px 0; }
.rel-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
.rel-picks fieldset { border: 1px solid var(--line); border-radius: 6px; margin: 0; padding: 6px 10px; }
.rel-picks legend { font-size: .82rem; padding: 0 4px; }
.rel-picks label { display: flex; gap: 6px; font-size: .85rem; align-items: baseline; }
.form-error { color: var(--red); margin: 0; font-weight: 600; }

/* 単語カード */
.flash-wrap { max-width: 760px; margin: 0 auto; }
.flash-progress { display: flex; align-items: center; gap: 12px; font-size: .85rem; color: var(--ink-soft); margin-bottom: 14px; }
.flash-progress .xpbar { flex: 1; width: auto; }
.flash-progress a { color: var(--ink-soft); }
.flashcard {
  position: relative; background: var(--sheet); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 26px 30px 24px 56px;
  background-image: linear-gradient(transparent 31px, var(--grid) 32px); background-size: 100% 32px; background-position: 0 14px;
}
.flashcard::before { content: ""; position: absolute; left: 38px; top: 0; bottom: 0; border-left: 2px solid var(--red-soft); }
.hole { position: absolute; left: 12px; top: 22px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--line); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); }
.flashcard h1 { font-family: var(--hand); font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 2px 0 6px; }
.fc-cat { margin: 0; font-size: .8rem; color: var(--ink-soft); }
.fc-role { margin: 0 0 12px; }
.fc-ask { font-family: var(--hand); color: var(--pen); margin: 18px 0 6px; }
.fc-prompts { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; }
.fc-prompts li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.fc-prompts .ans code { font-family: var(--mono); background: var(--marker-soft); border-radius: 4px; padding: 1px 8px; font-size: .92rem; }
.fc-prompts .ans small { display: block; font-size: .8rem; color: var(--ink-soft); margin-top: 2px; }
.fc-prompts .q { display: inline-block; min-width: 5em; text-align: center; border: 1.5px solid var(--ink); border-radius: 3px; font-family: var(--mono); font-weight: 600; }
.flashcard.is-back { animation: flip-in .35s ease-out; }
@keyframes flip-in { from { transform: rotateX(8deg); opacity: .6; } }
.row.center { justify-content: center; margin-top: 18px; }
.btn.big { padding: 12px 28px; font-size: 1.05rem; }
.rate-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.rate { position: relative; display: grid; gap: 2px; justify-items: center; padding: 12px 8px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--sheet); cursor: pointer; }
.rate b { font-family: var(--hand); font-size: 1.15rem; }
.rate small { font-size: .78rem; color: var(--ink-soft); }
.rate kbd { position: absolute; top: 6px; right: 8px; font-size: .7rem; color: var(--ink-soft); font-family: var(--mono); }
.rate-again:hover { border-color: var(--red); background: var(--red-soft); }
.rate-hard:hover { border-color: var(--ink-soft); background: var(--marker-soft); }
.rate-good:hover { border-color: var(--pen); background: var(--pen-soft); }

@media (max-width: 960px) {
  .notes-head, .note-detail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .form-grid, .trend-row { grid-template-columns: minmax(0, 1fr); }
  .trend-row .row-del { justify-self: end; }
  .flashcard { padding: 20px 16px 18px 44px; }
  .flashcard::before { left: 30px; }
  .hole { left: 8px; }
  .fc-prompts li { grid-template-columns: minmax(0, 1fr); }
  .rate-row { gap: 6px; }
}