@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:#F5F4FC;
  --bg-raised:#FFFFFF;
  --bg-sunk:#EBE9F8;
  --ink:#13142E;
  --ink-soft:#4E4F72;
  --ink-faint:#83849F;
  --line:#DFDCF0;
  --accent:#6E3CF2;
  --accent-strong:#5A28E0;
  --accent-soft:#EAE1FF;
  --surface-dark:#3A2F8F;
  --on-dark:#FFFFFF;
  --on-dark-soft:#DAD7F7;
  --shadow:rgba(15,10,40,.2);
  --font-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --font-body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono','Consolas',monospace;
}
:root[data-theme="dark"]{
  --bg:#0B0C1F; --bg-raised:#14152F; --bg-sunk:#08091A;
  --ink:#F2F1FB; --ink-soft:#B4B5D4; --ink-faint:#7E80A0; --line:#262845;
  --accent:#8B6BFF; --accent-strong:#A68CFF; --accent-soft:#241C47;
  --surface-dark:#08091A; --on-dark:#F2F1FB; --on-dark-soft:#A7A9CC;
  --shadow:rgba(0,0,0,.5);
}

*,*::before,*::after{ box-sizing:border-box; }
body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.65; margin:0; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.15; text-wrap:balance; }
a{ color:var(--accent-strong); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; border-radius:14px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.container{ max-width:820px; margin-inline:auto; padding-inline:clamp(20px,4vw,32px); }
.wide{ max-width:1100px; }

.nav{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav-inner{ max-width:1100px; margin-inline:auto; padding:14px clamp(20px,4vw,32px); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--ink); }
.brand span{ color:var(--accent-strong); }
.nav-links{ display:flex; gap:20px; font-size:.92rem; flex-wrap:wrap; }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover{ color:var(--ink); }

.eyebrow{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-strong); }

.blog-hero{ padding-block:clamp(40px,6vw,64px) clamp(24px,4vw,36px); }
.blog-hero h1{ font-size:clamp(2rem,3vw + 1rem,2.8rem); margin-block:12px 10px; }
.blog-hero p{ color:var(--ink-soft); max-width:60ch; }

.post-grid{ display:grid; grid-template-columns:1fr; gap:20px; padding-block:20px 64px; }
@media (min-width:640px){ .post-grid{ grid-template-columns:1fr 1fr; } }
.post-card{ background:var(--bg-raised); border:1px solid var(--line); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:10px; transition:transform .2s ease, box-shadow .2s ease; }
.post-card:hover{ transform:translateY(-3px); box-shadow:0 16px 32px -20px var(--shadow); }
.post-date{ font-family:var(--font-mono); font-size:.75rem; color:var(--ink-faint); }
.post-card h2{ font-size:1.2rem; }
.post-card p{ color:var(--ink-soft); font-size:.93rem; margin:0; }
.post-card a.stretch{ position:absolute; inset:0; }
.post-card{ position:relative; }
.post-card a.stretch{ text-decoration:none; }

.post-header{ padding-block:clamp(32px,5vw,48px) 20px; border-bottom:1px solid var(--line); margin-bottom:32px; }
.post-header h1{ font-size:clamp(1.8rem,2.6vw + 1rem,2.5rem); margin-block:10px 14px; }
.post-meta{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-faint); }
.post-body{ padding-bottom:64px; font-size:1.05rem; }
.post-body h2{ font-size:1.4rem; margin-top:2em; margin-bottom:.6em; }
.post-body h3{ font-size:1.15rem; margin-top:1.6em; margin-bottom:.5em; }
.post-body p{ margin-block:1em; }
.post-body ul,.post-body ol{ padding-left:1.3em; margin-block:1em; }
.post-body li{ margin-block:.4em; }
.post-body blockquote{ margin:1.5em 0; padding:4px 20px; border-left:3px solid var(--accent); color:var(--ink-soft); font-style:italic; }
.post-cta{ margin-top:48px; background:var(--surface-dark); color:var(--on-dark); border-radius:18px; padding:clamp(24px,4vw,32px); display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.post-cta h3{ color:var(--on-dark); font-size:1.2rem; }
.post-cta p{ color:var(--on-dark-soft); margin:0; }
.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.92rem; padding:11px 20px; border-radius:999px; background:var(--accent); color:#fff; }
.btn:hover{ background:var(--accent-strong); text-decoration:none; }
.back-link{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.85rem; margin-bottom:18px; }

.footer{ background:var(--surface-dark); color:var(--on-dark-soft); padding-block:36px; margin-top:40px; }
.footer-inner{ max-width:1100px; margin-inline:auto; padding-inline:clamp(20px,4vw,32px); display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; font-size:.85rem; }
.footer a{ color:var(--on-dark-soft); }
.footer a:hover{ color:var(--on-dark); }

.cookie-notice{ position:fixed; left:16px; bottom:16px; z-index:80; max-width:min(340px, calc(100vw - 32px)); background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; padding:10px 12px; display:flex; align-items:center; gap:10px; box-shadow:0 10px 24px -16px var(--shadow); font-size:.76rem; color:var(--ink-faint); opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; pointer-events:none; }
.cookie-notice.visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.cookie-notice p{ margin:0; line-height:1.4; }
.cookie-notice a{ color:var(--accent-strong); }
.cookie-notice button{ flex-shrink:0; background:var(--bg-sunk); border:1px solid var(--line); border-radius:8px; padding:5px 11px; font-size:.72rem; font-weight:600; cursor:pointer; color:var(--ink); }
.cookie-notice button:hover{ background:var(--accent-soft); border-color:var(--accent); }
@media (max-width:640px){ .cookie-notice{ left:12px; right:12px; max-width:none; } }
@media (prefers-reduced-motion: reduce){ .cookie-notice{ transition:opacity .3s ease; transform:none; } }

html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ overflow-x:clip; -webkit-tap-highlight-color:rgba(110,60,242,.15); }
.post-body{ overflow-wrap:break-word; }
.policy h2{ scroll-margin-top:84px; }
.policy-summary{ background:var(--accent-soft); border-left:4px solid var(--accent); border-radius:12px; padding:16px 20px; margin-bottom:28px; font-size:.98rem; }
.policy-toc{ background:var(--bg-raised); border:1px solid var(--line); border-radius:16px; padding:20px 24px; margin-bottom:12px; }
.policy-toc h2{ font-size:1.05rem; margin:0 0 10px; }
.policy-toc ol{ margin:0; padding-left:1.4em; columns:2; column-gap:32px; }
.policy-toc li{ margin-block:.3em; break-inside:avoid; font-size:.95rem; }
.table-wrap{ overflow-x:auto; margin-block:1.2em; border:1px solid var(--line); border-radius:14px; background:var(--bg-raised); }
.policy table{ border-collapse:collapse; width:100%; min-width:640px; font-size:.9rem; line-height:1.5; }
.policy th, .policy td{ text-align:left; vertical-align:top; padding:12px 14px; border-bottom:1px solid var(--line); }
.policy th{ background:var(--bg-sunk); font-family:var(--font-display); font-size:.85rem; }
.policy tbody tr:last-child td{ border-bottom:0; }
.policy code{ font-family:var(--font-mono); font-size:.85em; background:var(--bg-sunk); padding:2px 6px; border-radius:6px; }
.todo{ color:#C0182B; background:rgba(192,24,43,.08); border-radius:6px; padding:1px 6px; font-weight:600; }
.policy-end{ margin-top:2em; padding-top:1.2em; border-top:1px solid var(--line); color:var(--ink-soft); }
@media (max-width:640px){ .policy-toc ol{ columns:1; } .policy-toc{ padding:16px 18px; } }
.footer{ border-radius:40px 40px 0 0; }
@media (max-width:900px){ .footer{ margin:40px 8px 8px; border-radius:28px; } }
.post-grid{ grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ .post-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (hover:none){ .post-card:hover{ transform:none; box-shadow:none; } }
@media (max-width:640px){
  .container, .nav-inner, .footer-inner{ padding-inline:18px; }
  .nav-inner{ padding-block:10px; gap:10px; }
  .nav-links{ gap:0 4px; font-size:.88rem; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-right:-18px; padding-right:18px; }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links a{ flex-shrink:0; padding:12px 8px; }
  .brand{ padding-block:10px; flex-shrink:0; }
  .post-card{ padding:20px; }
  .post-body{ font-size:1.02rem; line-height:1.7; padding-bottom:48px; }
  .post-body h2{ font-size:1.25rem; }
  .post-cta .btn, .back-link{ min-height:44px; }
  .post-cta .btn{ width:100%; justify-content:center; }
  .back-link{ align-items:center; }
  .footer-inner a{ display:inline-block; padding-block:10px; }
  .cookie-notice button{ min-height:36px; padding:6px 14px; }
}