@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap');

:root{
  --bg:#0b0d11;
  --panel:#14171d;
  --panel2:#1b1f26;
  --text:#f3f4f6;
  --muted:#aeb5bf;
  --line:#2c323b;
  --gold:#d5b46c;
  --red:#db7777;
  --green:#76c59d;
  --cyan:#6eb9c5;
  --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 0%,rgba(213,180,108,.08),transparent 28rem),
    linear-gradient(180deg,#090b0e,#101319 46%,#090b0e);
  font-family:"IBM Plex Sans JP",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.8;
}
a{color:#c9d8ef;text-decoration-color:#59697f;text-underline-offset:3px}
a:hover{color:white}

.hero{
  min-height:54vh;
  display:flex;
  align-items:end;
  padding:86px 24px 66px;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(135deg,rgba(255,255,255,.025),transparent 48%),
    repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.013) 80px);
}
.hero-inner{width:100%;max-width:var(--max);margin:auto}
.eyebrow,.kicker{
  color:var(--gold);
  font-size:.77rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
h1{
  margin:.08em 0 .14em;
  font-family:"Playfair Display",serif;
  font-size:clamp(4.3rem,14vw,10rem);
  line-height:.9;
  letter-spacing:-.055em;
}
.lead{max-width:840px;color:#d9dde3;font-size:clamp(1.05rem,2.2vw,1.34rem)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.chips span,.mapping span{
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  border-radius:999px;
  padding:6px 11px;
  font-size:.82rem;
  color:#cbd0d7;
}

.toc{
  position:sticky;top:0;z-index:5;
  display:flex;gap:6px;overflow:auto;
  max-width:100%;
  padding:9px max(14px,calc((100vw - var(--max))/2));
  border-bottom:1px solid var(--line);
  background:rgba(11,13,17,.92);
  backdrop-filter:blur(16px);
}
.toc a{
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:8px;
  color:#c8ced6;
  text-decoration:none;
  font-size:.78rem;
}
.toc a:hover{background:#1a1e25;color:white}

.wrap{max-width:var(--max);margin:0 auto;padding:48px 22px 100px}
.panel{
  margin:0 0 22px;
  padding:clamp(23px,4.8vw,52px);
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel),#111419);
  box-shadow:0 20px 55px rgba(0,0,0,.13);
}
.section-head{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:20px;
  align-items:end;
  margin-bottom:28px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.section-head .kicker{margin:0}
.section-head h2{margin:0;font-size:clamp(1.65rem,3.6vw,2.65rem);line-height:1.28}
.note,.muted{color:var(--muted);font-size:.92rem}

.audit-grid,.rule-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin:25px 0;
}
.audit-grid article,.rule-grid article,.split article{
  border:1px solid var(--line);
  background:var(--panel2);
  padding:20px;
}
.audit-grid h3{margin:.6em 0 .3em}
.status{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  border:1px solid var(--line);
}
.status.bad,.status.rejected{border-color:rgba(219,119,119,.5);color:#ffc7c7;background:rgba(219,119,119,.10)}
.status.good,.status.testable{border-color:rgba(118,197,157,.5);color:#c9f4de;background:rgba(118,197,157,.10)}
.status.caution{border-color:rgba(213,180,108,.5);color:#f5deb0;background:rgba(213,180,108,.10)}
.callout{
  margin-top:22px;
  padding:16px 18px;
  border-left:4px solid var(--gold);
  background:#1a1e24;
}
.callout.warn{border-left-color:var(--red)}
.callout.neutral{border-left-color:var(--cyan)}
.mapping{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

.table-wrap{overflow:auto;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#1b1f26;color:#d9dee5;font-size:.82rem;position:sticky;top:0}
tbody tr:hover{background:rgba(255,255,255,.018)}
.zodiac{font-weight:700;text-align:center}
.quality{white-space:nowrap;font-size:.72rem;padding:3px 7px;border-radius:999px;border:1px solid var(--line)}
.q-a{color:#c8f0da;border-color:rgba(118,197,157,.45)}
.q-b{color:#f1d8a8;border-color:rgba(213,180,108,.45)}

.guardian{
  display:inline-flex;align-items:center;
  padding:4px 8px;
  border-radius:999px;
  font-size:.77rem;
  font-weight:700;
  white-space:nowrap;
  border:1px solid currentColor;
  background:rgba(255,255,255,.025);
}
/* 8 categories get equal visual weight. Colors distinguish, none is promoted as "the" category. */
.senju{color:#b7d7ff}
.kokuzo{color:#c9b9ff}
.monju{color:#9be4d8}
.fugen{color:#f2a7c6}
.seishi{color:#ffd39d}
.dainichi{color:#f0cf84}
.fudo{color:#ff9f9f}
.amida{color:#b7e6a7}

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:20px;
}
.stat{padding:18px;border:1px solid var(--line);background:var(--panel2)}
.stat-num{display:block;font-family:"Playfair Display",serif;font-size:2.9rem;line-height:1;color:var(--gold)}
.stat span:last-child{display:block;margin-top:7px;color:var(--muted);font-size:.84rem}

.distribution-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dist-card{border:1px solid var(--line);background:var(--panel2);padding:15px}
.dist-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dist-top strong{font-size:1.15rem}
.bar{height:5px;background:#292e36;border-radius:999px;overflow:hidden;margin:12px 0 8px}
.bar i{display:block;height:100%;background:#c8ced6;border-radius:inherit}
.dist-card p{margin:0;color:var(--muted);font-size:.79rem}

.compact table{min-width:560px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}

.hypothesis-table{
  display:grid;
  grid-template-columns:minmax(210px,.9fr) 1.4fr;
  border:1px solid var(--line);
  background:var(--line);
  gap:1px;
  margin:22px 0;
}
.hypothesis-table>div{padding:14px;background:var(--panel2)}
.hyp-head{font-weight:700;color:#dfe3e8;background:#1e232b!important}

.exclusion-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px;
}
.exclusion-list article{
  border:1px solid var(--line);
  background:var(--panel2);
  padding:16px;
}
.exclusion-list article>span{float:right;color:#ffb1b1;font-weight:700;font-size:.82rem}
.exclusion-list p{clear:both;color:var(--muted);font-size:.84rem;margin:.55em 0 0}

.myth-box{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:20px;
}
.myth-box>div{border:1px solid var(--line);background:var(--panel2);padding:22px}
.myth-box span{display:block;color:var(--gold);letter-spacing:.13em;font-size:.73rem;font-weight:700}
.myth-box strong{display:block;font-size:1.2rem;margin:.2em 0}

.next-list{padding-left:1.35em}
.next-list li{margin:12px 0}
.conclusion{
  background:
    radial-gradient(circle at 83% 8%,rgba(213,180,108,.07),transparent 24rem),
    linear-gradient(180deg,#171b21,#111419);
}
.big{font-size:clamp(1.08rem,2.2vw,1.38rem)}
.sources li{margin:8px 0}

footer{
  padding:34px 22px 50px;
  text-align:center;
  color:var(--muted);
  border-top:1px solid var(--line);
  font-size:.83rem;
}

@media (max-width:900px){
  .section-head{grid-template-columns:1fr;gap:3px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .exclusion-list{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .hero{padding:62px 17px 48px}
  .wrap{padding:30px 12px 70px}
  .panel{padding:21px 16px}
  .audit-grid,.rule-grid,.distribution-grid,.split,.myth-box,.stats,.exclusion-list{grid-template-columns:1fr}
  .hypothesis-table{grid-template-columns:1fr}
  .hyp-head:nth-child(2){display:none}
}