*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#000;color:#fff}body,button,input{font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:400}button{color:inherit;background:transparent;border:0;padding:8px 5px;cursor:pointer}button:hover,.file-label:hover{color:#999}button:focus-visible,input:focus-visible,.file-label:focus-within{outline:1px solid #aaa;outline-offset:4px}main{min-height:100svh;display:grid;place-items:center;padding:100px 24px 35px}.studio{width:min(340px,88vw);margin-top:6svh}.stage{height:320px;width:100%;display:flex;align-items:center;justify-content:center;container-type:size}.canvas-wrap{width:min(100cqw,calc(100cqh * var(--ratio,1)));aspect-ratio:var(--ratio,1)}canvas{width:100%;height:100%;display:block;image-rendering:auto}.transport{display:flex;align-items:center;gap:9px;margin:10px 9px 7px;color:#6b6b6b;font-size:9px}.transport button{font-size:10px;color:#aaa;padding:7px 0;min-width:28px}.transport #mute{margin-left:1px}.transport>span{font-size:9px;font-variant-numeric:tabular-nums}.transport input{flex:1;min-width:0}.actions{display:flex;align-items:center;justify-content:space-between;margin:0 8px}.actions button,.file-label{font-size:12px;padding:10px 4px;line-height:1.2}.file-label{position:relative;cursor:pointer}.file-label input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.file-label.dragover{outline:1px dashed #777;outline-offset:3px}.signature{font-size:12px;text-align:center;margin:20px 0 0}.signature span{color:#444;padding:0 6px}.track-name{color:#666;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10px;margin:13px 0 0}.export-note{color:#3e3e3e;text-align:center;font-size:9px;margin:8px 0 0}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);font-size:11px;line-height:1.5;background:#090909;border:1px solid #292929;color:#ccc;padding:10px 14px;width:max-content;max-width:calc(100vw - 32px);text-align:center;opacity:0;pointer-events:none}.toast.visible{opacity:1}dialog{color:#ddd;background:#080808;border:1px solid #292929;width:300px;max-width:calc(100vw - 36px);padding:21px;font-size:11px}dialog::backdrop{background:#000b}.dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px;font-size:12px}.dialog-heading button{font-size:10px;color:#777;margin-right:-5px}.setting{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:17px 0}.setting-label{font-size:11px;color:#888}.choices{display:flex;gap:13px}.choices button{padding:3px 0;color:#666;font-size:11px}.choices button.selected{color:white;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#666}.colors{display:flex;gap:12px;align-items:center}.colors button{background:var(--color);padding:0;width:10px;height:10px;border:1px solid #444}.colors button.selected{outline:1px solid #777;outline-offset:3px}.colors input{appearance:none;background:transparent;border:1px solid #444;padding:1px;width:15px;height:15px;cursor:pointer}.colors input::-webkit-color-swatch-wrapper{padding:0}.colors input::-webkit-color-swatch{border:0}.range-setting{display:grid;grid-template-columns:1fr auto;gap:9px;color:#888}.range-setting output{font-size:10px}.range-setting input{grid-column:1/-1}input[type=range]{appearance:none;height:12px;margin:0;background:transparent;cursor:pointer;width:100%}input[type=range]::-webkit-slider-runnable-track{height:1px;background:#333}input[type=range]::-webkit-slider-thumb{appearance:none;background:#aaa;width:4px;height:4px;margin-top:-1.5px;border-radius:0}input[type=range]::-moz-range-track{height:1px;background:#333}input[type=range]::-moz-range-thumb{background:#aaa;width:4px;height:4px;border:0;border-radius:0}.file-info{display:flex;flex-direction:column;gap:6px;border-top:1px solid #1e1e1e;padding-top:17px;margin-top:22px;font-size:10px;color:#888;overflow-wrap:anywhere}.file-info small{font-size:9px;color:#555}.file-info #imageDetail{margin-top:5px}.dialog-actions{display:flex;justify-content:space-between;margin-top:17px}.dialog-actions button{font-size:11px;padding:7px 0}.dialog-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:13px;border-top:1px solid #1e1e1e;font-size:9px;color:#555}.dialog-footer button{font-size:10px;padding:0}#help p{font-size:11px;color:#888;line-height:1.8;margin:17px 0 0}body.recording #controls,body.recording .file-label,body.recording #reset,body.recording #play,body.recording #seek{pointer-events:none;opacity:.4}button:disabled{opacity:.4}@media(max-width:500px){main{padding-top:50px}.studio{margin-top:1svh;width:min(340px,88vw)}.stage{height:300px}.transport{margin-top:14px}}@media(max-height:650px){main{padding-top:20px;padding-bottom:20px}.studio{margin-top:0}.stage{height:min(280px,48svh)}.signature{margin-top:12px}}

.stage{position:relative}.empty-state{position:absolute;inset:0;display:grid;place-items:center;color:#555;font-size:11px;pointer-events:none}.empty-state[hidden]{display:none}dialog{max-height:calc(100svh - 36px);overflow-y:auto}select{font:11px Arial;color:#ccc;background:#080808;border:1px solid #333;padding:4px 8px;min-width:64px}button:disabled{cursor:default}input:disabled{opacity:.3}
.format-note{font-size:10px;color:#888;line-height:1.6}.format-note:empty{display:none}

.settings-tabs{display:flex;gap:22px;margin:0 0 24px;border-bottom:1px solid #222}.settings-tabs button{font-size:11px;color:#666;padding:0 0 10px}.settings-tabs button[aria-selected="true"]{color:#fff;border-bottom:1px solid #aaa}.settings-tabs button:focus-visible{outline-offset:2px}[role="tabpanel"][hidden]{display:none}fieldset{border:0;padding:0;margin:0;min-width:0}fieldset:disabled{opacity:.35}.shadow-toggle{padding-top:15px;border-top:1px solid #222;color:#888}.shadow-toggle input{accent-color:#aaa;width:12px;height:12px;margin:0;cursor:pointer}#shadowColor{background:transparent;border:1px solid #444;padding:1px;width:20px;height:18px;cursor:pointer}.panel-note{font-size:10px;color:#666;line-height:1.7;margin-top:23px}.dialog-heading{position:sticky;top:-21px;background:#080808;padding-top:8px;padding-bottom:8px;z-index:2}.settings-tabs{position:sticky;top:13px;background:#080808;padding-top:10px;z-index:1}

.credit{font-size:10px;color:#777;text-align:center;margin:7px 0 0}