/* mini cam. */
/* Font assets are user-provided: put them in ./fonts/ (WOFF2 or TTF).
   SUITE's old root-level WOFF2 paths remain compatible with prior deployments. */
@font-face {
  font-family:'SUITE';
  src:url('./fonts/SUITE-Regular.woff2') format('woff2'),
      url('./SUITE-Regular.woff2') format('woff2'),
      url('./fonts/SUITE-Regular.ttf') format('truetype');
  font-style:normal;font-weight:400;font-display:swap;
}
@font-face {
  font-family:'SUITE';
  src:url('./fonts/SUITE-SemiBold.woff2') format('woff2'),
      url('./SUITE-SemiBold.woff2') format('woff2'),
      url('./fonts/SUITE-SemiBold.ttf') format('truetype');
  font-style:normal;font-weight:600;font-display:swap;
}
@font-face {
  font-family:'SUITE';
  src:url('./fonts/SUITE-Bold.woff2') format('woff2'),
      url('./SUITE-Bold.woff2') format('woff2'),
      url('./fonts/SUITE-Bold.ttf') format('truetype');
  font-style:normal;font-weight:700;font-display:swap;
}
@font-face {
  font-family:'Share Tech Mono';
  src:url('./fonts/ShareTechMono-Regular.woff2') format('woff2'),
      url('./fonts/ShareTechMono-Regular.ttf') format('truetype');
  font-style:normal;font-weight:400;font-display:swap;
}
@font-face {
  font-family:'IBM Plex Mono';
  src:url('./fonts/IBMPlexMono-Regular.woff2') format('woff2'),
      url('./fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-style:normal;font-weight:400;font-display:swap;
}
@font-face {
  font-family:'Courier Prime';
  src:url('./fonts/CourierPrime-Regular.woff2') format('woff2'),
      url('./fonts/CourierPrime-Regular.ttf') format('truetype');
  font-style:normal;font-weight:400;font-display:swap;
}
@font-face {
  font-family:'Special Elite';
  src:url('./fonts/SpecialElite-Regular.woff2') format('woff2'),
      url('./fonts/SpecialElite-Regular.ttf') format('truetype');
  font-style:normal;font-weight:400;font-display:swap;
}
:root {
  color-scheme:light;
  --workspace:#f7f7f7;
  --panel:#ffffff;
  --line:#e5e5e5;
  --line-strong:#d6d6d6;
  --ink:#171717;
  --text:#414141;
  --muted:#909090;
  --stage:#262626;
  --stage-border:#404040;
  --ui:'SUITE',"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",Arial,sans-serif;
  --brand:'Special Elite','Courier Prime',Georgia,serif;
  --font-camera:'Share Tech Mono','IBM Plex Mono','SUITE',monospace;
  --font-time:'IBM Plex Mono','Share Tech Mono','SUITE',monospace;
  --font-caption:'Courier Prime','SUITE',"Malgun Gothic",monospace;
  --font-title:'Special Elite','Courier Prime','SUITE',serif;
}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;min-width:320px;min-height:100vh;background:var(--workspace);color:var(--ink);font-family:var(--ui);font-size:12px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.43;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #777;outline-offset:2px}
[hidden],.tab-panel[hidden],.export-progress[hidden],.remove-photo[hidden]{display:none!important}

/* Header: brand on the left; navigation precisely centered */
.topbar{height:73px;padding:0 37px;display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);align-items:center;position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.brand{justify-self:start;color:#202020;text-decoration:none;white-space:nowrap;min-width:0}
.brand strong{display:block;font-family:var(--brand);font-style:normal;font-size:20px;font-weight:400;line-height:1.15;letter-spacing:-.012em;transform:translateY(-1px)}
.brand-period{color:#202020}
.topbar-balance{min-width:0}
.step-tabs{display:flex;justify-content:center;align-items:stretch;height:73px;gap:34px}
.step-tab{min-width:58px;position:relative;padding:3px 0 0;border:0;background:transparent;color:#909090;font-size:12px;font-weight:620;white-space:nowrap;transition:color .16s ease}
.step-tab:hover{color:#333}
.step-tab.is-active{color:#171717}
.step-tab.is-active::after{content:"";height:2px;position:absolute;bottom:-1px;left:0;right:0;background:#171717}
.step-tab span{display:none}

/* Editor sidebar and large dark preview stage */
.site-shell{display:grid;grid-template-columns:291px minmax(0,1fr);min-height:calc(100dvh - 73px)}
.editor{position:sticky;top:73px;align-self:start;min-width:0;height:calc(100dvh - 73px);background:#fff;border-right:1px solid var(--line);overflow:hidden}
.tab-scroll{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#d6d6d6 transparent}
.tab-panel{padding:32px 28px 34px}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:18px;margin:0 0 22px;border-bottom:1px solid var(--line)}
.section-title h2{margin:0;font-size:15px;font-family:var(--font-title);font-weight:400;line-height:1.25;letter-spacing:-.015em}
.field-label{display:block;margin:0 0 9px;color:#454545;font-weight:630;font-size:11px;letter-spacing:-.015em}
.tab-panel input[type="text"],.tab-panel select{width:100%;height:38px;border:1px solid #dcdcdc;border-radius:3px;padding:0 11px;color:#333;background:#fff;font-size:11px;outline:0;min-width:0}
.tab-panel input[type="text"]:focus,.tab-panel select:focus{border-color:#888;box-shadow:0 0 0 2px rgba(23,23,23,.06)}
.tab-panel input[type="text"]::placeholder{color:#adadad}
.tab-panel select{appearance:none;padding-right:25px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='m5 9 7 7 7-7' fill='none' stroke='%23787878' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center}
.inline-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}
.inline-fields>div{min-width:0}
.field-block{margin-top:24px}
.field-block.separator-top{margin-top:25px;padding-top:23px;border-top:1px solid var(--line)}

/* Choice groups in reference's squared-off monochrome language */
.segmented{display:flex;gap:3px;margin:0 0 4px;border:1px solid #d9d9d9;border-radius:3px;padding:3px;background:#efefef}
.choice{flex:1;min-width:0;min-height:34px;border:0;border-radius:2px;background:transparent;color:#888;font-size:10px;font-weight:640;white-space:nowrap;transition:background .15s,color .15s}
.choice:hover{color:#333}
.choice.is-selected{background:#fff;color:#171717;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.palette-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.palette{display:flex;align-items:center;gap:8px;min-width:0;min-height:47px;padding:7px;border:1px solid #dfdfdf;border-radius:3px;background:#fff;color:#5b5b5b;text-align:left;font-size:10px;font-weight:600;transition:border-color .15s,background .15s}
.palette:hover{border-color:#a1a1a1;background:#f9f9f9}
.palette.is-selected{border-color:#7a7a7a;background:#fafafa}
.palette-swatch{display:block;flex:0 0 31px;width:31px;height:31px;border:1px solid rgba(0,0,0,.07);border-radius:2px}
.palette-swatch.classic{background:linear-gradient(135deg,#bdcfcc,#fbddc9 49%,#b1a7b4)}
.palette-swatch.peach{background:linear-gradient(135deg,#ffd2bb,#efa5ae 57%,#bfa6bd)}
.palette-swatch.soft{background:linear-gradient(135deg,#c2cfdd,#f3e5ef 55%,#b6bbd6)}
.palette-swatch.dusk{background:linear-gradient(135deg,#95b4d5,#716b9b 60%,#e5bed3)}
.palette-swatch.mono{background:linear-gradient(135deg,#363940,#c3c2c3 55%,#e8e8e4)}
.palette-swatch.none{background:linear-gradient(135deg,#8b8f97,#f3f5f7 60%,#c0c5cb)}

/* Switches and contextual descriptions */
.toggle-line{display:flex;align-items:center;justify-content:space-between;position:relative;gap:12px;margin:16px 0;cursor:pointer;min-height:35px}
.toggle-line>span{display:flex;flex-direction:column;gap:4px;min-width:0}
.toggle-line b{font-size:11px;font-weight:630;color:#464646}
.toggle-line small{font-size:10px;font-weight:400;color:#989898;line-height:1.4}
.toggle-line>input[type="checkbox"]{position:absolute;width:36px;height:23px;right:0;top:50%;transform:translateY(-50%);opacity:0;z-index:1;cursor:pointer}
.toggle-track{display:flex;align-items:center;flex:0 0 36px;width:36px;height:21px;padding:3px;border-radius:12px;background:#dadada;transition:background .15s}
.toggle-track::before{content:"";display:block;width:15px;height:15px;border-radius:50%;background:white;box-shadow:0 1px 2px #0002;transition:transform .15s}
.toggle-line input:checked+.toggle-track{background:#303030}
.toggle-line input:checked+.toggle-track::before{transform:translateX(15px)}
.toggle-line input:focus-visible+.toggle-track{outline:2px solid #777;outline-offset:2px}
.hint,.save-note{margin:0 0 16px;color:#8b8b8b;font-size:10px;line-height:1.7}

/* Photo uploads and transform controls */
.upload-grid{display:grid;gap:8px}
.upload-card{display:flex;gap:10px;min-height:89px;padding:8px;border:1px dashed #d7d7d7;border-radius:3px;background:#fafafa;align-items:center;transition:background .15s,border-color .15s}
.upload-card.is-dragover{background:#eee;border-color:#888}
.upload-thumb{position:relative;flex:0 0 72px;width:72px;height:72px;overflow:hidden;border-radius:2px;background:#eeeeef;background-size:cover;background-position:center}
.upload-card[data-slot="sub"] .upload-thumb{background-color:#eeeeef}
.upload-description{min-width:0;display:flex;align-items:flex-start;flex-direction:column}
.upload-description b{font-size:10px;color:#414141;font-weight:700;letter-spacing:.025em}
.upload-description small{margin-top:4px;font-size:10px;color:#939393}
.text-button,.remove-photo{padding:0;border:0;background:none;font-size:10px;font-weight:650;color:#3f3f3f;min-height:20px;margin-top:6px;text-align:left}
.text-button:hover,.remove-photo:hover{text-decoration:underline;text-underline-offset:3px}
.remove-photo{color:#969696;font-weight:500;margin-top:1px}
.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}
.slider-field{margin-top:20px}
.slider-field>label{display:flex;justify-content:space-between;align-items:baseline;gap:5px;margin-bottom:10px;font-size:11px;font-weight:610;color:#494949}
.slider-field output{font-size:10px;font-variant-numeric:tabular-nums;color:#888;font-weight:550}
.slider-help{margin:7px 0 0;color:#989898;font-size:10px;line-height:1.55;font-weight:400}
.slider-field.is-disabled{opacity:.55}
.slider-field.is-disabled input[type="range"]{cursor:not-allowed}
.slider-field input[type="range"]{display:block;width:100%;height:14px;cursor:pointer;accent-color:#292929}
.secondary-button,.primary-button{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;min-height:38px;border-radius:3px;border:1px solid #d4d4d4;background:#fff;color:#333;font-size:11px;font-weight:630;transition:background .15s,border-color .15s}
.secondary-button:hover{background:#f3f3f3;border-color:#aaa}
.secondary-button.small{margin-top:23px;padding:8px;font-size:10px}
.primary-button{background:#1c1c1c;border-color:#1c1c1c;color:#fff}
.primary-button:hover{background:#383838}

/* Motion cards */
.motion-options{display:grid;gap:7px}
.motion-option{position:relative;display:flex;align-items:center;gap:12px;text-align:left;width:100%;min-height:66px;padding:10px 12px;border:1px solid #dedede;border-radius:3px;background:#fff;color:#555;transition:border-color .15s,background .15s}
.motion-option:hover{border-color:#aaa}
.motion-option.is-selected{border-color:#828282;background:#fafafa}
.motion-icon{display:grid;place-items:center;flex:0 0 33px;width:33px;height:33px;border:1px solid #e0e0e0;border-radius:2px;background:#f3f3f3;font-size:17px;color:#505050}
.motion-option>span:nth-child(2){display:grid;gap:5px;min-width:0}
.motion-option b{font-size:11px;color:#333;font-weight:650}
.motion-option small{font-size:10px;color:#999;line-height:1.4}
.motion-check{margin-left:auto;opacity:0;font-size:12px;color:#444;font-weight:750}
.motion-option.is-selected .motion-check{opacity:1}

/* Export panel */
.export-actions{display:grid;gap:9px;margin-top:25px}
.btn-symbol{font-size:15px;font-weight:400}
.file-pill{margin-left:auto;padding:2px 6px;background:#ffffff22;font-size:9px;border-radius:2px;letter-spacing:.4px}
.export-actions .primary-button{justify-content:flex-start;padding:0 13px}
.export-progress{margin-top:17px;padding:11px 0;border-top:1px solid #e4e4e4}
.progress-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:#555}
.progress-top span{font-variant-numeric:tabular-nums}
.progress-track{margin:10px 0;height:3px;overflow:hidden;background:#e4e4e4}
.progress-track>div{height:100%;width:0;background:#333;transition:width .15s}
#cancel-export{border:0;background:none;color:#888;font-size:10px;text-decoration:underline;padding:3px 0}
.save-note{margin:20px 0 0}

/* Reference-like dark preview studio */
.workspace{min-width:0;min-height:calc(100dvh - 73px);background:var(--stage);color:#ededed;overflow-x:hidden}
.workspace-content{width:100%;padding:0 36px 35px;min-width:0}
.stage-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;width:min(100%,1120px);height:52px;margin:0 auto}
.stage-actions{display:flex;align-items:center;gap:7px;flex-shrink:0}
.stage-title{display:flex;align-items:baseline;gap:11px;min-width:0}
.stage-title strong{font-family:var(--font-title);font-size:14px;font-weight:400;letter-spacing:-.01em}
.stage-title span{font-size:11px;color:#929292;font-variant-numeric:tabular-nums}
.stage-pause-btn{display:flex;align-items:center;justify-content:center;gap:5px;min-width:55px;height:25px;padding:0 10px;border:1px solid #505050;border-radius:3px;background:#262626;color:#bdbdbd;font-size:10px;font-weight:600}
.stage-pause-btn:hover{background:#333;border-color:#777;color:#fff}
.stage-pause-btn #play-icon{font-size:10px;min-width:9px;text-align:center}
.camera-stage{display:flex;align-items:center;justify-content:center;width:100%;min-height:0;margin:0 auto;padding:0}
.preview-screen-shell{position:relative;width:min(100%,1120px);overflow:hidden;border:1px solid #3a3a3a;border-radius:0;background:#161616;box-shadow:0 16px 54px rgba(0,0,0,.26)}
.preview-screen-shell canvas{width:100%;height:auto;display:block;touch-action:none;cursor:grab;background:#191919}
.preview-screen-shell canvas:active{cursor:grabbing}
.preview-screen-shell .screen-glare,.preview-screen-shell .inner-glass{display:none}
#camera-chassis.ratio-portrait{width:min(100%,435px)}
#camera-chassis.ratio-square{width:min(100%,780px)}
#camera-chassis.ratio-four-three{width:min(100%,970px)}
.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(100%,1120px);margin:17px auto 0;padding:0;min-height:43px}
.preview-controls{display:flex;align-items:center;gap:13px;flex:1;min-width:0}
.round-control{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;padding:0;border:1px solid #565656;border-radius:3px;color:#c8c8c8;background:#2c2c2c;font-size:19px}
.round-control:hover{background:#393939;border-color:#858585;color:#fff}
.timeline-wrap{width:100%;max-width:540px;min-width:0}
.timeline-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;color:#919191;font-family:var(--font-time);font-size:10px;font-weight:400;letter-spacing:.25px}
#elapsed-time{font-variant-numeric:tabular-nums;letter-spacing:.15px}
.timeline-bar{position:relative;width:100%;height:3px;border-radius:3px;background:#4a4a4a}
.timeline-fill{height:100%;width:0;background:#c7c7c7}
.timeline-thumb{position:absolute;left:0;top:50%;width:8px;height:8px;border-radius:50%;background:#e6e6e6;transform:translate(-50%,-50%)}
.quick-export{display:flex;align-items:center;justify-content:center;gap:13px;flex:0 0 auto;height:34px;min-width:100px;padding:0 13px;border:1px solid #626262;border-radius:3px;background:#343434;color:#eee;font-size:10px;font-weight:620}
.quick-export:hover{background:#444;color:#fff;border-color:#888}
.quick-export span{font-size:13px;font-weight:400}
.workspace-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(100%,1120px);margin:16px auto 0;padding-top:14px;border-top:1px solid #393939;color:#8c8c8c;font-size:10px;line-height:1.6}
.frame-tag{white-space:nowrap;color:#8d8d8d;font-size:9px;letter-spacing:.35px}
.frame-tag span{color:#b3b3b3}
.frame-tag i{font-style:normal;margin:0 6px;color:#777}

.toast{position:fixed;bottom:22px;left:50%;z-index:50;max-width:min(92vw,560px);padding:10px 15px;border-radius:3px;background:rgba(20,20,20,.94);color:#fff;font-size:11px;line-height:1.5;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.22);pointer-events:none;opacity:0;transform:translate(-50%,12px);transition:transform .18s ease,opacity .18s ease}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(min-width:1450px){.site-shell{grid-template-columns:318px minmax(0,1fr)}.tab-panel{padding-left:33px;padding-right:33px}.workspace-content{padding-left:48px;padding-right:48px}}
@media(max-width:1180px) and (min-width:921px){.topbar{padding-left:24px;padding-right:24px;grid-template-columns:minmax(160px,1fr) auto minmax(160px,1fr)}.step-tabs{gap:18px}.site-shell{grid-template-columns:270px minmax(0,1fr)}.tab-panel{padding-left:21px;padding-right:21px}.workspace-content{padding-left:25px;padding-right:25px}}
@media(max-width:920px){
  .topbar{height:104px;grid-template-columns:1fr;grid-template-rows:56px 48px;padding:0 18px}
  .brand{grid-row:1;justify-self:center}.brand strong{font-size:19px}
  .step-tabs{grid-row:2;height:48px;gap:10px;width:100%;justify-content:space-between}
  .step-tab{flex:1;min-width:0;font-size:11px}
  .topbar-balance{display:none}
  .site-shell{display:flex;flex-direction:column;min-height:calc(100dvh - 104px)}
  .workspace{order:1;min-height:0;width:100%}
  .workspace-content{padding:0 14px 20px}
  .stage-toolbar{height:52px}
  .editor{order:2;position:static;align-self:stretch;width:100%;height:auto;overflow:visible;border:0;border-top:1px solid var(--line)}
  .tab-scroll{height:auto;overflow:visible}
  .tab-panel{max-width:620px;margin:auto;padding:25px 24px 32px}
  .preview-screen-shell{box-shadow:0 10px 34px rgba(0,0,0,.22)}
}
@media(max-width:520px){
  .topbar{padding:0 12px}
  .brand strong{font-size:18px}
  .step-tabs{gap:4px}
  .step-tab{font-size:10px}
  .workspace-content{padding:0 8px 18px}
  .stage-title span{font-size:10px}
  .preview-toolbar{margin-top:11px;gap:10px}
  .preview-controls{gap:8px}
  .quick-export{min-width:82px;padding:0 8px;gap:6px;font-size:10px;height:33px}
  .workspace-bottom{margin-top:11px;padding-top:11px;align-items:flex-start;flex-wrap:wrap;gap:5px;font-size:9px}
  .frame-tag{font-size:8px}
  .tab-panel{padding-left:17px;padding-right:17px}
  .inline-fields{gap:8px}
  .palette-grid{gap:6px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;scroll-behavior:auto!important}}

/* Retain a direct-download link in case the browser blocks an async click. */
.download-ready{margin-top:13px;padding:12px;border:1px solid #e1e1e1;background:#fafafa;border-radius:3px}
.download-ready[hidden]{display:none!important}
.download-direct{width:100%;min-height:38px;text-decoration:none;color:#252525;background:#fff}
.download-direct:hover{background:#f0f0f0}
.download-ready small{display:block;margin-top:9px;color:#888;font-size:10px;line-height:1.6}