:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b0f14;
  color: #f3f4f5;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.environment-backdrop, .backdrop-layer, .backdrop-shade, #stage { position: fixed; inset: 0; }
.environment-backdrop { background: #bfc4c8; }
.backdrop-layer { background-position: center; background-size: cover; opacity: 0; transition: opacity 480ms ease; }
[data-background="day"] { background-image: url("../assets/day.png"); opacity: 1; }
[data-background="dusk"] { background-image: url("../assets/dusk.png"); }
[data-background="night"] { background-image: url("../assets/night.png"); }
[data-background="review"] { background-image: url("../assets/studio-review.png"); }
[data-background="japanese"] { background-image: url("../assets/studio-japanese.png"); }
[data-background="showcase"] { background-image: url("../assets/studio-showcase.png"); }
.backdrop-shade { background: linear-gradient(90deg, rgba(5,8,12,.32) 0%, transparent 34%, transparent 73%, rgba(5,8,12,.2) 100%); pointer-events: none; }
#stage { z-index: 1; display: block; width: 100%; height: 100%; }

.topbar, .hero-copy, .control-panel, .footer, .loading, .error { position: fixed; z-index: 2; }
.topbar { top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 24px; border-bottom: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg,rgba(4,7,10,.25),transparent); }
.brand, .status { display: flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.brand-mark { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(255,255,255,.44); border-radius: 50%; color: #f0c62e; }
.status { color: rgba(255,255,255,.72); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #41e2a5; box-shadow: 0 0 12px rgba(65,226,165,.8); }

.hero-copy { top: 50%; left: clamp(28px, 4vw, 72px); width: min(430px, 34vw); transform: translateY(-48%); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.eyebrow { margin: 0 0 24px; color: #f0c62e; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
h1 { margin: 0; font-size: clamp(42px, 4.4vw, 78px); font-weight: 520; line-height: .94; letter-spacing: -.055em; }
h1 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.lede { max-width: 390px; margin: 24px 0 0; color: rgba(255,255,255,.8); font-size: 13px; line-height: 1.7; }
.metrics { display: flex; gap: 36px; margin-top: 28px; }
.metrics div { display: grid; gap: 4px; }
.metrics strong { font-size: 17px; font-weight: 600; }
.metrics span { font-size: 8px; font-weight: 700; letter-spacing: .16em; }

.control-panel { top: 50%; right: 24px; width: 238px; padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 4px; background: rgba(14,19,25,.84); box-shadow: 0 18px 56px rgba(0,0,0,.28); backdrop-filter: blur(18px); transform: translateY(-50%); }
.panel-section, .switch-row, .download-button, .panel-note { border-top: 1px solid rgba(255,255,255,.1); }
.panel-section { margin-top: 14px; padding-top: 14px; }
.panel-heading { display: flex; justify-content: space-between; margin-bottom: 10px; color: #9099a2; font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.panel-heading span:last-child { color: #f0c62e; }
.environment-mode-grid, .three-grid, .view-grid { display: grid; gap: 5px; }
.environment-mode-grid { grid-template-columns: 1fr 1fr; }
.three-grid { grid-template-columns: repeat(3, 1fr); }
.view-grid { grid-template-columns: repeat(2, 1fr); }
.preset-caption { margin: 12px 0 7px; color: #6f7780; font-size: 7px; letter-spacing: .17em; }
.control-button { min-height: 34px; padding: 0 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 2px; background: rgba(255,255,255,.025); color: #9ba4ae; cursor: pointer; font-size: 9px; transition: 160ms ease; }
.control-button:hover { color: #fff; border-color: rgba(240,198,46,.44); }
.control-button.is-active { color: #fff; border-color: #d1a918; background: rgba(209,169,24,.14); }
.time-slider-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin-top: 8px; color: #929aa3; font-size: 8px; }
.time-slider-row input { width: 100%; accent-color: #e2b71c; }
.switch-row { display: flex; align-items: center; justify-content: space-between; min-height: 49px; margin-top: 14px; padding-top: 14px; color: #b7bec5; font-size: 9px; }
.switch-row small { display: block; margin-top: 3px; color: #69737d; font-size: 6px; letter-spacing: .15em; }
.switch { position: relative; width: 30px; height: 18px; padding: 0; border: 0; border-radius: 18px; background: #28323d; cursor: pointer; }
.switch span { position: absolute; top: 4px; left: 4px; width: 10px; height: 10px; border-radius: 50%; background: #b5c1cc; transition: transform 160ms ease; }
.switch.is-on { background: rgba(209,169,24,.45); }
.switch.is-on span { background: #f2cf51; transform: translateX(12px); }
.download-button { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin-top: 14px; padding: 14px 0 0; color: #eef0f2; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-decoration: none; }
.panel-note { margin: 14px 0 0; padding-top: 12px; color: #6e7882; font-size: 7px; line-height: 1.6; }
.footer { right: 24px; bottom: 18px; left: 24px; display: flex; justify-content: space-between; color: rgba(255,255,255,.62); font-size: 7px; font-weight: 700; letter-spacing: .16em; }
.loading, .error { top: 50%; left: 50%; display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-radius: 3px; background: rgba(7,10,13,.76); font-size: 8px; letter-spacing: .14em; transform: translate(-50%,-50%); }
.loading-ring { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.2); border-top-color: #f0c62e; border-radius: 50%; animation: spin .8s linear infinite; }
.is-hidden { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1050px) {
  .hero-copy { width: min(360px, 38vw); }
  h1 { font-size: clamp(38px, 5vw, 58px); }
  .metrics { gap: 20px; }
}

@media (max-width: 760px) {
  .topbar { height: 58px; padding: 0 14px; }
  .status { display: none; }
  .hero-copy { top: 78px; right: 14px; left: 14px; width: auto; transform: none; pointer-events: none; }
  .eyebrow, .lede, .metrics { display: none; }
  h1 { max-width: 340px; font-size: clamp(32px, 9vw, 46px); }
  .control-panel { top: auto; right: 10px; bottom: 34px; left: 10px; width: auto; padding: 12px; transform: none; }
  .control-panel section:first-child { display: grid; grid-template-columns: 1fr; }
  .panel-section { margin-top: 10px; padding-top: 10px; }
  .switch-row { display: inline-flex; width: calc(50% - 3px); min-height: 38px; margin-top: 10px; padding-top: 10px; }
  .switch-row + .switch-row { margin-left: 2px; }
  .download-button, .panel-note { display: none; }
  .footer { right: 14px; bottom: 12px; left: 14px; }
}

@media (max-width: 390px), (max-height: 700px) {
  .hero-copy { display: none; }
  .control-panel { max-height: calc(100vh - 80px); overflow: auto; }
  .panel-heading { margin-bottom: 7px; }
  .control-button { min-height: 30px; }
  .switch-row { font-size: 8px; }
  .footer span:first-child { display: none; }
}