:root{
  --bg:#f7f4ee; --card:#efeae1;
  --fg:#17140f; --muted:rgba(23,20,15,.72); --faint:rgba(23,20,15,.60); --line:rgba(23,20,15,.15);
  --magenta:#c400b4; --magenta-dark:#a3009a; --aqua:#007f8c; --aqua-ink:#00636d; --aqua-soft:#cfe6e4;
  --sans:"Syne",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:18px;line-height:1.76;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
ul,ol{list-style:none}
::selection{background:var(--aqua-soft);color:var(--fg)}
.wrap{max-width:720px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.mono b{color:var(--magenta);font-weight:500}
.hl{background:linear-gradient(transparent 62%,var(--aqua-soft) 62%);padding:0 .04em}
strong{font-weight:700}

.head{padding-top:34px;padding-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-weight:800;font-size:1.14rem;letter-spacing:-.02em;text-decoration:none}
.logo em{font-style:normal;color:var(--magenta)}
.rule{height:1px;background:var(--line);border:none}

.crumbs{padding-top:18px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.crumbs a{text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--fg);border-bottom-color:var(--line)}

article{padding-top:26px}
h1{font-weight:700;font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.1;letter-spacing:-.03em;max-width:24ch}
.lead{margin-top:18px;font-size:1.12rem;line-height:1.65;color:var(--muted);max-width:58ch}
.lead strong{color:var(--fg)}
.meta{margin-top:18px;padding-bottom:20px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}

.tldr{margin-top:26px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.tldr .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--aqua-ink);margin-bottom:6px}
.tldr p{margin:0;color:var(--fg);font-size:.98rem;line-height:1.6}

h2{font-weight:700;font-size:1.38rem;line-height:1.25;letter-spacing:-.02em;margin-top:44px;max-width:26ch}
h3{font-weight:700;font-size:1.04rem;letter-spacing:-.01em;margin-top:26px}
p{margin-top:16px;color:var(--muted)}
p strong,p b{color:var(--fg)}
p a,li a{color:var(--magenta);text-decoration:none;border-bottom:1px solid rgba(196,0,180,.28)}
p a:hover,li a:hover{border-bottom-color:var(--magenta)}
ul.list,ol.list{margin-top:16px;border-top:1px solid var(--line)}
ul.list li,ol.list li{padding:11px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:.98rem;line-height:1.6}
ul.list li b,ol.list li b{color:var(--fg)}
blockquote{margin-top:24px;border-left:2px solid var(--aqua);padding:2px 0 2px 18px;color:var(--fg);font-size:1.04rem;line-height:1.6}
blockquote span{display:block;margin-top:8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.note{margin-top:26px;border-left:2px solid var(--magenta);padding:2px 0 2px 18px;font-size:.96rem;color:var(--muted)}
.note b{color:var(--fg)}

.table{width:100%;margin-top:22px;border-collapse:collapse;font-size:.92rem}
.table caption{text-align:left;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding-bottom:8px}
.table th,.table td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.table th{font-weight:700;color:var(--fg);width:38%}
.table td{color:var(--muted)}

.cta{margin-top:46px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 24px}
.cta .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--magenta-dark);margin-bottom:8px}
.cta h2{margin:0;font-size:1.28rem;max-width:26ch}
.cta p{margin-top:10px;font-size:.98rem}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;padding:14px 22px;border-radius:8px;background:var(--magenta);color:#fff;border:1px solid var(--magenta);text-decoration:none;margin-top:18px;transition:transform .25s var(--ease),background .25s}
.btn:hover{background:var(--magenta-dark);transform:translateY(-1px)}
.btn .arrow{font-family:var(--sans);font-size:1rem;line-height:1}

.next{margin-top:48px;border-top:1px solid var(--line);padding-top:22px}
.next .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.next a{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
.next .n{font-family:var(--mono);font-size:.72rem;color:var(--aqua-ink);flex:none;width:24px}
.next .t{font-weight:700;font-size:1rem;flex:none;width:230px;letter-spacing:-.01em}
.next .d{color:var(--muted);font-size:.92rem;line-height:1.5}
.next a:hover .t{color:var(--magenta)}
@media(max-width:560px){.next a{flex-wrap:wrap;gap:2px 12px}.next .t{width:auto}.next .d{width:100%}}

.sign{margin-top:38px;font-size:.98rem;line-height:1.7}
.sign b{font-weight:700}
.sign .mut{color:var(--muted)}
.sign a{color:var(--magenta);text-decoration:none}

.foot{margin-top:40px;border-top:1px solid var(--line)}
.foot .in{padding:20px 0 46px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:.64rem;letter-spacing:.05em;color:var(--faint)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--muted)}

:where(a,button,summary):focus-visible{outline:2px solid var(--aqua);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
