/* Public and upload density variants. Editor geometry and user pixels stay tool-owned. */
:root {
  --site-content-max: 1920px;
  --site-gutter: clamp(24px, 3vw, 48px);
  --site-section-space: clamp(64px, 8vw, 112px);
  --site-header-height: 80px;
  --site-anchor-inset: 100px;
  --site-ease: cubic-bezier(.22,1,.36,1);
  --site-motion-enter: 640ms;
  --site-motion-ui: 200ms;
  --type-site-body: 400 17px/1.65 var(--font-ui);
  --type-site-title: 500 clamp(38px, 4.5vw, 60px)/1.08 var(--font-display);
  --eyebrow-size:14px;
  --eyebrow-leading:20px;
}
html:has(.lw-site) { scroll-behavior:smooth; scroll-padding-top:var(--site-anchor-inset); }
.lw-site { font:var(--type-site-body); color:var(--color-ink); }
.lw-site a, .lw-footer a { color:inherit; }
.lw-site h1, .lw-site h2, .lw-site h3 { font-family:var(--font-display); font-weight:500; }
.lw-container { width:min(100% - var(--site-gutter)*2, var(--site-content-max)); margin-inline:auto; }
.lw-kicker { font:400 var(--eyebrow-size)/var(--eyebrow-leading) var(--font-ui); color:var(--color-eyebrow-emphasis); letter-spacing:.015em; }
.lw-site .lw-kicker { font:400 15px/1.5 var(--font-ui); }
.design-system .eyebrow { font-size:var(--eyebrow-size); line-height:var(--eyebrow-leading); color:var(--color-eyebrow-emphasis); }
.lw-skip { position:fixed; top:10px; left:16px; z-index:100; padding:12px 18px; background:var(--color-bg-control); color:var(--color-ink); transform:translateY(-160%); border:1px solid var(--color-ink); border-radius:var(--radius-pill); }
.lw-skip:focus { transform:none; }
/* Identical site navigation, independently scoped from the compact workspace header. */
.lw-public-header, .design-system[data-phase=empty]>.lw-public-header {
  display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:80px;
  padding:14px max(var(--site-gutter),calc((100vw - var(--site-content-max))/2));
  border-bottom:1px solid var(--color-border-subtle); background:var(--color-bg-app);
  position:sticky; top:0; z-index:35;
}
.lw-public-header .upload-brand { font-size:20px; gap:8px; letter-spacing:-.035em; }
.lw-public-header .upload-navigation { display:flex; align-items:center; gap:32px; }
.lw-public-header .upload-product-links { gap:28px; }
.lw-public-header .upload-navigation a { font:400 14px/1.4 var(--font-ui); min-height:44px; }
.lw-public-header .upload-product-links a { position:relative; }
.lw-public-header .upload-product-links a::after { content:''; position:absolute; left:0; right:0; bottom:5px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform var(--site-motion-ui) var(--site-ease); }
.lw-public-header .upload-product-links a:hover::after, .lw-public-header .upload-product-links a[aria-current=page]::after { transform:scaleX(1); }
.lw-public-header .upload-navigation .lw-nav-cta { padding:0 16px; border:1px solid var(--color-border-control); border-radius:var(--radius-pill); gap:12px; color:var(--color-ink); transition:background var(--site-motion-ui); }
.lw-public-header .lw-nav-cta:hover { background:var(--color-bg-control); }
.lw-nav-cta svg, .lw-button svg, .lw-tool-cta svg, .lw-source-help summary svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.lw-public-header .upload-menu-toggle { display:none; }
/* One message, one action. No duplicate media above the tool stories. */
.lw-hero { min-height:calc(100svh - 80px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding-block:clamp(64px,6vw,84px); text-align:center; }
.lw-hero>.lw-kicker { font-size:20px; }
.lw-hero h1 { margin:32px 0 36px; font:500 clamp(60px,8.7vw,124px)/.99 var(--font-display); letter-spacing:-.065em; }
.lw-hero [data-hero-line] { display:block; }
.lw-highlight { display:inline-block; position:relative; isolation:isolate; }
.lw-highlight::after { content:''; position:absolute; z-index:-1; left:-.015em; right:-.04em; bottom:.045em; height:.15em; background:var(--color-accent); transform-origin:left; }
.lw-hero .lw-hero-description { font:400 18px/1.6 var(--font-ui); max-width:48ch; margin-inline:auto; color:var(--color-text-secondary); }
.lw-button { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:52px; padding:14px 24px; margin-top:30px; border:1px solid transparent; border-radius:var(--radius-pill); background:var(--color-accent); color:var(--color-on-accent); text-decoration:none; font:600 14px/1.4 var(--font-ui); transition:background var(--site-motion-ui),box-shadow var(--site-motion-ui),transform var(--site-motion-ui); }
.lw-button:hover { background:var(--color-accent); box-shadow:inset 0 0 0 1px var(--color-ink); }
.lw-button svg { transition:transform var(--site-motion-ui) var(--site-ease); }
.lw-button:hover svg { transform:translateY(3px); }
.lw-button:active { transform:translateY(1px); }
.lw-hero>.lw-button { min-height:72px; padding:20px 36px; margin-top:96px; gap:30px; font-size:17px; }
.lw-hero>.lw-button svg { width:20px; height:20px; }
/* Two editorial stories. Pictures remain fully visible together, including without JS. */
.lw-toolkit { padding-bottom:0; border-top:1px solid var(--color-border-control); }
#tools { scroll-margin-top:calc(var(--site-header-height) - var(--site-anchor-inset) - 1px); }
.lw-tool-story { display:grid; grid-template-columns:minmax(0,.64fr) minmax(0,1.36fr); align-items:center; gap:clamp(40px,5vw,96px); min-height:calc(100svh - 80px); padding:clamp(80px,9vw,128px) 0; }
.lw-tool-story+.lw-tool-story { border-top:1px solid var(--color-border-subtle); }
.lw-tool-copy { align-self:center; }
.lw-tool-copy .lw-kicker { display:flex; flex-wrap:wrap; gap:8px 16px; }
.lw-preview-note { font-size:12px; color:var(--color-text-secondary); }
.lw-tool-copy h2 { font:500 clamp(48px,5.2vw,80px)/1.02 var(--font-display); letter-spacing:-.055em; margin:22px 0 28px; }
.lw-tool-copy>p:not(.lw-kicker) { font:var(--type-site-body); max-width:33ch; color:var(--color-text-secondary); }
.lw-tool-cta { display:inline-flex; align-items:center; gap:18px; min-height:52px; margin-top:28px; text-decoration:none; font:600 16px/1.4 var(--font-ui); }
.lw-tool-cta>span { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--color-border-control); border-radius:50%; transition:background var(--site-motion-ui),border-color var(--site-motion-ui); }
.lw-tool-cta:hover>span { background:var(--color-accent); border-color:var(--color-accent); }
.lw-tool-cta svg { width:20px; height:20px; transition:transform var(--site-motion-ui) var(--site-ease); }
.lw-tool-cta:hover svg { transform:translateX(2px); }
.lw-tool-story-reverse { grid-template-columns:minmax(0,1.36fr) minmax(0,.64fr); }
.lw-tool-story-reverse .lw-tool-copy { grid-column:2; grid-row:1; }
.lw-tool-story-reverse .lw-media-board { grid-column:1; grid-row:1; }
.lw-media-board { min-width:0; padding:28px 24px 22px; background:var(--color-bg-inspector); border-radius:10px; transform:translateY(calc((1 - var(--media-progress,1))*24px)); }
.lw-media-meta { display:flex; justify-content:space-between; gap:20px; font:400 12px/1.5 var(--font-ui); color:var(--color-text-secondary); padding-bottom:20px; border-bottom:1px solid var(--color-border-subtle); }
.lw-samples { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding-block:24px; }
.lw-sample { margin:0; min-width:0; }
.lw-sample img { display:block; width:100%; height:auto; aspect-ratio:8/9; object-fit:contain; background:var(--color-bg-control); }
.lw-sample figcaption { padding-top:14px; text-align:center; font:400 12px/1.4 var(--font-ui); color:var(--color-text-secondary); }
.lw-media-caption { border-top:1px solid var(--color-border-subtle); padding-top:16px; font:400 12px/1.5 var(--font-ui); color:var(--color-text-secondary); }
/* Flat's static default is a complete comparison. Only the optional module
   enables the native sticky scroll stage and the printer reveal. */
.lw-flat-story { display:block; min-height:0; padding:0; }
:is(.lw-flat-stage,.lw-batch-stage) { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(24px,3vh,36px); min-height:calc(100svh - var(--site-header-height)); padding:36px 0; }
:is(.lw-flat-stage,.lw-batch-stage)>* { flex-shrink:0; }
:is(.lw-flat-stage,.lw-batch-stage) .lw-tool-copy { text-align:center; }
:is(.lw-flat-stage,.lw-batch-stage) .lw-kicker { justify-content:center; }
:is(.lw-flat-stage,.lw-batch-stage) .lw-tool-copy h2 { font-size:clamp(44px,4vw,64px); margin:16px 0 12px; }
:is(.lw-flat-stage,.lw-batch-stage) .lw-tool-copy>p:not(.lw-kicker) { max-width:52ch; margin-inline:auto; }
:is(.lw-flat-stage,.lw-batch-stage)>.lw-tool-cta { margin-top:0; }
.lw-flat-demo { --flat-card-padding:clamp(20px,2vw,32px); --flat-image-gap:clamp(12px,1.5vw,24px); width:100%; overflow:hidden; border-radius:clamp(24px,4.5vw,64px); background:var(--color-bg-control); }
.lw-flat-images { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--flat-image-gap); padding:var(--flat-card-padding); }
.lw-flat-results { position:relative; min-width:0; grid-column:2 / span 3; }
.lw-flat-result-images { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--flat-image-gap); }
.lw-flat-demo .lw-sample img { aspect-ratio:1; background:transparent; }
.lw-flat-scanline { display:none; position:absolute; top:calc(-1 * var(--flat-card-padding)); bottom:calc(-1 * var(--flat-card-padding)); left:calc(var(--flat-print-progress,1) * 100%); width:1px; background:var(--color-border-subtle); pointer-events:none; }
@media(min-width:961px) and (min-height:700px) and (prefers-reduced-motion:no-preference) {
  html:has(.lw-flat-story[data-print-active]) { scroll-behavior:auto; }
  .lw-flat-story[data-print-active] { height:calc(100svh - var(--site-header-height) + 440px); }
  .lw-flat-story[data-print-active] .lw-flat-stage { position:sticky; top:var(--site-header-height); height:calc(100svh - var(--site-header-height)); }
  .lw-flat-story[data-print-active] .lw-sample img { max-height:calc(100svh - 530px); }
  .lw-flat-story[data-print-active] .lw-flat-result-images { clip-path:inset(0 calc((1 - var(--flat-print-progress,1))*100%) 0 0); }
  .lw-flat-story[data-print-active] .lw-flat-scanline { display:block; opacity:var(--flat-scanline-opacity,1); transition:opacity 140ms ease-out; }
}
/* Batch's complete source/results comparison is the static default. The
   enhanced card expands without stretching any source or result pixels. */
.lw-tool-story.lw-batch-story { display:block; min-height:0; padding:0; }
#batch-demo { scroll-margin-top:calc(var(--site-header-height) - var(--site-anchor-inset)); }
.lw-batch-demo { --batch-card-height:clamp(260px,42svh,460px); --batch-card-padding:clamp(24px,3vw,44px); --batch-gap:clamp(8px,1.1vw,20px); position:relative; width:100%; padding:var(--batch-card-padding); border-radius:clamp(24px,4.5vw,64px); background:var(--color-bg-control); overflow:hidden; }
.lw-batch-source { width:min(240px,55%); margin:0 auto 36px; }
.lw-batch-demo img { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:contain; }
.lw-batch-results { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); align-items:center; gap:var(--batch-gap); }
.lw-batch-result { display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2.2vh,28px); margin:0; min-width:0; }
.lw-batch-swatch { display:block; flex:none; width:20px; height:20px; border-radius:5px; background:var(--batch-swatch); }
.lw-batch-caption { display:flex; justify-content:space-between; gap:20px; margin-top:36px; color:var(--color-text-secondary); font:400 14px/1.5 var(--font-ui); }
.lw-batch-caption strong { color:var(--color-ink); font-weight:500; }
@media(min-width:961px) and (min-height:700px) and (prefers-reduced-motion:no-preference) {
  html:has(.lw-batch-story[data-expand-active]) { scroll-behavior:auto; }
  .lw-batch-story[data-expand-active] { height:calc(100svh - var(--site-header-height) + 440px); }
  .lw-batch-story[data-expand-active] .lw-batch-stage { position:sticky; top:var(--site-header-height); height:calc(100svh - var(--site-header-height)); }
  .lw-batch-story[data-expand-active] .lw-batch-demo { --batch-start-width:calc((var(--batch-card-height) - 2 * var(--batch-card-padding)) * .75 + 2 * var(--batch-card-padding)); width:calc(var(--batch-start-width) + (100% - var(--batch-start-width)) * var(--batch-width,0)); height:var(--batch-card-height); padding:0; }
  .lw-batch-story[data-expand-active] .lw-batch-source { position:absolute; top:var(--batch-card-padding); bottom:var(--batch-card-padding); left:50%; width:auto; aspect-ratio:3/4; margin:0; transform:translateX(-50%); opacity:var(--batch-source,1); pointer-events:none; }
  .lw-batch-story[data-expand-active] .lw-batch-source img { height:100%; }
  .lw-batch-story[data-expand-active] .lw-batch-output { position:absolute; inset:0 auto 0 50%; width:var(--batch-full-width); transform:translateX(-50%); padding:var(--batch-card-padding); display:flex; flex-direction:column; justify-content:center; }
  .lw-batch-story[data-expand-active] .lw-batch-results { flex:1; min-height:0; }
  .lw-batch-story[data-expand-active] .lw-batch-result { transform:translateX(calc((4.5 - var(--batch-index)) * (100% + var(--batch-gap)) * (1 - var(--batch-spread,0)))) scale(var(--batch-scale,.82)); opacity:var(--batch-opacity,0); filter:blur(var(--batch-blur,14px)); }
  .lw-batch-story[data-expand-active] .lw-batch-result img { max-height:calc(var(--batch-card-height) - 2 * var(--batch-card-padding) - 100px); }
  .lw-batch-story[data-expand-active] .lw-batch-caption { margin-top:24px; opacity:var(--batch-caption,0); }
}
@media(min-width:961px) and (min-height:700px) and (max-height:800px) and (prefers-reduced-motion:no-preference) {
  :is(.lw-flat-story[data-print-active],.lw-batch-story[data-expand-active]) :is(.lw-flat-stage,.lw-batch-stage) { padding-block:20px; gap:20px; }
  .lw-batch-story[data-expand-active] .lw-batch-demo { --batch-card-height:clamp(220px,38svh,300px); }
}
@media(max-width:960px) {
  .lw-batch-results { grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px 16px; }
}
@media(max-width:520px) {
  .lw-batch-demo { --batch-card-padding:20px; }
  .lw-batch-results { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 18px; }
  .lw-batch-caption { flex-direction:column; align-items:center; text-align:center; gap:8px; font-size:13px; }
}
/* Broad section alignment, with answers kept to a readable line length. Native
   details remain usable with keyboard input and without JavaScript. */
.lw-questions { display:grid; grid-template-columns:minmax(0,.64fr) minmax(0,1.36fr); gap:clamp(40px,5vw,96px); padding-block:clamp(80px,9vw,128px); border-top:1px solid var(--color-border-control); }
.lw-questions h2 { font:500 clamp(44px,4.5vw,68px)/1.08 var(--font-display); letter-spacing:-.05em; margin-top:22px; max-width:12ch; }
.lw-question-list { min-width:0; }
.lw-question { margin:0; padding:0; border-bottom:1px solid var(--color-border-subtle); }
.lw-question:first-child { border-top:1px solid var(--color-border-subtle); }
.lw-question summary { display:flex; justify-content:space-between; align-items:center; gap:24px; list-style:none; padding:26px 0; cursor:pointer; font:500 18px/1.4 var(--font-ui); }
.lw-question summary::-webkit-details-marker { display:none; }
.lw-question summary::after { content:'+'; font:400 24px/1 var(--font-ui); width:24px; text-align:center; flex:none; color:var(--color-eyebrow-emphasis); }
.lw-question[open] summary::after { content:'−'; }
.lw-question summary:hover { color:var(--color-eyebrow-emphasis); }
.lw-question summary:focus-visible { outline:2px solid var(--color-ink); outline-offset:6px; border-radius:2px; }
.lw-answer { padding:0 52px 28px 0; max-width:66ch; color:var(--color-text-secondary); font:400 17px/1.7 var(--font-ui); }
.lw-answer p+p { margin-top:12px; }
.lw-answer p:first-child { margin-top:0; }
.lw-answer a { text-underline-offset:4px; }
/* Upload is available immediately. This entire density variant ends with the empty phase. */
.design-system[data-phase=empty] .lw-upload { display:grid; width:min(100% - var(--site-gutter)*2,680px); max-width:none; margin:0 auto; min-height:calc(100svh - var(--site-header-height)); padding:clamp(32px,5svh,64px) 0; grid-template-columns:minmax(0,1fr); grid-template-rows:auto; gap:32px; align-items:start; align-content:center; }
.lw-upload .empty-copy { container-type:normal; text-align:center; padding:0; }
.lw-upload .empty-copy h1 { font:var(--type-site-title); letter-spacing:-.05em; margin-top:16px; }
.lw-upload .upload-intro { margin:16px auto 0; max-width:49ch; }
.lw-upload .upload-intro p, .lw-upload .empty-copy .lede { font:400 17px/1.6 var(--font-ui); color:var(--color-text-secondary); }
.design-system[data-phase=empty] .lw-upload .import-surface { min-height:clamp(300px,40svh,440px); width:100%; padding:40px 24px; border-radius:16px; gap:12px; }
.lw-upload .import-surface strong { font:600 18px/1.4 var(--font-ui); }
.lw-upload .import-surface .import-arrow { width:48px; height:48px; margin:0 0 2px; }
.lw-upload .import-surface .import-arrow svg { width:24px; height:24px; }
.lw-upload .import-surface .upload-instruction { font:400 14px/1.5 var(--font-ui); }
.design-system .lw-upload .import-surface .upload-meta { display:flex; flex-direction:row; justify-content:center; flex-wrap:wrap; gap:4px 16px; margin-top:6px; font:400 12px/1.6 var(--font-ui); color:var(--color-text-secondary); }
.design-system .lw-upload .import-surface::before { transition-duration:300ms; transition-timing-function:var(--site-ease); }
.design-system .lw-upload .import-surface:not(:disabled):not([aria-disabled=true]):hover::before { transition-duration:520ms; transition-timing-function:var(--site-ease); }
.lw-upload-guidance { text-align:center; font:400 13px/1.6 var(--font-ui); color:var(--color-text-secondary); }
.lw-upload-guidance>p { font:inherit; max-width:62ch; margin-inline:auto; }
.lw-compact-note { display:none; }
.lw-source-help { margin:12px auto 0; padding:0; border:0; max-width:560px; }
.lw-source-help summary { display:inline-flex; align-items:center; justify-content:center; min-height:36px; gap:10px; padding:4px 8px; cursor:pointer; list-style:none; color:var(--color-ink); font:400 13px/1.5 var(--font-ui); border-radius:4px; }
.lw-source-help summary::-webkit-details-marker { display:none; }
.lw-source-help summary svg { width:14px; height:14px; transform:rotate(90deg); transition:transform var(--site-motion-ui) var(--site-ease); }
.lw-source-help[open] summary svg { transform:rotate(-90deg); }
.lw-source-help summary:hover { background:var(--color-hover); }
.lw-source-help>div { text-align:left; padding:18px 0 0; }
.lw-source-help p { font:400 13px/1.7 var(--font-ui); color:var(--color-text-secondary); }
.lw-source-help p+p { margin-top:10px; }
.lw-entry-details { border-top:1px solid var(--color-border-subtle); padding-block:36px 60px; }
.lw-entry-heading { margin-bottom:36px; }
.lw-entry-heading h2 { font:500 26px/1.25 var(--font-display); letter-spacing:-.025em; }
.lw-entry-steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; padding:0; margin:0; }
.lw-entry-steps li { position:relative; padding-left:40px; }
.lw-step-number { position:absolute; top:2px; left:0; color:var(--color-text-secondary); font:400 12px/1.5 var(--font-mono); }
.lw-entry-steps h3 { font:600 15px/1.5 var(--font-ui); margin-bottom:10px; }
.lw-entry-steps p { font:400 14px/1.65 var(--font-ui); max-width:32ch; color:var(--color-text-secondary); }
.design-system:not([data-phase=empty])>.lw-public-header, .design-system:not([data-phase=empty])>.lw-footer, .design-system:not([data-phase=empty])>.lw-entry-details { display:none; }
.design-system:not([data-phase=empty]) .lw-upload-guidance { display:none; }
/* Compact footer: only existing destinations. */
.lw-footer { padding:32px 0 24px; border-top:1px solid var(--color-border-subtle); font:400 13px/1.6 var(--font-ui); }
.lw-footer-top { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.lw-footer .upload-brand { font-size:20px; gap:8px; letter-spacing:-.035em; }
.lw-footer nav { display:flex; flex-wrap:wrap; gap:24px; }
.lw-footer nav a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.lw-footer nav a:hover { text-decoration:underline; text-underline-offset:5px; }
.lw-footer-bottom { display:flex; justify-content:space-between; gap:24px; margin-top:24px; font-size:12px; color:var(--color-text-secondary); }
/* Workspace chrome: keep canvas/control dimensions and transaction states. */
.workspace-site-menu { position:relative; margin:0 0 0 auto; padding:0; border:0; flex:none; font:13px/1.4 var(--font-ui); }
.workspace-site-menu summary { list-style:none; cursor:pointer; min-height:36px; display:flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid var(--color-border-control); border-radius:var(--radius-pill); background:var(--color-bg-control); transition:background var(--site-motion-ui); }
.workspace-site-menu summary:hover { background:var(--color-hover); }
.workspace-site-menu summary::-webkit-details-marker { display:none; }
.workspace-site-menu summary::after { content:'⌄'; transition:transform var(--site-motion-ui) var(--site-ease); }
.workspace-site-menu[open] summary::after { transform:rotate(180deg); }
.workspace-site-menu nav { position:absolute; top:calc(100% + 8px); right:0; min-width:200px; display:grid; padding:8px; background:var(--color-bg-inspector); border:1px solid var(--color-border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-popover); z-index:40; }
.workspace-current-tool { display:block; padding:8px 12px 12px; color:var(--color-text-secondary); font-size:12px; border-bottom:1px solid var(--color-border-subtle); }
.workspace-site-menu a { display:block; padding:12px; color:var(--color-ink); text-decoration:none; border-radius:var(--radius-sm); }
.workspace-site-menu a:hover { background:var(--color-hover); }
/* Only the welcome inspectors lose marketing headings; active editing controls stay intact. */
#st-shape-inspector .inspector-divider, #mask-review-panel .inspector-divider { background:transparent; margin-block:8px; }
#st-shape-inspector .base-description, #mask-review-panel .base-description { margin-top:8px; }
@media(min-width:801px) and (prefers-reduced-motion:no-preference) {
  .lw-highlight::after { animation:lw-underline 720ms var(--site-ease) both; }
  @keyframes lw-underline { from { transform:scaleX(.15); } to { transform:scaleX(1); } }
}
@media(max-width:960px) {
  :root { --site-header-height:72px; }
  .lw-hero, .design-system[data-phase=empty] .lw-upload { min-height:calc(100svh - 72px); }
  .lw-public-header, .design-system[data-phase=empty]>.lw-public-header { min-height:72px; padding:12px var(--site-gutter); }
  .lw-public-header .upload-menu-toggle { display:flex; width:44px; height:44px; padding:0; align-items:center; justify-content:center; border-radius:50%; }
  .lw-public-header .upload-menu-toggle:hover { background:var(--color-hover); }
  .lw-public-header .upload-menu-toggle svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; }
  .lw-public-header .upload-menu-toggle path { transition:transform var(--site-motion-ui); }
  .lw-public-header .upload-navigation { position:absolute; top:100%; left:0; right:0; display:flex; align-items:stretch; flex-direction:column; gap:12px; padding:20px var(--site-gutter) 24px; background:var(--color-bg-app); border:0; border-bottom:1px solid var(--color-border-control); border-radius:0; box-shadow:0 10px 16px rgb(37 37 37 / 4%); }
  .lw-public-header .upload-navigation:not([hidden]) { animation:lw-menu-in 200ms var(--site-ease); }
  .lw-public-header .upload-product-links { align-items:stretch; flex-direction:column; gap:4px; }
  .lw-public-header .upload-product-links a { justify-content:flex-start; padding:10px 0; font-size:17px; }
  .lw-public-header .upload-product-links a::after { display:none; }
  .lw-public-header .upload-navigation .lw-nav-cta { align-self:flex-start; margin-top:8px; }
  @keyframes lw-menu-in { from { opacity:.7; transform:translateY(-6px); } to { opacity:1; transform:none; } }
  .lw-tool-story, .lw-tool-story-reverse { gap:36px; min-height:calc(100svh - 72px); }
  .lw-media-board { padding:20px 16px 18px; }
  .lw-samples { gap:8px; }
  .lw-entry-steps { gap:24px; }
}
@media(max-width:800px) {
  :root { --site-anchor-inset:92px; }
  .lw-hero { padding-block:64px 72px; }
  .lw-hero>.lw-kicker { font-size:18px; }
  .lw-hero h1 { font-size:clamp(58px,10vw,80px); margin-block:24px 28px; }
  .lw-hero>.lw-button { margin-top:64px; }
  .lw-hero .lw-hero-description { font-size:17px; }
  .lw-tool-story, .lw-tool-story-reverse { grid-template-columns:minmax(0,1fr); gap:32px; min-height:0; padding-block:64px 72px; }
  .lw-tool-story-reverse .lw-tool-copy, .lw-tool-story-reverse .lw-media-board { grid-column:auto; grid-row:auto; }
  .lw-tool-copy h2 { font-size:46px; margin-block:18px 20px; }
  .lw-tool-copy h2 br { display:none; }
  .lw-tool-copy>p:not(.lw-kicker) { max-width:42ch; }
  .lw-tool-cta { margin-top:18px; }
  .lw-media-board { transform:none; }
  .lw-flat-story { display:block; padding:0; }
  :is(.lw-flat-stage,.lw-batch-stage) { padding:48px 0; }
  :is(.lw-flat-stage,.lw-batch-stage) .lw-tool-copy h2 { font-size:46px; }
  .lw-flat-demo .lw-sample img { max-height:none; }
  .lw-questions { grid-template-columns:minmax(0,1fr); gap:36px; padding-block:64px 72px; }
  .lw-questions h2 { font-size:46px; max-width:none; margin-top:18px; }
  .design-system[data-phase=empty] .lw-upload { width:min(100% - var(--site-gutter)*2,640px); padding:clamp(32px,5svh,64px) 0; gap:28px; }
  .lw-entry-heading { display:block; margin-bottom:28px; }
  .lw-entry-heading h2 { margin-top:12px; }
}
@media(max-width:520px) {
  .lw-public-header .upload-brand, .lw-footer .upload-brand { font-size:19px; }
  .lw-hero { padding-block:52px 64px; }
  .lw-hero h1 { font-size:clamp(54px,15.5vw,72px); }
  .lw-hero>.lw-kicker { font-size:16px; }
  .lw-hero>.lw-button { min-height:64px; padding:18px 30px; margin-top:72px; font-size:16px; }
  .lw-wide-break { display:none; }
  .lw-hero-description { max-width:30ch; }
  .lw-tool-copy h2 { font-size:40px; }
  .lw-tool-copy>p:not(.lw-kicker) { font-size:16px; }
  .lw-media-board { padding:18px 12px 16px; }
  .lw-media-meta { font-size:11px; padding-bottom:14px; gap:10px; }
  .lw-samples { padding-block:18px; gap:7px; }
  :is(.lw-flat-stage,.lw-batch-stage) .lw-tool-copy h2 { font-size:40px; }
  .lw-flat-demo { --flat-card-padding:16px; --flat-image-gap:16px; border-radius:24px; }
  .lw-flat-images { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lw-flat-results, .lw-flat-result-images { display:contents; }
  .lw-sample figcaption { font-size:11px; padding-top:12px; }
  .lw-media-caption { font-size:11px; }
  .lw-questions h2 { font-size:40px; }
  .lw-question summary { font-size:17px; padding-block:22px; gap:20px; }
  .lw-answer { font-size:16px; padding:0 0 24px; }
  .design-system[data-phase=empty] .lw-upload { padding-block:36px; }
  .lw-upload .empty-copy h1 { font-size:40px; }
  .lw-upload .upload-intro p, .lw-upload .empty-copy .lede { font-size:16px; }
  .design-system[data-phase=empty] .lw-upload .import-surface { min-height:300px; padding:32px 16px; }
  .lw-upload .import-surface strong { font-size:17px; }
  .lw-upload .import-surface .upload-instruction { max-width:26ch; font-size:13px; }
  .design-system .lw-upload .import-surface .upload-meta { flex-direction:column; }
  .lw-desktop-note { display:none; }
  .lw-compact-note { display:block; margin-top:8px; }
  .lw-entry-details { padding-block:28px 40px; }
  .lw-entry-heading h2 { font-size:24px; }
  .lw-entry-steps { grid-template-columns:minmax(0,1fr); gap:28px; }
  .lw-entry-steps p { max-width:40ch; }
  .lw-footer-top { align-items:flex-start; flex-direction:column; gap:16px; }
  .lw-footer nav { gap:20px; }
  .lw-footer-bottom { margin-top:16px; }
  .workspace-site-menu summary { font-size:12px; padding-inline:10px; }
}
@media(prefers-reduced-motion:reduce) {
  html:has(.lw-site) { scroll-behavior:auto; }
  .lw-site *, .lw-site *::after, .lw-public-header *, .lw-public-header *::after, .lw-upload *, .lw-upload *::before, .lw-footer *, .workspace-site-menu *, .workspace-site-menu summary::after { transition:none!important; animation:none!important; }
  .lw-media-board { transform:none!important; }
}
@media (max-width:720px) {
  .lw-desktop-note { display:none; }
  .lw-compact-note { display:block; margin-top:8px; }
}

/* Keep the upload composition within shorter viewports while retaining equal padding. */
@media(max-height:760px) {
  .design-system[data-phase=empty] .lw-upload .import-surface { min-height:clamp(180px,calc(100svh - 440px),300px); }
}

/* Flat upload: aligned artwork stays intact while its fills dissolve between frames. */
.design-system[data-phase=empty] .lw-flat-upload { width:min(100% - var(--site-gutter)*2,1920px); grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(48px,6vw,144px); align-items:center; }
.lw-flat-upload-intro { min-width:0; }
.lw-flat-upload .empty-copy h1 { font-size:clamp(42px,4.5vw,80px); white-space:nowrap; }
.lw-flat-upload-demo { margin:clamp(28px,4svh,52px) auto 0; max-width:880px; text-align:center; }
.lw-flat-upload-frames { position:relative; height:clamp(280px,47svh,600px); background:var(--color-bg-control); border-radius:clamp(24px,4.5vw,64px); overflow:hidden; }
.lw-flat-upload-frames img { position:absolute; inset:0; width:100%; height:100%; padding:clamp(20px,1.4vw,28px); object-fit:contain; image-rendering:auto; opacity:0; transition:opacity 1200ms cubic-bezier(.4,0,.2,1); }
.lw-flat-upload-frames img[data-active=true] { opacity:1; }
.lw-flat-upload-demo[data-resetting=true] img { transition:none; }
.lw-flat-demo-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:10px auto 0; padding:12px; border:0; border-radius:50%; background:transparent; color:var(--color-text-secondary); cursor:pointer; }
.lw-flat-demo-toggle[hidden] { display:none; }
.lw-flat-demo-toggle:hover { background:var(--color-hover); color:var(--color-ink); }
.lw-flat-demo-toggle:focus-visible { outline:2px solid var(--color-ink); outline-offset:3px; }
.lw-flat-demo-toggle svg { width:18px; height:18px; }
.lw-demo-play { fill:currentColor; }
.lw-demo-pause { fill:none; stroke:currentColor; stroke-width:2; }
.lw-flat-upload-demo[data-playing=true] .lw-demo-play, .lw-flat-upload-demo[data-playing=false] .lw-demo-pause { display:none; }
.lw-flat-upload-action { display:flex; flex-direction:column; gap:14px; min-width:0; width:100%; max-width:640px; justify-self:center; }
.design-system[data-phase=empty] .lw-flat-upload .import-surface { flex:none; height:clamp(320px,40svh,480px); min-height:0; border-radius:clamp(24px,4.5vw,64px); }
.lw-flat-upload-action .lw-source-help { margin-top:0; }
@media(max-width:960px) {
  .design-system[data-phase=empty] .lw-flat-upload { width:min(100% - var(--site-gutter)*2,640px); grid-template-columns:minmax(0,1fr); gap:36px; }
  .lw-flat-upload .empty-copy h1 { white-space:normal; }
  .lw-flat-upload-frames { height:clamp(300px,55vw,400px); }
  .design-system[data-phase=empty] .lw-flat-upload .import-surface { height:clamp(300px,55vw,400px); min-height:0; }
}
@media(min-width:961px) and (max-height:760px) {
  .lw-flat-upload-demo { margin-top:24px; }
  .lw-flat-upload-frames { height:260px; }
  .design-system[data-phase=empty] .lw-flat-upload .import-surface { height:300px; min-height:0; }
}
@media(prefers-reduced-motion:reduce) {
  .lw-flat-upload-frames img { transition:none; }
}

.lw-flat-upload-frames { user-select:none; -webkit-user-select:none; }
.lw-flat-upload-frames img { pointer-events:none; -webkit-user-drag:none; }
.design-system[data-phase=empty] .lw-flat-upload .import-surface .import-arrow { width:64px; height:64px; }
.lw-flat-upload .import-surface .import-arrow svg { width:32px; height:32px; }
.lw-flat-upload .import-surface strong { font-size:22px; }
.lw-flat-upload .import-surface .upload-instruction { font-size:16px; }
.design-system .lw-flat-upload .import-surface .upload-meta { font-size:14px; }
@media(min-width:961px) {
  .design-system[data-phase=empty] .lw-flat-upload { --flat-preview-height:clamp(280px,47svh,600px); grid-template-rows:auto var(--flat-preview-height) minmax(44px,auto); row-gap:20px; align-items:start; }
  .lw-flat-upload-intro, .lw-flat-upload-demo, .lw-flat-upload-action { display:contents; }
  .lw-flat-upload .empty-copy { grid-column:1 / -1; grid-row:1; margin-bottom:clamp(8px,2svh,24px); }
  .lw-flat-upload-frames { grid-column:1; grid-row:2; height:100%; width:min(100%,880px); justify-self:center; }
  .lw-flat-demo-toggle { grid-column:1; grid-row:3; justify-self:center; margin:0; }
  .design-system[data-phase=empty] .lw-flat-upload .import-surface { grid-column:2; grid-row:2; height:100%; width:100%; max-width:640px; justify-self:center; }
  .lw-flat-upload .lw-upload-guidance { grid-column:2; grid-row:3; }
}
@media(min-width:961px) and (max-height:760px) {
  .design-system[data-phase=empty] .lw-flat-upload { --flat-preview-height:260px; }
}
.studio #st-drop-cover { gap:24px; padding:32px; text-align:center; }
.studio #st-drop-cover svg { width:80px; height:80px; }
.studio #st-drop-cover strong { font:500 clamp(36px,4.5vw,72px)/1.12 var(--font-display); letter-spacing:-.04em; }
.studio #st-drop-cover>span:last-child { font:400 clamp(18px,2vw,24px)/1.5 var(--font-ui); }
@media(max-width:520px) {
  .lw-flat-upload .import-surface strong { font-size:20px; }
  .lw-flat-upload .import-surface .upload-instruction { font-size:14px; }
  .studio #st-drop-cover svg { width:64px; height:64px; }
}
/* Batch uses the shared Flat upload grid; only its preview content differs. */
.design-system:not([data-phase=empty]) .lw-batch-upload-demo { display:none; }
/* Overlapping centered panels blend in place; reset has no transition. */
.lw-batch-upload-demo .lw-batch-upload-frames { container-type:size; }
.lw-batch-upload-frames img { position:static; inset:auto; padding:0; opacity:1; transition:none; object-fit:contain; }
.lw-batch-demo-track { position:absolute; inset:0; }
.lw-batch-demo-panel { position:absolute; inset:0; margin:0; display:flex; align-items:center; justify-content:center; opacity:0; filter:blur(12px); transform:scale(.96); }
.lw-batch-demo-original { opacity:1; filter:blur(0); transform:scale(1); }
.lw-batch-demo-original img { width:63cqh; max-width:90cqw; height:84cqh; }
.lw-batch-demo-grid { width:min(84cqh,86cqw); height:87cqh; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); }
.lw-batch-demo-cell { margin:0; position:relative; display:grid; place-items:center; }
.lw-batch-demo-cell>span { grid-area:1/1; width:clamp(16px,6.8cqh,30px); height:clamp(16px,6.8cqh,30px); border-radius:5px; background:var(--batch-swatch); }
.lw-batch-demo-cell img { grid-area:1/1; width:18.75cqh; max-width:100%; height:25cqh; opacity:0; transform:scale(.35); }
.lw-batch-demo-cell[data-revealed=true]>span { opacity:0; transform:scale(.3); transition:opacity 180ms ease,transform 240ms ease; }
.lw-batch-demo-cell[data-revealed=true] img { opacity:1; transform:scale(1); }
.lw-batch-upload-demo[data-stage=grid] .lw-batch-demo-cell[data-revealed=true] img { animation:lw-batch-swatch-pop 380ms cubic-bezier(.2,.8,.2,1) both; }
.lw-batch-upload-demo:is([data-stage=grid],[data-stage=return]) .lw-batch-demo-panel { transition:opacity var(--demo-transition-duration,800ms) ease-in-out, filter var(--demo-transition-duration,800ms) ease-in-out, transform var(--demo-transition-duration,800ms) ease-in-out; }
.lw-batch-upload-demo:is([data-stage=grid],[data-stage=paused]) .lw-batch-demo-original { opacity:0; filter:blur(12px); transform:scale(1.04); }
.lw-batch-upload-demo:is([data-stage=grid],[data-stage=paused]) [data-demo-colors] { opacity:1; filter:blur(0); transform:scale(1); }
.lw-batch-upload-demo[data-stage=paused] .lw-batch-demo-cell>span { transition:none; }
@keyframes lw-batch-swatch-pop { 0% { opacity:0; transform:scale(.35); } 72% { opacity:1; transform:scale(1.08); } 100% { opacity:1; transform:scale(1); } }
.lw-batch-upload .lw-source-help { margin-top:0; }
@media(min-width:961px) {
  .design-system[data-phase=empty] .lw-batch-upload #start-state { display:contents; }
  .lw-batch-upload #upload-error { grid-column:2; grid-row:4; }
}
.lw-flat-demo img, .lw-batch-demo img { -webkit-user-drag:none; user-select:none; pointer-events:none; }
.batch-design-system .upload-drag-message { gap:24px; padding:32px; text-align:center; }
.batch-design-system .upload-drag-icon { width:80px; height:80px; }
.batch-design-system .upload-drag-message strong { font:500 clamp(36px,4.5vw,72px)/1.12 var(--font-display); letter-spacing:-.04em; }
.batch-design-system .upload-drag-message>span { font:400 clamp(18px,2vw,24px)/1.5 var(--font-ui); }
@media(max-width:520px) { .batch-design-system .upload-drag-icon { width:64px; height:64px; } }
@media(prefers-reduced-motion:reduce) {
  .lw-batch-upload-demo .lw-batch-demo-panel { transition:none; filter:none; transform:none; }
  .lw-batch-upload-demo[data-stage=grid] .lw-batch-demo-cell[data-revealed=true] img { animation:none; }
  .lw-batch-demo-cell[data-revealed=true]>span { transition:none; }
}
.lw-batch-upload-demo { width:100%; margin:0 auto; }
.lw-batch-upload-frames { width:100%; }
.lw-batch-upload-action { display:flex; flex-direction:column; gap:14px; min-width:0; }
.design-system:not([data-phase=empty]) .lw-batch-upload-action { display:none; }
@media(min-width:961px) { .design-system[data-phase=empty] .lw-batch-upload-action { display:contents; } }
.lw-batch-upload-frames { max-width:880px; }