:root{--ink: #070605;--ink-2: #120e0b;--parchment: #e8dcc4;--parchment-dim: #c9b89a;--gold: #c4a35a;--gold-hot: #e6c97a;--blood: #6b2a1f;--water: #7eb3b0;--ash: #8a8178;--rule: color-mix(in srgb, var(--gold) 55%, transparent);--font-display: "Clash Display", "Satoshi", system-ui, sans-serif;--font-sans: "Satoshi", system-ui, sans-serif;--accent: var(--gold);color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%;overflow:hidden;background:var(--ink)}body{font-family:var(--font-sans);color:var(--parchment);cursor:default;user-select:none}#stage{position:absolute;inset:0;width:100%;height:100%;display:block}#vignette{pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.55) 100%);z-index:2}#grain{pointer-events:none;position:absolute;inset:0;opacity:.07;z-index:3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:overlay}.hidden{opacity:0!important;visibility:hidden!important;pointer-events:none!important}#hud{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:1;transition:opacity .6s ease}#compass{position:absolute;top:28px;left:28px;width:88px;height:88px;border:1px solid var(--rule);border-radius:50%;background:#07060559;backdrop-filter:blur(8px)}#compass .navel{position:absolute;inset:38px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}#compass .arm{position:absolute;font-family:var(--font-display);font-size:8px;letter-spacing:.18em;color:var(--gold);opacity:.8}#compass .n{top:8px;left:50%;transform:translate(-50%)}#compass .s{bottom:8px;left:50%;transform:translate(-50%)}#compass .e{right:6px;top:50%;transform:translateY(-50%)}#compass .w{left:6px;top:50%;transform:translateY(-50%)}#realm-whisper{position:absolute;left:28px;bottom:28px}#realm-whisper .kicker,.kicker{font-family:var(--font-display);font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}#realm-name{font-family:var(--font-display);font-weight:400;font-size:22px;letter-spacing:.16em;text-transform:uppercase}#realm-sigils{display:flex;gap:7px;margin-top:10px;align-items:center}.sigil,.ms-mark{position:relative;width:12px;height:12px;opacity:.22;flex:0 0 12px}.sigil.on,.ms-mark.on{opacity:.78}.sigil[data-motif=axis]:before,.ms-mark[data-motif=axis]:before{content:"";position:absolute;left:5px;top:0;width:1px;height:12px;background:var(--gold)}.sigil[data-motif=axis]:after,.ms-mark[data-motif=axis]:after{content:"";position:absolute;left:3px;top:5px;width:5px;height:5px;border-radius:50%;background:var(--gold)}.sigil[data-motif=waters]:before,.ms-mark[data-motif=waters]:before{content:"";position:absolute;inset:3px 1px 5px;border-bottom:1px solid var(--gold);border-radius:0 0 6px 6px}.sigil[data-motif=waters]:after,.ms-mark[data-motif=waters]:after{content:"";position:absolute;left:1px;right:1px;bottom:1px;height:1px;background:var(--gold);opacity:.7}.sigil[data-motif=fire]:before,.ms-mark[data-motif=fire]:before{content:"";position:absolute;left:2px;top:1px;width:8px;height:8px;border-left:1px solid var(--gold);border-top:1px solid var(--gold);transform:rotate(45deg)}.sigil[data-motif=descent]:before,.ms-mark[data-motif=descent]:before{content:"";position:absolute;left:1px;top:2px;width:6px;height:4px;border:1px solid var(--gold);border-top:0}.sigil[data-motif=descent]:after,.ms-mark[data-motif=descent]:after{content:"";position:absolute;left:4px;top:6px;width:6px;height:4px;border:1px solid var(--gold);border-top:0}.sigil[data-motif=weave]:before,.ms-mark[data-motif=weave]:before{content:"";position:absolute;left:0;right:0;top:3px;height:1px;background:var(--gold);box-shadow:0 4px 0 var(--gold)}.sigil[data-motif=weave]:after,.ms-mark[data-motif=weave]:after{content:"";position:absolute;left:6px;top:1px;width:1px;height:10px;background:var(--gold)}.sigil[data-motif=trickster]:before,.ms-mark[data-motif=trickster]:before{content:"";position:absolute;left:1px;top:2px;width:5px;height:5px;border:1px solid var(--gold);transform:rotate(18deg)}.sigil[data-motif=trickster]:after,.ms-mark[data-motif=trickster]:after{content:"";position:absolute;right:1px;bottom:1px;width:4px;height:4px;border:1px solid var(--gold);transform:rotate(-28deg)}#crosshair{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-3px 0 0 -3px;border:1px solid color-mix(in srgb,var(--parchment) 50%,transparent);border-radius:50%;opacity:.45}#hint{position:absolute;bottom:28px;left:50%;transform:translate(-50%);font-size:15px;letter-spacing:.08em;color:color-mix(in srgb,var(--parchment) 75%,transparent);text-shadow:0 2px 18px #000;min-height:1.2em;max-width:46vw;text-align:center}#manuscript{position:absolute;right:28px;top:50%;transform:translateY(-50%);width:min(420px,38vw);max-height:min(72vh,640px);overflow:auto;z-index:5;padding:32px 34px 36px;background:linear-gradient(180deg,#120e0ba8,#070605c7),repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(196,163,90,.04) 28px);border:1px solid var(--rule);box-shadow:0 24px 80px #00000073;backdrop-filter:blur(16px);opacity:1;transition:opacity .45s ease,transform .45s ease}#manuscript.ms-sheet{background:radial-gradient(ellipse at 14% 10%,rgba(72,52,32,.32),transparent 38%),radial-gradient(ellipse at 86% 90%,rgba(18,12,8,.42),transparent 42%),radial-gradient(ellipse at 70% 22%,rgba(90,68,40,.12),transparent 28%),repeating-linear-gradient(0deg,transparent,transparent 26px,rgba(28,20,14,.16) 27px),linear-gradient(168deg,#3a3228,#241c16 52%,#16110d);border:1px solid rgba(90,74,52,.5);box-shadow:inset 0 0 48px #00000052,inset 0 0 0 7px #241c1673,0 24px 80px #00000080;clip-path:polygon(.7% 1.1%,99.1% .3%,99.6% 98.6%,.5% 99.3%)}#manuscript .ms-frame{pointer-events:none;position:absolute;inset:11px;border:1px solid rgba(196,163,90,.1)}#manuscript .ms-frame:after{content:"";position:absolute;right:-2px;top:18px;width:22px;height:22px;background:linear-gradient(135deg,transparent 48%,rgba(12,9,7,.55) 50%)}#manuscript.hidden{transform:translate(12px,-50%)}.ms-marks{display:flex;gap:8px;margin-bottom:12px;align-items:center}.ms-motif{font-family:var(--font-display);font-size:10px;letter-spacing:.38em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}.ms-title{font-family:var(--font-display);font-weight:600;font-size:28px;line-height:1.15;letter-spacing:.03em;margin-bottom:10px}.ms-meta{font-style:italic;color:var(--parchment-dim);font-size:16px;margin-bottom:16px}.ms-symbol{font-size:15px;color:var(--gold-hot);border-left:2px solid var(--gold);padding-left:12px;margin-bottom:18px}.ms-body p{font-size:18px;line-height:1.55;margin-bottom:.9em;color:var(--parchment)}#title-gate,#pause,#boot{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,rgba(196,163,90,.08),transparent 42%),radial-gradient(ellipse at center,#160f0c 0%,var(--ink) 70%)}#title-gate .gate-inner,.pause-panel{text-align:center;max-width:640px;padding:24px}#title-gate h1,#pause h2{font-family:var(--font-display);font-weight:700;font-size:clamp(56px,10vw,104px);letter-spacing:.42em;text-indent:.42em;line-height:1;margin:8px 0 18px}.gold-rule{width:88px;height:1px;margin:0 auto 22px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}.lede{font-size:22px;line-height:1.45;color:var(--parchment-dim);margin-bottom:32px}.lede.short{font-size:20px;margin-bottom:22px}#enter,#resume,#mute{appearance:none;background:transparent;color:var(--parchment);border:1px solid var(--gold);font-family:var(--font-display);font-size:13px;letter-spacing:.32em;text-transform:uppercase;padding:14px 28px;cursor:pointer;transition:background .25s ease,color .25s ease}#enter:hover,#resume:hover,#mute:hover{background:var(--gold);color:var(--ink)}.controls,.fine{margin-top:22px;font-size:14px;letter-spacing:.08em;color:var(--ash)}.lexicon{list-style:none;text-align:left;max-height:28vh;overflow:auto;margin:0 auto 22px;padding:8px 4px;width:min(420px,86vw);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}.lexicon:empty:after{content:"The lexicon fills as you walk.";display:block;text-align:center;padding:18px 0;color:var(--ash);font-style:italic}.lexicon li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;font-size:16px;border-bottom:1px solid rgba(196,163,90,.12)}.lexicon li span{color:var(--gold);font-family:var(--font-display);font-size:11px;letter-spacing:.16em;text-transform:uppercase}.pause-actions{display:flex;gap:12px;justify-content:center}.gate-error{margin:14px 0 0;color:#e6c97a;font-size:14px;letter-spacing:.04em}#boot{z-index:12;transition:opacity .8s ease;animation:boot-out .7s ease .9s forwards}@keyframes boot-out{to{opacity:0;visibility:hidden;pointer-events:none}}.boot-seed{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 24px var(--gold-hot);margin:0 auto 16px;animation:pulse 1.8s ease-in-out infinite}#boot p{font-family:var(--font-display);letter-spacing:.28em;text-transform:uppercase;font-size:11px;color:var(--gold)}@keyframes pulse{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(1.35);opacity:1}}.fade-1{animation:rise 1.4s ease both .2s}.fade-2{animation:rise 1.6s ease both .55s}.fade-3{animation:rise 1.6s ease both .95s}.fade-4{animation:rise 1.4s ease both 1.35s}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.x-follow{position:absolute;top:22px;left:22px;z-index:9;display:inline-flex;align-items:center;height:28px;max-height:28px;flex-shrink:0;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);text-decoration:none;color:var(--gold);overflow:hidden}.x-follow-mark{width:24px;height:24px;max-width:24px;max-height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px}.x-follow-mark svg{width:11px;height:11px;max-width:11px;max-height:11px}.x-follow-handle{display:none;font-family:var(--font-sans);font-size:.62rem;letter-spacing:.06em;white-space:nowrap;padding-right:.5rem}@media(min-width:1536px){.x-follow-handle{display:inline}}.knock-hits-wrap{position:fixed;left:0;right:0;bottom:8px;z-index:20;pointer-events:none}@media(max-width:820px){#manuscript{width:calc(100% - 32px);inset:auto 16px 16px;transform:none;max-height:40vh}#compass{display:none}}@media(prefers-reduced-motion:reduce){.fade-1,.fade-2,.fade-3,.fade-4,.boot-seed{animation:none}}