:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#080a10;color:#eee;font-size:16px}*{box-sizing:border-box}body{margin:0;min-height:100vh}.backdrop{position:fixed;inset:-5px;background:linear-gradient(#0006,#0006),url('assets/trading-bg.jpg') center/cover;filter:blur(3px);z-index:-1}.topbar{position:relative;display:flex;width:max-content;max-width:calc(100% - 32px);margin:20px auto 24px;padding:6px;background:#12131ceb;border:1px solid #343442;border-radius:14px;box-shadow:0 5px 25px #0008;align-items:center;gap:4px}.topbar span{font-size:14px;font-weight:600;padding:13px 22px}.topbar .active{background:#ffffff12;border-radius:8px}main{display:grid;grid-template-columns:280px minmax(0,840px);gap:24px;justify-content:center;align-items:start;padding:0 22px 22px}.panel{background:#0b0c0dec;border:1px solid #ffffff20;border-radius:14px;padding:24px;max-height:calc(100vh - 114px);overflow:auto;scrollbar-width:thin;scrollbar-color:#686868 #171717;box-shadow:0 10px 40px #0006}h1{font-size:16px;margin:0 0 26px;font-weight:700}label:not(.bg-upload){display:block;font-size:12px;text-transform:uppercase;font-weight:700;color:#bcbfc2;margin:18px 0 10px}input{width:100%;display:block;border:1px solid #ffffff20;border-radius:9px;background:#ffffff0c;padding:14px;color:#fff;font:14px 'Courier New',monospace;min-height:46px}input:focus{outline:2px solid #7077c9;outline-offset:2px}input[type=file]{font-size:12px;padding:10px;font-family:Arial}input::file-selector-button{padding:6px;margin-right:8px;border:0;border-radius:3px;cursor:pointer;background:#e5e5e5;color:#111}.remove{font-size:12px;color:#9ba0aa;background:none;border:0;padding:9px 0;cursor:pointer}.stats{background:#0005;padding:16px 12px;border-radius:8px;margin:15px 0;font-size:12px;color:#c2c3c7}.stats>div{display:flex;justify-content:space-between;gap:6px;margin:7px 0}.stats output{font-family:'Courier New',monospace;font-size:14px;color:#24d4aa;font-weight:700}button{font-family:inherit;cursor:pointer}.hide{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px;background:#ffffff13;border:1px solid #ffffff12;border-radius:9px;color:#eee;font-size:14px}kbd{font:11px Arial;padding:6px;background:#ffffff0b;border-radius:3px;color:#aaa}.disclosure{font-size:12px;line-height:1.5;color:#92949e;margin-bottom:0}#message{font-size:12px;color:#98f3d9;line-height:1.5}#message:empty{display:none}.stage{width:100%;min-width:0}.card-wrap{overflow:hidden;border-radius:12px;box-shadow:0 10px 40px #0006;background:#080910}canvas{display:block;width:100%;height:auto}.toolbar{display:flex;justify-content:space-between;gap:12px;margin-top:7px}.themes{display:flex;gap:7px;min-width:0;flex:1}.theme{border:2px solid transparent;background:#090b10;padding:0;border-radius:8px;overflow:hidden;width:160px;max-width:28%;height:88px;opacity:.7}.theme:hover{opacity:1}.theme.selected{border-color:#727bf5;opacity:1;box-shadow:0 0 9px #555eff55}.theme img{width:100%;height:100%;object-fit:cover}.bg-upload{display:flex;position:relative;align-items:center;justify-content:center;flex-direction:column;background:#ffffff13;border:1px solid #ffffff20;border-radius:9px;min-width:154px;padding:10px;text-align:center;font-size:12px;font-weight:600;cursor:pointer;overflow:hidden}.bg-upload>span{font-size:23px;margin-bottom:4px;color:#aaa}.bg-upload small{font-size:10px;font-weight:400;color:#aeb0ba;margin-top:4px}.bg-upload input{position:absolute;inset:0;opacity:0;cursor:pointer;height:100%}.actions{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:8px}.actions>div{display:flex;gap:8px}.actions button,#show-ui{border:1px solid #ffffff25;border-radius:8px;background:#27292cdd;color:#eee;font-size:14px;padding:12px 18px;min-height:44px}.actions button:hover,#show-ui:hover{background:#44464a}.actions .subtle{font-size:12px;background:#1119;color:#bbb;padding:10px}button:focus-visible,.bg-upload:focus-within{outline:2px solid #9098ff;outline-offset:3px}#show-ui{position:fixed;bottom:20px;left:20px}.ui-hidden .panel,.ui-hidden .topbar,.ui-hidden .toolbar,.ui-hidden .actions{display:none}.ui-hidden main{display:block;max-width:884px;margin:0 auto;padding-top:20px}.ui-hidden .stage{margin:auto}@media(min-width:1500px){main{padding-top:20px;gap:40px}.topbar{margin-top:26px}}@media(max-width:850px){main{grid-template-columns:230px minmax(0,1fr);gap:15px;padding:0 15px 20px}.panel{padding:17px}.theme{height:65px;max-width:32%;width:110px}.bg-upload{min-width:110px;font-size:11px}.bg-upload small{max-width:95px}.actions{flex-wrap:wrap}.actions button{padding:10px}.topbar{margin-bottom:18px}}@media(max-width:620px){main{display:flex;flex-direction:column;padding:0 12px 20px}.stage{order:-1}.panel{width:100%;max-height:none}.topbar{margin:12px auto 16px}.topbar span{padding:10px 16px}.theme{height:62px}.bg-upload{min-width:120px}.actions{flex-wrap:nowrap}.card-wrap{border-radius:8px}.panel label{font-size:13px}.panel input{font-size:16px}.ui-hidden main{padding:12px}.ui-hidden .stage{order:0}}
@media(min-width:851px){main{grid-template-columns:280px minmax(0,min(840px,calc((100vh - 250px)*1.473684)));}.theme{height:78px}.bg-upload{min-height:78px}}
.video-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px;margin-top:10px;background:#0b0c14ed;border:1px solid #ffffff25;border-radius:9px}.video-controls[hidden]{display:none}.video-controls button{border:1px solid #ffffff25;border-radius:6px;background:#292c35;color:#eee;padding:10px;font-size:12px}.video-controls label{font-size:12px!important;margin:0!important;text-transform:none!important}.video-controls input{flex:1;min-width:80px;width:100px;padding:0;min-height:32px;accent-color:#25d5a9}.video-controls span{font-size:12px;color:#ccc}#video-status{width:100%;line-height:1.4;color:#a8cfbf}.video-controls button:disabled{opacity:.5;cursor:wait}.ui-hidden .video-controls{display:none}
.video-controls .audio-check{display:flex!important;align-items:center;gap:6px;white-space:nowrap}.audio-check input{width:16px!important;min-width:16px!important;min-height:16px!important;flex:none!important}.video-controls #video-volume{max-width:110px}

.video-controls #export-duration{flex:none;width:76px;min-width:76px;min-height:36px;padding:6px 8px}