: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: 56px; height: 34px; 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; z-index: 2; right: 18px; bottom: 14px; display: grid; justify-items: end; gap: 2px; color: #bdc9dd; font-size: .8rem; pointer-events: none; }.playback-fps { color: var(--mint); font-size: .68rem; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .06em; }.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; }.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: flex; align-items: center; justify-content: space-between; gap: 8px; 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; }
.control-group[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; }
.pattern-controls { gap: 9px; }.pattern-control { display: grid; gap: 5px; }.pattern-control > span { color: #aab8cf; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }.pattern-control textarea { width: 100%; min-height: 58px; resize: vertical; border: 1px solid var(--edge); border-radius: 6px; background: #050914; color: var(--ink); padding: 7px 8px; font: .7rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }.pattern-control textarea:focus { outline: 1px solid var(--mint); border-color: var(--mint); }.pattern-controls small { color: var(--muted); font-size: .62rem; line-height: 1.3; }
.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; }
.render-stage.tilt-shift canvas { filter: saturate(1.18) contrast(1.06); }.render-stage.tilt-shift::before { content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); mask-image: linear-gradient(to bottom, #000 0%, transparent 34%, transparent 66%, #000 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 34%, transparent 66%, #000 100%); }.render-stage.tilt-shift .scene-copy, .render-stage.tilt-shift .repository-identity, .render-stage.tilt-shift .fullscreen-toggle, .render-stage.tilt-shift .control-collapse-toggle { z-index: 3; }
.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); } }
.control-collapse-toggle { position: absolute; z-index: 3; top: 14px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #ffffff2e; border-radius: 8px; background: #050914c7; color: var(--ink); cursor: pointer; }.menu-icon { display: grid; gap: 3px; width: 14px; }.menu-icon i { display: block; height: 1px; background: currentColor; }
.player.controls-collapsed { grid-template-columns: minmax(0, 1fr); }.player.controls-collapsed > .controls { display: none; }
.file-key { position: absolute; z-index: 3; left: 14px; bottom: 44px; max-height: calc(100% - 120px); padding: 7px; overflow: hidden; border: 1px solid #ffffff24; border-radius: 8px; background: #050914c7; box-shadow: 0 8px 26px #0007; pointer-events: none; }.file-key-entries { display: grid; gap: 4px; }.file-key-entry { display: grid; grid-template-columns: 12px minmax(48px, auto) auto; align-items: center; gap: 7px; color: #eaf1ff; font-size: .68rem; line-height: 1; }.file-key-swatch { width: 12px; height: 12px; border: 1px solid #ffffff42; border-radius: 2px; box-shadow: 0 0 7px color-mix(in srgb, var(--file-color) 65%, transparent); background: var(--file-color); }.file-key-entry small { color: #91a0bc; font-size: .62rem; font-variant-numeric: tabular-nums; text-align: right; }

/* DirFlow initial shell */
.controls button:disabled, .controls input:disabled { cursor: not-allowed; opacity: .55; }
.map-preview-note { position: absolute; z-index: 2; inset: auto 18px 14px 190px; color: #91a0bc; font-size: .72rem; pointer-events: none; }
.map-zoom-controls { position: absolute; z-index: 3; left: 14px; bottom: 14px; display: flex; align-items: center; overflow: hidden; border: 1px solid #ffffff2e; border-radius: 8px; background: #050914d9; box-shadow: 0 5px 18px #0007; }
.map-zoom-controls button { min-width: 34px; height: 32px; border: 0; border-right: 1px solid #ffffff20; background: transparent; color: var(--ink); padding: 0 9px; font-size: .78rem; font-weight: 700; cursor: pointer; }
.map-zoom-controls button:last-child { border-right: 0; border-left: 1px solid #ffffff20; }
.map-zoom-controls output { min-width: 50px; color: #bdc9dd; font-size: .68rem; font-variant-numeric: tabular-nums; text-align: center; }
.directory-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; }
.directory-identity strong { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; letter-spacing: .04em; }
@media (max-width: 760px) { .directory-identity { max-width: calc(100% - 220px); } }
@media (max-width: 620px) { .scene-copy { display: none; }.directory-identity { left: 14px; justify-items: start; max-width: calc(100% - 220px); transform: none; } }