@font-face { font-family: "Hiram"; src: url("/fonts/hiram.otf") format("opentype"); font-display: block; }
:root {
  --void: #050403; --ink: #0e0b07;
  --molten: #f4cb78; --gold: #c99a3f; --bullion: #8a6424; --rubedo: #9b2216;
  --bone: #ece4d6; --ash: #8d857a;
  --inscription: "Hiram", "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --print: "IM Fell English", Georgia, serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--void); }
body { color: var(--bone); font: 400 16px/1.4 var(--inscription); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; overscroll-behavior: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }
#skip, #hint span, #onward, #again, .plate .pk { font-family: var(--inscription); font-weight: 500; text-transform: uppercase; letter-spacing: .3em; font-size: 11px; }

#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; }
.grain { position: fixed; inset: -50%; z-index: 2; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0) } 20% { transform: translate(-3%, 2%) } 40% { transform: translate(2%, -4%) } 60% { transform: translate(-4%, -1%) } 80% { transform: translate(3%, 3%) } 100% { transform: translate(0, 0) } }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 50%, rgba(0, 0, 0, .72) 100%); }
.flashlayer { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; display: none; background: radial-gradient(60% 60% at 50% 50%, rgba(255, 240, 200, .95), rgba(244, 203, 120, .5) 35%, rgba(5, 4, 3, 0) 75%); mix-blend-mode: screen; }
.flash .flashlayer { display: block; animation: flash .9s var(--ease) forwards; }
.vignette { transition: opacity 1.2s var(--ease); }
.vignette.v-hush { background: radial-gradient(90% 70% at 50% 45%, transparent 20%, rgba(0, 0, 0, .94) 80%); opacity: 0; }
.vignette.v-search { background: radial-gradient(110% 85% at 50% 45%, transparent 42%, rgba(0, 0, 0, .8) 100%); opacity: 0; }
.hushed .vignette:not(.v-hush):not(.v-search), .search .vignette:not(.v-hush):not(.v-search) { opacity: 0; }
.hushed:not(.search) .vignette.v-hush, .search .vignette.v-search { opacity: 1; }
.hushed .top, .hushed #rail { opacity: 0 !important; transition: opacity .6s; }
@keyframes flash { 0% { opacity: 0 } 12% { opacity: .9 } 100% { opacity: 0 } }

/* ---------------------------------------------------------------- chrome */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: max(22px, env(safe-area-inset-top)) clamp(16px, 3vw, 38px) 0; opacity: 0; pointer-events: none; transition: opacity 2.4s var(--ease) 1.2s; }
.entered .top { opacity: 1; pointer-events: auto; }
.brand img { display: block; height: 19px; width: auto; }
#skip { color: var(--gold); padding: 8px 0 8px 18px; position: relative; transition: color .4s, letter-spacing .7s var(--ease), opacity .8s; }
#skip::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -5px; border: 1px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 2.5px var(--void), inset 0 0 0 9px currentColor; }
#skip:hover { color: var(--molten); letter-spacing: .44em; }
[data-mode="oracle"] #skip, [data-mode="vault"] #skip, [data-mode="end"] #skip { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- the eclipse */
.holding #cur .ring { width: 14px; height: 14px; border-color: var(--molten); box-shadow: 0 0 18px rgba(244, 203, 120, .6); }
#cur .ring { transition: width .5s var(--ease), height .5s var(--ease), border-color .5s, box-shadow .5s; }

/* ---------------------------------------------------------------- navigation hints */
#hint { position: fixed; left: 50%; bottom: max(3vh, 22px); z-index: 11; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--ash); opacity: 0; transition: opacity 1.4s var(--ease); pointer-events: none; }
#hint.on { opacity: .8; }
[data-mode="vault"] #hint { display: none; }
#hint i { position: relative; width: 1px; height: 38px; background: linear-gradient(rgba(201, 154, 63, .55), transparent); transform-origin: top; animation: cue 2.4s var(--ease) infinite; }
#hint i::after { content: ""; position: absolute; left: -1px; top: 0; width: 3px; height: 100%; background: linear-gradient(var(--molten), #fff3d0); box-shadow: 0 0 10px rgba(244, 203, 120, .9); transform-origin: top; transform: scaleY(var(--pull, 0)); border-radius: 2px; }
#hint.on:not(:hover) i { animation-play-state: running; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1 } 60% { transform: scaleY(1); opacity: 1 } 100% { transform: scaleY(1); opacity: 0 } }
#rail { position: fixed; right: clamp(14px, 2.4vw, 32px); top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; align-items: flex-end; gap: 9px; opacity: 0; transition: opacity 2s var(--ease); pointer-events: none; }
.entered #rail { opacity: 1; }
#rail i { display: block; width: 9px; height: 1px; background: rgba(141, 133, 122, .5); transition: width .9s var(--ease), background .9s; }
#rail i.on { width: 28px; background: var(--gold); }
#rail i.s { width: 5px; }
#rail i.s.on { width: 20px; background: var(--molten); }
#rail b { font: 500 10px/1 var(--inscription); letter-spacing: .2em; color: var(--gold); text-transform: lowercase; margin-top: 12px; }

/* ---------------------------------------------------------------- the oracle */
/* the speaking field (MOLTEN): a burning point writes the words into a gold line; letters land
   white-hot and cool to gold. The real input sits on top, its own text invisible, mirrored by .m-text */
#ask { position: fixed; left: 50%; bottom: 30vh; z-index: 12; width: min(600px, 86vw); height: 66px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); user-select: text; -webkit-user-select: text; --fs: clamp(20px, 2.2vw, 27px); }
[data-mode="oracle"] #ask { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; transition-delay: 1.2s; }
#ask.busy { opacity: .3 !important; pointer-events: none !important; transition-delay: 0s !important; }
#ask .m-line { position: absolute; left: 0; right: 0; bottom: 7px; height: 1px; background: linear-gradient(90deg, rgba(222, 176, 88, 0), rgba(222, 176, 88, .78) 12%, rgba(222, 176, 88, .78) 88%, rgba(222, 176, 88, 0)); box-shadow: 0 0 9px rgba(244, 190, 100, .32); pointer-events: none; }
/* a pool of dark under the field, so the line and the letters stand clear of the river of dust */
#ask::before { content: ""; position: absolute; left: -9%; right: -9%; top: -26px; bottom: -30px; background: radial-gradient(closest-side, rgba(5, 4, 3, .78), rgba(5, 4, 3, .5) 55%, rgba(5, 4, 3, 0)); pointer-events: none; }
#ask .m-trail { position: absolute; left: 0; bottom: 6.5px; height: 2px; width: 0; border-radius: 2px; background: linear-gradient(90deg, rgba(244, 203, 120, 0), rgba(244, 203, 120, .28) 45%, rgba(255, 214, 140, .95) 94%, #fff6dc); box-shadow: 0 0 10px rgba(255, 190, 90, .55); opacity: .5; transition: opacity 1.8s ease-out; pointer-events: none; }
#ask .m-trail.hot { opacity: 1; transition: opacity .08s; }
#ask .m-text, #ask-input { position: absolute; left: 0; right: 46px; bottom: 14px; height: 44px; margin: 0; padding: 0 4px; border: 0; font: italic 400 var(--fs)/44px var(--print); font-kerning: none; font-variant-ligatures: none; letter-spacing: 0; white-space: pre; }
#ask .m-text { overflow: hidden; color: #efe4cc; pointer-events: none; }
#ask .m-run { display: inline-block; white-space: pre; }
#ask .m-run span { white-space: pre; }
#ask .m-run span.hot { animation: cool 1.9s linear forwards; }
#ask .m-run span.re { animation: reheat .32s ease-out forwards; }
#ask .m-run span.gone { visibility: hidden; }
@keyframes cool {
  0% { color: #fffef8; text-shadow: 0 0 2px #fff, 0 0 9px #ffe6a8, 0 0 20px rgba(255, 170, 60, .95); }
  22% { color: #ffe0a0; text-shadow: 0 0 1px #fff3d0, 0 0 8px rgba(255, 170, 60, .75), 0 0 18px rgba(255, 120, 30, .4); }
  55% { color: #f2c675; text-shadow: 0 0 6px rgba(244, 190, 100, .35); }
  100% { color: #e8dcc4; text-shadow: 0 0 10px rgba(244, 203, 120, .1); }
}
@keyframes reheat { to { color: #fffef8; text-shadow: 0 0 2px #fff, 0 0 10px #ffe6a8, 0 0 24px rgba(255, 170, 60, 1); } }
#ask-input { background: transparent; outline: 0; color: transparent; caret-color: transparent; touch-action: manipulation; overflow: hidden; }
#ask-input::placeholder { color: transparent; }
#ask-input::selection { background: rgba(244, 203, 120, .28); color: transparent; }
#ask .m-ember { position: absolute; left: 0; bottom: 3px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, #ffe2a0 40%, rgba(255, 150, 50, .6) 62%, rgba(255, 120, 30, 0) 72%); box-shadow: 0 0 10px 2px rgba(255, 190, 90, .75), 0 0 26px 6px rgba(255, 130, 40, .35); pointer-events: none; will-change: transform, opacity; }
#ask .m-ph { position: absolute; left: 6px; bottom: 27px; font: 500 12px/1 var(--inscription); letter-spacing: .44em; color: #e6d6b2; text-shadow: 0 0 12px rgba(244, 203, 120, .4); white-space: nowrap; pointer-events: none; transition: opacity .6s; }
#ask.has .m-ph { opacity: 0; }
#ask .m-send { position: absolute; right: -4px; bottom: -10.5px; width: 36px; height: 36px; }
#ask .m-send::before { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; transform: rotate(45deg); border: 1px solid rgba(228, 184, 98, .92); box-shadow: 0 0 8px rgba(244, 190, 100, .3); transition: background .5s, box-shadow .5s, border-color .5s, transform .6s var(--ease); }
#ask .m-send.on::before { background: var(--molten); border-color: #fff0c8; box-shadow: 0 0 12px rgba(244, 203, 120, .8), 0 0 26px rgba(255, 140, 40, .35); }
#ask .m-send:hover::before { transform: rotate(135deg) scale(1.12); }
/* the mark: sign in with x, quiet under the field until it is reached for */
#mark { position: fixed; left: 50%; bottom: max(calc(30vh - 96px), 108px); z-index: 12; transform: translate(-50%, 10px); display: flex; align-items: center; gap: 11px; padding: 10px 6px; font: 500 10px/1 var(--inscription); letter-spacing: .34em; text-transform: uppercase; color: #9d9384; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 1.4s var(--ease), transform 1.4s var(--ease), color .4s; }
[data-mode="oracle"] #mark { opacity: .72; transform: translate(-50%, 0); pointer-events: auto; transition-delay: 2.8s; }
[data-mode="oracle"] #mark:hover, [data-mode="oracle"] #mark:focus-visible, [data-mode="oracle"] #mark.waiting { opacity: 1; color: var(--molten); transition-delay: 0s; }
#mark[hidden] { display: none; }
#mark .x { position: relative; width: 9px; height: 9px; flex: none; }
#mark .x::before, #mark .x::after { content: ""; position: absolute; left: 50%; top: -1.5px; width: 1.3px; height: 12px; margin-left: -.65px; border-radius: 1px; background: linear-gradient(#fff0c4, #c99a3f 55%, #8e6524); transform: rotate(45deg); transition: box-shadow .4s, background .4s; }
#mark .x::after { transform: rotate(-45deg); }
#mark:hover .x::before, #mark:hover .x::after, #mark.waiting .x::before, #mark.waiting .x::after { background: #fff3d0; box-shadow: 0 0 6px rgba(244, 203, 120, .95), 0 0 14px rgba(255, 140, 40, .45); }
#mark.waiting .t { animation: ink 1.4s ease-in-out infinite; }
@keyframes ink { 50% { opacity: .35; } }
#mark.marked { color: var(--gold); }
#mark .sub:not(:empty) { color: #8d857a; letter-spacing: .3em; font-size: 9px; }
#mark .sub:not(:empty)::before { content: "·"; margin-right: 11px; }
#mark.erase { color: #c7341f; }
#ask.busy ~ #mark { opacity: .25 !important; pointer-events: none; }
#plain { position: fixed; left: 50%; top: 58%; z-index: 12; width: min(560px, 86vw); transform: translateX(-50%); margin: 0; text-align: center; font: italic 400 17px/1.5 var(--print); color: var(--bone); opacity: .9; pointer-events: none; }
#onward { position: fixed; left: 50%; bottom: max(4.5vh, 28px); z-index: 12; transform: translateX(-50%); color: var(--ash); opacity: 0; pointer-events: none; transition: opacity 1.2s var(--ease), color .3s; }
[data-mode="oracle"] #onward { opacity: .8; pointer-events: auto; transition-delay: 2.4s; }
#onward:hover { color: var(--molten); }

/* ---------------------------------------------------------------- the vault */
#vault { position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity 1.6s var(--ease); }
#vault.on { opacity: 1; }
.astro { position: absolute; left: 0; top: 0; pointer-events: auto; touch-action: none; border-radius: 50%; transform-origin: 50% 50%; will-change: transform; }
.astro.turn { cursor: grab; }
.astro.turn:active { cursor: grabbing; }
#vault:not(.on) .astro { pointer-events: none; }

.vring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; filter: drop-shadow(0 0 6px rgba(201, 154, 63, .25)); }
.vring .vn { font: 500 18px var(--inscription); fill: #d9aa52; text-anchor: middle; dominant-baseline: middle; letter-spacing: .08em; }
.vring .vi { font: 500 21px var(--inscription); fill: #d9aa52; letter-spacing: .26em; }
.vring .vf { fill: #d9aa52; }
.vring .seam { filter: drop-shadow(0 0 6px rgba(199, 52, 31, .9)); animation: seam 2.6s ease-in-out infinite; }
@keyframes seam { 50% { opacity: .35; } }
.plate { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 7px; opacity: 0; transition: opacity 1.4s var(--ease) 1.2s; white-space: nowrap; }
#vault.on .plate { opacity: 1; }
.plate .pk { color: #b3a894; font-size: 10.5px; }
.plate .pv { font: 500 clamp(17px, 1.8vw, 26px)/1 var(--inscription); letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(120deg, #fbe3a0, #d9aa52 40%, #8e6524 60%, #e7be6c); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the end */
#end { position: fixed; left: 50%; top: 61%; z-index: 12; transform: translate(-50%, 14px); display: flex; flex-direction: column; align-items: center; gap: 16px; opacity: 0; pointer-events: none; transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); text-align: center; width: min(560px, 90vw); }
[data-mode="end"] #end { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; transition-delay: 2.2s; }
#x-link.coin { position: relative; display: block; width: clamp(132px, 17vw, 184px); aspect-ratio: 1; perspective: 700px; border-radius: 50%; outline-offset: 10px; }
.coin-body { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.coin-face, .coin-edge { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.coin-face svg { display: block; width: 100%; height: 100%; }
.coin-face > svg:first-child { filter: drop-shadow(0 0 22px rgba(201, 154, 63, .34)) drop-shadow(0 10px 24px rgba(0, 0, 0, .7)); }
.coin-face.back { transform: rotateY(180deg); }
.coin-edge { backface-visibility: visible; background: linear-gradient(90deg, #5a3c12, #c99a3f 30%, #6e4a18 60%, #e7be6c 85%, #5a3c12); }
.coin-light { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; transform: translateZ(1px); background: radial-gradient(circle at var(--lx, 50%) var(--ly, 30%), rgba(255, 244, 214, .5), rgba(255, 220, 150, .12) 26%, transparent 52%); mix-blend-mode: screen; opacity: .55; transition: opacity .5s; }
#x-link.lit .coin-light { opacity: 1; }
.coin-legend { position: absolute; inset: 0; width: 100%; height: 100%; display: block; animation: legend 40s linear infinite; will-change: transform; }
#x-link.lit .coin-legend { animation-duration: 9s; }
@keyframes legend { to { transform: rotate(360deg); } }
#end .handle { font: 500 15px/1 var(--inscription); letter-spacing: .38em; padding-left: .38em; background: linear-gradient(110deg, #8e6524, #fbe3a0 40%, #d9aa52 55%, #8e6524 75%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 5s linear infinite; }
@keyframes sheen { from { background-position: 120% 0; } to { background-position: -100% 0; } }
#end .fine { margin: 0; font: italic 400 15px/1.5 var(--print); color: var(--ash); }
#again { color: var(--ash); font-size: 9.5px; }
#again:hover { color: var(--bone); }

/* ---------------------------------------------------------------- the ☉ cursor */
#cur { position: fixed; left: 0; top: 0; z-index: 45; pointer-events: none; opacity: 0; transition: opacity .4s; }
.has-cur #cur { opacity: 1; }
#cur i { position: absolute; border-radius: 50%; left: 0; top: 0; transform: translate(-50%, -50%); }
#cur .ring { width: 26px; height: 26px; border: 1px solid rgba(201, 154, 63, .75); }
#cur .dot { width: 4px; height: 4px; background: var(--molten); }
/* over the vault's dial: the ring becomes engraved ticks, like the astrolabe's own, and turns with it */
#cur .ring::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; opacity: 0; transform: rotate(var(--cr, 0deg)) scale(.55); transition: opacity .35s, transform .6s var(--ease); background: repeating-conic-gradient(rgba(244, 203, 120, .95) 0 1.4deg, transparent 1.4deg 10deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); }
#cur .ring::after { content: ""; position: absolute; left: 50%; top: -14px; width: 5px; height: 5px; margin-left: -2.5px; background: var(--molten); transform: rotate(45deg) scale(0); transition: transform .4s var(--ease); box-shadow: 0 0 8px rgba(244, 203, 120, .9); }
.cur-turn #cur .ring { width: 30px; height: 30px; border-color: rgba(244, 203, 120, .6); }
.cur-turn #cur .ring::before { opacity: 1; transform: rotate(var(--cr, 0deg)) scale(1); }
.cur-turn #cur .ring::after { transform: rotate(45deg) scale(1); }
.cur-grab #cur .ring { width: 22px; height: 22px; border-color: var(--molten); box-shadow: 0 0 16px rgba(244, 203, 120, .6); }
.cur-grab #cur .ring::before { background: repeating-conic-gradient(#fff3d0 0 1.4deg, transparent 1.4deg 10deg); transition: opacity .35s, transform 0s; }
@media (pointer: fine) { .has-cur, .has-cur a, .has-cur button, .has-cur .astro, .has-cur .astro.turn, .has-cur .astro.turn:active { cursor: none; } .has-cur input { cursor: text; } }

.no-gl body { background: var(--void) url(/og.jpg) center / cover no-repeat; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; color: var(--ash); font: italic 18px var(--print); z-index: 60; background: var(--void); }

/* ---------------------------------------------------------------- still renders (profile kit) */
.still .top, .still #hint, .still #rail, .still #ask, .still #mark, .still #onward, .still #end, .still .grain, .still #cur { display: none !important; }
.still-avatar .vignette { display: none; }
.og-mark { display: none; }
.still-og .og-mark { display: block; position: fixed; left: 0; right: 0; bottom: 7%; z-index: 9; text-align: center; }
.still-og .og-mark img { height: 4.2vh; width: auto; }

@media (max-width: 640px) {
  .brand img { height: 16px; }
  #mark { bottom: max(calc(27vh - 90px), 104px); }
  #rail { display: none; }
  #ask { bottom: 27vh; }
  .plate .pv { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .grain, #hint i, .coin-legend, #end .handle { animation: none; } }