/* The imagegen textures are bundled locally; the instrument is a vector drawing. */
.astral-mark{display:block;width:100%;height:100%;--mark-color:var(--peach,#dfff70);overflow:visible}
.brand .astral-mark{width:35px!important;height:35px;flex-shrink:0;overflow:hidden}
.desktop-brand .astral-mark{width:42px;height:42px}
.retrik-seal{display:inline-flex;align-items:center;gap:7px;font:700 8px/1.3 Manrope,Arial,sans-serif;letter-spacing:1.1px;color:var(--muted)}
.retrik-seal .astral-mark{width:29px;height:29px;flex-shrink:0}
.tarot-seal{position:absolute;z-index:3;right:0;top:2px;width:24px;height:24px}
.tarot-seal .astral-mark{--mark-color:#62478c}
.pair-seal{margin:12px 0 0}
html[data-theme] .hero-art{background:#20142f url('./assets/ritual-astrolabe.webp') 70% 55%/cover;border-radius:23px;isolation:isolate}
html .hero-art::after{color:#dfff70!important}
html .card-stage{background:#191124 url('./assets/ritual-eclipse.webp') 62% 50%/cover;border:1px solid #8261ac;border-radius:24px;margin:18px 0 24px;box-shadow:inset 0 0 45px #100b2533}
html .card-stage .orbit{opacity:.45;color:#f1e5ff}
html .pair-headline{position:relative;overflow:hidden;color:#fff5ff!important;background:#20142f url('./assets/ritual-astrolabe.webp') 70% 50%/cover!important;border:1px solid #9577b7;border-radius:18px;padding:22px!important;box-shadow:none!important;text-shadow:0 2px 20px #180c25}
.ritual-reaction{position:fixed;z-index:55;left:50%;bottom:calc(89px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(390px,calc(100vw - 24px));min-height:104px;padding:12px 9px 12px 11px;display:flex;align-items:center;gap:11px;border:1px solid #ba9ddc88;border-radius:20px;color:#fff6ff;background:#231630 url('./assets/ritual-astrolabe.webp') center/cover;box-shadow:0 12px 42px #10091f66,inset 0 1px 0 #ede0ff22;pointer-events:none;isolation:isolate}
.ritual-reaction::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(90deg,#17102075,#17102060 80%,#171020a8)}
.reaction-avatar{position:relative;flex:0 0 74px;width:74px;height:74px;display:grid;place-items:center;color:#e7d5ff;isolation:isolate}
.reaction-avatar>.astral-mark{width:48px;height:48px;--mark-color:#dfff70;filter:drop-shadow(0 0 7px #dfff701f)}
.ritual-instrument{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:.45}
.reaction-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.reaction-copy .reaction-label{font:700 8px/1.3 Manrope,Arial,sans-serif;letter-spacing:1.6px;color:#dfff70}
.reaction-copy strong{font:800 14px/1.3 Manrope,Arial,sans-serif;letter-spacing:-.3px;color:#fff6ff}
.reaction-copy>span:last-child{font:500 10px/1.5 Manrope,Arial,sans-serif;color:#eee0ff}
.reaction-close{pointer-events:auto;align-self:flex-start;color:#eee0ff;background:transparent;font-size:22px;padding:0;min-width:32px;min-height:32px;line-height:1}
.reaction-close:focus-visible{outline:2px solid #dfff70;outline-offset:1px;border-radius:7px}
.ritual-playing .astral-mark{--mark-color:#dfff70}
@media(prefers-reduced-motion:no-preference){
 .ritual-reaction{animation:ritual-arrive .45s cubic-bezier(.2,.7,.25,1) both,ritual-depart .3s ease 3.05s forwards}
 :is(.ritual-reaction,.ritual-playing) .astral-crescent{transform-origin:64px 64px}
 :is(.ritual-reaction,.ritual-playing) .astral-crescent-a{animation:ritual-blade-a 1.3s cubic-bezier(.16,.7,.2,1) both}
 :is(.ritual-reaction,.ritual-playing) .astral-crescent-b{animation:ritual-blade-b 1.3s cubic-bezier(.16,.7,.2,1) both}
 :is(.ritual-reaction,.ritual-playing) .astral-satellite{transform-origin:64px 64px;animation:ritual-satellite 1.3s cubic-bezier(.16,.7,.2,1) both}
 :is(.ritual-reaction,.ritual-playing) .astral-aperture{transform-origin:64px 64px;animation:ritual-aperture 1.3s ease both}
 :is(.ritual-reaction,.ritual-playing) .ritual-instrument{transform-origin:center;animation:ritual-calibrate 1.3s ease both}
 :is(.ritual-reaction,.ritual-playing) .ritual-trajectory{stroke-dasharray:540;animation:ritual-trace 1.3s ease both}
 @keyframes ritual-arrive{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
 @keyframes ritual-depart{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,3px)}}
 @keyframes ritual-blade-a{0%{opacity:0;transform:rotate(28deg)}75%,100%{opacity:1;transform:rotate(0)}}
 @keyframes ritual-blade-b{0%{opacity:0;transform:rotate(-28deg)}75%,100%{opacity:1;transform:rotate(0)}}
 @keyframes ritual-satellite{0%{opacity:0;transform:rotate(48deg)}65%,100%{opacity:1;transform:rotate(0)}}
 @keyframes ritual-aperture{0%,48%{opacity:0;transform:rotate(35deg) scale(.6)}82%,100%{opacity:1;transform:rotate(0) scale(1)}}
 @keyframes ritual-calibrate{0%{opacity:0;transform:rotate(-18deg) scale(.96)}50%{opacity:.8}100%{opacity:.45;transform:rotate(0) scale(1)}}
 @keyframes ritual-trace{0%{stroke-dashoffset:540;opacity:0}25%{opacity:1}100%{stroke-dashoffset:0;opacity:.6}}
}
@media(max-width:359px){.brand .astral-mark{width:28px!important;height:28px}.ritual-reaction{padding:10px 5px 10px 8px;gap:7px}.reaction-avatar{flex-basis:60px;width:60px;height:60px}.reaction-avatar>.astral-mark{width:40px;height:40px}.reaction-copy strong{font-size:13px}}
@media(min-width:900px){.ritual-reaction{bottom:26px}}
@media(prefers-reduced-motion:reduce){.ritual-reaction,.ritual-reaction *,.ritual-playing *{animation:none!important;transition:none!important}}
