:root {
  --bg: #e9e5dd;
  --ink: #171717;
  --paper: #f8f6ef;
  --card: #ffffff;
  --line: #141414;
  --deep: #202020;
  --tape: #dcc95a;
  --stamp: #ad3434;
  --signal: #b8f85c;
  --info: #8be3ff;
  --muted: #575757;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  background: radial-gradient(circle at 20% 0%, #f2eee4 0%, #e5e0d5 45%, #d4cec1 100%);
  line-height: 1.75;
}

h1, h2, h3, p { margin: 0; }

.container { width: min(1120px, 92vw); margin: 0 auto; }

.hero {
  color: #f4f4f2;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 16px, rgba(0,0,0,.12) 16px 32px), linear-gradient(180deg, #2f2f2f 0%, #1f1f1f 100%);
  padding: 24px 0 30px;
  border-bottom: 5px solid var(--line);
}

.hero-grid { display: grid; gap: 20px; }

.lab-label {
  display: inline-block;
  border: 2px solid #efefec;
  padding: 4px 10px;
  font-size: .78rem;
  letter-spacing: .08em;
  background: rgba(0,0,0,.35);
}

.hero h1 {
  margin-top: 10px;
  font-size: clamp(2rem, 10vw, 4rem);
  line-height: 1.08;
}

.lead { margin-top: 14px; font-size: clamp(1rem, 4.3vw, 1.15rem); color: #dfdfda; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.terminal-cta, .sub-cta, .actions button, .option-btn {
  text-decoration: none;
  color: #111;
  font-weight: 700;
  border: 3px solid var(--line);
  background: var(--signal);
  box-shadow: 5px 5px 0 #00000033;
}

.terminal-cta { display: inline-block; padding: 12px 14px; }
.sub-cta { background: #fff; padding: 12px 14px; }
.meta-note { margin-top: 10px; color: #d5d5d3; font-size: .86rem; }

.obs-file {
  background: #f5f4ef;
  color: #131313;
  border: 4px solid var(--line);
  padding: 14px;
  box-shadow: 8px 8px 0 #0000003d;
}
.obs-head {
  display: inline-block;
  background: var(--tape);
  border: 2px solid var(--line);
  padding: 4px 8px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.obs-file p { margin-top: 8px; border-top: 2px dashed #494949; padding-top: 7px; }
.obs-file span { display: inline-block; min-width: 8em; font-size: .78rem; color: #464646; }
.minline { border: 2px solid var(--line); background: #fff; padding: 8px; }

.lab-section {
  margin-top: 18px;
  background: linear-gradient(180deg, #faf8f2 0%, #f2eee5 100%);
  border: 3px solid var(--line);
  padding: 16px;
  box-shadow: 7px 7px 0 #00000018;
}

.section-head h2 { margin-top: 6px; font-size: clamp(1.4rem, 6.2vw, 2rem); }
.section-head p { margin-top: 8px; }
.section-tag {
  display: inline-block;
  font-size: .74rem;
  letter-spacing: .08em;
  border: 2px solid var(--line);
  background: #fff;
  padding: 3px 7px;
}

.log-grid { margin-top: 14px; display: grid; gap: 10px; }
.log-card, .type-item, .article-card {
  background: #fff;
  border: 3px solid var(--line);
  padding: 12px;
}
.log-no { color: var(--stamp); font-weight: 800; font-size: .82rem; }
.log-card h3 { margin-top: 4px; font-size: 1.12rem; }
.log-card p { margin-top: 5px; }

.diag-shell { margin-top: 12px; background: #181818; color: #f2f2f2; border: 3px solid #000; padding: 12px; }
.diag-status {
  display: inline-block;
  color: #121212;
  background: var(--info);
  border: 2px solid #111;
  padding: 4px 8px;
  font-weight: 700;
  font-size: .84rem;
}
#quiz { margin-top: 10px; }
.question-box { border: 2px solid #f2f2f2; background: rgba(255,255,255,.04); padding: 10px; }
.option-list { margin-top: 10px; display: grid; gap: 8px; }
.option-btn { width: 100%; text-align: left; background: #f7f7f5; padding: 11px 12px; font-size: .98rem; }
.option-btn.selected { background: var(--tape); }
.terminal-cta.small { margin-top: 10px; }
.hidden { display: none; }

.result-card {
  margin-top: 12px;
  background: linear-gradient(0deg, #ffffff, #f6f5ef);
  border: 4px solid var(--line);
  padding: 14px;
}
.result-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.result-badge {
  display: inline-block;
  background: var(--stamp);
  color: #fff;
  padding: 4px 8px;
  font-size: .76rem;
  border: 2px solid #851f1f;
}
.result-card h3 { margin-top: 8px; font-size: clamp(1.5rem, 7vw, 2.1rem); line-height: 1.2; }
.result-grid { margin-top: 12px; display: grid; gap: 10px; }
.meter, .result-list, .result-bottom { border: 2px solid var(--line); background: #fff; padding: 10px; }
.result-list ul { margin: 7px 0 0; padding-left: 19px; }
.result-bottom p + p { margin-top: 8px; }
.highlight { border-left: 8px solid var(--tape); padding-left: 8px; font-weight: 700; }
.inline-link { color: #0d3f7a; font-weight: 700; }

.actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.actions button { padding: 10px 12px; background: #fff; }

.type-list, .article-list { margin-top: 12px; display: grid; gap: 10px; }
.type-item .type-tag {
  display: inline-block;
  border: 2px solid var(--line);
  padding: 2px 7px;
  font-size: .74rem;
  background: #f1f1ee;
}
.type-item h3, .type-item p, .article-card p { margin-top: 6px; }
.article-card { display: block; text-decoration: none; color: #121212; }
.article-card span { display: inline-block; color: var(--stamp); font-weight: 800; font-size: .78rem; }
.article-card strong { display: block; margin-top: 4px; font-size: 1.1rem; line-height: 1.45; }
.article-card p { color: #2f2f2f; }

.caution { border-style: dashed; border-width: 3px; }
.site-footer { padding: 26px 0 42px; font-size: .86rem; }

.panel {
  width: min(860px, 94vw);
  margin: 20px auto 30px;
  background: linear-gradient(180deg, #faf8f2 0%, #f0ebdf 100%);
  border: 3px solid var(--line);
  box-shadow: 8px 8px 0 #0000001e;
  padding: 16px;
}

.panel-head {
  border-bottom: 3px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.panel-head .section-tag { margin-bottom: 6px; }
.panel h1 { font-size: clamp(1.45rem, 7vw, 2.2rem); line-height: 1.35; }
.panel .intro { margin-top: 10px; color: #222; }

.report-block {
  margin-top: 14px;
  background: #fff;
  border: 2px solid var(--line);
  padding: 12px;
}
.report-block h2 {
  font-size: 1.15rem;
  margin-bottom: 6px;
}
.note-label {
  display: inline-block;
  border: 2px solid var(--line);
  background: var(--tape);
  padding: 2px 7px;
  font-weight: 700;
  font-size: .77rem;
  margin-bottom: 8px;
}

.mini-cta {
  margin-top: 14px;
  background: #1d1d1d;
  color: #f2f2f2;
  border: 3px solid #111;
  padding: 12px;
}
.mini-cta a { color: #b9f56d; font-weight: 700; }
.related-list {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.related-list a {
  display: block;
  text-decoration: none;
  color: #151515;
  background: #fff;
  border: 2px solid var(--line);
  padding: 10px;
  font-weight: 700;
}
.disclaimer {
  margin-top: 14px;
  font-size: .87rem;
  color: var(--muted);
  border-top: 2px dashed #6a6a6a;
  padding-top: 10px;
}

@media (min-width: 760px) {
  .hero { padding: 44px 0 36px; }
  .hero-grid { grid-template-columns: 1.2fr .9fr; align-items: end; }
  .log-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-grid { grid-template-columns: 1fr 1fr; }
  .type-list, .article-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .terminal-cta, .sub-cta, .actions button { width: 100%; text-align: center; }
  .panel { width: 95vw; padding: 14px; }
}