.nav-link:not(.current)::after { display:none; }
.header-inner { gap:32px; }
.render-workbench { max-width:1640px; margin:auto; padding:16px 24px 24px; }
.render-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:18px; }
.render-heading h1 { font-size:22px; margin-top:2px; overflow-wrap:anywhere; }
.render-back { display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:12px; min-height:28px; }
.render-back svg { width:14px; height:14px; }
.render-heading-actions { display:flex; gap:18px; align-items:center; flex:none; }
.render-heading-actions .text-button { font-size:13px; }
.settings-toggle { padding:6px; border-radius:7px; position:relative; }
.settings-toggle::before { content:""; position:absolute; inset:6px; border-radius:6px; }
.settings-toggle:hover { background:transparent; }
.settings-toggle:hover::before { background:var(--sage); }
.settings-toggle svg { position:relative; width:21px; height:21px; }
.settings-toggle[aria-expanded=false] svg { transform:scaleX(-1); }
.render-layout { display:flex; gap:20px; align-items:stretch; }
.render-settings { width:304px; flex:none; display:flex; flex-direction:column; height:calc(100dvh - 165px); min-height:580px; max-height:790px; border-right:1px solid var(--line); padding-right:20px; }
.settings-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; }
.settings-heading h2 { font-size:18px; }
.close-settings { display:none; }
.settings-scroll { overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:0 2px 4px; }
.library-tabs { display:flex; gap:26px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.library-tabs button { min-height:40px; padding:0 0 10px; border-bottom:2px solid transparent; color:var(--muted); }
.library-tabs button[aria-selected=true] { border-color:var(--ink); color:var(--ink); font-weight:600; }
.style-search { display:block; width:100%; margin:0 0 16px; }
.style-search input { font-size:12px; }
.style-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 9px; min-height:110px; }
.style-card { min-width:0; position:relative; align-self:start; }
.style-choice { display:block; width:100%; text-align:left; padding:0; border-radius:6px; }
.style-media { display:flex; align-items:center; justify-content:center; aspect-ratio:1.25; background:#edf0e8; border-radius:6px; overflow:hidden; border:1px solid transparent; }
.style-card.selected .style-media { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.style-symbol { color:#829385; }
.style-symbol svg { width:28px; height:28px; stroke-width:1; }
.style-media img { width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .15s; }
.style-media img.loaded { opacity:1; }
.style-name { display:block; font-size:12px; padding-top:6px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.style-preview { position:absolute; right:1px; bottom:22px; width:44px; height:44px; display:flex; justify-content:flex-end; align-items:center; padding:8px; color:white; background:transparent; border-radius:4px; -webkit-tap-highlight-color:transparent; }
.style-preview svg { width:17px; height:17px; filter:drop-shadow(0 1px 2px #193e35); }
.style-preview:hover,.style-preview:focus,.style-preview:active { background:transparent; }
.style-preview:focus-visible { outline:2px solid white; outline-offset:-4px; }
.style-pager { display:flex; justify-content:center; gap:16px; align-items:center; font-size:12px; margin:8px 0; color:#718376; }
.style-pager svg { width:15px; height:15px; }
.style-pager .icon-button { min-height:38px; }
.style-empty { grid-column:1/-1; padding:30px 6px; color:var(--muted); font-size:13px; line-height:1.7; }
.case-unavailable { font-size:10px; color:var(--muted); padding:6px; }
.prompt-label { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:12px 0 9px; }
.prompt-label span { color:var(--muted); font-size:11px; font-weight:400; }
#render-prompt { font-size:13px; min-height:106px; resize:vertical; background:transparent; }
.model-label { display:block; font-size:12px; margin:14px 0 6px; }
.render-model { width:100%; font:inherit; font-size:13px; min-height:44px; padding:7px 10px; color:var(--ink); border:1px solid var(--line); border-radius:6px; background:var(--paper); max-width:100%; }
.model-change { font-size:12px; line-height:1.6; padding:8px 0; color:var(--muted); }
.model-change .text-button { font-size:12px; min-height:44px; text-decoration:underline; }
.model-detail { font-size:11px; line-height:1.6; color:var(--muted); margin:6px 0 0; overflow-wrap:anywhere; }
.task-model { width:100%; font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.render-record-info .history-model { font-size:11px; overflow-wrap:anywhere; }
textarea:focus-visible,select:focus-visible { outline:2px solid #819c8a; outline-offset:2px; }
.render-submit-area { margin-top:auto; padding-top:12px; }
.render-submit-area dl { margin:0; font-size:12px; }
.render-submit-area dl > div { display:flex; justify-content:space-between; gap:12px; padding:4px 0; }
.render-submit-area dt { color:#7a8c80; }
.render-submit-area dd { margin:0; }
.render-submit-area .primary { width:100%; margin-top:12px; }
.render-availability { font-size:12px; margin-top:10px; color:var(--muted); }
.render-availability:empty { display:none; }
.render-main { flex:1; min-width:0; }
.render-canvas { height:calc(100dvh - 220px); min-height:400px; max-height:680px; }
.compare-stage { --split:50%; --mode-row-height:0px; isolation:isolate; }
.compare-stage.has-mode-row { --mode-row-height:36px; }
.compare-stage canvas { position:absolute; inset:var(--mode-row-height) 0 0; width:100%; height:calc(100% - var(--mode-row-height)); }
.compare-stage .compare-result { pointer-events:none; clip-path:inset(0 0 0 var(--split)); }
.compare-handle { position:absolute; left:var(--split); transform:translateX(-50%); top:var(--mode-row-height); bottom:0; width:44px; padding:0; cursor:ew-resize; touch-action:none; }
.compare-handle::before { content:""; position:absolute; top:0; bottom:0; left:21px; width:2px; background:#fafaf5; box-shadow:0 0 4px #193e3526; }
.compare-handle span { position:absolute; top:45%; left:0; width:44px; height:44px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 12px #193e3520; }
.compare-handle svg { width:15px; height:15px; }
.compare-stage .viewer-controls { width:max-content; padding:0; bottom:20px; border-radius:0; max-width:calc(100% - 12px); background:transparent; box-shadow:none; }
.compare-stage .viewer-buttons { gap:2px; overflow-x:auto; scrollbar-width:none; }
.compare-stage .viewer-buttons::-webkit-scrollbar { display:none; }
.compare-stage .viewer-buttons .icon-button { position:relative; border:0; border-radius:0; flex:none; width:36px; height:36px; min-width:36px; min-height:36px; padding:9px; color:#fff; background:transparent; }
.compare-stage .viewer-buttons .icon-button svg { width:18px; height:18px; filter:drop-shadow(0 0 1px #000c) drop-shadow(0 1px 2px #0009); }
.compare-stage .viewer-buttons .icon-button:hover { background:transparent; }
.compare-stage .viewer-buttons .icon-button[aria-pressed=true] { background:transparent; }
.compare-stage .viewer-buttons .icon-button[aria-pressed=true]::after { content:""; position:absolute; bottom:4px; left:calc(50% - 5px); width:10px; height:1px; background:currentColor; box-shadow:0 1px 2px #0009; }
.task-status { margin-top:14px; padding:12px 0; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 20px; }
.task-status > div { display:flex; align-items:center; flex-wrap:wrap; gap:8px 20px; }
.task-status strong { font-size:14px; font-weight:600; }
.task-status span,.task-billing { color:var(--muted); font-size:12px; }
.task-error { color:var(--danger); font-size:13px; width:100%; }
.task-billing { width:100%; }
.task-status .text-button { font-size:12px; }
.render-error { padding:12px 0; }
.settings-backdrop { display:none; }
.shared-comparison .render-canvas { min-height:400px; height:calc(100dvh - 200px); }
.case-modal { width:900px; }
.case-view { height:50vh; min-height:280px; }
.case-words { margin-top:18px; font-size:13px; }
.case-prompt { color:var(--muted); font-size:12px; margin-top:8px; }
.style-reference-modal { width:900px; }
.style-reference-view { min-height:160px; display:flex; align-items:center; justify-content:center; background:#edf0e8; border-radius:8px; overflow:hidden; }
.style-reference-image { display:block; width:100%; max-height:64vh; object-fit:contain; opacity:0; }
.style-reference-image.loaded { opacity:1; }
.render-records { margin-top:16px; }
.render-record { display:flex; align-items:center; gap:20px; border-bottom:1px solid var(--line); padding:12px 0; }
.render-record-picture { width:128px; height:76px; flex:none; background:var(--sage); border-radius:6px; overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:11px; }
.render-record-picture img { width:100%; height:100%; object-fit:cover; opacity:0; }
.render-record-picture img.loaded { opacity:1; }
.render-record-info { flex:1; min-width:0; }
.render-record-info h2 { font-size:15px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.render-record-info p { display:flex; gap:20px; color:var(--muted); margin-top:7px; font-size:12px; }
.render-record .button { font-size:12px; font-weight:400; }
.history-loading { padding:60px 0; text-align:center; color:var(--muted); }
.card-ai { position:absolute; right:8px; top:8px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:#fafaf5eb; border-radius:6px; z-index:1; }
.panorama-card { position:relative; }
.card-ai svg { width:18px; height:18px; }
.card-ai:hover { background:var(--paper); }
.viewer-ai { display:inline-flex; align-items:center; gap:6px; min-height:36px; font-size:12px; margin-left:6px; }
@media (min-width:1600px) { .render-settings { width:324px; } }
@media (max-width:1100px) and (min-width:761px) { .render-workbench { padding:20px; } .render-settings { width:290px; padding-right:18px; } .render-layout { gap:18px; } }
@media (max-width:760px) {
  .render-workbench { padding:12px 16px 16px; height:calc(100dvh - 56px); min-height:520px; display:flex; flex-direction:column; }
  .render-heading { padding:0 0 12px; gap:10px; flex:none; }
  .render-heading h1 { font-size:20px; }
  .render-heading-actions { gap:6px; }
  .render-heading-actions .text-button { font-size:12px; }
  .render-heading-actions .settings-toggle { min-width:44px; }
  .render-back { font-size:11px; }
  .render-layout { display:flex; flex:1; min-height:0; }
  .render-main { display:flex; flex-direction:column; min-height:0; }
  .render-canvas,.shared-comparison .render-canvas { flex:1; min-height:320px; height:auto; max-height:none; border-radius:8px; }
  .render-settings { position:fixed; left:0; right:0; bottom:0; z-index:95; width:auto; height:auto; min-height:0; max-height:85vh; max-height:85dvh; border:1px solid var(--line); border-radius:16px 16px 0 0; background:var(--paper); padding:14px 22px calc(14px + env(safe-area-inset-bottom)); box-shadow:0 -10px 60px #193e3510; }
  .settings-heading { padding-bottom:8px; }
  .settings-heading h2 { font-size:18px; }
  .close-settings { display:flex; }
  .settings-scroll { min-height:0; }
  .settings-open .settings-backdrop { display:block; position:fixed; inset:0; background:#193e3538; z-index:94; }
  .style-grid { gap:12px; }
  .style-media { aspect-ratio:1.65; }
  .style-preview { width:44px; height:44px; bottom:20px; }
  .style-pager { margin:4px 0; }
  .style-pager .icon-button { min-height:44px; }
  .render-submit-area { border-top:1px solid var(--line); padding-top:10px; }
  .render-submit-area dl { display:flex; justify-content:space-between; gap:10px; }
  .render-submit-area dl > div { display:block; }
  .render-submit-area dd { padding-top:2px; }
  .render-model { font-size:16px; }
  #render-prompt { font-size:16px; min-height:98px; }
  .style-search input { font-size:16px; }
  .task-status,.render-error { margin-inline:0; flex:none; }
  .task-status > div { gap:6px; display:block; }
  .task-status span { display:block; margin-top:4px; }
  .compare-stage .viewer-controls { bottom:10px; }
  .compare-stage .viewer-buttons { gap:8px; }
  .case-modal { padding:16px; }
  .case-view { min-height:300px; height:52vh; }
  .render-record { gap:12px; flex-wrap:wrap; padding:12px 0; }
  .render-record-picture { width:92px; height:64px; }
  .render-record-info h2 { font-size:14px; }
  .render-record-info p { gap:10px; font-size:11px; }
  .render-record .button { margin-left:auto; padding:8px 14px; }
  .card-ai { width:44px; height:44px; right:4px; top:4px; }
  .viewer-controls p { display:none; }
}
.compare-stage:fullscreen,.compare-stage.immersive { height:100dvh; max-height:none; min-height:0; border-radius:0; }
.compare-modes { position:absolute; inset:0 0 auto; height:var(--mode-row-height); display:flex; align-items:stretch; justify-content:center; gap:18px; padding:0 14px; background:var(--paper); border-bottom:1px solid var(--line); z-index:2; white-space:nowrap; }
.compare-modes button { min-width:44px; min-height:0; height:100%; padding:0 2px; font-size:11px; color:var(--muted); border-radius:0; border-bottom:2px solid transparent; }
.compare-modes button[aria-pressed=true] { color:var(--ink); border-bottom-color:var(--ink); font-weight:600; }
.compare-modes button:hover:not(:disabled):not([aria-pressed=true]) { background:var(--sage); }
.compare-modes button > svg { display:none; }
.compare-stage[data-mode=source] .compare-result { opacity:0; }
.compare-stage[data-mode=result] .compare-source { opacity:0; }
.compare-stage[data-mode=result] .compare-result { clip-path:none; }
.compare-stage[data-mode]:not([data-mode=compare]) .compare-handle { display:none; pointer-events:none; }
.landscape-exit { position:absolute; top:8px; right:8px; z-index:4; width:44px; height:44px; padding:13px; color:#fff; background:transparent; border:0; border-radius:0; }
.landscape-exit:hover { background:transparent; }
.landscape-exit svg { width:18px; height:18px; filter:drop-shadow(0 0 1px #000c) drop-shadow(0 1px 2px #0009); }
.landscape-hint { position:absolute; top:64px; left:50%; transform:translateX(-50%); border-radius:6px; background:#fafaf5e8; padding:8px 12px; font-size:12px; white-space:nowrap; pointer-events:none; }
.render-workbench.touch-mobile { height:calc(100dvh - 62px); min-height:0; display:flex; flex-direction:column; padding:10px 16px 16px; }
.touch-mobile .render-heading { flex:none; padding-bottom:12px; }
.touch-mobile .render-layout { display:flex; flex:1; min-height:0; }
.touch-mobile .render-main { display:flex; flex-direction:column; min-height:0; }
.touch-mobile .render-canvas { flex:1; height:auto; min-height:150px; max-height:none; }
.touch-mobile .task-status,.touch-mobile .render-error { flex:none; }
.touch-mobile .render-settings { position:fixed; left:0; right:0; bottom:0; z-index:95; width:auto; height:auto; min-height:0; max-height:85dvh; border:1px solid var(--line); border-radius:16px 16px 0 0; background:var(--paper); padding:14px 22px calc(14px + env(safe-area-inset-bottom)); }
.touch-mobile .settings-scroll { min-height:0; }
.touch-mobile .close-settings { display:flex; }
.touch-mobile.settings-open .settings-backdrop { display:block; position:fixed; inset:0; background:#193e3538; z-index:94; }
.render-workbench.landscape-view { position:fixed; inset:0; z-index:90; width:100%; height:100dvh; max-width:none; min-height:0; padding:0; background:var(--paper); }
.landscape-view .render-heading,.landscape-view .task-status,.landscape-view .render-error,.landscape-view .capture-reminder { display:none; }
.landscape-view .render-layout,.landscape-view .render-main { height:100%; min-height:0; display:block; }
.landscape-view .render-canvas,.compare-stage.landscape-view { width:100%; height:100dvh; max-height:none; min-height:0; border-radius:0; }
.compare-stage.landscape-view { position:fixed; inset:0; z-index:110; }
.landscape-stage .viewer-controls { bottom:calc(8px + env(safe-area-inset-bottom)); }
.landscape-stage .viewer-controls p { display:none; }
.landscape-stage [data-view=landscape],.landscape-stage [data-view=full] { display:none; }
.landscape-view .render-settings { position:fixed; top:60px; bottom:0; left:auto; right:0; z-index:100; width:min(380px,100%); height:auto; max-height:calc(100dvh - 60px); min-height:0; border:1px solid var(--line); border-radius:12px 0 0 0; background:var(--paper); padding:10px 18px; }
.landscape-view .close-settings { display:flex; }
.landscape-view .render-settings { padding:6px 12px; }
.landscape-view .settings-heading { flex:none; padding-bottom:0; min-height:44px; }
.landscape-view .settings-heading h2 { font-size:16px; }
.landscape-view .settings-scroll { flex:1; min-height:0; }
.landscape-view .library-tabs { margin-bottom:4px; gap:22px; }
.landscape-view .library-tabs button { min-height:44px; padding:0; font-size:12px; }
.landscape-view .style-search { margin-bottom:6px; }
.landscape-view .style-search input { min-height:44px; font-size:16px; }
.landscape-view .style-grid { gap:8px; }
.landscape-view .style-media { aspect-ratio:1.7; }
.landscape-view .style-name { padding-top:4px; font-size:11px; }
.landscape-view .style-preview { height:44px; bottom:17px; }
.landscape-view .render-submit-area { flex:none; margin-top:0; padding-top:6px; border-top:1px solid var(--line); }
.landscape-view .render-submit-area dl { display:flex; gap:12px; }
.landscape-view .render-submit-area dl > div { display:flex; flex:1; justify-content:space-between; gap:4px; padding:2px 0; }
.landscape-view .render-submit-area dt { font-size:11px; }
.landscape-view .render-submit-area dd { padding:0; font-size:11px; }
.landscape-view .render-submit-area .primary { margin-top:4px; min-height:44px; padding:6px 12px; }
.landscape-view .render-availability { margin-top:4px; }
.landscape-view.settings-open .settings-backdrop { display:block; position:fixed; top:60px; left:0; right:0; bottom:0; z-index:94; background:#193e3538; }
@media (max-width:760px) {
  .render-workbench.touch-mobile { height:calc(100dvh - 56px); min-height:520px; }
  .compare-stage.has-mode-row { --mode-row-height:44px; }
  .compare-stage .viewer-buttons { gap:2px; }
  .render-workbench.landscape-view { height:100dvh; min-height:0; }
}

.touch-mobile .compare-stage.has-mode-row { --mode-row-height:44px; }
.compare-stage.has-mode-row:is(.landscape-stage,.immersive,:fullscreen) { --mode-row-height:0px; }
.compare-stage:is(.landscape-stage,.immersive,:fullscreen) .compare-modes { inset:8px auto auto 50%; transform:translateX(-50%); width:max-content; height:44px; padding:0; gap:2px; border:0; background:transparent; }
.compare-stage:is(.landscape-stage,.immersive,:fullscreen) .compare-modes button { position:relative; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:13px; color:#fff; background:transparent; border:0; opacity:.7; }
.compare-stage:is(.landscape-stage,.immersive,:fullscreen) .compare-modes button > span { display:none; }
.compare-stage:is(.landscape-stage,.immersive,:fullscreen) .compare-modes button > svg { display:block; width:18px; height:18px; filter:drop-shadow(0 0 1px #000c) drop-shadow(0 1px 2px #0009); }
.compare-stage:is(.landscape-stage,.immersive,:fullscreen) .compare-modes button[aria-pressed=true] { opacity:1; }
.compare-stage:is(.landscape-stage,.immersive,:fullscreen) .compare-modes button:disabled { opacity:.28; }
.compare-stage:is(.landscape-stage,.immersive,:fullscreen) .compare-modes button[aria-pressed=true]::after { content:""; position:absolute; bottom:4px; left:17px; width:10px; height:1px; background:currentColor; box-shadow:0 1px 2px #0009; }
.compare-stage:is(.landscape-stage,.immersive,:fullscreen) .compare-handle span { color:#fff; background:transparent; box-shadow:none; filter:drop-shadow(0 0 1px #000c) drop-shadow(0 1px 2px #0009); }
.compare-stage:is(.landscape-stage,.immersive,:fullscreen) .compare-handle svg { width:18px; height:18px; }
/* Keep geometry in the landscape host's local axes, including its fixed drawer. */
.render-workbench.landscape-view,.compare-stage.landscape-view { width:var(--landscape-width,100vw); height:var(--landscape-height,100dvh); }
.landscape-view .render-canvas { height:var(--landscape-height,100dvh); }
.landscape-view .render-settings { max-height:calc(var(--landscape-height,100dvh) - 60px); }
.landscape-view.landscape-rotated { inset:0 auto auto 0; width:var(--landscape-width); height:var(--landscape-height); transform-origin:0 0; transform:translateX(var(--landscape-height)) rotate(90deg); }
.landscape-view.landscape-rotated .render-settings,.landscape-view.landscape-rotated .settings-backdrop { position:absolute; }
@media (pointer:coarse) {
  .compare-stage .viewer-buttons { gap:0; }
  .compare-stage .viewer-buttons .icon-button { width:44px; height:44px; min-width:44px; min-height:44px; padding:13px; }
}
.compare-stage.touch-mobile .viewer-buttons { gap:0; }
.compare-stage.touch-mobile .viewer-buttons .icon-button { width:44px; height:44px; min-width:44px; min-height:44px; padding:13px; }
/* Reserve separate hit areas for modes, the two-row menu, controls and scenes. */
.compare-stage.has-scene-strip:not(:is(.landscape-stage,.immersive,:fullscreen)) { min-height:calc(var(--mode-row-height,44px) + 252px); --immersive-menu-bottom:160px; }
@media (max-width:760px) {
  .compare-stage.has-scene-strip:not(:is(.landscape-stage,.immersive,:fullscreen)) { --immersive-menu-bottom:150px; }
}