:root{
  --bg:#E7E4EC; --surface:#F3F1F6; --fg:#2A2633; --muted:#6B6578;
  --accent:#D9775A; --accent-ink:#fff; --sage:#9DB39A; --butter:#E6C46F; --sky:#86A8CC;
  --hi:rgba(255,255,255,.85); --lo:rgba(80,64,110,.18);
  --ui:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1D1B22; --surface:#27242E; --fg:#EEEAF4; --muted:#A79FB5;
  --accent:#E8896B; --accent-ink:#1D1B22; --hi:rgba(255,255,255,.06); --lo:rgba(0,0,0,.45); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1D1B22; --surface:#27242E; --fg:#EEEAF4; --muted:#A79FB5;
  --accent:#E8896B; --accent-ink:#1D1B22; --hi:rgba(255,255,255,.06); --lo:rgba(0,0,0,.45); color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:400 15px/1.55 var(--ui)}
.wrap{width:min(1180px,100%);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-weight:700;text-wrap:balance;margin:0}
h2{font-size:1.6rem;letter-spacing:-.01em}
p{margin:0}
.muted{color:var(--muted)}
.clay{background:var(--surface);border-radius:22px;box-shadow:-6px -6px 14px var(--hi),8px 10px 22px var(--lo),inset 1px 1px 0 var(--hi)}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:0;font:600 1rem var(--ui);cursor:pointer;text-decoration:none}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 0 color-mix(in srgb,var(--accent) 60%,#000),0 10px 20px var(--lo)}
.btn-primary:active{transform:translateY(3px);box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 60%,#000)}
.btn-ghost{background:transparent;color:var(--fg)}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.1rem;color:var(--fg);text-decoration:none}
.logo i{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F2B49C,var(--accent));box-shadow:2px 3px 6px var(--lo)}
nav{display:flex;gap:4px}
nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:10px;font-weight:500}
nav a:hover{color:var(--fg)}
@media (max-width:760px){nav{display:none}}

.logo,.bar .btn{white-space:nowrap}
@media (max-width:420px){.logo{font-size:1rem}.bar .btn{padding:0 16px}}