/* Portfolio chrome only: project windows and 3D materials keep their own styles. */
body { background: #0c1022; }
.navigation, .episode-caption, .scene-bottom, .no-script {
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #f0f1f7;
}
.navigation {
    padding-inline: max(5%, calc((100vw - 1320px) / 2));
    background: #0c1022;
    border-bottom: 1px solid #ffffff0d;
    box-shadow: none;
}
.navigation .logo { font-size: 20px; font-weight: 600; letter-spacing: -.6px; color: #fff; }
.navigation .nav-label { color: #a899bd; font-size: 10px; font-weight: 600; }
.navigation .back { color: #ececf4; font-size: 13px; letter-spacing: 0; font-weight: 400; }
.navigation .back span { color: #bf8deb; margin-left: 12px; }
.navigation a:hover { color: #d5b4f1; }
.navigation a:focus-visible, #chapters button:focus-visible, .episode-caption button:focus-visible {
    outline: 3px solid #d6a3ff;
    outline-offset: 4px;
}
#experience { background: #0c1022; }
.episode-caption .eyebrow { color: #a899bd; letter-spacing: 2px; font-weight: 600; }
.episode-caption h2 { color: #f0f1f7; font-weight: 300; line-height: 1.17; letter-spacing: -1px; }
.episode-caption > p:not(.eyebrow) { color: #bfc3d1; line-height: 1.65; }
.episode-caption button { background: #a64eed; color: #100b20; border-radius: 5px; font-size: 14px; }
.episode-caption button:hover { background: #c485f5; }
#scene-status, #percentage { color: #aeb5c9; }
#chapters { gap: 5px; }
#chapters button { font-family: 'Segoe UI', Arial, sans-serif; color: #aeb5c9; border-radius: 5px; }
#chapters button[aria-current=step] { border-color: #ae79df; background: #a64eed14; color: #e6d9f5; }
#chapters button:hover { background: #a64eed26; color: #f0f1f7; }
.progress-track { background: #30364d; }
#progress-fill { background: #a64eed; }
@media (max-width: 700px) {
    .navigation { padding-inline: 6vw; }
    .navigation .logo { font-size: 18px; }
    .navigation .back { font-size: 12px; }
}