:root{--sepia: #D4A574;--charcoal: #2B2B2B;--paper: #F3EAD5;--ink: #1C1A17;--rose: #C97C7C;--font-header: "Crimson Pro", Georgia, serif;--font-body: "Inter", system-ui, sans-serif;--font-mono: ui-monospace, monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--font-body);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;overscroll-behavior:none}.app{position:relative;min-height:100vh;background:var(--paper)}.paper-grain{position:fixed;inset:0;pointer-events:none;opacity:.06;z-index:40;mix-blend-mode:multiply}.dust-canvas{position:fixed;inset:0;pointer-events:none;z-index:5}.hybrid{position:relative;width:100%;min-height:100vh}.timeline-viewport{position:relative;width:100%;height:100vh;overflow:hidden;background:var(--paper)}.timeline-track{position:absolute;top:0;left:0;height:100vh;will-change:transform}.era-marker{position:absolute;top:40%;transform:translateY(-50%);padding:.35rem .6rem;background:var(--sepia);color:var(--ink);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.02em;white-space:nowrap;border-left:2px solid var(--charcoal)}.era-accent{background:var(--rose);color:var(--paper)}.timeline-hint{position:absolute;bottom:1rem;width:100%;text-align:center;font-size:.8rem;color:var(--ink);opacity:.7;z-index:6}.hybrid-grimoire{min-height:100vh;background:var(--charcoal);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem}.grimoire-mount,.garden-mount{position:relative;width:min(90vw,560px);height:min(52vh,380px);background:var(--ink);border-radius:4px;overflow:hidden;border:1px solid var(--sepia)}.grimoire-title,.garden-title{font-family:var(--font-header);font-size:1.6rem;font-weight:600;margin:.75rem 0}.spell-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;width:min(90vw,560px);margin-top:1rem}.spell-btn{display:flex;flex-direction:column;gap:.2rem;padding:.6rem .4rem;background:var(--charcoal);color:var(--paper);border:1px solid var(--sepia);border-radius:3px;font-family:var(--font-body);cursor:pointer;transition:transform 80ms ease,box-shadow 80ms ease}.spell-btn:active{transform:translateY(1px);box-shadow:inset 0 1px 2px #0006}.spell-btn.is-active{border-color:var(--rose);color:var(--rose)}.spell-label{font-weight:500;font-size:.8rem}.spell-note{font-size:.65rem;opacity:.7}.hybrid-garden{min-height:100vh;background:var(--sepia);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 1rem}.garden-copy{max-width:32rem;font-size:.95rem;margin:.5rem 0 1rem}.garden-btn{padding:.6rem 1.1rem;background:var(--charcoal);color:var(--paper);border:none;border-radius:3px;font-family:var(--font-body);cursor:pointer}.garden-btn:active{transform:translateY(1px);box-shadow:inset 0 1px 3px #00000080}.garden-sync{margin-top:.75rem;font-size:.8rem;font-family:var(--font-mono);opacity:.8}.garden-flags{margin-top:.4rem;font-size:.75rem;opacity:.65}.hud{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:1rem;padding:.5rem .75rem;background:#f3ead5eb;border-bottom:1px solid var(--charcoal);font-family:var(--font-mono);font-size:.72rem;color:var(--ink)}.hud-row{display:flex;gap:.3rem;align-items:baseline}.hud-label{opacity:.6}.hud-value{font-variant-numeric:tabular-nums}.hud-bar{flex:1;height:4px;background:var(--sepia);border-radius:2px;overflow:hidden}.hud-bar-fill{height:100%;background:var(--rose);transition:width .12s linear}.foot{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;gap:.75rem;padding:.4rem .75rem;background:var(--charcoal);color:var(--paper);font-size:.66rem;font-family:var(--font-mono)}.foot-era{font-family:var(--font-header);font-size:.8rem}.foot-calls.warn{color:var(--rose)}@media (max-width: 599px){.spell-grid{grid-template-columns:repeat(2,1fr)}.hud{font-size:.62rem;gap:.5rem}.foot{font-size:.58rem}}