: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;}
  a{color:inherit;}

  /* 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;}
  .repdate{margin:.55em 0 0; font-size:.76rem; color:var(--muted); letter-spacing:.08em;}

  /* credo */
  .credo{background:linear-gradient(160deg,var(--accent-soft),var(--panel)); border:1px solid var(--line); border-radius:var(--r); padding:26px 28px; box-shadow:var(--shadow); margin:30px 0 8px;}
  .credo .credo-lead{color:var(--accent); font-weight:800; font-size:.95rem; letter-spacing:.02em; margin:0 0 12px;}
  .credo ul{list-style:none; margin:0; padding:0;}
  .credo li{position:relative; padding:5px 0 5px 20px; font-size:1.02rem; font-weight:600; line-height:1.8;}
  .credo li::before{content:""; position:absolute; left:0; top:.95em; width:7px; height:7px; border-radius:50%; background:var(--accent); opacity:.7;}

  /* 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;}

  /* nav / reverse-lookup map */
  .navcard{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:10px 12px; overflow:hidden;}
  .navcard .navintro{color:var(--muted); font-size:.94rem; padding:10px 10px 12px;}
  .nav-list{display:grid; grid-template-columns:1fr; gap:0;}
  .nav-list a{display:flex; align-items:center; justify-content:space-between; gap:14px; text-decoration:none; padding:14px 12px; border-radius:12px; border-bottom:1px solid var(--line); transition:background .12s;}
  .nav-list a:last-child{border-bottom:none;}
  .nav-list a:hover{background:var(--accent-soft);}
  .nav-list .state{font-weight:700; font-size:1rem;}
  .nav-list .goto{color:var(--accent); font-weight:800; font-size:.9rem; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;}
  .nav-list .goto::after{content:"\203A"; font-size:1.15em; line-height:1;}

  /* 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;}
  .card ul,.card ol{margin:.5em 0; padding-left:1.4em;}
  .card li{margin:.3em 0; line-height:1.8;}

  /* do / dont chips */
  .dodont{display:grid; grid-template-columns:1fr; gap:12px; margin:14px 0 4px;}
  @media(min-width:560px){.dodont{grid-template-columns:1fr 1fr;}}
  .dd{border-radius:14px; padding:14px 16px; border:1px solid var(--line);}
  .dd.do{background:var(--good-soft);}
  .dd.dont{background:var(--warn-soft);}
  .dd .h{font-weight:800; font-size:.9rem; margin-bottom:6px; display:flex; align-items:center; gap:7px;}
  .dd.do .h{color:var(--good);}
  .dd.dont .h{color:var(--warn);}
  .dd .h .mk{width:20px; height:20px; border-radius:50%; display:inline-grid; place-items:center; font-size:.8rem; font-weight:900; color:#fff;}
  .dd.do .mk{background:var(--good);}
  .dd.dont .mk{background:var(--warn);}
  .dd p{margin:0; font-size:.96rem; line-height:1.75;}

  /* teaser (blurred continuation) */
  .tease{position:relative; margin-top:18px; border-radius:14px; overflow:hidden;}
  .tease .blurred{filter:blur(5px); opacity:.55; user-select:none; pointer-events:none;}
  .tease .blurred p{margin:.5em 0; font-size:.96rem;}
  .tease .overlay{position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(180deg,transparent,rgba(244,246,242,.9) 72%);}
  .tease .overlay span{background:var(--panel); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow); padding:9px 20px; font-size:.9rem; font-weight:700; color:var(--muted);}

  /* 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;}