.spatial-boot::after, .spatial-arriving::after { content: ''; position: fixed; inset: 0; z-index: 99999; background: #080503; pointer-events: none; }
.spatial-arriving::after { animation: page-veil-reveal .48s ease-out forwards; }
.spatial-boot body > main { visibility: hidden; opacity: 0; }
.spatial-boot .spatial-home { visibility: hidden; }
.spatial-active { background: #080b0d; }
.spatial-document { scrollbar-width: none; }
.spatial-document::-webkit-scrollbar { display: none; }
.spatial-active > .scroll-ember { display: none; }
.spatial-home { user-select: none; -webkit-user-select: none; }
.spatial-home a { -webkit-user-drag: none; }
.rune-preview .starfield, .rune-expanded .starfield { touch-action: pinch-zoom; }
.starfield.over-rune { cursor: grab; }
.starfield.pulling-rune { cursor: grabbing; }
.rune-handle { position: absolute; top: 0; left: 0; width: 36px; height: 36px; z-index: 4; touch-action: pinch-zoom; cursor: grab; }
.spell-broken .rune-handle { pointer-events: none; }
.spell-fragment { position: absolute; inset: 0; z-index: 40; pointer-events: none; transform-origin: center; }
.spell-fragment > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.spell-broken .starfield > .project-detail, .spell-broken .starfield > .project-preview,
.spell-broken .starfield > .construct-magic, .spell-broken .project-space > .construct { visibility: hidden; }
.spell-broken .starfield { pointer-events: none; }
.spatial-active > .site-header, .spatial-active > .spell-glow, .spatial-active > .rune-field { display: none; }
.spatial-active #matrix-rain { opacity: .16; }
.spatial-active #spell-particles { opacity: .55; }
.spatial-home { position: relative; min-height: 100svh; padding: 30px 4vw 0; isolation: isolate; letter-spacing: 0; }
.spatial-home [hidden] { display: none !important; }
.spatial-home button, .spatial-home a { -webkit-tap-highlight-color: transparent; }
.spatial-home button { font: inherit; color: inherit; cursor: pointer; }
.spatial-home :focus-visible { outline: 2px solid #b2f0e5; outline-offset: 6px; }
.spatial-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.spatial-name { font-family: Cinzel, serif; font-size: 28px; text-decoration: none; }
.spatial-name span { display: block; font: 9px 'JetBrains Mono', monospace; color: #bdc4c5; margin-top: 3px; }
.contact-link { font-size: 12px; text-decoration: none; padding: 12px 0; color: #b9c7c9; }
.archive-heading { margin-top: 42px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.micro { font: 9px 'JetBrains Mono', monospace; text-transform: uppercase; color: #c29463; }
.archive-heading h1 { font: 20px Cinzel, serif; margin: 8px 0 0; }
.filters { display: flex; flex-wrap: wrap; gap: 4px; }
.filters button { border: 0; border-bottom: 1px solid transparent; background: transparent; padding: 12px; font-size: 11px; color: #aab8bb; }
.filters button[aria-pressed=true] { color: #ffba65; border-color: #ffad4d; }
.starfield { position: relative; height: max(570px, calc(100svh - 250px)); overflow: hidden; touch-action: pan-y pinch-zoom; }
.connection-map { position: absolute; width: 100%; height: 100%; pointer-events: none; }
.project-space { position: absolute; inset: 0; }
.construct { position: absolute; width: 250px; height: 250px; left: 50%; top: 47%; transform: translate(-50%, -50%); }
.instrument { position: absolute; inset: 32px; border: 1px solid #ac6b2c; border-radius: 50%; box-shadow: 0 0 28px #ff9b1820, inset 0 0 28px #ff9b1810; }
.instrument::before, .instrument::after { content: ''; position: absolute; inset: 12px; border: 1px dashed #c08746; border-radius: 50%; animation: instrument-turn 100s linear infinite; }
.instrument::after { inset: -15px; border: 1px dotted #b7783970; animation-direction: reverse; }
.instrument div { position: absolute; inset: 33px; border: 1px solid #c8824280; transform: rotate(45deg); }
.instrument div + div { transform: rotate(15deg); }
.instrument span { position: absolute; inset: 0; display: grid; place-items: center; font: 64px Cinzel, serif; color: #ffd39a; text-shadow: 0 0 26px #ff942f; }
.construct-caption { position: absolute; top: 175px; left: 0; right: 0; text-align: center; font: 8px monospace; color: #d79c60; }
.construct a { position: absolute; z-index: 2; display: grid; place-items: center; min-width: 64px; min-height: 44px; padding: 10px 14px; border: 1px solid #c887484d; border-radius: 50%; font: 11px 'JetBrains Mono', monospace; color: #ffcf91; text-decoration: none; background: radial-gradient(circle, #17201dcc, #080b0de8 70%); box-shadow: 0 0 18px #ff8a1f18, inset 0 0 14px #ffad3d12; transition: opacity .25s, transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s; touch-action: none; }
.construct a:hover { color: #fff; text-shadow: 0 0 14px #ffad4d; }
.construct a.nav-node-dragging { z-index: 12; cursor: grabbing; transform: translate(var(--nav-dx, 0), var(--nav-dy, 0)) scale(1.14); border-color: #ffe0a1; box-shadow: 0 0 28px #ffb45a99, inset 0 0 20px #ffb45a33; }
.nav-node-tension .construct a.nav-node-dragging { animation: nav-node-pull .3s steps(3, end) infinite; color: #fff4c7; }
.construct a.nav-node-rejecting { animation: nav-node-reject .65s cubic-bezier(.2,.8,.2,1) both; }
.construct a.nav-node-invoked { animation: nav-node-invoke .52s cubic-bezier(.2,.8,.2,1) both; pointer-events: none; }
.nav-node-merging .construct::before, .nav-node-merging .construct::after { content: ''; position: absolute; inset: -28px; border: 1px solid #ffe3a0; border-radius: 50%; pointer-events: none; animation: nav-merge-ring .56s ease-out both; }
.nav-node-merging .construct::after { inset: -58px; border-color: #ff9b3d88; animation-delay: .05s; }
.nav-node-merging .instrument { filter: brightness(1.5) saturate(1.4); box-shadow: 0 0 45px #ffad4d66, inset 0 0 30px #ffbf5c33; }
.orbit-about { top: -9px; left: 93px; }.orbit-blog { right: -22px; top: 104px; }.orbit-cv { bottom: -9px; left: 105px; }.orbit-contact { left: -38px; top: 104px; }
.project-node { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 16px; width: 230px; padding: 12px 0; text-align: left; border: 0; background: transparent; transform: translate(-20%, -20%); transition: opacity .25s; }
.node-mark { display: grid; place-items: center; flex: 0 0 45px; height: 45px; color: #ffbb6c; font: 20px 'JetBrains Mono', monospace; border: 1px solid #ca87464d; transform: rotate(-8deg); background: #101719; transition: box-shadow .3s, border-color .3s; }
.node-label { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.node-label strong { font-size: 14px; font-weight: 500; color: #f7e4cc; }
.node-summary { font-size: 10px; line-height: 1.6; color: #b6c4c6; opacity: 0; transition: opacity .3s; }
.project-node.interested .node-summary, .project-node:focus-visible .node-summary { opacity: 1; }
.project-node.interested .node-mark { border-color: #ffd596; box-shadow: 0 0 28px #ff9c4a66; }
.node-impact .node-mark { animation: node-impact .22s ease-out; border-color: #fff0a9; box-shadow: 0 0 18px #fff0a9, 0 0 44px #ff7c28; }
.node-impact .node-label { text-shadow: 0 0 12px #ffb24f; }
.project-node.parked { opacity: .58; }.project-node.parked:hover, .project-node.parked:focus { opacity: 1; }
.spatial-footer { display: flex; align-items: center; gap: 24px; border-top: 1px solid #c7976233; color: #a8b8b9; font: 9px 'JetBrains Mono', monospace; min-height: 56px; }
.spatial-footer i { display: inline-block; width: 5px; height: 5px; background: #addec5; margin-right: 8px; }.project-count { margin-left: auto; }
.pause-spell, .reset-view { width: 44px; height: 44px; font-size: 16px !important; background: transparent; border: 0; }
.pause-spell { color: #ffbd70; }
.animation-paused *, .animation-paused *::before, .animation-paused *::after { animation-play-state: paused !important; transition: none !important; }
.project-preview { position: fixed; z-index: 20; right: 4vw; bottom: 70px; width: min(340px, calc(100vw - 32px)); padding: 25px; background: #101819f5; border: 1px solid #a87742; border-top: 2px solid #ffbd6f; box-shadow: 0 20px 80px #0009; }
.project-preview h2 { font: 20px Cinzel, serif; margin: 12px 0; }.project-preview p { font-size: 13px; color: #c6d0d0; }
.expand-project { border: 0; border-bottom: 1px solid #a77843; background: transparent; padding: 12px 0; font-size: 12px !important; }
.dismiss-preview, .close-detail { position: absolute; top: 4px; right: 4px; border: 0; background: transparent; width: 44px; height: 44px; font-size: 25px !important; z-index: 2; }
.assembling { animation: assemble .55s ease-out both; }
.project-node.interested::after { content: ''; position: absolute; left: 20px; top: 35px; width: 3px; height: 3px; background: #ffe2aa; pointer-events: none; box-shadow: -18px -26px #ffab42, 24px -19px #ffdc8c, 38px 12px #ff8135, -26px 20px #ffbd62, 12px 31px #fff1cc, 42px -35px #ffd78b; animation: spark-assembly .7s ease-out both; }
@keyframes spark-assembly { from { opacity: 0; transform: scale(2.5) rotate(-25deg); } 35% { opacity: 1; } to { opacity: 0; transform: scale(.3) rotate(20deg); } }
@keyframes node-impact { 0% { transform: rotate(-8deg) scale(1); } 35% { transform: rotate(5deg) scale(1.28); } 100% { transform: rotate(-8deg) scale(1); } }
.project-detail { width: min(850px, calc(100% - 32px)); max-height: calc(100svh - 40px); padding: 0; color: #f7e4cc; background: #0d1417; border: 1px solid #ba864c; overflow: auto; }
.project-detail[open] { display: grid; grid-template-columns: 34% 1fr; animation: assemble .6s ease-out both; }
.project-detail::backdrop { background: #030707c9; backdrop-filter: blur(5px); }
.detail-art { display: grid; place-items: center; min-height: 350px; background: repeating-linear-gradient(0deg, transparent 0 29px, #ffb75d0a 30px 31px), repeating-linear-gradient(90deg, transparent 0 29px, #ffb75d0a 30px 31px); overflow: hidden; }
.detail-art span { display: grid; place-items: center; width: 145px; height: 145px; border: 1px solid #c88643; font: 48px Cinzel, serif; text-shadow: 0 0 35px #ffa638; box-shadow: 0 0 60px #ff9c1820; }
.detail-content { padding: 60px 38px 40px; }.detail-content h2 { font: 30px Cinzel, serif; line-height: 1.25; margin: 16px 0; overflow-wrap: anywhere; }.detail-summary { color: #ffbf77; }.detail-text { font-size: 14px; line-height: 1.9; color: #bfc9cb; }.detail-tags { margin: 28px 0; font: 10px monospace; color: #a1c1c3; }.detail-content > a { font-size: 12px; }
@keyframes instrument-turn { to { transform: rotate(360deg); } }
@keyframes assemble { from { opacity: 0; clip-path: inset(45% 0 45% 0); filter: brightness(2); } to { opacity: 1; clip-path: inset(0); filter: brightness(1); } }
@media (max-width: 800px) {
  .spatial-home { padding: 22px 20px 0; }.spatial-name { font-size: 23px; }.contact-link { font-size: 10px; }
  .archive-heading { margin-top: 28px; align-items: start; flex-direction: column; gap: 10px; }.archive-heading h1 { font-size: 18px; }.filters { gap: 0; }.filters button { padding: 12px 9px; font-size: 10px; }
  .starfield { height: 830px; margin: 0 -12px; }.construct { top: 39%; width: 220px; height: 220px; }.instrument { inset: 30px; }.instrument span { font-size: 50px; }.construct-caption { top: 155px; }.orbit-about { left: 77px; }.orbit-blog { top: 90px; right: -15px; }.orbit-contact { top: 90px; left: -28px; }.orbit-cv { left: 89px; }
  .project-node { width: 46%; transform: none; gap: 10px; }.node-mark { flex-basis: 30px; height: 35px; font-size: 14px; }.node-label strong { font-size: 12px; }.node-label .micro { font-size: 8px; }.node-summary { font-size: 9px; opacity: .8; }
  .project-node:nth-of-type(1) { left: 2%; top: 3%; }.project-node:nth-of-type(2) { left: 53%; top: 9%; }.project-node:nth-of-type(3) { left: 52%; top: 65%; }.project-node:nth-of-type(4) { left: 2%; top: 59%; }.project-node:nth-of-type(5) { left: 5%; top: 81%; }.project-node:nth-of-type(6) { left: 53%; top: 87%; }
  .project-preview { right: 16px; bottom: 16px; }.spatial-footer { gap: 8px; font-size: 8px; }.project-detail[open] { grid-template-columns: 1fr; }.detail-art { min-height: 150px; }.detail-art span { width: 90px; height: 90px; font-size: 32px; }.detail-content { padding: 25px; }.detail-content h2 { font-size: 25px; }
}
@media (max-height: 500px) {
  .spatial-home { padding-top: 14px; }
  .archive-heading { margin-top: 18px; }
  .starfield { height: 540px; }
  .construct { top: 42%; width: 190px; height: 190px; }
  .instrument { inset: 24px; }
  .instrument span { font-size: 44px; }
  .construct-caption { top: 135px; }
  .constellation-rift { top: 30%; transform: translate(var(--rift-x, 0), var(--rift-y, 0)) rotate(-2deg) scale(.72); }
}
.starfield > .filters { position: absolute; left: 50%; top: 47%; width: 390px; height: 390px; transform: translate(-50%, -50%); margin: 0; pointer-events: none; z-index: 6; }
.starfield > .filters button { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; border: 0; padding: 12px 5px; color: #bd996d; font: 10px 'JetBrains Mono', monospace; text-shadow: 0 0 8px #080b0d; }
.starfield > .filters button[aria-pressed=true] { color: #ffe0aa; text-shadow: 0 0 12px #ff941f; }
.starfield > .filters button[aria-pressed=true]::before { content: '·'; display: block; position: absolute; top: -5px; left: calc(50% - 3px); color: #ffb33e; }
.rune-preview .starfield > .filters, .rune-expanded .starfield > .filters { visibility: hidden; }
.orbit-home { top: 104px; left: calc(50% - 26px); }
.construct:has(.orbit-home) .instrument span { opacity: .25; }
.constellation-rift { position: absolute; right: 22px; top: 44%; z-index: 7; display: grid; justify-items: center; width: 154px; min-height: 154px; padding: 0; border: 0; background: transparent; color: #e8c28e; text-align: center; cursor: grab; touch-action: none; transform: translate(var(--rift-x, 0), var(--rift-y, 0)) rotate(-2deg); transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.constellation-rift::before, .constellation-rift::after { position: absolute; left: 50%; top: 50%; content: ''; width: 106px; height: 106px; border: 1px solid #ff9b3d44; border-radius: 50%; transform: translate(-50%, -50%) rotate(20deg); box-shadow: 0 0 28px #ff7c2020, inset 0 0 20px #ff7c2012; pointer-events: none; }
.constellation-rift::after { width: 132px; height: 74px; border-color: #ffd27c35; border-style: dashed; transform: translate(-50%, -50%) rotate(-38deg); }
.constellation-rift:hover, .constellation-rift:focus-visible, .constellation-rift.pulling { outline: none; filter: brightness(1.25); }
.constellation-rift.pulling { cursor: grabbing; transition: none; }
.constellation-rift.rejecting { filter: brightness(1.5); }
.constellation-rift.rejecting .rift-orbit { animation: rift-rejection .7s cubic-bezier(.2,.8,.2,1) both; }
.rift-orbit { position: relative; z-index: 1; display: grid; width: 72px; height: 72px; margin-top: 30px; place-items: center; border: 1px solid #e8a451aa; border-radius: 50%; color: #ffd69a; font: 27px Cinzel, serif; background: #0b1110aa; box-shadow: 0 0 20px #ff922e55, 0 0 65px #ff7c2422, inset 0 0 25px #ffae4518; }
.rift-orbit::before { position: absolute; inset: 12px -7px; content: ''; border: 1px solid #ffc36b88; border-radius: 50%; transform: rotate(55deg); }
.rift-orbit::after { position: absolute; inset: -12px; content: ''; border: 1px dotted #ffbe7266; border-radius: 50%; transform: rotate(-35deg); animation: instrument-turn 9s linear infinite; }
.rift-orbit i { position: absolute; inset: 4px; border: 1px dotted #ffbe7266; border-radius: 50%; transform: rotate(35deg); animation: instrument-turn 12s linear infinite; }
.rift-orbit i + i { inset: -8px; border-style: dashed; animation-direction: reverse; animation-duration: 18s; }
.rift-orbit b { font-weight: 400; text-shadow: 0 0 14px #ffad4d; }
.rift-recharging .rift-orbit { transform: scale(calc(.82 + var(--recharge-health, 0) * .18)); box-shadow: 0 0 26px #fff0a966, 0 0 78px #ff7c2455, inset 0 0 30px #ffae4538; transition: transform .12s linear, box-shadow .12s linear; }
.rift-recharging .rift-orbit b { color: #fff0ae; transform: scale(calc(.82 + var(--recharge-health, 0) * .18)); filter: brightness(calc(1 + var(--recharge-health, 0))); animation: rift-recharge-flicker .28s steps(2, end) infinite; }
.rift-copy { position: relative; z-index: 2; display: grid; gap: 4px; margin-top: 11px; min-width: 0; text-shadow: 0 1px 8px #050807; pointer-events: none; }
.rift-copy small { color: #bf8b54; font: 8px 'JetBrains Mono', monospace; letter-spacing: .12em; }
.rift-copy span { color: #f4dbb2; font: 10px 'JetBrains Mono', monospace; font-weight: 500; text-transform: uppercase; }
.rift-copy output { color: #9faeae; font: 8px 'JetBrains Mono', monospace; }
.rift-orbit em { position: absolute; inset: -23px; border: 1px solid transparent; border-top-color: #ffb45a; border-right-color: #ff7f2e; border-radius: 50%; transform: rotate(-24deg); animation: instrument-turn 5s linear infinite; }
.rune-preview .constellation-rift, .rune-expanded .constellation-rift, .constellation-shifting .constellation-rift { opacity: .15; pointer-events: none; }
.spell-clash { position: absolute; inset: 0; z-index: 8; opacity: 0; pointer-events: none; }
.spell-clash > i { display: none; }
.spell-clash > i b { position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border: 1px solid #ffd58c; border-radius: 50%; background: #ff8a2c; box-shadow: 0 0 14px #ff8a2c; }
.spell-tether { display: none; }
.spell-casting .spell-clash { opacity: 1; }
.spell-casting .connection-map { opacity: 0; }
.spell-casting .spell-clash > i { animation: shard-clash 1.05s cubic-bezier(.25,.9,.35,1) both; animation-delay: calc(var(--angle) * .001); }
.spell-casting .spell-tether { animation: tether-grab 1.05s ease-in-out both; animation-delay: var(--tether-delay); }
.spell-casting .constellation-rift { pointer-events: none; animation: sigil-unfold 1.05s cubic-bezier(.2,.8,.2,1) both; }
.spell-casting .constellation-rift.rift-emitting { animation: sigil-emit 1.05s cubic-bezier(.2,.8,.2,1) both; }
.spell-casting .construct { animation: instrument-clash 1.05s ease-in-out both; }
.spell-casting .instrument { transform: scale(var(--ritual-scale, 1)); transition: transform .08s linear; }
.spell-casting .instrument span { opacity: 0; }
.spell-casting.constellation-resolving .instrument span { opacity: 1; animation: rune-reform 2.2s cubic-bezier(.2,.85,.25,1) both; }
.spell-casting .instrument::before, .spell-casting .instrument::after { opacity: .32; }
.glyph-tension .instrument { filter: brightness(1.45) saturate(1.35); box-shadow: 0 0 48px #ff9b3d66, inset 0 0 36px #ffbf5c55; }
.glyph-tension .instrument::before { border-color: #fff0a8; animation: tension-ring .28s steps(3, end) infinite; }
.glyph-tension .instrument::after { border-color: #ff8730; animation: tension-ring .42s steps(4, end) infinite reverse; }
.glyph-tension .construct-magic { filter: brightness(1.35); }
.spell-casting .battle-node { animation: none !important; filter: none !important; transition: none !important; }
.node-fragments { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.node-fragments i { position: absolute; left: 22px; top: 22px; width: 5px; height: 5px; border: 1px solid #ffe09c; background: #ff8a2b; box-shadow: 0 0 12px #ff8a2b; opacity: 0; }
.spell-casting .node-fragments i { animation: none; }
.spell-casting .construct::before, .spell-casting .construct::after { content: ''; position: absolute; inset: -35px; border: 1px solid #ffad4d99; border-radius: 50%; animation: clash-ring 1.05s ease-out both; pointer-events: none; }
.spell-casting .construct::after { inset: -75px; border-color: #ffdf9d55; animation-delay: .1s; }
.constellation-shifting .project-space { animation: none; }
@keyframes shard-clash { 0% { opacity: 0; transform: rotate(var(--angle)) scaleX(0); } 22% { opacity: 1; transform: rotate(var(--angle)) scaleX(1); } 48% { opacity: 1; transform: rotate(var(--angle)) scaleX(.35); } 72% { opacity: .85; transform: rotate(var(--angle)) scaleX(.8); } 100% { opacity: 0; transform: rotate(var(--angle)) scaleX(0); } }
@keyframes tether-grab { 0%, 18% { opacity: 0; transform: rotate(var(--angle)) scaleX(0); } 48% { opacity: .85; transform: rotate(var(--angle)) scaleX(1); } 82%, 100% { opacity: 0; transform: rotate(var(--angle)) scaleX(.3); } }
@keyframes sigil-unfold { 0% { opacity: 1; transform: translate(var(--rift-x, 0), var(--rift-y, 0)) rotate(-2deg) scale(1); } 28% { opacity: 1; transform: translate(var(--rift-x, 0), var(--rift-y, 0)) rotate(45deg) scale(1.25); } 70% { opacity: .8; transform: translate(var(--rift-x, 0), var(--rift-y, 0)) rotate(160deg) scale(.7); } 100% { opacity: 0; transform: translate(var(--rift-x, 0), var(--rift-y, 0)) rotate(360deg) scale(.08); filter: brightness(2.8); } }
@keyframes sigil-emit { 0% { opacity: 0; transform: translate(var(--rift-x, 0), var(--rift-y, 0)) rotate(-180deg) scale(.08); filter: brightness(2.8); } 42% { opacity: 1; transform: translate(calc(var(--rift-x, 0) * .55), calc(var(--rift-y, 0) * .55)) rotate(-25deg) scale(1.15); } 100% { opacity: 1; transform: translate(0, 0) rotate(-2deg) scale(1); filter: none; } }
@keyframes instrument-clash { 0%, 100% { filter: none; } 32% { filter: brightness(1.8) saturate(1.5); } 50% { filter: brightness(.75); } 68% { filter: brightness(2.1) saturate(1.8); } }
@keyframes rift-recharge-flicker { 0%, 100% { opacity: .62; } 45% { opacity: 1; } 62% { opacity: .78; } }
@keyframes rift-rejection { 0% { transform: scale(1.1) rotate(-5deg); box-shadow: 0 0 38px #fff0a988, 0 0 90px #ff7c2466; } 35% { transform: scale(.88) rotate(4deg); box-shadow: 0 0 16px #ff9b3d55, 0 0 38px #ff7c2422; } 100% { transform: scale(1) rotate(0); box-shadow: 0 0 20px #ff922e55, 0 0 65px #ff7c2422, inset 0 0 25px #ffae4518; } }
@keyframes nav-node-pull { 0%, 100% { rotate: -2deg; } 50% { rotate: 3deg; } }
@keyframes nav-node-reject { 0% { filter: brightness(2); } 35% { filter: brightness(1.5); } 100% { filter: none; } }
@keyframes nav-node-invoke { 0% { opacity: 1; transform: translate(var(--nav-dx, 0), var(--nav-dy, 0)) scale(1.14); filter: brightness(1.5); } 100% { opacity: 0; transform: translate(var(--nav-dx, 0), var(--nav-dy, 0)) scale(.1); filter: blur(5px) brightness(2.5); } }
@keyframes nav-merge-ring { 0% { opacity: 0; transform: scale(.55); } 35% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes page-veil-reveal { from { opacity: 1; } to { opacity: 0; } }
@keyframes rune-reform { 0% { opacity: 0; transform: scale(.08) rotate(-170deg); filter: blur(9px) brightness(3.2); text-shadow: 0 0 42px #fff0ad, 0 0 80px #ff7c24; } 18% { opacity: .35; transform: scale(.42) rotate(-92deg); filter: blur(4px) brightness(2.7); } 42% { opacity: 1; transform: scale(1.18) rotate(20deg); filter: blur(1px) brightness(1.9); text-shadow: 0 0 28px #fff0ad, 0 0 58px #ff7c24; } 64% { opacity: .7; transform: scale(.92) rotate(-8deg); filter: blur(2px) brightness(1.5); } 82% { opacity: 1; transform: scale(1.04) rotate(3deg); filter: blur(0) brightness(1.35); } 100% { opacity: 1; transform: scale(1) rotate(0); filter: none; text-shadow: 0 0 26px #ff942f; } }
@keyframes ring-instability { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(1px, -2px) rotate(.4deg); } 50% { transform: translate(-2px, 1px) rotate(-.5deg); } 75% { transform: translate(2px, 1px) rotate(.3deg); } 100% { transform: translate(0, 0) rotate(0); } }
@keyframes tension-ring { 0% { transform: rotate(0) scale(.94); opacity: .45; } 50% { transform: rotate(5deg) scale(1.04); opacity: 1; } 100% { transform: rotate(-4deg) scale(.98); opacity: .62; } }
@keyframes clash-ring { 0% { opacity: 0; transform: scale(.65); } 28% { opacity: .9; transform: scale(1); } 56% { opacity: .25; transform: scale(1.35); } 100% { opacity: 0; transform: scale(.92); } }
.project-node.departing { animation: node-collapse .42s ease-in both; }
.project-node.arriving { animation: node-emerge 1.15s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--arrival, 0) * 180ms); }
@keyframes node-resist { 0% { opacity: 1; transform: translate(var(--rest-x, -20%), var(--rest-y, -20%)) rotate(0) scale(1); } 18% { opacity: 1; transform: translate(calc(var(--rest-x, -20%) + var(--flee-x)), calc(var(--rest-y, -20%) + var(--flee-y))) rotate(-9deg) scale(1.08); } 35% { opacity: .95; transform: translate(calc(var(--rest-x, -20%) - var(--flee-x) * .7), calc(var(--rest-y, -20%) - var(--flee-y) * .7)) rotate(13deg) scale(.94); } 54% { opacity: .72; transform: translate(calc(var(--pull-x) * .18 + var(--flee-x) * .5), calc(var(--pull-y) * .18 + var(--flee-y) * .5)) rotate(-18deg) scale(.7); } 76% { opacity: .3; transform: translate(calc(var(--pull-x) * .65 - var(--flee-x) * .4), calc(var(--pull-y) * .65 - var(--flee-y) * .4)) rotate(27deg) scale(.35); } 100% { opacity: .08; transform: translate(var(--pull-x), var(--pull-y)) rotate(80deg) scale(.08); filter: blur(3px); } }
@keyframes node-shatter { 0%, 22% { opacity: 0; transform: translate(0, 0) scale(.2) rotate(0); } 38% { opacity: 1; transform: translate(var(--fragment-x), var(--fragment-y)) scale(1.4) rotate(80deg); } 68% { opacity: .9; transform: translate(calc(var(--fragment-x) * .35), calc(var(--fragment-y) * .35)) scale(.8) rotate(150deg); } 100% { opacity: 0; transform: translate(calc(var(--pull-x) * .4), calc(var(--pull-y) * .4)) scale(.1) rotate(300deg); } }
@keyframes node-collapse { to { opacity: 0; transform: translate(var(--pull-x, 0), var(--pull-y, 0)) scale(.1) rotate(160deg); filter: brightness(1.4); } }
@keyframes node-emerge { from { opacity: 0; transform: translate(var(--seed-x, 0), var(--seed-y, 0)) scale(.08); filter: brightness(2.5); } to { opacity: 1; transform: translate(var(--rest-x, -20%), var(--rest-y, -20%)) scale(1); filter: none; } }
.node-label strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.content-collection .node-summary { display: none; }
.chronicle-heading time { color: #aeb9b6; font-size: 12px; }
.spell-reader[hidden], .spatial-home[hidden] { display: none !important; }
.spell-reader { position: relative; max-width: 900px; padding: 110px 64px 100px; margin: 0 auto; }
.reader-controls { position: fixed; inset: 0 0 auto; z-index: 8; display: flex; align-items: center; gap: 18px; min-height: 64px; margin: 0; padding: 8px max(24px, calc((100vw - 900px) / 2 + 64px)); border-bottom: 1px solid #c6954566; background: #0a0e0ef2; box-shadow: 0 12px 35px #0008, 0 1px 18px #ff8c2c22; backdrop-filter: blur(18px); color: #e5b779; }
.reader-controls button { display: grid; place-items: center; height: 48px; width: 48px; border: 1px dotted #e8a344; border-radius: 50%; background: transparent; color: #ffcc8c; font-size: 24px; cursor: pointer; }
.reader-controls button:hover, .reader-controls button:focus-visible { border-style: solid; color: #fff2ce; box-shadow: 0 0 22px #ff9f3b55; outline: none; }
.reader-controls a { text-decoration: none; font: 11px 'JetBrains Mono', monospace; white-space: nowrap; }
.reader-controls a:hover, .reader-controls a:focus-visible { color: #fff2ce; }
.reading-progress { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 80px; }
.reading-progress::before { content: 'READING'; color: #9b8467; font: 8px 'JetBrains Mono', monospace; letter-spacing: .08em; }
.reading-progress > span { position: relative; display: block; height: 2px; flex: 1; overflow: hidden; background: #3b2c20; }
.reading-progress > span::after { position: absolute; inset: 0; content: ''; width: 100%; transform: translateX(-100%); background: linear-gradient(90deg, #ff6f1e, #ffe298); box-shadow: 0 0 12px #ff9f3b; transition: transform .25s ease; }
.reading-progress > span { --progress: 0%; }
.reading-progress > span::after { transform: translateX(calc(var(--progress) - 100%)); }
.reading-progress output { min-width: 32px; color: #d9ac6c; font: 9px 'JetBrains Mono', monospace; text-align: right; }
.chronicle { position: relative; user-select: text; color: #dde1de; }
.chronicle::before { content: ''; pointer-events: none; position: absolute; top: -90px; left: -110px; right: -110px; height: 480px; border: 1px dashed #bb863438; border-radius: 50%; z-index: -1; }
.chronicle-heading { position: relative; margin-bottom: 52px; padding-bottom: 28px; }
.chronicle-heading::after { position: absolute; bottom: 0; left: 0; width: 120px; height: 1px; content: ''; background: linear-gradient(90deg, #ff9f3b, transparent); box-shadow: 0 0 16px #ff9f3b; }
.chronicle-byline { color: #d9ac6c; font: 10px 'JetBrains Mono', monospace; }
.chronicle h1 { font: 38px/1.3 Cinzel, serif; color: #f8e7cb; margin: 24px 0; overflow-wrap: anywhere; }
.chronicle h2 { position: relative; font: 26px/1.4 Cinzel, serif; color: #f3cd96; margin: 40px 0 20px; overflow-wrap: anywhere; }
.chronicle h2::before, .chronicle h3::before { content: '✦'; display: inline-block; margin-right: 10px; color: #ff9f3b; font: 12px 'JetBrains Mono', monospace; text-shadow: 0 0 12px #ff9f3b; vertical-align: .2em; }
.chronicle h3 { font-size: 20px; color: #e7cb9f; margin-top: 28px; }
.chronicle p, .chronicle li { font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; }
.chronicle section { margin: 0 0 24px; opacity: .55; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.chronicle section.is-seen { opacity: 1; transform: none; }
.chronicle .chapter-section { position: relative; padding: 24px 0 28px 28px; border-left: 1px solid #c6954530; }
.chronicle .chapter-section::before { position: absolute; top: 30px; left: -4px; width: 7px; height: 7px; content: ''; border: 1px solid #ffad4d; background: #0a0e0e; box-shadow: 0 0 14px #ff8f2c; transform: rotate(45deg); }
.chronicle .chapter-section::after { position: absolute; top: 0; left: 12px; content: attr(data-chapter); color: #8e7559; font: 9px 'JetBrains Mono', monospace; letter-spacing: .12em; }
.chronicle .chapter-section p { margin-bottom: 0; }
.chronicle .chapter-section:target { opacity: 1; border-left-color: #ffad4d; box-shadow: -18px 0 35px #ff812018; }
.chronicle.chapter-jump .chapter-section:target { animation: chapter-arrival 1.1s ease both; }
.chronicle :target { scroll-margin-top: 24px; }
.chronicle pre { margin: 30px 0; max-width: 100%; }
.chronicle pre code { max-height: none; }
.chronicle-index { border-top: 1px solid #c6954540; border-bottom: 1px solid #c6954540; padding: 16px 0; margin-bottom: 40px; }
.chronicle-index summary { cursor: pointer; color: #ddba85; }
.chronicle-index a { position: relative; display: block; padding: 8px 0 8px 18px; font-size: 13px; color: #b9a181; text-decoration: none; transition: color .2s, padding .2s; }
.chronicle-index a::before { position: absolute; left: 0; content: '·'; color: #ff9f3b; }
.chronicle-index a:hover, .chronicle-index a:focus-visible, .chronicle-index a.is-current { padding-left: 24px; color: #fff0c2; text-shadow: 0 0 14px #ff9f3b; outline: none; }
.chronicle pre { border-color: #ff9f3b55; box-shadow: inset 0 0 36px #ff6b1e10, 0 0 0 transparent; transition: border-color .3s, box-shadow .3s; }
.chronicle pre:focus-within, .chronicle pre:hover { border-color: #ffbd6f; box-shadow: inset 0 0 36px #ff6b1e18, 0 0 28px #ff7e2520; }
.reading-spell { background: #0a0e0f; }
.quiet-reading #matrix-rain, .quiet-reading #spell-particles { visibility: hidden; }
.reading-spell::before { opacity: .1; }
@media (max-width: 800px) {
  .project-node.slot-0 { left: 2%; top: 3%; }.project-node.slot-1 { left: 53%; top: 9%; }
  .project-node.slot-2 { left: 52%; top: 65%; }.project-node.slot-3 { left: 2%; top: 59%; }
  .project-node.slot-4 { left: 5%; top: 81%; }.project-node.slot-5 { left: 53%; top: 87%; }
  .orbit-home { top: 90px; }
  .constellation-rift { right: 2px; top: 48%; transform: translate(var(--rift-x, 0), var(--rift-y, 0)) rotate(-2deg) scale(.86); transform-origin: center; }
  .spell-reader { padding: 92px 24px 65px; }
  .reader-controls { padding: 8px 24px; gap: 10px; }
  .reading-progress::before { display: none; }
  .chronicle h1 { font-size: 27px; }
  .chronicle h2 { font-size: 22px; }
  .chronicle p, .chronicle li { font-size: 15px; }
  .chronicle::before { left: -15px; right: -15px; height: 330px; }
  .chronicle .chapter-section { padding-left: 20px; }
}
@media print {
  body > canvas, .spatial-home, .reader-controls, .chronicle-index, .site-header, .scroll-ember { display: none !important; }
  .spell-reader { max-width: none; padding: 0; }
  .chronicle, .chronicle h1, .chronicle h2, .chronicle h3 { color: #000; }
  .chronicle::before { display: none; }
}
.construct-magic { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.node-mark { border: 0; background: none; transform: none; border-radius: 50%; text-shadow: 0 0 18px #ffac4f; }
.project-node.interested .node-mark { box-shadow: none; text-shadow: 0 0 9px #fff0c2, 0 0 28px #ff8d32; }
.construct { transition: width .65s ease, height .65s ease; }
.construct a { background: transparent; text-shadow: 0 0 12px #080b0d; transition: opacity .25s; }
.instrument { transition: inset .65s ease; }
.instrument div, .instrument span, .construct-caption { transition: opacity .3s; }
.rune-preview .construct { width: 370px; height: 370px; }
.rune-expanded .construct { width: 660px; height: 660px; }
.rune-preview .instrument, .rune-expanded .instrument { inset: 8px; }
.rune-preview .instrument div, .rune-preview .instrument span, .rune-preview .construct-caption,
.rune-expanded .instrument div, .rune-expanded .instrument span, .rune-expanded .construct-caption { opacity: 0; }
.rune-preview .construct a { opacity: 0; pointer-events: none; }
.rune-expanded .construct a { visibility: hidden; }
.rune-expanded .project-node { opacity: .12; pointer-events: none; }
.project-preview { position: absolute; top: 47%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: 290px; padding: 20px; text-align: center; border: 0; box-shadow: none; background: transparent; }
.project-preview h2 { font-size: 23px; }
.dismiss-preview { top: -30px; right: calc(50% - 22px); }
.project-detail { position: absolute; top: 47%; left: 50%; margin: 0; transform: translate(-50%, -50%); width: 470px; max-width: calc(100% - 32px); max-height: none; border: 0; background: transparent; overflow: visible; }
.project-detail[open] { display: block; z-index: 25; animation: rune-reveal .65s ease both; }
.project-preview.assembling { animation: rune-reveal .5s ease both; }
@keyframes rune-reveal { from { opacity: 0; filter: blur(8px) brightness(2); } to { opacity: 1; filter: blur(0) brightness(1); } }
.project-detail .detail-art { min-height: 0; height: 55px; background: none; }
.project-detail .detail-art span { width: auto; height: auto; border: 0; background: none; box-shadow: none; font-size: 36px; }
.project-detail .detail-content { padding: 12px 28px; text-align: center; }
.project-detail .detail-content h2 { font-size: 27px; }
.project-detail .detail-tags { margin: 18px 0; }
.project-detail .close-detail { top: -40px; right: calc(50% - 22px); }
.rune-expanded .instrument { background: #080b0df2; }
.glyph-dissolving .instrument span { opacity: 1; animation: glyph-soft-dissolve .85s cubic-bezier(.2,.8,.2,1) both; }
.glyph-reassembling .instrument span { opacity: 1; animation: glyph-soft-reassemble .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes glyph-soft-dissolve { 0% { opacity: 1; transform: scale(1); filter: brightness(1); } 35% { opacity: .75; transform: scale(1.12) rotate(8deg); filter: brightness(2); } 100% { opacity: 0; transform: scale(.28) rotate(-24deg); filter: blur(5px) brightness(2.8); } }
@keyframes glyph-soft-reassemble { 0% { opacity: 0; transform: scale(.24) rotate(24deg); filter: blur(5px) brightness(2.8); } 55% { opacity: .8; transform: scale(1.12) rotate(-7deg); filter: blur(1px) brightness(1.8); } 100% { opacity: 1; transform: scale(1) rotate(0); filter: none; } }
@media (max-width: 800px) {
  .starfield > .filters { top: 39%; width: 295px; height: 340px; }
  .starfield > .filters button { font-size: 9px; }
  .rune-preview .construct { width: 330px; height: 330px; }
  .rune-expanded .construct { width: calc(100% - 14px); height: 660px; }
  .project-preview, .project-detail { top: 39%; }
  .project-preview { width: 265px; }
  .project-detail { width: calc(100% - 45px); }
  .project-detail .detail-content { padding: 10px 16px; }
  .project-detail .detail-content h2 { font-size: 22px; }
  .project-detail .detail-text { font-size: 13px; line-height: 1.7; }
  .rune-expanded .instrument::after { inset: -5px; }
}
@media (prefers-reduced-motion: reduce) { .spatial-home *, .spatial-home *::before, .spatial-home *::after { animation: none !important; transition: none !important; } }
@keyframes chapter-arrival { 0% { background: #ff982522; box-shadow: -28px 0 60px #ff812055; } 100% { background: transparent; box-shadow: -18px 0 35px #ff812018; } }
@media (max-height: 500px) {
  .spatial-home { padding-top: 14px; }
  .archive-heading { margin-top: 18px; }
  .starfield { height: 540px; }
  .construct { top: 42%; width: 190px; height: 190px; }
  .instrument { inset: 24px; }
  .instrument span { font-size: 44px; }
  .construct-caption { top: 135px; }
  .constellation-rift { top: 30%; transform: translate(var(--rift-x, 0), var(--rift-y, 0)) rotate(-2deg) scale(.72); }
}