:root {
  color-scheme: dark;
  --ink: #edf0e9;
  --muted: #aeb7b5;
  --surface: #182027;
  --surface-raised: #202b34;
  --line: #3b4b54;
  --accent: #d7c781;
  --accent-ink: #27230f;
  --danger: #efada3;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 0%, #2b3943 0, transparent 38rem),
    #10151d;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  line-height: 1.55;
}

button, input { font: inherit; }

.archive-shell {
  width: min(100% - 2rem, 900px);
  margin: 0 auto;
  padding: 4.5rem 0 2rem;
}

.topbar { border-bottom: 1px solid var(--line); padding-bottom: 1.4rem; }
.eyebrow, .section-label { margin: 0; color: var(--accent); font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .25rem; font-size: clamp(2rem, 7vw, 4.5rem); font-weight: 700; letter-spacing: -.08em; line-height: 1; }
h2 { margin-bottom: 0; font-size: 1.12rem; }
.case-meta { margin: 0; color: var(--muted); font-size: .82rem; }

.case-intro, .split-view, .investigation-history, .records, .deduction, .ai-notebook, .tester-lab { padding: 2.3rem 0; border-bottom: 1px solid var(--line); }
.case-intro { display: grid; grid-template-columns: 10rem 1fr; gap: .6rem 2rem; }
.case-intro > p { grid-column: 2; margin: 0; color: var(--muted); }
blockquote { grid-column: 2; margin: .3rem 0 .45rem; padding: 1rem 1.2rem; color: #faf9ef; border-left: 2px solid var(--accent); background: rgb(255 255 255 / .035); font-size: 1.05rem; }
.section-heading { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }

.split-intro { max-width: 44rem; margin-bottom: 1rem; color: var(--muted); font-size: .9rem; }
.split-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(13rem, .85fr); gap: .75rem; }
.platform-scene { position: relative; min-height: 22rem; overflow: hidden; padding: 1rem; border: 1px solid var(--line); background: linear-gradient(157deg, #263640 0%, #172028 53%, #11161d 100%); }
.platform-scene::after { position: absolute; right: -3rem; bottom: 2.6rem; width: 16rem; height: 5.5rem; content: ""; opacity: .15; transform: skewX(-34deg); background: repeating-linear-gradient(90deg, transparent 0 1.3rem, #d7c781 1.35rem 1.48rem); }
.scene-topline { display: flex; justify-content: space-between; color: var(--muted); font-size: .71rem; letter-spacing: .08em; text-transform: uppercase; }
.scene-topline strong { color: var(--accent); font-size: .85rem; }
.platform-sign { position: absolute; top: 4.5rem; left: 1.2rem; padding: .65rem .8rem; color: #1c211c; font-size: .75rem; font-weight: 700; letter-spacing: .09em; background: #d3d4c9; }
.platform-sign span { display: block; margin-top: .2rem; color: #52584d; font-size: .63rem; font-weight: 400; }
.track { position: absolute; right: 0; bottom: 4.2rem; left: 0; height: 4.2rem; overflow: hidden; transform: skewY(-7deg); background: #090d11; }
.rail { position: absolute; right: 0; left: 0; height: 2px; background: #71818a; box-shadow: 0 1.3rem 0 #71818a; }
.rail-one { top: .8rem; }.rail-two { top: 1.45rem; opacity: .4; }
.scene-marker { position: absolute; z-index: 1; display: grid; gap: .12rem; padding: .42rem .55rem; border: 1px solid currentColor; background: #172129; transition: opacity .2s ease, transform .2s ease, color .2s ease; }
.scene-marker span { font-size: .76rem; font-weight: 700; }.scene-marker small { font-size: .63rem; }
.train-marker { right: 12%; bottom: 7.4rem; color: #8e9da5; opacity: .45; }.train-marker.is-revealed { color: var(--accent); opacity: 1; transform: translateY(-.3rem); }
.a-marker { bottom: 8.6rem; left: 47%; color: #a9b4b3; }.a-marker.is-disputed { color: var(--danger); opacity: .4; transform: translateY(.8rem); text-decoration: line-through; }
.exit-marker { right: 1.1rem; bottom: 1rem; color: #98bfc1; opacity: .4; }.exit-marker.is-revealed { color: #bfe2d9; opacity: 1; transform: translateX(-.3rem); }
.scene-caption { position: absolute; right: 1rem; bottom: .7rem; left: 1rem; z-index: 2; margin: 0; color: #e9eee3; font-size: .78rem; }
.scene-reading { padding: 1rem; border: 1px solid var(--line); background: var(--surface); }.scene-reading h3 { margin: .35rem 0 .65rem; color: var(--accent); font-size: 1rem; }.scene-reading p:last-child { margin: 0; color: var(--muted); font-size: .88rem; }

.record-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.record-card {
  display: grid;
  min-height: 10.8rem;
  padding: 1rem;
  color: var(--ink);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .2rem;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.record-card:hover, .record-card:focus-visible, .record-card.is-active { background: var(--surface-raised); border-color: var(--accent); outline: none; }
.record-card:hover { transform: translateY(-2px); }
.record-index { color: var(--accent); font-size: .75rem; }
.record-type, .record-hint { color: var(--muted); font-size: .72rem; }
.record-card strong { align-self: center; font-size: .95rem; }
.record-hint { align-self: end; }

.record-detail { min-height: 9rem; margin-top: .75rem; padding: 1.2rem; border: 1px solid var(--line); background: rgb(0 0 0 / .16); }
.record-detail h3 { margin: 0 0 .55rem; color: var(--accent); font-size: .82rem; letter-spacing: .08em; }
.record-detail p { margin-bottom: .75rem; }
.record-detail p:last-child { margin-bottom: 0; }
.detail-note { color: var(--muted); font-size: .87rem; }
.empty-state { margin: 0; color: var(--muted); }

.history-intro { margin-bottom: 1rem; color: var(--muted); font-size: .9rem; }
.history-list { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.history-entry { display: grid; grid-template-columns: 5.2rem 1fr; gap: .8rem; padding: .85rem 0; border-top: 1px solid rgb(174 183 181 / .25); }
.history-entry:first-child { border-top: 0; }
.history-kind { color: var(--accent); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.history-entry p { margin: 0; font-size: .9rem; }
.history-entry.is-hypothesis .history-kind { color: #a8c8e7; }
.history-entry.is-hold .history-kind { color: #e6bd8d; }
.history-entry.is-ai .history-kind { color: #dbb7ea; }
.history-entry.is-rebuttal .history-kind { color: #c4d989; }
.history-empty { color: var(--muted); font-size: .88rem; }

fieldset { display: grid; gap: .6rem; padding: 0; border: 0; }
.choice { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; background: var(--surface); border: 1px solid var(--line); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--surface-raised); }
.choice input { margin-top: .32rem; accent-color: var(--accent); }
.primary-button { margin-top: 1rem; padding: .75rem 1rem; color: var(--accent-ink); font-weight: 700; background: var(--accent); border: 0; cursor: pointer; }
.primary-button:hover, .primary-button:focus-visible { background: #eee0a0; outline: 2px solid #fff5bb; outline-offset: 2px; }
.verdict { min-height: 1.5rem; margin-top: 1rem; }
.verdict.success { padding: 1rem; color: #e8f1d2; background: #263126; border-left: 2px solid #c4d989; }
.verdict.error { color: var(--danger); }
.ai-notebook[hidden], .prompt-panel[hidden], .case-report-panel[hidden], .case-report[hidden] { display: none; }
.notebook-intro { color: var(--muted); }
.ai-response { margin: 1.1rem 0; padding: 1.2rem; border: 1px solid #7b6b3a; background: #272519; }
.ai-response p:last-child { margin-bottom: 0; color: #fff7d7; }
.ai-label { margin-bottom: .6rem; color: var(--accent); font-size: .75rem; letter-spacing: .1em; }
.prompt-panel { margin-top: 1.4rem; padding: 1.2rem; background: var(--surface); border: 1px solid var(--line); }
.prompt-panel > p:not(.section-label) { color: var(--muted); font-size: .88rem; }
textarea { width: 100%; min-height: 12rem; padding: .8rem; resize: vertical; color: var(--ink); background: #10151d; border: 1px solid var(--line); line-height: 1.55; }
.secondary-button { margin-top: .7rem; padding: .7rem 1rem; color: var(--ink); background: transparent; border: 1px solid var(--accent); cursor: pointer; }
.secondary-button:hover, .secondary-button:focus-visible { background: #3a351b; outline: 2px solid #fff5bb; outline-offset: 2px; }
.copy-status { min-height: 1.4rem; margin: .7rem 0 0; color: #d8e8bb; font-size: .82rem; }
.case-report-panel { margin-top: 1.4rem; padding: 1.2rem; border: 1px solid #7b6b3a; background: #1b2222; }
.case-report-panel > p { color: var(--muted); font-size: .88rem; }
.case-report { margin-top: 1rem; padding: 1.2rem; color: #fbf8e8; background: rgb(0 0 0 / .2); border-left: 2px solid var(--accent); }
.case-report h3 { margin: 0 0 .8rem; color: var(--accent); font-size: .84rem; letter-spacing: .08em; }
.case-report p { margin-bottom: .8rem; }
.case-report p:last-child { margin-bottom: 0; }
.tester-intro { max-width: 48rem; color: var(--muted); font-size: .9rem; }
.tester-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin: 1rem 0; }
.tester-actions .secondary-button { margin: 0; }
.tester-status { margin: 0; color: #d8e8bb; font-size: .82rem; }
.tester-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.tester-card { min-height: 13rem; padding: 1rem; border: 1px solid var(--line); background: var(--surface); transition: border-color .16s ease, background .16s ease; }
.tester-card.is-ran { border-color: var(--accent); background: var(--surface-raised); }
.tester-card h3 { margin: .4rem 0 .65rem; font-size: 1rem; }
.tester-card > p:not(.tester-type) { min-height: 4.3rem; margin-bottom: 1rem; color: var(--muted); font-size: .84rem; }
.tester-type { margin: 0; color: var(--accent); font-size: .7rem; letter-spacing: .08em; }
.tester-run { width: 100%; padding: .62rem .7rem; color: var(--ink); background: transparent; border: 1px solid var(--line); cursor: pointer; }
.tester-run:hover, .tester-run:focus-visible { border-color: var(--accent); background: #3a351b; outline: none; }
.tester-report { margin-top: 1rem; padding: 1.2rem; border: 1px solid #7b6b3a; background: #1b2222; }
.tester-report-heading h3 { margin: .35rem 0 1rem; color: var(--accent); font-size: 1.05rem; }
.tester-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.tester-summary p { margin: 0; padding: .8rem; background: rgb(0 0 0 / .16); font-size: .82rem; }
.tester-summary strong, .tester-summary span { display: block; }
.tester-summary span { margin-top: .25rem; color: #d8e8bb; }
.tester-results { display: grid; gap: 1rem; margin-top: 1rem; }
.tester-result { padding-top: 1rem; border-top: 1px solid rgb(174 183 181 / .25); }
.tester-result h4 { margin: 0; color: #a8c8e7; font-size: .95rem; }
.tester-result p { margin: .55rem 0 0; color: var(--muted); font-size: .86rem; }
.tester-result .tester-aim { color: var(--ink); }
.tester-result ol { display: grid; gap: .35rem; margin: .7rem 0; padding-left: 1.25rem; font-size: .86rem; }
.tester-next { margin: 1rem 0 0 !important; padding: .85rem; color: #fbf8e8 !important; border-left: 2px solid var(--accent); background: rgb(0 0 0 / .18); }
footer { padding: 1.5rem 0; color: var(--muted); font-size: .72rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 640px) {
  .archive-shell { width: min(100% - 1.25rem, 900px); padding-top: 2.2rem; }
  .case-intro { display: block; }
  .case-intro > div { margin-bottom: 1rem; }
  .record-grid { grid-template-columns: 1fr; }
  .tester-grid, .tester-summary { grid-template-columns: 1fr; }
  .tester-card > p:not(.tester-type) { min-height: 0; }
  .split-grid { grid-template-columns: 1fr; }
  .record-card { min-height: 7.4rem; }
}