/* The portrait owns the viewport; direction lives beside it. */
.studio-page{--studio-header:64px;--studio-height:calc(100svh - 104px);--film-height:calc(var(--studio-height) - 66px)}
.studio-page header{height:var(--studio-header);min-height:0;padding:0 32px;grid-template-columns:1fr auto 1fr;gap:20px}
.studio-page .identity{font-size:11px;line-height:1.15}
.studio-page nav{grid-column:auto;width:auto;gap:8px}
.studio-page nav .making-cta,.studio-page nav .signup{min-height:40px;padding:9px 14px;font-size:12px}
#editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,386px);gap:clamp(24px,4vw,64px);max-width:1440px;min-height:calc(100svh - var(--studio-header));margin:0 auto;padding:20px 32px 24px;align-items:start}
#editor .image-column{display:block;position:sticky;top:20px;height:var(--studio-height);min-width:0;width:100%}
.film-stage-shell{height:var(--film-height);display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center}
#editor .editorial-stage{position:relative;top:auto;justify-self:center;width:min(100%,calc(var(--film-height)*.666667));height:100%;min-height:0;aspect-ratio:2/3;background:#e2dacc;box-shadow:none;z-index:0;touch-action:pan-y}
#editor .editorial-stage>img,#editor .editorial-stage>video{width:100%;height:100%;object-fit:contain}
.axis-rail{display:flex;flex-direction:column;align-items:center;gap:32px;color:var(--ink)}
.axis-control{display:flex;flex-direction:column;align-items:center;gap:6px}
.axis-control>span{font-size:12px;font-weight:600;margin-bottom:3px}
.axis-control>div{display:flex}
.axis-control button{height:44px;width:44px;padding:0;font-size:22px;border:1px solid var(--line);background:var(--white)}
.axis-control>div button+button{border-left:0}
.axis-control small{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.axis-control.vertical{gap:8px}
.axis-control.vertical button{width:52px}
.keyboard-note{font-size:10px;line-height:1.6;text-align:center;color:var(--muted);margin:0}
.film-arrow{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #f7f4ed70;background:#f7f4eddb;color:var(--ink);font-size:24px;opacity:.75;transition:opacity 160ms ease-out}
.arrow-left{left:10px;top:calc(50% - 22px)}
.arrow-right{right:10px;top:calc(50% - 22px)}
.arrow-up{top:10px;left:calc(50% - 22px)}
.arrow-down{bottom:10px;left:calc(50% - 22px)}
.film-arrow:focus-visible,.film-arrow:hover{opacity:1;background:var(--white);color:var(--accent)}
#editor #image-state{bottom:66px;left:16px;right:16px;margin:0;padding:12px;font-size:12px;text-align:center}
.film-footer{margin-left:100px;height:66px}
#editor .image-caption{display:flex;flex-direction:row;align-items:center;gap:12px;padding:6px 0 0;margin:0;min-height:42px}
#editor .image-caption>div{margin-right:auto;min-width:0}
#editor .image-caption strong{font-size:12px;font-weight:600}
#editor .image-caption>div>span{font-size:10px;margin-top:3px}
#editor .image-number{position:static;background:none;font-size:9px;color:var(--muted);padding:0;white-space:nowrap;letter-spacing:0}
#motion-toggle,#editor #sound{min-height:36px;min-width:0;padding:6px 0;font-size:11px;white-space:nowrap}
#motion-toggle{font-weight:600}
#editor #sound{font-size:10px;color:var(--muted)}
#editor .film-control{display:flex;align-items:center;gap:12px;padding:0;margin:0;min-height:24px}
#editor .film-control input{flex:1;width:0;min-height:24px;height:24px;margin:0}
#film-time{font-size:9px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
#editor .direction{max-width:none;width:100%;height:auto;overflow:visible;padding:0 8px 0 0;margin:0;scroll-margin-top:18px}
#editor .intro{margin:0 0 20px}
#editor h1{font-size:clamp(30px,2.6vw,39px);line-height:1.1;letter-spacing:-.035em;margin:0}
#editor .intro>p{font-size:11px;line-height:1.5;margin:11px 0 0;color:var(--muted)}
#editor fieldset{margin:0 0 17px;padding:0;border:0}
#editor legend{font-size:12px;font-weight:600;margin:0 0 9px;line-height:1.4}
#editor legend>b{font-size:11px;font-weight:400;color:var(--muted);float:right}
#editor .selection-shortcut{margin-left:8px;font-size:12px;font-weight:400;color:var(--muted)}
#editor .cast-options{gap:8px}
#editor .cast-options button{border:1px solid transparent;outline:0;min-height:72px;padding:0 0 5px;font-size:10px;background:transparent;color:var(--muted)}
#editor .cast-options img{width:100%;height:48px;aspect-ratio:auto;object-fit:cover;object-position:50% 12%;margin:0 0 6px}
#editor .cast-options button[aria-pressed=true]{border-color:var(--ink);color:var(--ink);font-weight:600;background:var(--white)}
#editor .cast-options button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#editor .look-options{gap:6px}
#editor .look-options button{gap:5px;min-height:78px;padding:3px 2px 5px;font-size:9px;border:1px solid transparent;background:transparent;color:var(--muted)}
#editor .look-options img{width:100%;height:57px;object-fit:contain;mix-blend-mode:multiply}
#editor .look-options button[aria-pressed=true]{border-color:var(--ink);background:var(--white);color:var(--ink);font-weight:600}
#editor .room-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
#editor .room-options button{min-width:0;display:flex;flex-direction:column;gap:5px;align-items:center;border:1px solid transparent;padding:0 0 4px;font-size:9px;min-height:57px;text-decoration:none}
#editor .room-options img{display:block;width:100%;height:34px;object-fit:cover;object-position:center 50%}
#editor .room-options button[aria-pressed=true]{border-color:var(--ink);color:var(--ink);background:var(--white);font-weight:600}
#editor .playback-toolbar{display:block;width:100%;padding-top:15px;border-top:1px solid var(--line);margin:1px 0 12px}
#editor .motion-direction,#editor .model-choice{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:6px 10px;margin:0;padding:0;text-align:left}
#editor .control-label{font-size:11px;color:var(--muted)}
#editor .motion-modes,#editor .model-options{display:flex;gap:2px;padding:2px;border:1px solid var(--line);background:transparent;min-width:0}
#editor .motion-modes button,#editor .model-options button{flex:1;min-width:0;min-height:36px;font-size:11px;line-height:1.2;padding:7px 6px}
#editor .motion-modes button[aria-pressed=true],#editor .model-options button[aria-pressed=true]{background:var(--ink);color:var(--white)}
#editor .motion-direction>p{grid-column:2;min-height:0;margin:0 0 9px;max-width:none;font-size:10px;line-height:1.4}
#editor .model-detail{font-size:9px;line-height:1.5;margin:6px 0 0;text-align:right;color:var(--muted)}
.comparison-invitation{padding:13px 15px 10px;border:1px solid var(--line);background:var(--white);margin:0 0 13px}
.comparison-prices{display:grid;grid-template-columns:1fr 22px 1fr;align-items:center;gap:6px;margin-bottom:10px}
.comparison-prices>span{font-size:11px;line-height:1.5}
.comparison-prices>span:last-child{text-align:right}
.comparison-prices strong{display:block;font-size:17px;font-weight:500;letter-spacing:-.025em}
.comparison-prices .comparison-versus{font-size:18px;color:var(--muted);text-align:center}
#editor .compare-open{width:100%;min-height:42px;display:flex;align-items:center;justify-content:space-between;padding:10px 13px;font-size:12px;background:var(--accent);color:var(--white);text-decoration:none}
#editor .compare-open:hover{background:var(--ink)}
#comparison-availability{font-size:9px;line-height:1.5;color:var(--muted);margin:8px 0 0}
#editor .collection-player{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;background:none;padding:0;border:0;text-align:left}
#editor #collection-toggle{border:0;padding:7px 0;font-size:11px;min-height:36px;white-space:nowrap;background:none}
#editor #collection-tools{display:flex;width:auto;margin-left:auto;border:0;gap:2px}
#editor #collection-tools button{padding:7px 5px;font-size:10px;min-height:36px}
#editor #collection-status{width:100%;font-size:9px;line-height:1.4;color:var(--muted)}
#editor .editor-actions{font-size:10px;gap:12px;margin-top:10px;align-items:center}
#editor .source-button{font-size:10px;min-height:34px;padding:5px 0}
#editor .downloads{font-size:10px;gap:13px}
#editor .downloads a{min-height:34px;border:0;text-decoration:underline;text-underline-offset:4px}
#editor .scale-link{margin:0;font-size:10px;min-height:32px;line-height:1.5}
#editor .edit-link{display:none}
.inline-product-link{display:inline;min-height:44px;padding:7px 0;font-size:13px;text-decoration:underline;text-underline-offset:4px}
/* The comparison gives both outputs equal visual space and one transport. */
.studio-page .compare-dialog{width:min(1120px,96vw);max-height:96svh;padding:18px 26px}
.studio-page .compare-dialog .modal-head{margin-bottom:8px}
.studio-page .compare-heading h2{font-size:30px;line-height:1.12;margin:0 0 5px}
.studio-page .compare-heading p{font-size:11px}
.studio-page .compare-selection{margin:12px 0;gap:8px}
.studio-page .compare-label strong{font-size:15px}
.studio-page .compare-label span{font-size:11px}
.studio-page .compare-stage{gap:24px}
.studio-page .compare-stage video{height:clamp(220px,calc(100svh - 350px),640px);min-height:0;background:#e2dacc}
.studio-page .compare-controls>div{margin-top:0}
.studio-page .compare-controls input{min-height:32px}
.studio-page .compare-note{margin:8px 0 0;font-size:10px!important}
.studio-page .compare-context{font-size:11px;color:var(--accent);line-height:1.5;margin:10px 0;max-width:none}
@media(min-width:1051px) and (min-height:501px){.film-footer{width:min(calc(100% - 100px),calc(var(--film-height)*.666667));margin-left:auto;margin-right:auto;transform:translateX(50px)}}
@media(hover:hover) and (pointer:fine){.editorial-stage:not(:hover):not(:focus-within) .film-arrow{opacity:.42}.axis-control button:hover{border-color:var(--ink);background:var(--ink);color:var(--white)}#editor [data-select]:hover{background:var(--white)}}
@media(min-width:701px) and (max-width:1050px){#editor{grid-template-columns:minmax(0,1fr) 320px;gap:24px;padding:18px 22px}.film-stage-shell{grid-template-columns:1fr}.axis-rail{display:none}.film-footer{margin-left:0}#editor .image-number{display:none}.studio-page header{padding:0 22px}.studio-page .scenario span{display:none}}
@media(min-width:701px) and (max-height:760px){#editor .intro{margin-bottom:14px}#editor h1{font-size:30px}#editor fieldset{margin-bottom:12px}#editor .cast-options img{height:40px}#editor .cast-options button{min-height:62px}#editor .look-options img{height:46px}#editor .look-options button{min-height:68px}#editor .room-options img{height:28px}#editor .room-options button{min-height:50px}}
@media(max-height:500px) and (min-width:701px){.studio-page{--studio-header:56px;--studio-height:calc(100svh - 80px);--film-height:calc(var(--studio-height) - 56px)}#editor{padding-top:12px;padding-bottom:12px}.film-footer{height:56px}#editor .image-caption{gap:9px;padding-top:3px}#editor .image-caption>div>span{display:none}#editor .direction{padding-bottom:12px}.studio-page .compare-stage video{height:220px}}
@media(max-width:700px){
  .studio-page{--studio-header:60px;--studio-height:auto;--film-height:min(calc(100svh - 164px),calc((100vw - 24px)*1.5))}
  .studio-page header{height:60px;min-height:60px;padding:0 14px;display:flex;justify-content:space-between;gap:10px}
  .studio-page .scenario{font-size:13px;min-height:44px}.studio-page .scenario span,.studio-page .identity{display:none}
  .studio-page nav{display:flex;width:auto;gap:6px}.studio-page nav .making-cta,.studio-page nav .signup{flex:none;min-height:44px;padding:8px 10px;font-size:10px;gap:5px}
  #editor{display:flex;flex-direction:column;gap:24px;min-height:0;padding:12px 12px 34px}
  #editor .image-column{display:block;position:static;top:auto;height:auto;width:100%}
  .film-stage-shell{display:grid;grid-template-columns:1fr;height:var(--film-height);gap:0}
  .axis-rail{display:none}#editor .editorial-stage{position:relative;top:auto;height:var(--film-height);min-height:0;width:min(100%,calc(var(--film-height)*.666667));box-shadow:none}
  .film-arrow{opacity:.85;background:#f7f4eddb}.arrow-left{left:8px}.arrow-right{right:8px}.arrow-up{top:8px}.arrow-down{bottom:8px}
  .film-footer{margin-left:0;height:88px}#editor .image-caption{flex-wrap:nowrap;gap:10px;min-height:44px;padding-top:0}#motion-toggle,#editor #sound{min-height:44px}#editor .film-control,#editor .film-control input{height:44px;min-height:44px}#editor .image-caption strong{font-size:11px}#editor .image-number{display:none}#editor #sound{font-size:9px}
  #editor .direction{height:auto;overflow:visible;padding:0 7px;margin:0;max-width:none;scroll-margin-top:12px}
  #editor .intro{margin-bottom:22px}#editor h1{font-size:34px}#editor .intro>p{font-size:12px;margin-top:10px}
  #editor fieldset{margin-bottom:22px}#editor legend{font-size:13px;margin-bottom:10px}
  #editor .cast-options img{height:58px}#editor .cast-options button{min-height:86px;font-size:11px}
  #editor .look-options img{height:64px}#editor .look-options button{min-height:87px;font-size:10px}
  #editor .room-options img{height:39px}#editor .room-options button{min-height:64px;font-size:10px}
  #editor .motion-modes button,#editor .model-options button{min-height:44px;font-size:12px}
  #editor .compare-open{min-height:46px;font-size:13px}#editor #collection-toggle,#editor #collection-tools button{min-height:44px}
  #editor .source-button,#editor .downloads a,#editor .scale-link{min-height:44px}#editor .edit-link{display:inline-flex;margin-top:10px;min-height:44px}html:has(.studio-page){scroll-padding-top:0}
  .studio-page .compare-dialog{padding:16px;width:98vw}.studio-page .compare-heading{display:block}.studio-page .compare-heading h2{font-size:26px}
  .studio-page .compare-mode{margin-top:12px;width:max-content}.studio-page .compare-selection{margin:12px 0}.studio-page .compare-stage{gap:8px}
  .studio-page .compare-label strong{font-size:12px}.studio-page .compare-label span{font-size:9px}.studio-page .compare-stage video{height:auto;width:100%;aspect-ratio:2/3;min-height:0}
  .studio-page .compare-controls>div{gap:8px}.studio-page .compare-controls button{font-size:11px;padding:9px 12px}.studio-page .compare-controls #compare-time{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.film-arrow{transition:none}}