:root{--bg:#121318;--bg-deep:#0c0d10;--bg2:#1b1c22;--bg3:#1d1e24;--bg4:#26282f;--lane-sel:#22232b;--line:#34363f;--grid:#24252d;--grid-bar:#33353f;--text:#f5f3ee;--text-2:#c9c8d0;--muted:#9c9ca8;--ink:#16171c;--play:#3ddc84;--on-play:#06240f;--rec:#ff4f45;--on-rec:#fff;--rec-soft:#3a1b1c;--rec-text:#ff8a82;--go:#3fd6a8;--on-go:#05261c;--gold:#fc3;--on-gold:#2b2000;--love:#ff86bf;--layer-1:#ff8466;--layer-2:#45d6a6;--layer-3:#ffcf4a;--layer-4:#6ab4ff;--layer-5:#b99bff;--layer-6:#ff86bf;--layer-7:#8fe3ef;--layer-8:#c3e66a;--drum-1:#7cc7ff;--drum-2:#ffd36b;--drum-3:#63e0b8;--drum-4:#ff8ac4;--drum-5:#ff8a5c;--drum-6:#b99bff;--drum-7:#b6e36a;--drum-8:#8ea4ff;--key-white:#f6f4ef;--key-black:#1d1e24;--key-label:#a8a59c;--key-label-c:#4a4840;--font:ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;--font-mono:"DM Mono", ui-monospace, "SF Mono", monospace;--t-display:900 40px/1.1 var(--font);--t-title:900 28px/1.15 var(--font);--t-song:900 20px/1.2 var(--font);--t-card:900 18px/1.25 var(--font);--t-body:800 15px/1.35 var(--font);--t-small:700 13px/1.3 var(--font);--t-label:500 11px/1 var(--font-mono);--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-12:48px;--r-xs:9px;--r-sm:11px;--r-md:14px;--r-lg:16px;--r-xl:24px;--r-2xl:28px;--r-avatar:48px;--sel-ring:0 0 0 3px var(--bg), 0 0 0 6px var(--text);--sheet-shadow:0 20px 60px #00000080;--glow-head:0 0 12px #ffffffb3;--dur-tap:60ms;--dur-fast:.12s;--dur-base:.2s;--dur-slow:.32s;--ease-out:cubic-bezier(.2, .8, .2, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--hit-min:44px;--hit-std:48px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}html{overscroll-behavior:none}body{background:var(--bg);color:var(--text);font:15px/1.4 var(--font);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:fixed;inset:0;overflow:hidden}input{-webkit-user-select:text;user-select:text}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0;padding:0}button:disabled{opacity:.35;cursor:default}.spacer{flex:1}.muted{color:var(--muted)}.lbl{color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-size:11px;font-weight:700}.grp{flex-direction:column;gap:2px;display:flex}.title{white-space:nowrap;text-overflow:ellipsis;font-size:17px;font-weight:800;overflow:hidden}.title.big{font-size:26px}.hint{color:var(--muted);text-align:center;max-width:520px;font-size:14px}.row{align-items:center;gap:10px;display:flex}.row.center{justify-content:center}.top{padding:max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));background:var(--bg2);border-bottom:1px solid var(--line);scrollbar-width:none;flex-wrap:nowrap;flex-shrink:0;align-items:center;gap:10px;display:flex;overflow-x:auto}.top::-webkit-scrollbar{display:none}.songtitle{text-align:left;max-width:230px}.pill{background:var(--bg3);white-space:nowrap;border-radius:12px;align-items:center;gap:6px;min-height:40px;padding:8px 13px;font-size:14px;font-weight:700;display:inline-flex}.pill.small{border-radius:10px;min-height:32px;padding:5px 10px;font-size:12.5px}.pill.on{color:var(--bg);background:#fff}.pill.go{background:var(--go);color:#063325}.pill.big{border-radius:16px;min-height:54px;padding:12px 20px;font-size:18px}.pill.danger,.danger{color:#ff8a95}.pill.quiet{color:var(--muted);background:0 0}.pill.static{cursor:default}.pill.liked{color:#ff6f8e}.pill.corner{top:max(16px, env(safe-area-inset-top));position:absolute;left:16px}.btn{background:var(--bg3);border-radius:14px;flex-shrink:0;place-items:center;width:46px;height:46px;display:grid}.btn.ghost{background:0 0}.btn.play{background:var(--play);color:#08311a}.btn.stop{color:var(--bg);background:#fff}.btn.rec{color:var(--rec)}.btn.rec.on{background:var(--rec);color:#fff;animation:1s infinite pulse}.btn.big{border-radius:20px;width:64px;height:64px}.btn.round{border-radius:50%;width:54px;height:54px}@keyframes pulse{50%{box-shadow:0 0 0 6px #ff4d5e44}}.seg{background:var(--bg3);border-radius:12px;gap:2px;padding:3px;display:flex}.seg button{color:var(--muted);white-space:nowrap;border-radius:9px;padding:7px 11px;font-size:13px;font-weight:700}.seg button.on{color:var(--bg);background:#fff}.stepper{background:var(--bg3);border-radius:12px;align-items:center;height:40px;display:flex}.stepper button{place-items:center;width:36px;height:40px;display:grid}.stepper span{text-align:center;white-space:nowrap;min-width:30px;font-size:14px;font-weight:800}.loading{border:2.5px solid #0004;border-top-color:#0009;border-radius:50%;width:14px;height:14px;animation:.8s linear infinite spin;display:inline-block}.btn .loading{border-color:#08311a #0003 #0003;width:20px;height:20px}@keyframes spin{to{transform:rotate(360deg)}}.screen{flex-direction:column;height:100%;padding:24px 16px;display:flex;position:relative;overflow-y:auto}.screen.center{justify-content:center;align-items:center;gap:18px}.logo{letter-spacing:-1px;font-size:40px;font-weight:900}.avatars{flex-wrap:wrap;justify-content:center;gap:24px;display:flex}.who{flex-direction:column;align-items:center;gap:10px;font-size:17px;display:flex}.avatar{background:var(--bg3);border-radius:16px;flex-shrink:0;place-items:center;width:52px;height:52px;font-size:28px;display:grid}.avatar.sm{border-radius:12px;width:40px;height:40px;font-size:22px}.avatar.big{border-radius:28px;width:96px;height:96px;font-size:52px}.avatar.xl{border-radius:36px;width:128px;height:128px;font-size:64px}.avatar.add{border:3px dashed var(--line);color:var(--muted);background:0 0;font-size:48px}.avatar.on{outline-offset:2px;outline:3px solid #fff}.pinwrap{flex-direction:column;align-items:center;gap:14px;display:flex}.pindots{gap:14px;display:flex}.pindots i{background:var(--bg3);border-radius:50%;width:18px;height:18px}.pindots i.on{background:#fff}.pindots.wiggle{animation:.4s wiggle}@keyframes wiggle{20%,60%{transform:translate(-10px)}40%,80%{transform:translate(10px)}}.pinpad{grid-template-columns:repeat(3,76px);gap:10px;display:grid}.pinpad button{background:var(--bg3);touch-action:none;border-radius:20px;height:64px;font-size:26px;font-weight:800}.pinpad button:active{color:var(--bg);background:#fff}.nameinput{font:inherit;border:2px solid var(--line);background:var(--bg2);color:var(--text);text-align:center;border-radius:14px;width:320px;padding:12px 16px;font-size:22px;font-weight:700}.avatarpick{grid-template-columns:repeat(8,56px);gap:8px;display:grid}.colorpick{gap:10px;display:flex}.swatch{border-radius:50%;width:44px;height:44px}.swatch.on{outline-offset:3px;outline:3px solid #fff}.managelist{flex-direction:column;gap:8px;width:min(560px,100%);display:flex}.managerow{background:var(--bg2);border-radius:16px;align-items:center;gap:12px;padding:10px;display:flex}.songs{flex-direction:column;height:100%;display:flex}.songgrid{flex:1;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));align-content:start;gap:14px;padding:16px;display:grid;overflow-y:auto}.songcard{background:var(--bg2);border:1px solid var(--line);border-radius:18px;flex-direction:column;gap:10px;padding:14px;display:flex}.songcard .meta{flex-direction:column;min-width:0;display:flex}.songcard .meta b{white-space:nowrap;text-overflow:ellipsis;font-size:16px;overflow:hidden}.songcard small{color:var(--muted);font-size:12px;font-weight:600}.mini{border-radius:6px;padding:0 4px}.stripes{flex-direction:column;gap:3px;min-height:20px;display:flex}.stripes div{opacity:.85;border-radius:3px;height:6px}.emptyhint{color:var(--muted);text-align:center;grid-column:1/-1;padding:30px}.emptyhint.big{padding-top:80px;font-size:18px}.studio{flex-direction:column;height:100%;display:flex;position:relative}.layers{flex-direction:column;flex:1;gap:6px;min-height:120px;padding:8px 14px;display:flex;overflow-y:auto}.layer{flex-shrink:0;align-items:stretch;gap:8px;height:48px;display:flex;position:relative}.tag{color:#14161f;text-align:left;border-radius:12px;flex-shrink:0;align-items:center;gap:8px;width:168px;padding:0 10px;font-size:14px;font-weight:800;display:flex}.tag .nm{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.tag .ico{font-size:20px}.tag.selected{outline-offset:2px;outline:3px solid #fff}.tag.small{width:auto;height:40px}.lane{background:var(--bg2);border-radius:10px;flex:1;position:relative;overflow:hidden}.lane.tall{height:76px}.lane .bar{background:var(--line);width:1px;position:absolute;top:0;bottom:0}.lane .n{border-radius:3px;height:5px;position:absolute}.lanehint{color:var(--muted);align-items:center;padding-left:12px;font-size:12px;font-weight:600;display:flex;position:absolute;inset:0}.playhead{pointer-events:none;background:#fff;width:2px;display:none;position:absolute;top:0;bottom:0;box-shadow:0 0 8px #fff}.ms{align-items:center;gap:5px;display:flex}.ms>button{background:var(--bg3);width:34px;height:34px;color:var(--muted);border-radius:10px;place-items:center;font-size:13px;font-weight:800;display:grid}.ms>button.m-on{color:#3a2b00;background:#ffd66b}.ms>button.s-on{color:#00303d;background:#7ee0ff}.ms input[type=range]{accent-color:#fff;width:74px}.menu-backdrop{z-index:90;position:fixed;inset:0}.menu{z-index:91;background:var(--bg2);border:1px solid var(--line);border-radius:16px;flex-direction:column;min-width:220px;padding:6px;display:flex;position:fixed;box-shadow:0 12px 40px #0008}.menu button{text-align:left;border-radius:10px;align-items:center;gap:10px;padding:11px 12px;font-weight:700;display:flex}.addlayer{border:2px dashed var(--line);height:40px;color:var(--muted);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;gap:6px;font-size:14px;font-weight:700;display:flex}.addlayer.full{border-style:solid;font-size:13px}.kbbar{background:var(--bg2);border-top:1px solid var(--line);flex-shrink:0;align-items:center;gap:10px;padding:8px 14px;display:flex;overflow-x:auto}.recbadge{color:var(--rec);white-space:nowrap;font-size:13px;font-weight:800}.recbadge.muted{color:var(--muted)}.playarea{height:min(42vh,330px);padding:0 max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));flex-shrink:0;display:flex}.playarea.tall{height:min(50vh,400px)}.countin{color:#fff;pointer-events:none;z-index:30;text-shadow:0 6px 30px #000;background:#0006;place-items:center;font-size:160px;font-weight:900;display:grid;position:absolute;inset:0}.kb{touch-action:none;flex:1;gap:4px;display:flex;position:relative}.wk{background:var(--key-white);color:var(--key-label);border-radius:6px 6px 16px 16px;flex:1;justify-content:center;align-items:flex-end;padding-bottom:14px;font-size:14px;font-weight:800;display:flex;box-shadow:inset 0 -6px #00000014}.wk.c{color:var(--key-label-c)}.wk.down{color:var(--ink);box-shadow:inset 0 -6px #0000002e}.bk{background:var(--key-black);z-index:2;border-radius:4px 4px 12px 12px;height:58%;position:absolute;top:0;box-shadow:inset 0 -5px #ffffff12}.pads{touch-action:none;flex:1;grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.pad{border-radius:var(--r-xl);transition:transform var(--dur-tap);flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:16px;font-weight:900;display:flex}.pad.lit{transform:scale(.97)}.fprow{align-items:center;gap:22px;padding:20px 26px 8px;display:flex}.beats{gap:14px;display:flex}.beat{background:var(--bg3);width:48px;height:48px;color:var(--muted);border-radius:50%;place-items:center;font-size:18px;font-weight:800;display:grid}.beat.one{box-shadow:inset 0 0 0 3px var(--gold)}.beat.now{background:var(--gold);color:#3a2b00;box-shadow:0 0 22px var(--gold)}.keepbox{flex-direction:column;align-items:flex-end;gap:6px;display:flex}.keepbox small,.fplane small{color:var(--muted);font-size:12.5px;font-weight:600}.fplane{flex-direction:column;gap:4px;padding:0 26px;display:flex}.toast{color:var(--bg);z-index:40;background:#fff;border-radius:14px;padding:10px 18px;font-weight:800;position:absolute;top:150px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #0008}.modal{z-index:50;background:#080a10a6;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.sheet{background:var(--bg2);border:1px solid var(--line);border-radius:22px;flex-direction:column;gap:12px;width:min(980px,100%);max-height:100%;padding:18px 20px;display:flex;overflow-y:auto}.sheet .hint{text-align:left;max-width:none}.fam{flex-direction:column;gap:6px;display:flex}.cards{flex-wrap:wrap;gap:8px;display:flex}.icard{position:relative}.icard .pick{background:var(--bg3);text-align:center;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:124px;height:88px;padding:4px;font-size:13px;font-weight:700;display:flex}.icard .pick .e{font-size:30px;line-height:1.1}.icard .pick small{color:var(--muted);font-size:10px;font-weight:600}.icard.on .pick{outline:3px solid #fff}.icard .hear{background:#0003;border-radius:9px;width:30px;height:30px;font-size:14px;position:absolute;top:4px;right:4px}.voice .wave{background:var(--bg);border-radius:14px;flex:1;align-items:center;gap:2px;height:90px;padding:0 10px;display:flex}.wave i{background:var(--gold);border-radius:2px;flex:1}.wave.empty{color:var(--muted);justify-content:center;font-size:13px;font-weight:600}.bigrec{background:var(--rec);color:#fff;border-radius:24px;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:6px;width:150px;height:120px;font-weight:800;display:flex}.bigrec.on{color:var(--rec);background:#fff;animation:1s infinite pulse}.toggle{background:var(--bg3);text-align:left;border-radius:16px;flex-shrink:0;align-items:center;gap:10px;width:220px;padding:12px 14px;display:flex}.toggle.on{color:var(--bg);background:#fff}.toggle span{flex-direction:column;display:flex}.toggle small{opacity:.75;font-size:11.5px}.voicekb{height:190px;display:flex}.err{color:#ff8a95;font-weight:700}.editor{flex-direction:column;height:100%;display:flex}.roll{background:var(--bg2);border-radius:12px;flex:1;min-height:0;margin:10px 14px 0;display:flex;overflow:clip}.rkeys{flex-direction:column;flex-shrink:0;width:112px;display:flex}.rkeys-col{flex-direction:column;flex:1;display:flex}.rkeys-col>div{border-bottom:1px solid #0003;flex:1;justify-content:flex-end;align-items:center;gap:4px;padding-right:8px;font-size:10.5px;font-weight:800;display:flex}.rkeys-col .w{color:#7d8395;background:#f4f5f8}.rkeys-col .b{background:#262a36;margin-right:34px}.rkeys-col .dk{background:var(--bg3);color:var(--text);border-bottom:1px solid var(--bg);justify-content:flex-start;padding-left:10px;font-size:13px}.rkeys-col .dk .e{font-size:18px}.oct{background:var(--bg3);border-bottom:1px solid var(--bg);place-items:center;height:34px;display:grid}.rgrid{touch-action:none;cursor:crosshair;flex:1;position:relative}.rrow{border-bottom:1px solid #2a2f42;position:absolute;left:0;right:0}.rrow.b{background:#1b1f2c}.rrow.alt{background:#1d2130}.rcol{pointer-events:none;background:#272c3d;width:1px;position:absolute;top:0;bottom:0}.rcol.beat{background:#353b52}.rcol.bar{background:#59607d;width:2px}.barlabel{color:#59607d;pointer-events:none;font-size:11px;font-weight:800;position:absolute;top:3px}.rnote{z-index:2;border-radius:7px;position:absolute;box-shadow:inset 0 -2px #0002}.rnote.sel{outline-offset:1px;z-index:3;outline:3px solid #fff}.rnote .edge{z-index:2;place-items:center;width:30px;display:grid;position:absolute;top:-6px;bottom:-6px;right:-10px}.rnote .edge:after{content:"";pointer-events:none;background:#0005;border-radius:2px;width:4px;height:50%}.rnote.sel .edge:after{display:none}.rnote .grip{width:22px;height:26px;color:var(--bg);pointer-events:none;background:#fff;border-radius:8px;place-items:center;font-size:13px;font-weight:900;display:grid;box-shadow:0 2px 8px #0008}.rnote .xdel{color:#fff;z-index:4;background:#ff4d5e;border-radius:50%;place-items:center;width:32px;height:32px;font-size:15px;font-weight:900;display:grid;position:absolute;top:-36px;left:50%;transform:translate(-50%);box-shadow:0 3px 10px #0009}.rnote .xdel.below{top:auto;bottom:-36px}.dcell{pointer-events:none;z-index:2;border-radius:8px;position:absolute}.rhead{pointer-events:none;z-index:4;background:#fff;width:2px;display:none;position:absolute;top:0;bottom:0;box-shadow:0 0 8px #fff}.more{color:var(--muted);pointer-events:none;font-size:11px;font-weight:800;position:absolute;right:8px}.more.up{top:4px}.more.down{bottom:4px}.tip{color:var(--bg);pointer-events:none;white-space:nowrap;z-index:10;background:#fff;border-radius:8px;padding:3px 9px;font-size:13px;font-weight:800;position:absolute}.gest{padding:10px 14px max(10px, env(safe-area-inset-bottom));flex-wrap:wrap;gap:8px;display:flex}.gest div{background:var(--bg3);border-radius:10px;padding:5px 10px;font-size:12.5px;font-weight:600}.gest b{color:var(--gold)}@media (width<=900px){.tag{width:128px;font-size:12.5px}.ms input[type=range]{width:50px}.avatar.xl{width:100px;height:100px;font-size:50px}.avatarpick{grid-template-columns:repeat(4,56px)}}.setupcards{flex-wrap:wrap;justify-content:center;gap:18px;display:flex}.setupcard{background:var(--bg2);border:2px solid var(--line);border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:250px;height:180px;font-size:18px;display:flex}.setupcard .e{font-size:44px}.setupcard small{color:var(--muted);font-size:13px;font-weight:600}.code{letter-spacing:.5px;color:var(--gold);-webkit-user-select:text;user-select:text;font-size:20px;font-weight:900}.code.xl{background:var(--bg2);border:2px dashed var(--gold);border-radius:18px;padding:14px 24px;font-size:34px}.codebox{background:var(--bg2);border-radius:16px;flex-direction:column;align-items:center;gap:4px;width:min(560px,100%);margin-top:10px;padding:14px 18px;display:flex}.nameinput.wide{width:min(460px,100%)}.loading.big{border-width:4px;border-color:var(--bg3);border-top-color:var(--text);width:40px;height:40px}.hint.small{font-size:12px}.updaterow{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.wavecol{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}.voice .wave{flex:none;position:relative}.wave i.played{background:#fff}.wave i.rec{background:var(--rec)}.wave.live i{min-width:1px}.wave i.empty{background:var(--bg3)}.wavehead{pointer-events:none;background:#fff;width:2px;position:absolute;top:6px;bottom:6px;box-shadow:0 0 6px #fff}.wavehead.rec{background:var(--rec);box-shadow:0 0 6px var(--rec)}.wave.live{gap:1px}.voicekb .wave.empty{flex:1}.update-toast{left:50%;top:calc(env(safe-area-inset-top) + 74px);z-index:200;color:var(--bg);background:#fff;border-radius:999px;align-items:center;gap:10px;padding:7px 7px 7px 14px;font-size:14px;font-weight:800;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 10px 30px #0009}.update-toast button{background:var(--go);color:#063325;border-radius:999px;padding:8px 16px;font-weight:900}.livedot{background:var(--go);width:9px;height:9px;box-shadow:0 0 0 0 var(--go);border-radius:50%;animation:1.6s infinite live}@keyframes live{70%{box-shadow:0 0 0 7px #4dd4ac00}to{box-shadow:0 0 #4dd4ac00}}.takepanel{flex:1;align-items:stretch;gap:16px;padding-top:10px;display:flex}.takepanel .bigrec{text-align:center;width:190px;height:auto;padding:10px;font-size:15px}.takewave{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}.takewave .wave{background:var(--bg2);border-radius:14px;flex:1;align-items:center;gap:1px;height:auto;padding:0 10px;display:flex;position:relative}.takewave .wave.empty{color:var(--muted);text-align:center;justify-content:center;padding:0 30px;font-size:15px;font-weight:600}.takewave .wave i{border-radius:2px;flex:1}.lanewave{opacity:.9;align-items:center;gap:1px;padding:0 2px;display:flex;position:absolute;inset:4px 0}.lanewave i{border-radius:1px;flex:1}.takeleft{flex-direction:column;flex-shrink:0;gap:10px;width:210px;display:flex}.takeleft .bigrec{flex:1;width:100%}.takefoot{align-items:center;gap:12px;display:flex}.takefoot small{flex:1}.nudge .stepper button{width:auto;padding:0 12px;font-size:13px;font-weight:800}.nudge .stepper span{min-width:70px;font-size:13px}.ii{flex-shrink:0;display:block;overflow:visible}.ii .t{fill:currentColor;fill-opacity:.22}.ii .f{fill:currentColor}.mlabel{font:var(--t-label);text-transform:uppercase;letter-spacing:.8px;color:var(--muted);white-space:nowrap;padding-left:4px}.mono{font-family:var(--font-mono);font-weight:500}.st{background:var(--bg);flex-direction:column;height:100%;display:flex;position:relative}.st-top{height:80px;padding:0 18px;padding-top:env(safe-area-inset-top);flex-shrink:0;align-items:center;gap:14px;display:flex}.st-sq{border-radius:var(--r-lg);background:var(--bg3);flex-shrink:0;place-items:center;width:48px;height:48px;display:grid}.st-sq.st-undo{width:auto;font:var(--t-body);align-items:center;gap:8px;padding:0 16px 0 13px;display:flex}.st-sq.st-undo:disabled{opacity:.4}.editor .top .ed-done{min-height:46px;padding:8px 18px 8px 14px;font-size:16px;font-weight:900}.st-title{text-align:left;flex-direction:column;width:170px;min-width:0;display:flex}.st-title .t{font:var(--t-song);letter-spacing:-.2px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.st-title .m{font-family:var(--font-mono);color:var(--muted);letter-spacing:.4px;font-size:12px}.st-transport{background:var(--bg3);border-radius:22px;align-items:center;gap:8px;padding:6px;display:flex}.st-play,.st-rec{border-radius:17px;place-items:center;width:60px;height:56px;display:grid}.st-play{background:var(--play);color:var(--on-play)}.st-play.on{background:var(--text);color:var(--bg)}.st-rec{background:var(--bg4);color:var(--rec)}.st-rec.on{background:var(--rec);color:var(--on-rec);box-shadow:0 0 0 4px #ff4f4540}.st-beats{gap:7px;padding:0 10px 0 8px;display:flex}.st-beats i{background:var(--line);border-radius:50%;width:12px;height:12px}.st-beats i.on{background:var(--text);box-shadow:0 0 10px #fff9}.st-beats i.one{background:var(--gold);box-shadow:0 0 10px var(--gold)}.st-grp{flex-direction:column;gap:4px;display:flex}.st-seg{background:var(--bg3);border-radius:var(--r-md);gap:2px;padding:3px;display:flex}.st-seg button{border-radius:var(--r-sm);height:38px;color:var(--muted);place-items:center;padding:0 10px;font-size:14px;font-weight:800;display:grid}.st-seg button.sq{width:44px;padding:0;font-size:16px}.st-seg button.on{background:var(--text);color:var(--bg)}.st-step{background:var(--bg3);border-radius:var(--r-md);align-items:center;height:44px;display:flex}.st-step button{width:42px;height:44px;color:var(--text-2);place-items:center;display:grid}.st-step>span{font-family:var(--font-mono);text-align:center;min-width:38px;font-size:17px}.st-step.tray{background:var(--bg4);height:48px}.st-step.tray button{width:44px;height:48px}.st-step.tray>span{font:var(--t-body);min-width:76px}.st-click{border-radius:var(--r-md);background:var(--bg3);width:50px;height:44px;color:var(--muted);place-items:center;display:grid}.st-click.on{background:var(--gold);color:var(--on-gold)}.st-layers{overscroll-behavior:contain;flex:1;min-height:0;overflow-y:auto}.st-layers:after{content:"";background:linear-gradient(to bottom, #12131800, var(--bg));pointer-events:none;z-index:4;height:32px;margin-top:-32px;display:block;position:sticky;bottom:0}.st-rows{--ruler-h:26px;--ruler-gap:12px;--rows-top:12px;--lane-l:244px;--lane-r:192px;--row-h:54px;--row-gap:8px;padding:var(--rows-top) 18px 28px;gap:var(--row-gap);flex-direction:column;display:flex;position:relative}.st-row{height:var(--row-h);flex-shrink:0;align-items:stretch;gap:10px;display:flex;position:relative}.st-lead{flex-shrink:0;gap:6px;display:flex}.st-lead .st-more{border-radius:var(--r-lg);background:var(--bg3);width:40px;color:var(--text-2);place-items:center;display:grid}.st-tag{border-radius:var(--r-lg);width:170px;color:var(--ink);text-align:left;flex-shrink:0;align-items:center;gap:10px;padding:0 14px;display:flex}.st-tag .nm{white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:15px;font-weight:900;overflow:hidden}.st-tag.sel{box-shadow:var(--sel-ring)}.st-lane{border-radius:var(--r-md);background:var(--bg2);flex:1;min-width:0;position:relative;overflow:hidden}.st-lane.sel{background:var(--lane-sel)}.st-lane .gb,.st-lane .gbar{background:var(--grid);pointer-events:none;width:1px;position:absolute;top:0;bottom:0}.st-lane .gbar{background:var(--grid-bar);width:2px}.st-lane .n{pointer-events:none;border-radius:4px;height:7px;position:absolute}.st-lanehint{color:var(--muted);font:var(--t-small);pointer-events:none;align-items:center;padding-left:14px;display:flex;position:absolute;inset:0}.st-wave{pointer-events:none;align-items:center;gap:2px;display:flex;position:absolute;inset:8px 6px}.st-wave i{border-radius:2px;flex:1}.st-ctl{flex-shrink:0;align-items:center;gap:6px;display:flex}.st-ctl>*{flex-shrink:0}.st-ctl>button{background:var(--bg3);width:44px;height:44px;color:var(--muted);border-radius:13px;place-items:center;font-size:15px;display:grid}.st-ctl>button.m-on{background:var(--gold);color:var(--on-gold)}.st-ctl>button.s-on{background:var(--layer-7);color:var(--ink)}.st-vol{background:var(--bg3);touch-action:none;cursor:ew-resize;border-radius:13px;width:64px;height:44px;position:relative;overflow:hidden}.st-vol i{border-right:3px solid var(--text-2);pointer-events:none;background:#34363f;position:absolute;top:0;bottom:0;left:0}.st-add{border-radius:var(--r-lg);border:2px dashed var(--line);height:48px;color:var(--muted);flex-shrink:0;justify-content:center;align-items:center;gap:8px;font-size:15px;font-weight:800;display:flex}.st-add.full{border-style:solid;font-size:13px}.st-ruler{height:var(--ruler-h);margin:0 calc(var(--lane-r) - 18px) calc(var(--ruler-gap) - var(--row-gap)) calc(var(--lane-l) - 18px);touch-action:none;cursor:pointer;background:var(--bg2);border-radius:8px;flex-shrink:0;position:relative}.st-ruler i{border-left:1px solid var(--grid);pointer-events:none;width:0;font-style:normal;position:absolute;top:0;bottom:0}.st-ruler i.br{border-left:2px solid var(--grid-bar);font:700 11px/26px var(--font-mono,ui-monospace, monospace);color:var(--muted);padding-left:5px}.st-ruler i.bt{top:16px}.st-head:before{content:"";clip-path:polygon(0 0,100% 0,50% 100%);background:#fff;width:14px;height:12px;margin-left:-7px;position:absolute;top:-2px;left:50%}.st-tostart{width:44px;height:56px;color:var(--text-2);border-radius:15px;place-items:center;display:grid}.st-head.cue{box-shadow:none;background:#ffffff73}.st-head{top:var(--rows-top);width:3px;box-shadow:var(--glow-head);pointer-events:none;z-index:3;background:#fff;border-radius:2px;margin-left:-1px;display:none;position:absolute}.st-tray{background:var(--bg2);border-radius:var(--r-2xl) var(--r-2xl) 0 0;padding:12px 14px calc(14px + env(safe-area-inset-bottom));flex-direction:column;flex-shrink:0;gap:12px;display:flex}.st-traybar{align-items:center;gap:10px;height:48px;display:flex}.st-chip{border-radius:var(--r-lg);height:48px;color:var(--ink);white-space:nowrap;align-items:center;gap:10px;padding:0 12px 0 14px;font-size:16px;font-weight:900;display:flex}.st-btn{border-radius:var(--r-lg);background:var(--bg4);height:48px;font:var(--t-body);white-space:nowrap;align-items:center;gap:8px;padding:0 16px;display:flex}.st-recbadge{background:var(--rec-soft);height:36px;color:var(--rec-text);border-radius:18px;align-items:center;gap:8px;padding:0 14px 0 12px;font-size:14px;font-weight:800;display:flex}.st-recbadge i{background:var(--rec);border-radius:50%;width:10px;height:10px}.st-play-area{height:clamp(290px,34vh,360px);display:flex}.st-empty{height:350px;color:var(--muted);font:var(--t-body);place-items:center;display:grid}.st-countin{pointer-events:none;z-index:30;background:#0a0b0e8c;place-items:center;display:grid;position:absolute;inset:0}.st-countin>div{background:var(--text);width:220px;height:220px;color:var(--bg);border-radius:50%;place-items:center;font-size:140px;font-weight:900;line-height:1;display:grid}.st-play-area .takepanel{padding-top:0}.st-play-area .takewave .wave{background:var(--bg)}.pk-backdrop{background:var(--bg-deep);z-index:50;animation:pk-in var(--dur-base) var(--ease-out);justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.pk-sheet{background:var(--bg2);border-radius:var(--r-2xl);width:1100px;max-width:calc(100% - 40px);height:760px;max-height:calc(100% - 40px);box-shadow:var(--sheet-shadow);flex-direction:column;gap:20px;padding:24px 28px;display:flex;overflow-y:auto}.pk-head{align-items:center;gap:12px;display:flex}.pk-title{font:var(--t-title);letter-spacing:-.3px}.pk-close{border-radius:var(--r-lg);background:var(--bg4);place-items:center;width:48px;height:48px;display:grid}.pk-fams{flex-wrap:wrap;gap:18px 28px;display:flex}.pk-fam{flex-direction:column;gap:8px;display:flex}.pk-fam .mlabel{letter-spacing:1px;padding-left:0;font-size:12px}.pk-cards{flex-wrap:wrap;gap:8px;display:flex}.pk-card{background:var(--bg4);border-radius:18px;width:104px;height:100px;position:relative}.pk-card .pick{flex-direction:column;justify-content:center;align-items:center;gap:6px;width:100%;height:100%;padding:0 6px;display:flex}.pk-card .pick span{text-align:center;font-size:13px;font-weight:800;line-height:1.15}.pk-card.on{color:var(--ink);box-shadow:0 0 0 3px var(--bg2), 0 0 0 6px var(--text)}.pk-card .hear{border-radius:var(--r-xs);background:#00000038;place-items:center;width:28px;height:28px;display:grid;position:absolute;top:5px;right:5px}@keyframes pk-in{0%{opacity:0}to{opacity:1}}.avatar-i{color:var(--ink);flex-shrink:0;place-items:center;font-weight:900;line-height:1;display:grid}.sg{background:var(--bg);flex-direction:column;height:100%;display:flex}.sg-top{height:80px;padding:0 24px;padding-top:env(safe-area-inset-top);flex-shrink:0;align-items:center;gap:14px;display:flex}.sg-name{font:var(--t-song);white-space:nowrap}.sg-listen{border-radius:var(--r-lg);background:var(--bg3);place-items:center;width:48px;height:48px;display:grid}.sg-tabs{background:var(--bg3);border-radius:var(--r-lg);gap:2px;margin-left:12px;padding:4px;display:flex}.sg-tabs button{height:40px;font:var(--t-body);color:var(--muted);white-space:nowrap;border-radius:12px;padding:0 18px}.sg-tabs button.on{background:var(--text);color:var(--bg)}.sg-new{border-radius:var(--r-lg);background:var(--go);height:48px;color:var(--on-go);white-space:nowrap;align-items:center;gap:8px;padding:0 20px 0 16px;font-size:16px;font-weight:900;display:flex}.sg-switch{border-radius:var(--r-lg);background:var(--bg3);height:48px;font:var(--t-body);padding:0 18px}.sg-sync{background:var(--bg3);height:40px;color:var(--gold);font:var(--t-body);border-radius:999px;align-items:center;gap:8px;padding:0 14px 0 12px;display:flex}.sg-sync .loading{border-color:#ffffff26;border-top-color:var(--gold)}.sg-refresh{border-radius:var(--r-lg);background:var(--bg3);height:48px;font:var(--t-body);align-items:center;gap:8px;padding:0 16px 0 12px;display:flex}.sg-refresh.nudge{background:var(--go);color:#063325;animation:jj-nudge 1.4s var(--ease-out) infinite}@keyframes jj-nudge{0%,to{box-shadow:0 0 #4dd4ac88}60%{box-shadow:0 0 0 10px #4dd4ac00}}.sg-stuck{border-radius:var(--r-lg);background:var(--bg3);font:var(--t-body);animation:jj-rise .3s var(--ease-out);align-items:center;gap:10px;margin:0 24px 8px;padding:10px 10px 10px 16px;display:flex}.sg-stuck b{color:var(--go)}.sg-stuck button{border-radius:var(--r-md);width:36px;height:36px;color:var(--muted);place-items:center;margin-left:auto;display:grid}.sg-grid{padding:8px 24px calc(24px + env(safe-area-inset-bottom));flex:1;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));align-content:start;gap:16px;display:grid;overflow-y:auto}.sg-card{background:var(--bg2);border-radius:var(--r-xl);flex-direction:column;gap:14px;min-width:0;padding:16px;display:flex}.sg-row1{align-items:center;gap:12px;min-width:0;display:flex}.sg-play{background:var(--play);width:56px;height:56px;color:var(--on-play);border-radius:50%;flex-shrink:0;place-items:center;display:grid}.sg-play.on{background:var(--text);color:var(--bg)}.sg-play .loading{border-color:#0000002e;border-top-color:var(--on-play);border-width:4px;width:30px;height:30px;animation-duration:.7s}.sg-play.wait{background:var(--text)}.sg-play.wait .loading{border-color:#0000001f;border-top-color:var(--bg)}.sg-loadingtxt{color:var(--gold)!important}.sg-preview{position:relative}.sg-phead-wrap{pointer-events:none;position:absolute;inset:6px 10px}.sg-phead{opacity:0;background:#fff;border-radius:1px;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0;box-shadow:0 0 8px #fff9}.sg-meta{flex-direction:column;gap:2px;min-width:0;display:flex}.sg-meta b{font:var(--t-card);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sg-meta small{font:var(--t-small);color:var(--muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sg-preview{background:#141519;border-radius:12px;flex-direction:column;justify-content:center;gap:3px;height:62px;padding:8px 10px;display:flex}.sg-prow{flex-shrink:0;position:relative}.sg-prow i{border-radius:3px;position:absolute;top:0;bottom:0}.sg-row3{align-items:center;gap:8px;display:flex}.sg-open{border-radius:var(--r-md);background:var(--text);height:44px;color:var(--bg);align-items:center;gap:7px;padding:0 16px 0 12px;font-size:15px;font-weight:900;display:flex}.sg-like{border-radius:var(--r-md);background:var(--bg4);height:44px;font:var(--t-body);align-items:center;gap:6px;padding:0 14px 0 10px;display:flex}.sg-like.on{color:var(--love)}.sg-count{font-family:var(--font-mono);color:var(--muted);white-space:nowrap;font-size:12px}.sg-more{border-radius:var(--r-md);background:var(--bg4);width:44px;height:44px;color:var(--text-2);place-items:center;display:grid}.sg-empty{text-align:center;color:var(--muted);grid-column:1/-1;padding-top:120px;font-size:18px;font-weight:800}.wm{align-items:center;gap:10px;display:flex}.wm>span{letter-spacing:-.4px;font-size:22px;font-weight:900}.wm-jar{border:3px solid var(--text);border-radius:7px 7px 11px 11px;flex-direction:column;justify-content:flex-end;gap:2px;width:30px;height:36px;padding:3px;display:flex;position:relative}.wm-jar i{border-radius:2px;height:4px}.wm-jar i.lid{background:var(--text);border-radius:3px;height:5px;position:absolute;top:-8px;left:3px;right:3px}.wm.big{margin-bottom:8px;transform:scale(1.4)}.who-screen{height:100%;padding:max(28px, env(safe-area-inset-top)) 28px max(28px, env(safe-area-inset-bottom));background:var(--bg);flex-direction:column;align-items:center;display:flex;overflow-y:auto}.who-top{align-self:flex-start}.who-mid{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:44px;display:flex}.who-title{font:var(--t-display);letter-spacing:-.6px;text-align:center}.who-kids{flex-wrap:wrap;justify-content:center;gap:28px;display:flex}.who-kid{flex-direction:column;align-items:center;gap:14px;font-size:20px;font-weight:900;display:flex}.who-kid.add{color:var(--muted);font-weight:800}.who-add{border-radius:var(--r-avatar);width:156px;height:156px;color:var(--muted);border:3px dashed #3a3c46;place-items:center;display:grid}.who-bottom{gap:12px;display:flex}.who-listen{background:var(--bg3);border-radius:18px;align-items:center;gap:10px;height:52px;padding:0 22px 0 18px;font-size:16px;font-weight:800;display:flex}.who-manage{height:52px;color:var(--muted);border-radius:18px;padding:0 18px;font-size:16px;font-weight:800}.pn-screen{background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:20px;height:100%;padding:20px;display:flex;position:relative;overflow-y:auto}.pn-back{top:max(28px, env(safe-area-inset-top));border-radius:var(--r-lg);background:var(--bg3);height:48px;font:var(--t-body);align-items:center;gap:6px;padding:0 18px 0 12px;display:flex;position:absolute;left:28px}.pn-corner{top:max(28px, env(safe-area-inset-top));position:absolute;left:28px}.pn-note{color:var(--muted);font:var(--t-small);text-align:center;max-width:460px}.pn{flex-wrap:wrap;justify-content:center;align-items:center;gap:32px 120px;display:flex}.pn-left{flex-direction:column;align-items:center;gap:22px;min-width:260px;display:flex}.pn-title{letter-spacing:-.4px;text-align:center;font-size:36px;font-weight:900}.pn-sub{color:var(--muted);font:var(--t-body);margin-top:-14px}.pn-dots{gap:16px;display:flex}.pn-dots i{background:var(--line);border-radius:50%;width:22px;height:22px}.pn-dots i.on{background:var(--text)}.pn-dots.wrong i{background:var(--rec)}.pn-dots.wiggle{animation:.4s wiggle}.pn-msg{height:22px;color:var(--rec-text);font-size:17px;font-weight:800}.pn-keys{grid-template-columns:repeat(3,96px);gap:12px;display:grid}.pn-keys button{border-radius:var(--r-xl);background:var(--bg3);height:80px;color:var(--text);touch-action:none;place-items:center;font-size:32px;font-weight:900;display:grid}.pn-keys button:active{background:var(--text);color:var(--bg)}@media (width<=1100px){.st-top{gap:9px;padding:0 14px}.st-title{flex:120px;width:auto;max-width:170px}.st-beats{gap:6px;padding:0 8px 0 6px}}@media (width<=960px){.st-top{height:auto;padding:max(10px, env(safe-area-inset-top)) 14px 10px;flex-wrap:wrap;row-gap:10px}.st-top>.spacer{display:none}.st-title{flex:140px;max-width:none}.st-transport{margin-left:auto}.st-top>.st-grp:first-of-type{margin-left:62px}}@media (width<=1100px){.pk-sheet{gap:16px;padding:20px 24px}.pk-fams{gap:14px 22px}.pk-card{width:88px;height:92px}.pk-card .pick span{font-size:12px}.pk-card .pick .ii{width:34px;height:34px}}.top{background:0 0;border-bottom:0}.kbbar{background:var(--bg2);border-top:0}:is(.kbbar,.sheet,.managerow,.codebox,.modal .sheet) :is(.pill:not(.on):not(.go),.stepper,.seg,.btn:not(.play):not(.stop),.toggle:not(.on)){background:var(--bg4)}.sheet{box-shadow:var(--sheet-shadow);border:0}.managerow{background:var(--bg2)}.songcard,.menu{border:0}.menu{background:var(--bg4)}.menu button:active{background:#30323a}.pk-card:not(.on) .pick span{color:var(--text)}.fam-dot{vertical-align:1px;border-radius:50%;width:8px;height:8px;margin-right:7px;display:inline-block}@media (width<=600px),(height<=500px){.st-top{height:auto;padding:max(8px, env(safe-area-inset-top)) 10px 8px;scrollbar-width:none;flex-wrap:nowrap;gap:8px;overflow-x:auto}.st-top::-webkit-scrollbar{display:none}.st-top>.spacer,.st-top .mlabel{display:none}.st-sq{border-radius:13px;flex-shrink:0;width:40px;height:40px}.st-title{flex:none;width:auto;min-width:84px;max-width:120px}.st-title .t{font-size:16px}.st-transport{border-radius:18px;flex-shrink:0;gap:6px;margin-left:0;padding:4px}.st-play,.st-rec{border-radius:14px;width:48px;height:44px}.st-beats{display:none}.st-seg{flex-shrink:0}.st-seg button{height:34px;padding:0 8px;font-size:13px}.st-seg button.sq{width:34px;font-size:14px}.st-step{flex-shrink:0;height:40px}.st-step button{width:34px;height:40px}.st-step>span{min-width:32px;font-size:15px}.st-click{flex-shrink:0;width:42px;height:40px}.st-grp{flex-shrink:0}.st-top>.st-grp:first-of-type{margin-left:0}.st-ruler{margin-left:calc(var(--lane-l) - 10px);margin-right:calc(var(--lane-r) - 10px)}.st-tostart{width:36px;height:48px}.st-rows{--lane-l:104px;--lane-r:98px;--row-h:44px;--row-gap:6px;--rows-top:8px;--ruler-gap:8px;padding:var(--rows-top) 10px 24px}.st-row{gap:8px}.st-tag{border-radius:13px;justify-content:center;width:48px;padding:0}.st-lead{gap:4px}.st-lead .st-more{border-radius:11px;width:34px}.st-sq.st-undo{justify-content:center;width:40px;padding:0}.st-sq.st-undo .bt,.st-tag .nm,.st-tag .loading{display:none}.st-ctl{gap:4px}.st-ctl>button{border-radius:11px;width:38px;height:38px;font-size:13px}.st-vol{display:none}.st-add{height:42px}.st-lanehint{padding-left:8px;font-size:11px}.st-tray{padding:8px 8px calc(8px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;gap:8px}.st-traybar{scrollbar-width:none;height:42px;overflow-x:auto}.st-traybar::-webkit-scrollbar{display:none}.st-traybar>*{flex-shrink:0}.st-chip{gap:6px;max-width:170px;height:42px;padding:0 10px;font-size:14px}.st-chip span{text-overflow:ellipsis;overflow:hidden}.st-btn{height:42px;padding:0 12px;font-size:14px}.st-step.tray{height:42px}.st-step.tray button{width:38px;height:42px}.st-step.tray>span{min-width:64px;font-size:14px}.st-play-area{height:230px}.pads{gap:6px}.pad{border-radius:16px;gap:4px;font-size:13px}.pad .ii{width:40px;height:40px}.wk{padding-bottom:8px;font-size:12px}.st-countin>div{width:160px;height:160px;font-size:100px}.takepanel{flex-direction:column;gap:8px}.takeleft{flex-direction:row;align-items:stretch;width:100%}.takeleft .bigrec{flex-direction:row;flex:1;gap:10px;width:auto;height:70px}.takefoot{flex-wrap:wrap}.pk-backdrop{padding:8px}.pk-sheet{border-radius:22px;width:100%;max-width:100%;height:100%;max-height:100%;padding:16px}.pk-title{font-size:22px}.pk-fams{gap:12px 14px}.pk-card{border-radius:14px;width:78px;height:82px}.pk-card .pick{gap:4px;padding:0 4px}.pk-card .pick span{font-size:11px}.pk-card .pick .ii{width:30px;height:30px}.pk-card .hear{width:24px;height:24px;top:3px;right:3px}.sg-top{height:auto;padding:max(10px, env(safe-area-inset-top)) 14px 10px;flex-wrap:wrap;gap:10px}.sg-tabs{order:5;width:100%;margin-left:0}.sg-tabs button{flex:1;height:38px;padding:0 8px;font-size:14px}.sg-new{height:44px;padding:0 14px 0 10px;font-size:15px}.sg-switch{height:44px;padding:0 12px}.sg-refresh{height:44px;padding:0 11px}.sg-refresh .bt{display:none}.sg-stuck{margin:0 14px 8px}.sg-grid{padding:4px 14px calc(16px + env(safe-area-inset-bottom));grid-template-columns:1fr;gap:12px}.who-mid{gap:24px}.who-title{font-size:30px}.who-kids{gap:18px}.who-kid .avatar-i{border-radius:34px!important;width:108px!important;height:108px!important;font-size:56px!important}.who-add{border-radius:34px;width:108px;height:108px}.who-kid{gap:10px;font-size:17px}.pn-screen{justify-content:flex-start;padding-top:76px}.pn{gap:24px}.pn-left{gap:14px;min-width:0}.pn-left .avatar-i{border-radius:30px!important;width:96px!important;height:96px!important;font-size:50px!important}.pn-title{font-size:28px}.pn-keys{grid-template-columns:repeat(3,84px);gap:10px}.pn-keys button{border-radius:20px;height:66px;font-size:28px}}@media (height<=500px){.st-rows{--lane-l:104px}.st-play-area{height:150px}.st-tray{gap:6px}.who-screen{padding-top:12px;padding-bottom:12px}.who-mid{gap:14px}.who-title{font-size:24px}.who-kid .avatar-i,.who-add{border-radius:26px!important;width:84px!important;height:84px!important;font-size:44px!important}.pn-screen{justify-content:center;padding-top:12px}.pn{flex-wrap:nowrap;gap:40px}.pn-left .avatar-i{border-radius:22px!important;width:72px!important;height:72px!important;font-size:38px!important}.pn-keys button{height:54px}.pn-keys{gap:8px}}@media (width<=600px){.st-top{flex-wrap:wrap;justify-content:space-between;row-gap:8px;overflow-x:visible}.st-top:after{content:"";flex-basis:100%;order:4;height:0}.st-top>.st-sq:first-child{order:1}.st-title{flex:auto;order:2;max-width:none}.st-transport,.st-top>.st-sq:last-child{order:3}.st-top>.st-grp{order:5}.st-seg button{padding:0 6px;font-size:12px}.st-step button{width:30px}.st-step>span{min-width:30px;font-size:14px}.st-btn{justify-content:center;width:42px;padding:0}.st-btn .bt{display:none}.st-top{column-gap:6px}.st-seg{padding:2px}.st-seg button{height:32px;padding:0 5px}.st-seg button.sq{width:30px}.st-step{height:36px}.st-step button{width:26px;height:36px}.st-step>span{min-width:28px}.st-click{width:38px;height:36px}.st-traybar{gap:6px}.st-step.tray>span{min-width:24px}.st-step.tray .bt{display:none}.st-chip{max-width:150px}.pk-sheet{padding:14px 12px}.pk-cards{gap:6px}.pk-card{width:calc(25vw - 14.5px);max-width:84px}}@media (width<=600px),(height<=500px){.editor .top{padding:max(8px, env(safe-area-inset-top)) 10px 8px;flex-wrap:wrap;gap:8px;overflow-x:visible}.editor .top>.spacer,.editor .top .lbl{display:none}.editor .top .seg button{height:34px;padding:0 7px;font-size:12px}.editor .top .btn{width:40px;height:40px}.editor .top .pill{min-height:40px;padding:6px 10px}.editor .top .tag{width:auto;height:40px}.roll{margin:6px 8px 0}.rkeys{width:52px}.rkeys-col .b{margin-right:18px}.rkeys-col>div{padding-right:4px;font-size:9px}.rkeys-col .dk{justify-content:center;padding-left:0;font-size:0}.rkeys-col .dk .ii{width:22px;height:22px}.gest{display:none}.editor{padding-bottom:env(safe-area-inset-bottom)}}@keyframes jj-rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes jj-fade{0%{opacity:0}to{opacity:1}}@keyframes jj-pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.08)}to{transform:scale(1)}}@keyframes jj-slide{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:none}}@keyframes jj-sheet{0%{opacity:0;transform:translateY(28px)scale(.97)}to{opacity:1;transform:none}}@keyframes jj-drop{0%{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%)}}@keyframes jj-heart{0%{transform:scale(1)}35%{transform:scale(1.45)rotate(-8deg)}to{transform:scale(1)}}@keyframes jj-count{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.1)}to{transform:scale(1)}}.sg,.st,.editor,.who-screen,.pn-screen{animation:jj-fade var(--dur-slow) var(--ease-out)}.who-mid,.pn,.sg-grid{animation:jj-rise var(--dur-slow) var(--ease-out)}.who-kids>*{animation:jj-pop .42s var(--ease-spring) backwards}.who-kids>:nth-child(2){animation-delay:60ms}.who-kids>:nth-child(3){animation-delay:.12s}.who-kids>:nth-child(4){animation-delay:.18s}.who-kids>:nth-child(n+5){animation-delay:.24s}.sg-card{animation:jj-rise .38s var(--ease-out) backwards}.sg-card:nth-child(2){animation-delay:40ms}.sg-card:nth-child(3){animation-delay:80ms}.sg-card:nth-child(4){animation-delay:.12s}.sg-card:nth-child(5){animation-delay:.16s}.sg-card:nth-child(n+6){animation-delay:.2s}.st-row{animation:jj-slide .36s var(--ease-spring) backwards}.st-countin{animation:jj-fade var(--dur-base) var(--ease-out)}.st-countin>div{animation:jj-count .3s var(--ease-spring)}.rnote,.dcell{animation:jj-pop .24s var(--ease-spring)}.pk-sheet,.modal .sheet{animation:jj-sheet .34s var(--ease-spring)}.modal{animation:jj-fade var(--dur-base) var(--ease-out)}.pk-card{animation:jj-pop .3s var(--ease-spring) backwards}.update-toast{animation:jj-drop .42s var(--ease-spring)}.toast{animation:jj-drop .3s var(--ease-spring)}.sg-like.on svg{animation:jj-heart .42s var(--ease-spring)}.sg-play,.st-btn,.sg-open,.sg-new,.who-kid,.pk-card .pick,.btn,.pill{transition:transform var(--dur-fast) var(--ease-out)}.sg-play:active,.st-btn:active,.sg-open:active,.sg-new:active,.who-kid:active,.pk-card .pick:active,.btn:active,.pill:active{transform:scale(.94)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important;animation-delay:0s!important}}@media (width<=1000px){.sg-top{height:auto;padding-top:max(12px, env(safe-area-inset-top));flex-wrap:wrap;row-gap:10px;padding-bottom:10px}.sg-tabs{order:5;width:100%;margin-left:0}.sg-tabs button{flex:1}.editor .top{flex-wrap:wrap;row-gap:8px}}@media (width<=600px){.editor .top .seg{max-width:100%;overflow-x:auto}}