:root{--paper:#f6f3ec;--ink:#283830;--muted:#7a7e76;--line:#deded5;--lilac:#bbacf2;--green:#345745}*{box-sizing:border-box}body{margin:0;background:var(--paper);font:14px/1.5 'Segoe UI',Arial,sans-serif;color:var(--ink)}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:wait;opacity:.65}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #896fd0;outline-offset:3px}button{border:0}button:hover{filter:brightness(.97)}.topbar{max-width:1512px;margin:auto;height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 42px;border-bottom:1px solid var(--line)}.back{text-decoration:none;font-size:13px;display:flex;align-items:center;gap:10px}.wordmark{font-size:23px;font-weight:750;text-decoration:none;letter-spacing:-1px}.wordmark>span{font-weight:350}.wordmark i{font-style:normal;letter-spacing:.08em;font-size:8px;padding:4px 6px;background:#e5dfef;border-radius:4px;margin-left:10px;vertical-align:middle}.local{font-size:11px;color:#74786e;display:flex;align-items:center;gap:7px}.local>span,.live-dot{width:5px;height:5px;display:inline-block;border-radius:50%;background:#728b6c}main{max-width:1512px;margin:auto;padding:34px 42px 0}.title-row{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:28px}.eyebrow{font-size:9px;letter-spacing:.15em;color:#898378;margin:0 0 5px}h1{font-size:30px;font-weight:550;letter-spacing:-1.2px;line-height:1.3;margin:0}h1>span{color:#927abc}.description{font-size:12px;color:#7a7e76;margin:8px 0 0}.export{display:flex;gap:25px;align-items:center;padding:13px 19px;background:var(--ink);color:#fffdf7;border-radius:7px;white-space:nowrap;font-size:12px;font-weight:550}.export>span{font-size:19px}.editor{display:grid;grid-template-columns:235px minmax(300px,1fr) 268px;border:1px solid #dbddd4;border-radius:12px;overflow:hidden;background:#fbfaf6;box-shadow:0 10px 36px #3e443007}.panel{padding:23px 19px}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.panel-heading h2,.timeline h2{font-size:12px;font-weight:650;margin:0}.panel-heading>span{font-size:10px;color:#9a9e95}.scene{position:relative;background:transparent;border:1px solid transparent;border-radius:8px;display:flex;width:100%;padding:10px 7px;gap:10px;align-items:center;text-align:left;margin-bottom:8px}.scene.active{background:#f0edef;border-color:#dcd4eb}.scene-preview{width:39px;height:55px;flex-shrink:0;position:relative;border-radius:3px;overflow:hidden;display:grid;place-items:center}.scene-preview.first{background:#e9e4d9}.first b{font:28px Georgia;z-index:1;color:#345745;transform:translate(-3px,-4px)}.first i{position:absolute;width:48px;height:48px;border:11px solid #bbacf2;border-radius:50%;bottom:-24px;right:-15px}.second{background:#bbacf2}.second i{width:58px;height:58px;border:14px solid #385947;border-radius:50%;position:absolute;left:10px;top:-8px}.third{background:#345745;color:#ece7da;font-size:31px}.scene-info strong{font-size:10px;font-weight:650;display:block;white-space:nowrap}.scene-info small{font-size:9px;color:#8b8e85;display:block;margin-top:4px}.scene-index{position:absolute;right:5px;top:5px;color:#9d9b98;font-size:8px}.palette-note{margin-top:44px;padding:18px 4px 0;border-top:1px solid var(--line)}.note-shape{font-size:32px;line-height:1;color:#9f8abb}.palette-note h3{font:italic 22px/1.1 Georgia,serif;letter-spacing:-.3px;margin:11px 0 12px}.palette-note p{font-size:10px;color:#96968b;max-width:150px}.prototype-note{font-size:9px;color:#929389;margin-top:22px;line-height:1.6}.workspace{display:flex;flex-direction:column;min-height:618px;background:#e8e7ee;border-inline:1px solid #dedde2;padding:19px 25px 0;overflow:hidden}.workspace-top{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.08em;color:#83838c}.workspace-top>span:first-child{display:flex;align-items:center;gap:6px}.canvas-wrap{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;padding:15px 0 17px}.canvas-wrap canvas{height:480px;width:270px;max-width:100%;object-fit:contain;box-shadow:0 12px 24px #3d354d25;border-radius:3px;background:#ede6d8;display:block}.canvas-wrap canvas.square{height:380px;width:380px}.transport{height:56px;display:flex;justify-content:center;align-items:center;gap:14px;border-top:1px solid #d7d6df;width:100%;position:relative}.icon-btn{background:transparent;font-size:23px;line-height:1}.play-btn{width:32px;height:32px;border-radius:50%;background:#fffdf7;font-size:11px;box-shadow:0 2px 7px #3030400a}.time{font-size:10px;font-variant-numeric:tabular-nums}.time b{font-weight:500;color:#53525d}.time>span{color:#9a98a3;margin-left:3px}.quality{font-size:8px;position:absolute;right:0;color:#97929e}.settings{padding:23px 21px}.settings .panel-heading{margin-bottom:19px}.settings label:not(.caption-toggle):not(.duration-label){display:block;font-size:9px;color:#808479;margin:12px 0 6px}.settings input[type=text],.settings input:not([type]),.settings textarea{width:100%;border:1px solid #dedfd7;border-radius:5px;background:#fffefa;color:#3e4b40;padding:9px 10px;font-size:11px;resize:vertical;line-height:1.5;min-height:36px;display:block}.settings textarea{height:51px;resize:none}.settings .edit-icon{font-size:18px;color:#8f9b89}.setting-row{display:flex;align-items:center;justify-content:space-between;margin-top:19px;font-size:10px}.swatches{display:flex;gap:7px}.swatch{width:17px;height:17px;background:var(--swatch);border-radius:50%;padding:0;position:relative}.swatch.selected:after{content:'';position:absolute;inset:-3px;border:1px solid #75716d;border-radius:50%}.format-row{padding-bottom:15px;border-bottom:1px solid var(--line)}.segmented{display:flex;padding:3px;border:1px solid #deded6;border-radius:5px;background:#eeeee7}.segmented button{font-size:10px;min-width:40px;padding:3px 8px;background:transparent;border-radius:3px;color:#8d9086}.segmented button.selected{background:#fffdf7;color:#3c503e;box-shadow:0 1px 3px #25322012}.duration-label{font-size:10px;display:flex;justify-content:space-between;margin:16px 0 8px}.duration-label output{font-size:10px;color:#888b80}input[type=range]{accent-color:#56745c;cursor:pointer}#duration{width:100%;height:3px;display:block;margin:10px 0 20px}.caption-toggle{display:flex;align-items:center;gap:8px;font-size:10px;cursor:pointer}.caption-toggle input{position:absolute;opacity:0}.switch{width:25px;height:14px;border-radius:10px;background:#bec3b7;position:relative;transition:.2s}.switch:after{content:'';position:absolute;width:10px;height:10px;top:2px;left:2px;background:#fffdfa;border-radius:50%;transition:.2s}.caption-toggle input:checked+.switch{background:#54755a}.caption-toggle input:checked+.switch:after{transform:translateX(11px)}.caption-toggle input:focus-visible+.switch{outline:3px solid #896fd0;outline-offset:3px}.timeline{grid-column:1/-1;border-top:1px solid var(--line);padding:18px 24px 14px;background:#fbfaf6;position:relative}.timeline-title{display:flex;align-items:center;gap:17px;margin-bottom:16px}.timeline-title>span{font-size:9px;color:#959789}.timeline-title .timeline-length{margin-left:auto}.timeline-ruler{display:flex;justify-content:space-between;color:#a3a59b;font-size:8px;font-variant-numeric:tabular-nums;margin-bottom:5px}.clips{position:relative;display:flex;gap:3px;height:46px;border-radius:5px;overflow:visible}.clip{width:33.333%;padding:13px 13px;font-size:10px;white-space:nowrap;overflow:hidden}.clip span{display:inline-block;font-size:8px;margin-right:10px;opacity:.6}.clip-one{background:#e4dcf2;border-radius:5px 0 0 5px;color:#6c5b8a}.clip-two{background:#d5dfcc;color:#5c7157}.clip-three{background:#d7ddd7;color:#4f6558;border-radius:0 5px 5px 0}#playhead{position:absolute;top:-6px;bottom:-5px;left:0;border-left:1px solid #4b435a;pointer-events:none}#playhead:before{content:'';position:absolute;width:7px;height:7px;background:#4b435a;left:-4px;top:-3px;clip-path:polygon(0 0,100% 0,100% 65%,50% 100%,0 65%)}#scrub{position:absolute;top:73px;left:24px;width:calc(100% - 48px);height:50px;opacity:0;margin:0;cursor:ew-resize}#scrub:focus-visible{opacity:.3}.export-status{font-size:9px;color:#919489;margin-top:12px;min-height:14px;display:flex;align-items:center;gap:6px}.export-status>span{color:#857398}#download{display:inline-flex;margin-top:9px;text-decoration:none;border:1px solid #a8b49f;background:#edf2e5;padding:7px 13px;border-radius:5px;font-size:11px}[hidden]{display:none!important}footer{display:flex;justify-content:space-between;padding:17px 0 24px;font-size:9px;color:#9b9e93}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(min-width:1600px){.workspace{min-height:686px}.canvas-wrap canvas{height:540px;width:303.75px}.canvas-wrap canvas.square{height:450px;width:450px}}@media(max-width:1100px){.topbar{padding-inline:24px}main{padding-inline:24px}.editor{grid-template-columns:190px minmax(270px,1fr) 232px}.panel{padding-inline:13px}.settings{padding-inline:15px}.scene-info strong{font-size:9px}.scene-info small{font-size:8px}.scene{gap:7px}.scene-preview{width:31px;height:46px}.scene-index{display:none}.workspace{padding-inline:17px}.canvas-wrap canvas{height:444px;width:249.75px}.workspace{min-height:579px}.canvas-wrap canvas.square{height:295px;width:295px}.palette-note{margin-top:30px}.quality{display:none}}@media(max-width:850px){.editor{grid-template-columns:minmax(0,1fr) 250px}.scenes{grid-column:1/-1;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:12px 16px}.scenes .panel-heading{margin:0 10px 0 0}.scenes .panel-heading>span,.palette-note,.prototype-note{display:none}.scene{margin:0;flex:1;padding:6px;gap:8px}.scene-preview{width:26px;height:37px}.scene-info small{display:none}.scene-info strong{font-size:9px;white-space:normal}.workspace{grid-column:1;grid-row:2;border-left:0;min-height:578px}.settings{grid-column:2;grid-row:2}.canvas-wrap canvas{height:440px;width:247.5px}.timeline{grid-row:3}.title-row{margin-bottom:22px}.local{display:none}}@media(max-width:600px){.topbar{height:64px;padding-inline:18px}.back{font-size:17px}.back span{display:none}.wordmark{font-size:21px}.topbar:after{content:'LOCAL';font-size:8px;color:#8a8e83}.wordmark i{font-size:7px}main{padding:25px 13px 0}.title-row{align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:18px}.eyebrow{font-size:8px;letter-spacing:.1em}h1{font-size:26px}.description{font-size:11px}.export{font-size:11px;padding:9px 13px;margin-top:4px}.export>span{font-size:16px}.editor{grid-template-columns:minmax(0,1fr);border-radius:10px}.scenes{padding:10px 8px;gap:3px}.scenes .panel-heading{display:none}.scene{gap:6px;padding:6px 5px}.scene-info strong{font-size:8px;line-height:1.35}.scene-preview{width:25px;flex-shrink:0}.workspace{grid-column:1;grid-row:2;min-height:514px;border:0;padding:14px 17px 0}.canvas-wrap{padding:14px 0}.canvas-wrap canvas{height:398px;width:223.875px}.canvas-wrap canvas.square{height:290px;width:290px}.workspace-top{font-size:8px}.transport{height:48px}.quality{display:block}.settings{grid-column:1;grid-row:4;padding:19px 20px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.settings .panel-heading{grid-column:1/-1;margin-bottom:4px}.settings label[for=brand],.settings #brand{grid-column:1/-1}.settings label[for=scene-1]{grid-column:1;grid-row:4}.settings #scene-1{grid-column:1;grid-row:5}.settings label[for=scene-2]{grid-column:2;grid-row:4}.settings #scene-2{grid-column:2;grid-row:5}.settings label[for=scene-3]{grid-column:1/-1;grid-row:6}.settings #scene-3{grid-column:1/-1;grid-row:7;height:40px}.setting-row{grid-column:1/-1;margin-top:17px}.duration-label{grid-column:1/-1}.settings #duration{grid-column:1/-1;margin-bottom:14px}.caption-toggle{grid-column:1/-1}.timeline{grid-column:1;grid-row:3;padding:15px 14px}.timeline-title{gap:10px;margin-bottom:13px}.timeline-title>span{font-size:8px}.timeline-title .timeline-length{display:none}.clip{font-size:8px;padding:13px 7px}.clip span{display:none}.clips{height:40px}.export-status{font-size:8px;line-height:1.5;margin-top:9px;display:block}.export-status>span{margin-right:3px}#scrub{left:14px;top:66px;width:calc(100% - 28px);height:45px}footer{font-size:8px;padding:14px 2px 20px;gap:20px}footer span:last-child{text-align:right;max-width:130px}}