@charset "UTF-8";
:root{color-scheme:dark;--bg:#090b11;--ink:#d5d5d1;--sans:"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif}
*{box-sizing:border-box}html{overflow-x:clip}[hidden]{display:none!important}body{margin:0;min-width:280px;min-height:100dvh;background:var(--bg);color:var(--ink);font:300 14px var(--sans);display:flex;flex-direction:column;isolation:isolate}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled{cursor:wait;opacity:.45}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:1px solid #c7b394;outline-offset:6px}svg{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.spectral-light{position:fixed;z-index:-2;width:650px;height:650px;pointer-events:none;border-radius:50%;filter:blur(90px);opacity:.5;animation:breathe 22s ease-in-out infinite alternate}.spectral-left{top:0;left:-350px;background:radial-gradient(ellipse,#4c3f6845,transparent 70%)}.spectral-right{right:-340px;bottom:-140px;background:radial-gradient(ellipse,#28545135,transparent 70%);animation-delay:-11s}.grain{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.site-header{height:88px;padding:0 48px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;color:#c1b9aa;font-size:11px;font-weight:400;letter-spacing:5px}.brand svg{width:28px;height:28px;stroke-width:.9;color:#a7957a}main{flex:1;min-width:0;width:100%;max-width:1400px;margin:auto;padding:5px 0 10px;overflow:hidden}.sigil{text-align:center;color:#95877780;font-size:16px;line-height:1}
.carousel-stage{position:relative;min-height:700px;isolation:isolate;transition:opacity .6s,filter .6s,transform .6s}.deck{position:absolute;inset:0;perspective:1300px;transform-style:flat;overflow:visible;isolation:isolate}.pre-layout .deck{visibility:hidden;opacity:0}.layout-ready .deck{visibility:visible;opacity:1;transition:opacity .18s ease}.deck-card{position:absolute;left:var(--left);top:var(--top);width:var(--card-size,140px);aspect-ratio:25/43;padding:0;border:0;border-radius:11px;background:transparent;box-shadow:none;transform:rotateZ(var(--card-tilt,0deg));transform-style:preserve-3d;transition:left 1.25s cubic-bezier(.2,.75,.2,1),top 1.25s cubic-bezier(.2,.75,.2,1),transform 1.65s cubic-bezier(.2,.75,.2,1),box-shadow .45s,filter .45s;cursor:pointer;overflow:visible;z-index:var(--layer)}.deck-card::before{content:"";position:absolute;inset:-55px;border-radius:50%;background:radial-gradient(circle at 52% 48%,#fff4cd 0%,#f2bf69c9 11%,#b9783f80 29%,#78442942 48%,transparent 70%);filter:blur(10px);opacity:0;z-index:-1;transform:scale(.9);pointer-events:none}.card-float,.card-spin,.card-inner{display:block;width:100%;height:100%;transform-style:preserve-3d}.card-float,.card-spin{will-change:transform}.card-float{animation:card-float var(--float-duration) ease-in-out var(--float-delay) infinite alternate}.card-inner{position:relative;transition:filter .25s}.card-inner img{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:inherit;backface-visibility:hidden;filter:sepia(.45) saturate(.6) brightness(.75) contrast(1.12);pointer-events:none}.card-inner .card-back{transform:rotateY(180deg)}.fool-card{--float-duration:7.5s;--float-delay:-1.3s;--spin-duration:21s}.priestess-card{--float-duration:9s;--float-delay:-4.4s;--spin-duration:19s}.hermit-card{--float-duration:8.8s;--float-delay:-2.7s;--spin-duration:23s}.hanged-card{--float-duration:10s;--float-delay:-7s;--spin-duration:25s}.death-card{--float-duration:8.5s;--float-delay:-5s;--spin-duration:27s}.devil-card{--float-duration:8.2s;--float-delay:-3s;--spin-duration:22s}.star-card{--float-duration:9.5s;--float-delay:-6s;--spin-duration:24s}.moon-card{--float-duration:7.8s;--float-delay:-4s;--spin-duration:20s}.deck-card:hover,.deck-card.is-hovered{filter:brightness(1.1);transform:rotateZ(0deg) scale(1);z-index:60!important}.deck-card:hover .card-float,.deck-card.is-hovered .card-float{animation-name:card-hover;animation-duration:calc(var(--float-duration) * .833);animation-timing-function:ease-in-out}.deck-card.is-punished{pointer-events:none;filter:brightness(.72) saturate(.65)}.deck-card.is-punished .card-inner{animation:flip-back .85s cubic-bezier(.25,.8,.25,1) forwards}.deck-card.is-punished.paused .card-float{animation-play-state:paused}.deck-card.is-punished::before{opacity:.15}.deck-aura{position:absolute;left:calc(50% - 300px);top:25px;width:600px;height:480px;background:radial-gradient(ellipse,#68547520,transparent 65%);filter:blur(45px);pointer-events:none}.deck-ring{position:absolute;width:820px;height:820px;border:1px solid #a9926c18;border-radius:50%;left:calc(50% - 410px);top:-110px;transform:rotateX(68deg);pointer-events:none}.deck-ring:after{content:"";position:absolute;inset:19px;border:1px dashed #a9926c12;border-radius:inherit}.deck-navigation{position:absolute;top:570px;left:0;right:0;display:flex;align-items:center;justify-content:center;color:#a99a804b}.deck-navigation span{font-size:12px}.ritual-open .carousel-stage{opacity:.15;filter:blur(3px);transform:scale(.96)}
dialog{color:var(--ink);background:#10131aeF;border:1px solid #a995752e;border-radius:3px;box-shadow:0 30px 110px #0009}dialog::backdrop{background:transparent}.workbench{position:fixed;inset:0;margin:auto;width:min(500px,calc(100% - 40px));max-height:calc(100dvh - 40px);padding:25px 28px 28px;overflow:visible}.workspace-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.workspace-heading h2{margin:0;font-size:13px;font-weight:300;letter-spacing:6px;color:#c7b59a}.dialog-close{font-family:var(--sans);font-size:22px;font-weight:300;color:#9c9286;background:transparent;border:0;padding:0 2px;line-height:1.1}.input-frame{position:relative}textarea{display:block;width:100%;height:160px;min-height:120px;max-height:240px;resize:vertical;padding:15px 16px 28px;line-height:1.9;letter-spacing:.8px;color:#d2cec6;background:#070a104a;border:1px solid #ab987525;border-radius:1px;outline:0;transition:border-color .2s}textarea:focus,.word-field input:focus{border-color:#b9a28170}textarea[aria-invalid="true"],.word-field input[aria-invalid="true"]{border-color:#a27b6860}.input-count{position:absolute;right:11px;bottom:8px;color:#8d81724f;font:9px ui-monospace,monospace;pointer-events:none}.word-field{margin-top:15px}.word-field input{display:block;width:100%;height:42px;padding:0 13px;letter-spacing:.8px;color:#d2cec6;background:#070a104a;border:1px solid #ab987525;border-radius:1px;outline:0}.primary-button{width:100%;height:43px;margin-top:19px;display:flex;align-items:center;justify-content:center;gap:22px;background:#b7a17d08;border:1px solid #b7a17d60;border-radius:1px;color:#c7b59a;letter-spacing:6px;font-size:12px;font-weight:300}.primary-button:hover:not(:disabled){background:#b7a17d14}.primary-button svg{width:17px;height:17px}.form-status{color:#c0a18b;text-align:center;font-size:11px;line-height:1.7;margin:13px 0 0}.result-section{border-top:1px solid #b7a17d20;margin-top:23px;padding-top:10px}.result-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.result-mark{font-size:11px;color:#b7a17d60}.copy-button{display:grid;place-items:center;width:27px;height:27px;padding:5px;background:none;border:0;color:#b7a17d85}.copy-button svg{grid-area:1/1;width:15px;height:15px}.copy-button .check-icon{display:none}.copy-button.copied .copy-icon{display:none}.copy-button.copied .check-icon{display:block}#result-text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all;font:12px/2 ui-monospace,"Cascadia Code",monospace;letter-spacing:1.2px;color:#c2b29a;max-height:180px;overflow:auto}.workbench[data-phase="complete"] .result-section{margin-top:0}.workbench.incinerating{pointer-events:none;animation:ritual-dissolve 2.8s cubic-bezier(.22,.7,.2,1) forwards}#ash-canvas{position:absolute;inset:-120px;width:calc(100% + 240px);height:calc(100% + 240px);z-index:20;pointer-events:none}.omen-shroud{position:fixed;inset:0;z-index:70;background:rgba(5,7,12,.62);backdrop-filter:blur(12px) saturate(.68);-webkit-backdrop-filter:blur(12px) saturate(.68);opacity:0;pointer-events:none;transition:opacity .9s ease}.omen-shroud.is-visible{opacity:1}.omen-shroud.is-hiding{opacity:0}.omen-warning{position:fixed;z-index:80;left:50%;top:38.2%;width:min(760px,calc(100% - 48px));margin:0;transform:translate(-50%,-50%) translateY(16px);text-align:center;pointer-events:none;font-size:clamp(15px,2.1vw,23px);font-weight:500;letter-spacing:.18em;line-height:2;color:#8d6a2d;background:linear-gradient(115deg,#5e4218 0%,#c8a45d 22%,#f1d98d 39%,#76501d 57%,#c29a4f 78%,#523715 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 1px 0 #f0d99824,0 2px 7px #000b,0 0 18px #8e672d26;filter:saturate(.82) contrast(1.15);opacity:0}.omen-warning.is-visible{animation:omen-reveal 1.15s cubic-bezier(.2,.7,.2,1) forwards}.omen-warning.is-hiding{animation:omen-dismiss .9s ease forwards}
@keyframes omen-dismiss{0%{opacity:1;transform:translate(-50%,-50%) translateY(0);filter:blur(0) saturate(.82)}100%{opacity:0;transform:translate(-50%,-50%) translateY(-10px);filter:blur(5px) saturate(.55)}}@keyframes omen-reveal{0%{opacity:0;transform:translate(-50%,-50%) translateY(16px);filter:blur(5px) saturate(.6)}65%{opacity:1;transform:translate(-50%,-50%) translateY(-2px);filter:blur(.2px) saturate(.9)}100%{opacity:1;transform:translate(-50%,-50%) translateY(0);filter:blur(0) saturate(.82)}}
@keyframes breathe{from{opacity:.3;transform:scale(.95)}to{opacity:.6;transform:scale(1.1)}}
@keyframes card-float{0%{transform:translate3d(0,-8px,0) rotateZ(-1deg)}45%{transform:translate3d(5px,7px,0) rotateZ(1deg)}100%{transform:translate3d(-4px,-2px,0) rotateZ(-2deg)}}
@keyframes card-hover{0%{transform:translate3d(0,-4px,0) rotateZ(-1deg)}35%{transform:translate3d(1px,3px,0) rotateZ(1deg)}70%{transform:translate3d(-2px,-2px,0) rotateZ(-1deg)}100%{transform:translate3d(2px,2px,0) rotateZ(1deg)}}

@keyframes flip-back{from{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}

@media(min-height:850px){main{padding-top:25px}.carousel-stage{min-height:760px}.deck-navigation{top:730px}}
@media(max-width:800px){.site-header{height:78px;padding:0 26px}}
@media(max-width:480px){.site-header{height:72px;padding:0 21px}.brand{font-size:10px;letter-spacing:4px}.brand svg{width:25px;height:25px}main{padding-top:22px}.deck-ring{width:540px;height:540px;left:calc(50% - 270px);top:13px}.workbench{padding:22px 20px 24px;max-height:calc(100dvh - 28px)}textarea{height:150px}.workspace-heading{margin-bottom:20px}}
@media(max-height:650px){.workbench{overflow-y:auto;overflow-x:clip}.deck-navigation{top:670px}main{padding-top:0}}
/* The rotating face must not reveal a solid button slab when it turns edge-on. */

.card-inner{border-radius:11px;box-shadow:0 25px 65px #0009,0 0 0 1px #b8a38530}
.card-inner::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid #ddc69630;background:linear-gradient(120deg,#e2d6c50c,transparent 40%,#24203312);pointer-events:none}

.deck-card:hover .card-inner,.deck-card.is-hovered .card-inner{box-shadow:0 25px 70px #000b,0 0 45px #c2a67535}
/* The full 22-card Major Arcana is kept small and evenly scattered around the two active cards. */

.magician-card{--float-duration:8.6s;--float-delay:-2s;--spin-duration:24s}
.empress-card{--float-duration:9.2s;--float-delay:-5s;--spin-duration:25s}
.emperor-card{--float-duration:8.4s;--float-delay:-4s;--spin-duration:22s}
.hierophant-card{--float-duration:10s;--float-delay:-6s;--spin-duration:27s}
.lovers-card{--float-duration:8.9s;--float-delay:-1s;--spin-duration:23s}
.chariot-card{--float-duration:9.8s;--float-delay:-7s;--spin-duration:26s}
.justice-card{--float-duration:9.4s;--float-delay:-3s;--spin-duration:24s}
.wheel-card{--float-duration:8.7s;--float-delay:-5s;--spin-duration:28s}
.strength-card{--float-duration:9.6s;--float-delay:-2s;--spin-duration:22s}
.temperance-card{--float-duration:8.5s;--float-delay:-6s;--spin-duration:25s}
.tower-card{--float-duration:9.1s;--float-delay:-3s;--spin-duration:23s}
.sun-card{--float-duration:10.2s;--float-delay:-8s;--spin-duration:27s}
.judgement-card{--float-duration:9.3s;--float-delay:-4s;--spin-duration:26s}
.world-card{--float-duration:8.8s;--float-delay:-6s;--spin-duration:24s}

/* Hover freezes the spin, eases the face upright, and lets the glow breathe from the card. */

.deck-card:hover::before,.deck-card.is-hovered::before{animation:card-emission 3s ease-in-out infinite alternate}
@keyframes card-emission{from{opacity:.55;transform:scale(.9)}to{opacity:.85;transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* Collision-safe spread: rows have enough vertical pitch for the tall card ratio. */

@media(max-height:650px){.deck-navigation{top:670px}}
@media(max-width:800px){.carousel-stage{min-height:1000px}.deck-navigation{top:970px}}
@media(max-width:480px){.carousel-stage{min-height:1330px}.deck-navigation{top:1300px}}

/* Keep the input face narrow while discarded characters turn to ash. */
.word-field{position:relative}
textarea,.word-field input{font-family:"Barlow Condensed Input",var(--sans);font-size:20px;font-weight:300;letter-spacing:.08em}
.input-ash{position:absolute;z-index:2;max-width:110px;overflow:hidden;white-space:pre;pointer-events:none;color:#d7b98d;font:300 20px/1 "Barlow Condensed Input",var(--sans);text-shadow:0 0 8px #d4ab6f88;animation:input-ash .72s ease-out forwards}
@keyframes input-ash{0%{opacity:.9;filter:blur(0);transform:translateY(0) scale(1)}45%{opacity:.7;filter:blur(1px);transform:translate(4px,-5px) scale(1.08)}100%{opacity:0;filter:blur(7px);transform:translate(13px,-17px) scale(.7)}}

/* Fade the form and its ash particles on the same timeline. */
@keyframes ritual-dissolve{
  0%{opacity:1;filter:blur(0);transform:translateZ(0) scale(1)}
  24%{opacity:.94;filter:blur(.2px);transform:translateZ(0) scale(.998)}
  62%{opacity:.5;filter:blur(1.3px);transform:translateZ(0) scale(.985)}
  100%{opacity:0;filter:blur(5px);transform:translateZ(0) scale(.96)}
}