/* Vlak MIT — see licenses/Vlak-MIT.txt */
/* The chassis keeps its 3D context. Only individual display faces clip content. */
.mo-device-viewport { position: relative; }
.mo-single .mo-device-fit.mo-folding { transition: none; }
.mo-folding .mo-handset { opacity: 0; pointer-events: none; }
.mo-fold-presentation { position: absolute; inset: 0 0 auto; z-index: 12; pointer-events: none; }
.mo-fold-stage { position: absolute; top: 0; left: 50%; transform-origin: center; transform-style: preserve-3d; pointer-events: none; }
.mo-single .mo-fold-stage .mo-fold-context { display: contents; }
.mo-fold-panel { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; }
.mo-fold-panel-left { left: 0; --mo-fold-radius: var(--mo-fold-shell-radius, 36px) var(--mo-fold-inner-corner, 0px) var(--mo-fold-inner-corner, 0px) var(--mo-fold-shell-radius, 36px); transform-origin: right center calc(var(--mo-fold-depth) / 2); }
.mo-fold-panel-right { right: 0; --mo-fold-radius: var(--mo-fold-inner-corner, 0px) var(--mo-fold-shell-radius, 36px) var(--mo-fold-shell-radius, 36px) var(--mo-fold-inner-corner, 0px); transform-origin: left center; }
.mo-fold-rim { position: absolute; inset: 0; border-radius: var(--mo-fold-shell-radius, 36px); border: 1px solid #878787; background: #454545; }
/* Recess the stacked chassis beneath the flexible display at the hinge.
   Exposed perimeter sections otherwise draw a dark ruled line through the glass. */
.mo-fold-panel-left .mo-fold-rim { right: 16px; }
.mo-fold-panel-right .mo-fold-rim { left: 16px; }
.mo-fold-rim:nth-child(2n) { border-color: #b5b5b5; }
.mo-fold-front, .mo-fold-back { position: absolute; inset: 0; border-radius: var(--mo-fold-radius); border: 1px solid #999; background: #181818; box-shadow: inset 0 0 0 1px #c0c0c0, inset 0 0 0 3px #282828; backface-visibility: hidden; }
.mo-fold-front { box-shadow: none; transform: translateZ(calc(var(--mo-fold-depth) / 2)); }
.mo-fold-back { transform: rotateY(180deg) translateZ(calc(var(--mo-fold-depth) / 2)); background: linear-gradient(120deg, #515151, #262626 55%, #444); }
.mo-fold-back { border-radius: var(--mo-fold-shell-radius, 36px); }
.mo-fold-panel-left .mo-fold-front { border-right: 0; }
.mo-fold-panel-right .mo-fold-front { border-left: 0; }
.mo-fold-glass, .mo-fold-cover { position: absolute; inset: var(--mo-fold-bezel); overflow: hidden; background: var(--bg); backface-visibility: hidden; }
.mo-fold-panel-left .mo-fold-glass { right: -.75px; border-radius: 24px var(--mo-fold-inner-glass-corner, 0px) var(--mo-fold-inner-glass-corner, 0px) 24px; }
.mo-fold-panel-right .mo-fold-glass { left: -.75px; border-radius: var(--mo-fold-inner-glass-corner, 0px) 24px 24px var(--mo-fold-inner-glass-corner, 0px); }
.mo-fold-cover { border-radius: var(--mo-fold-cover-radius, 36px); }
.mo .mo-fold-texture { position: absolute; top: 0; grid-template-rows: 59px minmax(0, 1fr) 34px; transform-origin: top left; }
.mo-fold-reflection { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 12%, #fff3 40%, #fff8 50%, transparent 76%); opacity: 0; }
.mo-fold-edge { position: absolute; display: block; background: linear-gradient(#989898, #ddd 28%, #4e4e4e 60%, #8e8e8e); }
.mo-fold-edge-hinge { background: var(--bg); }
.mo-fold-edge-top, .mo-fold-edge-bottom { height: var(--mo-fold-depth); left: 32px; right: 32px; transform: rotateX(90deg); }
.mo-fold-edge-top { top: calc(var(--mo-fold-depth) / -2); }
.mo-fold-edge-bottom { bottom: calc(var(--mo-fold-depth) / -2); }
.mo-fold-panel-right .mo-fold-edge-top, .mo-fold-panel-right .mo-fold-edge-bottom { left: 32px; right: 32px; }
.mo-fold-edge-outside, .mo-fold-edge-hinge { width: var(--mo-fold-depth); top: 32px; bottom: 32px; transform: rotateY(90deg); }
.mo-fold-panel-left .mo-fold-edge-outside, .mo-fold-panel-right .mo-fold-edge-hinge { left: calc(var(--mo-fold-depth) / -2); }
.mo-fold-panel-right .mo-fold-edge-outside, .mo-fold-panel-left .mo-fold-edge-hinge { right: calc(var(--mo-fold-depth) / -2); }
.mo-fold-spine { position: absolute; top: 50%; left: 50%; width: 4px; height: calc(100% - 2 * var(--mo-fold-shell-radius, 36px)); transform-style: preserve-3d; }
.mo-fold-spine > i { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(90deg, #4b4b4b, #b7b7b7, #686868); backface-visibility: hidden; }
.mo-fold-shadow { position: absolute; left: 50%; height: 20px; border-radius: 50%; background: #000; filter: blur(16px); pointer-events: none; }
.mo-fold-camera-module { position: absolute; top: 32px; left: 28px; display: flex; align-items: center; gap: 18px; padding: 12px; border: 1px solid #777; border-radius: 22px; background: #242424; box-shadow: 0 4px 8px #0004; }
.mo-fold-camera-module i { width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle, #141414 20%, #303030 22%, #060606 45%, #575757 48%, #111 58%); border: 2px solid #919191; }
.mo-fold-camera-module b { width: 10px; height: 10px; border-radius: 50%; background: #aaa; }
.mo-fold-stage[data-axis="horizontal"] .mo-fold-panel { width: 100%; height: 50%; bottom: auto; }
.mo-fold-stage[data-axis="horizontal"] .mo-fold-panel-left { top: 0; --mo-fold-radius: var(--mo-fold-shell-radius, 36px) var(--mo-fold-shell-radius, 36px) var(--mo-fold-inner-corner, 0px) var(--mo-fold-inner-corner, 0px); transform-origin: center bottom calc(var(--mo-fold-depth) / 2); }
.mo-fold-stage[data-axis="horizontal"] .mo-fold-panel-right { top: 50%; --mo-fold-radius: var(--mo-fold-inner-corner, 0px) var(--mo-fold-inner-corner, 0px) var(--mo-fold-shell-radius, 36px) var(--mo-fold-shell-radius, 36px); transform-origin: center top; }
.mo-fold-stage[data-axis="horizontal"] .mo-fold-panel-left .mo-fold-glass { inset: 12px 12px -.75px; border-radius: 24px 24px var(--mo-fold-inner-glass-corner, 0px) var(--mo-fold-inner-glass-corner, 0px); }
.mo-fold-stage[data-axis="horizontal"] .mo-fold-panel-right .mo-fold-glass { inset: -.75px 12px 12px; border-radius: var(--mo-fold-inner-glass-corner, 0px) var(--mo-fold-inner-glass-corner, 0px) 24px 24px; }
.mo-fold-stage[data-axis="horizontal"] .mo-fold-back { transform: rotateX(180deg) translateZ(calc(var(--mo-fold-depth) / 2)); }
.mo-fold-stage[data-axis="horizontal"] .mo-fold-panel-left .mo-fold-front { border-right: 1px solid #999; border-bottom: 0; }
.mo-fold-stage[data-axis="horizontal"] .mo-fold-panel-right .mo-fold-front { border-left: 1px solid #999; border-top: 0; }
.mo-fold-stage[data-axis="horizontal"] .mo-fold-spine { height: calc(100% * 669 / 951 - 2 * var(--mo-fold-shell-radius, 36px)); }
.mo-fold-stage[data-axis="horizontal"] .mo-fold-panel-left .mo-fold-rim { right: 0; bottom: 16px; }
.mo-fold-stage[data-axis="horizontal"] .mo-fold-panel-right .mo-fold-rim { left: 0; top: 16px; }
.mo-fold-stage[data-axis="horizontal"] .mo-fold-edge-top, .mo-fold-stage[data-axis="horizontal"] .mo-fold-edge-bottom { left: 32px; right: 32px; }
/* Duo leaves meet along a straight hinge. Rear faces reverse the front's
   handedness; the cover must match the resting phone when the fold settles. */
.mo-fold-stage[data-device="iphone-duo"] .mo-fold-rim { border-radius: var(--mo-fold-radius); }
.mo-fold-stage[data-device="iphone-duo"] .mo-fold-panel-left .mo-fold-back { border-radius: 0 var(--mo-fold-shell-radius) var(--mo-fold-shell-radius) 0; }
.mo-fold-stage[data-device="iphone-duo"] .mo-fold-panel-right .mo-fold-back { border-radius: var(--mo-fold-shell-radius) 0 0 var(--mo-fold-shell-radius); }
.mo-fold-stage[data-device="iphone-duo"] .mo-fold-cover { border-radius: 0 var(--mo-fold-cover-radius) var(--mo-fold-cover-radius) 0; }
.mo-fold-stage[data-device="iphone-duo"][data-axis="horizontal"] .mo-fold-panel-left .mo-fold-back { border-radius: 0 0 var(--mo-fold-shell-radius) var(--mo-fold-shell-radius); }
.mo-fold-stage[data-device="iphone-duo"][data-axis="horizontal"] .mo-fold-panel-right .mo-fold-back { border-radius: var(--mo-fold-shell-radius) var(--mo-fold-shell-radius) 0 0; }
.mo-fold-stage[data-device="iphone-duo"][data-axis="horizontal"] .mo-fold-cover { border-radius: 0 0 var(--mo-fold-cover-radius) var(--mo-fold-cover-radius); }

.duo-shell{position:relative;--bg:var(--canvas)}
.duo-shell .mo-fold-context{display:contents}
.duo-shell .mo-fold-texture{position:absolute!important;top:0;transform-origin:top left;min-height:0!important;max-height:none!important;overflow:hidden!important}
.duo-hardware.mo-folding{visibility:hidden;transition:none!important}
.duo-shell:has(.mo-fold-presentation){transition:none!important}
.duo-shell .mo-fold-glass,.duo-shell .mo-fold-cover{background:var(--canvas)}
.duo-inspecting .duo-hardware{transform:none}
.duo-inspecting .duo-screen:after{display:none}
.duo-angle input{min-width:140px}
/* Matching inner/cover proportions keep the rear display continuous at closure. */
.duo-stage .duo-screen{height:500px;min-height:0}
.duo-stage .duo-workspace{height:441px;min-height:0;overflow:auto;overscroll-behavior:contain}
.duo-stage.duo-closed .duo-shell{width:min(calc((100% - 16px)/2),370px)}
.duo-stage.duo-rotated .duo-screen{height:700px;min-height:0}
.duo-stage.duo-rotated .duo-workspace{height:641px;min-height:0}
.duo-stage.duo-rotated.duo-closed .duo-shell{width:min(100%,470px)}
.duo-stage.duo-rotated.duo-closed .duo-screen{height:342px}
.duo-stage.duo-rotated.duo-closed .duo-workspace{height:283px}
@media(max-width:1050px){.duo-stage.duo-closed:not(.duo-rotated) .duo-shell{width:min(calc((100% - 16px)/2),240px)}}

/* The 3D renderer owns interpolation. Layout captures and endpoint handoff must be immediate. */
.duo-stage .duo-shell,.duo-stage .duo-hardware{transition:none!important}
/* One logical device coordinate system; fit the entire hardware, not individual controls. */
body:has(.duo-stage) .title-row{margin-bottom:16px;padding-bottom:0}
body:has(.duo-stage) #title{font-size:32px;letter-spacing:-1px;line-height:1.1}
body:has(.duo-stage) #description{margin:8px 0;font-size:12px}
.stage.duo-stage{min-height:0;padding:16px 8px 22px;gap:16px}
.duo-stage .duo-shell{width:740px;max-width:none;flex:none}
.duo-stage.duo-closed .duo-shell{width:370px;max-width:none}
.duo-stage.duo-rotated .duo-shell{width:500px;max-width:none}
.duo-stage.duo-rotated.duo-closed .duo-shell{width:500px;max-width:none}
.duo-stage .duo-hardware{padding:8px;border-radius:34px}
.duo-stage .duo-screen{height:500px;border-radius:27px}
.duo-stage.duo-rotated .duo-screen{height:740px}
.duo-stage.duo-rotated.duo-closed .duo-screen{height:362px}
.duo-stage .duo-workspace{height:441px;overflow:hidden;grid-template-columns:minmax(125px,30%) minmax(0,1fr)}
.duo-stage.duo-rotated .duo-workspace{height:681px;grid-template-columns:1fr}
.duo-stage.duo-closed .duo-workspace{grid-template-columns:1fr}
.duo-stage.duo-rotated.duo-closed .duo-workspace{height:303px}
.duo-stage:not(.duo-closed):not(.duo-rotated) .duo-projects{display:flex}
.duo-stage .duo-projects{overflow:auto}
.duo-stage .duo-page{height:100%;min-height:0;display:flex;flex-direction:column;padding:16px;gap:12px;overflow:hidden}
.duo-stage .duo-context{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:3px}
.duo-stage .duo-context h2{font-size:24px;margin:8px 0}
.duo-stage .duo-context>p{font-size:14px;margin:0 0 12px}
.duo-stage .duo-mount{flex:0 0 auto;min-height:0;max-height:100%;position:relative}
.duo-stage .lane,.duo-stage .lane:has(.popover-demo),.duo-stage .lane:has(.overlay-trigger[aria-controls]){min-height:0!important}
.duo-stage .demo{gap:8px;justify-content:flex-end}
.duo-stage .composer{padding:12px;width:100%;border-radius:18px}
.duo-stage .composer textarea{min-height:60px;height:64px;font-size:16px;padding:8px;resize:none}
.duo-stage .composer .toolbar{margin-top:8px;gap:8px}
.duo-stage .composer .toolbar>button{min-height:44px;font-size:16px}
.duo-stage .composer .toolbar .send{width:44px;height:44px}
.duo-stage .surface button,.duo-stage .spec-button,.duo-stage .tabbar button{font-size:16px;min-height:44px}
.duo-stage .spec-button{height:48px}.duo-stage .tab-indicator{height:44px}
.duo-stage .live-feedback{position:static;margin-top:4px;font-size:12px;line-height:1.4}
.duo-stage .live-feedback:empty{display:none}
.duo-stage .refinement{max-height:370px;overflow:auto;padding:14px}
.duo-stage .refinement-actions{position:sticky;bottom:-14px;background:var(--surface);padding:10px 0;margin-top:8px;z-index:4}
.duo-stage .refinement-options{margin-bottom:12px;gap:6px}.duo-stage .refinement-form>p{margin-bottom:12px}
.duo-stage .duo-page:has(.refinement) .duo-context{display:none}
.duo-stage .duo-page:has(.refinement){justify-content:center}
.duo-stage .popover-demo{translate:none;position:relative}
.duo-stage .pop{top:auto!important;bottom:calc(100% + 10px);max-height:330px;overflow:auto}
.duo-stage .drawer{height:350px;max-height:none;min-height:0;top:auto;bottom:0}
.duo-stage .lane:has(.drawer) .backdrop{top:auto;height:370px;bottom:0}
.duo-stage.duo-rotated.duo-closed .refinement{max-height:275px}
.duo-stage.duo-rotated.duo-closed .drawer{height:270px}
.duo-stage.duo-rotated.duo-closed .pop{max-height:210px}
.duo-stage .surface.refinement{max-height:370px!important;overflow:auto!important}
.duo-stage.duo-rotated.duo-closed .surface.refinement{max-height:265px!important}
.stage.duo-stage.duo-closed:not(.duo-rotated) .duo-shell{width:370px;max-width:none}
/* Device overlays are positioned against the screen, not the tiny component slot. */
.duo-stage .duo-page:has(.overlay-trigger),.duo-stage .duo-mount:has(.overlay-trigger),.duo-stage .lane:has(.overlay-trigger),.duo-stage .popover-demo{position:static!important}
.duo-stage .lane:has(.overlay-trigger) .demo{transform:none!important;translate:none!important;position:static!important}
.duo-stage .surface.duo-overlay{z-index:20;box-sizing:border-box}
.duo-stage .surface.drawer.duo-overlay{top:34px!important;bottom:22px!important;right:12px!important;left:auto!important;height:auto!important;min-height:0!important;max-height:none!important;width:calc(100% - 36px)!important;max-width:340px!important;border-radius:18px;padding:18px;overflow:hidden!important;gap:12px}
.duo-stage .drawer.duo-overlay .overlay-body{min-height:0;overflow:auto;flex:1}
.duo-stage .drawer.duo-overlay .overlay-actions{flex-shrink:0;display:grid;gap:8px}
.duo-stage .pop.duo-overlay{bottom:auto!important;translate:none!important;transform:none!important;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;overflow:hidden!important}
.duo-stage .pop.duo-overlay .overlay-body{max-height:none;min-height:0;overflow:auto;flex:1}
.duo-stage .pop.duo-overlay .overlay-actions{flex-shrink:0;margin-top:0}
.duo-stage .lane .duo-backdrop{position:absolute;inset:33px 0 16px!important;height:auto!important;z-index:19;background:#0005}
.duo-stage .lane:has(.overlay-trigger) .demo{scale:none!important}
/* A drawer is a screen-edge panel, not an inset card. */
.duo-stage .surface.drawer.duo-overlay{inset:0 0 0 auto!important;right:0!important;top:0!important;bottom:0!important;width:54%!important;max-width:390px!important;height:100%!important;border-radius:0!important;border-width:0 0 0 1px!important;padding:40px 20px 28px;box-shadow:-12px 0 32px #0002!important;gap:18px}
.duo-stage.duo-closed .surface.drawer.duo-overlay,.duo-stage.duo-rotated .surface.drawer.duo-overlay{width:90%!important;max-width:430px!important}
.drawer-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
.duo-stage .drawer-panel-header h3{margin:0;font-size:20px;font-weight:600}
.duo-stage .drawer-panel-header button{width:36px;height:36px;min-height:36px;font-size:24px;padding:0;border-radius:50%;flex:none}
.duo-stage .drawer.duo-overlay .overlay-body>p{margin-top:0}
.duo-stage .lane .duo-backdrop{inset:0!important}
.duo-use-screen[hidden]{display:none}
@media(max-width:560px){
 .stage.duo-stage.duo-use-app .duo-shell{width:100%!important;max-width:none!important;zoom:1!important}
 .duo-use-app .duo-hardware{padding:0;border-radius:18px;background:var(--line);box-shadow:none}
 .duo-use-app .duo-screen{height:570px!important;border:1px solid var(--line);border-radius:18px}
 .duo-use-app .duo-workspace{height:510px!important;grid-template-columns:1fr!important}
 .duo-use-app .duo-projects{display:none!important}
 .duo-use-app .duo-fold,.duo-use-app .duo-rotate{display:none}
 .duo-use-app .duo-page{padding:12px}
 .duo-use-app .surface.drawer.duo-overlay{width:94%!important}
 .duo-use-app .duo-caption{font-size:10px}
 .duo-use-app .surface.refinement{max-height:460px!important}
 .duo-stage .drawer-panel-header button{width:44px;min-height:44px;height:44px}
 .control input[type=range],.effect-strength+input[type=range]{min-height:44px}
 .effect-toggle{min-height:44px}
 input,textarea,select{font-size:16px}
}
@media(max-width:560px){.duo-use-app .tabbar button{font-size:14px;white-space:nowrap;min-height:44px}}