:root{
    --bg:#f4f6f2; --panel:#ffffff; --ink:#242922; --muted:#626a63; --axis:#30362f;
    --line:#dfe5dc; --accent:#9b6a45; --accent-soft:#eadfd2;
    --good:#628f68; --good-soft:#e3eee4; --amber:#c79b52; --amber-soft:#efe7d5; --warn:#c77a5a; --warn-soft:#f0ddd5;
    --shadow:0 1px 2px rgba(42,50,42,.05),0 14px 34px rgba(42,50,42,.08);
    --code-bg:#eef1ec; --code-ink:#343a33;
    --r:18px;
  }
  *{box-sizing:border-box}
  body{
    margin:0; background:linear-gradient(180deg,#f7f8f5 0%,var(--bg) 34%,#eff3ee 100%); color:var(--ink);
    font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,system-ui,-apple-system,"Segoe UI",sans-serif;
    line-height:1.85; -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:820px; margin:0 auto; padding:clamp(28px,4vw,50px) clamp(14px,4vw,30px) 112px;}

  /* sample banner */
  .sample-badge{display:block; width:max-content; margin:0 auto; background:var(--accent); color:#fff; font-weight:800; letter-spacing:.3em; text-indent:.3em; font-size:.78rem; border-radius:999px; padding:6px 18px;}
  .sample-note{text-align:center; color:var(--muted); font-size:.84rem; max-width:36em; margin:10px auto 0;}

  /* hero */
  header.hero{text-align:center; padding:34px 0 22px;}
  .kicker{color:var(--accent); font-weight:700; letter-spacing:.14em; font-size:.74rem; text-transform:uppercase;}
  h1{font-size:clamp(1.7rem,5vw,2.5rem); line-height:1.32; margin:.35em 0 .2em; font-weight:800; letter-spacing:.01em;}
  .sub{color:var(--muted); font-size:1rem; max-width:34em; margin:.4em auto 0; text-wrap:balance; word-break:keep-all; line-break:strict;}
  .dedication{margin:22px auto 0; font-size:clamp(1.05rem,3vw,1.22rem); font-weight:700; color:var(--ink); letter-spacing:.06em;}
  .dedication::before{content:""; display:block; width:38px; height:1px; background:var(--accent); opacity:.55; margin:0 auto 15px;}
  .dedication .hon{font-size:.82em; font-weight:600; color:var(--muted); margin-left:.35em;}

  /* section */
  section{margin:44px 0; scroll-margin-top:18px;}
  .sec-head{display:flex; align-items:baseline; gap:12px; margin-bottom:8px;}
  .sec-no{font-variant-numeric:tabular-nums; color:var(--accent); font-weight:800; font-size:.9rem; border:1.5px solid var(--accent-soft); background:var(--accent-soft); border-radius:999px; padding:2px 11px; flex:0 0 auto;}
  h2{font-size:clamp(1.22rem,3.4vw,1.5rem); margin:0; font-weight:800; letter-spacing:.01em;}

  /* cards */
  .card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:22px 24px; margin-top:16px;}
  .card:first-of-type{margin-top:8px;}
  .conc{margin:0 0 4px; padding:13px 16px; background:var(--accent-soft); border-radius:12px; font-size:1.02rem; font-weight:800;}
  .conc .lbl{color:var(--accent); margin-right:.5em;}
  .ctitle{font-size:1.05rem; font-weight:800; color:var(--ink); margin:22px 0 10px; letter-spacing:.01em; display:flex; align-items:center; gap:8px;}
  .ctitle:first-child{margin-top:6px;}
  .ctitle::before{content:""; width:5px; height:1.05em; border-radius:3px; background:var(--accent); display:inline-block; flex:0 0 auto;}
  .card p{margin:.6em 0;}
  .cap{color:var(--muted); font-size:.9rem; margin-top:12px;}

  /* stat cards */
  .cards{display:grid; grid-template-columns:1fr; gap:12px; margin-top:8px;}
  @media(min-width:560px){.cards{grid-template-columns:1fr 1fr 1fr;}}
  .stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:18px 20px;}
  .stat .lbl{font-size:.86rem; font-weight:700; color:var(--muted);}
  .stat .num{font-size:1.9rem; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1.3; margin:.15em 0;}
  .stat .num .u{font-size:.6em; margin-left:.1em;}
  .stat .note{font-size:.82rem; color:var(--muted);}

  /* record sample */
  pre{background:var(--code-bg); color:var(--code-ink); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:10px 0 4px; overflow-x:auto;}
  pre code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; font-size:.92rem; line-height:1.85; white-space:pre; color:inherit;}

  /* horizontal bars */
  .bars{display:grid; gap:14px; margin:14px 0 6px;}
  .bar{display:grid; grid-template-columns:6.4em 1fr 3.2em; align-items:center; gap:12px;}
  .bar .blb{font-weight:700; font-size:.95rem;}
  .bar .track{display:block; background:var(--code-bg); border-radius:999px; height:22px; overflow:hidden;}
  .bar .fill{display:block; height:100%; border-radius:999px;}
  .bar .val{font-weight:800; font-variant-numeric:tabular-nums; font-size:.95rem; text-align:right;}
  .f-good{background:var(--good);} .f-amber{background:var(--amber);} .f-warn{background:var(--warn);}
  .t-good{color:var(--good);} .t-amber{color:#b98a2e;} .t-warn{color:var(--warn);}

  /* heatmap */
  .heat{display:grid; grid-template-columns:repeat(12,1fr); gap:3px; margin:14px 0 8px; max-width:520px;}
  .hcol{display:grid; grid-template-rows:repeat(7,1fr); gap:3px;}
  .hcell{aspect-ratio:1; border-radius:3px;}
  .hax{max-width:520px;}
  .h1{background:var(--good); opacity:.85;}
  .h2{background:var(--amber); opacity:.8;}
  .h3{background:var(--warn); opacity:.8;}
  .hax{display:flex; justify-content:space-between; color:var(--muted); font-size:.8rem; margin-top:2px;}
  .legend{display:flex; gap:18px; flex-wrap:wrap; margin-top:10px; font-size:.86rem; color:var(--muted);}
  .legend span{display:inline-flex; align-items:center; gap:6px; font-weight:700;}
  .legend i{width:12px; height:12px; border-radius:3px; display:inline-block;}

  /* teaser toc */
  .toc{list-style:none; margin:6px 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:0;}
  @media(min-width:560px){.toc{grid-template-columns:1fr 1fr;}}
  .toc li{display:flex; align-items:baseline; gap:10px; padding:10px 6px; border-bottom:1px solid var(--line); font-weight:700; font-size:.98rem;}
  .toc li .no{color:var(--accent); font-weight:800; font-variant-numeric:tabular-nums; font-size:.85rem;}
  .toc-note{color:var(--muted); font-size:.9rem; margin-top:14px;}

  footer{text-align:center; color:var(--muted); font-size:.78rem; margin-top:48px; padding-top:20px; border-top:1px solid var(--line);}
  b,strong{font-weight:800;}