:root{
  --bg: oklch(0.98 0.005 250);
  --surface: oklch(1 0 0);
  --ink: oklch(0.22 0.02 260);
  --muted: oklch(0.5 0.02 260);
  --brand: oklch(0.62 0.17 250);
  --brand-2: oklch(0.7 0.15 200);
  --line: oklch(0.9 0.01 260);
  --radius: clamp(10px, 1.4vw, 16px);
  --space: clamp(16px, 3vw, 40px);
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 1px 2px oklch(0.2 0.02 260 / 0.06), 0 8px 30px oklch(0.2 0.02 260 / 0.08);
}
:root[data-theme="dark"]{
  --bg: oklch(0.17 0.012 260);
  --surface: oklch(0.23 0.015 260);
  --ink: oklch(0.95 0.01 260);
  --muted: oklch(0.72 0.02 260);
  --brand: oklch(0.72 0.16 250);
  --brand-2: oklch(0.78 0.14 200);
  --line: oklch(0.33 0.015 260);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.4), 0 8px 30px oklch(0 0 0 / 0.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
.wrap{max-width:1080px;margin:0 auto;padding:var(--space)}
h1,h2,h3{font-family:var(--font-display);line-height:1.1;letter-spacing:-0.02em;margin:0 0 .4em}
h1{font-size:clamp(2.2rem,6vw,4rem)}
a{color:var(--brand);text-decoration:none}
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.7em 1.3em;border-radius:999px;font-weight:600;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:0;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space);box-shadow:var(--shadow)}
.grid{display:grid;gap:var(--space);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.nav{display:flex;gap:1.2em;align-items:center;justify-content:space-between;padding:1em var(--space)}
.nav a.brand{font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--ink)}
.nav .links{display:flex;gap:1em;flex-wrap:wrap;align-items:center}
.muted{color:var(--muted)}
.tag{display:inline-block;font-size:.8rem;color:var(--brand);border:1px solid color-mix(in oklch,var(--brand) 40%,transparent);
  padding:.2em .7em;border-radius:999px;margin-bottom:1em}
footer{border-top:1px solid var(--line);margin-top:calc(var(--space)*2);padding:var(--space);color:var(--muted);font-size:.9rem}
footer a{margin-right:1em}
#consent{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);
  padding:1em var(--space);display:flex;gap:1em;align-items:center;justify-content:space-between;flex-wrap:wrap;z-index:50}
.hidden{display:none!important}
input,textarea,select{padding:.7em .9em;border:1px solid var(--line);border-radius:10px;font:inherit;width:100%;background:var(--surface);color:var(--ink)}
label{display:block;margin:.6em 0 .2em;font-weight:600}
form .row{margin-bottom:.4em}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2.2em;height:2.2em;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font-size:1.1rem;line-height:1}
.icon-btn:hover{border-color:var(--brand)}
.lang-select{width:auto;padding:.4em .6em;border-radius:999px;font-size:.85rem}
/* --- Beanbag Studio calculator --- */
.result{background:color-mix(in oklch,var(--brand) 8%,var(--surface));border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--space);margin-top:1em}
.result.rise{animation:rise .35s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.5em 1.4em;margin:0}
.kv dt{color:var(--muted);font-weight:600}
.kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.stat{text-align:center;padding:1em;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.stat b{display:block;font-size:1.5rem;font-family:var(--font-display);color:var(--brand)}
.stat span{color:var(--muted);font-size:.85rem}
.ledger th,.ledger td{padding:.6em .8em;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem}
.ledger th{color:var(--muted);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
.ledger tr:hover td{background:color-mix(in oklch,var(--brand) 5%,transparent)}