:root{
  --bg:#fff; --fg:#111; --muted:#666; --link:#0b5fff; --border:#e6e6e6; --chip:#f4f4f5;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b0b0c; --fg:#e9e9ea; --muted:#a0a0a4; --link:#8ab4ff; --border:#232326; --chip:#161618; }
}
*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:var(--sans); line-height:1.55;}
a{ color:var(--link); text-decoration:none } a:hover{text-decoration:underline}
.container{ max-width: 980px; margin:0 auto; padding: 20px;}
.container--wide{ max-width: 1280px; }
@media (min-width: 1400px){ .container--wide{ max-width: 1440px; } }

.header{ border-bottom:1px solid var(--border);}
.header .brand{ display:flex; align-items:center; gap:10px; padding: 14px 0;}
.brand b{ font-size:1.2rem; letter-spacing:0.2px;}
.nav{ display:flex; gap:12px; flex-wrap:wrap; padding-bottom:10px;}
.nav a{ padding:6px 10px; border-radius:12px; background:var(--chip); color:var(--fg); }
.nav a[aria-current="page"]{ background:transparent; border:1px solid var(--border); }

h1{ font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); margin: 16px 0 6px 0;}
h2{ font-size: clamp(1.2rem, 1rem + .6vw, 1.6rem); margin: 18px 0 6px 0;}
h3{ font-size: 1.05rem; margin: 14px 0 4px 0;}
hr{ border:0; border-top:1px solid var(--border); margin: 24px 0; }

.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:16px; }
.card{ padding:16px; border:1px solid var(--border); border-radius:14px; background:transparent;}
.small{ font-size:0.95rem; color:var(--muted);}
.footer{ color:var(--muted); border-top:1px solid var(--border); margin-top:30px; padding:14px 0 40px 0; font-size:0.95rem;}

input[type="text"], select{ width:100%; padding:10px 12px; border:1px solid var(--border); background:var(--bg); color:var(--fg); border-radius:12px;}
button{ padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--chip); color:var(--fg); cursor:pointer;}
button:hover{ filter:brightness(1.05);}
label{ font-size:0.95rem; color:var(--muted); display:block; margin-top:8px;}
.badge{ display:inline-block; padding:2px 8px; border:1px solid var(--border); border-radius:100px; font-size:0.8rem; background:var(--chip); }
figure{ margin:18px 0; }
figcaption{ font-size:0.9rem; color:var(--muted); margin-top:6px;}
code,kbd,pre{ font-family:var(--mono); background:var(--chip); padding:0 4px; border-radius:6px;}
pre{ padding:10px; overflow:auto }
kbd{ border:1px solid var(--border); border-bottom-width:2px; border-radius:6px; padding:1px 4px; }

/* ====== Screen real-estate upgrades ====== */
.two-col{ display:grid; grid-template-columns: minmax(280px, 360px) 1fr; gap:20px; align-items:start; }
@media (max-width: 900px){ .two-col{ grid-template-columns: 1fr; } }

.card--sticky{ position: sticky; top: 12px; }

.sigil-stage{ display:grid; grid-template-rows: auto 1fr; gap:14px; }
.sigil-canvas{ width:100%; height:auto; aspect-ratio: 1 / 1; border:1px solid var(--border); border-radius:14px; }
.sigil-details{ max-height: 40vh; overflow:auto; border:1px solid var(--border); border-radius:14px; padding:12px; }
@media (min-height: 900px){ .sigil-details{ max-height: 56vh; } }

.symbols-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:14px; }
@media (min-width: 1200px){ .symbols-grid{ grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); } }

/* tighter spacing in cards on wide screens */
@media (min-width: 1200px){
  .card{ padding:18px; }
}
.role-name { font-variant-caps: small-caps; }
/* Sentence Collector layout refinements */
.sc-panel .sc-slots{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
.sc-slot{display:grid;grid-template-columns:1fr auto;align-items:center;padding:10px 12px;border:1px dashed var(--line);border-radius:12px;background:#0e0e0e;min-height:44px;transition:transform .12s ease, box-shadow .12s ease, border-color .12s}
.sc-left .sc-label{opacity:.75;font-size:12px;letter-spacing:.02em;text-transform:none}
.sc-right{display:flex;align-items:baseline;gap:8px}
.sc-slot .sc-letter{font-size:18px;letter-spacing:.06em}
.sc-slot .sc-formula{font-size:14px;opacity:.85}
.sc-slot.drop-hover{border-color:var(--accent);box-shadow:0 0 0 2px rgba(88,199,250,.15);animation:scPulse .8s ease-in-out infinite alternate}
.sc-slot.filled{border-style:solid;border-color:var(--accent);animation:scPop .18s ease-out 1}

a[aria-disabled="true"]{opacity:.55;pointer-events:none}

.quick-facts .fact{display:flex;gap:10px;align-items:baseline;margin:4px 0}
.quick-facts .fact .k{width:120px;opacity:.8}
.quick-facts .mini{display:flex;gap:10px}
.quick-facts a#invLink{text-decoration:none;border-bottom:1px dotted var(--line)}
.quick-facts a#invLink:hover{color:var(--accent)}