:root{
  --bg:#0B0C0F; --ink:#F4F5F7; --inkDim:#A6ABB5; --inkFaint:#717783;
  --amber:#FFB43A; --glass:rgba(255,255,255,0.045); --line:rgba(255,255,255,0.09);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:#0B0C0F;
  background-image:
    radial-gradient(115% 70% at 88% -12%, rgba(40,32,12,0.55), transparent 58%),
    radial-gradient(120% 75% at 0% 112%, rgba(22,26,35,0.9), transparent 55%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:"Spline Sans",-apple-system,system-ui,sans-serif;
  font-size:17px;line-height:1.72;letter-spacing:-0.006em;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:11px;
  padding:15px 22px;backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  background:rgba(11,12,15,0.62);border-bottom:1px solid var(--line)}
.mark{display:flex;align-items:flex-end;gap:3px;height:18px}
.mark i{width:3px;border-radius:2px;background:var(--amber);display:block;box-shadow:0 0 8px rgba(255,180,58,0.5)}
.mark i:nth-child(1){height:8px}.mark i:nth-child(2){height:14px}.mark i:nth-child(3){height:18px}
.mark i:nth-child(4){height:11px}.mark i:nth-child(5){height:6px}
.wordmark{font-weight:600;letter-spacing:-0.02em;font-size:16px}
.bar nav{margin-left:auto;display:flex;gap:20px;font-size:14px}
.bar nav a{color:var(--inkDim);text-decoration:none;transition:color .2s}
.bar nav a.active,.bar nav a:hover{color:var(--amber)}
main{max-width:768px;margin:0 auto;padding:54px 22px 40px}
.card{background:var(--glass);border:1px solid var(--line);border-radius:26px;
  padding:clamp(26px,5vw,56px);backdrop-filter:blur(34px);-webkit-backdrop-filter:blur(34px);
  box-shadow:0 40px 90px rgba(0,0,0,0.45);animation:rise .7s cubic-bezier(.2,.75,.2,1) both}
.eyebrow{color:var(--amber);font-size:12.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase}
h1{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(33px,7vw,50px);
  line-height:1.04;letter-spacing:-0.015em;margin:12px 0 6px}
.sub{color:var(--inkDim);font-size:15px;margin-bottom:4px}
.updated{color:var(--inkFaint);font-size:13.5px;margin-top:6px}
.draftnote{display:block;margin:18px 0 4px;padding:10px 15px;font-size:13px;line-height:1.5;
  color:var(--amber);background:rgba(255,180,58,0.09);border:1px solid rgba(255,180,58,0.24);border-radius:13px}
h2{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(20px,3.4vw,25px);
  letter-spacing:-0.01em;margin:34px 0 12px;padding-top:22px;border-top:1px solid var(--line);color:var(--ink)}
p{color:var(--inkDim);margin:0 0 15px}
ul{list-style:none;margin:2px 0 18px}
li{color:var(--inkDim);position:relative;padding-left:22px;margin-bottom:11px}
li::before{content:"";position:absolute;left:3px;top:11px;width:5px;height:5px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 6px rgba(255,180,58,0.5)}
strong{color:var(--ink);font-weight:600}
a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(255,180,58,0.35)}
a:hover{border-bottom-color:var(--amber)}
footer{max-width:768px;margin:0 auto;padding:18px 22px 80px;color:var(--inkFaint);font-size:13px;
  display:flex;gap:16px;flex-wrap:wrap;align-items:center}
footer .dot{width:4px;height:4px;border-radius:50%;background:var(--inkFaint);opacity:.6}
footer a{color:var(--inkFaint);border:0}
footer a:hover{color:var(--amber)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.card{animation:none}}
@media (max-width:520px){body{font-size:16px}.bar nav{gap:14px}}