:root { color-scheme: dark; --bg:#11120f; --panel:#171914; --line:#30342b; --soft:#a9ad9e; --text:#edf0e6; --accent:#d7b978; --accent-soft:#8b774a; --danger:#ce766e; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); }
button, input, select, textarea { font:inherit; }
button { color:inherit; cursor:pointer; }
.landing { display:grid; place-items:center; background:radial-gradient(circle at 50% 42%, #1c2019 0, var(--bg) 45rem); }
.landing main { text-align:center; margin-top:-10vh; }
.wordmark { color:var(--text); font-size:1.25rem; letter-spacing:.34em; text-decoration:none; }
.quiet { color:var(--soft); font-size:.78rem; margin:1.5rem 0 2rem; }
.subtle-link { color:var(--accent); font-size:.74rem; letter-spacing:.05em; text-decoration:none; }
.topbar { height:64px; display:flex; align-items:center; gap:2rem; padding:0 2rem; border-bottom:1px solid var(--line); }
.topbar .wordmark { width:8rem; font-size:.85rem; }
.topbar p { margin:0; color:var(--soft); font-size:.75rem; flex:1; }
.topbar p span { color:var(--accent-soft); padding:0 .25rem; }
.time-travel { color:var(--soft); font-size:.68rem; display:flex; align-items:center; gap:.5rem; }
.time-travel input:disabled { opacity:.45; cursor:not-allowed; }
.loading-spinner { width:.7rem; height:.7rem; flex:0 0 .7rem; border:1px solid var(--line); border-top-color:var(--accent); border-radius:50%; opacity:0; visibility:hidden; }
.loading-spinner.active { opacity:.7; visibility:visible; animation:spin .75s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
input, select, textarea { width:100%; background:#10110e; border:1px solid var(--line); color:var(--text); border-radius:4px; padding:.6rem; }
input:focus, select:focus, textarea:focus { outline:1px solid var(--accent); border-color:var(--accent); }
.workspace { display:grid; grid-template-columns:245px minmax(0, 1fr); min-height:calc(100vh - 64px); }
.sidebar { border-right:1px solid var(--line); padding:1.4rem 1rem; background:#141610; }
.eyebrow { margin:0 0 .65rem; color:var(--accent); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; }
nav { display:grid; gap:.3rem; }
nav button { text-align:left; border:0; border-left:2px solid transparent; background:transparent; padding:.55rem .65rem; color:var(--soft); font-size:.78rem; }
nav button:hover, nav button.active { border-left-color:var(--accent); color:var(--text); background:#1d2019; }
.method-note, .roster, .world-data { margin-top:2rem; padding-top:1.25rem; border-top:1px solid var(--line); }
.method-note p:last-child { color:var(--soft); font: .72rem/1.6 ui-sans-serif, system-ui, sans-serif; margin:0; }
.race-list { display:grid; gap:.45rem; }
.race-list div { color:var(--soft); font-size:.68rem; }
.reference-nav { width:100%; text-align:left; border:1px solid var(--line); border-radius:4px; background:transparent; color:var(--soft); padding:.65rem; font-size:.68rem; line-height:1.35; }
.reference-nav:hover, .reference-nav.active { border-color:var(--accent-soft); background:#1d2019; color:var(--text); }
.content { max-width:1200px; width:100%; padding:3rem clamp(1.5rem, 5vw, 5rem); }
.status { display:none; margin-bottom:1.5rem; border:1px solid var(--line); border-left-color:var(--accent); padding:.75rem 1rem; color:var(--soft); font-size:.75rem; }
.status.visible { display:block; }.status.error { border-left-color:var(--danger); color:#f0b7b1; }
.content-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
h1, h2, h3, p { margin-top:0; } h1 { margin-bottom:0; font:400 clamp(1.45rem, 3vw, 2.1rem)/1.15 ui-serif, Georgia, serif; } h2 { font:400 1.25rem/1.2 ui-serif, Georgia, serif; }
.snapshot-at { min-height:1em; margin:.45rem 0 0; color:#777c70; font-size:.63rem; }
.primary { background:var(--accent); border:1px solid var(--accent); color:#1a1710; border-radius:4px; font-weight:700; font-size:.72rem; padding:.65rem .8rem; }
.node-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:.75rem; }
.node-card { text-align:left; background:var(--panel); border:1px solid var(--line); padding:1rem; min-height:132px; border-radius:5px; }
.node-card:hover { border-color:var(--accent-soft); }.node-card .facet { color:var(--accent); font-size:.61rem; letter-spacing:.1em; text-transform:uppercase; }.node-card h2 { margin:.5rem 0; font-size:1rem; }.node-card p { color:var(--soft); font: .75rem/1.45 ui-sans-serif, system-ui, sans-serif; margin:0; }.node-card footer { color:#777c70; font-size:.61rem; margin-top:.8rem; }
.reference-actions { display:flex; align-items:center; gap:.65rem; }
.reference-actions select { min-width:13rem; }
.reference-note { margin-top:-.65rem; }
.reference-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:.75rem; }
.world-composer { margin:1.25rem 0; padding:1rem; border:1px solid var(--line); background:var(--panel); display:grid; gap:.65rem; }
.world-composer textarea { width:100%; resize:vertical; }
.reference-card { min-height:128px; text-align:left; padding:1rem; border:1px solid var(--line); border-radius:5px; background:var(--panel); }
.reference-card:hover { border-color:var(--accent-soft); }
.reference-card h2 { margin:.5rem 0; font-size:1rem; }
.reference-card > p:last-child { margin:0; color:var(--soft); font:.72rem/1.5 ui-sans-serif, system-ui, sans-serif; overflow-wrap:anywhere; }
.detail { margin-top:1.5rem; border-top:1px solid var(--line); padding-top:1.5rem; }.detail.empty { color:var(--soft); font-size:.8rem; }.detail-grid { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(250px, .8fr); gap:1.5rem; }.detail pre { white-space:pre-wrap; overflow:auto; margin:0; padding:1rem; background:#0d0e0c; border:1px solid var(--line); border-radius:5px; color:#d7dbcD; font-size:.72rem; line-height:1.55; }.history, .edge-list { display:grid; gap:.5rem; }.history-item, .edge-item { background:#151712; border:1px solid var(--line); padding:.7rem; font-size:.7rem; color:var(--soft); }.history-item strong, .edge-item strong { color:var(--text); }.danger { border:1px solid var(--danger); color:#f0b7b1; background:transparent; border-radius:4px; padding:.6rem .8rem; font-size:.7rem; }
dialog { width:min(620px, calc(100vw - 2rem)); background:#171914; color:var(--text); border:1px solid var(--line); border-radius:7px; padding:0; box-shadow:0 2rem 5rem #000a; } dialog::backdrop { background:#000a; } dialog form { display:grid; gap:.9rem; padding:1.25rem; } dialog label { display:grid; gap:.4rem; color:var(--soft); font-size:.72rem; } textarea { resize:vertical; font-size:.72rem; line-height:1.45; }.dialog-title { display:flex; justify-content:space-between; align-items:start; }.dialog-title h2 { margin:0; }.icon-button { background:transparent; border:0; color:var(--soft); font-size:1.3rem; }.actions { display:flex; justify-content:flex-end; align-items:center; gap:.6rem; }.actions-spacer { flex:1; }.actions button:not(.primary) { border:1px solid var(--line); background:transparent; border-radius:4px; padding:.65rem .8rem; font-size:.72rem; }.form-note { color:var(--soft); font:.68rem/1.45 ui-sans-serif, system-ui, sans-serif; margin:0; }
@media (max-width: 760px) { .topbar { padding:0 1rem; gap:.6rem; }.topbar .wordmark { width:auto; }.topbar p { display:none; }.workspace { grid-template-columns:1fr; }.sidebar { border-right:0; border-bottom:1px solid var(--line); }.sidebar nav { grid-template-columns:repeat(4, 1fr); }.method-note, .roster { display:none; }.world-data { margin-top:1rem; padding-top:1rem; }.content { padding:1.5rem 1rem; }.detail-grid { grid-template-columns:1fr; }.time-travel { margin-left:auto; }.time-travel input { width:10.5rem; }.reference-actions { align-items:stretch; flex-direction:column; }.reference-actions select { min-width:0; }.reference-list { grid-template-columns:1fr; } }