/* Deepfish-inspired neutral surfaces. Color belongs to actions, statuses and builds. */
:root {
  /* Studio hologram (empty and working stage). */
  --holo: #7fb2ff;
  --holo-soft: rgb(127 178 255 / .28);
  --holo-line: rgb(127 178 255 / .14);
  --holo-glow: rgb(127 178 255 / .55);
  --forge-glow: rgb(255 179 71 / .35);
  --scrim: #0009;
  color-scheme:light;
  --paper:#ffffff;--white:#ffffff;--offwhite:#ffffff;--chrome:#f5f5f5;
  /* Design status labels: text-contrast colors, never broad fills. */
  --status-gray:#646464;--status-blue:#1f55e0;--status-purple:#793be3;--status-amber:#9a5b00;--status-green:#0a7a3e;--status-red:#c4122e;
  --ink:#141414;--black:#141414;--muted:#646464;--line:#d2d2d2;--line-soft:#e7e7e7;
  --surface-hover:#ededed;--surface-selected:#f1f1f1;
  --line-active:#aeb4bd;--icon-ink:#636a74;--focus-ring:#7e8998;
  --browser-track:var(--chrome);--browser-active:var(--white);--browser-hover:var(--surface-hover);--browser-text:var(--ink);--browser-divider:var(--line);
  --browser-memes-ink:#0a0a0a;--browser-other-ink:#ffffff;
  --tab-track:#eef0f3;--tab-selected:#ffffff;--tab-selected-border:#aebbd3;--tab-mark:#6f8fe8;
  --action:var(--ink);--action-fill:#265be8;--action-fill-hover:#194bd1;--action-edge:var(--line);--action-text:#fff;
  --action-soft:#f4f4f4;--action-shadow:transparent;--action-hover:var(--ink);
  --brand-fast-fill:var(--accent-yellow);--brand-fast-hover:#f5c600;--brand-fast-edge:var(--tool-yellow-edge);--brand-fast-text:#141414;
  --brand-studio-fill:#f5a0d1;--brand-studio-hover:#ee8ac4;--brand-studio-edge:#bf5b9a;--brand-studio-text:#37238b;
  --brand-free-fill:#235cff;--brand-free-hover:#1b4fe8;--brand-free-edge:#183caf;--brand-free-text:#fff;
  --brand-action-fill:#d71932;--brand-action-hover:#bf142b;--brand-action-edge:#a22a39;--brand-action-text:#fff;
  --accent-yellow:#ffcf00;--accent-blue:#235cff;--accent-purple:#9855ff;--accent-green:#008747;
  /* Studio sizes, cool to warm: the free sizes blue and purple, the Pro sizes pink and yellow (Noah, September 29). */
  --size-micro:var(--accent-blue);--size-small:var(--accent-purple);--size-medium:var(--brand-studio-fill);--size-large:var(--accent-yellow);
  --tool-blue:#235cff;--tool-blue-edge:#183caf;--tool-purple:#793be3;--tool-purple-ink:#793be3;--tool-purple-edge:#512398;--tool-yellow-edge:#b38b00;--tool-yellow-icon:#806100;
  --tool-pink:var(--brand-studio-edge);--tool-pink-edge:var(--brand-studio-edge);--tool-pink-icon:var(--brand-studio-edge);
  --sky:var(--surface-selected);--blue:var(--surface-selected);--blue-soft:var(--surface-selected);
  --butter:var(--chrome);--yellow:var(--chrome);--sand:var(--chrome);--cream:var(--chrome);--pink:var(--chrome);--green:var(--chrome);
  --grass:var(--accent-purple);--coral:#ff6534;
  --shadow:none;--shadow-sm:none;--radius:4px;--radius-sm:3px;
  --render-edge:#dfe3e8;--render-spot:#ffffff;--render-ground:#d9dde2;
  /* Secondary text drawn straight on the model backdrop (studio title overlay). */
  --render-muted:#646464;
  --render-backdrop:radial-gradient(ellipse at 48% 38%,var(--render-spot) 0%,var(--render-edge) 100%);
  /* The "How it works" studio: the launch film's sky blue and the tint of shadows on its floor. */
  --journey-sky:#acdaf2;--journey-shadow:#23506e;
}
:root[data-theme=dark] {
  --status-gray:#9a9a9a;--status-blue:#86a6ff;--status-purple:#bb88ff;--status-amber:#f5b041;--status-green:#45da8b;--status-red:#ff6b7d;
  color-scheme:dark;
  --paper:#0a0a0a;--white:#111111;--offwhite:#0a0a0a;--chrome:#151515;
  --ink:#fafafa;--black:#fafafa;--muted:#a3a3a3;--line:#383838;--line-soft:#252525;
  --surface-hover:#242424;--surface-selected:#202020;
  --line-active:#535d6c;--icon-ink:#b2bac6;--focus-ring:#77859a;
  --browser-active:var(--line);--browser-other-ink:#141414;
  --tab-track:#121419;--tab-selected:#282d35;--tab-selected-border:#59677f;--tab-mark:#86a6ff;
  --action:var(--ink);--action-soft:#202020;--action-hover:var(--ink);
  --tool-yellow-icon:#ffcf00;--tool-purple-ink:#bb88ff;--tool-pink-icon:var(--brand-studio-fill);
  --accent-blue:#638bff;--accent-purple:#bb88ff;--accent-green:#45da8b;
  --render-edge:#1a1e26;--render-spot:#454d5a;--render-ground:#272d37;--render-muted:#c3c8d0;
  --journey-sky:#16283a;--journey-shadow:#02060b;
}
body,.landing-open,.landing-main,.workshop-open,.auth-page {background:var(--paper);background-image:none;color:var(--ink)}
::selection{background:#dfcaff;color:#241339}
input,textarea,select{color:var(--ink);background:var(--white)}
input::placeholder,textarea::placeholder{color:var(--muted)}




.theme-toggle:hover{background:var(--surface-hover);border-color:var(--line-active)}
.nb-btn,.generate-button,.primary-button,.small-button,.icon-button,.topbar .small-button{box-shadow:none;border-radius:4px}
.nb-btn:hover:not(:disabled),.generate-button:hover:not(:disabled),.primary-button:hover:not(:disabled){box-shadow:none}
.nb-btn:active:not(:disabled),.generate-button:active:not(:disabled),.primary-button:active:not(:disabled){transform:none;box-shadow:none}
.nb-label:before,.panel-pixel,.auth-window-bar>span:first-child{background:var(--accent-purple);border:0;box-shadow:none}
.designer,.projects-modal,.admin-review,.custom-auth-page>.auth-window{border-radius:4px;box-shadow:none}
.stage:before{display:none}
.stage,.model-canvas{background:var(--render-backdrop)}
/* A softly lit photo sweep for every interactive model, including embedded instructions. */
#viewport,html.showcase #viewport{background:var(--render-backdrop)}
body.capture #viewport{background:transparent}
.generation-track>.active{background:var(--surface-selected);box-shadow:inset 0 -2px var(--line-active)}
.generation-track>.done,.generation-track>.done>span{color:var(--accent-green)}
.quote-card,.build-estimate,.request-message,.admin-totals,.admin-message,.previous-model-notice,.toast{background:var(--chrome);border-color:var(--line);color:var(--ink);box-shadow:none}
.build-estimate{border-top:3px solid var(--accent-green)}
.request-message{border-left:2px solid var(--action-fill)}
.build-estimate p,.build-estimate small{color:var(--muted)}
.projects-modal::backdrop{background:#0009;backdrop-filter:none}
.profile-trigger{background:var(--chrome);color:var(--ink)}
.profile-popover{box-shadow:0 12px 36px #0003}
.auth-form-content .auth-error,.profile-popover .auth-error{background:var(--chrome);border-color:#d51d32;color:#d51d32}
.auth-form-content .auth-notice{background:var(--chrome);border-color:var(--accent-green);color:var(--accent-green)}
.auth-page>section a:not(.primary-button){color:var(--action)}
/* The downloadable standalone fal viewer uses the same tokens. */
.project-header,.chapterbar,.camera-tools,.transport,.tabs,footer{background:var(--chrome);color:var(--ink);border-color:var(--line)}
.chapterbar .current,.view-options button[aria-pressed=true]{background:var(--surface-selected);color:var(--ink);border-color:var(--line-active)}
.camera-tools,.transport #play,.try-step,.primary-link{box-shadow:none}
.guide-card,.assembly-label{background:var(--chrome);border-color:var(--line)}
.part,.inventory-row,.stepinput input,#part-search,.view-options button{background:var(--white);color:var(--ink);border-color:var(--line)}

/* Main actions use a small, purposeful palette and a physical 4px bottom edge. */
.tactile-button[data-tone=violet]{--button-face:#7544e8;--button-hover:#6837d8;--button-edge:#422486;--button-text:#fff}
.tactile-button[data-tone=blue]{--button-face:#265be8;--button-hover:#194bd1;--button-edge:#16358c;--button-text:#fff}
.tactile-button[data-tone=mint]{--button-face:#20d5ac;--button-hover:#13c49d;--button-edge:#087762;--button-text:#082b25}
.tactile-button[data-tone]{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--button-face);color:var(--button-text);border:1px solid var(--button-edge);border-radius:4px;box-shadow:0 4px 0 var(--button-edge);transform:translateY(0);transition:background var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast);text-decoration:none}
.tactile-button[data-tone]:hover:not(:disabled){background:var(--button-hover);color:var(--button-text);box-shadow:0 4px 0 var(--button-edge);transform:translateY(0);text-decoration:none}
.tactile-button[data-tone]:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--button-edge);background:var(--button-hover)}
.tactile-button[data-tone]:disabled{transform:none;box-shadow:none;opacity:.45}
.tactile-button[data-tone]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:6px}
@media(prefers-reduced-motion:reduce){.tactile-button[data-tone]{transition:none}}

/* A shared, restrained motion language for interface feedback. */
:where(button,a,input,textarea,select,summary){transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,opacity var(--motion-fast) ease,transform var(--motion-fast) ease}
.theme-toggle{transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,transform var(--motion-fast) ease}
.theme-toggle .control-glyph{transition:transform var(--motion-fast) ease}
.theme-toggle:hover .control-glyph{transform:rotate(-12deg)}
.theme-toggle:active{transform:scale(.94)}
.profile-trigger{transition:box-shadow var(--motion-fast) ease,transform var(--motion-fast) ease}
.profile-trigger:hover{box-shadow:0 0 0 3px var(--surface-hover)}
.profile-trigger:active{transform:scale(.96)}
/* Discrete display/overlay transitions preserve native dialog focus and Escape handling. */
.projects-modal{opacity:0;transform:translateY(12px) scale(.985);transition:opacity var(--motion-fast) ease,transform var(--motion-fast) ease,display var(--motion-fast) allow-discrete,overlay var(--motion-fast) allow-discrete}
.projects-modal[open]{opacity:1;transform:translateY(0) scale(1)}
.projects-modal::backdrop{background:#0000;transition:background-color var(--motion-fast) ease,display var(--motion-fast) allow-discrete,overlay var(--motion-fast) allow-discrete}
.projects-modal[open]::backdrop{background:#0009}
.profile-popover{opacity:1;transform:translateY(0) scale(1);transform-origin:top right;transition:opacity var(--motion-fast) ease,transform var(--motion-fast) ease,display var(--motion-fast) allow-discrete}
.profile-popover[hidden]{display:none;opacity:0;transform:translateY(-6px) scale(.98)}
@starting-style{
  .projects-modal[open]{opacity:0;transform:translateY(12px) scale(.985)}
  .projects-modal[open]::backdrop{background:#0000}
  .profile-popover:not([hidden]){opacity:0;transform:translateY(-6px) scale(.98)}
}
.toast{animation:interface-enter 180ms ease both}
@keyframes interface-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  :where(button,a,input,textarea,select,summary),.tactile-button[data-tone],.theme-toggle,.theme-toggle .control-glyph,.profile-trigger,.profile-popover,.projects-modal,.projects-modal::backdrop{transition:none}
  .toast{animation:none}
  .theme-toggle:hover .control-glyph,.theme-toggle:active,.profile-trigger:active{transform:none}
}

/* Quiet control edges, with a separate visible keyboard-focus treatment. */
.theme-toggle,.icon-button{color:var(--icon-ink);border-color:var(--line);box-shadow:none}
.icon-button:hover,.small-button:hover{background:var(--surface-hover);border-color:var(--line-active)}
.profile-trigger[aria-expanded=true]{outline:1px solid var(--line-active)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline-color:var(--focus-ring)}

/* Approved transparent lettering shares the same tactile design action. */
.tactile-button[data-tone=brick]{--button-face:var(--brand-action-fill);--button-hover:var(--brand-action-hover);--button-edge:var(--brand-action-edge);--button-text:var(--brand-action-text);min-height:var(--control-height-brand,66px);font-weight:700;font-size:16px;font-style:normal}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.brick-lettering{display:inline-flex;align-items:center;justify-content:center;min-width:0;max-width:100%;line-height:1}
.brick-lettering-image{display:block;width:var(--brick-lettering-width,clamp(205px,10em,300px));max-width:100%;height:auto;pointer-events:none;user-select:none}

/* The approved hammer also covers legacy brand-mark markup. */
.brand-mark{display:inline-block;flex:0 0 30px;width:30px;height:30px;margin-right:8px;transform:none;background:url('/brand/forge-hammer-v1.png') center / contain no-repeat;vertical-align:middle}
.brand-mark>i{display:none}

/* Central outline assets use the control color, including muted/disabled states. */
.central-icon{display:inline-block;flex:0 0 auto;vertical-align:-.18em;background-color:currentColor;mask-repeat:no-repeat;mask-position:center;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:100% 100%}


/* Header tools share the same in-flow row. Only the measured cart slot pins on scroll. */
.nav-controls{display:flex;align-items:center;gap:var(--space-2,8px)}
.nav-cart-slot{width:100px;height:var(--header-control-height,var(--control-height-sm,36px));flex-shrink:0}
.nav-cart{z-index:70;width:100%}
.nav-cart>button{width:100%}
.auth-loading{display:inline-flex;align-items:center;justify-content:center;width:var(--header-control-height,var(--control-height-sm,36px));height:var(--header-control-height,var(--control-height-sm,36px));flex-shrink:0;border:1px solid var(--line);border-radius:var(--control-radius,4px);color:var(--muted)}
.profile-popover nav{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:7px;margin:0}
.profile-popover nav>button,.profile-popover nav>a{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:38px;padding:10px 11px;font:400 13px/1.4 var(--sans);background:none;border:0;border-radius:4px;text-align:left;white-space:normal}
.profile-popover nav>button:hover,.profile-popover nav>a:hover{background:var(--surface-hover);text-decoration:none}
.profile-popover .profile-request-count{display:inline-flex;align-items:center;gap:9px;color:var(--muted)}
.custom-auth-page{min-height:calc(100svh - 64px)}
@media(max-width:960px){.nav-cart-slot{width:94px}}

@media(max-width:540px){.nav-cart-slot{width:62px}.nav-controls{gap:6px}}
.admin-links{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}
.preview-top{height:auto;align-items:stretch;padding:0 var(--space-3) 0 0;background:var(--browser-track)}.preview-top>:first-child{flex:1}.preview-top>button{align-self:center}