:root[data-theme="light"] {
  --bg:#FAF7F2; --surface:#FFFFFF; --surface-2:#F1ECE3; --ink:#1C1A17; --muted:#6B655C; --hairline:#E6DFD2;
  --accent:#C6702E; --accent-ink:#FFFFFF;
  --shadow: 0 14px 34px -18px rgba(28,26,23,0.22);
}
:root[data-theme="dark"] {
  --bg:#0B0D12; --surface:#14171F; --surface-2:#1B1F2A; --ink:#F3F1EC; --muted:#9A9488; --hairline:#262B36;
  --accent:#E08A45; --accent-ink:#0B0D12;
  --shadow: 0 18px 44px -18px rgba(0,0,0,0.6);
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--ink); }
body { font-family:'Space Grotesk', ui-sans-serif, system-ui, sans-serif; transition: background .3s ease, color .3s ease; }
a { color: inherit; } button { font-family: inherit; cursor: pointer; background:none; border:none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.serif { font-family:'Fraunces', Georgia, serif; }

.bg-field { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-field .frag { position:absolute; border-radius:22px; background:var(--surface-2); opacity:.55; filter:blur(.5px); }

.nav { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; padding:16px 32px; border-bottom:1px solid var(--hairline); }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; }
.brand svg { display:block; }
.brand span { font-family:'Fraunces', serif; font-weight:600; font-size:18px; letter-spacing:-.01em; }
.nav-links { display:flex; align-items:center; gap:24px; list-style:none; margin:0; padding:0; }
.nav-links a { font-size:13.5px; font-weight:500; color:var(--muted); text-decoration:none; }
.nav-links a:hover { color:var(--ink); }
.nav-tools { display:flex; align-items:center; gap:6px; }
.icon-btn { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--muted); }
.icon-btn:hover { background:var(--surface-2); color:var(--ink); }
@media (max-width:840px){ .nav-links{ display:none; } }

.search-panel { position:absolute; top:100%; right:32px; left:32px; max-width:420px; margin-left:auto; background:var(--surface); border:1px solid var(--hairline); border-radius:14px; box-shadow:var(--shadow); padding:10px; display:none; z-index:6; }
.search-panel[data-open="true"] { display:block; }
.search-panel input { width:100%; border:none; background:transparent; font-family:inherit; font-size:14px; padding:8px; color:var(--ink); }
.search-panel input:focus { outline:none; }
.search-results { max-height:260px; overflow:auto; }
.search-results a { display:block; padding:8px; border-radius:8px; font-size:13px; text-decoration:none; color:var(--ink); }
.search-results a:hover { background:var(--surface-2); }
.search-empty { padding:10px 8px; font-size:12.5px; color:var(--muted); }

.hero { position:relative; z-index:1; max-width:1040px; margin:0 auto; padding:28px 28px 32px; text-align:center; }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:.16em; color:var(--accent); }
h1.headline { font-family:'Fraunces', serif; font-weight:500; font-size:clamp(30px,5vw,52px); line-height:1.06; margin:10px 0 10px; letter-spacing:-.01em; }
.sub { font-size:15px; color:var(--muted); max-width:460px; margin:0 auto 20px; }

.orb-row { display:flex; flex-direction:column; align-items:center; }
.dialogue { font-size:15px; font-weight:500; margin:10px 0 22px; }

.cards { display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; max-width:980px; margin:0 auto; }
.card { position:relative; text-align:left; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--hairline); border-radius:18px; padding:16px 16px; overflow:hidden; transition: transform .25s cubic-bezier(.2,.9,.25,1), box-shadow .3s ease, border-color .25s ease; }
.card:nth-child(2), .card:nth-child(4) { transform: translateY(10px); }
.card:nth-child(2):hover, .card:nth-child(4):hover { transform: translateY(4px) scale(1.02); }
.card:hover, .card:focus-visible { transform: translateY(-6px) scale(1.02); box-shadow:var(--shadow); border-color: var(--card-accent); }
.card .wash { position:absolute; inset:0; opacity:0; background: linear-gradient(160deg, color-mix(in srgb, var(--card-accent) 16%, transparent), transparent 65%); transition: opacity .25s ease; }
.card:hover .wash, .card:focus-visible .wash { opacity:1; }
.card .icn { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; background:color-mix(in srgb, var(--card-accent) 18%, transparent); position:relative; }
.card .lbl { font-family:'Fraunces', serif; font-weight:500; font-size:17px; margin-bottom:6px; position:relative; }
.card .tag { font-size:12.5px; color:var(--muted); line-height:1.4; position:relative; }
@media (max-width: 900px){ .cards{ grid-template-columns:repeat(2,1fr); } .card:nth-child(2),.card:nth-child(4){ transform:none; } }
@media (max-width: 560px){ .cards{ grid-template-columns:1fr; } }

.guide-fab { position:fixed; bottom:24px; right:24px; z-index:20; width:56px; height:56px; border-radius:50%; background:var(--ink); color:var(--bg); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; }
.guide-fab:hover { transform: scale(1.05); }
.guide-panel { position:fixed; bottom:92px; right:24px; z-index:20; width:270px; background:var(--surface); border:1px solid var(--hairline); border-radius:16px; box-shadow:var(--shadow); padding:16px; opacity:0; transform:translateY(10px) scale(.97); pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.guide-panel[data-open="true"] { opacity:1; transform:none; pointer-events:auto; }
.guide-panel .q { font-family:'Fraunces', serif; font-size:15px; margin-bottom:12px; }
.guide-panel a, .guide-panel .soon { display:flex; align-items:center; justify-content:space-between; padding:9px 10px; border-radius:9px; font-size:13px; text-decoration:none; color:var(--ink); margin-bottom:4px; }
.guide-panel a:hover { background:var(--surface-2); }
.guide-panel .soon { color:var(--muted); }
.guide-panel .badge { font-size:9.5px; padding:2px 6px; border-radius:20px; background:var(--surface-2); color:var(--muted); }

.theme-toggle-track { width:40px; height:22px; border-radius:20px; background:var(--surface-2); position:relative; padding:2px; }
.theme-toggle-thumb { width:18px; height:18px; border-radius:50%; background:var(--accent); transition: transform .2s ease; }
:root[data-theme="dark"] .theme-toggle-thumb { transform: translateX(18px); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
}