:root{--paper:#fff;--card:#fff;--ink:#111;--green:#111;--muted:#626262;--line:#d7d7d7;--wash:#f4f4f4;--orange:#111;--yellow:#edff00}
html{scroll-behavior:smooth}body{background:#f5f5f5;color:#111;font-family:Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',sans-serif}a,button{transition:background .18s,color .18s,transform .18s}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #666;outline-offset:5px}.wrap{width:min(1120px,calc(100% - 80px))}.demo{background:#111;color:#fff;padding:8px 16px;letter-spacing:.08em}.header{border:0;background:#f5f5f5}.header .wrap{padding:28px 0}.brand{font-size:27px;letter-spacing:.06em;line-height:1.6}.brand small{letter-spacing:.14em;font-weight:500;margin-top:4px}.nav{font-weight:700;gap:28px}.nav>a:last-child{background:#111;color:#fff;padding:12px 20px}.nav>a:last-child:hover{background:#333}
.hero{display:grid;grid-template-columns:1.05fr 1fr;column-gap:36px;row-gap:0;padding:44px 44px 36px;background:white;border-radius:44px;margin:18px 0 40px;position:relative;overflow:hidden}.hero-copy{padding:12px 0}.kicker{font-weight:700;letter-spacing:.13em;color:#111}.hero h1{font-size:clamp(38px,4.4vw,62px);font-weight:800;letter-spacing:.035em;line-height:1.55;margin:20px 0 24px}.hero mark{background:linear-gradient(transparent 70%,var(--yellow) 70%);color:#111}.intro{color:#222;font-size:16px;line-height:2}.hero-art{align-self:center;min-width:0}.hero-art img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}.finder{grid-column:1/-1;background:#fff;border:0;border-top:1px solid #111;border-radius:0;padding:26px 0 0;margin-top:12px;display:grid;grid-template-columns:1fr 1.5fr;gap:6px 32px;align-items:center}.finder>.kicker{grid-column:1;grid-row:1}.finder h2{font-size:25px;grid-column:1;grid-row:2;margin:0}.search{grid-column:2;grid-row:1/3;margin:0;border:2px solid #111;border-radius:0;padding:5px}.search input{font-size:16px;padding:12px}.search .btn{min-width:82px}.btn{background:#111;border:2px solid #111;color:white;border-radius:0;padding:12px 20px;font-size:14px;font-weight:700}.btn:hover{background:var(--yellow);color:#111}.examples{grid-column:2;grid-row:3;margin-top:10px;gap:14px}.finder-note{grid-column:1;grid-row:3;margin:10px 0 0;font-size:13px}.principles{border:0;border-bottom:1px solid #111;padding:0 0 32px;margin-bottom:74px;gap:28px;font-weight:700}.principles span{display:inline-block;color:#111;font-family:Arial,sans-serif;font-size:14px;border:1px solid #111;border-radius:50%;width:32px;height:32px;line-height:30px;text-align:center;margin-right:10px}
.heading{margin-bottom:28px}.heading h2{font-size:32px;letter-spacing:.04em}.heading .kicker{font-size:15px;letter-spacing:.12em}.filters{gap:12px;margin-bottom:30px}.chip{border:1px solid #111;background:white;font-weight:700;padding:10px 22px;border-radius:24px}.chip.active{background:#111;color:#fff}.chip:hover{background:var(--yellow);color:#111}.grid{gap:26px}.card{border:0;border-radius:0;background:transparent}.card>a{background:white;border:1px solid #111}.card:hover{border-color:#111}.card:hover>a{background:#fafafa}.card-index{background:#fff;border-bottom:1px solid #111;padding:23px 24px;color:#111}.card-index span{font-family:Arial,sans-serif;font-size:48px;font-weight:800;letter-spacing:-.04em}.card-index small{border:1px solid #111;border-radius:20px;padding:3px 12px;font-weight:700;font-size:12px}.body{padding:26px 24px 30px}.body .kicker{font-size:12px;font-weight:500;letter-spacing:.04em}.body h3{font-size:21px;line-height:1.65;margin:10px 0 15px}.body p{font-size:14px;color:#555}.cardfoot{margin:0;border:1px solid #111;border-top:0;padding:15px 18px;background:white;align-items:center;flex-wrap:wrap}.save{font-weight:700;font-size:13px}.save[aria-pressed=true]{color:#111;background:var(--yellow)}.empty{background:white;border:1px solid #111}
.community{background:var(--yellow);color:#111;border:0;border-radius:0;padding:44px;margin:80px 0 64px}.community .kicker{color:#111!important}.community h2{font-size:30px;line-height:1.65;margin:12px 0 18px}.community p{font-size:14px}.community .btn{background:#111;color:#fff;border-color:#111;padding:16px 28px}.community .btn:hover{background:#fff;color:#111}.footer{background:#111;color:white;padding:42px 0;border:0;margin-top:70px}.footer strong{font-size:23px}.footer p{color:#ccc;font-size:12px;line-height:2;max-width:950px}
.crumb{padding:28px 0;font-size:14px}.layout{gap:36px;grid-template-columns:minmax(0,1fr) 235px}.article{background:#fff;padding:38px;min-width:0}.article h1{font-size:36px;line-height:1.55}.article h2{font-size:24px;border-bottom:1px solid #111;padding-bottom:16px}.article h3{font-size:18px}.article p,.step p{font-size:16px}.metrics{border:1px solid #111}.metrics strong{font-size:15px}.metrics>div+div{border-left:1px solid #111}.box{border-left:3px solid #111;background:#f1f1f1}.warning{background:#f6f6d9;border-color:#111}.warning p{font-size:14px}.branch,.tool{border:1px solid #bbb;border-radius:0;padding:20px}.branch p,.tool p{font-size:14px}.badge{font-size:13px}.step .num{background:#fff;border:1px solid #111;color:#111;font-weight:bold}.aside{border:1px solid #111;border-radius:0;padding:23px;top:24px}.aside a{font-size:14px;padding:12px 0}.aside a:hover{text-decoration:underline}.feedback{background:#f2f2f2}.feedback .btn{margin-bottom:10px}.article .related{font-size:14px;line-height:2}.btn.outline:hover{background:var(--yellow)}dialog{background:#fff;border:2px solid #111;border-radius:18px;padding:32px}dialog::backdrop{background:#0009}dialog h2{font-size:26px}dialog input,dialog textarea{border:1px solid #888;border-radius:0}#toast{background:#111;color:white;border-radius:0}.sources a{overflow-wrap:anywhere}
@media(max-width:1000px){.wrap{width:calc(100% - 48px)}.hero{padding:32px;gap:22px}.hero h1{font-size:43px}.nav{gap:15px}.nav>a:last-child{padding:10px 12px}.principles{gap:12px;font-size:13px}.grid{grid-template-columns:repeat(2,1fr)}.layout{display:block}.aside{display:none}.finder{gap:8px 20px}.finder h2{font-size:22px}.finder-note{font-size:12px}}
@media(max-width:650px){.wrap{width:calc(100% - 32px)}.header .wrap{padding:20px 0;align-items:center;gap:12px}.brand{font-size:21px}.brand small{font-size:10px;letter-spacing:.08em}.nav{font-size:12px;gap:8px;align-items:end}.nav>a:last-child{padding:5px 9px}.hero{grid-template-columns:1fr;padding:30px 24px 26px;border-radius:28px;margin:8px 0 30px;gap:0}.hero h1{font-size:42px;margin:16px 0 20px}.intro{font-size:14px}.hero-art{width:min(100%,320px);margin:0 auto}.finder{display:block;margin-top:4px;padding-top:22px}.finder h2{margin:8px 0 18px;font-size:23px}.search{margin:0}.search input{width:100%;font-size:14px;padding:10px 6px}.search .btn{min-width:62px;padding:10px}.examples{font-size:12px;gap:10px}.finder-note{margin-top:16px;font-size:12px}.principles{grid-template-columns:1fr;gap:12px;padding-bottom:30px;margin-bottom:44px;font-size:14px}.principles span{display:inline-block;width:28px;height:28px;line-height:26px;font-size:12px}.heading h2{font-size:24px}.heading .kicker{font-size:13px}.filters{gap:8px}.chip{padding:8px 14px;font-size:13px}.grid{grid-template-columns:1fr;gap:25px}.card-index{padding:18px 24px}.card-index span{font-size:42px}.community{margin:48px 0;padding:30px 24px}.community h2{font-size:25px}.community .btn{margin-top:20px}.article{padding:26px 20px}.article h1{font-size:28px}.article h2{font-size:22px}.metrics{grid-template-columns:1fr}.metrics>div+div{border-left:0;border-top:1px solid #111}.box,.warning{padding:18px}.article p,.step p{font-size:15px}.footer{margin-top:45px}.footer strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}a,button{transition:none}}