:root{--bg:#0a0f14;--card:#131b24;--surface:#1e2a36;--lime:#bdda26;--text:#f2f5f7;--text-2:#a3afbb;--caption:#8c99a6;--red:#ff5a4e;--yellow:#f2b33d;--line:#f2f5f714;--r-s:14px;--r-m:18px;--r-l:22px;--pad:20px;--font:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);overscroll-behavior:none;margin:0;font-size:15px}#app{max-width:560px;min-height:100%;margin:0 auto}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0;padding:0}h1,h2,h3{text-wrap:balance;margin:0;font-weight:800}p{text-wrap:pretty;margin:0}.hidden{display:none!important}.icon{flex:none;place-items:center;width:22px;height:22px;display:inline-grid}.icon svg{width:100%;height:100%}.screen{min-height:100dvh;padding:0 var(--pad) calc(16px + env(safe-area-inset-bottom));flex-direction:column;display:flex}.bar{height:48px;margin-top:env(safe-area-inset-top);flex:none;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;display:grid;position:relative}.bar-title{text-align:center;white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:17px;font-weight:800;overflow:hidden}.icon-btn{border-radius:var(--r-s);width:44px;height:44px;color:var(--text);place-items:center;display:grid}.icon-btn:active{background:var(--card)}.icon-btn.ghost{pointer-events:none}.btn-primary,.btn-secondary{border-radius:var(--r-m);text-align:center;justify-content:center;align-items:center;gap:10px;width:100%;min-height:56px;padding:0 16px;font-size:16px;font-weight:800;display:flex}.btn-primary{background:var(--lime);color:var(--bg)}.btn-secondary{background:var(--card);color:var(--text)}.btn-primary:active,.btn-secondary:active{transform:scale(.98)}.btn-small{border-radius:var(--r-s);background:var(--lime);min-height:44px;color:var(--bg);padding:0 18px;font-size:14px;font-weight:800}.chip-row{flex-wrap:wrap;gap:8px;display:flex}.chip-btn{border-radius:var(--r-s);background:var(--card);min-height:44px;color:var(--text-2);padding:0 14px;font-size:13px;font-weight:700}.toast{left:50%;bottom:calc(120px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 2 * var(--pad));border-radius:var(--r-s);background:var(--surface);color:var(--text);text-align:center;white-space:pre-line;overflow-wrap:anywhere;text-wrap:pretty;z-index:100;opacity:0;pointer-events:none;padding:12px 18px;font-size:14px;font-weight:600;transition:opacity .2s,transform .2s;position:fixed;transform:translate(-50%,16px)}.toast.show{opacity:1;transform:translate(-50%)}.sheet-backdrop{z-index:70;background:0 0;justify-content:center;align-items:flex-end;transition:background .22s;display:flex;position:fixed;inset:0}.sheet-backdrop.open{background:#0000008c}.sheet{background:var(--card);border-radius:var(--r-l) var(--r-l) 0 0;width:100%;max-width:560px;max-height:88dvh;padding:8px var(--pad) calc(24px + env(safe-area-inset-bottom));transition:transform .25s;overflow-y:auto;transform:translateY(100%)}.sheet-backdrop.open .sheet{transform:none}.sheet-grip{background:var(--surface);border-radius:2px;width:40px;height:4px;margin:0 auto 14px}.sheet-title{margin:0 0 16px;font-size:20px;font-weight:800}.sheet-body{flex-direction:column;gap:12px;display:flex}.sheet-gap{height:4px}.sheet-divider{background:var(--line);border:0;width:100%;height:1px;margin:8px 0 0}.field-label{color:var(--caption);margin-top:4px;font-size:13px;font-weight:700}.segmented{border-radius:var(--r-s);background:var(--surface);gap:4px;padding:4px;display:flex}.segmented button{min-height:44px;color:var(--text-2);border-radius:11px;flex:1;font-size:14px;font-weight:700}.segmented button.active{background:var(--lime);color:var(--bg)}.toggle-row{cursor:pointer;justify-content:space-between;align-items:center;gap:16px;min-height:56px;display:flex}.toggle-text{flex-direction:column;gap:2px;font-size:16px;font-weight:700;display:flex}.toggle-text small{color:var(--caption);font-size:13px;font-weight:500}.switch{flex:none;width:52px;height:32px;position:relative}.switch input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.knob{background:var(--surface);pointer-events:none;border-radius:16px;transition:background .2s;position:absolute;inset:0}.knob:after{content:"";background:var(--text-2);border-radius:50%;width:24px;height:24px;transition:transform .2s,background .2s;position:absolute;top:4px;left:4px}.switch input:checked+.knob{background:var(--lime)}.switch input:checked+.knob:after{background:var(--bg);transform:translate(20px)}.range-row{align-items:center;gap:12px;min-height:44px;display:flex}.range{appearance:none;background:0 0;flex:1;height:44px;margin:0}.range::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--lime) var(--fill,0%), var(--surface) var(--fill,0%));border-radius:3px;height:6px}.range::-moz-range-track{background:linear-gradient(90deg, var(--lime) var(--fill,0%), var(--surface) var(--fill,0%));border-radius:3px;height:6px}.range::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text);border:0;border-radius:50%;width:26px;height:26px;margin-top:-10px}.range::-moz-range-thumb{background:var(--text);border:0;border-radius:50%;width:26px;height:26px}.range-value{text-align:right;min-width:46px;color:var(--text-2);font-variant-numeric:tabular-nums;font-size:14px;font-weight:700}.dev-box{flex-direction:column;gap:8px;display:flex}.home-top{height:64px;margin-top:env(safe-area-inset-top);justify-content:space-between;align-items:center;display:flex}.home-top .icon-btn{margin-right:-10px}.logo{letter-spacing:-.01em;color:var(--lime);align-items:baseline;font-size:26px;font-weight:800;line-height:1;display:flex}.logo-i{display:inline-block;position:relative}.logo-i i{background:var(--lime);border-radius:50%;width:.19em;height:.19em;margin-left:-.095em;position:absolute;top:-.04em;left:50%}.hero{letter-spacing:-.02em;margin-top:28px;font-size:44px;font-weight:800;line-height:1.08}.hero span{white-space:nowrap;display:block}.hero-sub{color:var(--text-2);margin-top:12px;font-size:17px;line-height:1.4}.upload-btn{border-radius:var(--r-m);background:var(--lime);width:100%;height:64px;color:var(--bg);justify-content:center;align-items:center;gap:12px;margin-top:28px;font-size:18px;font-weight:800;display:flex}.upload-btn:active{transform:scale(.98)}.privacy{text-align:center;color:var(--caption);margin-top:12px;font-size:13px}.section-title{margin-top:36px;font-size:20px}.video-list{flex-direction:column;gap:10px;margin-top:14px;display:flex}.video-card{border-radius:var(--r-m);background:var(--card);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer;align-items:center;gap:14px;min-height:84px;padding:10px;display:flex;position:relative}.card-thumb{background:var(--surface) center / cover no-repeat;border-radius:10px;flex:none;width:48px;height:64px}.card-body{flex-direction:column;gap:4px;min-width:0;display:flex}.card-title{white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:700;overflow:hidden}.card-sub{color:var(--caption);font-variant-numeric:tabular-nums;font-size:13px}.card-delete{border-radius:var(--r-s);background:var(--red);min-height:44px;color:var(--text);padding:0 16px;font-size:14px;font-weight:800;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.empty{border-radius:var(--r-m);background:var(--card);text-align:center;color:var(--text-2);padding:28px 16px;font-size:15px}.proc-center{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;display:flex}.ring{width:200px;height:200px;margin-bottom:18px;position:relative}.ring-svg{width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}.ring-bg{fill:none;stroke:var(--surface);stroke-width:7px}.ring-fg{fill:none;stroke:var(--lime);stroke-width:7px;stroke-linecap:round;transition:stroke-dashoffset .2s}.ring-label{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.ring-label>span{line-height:1}.ring-num{font-variant-numeric:tabular-nums;font-size:52px;font-weight:800}.ring-pct{color:var(--text-2);align-self:center;margin-left:2px;font-size:22px;font-weight:800;transform:translateY(.62em)}.proc-left{font-size:17px;font-weight:700}.proc-hint{color:var(--caption);font-size:13px}.proc-dev{color:var(--caption);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;font-size:12px}.proc-cancel{flex:none}.trim{gap:14px}.trim-note{text-align:center;color:var(--text-2);font-size:15px}.trim-stage{border-radius:var(--r-m);background:#000;flex:1;place-items:center;min-height:200px;max-height:46dvh;display:grid;position:relative;overflow:hidden}.trim-video{object-fit:contain;width:100%;height:100%;display:block}.trim-play{background:#0a0f1499;border-radius:50%;place-items:center;width:64px;height:64px;display:grid;position:absolute}.trim-actions{flex-direction:column;gap:10px;display:flex}.tl{touch-action:none;-webkit-user-select:none;user-select:none;height:44px;position:relative}.tl-track{background:var(--surface);border-radius:4px;height:8px;position:absolute;top:18px;left:0;right:0}.tl-band{background:var(--lime);height:8px;position:absolute;top:18px}.tl-marks i{background:var(--yellow);border-radius:1px;width:2px;height:20px;margin-left:-1px;position:absolute;top:12px}.tl-head{background:var(--text);pointer-events:none;border-radius:1px;width:2px;height:28px;margin-left:-1px;position:absolute;top:8px}.tl-handle{cursor:ew-resize;z-index:2;place-items:center;width:44px;height:44px;margin-left:-22px;display:grid;position:absolute;top:0}.tl-handle span{background:var(--lime);width:12px;height:30px;box-shadow:0 0 0 3px var(--bg);border-radius:6px}.studio{height:100dvh;min-height:0;padding-bottom:calc(14px + env(safe-area-inset-bottom));overflow:hidden}.studio-title{color:var(--text-2);font-size:15px;font-weight:700}.windows{flex:none;grid-template-columns:1fr 1fr;gap:10px;display:grid}.win-col{flex-direction:column;gap:8px;min-width:0;display:flex}.win{aspect-ratio:9/16;border-radius:var(--r-m);background:var(--card);max-height:calc(100dvh - 360px);position:relative;overflow:hidden}.win-chip{z-index:4;color:var(--text);pointer-events:none;background:#0a0f14b8;border-radius:99px;padding:4px 10px;font-size:12px;font-weight:700;position:absolute;top:8px;left:8px}.win-slot,.win-content{position:absolute;inset:0}.win-empty{border-radius:var(--r-m);border:1.5px dashed #a3afbb59;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:12px;display:flex;position:absolute;inset:0}.win-empty-icon{color:var(--text-2)}.win-empty-icon .icon{width:32px;height:32px}.win-icon{z-index:4;width:44px;height:44px;color:var(--text);place-items:center;display:grid;position:absolute;top:6px;right:6px}.win-icon .icon{background:#0a0f14b8;border-radius:10px;width:32px;height:32px;padding:6px}.view-switch{gap:2px;padding:3px}.view-switch button{border-radius:10px;min-height:44px;padding:0 2px;font-size:12px}.view-switch button.active{background:var(--surface);color:var(--lime)}.stage{touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0;overflow:hidden}.stage-3d{position:absolute;inset:0}.stage-3d canvas,.overlay-host canvas{touch-action:none;width:100%;height:100%;display:block}.video-frame{transform-origin:50%;position:absolute}.video-frame video{object-fit:fill;width:100%;height:100%;display:block;position:absolute;inset:0}.overlay-host{pointer-events:none;position:absolute;inset:0}.overlay-host canvas{opacity:.9}.stage:not([data-mode=sticks]) .stage-3d,.stage:not([data-mode=both]):not(.ghosting) .overlay-host{display:none}.stage[data-mode=sticks] .video-frame{opacity:0;pointer-events:none}.tl-box{flex:none;margin-top:auto;padding-top:14px}.tl-row{font-variant-numeric:tabular-nums;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;font-weight:700;display:flex}.tl-range{color:var(--lime)}.tl-time{color:var(--text-2)}.tl-hint{color:var(--caption);text-align:center;margin-top:2px;font-size:13px}.studio-bottom{flex:none;margin-top:14px}.ctl-row{grid-template-columns:76px 1fr 1fr 1fr;gap:8px;display:grid}.ctl-play{border-radius:var(--r-l);background:var(--lime);width:76px;height:76px;color:var(--bg);place-items:center;display:grid}.ctl-play .icon{width:30px;height:30px}.ctl{border-radius:var(--r-l);background:var(--card);flex-direction:column;justify-content:center;align-items:center;gap:6px;min-width:0;height:76px;display:flex}.ctl:active,.ctl-play:active{transform:scale(.97)}.ctl .icon{width:24px;height:24px;color:var(--text)}.ctl-value{font-size:20px;font-weight:800;line-height:24px}.ctl-label{color:var(--text-2);white-space:nowrap;max-width:100%;padding:0 2px;font-size:11.5px;font-weight:700}.ctl.on .icon,.ctl.on .ctl-label{color:var(--lime)}.rec-dot{background:var(--red);border-radius:50%;width:22px;height:22px}.rec-pill{background:var(--red);color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;border-radius:99px;align-items:center;gap:8px;padding:7px 14px;font-size:14px;font-weight:800;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.rec-pill i{background:var(--text);border-radius:50%;width:8px;height:8px}.studio.recording .studio-title{visibility:hidden}.studio.recording .win-you:after{content:"";z-index:5;border:3px solid var(--red);border-radius:inherit;pointer-events:none;position:absolute;inset:0}.studio.recording .view-switch,.studio.recording .tl-box,.studio.recording .ctl-row,.studio.recording .bar .icon-btn{visibility:hidden}.studio.recording .view-switch,.studio.recording .tl-box{display:none}.big-count{text-align:center;color:var(--lime);font-variant-numeric:tabular-nums;margin-top:auto;font-size:64px;font-weight:800;line-height:1.1}.big-count.pop{animation:.35s ease-out count-pop}@keyframes count-pop{0%{opacity:.5;transform:scale(1.25)}to{opacity:1;transform:scale(1)}}.rec-progress{background:var(--surface);border-radius:2px;height:4px;margin-top:14px;overflow:hidden}.rec-progress i{background:var(--red);width:0;height:100%;display:block}.stop-btn{border-radius:var(--r-l);background:var(--text);width:100%;height:72px;color:var(--bg);font-size:18px;font-weight:800;display:block}.studio.recording .ctl-row{display:none}.studio.recording .stop-btn{display:block!important}.studio:not(.recording) .stop-btn{display:none}.menu{right:var(--pad);top:calc(48px + env(safe-area-inset-top));z-index:40;border-radius:var(--r-s);background:var(--surface);flex-direction:column;min-width:200px;padding:6px;display:flex;position:absolute;box-shadow:0 12px 32px #00000080}.menu-item{text-align:left;border-radius:10px;min-height:48px;padding:0 14px;font-size:15px;font-weight:700}.menu-item:active{background:var(--card)}.menu-item.danger{color:var(--red)}.speed-big{text-align:center;color:var(--lime);font-variant-numeric:tabular-nums;font-size:56px;font-weight:800;line-height:1.1}.sheet-body:has(.speed-big) .range-value{display:none}.slider-ends{color:var(--caption);justify-content:space-between;margin-top:-10px;font-size:13px;font-weight:600;display:flex}.channel{flex-direction:column;gap:2px;display:flex}.review{z-index:60;background:var(--bg);padding:0 var(--pad) calc(16px + env(safe-area-inset-bottom));opacity:0;flex-direction:column;max-width:560px;margin:0 auto;transition:opacity .2s;display:flex;position:fixed;inset:0;overflow-y:auto}.review.open{opacity:1}.rv-body{flex-direction:column;flex:1;display:flex}.rv-score{text-align:center;flex-direction:column;align-items:center;gap:4px;margin-top:18px;display:flex}.rv-score b{color:var(--lime);font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:88px;font-weight:800;line-height:1}.rv-score span{color:var(--text-2);font-size:15px;font-weight:600}.rv-label{margin-top:30px;font-size:15px;font-weight:800}.rv-bar{gap:4px;margin-top:12px;display:flex}.rv-seg{background:var(--surface);border-radius:8px;flex-basis:0;min-width:14px;height:44px}[data-grade=good]{background:var(--lime)!important}[data-grade=ok]{background:var(--yellow)!important}[data-grade=bad]{background:var(--red)!important}.rv-legend{color:var(--text-2);justify-content:center;gap:18px;margin-top:10px;font-size:13px;font-weight:600;display:flex}.rv-legend span{align-items:center;gap:6px;display:flex}.rv-legend i{border-radius:3px;width:10px;height:10px}.rv-cards{grid-template-columns:1fr 1fr;gap:10px;margin-top:24px;display:grid}.rv-card{border-radius:var(--r-m);background:var(--card);flex-direction:column;gap:6px;padding:14px;display:flex}.rv-card-title{color:var(--caption);text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:700}.rv-card p{font-size:16px;font-weight:700;line-height:1.3}.rv-actions{flex-direction:column;gap:10px;margin-top:24px;display:flex}.rv-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.rv-row .btn-secondary{white-space:nowrap;padding:0 8px;font-size:15px}.btn-secondary.busy{color:var(--lime)}.win-empty .btn-small{white-space:nowrap;padding:0 12px;font-size:13px}.picker{z-index:30;background:var(--bg);flex-direction:column;align-items:center;padding:28px 20px;display:flex;position:fixed;inset:0}.picker-title{text-wrap:balance;margin:8px 0 20px;font-size:26px;font-weight:800}.picker-canvas{border-radius:18px;display:block}.tl-pins{pointer-events:none;position:absolute;inset:0}.tl-pin{pointer-events:auto;z-index:1;place-items:center;width:28px;height:22px;margin-left:-14px;display:grid;position:absolute;top:26px}.tl-pin span{background:var(--text);width:8px;height:8px;box-shadow:0 0 0 2px var(--bg);border-radius:50%}.pieces{gap:3px;height:28px;margin-top:6px;display:flex}.pieces:empty{display:none}.piece{background:var(--card);min-width:0;color:var(--caption);border-radius:8px;flex:1 1 0;font-size:11px;font-weight:700;overflow:hidden}.piece span{white-space:nowrap;text-overflow:ellipsis;padding:0 4px;display:block;overflow:hidden}.piece.on{background:var(--lime);color:var(--bg)}.win-more{z-index:5}.win-content .win-icon{top:50px}.win-menu{min-width:180px}.menu-item{justify-content:space-between;align-items:center;gap:12px;display:flex}.menu-item .icon{width:20px;height:20px;color:var(--lime)}.ctl-wrap{min-width:0;display:grid;position:relative}.ctl-arrow{width:36px;height:36px;color:var(--caption);place-items:center;display:grid;position:absolute;top:0;right:0}.ctl-arrow .icon{width:16px;height:16px}.stepper{border-radius:var(--r-s);background:var(--surface);grid-template-columns:56px 1fr 56px;align-items:center;height:52px;display:grid}.stepper-btn{height:52px;color:var(--lime);font-size:24px;font-weight:700}.stepper-btn:disabled{color:var(--caption);opacity:.4}.stepper-value{text-align:center;font-variant-numeric:tabular-nums;font-size:20px;font-weight:800}.rhythm-tools{flex-direction:column;gap:10px;margin-top:6px;display:flex}.tempo-row{justify-content:space-between;align-items:center;gap:10px;min-height:48px;display:flex}.tempo-value,.tempo-label{font-size:15px;font-weight:700}.tempo-value{font-variant-numeric:tabular-nums}.tempo-btns{gap:8px;display:flex}.btn-small.round{background:var(--surface);min-width:52px;color:var(--text);padding:0 10px;font-size:16px}.btn-small.round:active{background:var(--lime);color:var(--bg)}.tap-btn.flash{animation:.25s ease-out tap-flash}@keyframes tap-flash{0%{background:var(--lime);color:var(--bg)}}.sheet .btn-secondary,.sheet .text-input,.sheet .hist-row{background:var(--surface)}.sheet .hist-score{background:var(--card)}.text-input{border-radius:var(--r-s);background:var(--card);border:1px solid var(--line);height:52px;color:var(--text);font:inherit;padding:0 16px;font-size:16px}.text-input:focus{outline:2px solid var(--lime);outline-offset:-2px}.btn-secondary.danger{color:var(--red)}.hist-list{gap:8px}.hist-row{border-radius:var(--r-s);background:var(--card);text-align:left;justify-content:space-between;align-items:center;gap:12px;min-height:60px;padding:0 16px;display:flex}.hist-name{flex-direction:column;gap:2px;min-width:0;display:flex}.hist-name b{font-size:15px}.hist-name span{color:var(--caption);font-size:13px}.hist-score{text-align:center;background:var(--surface);border-radius:99px;min-width:56px;padding:6px 10px;font-size:14px;font-weight:800}.hist-score[data-grade=good]{background:var(--lime);color:var(--bg)}.hist-score[data-grade=ok]{background:var(--yellow);color:var(--bg)}.hist-score[data-grade=bad]{background:var(--red);color:var(--bg)}
