:root{--green:#134538;--pink:#E985A2;--bg:#fff;--fg:#1b1b1b;--muted:#5b6660;--card:#f5f7f6;--line:#e2e8e5;--accent:var(--green);--accent-on:#fff;--codebg:#0f1512;--codefg:#e7efe9;--ok:#2a9d6f;--shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(19,69,56,.06)}
@media (prefers-color-scheme:dark){:root{--bg:#0e1310;--fg:#eef2f0;--muted:#9aa8a1;--card:#161d19;--line:#28322c;--accent:var(--pink);--accent-on:#1b1b1b;--codebg:#0a0f0c;--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35)}}
:root[data-theme=light]{--bg:#fff;--fg:#1b1b1b;--muted:#5b6660;--card:#f5f7f6;--line:#e2e8e5;--accent:var(--green);--accent-on:#fff;--codebg:#0f1512}
:root[data-theme=dark]{--bg:#0e1310;--fg:#eef2f0;--muted:#9aa8a1;--card:#161d19;--line:#28322c;--accent:var(--pink);--accent-on:#1b1b1b;--codebg:#0a0f0c}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"SF Pro Display","SF Pro Text","Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;line-height:1.6;text-wrap:pretty;-webkit-font-smoothing:antialiased}
.wrap{max-width:900px;margin:0 auto;padding:0 20px}
a{color:var(--accent);text-decoration:none}
header{position:sticky;top:0;z-index:11;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:14px;padding:11px 0}
.mark{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--fg);letter-spacing:-.01em}
.logo{width:26px;height:26px;border-radius:50%;flex:0 0 auto;object-fit:cover}
.spacer{flex:1}.topnav{display:flex;gap:14px;font-size:14px;font-weight:600}
.strip{border-top:1px solid var(--line)}
.sinner{max-width:900px;margin:0 auto;display:flex;gap:6px;align-items:center;padding:7px 20px;overflow-x:auto}
.slab{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);flex:0 0 auto;margin-right:4px;white-space:nowrap}
.snum{flex:0 0 auto;min-width:30px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-weight:800;font-size:12px;display:grid;place-items:center;padding:0 6px;font-variant-numeric:tabular-nums;position:relative}
.snum i{font-style:normal;color:var(--ok);font-size:9px;position:absolute;top:1px;right:2px}
.snum:hover{border-color:var(--accent);color:var(--fg)}
.snum.current{background:var(--accent);color:var(--accent-on);border-color:transparent}
h1{font-size:clamp(28px,5vw,44px);line-height:1.1;letter-spacing:-.02em;margin:.3em 0 .15em}
h2{font-size:clamp(20px,3.2vw,26px);letter-spacing:-.01em;margin:34px 0 6px}
h3{font-size:16px;margin:22px 0 8px;display:flex;align-items:center;gap:8px}
.hint{font-size:12px;font-weight:600;color:var(--muted)}
.hero{padding:40px 0 8px}.kicker{color:var(--accent);font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.meta{color:var(--muted);font-size:15px}.meta b{color:var(--fg)}
.lead{color:var(--muted);font-size:15px}
.bigcall{border:1px solid color-mix(in srgb,var(--ok) 40%,var(--line));background:color-mix(in srgb,var(--ok) 8%,var(--bg));border-radius:14px;padding:16px 18px;margin:18px 0;font-size:14.5px}
.bigcall b{color:var(--fg)}
.rstar{display:inline-block;background:var(--ok);color:#fff;font-size:12px;font-weight:800;padding:2px 9px;border-radius:999px;margin-right:8px;white-space:nowrap}
.rtag{display:inline-block;background:var(--ok);color:#fff;font-size:12px;font-weight:800;padding:2px 9px;border-radius:999px;vertical-align:middle}
.rtag.sm{font-size:10px;padding:1px 7px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:12px 0}
.scard{display:block;border:1px solid var(--line);border-radius:14px;padding:14px 15px;background:var(--card);box-shadow:var(--shadow);color:var(--fg)}
.scard:hover{border-color:var(--accent);transform:translateY(-1px)}
.sc-top{display:flex;align-items:center;gap:8px}
.sc-n{width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--accent-on);font-weight:800;display:grid;place-items:center;font-size:13px;font-variant-numeric:tabular-nums}
.sc-time{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.sc-t{font-weight:800;font-size:15.5px;margin:9px 0 4px}
.sc-see{font-size:13px;color:var(--muted);line-height:1.5}
.sc-b{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px}
.badge{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.b-real{background:var(--ok);color:#fff}
.b-rep{background:transparent;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.b-ctx{background:color-mix(in srgb,var(--muted) 18%,var(--bg));color:var(--fg)}
.b-gold{background:#8a6d00;color:#fff}
.b-out{background:transparent;color:var(--muted);border-color:var(--line)}
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
.tk{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--card);font-size:14px}
.tk b{display:block;margin-bottom:3px}
@media(max-width:560px){.tracks{grid-template-columns:1fr}}
.note{border:1px dashed var(--line);border-radius:12px;padding:12px 15px;margin:12px 0;font-size:13.5px;color:var(--muted)}
.note b{color:var(--fg)}
.callout{border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--bg));border-radius:14px;padding:15px 18px;margin:12px 0;font-size:14px}
.callout .lab{font-weight:800;color:var(--accent);font-size:12px;letter-spacing:.02em;text-transform:uppercase;margin-bottom:5px}
.callout b{color:var(--fg)}
.scn-hd{display:flex;gap:14px;align-items:center;padding:28px 0 6px}
.scn-n{width:44px;height:44px;border-radius:12px;background:var(--accent);color:var(--accent-on);font-weight:800;font-size:20px;display:grid;place-items:center;flex:0 0 auto;font-variant-numeric:tabular-nums}
.scn-t{font-size:22px;font-weight:800;letter-spacing:-.01em}
.scn-m{color:var(--muted);font-size:13.5px;margin-top:2px}
.seebox,.outbox{display:grid;grid-template-columns:96px 1fr;gap:12px;border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin:12px 0;background:var(--card);align-items:start}
.outbox{border-color:color-mix(in srgb,var(--ok) 35%,var(--line))}
.seebox .k,.outbox .k,.how .k{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);white-space:nowrap;padding-top:3px}
.outbox .k{color:var(--ok)}
.ditems{display:grid;gap:10px;margin:8px 0}
.ditem{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--card)}
.dhead{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px}
.dhead code{font-size:12.5px}
.dprev{background:var(--bg);border:1px dashed var(--line);border-radius:8px;padding:8px 11px;font-size:12.5px;color:var(--muted);margin-top:8px;overflow-x:auto}
.dprev b{color:var(--fg)}
.prov{font-size:12px;color:var(--muted);margin-top:6px}
.ptag{display:inline-block;font-size:12px;font-weight:800;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:2px 9px;margin:2px 0}
.how{display:grid;gap:8px;font-size:14px}
.how>div{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:start}
pre{position:relative;background:var(--codebg);color:var(--codefg);border-radius:12px;padding:14px 15px;overflow-x:auto;font-size:13px;line-height:1.55;margin:8px 0}
code{font-family:"SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace}
p code,li code,.dhead code,.how code{background:color-mix(in srgb,var(--accent) 12%,var(--bg));color:var(--fg);padding:1px 6px;border-radius:6px;font-size:.88em}
.copybtn{position:absolute;top:7px;right:7px;font:700 11px/1 system-ui,sans-serif;padding:5px 9px;border-radius:7px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.10);color:#dfe9e3;cursor:pointer}
.copybtn:hover{background:rgba(255,255,255,.20)}.copybtn.ok{background:var(--ok);border-color:transparent;color:#fff}
.rail{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:26px 0 10px;flex-wrap:wrap}
.rbtn{border:1px solid var(--line);border-radius:10px;padding:9px 13px;background:var(--card);color:var(--fg);font-size:13.5px;font-weight:600;flex:1 1 auto;text-align:center}
.rbtn:hover{border-color:var(--accent)}.rbtn.mid{flex:0 0 auto;color:var(--accent)}
table{width:100%;border-collapse:collapse;margin:10px 0;font-size:13.5px}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--card);font-weight:700}.scroll{overflow-x:auto}
footer{max-width:900px;margin:30px auto 60px;padding:20px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scard:hover{transform:none}}