/* First paint has no dependency on the 3D engine or its assets. */
body.studio-loading { overflow: hidden; }
body.studio-loading > :not(#studio-loader):not(script):not(noscript) { visibility: hidden; }
#studio-loader { --mint: #19e5d3; --muted: #8c9b9b; position: fixed; inset: 0; z-index: 10000; overflow: auto; background: #030606; color: #edf3ee; font-family: 'Segoe UI', 'Microsoft JhengHei', sans-serif; color-scheme: dark; isolation: isolate; transition: opacity 5s ease-in-out; }
#studio-loader * { box-sizing: border-box; }
#studio-loader[hidden] { display: none; }
#studio-loader.leaving { opacity: 0; pointer-events: none; }
#studio-loader::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 77% 40%, #0c252442, transparent 56%), repeating-linear-gradient(90deg, transparent 0 119px, #89ead804 120px); pointer-events: none; }
.ls-shell { max-width: 1480px; min-height: 100%; margin: auto; padding: clamp(22px, 4vw, 58px); display: flex; flex-direction: column; }
.ls-mast { display: flex; justify-content: space-between; gap: 20px; align-items: center; font-size: 12px; letter-spacing: .15em; color: var(--muted); }
.ls-studio { white-space: nowrap; display: flex; align-items: center; gap: 12px; color: #dfe9e4; }
.ls-mark { width: 19px; height: 17px; border-top: 2px solid var(--mint); border-right: 2px solid var(--mint); transform: skewY(-26deg); }
.ls-studio small { color: var(--muted); font-size: 10px; letter-spacing: .16em; }
.ls-game { text-align: right; }
.ls-game span { color: var(--mint); }
#ls-version { display: block; margin-top: 9px; color: var(--muted); font: 10px/1.5 Consolas, monospace; letter-spacing: .05em; }
.ls-hero { flex: 1; display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: clamp(20px, 5vw, 80px); padding: 30px 0; }
.ls-art { position: relative; margin: 0; text-align: center; }
.ls-art video { display: block; width: 100%; max-height: 540px; object-fit: contain; mix-blend-mode: screen; }
.ls-art figcaption { color: #91a29b; font-size: 11px; letter-spacing: .24em; margin-top: -10px; }
.ls-eyebrow { color: var(--mint); font: 11px/1.5 Consolas, monospace; letter-spacing: .23em; margin: 0 0 20px; }
#studio-loader h1 { font-size: clamp(34px, 3.5vw, 57px); line-height: 1.35; letter-spacing: .035em; margin: 0; font-weight: 600; }
.ls-progress-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.ls-current { font-size: 14px; line-height: 1.8; }
.ls-current small { display: block; font: 10px/2 Consolas, monospace; color: var(--mint); letter-spacing: .16em; }
.ls-number { display: flex; align-items: baseline; gap: 5px; font-family: Consolas, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
#ls-value { font-size: clamp(43px, 4.6vw, 70px); line-height: 1; letter-spacing: -.065em; font-weight: 300; }
#ls-unit { font-size: 17px; color: var(--mint); }
.ls-track { height: 6px; background: #1c2b29; position: relative; overflow: hidden; margin: 19px 0 12px; border-radius: 6px; }
.ls-fill { position: absolute; inset: 0; background: linear-gradient(90deg, #177b76, #1fe5d0, #d7fff2); transform: scaleX(0); transform-origin: left; will-change: transform; }
.ls-sweep { position: absolute; inset: 0; width: 36%; background: linear-gradient(90deg, transparent, #edfff9bb, transparent); animation: ls-sweep 1.7s linear infinite; will-change: transform; }
.ls-track.indeterminate .ls-fill { opacity: .3; }
.ls-track.indeterminate .ls-sweep { width: 45%; }
.ls-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ls-floors { display: flex; list-style: none; padding: 0; margin: 28px 0 18px; gap: 5px; }
.ls-floors li { flex: 1; border-top: 1px solid #293431; padding-top: 10px; color: #75817d; font-size: 11px; }
.ls-floors li span { margin-right: 6px; font: 10px Consolas, monospace; }
.ls-floors li.active { color: var(--mint); border-color: var(--mint); }
.ls-floors li.done { color: #b8c6bf; border-color: #728f83; }
#ls-detail { min-height: 2.8em; color: #a4b1aa; font-size: 12px; line-height: 1.8; margin: 0; }
#ls-tip-text { color: #bdcbc3; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.9; margin: 24px 0 34px; min-height: 3.8em; }
#studio-loader button { font: 11px 'Segoe UI', 'Microsoft JhengHei', sans-serif; color: #a8bcb2; background: none; border: 1px solid #34463d; padding: 9px 12px; border-radius: 3px; cursor: pointer; white-space: nowrap; }
#studio-loader button:hover, #studio-loader button:focus-visible { border-color: var(--mint); color: var(--mint); }
#studio-loader button:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
#ls-music { display: flex; align-items: center; gap: 10px; font-size: 12px; margin: 12px 0 0; letter-spacing: .06em; }
#ls-music[hidden] { display: none; }
#ls-music-label { opacity: .7; }
#studio-loader #ls-music-toggle { flex: 0 0 38px; min-height: 34px; padding: 5px; font-size: 17px; line-height: 1; background: #112820; }
.ls-error { border-left: 2px solid #edb286; padding: 10px 16px; margin-top: 12px; font-size: 12px; line-height: 1.8; }
.ls-error[hidden] { display: none; }
.ls-error p { margin: 0 0 10px; }
#studio-loader.failed { --mint: #edb286; }
#studio-loader.failed .ls-sweep { animation-play-state: paused; }
@keyframes ls-sweep { from { transform: translateX(-110%); } to { transform: translateX(390%); } }
@media (min-width: 1500px) { .ls-hero { gap: 90px; } }
@media (max-width: 760px), (max-aspect-ratio: 4/5) { .ls-shell { padding: 22px; } .ls-studio { gap: 9px; } .ls-studio small { display: none; } .ls-hero { grid-template-columns: 1fr; gap: 20px; padding: 16px 0 25px; } .ls-art video { height: clamp(190px, 24vh, 360px); } .ls-art figcaption { display: none; } .ls-eyebrow { margin-bottom: 10px; } #studio-loader h1 { font-size: 28px; } #studio-loader h1 br { display: none; } .ls-floors { margin: 22px 0 12px; } #ls-tip-text { margin: 16px 0 24px; } }
@media (max-height: 620px) and (min-width: 761px) { .ls-shell { padding: 20px 35px; } .ls-hero { padding: 20px 0; gap: 35px; } .ls-art video { max-height: 310px; } #studio-loader h1 { font-size: 30px; } .ls-eyebrow { margin-bottom: 10px; } .ls-floors { margin: 17px 0 10px; } #ls-tip-text { font-size: 16px; margin: 14px 0 22px; } }
@media (prefers-reduced-motion: reduce) { .ls-sweep { animation-duration: 5s; } }

@media (min-width: 761px) and (min-aspect-ratio: 4/5) and (max-height: 850px) { .ls-shell { padding-top: 26px; padding-bottom: 22px; } .ls-art video { max-height: min(440px, 52vh); } .ls-hero { padding: 20px 0; } }