/* Parallel Vision Lab | Studio workspace 2026
   Rebuilt presentation layer. Provider, authentication and billing flows stay in lab.js.
   Intentionally one design system rather than accumulated override patches. */

/* Foundation */
:root {
  color-scheme:dark;
  --bg:#101114; --surface:#17191c; --surface-raised:#23252a;
  --editor:#17181b; --canvas:#111216;
  --ink:#f1f2f5; --ink-strong:#ffffff;
  --muted:#a4a8b0; --muted-2:#858993;
  --line:#313339; --line-strong:#4b4e55;
  --accent:#e4e6ea; --accent-2:#f7f8fa;
  --danger:#d89a93;
  --radius-sm:7px; --radius-md:10px; --radius-lg:12px;
  --shadow:none;
}
html {background:var(--bg);scroll-behavior:smooth}
body {
  background:
    radial-gradient(900px 550px at 82% -16%,rgba(148,149,151,.05),transparent 70%),
    linear-gradient(135deg,rgba(154,155,157,.027),transparent 38%),var(--bg);
  color:var(--ink);
  font:14px/1.5 Inter,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.006em;-webkit-font-smoothing:antialiased;
}
*,*:before,*:after {box-sizing:border-box}
h1,h2,h3 {font-weight:480}
a {text-decoration:none}
a:hover {text-decoration:none;color:var(--ink-strong)}
:focus-visible {outline:2px solid var(--accent-2);outline-offset:3px}
[hidden] {display:none!important}
.wrap {width:100%;max-width:1920px;margin:0 auto;padding:0 clamp(16px,2.3vw,42px)}
.eyebrow,.micro {font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
.fine,.filemeta {font-size:10px;line-height:1.55;color:var(--muted)}
.text-button {text-decoration:none;color:#c7c8ca;font-size:11px}
.text-button:hover {color:#fff;text-decoration:underline;text-underline-offset:4px}

/* Compact site header */
header {
  position:sticky;top:0;z-index:35;
  background:rgba(18,19,21,.96);
  border-bottom:1px solid rgba(207,208,210,.085);
  backdrop-filter:blur(16px);
}
.top {min-height:56px;gap:20px}
.brand {
  display:inline-flex;align-items:center;gap:10px;
  white-space:nowrap;color:#f3f4f6;flex-shrink:0;
}
.brand-icon {width:30px;height:30px;display:block;object-fit:contain;flex-shrink:0}
.brand-wordmark {width:125px;height:36px;display:block;object-fit:contain}
.brand .brand-lab {
  color:#bcbdbf;font-size:10px;font-weight:610;letter-spacing:.18em;
  margin:0 0 0 5px;padding:1px 0 0 15px;border-left:1px solid #4d4e50;
}
.actions {gap:8px}
.actions .eyebrow {font-size:9px;letter-spacing:.1em;margin-right:6px}
.actions .quiet {
  background:rgba(222,223,225,.035);border:1px solid rgba(216,217,219,.12);
  min-height:33px;padding:7px 12px;font-size:11px;
}
.actions .quiet:hover {background:rgba(201,202,204,.1);border-color:rgba(201,202,204,.3)}

/* Sign-in view only. No marketing hero inside the authenticated editor. */
#gate {
  max-width:720px;margin:72px auto 100px;padding:32px;
  border:1px solid var(--line-strong);border-radius:16px;
  background:#111113;min-height:auto;
}
#gate .intro {display:block;padding:0 0 28px}
#gate .intro h1 {font-size:clamp(38px,5vw,60px);letter-spacing:-.06em;line-height:1.04;margin:9px 0}
#gate .intro-note {text-align:left;font-size:12px}
#gate h2 {font-size:24px;margin:10px 0}

/* Studio navigation: no bars between header and workspace */
#app {padding-top:0}
#app .connection-strip {display:none!important}
.tool-switch,#app .tool-switch {
  height:55px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:0;padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none;overflow:visible;
}
.tool-group {display:flex;align-items:center;gap:5px}
.tool-tab,#app .tool-switch .tool-tab {
  display:inline-flex;align-items:center;justify-content:center;
  flex:none;min-width:82px;min-height:35px;height:35px;
  padding:7px 17px;border:1px solid transparent;border-radius:7px;
  background:transparent;color:#a9aaac;
  font-size:13px;font-weight:530;line-height:1;
  box-shadow:none;letter-spacing:0;text-align:center;
  transition:color .14s ease,background .14s ease,border-color .14s ease;
}
.tool-tab:hover {background:rgba(195,196,198,.06);color:#eff0f2;text-decoration:none}
.tool-tab.active,#app .tool-switch .tool-tab.active {
 background:#22252b;color:#f3f4f6;border-color:#3c3f47;box-shadow:inset 0 -1px #c0c3ca;
}
.tool-caption {margin-left:auto;font-size:10px;color:#939496;letter-spacing:.19em;white-space:nowrap}

/* A single natural page scroll. The preview remains in view on desktop. */
.workspace {
  display:grid;grid-template-columns:minmax(350px,402px) minmax(0,1fr);
  align-items:start;min-height:550px;height:auto;
  overflow:visible;border:1px solid #3a3b3d;border-radius:13px;
  background:var(--editor);box-shadow:0 25px 72px rgba(0,0,0,.15);
}
.controls {
  display:flex;flex-direction:column;min-width:0;min-height:0;
  height:auto;padding:0;border-right:1px solid #333436;
  overflow:visible;background:linear-gradient(165deg,#201d1e,#1b191b 64%);
  border-radius:11px 0 0 11px;
}
.controls-body {
  flex:0 0 auto;min-height:0;overflow:visible;
  padding:17px 22px 12px;
}
.reference-list {scrollbar-width:thin;scrollbar-color:#323335 transparent}
.reference-list::-webkit-scrollbar {width:6px}
.reference-list::-webkit-scrollbar-thumb {background:#323335;border-radius:10px}
.controls .mode {
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:7px;margin:0 0 11px;padding:0;
  color:#c7c8ca;border:0;
  font-size:10px;line-height:1.35;letter-spacing:.15em;
}
.engine-pill {
  border:1px solid #525355;border-radius:20px;
  padding:3px 7px;background:#252628;color:#c0c1c3;
  font-size:9px;line-height:1;letter-spacing:.04em;white-space:nowrap;
}
.mode-model-control:not([hidden]) {display:block;width:100%;max-width:100%;margin:6px 0 0}
.mode-model-control .label {margin:0 0 6px;font-size:11px;color:var(--muted)}
.mode-model-control select {width:100%;font-size:13px;border-color:#3c3d3f;background:#151314}

/* Model selection and short disclosure replace the long paragraph */
#video-model-control {margin:0;padding:0}
#video-model-control>label {display:block}
#video-model-control .label,#upscale-model-control .label {margin-bottom:6px}
.model-details {margin:4px 0 0;color:#8c8d8f;font-size:10px}
.model-details summary {display:inline-block;cursor:pointer;list-style:none;padding:1px 1px 4px;color:#9b9c9e}
.model-details summary::-webkit-details-marker {display:none}
.model-details summary:before {content:"+";display:inline-block;width:15px;font-size:13px;color:#a2a3a5}
.model-details[open] summary:before {content:"−"}
.model-details .fine {margin:4px 0 9px;color:#a7a8aa;line-height:1.55}
.mode-switch {
  display:flex;grid-template-columns:none;gap:0;overflow:hidden;
  margin:6px 0 10px;
  background:#171517;border:1px solid #3b3c3e;border-radius:9px;
}
.mode-tab,.controls .mode-tab {
  flex:1 1 auto;min-width:0;min-height:33px;
  margin:0;padding:6px 10px;border:0!important;border-radius:6px;
  background:transparent;color:#a7a8aa;
  font-size:11px;font-weight:530;text-align:center;
  transition:background .12s ease,color .12s ease;
}
.mode-tab+.mode-tab {border-left:0!important}
.mode-tab.active,.mode-tab[aria-selected="true"],.controls .mode-tab.active {
 background:#e2e4e8;color:#18191d;box-shadow:none;border:0!important;
}
.mode-tab:not(.active):hover {background:#292a2c;color:#fff}
#video-modes {margin:5px 0 11px}
.mode-panel {margin-bottom:10px}

/* Inputs and media upload cards */
.label,.controls .label {
  display:block;color:#d5d6d8;font-size:12px;font-weight:520;
  letter-spacing:0;text-transform:none;margin-bottom:5px;
}
.upload-heading {align-items:baseline;margin-bottom:5px;gap:6px}
.upload-heading .label {margin-bottom:0}
.upload-heading .micro {font-size:9px;letter-spacing:.09em}
.frame-pair {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-bottom:0}
.upload-block {min-width:0}
.drop {
  min-height:82px;display:flex;gap:3px;
  align-items:center;justify-content:center;flex-direction:column;
  position:relative;padding:7px 10px;
  border:1px dashed #515254;border-radius:11px;
  background:rgba(227,228,230,.023);color:#d9dadc;
  transition:border-color .15s ease,background .15s ease;
}
.drop span {font-size:11px;font-weight:560;line-height:1.35}
.drop small {font-size:9px;color:#a5a6a8}
.drop:hover,.drop:focus-within,.drop.drag {
  border-color:#9fa0a2;background:rgba(165,166,168,.065);transform:none;
}
.drop:focus-within {outline:2px solid var(--accent);outline-offset:2px}
.reference-drop {min-height:90px}
.filemeta {min-height:0;margin:4px 0 0;font-size:9px;line-height:1.3;color:#949597}
.reference-list {
  display:flex;flex-direction:column;gap:8px;
  max-height:320px;margin:10px 0 0;overflow-y:auto;padding-right:4px;
}
.reference-item {
  display:grid;grid-template-columns:60px minmax(0,1fr) auto;
  gap:9px;align-items:start;min-height:82px;
  padding:8px;border:1px solid #363739;border-radius:9px;
  background:#101013;aspect-ratio:auto;overflow:visible;
}
.reference-item>img {width:60px;height:73px;object-fit:cover;border-radius:5px}
.reference-fields strong {font-size:10px}
.reference-fields input,.reference-fields select {min-height:32px;padding:6px 9px;font-size:11px}
.reference-item .reference-actions button {font-size:10px;color:#c0c1c3}
.reference-guidance {
  margin:10px 0 15px;padding:11px;border:1px solid #323335;
  border-radius:8px;background:#161619;
}
.reference-guidance summary {font-size:11px}
.reference-guidance pre {max-height:190px;font-size:10px;line-height:1.55}
.reference-guidance .micro {font-size:9px}
#start-frame-maker {margin-top:14px}

textarea,select,input:not([type=checkbox]):not([type=file]):not([type=range]) {
  min-width:0;width:100%;min-height:37px;padding:7px 10px;
  background:#171517;color:#eff0f2;
  border:1px solid #3b3c3e;border-radius:9px;
  font-size:13px;line-height:1.5;
  box-shadow:none;
}
textarea {resize:vertical;min-height:80px;max-height:350px;padding:10px 11px;font-size:12px;line-height:1.55}
textarea::placeholder,input::placeholder {color:#8a8b8d}
input[type=checkbox],input[type=radio] {accent-color:#dfe0e2}
textarea:focus,select:focus,input:not([type=checkbox]):not([type=file]):focus {
  outline:none;border-color:#969799;background:#201d1e;
  box-shadow:0 0 0 3px rgba(170,171,173,.11);
}
.parameter-grid {
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;margin:9px 0 9px;
}
.parameter-grid select {min-height:35px;padding:7px 8px;font-size:12px}
.parameter-grid .label {font-size:10px;margin-bottom:5px}
#format-control {margin:12px 0}
#format-control[hidden] {display:none!important}
.prompt-label {margin-top:0}
.utility-row {margin-top:3px;padding:7px 0;border-top:1px solid #2b2c2e;border-bottom:1px solid #2b2c2e}
.switch-row strong {font-size:11px}
.switch input:checked+i {background:#333130;border-color:#9a9b9d}
.switch input:checked+i:after {background:#dfe0e2}
.seed-settings summary {font-size:10px;cursor:pointer}
.controls .fine {font-size:10px;line-height:1.55}
.controls .fine.compact-fine {margin-top:10px}
.controls #generation-help {margin:9px 0 0}
.pack-bar {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:12px 0}
.pack-bar label {grid-column:1/-1;min-width:0;width:100%}
.pack-bar button {width:100%;min-height:34px;padding:7px 9px;font-size:10px}
.controlled-pose-settings,.soul-controls {
  margin:12px 0 14px;padding:12px;border:1px solid #333436;
  border-radius:9px;background:#1a191b;
}
.soul-pro-pack-item:has(input:checked) {outline:2px solid #dadbdd;outline-offset:-2px}
#upscale-model-control {margin-bottom:13px}
#upscale-info {
  padding:10px 12px;margin:0 0 14px;
  border:1px solid #343537;border-radius:9px;
  background:#18171a;
}
#upscale-info p {font-size:10px;line-height:1.5}
#upscale-info strong {font-weight:520;color:#dbdcde}

/* Generation actions travel with the page without a separate editor scrollbar. */
.generate-zone {
  flex:0 0 auto;position:sticky;bottom:0;z-index:6;
  padding:9px 22px 10px;margin:0;border:0;
  border-top:1px solid rgba(172,173,175,.16);
  background:linear-gradient(180deg,#222424,#1e1f21);
  box-shadow:0 -18px 30px rgba(0,0,0,.20);
  border-radius:0 0 0 11px;
}
.primary,.secondary,.quiet {
  min-height:35px;padding:7px 11px;
  border:1px solid #3b3c3e;border-radius:8px;
  background:#1c1b1f;color:#e3e4e6;
  font-size:11px;font-weight:550;
  transition:background .12s ease,border-color .12s ease;
}
.quiet {min-height:33px;padding:7px 11px}
.secondary:hover,.quiet:hover {background:#2b2c2e;border-color:#57585a;text-decoration:none}
.primary {background:#b4b5b7;border-color:#b4b5b7;color:#191a19}
.primary:hover {background:#cbccce;border-color:#cbccce;color:#171819}
.generate-button {
  display:block;width:100%;min-height:42px;
  border-radius:8px;
  background:#e4e6ea;border:1px solid #e4e6ea;
  color:#17191d;font-size:12px;font-weight:620;letter-spacing:.01em;
  box-shadow:none;transform:none;
}
.generate-button:hover {background:#fff;border-color:#fff;box-shadow:none;transform:none}
.generate-button:disabled {
  background:#2c2e33!important;border-color:#393c43!important;
  color:#a4a7ad!important;opacity:1!important;box-shadow:none!important;
  cursor:not-allowed;
}
.primary:disabled {opacity:.46;box-shadow:none;transform:none}
.save-button {margin-top:5px;min-height:30px;background:rgba(223,224,226,.022);color:#b2b3b5}
.save-button:hover {background:#313234;border-color:#606163}
#generation-help {
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;
  overflow:hidden;max-height:15px;margin:5px 0 0;
  font-size:9px;line-height:1.5;color:#a5a6a8;
}
#upscale-price {margin:0 0 9px}
#upscale-price-status {margin:5px 0;color:#b5b6b8;font-size:10px}

/* Minimal creative canvas: calm, neutral, and deliberately unbranded */
.stage {
 display:grid;grid-template-rows:44px minmax(0,1fr) 42px;position:sticky;top:67px;align-self:start;
 min-width:0;width:100%;height:clamp(530px,calc(100dvh - 91px),734px);min-height:0;
 overflow:hidden;background:#111216;border:0;border-radius:0 11px 11px 0;
}
.stage:before {display:none}
.stagehead,.stagefoot {
 position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;
 min-height:0;margin:0;padding:0 18px;background:rgba(17,18,22,.93);border-color:#2c2e34;
}
.stagehead {border-bottom:1px solid #2c2e34}
.stagefoot {border-top:1px solid #2c2e34;color:#a2a6af;font-size:10px}
.stagehead .eyebrow {color:#a1a5ae;font-size:10px;letter-spacing:.09em}
.stagehead .quiet {background:transparent;border-color:#363942;color:#a3a6ae;font-size:10px;min-height:29px}
.stagefoot .quiet {background:#262930;border-color:#40434c;color:#f1f3f6}
.canvas {
 position:relative;z-index:1;isolation:isolate;display:flex;align-items:center;justify-content:center;
 min-width:0;min-height:0;height:100%;padding:clamp(20px,3vw,44px);overflow:hidden;
 background:radial-gradient(ellipse 55% 52% at 50% 48%,rgba(210,214,225,.027),transparent 80%),#111216;
}
.canvas:before,.canvas:after {display:none}
.canvas>img,.canvas>video {
 position:relative;z-index:1;display:block;width:100%;height:100%;max-width:100%;max-height:100%;
 object-fit:contain;border-radius:4px;box-shadow:none;
}
.empty {
 position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
 width:min(440px,100%);max-width:none;padding:15px 8px;margin:auto;text-align:center;
}
.empty-identity,.canvas .empty-wordmark,.empty-footnote {display:none!important}
.empty .empty-title {
 color:#f0f2f5;margin:0;font-size:clamp(22px,2.1vw,29px);line-height:1.18;font-weight:500;
 letter-spacing:-.04em;text-wrap:balance;
}
.empty .empty-description {
 display:block;max-width:360px;margin:12px 0 0;color:#a2a6ae;font-size:12px;line-height:1.65;text-wrap:balance;
}
.empty-actions {display:flex;align-items:center;justify-content:center;gap:8px;margin:21px 0 0;flex-wrap:wrap}
.canvas-import,.canvas-secondary {
 display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:40px;padding:9px 14px;
 border-radius:8px;font-size:11px;font-weight:600;letter-spacing:0;
 transition:background .15s ease,border-color .15s ease;
}
.canvas-import {border:1px solid #e4e6ea;background:#e4e6ea;color:#15171b;box-shadow:none}
.canvas-import:hover {border-color:#fff;background:#fff;color:#141519;transform:none}
.canvas-secondary {border:1px solid #41444c;background:#1b1d22;color:#d6d9df}
.canvas-secondary:hover {border-color:#727781;background:#272a31;color:#fff;transform:none}
.canvas-import span,.canvas-secondary span {font-size:13px;font-weight:500}
#settings-summary {font-size:10px;color:#a5a8b0;font-variant-numeric:tabular-nums}

/* Notifications / queue / archive */
#notice {margin:13px 1px 0;min-height:0;font-size:12px;color:#b9babc}
#notice:empty {display:none}
#notice.error {color:#e3a5a0}
/* Keep upscale progress and confirmation attached to the action controls. */
#upscale-notice-slot[hidden] {display:none!important}
#upscale-notice-slot {margin:11px 0 0;min-width:0}
#upscale-notice-slot #notice {
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;margin:0;min-width:0;min-height:0;
  border:1px solid #41454d;border-radius:10px;
  background:#23262b;color:#dadde4;
  font-size:11px;line-height:1.6;font-weight:480;
  overflow-wrap:anywhere;
}
#upscale-notice-slot #notice::before {
  content:"";display:block;flex:0 0 7px;width:7px;height:7px;
  margin-top:6px;border-radius:50%;background:#c5c8d0;
  box-shadow:0 0 0 3px rgba(197,200,208,.09);
}
#upscale-notice-slot #notice.error {
  border-color:#735354;background:#2b2226;color:#f1c2bf;
}
#upscale-notice-slot #notice.error::before {
  background:#dfa6a4;box-shadow:0 0 0 3px rgba(223,166,164,.1);
}
.active {
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;margin-top:10px;gap:12px;
  border:1px solid #545557;border-radius:10px;
  background:linear-gradient(110deg,#262522,#1c1a1c);
}
.active #active-status {font-size:12px;color:#e3e4e6}
.active #active-detail {font-size:10px;color:#9d9ea0}
.soul-launch,#app .soul-launch {
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:12px 0 0;padding:14px 16px;
  border:1px solid #424345;border-radius:10px;
  background:linear-gradient(112deg,#262222,#201d1e);box-shadow:none;
}
.soul-launch strong {display:block;font-size:12px;font-weight:560;margin:3px 0}
.soul-launch small {display:block;font-size:11px;color:#afb0b2}
.soul-launch-actions {gap:7px;flex-shrink:0}
.soul-launch-actions button {min-height:34px}
.archive {padding:49px 0 85px}
.archivehead {padding-bottom:20px;border-color:#38393b;align-items:end}
.archive h2 {font-size:clamp(31px,3vw,44px);font-weight:480;letter-spacing:-.055em;color:#e8e9eb}
.archivehead p:not(.eyebrow) {font-size:11px;color:#acadaf;line-height:1.65}
.history-head-actions {display:flex;align-items:center;justify-content:flex-end;gap:13px;margin-top:10px}
.grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:16px;margin:23px 0 26px;
}
.card {
  border:1px solid #353638;border-radius:11px;
  overflow:hidden;background:#201d1e;
  box-shadow:0 8px 22px rgba(0,0,0,.08);transform:none;
  transition:border-color .16s ease,transform .16s ease;
}
.card:hover {border-color:#6b6c6e;transform:translateY(-2px);box-shadow:0 15px 32px rgba(0,0,0,.18)}
.card .history-media img,.card>img {
  display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:contain;background:#151314;
}
.history-media {background:#1a1718}
.history-media figcaption {font-size:9px;color:#97989a;border-color:#2e2c30}
.history-no-result {min-height:175px;background:#101013}
.history-no-result strong {font-size:18px}
.cardbody {padding:15px}
.cardbody p {
  color:#c7c8ca;font-size:12px;line-height:1.55;
  margin:8px 0 13px;max-height:3em;overflow:hidden;
}
.cardmeta {font-size:9px;color:#9e9fa1;letter-spacing:.07em}
.cardactions {gap:6px}
.cardactions .quiet {min-height:33px;font-size:10px;background:#2c2828;border:1px solid #464749;border-radius:7px}
.cardactions .result-download {background:#b3b4b6!important;color:#1c1818!important;border-color:#b3b4b6!important}
.history-selection {
  top:68px;z-index:10;
  padding:11px 12px;margin:14px 0;
  border:1px solid #646567;border-radius:9px;
  background:#2a2526f5;backdrop-filter:blur(12px);
}
.history-selection span {font-size:10px}
.history-delete-selected {border-color:#734849;background:#3a2225;color:#ffe1dd;border-radius:7px}
.history-select-box {
  top:10px;left:10px;width:28px;height:28px;
  border-radius:8px;border-color:#767779;background:#171619d9;
}
.history-select-box input {accent-color:#b1b2b4}
#history.is-selecting .card[data-deletable="true"] {cursor:pointer}
#history.is-selecting .card[data-deletable="true"]:hover {border-color:#a3a4a6}
#history.is-selecting .card.is-selected,
#history.is-selecting .card[data-deletable="true"]:has(.history-select-box input:checked) {
  outline:2px solid #afb0b2;outline-offset:-2px;
  border-color:#afb0b2;background:#2c2d2f;
  box-shadow:0 0 0 3px rgba(167,168,170,.12);
}
#history.is-selecting .card[data-deletable="false"] {opacity:.5;filter:saturate(.65)}

/* Modals retain all existing authenticated flows */
dialog {
  border:1px solid #515254;border-radius:14px;background:#232426;
  color:#eaebed;max-height:calc(100dvh - 36px);overflow:auto;
  box-shadow:0 36px 100px rgba(0,0,0,.7);
}
dialog::backdrop {background:#060608d9;backdrop-filter:blur(8px)}
.dialoghead h2,.dialog-head h2 {font-size:25px;letter-spacing:-.04em}
.quote-price {color:#bdbec0}
.soul-character-row,.soul-pro-pack-item {background:#171619;border-color:#3d3e40;border-radius:8px}
.soul-pro-pack-item:has(input:checked) {outline-color:#dfe0e2}
#input-preview-dialog {max-width:min(1000px,calc(100vw - 32px))}
#input-preview-image {max-width:100%;max-height:65dvh;object-fit:contain}
footer {border-top-color:#353638;color:#9b9c9e;font-size:10px}
.skip {
  position:fixed;top:0;left:12px;z-index:100;
  width:1px;height:1px;overflow:hidden;white-space:nowrap;
  clip-path:inset(50%);padding:0;border:0;
}
.skip:focus {
  clip-path:none;width:auto;height:auto;overflow:visible;
  top:8px;left:8px;padding:10px 13px;border-radius:7px;
  background:#d8d9db;color:#171b1b;
}

/* Responsive: editor turns into a natural vertical page */
@media(min-width:1800px) {
  .workspace {grid-template-columns:minmax(390px,430px) minmax(0,1fr)}
  .controls-body {padding:25px 27px 20px}
  .generate-zone {padding-left:27px;padding-right:27px}
}
@media(max-width:1100px) {
  .workspace {grid-template-columns:minmax(320px,365px) minmax(0,1fr)}
  .controls-body {padding:20px 18px 16px}
  .generate-zone {padding:12px 18px 14px}
  .parameter-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .parameter-grid label:last-child {grid-column:1/-1}
}
@media(max-width:820px) {
  .wrap {padding:0 18px}
  header {position:relative}
  .workspace {
    display:flex;flex-direction:column;
    height:auto;min-height:0;overflow:visible;border-radius:11px;
  }
  .controls {height:auto;min-height:0;overflow:visible;border-right:0;border-bottom:1px solid #2e2f31}
  .controls-body {min-height:0;overflow:visible;padding:20px}
  .generate-zone {padding:15px 20px 17px;position:relative;bottom:auto;box-shadow:none;border-radius:0}
  .stage {height:clamp(370px,59dvh,620px);min-height:0;position:relative;top:auto;align-self:stretch;border-radius:0 0 11px 11px}
  .canvas {padding:20px}
  .empty .empty-title {font-size:clamp(24px,4vw,31px)}
  .empty .empty-description {font-size:12px}
  .archive {padding-top:34px}
  .history-selection {top:8px}
  .grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .soul-launch {flex-wrap:wrap}
}
@media(max-width:560px) {
  .wrap {padding:0 12px}
  .top {min-height:52px}
  .brand {gap:6px}
  .brand-icon {width:27px;height:27px}
  .brand-wordmark {width:102px;height:30px}
  .brand .brand-lab {font-size:9px;padding-left:8px;margin-left:2px}
  .actions {gap:5px}
  .actions .eyebrow {display:none}
  .actions .quiet {min-height:31px;font-size:10px;padding:6px 9px}
  .tool-switch,#app .tool-switch {height:52px}
  .tool-tab,#app .tool-switch .tool-tab {min-width:0;padding:8px 13px;font-size:11px}
  .tool-caption {display:none}
  .workspace {border-radius:10px}
  .controls-body {padding:18px 14px}
  .generate-zone {padding:13px 14px 15px}
  .mode {gap:6px}
  .frame-pair {gap:8px}
  .drop {min-height:100px;padding:9px}
  .drop span {font-size:10px}
  .parameter-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .parameter-grid label:last-child {grid-column:1/-1}
  .stage {height:clamp(315px,48dvh,480px)}
  .stagehead,.stagefoot {padding:0 12px}
  .canvas {padding:13px}
  .empty {padding:12px 4px}
  .empty-identity {gap:8px;margin-bottom:13px}
  .canvas .empty-wordmark {width:132px;max-height:37px}
  .empty-identity span {font-size:8px}
  .empty .empty-title {font-size:24px}
  .empty .empty-description {max-width:295px;font-size:11px;line-height:1.55;margin-top:9px}
  .empty-actions {margin-top:15px;gap:7px}
  .canvas-import,.canvas-secondary {min-height:38px;padding:8px 11px;font-size:10px;gap:8px}
  .empty-footnote {display:none}
  .archivehead {display:block}
  .archivehead>div:last-child {margin-top:12px;text-align:left}
  .history-head-actions {justify-content:flex-start}
  .grid {grid-template-columns:1fr;gap:12px}
  .soul-launch-actions {width:100%;justify-content:flex-start;flex-wrap:wrap}
  .history-selection {flex-wrap:wrap}
  #gate {margin:25px 0 50px;padding:22px}
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {scroll-behavior:auto!important;transition:none!important;animation:none!important}
}