:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}html,body{margin:0;min-height:100%;background:#111;color:#eee}body{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;overscroll-behavior:none;padding-top:env(safe-area-inset-top);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left)}html,body,main,.stage,canvas{touch-action:manipulation}.stage,canvas,button{-webkit-tap-highlight-color:transparent}button{touch-action:none;-webkit-user-select:none;user-select:none}header{padding:14px 16px 10px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}h1{margin:0;font-size:18px;font-weight:600;letter-spacing:.02em}#status{font-size:12px;opacity:.62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}main{min-height:0;display:grid;place-items:center;padding:0 12px}.stage{position:relative;width:min(100%,78vh);aspect-ratio:1;overflow:hidden;background:#1b1b1b;border:1px solid #2c2c2c}canvas{width:100%;height:100%;display:block}canvas.mirrored{transform:scaleX(-1)}#video{display:none}.start{position:absolute;inset:0;margin:auto;width:104px;height:42px;border:1px solid #666;border-radius:8px;background:#191919dd;color:#eee;font:inherit}.start[hidden]{display:none}footer{padding:12px;display:block}.controls{display:grid;gap:9px;width:100%;min-width:0}.seg{display:grid;border:1px solid #4a4a4a;border-radius:8px;overflow:hidden}.modes{grid-template-columns:repeat(5,1fr)}.seg button,.icon,.stepButton,.effectStepButton,.recordButton,.borderButton{min-height:42px;border:0;background:#191919;color:#aaa;font:inherit}.seg button+button,.seg output+button,.seg button+output{border-left:1px solid #3b3b3b}.seg button.active{background:#e7e7e7;color:#111}.icon{width:100%;border:1px solid #4a4a4a;border-radius:8px;color:#eee;font-size:18px}.steppers{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stepRow{display:grid;grid-template-columns:auto 36px minmax(54px,1fr) 36px;align-items:center;border:1px solid #3f3f3f;border-radius:8px;overflow:hidden;min-width:0}.stepLabel{padding:0 8px;font-size:10px;letter-spacing:.08em;color:#888;white-space:nowrap}.stepButton{min-height:36px;border-left:1px solid #333;border-right:1px solid #333;color:#ddd;font-size:18px;line-height:1}.stepButton:disabled,.effectStepButton:disabled,.recordButton:disabled,.previewActions button:disabled{opacity:.28}.stepRow output,.effectControl output{text-align:center;font-size:12px;font-variant-numeric:tabular-nums;color:#eee;white-space:nowrap;display:grid;place-items:center}.stepRow .stepButton:last-child{border-right:0}.effectControl{grid-template-columns:minmax(56px,1fr) minmax(62px,1fr) minmax(50px,1fr) 38px 48px 38px}.effectControl button{font-size:11px;padding-inline:4px}.effectStepButton{font-size:18px;line-height:1;color:#ddd}.actionRow{display:grid;grid-template-columns:76px minmax(0,1fr) 72px;gap:8px;width:100%}.borderButton{width:100%;border:1px solid #4a4a4a;border-radius:8px;font-size:10px;letter-spacing:.06em;color:#888}.borderButton.active{background:#e7e7e7;color:#111;border-color:#e7e7e7}.recordButton{width:100%;border:1px solid #666;border-radius:8px;background:#e7e7e7;color:#111;font-weight:600}.recordButton:active{background:#cfcfcf}.previewDialog{width:min(calc(100vw - 24px),78vh);max-width:none;border:0;padding:0;background:transparent;color:#eee}.previewDialog::backdrop{background:rgba(0,0,0,.78)}.previewCard{display:grid;gap:10px;padding:10px;background:#111;border:1px solid #3f3f3f}.previewVideo{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:#080808}.previewActions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.previewActions button{min-height:44px;border:1px solid #4a4a4a;border-radius:8px;background:#191919;color:#eee;font:inherit}.previewActions #share{background:#e7e7e7;color:#111;border-color:#e7e7e7}@media(max-width:560px){.modes button{font-size:10px;padding-inline:2px}.stepLabel{font-size:9px;padding-inline:6px}.stepRow{grid-template-columns:auto 34px minmax(48px,1fr) 34px}.effectControl{grid-template-columns:minmax(52px,1fr) minmax(58px,1fr) minmax(46px,1fr) 34px 42px 34px}.effectControl button{font-size:10px;padding-inline:2px}.actionRow{grid-template-columns:68px minmax(0,1fr) 64px}.borderButton{font-size:9px}}@media(min-width:800px){footer{width:min(100%,78vh);margin-inline:auto;padding-inline:0}}