/* Official studio presentation. The countdown keeps its original tokens and rules. */
:root { --studio-bg:oklch(.145 .003 80); --studio-surface:oklch(.19 .004 80); --studio-ink:oklch(.94 .015 85); --studio-muted:oklch(.72 .012 85); --studio-gold:oklch(.76 .085 82); --studio-line:oklch(.94 .015 85 / .18); --studio-shadow:oklch(.05 0 0 / .6); --studio-display:"Arial Narrow",Impact,Haettenschweiler,sans-serif; }
body { background:var(--studio-bg); }
.ambient { display:none; }
.app-header { height:96px; padding:12px 3%; gap:24px; background:var(--studio-bg); border-color:var(--studio-line); backdrop-filter:none; }
.brand-logo { width:60px; height:60px; border-radius:0; box-shadow:none; }
.brand-copy strong { font-size:21px; letter-spacing:0; color:var(--studio-ink); }
.brand-copy small { font-size:9px; letter-spacing:0; color:var(--studio-muted); }
.studio-nav { display:flex; justify-content:center; align-items:center; gap:20px; margin-left:auto; }
.studio-nav .nav-item { display:block; flex:none; min-height:44px; padding:12px 0; border-radius:0; font-size:12px; font-weight:650; color:var(--studio-muted); border-bottom:1px solid transparent; }
.studio-nav .nav-item.active { color:var(--studio-gold); border-color:var(--studio-gold); background:none; box-shadow:none; }
.studio-nav .nav-item:hover { color:var(--studio-ink); }
.install-button { border-radius:2px; color:var(--studio-ink); border-color:var(--studio-line); background:none; flex-shrink:0; font-size:12px; font-weight:600; }
.menu-toggle { display:none; }
main { width:min(100%,1440px); padding:0 48px 90px; }
.screen { color:var(--studio-ink); }
/* Never select countdown children with the shared typographic system. */
.screen > :not(.countdown-panel) :is(h1,h2,h3,h4), .screen > .page-intro h1 { letter-spacing:0; }
.premiere-hero { min-height:640px; margin-top:0; margin-inline:-48px; border:0; border-radius:0; box-shadow:none; background:var(--studio-bg); }
.premiere-hero::before,.premiere-orbit { display:none; }
.premiere-art { inset:0; }
.premiere-art img { object-fit:contain; object-position:right center; filter:none; }
.premiere-art::after { background:linear-gradient(90deg,var(--studio-bg) 0%,var(--studio-bg) 22%,transparent 75%); }
.premiere-copy { min-height:640px; width:68%; padding:48px 7%; justify-content:center; }
.premiere-copy .eyebrow { margin-bottom:28px; letter-spacing:0; font-size:11px; color:var(--studio-gold); }
.eyebrow span { display:none; }
.release-chip { padding:0 0 9px; border:0; border-bottom:1px solid var(--studio-line); border-radius:0; background:none; color:var(--studio-muted); letter-spacing:0; }
.premiere-copy h1 { font-size:112px; font-style:normal; line-height:.88; transform:none; text-shadow:none; letter-spacing:0; color:var(--studio-ink); }
.premiere-copy h1 em { color:var(--studio-gold); -webkit-text-stroke:0; filter:none; }
.hero-subtitle { color:var(--studio-gold); font-size:13px; letter-spacing:0; margin-top:20px; }
.hero-quote { color:var(--studio-ink); font-family:inherit; font-size:17px; font-style:normal; }
.release-date { border-color:var(--studio-gold); margin-top:22px; }
.release-date strong,.release-date span { letter-spacing:0; }
.comic-spotlight { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; gap:10%; margin-top:90px; padding:60px 6%; border-top:1px solid var(--studio-line); border-bottom:1px solid var(--studio-line); }
.comic-cover-link { max-width:340px; padding:0; border:0; background:none; cursor:pointer; transform:rotate(-3deg); box-shadow:14px 16px 30px var(--studio-shadow); }
.comic-cover-link img { width:100%; height:auto; }
.comic-spotlight-copy h2 { margin:18px 0; font-family:var(--studio-display); font-size:76px; line-height:1; }
.comic-spotlight-copy h2 span { display:block; margin-top:12px; font-family:inherit; font-size:29px; font-weight:500; }
.comic-spotlight-copy blockquote { margin:22px 0; font-size:23px; color:var(--studio-gold); }
.comic-spotlight-copy p { max-width:440px; line-height:1.7; color:var(--studio-muted); }
.comic-byline { font-size:13px; line-height:1.7; color:var(--studio-gold); }
.section-kicker { color:var(--studio-gold); font-size:11px; font-weight:650; letter-spacing:0; }
.section-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:20px; }
.section-heading h2 { font-size:36px; font-weight:500; }
.content-section,.film-home-heading,.editorial-game { margin-top:80px; }
.text-button { color:var(--studio-gold); border-color:var(--studio-line); font-size:14px; font-weight:600; min-height:44px; }
:is(.primary-button,.secondary-button,.film-button) { border-radius:2px; padding:13px 22px; font-size:14px; font-weight:650; letter-spacing:0; box-shadow:none; }
.primary-button,.film-button,.untold-spotlight .film-button { color:var(--studio-bg); background:var(--studio-gold); border-color:var(--studio-gold); }
.secondary-button { color:var(--studio-ink); background:none; border-color:var(--studio-line); }
.film-spotlight,.untold-spotlight { padding:40px 0; margin-top:0; border:0; border-bottom:1px solid var(--studio-line); border-radius:0; background:none; }
.film-eyebrow,.untold-spotlight .film-eyebrow,.untold-page .film-eyebrow { color:var(--studio-gold); font-size:12px; letter-spacing:0; }
.film-spotlight h2,.untold-spotlight h2 { color:var(--studio-ink); font-family:var(--studio-display); font-size:52px; font-weight:700; letter-spacing:0; }
.film-spotlight h2 span,.film-debut-mark,.untold-spotlight .film-debut-mark { color:var(--studio-gold); border-color:var(--studio-line); letter-spacing:0; }
.film-debut-mark strong { font-family:var(--studio-display); font-size:80px; }
.film-spotlight-description { color:var(--studio-muted); }
.story-rail { grid-auto-columns:minmax(265px,30%); gap:24px; }
.story-card,.story-grid .story-card { min-height:320px; border:0; border-top:1px solid var(--studio-line); border-bottom:1px solid var(--studio-line); border-radius:0; background:var(--studio-surface); padding:24px; }
.story-card::before,.story-card::after { display:none; }
.story-card:hover { border-color:var(--studio-gold); transform:translateY(-3px); }
.collection-pill { padding:0; border:0; border-radius:0; color:var(--studio-gold); background:none; letter-spacing:0; font-size:10px; }
.story-icon { filter:none; }
.story-card h3 { font-size:24px; line-height:1.15; font-weight:550; color:var(--studio-ink); }
.story-card .story-subtitle { font-family:inherit; color:var(--studio-gold); font-size:14px; }
.story-card .story-summary { font-size:14px; color:var(--studio-muted); }
.story-card .read-story { color:var(--studio-ink); letter-spacing:0; font-size:11px; }
.mayavanam-preview { border:0; border-radius:0; margin-top:80px; min-height:480px; }
.mayavanam-copy strong { font-family:var(--studio-display); font-size:64px; letter-spacing:0; }
.mayavanam-copy em { font-family:inherit; font-style:normal; }
.home-stats { margin-top:0; border:0; border-radius:0; border-bottom:1px solid var(--studio-line); background:none; }
.home-stats div { background:none; padding:30px 8px; }
.home-stats strong { color:var(--studio-gold); font-family:var(--studio-display); font-size:40px; }
.home-stats span { color:var(--studio-muted); font-size:12px; }
.game-home-link { margin:24px 0 0; padding:28px; border:1px solid var(--studio-line); border-radius:0; background:var(--studio-surface); }
.game-home-link img { width:70px; height:90px; border-radius:0; object-fit:contain; }
.page-intro { padding:64px 0 40px; border-bottom:1px solid var(--studio-line); margin-bottom:36px; }
.page-intro h1 { font-family:var(--studio-display); font-size:72px; font-weight:600; line-height:1.08; }
.page-intro p { color:var(--studio-muted); font-size:17px; }
.search-wrap input { background:var(--studio-surface); border-radius:2px; border-color:var(--studio-line); font-size:16px; }
.filter-chip,.gallery-links button { border-radius:2px; background:none; color:var(--studio-muted); border-color:var(--studio-line); min-height:44px; }
.filter-chip.active { background:var(--studio-gold); color:var(--studio-bg); border-color:var(--studio-gold); }
.story-grid { gap:24px; }
.character-layout { grid-template-columns:minmax(0,1fr); gap:48px; }
.character-side,.villain-side,.defense-side { padding:0; border:0; border-radius:0; background:none; }
.character-side-header { padding-bottom:20px; border-color:var(--studio-line); }
.character-side-mark,.villain-side .character-side-mark,.defense-side .character-side-mark { color:var(--studio-gold); background:none; border:1px solid var(--studio-line); border-radius:0; }
.character-grid,.defense-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.character-card { border-radius:2px; background:var(--studio-surface); border-color:var(--studio-line); box-shadow:none; }
.character-card-copy { min-height:90px; padding:20px; }
.character-card-copy strong { font-size:19px; }
.character-rank { border-radius:2px; }
.realm-picture,.realm-gallery-figure { border-radius:2px; border-color:var(--studio-line); }
.realm-intro { padding:60px 0 40px; border:0; border-bottom:1px solid var(--studio-line); border-radius:0; background:none; }
.realm-intro h1 { font-family:var(--studio-display); font-size:76px; color:var(--studio-ink); }
.realm-intro p { color:var(--studio-gold); letter-spacing:0; }
.realm-body p { font-family:inherit; line-height:1.85; font-size:18px; color:var(--studio-muted); }
.realm-body .realm-lead { color:var(--studio-ink); font-size:30px; }
.realm-body blockquote { background:var(--studio-surface); color:var(--studio-ink); border-color:var(--studio-gold); border-radius:0; font-family:inherit; }
.feature-grid article { padding:25px 0; border:0; border-top:1px solid var(--studio-line); border-radius:0; background:none; }
.feature-grid article > span { color:var(--studio-gold); font-family:inherit; }
.creator-hero { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:0 60px; padding:70px 0; text-align:left; }
.creator-emblem { grid-row:span 4; width:100%; max-width:400px; margin:0; align-self:center; aspect-ratio:1.4; border:0; border-radius:0; box-shadow:none; background:none; }
.creator-emblem img { object-fit:contain; }
.creator-hero h1 { font-family:var(--studio-display); font-size:64px; overflow-wrap:anywhere; }
.creator-role { margin:24px 0 0; color:var(--studio-gold); font-family:inherit; font-size:18px; }
.creator-intro { color:var(--studio-muted); }
.creator-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.creator-card,.vision-card { min-height:0; grid-row:auto; padding:30px 0; border:0; border-top:1px solid var(--studio-line); border-radius:0; background:none; }
.creator-card h2 { font-size:36px; }
.creator-card li { border-radius:2px; color:var(--studio-ink); background:none; border-color:var(--studio-line); }
.official-links a { background:none; border:0; border-top:1px solid var(--studio-line); border-radius:0; }
.feedback-form { padding:0; border:0; border-radius:0; background:none; }
.feedback-form :is(select,textarea,input),.rating-row span { border-radius:2px; }
.feedback-form :is(select,textarea,input) { font-size:16px; }
.form-note { text-align:left; font-size:14px; }
.film-title-panel,.untold-title-panel { padding:50px 0; border:0; border-bottom:1px solid var(--studio-line); border-radius:0; background:none; }
.film-title-panel h1,.untold-title-panel h1 { color:var(--studio-ink); font-family:var(--studio-display); font-size:80px; font-weight:700; }
.film-tags li { border-radius:2px; }
.film-cast-card,.film-credits { border-radius:2px; }
.film-credits > div,.untold-page .film-credits > div { background:var(--studio-surface); }
.film-archive-link,.untold-archive-link { border-radius:2px; color:var(--studio-gold); background:var(--studio-surface); border-color:var(--studio-line); }
.film-archive-link strong,.untold-archive-link strong { font-family:inherit; color:var(--studio-ink); letter-spacing:0; }
.game-panel,.game-install { border:0; border-top:1px solid var(--studio-line); border-radius:0; background:none; padding:28px 0; }
.game-layout { gap:60px; }
.game-intro .game-subtitle { font-family:inherit; color:var(--studio-gold); }
.studio-footer { display:grid; grid-template-columns:1.1fr .7fr 1.2fr; gap:40px; padding:56px max(48px,calc((100% - 1344px)/2)) 30px; border-top:1px solid var(--studio-line); color:var(--studio-ink); background:var(--studio-surface); }
.footer-brand { display:flex; align-items:flex-start; gap:20px; }
.footer-brand img { flex-shrink:0; object-fit:contain; }
.footer-brand strong { font-size:19px; }
.footer-brand p { color:var(--studio-muted); font-size:13px; line-height:1.8; }
.studio-footer nav { display:grid; align-content:start; justify-items:start; }
.footer-contact { display:grid; align-content:start; gap:20px; min-width:0; }
.footer-contact a { font-size:13px; overflow-wrap:anywhere; text-decoration:none; }
.footer-copyright { grid-column:1/-1; margin:20px 0 0; padding-top:24px; border-top:1px solid var(--studio-line); color:var(--studio-muted); font-size:12px; }
.robot-launcher { bottom:20px; width:50px; height:50px; box-shadow:none; }
.robot-pulse { display:none; }
.toast { bottom:24px; }
.comic-feature { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:start; gap:8%; padding:10px 4% 60px; }
.comic-cover { width:100%; height:auto; max-width:430px; box-shadow:10px 14px 32px var(--studio-shadow); }
.comic-details { padding-top:20px; }
.comic-details h2 { margin:18px 0; font-family:var(--studio-display); font-size:48px; line-height:1.12; }
.comic-details > p { line-height:1.8; color:var(--studio-muted); }
.comic-facts { display:grid; grid-template-columns:1fr 1fr; gap:25px; padding:24px 0; border-block:1px solid var(--studio-line); }
.comic-facts dt { font-size:12px; color:var(--studio-muted); }
.comic-facts dd { margin:8px 0 0; font-size:18px; }
.comic-actions,.comic-pdf-links { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; margin-top:20px; }
.comic-details .comic-caveat { font-size:13px; margin-top:26px; }
.comic-resume-note { font-size:13px; }
.comic-related { padding-top:40px; border-top:1px solid var(--studio-line); }
.comic-related > p { color:var(--studio-muted); line-height:1.7; }
.related-story-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 30px; margin:24px 0; }
.related-story-list button { padding:22px 0; border:0; border-bottom:1px solid var(--studio-line); background:none; color:var(--studio-ink); font-size:17px; text-align:left; cursor:pointer; }
.comic-dialog { width:100%; height:100dvh; max-width:none; max-height:none; margin:0; background:var(--studio-bg); color:var(--studio-ink); }
.comic-reader-shell { height:100%; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; }
.comic-reader-header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; padding:12px 24px; border-bottom:1px solid var(--studio-line); }
.comic-reader-header h2 { margin:4px 0 0; font-size:18px; letter-spacing:0; }
.comic-dialog button { min-width:44px; min-height:44px; border:1px solid var(--studio-line); border-radius:2px; background:var(--studio-surface); color:var(--studio-ink); cursor:pointer; font-size:20px; }
.comic-dialog button:disabled { opacity:.35; cursor:default; }
.comic-dialog button:focus-visible,.menu-toggle:focus-visible,.nav-item:focus-visible { outline:2px solid var(--studio-gold); outline-offset:3px; }
.comic-toolbar { display:flex; justify-content:space-between; gap:12px; padding:10px 24px; border-bottom:1px solid var(--studio-line); }
.comic-pagination,.comic-zoom-controls { display:flex; align-items:center; gap:10px; }
#comicPageInput { width:60px; height:44px; padding:5px; border:1px solid var(--studio-line); color:var(--studio-ink); background:var(--studio-surface); text-align:center; font-size:16px; }
#comicZoomLabel { min-width:70px; font-size:13px; text-align:center; }
.comic-viewport { min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain; touch-action:pan-x pan-y pinch-zoom; padding:20px; background:var(--studio-surface); position:relative; }
.comic-page-stage { --comic-zoom:1; width:calc(100% * var(--comic-zoom)); max-width:none; min-height:1px; margin:0 auto; }
.comic-page-stage img { display:block; width:100%; height:auto; max-width:none; margin:0 auto; }
.comic-viewport.fit-page .comic-page-stage { width:auto; height:100%; }
.comic-viewport.fit-page img { width:auto; height:100%; max-width:100%; object-fit:contain; }
.comic-status { text-align:center; color:var(--studio-muted); font-size:14px; }
.comic-status:empty { display:none; }
.comic-error { text-align:center; padding:30px; }
.comic-error a { display:block; margin-top:20px; }
.comic-reader-footer { display:flex; justify-content:space-between; gap:16px; padding:12px 24px max(12px,env(safe-area-inset-bottom)); border-top:1px solid var(--studio-line); font-size:12px; }
[hidden] { display:none !important; }
@media(min-width:1500px) { .app-header { padding-inline:max(48px,calc((100% - 1440px)/2)); } }
@media(max-width:1200px) { .app-header { gap:16px; } .studio-nav { gap:13px; } .brand-copy { display:none; } .studio-nav .nav-item { font-size:11px; } }
@media(max-width:960px) {
 .app-header { height:80px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; padding:10px 24px; gap:14px; }
 .brand-copy { display:grid; } .brand-logo { width:50px; height:50px; }
 .menu-toggle { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--studio-line); border-radius:2px; color:var(--studio-ink); background:none; font-size:22px; }
 .studio-nav { display:none; position:absolute; top:80px; left:0; right:0; max-height:calc(100dvh - 80px); overflow:auto; padding:16px 24px 25px; background:var(--studio-bg); border-bottom:1px solid var(--studio-line); grid-template-columns:1fr 1fr; gap:0 24px; }
 .studio-nav.is-open { display:grid; } .studio-nav .nav-item { font-size:16px; text-align:left; min-height:52px; }
 main { padding-inline:24px; } .premiere-hero { margin-inline:-24px; min-height:610px; } .premiere-copy { min-height:610px; padding:40px; } .premiere-copy h1 { font-size:96px; }
 .creator-grid { grid-template-columns:1fr; gap:0; } .creator-card ul { margin-top:20px; } .creator-hero { gap:0 30px; } .creator-hero h1 { font-size:48px; }
 .studio-footer { padding:40px 24px 90px; grid-template-columns:1fr 1fr; } .footer-contact { grid-column:1/-1; }
 .comic-details h2 { font-size:36px; } .comic-feature { padding-inline:0; gap:6%; }
 .character-grid,.defense-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:600px) {
 .app-header { padding-inline:16px; gap:10px; } .brand-logo { width:44px; height:44px; } .brand-copy strong { font-size:18px; } .install-button { font-size:11px; padding-inline:10px; }
 main { padding:0 20px 65px; } .premiere-hero { margin-inline:-20px; min-height:665px; } .premiere-art img { object-fit:contain; object-position:center top; } .premiere-art::after { background:linear-gradient(0deg,var(--studio-bg) 1%,var(--studio-bg) 12%,transparent 85%); }
 .premiere-copy { width:100%; min-height:665px; padding:30px 24px; justify-content:flex-end; } .premiere-copy .eyebrow { top:22px; left:24px; font-size:10px; }
 .premiere-copy h1 { font-size:82px; line-height:.88; margin-top:14px; } .hero-subtitle { font-size:12px; } .hero-quote { font-size:15px; margin-top:16px; } .release-date { margin-top:18px; }
 .comic-spotlight { grid-template-columns:1fr; gap:36px; margin-top:60px; padding:40px 0; } .comic-cover-link { width:64%; max-width:270px; justify-self:center; } .comic-spotlight-copy h2 { font-size:60px; } .comic-spotlight-copy h2 span { font-size:25px; } .comic-spotlight-copy blockquote { font-size:21px; }
 .section-heading h2 { font-size:28px; } .section-heading { gap:12px; } .section-heading > .text-button { font-size:12px; }
 .content-section,.film-home-heading,.editorial-game { margin-top:56px; } .film-spotlight { padding:32px 0; } .film-spotlight h2,.untold-spotlight h2 { font-size:40px; } .film-eyebrow { font-size:11px; }
 .story-rail { grid-auto-columns:88%; gap:16px; } .story-grid { grid-template-columns:1fr; }
 .mayavanam-preview { min-height:400px; margin-top:56px; } .mayavanam-copy strong { font-size:45px; }
 .home-stats strong { font-size:32px; } .home-stats span { font-size:11px; }
 .page-intro { padding-top:42px; } .page-intro h1 { font-size:48px; } .page-intro p { font-size:16px; }
 .character-grid,.defense-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .defense-grid { grid-template-columns:1fr; } .character-card-copy { padding:12px; } .character-card-copy strong { font-size:17px; } .character-card-copy small { font-size:12px; }
 .realm-intro { padding-top:40px; } .realm-intro h1 { font-size:48px; } .realm-body p { font-size:16px; } .realm-body .realm-lead { font-size:25px; }
 .creator-hero { grid-template-columns:1fr; padding:40px 0; gap:16px; } .creator-emblem { max-width:240px; grid-row:auto; } .creator-hero h1 { font-size:44px; }
 .film-title-panel h1,.untold-title-panel h1 { font-size:46px; } .film-title-panel { padding-top:25px; }
 .game-home-link { padding:20px; display:grid; grid-template-columns:60px minmax(0,1fr); gap:16px; } .game-home-link b { margin:0; grid-column:2; } .game-home-link img { width:60px; } .game-home-link strong { font-size:16px; } .game-home-link small { font-size:13px; }
 .studio-footer { grid-template-columns:1fr; gap:30px; padding:40px 20px 90px; } .footer-contact { grid-column:auto; } .studio-footer nav { grid-template-columns:1fr 1fr; gap:0 15px; } .footer-copyright { margin-top:0; }
 .comic-feature { grid-template-columns:1fr; gap:24px; } .comic-cover { width:82%; max-width:330px; justify-self:center; } .comic-details h2 { font-size:38px; } .related-story-list { grid-template-columns:1fr; }
 .comic-reader-header { padding:10px 12px; } .comic-reader-header h2 { font-size:15px; } .comic-toolbar { flex-wrap:wrap; justify-content:center; padding:8px; gap:8px; } .comic-pagination,.comic-zoom-controls { gap:8px; } .comic-pagination { width:100%; justify-content:center; } .comic-viewport { padding:8px; } .comic-reader-footer { padding-inline:12px; }
}
@media(prefers-reduced-motion:reduce) { .comic-cover-link { transform:none; } }