:root{--font-family: "Space Grotesk", "Inter", system-ui, sans-serif;--font-family-display: var(--font-family);--page-padding: 24px clamp(18px, 4vw, 44px) 40px;--workspace-padding: 0;--page-bg: #ffffff;--page-text: #101112;--muted-text: #5e6168;--accent: #2f7d4c;--topbar-bg: rgba(255, 255, 255, .78);--topbar-border: rgba(18, 20, 24, .08);--topbar-shadow: 0 14px 30px -24px rgba(0, 0, 0, .35);--topbar-status-bg: rgba(16, 17, 18, .06);--topbar-status-border: rgba(16, 17, 18, .08);--topbar-status-text: var(--muted-text);--brand-badge-bg: #121418;--brand-badge-text: #ffffff;--brand-badge-accent: #2f7d4c;--brand-badge-shadow: 0 16px 24px -20px rgba(0, 0, 0, .4);--crumb-divider-color: var(--accent);--panel-bg: rgba(255, 255, 255, .88);--panel-border: rgba(18, 20, 24, .08);--panel-shadow: 0 20px 40px -28px rgba(0, 0, 0, .35);--panel-radius: 28px;--panel-rule: rgba(18, 20, 24, .08);--panel-muted-bg: rgba(255, 255, 255, .72);--panel-muted-border: rgba(18, 20, 24, .12);--hero-bg: rgba(255, 255, 255, .92);--hero-border: rgba(18, 20, 24, .08);--hero-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);--preview-bg: #ebe4d8;--card-bg: rgba(255, 255, 255, .92);--card-border: rgba(18, 20, 24, .08);--card-hover-border: rgba(18, 20, 24, .16);--card-selected-border: rgba(47, 125, 76, .45);--card-selected-bg: rgba(255, 255, 255, .96);--card-shadow: 0 18px 34px -28px rgba(0, 0, 0, .45);--card-hover-shadow: 0 24px 38px -30px rgba(0, 0, 0, .45);--card-selected-shadow: 0 22px 42px -28px rgba(47, 125, 76, .28);--pill-bg: rgba(18, 20, 24, .07);--pill-text: #25272c;--pill-accent-bg: rgba(47, 125, 76, .12);--pill-accent-text: #2f7d4c;--pill-subtle-bg: rgba(18, 20, 24, .05);--pill-subtle-text: var(--muted-text);--button-radius: 14px;--button-font-weight: 600;--button-letter-spacing: 0;--button-transform: none;--button-shadow: 0 16px 28px -24px rgba(0, 0, 0, .45);--button-primary-bg: #121418;--button-primary-text: #ffffff;--button-primary-border: transparent;--button-secondary-bg: #efe6d8;--button-secondary-text: #16181c;--button-secondary-border: transparent;--button-neutral-bg: #d8e3ef;--button-neutral-text: #193350;--button-neutral-border: transparent;--button-ghost-bg: transparent;--button-ghost-text: #2b4d6d;--button-ghost-border: rgba(43, 77, 109, .2);--button-danger-bg: #b03c2d;--button-danger-text: #ffffff;--button-danger-border: transparent;--dialog-backdrop: rgba(18, 20, 24, .45);--dialog-bg: #fff8ef;--dialog-border: rgba(18, 20, 24, .08);--dialog-shadow: 0 30px 70px -40px rgba(0, 0, 0, .6)}*,*:before,*:after{box-sizing:border-box}html,body,#app{min-height:100%}body{margin:0;font-family:var(--font-family);color:var(--page-text);background:var(--page-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body.mobile-preview-open{overflow:hidden}button,input,select,textarea{font:inherit}img{display:block;max-width:100%}.page{min-height:100vh;padding:var(--page-padding);display:flex;flex-direction:column;gap:0}.workspace{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(320px,.92fr);gap:24px;align-items:start;padding:var(--workspace-padding)}.primary-panel,.sidebar-panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--panel-radius);box-shadow:var(--panel-shadow)}.primary-panel{padding:24px;display:flex;flex-direction:column;gap:24px;min-width:0}.preview-panel,.map-panel{min-width:0}.map-panel{min-height:0}.preview-panel{padding:0;display:flex;flex-direction:column;gap:0;background:transparent;border:0;box-shadow:none}.grid-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}.grid-header-actions{display:flex;align-items:center;gap:12px}.section-label,.panel-kicker{margin:0;font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}.panel-title,.section-title{margin:8px 0 0;font-family:var(--font-family-display);line-height:1}.panel-title{font-size:clamp(1.15rem,1rem + .75vw,1.6rem)}.section-title{font-size:clamp(1.7rem,1.1rem + 2vw,2.8rem)}.section-copy,.grid-summary,.sidebar-note,.guide-list{color:var(--muted-text)}.section-copy{max-width:62ch;margin:12px 0 0;line-height:1.6}.section-badges{display:flex;flex-wrap:wrap;gap:10px}.hero-card{position:relative;display:flex;flex-direction:column;background:var(--hero-bg);border:1px solid var(--hero-border);border-radius:calc(var(--panel-radius) - 4px);overflow:hidden;box-shadow:var(--hero-shadow)}.hero-media,.card-preview{position:relative;background:var(--preview-bg);overflow:hidden}.hero-media{min-height:320px}.hero-media img,.card-preview img{width:100%;height:100%;object-fit:cover;object-position:center}.preview-stage{aspect-ratio:16 / 9;min-height:0}.preview-underlay,.preview-player-media{width:100%;height:100%}.preview-player-video,.preview-player-image,.preview-underlay{object-fit:contain;object-position:center}.preview-player-realtime{min-height:0}.preview-player-realtime,.preview-player-realtime .maplibregl-canvas-container,.preview-player-realtime .maplibregl-canvas,.preview-player-realtime .maplibregl-map{width:100%;height:100%}.preview-status-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;background:#1214187a;color:#fff}.preview-status-overlay.is-error{background:#121418a3}.preview-status-overlay p{margin:0;max-width:34ch;line-height:1.5}.preview-status-content{display:grid;justify-items:center;gap:10px;max-width:38ch}.preview-status-message{margin:0;font-size:clamp(1rem,.92rem + .6vw,1.3rem);font-weight:400;line-height:1.3;text-wrap:balance}.preview-status-link{appearance:none;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:.95rem;font-weight:700;line-height:1.2;text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1.5px;cursor:pointer}.preview-status-link:hover:not(:disabled),.preview-status-link:focus-visible:not(:disabled){opacity:.84}.preview-status-link:focus-visible{outline:2px solid currentColor;outline-offset:4px}.preview-status-link:disabled{cursor:wait;opacity:.72}.hero-fallback,.card-fallback{width:100%;height:100%;min-height:inherit;display:grid;place-items:center;padding:28px;text-align:center;color:var(--muted-text);letter-spacing:.08em;text-transform:uppercase}.hero-details{display:flex;flex-direction:column;gap:20px;padding:24px;border-top:1px solid var(--panel-rule)}.preview-player{display:flex;flex-direction:column}.preview-header,.hero-meta-row,.hero-actions,.preview-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.preview-header{align-items:flex-start;justify-content:space-between}.preview-header-actions{display:flex;align-items:center;gap:12px}.preview-player-controls{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:16px 24px;background:transparent;border:0;border-top:1px solid var(--panel-rule);border-radius:0;box-shadow:none}.preview-player-buttons{display:flex;gap:10px;flex-wrap:nowrap;align-items:center}.preview-player-buttons .btn{width:auto;flex:0 0 auto}.preview-player-scrub{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;min-width:0}.preview-player-range{width:100%;margin:0;accent-color:var(--accent)}.preview-player-time{min-width:3.25rem;font-size:.82rem;font-variant-numeric:tabular-nums;color:var(--muted-text);text-align:center}.hero-title,.card-title{margin:0;font-family:var(--font-family-display)}.hero-title{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.35rem);line-height:1.02}.hero-copy,.meta,.dialog-body{margin:0;line-height:1.55}.meta{color:var(--muted-text)}.meta strong{color:var(--page-text)}.status-pill{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;background:var(--pill-bg);color:var(--pill-text);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.status-pill.accent{background:var(--pill-accent-bg);color:var(--pill-accent-text)}.status-pill.subtle{background:var(--pill-subtle-bg);color:var(--pill-subtle-text)}.btn{appearance:none;border:1px solid transparent;border-radius:var(--button-radius);min-height:48px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;font-weight:var(--button-font-weight);letter-spacing:var(--button-letter-spacing);text-transform:var(--button-transform);text-align:center;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease,opacity .16s ease;box-shadow:var(--button-shadow)}.btn:hover:not(:disabled),.btn:focus-visible:not(:disabled){transform:translateY(-1px);filter:brightness(1.03)}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn:disabled{cursor:not-allowed;opacity:.55}.btn.primary{background:var(--button-primary-bg);color:var(--button-primary-text);border-color:var(--button-primary-border)}.btn.secondary{background:var(--button-secondary-bg);color:var(--button-secondary-text);border-color:var(--button-secondary-border)}.btn.neutral{background:var(--button-neutral-bg);color:var(--button-neutral-text);border-color:var(--button-neutral-border)}.btn.ghost{background:var(--button-ghost-bg);color:var(--button-ghost-text);border-color:var(--button-ghost-border)}.btn.danger{background:var(--button-danger-bg);color:var(--button-danger-text);border-color:var(--button-danger-border)}.btn.compact{min-height:38px;padding:0 14px;font-size:.8rem}.preview-actions{display:flex;flex-direction:column}.icon-btn{appearance:none;width:42px;height:42px;display:inline-grid;place-items:center;padding:0;border:1px solid var(--button-secondary-border);border-radius:var(--button-radius);background:var(--button-secondary-bg);color:var(--button-secondary-text);cursor:pointer;box-shadow:var(--button-shadow);transition:transform .16s ease,filter .16s ease,box-shadow .16s ease,opacity .16s ease}.icon-btn:hover:not(:disabled),.icon-btn:focus-visible:not(:disabled){transform:translateY(-1px);filter:brightness(1.03)}.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon-btn:disabled{cursor:not-allowed;opacity:.55}.icon-btn-svg{width:18px;height:18px}.icon-btn-svg.is-spinning{animation:spin .8s linear infinite}.map-grid-scroll{min-height:0;scrollbar-gutter:stable}.grid-footer{display:flex;justify-content:center;padding:16px 0 4px}.grid-load-more{min-width:min(100%,240px)}.preview-note{margin:0;color:var(--muted-text);line-height:1.5}.preview-close{display:none}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.card{min-width:0;min-height:100%;display:grid;grid-template-rows:auto 1fr;border:1px solid var(--card-border);border-radius:calc(var(--panel-radius) - 8px);overflow:hidden;background:var(--card-bg);box-shadow:var(--card-shadow);cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}.card:hover,.card:focus-visible{transform:translateY(-2px);border-color:var(--card-hover-border);box-shadow:var(--card-hover-shadow);outline:none}.card.is-selected{background:var(--card-selected-bg);border-color:var(--card-selected-border);box-shadow:var(--card-selected-shadow)}.card-preview{aspect-ratio:16 / 9}.card-body{padding:16px;display:grid;grid-template-rows:minmax(0,1fr) auto;align-content:start;gap:14px;min-height:116px}.card-copy{display:grid;gap:8px}.card-body>.status-pill{width:fit-content}.card-title{font-size:1.02rem;line-height:1.2;max-inline-size:24ch;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.card-copy .meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-panel{padding:20px;display:flex;flex-direction:column;gap:16px}.empty{border:1px dashed var(--panel-muted-border);border-radius:calc(var(--panel-radius) - 6px);padding:28px;text-align:center;background:var(--panel-muted-bg)}.preview-empty{border-style:solid;border-color:var(--panel-border);border-radius:var(--panel-radius);background:var(--panel-bg);box-shadow:var(--panel-shadow)}.empty h3{margin:0 0 8px;font-family:var(--font-family-display)}.empty p{margin:0;color:var(--muted-text);line-height:1.55}.dialog-backdrop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:var(--dialog-backdrop)}.dialog{width:min(420px,92vw);padding:20px;display:grid;gap:14px;background:var(--dialog-bg);border:1px solid var(--dialog-border);border-radius:22px;box-shadow:var(--dialog-shadow)}.dialog-title{margin:0;font-family:var(--font-family-display);font-size:1.05rem;font-weight:700}.auth-backdrop{z-index:1100}.auth-dialog{width:min(560px,92vw)}.auth-helpers,.auth-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.auth-token-link{flex:1 1 240px;min-height:46px}.auth-label{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-text)}.auth-input{width:100%;min-height:112px;padding:12px 14px;border:1px solid var(--panel-muted-border);border-radius:16px;background:#ffffffc7;color:var(--page-text);resize:vertical}.auth-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.auth-note,.auth-error{margin:0;line-height:1.5}.auth-note{color:var(--muted-text)}.auth-error{color:#b64533;font-weight:600}.startup-dialog{width:min(760px,94vw)}.startup-options{display:grid;gap:14px}.startup-option{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px;border:1px solid var(--panel-muted-border);border-radius:var(--button-radius);background:var(--panel-muted-bg)}.startup-option.is-disabled{opacity:.72}.startup-option-copy{display:grid;gap:8px}.startup-option-copy .dialog-body{color:var(--page-text)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(min-width:981px){.page{height:100vh;overflow:hidden}.workspace{flex:1 1 auto;min-height:0;align-items:stretch}.map-panel,.preview-panel{min-height:0}.map-grid-scroll{flex:1 1 auto;overflow-y:auto;padding-right:6px;margin-right:-6px}.preview-panel{overflow-y:auto;background:var(--panel-bg);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow)}.preview-panel .hero-card,.preview-panel .preview-empty{min-height:100%}.preview-panel .hero-card{background:transparent;border:0;border-radius:0;box-shadow:none}.preview-panel .preview-empty{border:0;border-radius:0;background:transparent;box-shadow:none}}@media(max-width:980px){.workspace{grid-template-columns:1fr}.preview-panel{position:fixed;inset:0;z-index:900;padding:16px;display:flex;align-items:center;justify-content:center;background:var(--dialog-backdrop);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}.preview-panel.is-mobile-open{opacity:1;visibility:visible;pointer-events:auto}.preview-panel .hero-card,.preview-panel .preview-empty{width:min(640px,100%);max-height:calc(100vh - 32px);overflow-y:auto}.preview-panel .hero-card{box-shadow:var(--dialog-shadow)}.preview-panel .preview-empty{margin:0}.preview-close{display:inline-grid;position:absolute;top:12px;right:12px;z-index:2;flex:0 0 auto}.preview-header{padding-right:56px}}@media(max-width:720px){.page{padding:16px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:580px){.preview-header,.hero-meta-row{flex-direction:column;align-items:stretch}.preview-header-actions{width:100%;justify-content:flex-start}.grid{grid-template-columns:1fr}.primary-panel,.sidebar-panel,.hero-details{padding:18px}.preview-player-controls{padding:14px 18px}.preview-player-controls{grid-template-columns:1fr}.preview-player-buttons{justify-content:flex-start}.preview-player-scrub{grid-template-columns:auto minmax(0,1fr) auto}.grid-header-actions{width:100%;justify-content:space-between}.btn{width:100%}.preview-close{width:42px}.auth-helpers,.auth-actions{flex-direction:column;align-items:stretch}.startup-option{grid-template-columns:1fr}.auth-helpers{flex-direction:row;align-items:center;justify-content:flex-start}.auth-helpers .btn{width:auto;max-width:100%}.auth-token-link{flex:0 1 auto;min-height:42px;padding-inline:16px}}@media(max-width:600px){.grid{grid-template-columns:1fr;gap:12px}.card{grid-template-columns:128px minmax(0,1fr);grid-template-rows:auto;align-items:stretch}.card-preview{width:100%;aspect-ratio:16 / 9;min-height:0;height:auto;align-self:center}.card-fallback{min-height:0;padding:12px;font-size:.7rem;letter-spacing:.05em}.card-body{display:flex;flex-direction:column;align-content:unset;justify-content:center;min-height:0;padding:10px 14px;gap:6px}.card-body>.status-pill{display:none}.card-copy{min-width:0;gap:4px}.card-title{max-inline-size:none;display:block;font-size:.94rem;line-height:1.15;white-space:nowrap;text-overflow:ellipsis}.card-copy .meta{font-size:.8rem}}