/* Trailer-led presentation, using the existing logo, artwork and system fonts. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.language-setting{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:100px;padding:8px 10px;color:var(--ink);background:var(--panel,var(--surface,var(--paper)));flex-shrink:0}
.language-icon{color:var(--accent,var(--pink));font-size:18px;line-height:1}
.language-setting select{font:inherit;font-size:12px;color:var(--ink);background:var(--panel,var(--surface,var(--paper)));border:0;max-width:110px;padding:2px;cursor:pointer}
.language-setting select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nav{gap:24px}.nav-tools{gap:10px}.nav-status{font-size:10px}
body.showcase{--mint:#8ae1df}
:root[data-theme=dark] body.showcase{--mint:#7ad8d6}
.showcase .hero{background:radial-gradient(ellipse at 80% 30%,color-mix(in srgb,var(--mint) 9%,transparent),transparent 50%),radial-gradient(ellipse at 10% 20%,var(--accent-soft),transparent 65%);position:relative}
.showcase .hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:84px 84px;opacity:.13;mask-image:linear-gradient(transparent,#000 40%,transparent)}
.showcase .hero>.wrap{position:relative}.showcase .hero h1{font-size:clamp(42px,4.5vw,66px)}
.showcase .hero h1 .type-ribbon{white-space:normal;transform:none;-webkit-text-stroke:1px var(--letter-outline);text-shadow:1px 2px var(--letter-edge),2px 3px var(--letter-depth)}
.showcase .hero-invite strong{letter-spacing:0}.showcase .hero-stage{min-width:0}
.trailer-stage .hero-player{border:1px solid color-mix(in srgb,var(--mint) 45%,var(--line));box-shadow:0 20px 60px var(--shadow),6px 6px 0 var(--accent-soft)}
.trailer-stage .player-overline{color:var(--mint)}
.trailer-stage .ribbon-label{background:var(--frame);color:var(--frame-ink);border:1px solid var(--line);clip-path:none;transform:none;letter-spacing:.04em;font-size:11px;border-radius:6px;padding:6px 13px;top:-38px}
.trailer-stage .ribbon-label img{filter:none;width:23px}.showcase .hero-switches{justify-content:flex-end;align-items:center;gap:15px}
.trailer-caption{font-size:10px;color:var(--muted);max-width:280px}.showcase .hero-switch{border-radius:8px}.showcase .hero-bottom{padding-top:15px;border-top:1px solid var(--line)}
.showcase .game-section .eyebrow,.showcase .tools-section .eyebrow{letter-spacing:.12em}
.showcase .card-category{line-height:1.6}.showcase .footer-links{flex-wrap:wrap}
html[lang=en] body{font-family:"Segoe UI",system-ui,sans-serif}
html[lang=ja] body{font-family:"Yu Gothic","Meiryo",system-ui,sans-serif}
html[lang=zh-CN] body{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif}
html:not([lang=ko]) .display-title{letter-spacing:-.025em}
html[lang=en] .showcase .hero h1{font-size:clamp(38px,3.9vw,56px)}
html[lang=ja] .showcase .hero h1{font-size:clamp(34px,3.4vw,49px)}
html:not([lang=ko]) .type-ribbon{white-space:normal}
html[lang=en] .showcase .section-head h2{font-size:clamp(32px,3.5vw,49px)}
html:not([lang=ko]) .hero-player .player-bar>div{flex-direction:column;align-items:flex-start;gap:2px}
html[lang=en] .showcase p{word-break:normal}
@media(min-width:1051px){.showcase .hero>.wrap{grid-template-columns:.95fr 1.4fr;column-gap:45px}.showcase .hero-heading{padding-bottom:10px}.showcase .lead{line-height:1.85;font-size:14px}.showcase .hero-switches{margin-top:-9px}}
@media(max-width:1150px){.nav-status{display:none}.nav-links{gap:18px}.nav{gap:16px}.nav-links a{white-space:nowrap}}
@media(max-width:900px){.nav{flex-wrap:wrap;gap:14px;padding-block:13px}.nav-links{order:3;width:100%;justify-content:center;gap:28px}.nav-tools{margin-left:auto}.hero-invite{min-width:0}.showcase .hero h1{font-size:clamp(42px,5.5vw,60px)}}
@media(max-width:760px){.nav-tools{gap:7px}.language-setting{padding:6px 8px}.language-setting select{font-size:10px;max-width:89px}.language-icon{font-size:15px}.nav-links{flex-wrap:wrap;gap:8px 24px}.nav-links a{font-size:11px}.showcase .hero h1{font-size:clamp(35px,9.5vw,58px)}.showcase .hero-invite strong{font-size:12px}.showcase .hero-switches{justify-content:flex-start;gap:10px;flex-wrap:wrap}.trailer-caption{font-size:9px}.showcase .hero-bottom{align-items:flex-start}.hero-player .player-bar>div{flex-basis:100%;margin-bottom:3px}.hero-player .player-bar .expand-video{margin-left:auto}.hero-player .player-bar>.sound-toggle:not([hidden]){order:initial;margin-left:0}.showcase .hero .lead{font-size:13px}.showcase .together-strip p{font-size:13px}.showcase .together-strip>.wrap>div{padding-left:0;line-height:1.8}.showcase .display-title{line-height:1.35}html[lang=en] .showcase .hero h1{font-size:clamp(34px,9vw,50px)}html[lang=ja] .showcase .hero h1{font-size:clamp(29px,7.8vw,43px)}html[lang=zh-CN] .showcase .hero h1{font-size:clamp(33px,8.8vw,49px)}.showcase .section-head h2{font-size:clamp(29px,8vw,41px)}.document-hero h1{overflow-wrap:anywhere}}
@media(max-width:370px){.language-setting{padding:6px}.language-icon{display:none}.theme-toggle{padding:7px 8px}.brand{gap:6px}.showcase .hero-invite{gap:12px}.showcase .hero h1{font-size:32px}}
.connect-layout>*{min-width:0}.launch-copy{min-width:0}
.gallery-language-note{font-size:10px;text-align:center;color:var(--muted);margin-top:8px;line-height:1.8}
html[lang=ja] p,html[lang=ja] h2,html[lang=ja] h3,html[lang=ja] li,html[lang=zh-CN] p,html[lang=zh-CN] h2,html[lang=zh-CN] h3,html[lang=zh-CN] li{word-break:normal;overflow-wrap:anywhere}
html:not([lang=ko]) .document-body p,html:not([lang=ko]) .document-body li,html:not([lang=ko]) .document-body h2,html:not([lang=ko]) .draft-banner{word-break:normal;overflow-wrap:anywhere}
html:not([lang=ko]) body:not(.showcase) .word-visual,html:not([lang=ko]) body:not(.showcase) .glyph-word{white-space:normal;display:inline}
@media(max-width:760px){html[lang=ja] .showcase .connection h2{font-size:28px;word-break:normal}html[lang=ja] .showcase .launch h2{font-size:27px}html[lang=en] .showcase .launch h2{font-size:32px}html[lang=zh-CN] .showcase .launch h2{font-size:32px}body:not(.showcase) .nav-links{flex-wrap:wrap;font-size:12px;gap:8px 16px;justify-content:center}body:not(.showcase) .brand{font-size:16px;gap:5px}body:not(.showcase) .brand .brand-mark{width:34px;height:auto;margin-right:3px}body:not(.showcase) .document-hero h1{font-size:clamp(30px,8vw,43px);letter-spacing:-.03em}.showcase .launch h2 .type-ribbon{transform:none}}