/* Typography and accent colors follow the YIMU storefront's editorial sections. */
@font-face {
  font-family: "YIMU Display";
  src: url("/fonts/yimu-playfair-display-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "YIMU Text";
  src: url("/fonts/yimu-assistant-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --bg: #fff;
  --panel: #fff;
  --text: #111111;
  --muted: #73736d;
  --line: #e8e8e1;
  --lime: #79552c;
  --violet: #a28d7c;
  --danger: #a3352f;
  --surface: #f7f7f7;
  --ink: #111111;
  --font-display: "YIMU Display", Georgia, "Times New Roman", serif;
  --font-body: "YIMU Text", "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;
}

body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .015em;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
.ambient { display: none; }
.shell { width: min(1320px, calc(100% - 64px)); }
a, button, summary, select { -webkit-tap-highlight-color: transparent; }
:is(a, button, summary, select):focus-visible { outline: 2px solid var(--lime); outline-offset: 5px; }
.slot-upload:focus-within { outline: 2px solid var(--lime); outline-offset: -2px; }

.topbar {
  width: 100vw;
  height: 76px;
  margin-left: calc((100% - 100vw) / 2);
  padding-inline: max(32px, calc((100vw - 1320px) / 2));
  background: #000;
}
.topbar.is-scrolled { background: linear-gradient(180deg, rgba(0,0,0,.76), rgba(0,0,0,.36)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.brand { gap: 12px; font-family: var(--font-display); font-size: 21px; font-weight: 400; letter-spacing: -.02em; }
.brand-mark { width: 28px; height: 28px; background: transparent; border: 1px solid #5d5d58; color: #fff; font-size: 17px; font-weight: 500; }
.nav-links { gap: 32px; margin-right: 44px; }
.topbar .nav-links a { font-size: 13px; font-weight: 400; letter-spacing: .08em; color: #deded8; }
.topbar .nav-links a:hover { color: #fff; }
.topbar .local-state { color: #aaa9a2; font-size: 11px; }
.local-state span, .local-state.warming span, .local-state.busy span { width: 5px; height: 5px; background: #b3a18e; box-shadow: none; }
.local-state.cold span, .local-state.cold-start span { background: #85857f; }

.hero { min-height: 310px; padding: 54px 0 32px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; border-bottom: 0; }
.hero > div:first-child { min-width: 0; }
.eyebrow { margin-bottom: 18px; color: var(--lime); font-size: 11px; line-height: 1.5; font-weight: 400; letter-spacing: .2em; }
.hero h1 { font-family: var(--font-display); font-size: clamp(42px, 4.6vw, 64px); font-weight: 400; line-height: 1.1; letter-spacing: -.04em; }
.lead { margin-top: 20px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.template-name { font-family: var(--font-display); font-size: clamp(26px, 2.5vw, 36px); line-height: 1.2; font-weight: 400; letter-spacing: -.03em; padding-block: 8px; }
.template-name select { color: var(--text); background: #fff; font-size: 14px; }
.template-description { margin-top: 24px; border-top-color: var(--line); border-bottom: 0; }
.template-description summary { min-height: 48px; font-size: 17px; font-weight: 700; letter-spacing: .025em; }
.template-description summary span { font-size: 17px; color: var(--muted); }
.template-description p { max-width: 60ch; margin: 2px 0 12px; font-size: 14px; line-height: 1.75; }

.workspace { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: 24px; padding: 28px 0 0; }
.panel { padding: 24px; background: #fff; border-color: var(--line); }
.guide-title { margin: 0 0 24px; min-height: 28px; font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: -.015em; }
.control-heading { min-height: 28px; align-items: center; gap: 12px; }
.panel-heading h2 { font-family: var(--font-display); font-size: 23px; font-weight: 400; line-height: 28px; letter-spacing: -.025em; }
.slot-count { font-size: 10px; font-weight: 500; letter-spacing: .08em; color: var(--muted); }
.guide-viewport { border: 0; background: var(--surface); }
.guide-meta { margin: 16px 0 24px; align-items: baseline; font-size: 11px; line-height: 1.5; gap: 12px; }
.guide-meta strong { font-size: 12px; font-weight: 500; }
.guide-meta span:last-child { letter-spacing: .04em; }
.specs { border-color: var(--line); background: var(--line); }
.specs div { padding: 16px 18px; background: var(--surface); }
.specs dt { font-size: 11px; }
.specs dd { margin-top: 6px; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.shell .carousel-arrow { width: 56px; height: 56px; padding: 0; border-radius: 50% !important; border: 1px solid rgba(17,17,17,.1); background: rgba(255,255,255,.18); color: rgba(17,17,17,.88); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); box-shadow: none; transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; }
.carousel-arrow svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(255,255,255,.45)); transition: transform .2s ease; }
.shell .carousel-arrow:hover:not(:disabled) { background: rgba(255,255,255,.34); border-color: rgba(17,17,17,.2); color: var(--ink); }
.carousel-arrow.previous:hover:not(:disabled) svg { transform: translateX(-2px); }
.carousel-arrow.next:hover:not(:disabled) svg { transform: translateX(2px); }
.carousel-arrow:disabled { opacity: .24; box-shadow: none; }
.guide-marker { background: var(--ink); border-color: #fff; }

.control-panel { height: var(--slot-panel-height, auto); min-height: 0; }
.control-heading { flex-shrink: 0; }
.slots-container { flex: 0 1 auto; min-height: 0; margin-top: 24px; margin-bottom: 16px; max-height: none; gap: 8px; padding-right: 4px; overflow: auto; scrollbar-color: #c8c8c0 transparent; }
.slot-upload {
  min-height: 76px;
  padding: 10px;
  grid-template-columns: 32px 38px minmax(28px, 1fr) 100px auto;
  gap: 8px;
  align-items: center;
  border-color: var(--line);
  background: #fff;
  transition: border-color .18s ease, background .18s ease;
}
.slot-upload:hover { background: #fafaf8; border-color: #bdbdb5; }
.slot-upload.advanced { grid-template-columns:28px 32px minmax(0,1fr) minmax(105px,.65fr) auto auto; }
.uv-guide-download { position:relative; z-index:2; color:var(--ink); font-size:11px; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.advanced-mode-controls { margin-top:10px; text-align:center; }
.advanced-mode-button { width:100%; min-height:42px; border:1px solid var(--ink); background:#fff; color:var(--ink); cursor:pointer; font:600 12px/1 inherit; }
.advanced-mode-controls small { display:block; margin-top:7px; color:var(--muted); font-size:11px; }
.original-project-button { align-self:center; display:inline-flex; align-items:center; gap:7px; padding:3px 0; border:0; color:inherit; font-size:12px; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.original-project-button:hover { opacity:.72; }
.video-panel:not(.final-panel) .video-action { align-self:stretch; justify-content:center; }
#videoStatus { display:block; overflow-wrap:anywhere; }
#videoStatus:empty { display:none; }
.slot-upload.is-drag-over { background: #f8f5f0; border-color: var(--lime); outline: 1px dashed var(--lime); outline-offset: -4px; }
.slot-upload.is-drag-over .slot-choice b { color: #fff; background: var(--lime); border-color: var(--lime); }
.slot-number { width: 30px; height: 32px; border-color: #d9d9d2; color: #797970; font-family: inherit; font-size: 11px; font-variant-numeric: tabular-nums; }
.slot-thumb { width: 32px; height: 42px; border: 1px solid #bdbdb7; background: #fff; box-shadow: none; }
.slot-copy, .slot-dimensions { gap: 4px; }
.slot-copy strong { font-size: 13px; font-weight: 400; letter-spacing: .015em; }
.slot-dimensions strong { font-size: 12px; font-weight: 400; letter-spacing: .015em; }
.slot-dimensions small { font-size: 12px; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; }
.slot-choice { min-width: 0; flex-direction: row; align-items: center; gap: 6px; }
.slot-choice b { padding: 7px 9px; font-size: 11px; line-height: 1.4; font-weight: 500; border-color: #d9d9d2; background: #fff; }
.slot-ready { color: var(--lime); font-size: 10px; }
.primary-button { min-height: 54px; padding-inline: 18px; color: #fff; background: var(--ink); font-size: 13px; font-weight: 500; letter-spacing: .015em; }
.control-panel .primary-button { margin-top: 0; flex-shrink: 0; }
.primary-button b { font-size: 20px; font-weight: 400; }
.action-arrow { width: 32px; height: 32px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.action-arrow-down { transform: rotate(90deg); }
.primary-button, .secondary-button, .download-button { transition: background .18s ease, border-color .18s ease, color .18s ease; }
.primary-button:hover:not(:disabled), .secondary-button:hover:not(:disabled), .download-button:hover { transform: none; }
.primary-button:hover:not(:disabled) { background: #3d3d38; }
button:disabled { opacity: .5; }

.results { padding: 60px 0 64px; }
.results-heading { margin-bottom: 24px; gap: 20px; }
.results .eyebrow { margin-bottom: 10px; }
.results-heading h2 { font-family: var(--font-display); font-size: 34px; line-height: 1.2; font-weight: 400; letter-spacing: -.025em; }
.progress-pill { padding: 8px 12px; font-size: 11px; font-weight: 400; border-color: var(--line); background: #fff; }
.progress-pill b { font-weight: 400; }
.progress-pill span { width: 5px; height: 5px; background: #b0b0a8; }
.progress-pill.active span, .progress-pill.ready span { background: var(--lime); }
.progress-pill.failed span { background: var(--danger); }
.scene-grid { gap: 20px; }
.scene-card { flex-basis: calc((100% - 40px) / 3); background: var(--surface); border-color: var(--line); }
.scene-wait { color: #8c8c82; font-size: 12px; }
.scene-wait::before { display: none; }
.scene-label { left: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 5px 9px; color: var(--text); background: rgba(255,255,255,.18); border: 0; font-family: var(--font-display); font-size: 14px; font-weight: 400; line-height: 1.35; letter-spacing: -.015em; text-shadow: 0 1px 2px rgba(255,255,255,.65); backdrop-filter: none; pointer-events: none; }
.scene-scroll-hint { margin-top: 14px; font-size: 11px; }
.scene-arrow.previous { left: -28px; }
.scene-arrow.next { right: -28px; }
.scene-spinner { border-radius: 50% !important; }
.video-panel { margin-top: 32px; padding: 30px; background: var(--surface); border-color: var(--line); gap: 32px; }
.video-panel h2 { font-family: var(--font-display); font-size: 29px; line-height: 1.25; font-weight: 400; letter-spacing: -.025em; }
.video-panel p:not(.eyebrow) { margin-top: 12px; max-width: 60ch; font-size: 13px; line-height: 1.7; }
.video-action { width: 260px; min-width: 240px; flex-shrink: 0; gap: 12px; }
.video-action small { font-size: 11px; line-height: 1.6; }
.secondary-button, .download-button { min-height: 48px; font-size: 12px; font-weight: 500; letter-spacing: .01em; }
.secondary-button { color: var(--text); background: #fff; border: 1px solid #d4d4cb; }
.secondary-button:hover:not(:disabled) { background: #ebebe5; border-color: #b7b7ab; }
.download-button { background: var(--ink); color: #fff; border-color: var(--ink); }
.download-button:hover { background: #42423b; }
.video-progress > div:first-child { color: var(--muted); font-size: 11px; }
.video-progress > div:first-child b { color: var(--text); font-weight: 500; }
.video-progress-track { height: 3px; background: #deded6; box-shadow: none; }
.video-progress-track span { background: var(--lime); box-shadow: none; }
.video-panel.final-panel { margin-top: 16px; background: var(--ink); border-color: var(--ink); color: #f5f5ee; }
.final-panel .eyebrow { color: #c1ad96; }
.final-panel p:not(.eyebrow), .final-panel .video-action small, .final-panel .video-progress > div:first-child { color: #bcbcb1; }
.final-panel .video-progress > div:first-child b { color: #fff; }
.final-panel .video-progress-track { background: #48483f; }
.final-panel .video-progress-track span { background: #c1ad96; }
.final-panel .secondary-button { color: #f5f5ee; background: transparent; border-color: #6b6b60; }
.final-panel .secondary-button:hover:not(:disabled), .final-panel .download-button { background: #f5f5ee; border-color: #f5f5ee; color: var(--ink); }
footer { min-height: 84px; height: auto; padding-block: 24px; gap: 24px; font-size: 11px; color: #8b8b80; border-color: var(--line); }

@container slot-panel (max-width: 440px) {
  .slot-upload { grid-template-columns: 28px 32px minmax(24px, 1fr) 88px auto; gap: 6px; padding: 10px 8px; }
  .slot-number { width: 27px; height: 30px; }
  .slot-thumb { width: 29px; height: 38px; }
  .slot-dimensions strong { font-size: 11px; }
  .slot-choice b { padding-inline: 7px; font-size: 10px; }
  .slot-ready { font-size: 9px; }
}
@container slot-panel (max-width: 350px) {
  .slot-upload { min-width: 350px; }
  .slots-container { overflow-x: auto; }
}
@media (max-width: 1160px) {
  .workspace { grid-template-columns: 1fr; }
  .hero { grid-template-columns: minmax(0, 1fr) auto; }
  .template-name { font-size: 26px; }
  .control-panel { height: auto; }
  .slots-container { flex: 0 1 auto; max-height: 480px; }
}
@media (max-width: 800px) {
  .shell { width: calc(100% - 40px); }
  .topbar { padding-inline: 20px; }
  .nav-links { gap: 20px; margin-right: 0; }
  .local-state { display: none; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding: 40px 0 16px; gap: 24px; }
  .template-name { justify-self: start; font-size: 24px; }
  .workspace { padding-top: 24px; gap: 20px; }
  .panel { padding: 24px; }
  .slots-container { overflow: auto; }
  .results { padding: 44px 0; }
  .scene-card { flex-basis: calc((100% - 20px) / 2); }
  .scene-arrow.previous { left: 8px; }
  .scene-arrow.next { right: 8px; }
  .video-panel { padding: 24px; gap: 24px; }
  .video-action { width: 100%; min-width: 0; }
}
@media (max-width: 480px) {
  .shell { width: calc(100% - 32px); }
  .topbar { height: 64px; padding-inline: 16px; }
  .brand { font-size: 18px; }
  .hero h1 { font-size: 42px; }
  .lead { font-size: 14px; }
  .panel { padding: 16px; }
  .guide-title { font-size: 17px; }
  .panel-heading h2 { font-size: 22px; }
  .guide-meta { grid-template-columns: minmax(0, 1fr) auto; }
  .specs div { padding: 14px; }
  .results-heading { align-items: start; flex-direction: column; gap: 16px; }
  .results-heading h2 { font-size: 30px; }
  .scene-card { flex-basis: 100%; }
  .scene-arrow.previous { left: 8px; }
  .scene-arrow.next { right: 8px; }
  .video-panel h2 { font-size: 26px; }
  footer { align-items: flex-start; gap: 8px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}