@font-face{font-family:Sora;src:url('/holding/sora.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/holding/public-sans.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/holding/geist-mono.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--paper:#f3f5f2;--muted:#b2b2b2;--volt:#e0ff4f;--ink:#141414}
*{box-sizing:border-box}
body{margin:0;padding:20px;background:#080808;color:var(--paper);font-family:'Public Sans',sans-serif;min-height:100svh;display:grid;place-items:center}
.holding-shell{position:relative;z-index:1;width:min(1120px,100%);border:1px solid #3b3b3b;display:grid;min-width:0}
.message{position:relative;isolation:isolate;background:var(--ink);padding:28px 24px;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.brand-row{display:flex;justify-content:space-between;align-items:center;gap:20px}
.brand-row img{display:block;width:146px;max-width:calc(100% - 100px);height:auto}
.eyebrow{font:500 9px/1.7 'Geist Mono',monospace;letter-spacing:1px}
.brand-row .eyebrow{color:var(--muted);font-size:8px;max-width:90px;text-align:right}
.message-body{padding:54px 0 44px;max-width:430px}
.intro-rule{display:block;width:24px;height:1px;background:#B7F34A;opacity:.6;margin-bottom:23px}
h1{font-family:Sora,sans-serif;font-size:clamp(30px,6vw,58px);font-weight:350;line-height:1.15;letter-spacing:-1.5px;margin:0 0 24px}
h1 strong{font-weight:650}
.description{font-size:clamp(16px,1.3vw,17px);line-height:1.75;max-width:330px;margin:0;color:var(--paper)}
.editorial-note{font-size:12px;line-height:1.8;color:var(--muted);margin:28px 0 0}
footer{display:flex;justify-content:space-between;gap:16px;margin-top:auto;padding-top:20px;color:#a3a3a3;font:8px/16px 'Geist Mono',monospace;letter-spacing:.4px}
footer span:last-child{text-align:right}
.visual{isolation:isolate;min-width:0;position:relative;overflow:hidden;background:#303030;min-height:430px;padding:26px;display:flex;flex-direction:column;justify-content:space-between}
.artwork,.art-frame{position:absolute;inset:0;width:100%;height:100%}
.art-frame{object-fit:cover;object-position:50% 38%;opacity:0;transition:opacity 3s ease-in-out}
.art-frame.is-active{opacity:1}
.artwork::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.32);pointer-events:none}
.visual-top,.visual-bottom{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:20px}
.visual-top .eyebrow{font-size:8px;color:#bcbcbc}
.visual-bottom{margin-top:auto}
.visual-bottom p{font-family:Sora,sans-serif;font-size:22px;line-height:1.4;letter-spacing:-.8px;font-weight:350;margin:0}
.visual-bottom strong{font-weight:600}
:focus-visible{outline:2px solid var(--volt);outline-offset:4px}
@media(min-width:640px){body{padding:32px}.message{padding:34px 36px}.message-body{padding:64px 0 54px}.visual{padding:34px;min-height:490px}.brand-row .eyebrow{max-width:none}}
@media(min-width:960px){body{padding:48px 32px}.holding-shell{grid-template-columns:46% 54%;min-height:680px}.message{padding:42px 44px 42px}.message-body{margin:auto 0;padding:70px 0}.visual{padding:42px;min-height:680px}.brand-row .eyebrow{font-size:8px}.description{max-width:320px}}
@media(min-width:1400px){.holding-shell{min-height:720px}.visual{min-height:720px}.message{padding:42px 48px 42px}.message-body{padding:80px 0}}
@media(prefers-reduced-motion:reduce){.art-frame{transition:none}}

/* Elements and alignment from the approved dashboard login. */
.spark{color:var(--volt);font-size:30px;line-height:1}
.orbit{position:absolute;border:1px solid #414141;border-radius:50%;width:760px;height:760px;left:-270px;top:-330px;transform:rotate(-25deg) scaleX(.7);z-index:1;background:none;pointer-events:none}
.orbit-two{width:670px;height:670px;left:-210px;top:-280px}
.orbit-three{width:580px;height:580px;left:-150px;top:-230px}
.photo-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;object-fit:contain;z-index:3;pointer-events:none}
.game-detail{width:36px;height:36px;opacity:.75;flex-shrink:0;pointer-events:none}
.ambient-background{position:fixed;inset:0;z-index:0;overflow:hidden;isolation:isolate;pointer-events:none;background:linear-gradient(135deg,#060606 0%,#0c0c0c 50%,#191919 100%)}
.glyph-canvas{display:block;width:100%;height:100%;opacity:.12;pointer-events:none}
.ambient-background::after{content:'';position:absolute;inset:0;pointer-events:none;background:url('/holding/frost-grain.svg') repeat;background-size:100.8px 100.8px;opacity:.24}
@media(min-width:640px){.brand-row,.visual-top{min-height:42px;align-items:center}.brand-row .eyebrow,.visual-top .eyebrow{font-size:9px;line-height:16px;white-space:nowrap}.spark{font-size:42px}.photo-mark{width:150px;height:150px}.game-detail{width:48px;height:48px}.glyph-canvas{opacity:.16}.orbit{top:-170px}.orbit-two{top:-110px}.orbit-three{top:-50px}}
@media(min-width:960px){.visual-bottom p{font-size:28px}}

@media(min-width:768px) and (max-width:959px){.holding-shell{grid-template-columns:46% 54%;min-height:680px}.visual{min-height:680px}.message-body{margin:auto 0;padding:60px 0}.visual-bottom p{font-size:28px}h1{font-size:clamp(32px,4.6vw,44px)}}

/* A two-percent drift while each scene is visible; hold its scale during fade-out. */
.art-frame{transform:scale(1.02);transform-origin:50% 50%}
@media(prefers-reduced-motion:no-preference){.art-frame.is-active{animation:artwork-zoom 8s linear both}}
@keyframes artwork-zoom{from{transform:scale(1)}to{transform:scale(1.02)}}
@media(prefers-reduced-motion:reduce){.art-frame{transform:none;animation:none}}

/* Draw the two official contours once, then reveal the original solid mark. */
.mark-outline{fill:none;stroke:#B7F34A;stroke-width:1.25px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:0}
.mark-fill{opacity:1}
@media(prefers-reduced-motion:no-preference){
 .mark-outline{opacity:1;animation:mark-draw .6s ease-in-out .25s both,mark-outline-retire .4s ease 2.3s forwards}
 .mark-outline-1{animation-duration:1.1s,.4s;animation-delay:.75s,2.3s}
 .mark-fill{animation:mark-fill-in .7s ease-in-out 1.95s both}
 .photo-mark{animation:mark-grow .7s ease-in-out 1.95s both}
}
@keyframes mark-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes mark-fill-in{from{opacity:0}to{opacity:1}}
@keyframes mark-outline-retire{to{opacity:0}}

@keyframes mark-grow{from{transform:translate(-50%,-50%) scale(.94)}to{transform:translate(-50%,-50%) scale(1)}}

/* Complete brand signature and a quiet upper image corner. */
.brand-row .brand-logo{display:block;width:190px;max-width:100%;height:auto;flex-shrink:0}
@media(max-width:639px){.brand-row .brand-logo{width:170px}}
.brand-row,.visual-top{min-height:62px}
.visual-top{justify-content:space-between}
.visual-top .eyebrow{min-width:0;white-space:normal}
.spark{flex-shrink:0}

/* Match the centered reading column used by the dashboard login. */
.message-body{width:100%;max-width:340px;margin-left:auto;margin-right:auto}
@media(min-width:960px){.message{padding-left:48px;padding-right:48px}}
@media(max-width:639px){.message-body{max-width:380px}}