:root{color-scheme:light dark;--bg:#F3F6F4;--ink:#14262A;--mut:#4C6165;--line:#C9D6D2;--ring:#BE7D12;--on-ring:#14262A;--teal:#11676B;--on-teal:#fff;--ok:#2E7D4F;--bad:#B4452F;--paper:#FFFFFF}
@media (prefers-color-scheme:dark){:root{--bg:#0C1719;--ink:#E6EFEC;--mut:#9DB2B0;--line:#27393B;--ring:#E7A93A;--on-ring:#0C1719;--teal:#5FC2C0;--on-teal:#0C1719;--ok:#6FCF86;--bad:#F09A86;--paper:#13262A}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.6 Charter,"Iowan Old Style","Palatino Linotype",Georgia,serif}
.ui{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--teal)}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
/* header */
header.site{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;background:var(--bg)}
header.site .wrap{display:flex;align-items:center;gap:20px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font:700 1.15rem system-ui,sans-serif;color:var(--ink);text-decoration:none;margin-right:auto}
.brand svg{width:26px;height:26px}
nav.site{display:flex;gap:18px;align-items:center;font:16px system-ui,sans-serif}nav.site a{color:var(--ink);text-decoration:none;padding:4px 2px;border-bottom:2px solid transparent}nav.site a:hover{border-color:var(--ring)}
.btn{display:inline-block;font:600 16px system-ui,sans-serif;padding:.65em 1.2em;border-radius:8px;border:2px solid var(--teal);background:var(--teal);color:var(--on-teal);text-decoration:none}
.btn.sec{background:transparent;color:var(--teal)}
@media(max-width:720px){nav.site .lnk{display:none}}
/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:56px 0 40px}
@media(max-width:860px){.hero{grid-template-columns:1fr;padding-top:32px}}
h1{font-size:clamp(2.3rem,5.2vw,3.7rem);line-height:1.08;margin:0 0 18px;font-weight:600;letter-spacing:-.015em;max-width:15ch}
.lead{max-width:58ch;margin:0 0 14px}.small{font:15px/1.5 system-ui,sans-serif;color:var(--mut);max-width:60ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 12px}
figure.halo{margin:0;position:relative;max-width:380px;justify-self:center;width:100%}
.ring{width:100%;display:block}.ring .seg{fill:none;stroke:var(--ring);stroke-width:24;stroke-linecap:butt}
.ring .built{stroke-dasharray:1;stroke-dashoffset:0;animation:draw .7s ease-out both;animation-delay:calc(var(--i)*.18s)}
.ring .soon{opacity:.22}
.ring .num{font:700 13px system-ui,sans-serif;text-anchor:middle;fill:var(--on-ring)}.ring .soonnum{fill:var(--ink);opacity:.7}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.ring .built{animation:none}}
.card-in{position:absolute;inset:0;margin:auto;width:52%;height:fit-content;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:13px/1.4 system-ui,sans-serif}
.card-in b{display:block;font:600 14px/1.3 Charter,Georgia,serif;margin:2px 0 4px}.card-in .m{color:var(--mut);font-size:12px}
.card-in .r{display:flex;gap:6px;margin-top:10px}.card-in .r span{flex:1;text-align:center;border:1px solid;border-radius:6px;padding:3px 0;font-weight:600;font-size:12px}
.i{color:var(--ok);border-color:var(--ok)}.e{color:var(--bad);border-color:var(--bad)}.mm{color:var(--ring);border-color:var(--ring)}
.cap{font:13px system-ui,sans-serif;color:var(--mut);text-align:center;margin-top:6px}
/* sections */
section{padding:44px 0;border-top:1px solid var(--line)}
h2{font-size:1.75rem;line-height:1.2;margin:0 0 14px;font-weight:600;max-width:24ch}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:40px}@media(max-width:860px){.cols{grid-template-columns:1fr;gap:24px}}
.prose{max-width:62ch}
ol.steps{list-style:none;margin:0;padding:0;max-width:70ch}
ol.steps li{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
ol.steps .n{width:28px;height:28px;border-radius:50%;background:var(--ring);color:var(--on-ring);font:700 14px/28px system-ui,sans-serif;text-align:center}
ol.steps .soon .n{background:transparent;border:2px dashed var(--ring);color:var(--mut);line-height:24px}
ol.steps strong{font-weight:600}.tagc{font:13px system-ui,sans-serif;color:var(--mut);margin-left:6px}
ul.pr{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:26px 40px}@media(max-width:860px){ul.pr{grid-template-columns:1fr}}
ul.pr li{padding-left:26px;position:relative}
ul.pr li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:14px;border:3px solid var(--ring);border-radius:50%}
ul.pr strong{display:block;font-weight:600;margin-bottom:2px}
pre.tree{font:14px/1.5 ui-monospace,Menlo,Consolas,monospace;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:12px 14px;overflow:auto;margin:14px 0 0}
.not{max-width:66ch;padding-left:20px}.not li{margin:6px 0}
.band{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 0}
footer.site{padding:28px 0 48px;font:15px/1.6 system-ui,sans-serif;color:var(--mut)}footer.site a{margin-right:16px}
.pend{border:1px dashed var(--mut);border-radius:4px;padding:0 6px;font-size:13px}
@media(max-width:480px){.card-in{width:56%;padding:8px 10px;font-size:11px}.card-in b{font-size:12px}.card-in .m{font-size:10px}.card-in .r{gap:4px;margin-top:6px}.card-in .r span{font-size:10px}}
.note{font:14px/1.5 system-ui,sans-serif;color:var(--mut)}

.btn[hidden]{display:none}
.upd{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:2px solid var(--ring);border-radius:8px;padding:8px 12px;background:var(--paper);max-width:560px;margin:10px auto}
footer.site .plain{margin-right:16px}
section[id]{scroll-margin-top:72px}
.totop{position:fixed;right:16px;bottom:16px;z-index:30;font:600 15px system-ui,sans-serif;padding:.6em 1em;border-radius:999px;border:2px solid var(--teal);background:var(--bg);color:var(--teal);cursor:pointer}
.totop:hover{background:var(--teal);color:var(--on-teal)}
