:root{color-scheme:dark;--bg:#0B0B0B;--surface:#181818;--border:#272727;--border-strong:#313131;--text:#F2F0EB;--muted:#94A3B8;--teal:#2DD4BF;--ease:cubic-bezier(0.22,1,0.36,1)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--border-strong) var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Poppins",system-ui,sans-serif;font-size:16px;line-height:26px;-webkit-font-smoothing:antialiased}
::selection{background:var(--teal);color:var(--bg)}
a{color:var(--text);text-underline-offset:3px}
a:hover{color:var(--teal)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
.wrap{max-width:720px;margin:0 auto;padding:0 16px}
header{padding:24px 0;border-bottom:1px solid var(--border)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
header img{height:36px;width:auto;display:block}
.back{font-size:14px;color:var(--muted);text-decoration:none}
main{padding:64px 0 96px}
h1{font-size:36px;line-height:42px;font-weight:600;letter-spacing:-0.01em;margin:0 0 8px;text-wrap:balance}
h2{font-size:20px;line-height:28px;font-weight:600;margin:48px 0 12px}
p,li{color:var(--muted);text-wrap:pretty;max-width:62ch}
p{margin:0 0 16px}
ul{padding-left:20px;margin:0 0 16px}
li{margin-bottom:8px}
strong{color:var(--text);font-weight:500}
.updated{font-size:14px;color:var(--muted);margin-bottom:40px}
.btn{display:inline-flex;align-items:center;padding:12px 24px;border-radius:9999px;text-decoration:none;font-weight:600;background:var(--text);color:var(--bg);border:1px solid var(--text);transition:background-color 300ms var(--ease),border-color 300ms var(--ease)}
.btn:hover{background:var(--teal);border-color:var(--teal);color:var(--bg)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface);border-color:var(--border-strong);color:var(--text)}
.actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
footer{border-top:1px solid var(--border);padding:32px 0;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 24px}
footer a{color:var(--muted);text-decoration:none;padding:10px 0;margin:-10px 0}
footer a:hover{color:var(--text)}
@media (min-width:768px){h1{font-size:48px;line-height:54px}main{padding:96px 0 128px}}

/* Soft fade between pages (browsers that support it) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* Bold look (Option 1 Bold preview only): applied when the visitor came from option-1-bold.html */
html[data-palette="o1"]{--bg:#08090C;--surface:#181A20;--border:#262931;--border-strong:#31353E;--text:#DFE5EB;--muted:#94A3B8;--red:#EF233C;--red-btn:#D7122B}
html[data-palette="o1"] body{background:radial-gradient(1200px 700px at 75% -10%,rgba(223,229,235,.08),transparent 60%),radial-gradient(900px 600px at -10% 40%,rgba(223,229,235,.04),transparent 60%),var(--bg) fixed}
html[data-palette="o1"] ::selection{background:var(--red);color:#fff}
html[data-palette="o1"] :focus-visible{outline-color:var(--text)}
html[data-palette="o1"] a:hover{color:var(--red)}
html[data-palette="o1"] header{border:0;padding:16px 16px 0;position:sticky;top:0;z-index:10}
html[data-palette="o1"] header .wrap{max-width:920px;padding:8px 8px 8px 20px;border-radius:9999px;background:rgba(17,18,23,.94);border:1px solid var(--border);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html[data-palette="o1"] .back{color:var(--text);padding:10px 18px;border-radius:9999px;border:1px solid var(--border-strong);transition:background-color 300ms var(--ease),border-color 300ms var(--ease)}
html[data-palette="o1"] .back:hover{background:rgba(223,229,235,.06);border-color:var(--red);color:var(--text)}
html[data-palette="o1"] main .wrap{position:relative}
html[data-palette="o1"] main .wrap::before{content:"";position:absolute;left:-28px;top:14px;bottom:0;width:2px;border-radius:2px;background:linear-gradient(var(--red),rgba(239,35,60,.35) 30%,rgba(239,35,60,0))}
html[data-palette="o1"] main .wrap::after{content:"";position:absolute;left:-34px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--red);box-shadow:inset 0 0 0 3px var(--bg),0 0 0 6px rgba(239,35,60,.15)}
html[data-palette="o1"] h1{font-weight:300;letter-spacing:-0.03em}
html[data-palette="o1"] h2{font-weight:400;font-size:24px;line-height:32px;letter-spacing:-0.01em}
html[data-palette="o1"] .updated{display:inline-block;font-size:13px;padding:4px 12px;border-radius:9999px;border:1px solid var(--border-strong)}
html[data-palette="o1"] p a,html[data-palette="o1"] li a{text-decoration-color:var(--red)}
html[data-palette="o1"] .btn{background:var(--red-btn);border-color:var(--red-btn);color:#fff}
html[data-palette="o1"] .btn:hover{background:#A50D20;border-color:#A50D20;color:#fff}
html[data-palette="o1"] .btn-ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
html[data-palette="o1"] .btn-ghost:hover{background:var(--text);border-color:var(--text);color:var(--bg)}
@media (max-width:820px){html[data-palette="o1"] main .wrap{padding-left:36px}html[data-palette="o1"] main .wrap::before{left:22px}html[data-palette="o1"] main .wrap::after{left:16px}}
@media (min-width:768px){html[data-palette="o1"] h1{font-size:60px;line-height:64px}}

/* Polish pass: skip link, bigger hit areas, hovers that move as well as recolour */
.skip{position:absolute;left:16px;top:-48px;background:var(--text);color:var(--bg);padding:8px 12px;border-radius:8px;z-index:100;text-decoration:none;transition:top 300ms var(--ease)}
.skip:focus{top:16px}
main p a,main li a{display:inline-block;padding:3px 0;line-height:inherit}
main p a,main li a{text-decoration-thickness:1px;transition:color 300ms var(--ease),text-decoration-color 300ms var(--ease)}
main p a:hover,main li a:hover{text-decoration-thickness:2px}
header a[aria-label]{display:inline-block;transition:transform 300ms var(--ease),opacity 300ms var(--ease)}
header a[aria-label]:hover{transform:translateY(-2px);opacity:.85}
.back{display:inline-flex;align-items:center;transition:transform 300ms var(--ease),color 300ms var(--ease),background-color 300ms var(--ease),border-color 300ms var(--ease)}
.back:hover{transform:translateX(-3px)}
@media (prefers-reduced-motion:reduce){header a[aria-label]:hover,.back:hover{transform:none}}
html[data-palette="o1"] .back{transition:transform 300ms var(--ease),background-color 300ms var(--ease),border-color 300ms var(--ease)}
.btn{transition:transform 300ms var(--ease),box-shadow 450ms var(--ease),background-color 300ms var(--ease),border-color 300ms var(--ease),color 300ms var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px -10px rgba(0,0,0,.6)}
.btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}
html[data-palette="o1"] .btn:hover{background:#FF3B52;border-color:#FF3B52;color:#111217}
html{background:var(--bg)}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
body>main{flex:1 0 auto}