@font-face{font-family:"Hanken Grotesk";font-weight:300 700;font-style:normal;font-display:swap;src:url(../fonts/hanken-grotesk-variable.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/caveat-600.woff2) format("woff2")}
:root{
  --pd-ground:#faf9f6;--pd-ground-2:#f3f1ec;--pd-surface:#fff;--pd-ink:#17142b;--pd-ink-2:#4a4560;--pd-ink-3:#8a8699;--pd-hair:#e3e0d9;
  --pd-action:#4f46e5;--pd-link:#1d4ed8;--pd-link-hover:#1e3a8a;--pd-action-ink:#fff;
  --pd-need:#d2a24a;--pd-need-soft:#f3e7ce;--pd-run:#c7c3f7;--pd-run-soft:#e8e6fc;--pd-done:#9fe3b8;--pd-done-soft:#def4e6;
  --pd-hw:1.25px;--pd-bw:1.75px;--pd-xw:2.5px;
  --pd-r-sm:10px;--pd-r-md:16px;--pd-r-lg:22px;--pd-r-pill:999px;
  --pd-s1:4px;--pd-s2:8px;--pd-s3:12px;--pd-s4:16px;--pd-s5:24px;--pd-s6:32px;--pd-s7:48px;--pd-s8:72px;
  --pd-sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;--pd-script:"Caveat",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--pd-ground);color:var(--pd-ink-2);font:400 16px/1.6 var(--pd-sans)}
.wrap{max-width:1040px;margin:0 auto;padding:var(--pd-s5) var(--pd-s4) var(--pd-s8)}
header.top{display:flex;align-items:center;justify-content:space-between;gap:var(--pd-s4);padding:var(--pd-s3) 0 var(--pd-s5)}
header.top img{height:40px;display:block}
.tag{font:600 12px/1 var(--pd-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--pd-ink-3)}
h1{margin:0 0 var(--pd-s3);color:var(--pd-ink);font:700 clamp(30px,5vw,46px)/1.1 var(--pd-sans);letter-spacing:-.02em}
h2{margin:var(--pd-s8) 0 var(--pd-s3);color:var(--pd-ink);font:700 28px/1.2 var(--pd-sans);letter-spacing:-.01em}
h3{margin:0 0 var(--pd-s2);color:var(--pd-ink);font:700 18px/1.3 var(--pd-sans)}
p{margin:0 0 var(--pd-s3)}
.aside{font:600 22px/1.2 var(--pd-script);color:var(--pd-ink-2);margin:0 0 var(--pd-s3)}
.lead{font-size:18px;max-width:760px}
.card{background:var(--pd-surface);border:var(--pd-bw) solid var(--pd-ink);border-radius:var(--pd-r-lg);padding:var(--pd-s5)}
.card.soft{background:var(--pd-ground-2);border-width:var(--pd-hw)}
.grid{display:grid;gap:var(--pd-s4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pill{display:inline-block;padding:3px 10px;border:var(--pd-hw) solid var(--pd-ink);border-radius:var(--pd-r-pill);font:600 12px/1.4 var(--pd-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--pd-ink)}
.pill.you{background:var(--pd-need-soft)}
.pill.us{background:var(--pd-run-soft)}
.pill.ok{background:var(--pd-done-soft)}
.btn{display:inline-block;padding:10px 18px;border:var(--pd-bw) solid var(--pd-ink);border-radius:var(--pd-r-pill);background:var(--pd-action);color:var(--pd-action-ink);font:600 15px/1 var(--pd-sans);text-decoration:none}
.flow{list-style:none;margin:0;padding:0;display:grid;gap:var(--pd-s3)}
.flow li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:var(--pd-s3);background:var(--pd-surface);border:var(--pd-hw) solid var(--pd-ink);border-radius:var(--pd-r-md);padding:var(--pd-s3) var(--pd-s4)}
.num{width:36px;height:36px;border:var(--pd-bw) solid var(--pd-ink);border-radius:50%;display:grid;place-items:center;font:700 16px/1 var(--pd-sans);color:var(--pd-ink);background:var(--pd-ground)}
.step{margin:var(--pd-s7) 0;scroll-margin-top:var(--pd-s5)}
.step-head{display:flex;align-items:center;gap:var(--pd-s3);margin-bottom:var(--pd-s3);flex-wrap:wrap}
.step-head h2{margin:0}
figure{margin:var(--pd-s4) 0;background:var(--pd-surface);border:var(--pd-bw) solid var(--pd-ink);border-radius:var(--pd-r-md);overflow:hidden}
figure img{display:block;width:100%;height:auto}
figcaption{padding:var(--pd-s2) var(--pd-s4);border-top:var(--pd-hw) solid var(--pd-ink);background:var(--pd-ground-2);font:500 14px/1.5 var(--pd-sans);color:var(--pd-ink-2)}
.note{border:var(--pd-hw) solid var(--pd-ink);border-radius:var(--pd-r-md);padding:var(--pd-s3) var(--pd-s4);margin:var(--pd-s4) 0}
.note.warn{background:var(--pd-need-soft)}
.note.info{background:var(--pd-run-soft)}
.note.good{background:var(--pd-done-soft)}
.note strong{color:var(--pd-ink)}
code{font:500 .9em ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--pd-ground-2);border:var(--pd-hw) solid var(--pd-hair);border-radius:6px;padding:1px 6px;color:var(--pd-ink)}
table{width:100%;border-collapse:separate;border-spacing:0;border:var(--pd-bw) solid var(--pd-ink);border-radius:var(--pd-r-md);overflow:hidden;background:var(--pd-surface);font-size:15px}
th,td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:var(--pd-hw) solid var(--pd-hair)}
th{background:var(--pd-ground-2);color:var(--pd-ink);font-weight:700}
tr:last-child td{border-bottom:0}
details{background:var(--pd-surface);border:var(--pd-hw) solid var(--pd-ink);border-radius:var(--pd-r-md);padding:var(--pd-s3) var(--pd-s4);margin:var(--pd-s2) 0}
summary{cursor:pointer;font-weight:700;color:var(--pd-ink)}
ul,ol{margin:0 0 var(--pd-s3);padding-left:22px}
li{margin:4px 0}
footer{margin-top:var(--pd-s8);padding-top:var(--pd-s4);border-top:var(--pd-hw) solid var(--pd-hair);font-size:14px;color:var(--pd-ink-3)}
:focus-visible{outline:2px solid var(--pd-action);outline-offset:2px}
@media (max-width:640px){.flow li{grid-template-columns:36px 1fr}.flow li .pill{grid-column:2}}

a{color:var(--pd-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--pd-link-hover);text-decoration-thickness:2px}
.contents{margin:var(--pd-s5) 0 0}
.contents h2{margin:0 0 var(--pd-s3);font-size:24px}
.contents-list{margin:0;padding-left:22px}
.contents-list li{margin:6px 0}
.contents-list a{color:var(--pd-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--pd-ink-3);text-decoration-thickness:1px;text-underline-offset:3px}
.contents-list a:hover{text-decoration-color:var(--pd-ink);text-decoration-thickness:2px}
.contents-desc{color:var(--pd-ink-2)}