:root { color-scheme: dark; font-family: Georgia, "Times New Roman", serif; color: #e4e3cf; background: #080e13; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; height: 100svh; display: grid; place-items: center; }
main { position: relative; display: block; width: min(calc(100% - 24px), calc((100svh - 160px) * 16 / 9), 1920px); margin: 0 auto; }
.tv { position: relative; container-type: inline-size; }
.asset-credits { position: absolute; right: 0; top: 0; width: max-content; margin: 0; color: #858585; text-align: left; font: 12px/1.5 system-ui, sans-serif; }
.asset-credits summary { display: flex; flex-direction: row; align-items: center; gap: 6px; min-height: 44px; padding: 10px 8px; cursor: pointer; list-style: none; }
.asset-credits summary > span:last-child { letter-spacing: .04em; }
.asset-credits summary::-webkit-details-marker { display: none; }
.asset-credits summary:hover { color: #aaa; }
.asset-credits summary:focus-visible { outline: 2px solid #d3f4da; outline-offset: 3px; }
.credits-arrow { display: inline-block; font-size: 19px; transform: rotate(180deg); }
.asset-credits[open] .credits-arrow { transform: none; }
.credit-list { position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 10; width: min(340px, calc(100vw - 96px)); max-height: min(440px, 50svh); overflow: auto; padding: 16px; border: 1px solid #35454c; border-radius: 8px; background: #0d161df5; box-shadow: 0 8px 28px #0009; overflow-wrap: anywhere; }
.asset-credits p { margin: 0; }
.asset-credits p + p { margin-top: 12px; }
.asset-credits a { color: #aaa; text-underline-offset: 3px; }
.stage { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; position: relative; isolation: isolate; background: #060a0f; container-type: inline-size; }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 0 0; }
.stage[data-beat="gameplay"] > img { image-rendering: pixelated; }
#engine-card { --quill-body-font: "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif; --quill-writing-font: Georgia, "Times New Roman", serif; position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.5cqw; background: radial-gradient(ellipse at 50% 80%, #17243a, #0b1020); color: #f4efe6; text-align: center; padding: 3cqw 5cqw; }
#engine-card p { margin: 0; }
.engine-wordmark { margin-top: 1cqw; width: 32cqw; }
.stage .engine-logo { position: static; inset: auto; display: block; width: 100%; height: auto; object-fit: contain; image-rendering: auto; }
.engine-credit { max-width: 88%; color: #b0bac8; font: 400 clamp(10px, 2.1cqw, 30px)/1.3 var(--quill-body-font); }
.engine-description { max-width: 88%; color: #a8d8ff; font: italic 400 clamp(10px, 2.1cqw, 30px)/1.25 var(--quill-writing-font); text-wrap: balance; }
.engine-headline { margin: 0; color: #ff927d; font: 400 clamp(14px, 4.2cqw, 60px)/1.15 var(--quill-writing-font); text-wrap: balance; }
.engine-tagline { position: relative; padding-bottom: max(.3em, 9px); font: 400 clamp(17px, 5.2cqw, 72px)/1.2 var(--quill-writing-font); background: linear-gradient(90deg, #ff927d, #f6d879, #91e0be, #a8d8ff, #c4aaff, #f5a6cd, #ff927d); background-size: 200% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: quill-rainbow-drift 12s linear infinite; }
.engine-tagline::after { position: absolute; bottom: 0; left: 0; right: 0; height: max(.18em, 6px); content: ""; background: linear-gradient(90deg, #ff927d, #f6d879, #91e0be, #a8d8ff, #c4aaff, #f5a6cd); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M-6 4Q0-2 6 4T18 4T30 4' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") repeat-x center / max(.55em, 18px) max(.18em, 6px); }
@keyframes quill-rainbow-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
body:not([data-state="playing"]) .engine-tagline { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .engine-tagline { animation: none; } }
.stage[data-beat="opening-intro"] .closing-road { display: none; }
.stage[data-beat="opening-intro"] .title-url { display: none; position: absolute; bottom: 2cqw; right: 3cqw; z-index: 3; margin: 0; font-size: clamp(11px, 2.2cqw, 30px); text-shadow: 0 2px 4px #000; }
body[data-video-export="true"] .stage[data-beat="opening-intro"] .title-url { display: block; }
.stage[data-beat="opening-intro"] #title-card { justify-content: flex-start; padding-top: 8cqw; }
.stage[data-beat="opening-intro"] #title-card .title-logo { width: 66%; height: 12cqw; object-fit: cover; }
.opening-actor { position: absolute; bottom: 3cqw; height: 18cqw; width: 18cqw; z-index: 2; }
#title-card .opening-actor img { inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.stage[data-beat="title"] #title-card { justify-content: flex-start; padding-top: 5.5cqw; }
.stage[data-beat="title"] #title-card .title-logo { width: 58%; height: 12cqw; object-fit: cover; flex-shrink: 0; z-index: 1; }
.stage[data-beat="title"] .title-url { position: relative; z-index: 1; margin-top: .5cqw; font-size: clamp(14px, 2.7cqw, 38px); }
.stage[data-beat="title"] .title-tagline { position: relative; z-index: 1; margin-top: 1cqw; max-width: 90%; font-size: clamp(11px, 2.55cqw, 36px); }
#title-card .closing-road { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; image-rendering: pixelated; z-index: 0; }
.control-row { position: relative; margin-top: 10px; min-height: 56px; }
.tv-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto; width: max-content; max-width: 100%; padding: 4px 8px; border: 1px solid #35454c; border-bottom: 3px solid #050c10; border-radius: 5px; background: linear-gradient(#1d2b32, #111b22); box-shadow: inset 0 1px #a8beb01c, 0 4px 8px #0008; }
.screen-controls, .transport { display: flex; gap: 4px; }
.transport { order: -1; }
button { position: relative; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border: 1px solid #4c5d62; border-bottom: 3px solid #060e13; border-radius: 3px; color: #c7d2d0; background: linear-gradient(#304048, #1c2a32); font: 500 11px/1 system-ui, sans-serif; box-shadow: inset 0 1px #cad8d018; cursor: pointer; }
button:hover:enabled { background: #3b525a; color: #fff; }
button:focus-visible { outline: 2px solid #d3f4da; outline-offset: 3px; }
button:disabled { cursor: default; opacity: .45; }
button[aria-pressed="true"] { color: #d9efc7; border-color: #698373; border-bottom-color: #060e13; background: #172a2a; box-shadow: inset 0 2px 4px #0008; }
.transport i { display: none; }
#title-card { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: radial-gradient(ellipse, #152633, #060a0f 70%); }
#title-card span { font-size: clamp(28px, 11cqw, 150px); letter-spacing: -.045em; }
#title-card .title-logo { position: relative; inset: auto; width: 72%; height: auto; max-height: 50%; object-fit: contain; image-rendering: pixelated; }
.play-now { position: relative; margin: 0 auto 10px; display: flex; justify-content: center; align-items: center; gap: .4em; width: max-content; max-width: 96%; padding: .55em 1em; border: 2px solid transparent; border-radius: 12px; background: linear-gradient(#080e13, #080e13) padding-box, linear-gradient(110deg, #ff6464, #ffce57, #74f1ac, #65c7ff, #b991ff, #ff6464) border-box; background-size: 100% 100%, 300% 100%; animation: rainbow-border 6s linear infinite; color: #7ab8ff; font: 700 clamp(12px, 1.65cqw, 22px)/1.2 system-ui, sans-serif; text-decoration: none; white-space: nowrap; }
.play-domain { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
@keyframes rainbow-border { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .play-now { animation: none; } }
.title-url { margin-top: .5em; color: #7ab8ff; font: 600 clamp(10px, 2.1cqw, 26px)/1.4 system-ui, sans-serif; text-underline-offset: 4px; }
.title-tagline { margin: .8cqw 0 0; text-align: center; color: #dfb67b; font: italic clamp(10px, 2.2cqw, 30px)/1.3 Georgia, "Times New Roman", serif; text-wrap: balance; }
.play-now:hover, .title-url:hover { color: #b4d8ff; }
.play-now:focus-visible, .title-url:focus-visible { outline: 2px solid #d3f4da; outline-offset: 3px; }
.stage[data-treatment="dream"]::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, transparent 30%, #12101342 67%, #09080bd9 100%); box-shadow: inset 0 0 6cqw 2cqw #09080b66; }
.stage[data-treatment="dream"]::after { content: ""; position: absolute; inset: -10%; z-index: 2; pointer-events: none; opacity: .35; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.9'/%3E%3C/svg%3E"); animation: dream-grain .32s steps(4) infinite; }
@keyframes dream-grain { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2%, 1%); } 50% { transform: translate(1%, -2%); } 75% { transform: translate(-1%, -1%); } }
.stage[data-has-overlay="true"]::before, .stage[data-has-overlay="true"]::after { display: none; }
.dream-overlay { position: absolute; inset: -1% -1% 25% 30%; z-index: 1; overflow: hidden; opacity: .88; pointer-events: none; mask-image: radial-gradient(ellipse at center, #000 36%, #000b 53%, transparent 74%); }
.dream-overlay img { filter: sepia(.13) contrast(1.08); }
.dream-overlay::after { content: ""; position: absolute; inset: -10%; opacity: .52; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); animation: dream-grain .24s steps(3) infinite; }
body:not([data-state="playing"]) .dream-overlay::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .dream-overlay::after { animation: none; } }
.stage[data-treatment="headlights"]::before { content: ""; position: absolute; inset: -20%; z-index: 1; pointer-events: none; background: repeating-linear-gradient(176deg, #ffcf88 0 2.5%, transparent 2.6% 8%); mask-image: linear-gradient(90deg, transparent 15%, black 43%, black 58%, transparent 82%); mix-blend-mode: screen; opacity: var(--headlight-strength, 0); transform: translateX(calc((var(--headlight-progress, 0) - .5) * 60%)); }
@media (prefers-reduced-motion: reduce) { .stage[data-treatment="dream"]::after { animation: none; } }
body:not([data-state="playing"]) .stage[data-treatment="dream"]::after { animation-play-state: paused; }
#title-card small { font: clamp(7px, 1.4cqw, 16px)/2 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .23em; color: #b6a783; }
.caption { position: absolute; z-index: 3; bottom: 6%; left: 6%; right: 6%; text-align: center; text-wrap: balance; font: 600 clamp(13px, 2.3cqw, 30px)/1.4 system-ui, sans-serif; color: #fff; background: #000d; padding: .3em .55em; border-radius: 2px; }
.notice { position: absolute; z-index: 4; left: 8%; right: 8%; top: 50%; transform: translateY(-50%); margin: 0; padding: 12px; background: #000e; color: #fff; text-align: center; font: 14px/1.4 system-ui, sans-serif; }
button svg { display: block; width: 20px; height: 20px; fill: currentColor; margin: 0; flex: 0 0 20px; }
#mute svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
#mute svg path:first-child { fill: currentColor; stroke: none; }
.sound-off, #mute[aria-pressed="true"] .sound-waves { display: none; }
#mute[aria-pressed="true"] .sound-off { display: block; }
#captions span { display: inline-block; border: 1.5px solid currentColor; border-radius: 3px; padding: 3px 2px; font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 700px), (max-height: 550px) { .tv-controls { gap: 7px; padding: 4px; } .transport button { padding: 0 8px; } .transport button span { display: none; } }
@media (max-height: 550px) { .tv-controls { margin-top: 6px; } }
@media (max-width: 500px) { main { width: calc(100% - 16px); } .asset-credits summary { font-size: 10px; } .credit-list { width: calc(100vw - 32px); } .tv-controls { gap: 4px; padding: 3px; } button { min-width: 44px; padding: 0 6px; } .transport button { padding: 0 6px; } }
@container (max-width: 500px) {
  .stage[data-beat="opening-intro"] #title-card { padding-top: 12cqw; }
  .stage[data-beat="opening-intro"] #title-card .title-logo { height: 12cqw; }
  .stage[data-beat="title"] #title-card { padding-top: 7cqw; }
  .stage[data-beat="title"] #title-card .title-logo { width: 64%; height: 12cqw; }
  .stage[data-beat="title"] .title-tagline { max-width: 40ch; line-height: 1.15; }
  .stage[data-beat="title"] .title-url { margin-top: .5cqw; }
}

#title-card .opening-scene { inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; z-index: 0; }
.stage:not([data-beat="opening-intro"]) .opening-scene { display: none; }
.stage[data-beat="opening-intro"] #title-card { background: #000; }
.stage[data-beat="opening-intro"] .title-logo, .stage[data-beat="opening-intro"] .title-tagline { z-index: 1; }

@media (max-width: 700px) { .asset-credits summary > span:last-child { display: none; } .asset-credits summary { padding: 10px 4px; } .control-row { padding-inline: 24px; } }

@media (max-width: 500px) {
  main { width: min(calc(100% - 16px), calc((100svh - 220px) * 16 / 9)); }
  .control-row { padding-inline: 0; }
  .asset-credits { position: relative; margin: 8px auto 0; }
  .asset-credits summary > span:last-child { display: inline; }
  .asset-credits summary { padding: 8px; font-size: 12px; }
  .credit-list { bottom: calc(100% + 68px); left: 50%; right: auto; transform: translateX(-50%); }
}