:root{
    --ink:#eef6ff;
    --muted:#a5bbc9;
    --cyan:#49d8ff;
    --night:#020508;
    --panel:#0b1a25;
    --line:#244454}
*{
    box-sizing:border-box}
html{
    scroll-behavior:smooth;
    scroll-padding-top:30px}
body{
    margin:0;
    background:var(--night);
    color:var(--ink);
    font:17px/1.65 'Segoe UI',Arial,sans-serif}
a{
    color:inherit;
    text-underline-offset:5px}
a:hover{
    color:var(--cyan)}
a:focus-visible,summary:focus-visible{
    outline:3px solid var(--cyan);
    outline-offset:6px}
img{
    display:block;
    width:100%;
    height:auto}
p,h1,h2,h3{
    margin:0}
p{
    color:var(--muted)}
.wrap{
    width:min(1240px,90%);
    margin:auto}
.mono,.eyebrow,.number,.button,.status,nav,.proof{
    font-family:Consolas,'Courier New',monospace}
.proof{
    background:#17364d;
    color:#d8f3ff;
    text-align:center;
    padding:8px 12px;
    font-size:11px;
    letter-spacing:1.6px;
    text-transform:uppercase}
.skip{
    position:absolute;
    left:12px;
    top:-100px;
    z-index:10;
    background:var(--cyan);
    color:var(--night);
    padding:12px}
.skip:focus{
    top:12px}
header{
    border-bottom:1px solid var(--line)}
.header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:22px 0}
.brand{
    text-decoration:none;
    font-weight:900;
    letter-spacing:2px;
    line-height:1.1;
    font-size:23px}
.brand small{
    display:block;
    font:10px Consolas,monospace;
    letter-spacing:3px;
    color:var(--cyan);
    margin-bottom:6px}
nav{
    display:flex;
    gap:28px;
    font-size:12px}
nav a{
    text-decoration:none}
.nav-download{
    color:var(--cyan)}
.eyebrow{
    color:var(--cyan);
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase}
.hero{
    background:radial-gradient(ellipse at 76% 35%,#17364d 0, #08131c 44%,#020508 77%);
    position:relative;
    overflow:hidden}
.hero-grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    align-items:center;
    gap:65px;
    padding:32px 0 58px}
.hero h1{
    font-size:clamp(46px,5.2vw,76px);
    line-height:1.04;
    letter-spacing:-3px;
    margin:23px 0 25px;
    font-weight:850}
.hero h1 span{
    color:var(--cyan)}
.hero-copy>p{
    max-width:510px;
    font-size:18px;
    line-height:1.75}
.actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:24px;
    margin-top:32px}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 22px;
    background:var(--cyan);
    color:#020508;
    text-decoration:none;
    font-size:13px;
    font-weight:bold;
    border:1px solid var(--cyan);
    box-shadow:4px 4px 0 #163f50}
.button:hover{
    color:#020508;
    background:#b4edff}
.text-link{
    font-size:14px;
    font-weight:600}
.hero .meta{
    font:11px Consolas,monospace;
    margin-top:22px;
    color:#a5bbc9;
    letter-spacing:.5px}
.art{
    position:relative;
    padding:0 20px 0 0}
.art img{
    max-height:560px;
    object-fit:contain;
    filter:drop-shadow(0 20px 35px #0008)}
.art figcaption{
    display:flex;
    justify-content:space-between;
    border-top:1px solid #366078;
    padding-top:13px;
    margin-top:18px;
    font:10px Consolas,monospace;
    color:var(--muted);
    letter-spacing:1.5px}
.shelf{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)}
.shelf>div{
    padding:22px 26px;
    border-right:1px solid var(--line)}
.shelf>div:first-child{
    padding-left:0}
.shelf>div:last-child{
    border:0}
.status{
    font-size:10px;
    letter-spacing:1.6px;
    color:var(--cyan);
    display:block;
    margin-bottom:7px}
.shelf strong{
    font-size:17px;
    font-weight:600}
.shelf a{
    font-size:12px;
    color:var(--muted);
    display:block;
    margin-top:4px}
.chapter{
    padding:85px 0}
.chapter-heading{
    display:flex;
    gap:24px;
    align-items:baseline;
    margin-bottom:38px}
.number{
    font-size:13px;
    color:var(--cyan);
    border-top:2px solid var(--cyan);
    padding-top:9px;
    min-width:44px}
.chapter h2{
    font-size:clamp(30px,3vw,43px);
    line-height:1.15;
    letter-spacing:-1.4px}
.chapter-heading p{
    margin-top:13px;
    max-width:670px}
.workflow{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px}
.workflow article{
    border-bottom:1px solid var(--line);
    padding-bottom:25px}
.workflow img{
    aspect-ratio:16/9;
    object-fit:contain;
    background:#08131c;
    margin-bottom:20px}
.workflow .eyebrow{
    font-size:10px;
    letter-spacing:1.2px}
.workflow h3{
    font-size:20px;
    margin:7px 0 12px;
    line-height:1.25}
.workflow p{
    font-size:14px}
.overview{
    margin-top:28px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:20px 0;
    border-bottom:1px solid var(--line);
    font-size:14px}
.overview a{
    color:var(--cyan)}
.development{
    background:#08131c;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)}
.dev-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:85px}
.dev-copy h3{
    font-size:28px;
    line-height:1.25;
    margin:15px 0}
.dev-copy p{
    font-size:16px}
.dev-copy .text-link{
    display:inline-block;
    margin-top:23px;
    color:var(--cyan)}
.vanity-card{
    margin:0;
    border:1px solid #31566b;
    border-top:4px solid var(--cyan);
    background:#102331;
    padding:30px;
    color:var(--ink);
    font-size:19px;
    line-height:1.65;
    box-shadow:7px 7px 0 #020508}
.vanity-card-label{
    display:block;
    font:12px Consolas,monospace;
    letter-spacing:2px;
    color:var(--cyan);
    margin-bottom:22px}
.vanity-card-link{
    font-size:12px;
    color:var(--cyan);
    display:inline-block;
    margin-top:10px}
.vanity-card-time{
    display:block;
    font:11px Consolas,monospace;
    color:var(--muted);
    margin-top:23px}
.journal{
    margin-top:42px;
    border-top:1px solid var(--line);
    padding-top:23px}
.journal summary{
    cursor:pointer;
    font-size:14px;
    color:var(--muted)}
.announcement{
    max-width:830px;
    padding-top:25px}
.announcement p{
    margin:18px 0;
    font-size:15px}
.collection{
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:75px}
.collection-intro h2{
    font-size:58px;
    margin:18px 0 20px;
    line-height:1}
.collection-intro>p{
    font-size:16px}
.collection-intro .text-link{
    display:inline-block;
    color:var(--cyan);
    margin-top:24px}
.video-feature{
    display:grid;
    grid-template-columns:70px 1fr 25px;
    align-items:center;
    gap:20px;
    border-top:1px solid var(--line);
    padding:24px 0;
    text-decoration:none}
.play{
    width:60px;
    height:60px;
    border:1px solid #376176;
    display:grid;
    place-items:center;
    color:var(--cyan);
    font-size:22px;
    background:#102331}
.video-feature small{
    font:10px Consolas,monospace;
    letter-spacing:1.5px;
    color:var(--cyan)}
.video-feature h3{
    font-size:20px;
    margin:5px 0}
.video-feature p{
    font-size:13px}
.characters{
    border-top:1px solid var(--line);
    padding-top:22px}
.characters summary{
    cursor:pointer;
    font-size:14px}
.characters ul{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    padding-left:20px;
    font-size:13px;
    color:var(--muted)}
.personal{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    padding:45px 0 65px;
    border-top:1px solid var(--line)}
.personal h3{
    font-size:24px;
    margin:12px 0}
.personal p{
    font-size:14px;
    max-width:500px}
.personal a{
    display:inline-block;
    margin-top:18px;
    font-size:13px;
    color:var(--cyan)}
footer{
    background:#08131c;
    border-top:1px solid var(--line);
    padding:30px 0}
.footer{
    display:flex;
    justify-content:space-between;
    gap:25px;
    color:var(--muted);
    font-size:12px}
.footer-links{
    display:flex;
    gap:20px}
 @media(min-width:1500px){
    .hero-grid{
    padding-top:40px;
    padding-bottom:80px}
}
@media(max-width:850px){
    .hero-grid{
    gap:25px}
.hero h1{
    font-size:52px}
.workflow{
    grid-template-columns:1fr 1fr}
.dev-grid{
    gap:35px}
.collection{
    gap:30px}
.collection-intro h2{
    font-size:45px}
}
@media(max-width:600px){
    body{
    font-size:16px}
.wrap{
    width:89%}
.proof{
    font-size:9px;
    letter-spacing:1px}
.header{
    flex-wrap:wrap;
    gap:20px;
    padding:20px 0}
nav{
    width:100%;
    justify-content:space-between;
    gap:12px;
    font-size:11px}
.brand{
    font-size:20px}
.hero-grid{
    grid-template-columns:1fr;
    padding:38px 0 30px;
    gap:25px}
.hero h1{
    font-size:49px;
    letter-spacing:-2px}
.hero-copy>p{
    font-size:16px}
.actions{
    gap:19px;
    margin-top:25px}
.button{
    padding:13px 16px;
    font-size:12px}
.art{
    max-width:340px;
    padding:0;
    margin:15px auto 0}
.art img{
    max-height:380px}
.art figcaption{
    font-size:9px}
.shelf{
    grid-template-columns:1fr}
.shelf>div,.shelf>div:first-child{
    padding:18px 0;
    border-right:0;
    border-bottom:1px solid var(--line)}
.shelf strong{
    font-size:16px}
.chapter{
    padding:52px 0}
.chapter-heading{
    gap:14px;
    margin-bottom:28px}
.chapter h2{
    font-size:30px}
.chapter-heading p{
    font-size:15px}
.number{
    min-width:30px}
.workflow{
    gap:25px 16px}
.workflow h3{
    font-size:18px}
.workflow p{
    font-size:13px}
.workflow .eyebrow{
    font-size:9px;
    letter-spacing:.4px}
.overview{
    flex-direction:column;
    gap:8px}
.dev-grid,.collection,.personal{
    grid-template-columns:1fr;
    gap:35px}
.vanity-card{
    padding:23px;
    font-size:18px}
.collection-intro h2{
    font-size:47px}
.video-feature{
    gap:14px;
    grid-template-columns:50px 1fr 15px}
.play{
    width:46px;
    height:46px}
.video-feature h3{
    font-size:18px}
.personal{
    padding:35px 0 45px}
.footer{
    flex-direction:column}
.footer-links{
    flex-wrap:wrap;
    gap:15px}
.characters ul{
    grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
    html{
    scroll-behavior:auto}
}

.overview-video{
    margin-top:40px}
.overview-video .overview{
    align-items:center;
    border-bottom:0;
    margin-top:0}
.overview-video h3{
    font-size:26px;
    margin-top:8px}
.video-frame{
    aspect-ratio:16/9;
    width:100%;
    background:#08131c;
    border:1px solid var(--line)}
.video-frame iframe{
    display:block;
    width:100%;
    height:100%;
    border:0}
@media(max-width:600px){
    .overview-video .overview{
    align-items:flex-start}
.overview-video h3{
    font-size:23px}
}

.page-shell{
    display:grid;
    grid-template-columns:190px minmax(0,1fr);
    gap:65px;
    padding:65px 0 90px}
.side-index{
    position:sticky;
    top:30px;
    align-self:start;
    font:12px/1.6 Consolas,monospace}
.side-index .eyebrow{
    margin-bottom:20px}
.side-index a{
    display:block;
    padding:11px 0;
    border-bottom:1px solid var(--line);
    text-decoration:none;
    color:var(--muted)}
.side-index a:hover{
    color:var(--cyan)}
.inner-page{
    min-width:0}
.inner-page>h1{
    font-size:clamp(38px,5vw,66px);
    letter-spacing:-2px;
    line-height:1.06;
    margin:15px 0 27px}
.inner-page .intro{
    font-size:18px;
    margin-bottom:38px}
.inner-page p{
    margin:15px 0;
    line-height:1.8}
.inner-page h2{
    font-size:27px;
    line-height:1.25;
    margin:0 0 18px}
.inner-page h3{
    font-size:17px;
    color:var(--cyan);
    margin:26px 0 14px}
.release-card,.inner-page article,.planning-notice,.change-section,.inner-page details,.notice{
    border-top:1px solid var(--line);
    padding:30px 0;
    margin-top:20px}
.release-card.current,.planning-notice{
    background:#0b1a25;
    border-top:3px solid var(--cyan);
    padding:30px}
.release-card .release-details{
    display:grid;
    grid-template-columns:120px minmax(0,1fr);
    gap:10px 22px}
.label,.date,.release-date,.updated-on{
    font:12px/1.7 Consolas,monospace;
    color:var(--muted)}
.label{
    text-transform:uppercase;
    letter-spacing:1px}
.value{
    font-size:14px;
    overflow-wrap:anywhere}
.badge{
    font:10px Consolas,monospace;
    color:var(--night);
    background:var(--cyan);
    padding:5px 8px;
    vertical-align:middle;
    margin-left:10px}
code{
    font:13px/1.7 Consolas,monospace;
    color:#c6eaf8;
    overflow-wrap:anywhere}
.download-button{
    background:var(--cyan);
    color:var(--night);
    padding:12px 18px;
    text-decoration:none;
    font:12px Consolas,monospace}
.inner-page .actions{
    gap:18px}
.inner-page li{
    color:var(--muted);
    margin-bottom:15px;
    line-height:1.8}
.inner-page ul{
    padding-left:22px}
.inner-page summary{
    cursor:pointer;
    font-size:20px;
    font-weight:600}
.release-title{
    font-size:22px}
.inner-page a{
    color:var(--cyan)}
.inner-page .download-button{
    color:var(--night)}
.inner-page .links{
    border-top:1px solid var(--line);
    margin-top:35px;
    padding-top:25px;
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    font-size:13px}
.story{
    font-size:18px}
.story p:first-child{
    font-size:22px;
    color:var(--ink)}
.scene-handle{
    color:var(--ink);
    font-weight:600}
.archive-downloads{
    padding:25px;
    background:var(--panel);
    border-left:3px solid var(--cyan);
    font-size:14px}
.archive-downloads a{
    display:inline-block;
    margin:10px 15px}
.archive-downloads span{
    display:block;
    color:var(--muted)}
.page-art{
    margin-top:30px;
    opacity:.85}
.inner-page footer{
    display:none}
@media(max-width:850px){
    .page-shell{
    grid-template-columns:140px minmax(0,1fr);
    gap:30px}
nav{
    gap:16px}
}
@media(max-width:600px){
    .page-shell{
    display:block;
    padding:32px 0 50px}
.side-index{
    position:static;
    margin-bottom:32px}
.side-index a{
    display:inline-block;
    margin-right:15px;
    font-size:11px}
.side-index .eyebrow{
    margin-bottom:5px}
.side-index .page-art{
    display:none}
.inner-page>h1{
    font-size:40px}
.release-card .release-details{
    grid-template-columns:1fr;
    gap:3px}
.value{
    margin-bottom:12px}
.release-card.current,.planning-notice{
    padding:20px}
.inner-page h2{
    font-size:24px}
.story p:first-child{
    font-size:19px}
.story{
    font-size:16px}
.inner-page .intro{
    font-size:16px}
nav{
    flex-wrap:wrap}
}


.workbench-nav{
    color:var(--cyan);
    border-bottom:1px solid var(--cyan)}
.workbench-shortcut{
    display:block;
    text-decoration:none;
    background:#102b3b;
    border-bottom:1px solid #366078}
.workbench-shortcut-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding-top:16px;
    padding-bottom:16px}
.workbench-shortcut strong{
    color:var(--ink);
    font-size:15px}
.workbench-preview{
    color:#bfd4e1;
    font-size:13px;
    margin-left:16px}
.workbench-jump{
    color:var(--cyan);
    font:12px Consolas,monospace;
    white-space:nowrap}
.workbench-shortcut:hover{
    background:#16384b}
@media(max-width:850px){
    .workbench-preview{
    display:block;
    margin-left:0;
    margin-top:3px}
}
@media(max-width:600px){
    .workbench-shortcut-inner{
    align-items:flex-start;
    flex-direction:column;
    gap:9px}
.workbench-shortcut strong{
    font-size:14px}
.workbench-preview{
    font-size:12px}
.header nav{
    justify-content:flex-start;
    column-gap:18px;
    row-gap:14px}
}


.origins-index .page-art {
    /* Align the visible logo, accounting for the artwork's inset border. */
    transform: translateX(-7%);
}

.brand-cursor {
    color: var(--cyan);
    animation: cursor-blink 1.2s step-end infinite;
}
@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .brand-cursor { animation: none; }
}

/* Historical release entries expand on request. */
details.release-card > summary { cursor: pointer; font-size: 24px; font-weight: 700; color: var(--ink); }
details.release-card[open] > summary { margin-bottom: 24px; }