@layer base,layout,components;
@layer base{
:root{color-scheme:light;--canvas:#f1f5f0;--sheet:#fff;--ink:#182d26;--muted:#4c6259;--line:#bdcec3;--accent:#205b45;--accent-hi:#124331;--dark:#17362b;--on-dark:#f0f7f2;--on-dark-muted:#bcdbca;--error:#982f2b;--round:12px;--wrap:70rem;--pad:clamp(1rem,4vw,2.75rem);--space:clamp(1.5rem,5vw,3.5rem)}
*,*::before,*::after{box-sizing:border-box}html{scroll-padding-top:1rem}
body{margin:0;background:var(--canvas);color:var(--ink);font:1rem/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3,p,dl{margin:0}h1,h2,h3{line-height:1.12;text-wrap:balance}
h1{font-size:clamp(2.65rem,6.6vw,5.65rem);letter-spacing:-.068em;font-weight:680}
h2{font-size:clamp(1.6rem,3vw,2.45rem);letter-spacing:-.035em}
h3{font-size:1.25rem;letter-spacing:-.02em}
a{color:var(--accent);text-underline-offset:.22em}a:hover{color:var(--accent-hi)}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
button{font:inherit}svg{display:block}code,.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}
}
@layer layout{
.shell{width:min(100%,var(--wrap));margin-inline:auto;padding-inline:var(--pad)}
.top{border-bottom:1px solid var(--line)}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.75rem;padding-block:.6rem}
.top nav{display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:center}
main{padding-block:var(--space)}
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(18rem,1fr);align-items:stretch;gap:clamp(1.4rem,5vw,4rem);padding-block:clamp(.45rem,2vw,1.75rem) var(--space)}
.hero-text{align-self:center}.hero-text h1{max-width:12ch;margin:.65rem 0 1.05rem}
.hero-text>p:not(.eyebrow){max-width:37rem;color:var(--muted);font-size:clamp(1rem,2vw,1.17rem)}
.section{border-top:1px solid var(--line);padding-block:var(--space)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:.8rem;flex-wrap:wrap;margin-bottom:1.25rem}
.section-head>p{color:var(--muted);max-width:35rem}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.guide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:1.5rem}
.guide>div>p{margin-top:.55rem;color:var(--muted);max-width:24rem}
.footer{border-top:1px solid var(--line);padding-block:1.3rem;color:var(--muted);font-size:.875rem}
.footer .shell{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between}
@media(max-width:49rem){.hero,.guide{grid-template-columns:1fr}.hero-text h1{max-width:15ch}}
@media(max-width:36rem){.top-inner{align-items:flex-start;flex-direction:column;gap:.15rem}.cards{grid-template-columns:1fr}.top nav{margin-left:-.4rem}.hero-text h1{font-size:clamp(2.35rem,10vw,3.5rem)}}
}
@layer components{
.skip{position:absolute;inset:.8rem auto auto .8rem;transform:translateY(-160%);background:var(--sheet);padding:.65rem;z-index:1}.skip:focus{transform:none}
.brand{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;color:var(--ink);text-decoration:none;font-weight:720;letter-spacing:-.025em}
.brand svg{flex:none;color:var(--accent)}
.nav-link{display:inline-flex;align-items:center;min-height:44px;padding-inline:.55rem;color:var(--muted);font-size:.91rem;text-decoration:none}
.nav-link[aria-current=page]{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px}
.eyebrow,.route-key{font:600 .8rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em;color:var(--accent)}
.panel{min-width:0;padding:clamp(1rem,3.1vw,1.65rem);border-radius:var(--round);background:var(--dark);color:var(--on-dark);border:1px solid var(--dark);display:flex;flex-direction:column;justify-content:center}
.panel .eyebrow,.panel .route-key{color:var(--on-dark-muted)}
.panel h2{margin:.3rem 0 .85rem;font-size:clamp(1.45rem,3vw,2rem)}.panel p{color:var(--on-dark-muted)}
.route{list-style:none;margin:1rem 0 .15rem;padding:0}
.route li{display:grid;grid-template-columns:1.25rem minmax(0,1fr);gap:.65rem;align-items:baseline;border-top:1px solid #547062;padding:.62rem 0}
.route li svg{align-self:center;color:#a8d5ba}.route small{display:block;color:var(--on-dark-muted);font-size:.82rem}
.card{min-width:0;background:var(--sheet);border:1px solid var(--line);border-radius:var(--round);padding:clamp(1rem,3vw,1.55rem)}
.card-top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.4rem;margin-bottom:.55rem}
.card p{color:var(--muted);overflow-wrap:anywhere}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .85rem;margin-top:.95rem}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.45rem .88rem;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:#fff;font-weight:620;text-decoration:none;cursor:pointer}
.button:hover{background:var(--accent-hi);color:#fff}.button:disabled{opacity:.72;cursor:progress}
.panel .button{background:var(--on-dark);border-color:var(--on-dark);color:var(--dark)}.panel .button:hover{background:var(--on-dark-muted);color:var(--dark)}
.panel .button:focus-visible{outline-color:var(--on-dark)}
.link{display:inline-flex;align-items:center;min-height:44px;font-weight:640}
.output{display:block;margin-top:.7rem;min-height:2.55rem;font-size:.875rem;overflow-wrap:anywhere;color:var(--muted)}
.output[data-state=pass]{color:var(--accent);font-weight:620}.output[data-state=fail]{color:var(--error);font-weight:620}
.panel .output{color:var(--on-dark-muted)}.panel .output[data-state=pass]{color:#c9f2d5}.panel .output[data-state=fail]{color:#ffd4ca}
.fields{margin:.8rem 0 0}.fields>div{display:grid;grid-template-columns:minmax(5rem,1fr) minmax(0,2.2fr);gap:.6rem;padding:.63rem 0;border-top:1px solid var(--line)}
.fields dt{color:var(--muted)}.fields dd{margin:0;overflow-wrap:anywhere}
.steps{list-style:none;padding:0;margin:0;counter-reset:step}
.steps li{counter-increment:step;border-top:1px solid var(--line);padding:.8rem 0;display:grid;grid-template-columns:2rem 1fr;gap:.5rem}
.steps li::before{content:"0" counter(step);font:600 .82rem/1.7 ui-monospace,monospace;color:var(--accent)}.steps p{color:var(--muted);font-size:.925rem}
}