:root{color:#f8f7ff;font-synthesis:none;text-rendering:optimizelegibility;--violet:#8e75ff;--violet-bright:#b9aaff;--cyan:#79e6df;--panel:#1c1f38c7;--line:#ffffff1a;background:#101224;font-family:Inter,Noto Sans JP,Noto Sans KR,Yu Gothic UI,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:1180px;min-height:100%;margin:0}body{min-height:100vh;overflow-x:auto}button{font:inherit}.app-shell{background:radial-gradient(circle at 12% 14%,#8063ff33,#0000 27%),radial-gradient(circle at 87% 84%,#4adccd1a,#0000 30%),linear-gradient(135deg,#111326 0%,#17182d 51%,#111425 100%);min-height:100vh;position:relative;overflow:hidden}.app-shell:before{content:"";opacity:.34;pointer-events:none;background-image:linear-gradient(#ffffff05 1px,#0000 1px),linear-gradient(90deg,#ffffff05 1px,#0000 1px);background-size:38px 38px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 82%);mask-image:linear-gradient(#000,#0000 82%)}.ambient{filter:blur(1px);pointer-events:none;border-radius:50%;position:absolute}.ambient--one{border:1px solid #aa96ff2e;width:360px;height:360px;top:-220px;right:10%;box-shadow:inset 0 0 120px #896fff14}.ambient--two{border:1px solid #5be7da1f;width:220px;height:220px;bottom:-130px;left:8%}.topbar{z-index:3;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0c0e1d94;justify-content:space-between;align-items:center;height:86px;padding:0 clamp(32px,5vw,88px);display:flex;position:relative}.brand-lockup,.brand-line{align-items:center;display:flex}.brand-mark{color:#14152b;background:linear-gradient(145deg,#c8bdff,#8067f4);border-radius:14px;place-items:center;width:43px;height:43px;font-size:25px;font-weight:900;display:grid;transform:rotate(-7deg);box-shadow:0 8px 25px #785bed59,inset 0 1px #ffffffa6}.brand-line{gap:10px}.brand-line h1{letter-spacing:.15em;margin:0;font-size:20px;line-height:1}.brand-lockup p{color:#868aa6;letter-spacing:.13em;text-transform:uppercase;margin:7px 0 0;font:500 10px/1 DM Mono,monospace}.version-chip{color:#a898ff;background:#8265ff17;border:1px solid #9078ff4d;border-radius:6px;padding:4px 7px;font:500 9px/1 DM Mono,monospace}.audio-toggle{color:#b9bdd1;cursor:pointer;letter-spacing:.08em;background:#ffffff0e;border:1px solid #ffffff1f;border-radius:12px;justify-content:center;align-items:center;gap:10px;min-width:132px;padding:11px 15px;font:600 11px/1 DM Mono,monospace;transition:all .18s;display:flex;position:relative}.audio-toggle:hover{color:#fff;border-color:#ffffff40;transform:translateY(-1px)}.audio-toggle.is-ready{color:#9ef1e7;background:#46beb414;border-color:#61e6d647}.audio-dot{background:#777c92;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 4px #787c921a}.is-ready .audio-dot{background:#72e8d9;box-shadow:0 0 0 4px #72e8d91a,0 0 12px #72e8d9}.audio-toggle.is-loading .audio-dot{background:#9d87ff;animation:.8s ease-in-out infinite alternate sampleLoadPulse;box-shadow:0 0 0 4px #9d87ff1a,0 0 12px #9d87ff}@keyframes sampleLoadPulse{to{opacity:.38}}.header-actions{align-items:center;gap:9px;display:flex}.language-switcher{background:#ffffff06;border:1px solid #ffffff17;border-radius:10px;flex-direction:column;justify-content:center;height:39px;padding:5px 9px;display:flex}.language-switcher>span{color:#62677e;letter-spacing:.08em;font:600 6px/1 DM Mono,monospace}.language-switcher select{color:#d6d4e2;cursor:pointer;background:0 0;border:0;outline:0;width:92px;margin-top:3px;padding:0;font:600 9px/1.1 Inter,sans-serif}.language-switcher option{color:#202234;background:#f6f5fa}.online-toggle{color:#858aa3;cursor:pointer;letter-spacing:.08em;background:#ffffff09;border:1px solid #ffffff17;border-radius:12px;justify-content:center;align-items:center;gap:8px;min-width:102px;padding:11px 12px;font:600 9px/1 DM Mono,monospace;transition:all .18s;display:flex}.online-toggle:hover{color:#d7d3ef;border-color:#71e0d642;transform:translateY(-1px)}.online-toggle.is-connected{color:#9ef1e7;background:#46beb414;border-color:#61e6d647}.online-dot{background:#5b5f76;border-radius:50%;width:6px;height:6px}.is-connected .online-dot{background:#72e8d9;box-shadow:0 0 9px #72e8d9}.key-settings-toggle{color:#858aa3;cursor:pointer;letter-spacing:.08em;background:#ffffff09;border:1px solid #ffffff17;border-radius:12px;justify-content:center;align-items:center;gap:8px;min-width:134px;padding:11px 12px;font:600 9px/1 DM Mono,monospace;transition:all .18s;display:flex}.key-settings-toggle:hover{color:#d7d3ef;border-color:#71e0d642;transform:translateY(-1px)}.key-settings-toggle>span:first-child{color:#73dcd3;font-size:13px}.fullscreen-toggle{color:#858aa3;cursor:pointer;letter-spacing:.08em;background:#ffffff09;border:1px solid #ffffff17;border-radius:12px;justify-content:center;align-items:center;gap:8px;min-width:135px;padding:11px 13px;font:600 9px/1 DM Mono,monospace;transition:all .18s;display:flex}.fullscreen-toggle:hover:not(:disabled){color:#d7d3ef;border-color:#9c89ff47;transform:translateY(-1px)}.fullscreen-toggle[aria-pressed=true]{color:#bfb2ff;background:#8168ee14;border-color:#9c89ff4d}.fullscreen-toggle:disabled{opacity:.38;cursor:not-allowed}.fullscreen-icon{color:#9b88fb;font-size:13px}.audio-error{color:#ffcaca;background:#4f2235;border-radius:7px;margin:0;padding:8px 12px;font-size:11px;position:absolute;top:66px;right:clamp(32px,5vw,88px)}main{z-index:1;width:min(1440px,100% - 64px);margin:0 auto;padding:32px 0 21px;position:relative}.stage-heading{justify-content:space-between;align-items:flex-end;gap:16px;min-height:78px;margin:0 0 19px 116px;display:flex}.stage-intro{align-items:flex-end;gap:22px;min-width:0;display:flex}.eyebrow{color:#8e82cb;letter-spacing:.19em;align-items:center;gap:10px;margin:0 0 8px;font:500 9px/1 DM Mono,monospace;display:flex}.eyebrow span{background:#806cf2;width:24px;height:1px}.instrument-selector{z-index:12;flex:none;position:relative}.instrument-selector-label{color:#747991;letter-spacing:.16em;text-transform:uppercase;margin:0 0 6px;font:600 7px/1 DM Mono,monospace}.instrument-trigger{color:#d9d7e7;cursor:pointer;text-align:left;background:#ffffff09;border:1px solid #ffffff17;border-radius:13px;grid-template-columns:39px minmax(0,1fr) auto 16px;align-items:center;gap:9px;width:230px;height:55px;padding:7px 10px;transition:all .15s;display:grid}.instrument-monogram{color:#d7d0ff;letter-spacing:.06em;background:linear-gradient(145deg,#836be84d,#5342a438);border-radius:11px;place-items:center;width:39px;height:39px;font:700 10px/1 DM Mono,monospace;display:grid}.instrument-trigger-copy{flex-direction:column;gap:5px;min-width:0;display:flex}.instrument-trigger-copy strong{text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.instrument-trigger-copy small{color:#70758c;letter-spacing:.08em;font:600 7px/1 DM Mono,monospace}.instrument-preview-badge{color:#8edbd4;white-space:nowrap;background:#39908914;border:1px solid #63ddd32e;border-radius:5px;padding:4px 5px;font:600 6px/1 DM Mono,monospace}.instrument-chevron{color:#767b93;font-size:15px;transform:translateY(-2px)}.instrument-popover{z-index:30;color:#f4f2ff;background:#191c2ffb;border:1px solid #ffffff1f;border-radius:17px;width:min(570px,100vw - 36px);padding:15px;animation:.14s ease-out instrumentPopoverIn;position:absolute;top:calc(100% + 9px);left:0;box-shadow:0 22px 60px #01020c6b}@keyframes instrumentPopoverIn{0%{opacity:0;transform:translateY(-5px)}}.instrument-popover-heading{justify-content:space-between;align-items:baseline;gap:14px;padding:0 2px 11px;display:flex}.instrument-popover-heading span{color:#6e738b;font-size:8px}.instrument-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;display:grid}.instrument-grid button{color:#9ca0b5;cursor:pointer;text-align:left;background:#ffffff06;border:1px solid #ffffff14;border-radius:10px;grid-template-columns:35px minmax(0,1fr) 16px;align-items:center;gap:8px;min-width:0;height:59px;padding:7px;transition:all .13s;display:grid}.instrument-grid button:hover{color:#e6e3f5;border-color:#9f8eff47;transform:translateY(-1px)}.instrument-grid button.is-selected{color:#e2ddff;background:#7e67e91c;border-color:#9784ff61}.instrument-grid .instrument-monogram{border-radius:9px;width:35px;height:35px;font-size:9px}.instrument-grid button>span:nth-child(2){flex-direction:column;gap:5px;min-width:0;display:flex}.instrument-grid button strong{text-overflow:ellipsis;white-space:nowrap;font-size:9px;overflow:hidden}.instrument-grid button small{color:#686d84;font:600 6px/1 DM Mono,monospace}.instrument-check{color:#8fe4dc;text-align:center;font-size:11px}.instrument-preview-note{color:#666b82;margin:11px 2px 0;font-size:8px;line-height:1.5}.recorder{color:#747991;background:#ffffff08;border:1px solid #ffffff14;border-radius:14px;width:292px;min-width:292px;min-height:67px;padding:8px 10px 7px}.recorder-readout{grid-template-columns:1fr auto auto;align-items:center;gap:8px;display:grid}.recorder-state{color:#666b83;letter-spacing:.1em;align-items:center;gap:6px;font:500 7px/1 DM Mono,monospace;display:flex}.recorder-state>span{background:#555a70;border-radius:50%;width:6px;height:6px}.is-recording .recorder-state>span{background:#f26f8e;animation:.8s ease-in-out infinite alternate recordPulse;box-shadow:0 0 9px #f26f8ebf}.is-playing .recorder-state>span{background:#72e8d9;box-shadow:0 0 9px #72e8d9a6}.recorder-state strong{color:#9296ad;font-size:7px}.is-recording .recorder-state strong{color:#ff9ab2}.is-playing .recorder-state strong{color:#9deee4}.recorder output{color:#c0b8ec;font:600 11px/1 DM Mono,monospace}.recorder small{color:#4f5369;font:500 6px/1 DM Mono,monospace}.recorder-progress{background:#ffffff0f;border-radius:2px;height:2px;margin:6px 0;overflow:hidden}.recorder-progress span{background:linear-gradient(90deg,#715be0,#79e6df);height:100%;transition:width 50ms linear;display:block}.is-recording .recorder-progress span{background:linear-gradient(90deg,#0000,#ef6b8b,#0000);animation:1.2s linear infinite recordScan;width:100%!important}.recorder-actions{grid-template-columns:repeat(4,1fr);gap:5px;display:grid}.recorder-actions button{color:#747991;cursor:pointer;letter-spacing:.08em;background:#ffffff06;border:1px solid #ffffff13;border-radius:5px;height:23px;font:600 6px/1 DM Mono,monospace}.recorder-actions button:disabled{opacity:.32;cursor:not-allowed}.recorder-actions .record-action{color:#d98b9e;justify-content:center;align-items:center;gap:4px;display:flex}.record-action span{background:#df607f;border-radius:50%;width:5px;height:5px}@keyframes recordPulse{to{opacity:.35}}@keyframes recordScan{0%{transform:translate(-100%)}to{transform:translate(100%)}}.performance-controls{align-items:stretch;gap:10px;display:flex}.volume-control{color:#777c98;letter-spacing:.14em;background:#ffffff09;border:1px solid #ffffff14;border-radius:14px;flex-direction:column;justify-content:center;gap:4px;width:276px;min-height:62px;padding:7px 11px;font:500 8px/1 DM Mono,monospace;display:flex}.volume-channel{grid-template-columns:48px minmax(92px,1fr) 28px;align-items:center;gap:7px;display:grid}.volume-control output{color:#b3a8ed;text-align:right;font-size:10px}.volume-control.is-muted output{color:#7f849c}.mute-control{color:#777c95;cursor:pointer;letter-spacing:.06em;background:#ffffff09;border:1px solid #ffffff17;border-radius:5px;justify-content:center;align-items:center;gap:4px;min-width:57px;height:21px;padding:0 6px;font:600 7px/1 DM Mono,monospace;display:flex}.volume-control input{--volume:50%;appearance:none;cursor:pointer;background:0 0;width:100%;height:14px;margin:0}.volume-control input::-webkit-slider-runnable-track{background:linear-gradient(90deg, #806cf2 var(--volume), #ffffff1a var(--volume));border-radius:4px;height:4px}.volume-control input::-webkit-slider-thumb{appearance:none;background:#b8a9ff;border:2px solid #17182d;border-radius:50%;width:13px;height:13px;margin-top:-4.5px;box-shadow:0 0 12px #9f8bff99}.volume-control.is-muted input::-webkit-slider-runnable-track{filter:saturate(.25);opacity:.55}.volume-control input:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:4px}.sustain-control{color:#8d91a9;cursor:pointer;background:#ffffff09;border:1px solid #ffffff17;border-radius:14px;grid-template-columns:1fr auto;align-items:center;gap:9px;min-width:178px;padding:9px 11px;transition:all .16s;display:grid}.sustain-control:disabled{cursor:not-allowed;opacity:.58}.sustain-control:disabled:hover{border-color:inherit;color:inherit}.sustain-copy{text-align:left;flex-direction:column;gap:5px;display:flex}.sustain-copy strong{letter-spacing:.12em;font:600 9px/1 DM Mono,monospace}.sustain-copy small{color:#61657c;letter-spacing:.08em;font:500 7px/1 DM Mono,monospace}.sustain-control kbd{color:#8a8ea5;background:#00000021;border:1px solid #ffffff1a;border-radius:5px;padding:5px 6px;font:500 7px/1 DM Mono,monospace}.keyboard-shell{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(145deg,#242744d9,#14162aeb);border:1px solid #ffffff17;border-radius:27px;padding:23px 24px 20px;position:relative;overflow:hidden;box-shadow:0 25px 80px #02030f70,inset 0 1px #ffffff0b}.keyboard-shell:before{content:"";pointer-events:none;background:linear-gradient(100deg,#8d70ff0e,#0000 30% 70%,#51e0d409);position:absolute;inset:0}.keyboard-glow{filter:blur(60px);pointer-events:none;background:#8062ff14;border-radius:50%;width:460px;height:170px;position:absolute;top:22%;left:24%}.keyboard-row{grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px;min-height:137px;display:grid;position:relative}.keyboard-row+.keyboard-row{border-top:1px solid #ffffff0e}.row-label{color:#686d87;flex-direction:column;justify-content:center;align-self:stretch;padding-left:14px;display:flex;position:relative}.row-label strong{color:#abb0c9;letter-spacing:.18em;font:600 10px/1 DM Mono,monospace}.row-label>span:last-child{letter-spacing:.09em;margin-top:8px;font:400 8px/1 DM Mono,monospace}.row-indicator{background:linear-gradient(#9e8aff,#6a54e0);border-radius:3px;width:3px;height:27px;position:absolute;left:0;box-shadow:0 0 15px #8970ff80}.keyboard-row--middle .row-indicator{background:linear-gradient(#77e4db,#41a79f);box-shadow:0 0 15px #65ddd366}.keyboard-row--low .row-indicator{background:linear-gradient(#f0b477,#b97442);box-shadow:0 0 15px #e49c5959}.key-field{--key-count:7;--key-span:118px;width:min(100%, calc(var(--key-count) * var(--key-span)));height:117px;margin-inline:auto;position:relative}.keyboard-shell--15-key-two-row .key-field{--key-span:132px}.keyboard-shell--15-key-three-row .key-field{--key-span:165px}.natural-keys{grid-template-columns:repeat(var(--key-count), minmax(0, 1fr));display:grid;position:absolute;inset:11px 0 0}.accidental-keys{pointer-events:none;position:absolute;inset:0}.accidental-slot{--key-order:1.5;z-index:2;left:calc((var(--key-order) - .5) / var(--key-count) * 100%);width:calc(100% / var(--key-count));pointer-events:none;justify-content:center;display:flex;position:absolute;transform:translate(-50%)}.piano-key{touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;transition:transform 90ms,box-shadow .12s,border-color .12s,filter .12s;position:relative}.piano-key:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.piano-key--natural{text-align:center;color:#292b43;background:radial-gradient(circle at 32% 24%,#fff 0%,#fafaf7 48%,#e6e7e3 100%);border:1px solid #ffffffc7;border-radius:30px;flex-direction:column;justify-content:center;justify-self:center;align-items:center;width:90px;min-width:0;height:90px;padding:19px 9px 12px;display:flex;box-shadow:0 7px #b9bbc8,0 12px 22px #03041047,inset 0 2px 2px #fffffff2,inset 0 -2px 5px #4a4d5c14}.piano-key--natural:hover{filter:brightness(1.03);transform:translateY(-2px);box-shadow:0 9px #b9bbc8,0 14px 24px #0304104d,inset 0 2px 2px #fffffff2,inset 0 -2px 5px #4a4d5c14}.piano-key--natural.is-pressed{color:#fff;background:linear-gradient(145deg,#9a82ff,#6651df);border-color:#a58fff;transform:translateY(6px)scale(.98);box-shadow:0 2px #4533ad,0 5px 22px #7a5ef07a,inset 0 1px #ffffff47}.degree{letter-spacing:-.06em;font-size:28px;font-weight:800;line-height:1}.solfege{margin-top:5px;font-size:11px;font-weight:700;line-height:1}.note-name{color:#9295a3;letter-spacing:.04em;font:600 7px/1 DM Mono,monospace;position:absolute;top:9px;left:0;right:0}.is-pressed .note-name{color:#ffffffab}.keycap-label{z-index:0;color:#fff;background:#4c4e56b8;border:0;border-radius:0 0 7px 7px;place-items:center;min-width:31px;height:24px;padding-top:5px;font:700 11px/1 DM Mono,monospace;display:grid;position:absolute;bottom:-19px;left:50%;transform:translate(-50%)}.is-pressed .keycap-label{color:#fff;background:#00000021;border-color:#ffffff2e}.piano-key--accidental{pointer-events:auto;color:#b9b9cc;background:radial-gradient(circle at 34% 26%,#555a6f 0%,#363a4e 57%,#232635 100%);border:1px solid #b7b4d53d;border-radius:50%;place-items:center;width:62px;height:62px;padding:0;display:grid;box-shadow:0 6px #171927,0 10px 18px #02030d61,inset 0 2px 3px #ffffff2b,inset 0 -3px 5px #0003}.piano-key--accidental:hover{filter:brightness(1.12);border-color:#cac4ff66;transform:translateY(-2px)}.piano-key--accidental.is-pressed{color:#fff;background:linear-gradient(150deg,#54c7be,#338a87);border-color:#7cede0;transform:translateY(5px)scale(.96);box-shadow:0 1px #1d5553,0 4px 18px #4edacf59,inset 0 1px #ffffff38}.sharp-symbol{color:#aeb1bf;font-size:10px;line-height:1;transform:translateY(-1px)}.is-pressed .sharp-symbol{color:#dffefa}.keycap-label--dark{color:#fff;background:#45474eb8;min-width:30px;height:23px;font-size:10px;bottom:-18px}.settings-backdrop{z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#050612b8;justify-content:flex-end;padding:16px;animation:.16s ease-out backdropIn;display:flex;position:fixed;inset:0}.online-backdrop{z-index:22;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0506127a;place-items:start end;padding:83px clamp(32px,5vw,88px);animation:.16s ease-out backdropIn;display:grid;position:fixed;inset:0}.online-panel{color:#f4f2ff;background:linear-gradient(155deg,#232641fa,#121427fc);border:1px solid #ffffff1f;border-radius:18px;width:330px;padding:20px;animation:.18s ease-out panelIn;box-shadow:-20px 20px 60px #01020c7a,inset 0 1px #ffffff0e}.online-header{justify-content:space-between;align-items:flex-start;display:flex}.online-header p{color:#7265b4;letter-spacing:.15em;margin:0 0 6px;font:500 7px/1 DM Mono,monospace}.online-header h2{letter-spacing:-.03em;margin:0;font-size:20px}.online-header>button{color:#8a8ea6;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff1a;border-radius:9px;width:31px;height:31px;font-size:17px}.online-panel form{margin-top:19px}.online-panel label{color:#747991;letter-spacing:.12em;margin-top:11px;font:600 7px/1 DM Mono,monospace;display:block}.online-panel input{color:#f3f0ff;letter-spacing:.04em;background:#ffffff0a;border:1px solid #ffffff1a;border-radius:9px;outline:none;width:100%;height:39px;margin-top:6px;padding:0 11px;font:600 11px/1 Inter,sans-serif}.online-panel input:focus{border-color:#79e6df6b;box-shadow:0 0 0 3px #5bd6cd12}.online-error{color:#ffb7c8;margin:10px 0 0;font-size:9px;line-height:1.5}.online-actions{grid-template-columns:1fr 1fr;gap:8px;margin-top:15px;display:grid}.online-actions button,.online-leave{color:#a5a9be;cursor:pointer;letter-spacing:.1em;background:#ffffff0a;border:1px solid #ffffff1a;border-radius:9px;height:37px;font:600 8px/1 DM Mono,monospace}.online-actions button:disabled{opacity:.5;cursor:wait}.online-panel form>small{color:#555a70;margin-top:11px;font-size:8px;display:block}.online-connected{margin-top:18px}.room-code{background:#47b7ae0f;border:1px solid #78e6da2b;border-radius:11px;justify-content:space-between;align-items:center;padding:15px;display:flex}.room-code span{color:#6c7189;letter-spacing:.13em;font:600 7px/1 DM Mono,monospace}.room-code strong{color:#baf8f0;letter-spacing:.12em;font:700 18px/1 DM Mono,monospace}.online-live{color:#78a6a3;letter-spacing:.1em;align-items:center;gap:7px;margin:13px 0 9px;font:600 7px/1 DM Mono,monospace;display:flex}.online-live span{background:#72e8d9;border-radius:50%;width:6px;height:6px;box-shadow:0 0 8px #72e8d9}.online-connected ul{border-top:1px solid #ffffff0f;border-bottom:1px solid #ffffff0f;margin:0;padding:8px 0;list-style:none}.online-connected li{color:#9ca0b5;padding:5px 2px;font:500 9px/1 DM Mono,monospace}.online-connected li:before{content:"•";color:#8170df;margin-right:8px}.online-leave{color:#d58a9b;width:100%;margin-top:13px}.keyboard-settings{color:#f4f2ff;background:linear-gradient(155deg,#232641fa,#121427fc);border:1px solid #ffffff1f;border-radius:24px;flex-direction:column;width:min(680px,100vw - 32px);height:calc(100vh - 32px);min-height:620px;padding:25px;animation:.2s ease-out panelIn;display:flex;overflow:hidden;box-shadow:-30px 20px 90px #01020c8c,inset 0 1px #ffffff0e}@keyframes backdropIn{0%{opacity:0}}@keyframes panelIn{0%{opacity:0;transform:translate(24px)}}.settings-header{justify-content:space-between;align-items:flex-start;gap:24px;display:flex}.settings-header p{color:#7265b4;letter-spacing:.17em;margin:0 0 8px;font:500 8px/1 DM Mono,monospace}.settings-header h2{letter-spacing:-.03em;margin:0;font-size:25px}.settings-close-icon{color:#8a8ea6;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff1a;border-radius:10px;width:36px;height:36px;font-size:19px}.settings-close-icon:hover{color:#fff;border-color:#ffffff3d}.settings-description{color:#898da5;margin:14px 0 19px;font-size:11px;line-height:1.7}.settings-section-label{color:#696e88;letter-spacing:.14em;justify-content:space-between;align-items:center;min-height:20px;font:600 8px/1 DM Mono,monospace;display:flex}.settings-section-label strong{color:#ac9dff;background:#7e63eb14;border:1px solid #8d76ff3b;border-radius:5px;padding:4px 7px;font-size:7px}.preset-switch{grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;display:grid}.preset-switch button,.layout-switch button{color:#888ca4;cursor:pointer;letter-spacing:.08em;background:#ffffff08;border:1px solid #ffffff17;border-radius:10px;height:42px;font:600 10px/1 DM Mono,monospace}.preset-switch button.is-selected,.layout-switch button.is-selected{color:#d5ceff;background:#7e67e91c;border-color:#9784ff59;box-shadow:inset 0 0 22px #785fe612}.layout-switch button:disabled{opacity:.34;cursor:not-allowed}.layout-switch{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px;display:grid}.layout-restriction{color:#62677d;margin:7px 2px 0;font-size:8px}.semitone-setting{background:#396c6f0f;border:1px solid #63ddd321;border-radius:11px;justify-content:space-between;align-items:center;gap:14px;min-height:52px;margin-top:10px;padding:8px 10px 8px 13px;display:flex}.semitone-setting>div{flex-direction:column;gap:4px;display:flex}.semitone-setting strong{color:#b7bbc9;font-size:10px}.semitone-setting div span{color:#666b82;font-size:8px}.semitone-setting button{color:#777c91;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff1a;border-radius:17px;justify-content:center;align-items:center;gap:8px;min-width:72px;height:32px;padding:0 10px;font:700 9px/1 DM Mono,monospace;display:flex}.semitone-setting button>span{background:#666b7f;border-radius:50%;width:9px;height:9px;transition:all .14s}.semitone-setting button.is-active>span{background:#70ded4;box-shadow:0 0 9px #70ded48c}.preset-section{margin-top:12px}.mapping-section{flex-direction:column;flex:1;min-height:0;margin-top:18px;display:flex}.mapping-scroll{scrollbar-width:thin;scrollbar-color:#494660 transparent;background:#03051124;border:1px solid #ffffff0e;border-radius:14px;min-height:0;margin-top:5px;padding:12px 12px 5px;overflow-y:auto}.mapping-row+.mapping-row{border-top:1px solid #ffffff0e;margin-top:16px;padding-top:15px}.mapping-row>strong{color:#777c96;letter-spacing:.16em;margin:0 0 9px 2px;font:600 8px/1 DM Mono,monospace;display:block}.mapping-grid{grid-template-columns:repeat(7,minmax(68px,1fr));gap:7px;display:grid}.mapping-key{text-align:left;color:#9599af;cursor:pointer;background:#ffffff09;border:1px solid #ffffff17;border-radius:10px;grid-template:auto auto/1fr auto;min-width:0;height:68px;padding:7px 6px;transition:all .12s;display:grid}.mapping-key:hover{color:#fff;border-color:#9f8eff4d;transform:translateY(-1px)}.mapping-key>span{color:#666b83;font:500 8px/1 DM Mono,monospace}.mapping-key kbd{color:#ddd9f1;background:#ffffff0e;border:1px solid #ffffff1c;border-radius:6px;justify-self:end;place-items:center;min-width:25px;height:23px;font:600 10px/1 DM Mono,monospace;display:grid}.mapping-key small{color:#52566d;text-overflow:ellipsis;white-space:nowrap;grid-column:1/-1;align-self:end;font:500 6px/1 DM Mono,monospace;overflow:hidden}.settings-message{color:#6e738c;background:#ffffff06;border-radius:9px;min-height:35px;margin-top:10px;padding:10px 12px;font-size:9px}.settings-message.is-error{color:#ffc2cf;background:#c0365814;border:1px solid #eb668726}.settings-footer{justify-content:space-between;align-items:center;gap:12px;padding-top:11px;display:flex}.settings-reset,.settings-done{cursor:pointer;letter-spacing:.09em;border-radius:10px;height:39px;padding:0 17px;font:600 9px/1 DM Mono,monospace}.settings-reset{color:#767b93;background:0 0;border:1px solid #ffffff14}.settings-done{color:#fff;background:linear-gradient(145deg,#8570ea,#6551ce);border:1px solid #9e8cff59;min-width:112px;box-shadow:0 7px 18px #5440b733}.settings-done:hover{filter:brightness(1.08);transform:translateY(-1px)}.app-shell:before{opacity:.16}.ambient{display:none}.topbar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0e101beb;height:72px;padding-inline:clamp(24px,4vw,62px)}.brand-mark{width:38px;height:38px;box-shadow:none;border-radius:11px;font-size:21px}.brand-lockup{gap:11px}.brand-lockup p{letter-spacing:.06em;text-transform:none;margin-top:5px}.brand-line h1{font-size:18px}.fullscreen-toggle{width:39px;min-width:39px;padding-inline:0}.fullscreen-icon{font-size:15px}.header-actions{gap:7px}.online-toggle,.key-settings-toggle,.audio-toggle{text-transform:none;letter-spacing:.03em;border-radius:10px;min-height:39px}.audio-toggle{min-width:142px}main{width:min(1440px,100% - 36px);padding:18px 0 14px}.stage-heading{align-items:center;min-height:62px;margin:0 0 12px}.stage-actions{align-items:stretch;gap:9px;display:flex}.performance-controls{gap:9px}.volume-control{background:#ffffff06;border-radius:11px;width:276px;min-height:62px}.sustain-control{background:#ffffff06;border-radius:11px;min-width:154px}.tools-menu{position:relative}.tools-menu>summary{color:#7e8298;cursor:pointer;text-align:center;background:#ffffff06;border:1px solid #ffffff14;border-radius:11px;place-items:center;width:104px;height:55px;font:600 8px/1.3 Inter,sans-serif;list-style:none;display:grid}.tools-menu>summary::-webkit-details-marker{display:none}.tools-menu[open]>summary{color:#c9c2ef;border-color:#9380e847}.tools-popover{z-index:10;background:#1a1d2e;border:1px solid #ffffff1a;border-radius:14px;padding:8px;position:absolute;top:63px;right:0;box-shadow:0 18px 44px #00000061}.sound-gate{background:#715bcf12;border:1px solid #7e6bdd38;border-radius:12px;justify-content:space-between;align-items:center;gap:18px;min-height:50px;margin-bottom:11px;padding:8px 10px 8px 15px;display:flex}.sound-gate>div{flex-direction:column;gap:4px;display:flex}.sound-gate strong{color:#ded9f7;font-size:11px}.sound-gate span{color:#777b91;font-size:9px}.sound-gate button{color:#fff;cursor:pointer;background:#6f5bc9;border:1px solid #a797f552;border-radius:8px;min-width:150px;height:34px;padding:0 14px;font-size:10px;font-weight:700}.keyboard-shell{-webkit-backdrop-filter:none;backdrop-filter:none;background:#1a1d2d;border-radius:18px;padding:15px 18px 13px;box-shadow:0 16px 48px #02030f52}.keyboard-row{min-height:123px}.online-backdrop{padding-top:76px}button:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}@media (height<=820px){.topbar{height:68px}main{padding-top:14px}.stage-heading{min-height:58px;margin-bottom:9px}.keyboard-shell{padding-top:14px;padding-bottom:12px}.keyboard-row{min-height:116px}.key-field{transform-origin:50%;height:108px;width:min(106.3%, calc(var(--key-count) * var(--key-span)));transform:scale(.94)}}@media (width<=1366px){main{width:calc(100% - 36px)}.stage-heading{margin-left:0}.volume-control{width:240px}.sustain-control{min-width:165px}.recorder{width:274px;min-width:274px}.keyboard-shell{padding-left:18px;padding-right:18px}.keyboard-row{grid-template-columns:82px minmax(0,1fr);gap:9px}.piano-key--natural{width:86px}.key-settings-toggle{min-width:102px}.fullscreen-toggle{min-width:39px}.online-toggle{min-width:94px}.language-switcher select{width:82px}.audio-toggle{min-width:132px}}@media (width<=640px){.instrument-popover{width:calc(100vw - 36px)}.instrument-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}:root{color:#20243a;--violet:#7864df;--violet-bright:#6652d2;--cyan:#239f96;--panel:#fffffff0;--line:#e4e7f0;background:#f7f8fc}.app-shell:before{opacity:.45;background-image:linear-gradient(#4b527509 1px,#0000 1px),linear-gradient(90deg,#4b527509 1px,#0000 1px)}.topbar{background:#ffffffe0;border-color:#e5e7f0;box-shadow:0 7px 26px #3d44690e}.brand-mark{color:#fff;background:linear-gradient(145deg,#9f8df4,#745fdc);box-shadow:0 7px 18px #6753cc2e}.brand-line h1{color:#20243a}.brand-lockup p{color:#72778e}.instrument-selector-label{color:#74798f}.instrument-trigger{color:#292d43;background:#ffffffe6;border-color:#dfe2ec;box-shadow:0 5px 16px #393f600f}.instrument-trigger-copy small,.instrument-chevron{color:#7d8297}.instrument-popover{color:#24283e;background:#fff;border-color:#aeb5c2;box-shadow:0 8px 22px #22273a24}.instrument-popover-heading span,.instrument-preview-note{color:#7d8296}.instrument-grid button{color:#34394f;background:#fff;border-color:#cfd3dc}.instrument-grid button:hover{color:#24283e;background:#fff;border-color:#715bd0}.instrument-grid button.is-selected{color:#24283e;background:#fff;border:2px solid #715bd0}.instrument-grid button small{color:#898ea1}.instrument-check{color:#288f87}.language-switcher,.online-toggle,.key-settings-toggle,.fullscreen-toggle,.audio-toggle{color:#62677d;background:#fff;border-color:#dfe2ec;box-shadow:0 3px 10px #373d5c0b}.language-switcher>span{color:#9296a8}.language-switcher select{color:#30354d}.online-toggle:hover,.key-settings-toggle:hover,.fullscreen-toggle:hover:not(:disabled),.audio-toggle:hover{color:#272c44;background:#fbfbfe;border-color:#bfc4d5}.online-dot,.audio-dot{background:#b9becd;box-shadow:0 0 0 4px #99a0b51f}.is-connected .online-dot,.is-ready .audio-dot{background:#35b5aa;box-shadow:0 0 0 4px #35b5aa1c,0 0 10px #35b5aa59}.audio-toggle.is-loading{color:#6956c8;background:#f4f1ff;border-color:#d9d1fb}.audio-toggle.is-loading .audio-dot{background:#846fe2;box-shadow:0 0 0 4px #846fe21a,0 0 10px #846fe247}.key-settings-toggle>span:first-child,.fullscreen-icon{color:#6f5bd2}.audio-error{color:#a6304c;background:#fff0f3;border:1px solid #f4ccd6}.volume-control,.sustain-control,.tools-menu>summary{color:#666c83;background:#ffffffe6;border-color:#dfe2ec;box-shadow:0 5px 16px #373d5c0d}.volume-control output{color:#6a56cb}.mute-control{color:#656b82;background:#f8f9fc;border-color:#dde0ea}.mute-control:hover{color:#272c44;border-color:#bdc2d2}.mute-control[aria-pressed=true]{color:#ae3955;background:#fff1f4;border-color:#efc5cf}.volume-control input::-webkit-slider-runnable-track{background:linear-gradient(90deg, #806cf2 var(--volume), #e1e3ec var(--volume))}.volume-control input::-webkit-slider-thumb{background:#806cf2;border-color:#fff;box-shadow:0 2px 9px #6751d352}.sustain-control:hover{color:#2f344c;border-color:#bdc2d2}.sustain-copy small{color:#8a8fa3}.sustain-control kbd{color:#656b82;background:#f6f7fa;border-color:#dde0ea}.tools-menu[open]>summary{color:#5f4bc4;background:#f5f2ff;border-color:#cbc2f3}.tools-popover{background:#fff;border-color:#dfe2ec;box-shadow:0 18px 44px #32385829}.recorder{color:#72778d;background:#fbfbfd;border-color:#dfe2ec}.recorder.is-recording{background:#fff4f6;border-color:#efc1cc}.recorder.is-playing{background:#f0fbf9;border-color:#b6e3dd}.recorder-state{color:#7a8095}.recorder-state>span{background:#b4b9ca}.recorder-state strong{color:#5c6278}.recorder output{color:#6452bf}.recorder small{color:#8f93a5}.recorder-progress{background:#e8eaf1}.recorder-actions button{color:#676d83;background:#fff;border-color:#dfe2ec}.recorder-actions button:hover:not(:disabled){color:#262b43;border-color:#bfc4d4}.sound-gate{background:#f6f3ff;border-color:#d8d1f7;box-shadow:0 5px 18px #5948ae0f}.sound-gate strong{color:#3f356e}.sound-gate span{color:#767a90}.sound-gate button{color:#fff;background:linear-gradient(145deg,#806ce0,#6854c5);border-color:#6f5bc9;box-shadow:0 5px 13px #5b48b833}.keyboard-shell{background:#ffffffd6;border-color:#e0e3ed;box-shadow:0 18px 52px #393f601a,inset 0 1px #fff}.keyboard-row+.keyboard-row{border-color:#e8eaf1}.row-label{color:#8a8fa3}.row-label strong{color:#555b73}.row-indicator{box-shadow:0 0 12px #745be13b}.piano-key--natural{color:#292d43;background:radial-gradient(circle at 32% 24%,#fff 0%,#fbfbf8 48%,#ebece8 100%);border-color:#e1e3eb;box-shadow:0 7px #d7d9d6,0 12px 21px #34395324,inset 0 2px 2px #fff,inset 0 -2px 5px #4a4d5c12}.piano-key--natural:hover{box-shadow:0 9px #d5d7d4,0 14px 24px #3439532b,inset 0 2px 2px #fff,inset 0 -2px 5px #4a4d5c12}.piano-key--accidental{color:#eef0f7;background:radial-gradient(circle at 34% 26%,#555a6f 0%,#363a4e 57%,#232635 100%);border-color:#44495f;box-shadow:0 6px #171a29,0 9px 15px #272b3e47,inset 0 2px 3px #ffffff29,inset 0 -3px 5px #0003}.sharp-symbol{color:#afb3c3}.keycap-label--dark{color:#f5f5f7;background:#45474eb8}.settings-backdrop{-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);background:#44486042}.online-backdrop{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#44486033}.online-panel,.keyboard-settings{color:#24283e;background:#fffffffb;border-color:#dfe2ec;box-shadow:-20px 20px 60px #2e34522e,inset 0 1px #fff}.online-header p,.settings-header p{color:#6d58c9}.online-header>button,.settings-close-icon{color:#70758a;background:#f8f9fc;border-color:#dde0e9}.online-header>button:hover,.settings-close-icon:hover{color:#24283e;background:#f2f3f7;border-color:#bdc2d2}.online-panel label{color:#646a80}.online-panel input{color:#252a41;background:#f8f9fc;border-color:#dfe2ec}.online-panel input:focus{background:#fff;border-color:#78cfc7;box-shadow:0 0 0 3px #3caea41a}.online-error{color:#a6304c}.online-actions button,.online-leave{color:#60667d;background:#f8f9fc;border-color:#dfe2ec}.online-actions .online-join{color:#fff;background:linear-gradient(145deg,#4db8ae,#2f9189);border-color:#379d95}.online-panel form>small{color:#858a9e}.room-code{background:#effaf8;border-color:#bde4df}.room-code>div{flex-direction:column;gap:6px;display:flex}.room-code button{color:#177b73;cursor:pointer;background:#fff;border:1px solid #a9dcd6;border-radius:8px;height:32px;padding:0 10px;font:700 7px/1 Inter,sans-serif}.room-code button:hover{background:#f8fffe;border-color:#64bcb3}.online-live{color:#278b83}.online-connected ul{border-color:#e6e8ef}.online-connected li{color:#555b71}.online-connected li:before{color:#725ed4}.online-leave{color:#a9435a}.settings-description{color:#686e84}.settings-section-label{color:#646a80}.preset-switch button,.layout-switch button{color:#62687e;background:#f8f9fc;border-color:#dfe2ec}.preset-switch button:hover,.layout-switch button:hover{color:#24283e;border-color:#bfc4d4}.preset-switch button.is-selected,.layout-switch button.is-selected{color:#5f4bc4;box-shadow:none;background:#f3f0fe;border-color:#cec5f3}.layout-restriction{color:#858a9e}.semitone-setting strong{color:#4f566c}.semitone-setting div span{color:#858a9e}.semitone-setting button{color:#71768a;background:#fff;border-color:#dce2e8}.semitone-setting button>span{background:#b4b9c6}.semitone-setting button.is-active{color:#197d75;background:#effaf8;border-color:#a9dcd6}.mapping-scroll{scrollbar-color:#bec2d1 transparent;background:#f7f8fb;border-color:#e3e5ed}.mapping-row>strong{color:#666c82}.mapping-key{color:#4f556c;background:#fff;border-color:#dde0e9}.mapping-key:hover{color:#24283e;border-color:#bfb5ef}.mapping-key.is-accidental{background:#f2faf9;border-color:#cfe8e5}.mapping-key.is-listening{color:#176f69;background:#ebf9f7;border-color:#60c1b8;box-shadow:0 0 0 2px #43b4aa14}.mapping-key>span{color:#73788d}.mapping-key small{color:#9296a8}.is-listening small{color:#248b82}.settings-message{color:#686e83;background:#f6f7fa}.settings-reset{color:#62687e;background:#fff;border-color:#dfe2ec}.settings-reset:hover{color:#24283e;border-color:#bfc4d4}.settings-done{color:#fff;background:linear-gradient(145deg,#846fe1,#6955c8);border-color:#745fd5;box-shadow:0 7px 18px #5440b729}.stage-intro{align-items:center}.language-switcher{height:44px;padding-inline:11px}.language-switcher>span{font-size:8px}.language-switcher select{width:102px;font-size:11px}.online-toggle,.key-settings-toggle{min-height:44px;padding-inline:15px;font-size:11px;font-weight:700}.online-toggle{min-width:112px}.key-settings-toggle{min-width:122px}.key-settings-toggle>span:first-child{font-size:15px}.instrument-selector-label{font-size:9px}.instrument-trigger-copy strong{font-size:13px}.instrument-trigger-copy small{font-size:9px}.instrument-popover-heading strong{font-size:14px}.volume-control{font-size:10px}.volume-control output{font-size:12px}.mute-control{min-width:64px;font-size:9px}.sustain-copy strong{font-size:11px}.sustain-copy small,.sustain-control kbd{font-size:9px}.online-panel{width:360px;padding:24px}.online-header p{font-size:9px}.online-header h2{font-size:23px}.online-panel label{font-size:10px}.online-panel input{height:44px;font-size:13px}.online-actions button,.online-leave{height:42px;font-size:10px}.online-panel form>small{font-size:10px;line-height:1.55}.room-sidebar{z-index:24;color:#24283e;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fffffff7;border:1px solid #dfe2ec;border-radius:22px;flex-direction:column;width:350px;padding:22px;animation:.2s ease-out panelIn;display:flex;position:fixed;top:84px;bottom:16px;right:16px;overflow:hidden;box-shadow:-18px 22px 60px #2e34522e,inset 0 1px #fff}.room-sidebar-header{flex:none}.room-sidebar-header p{color:#6d58c9}.room-sidebar-header>button{color:#70758a;background:#f8f9fc;border-color:#dde0e9}.room-sidebar-header>button:hover{color:#24283e;background:#f2f3f7;border-color:#bdc2d2}.room-code--sidebar{flex:none;margin-top:20px;padding:13px}.room-code--sidebar strong{font-size:17px}.room-code--sidebar button{font-size:9px}.room-code--sidebar .room-locked-badge{color:#a25328;background:#fff6ee;border-color:#efd0b8}.room-management{color:#287b74;background:#f4fbfa;border:1px solid #d9e8e5;border-radius:10px;flex:none;justify-content:space-between;align-items:center;gap:10px;min-height:35px;margin-top:8px;padding:6px 8px 6px 11px;font-size:9px;font-weight:700;display:flex}.room-management.is-locked{color:#9a552f;background:#fff8f2;border-color:#efd7c6}.room-management button{min-height:24px;color:inherit;cursor:pointer;background:#fff;border:1px solid;border-radius:7px;padding:0 8px;font-size:8px;font-weight:750}.room-management button:hover{filter:brightness(.97)}.online-audio-test{color:#6552c4;cursor:pointer;background:#f6f3ff;border:1px solid #d7d0f7;border-radius:10px;justify-content:center;align-items:center;gap:7px;width:100%;min-height:38px;margin-top:10px;font-size:10px;font-weight:750;display:flex}.online-audio-test:hover{background:#f0ecff;border-color:#bfb3ef}.online-audio-test:disabled{opacity:.65;cursor:wait}.online-audio-test.is-done{color:#197d75;background:#effaf8;border-color:#b9e3df}.online-audio-test>span{font-size:14px}.participant-heading{justify-content:space-between;align-items:flex-end;gap:12px;margin:22px 0 10px;display:flex}.participant-heading>div{flex-direction:column;gap:5px;display:flex}.participant-heading strong{color:#353a52;font-size:14px}.participant-heading>div>span{color:#8a8fa2;font-size:10px}.participant-heading .online-live{margin:0 0 1px;font-size:9px}.participant-heading .online-connection-status{align-items:flex-end;gap:5px}.online-latency{color:#5d6380;white-space:nowrap;font:700 9px/1 DM Mono,monospace}.participant-list{scrollbar-width:thin;scrollbar-color:#c4c7d3 transparent;flex-direction:column;flex:1;gap:10px;min-height:0;margin:0;padding:0 3px 0 0;list-style:none;display:flex;overflow-y:auto}.participant-card{background:#fafbfc;border:1px solid #e2e5ed;border-radius:14px;grid-template-columns:39px minmax(0,1fr);align-items:start;gap:11px;padding:13px;transition:border-color .16s,background .16s,transform .16s;display:grid}.participant-card.is-playing{background:#f2fbf9;border-color:#b9e3de;transform:translate(-2px)}.participant-avatar{color:#5d4bc0;background:#eeeafd;border-radius:12px;place-items:center;width:39px;height:39px;font-size:14px;font-weight:800;display:grid}.participant-card.is-playing .participant-avatar{color:#16776f;background:#dff5f1}.participant-main{min-width:0}.participant-name-row{align-items:center;gap:7px;min-width:0;display:flex}.participant-name-row strong{color:#34394f;text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.participant-name-row>span{color:#6652c8;background:#eeeafd;border-radius:5px;padding:3px 5px;font-size:8px;font-weight:700}.participant-name-row>.participant-host-badge{color:#96611b;background:#fff1cc}.participant-kick{color:#a9435a;cursor:pointer;white-space:nowrap;background:#fff7f8;border:1px solid #eccbd3;border-radius:6px;margin-left:auto;padding:3px 6px;font-size:8px;font-weight:750}.participant-kick:hover{background:#fff0f3;border-color:#dfa9b6}.participant-status{align-items:center;gap:7px;min-height:22px;display:flex}.participant-latency{white-space:nowrap;border-radius:6px;margin-left:auto;padding:3px 5px;font:700 8px/1 DM Mono,monospace}.participant-latency.is-pending{color:#8f94a7;background:#f0f1f5}.participant-latency.is-good{color:#16776f;background:#e4f7f4}.participant-latency.is-fair{color:#9a6b17;background:#fff5dd}.participant-latency.is-slow{color:#b44854;background:#fff0f2}.participant-instrument{color:#6652c8;white-space:nowrap;background:#f3f0fe;border:1px solid #d9d2f5;border-radius:6px;margin-left:auto;padding:3px 6px;font-size:8px;font-weight:700}.participant-card.is-playing .participant-instrument{color:#197d75;background:#effaf8;border-color:#b9e3df}.participant-pulse{align-items:flex-end;gap:2px;width:18px;height:12px;display:flex}.participant-pulse i{background:#c5c9d4;border-radius:2px;width:3px;height:3px}.participant-card.is-playing .participant-pulse i{background:#49b7ad;animation:.55s ease-in-out infinite alternate participantMeter}.participant-card.is-playing .participant-pulse i:nth-child(2){height:8px;animation-delay:-.18s}.participant-card.is-playing .participant-pulse i:nth-child(3){height:5px;animation-delay:-.36s}@keyframes participantMeter{to{height:12px}}.participant-volume-row{align-items:center;gap:7px;display:flex}.participant-volume{color:#797e92;flex:1;grid-template-columns:32px minmax(0,1fr) 27px;align-items:center;gap:7px;min-width:0;font-size:9px;display:grid}.participant-volume input{--participant-volume:50%;appearance:none;cursor:pointer;background:0 0;width:100%;height:16px;margin:0}.participant-volume input::-webkit-slider-runnable-track{background:linear-gradient(90deg, #806cf2 var(--participant-volume), #dfe2eb var(--participant-volume));border-radius:4px;height:4px}.participant-volume input::-webkit-slider-thumb{appearance:none;background:#806cf2;border:2px solid #fff;border-radius:50%;width:13px;height:13px;margin-top:-4.5px;box-shadow:0 2px 7px #6751d34d}.participant-volume input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}.participant-volume output{color:#6353b9;text-align:right;font:700 9px/1 DM Mono,monospace}.participant-mute{color:#676d83;cursor:pointer;white-space:nowrap;background:#fff;border:1px solid #d9dce7;border-radius:7px;justify-content:center;align-items:center;gap:4px;min-width:56px;height:25px;padding:0 7px;font-size:8px;font-weight:750;display:inline-flex}.participant-mute:hover{color:#4d3eaa;background:#f7f5ff;border-color:#c8c0ec}.participant-mute.is-muted{color:#a9435a;background:#fff5f7;border-color:#eccbd3}.participant-mute>span{font-size:10px}.room-sidebar-leave{color:#a9435a;background:#fff5f7;border-color:#eccbd3;flex:none;margin-top:14px}.settings-header p{font-size:10px}.settings-description{font-size:13px}.settings-section-label{font-size:10px}.preset-switch button,.layout-switch button{font-size:11px}.semitone-setting strong{font-size:12px}.semitone-setting div span,.layout-restriction,.mapping-row>strong{font-size:10px}.settings-message,.settings-reset,.settings-done{font-size:11px}@media (width<=1450px){.room-sidebar{width:324px}}.online-panel:has(.online-entry){width:400px;max-height:calc(100vh - 104px);overflow-y:auto}.online-entry{margin-top:18px}.online-entry>.online-name-field{margin:0}.room-entry-card{background:#f8f9fc;border:1px solid #e1e4ed;border-radius:14px;margin-top:14px;padding:15px}.room-entry-card--create{background:#f6f3ff;border-color:#d7d0f7}.room-entry-heading{flex-direction:column;gap:5px;display:flex}.room-entry-heading strong{color:#353a52;font-size:13px}.room-entry-heading span{color:#858a9e;font-size:10px;line-height:1.45}.online-panel .room-entry-card label{margin-top:13px}.room-entry-card button{color:#fff;cursor:pointer;background:linear-gradient(145deg,#806ce0,#6854c5);border:1px solid #cfc8f4;border-radius:10px;width:100%;height:42px;margin-top:12px;font-size:11px;font-weight:750}.room-entry-card .online-join{background:linear-gradient(145deg,#4db8ae,#2f9189);border-color:#9dd8d2}.room-entry-card button:disabled{opacity:.55;cursor:wait}.room-entry-divider{color:#9a9eae;align-items:center;gap:9px;height:24px;font-size:9px;display:flex}.room-entry-divider:before,.room-entry-divider:after{content:"";background:#e2e4eb;flex:1;height:1px}.online-entry>small{color:#858a9e;margin-top:12px;font-size:10px;line-height:1.55;display:block}.room-code--sidebar>div>small{color:#247f78;letter-spacing:.02em;background:#fff;border:1px solid #b7ded9;border-radius:5px;width:fit-content;padding:3px 6px;font-size:8px;font-weight:700}.license-link{color:#777c91;cursor:pointer;letter-spacing:.08em;background:0 0;border:0;border-radius:7px;padding:6px 8px;font:600 8px/1 DM Mono,monospace}.license-link:hover{color:#5f4bc4;background:#f1effb}.tools-popover .license-link{text-align:left;width:100%;margin-top:6px}.app-license-link{z-index:3;color:#9ca1ae;cursor:pointer;background:0 0;border:0;padding:3px 5px;font-size:9px;font-weight:500;line-height:1;position:fixed;bottom:14px;left:14px}.app-license-link:hover,.app-license-link:focus-visible{color:#5f6473;text-decoration:underline}.license-backdrop{z-index:40;-webkit-backdrop-filter:none;backdrop-filter:none;background:#2a2e3a61;place-items:center;padding:24px;animation:.16s ease-out backdropIn;display:grid;position:fixed;inset:0}.license-panel{color:#24283e;background:#fff;border:1px solid #aeb5c2;border-radius:12px;flex-direction:column;width:min(760px,100vw - 48px);max-height:min(760px,100vh - 48px);padding:26px;animation:.18s ease-out licensePanelIn;display:flex;overflow:hidden;box-shadow:0 18px 48px #22273a38}@keyframes licensePanelIn{0%{opacity:0;transform:translateY(14px)scale(.985)}}.license-header{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.license-header p{color:#5f6473;letter-spacing:.08em;margin:0 0 7px;font:700 9px/1 DM Mono,monospace}.license-header h2{letter-spacing:-.025em;margin:0;font-size:25px}.license-header>button{color:#4f5668;cursor:pointer;background:#fff;border:1px solid #aeb5c2;border-radius:8px;flex:none;width:36px;height:36px;font-size:19px}.license-header>button:hover{color:#24283e;background:#f2f3f7;border-color:#bdc2d2}.license-description{color:#686e84;margin:13px 0 18px;font-size:12px;line-height:1.65}.license-scroll{scrollbar-width:thin;scrollbar-color:#c4c7d3 transparent;min-height:0;padding-right:6px;overflow-y:auto}.license-section+.license-section{margin-top:24px}.license-section h3{color:#50566c;margin:0 0 10px;font-size:13px}.license-card{background:#fff;border:1px solid #cfd3dc;border-radius:8px;padding:13px 14px}.license-card+.license-card{margin-top:8px}.license-card-heading{justify-content:space-between;align-items:center;gap:16px;display:flex}.license-card-heading strong{color:#34394f;font-size:11px}.license-card-heading span{color:#555b6f;white-space:nowrap;background:#fff;border:1px solid #aeb5c2;border-radius:5px;padding:4px 7px;font:700 8px/1 DM Mono,monospace}.license-card p{color:#6d7287;margin:8px 0;font-size:10px;line-height:1.55}.license-card a{color:#297f79;overflow-wrap:anywhere;font:600 9px/1.4 DM Mono,monospace}.license-note{color:#858a9e;margin:10px 2px 0;font-size:9px;line-height:1.6}.license-text{background:#fff;border:1px solid #cfd3dc;border-radius:8px;margin-top:24px}.license-text summary{color:#555b71;cursor:pointer;padding:13px 14px;font-size:10px;font-weight:700}.license-text pre{color:#656b80;white-space:pre-wrap;margin:0;padding:0 14px 16px;font:500 9px/1.65 DM Mono,monospace;overflow-x:auto}@media (height<=720px){.license-panel{max-height:calc(100vh - 24px);padding:21px}}.app-shell{background:#f5f6f8}.app-shell:before,.ambient{display:none}.topbar{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff;border-color:#dde0e7}.brand-mark{box-shadow:none;background:#715bd0;border-radius:10px;transform:none}.brand-mark span{transform:none}.brand-lockup p{letter-spacing:.02em;font-size:11px}.version-chip{background:#f3f1fa;font-size:10px}.language-switcher,.online-toggle,.key-settings-toggle,.audio-toggle,.instrument-trigger,.volume-control,.sustain-control,.tools-menu>summary{box-shadow:none;border-radius:9px}.language-switcher>span{letter-spacing:.02em;font-size:10px}.language-switcher select{font-size:12px}.online-toggle,.key-settings-toggle,.audio-toggle{letter-spacing:0;font-size:12px}.online-toggle:hover,.key-settings-toggle:hover,.audio-toggle:hover{transform:none}.online-dot,.audio-dot,.is-connected .online-dot,.is-ready .audio-dot,.audio-toggle.is-loading .audio-dot{box-shadow:none}.instrument-selector-label{letter-spacing:.06em;text-transform:none;font-size:11px}.instrument-trigger{background:#fff}.instrument-monogram{background:#ece9f8}.instrument-trigger-copy small{letter-spacing:0;font-size:11px}.instrument-preview-badge{font-size:10px}.instrument-popover{border-radius:12px;animation:none;box-shadow:0 10px 30px #2e34521f}.instrument-popover-heading span,.instrument-preview-note{font-size:11px}.instrument-grid button{border-radius:8px}.instrument-grid button:hover{transform:none}.instrument-grid button strong{font-size:12px}.instrument-grid button small{font-size:10px}.volume-control{letter-spacing:.02em;font-size:11px}.mute-control{letter-spacing:0;min-width:68px;height:28px;font-size:11px}.volume-control input::-webkit-slider-thumb{box-shadow:none}.participant-volume input::-webkit-slider-thumb{box-shadow:none}.sustain-copy strong{letter-spacing:.02em;font-size:12px}.sustain-copy small{letter-spacing:0;font-size:11px}.sustain-control kbd{font-size:10px}.tools-menu>summary{font-size:11px}.recorder{border-radius:10px}.recorder-state,.recorder-state strong{letter-spacing:0;font-size:10px}.recorder small{font-size:10px}.recorder-progress span{background:#715bd0}.is-recording .recorder-progress span{background:#d95b78}.recorder-actions button{letter-spacing:0;height:28px;font-size:10px}.keyboard-shell{background:#fff;border-radius:16px;box-shadow:0 8px 28px #393f6014}.keyboard-shell:before,.keyboard-glow{display:none}.row-label strong{letter-spacing:.06em;font-size:12px}.row-label>span:last-child{letter-spacing:0;font-size:10px}.row-indicator{box-shadow:none;background:#715bd0}.keyboard-row--middle .row-indicator{box-shadow:none;background:#319f96}.keyboard-row--low .row-indicator{box-shadow:none;background:#c68045}.online-backdrop,.settings-backdrop,.license-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}.online-panel,.keyboard-settings,.license-panel,.room-sidebar{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff;border-radius:14px;animation:none;box-shadow:0 12px 32px #2e345224}.online-header p,.settings-header p,.license-header p{letter-spacing:.06em;font-size:11px}.online-panel label{letter-spacing:0;font-size:12px}.online-panel form>small,.online-entry>small,.online-error{font-size:11px}.online-actions .online-join,.room-entry-card .online-join{background:#2f9189}.sound-gate button,.room-entry-card button,.settings-done{box-shadow:none;background:#715bd0}.room-entry-card,.room-entry-card--create{background:#f7f7f9;border-radius:10px}.room-entry-card--create{border-color:#d9d4eb}.room-entry-heading span{font-size:11px}.room-entry-card button{font-size:12px}.room-entry-divider{font-size:10px}.room-code--sidebar{border-radius:10px}.room-code span{letter-spacing:.04em;font-size:10px}.room-code button{min-height:34px;font-size:11px}.room-code--sidebar>div>small{font-size:10px}.room-management{min-height:42px;font-size:11px}.room-management button{min-height:30px;font-size:11px}.online-audio-test{min-height:42px;font-size:12px}.participant-heading>div>span,.participant-heading .online-live{font-size:11px}.online-latency{font-size:10px}.participant-card{background:#fff;border-radius:10px;transition:border-color .16s,background .16s}.participant-card.is-playing{transform:none}.participant-name-row strong{font-size:13px}.participant-name-row>span{font-size:10px}.participant-kick{min-height:28px;padding-inline:8px;font-size:10px}.participant-instrument,.participant-latency{font-size:10px}.participant-volume{grid-template-columns:34px minmax(0,1fr) 30px;font-size:11px}.participant-volume output{font-size:10px}.participant-mute{min-width:60px;height:30px;font-size:10px}.settings-section-label,.layout-restriction,.mapping-row>strong{letter-spacing:.04em;font-size:11px}.settings-section-label strong{font-size:10px}.preset-switch button,.layout-switch button,.settings-reset,.settings-done{letter-spacing:0;font-size:12px}.semitone-setting div span{font-size:11px}.settings-message{font-size:12px}.license-link{letter-spacing:0;font-size:11px}.license-card-heading strong{font-size:12px}.license-card-heading span{font-size:10px}.license-card p,.license-note,.license-text summary{font-size:11px}.license-card a,.license-text pre{font-size:10px}.version-chip{color:#555b6f;background:#fff;border-color:#cfd3dc}.online-toggle.is-connected,.audio-toggle.is-ready{color:#17665f;background:#fff;border-color:#2f9189}.is-connected .online-dot,.is-ready .audio-dot{box-shadow:none;background:#2f9189}.instrument-trigger:hover,.instrument-trigger.is-open{background:#fff;border-color:#715bd0}.instrument-monogram{color:#fff;background:#5f4bc4}.instrument-preview-badge{color:#17665f;background:#fff;border-color:#2f9189}.instrument-popover{background:#fff}.instrument-grid button:hover,.instrument-grid button.is-selected{color:#24283e;background:#fff;border-color:#715bd0}.room-sidebar{box-shadow:none;background:#fff;border-color:#cfd3dc}.room-code,.room-code--sidebar{background:#fff;border-color:#aeb5c2}.room-code span{color:#5d6475}.room-code strong{color:#17665f}.room-code button{color:#17665f;background:#fff;border-color:#2f9189}.room-code button:hover{background:#f3f4f6}.room-code--sidebar>div>small,.room-code--sidebar .room-locked-badge{color:#6f4a18;background:#fff;border-color:#8a6a3b}.room-management,.room-management.is-locked{color:#17665f;background:#fff;border-color:#aeb5c2}.room-management.is-locked{color:#8b4528}.online-audio-test,.online-audio-test:hover,.online-audio-test.is-done{color:#5f4bc4;background:#fff;border-color:#715bd0}.online-audio-test.is-done{color:#17665f;border-color:#2f9189}.online-live span{box-shadow:none}.participant-card,.participant-card.is-playing{background:#fff;border-color:#cfd3dc}.participant-card.is-playing{border-color:#2f9189}.participant-name-row>span,.participant-name-row>.participant-host-badge{color:#5f4bc4;background:#fff;border:1px solid #715bd0}.participant-name-row>.participant-host-badge{color:#7b5119;border-color:#8a6a3b}.participant-latency,.participant-latency.is-pending,.participant-latency.is-good,.participant-latency.is-fair,.participant-latency.is-slow{color:#5d6475;background:0 0;padding:0}.participant-latency.is-good{color:#17665f}.participant-latency.is-fair{color:#7b5119}.participant-latency.is-slow{color:#a13745}.participant-instrument,.participant-card.is-playing .participant-instrument,.participant-mute:hover,.participant-mute.is-muted{color:#5f4bc4;background:#fff;border-color:#715bd0}.participant-mute.is-muted{color:#a13745;border-color:#ba5968}.participant-kick,.participant-kick:hover,.room-sidebar-leave{color:#a13745;background:#fff;border-color:#ba5968}.volume-control input::-webkit-slider-runnable-track{background:#d7dae1}.participant-volume input::-webkit-slider-runnable-track{background:#d7dae1}.volume-control input::-moz-range-track{background:#d7dae1}.participant-volume input::-moz-range-track{background:#d7dae1}.volume-control input::-webkit-slider-thumb{background:#715bd0}.participant-volume input::-webkit-slider-thumb{background:#715bd0}.preset-switch button.is-active,.layout-switch button.is-active{color:#5f4bc4;box-shadow:none;background:#fff;border-color:#715bd0}.performance-layout{width:100%}.performance-layout.has-room-sidebar{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:16px;width:min(1880px,100% - 32px);margin:0 auto;display:grid}.performance-layout.has-room-sidebar main{width:100%;min-width:0;margin:0}.performance-layout.has-room-sidebar .stage-heading{margin-left:0}.performance-layout.has-room-sidebar .room-sidebar{z-index:2;width:100%;height:calc(100vh - 108px);min-height:580px;box-shadow:none;background:#f5f6f8;border:0;border-left:1px solid #cfd3dc;border-radius:0;margin-top:18px;padding:4px 0 16px 20px;position:sticky;top:18px;bottom:auto;right:auto}.performance-layout.has-room-sidebar .room-sidebar-header{padding-top:2px}@media (width<=1450px){.performance-layout.has-room-sidebar{grid-template-columns:minmax(0,1fr) 300px;gap:12px}.performance-layout.has-room-sidebar .room-sidebar{width:100%}}.performance-layout.has-room-sidebar .room-sidebar--entry{max-height:none;overflow:hidden auto}.room-sidebar--entry .online-entry{margin-top:18px}.room-sidebar--entry .room-entry-card{background:#fff;border-color:#cfd3dc}.room-sidebar--entry .room-entry-card--create{border-color:#aeb5c2}.room-sidebar--entry .online-error{margin-bottom:0}.online-name-field.is-error{color:#8f2038;font-weight:750}.online-name-field.is-error input{background:#fff7f8;border-color:#c74762;box-shadow:0 0 0 2px #f2cbd3}.online-name-error{color:#861d34;background:#fff0f3;border:1px solid #d85b73;border-radius:8px;align-items:center;gap:9px;min-height:42px;margin:8px 0 2px;padding:9px 11px;font-size:13px;font-weight:750;line-height:1.4;display:flex}.online-name-error>span{color:#fff;background:#b8324e;border-radius:50%;flex:0 0 21px;place-items:center;width:21px;height:21px;font:800 13px/1 system-ui,sans-serif;display:grid}.invite-room-backdrop{z-index:60;background:#2a2e3a61;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.invite-room-dialog{color:#24283e;background:#fff;border:1px solid #b9bec9;border-radius:12px;width:min(430px,100%);padding:24px;box-shadow:0 18px 48px #22273a38}.invite-room-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.invite-room-header p{color:#5f6473;margin:0 0 6px;font-size:11px;font-weight:650}.invite-room-header h2{letter-spacing:-.03em;margin:0;font-size:24px}.invite-room-actions{align-items:flex-start;gap:8px;display:flex}.invite-language-switcher{color:#252a41;background:#fff;border:1px solid #cfd3dc;border-radius:8px;flex-direction:column;justify-content:center;height:42px;padding:5px 9px;display:flex}.invite-language-switcher>span{color:#747a8b;font-size:8px;font-weight:650;line-height:1}.invite-language-switcher select{color:#252a41;cursor:pointer;background:#fff;border:0;outline:0;width:88px;margin-top:4px;padding:0;font-size:11px;font-weight:700;line-height:1}.invite-room-actions>button{color:#5e6475;cursor:pointer;background:#fff;border:1px solid #cfd3dc;border-radius:8px;width:34px;height:34px;font-size:19px}.invite-room-description{color:#656b7c;margin:14px 0 0;font-size:13px;line-height:1.55}.invite-room-code{background:#fff;border:1px solid #aeb5c2;border-radius:8px;justify-content:space-between;align-items:center;margin-top:16px;padding:13px 14px;display:flex}.invite-room-code span{color:#656b7c;font-size:11px}.invite-room-code strong{color:#34394f;letter-spacing:.12em;font:750 18px/1 DM Mono,monospace}.invite-room-form{margin-top:17px}.invite-room-form label{color:#555c70;margin-top:13px;font-size:12px;font-weight:650;display:block}.invite-room-form input{color:#252a41;background:#fff;border:1px solid #cfd3dc;border-radius:8px;outline:none;width:100%;height:44px;margin-top:7px;padding:0 12px;font-size:13px;font-weight:600}.invite-room-form input:focus{box-shadow:none;background:#fff;border-color:#4c9f98}.invite-room-form .online-error{font-size:12px}.invite-room-join{color:#fff;cursor:pointer;background:#2f9189;border:1px solid #287d76;border-radius:8px;width:100%;min-height:44px;margin-top:18px;font-size:13px;font-weight:750}.invite-room-join:disabled{opacity:.58;cursor:wait}@media (width<=560px){.invite-room-backdrop{padding:14px}.invite-room-dialog{padding:20px}.invite-language-switcher select{width:76px}}.settings-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:#2a2e3a61;place-items:center;padding:24px;animation:none;display:grid}.keyboard-settings{color:#24283e;background:#fff;border-color:#aeb5c2;border-radius:12px;width:min(900px,100vw - 48px);height:min(760px,100vh - 48px);min-height:min(620px,100vh - 48px);animation:none;box-shadow:0 18px 48px #22273a38}.settings-close-icon,.settings-close-icon:hover{color:#4f5668;background:#fff;border-color:#aeb5c2}.settings-section-label strong{color:#5f4bc4;background:#fff;border-color:#715bd0}.preset-switch button,.layout-switch button,.preset-switch button:hover,.layout-switch button:hover{color:#4f5668;background:#fff;border-color:#aeb5c2}.preset-switch button.is-selected,.layout-switch button.is-selected{color:#5f4bc4;box-shadow:none;background:#fff;border:2px solid #715bd0}.layout-switch button:disabled{opacity:1;color:#a0a5b1;background:#fff;border-color:#d7dae1}.semitone-setting{background:#fff;border-color:#aeb5c2}.semitone-setting button,.semitone-setting button.is-active{color:#17665f;background:#fff;border-color:#2f9189}.semitone-setting button.is-active>span{box-shadow:none;background:#2f9189}.mapping-scroll{background:#fff;border-color:#bfc4ce}.mapping-row+.mapping-row{border-color:#d7dae1}.mapping-key,.mapping-key:hover,.mapping-key.is-accidental{color:#4f5668;background:#fff;border-color:#cfd3dc;transform:none}.mapping-key.is-listening{color:#17665f;box-shadow:none;background:#fff;border:2px solid #2f9189}.mapping-key kbd{color:#343950;background:#fff;border-color:#aeb5c2}.settings-message{color:#5d6475;background:#fff;border:1px solid #cfd3dc}.settings-message.is-error{color:#a13745;background:#fff;border-color:#ba5968}.settings-reset,.settings-reset:hover{color:#4f5668;background:#fff;border-color:#aeb5c2}.online-applause{color:#34394f;cursor:pointer;background:#fff;border:1px solid #aeb5c2;border-radius:8px;justify-content:center;align-items:center;gap:8px;width:100%;min-height:42px;margin-top:10px;font-size:12px;font-weight:750;display:inline-flex}.online-applause:hover:not(:disabled),.online-applause:focus-visible{color:#5f4bc4;border-color:#715bd0}.online-applause>span{font-size:15px}.participant-applause{color:#725814;background:#fff;border:1px solid #c7a75c;border-radius:4px;flex:none;align-items:center;gap:3px;padding:2px 5px;font-size:8px;font-weight:800;animation:.2s ease-out participant-applause-pop;display:inline-flex}@keyframes participant-applause-pop{0%{opacity:.35;transform:scale(.88)}to{opacity:1;transform:scale(1)}}.participant-card{--participant-accent:#2f6fbe}.participant-card.is-playing{border:2px solid var(--participant-accent);background:#fff}.participant-avatar,.participant-card.is-playing .participant-avatar{color:#fff;background:var(--participant-accent)}.participant-name-row>.participant-number{color:var(--participant-accent);border:1px solid var(--participant-accent);background:#fff;flex:none;padding:2px 4px;font:700 9px/1.2 DM Mono,monospace}.participant-note-strip{background:#fff;border:1px solid #d7dae1;border-radius:7px;flex-wrap:wrap;align-items:center;gap:5px;min-height:30px;margin:7px 0 5px;padding:5px 7px;display:flex}.participant-note-strip strong{color:#747a8b;margin-right:2px;font-size:10px}.participant-note-strip.is-playing{border:2px solid var(--participant-accent)}.participant-note-strip.is-playing strong{color:var(--participant-accent)}.participant-note-strip span{color:var(--participant-accent);border:1px solid var(--participant-accent);background:#fff;border-radius:4px;padding:2px 5px;font:700 10px/1.2 DM Mono,monospace}.participant-status{min-height:20px}.participant-card.is-playing .participant-pulse i{background:var(--participant-accent)}.participant-card.is-playing .participant-instrument{color:var(--participant-accent);border-color:var(--participant-accent);background:#fff}.performance-layout.has-room-sidebar .room-code--sidebar{margin-top:12px}.performance-layout.has-room-sidebar .room-management{min-height:34px;margin-top:6px}.performance-layout.has-room-sidebar .online-applause{min-height:36px;margin-top:6px}.performance-layout.has-room-sidebar .participant-heading{margin:12px 0 7px}.performance-layout.has-room-sidebar .participant-list{gap:4px}.performance-layout.has-room-sidebar .participant-card,.performance-layout.has-room-sidebar .participant-card.is-playing{background:#fff;border:1px solid #d7dae1;border-radius:7px;grid-template-columns:27px minmax(0,1fr);align-items:center;gap:7px;min-height:36px;padding:4px 6px}.performance-layout.has-room-sidebar .participant-card.is-playing{border-color:var(--participant-accent)}.performance-layout.has-room-sidebar .participant-avatar{border-radius:6px;width:27px;height:27px;font-size:11px}.performance-layout.has-room-sidebar .participant-main{grid-template-columns:minmax(0,1fr);display:grid}.performance-layout.has-room-sidebar .participant-name-row{gap:4px}.performance-layout.has-room-sidebar .participant-name-row strong{font-size:11px}.performance-layout.has-room-sidebar .participant-name-row>span,.performance-layout.has-room-sidebar .participant-name-row>.participant-number,.performance-layout.has-room-sidebar .participant-name-row>.participant-host-badge{padding:1px 3px;font-size:7px}.performance-layout.has-room-sidebar .participant-kick{min-height:18px;padding:1px 4px;font-size:7px}.performance-layout.has-room-sidebar .participant-status{gap:4px;min-height:13px}.performance-layout.has-room-sidebar .participant-pulse{width:13px;height:8px}.performance-layout.has-room-sidebar .participant-pulse i{width:2px}.performance-layout.has-room-sidebar .participant-card.is-playing .participant-pulse i:nth-child(2){height:6px}.performance-layout.has-room-sidebar .participant-card.is-playing .participant-pulse i:nth-child(3){height:4px}.performance-layout.has-room-sidebar .participant-instrument,.performance-layout.has-room-sidebar .participant-latency{padding:1px 4px;font-size:8px}.performance-layout.has-room-sidebar .room-sidebar-leave{height:34px;margin-top:8px}.active-performer-mixer{background:#fff;border:1px solid #cfd3dc;border-radius:10px;min-height:92px;margin-top:14px;padding:12px 14px 14px}.active-performer-mixer>header{justify-content:space-between;align-items:center;gap:10px;display:flex}.active-performer-mixer h2{color:#34394f;margin:0;font-size:13px}.active-performer-mixer>header>span{color:#4f5668;text-align:center;background:#fff;border:1px solid #aeb5c2;border-radius:5px;min-width:24px;padding:3px 6px;font:700 10px/1 DM Mono,monospace}.active-performer-empty{color:#747a8b;margin:14px 0 0;font-size:11px}.active-performer-grid{grid-template-columns:repeat(auto-fill,320px);justify-content:start;gap:8px;margin-top:10px;display:grid}.active-performer-card{--participant-accent:#2f6fbe;background:#fff;border:1px solid #cfd3dc;border-radius:8px;min-width:0;padding:9px 10px}.active-performer-card.is-playing{border-color:var(--participant-accent)}.active-performer-heading{grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:7px;display:grid}.active-performer-avatar{color:#fff;background:var(--participant-accent);border-radius:6px;place-items:center;width:30px;height:30px;font-size:11px;font-weight:800;display:grid}.active-performer-heading>div{flex-direction:column;gap:2px;min-width:0;display:flex}.active-performer-heading strong{color:#34394f;text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.active-performer-heading small{color:#6e7485;font-size:8px}.active-performer-self{border:1px solid var(--participant-accent);color:var(--participant-accent);background:#fff;border-radius:4px;padding:2px 4px;font-size:8px;font-weight:700}.active-performer-volume-row{align-items:center;gap:7px;margin-top:8px;display:flex}.active-performer-volume-row .participant-volume{grid-template-columns:30px minmax(70px,1fr) 25px;font-size:9px}.active-performer-volume-row .participant-mute{min-width:52px;height:26px;font-size:8px}@media (width<=1100px){.active-performer-grid{grid-template-columns:repeat(auto-fill,300px)}}.percussion-shell{background:#fff;border:1px solid #cfd3dc;border-radius:16px;min-height:396px;padding:20px 24px 24px;box-shadow:0 8px 28px #393f6014}.percussion-heading{border-bottom:1px solid #e1e3e8;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;display:flex}.percussion-heading strong{color:#2f3448;font-size:15px}.percussion-heading span{color:#747a8c;font-size:11px}.percussion-zone-heading{justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;display:flex}.percussion-zone-heading strong{letter-spacing:.04em;font-size:12px}.percussion-zone-heading span{text-align:center;border:1px solid;border-radius:4px;min-width:23px;padding:3px 5px;font:700 9px/1 DM Mono,monospace}.percussion-key-grid{grid-template-columns:repeat(7,minmax(30px,1fr));gap:6px;display:grid}.percussion-key{touch-action:none;-webkit-user-select:none;user-select:none;color:#303546;cursor:pointer;background:#fff;border:1px solid #aeb4bf;border-radius:6px;min-width:0;height:35px;padding:0 4px;font:800 11px/1 DM Mono,monospace;transition:transform 70ms,color 70ms,background 70ms}.percussion-key:hover{border-color:#6f7685}.percussion-key:focus-visible{outline-offset:2px;outline:2px solid #5f4bc4}.percussion-key.is-pressed{color:#fff;transform:translateY(2px)}.cajon-pad-grid{grid-template-columns:repeat(4,minmax(132px,1fr));place-items:center;gap:20px 42px;max-width:930px;margin:22px auto 0;display:grid}.percussion-key--cajon{color:#fff;background:0 0;border:0;flex-direction:column;align-items:center;gap:8px;width:132px;height:auto;padding:0;display:flex}.percussion-key--cajon:hover{border:0}.percussion-key--cajon.is-pressed{color:#fff;background:0 0;transform:none}.cajon-pad-face{aspect-ratio:1;background:#f2c56f;border:2px solid #bc8740;border-radius:14px;width:100%;transition:transform 70ms,box-shadow 70ms,background 70ms;display:block;position:relative;box-shadow:0 6px #8f6532,0 10px 18px #4d321833,inset 0 0 0 5px #f7d58f}.percussion-key--cajon:hover .cajon-pad-face{background:#f6ce7d}.percussion-key--cajon.is-pressed .cajon-pad-face{background:#dfa953;transform:translateY(5px);box-shadow:0 1px #80582c,0 4px 8px #4d321838,inset 0 0 0 5px #efc471}.cajon-pad-face i{background:#d7a454;border:1px solid #a87838;border-radius:50%;width:7px;height:7px;position:absolute}.cajon-pad-face i:first-child{top:10px;left:10px}.cajon-pad-face i:nth-child(2){top:10px;right:10px}.cajon-pad-face i:nth-child(3){bottom:10px;left:10px}.cajon-pad-face i:nth-child(4){bottom:10px;right:10px}.percussion-key--cajon kbd{color:#fff;min-width:32px;box-shadow:none;background:#555861;border:0;border-radius:5px;padding:4px 8px;font:800 12px/1 DM Mono,monospace}.drum-kit-stage{grid-template-rows:92px 132px 150px;grid-template-columns:repeat(8,minmax(72px,1fr));place-items:center;gap:6px 10px;width:min(100%,940px);min-height:410px;margin:8px auto 0;padding:18px 26px 28px;display:grid;position:relative}.drum-kit-stage:before{content:"";background:#555861;border-radius:2px;height:4px;position:absolute;bottom:19px;left:12%;right:12%}.drum-kit-stand{z-index:0;background:#555861;width:4px;height:104px;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.drum-piece{z-index:1;color:#30333d;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;background:0 0;border:0;flex-direction:column;align-items:center;gap:7px;width:122px;min-width:0;height:auto;padding:0;display:flex;position:relative}.drum-piece:focus-visible{outline-offset:5px;outline:2px solid #5f4bc4}.drum-piece-face{color:#353841;background:#eee8de;border:7px solid #a96f3d;border-radius:50%;justify-content:center;align-items:center;width:100%;height:102px;transition:transform 70ms,box-shadow 70ms,background 70ms;display:flex;box-shadow:0 7px #754b2e,0 10px 16px #36291d2e,inset 0 0 0 3px #fff}.drum-piece-face>span{text-align:center;max-width:86%;font-size:11px;font-weight:800;line-height:1.15}.drum-piece kbd{color:#fff;min-width:32px;box-shadow:none;background:#555861;border:0;border-radius:5px;padding:4px 8px;font:800 12px/1 DM Mono,monospace}.drum-piece:hover .drum-piece-face{background:#f5f0e8}.drum-piece.is-pressed .drum-piece-face{background:#ddd5c8;transform:translateY(5px);box-shadow:0 2px #754b2e,0 4px 8px #36291d33,inset 0 0 0 3px #f8f5f0}.drum-piece--crash,.drum-piece--ride{width:158px}.drum-piece--crash{grid-area:1/1/auto/3;transform:rotate(-4deg)}.drum-piece--ride{grid-area:1/7/auto/9;transform:rotate(4deg)}.drum-piece--crash .drum-piece-face,.drum-piece--ride .drum-piece-face{color:#57401f;background:#d9ae59;border-width:3px;border-color:#ad7d32;height:60px;box-shadow:0 5px #8a6228,0 8px 13px #4630132e,inset 0 0 0 3px #eccb83}.drum-piece--crash:hover .drum-piece-face,.drum-piece--ride:hover .drum-piece-face{background:#e3bb69}.drum-piece--crash.is-pressed .drum-piece-face,.drum-piece--ride.is-pressed .drum-piece-face{background:#c99b47;box-shadow:0 1px #7d5623,0 3px 7px #46301333,inset 0 0 0 3px #dfba6d}.drum-piece--hiHat{grid-area:2/1/auto/3;width:132px}.drum-piece--hiHat .drum-piece-face{color:#57401f;background:#c9a052;border-width:3px;border-color:#987035;height:54px;box-shadow:0 5px #785424,0 8px 12px #4630132b,inset 0 0 0 3px #dfbd75}.drum-piece--highTom{grid-area:2/3/auto/5}.drum-piece--midTom{grid-area:2/5/auto/7}.drum-piece--snare{grid-area:3/2/auto/4;width:134px}.drum-piece--snare .drum-piece-face{border-color:#777c86;box-shadow:0 7px #555861,0 10px 16px #36291d2e,inset 0 0 0 3px #fff}.drum-piece--kick{grid-area:3/4/auto/6;align-self:end;width:154px}.drum-piece--kick .drum-piece-face{color:#f9f4ea;background:#9d673e;border-width:9px;height:134px;box-shadow:0 7px #68432b,0 10px 16px #36291d33,inset 0 0 0 4px #c9925d}.drum-piece--kick:hover .drum-piece-face{background:#ab7448}.drum-piece--floorTom{grid-area:3/6/auto/8;width:142px}.drum-piece--floorTom .drum-piece-face{height:116px}.conga-stage{grid-template-columns:.92fr 1fr 1.08fr;place-items:end center;gap:24px;width:min(100%,840px);min-height:330px;margin:14px auto 0;padding:16px 34px 20px;display:grid;position:relative}.conga-stage:after{content:"";background:#4e5057;border-radius:2px;height:4px;position:absolute;bottom:12px;left:6%;right:6%}.conga-drum{z-index:1;flex-direction:column;align-items:center;width:190px;height:282px;display:flex;position:relative}.conga-drum--conga{width:206px;height:295px}.conga-drum--tumba{width:222px;height:308px}.conga-head{z-index:2;background:#d9c3a1;border:9px solid #776257;border-radius:50%;grid-template-rows:50px 90px;width:100%;height:140px;display:grid;position:relative;overflow:hidden;transform:perspective(420px)rotateX(7deg);box-shadow:0 6px #4e3e36,0 10px 18px #332a2533,inset 0 0 0 4px #ead9bd}.conga-hit{color:#332b27;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;background:#d9c3a1;border:0;border-radius:0;min-width:0;padding:3px 34px 2px 12px;transition:background 70ms,box-shadow 70ms,transform 70ms;position:relative}.conga-hit:first-child{background:#c9ad86;border-bottom:1px solid #9a806e}.conga-hit span{text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:800;line-height:1.2;display:block;overflow:hidden}.conga-hit kbd{color:#fff;min-width:24px;box-shadow:none;background:#4f5159;border:0;border-radius:4px;padding:4px 5px;font:800 11px/1 DM Mono,monospace;position:absolute;top:50%;right:9px;transform:translateY(-50%)}.conga-hit:hover{background:#e5d1b1}.conga-hit:first-child:hover{background:#d4b991}.conga-hit:focus-visible{z-index:1;outline-offset:-4px;outline:3px solid #5f4bc4}.conga-hit.is-pressed{color:#fff;background:#9c4e3b;transform:translateY(2px);box-shadow:inset 0 4px 12px #3718124d}.conga-body{clip-path:polygon(5% 0,95% 0,82% 100%,18% 100%);background:#ad5c42;border:5px solid #75402f;border-top:0;border-bottom-width:9px;flex:1;width:76%;margin-top:-21px;display:block;position:relative;box-shadow:inset 10px 0 #c77759,inset -10px 0 #87422f,0 8px 13px #3f251d30}.conga-body:before,.conga-body:after{content:"";background:#d7b17b;width:3px;position:absolute;top:4px;bottom:5px}.conga-body:before{left:28%;transform:rotate(3deg)}.conga-body:after{right:28%;transform:rotate(-3deg)}.conga-body i{background:#4f5159;height:4px;position:absolute;left:8%;right:8%}.conga-body i:first-child{top:18%}.conga-body i:nth-child(2){top:52%}.conga-body i:nth-child(3){bottom:8%}.conga-stand{z-index:0;background:#4e5057;width:4px;height:94px;position:absolute;bottom:13px;left:50%;transform:translate(-50%)}.performance-layout.has-room-sidebar .percussion-shell{padding-inline:18px}.performance-layout.has-room-sidebar .percussion-key-grid{grid-template-columns:repeat(5,minmax(28px,1fr))}.performance-layout.has-room-sidebar .conga-stage{gap:12px;padding-inline:10px}.performance-layout.has-room-sidebar .conga-drum{width:168px}.performance-layout.has-room-sidebar .conga-drum--conga{width:182px}.performance-layout.has-room-sidebar .conga-drum--tumba{width:194px}