/* Nunito: Google Fonts, SIL Open Font License or Apache 2.0; latin subset */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url(/fonts/nunito-normal-700-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Figtree: Google Fonts, SIL Open Font License or Apache 2.0; latin subset */
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/figtree-italic-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/figtree-normal-400-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* First Thousand Flips */
*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#FBF5EA; --ink:#1D2138; --muted:#5E5B6F; --accent:#CD4822;
  --accent-ink:#B43A1B; --accent-soft:#FDE3D7; --tint:#F5EBDB;
  --line:#EAD9C3; --card:#FFFDF9;
  --maxw:66ch;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#141726; --ink:#F4ECDF; --muted:#ACA9C0; --accent:#FF7D57;
    --accent-ink:#FF9C7E; --accent-soft:#3B2433; --tint:#1A1E31;
    --line:#2E3350; --card:#1C2034;
    color-scheme:dark;
  }
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:"Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; line-height:1.18; letter-spacing:-0.02em;
  text-transform:none; margin:0 0 .5em; font-weight:800}
h1{font-size:clamp(2rem,1.35rem + 2.4vw,3rem)}
h2{font-size:clamp(1.4rem,1.15rem + 1.1vw,1.85rem); margin-top:2.2em}
h3{font-size:1.15rem; margin-top:1.9em}
p,ul,ol,table{margin:0 0 1.1em}
a{color:var(--accent-ink); text-underline-offset:2px; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:2px}
img{max-width:100%; height:auto}
.photo{margin:0 0 1.6em}
.photo img{display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; border-radius:18px;
  background:var(--tint)}
hr{border:0; border-top:1px solid var(--line); margin:2.5rem 0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",Consolas,monospace; font-size:.9em; background:var(--tint);
  padding:.12em .38em; border-radius:14px}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
.prose{max-width:var(--maxw)}
.skip{position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff;
  padding:.7rem 1rem; z-index:99; border-radius:0 0 14px 0}
.skip:focus{left:0}

/* header */
header.site{border-bottom:1px solid var(--line); background:var(--bg);
  position:sticky; top:0; z-index:20}
header.site .wrap{display:flex; align-items:center; gap:1.25rem;
  min-height:62px; flex-wrap:wrap}
.brand{font-family:"Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; font-weight:800; font-size:1.05rem; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:.55rem;
  margin-right:auto; padding:.4rem 0}
.brand .mk{width:22px; height:22px; flex:none}
nav.main{display:flex; gap:1.1rem; flex-wrap:wrap}
nav.main a{color:var(--muted); text-decoration:none; font-size:.94rem; padding:.4rem 0;
  border-bottom:2px solid transparent}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent)}

/* hero */
.hero{background:linear-gradient(170deg,var(--tint) 0%,var(--bg) 72%); --hero-fg:var(--ink);--hero-muted:var(--muted); padding:clamp(2.5rem,6vw,4.5rem) 0; color:var(--hero-fg)}
.hero h1{max-width:19ch; color:var(--hero-fg)}
.hero .lede{font-size:clamp(1.05rem,1rem + .4vw,1.28rem); max-width:56ch;
  color:var(--hero-muted); margin-bottom:1.6rem}
.kicker{font-family:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",Consolas,monospace; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-ink); margin:0 0 .9rem; font-weight:600}
.hero .kicker{color:var(--hero-fg); opacity:.75}
.hero.underline h1{padding-bottom:.35em; border-bottom:6px solid var(--accent);
  display:inline-block; max-width:100%}
.hero.bar{padding-left:0}
.hero.bar .wrap{padding-left:34px}

/* buttons */
.btn{display:inline-block; background:var(--accent); color:#fff; padding:.72rem 1.25rem;
  border-radius:18px; text-decoration:none; font-weight:600; font-size:.97rem;
  border:1px solid transparent; cursor:pointer; font-family:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}
.btn:hover{filter:brightness(.93)}
.btn.ghost{background:transparent; color:var(--hero-fg); border-color:currentColor; opacity:.85}
.btn.ghost:hover{opacity:1; filter:none}
.btns{display:flex; gap:.7rem; flex-wrap:wrap}

/* layout */
main{padding:2.5rem 0 3.5rem}
.cols{display:grid; grid-template-columns:minmax(0,1fr); gap:2.5rem}
@media (min-width:900px){.cols{grid-template-columns:minmax(0,1fr) 270px; gap:3.5rem}}
.cards{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  padding:0; list-style:none; margin:1.6rem 0}
.card{background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:1.15rem 1.2rem; display:flex; flex-direction:column; gap:.4rem}
.card h3{margin:0; font-size:1.05rem}
.card p{margin:0; color:var(--muted); font-size:.94rem}
.card a{text-decoration:none; color:var(--ink)}
.card a:hover{color:var(--accent-ink)}
.card .rt{font-size:.8rem; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",Consolas,monospace}

/* prose furniture */
.prose h2{scroll-margin-top:80px}
.prose h3{scroll-margin-top:80px}
.prose li{margin-bottom:.4em}
.key{font-size:1.05rem; border-left:3px solid var(--accent); padding:.1rem 0 .1rem 1rem;
  margin:1.5rem 0; font-weight:500}
.note{background:var(--tint); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:0 18px 18px 0; padding:1rem 1.15rem; margin:1.6rem 0}
.note p{margin:0 0 .5em} .note p:last-child{margin:0}
.note-t{font-weight:700; font-family:"Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; font-size:.95rem}
.note.warn{border-left-color:#B43A1B}
blockquote{margin:1.6rem 0; padding-left:1.2rem; border-left:3px solid var(--line);
  color:var(--muted); font-style:italic}
.tw{overflow-x:auto; margin:1.6rem 0; border:1px solid var(--line); border-radius:18px}
table{border-collapse:collapse; width:100%; font-size:.93rem; margin:0}
caption{text-align:left; padding:.8rem 1rem .2rem; color:var(--muted); font-size:.86rem}
th,td{padding:.62rem .85rem; text-align:left; border-bottom:1px solid var(--line);
  vertical-align:top}
th{background:var(--tint); font-family:"Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; font-size:.86rem; letter-spacing:.01em}
tbody tr:last-child td{border-bottom:0}
ol.steps{list-style:none; counter-reset:s; padding:0; margin:1.6rem 0}
ol.steps li{counter-increment:s; position:relative; padding-left:3rem; margin-bottom:1.2rem}
ol.steps li::before{content:counter(s); position:absolute; left:0; top:0;
  width:2rem; height:2rem; border-radius:18px; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-family:"Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; font-weight:700; font-size:.9rem}
ol.steps strong{display:block; font-family:"Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; margin-bottom:.15rem}
ol.steps span{color:var(--muted)}
.faq details{border-bottom:1px solid var(--line); padding:.9rem 0}
.faq summary{cursor:pointer; font-weight:600; font-family:"Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; list-style:none;
  display:flex; justify-content:space-between; gap:1rem; align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent-ink); font-weight:700; flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq details>div{padding-top:.6rem; color:var(--muted)}
.faq details>div p:last-child{margin:0}

/* breadcrumbs, meta, toc */
.crumbs{font-size:.85rem; color:var(--muted); margin:0 0 1.2rem}
.crumbs a{color:var(--muted)}
.crumbs span{padding:0 .4rem}
.pmeta{font-size:.86rem; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",Consolas,monospace;
  margin:0 0 1.8rem; display:flex; gap:1rem; flex-wrap:wrap}
.toc{background:var(--tint); border-radius:18px; padding:1rem 1.2rem; margin:0 0 2rem;
  border:1px solid var(--line)}
.toc p{margin:0 0 .5rem; font-family:"Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; font-weight:700; font-size:.9rem}
.toc ol{margin:0; padding-left:1.1rem; font-size:.93rem}
.toc li{margin-bottom:.28em}
aside.rail{font-size:.93rem}
aside.rail h2{font-size:.82rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); margin:0 0 .8rem; font-family:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",Consolas,monospace; font-weight:600}
aside.rail ul{list-style:none; padding:0; margin:0 0 2rem}
aside.rail li{margin-bottom:.6rem; line-height:1.4}
aside.rail a{text-decoration:none; color:var(--ink)}
aside.rail a:hover{color:var(--accent-ink); text-decoration:underline}
.rail-box{background:var(--tint); border:1px solid var(--line); border-radius:18px;
  padding:1rem 1.1rem; margin-bottom:2rem}
.rail-box p{margin:0 0 .7rem; font-size:.9rem; color:var(--muted)}
.rail-box .btn{width:100%; text-align:center; font-size:.9rem; padding:.6rem 1rem}

/* tool */
.tool{background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:1.4rem; margin:2rem 0}
.tool .grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.tool label{display:block; font-size:.85rem; font-weight:600; margin-bottom:.3rem;
  font-family:"Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif}
.tool .hint{font-weight:400; color:var(--muted); font-size:.78rem; display:block}
.tool input,.tool select{width:100%; padding:.6rem .7rem; border:1px solid var(--line);
  border-radius:14px; background:var(--bg); color:var(--ink); font-size:1rem;
  font-family:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}
.tool input:focus,.tool select:focus{border-color:var(--accent)}
.out{margin-top:1.4rem; border-top:1px solid var(--line); padding-top:1.2rem}
.stats{display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
  margin:0 0 1rem; padding:0; list-style:none}
.stat{background:var(--tint); border-radius:14px; padding:.8rem .9rem}
.stat dt{font-size:.76rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); margin-bottom:.25rem; font-family:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",Consolas,monospace}
.stat dd{margin:0; font-size:1.5rem; font-weight:700; font-family:"Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  letter-spacing:-.02em; line-height:1.1}
.stat dd small{font-size:.85rem; font-weight:400; color:var(--muted); display:block;
  letter-spacing:0; margin-top:.15rem}
.verdict{font-size:1rem; padding:.85rem 1rem; border-radius:14px; background:var(--accent-soft);
  color:var(--ink); margin:0}
.tool table{font-size:.88rem}

/* mention + footer */
.mention{border:1px solid var(--line); border-left:4px solid var(--accent);
  background:var(--tint); border-radius:0 18px 18px 0; padding:1rem 1.2rem; margin:2rem 0;
  font-size:.95rem}
.mention p{margin:0}
.mention .lbl{font-family:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",Consolas,monospace; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.35rem}
footer.site{border-top:1px solid var(--line); background:var(--tint);
  padding:2.5rem 0; margin-top:3rem; font-size:.9rem; color:var(--muted)}
footer.site .fgrid{display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
footer.site h2{font-size:.8rem; text-transform:uppercase; letter-spacing:.1em;
  margin:0 0 .7rem; font-family:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",Consolas,monospace; color:var(--ink); font-weight:600}
footer.site ul{list-style:none; padding:0; margin:0}
footer.site li{margin-bottom:.45rem}
footer.site a{color:var(--muted); text-decoration:none}
footer.site a:hover{color:var(--accent-ink); text-decoration:underline}
.colophon{border-top:1px solid var(--line); margin-top:2rem; padding-top:1.5rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.85rem}
@media print{header.site,footer.site,aside.rail,.btns{display:none}}

.cols{grid-template-columns:minmax(0,1fr) !important; gap:2rem !important}
aside.rail{border-top:1px solid var(--line); padding-top:1.5rem; max-width:var(--maxw)}
aside.rail ul{columns:2; column-gap:2rem}
aside.rail .rail-box{max-width:32rem}
@media (max-width:640px){aside.rail ul{columns:1}}

.tool .grid > div.wide{grid-column:1/-1}
.tool textarea{width:100%; padding:.65rem .75rem; border:1px solid var(--line);
  border-radius:var(--rs,6px); background:var(--bg); color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.95rem;
  line-height:1.55; resize:vertical}
.tool textarea:focus{border-color:var(--accent)}
:root{ --i-bulb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 3a8 8 0 0 0-4.6 14.6c.8.6 1.3 1.4 1.3 2.4h6.6c0-1 .5-1.8 1.3-2.4A8 8 0 0 0 14 3zM10.8 22.5h6.4v1.3a1.7 1.7 0 0 1-1.7 1.7h-3a1.7 1.7 0 0 1-1.7-1.7z'/%3E%3C/svg%3E"); --i-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 2.5 26.5 25h-25zm-1.4 8.3.4 7.4h2l.4-7.4zm1.4 9.1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z' fill-rule='evenodd'/%3E%3C/svg%3E"); --hf:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,sans-serif; --bf:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --track-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 980 190' fill='none'%3E%3Cdefs%3E%3Cpath id='d0' d='m30 1q-13 0-20-9q-6-10-6-28q0-11 3-19q3-8 9-12q6-5 14-5q13 0 20 10q6 9 6 26q0 12-3 20q-3 8-9 13q-5 4-14 4zm0-13q6 0 9-5q2-6 2-19q0-12-2-18q-3-5-9-5q-6 0-9 5q-2 6-2 18q0 13 2 19q3 5 9 5z'/%3E%3Cpath id='d1' d='m16 0q-4 0-5-2q-2-1-2-4q0-4 2-5q1-2 5-2h10v-45h7l-15 9q-2 1-4 1q-2 0-3-2q-1-1-2-3q0-2 0-4q1-2 3-3l14-8q2-2 5-3q2 0 4 0q3 0 5 1q1 2 1 5v52h9q4 0 5 2q2 1 2 5q0 3-2 4q-1 2-5 2z'/%3E%3Cpath id='c' d='m15 11q-1 2-3 2q-2 1-3 0q-1-1-1-3q0-1 1-3q2-3 3-6q1-3 1-5l0 4q-4 0-6-2q-3-2-3-6q0-4 3-6q2-2 6-2q4 0 6 2q3 3 3 8q0 3-1 5q0 3-2 6q-1 3-4 6z'/%3E%3C/defs%3E%3Cpath d='M70 96 L98 104 L126 111 L154 117 L182 121 L210 122 L238 121 L266 117 L294 111 L322 104 L350 96 L378 88 L406 81 L434 75 L462 71 L490 70 L518 71 L546 75 L574 81 L602 88 L630 96 L658 104 L686 111 L714 117 L742 121 L770 122 L798 121 L826 117 L854 111 L882 104 L900 96' stroke='%23D9C8B0' stroke-width='3.1' stroke-linecap='round'/%3E%3Cpath d='M70 96 L98 104 L126 111 L154 117 L182 121 L210 122 L238 121 L266 117 L294 111 L322 104 L350 96' stroke='%23E4572E' stroke-width='7' stroke-linecap='round'/%3E%3Ccircle cx='154' cy='117' r='2.1' fill='%23FFFFFF'/%3E%3Ccircle cx='204' cy='122' r='2.1' fill='%23FFFFFF'/%3E%3Ccircle cx='239' cy='121' r='2.1' fill='%23FFFFFF'/%3E%3Ccircle cx='266' cy='117' r='2.1' fill='%23FFFFFF'/%3E%3Ccircle cx='288' cy='113' r='2.1' fill='%23FFFFFF'/%3E%3Ccircle cx='307' cy='108' r='2.1' fill='%23FFFFFF'/%3E%3Ccircle cx='434' cy='75' r='4.3' fill='%23C2AD90'/%3E%3Ccircle cx='484' cy='70' r='4.3' fill='%23C2AD90'/%3E%3Ccircle cx='519' cy='71' r='4.3' fill='%23C2AD90'/%3E%3Ccircle cx='546' cy='75' r='4.3' fill='%23C2AD90'/%3E%3Ccircle cx='568' cy='79' r='4.3' fill='%23C2AD90'/%3E%3Ccircle cx='587' cy='84' r='4.3' fill='%23C2AD90'/%3E%3Ccircle cx='714' cy='117' r='4.3' fill='%23C2AD90'/%3E%3Ccircle cx='764' cy='122' r='4.3' fill='%23C2AD90'/%3E%3Ccircle cx='799' cy='121' r='4.3' fill='%23C2AD90'/%3E%3Ccircle cx='826' cy='117' r='4.3' fill='%23C2AD90'/%3E%3Ccircle cx='848' cy='113' r='4.3' fill='%23C2AD90'/%3E%3Ccircle cx='867' cy='108' r='4.3' fill='%23C2AD90'/%3E%3Ccircle cx='70' cy='102' r='30' fill='%23B8401C'/%3E%3Ccircle cx='70' cy='96' r='30' fill='%23E4572E'/%3E%3Cg fill='%23FFFFFF' transform='translate(62.1 105.3) scale(0.2638)'%3E%3Cuse href='%23d1' x='0'/%3E%3C/g%3E%3Ccircle cx='350' cy='96' r='48.3' fill='%23FDE3D7'/%3E%3Ccircle cx='350' cy='102' r='34' fill='%23B8401C'/%3E%3Ccircle cx='350' cy='96' r='30.5' fill='%23FFFDF9' stroke='%23E4572E' stroke-width='7'/%3E%3Cg fill='%231D2138' transform='translate(332.1 106.5) scale(0.2990)'%3E%3Cuse href='%23d1' x='0'/%3E%3Cuse href='%23d0' x='60'/%3E%3C/g%3E%3Ccircle cx='630' cy='102' r='34' fill='%23E4D3BC'/%3E%3Ccircle cx='630' cy='96' r='32.5' fill='%23FFFDF9' stroke='%23CDB89C' stroke-width='3'/%3E%3Cg fill='%236B6880' transform='translate(608.3 104.5) scale(0.2411)'%3E%3Cuse href='%23d1' x='0'/%3E%3Cuse href='%23d0' x='60'/%3E%3Cuse href='%23d0' x='120'/%3E%3C/g%3E%3Ccircle cx='900' cy='102' r='40' fill='%23E4D3BC'/%3E%3Ccircle cx='900' cy='96' r='38.5' fill='%23FFFDF9' stroke='%23CDB89C' stroke-width='3'/%3E%3Cg fill='%231D2138' transform='translate(872.1 103.4) scale(0.2099)'%3E%3Cuse href='%23d1' x='0'/%3E%3Cuse href='%23c' x='60'/%3E%3Cuse href='%23d0' x='86'/%3E%3Cuse href='%23d0' x='146'/%3E%3Cuse href='%23d0' x='206'/%3E%3C/g%3E%3Cpath d='M906 50V12' stroke='%231D2138' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M908 12l25 8-25 9z' fill='%23E4572E'/%3E%3C/svg%3E"); --track-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 354 110' fill='none'%3E%3Cdefs%3E%3Cpath id='d0' d='m30 1q-13 0-20-9q-6-10-6-28q0-11 3-19q3-8 9-12q6-5 14-5q13 0 20 10q6 9 6 26q0 12-3 20q-3 8-9 13q-5 4-14 4zm0-13q6 0 9-5q2-6 2-19q0-12-2-18q-3-5-9-5q-6 0-9 5q-2 6-2 18q0 13 2 19q3 5 9 5z'/%3E%3Cpath id='d1' d='m16 0q-4 0-5-2q-2-1-2-4q0-4 2-5q1-2 5-2h10v-45h7l-15 9q-2 1-4 1q-2 0-3-2q-1-1-2-3q0-2 0-4q1-2 3-3l14-8q2-2 5-3q2 0 4 0q3 0 5 1q1 2 1 5v52h9q4 0 5 2q2 1 2 5q0 3-2 4q-1 2-5 2z'/%3E%3Cpath id='c' d='m15 11q-1 2-3 2q-2 1-3 0q-1-1-1-3q0-1 1-3q2-3 3-6q1-3 1-5l0 4q-4 0-6-2q-3-2-3-6q0-4 3-6q2-2 6-2q4 0 6 2q3 3 3 8q0 3-1 5q0 3-2 6q-1 3-4 6z'/%3E%3C/defs%3E%3Cpath d='M28 62 L38 65 L48 67 L58 69 L67 71 L77 71 L87 71 L97 69 L107 67 L117 65 L126 62 L136 59 L146 57 L156 55 L166 53 L176 53 L186 53 L195 55 L205 57 L215 59 L225 62 L235 65 L245 67 L255 69 L264 71 L274 71 L284 71 L294 69 L304 67 L314 65 L324 62' stroke='%23D9C8B0' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M28 62 L38 65 L48 67 L58 69 L67 71 L77 71 L87 71 L97 69 L107 67 L117 65 L126 62' stroke='%23E4572E' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='58' cy='69' r='1.5' fill='%23FFFFFF'/%3E%3Ccircle cx='75' cy='71' r='1.5' fill='%23FFFFFF'/%3E%3Ccircle cx='87' cy='71' r='1.5' fill='%23FFFFFF'/%3E%3Ccircle cx='97' cy='69' r='1.5' fill='%23FFFFFF'/%3E%3Ccircle cx='156' cy='55' r='3.1' fill='%23C2AD90'/%3E%3Ccircle cx='173' cy='53' r='3.1' fill='%23C2AD90'/%3E%3Ccircle cx='186' cy='53' r='3.1' fill='%23C2AD90'/%3E%3Ccircle cx='195' cy='55' r='3.1' fill='%23C2AD90'/%3E%3Ccircle cx='203' cy='56' r='3.1' fill='%23C2AD90'/%3E%3Ccircle cx='255' cy='69' r='3.1' fill='%23C2AD90'/%3E%3Ccircle cx='272' cy='71' r='3.1' fill='%23C2AD90'/%3E%3Ccircle cx='284' cy='71' r='3.1' fill='%23C2AD90'/%3E%3Ccircle cx='294' cy='69' r='3.1' fill='%23C2AD90'/%3E%3Ccircle cx='28' cy='66' r='18' fill='%23B8401C'/%3E%3Ccircle cx='28' cy='62' r='18' fill='%23E4572E'/%3E%3Cg fill='%23FFFFFF' transform='translate(23.3 67.6) scale(0.1583)'%3E%3Cuse href='%23d1' x='0'/%3E%3C/g%3E%3Ccircle cx='126' cy='62' r='29.8' fill='%23FDE3D7'/%3E%3Ccircle cx='126' cy='66' r='21' fill='%23B8401C'/%3E%3Ccircle cx='126' cy='62' r='18.5' fill='%23FFFDF9' stroke='%23E4572E' stroke-width='5'/%3E%3Cg fill='%231D2138' transform='translate(114.9 68.5) scale(0.1847)'%3E%3Cuse href='%23d1' x='0'/%3E%3Cuse href='%23d0' x='60'/%3E%3C/g%3E%3Ccircle cx='225' cy='66' r='22' fill='%23E4D3BC'/%3E%3Ccircle cx='225' cy='62' r='20.5' fill='%23FFFDF9' stroke='%23CDB89C' stroke-width='3'/%3E%3Cg fill='%236B6880' transform='translate(211.0 67.5) scale(0.1560)'%3E%3Cuse href='%23d1' x='0'/%3E%3Cuse href='%23d0' x='60'/%3E%3Cuse href='%23d0' x='120'/%3E%3C/g%3E%3Ccircle cx='320' cy='66' r='27' fill='%23E4D3BC'/%3E%3Ccircle cx='320' cy='62' r='25.5' fill='%23FFFDF9' stroke='%23CDB89C' stroke-width='3'/%3E%3Cg fill='%231D2138' transform='translate(301.2 67.0) scale(0.1417)'%3E%3Cuse href='%23d1' x='0'/%3E%3Cuse href='%23c' x='60'/%3E%3Cuse href='%23d0' x='86'/%3E%3Cuse href='%23d0' x='146'/%3E%3Cuse href='%23d0' x='206'/%3E%3C/g%3E%3Cpath d='M324 29V3' stroke='%231D2138' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M326 3l17 5-17 6z' fill='%23E4572E'/%3E%3C/svg%3E"); --ink-2:#3A3D55; --line-2:#DCC7AA; --edge:#E6D3B8; --coral:#E4572E; --coral-2:#A63A18; --on-accent:#fff; --accent-2:#B93F1C; --dot:rgba(29,33,56,.11); --focus:#1D2138; --shadow:0 1px 2px rgba(60,40,20,.05),0 16px 36px -22px rgba(60,40,20,.32); --ease:cubic-bezier(.4,0,.6,1); } @media (prefers-color-scheme:dark){:root{ --track-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 980 190' fill='none'%3E%3Cdefs%3E%3Cpath id='d0' d='m30 1q-13 0-20-9q-6-10-6-28q0-11 3-19q3-8 9-12q6-5 14-5q13 0 20 10q6 9 6 26q0 12-3 20q-3 8-9 13q-5 4-14 4zm0-13q6 0 9-5q2-6 2-19q0-12-2-18q-3-5-9-5q-6 0-9 5q-2 6-2 18q0 13 2 19q3 5 9 5z'/%3E%3Cpath id='d1' d='m16 0q-4 0-5-2q-2-1-2-4q0-4 2-5q1-2 5-2h10v-45h7l-15 9q-2 1-4 1q-2 0-3-2q-1-1-2-3q0-2 0-4q1-2 3-3l14-8q2-2 5-3q2 0 4 0q3 0 5 1q1 2 1 5v52h9q4 0 5 2q2 1 2 5q0 3-2 4q-1 2-5 2z'/%3E%3Cpath id='c' d='m15 11q-1 2-3 2q-2 1-3 0q-1-1-1-3q0-1 1-3q2-3 3-6q1-3 1-5l0 4q-4 0-6-2q-3-2-3-6q0-4 3-6q2-2 6-2q4 0 6 2q3 3 3 8q0 3-1 5q0 3-2 6q-1 3-4 6z'/%3E%3C/defs%3E%3Cpath d='M70 96 L98 104 L126 111 L154 117 L182 121 L210 122 L238 121 L266 117 L294 111 L322 104 L350 96 L378 88 L406 81 L434 75 L462 71 L490 70 L518 71 L546 75 L574 81 L602 88 L630 96 L658 104 L686 111 L714 117 L742 121 L770 122 L798 121 L826 117 L854 111 L882 104 L900 96' stroke='%23383D5C' stroke-width='3.1' stroke-linecap='round'/%3E%3Cpath d='M70 96 L98 104 L126 111 L154 117 L182 121 L210 122 L238 121 L266 117 L294 111 L322 104 L350 96' stroke='%23FF7D57' stroke-width='7' stroke-linecap='round'/%3E%3Ccircle cx='154' cy='117' r='2.1' fill='%231D1020'/%3E%3Ccircle cx='204' cy='122' r='2.1' fill='%231D1020'/%3E%3Ccircle cx='239' cy='121' r='2.1' fill='%231D1020'/%3E%3Ccircle cx='266' cy='117' r='2.1' fill='%231D1020'/%3E%3Ccircle cx='288' cy='113' r='2.1' fill='%231D1020'/%3E%3Ccircle cx='307' cy='108' r='2.1' fill='%231D1020'/%3E%3Ccircle cx='434' cy='75' r='4.3' fill='%235A6085'/%3E%3Ccircle cx='484' cy='70' r='4.3' fill='%235A6085'/%3E%3Ccircle cx='519' cy='71' r='4.3' fill='%235A6085'/%3E%3Ccircle cx='546' cy='75' r='4.3' fill='%235A6085'/%3E%3Ccircle cx='568' cy='79' r='4.3' fill='%235A6085'/%3E%3Ccircle cx='587' cy='84' r='4.3' fill='%235A6085'/%3E%3Ccircle cx='714' cy='117' r='4.3' fill='%235A6085'/%3E%3Ccircle cx='764' cy='122' r='4.3' fill='%235A6085'/%3E%3Ccircle cx='799' cy='121' r='4.3' fill='%235A6085'/%3E%3Ccircle cx='826' cy='117' r='4.3' fill='%235A6085'/%3E%3Ccircle cx='848' cy='113' r='4.3' fill='%235A6085'/%3E%3Ccircle cx='867' cy='108' r='4.3' fill='%235A6085'/%3E%3Ccircle cx='70' cy='102' r='30' fill='%23C4502F'/%3E%3Ccircle cx='70' cy='96' r='30' fill='%23FF7D57'/%3E%3Cg fill='%231D1020' transform='translate(62.1 105.3) scale(0.2638)'%3E%3Cuse href='%23d1' x='0'/%3E%3C/g%3E%3Ccircle cx='350' cy='96' r='48.3' fill='%233B2433'/%3E%3Ccircle cx='350' cy='102' r='34' fill='%23C4502F'/%3E%3Ccircle cx='350' cy='96' r='30.5' fill='%231C2034' stroke='%23FF7D57' stroke-width='7'/%3E%3Cg fill='%23F4ECDF' transform='translate(332.1 106.5) scale(0.2990)'%3E%3Cuse href='%23d1' x='0'/%3E%3Cuse href='%23d0' x='60'/%3E%3C/g%3E%3Ccircle cx='630' cy='102' r='34' fill='%232A2F48'/%3E%3Ccircle cx='630' cy='96' r='32.5' fill='%231C2034' stroke='%23454B6B' stroke-width='3'/%3E%3Cg fill='%23ACA9C0' transform='translate(608.3 104.5) scale(0.2411)'%3E%3Cuse href='%23d1' x='0'/%3E%3Cuse href='%23d0' x='60'/%3E%3Cuse href='%23d0' x='120'/%3E%3C/g%3E%3Ccircle cx='900' cy='102' r='40' fill='%232A2F48'/%3E%3Ccircle cx='900' cy='96' r='38.5' fill='%231C2034' stroke='%23454B6B' stroke-width='3'/%3E%3Cg fill='%23F4ECDF' transform='translate(872.1 103.4) scale(0.2099)'%3E%3Cuse href='%23d1' x='0'/%3E%3Cuse href='%23c' x='60'/%3E%3Cuse href='%23d0' x='86'/%3E%3Cuse href='%23d0' x='146'/%3E%3Cuse href='%23d0' x='206'/%3E%3C/g%3E%3Cpath d='M906 50V12' stroke='%23F4ECDF' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M908 12l25 8-25 9z' fill='%23FF7D57'/%3E%3C/svg%3E"); --track-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 354 110' fill='none'%3E%3Cdefs%3E%3Cpath id='d0' d='m30 1q-13 0-20-9q-6-10-6-28q0-11 3-19q3-8 9-12q6-5 14-5q13 0 20 10q6 9 6 26q0 12-3 20q-3 8-9 13q-5 4-14 4zm0-13q6 0 9-5q2-6 2-19q0-12-2-18q-3-5-9-5q-6 0-9 5q-2 6-2 18q0 13 2 19q3 5 9 5z'/%3E%3Cpath id='d1' d='m16 0q-4 0-5-2q-2-1-2-4q0-4 2-5q1-2 5-2h10v-45h7l-15 9q-2 1-4 1q-2 0-3-2q-1-1-2-3q0-2 0-4q1-2 3-3l14-8q2-2 5-3q2 0 4 0q3 0 5 1q1 2 1 5v52h9q4 0 5 2q2 1 2 5q0 3-2 4q-1 2-5 2z'/%3E%3Cpath id='c' d='m15 11q-1 2-3 2q-2 1-3 0q-1-1-1-3q0-1 1-3q2-3 3-6q1-3 1-5l0 4q-4 0-6-2q-3-2-3-6q0-4 3-6q2-2 6-2q4 0 6 2q3 3 3 8q0 3-1 5q0 3-2 6q-1 3-4 6z'/%3E%3C/defs%3E%3Cpath d='M28 62 L38 65 L48 67 L58 69 L67 71 L77 71 L87 71 L97 69 L107 67 L117 65 L126 62 L136 59 L146 57 L156 55 L166 53 L176 53 L186 53 L195 55 L205 57 L215 59 L225 62 L235 65 L245 67 L255 69 L264 71 L274 71 L284 71 L294 69 L304 67 L314 65 L324 62' stroke='%23383D5C' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M28 62 L38 65 L48 67 L58 69 L67 71 L77 71 L87 71 L97 69 L107 67 L117 65 L126 62' stroke='%23FF7D57' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='58' cy='69' r='1.5' fill='%231D1020'/%3E%3Ccircle cx='75' cy='71' r='1.5' fill='%231D1020'/%3E%3Ccircle cx='87' cy='71' r='1.5' fill='%231D1020'/%3E%3Ccircle cx='97' cy='69' r='1.5' fill='%231D1020'/%3E%3Ccircle cx='156' cy='55' r='3.1' fill='%235A6085'/%3E%3Ccircle cx='173' cy='53' r='3.1' fill='%235A6085'/%3E%3Ccircle cx='186' cy='53' r='3.1' fill='%235A6085'/%3E%3Ccircle cx='195' cy='55' r='3.1' fill='%235A6085'/%3E%3Ccircle cx='203' cy='56' r='3.1' fill='%235A6085'/%3E%3Ccircle cx='255' cy='69' r='3.1' fill='%235A6085'/%3E%3Ccircle cx='272' cy='71' r='3.1' fill='%235A6085'/%3E%3Ccircle cx='284' cy='71' r='3.1' fill='%235A6085'/%3E%3Ccircle cx='294' cy='69' r='3.1' fill='%235A6085'/%3E%3Ccircle cx='28' cy='66' r='18' fill='%23C4502F'/%3E%3Ccircle cx='28' cy='62' r='18' fill='%23FF7D57'/%3E%3Cg fill='%231D1020' transform='translate(23.3 67.6) scale(0.1583)'%3E%3Cuse href='%23d1' x='0'/%3E%3C/g%3E%3Ccircle cx='126' cy='62' r='29.8' fill='%233B2433'/%3E%3Ccircle cx='126' cy='66' r='21' fill='%23C4502F'/%3E%3Ccircle cx='126' cy='62' r='18.5' fill='%231C2034' stroke='%23FF7D57' stroke-width='5'/%3E%3Cg fill='%23F4ECDF' transform='translate(114.9 68.5) scale(0.1847)'%3E%3Cuse href='%23d1' x='0'/%3E%3Cuse href='%23d0' x='60'/%3E%3C/g%3E%3Ccircle cx='225' cy='66' r='22' fill='%232A2F48'/%3E%3Ccircle cx='225' cy='62' r='20.5' fill='%231C2034' stroke='%23454B6B' stroke-width='3'/%3E%3Cg fill='%23ACA9C0' transform='translate(211.0 67.5) scale(0.1560)'%3E%3Cuse href='%23d1' x='0'/%3E%3Cuse href='%23d0' x='60'/%3E%3Cuse href='%23d0' x='120'/%3E%3C/g%3E%3Ccircle cx='320' cy='66' r='27' fill='%232A2F48'/%3E%3Ccircle cx='320' cy='62' r='25.5' fill='%231C2034' stroke='%23454B6B' stroke-width='3'/%3E%3Cg fill='%23F4ECDF' transform='translate(301.2 67.0) scale(0.1417)'%3E%3Cuse href='%23d1' x='0'/%3E%3Cuse href='%23c' x='60'/%3E%3Cuse href='%23d0' x='86'/%3E%3Cuse href='%23d0' x='146'/%3E%3Cuse href='%23d0' x='206'/%3E%3C/g%3E%3Cpath d='M324 29V3' stroke='%23F4ECDF' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M326 3l17 5-17 6z' fill='%23FF7D57'/%3E%3C/svg%3E"); --ink-2:#D6D0DC; --line-2:#3B4163; --edge:#0C0E1A; --coral:#FF7D57; --coral-2:#C4502F; --on-accent:#1D1020; --accent-2:#FF9270; --dot:rgba(244,236,223,.075); --focus:#FF9C7E; --shadow:0 16px 36px -22px rgba(0,0,0,.75); }} html{scroll-padding-top:84px} body{font-size:1.0625rem; line-height:1.66} @media (min-width:760px){body{font-size:1.125rem}} ::selection{background:var(--accent-soft)} :focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:6px} a{color:var(--accent-ink); text-decoration-thickness:1.5px; text-underline-offset:.2em} a:hover{text-decoration-thickness:2.5px} h1,h2,h3{font-family:var(--hf); color:var(--ink); text-wrap:balance} h1{font-weight:800; font-size:clamp(2.2rem,1.4rem + 2.5vw,3.3rem); line-height:1.07; letter-spacing:-.026em} h2{font-weight:800; font-size:clamp(1.5rem,1.22rem + 1vw,2rem); line-height:1.16; letter-spacing:-.018em} h3{font-weight:800; font-size:1.24rem; line-height:1.28; letter-spacing:-.008em} p,ul,ol{margin:0 0 1.15em} strong{font-weight:700} .wrap{max-width:1120px; padding:0 24px} @media (max-width:600px){.wrap{padding:0 18px}} .skip{background:var(--ink); color:var(--bg); font-weight:700} @media (prefers-reduced-motion:no-preference){ a,.btn,nav.main a,.card,.faq summary::after{transition:color .32s var(--ease),background-color .32s var(--ease),border-color .32s var(--ease),box-shadow .24s var(--ease),transform .24s var(--ease)} } header.site{border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 88%,transparent); -webkit-backdrop-filter:saturate(1.8) blur(14px); backdrop-filter:saturate(1.8) blur(14px)} header.site .wrap{min-height:68px; flex-wrap:nowrap; gap:20px} .brand{font-family:var(--hf); font-weight:800; font-size:1.2rem; letter-spacing:-.02em; gap:10px; white-space:nowrap} .brand .mk{width:32px; height:32px} nav.main{gap:4px; flex-wrap:nowrap} nav.main a{display:flex; align-items:center; min-height:40px; padding:0 14px; border-radius:999px; border:0; font-weight:600; font-size:.94rem; color:var(--ink-2); text-decoration:none; white-space:nowrap} nav.main a:hover{background:var(--tint); color:var(--ink)} nav.main a[aria-current="page"]{background:var(--ink); color:var(--bg)} @media (max-width:900px){ header.site .wrap{min-height:58px; gap:8px; padding-right:0} .brand{font-size:1.02rem; gap:8px} .brand .mk{width:28px; height:28px} nav.main{flex:1 1 auto; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none; padding:0 18px 0 6px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 30px),transparent); mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 30px),transparent)} nav.main::-webkit-scrollbar{display:none} nav.main a{min-height:44px; scroll-snap-align:start; padding:0 13px; font-size:.9rem} } @supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){ .p-article header.site::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--coral); transform-origin:0 50%; transform:scaleX(0); animation:ftf-read linear both; animation-timeline:scroll(root)} @keyframes ftf-read{to{transform:scaleX(1)}} }} .hero{position:relative; isolation:isolate; overflow:hidden; text-align:center; border:0; background:radial-gradient(var(--dot) 1.3px,transparent 1.7px) 0 0/22px 22px,var(--bg); padding:clamp(3rem,7vw,5.4rem) 0 clamp(2.6rem,5vw,4rem)} .hero::before{content:""; position:absolute; z-index:-1; left:50%; top:-260px; width:1000px; height:640px; margin-left:-500px; background:radial-gradient(closest-side,color-mix(in srgb,var(--accent-soft) 90%,transparent),transparent)} .hero .wrap{display:flex; flex-direction:column; align-items:center} .kicker,.hero .kicker{display:inline-flex; align-items:center; gap:8px; width:max-content; max-width:100%; font-family:var(--bf); font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); opacity:1; background:var(--card); border:1.5px solid var(--line); border-radius:999px; padding:6px 14px 6px 10px; box-shadow:0 3px 0 var(--edge); margin:0 0 1.2rem} .kicker::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 3px var(--accent-soft)} .hero h1{font-size:clamp(2.45rem,1.3rem + 3.9vw,4.35rem); line-height:1.03; letter-spacing:-.034em; max-width:13.5ch; margin:0 auto .38em} .hero .lede{font-size:clamp(1.1rem,1rem + .45vw,1.3rem); line-height:1.52; color:var(--ink-2); max-width:34em; margin:0 auto 2rem; text-wrap:balance} .hero .wrap::after{content:""; display:block; width:min(100%,980px); aspect-ratio:980/190; margin:clamp(2.2rem,5vw,3.4rem) auto 0; background:var(--track-d) center/contain no-repeat} @media (max-width:640px){.hero .wrap::after{width:354px; max-width:100%; aspect-ratio:354/110; background-image:var(--track-m)}} .btns{gap:14px; justify-content:center} .btn{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 26px; border-radius:16px; border:0; font-family:var(--bf); font-weight:700; font-size:1.02rem; letter-spacing:.005em; background:var(--accent); color:var(--on-accent); box-shadow:0 4px 0 var(--coral-2); text-decoration:none} .btn:hover{filter:none; background:var(--accent-2)} .btn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--coral-2)} .btn.ghost{background:var(--card); color:var(--ink); opacity:1; box-shadow:0 4px 0 var(--edge); outline-offset:3px; border:2px solid var(--line-2)} .btn.ghost:hover{background:var(--card); border-color:var(--ink)} .btn.ghost:active{box-shadow:0 1px 0 var(--edge)} @media (max-width:480px){.btns{width:100%}.btns .btn{width:100%}} main{padding:clamp(2.2rem,5vw,3.4rem) 0 4.4rem} .prose{max-width:var(--maxw); margin-inline:auto} .cols{justify-items:center} .cols > *{width:100%} .prose h2{margin:2em 0 .55em; scroll-margin-top:88px} .prose h3{margin:1.6em 0 .45em; scroll-margin-top:88px} .prose li{margin-bottom:.45em} .prose ul li::marker{color:var(--coral); font-size:1.1em} .prose ol:not(.steps) li::marker{font-family:var(--hf); font-weight:800; color:var(--accent-ink)} .lede{font-size:1.24rem; line-height:1.55; color:var(--ink-2)} .crumbs{font-size:.88rem; color:var(--muted); margin:0 0 1.3rem} .crumbs a{color:var(--muted); text-decoration:none; font-weight:600} .crumbs a:hover{color:var(--ink)} .crumbs span{padding:0 .5rem; color:var(--line-2)} .pmeta{font-family:var(--bf); font-size:.88rem; color:var(--muted); align-items:center; gap:10px; margin:0 0 1.6rem} .pmeta span{display:inline-flex; align-items:center; gap:7px; background:var(--tint); border-radius:999px; padding:3px 11px 3px 8px; font-weight:600} .pmeta span::before{content:""; width:12px; height:12px; border-radius:50%; background:conic-gradient(var(--coral) 0 62%,color-mix(in srgb,var(--coral) 25%,transparent) 0)} .toc{background:var(--card); border:1.5px solid var(--line); border-radius:20px; padding:18px 22px 12px; margin:0 0 2.4rem; box-shadow:0 4px 0 var(--edge)} .toc p{font-family:var(--hf); font-weight:800; font-size:1rem; margin:0 0 8px} .toc ol{list-style:none; padding:0; margin:0; font-size:.98rem} .toc li{position:relative; padding:6px 0 6px 34px; margin:0; line-height:1.4} .toc li::before{content:""; position:absolute; left:0; top:7px; width:20px; height:20px; border-radius:7px; border:2px solid var(--line-2); background:var(--bg)} .toc a{color:var(--ink); text-decoration:none; font-weight:500} .toc a:hover{color:var(--accent-ink); text-decoration:underline} ol.steps{counter-reset:s; list-style:none; padding:0; margin:1.8rem 0 2.2rem; display:grid; gap:14px} ol.steps li{counter-increment:s; position:relative; margin:0; padding:18px 20px 18px 76px; background:var(--card); border:1.5px solid var(--line); border-radius:18px; box-shadow:0 4px 0 var(--edge)} ol.steps li::before{content:counter(s); position:absolute; left:18px; top:17px; width:40px; height:40px; border-radius:50%; background:var(--accent); color:var(--on-accent); box-shadow:0 3px 0 var(--coral-2); display:grid; place-items:center; font:800 1.08rem/1 var(--hf)} ol.steps strong{display:block; font-family:var(--hf); font-weight:800; font-size:1.1rem; line-height:1.3; color:var(--ink); margin:1px 0 4px} ol.steps span{color:var(--ink-2); display:block} @media (max-width:480px){ol.steps li{padding:64px 18px 18px}ol.steps li::before{left:18px; top:16px}} .note{position:relative; background:var(--card); border:1.5px solid var(--line); border-radius:18px; margin:2rem 0; padding:18px 20px 18px 66px; box-shadow:0 4px 0 var(--edge)} .note::before{content:""; position:absolute; left:20px; top:18px; width:28px; height:28px; background:var(--coral); -webkit-mask:var(--i-bulb) center/contain no-repeat; mask:var(--i-bulb) center/contain no-repeat} .note .note-t{font-family:var(--hf); font-weight:800; font-size:1.06rem; line-height:1.35; color:var(--ink); margin:0 0 .3em} .note p:not(.note-t){margin:0; color:var(--ink-2)} .note.warn{background:var(--accent-soft); border-color:color-mix(in srgb,var(--coral) 30%,var(--line))} .note.warn::before{background:var(--accent-ink); -webkit-mask-image:var(--i-warn); mask-image:var(--i-warn)} @media (max-width:480px){.note{padding:60px 18px 18px}.note::before{top:18px; left:18px}} figure.note{padding:8px 0 0} figure.note::before{display:none} figure.note svg{display:block; width:100%; max-width:none !important; height:auto; background:transparent !important; border:0 !important} figure.note figcaption{font-size:.9rem; color:var(--muted); padding:12px 26px 16px; margin:4px 0 0; border-top:1.5px dashed var(--line)} figure.note text[font-family^="Georgia"]{font-family:var(--hf); font-weight:800} figure.note text[font-family^="Helvetica"]{font-family:var(--bf); font-weight:600} figure.note text[font-size="12"]{font-weight:700} figure.note text[fill]{fill:var(--ink)} figure.note rect[fill]{fill:var(--accent-soft)} figure.note text[fill="#6b5344" i]{fill:var(--muted); font-weight:500} figure.note text[fill="#c2410c" i]{fill:var(--accent-ink)} figure.note text[fill="#fffaf4" i]{fill:var(--on-accent)} figure.note rect[fill="#c2410c" i]{fill:var(--accent)} .key{position:relative; margin:2.2rem 0; padding:22px 24px 22px 72px; border:0; border-radius:20px; background:var(--accent-soft); color:var(--ink); font-family:var(--hf); font-weight:800; font-size:1.18rem; line-height:1.45; letter-spacing:-.005em} .key::before{content:""; position:absolute; left:22px; top:22px; width:32px; height:32px; border-radius:50%; background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 16.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/32px no-repeat; box-shadow:0 3px 0 var(--coral-2)} @media (prefers-color-scheme:dark){.key::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 16.5l4 4 8-9' fill='none' stroke='%231D1020' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}} @media (max-width:480px){.key{padding:66px 20px 20px; font-size:1.1rem}.key::before{top:20px; left:20px}} .tw{border:1.5px solid var(--line); border-radius:18px; margin:2rem 0; box-shadow:0 4px 0 var(--edge); background:linear-gradient(90deg,var(--card) 30%,transparent) left/40px 100% no-repeat local, linear-gradient(270deg,var(--card) 30%,transparent) right/40px 100% no-repeat local, radial-gradient(farthest-side at 0 50%,rgba(30,20,10,.14),transparent) left/12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%,rgba(30,20,10,.14),transparent) right/12px 100% no-repeat scroll,var(--card)} table{font-size:.95rem; line-height:1.5} .tw table:has(th:nth-child(3)){min-width:560px} caption{caption-side:top; text-align:left; padding:16px 20px 12px; font-family:var(--hf); font-weight:800; font-size:1.02rem; color:var(--ink)} th{background:var(--tint); font-family:var(--bf); font-weight:700; font-size:.84rem; letter-spacing:0; color:var(--ink-2); padding:11px 20px; border-bottom:0} td{padding:13px 20px; border-bottom:0; border-top:1px solid var(--line)} thead + tbody tr:first-child td{border-top:0} td:first-child{font-weight:600; color:var(--ink)} @media (max-width:600px){caption,th,td{padding-left:16px; padding-right:16px}} .faq{display:grid; gap:12px; margin:1.6rem 0 2.2rem} .faq details{background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:0 20px; box-shadow:0 3px 0 var(--edge)} .faq details[open]{border-color:var(--line-2)} .faq summary{align-items:center; padding:15px 0; min-height:44px; font-family:var(--hf); font-weight:800; font-size:1.05rem; line-height:1.35; color:var(--ink)} .faq summary::after{content:""; width:30px; height:30px; flex:none; border-radius:50%; background:var(--accent-soft); -webkit-mask:none; box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--coral) 35%,transparent); background-image:linear-gradient(var(--accent-ink),var(--accent-ink)),linear-gradient(var(--accent-ink),var(--accent-ink)); background-size:12px 2.5px,2.5px 12px; background-position:center; background-repeat:no-repeat} .faq details[open] summary::after{content:""; background-size:12px 2.5px,0 0} .faq details>div{padding:0 0 18px; color:var(--ink-2)} h2#guides{text-align:center; margin:3.8rem auto .5rem; max-width:22ch; font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem)} h2#guides::before{content:""; display:block; width:74px; height:12px; margin:0 auto 18px; background:radial-gradient(circle,var(--coral) 5px,transparent 5.5px) 0 50%/25px 12px repeat-x} ul.cards{position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:30px; max-width:1000px; margin:2.6rem auto 3.4rem; padding:0; counter-reset:lesson; grid-auto-flow:row dense} ul.cards .card{position:relative; counter-increment:lesson; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:18px; row-gap:6px; align-content:start; background:var(--card); border:1.5px solid var(--line); border-radius:22px; padding:22px 24px 20px; box-shadow:0 5px 0 var(--edge)} ul.cards .card::before{content:counter(lesson,decimal-leading-zero); grid-row:1/4; width:52px; height:52px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:grid; place-items:center; font:800 1.08rem/1 var(--hf); letter-spacing:-.01em} ul.cards .card h3{grid-column:2; margin:0; font-size:1.2rem; line-height:1.27} ul.cards .card h3 a{color:var(--ink); text-decoration:none} ul.cards .card h3 a::after{content:""; position:absolute; inset:0; border-radius:22px} ul.cards .card p{grid-column:2; margin:0; font-size:.98rem; color:var(--ink-2)} ul.cards .card .rt{grid-column:2; font-family:var(--bf); font-weight:700; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-top:6px} ul.cards .card:hover{border-color:var(--line-2); box-shadow:0 5px 0 var(--line-2)} ul.cards .card:hover h3 a{color:var(--accent-ink)} ul.cards .card:not(:last-child)::after{content:""; position:absolute; left:48px; bottom:-31px; width:12px; height:30px; background:radial-gradient(circle,var(--coral) 3px,transparent 3.5px) 50% 0/12px 10px repeat-y} .p-home ul.cards::before{content:"Start here"; position:absolute; z-index:2; top:-13px; left:22px; padding:4px 12px; border-radius:999px; background:var(--accent); color:var(--on-accent); font:700 .72rem/1.3 var(--bf); letter-spacing:.08em; text-transform:uppercase; box-shadow:0 2px 0 var(--coral-2)} .p-home ul.cards .card:first-child{border-color:color-mix(in srgb,var(--coral) 55%,var(--line)); box-shadow:0 5px 0 color-mix(in srgb,var(--coral) 45%,var(--edge))} @media (min-width:760px){ ul.cards{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; row-gap:42px} ul.cards .card:nth-child(4n+1),ul.cards .card:nth-child(4n){grid-column:1} ul.cards .card:nth-child(4n+2),ul.cards .card:nth-child(4n+3){grid-column:2} ul.cards .card:nth-child(4n+1):not(:last-child)::after{left:auto; right:-49px; top:50%; bottom:auto; width:48px; height:12px; margin-top:-6px; background:radial-gradient(circle,var(--coral) 3px,transparent 3.5px) 0 50%/10px 12px repeat-x} ul.cards .card:nth-child(4n+3):not(:last-child)::after{left:-49px; top:50%; bottom:auto; width:48px; height:12px; margin-top:-6px; background:radial-gradient(circle,var(--coral) 3px,transparent 3.5px) 0 50%/10px 12px repeat-x} ul.cards .card:nth-child(4n+2):not(:last-child)::after,ul.cards .card:nth-child(4n):not(:last-child)::after{left:50%; margin-left:-6px; bottom:-43px; height:42px} } h2#keep-reading{margin-top:2.6em} h2#keep-reading + ul.cards{margin:1.4rem 0 0; gap:18px; grid-auto-flow:row} h2#keep-reading + ul.cards .card{grid-column:auto !important; grid-template-columns:minmax(0,1fr); padding:20px 22px} h2#keep-reading + ul.cards .card::before,h2#keep-reading + ul.cards .card::after{display:none} h2#keep-reading + ul.cards .card > *{grid-column:1} @media (min-width:760px){h2#keep-reading + ul.cards{grid-template-columns:1fr 1fr; column-gap:18px; row-gap:18px}} .mention{background:var(--card); border:1.5px dashed var(--line-2); border-radius:18px; padding:18px 22px; margin:2.4rem 0; font-size:.97rem; color:var(--ink-2)} .mention .lbl{display:flex; width:max-content; align-items:center; font-family:var(--bf); font-weight:700; font-size:.7rem; letter-spacing:.1em; color:var(--ink); background:var(--tint); border-radius:999px; padding:3px 11px; margin-bottom:.6rem} .p-home main .wrap > .prose:last-child .mention{margin-top:0} aside.rail{max-width:var(--maxw); margin-inline:auto; border-top:0; padding-top:.4rem; font-size:.97rem} .rail-box{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; background:var(--ink); border:0; border-radius:22px; padding:22px 24px; margin:0 0 2rem; box-shadow:var(--shadow)} .rail-box p{margin:0; font-family:var(--hf); font-weight:800; font-size:1.2rem; line-height:1.3; color:var(--bg)} .rail-box .btn{width:auto; flex:none; min-height:48px; font-size:.97rem; padding:0 22px} aside.rail h2{font-family:var(--hf); font-weight:800; font-size:1.05rem; letter-spacing:0; text-transform:none; color:var(--ink); margin:0 0 .8rem} aside.rail ul{columns:auto; display:flex; flex-wrap:wrap; gap:10px} aside.rail li{margin:0} aside.rail li a{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px; background:var(--card); border:1.5px solid var(--line); box-shadow:0 3px 0 var(--edge); color:var(--ink); font-weight:600; text-decoration:none} aside.rail li a:hover{border-color:var(--line-2); color:var(--accent-ink); text-decoration:none} .p-tool .prose{max-width:none} .p-tool .prose > :not(.tool){max-width:40rem; margin-left:auto; margin-right:auto} .p-tool .prose > h1{max-width:40rem} .p-tool .rail-box{display:none} .tool{max-width:1040px; margin:2.2rem auto 3.4rem; padding:0; background:var(--card); border:1.5px solid var(--line); border-radius:28px; overflow:hidden; box-shadow:0 6px 0 var(--edge),var(--shadow)} .tool .grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px 18px; padding:28px 30px 30px} .tool label{font-family:var(--bf); font-weight:700; font-size:.95rem; color:var(--ink); margin-bottom:8px; line-height:1.3} .tool .hint{font-weight:500; font-size:.8rem; color:var(--muted); margin-top:2px} .tool input,.tool select{height:54px; padding:0 16px; border:2px solid var(--line); border-radius:14px; background:var(--bg); color:var(--ink); font-family:var(--bf); font-weight:700; font-size:1.12rem; font-variant-numeric:tabular-nums; -webkit-appearance:none; appearance:none} .tool select{font-size:1rem; padding-right:42px; cursor:pointer; background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23CD4822' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center/16px no-repeat} @media (prefers-color-scheme:dark){.tool select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23FF9C7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}} .tool input:hover,.tool select:hover{border-color:var(--line-2)} .tool input:focus,.tool select:focus{outline:none; border-color:var(--coral); box-shadow:0 0 0 4px color-mix(in srgb,var(--coral) 22%,transparent)} .out{margin:0; border-top:2px dashed var(--line-2); padding:28px 30px 30px; background:var(--bg)} .stats{grid-template-columns:1.35fr 1fr 1fr 1fr; gap:14px; margin:0 0 18px} .stat{background:var(--card); border:1.5px solid var(--line); border-radius:18px; padding:16px 18px 15px; box-shadow:0 3px 0 var(--edge)} .stat dt{font-family:var(--bf); font-weight:700; font-size:.74rem; letter-spacing:.07em; color:var(--muted); margin-bottom:.35rem} .stat dd{font-family:var(--hf); font-weight:800; font-size:clamp(1.6rem,1.25rem + .9vw,2rem); letter-spacing:-.02em; line-height:1.05; color:var(--ink)} .stat dd small{font-family:var(--bf); font-weight:500; font-size:.8rem; color:var(--muted); margin-top:.4rem; line-height:1.35} .stat:first-child{background:var(--accent-soft); border-color:transparent; box-shadow:0 3px 0 color-mix(in srgb,var(--coral) 40%,var(--edge))} .stat:first-child dd{color:var(--accent-ink); font-size:clamp(2.1rem,1.5rem + 1.6vw,2.9rem)} .out .tw{margin:0 0 16px; box-shadow:none; border-radius:16px} .out .tw table{min-width:0} .out caption{font-size:.95rem; padding:14px 18px 10px} .out td{padding:10px 18px} .out td:first-child{font-weight:500; color:var(--ink-2)} .out td:last-child{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink)} .out tr:last-child td{border-top:2px solid var(--ink); color:var(--ink); font-size:1.02rem; padding-top:12px; padding-bottom:12px} .verdict{position:relative; background:var(--card); border:1.5px solid var(--line); color:var(--ink); border-radius:18px; padding:16px 18px 16px 62px; font-weight:500; line-height:1.5} .verdict::before{content:""; position:absolute; left:18px; top:15px; width:28px; height:28px; border-radius:50%; background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9.5 11.5h9M9.5 16.5h9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/28px no-repeat} @media (prefers-color-scheme:dark){.verdict::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9.5 11.5h9M9.5 16.5h9' fill='none' stroke='%231D1020' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}} .out > p{color:var(--muted)} @media (max-width:900px){.tool .grid{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.stat:first-child{grid-column:1/-1}} @media (max-width:560px){.tool{border-radius:22px; margin-left:-4px; margin-right:-4px} .stat:nth-child(4):last-child{grid-column:1/-1} .tool .grid{grid-template-columns:1fr; padding:22px 18px 24px; gap:18px}.out{padding:22px 16px 20px}} .p-404 .prose{text-align:left} .p-404 .prose::before{content:""; display:block; width:354px; max-width:100%; aspect-ratio:354/110; margin:0 0 1.6rem; background:var(--track-m) left center/contain no-repeat} .p-404 .prose ul{list-style:none; padding:0; display:grid; gap:10px; margin-top:1.4rem} .p-404 .prose li{margin:0} .p-404 .prose li a{display:flex; align-items:center; gap:12px; min-height:44px; padding:10px 16px; border-radius:14px; background:var(--card); border:1.5px solid var(--line); box-shadow:0 3px 0 var(--edge); color:var(--ink); font-weight:600; text-decoration:none} .p-404 .prose li a::before{content:""; flex:none; width:18px; height:18px; border-radius:6px; border:2px solid var(--line-2)} .p-404 .prose li a:hover{border-color:var(--line-2); color:var(--accent-ink)} footer.site{position:relative; margin-top:0; padding:64px 0 34px; border-top:0; color:var(--ink-2); font-size:.95rem; background:radial-gradient(var(--dot) 1.3px,transparent 1.7px) 0 0/22px 22px,var(--tint)} footer.site::before{content:""; position:absolute; left:0; right:0; top:-6px; height:12px; background:radial-gradient(circle,var(--coral) 3.5px,transparent 4px) 50% 50%/22px 12px repeat-x} footer.site .fgrid{grid-template-columns:1.4fr 1fr 1fr; gap:36px} @media (max-width:760px){footer.site .fgrid{grid-template-columns:1fr; gap:28px}} footer.site h2{font-family:var(--bf); font-weight:700; font-size:.74rem; letter-spacing:.1em; color:var(--accent-ink); margin:0 0 12px} footer.site .fgrid > div:first-child h2{font-family:var(--hf); font-weight:800; font-size:1.45rem; letter-spacing:-.02em; text-transform:none; color:var(--ink); margin-bottom:8px} footer.site p{max-width:30ch} footer.site a{color:var(--ink); text-decoration:none; font-weight:500; display:inline-flex; align-items:center; min-height:44px; min-width:44px} footer.site a:hover{color:var(--accent-ink); text-decoration:underline} footer.site li{margin:0} footer.site li a{padding:0} .colophon{border-top:1.5px dashed var(--line-2); margin-top:44px; padding-top:20px; font-size:.84rem; color:var(--muted)} @media print{ :root{ color-scheme:light; --bg:#fff; --card:#fff; --tint:#f5f5f5; --ink:#000; --ink-2:#222; --muted:#333; --accent:#000; --accent-ink:#000; --accent-soft:#eee; --accent-2:#000; --line:#888; --line-2:#aaa; --edge:#ccc; --coral:#000; --coral-2:#000; --on-accent:#fff; --dot:rgba(0,0,0,.11); } body{background:#fff !important; color:#000 !important} .hero::before,.hero .wrap::after,footer.site::before,.p-404 .prose::before,ul.cards::before,ul.cards .card::after{display:none} .btn,.stat,.card,.note,.tw,.toc,.faq details{box-shadow:none !important} .rail-box{display:none} }