*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#070c18;color:#f4f1ec;font:16px/1.6 system-ui}a{color:inherit;text-decoration:none}.realm-top{max-width:1200px;margin:auto;display:flex;align-items:center;gap:24px;padding:20px 24px;border-bottom:1px solid #ffffff20}.realm-top .brand{margin-right:auto;font:32px Georgia;letter-spacing:.14em;color:#e4c582}.realm-top>a:not(.brand){font-size:14px}.realm-gateway{max-width:1160px;margin:0 auto;padding:24px 0 40px;text-align:center}.realm-kicker{font:20px/1.4 Georgia;margin:0 0 8px;color:#dbd6e4}.realm-gateway h1{font:clamp(34px,6vw,60px)/1.12 Georgia;margin:0}.realm-gateway h1 em{font-style:normal;color:#e4c582}.choose{color:#b9c4d5;margin:12px 0 24px}.realm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.realm-door{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;flex-direction:column;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:18px;background:var(--realm-dark);padding:18px 12px 22px;transition:transform .25s,border-color .25s;min-width:0}.realm-door:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent,var(--realm-dark) 85%),var(--realm-scene) center/cover;opacity:.38}.realm-door canvas{display:block;width:auto;max-width:100%;height:240px;filter:drop-shadow(0 12px 15px #0009);transition:transform .3s}.realm-door h2{font:clamp(20px,2.2vw,28px)/1.2 Georgia;margin:15px 0 6px;color:var(--accent)}.realm-door p{font-size:14px;margin:0 0 12px;color:#e2e4ed}.realm-door span{font-size:14px;font-weight:650;color:var(--accent)}.realm-door:hover{transform:translateY(-4px);border-color:var(--accent)}.realm-door:hover canvas{transform:scale(1.035)}.realm-note{font-size:13px;max-width:760px;margin:24px auto;color:#aeb8ca;text-align:center}.realm-destination{max-width:1000px;margin:0 auto;padding:14px 20px 40px;background:radial-gradient(ellipse at top,var(--realm-dark),transparent 75%)}.destination-title{text-align:center}.destination-title p{color:var(--accent);letter-spacing:.15em;font-size:12px;margin:0}.destination-title h2{font:28px Georgia;margin:4px 0 14px}.realm-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:12px}.realm-nav a{font-size:14px;padding:7px 13px;border:1px solid #ffffff30;border-radius:24px}.realm-nav a[aria-current=page]{color:var(--accent);border-color:var(--accent);background:var(--realm-dark)}.realm-stage{max-width:560px;margin:auto;border:1px solid #ffffff24;border-radius:16px;background:var(--realm-dark);padding:0 12px}.realm-stage sig-rotating-card{display:block;height:auto}.realm-story{max-width:620px;text-align:center;margin:28px auto}.realm-story h2{font:36px/1.15 Georgia;color:var(--accent);margin:0 0 14px}.realm-story p{color:#d5dcea;font-size:18px}.realm-story a,.realm-story button{display:inline-block;margin:8px;padding:12px 20px;border:1px solid var(--accent);border-radius:24px;background:transparent;color:var(--accent);font:600 15px system-ui;cursor:pointer}.realm-story a{background:var(--accent);color:#101520}.back-realms{display:block;text-align:center;color:var(--accent)}footer{text-align:center;padding:28px 16px;border-top:1px solid #ffffff20;color:#b7c2d4;font-size:14px}a:focus-visible,button:focus-visible{outline:3px solid #fff;outline-offset:4px}@media(max-width:760px){.realm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.realm-gateway{padding:18px 12px 28px}.realm-door{padding:12px 7px 16px;border-radius:12px}.realm-door canvas{height:185px}.realm-door h2{font-size:20px}.realm-door p{display:none}.realm-door span{font-size:13px}.realm-top{padding:15px 16px;gap:14px}.realm-top>a:not(.brand){font-size:13px}.realm-destination{padding:12px 12px 28px}.realm-nav{gap:5px}.realm-nav a{padding:6px 9px;font-size:13px}.realm-story h2{font-size:30px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.realm-stage{--realm-stage-height:calc(100svh - 390px)}

@media(prefers-reduced-motion:no-preference){
.realm-grid.realm-selected .realm-door:not(.entering){opacity:.4;transition:opacity .35s}
.realm-door.entering{z-index:2;animation:enter-realm .42s ease-in both;pointer-events:none}
.realm-door.entering canvas{transform:scale(1.08);transition:transform .42s ease-in}
@keyframes enter-realm{from{transform:scale(1);box-shadow:0 0 0 transparent}to{transform:scale(1.035);border-color:var(--accent);box-shadow:0 0 32px color-mix(in srgb,var(--accent) 38%,transparent)}}
}
