*{box-sizing:border-box}body{margin:0;background:#f5f3ec;color:#263d34;font:14px "Aptos","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer;border:0;color:inherit}button:disabled,input:disabled,select:disabled{opacity:.4;cursor:not-allowed}button,a,input,select,[tabindex]{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #b88dcb;outline-offset:4px}[hidden]{display:none!important}header{height:92px;border-bottom:1px solid #daddd2;display:flex;align-items:center;gap:27px;max-width:1450px;padding:0 56px;margin:auto}.back{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600}.brand{font:italic 37px Georgia,serif;letter-spacing:-6px;margin-right:7px}.brand>span{color:#a28ab4}.slash{font-weight:300;font-size:23px;color:#b3bcae;margin-left:18px}.logo{font-weight:700;letter-spacing:2px;font-size:14px;display:flex;gap:6px;align-items:center}.logo>span{font-weight:400}.logo i{width:6px;height:6px;border-radius:50%;background:#a28ab4;margin-left:5px}.local{margin-left:auto;color:#89967f;font-size:10px;display:flex;gap:8px;align-items:center}.local i{width:5px;height:5px;background:#708d71;border-radius:50%}main{max-width:1450px;padding:0 56px;margin:auto}.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:49px 0 37px}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:700}.intro h1{font-weight:500;font-size:clamp(35px,4.5vw,64px);letter-spacing:-2.5px;margin:19px 0 0;line-height:1.1}.intro h1>span{color:#86937d}.intro>p{font-size:13px;line-height:1.8;color:#83917a;margin:0 18px 3px 0}.workbench{display:grid;grid-template-columns:minmax(0,1fr) 300px;background:#fbfaf4;border:1px solid #d9dfd1}.viewer{padding:25px 28px;min-width:0}.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:23px}.viewer-bar h2{font-size:12px;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 0 5px;font-weight:600}.viewer-bar>div>span{font-size:10px;color:#9aa68f}.button{background:#e9e9df;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 18px;font-size:12px;font-weight:600;transition:background .2s,transform .2s}.button:hover{background:#dddfd1}.button:active{transform:translateY(1px)}.button.small{font-size:10px;padding:10px 12px;white-space:nowrap}.button.primary{width:100%;background:#a28ab4;color:#fff;justify-content:space-between;padding:16px 18px}.button.primary:hover{background:#8a72a0}.button.primary>span:last-child{font-size:20px;line-height:14px}.drop-zone{height:430px;background:radial-gradient(ellipse at 50% 30%,#e9eadd 0%,transparent 70%);border:1px dashed #cbd3c0;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}.drop-zone:hover,.viewer.dragover .drop-zone{background:#e9ede0;border-color:#96a484}.viewer.dragover{background:#e9ede0;outline:2px dashed #acb39a;outline-offset:-8px}.art{height:155px;width:210px;background:#d6dccc;position:relative;overflow:hidden;transform:rotate(-5deg);box-shadow:0 7px 20px #334b3410;margin-bottom:29px;border:9px solid #fefdf7}.art-orbit{width:110px;height:110px;border:1px solid #97a98e;position:absolute;left:41px;top:14px;border-radius:50%;transform:rotate(-25deg)}.art-sun{position:absolute;width:45px;height:45px;background:#b6a1c5;border-radius:50%;right:28px;top:17px}.art-hill{position:absolute;width:310px;height:180px;background:#668573;border-radius:50%;left:-66px;top:75px;transform:rotate(-10deg)}.play-triangle{width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:24px solid #f8f7ed;position:absolute;left:86px;top:53px;filter:drop-shadow(0 2px 4px #20372a20)}.art>span{font:36px Georgia,serif;position:absolute;color:#fff7ea;right:9px;bottom:2px;transform:rotate(5deg)}.drop-zone h3{font-size:21px;letter-spacing:-.6px;font-weight:500;margin:7px 0 12px}.drop-zone p{font-size:11px;color:#8b9881;margin:0 0 22px}.drop-zone u{color:#5f7552;text-underline-offset:3px}.formats{font-size:8px;letter-spacing:.8px;color:#9ea992}.sample-line{display:flex;align-items:center;gap:14px;margin:20px 0;font-size:10px;color:#a0a992}.text-button{font-size:10px;color:#7b8b70;background:none;padding:3px 0;line-height:1.6}.text-button:hover{color:#8e6aa7}.viewer-bottom{display:flex;align-items:center;gap:14px;border-top:1px solid #e0e5d7;padding-top:23px;margin-top:24px}.viewer-bottom>span{font-size:25px;color:#b1bca4;align-self:flex-start}.viewer-bottom p{font-size:10px;line-height:1.8;color:#7a8b6f;margin:0}.viewer-bottom p>span{color:#a1ac96}.mini-word{font-size:10px;letter-spacing:2px;line-height:1.5;color:#c0c9b5;margin-left:auto}aside{background:#edf0e4;border-left:1px solid #d9dfd1;padding:26px 26px}.aside-head{display:flex;align-items:center;justify-content:space-between;color:#8d9a80}.aside-head>span:last-child{font-size:24px;line-height:1}.aside-head .eyebrow{font-size:9px;letter-spacing:1.5px}aside>h2{font-size:25px;letter-spacing:-.6px;font-weight:500;margin:12px 0 28px}fieldset{border:0;padding:0;min-width:0;margin:0 0 24px}legend{display:flex;gap:10px;font-size:10px;color:#9aa68d;width:100%;padding:0;margin-bottom:12px}legend>span{color:#526947;font-size:11px;font-weight:600}.turn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.edit-control{font-size:25px;background:#dde5d1;padding:9px 3px 8px;color:#637d51}.edit-control:hover{background:#d1ddc1}.edit-control[aria-pressed=true]{background:#c6d6b1}.edit-control>span{display:block;font-size:8px;margin-top:2px}.angle-line{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#8a9b79;margin-top:9px}.angle-line .text-button{font-size:9px}.trim-values{display:grid;grid-template-columns:1fr 1fr;gap:9px}.trim-values>label{font-size:9px;color:#879a73;position:relative;background:#f6f8ee;border:1px solid #d3ddc7;padding:8px 9px 7px;display:flex;align-items:center;gap:5px}.trim-values input{width:100%;border:0;background:none;color:#536b44;font-size:12px;min-width:0;appearance:textfield;-moz-appearance:textfield;padding:0}.trim-values input::-webkit-inner-spin-button{appearance:none}.trim-values label>span{font-size:8px;color:#a1b08f}.range-label{display:block;font-size:9px;color:#8f9f80;margin:12px 0 0}input[type=range]{appearance:none;display:block;width:100%;height:3px;background:#ccd7bd;border-radius:2px;margin:10px 0 0;cursor:pointer;accent-color:#788f66}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:#71855f;border:2px solid #f5f7ec;box-shadow:0 0 0 1px #71855f}input[type=range]::-moz-range-thumb{width:7px;height:7px;border-radius:50%;background:#71855f;border:2px solid #f5f7ec}.hint{font-size:9px;line-height:1.7;color:#94a184;margin:10px 0 0}select{width:100%;appearance:none;border:1px solid #d3ddc7;color:#60774f;background:#f7f9ee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='m3 4 3 3 3-3' fill='none' stroke='%2377826b'/%3E%3C/svg%3E") no-repeat right 10px center;padding:11px 27px 11px 11px;font-size:10px;cursor:pointer}.check{display:flex;gap:8px;align-items:center;font-size:10px;color:#70865f;cursor:pointer;margin:0 0 11px}.check input{margin:0;accent-color:#8e78a2;width:12px;height:12px}.check.monitor{font-size:9px;color:#96a586;margin-bottom:16px}.export-note{font-size:9px;line-height:1.7;text-align:center;color:#94a184;margin:12px 0 0}.cancel{display:block;margin:12px auto;color:#9b709f}progress{height:4px;width:100%;display:block;accent-color:#9f8ab1;margin:18px 0 6px}#progressText{text-align:center}.canvas-stage{width:100%;height:430px;background:#1b2924;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.canvas-stage canvas{max-width:100%;max-height:100%;object-fit:contain;display:block}#previewBadge{position:absolute;top:13px;left:13px;color:#a4b09d;font-size:8px;letter-spacing:1.5px;background:#1b2924b0;padding:5px 7px}.playback{display:flex;gap:13px;align-items:center;background:#e8ecdf;padding:13px 12px;font-size:9px;color:#829572}.playback input{margin:0;flex:1;min-width:0}.icon-button{background:none;padding:0;width:22px;height:22px;font-size:16px;color:#637a53;flex-shrink:0}.playback>span{min-width:30px;text-align:center;font-size:9px}.mute-slash{position:absolute;left:9px;top:-2px;font-size:24px;color:#8d789e}#muteBtn{position:relative}.preview-foot{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#94a185;padding:11px 0 0}.notice{background:#e9e3ed;border-left:3px solid #ad97bf;padding:12px 15px;color:#7e658e;font-size:11px;line-height:1.6;margin-top:17px}.good-to-know{display:grid;grid-template-columns:150px 1fr 1fr;gap:30px;padding:29px 0;border-bottom:1px solid #dce2d3;align-items:start}.good-to-know .eyebrow{color:#93a083;margin-top:4px;font-size:8px}.good-to-know p{font-size:10px;color:#9aa68d;line-height:1.8;margin:0}footer{display:flex;align-items:center;gap:20px;color:#a1ac95;font-size:9px;padding:25px 0 33px}footer strong{font-size:9px;letter-spacing:1.5px;color:#77886a}footer a{margin-left:auto;color:#8a9c78}.source-video{position:fixed;left:-10px;top:-10px;width:1px;height:1px;opacity:0;pointer-events:none}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,15px);padding:14px 21px;background:#2a4135;color:#f3f6e9;font-size:12px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:min(90vw,560px);text-align:center;box-shadow:0 8px 24px #1e36232a;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:1050px){header{padding:0 30px;height:78px}main{padding:0 30px}.workbench{grid-template-columns:minmax(0,1fr) 270px}.viewer{padding:23px 20px}aside{padding:24px 20px}.intro h1{font-size:47px}.intro>p{font-size:11px;margin-right:0}.canvas-stage,.drop-zone{height:380px}.drop-zone h3{font-size:18px}.formats{font-size:7px}.sample-line{gap:10px;flex-wrap:wrap}.good-to-know{grid-template-columns:110px 1fr 1fr;gap:20px}.mini-word{font-size:8px;letter-spacing:1.5px}}
@media(max-width:760px){header{padding:0 22px;height:72px;gap:18px}.back{font-size:0;gap:4px}.brand{font-size:35px}.slash{font-size:21px;margin-left:8px}.logo{font-size:12px}.local{font-size:9px;gap:5px}main{padding:0 20px}.intro{padding:34px 0 28px;gap:20px}.intro .eyebrow{font-size:8px}.intro h1{font-size:39px;letter-spacing:-1.8px}.intro h1>span{display:block}.intro>p{font-size:10px;margin-bottom:3px;line-height:1.7}.workbench{grid-template-columns:1fr}.viewer{padding:23px}.viewer-bar h2{max-width:55vw}.drop-zone,.canvas-stage{height:360px}.drop-zone h3{font-size:21px}.formats{font-size:8px}aside{border-left:0;border-top:1px solid #d9dfd1;padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.aside-head,aside>h2{grid-column:1/-1}aside>h2{margin-bottom:27px}aside fieldset{margin-bottom:28px}aside>fieldset:nth-of-type(2){grid-column:2;grid-row:3/5}aside>fieldset:nth-of-type(4){grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 25px}aside>fieldset:nth-of-type(4) legend{grid-column:1/-1}aside>fieldset:nth-of-type(4) .check{grid-column:1}aside>fieldset:nth-of-type(4) select{grid-column:2;grid-row:1/3;align-self:start}aside>fieldset:nth-of-type(4) .hint{grid-column:2;grid-row:3;margin-top:0}aside>fieldset:nth-of-type(4) .monitor{margin-bottom:0}#exportBtn,#cancelBtn,#progressArea,.export-note{grid-column:1/-1}.good-to-know{grid-template-columns:1fr 1fr;gap:16px 24px}.good-to-know .eyebrow{grid-column:1/-1}.good-to-know p{font-size:9px}footer{font-size:8px;gap:14px;flex-wrap:wrap}.viewer-bottom{margin-top:20px}.viewer-bottom .mini-word{font-size:9px}.viewer-bottom p{font-size:9px}.art{transform:scale(.95) rotate(-5deg)}.sample-line .text-button{font-size:10px}.sample-line>span{font-size:9px}}
@media(max-width:420px){header{padding:0 19px}.local{font-size:0}.local i{width:6px;height:6px}.intro{align-items:flex-start}.intro h1{font-size:36px}.intro>p{font-size:9px;margin-top:35px;max-width:120px}.viewer{padding:18px 15px}.viewer-bar h2{font-size:11px;max-width:47vw}.viewer-bar>div>span{font-size:9px}.viewer-bar{gap:12px}.drop-zone,.canvas-stage{height:300px}.art{transform:scale(.85) rotate(-5deg);margin-bottom:13px}.drop-zone h3{font-size:17px;letter-spacing:-.5px}.drop-zone p{font-size:10px}.formats{font-size:6px}.sample-line{gap:3px}.sample-line>span{font-size:8px}.sample-line .text-button{font-size:9px}.mini-word{display:none}aside{padding:23px 19px;gap:0 18px}.edit-control{font-size:23px;padding:9px 2px}.edit-control>span{font-size:7px}.angle-line{font-size:8px}.angle-line .text-button{font-size:8px}.trim-values{gap:5px}.trim-values>label{padding:8px 6px;font-size:8px}.trim-values input{font-size:10px}.trim-values label>span{display:none}.hint{font-size:8px}legend{font-size:9px;gap:7px}legend>span{font-size:10px}.check{font-size:9px;gap:6px}.check.monitor{font-size:8px}aside>fieldset:nth-of-type(4){gap:0 18px}aside select{font-size:9px;padding-left:8px}footer>span{display:none}.playback{gap:8px;padding:12px 9px}.playback>span{min-width:26px;font-size:8px}.good-to-know{gap:14px 18px}.good-to-know p{font-size:8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}