:root { color-scheme: dark; --ink: #eaf1ff; --muted: #91a0bc; --panel: #111827; --edge: #26334c; --blue: #6fa8ff; --mint: #60e0bd; --bg: #070b13; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 50% -25%, #172847, var(--bg) 45%); font: 16px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; }
button, select, input { font: inherit; }
.app-shell { width: min(1100px, calc(100% - 32px)); margin: auto; padding: 22px 0 72px; }
.masthead { display: flex; align-items: center; justify-content: space-between; }.wordmark { color: var(--ink); text-decoration: none; font-weight: 750; letter-spacing: -.04em; font-size: 1.35rem; }.badge { color: var(--mint); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.intro { max-width: 700px; padding: 62px 0 30px; }.eyebrow { margin: 0; color: var(--mint); text-transform: uppercase; letter-spacing: .13em; font-size: .76rem; font-weight: 700; }.intro h1 { max-width: 650px; margin: 10px 0 12px; font-size: clamp(2.4rem, 6vw, 4.7rem); line-height: .98; letter-spacing: -.06em; }.intro p:last-child { margin: 0; color: var(--muted); max-width: 48rem; }
.player-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: stretch; gap: 14px; margin-bottom: 28px; }.player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--edge); border-radius: 16px; background: #1a1a1a; box-shadow: 0 24px 70px #0008; }.player:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border: 0; border-radius: 0; }.player canvas { width: 100%; height: 100%; display: block; overscroll-behavior: contain; touch-action: none; }.player::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at center, transparent 36%, #0004 100%); }.fullscreen-toggle { position: absolute; z-index: 3; top: 14px; right: 14px; border: 1px solid #ffffff2e; border-radius: 8px; background: #050914c7; color: var(--ink); padding: 7px 10px; font-size: .76rem; font-weight: 700; cursor: pointer; }.player-hud { position: absolute; inset: auto 18px 14px; z-index: 2; display: flex; justify-content: space-between; color: #bdc9dd; font-size: .8rem; pointer-events: none; }.scene-copy { position: absolute; z-index: 2; top: 20px; left: 22px; display: grid; gap: 2px; max-width: min(62%, 430px); text-shadow: 0 2px 20px #000; pointer-events: none; }.scene-copy span { color: #aab8cf; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; }.scene-copy strong { overflow-wrap: anywhere; font-size: clamp(.95rem, 1.6vw, 1.25rem); line-height: 1.1; letter-spacing: -.025em; }.scene-copy #scene-tag { color: var(--mint); font-weight: 700; }.tree-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }.tree-label { position: absolute; color: #fff; font: 400 14px/1.05 ui-sans-serif, system-ui, sans-serif; text-shadow: 0 1px 4px #000; white-space: nowrap; transform: translate(8px, -50%); opacity: .76; }.tree-label.dir { color: #fff; font-size: 17px; font-weight: 400; transform: translate(8px, -135%); }.tree-label.user { display: flex; align-items: center; gap: 7px; color: #fff; font-size: 14px; font-weight: 650; transform: translate(-14px, -50%); }.user-avatar { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid #ffffffa8; border-radius: 50%; background: var(--avatar-color, #536987); box-shadow: 0 0 16px color-mix(in srgb, var(--avatar-color, #536987) 70%, transparent), 0 2px 6px #000a; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 1px 2px #000b; }.user-name { padding: 3px 7px; border-radius: 999px; background: #050914b8; box-shadow: 0 1px 5px #0008; }.tree-label.hot { color: #fff; opacity: 1; }
.controls { display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0; padding: 18px; border: 1px solid var(--edge); border-radius: 16px; background: linear-gradient(145deg, #121c2d, #0b111d); box-shadow: 0 18px 42px #0004; }.control-heading { display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--edge); }.control-heading span { color: var(--mint); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.control-heading strong { font-size: 1rem; letter-spacing: -.02em; }.control-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.controls button { border: 0; border-radius: 8px; background: var(--blue); color: #061120; padding: 9px 8px; font-weight: 700; cursor: pointer; }.controls .quiet { background: #26334c; color: var(--ink); }.controls .view-reset { grid-column: 1 / -1; }.controls label { color: var(--muted); font-size: .82rem; }.playstyle-control { display: grid; gap: 6px; }.playstyle-control span { color: #aab8cf; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }.control-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.controls select { width: 100%; background: var(--panel); color: var(--ink); border: 1px solid var(--edge); border-radius: 6px; padding: 7px; }.scrub { display: grid; gap: 7px; }.scrub input { width: 100%; accent-color: var(--mint); }
.drop-zone { border: 1px dashed #48648f; border-radius: 14px; background: #0d1524aa; padding: 22px; transition: .15s ease; }.drop-zone.dragging, .drop-zone:focus { outline: none; border-color: var(--mint); background: #12302f66; }.drop-zone p { margin: 0 0 5px; }.drop-zone p:last-child { margin-bottom: 0; }.drop-zone code, .export-help pre { color: #b9c8df; }.text-button { border: 0; background: none; padding: 0; color: var(--mint); text-decoration: underline; cursor: pointer; }.status { min-height: 1.5em; color: var(--mint); }.status.error { color: #ff9d9d; }
.galaxy-control[hidden] { display: none; }.control-group { display: grid; gap: 12px; padding: 12px; border: 1px solid #26334c; border-radius: 10px; background: #080e19a8; }.control-section-label { color: var(--mint); font-size: .68rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }.toggle-control { display: flex; align-items: center; gap: 8px; }.toggle-control input { width: 16px; height: 16px; margin: 0; accent-color: var(--mint); }.toggle-control span { color: #aab8cf; }
.playback-meta { display: grid; gap: 8px; }.playback-meta > span { display: grid; gap: 2px; min-width: 0; padding: 8px; border: 1px solid var(--edge); border-radius: 8px; background: #080e19a8; }.playback-meta small { color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.playback-meta strong { color: var(--ink); font-size: .72rem; white-space: nowrap; }
.export-help { margin-top: 18px; color: var(--muted); }.export-help summary { cursor: pointer; color: var(--ink); }.export-help pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }.export-command { position: relative; margin-top: 16px; border-left: 2px solid var(--edge); padding: 4px 120px 4px 14px; }.export-command button { position: absolute; top: 0; right: 0; border: 1px solid var(--edge); border-radius: 7px; background: var(--panel); color: var(--ink); padding: 6px 9px; cursor: pointer; }
@media (max-width: 760px) { .player-workspace { grid-template-columns: 1fr; }.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.control-heading { grid-column: 1 / -1; padding-bottom: 10px; }.scrub { align-content: end; } }
@media (max-width: 620px) { .app-shell { width: min(100% - 22px, 1100px); }.intro { padding-top: 44px; }.player { border-radius: 10px; }.controls { padding: 14px; } }
.player canvas { cursor: grab; }.player canvas.panning { cursor: grabbing; }
.repository-identity { position: absolute; z-index: 3; top: 14px; left: 50%; display: grid; justify-items: center; max-width: calc(100% - 320px); color: #dce5f3; text-shadow: 0 2px 14px #000; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }.repository-identity strong, .repository-identity span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }.repository-identity strong { font-size: .78rem; letter-spacing: .04em; }.repository-identity span { color: #91a0bc; font-size: .62rem; }
.player-workspace { display: block; }.player { display: grid; grid-template-columns: minmax(0, 1fr) 220px; }.render-stage { position: relative; min-width: 0; overflow: hidden; }.render-stage canvas { position: absolute; inset: 0; }.player::after { content: none; }.render-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at center, transparent 36%, #0004 100%); }.player > .controls { z-index: 4; border: 0; border-left: 1px solid var(--edge); border-radius: 0; box-shadow: none; }.player:fullscreen { display: grid; grid-template-columns: minmax(0, 1fr) 240px; }.player:fullscreen .render-stage { height: 100vh; }
.player > .controls { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
@media (max-width: 760px) { .player { aspect-ratio: auto; grid-template-columns: 1fr; }.render-stage { aspect-ratio: 16 / 9; }.player > .controls { border-left: 0; border-top: 1px solid var(--edge); border-radius: 0; }.player:fullscreen { grid-template-columns: minmax(0, 1fr) 220px; }.player:fullscreen .render-stage { height: 100vh; aspect-ratio: auto; }.player:fullscreen > .controls { display: flex; border-top: 0; border-left: 1px solid var(--edge); } }