:root{
  --bg:#faf7f2; --bg-alt:#f3eee6; --surface:#fffdfa; --border:#e2dace;
  --text:#23201c; --text-soft:#574f45; --text-mute:#6d6459;
  --accent:#0d6560; --accent-lo:#e3f1ef; --accent-tx:#0b4f4b;
  --warn:#8a5a12; --warn-lo:#fbf1de;
  --btn-bg:#0d6560; --btn-tx:#ffffff;
  --shadow:0 1px 2px rgba(35,32,28,.05), 0 8px 24px -12px rgba(35,32,28,.16);
  --radius:14px; --measure:64ch;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#171512; --bg-alt:#1e1b17; --surface:#211e1a; --border:#363029;
  --text:#f2ede5; --text-soft:#cdc4b8; --text-mute:#a89e92;
  --accent:#5eead4; --accent-lo:#16302e; --accent-tx:#7ff0dc;
  --warn:#e8bd7a; --warn-lo:#2e2517;
  --btn-bg:#5eead4; --btn-tx:#10302c;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --bg:#171512; --bg-alt:#1e1b17; --surface:#211e1a; --border:#363029;
  --text:#f2ede5; --text-soft:#cdc4b8; --text-mute:#a89e92;
  --accent:#5eead4; --accent-lo:#16302e; --accent-tx:#7ff0dc;
  --warn:#e8bd7a; --warn-lo:#2e2517;
  --btn-bg:#5eead4; --btn-tx:#10302c;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.7; letter-spacing:.01em; text-align:left;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%; max-width:760px; margin:0 auto; padding:0 22px}
.measure{max-width:var(--measure)}
h1,h2{line-height:1.22; letter-spacing:-.015em; margin:0 0 .5em; text-wrap:balance}
h1{font-size:clamp(1.8rem,4.6vw,2.7rem); font-weight:800}
h2{font-size:clamp(1.25rem,2.6vw,1.6rem); font-weight:750; margin-top:2.2em}
p{margin:0 0 1.05em}
a{color:var(--accent-tx)}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-9999px; top:0; background:var(--surface); color:var(--text);
  padding:12px 18px; z-index:100; border-radius:0 0 10px 0; font-weight:700}
.skip:focus{left:0}
header.bar{border-bottom:1px solid var(--border); background:var(--bg)}
.bar-in{display:flex; align-items:center; gap:10px; padding:13px 0; font-weight:800;
  letter-spacing:-.02em; text-decoration:none; color:var(--text)}
.mark{width:30px; height:30px; border-radius:9px; flex:none; background:var(--accent-lo);
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  display:grid; place-items:center; color:var(--accent-tx); font-weight:900; font-size:.92rem}
main{padding:38px 0 10px}
.eyebrow{font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-tx); margin-bottom:.8em}
.short{background:var(--accent-lo); border-radius:var(--radius); padding:20px 22px;
  font-size:1.1rem; font-weight:650; color:var(--text); margin:0 0 1.6em}
.short b{display:block; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-tx); margin-bottom:.5em; font-weight:800}
pre{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; overflow-x:auto; font-size:.95rem; line-height:1.62;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--text-soft); white-space:pre-wrap; box-shadow:var(--shadow)}
figure{margin:2em 0}
figure img{width:100%; height:auto; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow)}
figcaption{font-size:.9rem; color:var(--text-mute); margin-top:.7em}
.note{background:var(--warn-lo); border-radius:var(--radius); padding:16px 20px;
  font-size:.96rem; color:var(--text-soft)}
.cta{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 24px; box-shadow:var(--shadow); margin:2.4em 0 1em}
.cta h2{margin-top:0}
.btn{display:inline-block; background:var(--btn-bg); color:var(--btn-tx); font-weight:700;
  padding:13px 22px; border-radius:10px; text-decoration:none; margin:.4em .5em .4em 0}
.btn-2{background:transparent; color:var(--accent-tx); border:1px solid var(--border)}
footer{border-top:1px solid var(--border); margin-top:3em; padding:24px 0 46px;
  font-size:.9rem; color:var(--text-mute)}
footer a{color:var(--text-mute)}
.signup{background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 24px; margin:2.2em 0}
.signup p{margin:0 0 .8em; font-size:.98rem; color:var(--text-soft)}
.signup strong{color:var(--text)}
.signup-row{display:flex; flex-wrap:wrap; gap:10px}
.signup input[type=email]{flex:1 1 240px; min-width:0; font:inherit; font-size:1rem;
  padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--text)}
.signup button{font:inherit; font-weight:700; font-size:1rem; padding:12px 22px;
  border:0; border-radius:10px; background:var(--btn-bg); color:var(--btn-tx); cursor:pointer}