*,*::before,*::after { box-sizing: border-box; }
  @font-face{font-family:'Fraunces';font-style:normal;font-weight:500 600;font-display:swap;src:url('/fonts/fraunces-v38-latin-var.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/inter-v20-latin-var.woff2') format('woff2');}
  @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2');}
  :root, [data-theme="light"]{
    --bg:#F4F1EA; --ink:#1F2937; --ink-soft:#4B5563; --ink-faded:#857B66;
    --border:#E7E0D1; --line-2:#DBD2BF; --card:#FFFFFF; --card-2:#FBF8F1;
    --accent:#C2410C; --accent-bri:#D97706; --on-accent:#FFFFFF;
    --gold:#D9A441; --gold-deep:#B8862B;
    --serif:'Fraunces',Georgia,serif; --sans:'Inter',-apple-system,system-ui,sans-serif; --mono:'JetBrains Mono','SF Mono',Menlo,monospace;
  }
  [data-theme="dark"]{
    --bg:#14110C; --ink:#EDE7D9; --ink-soft:#C9C0AE; --ink-faded:#A89F8C;
    --border:#3A3225; --line-2:#473826; --card:#251F18; --card-2:#2C2316;
    --accent:#F0911F; --accent-bri:#D97706; --on-accent:#2A1B05;
    --gold:#FCD34D; --gold-deep:#E9B838;
  }
  body { margin: 0; background: var(--bg); color: var(--ink);
         font-family: var(--sans); font-size: 16.5px; line-height: 1.7;
         -webkit-font-smoothing: antialiased; transition: background .2s, color .2s; }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: 3px; }
  code { font-family: var(--mono); font-size: 0.92em; }
  .wrap { max-width: 760px; margin: 0 auto; padding: 0 28px; }
  .topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;
    padding:14px 24px;max-width:1120px;margin:0 auto;border-bottom:1px solid var(--border);
    background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .topbar .brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:-0.3px;text-decoration:none}
  .logo-mark{height:26px;width:auto}
  .topactions{margin-left:auto;display:flex;align-items:center;gap:10px}
  .tbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--sans);
    font-size:13.5px;font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--line-2);border-radius:9px;padding:9px 13px;cursor:pointer}
  .tbtn:hover{border-color:var(--accent)}
  .tbtn.icon{padding:9px;width:40px}
  .btn{display:inline-block;text-align:center;font-weight:700;font-size:13.5px;border-radius:9px;padding:9px 14px;border:1px solid transparent;cursor:pointer;font-family:var(--sans);text-decoration:none}
  .btn.primary{background:linear-gradient(180deg,var(--accent-bri),var(--accent));color:var(--on-accent);border-color:var(--accent)}
  .btn.primary:hover{filter:brightness(1.05);text-decoration:none}
  main { padding: 56px 0 96px; }
  h1 { font-family: var(--serif); font-weight: 500; font-size: 38px;
       letter-spacing: -0.02em; margin: 0 0 6px; }
  .updated { color: var(--ink-faded); font-size: 14px; margin-bottom: 40px; }
  h2 { font-family: var(--serif); font-weight: 500; font-size: 23px; margin: 40px 0 12px; }
  .callout { background: var(--card-2); border: 1px solid var(--border); border-left: 3px solid var(--gold);
             border-radius: 8px; padding: 18px 20px; margin: 26px 0; }
  footer { border-top: 1px solid var(--border); padding: 28px 0; color: var(--ink-faded); font-size: 14px; }