:root{--bg:#101720;--paper:#f8f1e6;--muted:#aeb9c6;--red:#ff4a4f;--orange:#f0ad61;--line:#ffffff20;--max:1280px;color-scheme:dark;font-family:Arial,Helvetica,sans-serif;font-size:16px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:98px}body{margin:0;background:var(--bg);color:var(--paper);line-height:1.6}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:5px}.skip{position:fixed;top:-90px;left:24px;z-index:100;padding:12px 20px;background:var(--paper);color:var(--bg)}.skip:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.navigation{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px);background:#101720f5;border-bottom:1px solid var(--line);position:relative;z-index:5}.brand{display:flex;align-items:center;gap:18px}.brand img{width:112px;height:56px;object-fit:contain}.brand span{font-size:.68rem;line-height:1.45;letter-spacing:.12em;font-weight:700;color:var(--muted)}nav{display:flex;gap:32px;font-size:.9rem;font-weight:700}nav a:hover,.text-link:hover{color:var(--orange)}.nav-download{font-size:.85rem;font-weight:700;border:1px solid #ff858666;padding:11px 18px;border-radius:4px}.nav-download:hover{background:var(--red);color:#101720}
.hero{position:relative;min-height:760px;height:calc(100svh - 88px);max-height:1000px;overflow:hidden;display:flex;align-items:center}.hero-art{position:absolute;width:100%;height:100%;object-fit:cover;object-position:70% center;animation:drift 14s ease-in-out infinite alternate;transform:scale(1.035)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0c141ff5 0%,#0c141fca 27%,#0c141f40 55%,transparent 78%),linear-gradient(0deg,#101720 0%,transparent 25%)}.hero-content{position:relative;z-index:1;margin-left:max(5vw,24px);padding:45px 0 100px;max-width:720px}.eyebrow{font-size:.76rem;font-weight:800;letter-spacing:.13em;display:flex;align-items:center;gap:14px;color:var(--orange)}.beta-tag{display:inline-block;background:var(--red);color:#101720;padding:4px 9px;letter-spacing:.08em;white-space:nowrap;border-radius:2px;font-size:.72rem;font-weight:900}h1,h2,h3,p{margin-top:0}h1{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:clamp(4.4rem,6.6vw,7.4rem);font-weight:900;line-height:.99;letter-spacing:.005em;margin:24px 0 28px;text-shadow:0 6px 0 #080e1790}em{font-style:normal;color:var(--red)}.hero-description{font-size:1.3rem;color:#e5dcd1;line-height:1.6}.hero-actions{display:flex;align-items:center;gap:26px;margin:30px 0 14px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:16px 27px;font-size:.95rem;font-weight:800;border-radius:4px;line-height:1.3;transition:transform .2s,background .2s;cursor:pointer}.primary{color:#151820;background:var(--red);box-shadow:0 5px 0 #a32735}.button:hover{transform:translateY(-3px)}.primary:hover{background:#ff6b67}.text-link{font-size:.9rem;font-weight:700;border-bottom:1px solid #ffffff50;padding-bottom:3px}.download-meta{font-size:.73rem;letter-spacing:.075em;color:var(--muted);margin:24px 0 0}.download-meta span{margin:0 8px;color:#e09758}.hero-sticker{position:absolute;right:5vw;bottom:110px;background:var(--orange);color:#141a23;transform:rotate(-6deg);padding:17px 24px;border:3px solid #121720;box-shadow:7px 7px 0 #101720;line-height:1.4;font-size:.74rem;font-weight:900;display:grid;letter-spacing:.04em}.hero-sticker strong{font-size:1.2rem}.hero-bottom{position:absolute;bottom:26px;left:5vw;right:5vw;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff35;padding-top:20px;font-size:.72rem;letter-spacing:.1em;color:var(--muted)}.hero-bottom a{letter-spacing:0;color:var(--paper)}
.section{max-width:var(--max);margin:0 auto;padding:100px 32px;scroll-margin-top:20px}.section-number{color:var(--orange);font-size:.76rem;font-weight:800;letter-spacing:.12em;margin-bottom:24px}h2{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:clamp(2.5rem,4.3vw,4rem);font-weight:900;line-height:1.06;letter-spacing:.01em;margin-bottom:28px}h2 span{color:var(--muted)}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.intro-grid p{color:var(--muted);font-size:1.05rem}.intro-grid .lead{color:var(--paper);font-size:1.16rem}.how-to{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:58px;border-top:1px solid var(--line);padding-top:38px}.step{font-family:Impact,Arial,sans-serif;font-size:2.8rem;color:var(--red);line-height:1}h3{font-size:1.3rem;line-height:1.25;margin:20px 0 12px}.how-to p{color:var(--muted);font-size:1rem}.rooms{border-top:1px solid var(--line)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:25px}.section-heading>p{color:var(--muted);font-size:.95rem;padding-bottom:13px}.room-viewer{display:grid;grid-template-columns:1.7fr 1fr;border:1px solid var(--line);background:#17222d}.room-picture{position:relative;min-height:400px;overflow:hidden}.room-picture>img{width:100%;height:100%;object-fit:cover;transition:opacity .18s}.room-stamp{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#080f18ee);padding:70px 28px 28px;pointer-events:none}.room-stamp span{font-size:.7rem;letter-spacing:.12em;color:var(--orange);display:block}.room-stamp strong{font-size:1.8rem;line-height:1.2}.room-detail{padding:32px;display:flex;flex-direction:column;justify-content:center}.room-values{display:flex;gap:30px;padding:15px 0 24px;border-bottom:1px solid var(--line);margin-bottom:24px}.room-values span{display:block;font-size:.64rem;letter-spacing:.1em;color:var(--muted)}.room-values strong{font-size:1.7rem;white-space:nowrap;line-height:1.6}.room-values small{font-weight:400;font-size:.9rem;color:var(--muted)}.room-detail>p:not(.eyebrow){font-size:.95rem;color:var(--muted)}.room-selector{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:15px 0}.room-selector button{background:#0f1720;border:1px solid #ffffff28;border-radius:3px;color:var(--paper);padding:10px 0;cursor:pointer;font-weight:700;min-height:44px}.room-selector button:hover{border-color:var(--orange)}.room-selector button.active{background:var(--red);color:#101720;border-color:var(--red)}.room-detail .room-note{font-size:.78rem!important;margin-bottom:0}.modes{padding-top:40px}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;border:1px solid var(--line)}.mode-grid article{padding:36px;position:relative;overflow:hidden;border-right:1px solid var(--line);display:flex;flex-direction:column}.mode-grid article:last-child{border-right:0}.mode-grid .mode-campaign{background:#ff4a4f0c}.mode-index{position:absolute;right:24px;top:0;font-family:Impact,Arial,sans-serif;font-size:6rem;color:#ffffff06;line-height:1.4}.mode-grid h3{font-size:1.6rem;margin-top:18px}.mode-grid p:not(.eyebrow){color:var(--muted);font-size:1rem}.mode-foot{color:var(--orange);font-size:.68rem;letter-spacing:.08em;margin-top:auto;padding-top:25px}
.download-section{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:100px;border-top:1px solid var(--line)}.download-copy h2{font-size:clamp(3.3rem,5vw,5.2rem)}.download-copy>p:last-child{max-width:410px;color:var(--muted);font-size:1.08rem}.download-ticket{padding:38px;background:var(--paper);color:#14202c;position:relative;box-shadow:12px 12px 0 #ff4a4f33;transform:rotate(1deg)}.ticket-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:22px;border-bottom:2px dashed #14202c40}.ticket-head img{width:150px;height:75px;object-fit:contain;background:#101720;padding:12px}.download-ticket dl{margin:20px 0 28px}.download-ticket dl div{display:flex;justify-content:space-between;gap:15px;margin:9px 0;font-size:.9rem}.download-ticket dt{color:#536271}.download-ticket dd{margin:0;font-weight:800;text-align:right}.download-ticket .button{width:100%;margin-bottom:20px}.download-ticket>p{font-size:.85rem;text-align:center;color:#536271;line-height:1.6}.ticket-note{padding-top:20px;border-top:2px dashed #14202c40;font-size:.82rem;line-height:1.6}.bottom-grid{border-top:1px solid var(--line);display:grid;grid-template-columns:1.3fr 1fr;gap:85px;padding-bottom:110px}.faq h2{font-size:3rem}.faq details{border-bottom:1px solid var(--line);padding:18px 0}.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:22px;font-size:1rem;font-weight:700}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:'+';font-size:1.35rem;color:var(--red);line-height:1}.faq details[open] summary::after{content:'−'}.faq details p{margin:14px 24px 0 0;font-size:.95rem;color:var(--muted)}.community{align-self:center;padding:42px;background:linear-gradient(135deg,#363d8c,#222745);border:1px solid #929aff44;position:relative}.community>img{margin-bottom:30px}.community .eyebrow{color:#c2c5ff;font-size:.69rem}.community h2{font-size:2.8rem}.community p:not(.eyebrow){color:#d0d3ef;font-size:1rem}.discord-button{background:#7780ff;color:#0e1732;box-shadow:0 5px 0 #454cb3;width:100%;margin-top:12px}.discord-button:hover{background:#9399ff}.community>span{display:block;font-size:.62rem;letter-spacing:.09em;color:#c0c5ec;margin-top:24px}.footer{max-width:var(--max);margin:auto;padding:34px 32px 40px;border-top:1px solid var(--line);display:flex;align-items:center;gap:32px;font-size:.8rem;color:var(--muted)}.footer p{margin:0;flex:1}.footer strong{color:var(--paper)}.footer img{width:90px;height:45px;object-fit:contain}.footer>span{font-size:.67rem;letter-spacing:.06em}.footer a:hover{color:var(--orange)}
.brand img,.footer img{mix-blend-mode:screen}
@keyframes drift{from{transform:scale(1.035) translate(0,0)}to{transform:scale(1.035) translate(-6px,3px)}}
@media(min-width:1600px){.hero-content{margin-left:max(5vw,calc((100vw - 1416px)/2))}}
@media(max-width:1050px){.hero{min-height:690px}.hero-content{max-width:570px}h1{font-size:5.2rem}.hero-sticker{right:4vw;bottom:100px}.section{padding:75px 28px}.intro-grid{gap:45px}.room-viewer{grid-template-columns:1.3fr 1fr}.room-detail{padding:24px}.room-values{gap:20px}.room-values strong{font-size:1.35rem}.room-picture{min-height:450px}.mode-grid article{padding:26px}.download-section{gap:55px}.bottom-grid{gap:45px}.community{padding:30px}}
@media(max-width:760px){.navigation{height:74px;padding:0 20px}.brand span{display:none}.brand img{width:94px;height:47px}nav{display:none}.nav-download{font-size:.75rem;padding:10px 12px}.hero{min-height:820px;max-height:none;height:auto;align-items:start}.hero-art{height:100%;object-position:68% center;opacity:.65}.hero-shade{background:linear-gradient(90deg,#0c141fc9,#0c141f40),linear-gradient(0deg,#101720 0%,#10172077 40%,#10172050 100%)}.hero-content{margin-left:24px;margin-right:24px;padding:65px 0 240px;max-width:none}.hero-content>.eyebrow{font-size:.62rem;gap:10px}h1{font-size:clamp(3.9rem,12.5vw,6rem);margin-top:28px}.hero-description{font-size:1.12rem}.hero-actions{align-items:start;flex-direction:column;gap:20px}.hero-sticker{bottom:110px;right:28px;font-size:.65rem;padding:12px 16px}.hero-sticker strong{font-size:1rem}.hero-bottom{left:24px;right:24px;bottom:25px;display:block;font-size:.64rem}.hero-bottom a{display:block;margin-top:8px;font-size:.8rem}.section{padding:60px 24px}.intro-grid{grid-template-columns:1fr;gap:8px}.intro-grid h2{font-size:3rem}.how-to{grid-template-columns:1fr;gap:24px;margin-top:35px;padding-top:30px}.how-to article{display:grid;grid-template-columns:48px 1fr;column-gap:20px}.how-to h3{margin:2px 0 10px}.how-to p{grid-column:2;margin:0}.step{grid-row:1/3;font-size:2.3rem}.section-heading{display:block;margin-bottom:24px}.section-heading h2{font-size:2.6rem}.section-heading>p{padding:0}.room-viewer{grid-template-columns:1fr}.room-picture{min-height:0;aspect-ratio:16/9}.room-stamp{padding:40px 20px 18px}.room-stamp strong{font-size:1.35rem}.room-detail{padding:24px}.room-values{justify-content:space-between}.room-values strong{font-size:1.7rem}.mode-grid{grid-template-columns:1fr}.mode-grid article{border-right:0;border-bottom:1px solid var(--line);padding:30px}.mode-grid article:last-child{border-bottom:0}.download-section{grid-template-columns:1fr;gap:30px}.download-copy h2{font-size:3.8rem}.download-ticket{padding:28px;transform:none;box-shadow:7px 7px 0 #ff4a4f33}.bottom-grid{grid-template-columns:1fr;gap:45px}.community{padding:32px}.footer{padding:28px 24px;gap:20px;flex-wrap:wrap}.footer p{flex:1;font-size:.75rem}.footer>span{flex-basis:100%;text-align:right}.footer>a:not(:first-child){font-size:.85rem}}
/* Transparent surfaces carry the comic artwork throughout the page. */
body::before{content:'';position:fixed;inset:0;background:linear-gradient(#0c141fbf,#0c141fdc),url('assets/hero.png') 68% center/cover no-repeat;z-index:-1;pointer-events:none}
.navigation{background:#10172050;backdrop-filter:blur(14px)}
.hero-shade{background:linear-gradient(90deg,#0c141fd4 0%,#0c141f99 27%,#0c141f20 55%,transparent 78%),linear-gradient(0deg,#10172080,transparent 25%)}
.room-viewer{background:#17222d55;backdrop-filter:blur(12px)}
.room-selector button{background:#0f172055}.room-selector button.active{background:#ff4a4f60;color:var(--paper)}
.mode-grid{background:#10172030;backdrop-filter:blur(12px)}.mode-grid .mode-campaign{background:#ff4a4f16}
.download-ticket{background:#14202c55;color:var(--paper);border:1px solid #ffffff35;backdrop-filter:blur(16px);box-shadow:12px 12px 0 #ff4a4f16}
.ticket-head,.ticket-note{border-color:#ffffff35}.ticket-head img{background:transparent;mix-blend-mode:screen}
.download-ticket dt,.download-ticket>p{color:var(--muted)}
.community{background:linear-gradient(135deg,#5865f244,#22274566);backdrop-filter:blur(16px)}
.primary{background:#ff4a4f70;color:var(--paper);border:1px solid #ff858688;box-shadow:0 5px 0 #a3273555}.primary:hover{background:#ff4a4fa0}
.discord-button{background:#7780ff66;color:var(--paper);border:1px solid #a7adff80;box-shadow:0 5px 0 #454cb355}.discord-button:hover{background:#7780ff99}
.hero-sticker{background:#f0ad61bf;backdrop-filter:blur(8px);box-shadow:7px 7px 0 #10172060}
@media(max-width:760px){.hero-shade{background:linear-gradient(90deg,#0c141fa0,#0c141f20),linear-gradient(0deg,#10172080 0%,#10172050 40%,#10172040 100%)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.button:hover{transform:none}}
