:root {
 color-scheme:light; --paper:#f7f7f7; --white:#fff; --ink:#282828; --muted:#777874; --soft:#a3a4a0; --line:#dededb; --faint:#eaeae7; --focus:#414d47; --success:#72836c; --graphite:#252525; --graphite-light:#303030; --graphite-edge:#ffffff20; --graphite-hover:#3d3d3d; --light:#f4f4f2; --light-muted:#b6b7b2; --glass:#ffffffed; --glass-edge:#ffffffef; --shadow:0 3px 6px #00000004,0 14px 40px #00000009; --glass-shadow:inset 0 1px 0 #fff,0 2px 4px #00000004,0 12px 32px #0000000b; --radius:8px; --round:999px; --ui:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --display:Georgia,'Times New Roman',serif; --mono:'SFMono-Regular',Consolas,monospace; --ease:cubic-bezier(.2,.75,.25,1); --fast:160ms; --settle:320ms; --layer-canvas:1; --layer-annotation:4; --layer-control:10; --layer-composer:20; --layer-notice:30;
}
*{box-sizing:border-box} [hidden]{display:none!important} html,body{margin:0;background:var(--paper);color:var(--ink);height:100%;font:13px/1.4 var(--ui)}body{overflow:hidden}button,input,textarea{font:inherit}button{color:inherit;cursor:pointer;border:0;background:transparent}button:disabled{opacity:.3;cursor:default}a,button{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,textarea:focus-visible,[contenteditable]:focus-visible{outline:2px solid var(--focus);outline-offset:4px}button:hover:not(:disabled){transition:background var(--fast)}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex:none}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:absolute;left:15px;top:-50px;z-index:var(--layer-notice);padding:10px;background:var(--white);color:var(--ink)}.skip-link:focus{top:15px}.glass{background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);backdrop-filter:blur(24px)}.graphite{background:linear-gradient(160deg,var(--graphite-light),var(--graphite));color:var(--light);box-shadow:inset 0 1px 0 var(--graphite-edge)}.divider{height:16px;width:1px;background:var(--line);display:block;margin-inline:6px;flex:none}.icon-button{display:grid;place-items:center;min-width:32px;min-height:32px;border-radius:var(--radius);padding:0}.icon-button:hover{background:var(--faint)}.app-header{height:76px;position:fixed;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 30px;z-index:var(--layer-control);pointer-events:none}.app-header>div{pointer-events:auto;display:flex;align-items:center}.identity{gap:10px;background:var(--paper)}.mark{width:31px;height:31px;object-fit:contain}.wordmark{font:28px var(--display);letter-spacing:-1.2px}.canvas-name{font-weight:500;display:flex;align-items:center;gap:9px;min-height:34px;padding:0 4px}.canvas-name svg{width:12px;color:var(--muted)}.canvas-caption{font-size:12px;color:var(--muted);margin-left:10px}.header-actions{gap:3px;background:var(--paper)}#saveState{font-size:11px;color:var(--muted);margin-right:14px}.quiet-button{min-height:32px;display:flex;align-items:center;gap:8px;color:var(--muted);padding:0 8px;font-size:12px}.info-dot{font:10px var(--display);display:grid;place-items:center;width:14px;height:14px;border:1px solid var(--soft);border-radius:50%}.workspace{position:relative;height:100dvh;width:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.drawing-tools{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:var(--layer-control);display:flex;flex-direction:column;gap:3px;width:42px;padding:5px;border-radius:12px;box-shadow:inset 0 1px 0 var(--graphite-edge),0 4px 12px #00000014}.tool{width:32px;min-height:33px;display:grid;place-items:center;border-radius:var(--radius);padding:0;color:var(--light-muted)}.tool svg{width:17px;height:17px}.tool:hover,.tool.active{background:var(--graphite-hover);color:var(--light)}.graphite button:focus-visible{outline-color:var(--light)}.tool-separator{height:1px;background:var(--graphite-edge);margin:7px 7px}.ink-swatch{display:block;width:15px;height:15px;background:#9dac98;box-shadow:0 0 0 1px var(--graphite-edge);border:2px solid var(--graphite);border-radius:4px}.focus-path{position:fixed;top:79px;left:90px;display:flex;align-items:center;gap:14px;z-index:var(--layer-control);font-size:12px;color:var(--muted)}.focus-path button{display:flex;align-items:center;gap:5px;min-height:28px;padding:0}.focus-path svg{width:14px}.focus-path button:hover{color:var(--ink)}.focus-path>span{color:var(--soft);font-size:11px;padding-left:12px;border-left:1px solid var(--line)}kbd{font:10px var(--ui);color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:2px 4px}.focus-path kbd{border:0;color:var(--soft)}.scene{position:relative;z-index:var(--layer-canvas);width:calc(100% - 180px);max-width:1120px;margin:0 auto;padding:166px 0 190px;display:grid;grid-template-columns:140px minmax(220px,280px) minmax(300px,520px);column-gap:56px;align-items:start;transform-origin:center 45%;}.object{position:relative;min-width:0}.object-title{display:flex;align-items:center;justify-content:space-between;gap:8px;height:28px;margin-bottom:11px;color:var(--muted);font-size:12px}.object-title>span:first-child{display:flex;align-items:center;gap:7px}.object-title svg{width:14px;height:14px;color:var(--soft)}.metadata{font:10px var(--mono);color:var(--soft);white-space:nowrap}.film-card{max-width:100%;width:100%}.film-body{position:relative;aspect-ratio:3/4;width:100%;overflow:hidden;background:#223835;box-shadow:var(--shadow)}.film-body>video,.film-body>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}.film-body>canvas{pointer-events:none}.film-body::after,.page-body::after{content:'';position:absolute;inset:0;border:1px solid #00000009;pointer-events:none}.object-open{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding:22px;background:linear-gradient(transparent 70%,#00000013)}.object-open>span{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink);padding:9px 13px;background:var(--glass);backdrop-filter:blur(12px);border-radius:var(--round);box-shadow:var(--shadow);opacity:0;transform:translateY(5px);transition:opacity var(--fast),transform var(--fast)}.object-open:hover>span,.object-open:focus-visible>span{opacity:1;transform:none}.object-caption{font:italic 14px/1.4 var(--display);color:var(--muted);margin:15px 0 0}.page-card{padding-top:36px}.page-body{position:relative;box-shadow:var(--shadow);background:var(--white)}.browser-bar{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 11px;font:9px var(--mono);color:var(--soft);background:var(--white);border-bottom:1px solid var(--faint)}.browser-bar svg{width:12px;height:12px}.window-dots{display:flex;gap:3px}.window-dots i{width:3px;height:3px;border-radius:50%;background:var(--line)}.page-viewport{width:100%;height:395px;overflow:hidden;background:#f0efe8;position:relative}iframe{border:0;display:block;transform-origin:0 0;background:#f0efe8}#mainPage{width:720px;height:650px}.references{padding-top:56px}.section-label{font-size:11px;color:var(--soft);margin:0 0 22px}.reference{margin:0 0 28px}.reference img{width:100%;aspect-ratio:1.1;object-fit:cover;display:block;box-shadow:var(--shadow)}.reference figcaption{font-size:10px;color:var(--muted);display:flex;justify-content:space-between;margin:9px 0 0}.reference figcaption span{font:9px var(--mono);color:var(--soft)}.shell{transform:rotate(-3deg)}.glaze{width:87%;margin-left:14%;transform:rotate(3deg)}.palette{display:flex;gap:8px;padding:0 12px}.palette i{width:15px;height:15px;background:var(--swatch);border-radius:50%}.hand-note{font:italic 16px/1.6 var(--display);color:var(--muted);margin:25px 0 0 10px}.object-actions{position:absolute;bottom:calc(100% + 13px);left:50%;transform:translateX(-50%);display:none;align-items:center;padding:4px;gap:2px;border-radius:var(--round);white-space:nowrap;height:42px;z-index:3}.object-actions button{min-height:32px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;border-radius:var(--round);font-size:12px}.object-actions .icon-button{padding:0;width:32px}.object-actions svg{width:15px;height:15px}.object-actions button:hover,.object-actions button.active{background:var(--faint)}.object-actions .divider{margin-inline:3px}.temporal,.responsive-controls,.mobile-proof,.playback-line,.play-overlay,.region{display:none}.film-body .region{display:block}.view-label{position:absolute;top:12px;left:12px;background:var(--graphite);color:var(--light);padding:5px 9px;border-radius:4px;font-size:11px;z-index:3;pointer-events:none}.play-overlay{position:absolute;left:13px;bottom:27px;z-index:3;border-radius:var(--round);background:#1d2928a8;color:var(--white);width:32px;height:32px;place-items:center;backdrop-filter:blur(10px)}.play-overlay svg{width:18px;height:18px}.playback-line{position:absolute;inset:auto 0 0;justify-content:space-between;align-items:center;background:linear-gradient(transparent,#122222b5);color:#ffffffbe;padding:27px 15px 10px;font:9px var(--mono);pointer-events:none}.playback-line span:nth-child(2){margin-left:auto;margin-right:14px;color:var(--white)}
body[data-focus=film] .scene{max-width:1140px;grid-template-columns:140px minmax(330px,560px) minmax(190px,270px);column-gap:48px;padding-top:148px}body[data-focus=film] .film-card{justify-self:center;width:min(100%,540px)}body[data-focus=film] .film-body{width:auto;height:clamp(260px,calc(100dvh - 403px),440px);aspect-ratio:3/4;margin:0 auto;overflow:visible}body[data-focus=film] .film-body video{background:#223835}body[data-focus=film] .film-body::after{inset:-5px;border:1px solid var(--soft)}body[data-focus=film] .film-card>.object-title{max-width:calc(clamp(260px,calc(100dvh - 403px),440px)*.75);margin-inline:auto}body[data-focus=film] #openFilm{display:none}body[data-focus=film] #filmActions{display:flex}body[data-focus=film] .temporal{display:block;margin-top:21px}body[data-focus=film] .playback-line{display:flex}body[data-focus=film] .play-overlay{display:grid}body[data-focus=film] .film-card>.object-caption{display:none}body[data-focus=film] .page-card{padding-top:69px}body[data-focus=film] .references{padding-top:75px}body[data-focus=film] .film-body.pointing{cursor:crosshair;touch-action:none}.dimension-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:11px}.dimension-label button{min-height:24px;font-size:10px;text-decoration:underline;text-underline-offset:3px;color:var(--muted);padding:0}.filmstrip{height:49px;position:relative;touch-action:pan-y;cursor:ew-resize;--start:23.8%;--end:71.4%}.frames{height:100%;display:flex;overflow:hidden;border-radius:4px;background:#49625d}.frame{width:10%;height:100%;background:url('assets/frames/strip.jpg') no-repeat;background-size:1000% 100%;pointer-events:none}.range-shade{position:absolute;top:0;bottom:0;background:#f7f7f7ad;pointer-events:none}.range-left{left:0;width:var(--start)}.range-right{left:var(--end);right:0}.time-range{position:absolute;top:-2px;bottom:-2px;left:var(--start);width:calc(var(--end) - var(--start));border:2px solid var(--focus);border-radius:3px;pointer-events:none}.range-handle{position:absolute;top:-2px;bottom:-2px;width:11px;background:var(--focus);cursor:ew-resize;pointer-events:auto;padding:0;touch-action:pan-y}.range-handle::before{content:'';position:absolute;inset:-4px -8px}.range-handle span{height:16px;width:2px;background:var(--white);position:absolute;left:4px;top:50%;transform:translateY(-50%);border-radius:1px}.range-handle.start{left:-6px;border-radius:3px 0 0 3px}.range-handle.end{right:-6px;border-radius:0 3px 3px 0}.playhead{position:absolute;top:-5px;bottom:-7px;width:1px;background:var(--white);box-shadow:1px 0 0 #000000b0;pointer-events:none;left:44%}.playhead::before{content:'';position:absolute;top:0;left:-3px;width:7px;height:5px;background:var(--focus);clip-path:polygon(0 0,100% 0,50% 100%)}.time-ruler{display:flex;justify-content:space-between;font:9px var(--mono);color:var(--soft);margin:8px 0 9px}.range-footer{display:flex;justify-content:space-between;align-items:center;gap:9px;color:var(--muted);font-size:10px}.range-footer b{font-weight:400;color:var(--soft);margin-left:9px}.range-footer button{display:flex;align-items:center;gap:5px;min-height:26px;padding:0;font-size:10px}.range-footer svg{width:13px;height:13px}.range-footer button[aria-pressed=true]{color:var(--ink)}.region{position:absolute;border:1px solid var(--white);background:#ffffff08;pointer-events:none;box-shadow:0 0 0 1px #1a2a2826}.region>span{position:absolute;top:-24px;left:-1px;white-space:nowrap;color:var(--ink);background:var(--white);font-size:10px;line-height:18px;padding:1px 6px;border-radius:3px}.region>button{position:absolute;right:-10px;top:-11px;pointer-events:auto;display:grid;place-items:center;width:23px;height:23px;background:var(--white);border-radius:50%;box-shadow:var(--shadow)}.region>button svg{width:12px;height:12px}.region i{position:absolute;width:4px;height:4px;background:var(--white)}.region i:nth-last-child(4){left:-2px;top:-2px}.region i:nth-last-child(3){right:-2px;top:-2px}.region i:nth-last-child(2){left:-2px;bottom:-2px}.region i:last-child{right:-2px;bottom:-2px}
body[data-focus=page] .scene{max-width:1160px;grid-template-columns:130px minmax(410px,740px) 180px;gap:38px;padding-top:148px}body[data-focus=page] .film-card{display:none}body[data-focus=page] .page-card{grid-column:2;grid-row:1;padding-top:0}body[data-focus=page] .references{grid-column:1;grid-row:1;padding-top:62px}body[data-focus=page] .mobile-proof{grid-column:3;grid-row:1;display:block;padding-top:62px}body[data-focus=page] #pageActions{display:flex}body[data-focus=page] #openPage{display:none}body[data-focus=page] .page-body::after{inset:-5px;border:1px solid var(--soft)}body[data-focus=page] .page-card>.object-caption{display:none}body[data-focus=page] .responsive-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}body[data-focus=page] .page-card{max-width:740px;width:100%;justify-self:center}body[data-focus=page].mobile-main .page-card{max-width:390px}.width-buttons{display:flex;gap:3px;align-items:center;flex:none}.width-buttons button{min-height:30px;padding:0 9px;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);border-radius:6px}.width-buttons .active{color:var(--ink);background:var(--white);box-shadow:0 1px 3px #0000000a}.width-buttons svg{width:14px;height:14px}#pageHint{font-size:10px;color:var(--muted)}.phone-body{background:var(--white);border:1px solid var(--line);padding:8px 7px 7px;border-radius:20px;box-shadow:var(--shadow);overflow:hidden}.phone-speaker{height:3px;width:24px;background:var(--line);border-radius:3px;margin:0 auto 8px}#mobileViewport{overflow:hidden;border-radius:9px}#mobilePage{width:390px;height:820px}.linked-caption{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:9px;margin-top:14px}.linked-caption>span{width:4px;height:4px;border-radius:50%;background:var(--success)}.mobile-main .mobile-proof{opacity:.45}.mobile-main #pageHint{display:none}.composer-wrap{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 144px));z-index:var(--layer-composer);pointer-events:none}.composer-wrap>*{pointer-events:auto}.composer{position:relative;border-radius:18px 18px 0 0;padding:13px 18px 11px}.composer::before,.composer::after{content:'';position:absolute;bottom:0;width:10px;height:10px;pointer-events:none}.composer::before{left:-10px;background:radial-gradient(circle at 0 0,transparent 10px,var(--graphite) 10.5px)}.composer::after{right:-10px;background:radial-gradient(circle at 100% 0,transparent 10px,var(--graphite) 10.5px)}.context-line{display:flex;align-items:center;gap:8px;min-height:22px;color:var(--light-muted);font-size:11px}.context-thumb{height:19px;width:19px;background:var(--graphite-hover);border-radius:3px;overflow:hidden;display:grid;place-items:center;flex:none;background-size:cover;background-position:center}.context-thumb svg{width:12px;height:12px}.context-line>button{width:24px;height:24px;min-width:24px;display:grid;place-items:center;margin-left:auto;color:var(--light-muted);border-radius:4px}.context-line>button:hover{background:var(--graphite-hover)}.context-line>button svg{width:12px;height:12px}.composer textarea{display:block;resize:none;width:100%;color:var(--light);font-size:15px;line-height:1.5;min-height:42px;max-height:90px;margin:8px 0 0;padding:2px 0 9px;background:transparent;border:0}.composer textarea:focus-visible{outline:none}.composer:focus-within{box-shadow:inset 0 1px 0 #ffffff40}.composer textarea::placeholder{color:#aaaaa4}.composer-footer{display:flex;align-items:center;gap:10px}.composer-help{display:flex;align-items:center;gap:7px;padding:0;min-height:28px;color:var(--light-muted);font-size:10px}.composer-help svg{width:13px;height:13px}.composer-help:hover{color:var(--white)}#editCount{font-size:10px;color:var(--light-muted);margin-left:auto}#sendButton{display:grid;place-items:center;width:31px;min-height:31px;border-radius:8px;background:var(--light);color:var(--ink);margin-left:2px}#sendButton svg{width:17px;height:17px}.suggestions{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:13px;min-height:24px;white-space:nowrap}.suggestions>button{padding:4px 9px;font-size:11px;color:var(--muted);min-height:28px;border-radius:var(--round);background:var(--paper);border:1px solid var(--line)}.suggestions>button:hover{color:var(--ink);background:var(--white);border-color:var(--soft)}.suggestions .intro{font-size:12px;color:var(--muted)}.receipt{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:12px;padding:10px 12px;margin-bottom:12px;animation:appear var(--settle) var(--ease)}.receipt-main{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px;line-height:1.5}.receipt-main>svg{width:15px;height:15px;color:var(--success)}.receipt-actions{display:flex;align-items:center;gap:3px;flex:none}.receipt-actions button{min-height:28px;min-width:28px;border-radius:6px;padding:0 8px;color:var(--muted);font-size:11px}.receipt-actions button:hover{background:var(--faint)}.receipt-actions button[aria-pressed=true]{background:var(--graphite);color:var(--light)}.receipt-actions svg{width:14px;height:14px}.has-receipt .suggestions{display:none}.fit-button{position:fixed;bottom:23px;left:25px;z-index:var(--layer-control);color:var(--muted);display:flex;align-items:center;gap:8px;font-size:11px;min-height:30px;padding:0}.fit-button svg{width:14px;height:14px}.canvas-help{position:fixed;bottom:29px;right:28px;color:var(--soft);font-size:10px}.drawing-layer{position:absolute;inset:0;width:100%;height:100%;z-index:var(--layer-annotation);pointer-events:none;overflow:visible}.drawing-layer.active{pointer-events:auto;touch-action:none}.drawing-layer path,.drawing-layer rect{fill:none;stroke:#647b65;stroke-width:2;vector-effect:non-scaling-stroke}.canvas-note{position:absolute;z-index:var(--layer-annotation);font:italic 18px/1.4 var(--display);color:#647b65;min-width:80px;max-width:250px}.imported-image{position:absolute;width:160px;box-shadow:var(--shadow);z-index:var(--layer-annotation)}.notice{position:fixed;bottom:187px;left:50%;transform:translateX(-50%);z-index:var(--layer-notice);border-radius:9px;max-width:min(90vw,520px);padding:12px 17px;font-size:12px;line-height:1.5;text-align:center}.notice.error{border-color:#ac635d;color:#8e3830}dialog{border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);padding:38px;width:min(480px,calc(100% - 36px));box-shadow:0 30px 120px #00000026}dialog::backdrop{background:#262c2938;backdrop-filter:blur(6px)}.dialog-close{position:absolute;right:15px;top:15px}.eyebrow{font-size:9px;letter-spacing:1.3px;color:var(--muted)}dialog h1{font:36px/1.1 var(--display);letter-spacing:-1px;margin:20px 0}dialog p{font-size:13px;line-height:1.7;color:var(--muted)}.help-rows{display:grid;gap:13px;margin:28px 0}.help-rows>div{display:grid;grid-template-columns:70px 1fr;gap:12px;font-size:12px;align-items:center}.help-rows kbd{justify-self:start}.prototype-note{font-size:11px!important;border-top:1px solid var(--line);padding-top:20px}.reset-button{font-size:11px;text-decoration:underline;text-underline-offset:3px;color:var(--muted);padding:8px 0}.is-comparing .receipt-main>svg{color:var(--soft)}@keyframes appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(min-width:1450px){.scene{max-width:1200px;grid-template-columns:155px 300px minmax(400px,560px);column-gap:70px;padding-top:180px}}
@media(max-width:1150px){.scene{width:calc(100% - 150px);margin-left:95px;grid-template-columns:minmax(220px,280px) minmax(310px,1fr);gap:45px;max-width:850px}.references{display:none}body[data-focus=film] .scene{grid-template-columns:minmax(300px,1fr) 240px;gap:42px;max-width:900px}body[data-focus=page] .scene{grid-template-columns:minmax(380px,1fr) 155px;gap:30px}body[data-focus=page] .page-card{grid-column:1}body[data-focus=page] .mobile-proof{grid-column:2}.canvas-help{display:none}.canvas-caption{display:none}#saveState{display:none}.film-card .object-title{font-size:11px}.scene{padding-top:158px}body[data-focus=film] .page-card{padding-top:55px}#pageHint{font-size:9px}}
@media(max-width:850px){body[data-focus=film] .scene{grid-template-columns:minmax(280px,1fr) 185px;gap:32px}.scene{gap:32px;width:calc(100% - 130px);margin-left:85px;grid-template-columns:minmax(200px,240px) minmax(280px,1fr)}body[data-focus=page] .scene{grid-template-columns:minmax(340px,1fr) 140px;gap:25px}.composer-wrap{width:min(530px,calc(100% - 110px))}.app-header{padding-inline:22px}.page-card{padding-top:26px}.range-footer b{display:none}#pageHint{display:none}.focus-path{left:85px}.object-caption{font-size:12px}.dimension-label{font-size:10px}.dimension-label button{font-size:9px}.scene{padding-top:155px}}
@media(max-width:650px){.app-header{height:67px;padding:0 16px}.wordmark{font-size:26px}.mark{width:27px;height:27px}.identity{gap:7px}.identity .divider{margin-inline:3px}.header-actions>.divider,.header-actions>.quiet-button{display:none}.canvas-name{font-size:12px}.drawing-tools{left:8px;top:45%;width:38px;padding:3px}.tool{width:32px;min-height:33px}.scene{width:calc(100% - 82px);margin-left:62px;padding:115px 0 210px;grid-template-columns:1fr;gap:30px}.film-card{width:220px;max-width:100%;justify-self:center}.page-card{padding-top:0}.page-viewport{height:350px}.object-caption{margin-top:10px}.object-open>span{opacity:1;transform:none;font-size:10px;padding:7px 10px}.focus-path{left:62px;top:69px}.focus-path>span,.focus-path kbd{display:none}.focus-path button{font-size:11px}body[data-focus=film] .scene{width:calc(100% - 86px);margin-left:64px;display:block;padding-top:156px;padding-bottom:200px}body[data-focus=film] .page-card{display:none}body[data-focus=film] .film-card{width:100%;max-width:390px;margin-inline:auto}body[data-focus=film] .film-body{height:auto;width:min(100%,calc((100dvh - 435px)*.75));min-width:180px}body[data-focus=film] .film-card>.object-title{max-width:none;width:min(100%,calc((100dvh - 435px)*.75));min-width:180px;font-size:11px}body[data-focus=film] .temporal{margin-top:20px}.object-actions{bottom:calc(100% + 8px);height:38px}.object-actions button{font-size:11px;min-height:30px;padding-inline:10px}.object-actions .icon-button{width:29px}.object-title{font-size:11px}.object-title .metadata{font-size:9px}.dimension-label{font-size:10px;gap:12px}.filmstrip{height:40px}.range-footer{font-size:10px}.range-footer button{font-size:9px}.composer-wrap{width:calc(100% - 28px)}.composer{padding:12px 15px 10px}.composer textarea{font-size:14px;min-height:40px}.suggestions{gap:6px;margin-bottom:11px;min-height:28px}.suggestions>button{font-size:10px;padding:4px 8px;min-height:28px}.suggestions .intro{font-size:11px}.fit-button{display:none}.receipt{padding:10px;gap:7px}.receipt-main{font-size:11px;gap:6px}.receipt-actions button{font-size:10px}.notice{bottom:190px}body[data-focus=page] .scene{width:calc(100% - 86px);margin-left:64px;display:block;padding-top:156px}body[data-focus=page] .mobile-proof{display:none}body[data-focus=page] .page-card{max-width:100%}body[data-focus=page] .responsive-controls{margin-top:14px}.width-buttons button{font-size:10px}.page-body .browser-bar{height:25px}.playback-line{font-size:8px}.region>span{font-size:9px}.region>button{width:25px;height:25px}.context-line{font-size:10px}.context-thumb{width:18px;height:18px}.composer-help{font-size:9px}#editCount{font-size:9px}.header-actions .icon-button{min-width:28px}.header-actions svg{width:15px;height:15px}.hand-note{font-size:14px}}
@media(max-height:720px) and (min-width:651px){.scene{padding-top:135px}body[data-focus=film] .scene,body[data-focus=page] .scene{padding-top:135px}body[data-focus=film] .film-body{height:calc(100dvh - 391px);min-height:200px}body[data-focus=film] .film-card>.object-title{max-width:calc((100dvh - 391px)*.75)}.temporal{margin-top:16px!important}.filmstrip{height:39px}.composer textarea{min-height:35px;margin-top:4px}.composer{padding-block:10px}.receipt{padding-block:7px}.suggestions{margin-bottom:9px}.object-actions{height:37px;bottom:calc(100% + 7px)}.focus-path{top:70px}.scene>.page-card{padding-top:15px}body[data-focus=page] .page-card{padding-top:0}}
@media(pointer:coarse){.tool{min-height:38px}.range-handle::before{inset:-8px -14px}.object-open>span{opacity:1;transform:none}.width-buttons button{min-height:36px}.object-actions button{min-height:34px}.icon-button{min-height:36px;min-width:36px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(prefers-reduced-transparency:reduce){.glass,.object-open>span{background:var(--white);backdrop-filter:none}.graphite{background:var(--graphite)}}
@media(forced-colors:active){button,.glass,.graphite{border:1px solid ButtonText}.range-handle,.playhead{background:Highlight}.time-range,.region{border-color:Highlight}button:focus-visible{outline:2px solid Highlight}.composer textarea{outline:1px solid CanvasText}}
/* Time opens along the edge of the native portrait, keeping the work at full proportion. */
body{--film-h:clamp(280px,calc(100dvh - 430px),480px)}
body[data-focus=film] .film-body{height:var(--film-h);width:calc(var(--film-h)*.75);min-height:0;margin-left:calc((100% - var(--film-h)*.75 - 74px)/2);margin-right:0}
body[data-focus=film] .film-card>.object-title{width:calc(var(--film-h)*.75);max-width:none;margin-left:calc((100% - var(--film-h)*.75 - 74px)/2);margin-right:0}
body[data-focus=film] #filmActions{left:calc(50% - 37px)}
body[data-focus=film] .temporal{position:absolute;top:39px;left:calc(50% + var(--film-h)*.375 - 15px);width:54px;margin:0!important}
body[data-focus=film] .filmstrip{height:var(--film-h);width:54px;touch-action:pan-x;cursor:ns-resize}
body[data-focus=film] .frames{flex-direction:column}.frame{width:100%;height:10%;background-size:1000% auto}
body[data-focus=film] .range-left{left:0;right:0;top:0;height:var(--start);width:auto;bottom:auto}
body[data-focus=film] .range-right{left:0;right:0;top:var(--end);bottom:0}
body[data-focus=film] .time-range{left:-2px;right:-2px;top:var(--start);height:calc(var(--end) - var(--start));width:auto;bottom:auto}
body[data-focus=film] .range-handle{width:auto;height:10px;left:-2px;right:-2px;cursor:ns-resize;touch-action:pan-x}
body[data-focus=film] .range-handle.start{top:-5px;bottom:auto;border-radius:3px 3px 0 0}
body[data-focus=film] .range-handle.end{bottom:-5px;top:auto;border-radius:0 0 3px 3px}
body[data-focus=film] .range-handle span{width:16px;height:2px;left:50%;top:4px;transform:translateX(-50%)}
body[data-focus=film] .range-handle::before{inset:-8px -5px}
body[data-focus=film] .playhead{left:-5px!important;right:-5px;width:auto;height:1px;bottom:auto;top:44%;box-shadow:0 1px 0 #00000090}
body[data-focus=film] .playhead::before{top:-3px;left:0;width:5px;height:7px;clip-path:polygon(0 0,100% 50%,0 100%)}
body[data-focus=film] .time-ruler{display:none}
body[data-focus=film] .dimension-label{position:absolute;top:-30px;left:0;right:0;margin:0;justify-content:center;font-size:9px}
body[data-focus=film] .dimension-label>span{display:none}body[data-focus=film] .dimension-label>button{font-size:9px;text-decoration:none}
body[data-focus=film] .range-footer{position:absolute;top:calc(var(--film-h) + 15px);left:calc(-1*(var(--film-h)*.75 + 22px));width:calc(var(--film-h)*.75 + 76px)}
body[data-focus=film] .range-footer b{display:none}
body[data-focus=film] .film-card>.object-caption{display:block;visibility:hidden;height:37px}
@media(max-width:650px){body{--film-h:min(calc(100dvh - 440px),calc((100vw - 167px)/.75))}body[data-focus=film] .film-body{min-width:0;margin-left:0;width:calc(var(--film-h)*.75);height:var(--film-h)}body[data-focus=film] .film-card>.object-title{min-width:0;margin-left:0;width:calc(var(--film-h)*.75)}body[data-focus=film] .temporal{left:calc(var(--film-h)*.75 + 20px);width:44px}body[data-focus=film] .filmstrip{width:44px}body[data-focus=film] #filmActions{left:calc(var(--film-h)*.375)}body[data-focus=film] .range-footer{width:calc(var(--film-h)*.75 + 64px);left:calc(-1*(var(--film-h)*.75 + 20px))}.dimension-label>button{white-space:nowrap}.play-overlay{bottom:25px}}
.focus-path>span,.focus-path>kbd{display:none}
@media(min-width:651px) and (max-width:1150px){body[data-focus=film] .film-card{grid-column:1;grid-row:1}body[data-focus=film] .page-card{grid-column:2;grid-row:1}body[data-focus=film] .references{display:grid;grid-template-columns:1fr 1fr;gap:17px;grid-column:2;grid-row:1;padding-top:320px}body[data-focus=film] .references .section-label,body[data-focus=film] .references .hand-note{display:none}body[data-focus=film] .references .reference{width:100%;margin:0}body[data-focus=film] .references .palette{grid-column:1/-1;justify-content:center;padding:0}body[data-focus=film] .reference figcaption{font-size:9px}body[data-focus=film] .reference figcaption span{display:none}}
.composer textarea:focus-visible{outline:1px solid var(--light-muted);outline-offset:4px;border-radius:2px}