@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Fira+Code:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap";:root{--purple:#8b5cf6;--purple-glow:#8b5cf673;--purple-dim:#8b5cf61f;--teal:#1a9e7c;--coral:#e05a2b;--yellow:#f5c842;--pink:#d94f8a;--amber:#f5a623;--green:#10b981;--red:#ef4444;--orange:#f97316;--gold:#f59e0b;--bg:#0a0a0a;--panel:#111;--panel-2:#0d0d14;--border:#1e1e2e;--border-hi:#ffffff1f;--text:#ddd6ee;--muted:#ffffff52;--topbar-bg:#0d0d14;--topbar-border:#8b5cf638;--sb-bg:#0a0a10;--editor-bg:#0d0d14;--editor-gutter:#0a0a10;--gutter-bg:#0a0a10;--divider:#ffffff0f;--panel-text:#ffffff8c;--right-panel-bg:#070710;--transition-theme:background .25s ease, color .25s ease, border-color .25s ease}[data-theme=dark]{--bg:#0a0a0a;--panel:#111;--panel-2:#0d0d14;--topbar-bg:#0d0d14;--topbar-border:#8b5cf638;--border:#1e1e2e;--text:#ddd6ee;--muted:#ffffff52;--editor-bg:#0d0d14;--editor-gutter:#0a0a10;--sb-bg:#0a0a10;--divider:#ffffff0f;--panel-text:#ffffff8c;--right-panel-bg:#070710}[data-theme=neon]{--purple:#b060ff;--purple-glow:#b060ff99;--purple-dim:#b060ff26;--teal:#00ffb3;--green:#0f8;--amber:#fc0;--bg:#000005;--panel:#050510;--panel-2:#030308;--border:#1a0a2e;--border-hi:#b060ff40;--text:#fff;--muted:#ffffff80;--topbar-bg:#030308;--topbar-border:#8b5cf680;--sb-bg:#020205;--editor-bg:#030308;--editor-gutter:#020205;--gutter-bg:#020205;--divider:#ffffff17;--panel-text:#ffffffa6;--right-panel-bg:#000008}[data-theme=light]{--bg:#1a1528;--panel:#221d35;--panel-2:#1e1930;--topbar-bg:#221d35;--topbar-border:#8b5cf659;--border:#2d2650;--border-hi:#8b5cf640;--text:#e8e3f5;--muted:#e8e3f580;--editor-bg:#1e1930;--editor-gutter:#1a1528;--gutter-bg:#1a1528;--sb-bg:#161220;--divider:#ffffff0f;--panel-text:#e8e3f58c;--right-panel-bg:#070710}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);height:100vh;font-family:Nunito,sans-serif;overflow:hidden}#root{flex-direction:column;height:100vh;display:flex}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#2d2d42;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#3d3d55}.app-shell{background:var(--bg);width:100vw;height:100vh;transition:var(--transition-theme);flex-direction:column;display:flex;overflow:hidden}canvas{background:#070710!important}.topbar{background:var(--topbar-bg,#0d0d14);border-bottom:1px solid var(--topbar-border,#8b5cf638);color:var(--text);z-index:20;flex-shrink:0;align-items:stretch;height:52px;padding:0 0 0 16px;display:flex;box-shadow:0 1px 24px #8b5cf612}.topbar-logo{border-right:1px solid #ffffff12;flex-shrink:0;align-self:stretch;align-items:center;gap:8px;padding-right:16px;display:flex}.logo-text{letter-spacing:-.3px;font-size:17px;font-weight:900;line-height:1}.logo-jammr{color:#fff}.logo-code{color:#8b5cf6;margin-left:3px;font-weight:700}.topbar-divider{background:#ffffff12;flex-shrink:0;align-self:stretch;width:1px}.topbar-spacer{flex:1}.topbar-pill{color:var(--muted,#ffffffbf);cursor:pointer;letter-spacing:.03em;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:6px;flex-shrink:0;align-self:center;align-items:center;padding:4px 12px;font-family:Space Mono,monospace;font-size:11px;font-weight:400;transition:color .15s,background .15s,border-color .15s;display:flex}.topbar-pill:hover{color:var(--text,#fff);background:#8b5cf626;border-color:#8b5cf666}.topbar-pill:active{opacity:.7}.topbar-pill--active{color:var(--text,#fff);background:#8b5cf640;border-color:#8b5cf666}.topbar-pill--ai{color:#a78bfa}.topbar-pill--ai:hover,.topbar-pill--ai.topbar-pill--active{color:#c4b5fd;background:#8b5cf61a}.topbar-pill--collab{color:#f472b6}.topbar-pill--collab:hover,.topbar-pill--collab.topbar-pill--active{color:#f9a8d4;background:#ec48991a}.topbar-pill--discover{color:#34d399}.topbar-pill--discover:hover,.topbar-pill--discover.topbar-pill--active{color:#6ee7b7;background:#34d3991a}.topbar-pill--copied{color:#10b981!important;background:#10b98114!important}.topbar-pill--trophy{color:var(--amber);padding:4px 10px}.topbar-pill--trophy:hover,.topbar-pill--trophy.topbar-pill--active{color:var(--amber);background:#f5a6231f;border-color:#f5a62366}.topbar-coins{background:#f5a6231a;border:1px solid #f5a62340;border-radius:20px;flex-shrink:0;align-self:center;align-items:center;gap:4px;height:24px;padding:0 10px;display:flex}.topbar-coins-num{color:var(--amber);font-family:Space Mono,monospace;font-size:10px;font-weight:700;line-height:1}.user-avatar-wrap{align-self:stretch;align-items:center;padding:0 12px;display:flex;position:relative}.user-avatar{color:#fff;cursor:pointer;letter-spacing:0;background:linear-gradient(135deg,#8b5cf6,#1a9e7c);border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-family:Nunito,sans-serif;font-size:12px;font-weight:900;transition:opacity .15s,transform .1s;display:flex}.user-avatar:hover{opacity:.85;transform:scale(1.08)}.user-menu{background:var(--panel);z-index:200;border:1px solid #8b5cf640;border-radius:10px;min-width:180px;padding:6px;animation:.12s ease-out menu-drop;position:absolute;top:calc(100% + 4px);right:0;box-shadow:0 8px 32px #000000a6,0 0 0 1px #ffffff0a}@keyframes menu-drop{0%{opacity:0;transform:translateY(-4px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.user-menu-email{color:#ffffff59;white-space:nowrap;text-overflow:ellipsis;max-width:168px;padding:6px 10px 4px;font-family:Space Mono,monospace;font-size:10px;overflow:hidden}.user-menu-divider{background:#ffffff12;height:1px;margin:4px 0}.user-menu-item{color:#ffffffa6;text-align:left;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:6px;width:100%;padding:8px 10px;font-family:Space Mono,monospace;font-size:11px;font-weight:400;transition:background .1s,color .1s;display:block}.user-menu-item:hover{color:#ffffffe6;background:#ffffff0f}.user-menu-item--danger{color:#ef4444b3}.user-menu-item--danger:hover{color:#ef4444;background:#ef44441a}.topbar-signin-btn{color:var(--text,#ddd6ee);cursor:pointer;letter-spacing:.03em;background:0 0;border:1px solid #8b5cf666;border-radius:6px;flex-shrink:0;align-self:center;padding:4px 12px;font-family:Space Mono,monospace;font-size:11px;font-weight:400;transition:background .15s,border-color .15s,color .15s}.topbar-signin-btn:hover{border-color:var(--purple,#8b5cf6);color:#fff;background:#8b5cf626}.volume-wrap{color:#fff9;border-left:1px solid #ffffff12;flex-shrink:0;align-self:stretch;align-items:center;gap:7px;padding:0 14px;display:flex}.volume-icon-wrap{flex-shrink:0;align-items:center;display:flex}.volume-slider{appearance:none;cursor:pointer;background:#2d2d42;border-radius:2px;outline:none;width:72px;height:3px;transition:background .15s}.volume-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#8b5cf6;border-radius:50%;width:11px;height:11px;transition:transform .1s,box-shadow .1s;box-shadow:0 0 6px #8b5cf699}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.25);box-shadow:0 0 10px #8b5cf6cc}.volume-slider::-moz-range-thumb{cursor:pointer;background:#8b5cf6;border:none;border-radius:50%;width:11px;height:11px;box-shadow:0 0 6px #8b5cf699}.bpm-control{background:#0000004d;border-left:1px solid #ffffff12;border-right:1px solid #ffffff12;flex-shrink:0;align-self:stretch;align-items:center;gap:5px;padding:0 14px;display:flex}.bpm-adj{color:#ffffff59;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-family:Space Mono,monospace;font-size:14px;font-weight:700;line-height:1;transition:background .12s,color .12s,border-color .12s,box-shadow .12s,transform 80ms;display:flex}.bpm-adj:hover{color:#c084fc;background:#8b5cf626;border-color:#8b5cf680;box-shadow:0 0 8px #8b5cf633}.bpm-adj:active{transform:scale(.86)}.bpm-display{flex-direction:column;align-items:center;min-width:38px;display:flex}.bpm-number{color:#f5a623;text-shadow:0 0 14px #f5a62399,0 0 28px #f5a62333;letter-spacing:0;font-family:Space Mono,monospace;font-size:18px;font-weight:700;line-height:1}.bpm-label{color:#ffffff80;letter-spacing:2px;text-transform:uppercase;margin-top:2px;font-family:Space Mono,monospace;font-size:7px;font-weight:400;line-height:1}.run-btn{cursor:pointer;letter-spacing:.06em;border:none;border-radius:0;flex-shrink:0;align-self:stretch;align-items:center;gap:8px;padding:0 24px;font-family:Space Mono,monospace;font-size:12px;font-weight:700;transition:box-shadow .15s,filter .15s,opacity .1s;display:flex}.run-btn.stopped{color:#fff;background:linear-gradient(135deg,#16a34a 0%,#10b981 100%);box-shadow:inset 0 1px #ffffff2e,0 0 22px #10b98140}.run-btn.stopped:hover{filter:brightness(1.1);box-shadow:0 0 36px #10b98180,inset 0 1px #ffffff2e}.run-btn.running{color:#fff;background:linear-gradient(135deg,#ef4444 0%,#b91c1c 100%);box-shadow:inset 0 1px #ffffff24,0 0 22px #ef444440}.run-btn.running:hover{filter:brightness(1.08);box-shadow:0 0 32px #ef444480,inset 0 1px #ffffff24}.run-btn:active{opacity:.82}.user-section{flex-shrink:0;align-self:stretch;align-items:center;gap:10px;padding:0 16px;display:flex}.user-email{color:#6b7280;text-overflow:ellipsis;white-space:nowrap;max-width:160px;font-family:Space Mono,monospace;font-size:10px;overflow:hidden}.sign-out-btn{color:#6b7280;cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #ffffff1a;border-radius:6px;padding:4px 10px;font-family:Space Mono,monospace;font-size:10px;font-weight:400;transition:color .12s,border-color .12s,background .12s}.sign-out-btn:hover{color:#ef4444cc;background:#ef44440f;border-color:#ef444466}.ex-wrap{flex-shrink:0;align-self:stretch;align-items:stretch;display:flex;position:relative}.ex-dropdown{background:var(--panel);z-index:50;border:1px solid #ffffff14;border-radius:10px;min-width:188px;animation:.12s ease-out ex-drop-in;position:absolute;top:calc(100% + 4px);left:0;overflow:hidden;box-shadow:0 12px 40px #000000b3,0 0 0 1px #8b5cf61a}@keyframes ex-drop-in{0%{opacity:0;transform:translateY(-5px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.ex-item{text-align:left;color:#6b7280;cursor:pointer;letter-spacing:.02em;background:0 0;border:none;border-bottom:1px solid #ffffff0d;width:100%;padding:10px 14px;font-family:Space Mono,monospace;font-size:11px;transition:background .1s,color .1s;display:block}.ex-item:last-child{border-bottom:none}.ex-item:hover{color:#e2e8f0;background:#8b5cf61f}.main-area{flex:1;min-height:0;display:flex;overflow:hidden}.split-handle{background:var(--border);cursor:col-resize;z-index:5;flex-shrink:0;width:5px;transition:background .15s;position:relative}.split-handle:hover,.split-handle:active{background:#8b5cf680}.fn-ref-panel{border-bottom:1px solid var(--border);background:var(--editor-gutter);flex-direction:column;flex-shrink:0;max-height:220px;display:flex;overflow:hidden}.fn-ref-header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:6px 12px;display:flex}.fn-ref-header span{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-family:Space Mono,monospace;font-size:10px}.fn-ref-close{color:var(--muted);cursor:pointer;background:0 0;border:none;align-items:center;padding:2px;display:flex}.fn-ref-list{scrollbar-width:thin;scrollbar-color:#8b5cf64d transparent;flex-direction:column;display:flex;overflow-y:auto}.fn-ref-item{cursor:pointer;text-align:left;background:0 0;border:none;border-bottom:1px solid #ffffff08;justify-content:space-between;align-items:center;gap:8px;padding:5px 12px;transition:background .1s;display:flex}.fn-ref-item:hover{background:#8b5cf614}.fn-ref-name{color:#67e8f9;white-space:nowrap;font-family:Fira Code,monospace;font-size:11px}.fn-ref-desc{color:var(--muted);white-space:nowrap;font-family:Space Mono,monospace;font-size:10px}.sb-save-badge{color:#10b981;background:#10b9811a;border:1px solid #10b98140;border-radius:4px;flex-shrink:0;padding:1px 6px;font-family:Space Mono,monospace;font-size:.6rem}.sb-unsaved-badge{color:#f5a623b3;background:#f5a62314;border:1px solid #f5a62340;border-radius:4px;flex-shrink:0;padding:1px 6px;font-family:Space Mono,monospace;font-size:.6rem}.sb-shortcuts-wrap{position:relative}.sb-shortcuts-btn{border:1px solid var(--border,#1e1e2e);color:#ffffff59;cursor:pointer;background:0 0;border-radius:4px;padding:2px 7px;font-family:Space Mono,monospace;font-size:.6rem;transition:color .15s,border-color .15s}.sb-shortcuts-btn:hover{color:#fff9;border-color:#8b5cf659}.sb-shortcuts-popup{background:var(--panel);z-index:200;border:1px solid #8b5cf640;border-radius:8px;min-width:220px;padding:8px 10px;animation:.12s ease-out menu-drop;position:absolute;bottom:calc(100% + 6px);left:0;box-shadow:0 8px 32px #000000a6}.sb-shortcut{color:#ffffff8c;justify-content:space-between;align-items:center;gap:12px;padding:4px 0;font-family:Space Mono,monospace;font-size:10px;display:flex}.sb-shortcut kbd{color:#ffffffb3;background:#ffffff12;border:1px solid #ffffff1f;border-radius:4px;padding:2px 6px;font-family:Space Mono,monospace;font-size:9px}.left-panel{border-right:1px solid var(--border);background:var(--editor-bg);flex-direction:column;flex:none;min-width:0;display:flex;overflow:hidden}.editor-tab-bar{background:var(--editor-gutter);border-bottom:1px solid var(--border);flex-shrink:0;align-items:stretch;height:33px;display:flex}.editor-tab{color:var(--muted);border-right:1px solid var(--border);cursor:default;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;gap:7px;padding:0 16px;font-family:Space Mono,monospace;font-size:11px;display:flex;position:relative}.editor-tab.active{background:var(--editor-bg);color:var(--text)}.editor-tab.active:after{content:"";background:#8b5cf6;height:2px;position:absolute;bottom:0;left:0;right:0;box-shadow:0 0 8px #8b5cf699}.tab-dot{background:#8b5cf6;border-radius:50%;flex-shrink:0;width:6px;height:6px;box-shadow:0 0 5px #8b5cf6cc}.left-panel-editor{flex-direction:column;flex:1;display:flex;overflow:hidden}.status-bar{background:var(--sb-bg);border-top:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;height:26px;padding:0 10px;display:flex}.sb-left{align-items:center;gap:7px;min-width:0;display:flex;overflow:hidden}.sb-indicator{background:#2d2d42;border-radius:50%;flex-shrink:0;width:6px;height:6px;transition:background .25s,box-shadow .25s}.sb-running .sb-indicator{background:#10b981;animation:1.4s ease-in-out infinite sb-live-pulse;box-shadow:0 0 7px #10b981}@keyframes sb-live-pulse{0%,to{opacity:1;box-shadow:0 0 4px #10b981}50%{opacity:.75;box-shadow:0 0 12px #10b981,0 0 22px #10b9814d}}.sb-error .sb-indicator{background:#ef4444;box-shadow:0 0 7px #ef4444}.sb-msg{color:#ffffffb3;white-space:nowrap;text-overflow:ellipsis;font-family:Space Mono,monospace;font-size:.65rem;transition:color .2s;overflow:hidden}.sb-running .sb-msg{color:#10b981cc}.sb-error .sb-msg{color:#ef4444cc}.sb-live-badge{color:#a78bfa;background:#8b5cf61f;border:1px solid #8b5cf64d;border-radius:4px;flex-shrink:0;padding:1px 7px;font-family:Space Mono,monospace;font-size:.6rem;animation:1.8s ease-in-out infinite sb-blink}@keyframes sb-blink{0%,to{opacity:1}50%{opacity:.5}}.sb-right{flex-shrink:0;align-items:center;gap:8px;display:flex}.sb-sep{background:#ffffff12;width:1px;height:10px}.sb-meta{color:#ffffffb3;white-space:nowrap;font-family:Space Mono,monospace;font-size:.6rem}.mode-btn{border:1px solid var(--border,#1e1e2e);color:#ffffff8c;cursor:pointer;background:0 0;border-radius:4px;padding:2px 10px;font-family:Space Mono,monospace;font-size:.72rem;transition:background .15s,border-color .15s,color .15s}.mode-btn--active{border-color:var(--purple,#8b5cf6);color:#fff;background:#8b5cf633}.mode-btn:not(.mode-btn--active):hover{color:#fff9;border-color:#8b5cf666}.right-panel{flex-direction:column;flex:1;min-width:300px;display:flex;position:relative;overflow:hidden;background:#070710!important}.right-panel canvas,.right-panel .live-canvas,canvas#visual-canvas{background:#070710!important}@keyframes idle-drift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.right-panel--idle{background:linear-gradient(-45deg, var(--right-panel-bg), var(--panel-2), var(--right-panel-bg), var(--panel-2));background-size:400% 400%;animation:18s infinite idle-drift}.right-panel:before{content:"";pointer-events:none;z-index:0;opacity:0;background-image:linear-gradient(#8b5cf606 1px,#0000 1px),linear-gradient(90deg,#8b5cf606 1px,#0000 1px);background-size:52px 52px;transition:opacity .7s;position:absolute;inset:0}.right-panel--idle:before{opacity:1}.live-canvas{z-index:1;flex:1;width:100%;min-height:0;display:block;position:relative}.live-badge{letter-spacing:2px;color:#ffffffbf;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#070710d1;border:1px solid #10b98147;border-radius:20px;align-items:center;gap:7px;padding:5px 13px 5px 10px;font-family:Space Mono,monospace;font-size:10px;font-weight:700;display:flex;position:absolute;top:14px;right:14px;box-shadow:0 0 18px #10b98124}.live-dot{background:#10b981;border-radius:50%;flex-shrink:0;width:6px;height:6px;animation:1.2s ease-in-out infinite livepulse;box-shadow:0 0 6px #10b981,0 0 14px #10b98166}@keyframes livepulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}.canvas-demo-banner{z-index:10;color:#ffffffa6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap;background:#0a0a16e0;border:1px solid #8b5cf652;border-radius:20px;align-items:center;gap:10px;padding:6px 12px 6px 16px;font-family:Space Mono,monospace;font-size:10px;animation:.3s cubic-bezier(.22,1,.36,1) banner-in;display:flex;position:absolute;top:46px;left:50%;transform:translate(-50%)}@keyframes banner-in{0%{opacity:0;transform:translate(-50%)translateY(-10px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.canvas-demo-dismiss{color:#ffffff59;cursor:pointer;background:0 0;border:none;flex-shrink:0;align-items:center;padding:3px;transition:color .15s;display:flex}.canvas-demo-dismiss:hover{color:#ffffffbf}.syntax-toast{z-index:9000;color:#10b981;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);white-space:nowrap;background:#0a0a16eb;border:1px solid #10b98180;border-radius:20px;padding:8px 20px;font-family:Space Mono,monospace;font-size:11px;animation:.3s cubic-bezier(.22,1,.36,1) syntax-toast-in;position:fixed;bottom:28px;left:50%;transform:translate(-50%)}@keyframes syntax-toast-in{0%{opacity:0;transform:translate(-50%)translateY(12px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.canvas-idle-overlay{z-index:2;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;inset:0}.canvas-idle-particles{position:absolute;inset:0;overflow:hidden}.canvas-idle-particle{width:3px;height:3px;left:calc(8% + var(--i,0) * 12%);animation:idle-particle calc(10s + var(--i,0) * 1.4s) ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.7s);background:#8b5cf673;border-radius:50%;position:absolute}.canvas-idle-particle:nth-child(odd){background:#1a9e7c61;width:4px;height:4px}.canvas-idle-particle:nth-child(3n){background:#d94f8a52}@keyframes idle-particle{0%{opacity:0;transform:translateY(105vh)scale(.7)}6%{opacity:.7}80%{opacity:.25}to{opacity:0;transform:translateY(-30px)scale(1.15)}}.canvas-idle-text{z-index:1;color:#ffffff38;letter-spacing:.04em;align-items:center;gap:6px;font-family:Space Mono,monospace;font-size:12px;display:flex;position:relative}.canvas-idle-run{color:#10b9818c;font-weight:700}.tut-veil{z-index:1000;background:#000000d1;position:fixed;inset:0}.tut-blocker{z-index:1001;cursor:default;position:fixed;inset:0}.tut-spot{z-index:1002;pointer-events:none;border:2px solid #8b5cf6e6;border-radius:10px;transition:top .38s cubic-bezier(.4,0,.2,1),left .38s cubic-bezier(.4,0,.2,1),width .38s cubic-bezier(.4,0,.2,1),height .38s cubic-bezier(.4,0,.2,1);position:fixed;box-shadow:0 0 0 9999px #000000d1,0 0 0 5px #8b5cf61f,0 0 28px #8b5cf666}.tut-spot:before,.tut-spot:after{content:"";border-radius:inherit;pointer-events:none;border:2px solid #8b5cf680;animation:2s ease-out infinite tut-ring;position:absolute}.tut-spot:before{border-radius:16px;inset:-8px}.tut-spot:after{border-color:#8b5cf647;border-radius:22px;animation-delay:.5s;inset:-18px}@keyframes tut-ring{0%{opacity:.8;transform:scale(1)}80%{opacity:0;transform:scale(1.04)}to{opacity:0;transform:scale(1.04)}}.tut-card{z-index:1003;opacity:0;pointer-events:all;background:#fff;border:1.5px solid #8b5cf633;border-radius:18px;padding:22px 22px 18px;font-family:Nunito,sans-serif;transition:opacity .22s,transform .22s;transform:translateY(6px)scale(.97);box-shadow:0 4px 8px #0000001a,0 16px 48px #00000059}.tut-card--on{opacity:1;transform:translateY(0)scale(1)}.tut-card-head{align-items:flex-start;gap:10px;margin-bottom:10px;display:flex}.tut-card-title{color:#1a0d2e;flex:1;margin:0;font-size:16px;font-weight:900;line-height:1.35}.tut-card-x{color:#8a7aaa;cursor:pointer;background:#f0edf8;border:none;border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;font-size:14px;transition:background .1s,color .1s;display:flex}.tut-card-x:hover{color:#e05a2b;background:#fde8df}.tut-card-desc{color:#5a4a6a;margin:0 0 18px;font-size:14px;line-height:1.55}.tut-card-foot{justify-content:space-between;align-items:center;gap:10px;display:flex}.tut-dots{flex-wrap:wrap;align-items:center;gap:5px;display:flex}.tut-dot{background:#e0d8f0;border-radius:50%;width:7px;height:7px;transition:background .2s,transform .2s,width .2s}.tut-dot--cur{background:#8b5cf6;border-radius:4px;width:14px;transform:scale(1.35)}.tut-dot--done{background:#1a9e7c}.tut-next-btn{color:#fff;cursor:pointer;white-space:nowrap;background:#8b5cf6;border:none;border-radius:11px;flex-shrink:0;padding:8px 20px;font-family:Nunito,sans-serif;font-size:14px;font-weight:900;transition:background .12s,transform 80ms,box-shadow .12s;box-shadow:0 3px #6d28d9}.tut-next-btn:hover{background:#7c3aed;box-shadow:0 2px #5b21b6}.tut-next-btn:active{box-shadow:none;transform:translateY(2px)}.tut-arrow{pointer-events:none;animation:.9s ease-in-out infinite tut-bounce}@keyframes tut-bounce{0%,to{transform:translate(0)}50%{transform:translate(6px)}}.tut-arrow--right{animation-name:tut-bounce-right}@keyframes tut-bounce-right{0%,to{transform:translate(0)}50%{transform:translate(-6px)}}.tut-arrow--down{animation-name:tut-bounce-down}@keyframes tut-bounce-down{0%,to{transform:translateY(0)}50%{transform:translateY(6px)}}.tut-card--done{opacity:0!important;transform:translateY(-6px)scale(.96)!important}.tut-hint{color:#8b5cf6;letter-spacing:.04em;background:#8b5cf61a;border:1px solid #8b5cf64d;border-radius:6px;padding:4px 10px;font-family:Space Mono,monospace;font-size:10px;font-weight:700;animation:1.6s ease-in-out infinite hint-pulse}@keyframes hint-pulse{0%,to{box-shadow:0 0 #8b5cf64d}50%{box-shadow:0 0 0 4px #8b5cf600}}.tut-ai-loading{align-items:center;gap:4px;height:14px;display:inline-flex}.tut-ai-loading span{background:#8b5cf6;border-radius:50%;width:5px;height:5px;animation:1.2s ease-in-out infinite tut-ai-dot;display:inline-block}.tut-ai-loading span:nth-child(2){animation-delay:.2s}.tut-ai-loading span:nth-child(3){animation-delay:.4s}@keyframes tut-ai-dot{0%,80%,to{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1.2)}}.canvas-header{z-index:5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#070710e6;border-bottom:1px solid #ffffff0f;flex-shrink:0;justify-content:space-between;align-items:center;gap:10px;height:34px;padding:0 12px;display:flex}.canvas-display-modes{align-items:center;gap:2px;display:flex}.cdm-btn{color:#ffffff80;cursor:pointer;letter-spacing:.04em;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:5px;padding:3px 7px;font-family:Space Mono,monospace;font-size:9px;font-weight:700;transition:all .12s}.cdm-btn:hover{color:#ffffffbf;background:#ffffff0f}.cdm-btn--active{color:#fff;background:#8b5cf64d;border-color:#8b5cf680}.theme-pills{flex-shrink:0;align-self:center;align-items:center;gap:3px;padding:0 10px;display:flex}.theme-pill{color:#fff6;cursor:pointer;letter-spacing:.06em;white-space:nowrap;background:0 0;border:1px solid #ffffff1f;border-radius:20px;padding:4px 9px;font-family:Space Mono,monospace;font-size:9px;font-weight:700;transition:all .15s}.theme-pill:hover{color:#ffffffb3;background:#8b5cf61a;border-color:#8b5cf673}.theme-pill--active{color:#fff;background:#8b5cf640;border-color:#8b5cf699}.topbar-more-wrap{align-items:center;display:none;position:relative}.topbar-more-btn{color:#ffffff73;cursor:pointer;background:0 0;border:1px solid #ffffff1f;border-radius:6px;align-self:center;padding:2px 10px;font-family:Space Mono,monospace;font-size:14px;font-weight:700;transition:all .12s}.topbar-more-btn:hover{color:#fff;background:#8b5cf626;border-color:#8b5cf666}.topbar-more-dropdown{background:var(--panel);z-index:300;border:1px solid #8b5cf640;border-radius:10px;min-width:140px;padding:6px;animation:.12s ease-out menu-drop;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 8px 32px #0009}.topbar-more-item{color:#fff9;cursor:pointer;text-align:left;white-space:nowrap;background:0 0;border:none;border-radius:6px;width:100%;padding:8px 12px;font-family:Space Mono,monospace;font-size:11px;transition:background .1s,color .1s;display:block}.topbar-more-item:hover{color:#fff;background:#8b5cf61f}.topbar-more-item--collab{color:#f472b6}.topbar-more-item--collab:hover{color:#f9a8d4;background:#ec48991a}@media (width<=1150px){.topbar-expandable{display:none!important}.topbar-more-wrap{display:flex}}.ai-line-ref{color:#a78bfa;cursor:pointer;vertical-align:baseline;background:#8b5cf61f;border:1px solid #8b5cf64d;border-radius:4px;margin:0 2px;padding:1px 6px;font-family:Space Mono,monospace;font-size:10px;font-weight:700;transition:background .12s,border-color .12s;display:inline-block}.ai-line-ref:hover{background:#8b5cf638;border-color:#8b5cf68c}.ai-empty-tagline{color:#fff9;text-align:center;font-family:Nunito,sans-serif;font-size:16px;font-weight:900}.ai-empty-sub{color:#ffffff40;text-align:center;font-family:Nunito,sans-serif;font-size:12px;font-weight:600;line-height:1.55}.ai-msg-text{color:#ffffffb8;white-space:pre-wrap;font-family:Nunito,sans-serif;font-size:13px;font-weight:600;line-height:1.65}.ai-msg-user{color:#ffffffd9;background:#8b5cf626;border:1px solid #8b5cf640;border-radius:12px 12px 3px;align-self:flex-end;max-width:88%;padding:9px 13px;font-family:Nunito,sans-serif;font-size:13px;font-weight:600;line-height:1.5}.editor-outer{flex-direction:column;height:100%;display:flex;position:relative}.editor-line-arrow{z-index:10;pointer-events:none;animation:.7s ease-in-out infinite arrow-bounce;position:absolute;right:6px;transform:translateY(-50%)}@keyframes arrow-bounce{0%,to{transform:translateY(-50%)translate(0)}50%{transform:translateY(-50%)translate(-4px)}}[data-theme=light] .topbar{border-bottom-color:var(--topbar-border);box-shadow:0 1px 20px #7c3aed14}[data-theme=light] .left-panel{background:var(--editor-bg);border-right-color:var(--border)}[data-theme=light] .status-bar{background:var(--sb-bg);border-top-color:var(--border)}[data-theme=light] .run-btn.stopped{background:linear-gradient(135deg,#059669,#10b981)}[data-theme=light] .run-btn.running{background:linear-gradient(135deg,#dc2626,#b91c1c)}[data-theme=light] .right-panel,[data-theme=light] .right-panel--idle{background:#070710!important}[data-theme=neon] .topbar{box-shadow:0 1px 30px #b060ff26}[data-theme=neon] .bpm-number{text-shadow:0 0 14px #fc0c,0 0 28px #fc06}[data-theme=neon] .run-btn.stopped{box-shadow:inset 0 1px #ffffff2e,0 0 30px #00ff8859}[data-theme=neon] .run-btn.running{box-shadow:inset 0 1px #ffffff24,0 0 30px #ef444466}[data-theme=neon] .sb-running .sb-indicator{box-shadow:0 0 14px #0f8,0 0 28px #00ff8880}[data-theme=neon] .canvas-header{background:#000008f2}[data-theme=neon] .cdm-btn--active{color:#d4a8ff;background:#b060ff2e;border-color:#b060ff80}[data-theme=light] .topbar-pill{color:var(--muted)}[data-theme=light] .topbar-pill:hover{color:var(--text);background:#8b5cf61f;border-color:#8b5cf659}[data-theme=light] .topbar-pill--active{color:var(--text)}[data-theme=light] .topbar-divider{background:#ffffff12}[data-theme=light] .canvas-header{background:#070710eb;border-bottom-color:#ffffff0f}[data-theme=light] .cdm-btn{color:#e8e3f573}[data-theme=light] .cdm-btn:hover{color:#e8e3f5d9;background:#ffffff0f}[data-theme=light] .cdm-btn--active{color:#c4b5fd;background:#8b5cf647;border-color:#8b5cf680}[data-theme=light] .status-bar{color:var(--text)}[data-theme=light] .sb-msg{color:var(--muted)}[data-theme=light] .sb-running .sb-msg{color:#10b981}[data-theme=light] .sb-error .sb-msg{color:#ef4444}[data-theme=light] .sb-meta{color:var(--muted)}[data-theme=light] .mode-btn{color:var(--muted);border-color:var(--border)}[data-theme=light] .mode-btn--active{color:#c4b5fd;background:#8b5cf626;border-color:#8b5cf673}[data-theme=light] .user-menu{background:var(--panel);border-color:var(--border)}[data-theme=light] .user-menu-email{color:var(--muted)}[data-theme=light] .user-menu-item{color:var(--panel-text)}[data-theme=light] .user-menu-item:hover{color:var(--text);background:#ffffff0f}[data-theme=light] .user-menu-divider{background:var(--divider)}[data-theme=light] .bpm-number{color:#e9a522;text-shadow:0 0 14px #e9a52273}[data-theme=light] .bpm-label{color:#e9a5228c}[data-theme=light] .volume-icon-wrap{color:var(--muted)}[data-theme=light] .tut-mode-toggle{background:#ffffff0d;border-color:#ffffff1a}[data-theme=light] .tut-mode-btn{color:var(--muted)}[data-theme=light] .tut-mode-btn--active{color:var(--text);background:#8b5cf647}[data-theme=light] .sb-shortcuts-btn{color:var(--muted);border-color:var(--border)}[data-theme=light] .sb-shortcuts-btn:hover{color:var(--text);border-color:#8b5cf666}[data-theme=light] .sb-shortcuts-popup{background:var(--panel)}[data-theme=light] .sb-shortcut{color:var(--muted)}[data-theme=light] .sb-shortcut kbd{color:var(--panel-text);background:#ffffff0f;border-color:#ffffff1f}[data-theme=light] .topbar-more-btn{color:var(--muted);border-color:var(--border)}[data-theme=light] .topbar-more-dropdown{background:var(--panel)}[data-theme=light] .topbar-more-item{color:var(--panel-text)}[data-theme=light] .topbar-more-item:hover{color:var(--text);background:#8b5cf61a}[data-theme=light] .topbar-more-item--collab{color:#f472b6}[data-theme=light] .fn-ref-name{color:#67e8f9}[data-theme=light] .fn-ref-item:hover{background:#8b5cf61a}[data-theme=light] .editor-tab{color:var(--muted);border-right-color:var(--border)}[data-theme=light] .editor-tab.active{color:var(--text)}.perf-btn{color:#ffffff73;cursor:pointer;letter-spacing:.05em;background:0 0;border:none;border-left:1px solid #ffffff12;flex-shrink:0;align-self:stretch;align-items:center;gap:7px;padding:0 18px;font-family:Space Mono,monospace;font-size:11px;font-weight:700;transition:background .15s,color .15s;display:flex}.perf-btn:hover{color:#3dc9a0;background:#1a9e7c1a}.perf-btn--active{color:#ef4444cc;background:#ef444414}.perf-mode .topbar,.perf-mode .left-panel,.perf-mode .split-handle{display:none}.perf-mode .main-area{height:100vh;display:block}.perf-mode .right-panel{z-index:100;width:100vw;height:100vh;position:fixed;inset:0}.perf-hud{-webkit-backdrop-filter:blur(18px);z-index:300;background:#050510d1;border:1px solid #8b5cf638;border-radius:16px;align-items:center;gap:18px;padding:12px 20px;transition:opacity .5s,transform .5s;display:flex;position:fixed;bottom:28px;left:28px;box-shadow:0 8px 40px #0000008c,0 0 0 1px #ffffff0a}.perf-hud--hidden{opacity:0;pointer-events:none;transform:translateY(8px)}.perf-hud-logo{letter-spacing:-.3px;font-family:Nunito,sans-serif;font-size:15px;font-weight:900}.perf-hud-logo .logo-jammr{color:#fff}.perf-hud-logo .logo-code{color:#8b5cf6;margin-left:2px;font-weight:700}.perf-hud-bpm{color:#f5a623;text-shadow:0 0 14px #f5a6238c;letter-spacing:0;font-family:Space Mono,monospace;font-size:14px;font-weight:700}.perf-hud-run{color:#fff;cursor:pointer;background:linear-gradient(135deg,#16a34a,#10b981);border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;transition:filter .12s,box-shadow .12s;display:flex;box-shadow:0 0 18px #10b9814d}.perf-hud-run.running{background:linear-gradient(135deg,#ef4444,#b91c1c);box-shadow:0 0 18px #ef444459}.perf-hud-run:hover{filter:brightness(1.15)}.perf-hud-run:active{filter:brightness(.9)}.perf-hud-exit{color:#fff6;cursor:pointer;letter-spacing:.05em;background:0 0;border:1px solid #ffffff1f;border-radius:9px;padding:6px 14px;font-family:Space Mono,monospace;font-size:10px;font-weight:700;transition:border-color .12s,color .12s,background .12s}.perf-hud-exit:hover{color:#ef4444;background:#ef44440f;border-color:#ef444473}.cm-tooltip-autocomplete{background:var(--panel,#111)!important;border:1px solid var(--border,#1e1e2e)!important;border-radius:8px!important;padding:4px!important;font-family:Fira Code,monospace!important;overflow:hidden!important;box-shadow:0 8px 32px #0009,0 0 0 1px #8b5cf60f!important}.cm-tooltip-autocomplete>ul{max-height:240px!important;font-family:Fira Code,monospace!important}.cm-tooltip-autocomplete>ul>li{color:var(--text,#ddd6ee)!important;border-radius:5px!important;align-items:center!important;gap:8px!important;padding:5px 12px!important;font-size:12px!important;transition:background 80ms!important;display:flex!important}.cm-tooltip-autocomplete>ul>li[aria-selected=true],.cm-tooltip-autocomplete>ul>li[aria-selected]{color:#fff!important;background:#8b5cf640!important}.cm-completionIcon{opacity:.7;width:14px}.cm-completionIcon-function:after{content:"f";color:#67e8f9;font-size:11px;font-style:italic}.cm-completionIcon-text:after{content:"\"";color:#86efac;font-size:13px}.cm-completionLabel{color:var(--text,#ddd6ee)}.cm-completionDetail{white-space:nowrap;margin-left:auto;color:var(--muted,#ffffff52)!important;font-size:10px!important}.inst-toast{color:#a78bfa;letter-spacing:.04em;z-index:9999;background:#0a0a18eb;border:1px solid #8b5cf659;border-radius:10px;padding:10px 18px;font-family:Space Mono,monospace;font-size:11px;font-weight:700;animation:.2s ease-out toast-in,.3s ease-in 1.5s forwards toast-out;position:fixed;bottom:28px;right:28px;box-shadow:0 6px 24px #0009}@keyframes toast-in{0%{opacity:0;transform:translateY(10px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-6px)scale(.96)}}.tut-mode-toggle{background:#ffffff0a;border:1px solid #ffffff12;border-radius:8px;flex-shrink:0;align-self:center;align-items:center;gap:2px;padding:3px;display:flex}.tut-mode-btn{color:#ffffff61;cursor:pointer;letter-spacing:.04em;background:0 0;border:none;border-radius:6px;padding:4px 12px;font-family:Space Mono,monospace;font-size:10px;font-weight:700;transition:background .15s,color .15s}.tut-mode-btn:not(.tut-mode-btn--active):hover{color:#ffffffa6}.vb{scrollbar-width:thin;scrollbar-color:#8b5cf64d transparent;background:var(--editor-bg,#0d0d14);flex-direction:column;flex:1;display:flex;overflow-y:auto}.vb-parse-warn{color:#f5a623bf;letter-spacing:.02em;background:#f5a62314;border-bottom:1px solid #f5a62338;flex-shrink:0;padding:7px 14px;font-family:Space Mono,monospace;font-size:9px}.vb-section{border-bottom:1px solid var(--border,#1e1e2e);flex-shrink:0}.vb-section-header{background:var(--editor-gutter,#0a0a10);border-bottom:1px solid var(--border,#1e1e2e);justify-content:space-between;align-items:center;padding:7px 14px;display:flex}.vb-section-title{letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#ffffff59);font-family:Space Mono,monospace;font-size:9px;font-weight:700}.vb-section-hint{color:#ffffff2e;letter-spacing:.01em;font-family:Space Mono,monospace;font-size:8px}.vb-tempo-row{background:var(--panel-2,#0d0d14);align-items:center;gap:10px;height:64px;padding:0 14px;display:flex}.vb-tempo-label{letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#ffffff59);flex-shrink:0;font-family:Space Mono,monospace;font-size:9px;font-weight:700}.vb-tempo-val{color:#f5a623;text-shadow:0 0 14px #f5a6238c,0 0 28px #f5a62333;text-align:right;flex-shrink:0;min-width:42px;font-family:Space Mono,monospace;font-size:22px;font-weight:700}.vb-slider{appearance:none;cursor:pointer;background:#ffffff14;border-radius:2px;outline:none;flex:1;min-width:0;height:4px}.vb-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#8b5cf6;border-radius:50%;width:14px;height:14px;transition:transform .1s,box-shadow .1s;box-shadow:0 0 7px #8b5cf6b3}.vb-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 12px #8b5cf6e6}.vb-slider::-moz-range-thumb{cursor:pointer;background:#8b5cf6;border:none;border-radius:50%;width:14px;height:14px}.vb-tempo-slider{min-width:0}.vb-drum-grid{grid-template-columns:repeat(4,1fr);gap:5px;padding:10px 14px;display:grid}.vb-pad{cursor:pointer;background:#ffffff05;border:1px solid #ffffff0f;border-radius:7px;flex-direction:column;transition:border-color .15s,box-shadow .15s,background .15s;display:flex;overflow:hidden}.vb-pad--active{border-color:var(--pad-color,#8b5cf6);box-shadow:0 0 10px var(--pad-color,#8b5cf680);background:#ffffff0d}.vb-pad-btn{cursor:pointer;background:0 0;border:none;flex:1;justify-content:center;align-items:center;min-height:48px;padding:10px 4px 7px;transition:background .1s;display:flex}.vb-pad-btn:hover{background:#ffffff08}.vb-pad-label{color:#ffffff4d;letter-spacing:.04em;text-transform:uppercase;text-align:center;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:Space Mono,monospace;font-size:8px;font-weight:700}.vb-pad--active .vb-pad-label{color:var(--pad-color,#8b5cf6)}.vb-pad-every{color:#ffffff40;cursor:pointer;text-align:center;appearance:none;background:#00000040;border:none;border-top:1px solid #ffffff0d;outline:none;width:100%;padding:3px 0;font-family:Space Mono,monospace;font-size:9px;font-weight:700}.vb-pad-every:hover{background:#ffffff0a}.vb-pad--active .vb-pad-every{color:var(--pad-color,#8b5cf6)}.vb-melody-body{flex-direction:column;gap:10px;padding:10px 14px;display:flex}.vb-row{flex-wrap:wrap;align-items:center;gap:7px;display:flex}.vb-label{letter-spacing:.06em;text-transform:uppercase;color:#ffffff4d;flex-shrink:0;min-width:60px;font-family:Space Mono,monospace;font-size:9px;font-weight:700}.vb-label--inline{min-width:auto;margin-left:8px}.vb-inst-grid{flex-wrap:wrap;gap:4px;display:flex}.vb-inst-btn{color:#ffffff61;cursor:pointer;letter-spacing:.02em;background:0 0;border:1px solid #ffffff14;border-radius:5px;padding:3px 9px;font-family:Space Mono,monospace;font-size:9px;font-weight:700;transition:border-color .12s,color .12s,background .12s}.vb-inst-btn:hover{color:#c4b5fd;border-color:#8b5cf673}.vb-inst-btn--active{color:#c4b5fd;background:#8b5cf633;border-color:#8b5cf680}.vb-select{color:var(--text,#ddd6ee);cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:6px;outline:none;padding:4px 8px;font-family:Space Mono,monospace;font-size:10px;transition:border-color .12s}.vb-select:hover{border-color:#8b5cf673}.vb-oct-btn{color:#ffffff73;cursor:pointer;background:#ffffff08;border:1px solid #ffffff14;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-family:Space Mono,monospace;font-size:14px;line-height:1;transition:border-color .12s,color .12s,background .12s;display:flex}.vb-oct-btn:hover{color:#c4b5fd;border-color:#8b5cf673}.vb-oct-val{color:#a78bfa;text-align:center;min-width:16px;font-family:Space Mono,monospace;font-size:13px;font-weight:700}.vb-note-pills{flex-wrap:wrap;gap:4px;display:flex}.vb-note-pill{color:#ffffff52;cursor:pointer;background:0 0;border:1px solid #ffffff14;border-radius:5px;padding:3px 8px;font-family:Fira Code,monospace;font-size:11px;font-weight:600;transition:border-color .12s,color .12s,background .12s}.vb-note-pill:hover{color:#c4b5fd;border-color:#8b5cf673}.vb-note-pill--active{color:#c4b5fd;background:#8b5cf633;border-color:#8b5cf680}.vb-pills{flex-wrap:wrap;gap:3px;display:flex}.vb-pill{color:#ffffff52;cursor:pointer;background:0 0;border:1px solid #ffffff14;border-radius:5px;padding:3px 8px;font-family:Space Mono,monospace;font-size:9px;font-weight:700;transition:border-color .12s,color .12s,background .12s}.vb-pill:hover{color:#c4b5fd;border-color:#8b5cf673}.vb-pill--active{color:#c4b5fd;background:#8b5cf633;border-color:#8b5cf680}.vb-toggle{color:#ffffff52;cursor:pointer;letter-spacing:.06em;background:0 0;border:1px solid #ffffff14;border-radius:5px;flex-shrink:0;padding:3px 12px;font-family:Space Mono,monospace;font-size:9px;font-weight:700;transition:border-color .12s,color .12s,background .12s}.vb-toggle--on{color:#c4b5fd;background:#8b5cf633;border-color:#8b5cf680}.vb-effects-body{flex-direction:column;gap:10px;padding:10px 14px;display:flex}.vb-fx-row{align-items:center;gap:8px;display:flex}.vb-fx-label{letter-spacing:.06em;text-transform:uppercase;color:#ffffff4d;flex-shrink:0;min-width:40px;font-family:Space Mono,monospace;font-size:9px;font-weight:700}.vb-fx-hint{color:#ffffff2e;white-space:nowrap;flex-shrink:0;font-family:Space Mono,monospace;font-size:8px}.vb-fx-val{color:#ffffff61;text-align:right;flex-shrink:0;min-width:28px;font-family:Space Mono,monospace;font-size:9px;font-weight:700}.vb-vis-grid{flex-wrap:wrap;gap:6px;padding:10px 14px;display:flex}.vb-vis-btn{color:#ffffff52;cursor:pointer;letter-spacing:.06em;background:0 0;border:1px solid #ffffff14;border-radius:6px;padding:6px 20px;font-family:Space Mono,monospace;font-size:10px;font-weight:700;transition:border-color .12s,color .12s,background .12s,box-shadow .12s}.vb-vis-btn:hover{color:#c4b5fd;border-color:#8b5cf673}.vb-vis-btn--active{color:#c4b5fd;background:#8b5cf633;border-color:#8b5cf680;box-shadow:0 0 10px #8b5cf64d}[data-theme=light] .vb-section-header{background:var(--editor-gutter)}[data-theme=light] .vb-section-title,[data-theme=light] .vb-label,[data-theme=light] .vb-fx-label{color:var(--muted)}[data-theme=light] .vb-select{color:var(--text);border-color:var(--border)}[data-theme=light] .vb-inst-btn{color:var(--muted);border-color:var(--border)}[data-theme=light] .vb-inst-btn--active{color:#c4b5fd}[data-theme=light] .vb-note-pill{color:var(--muted);border-color:var(--border)}[data-theme=light] .vb-note-pill--active{color:#c4b5fd}[data-theme=light] .vb-pill{color:var(--muted);border-color:var(--border)}[data-theme=light] .vb-pill--active{color:#c4b5fd}[data-theme=light] .vb-toggle{color:var(--muted);border-color:var(--border)}[data-theme=light] .vb-toggle--on{color:#c4b5fd}[data-theme=light] .vb-vis-btn{color:var(--muted);border-color:var(--border)}[data-theme=light] .vb-vis-btn--active{color:#c4b5fd}[data-theme=light] .vb-oct-btn{color:var(--muted);border-color:var(--border)}[data-theme=light] .vb-pad-every{color:var(--muted)}.tut-overlay{z-index:8000;background:#0a0a0a;flex-direction:column;font-family:Nunito,sans-serif;display:flex;position:fixed;inset:0;overflow:hidden}.tut-nav{background:#0d0d14;border-bottom:1px solid #8b5cf62e;flex-shrink:0;align-items:center;gap:16px;height:48px;min-height:48px;padding:0 20px;display:flex}.tut-nav-logo{cursor:pointer;background:0 0;border:none;flex-shrink:0;align-items:center;gap:2px;padding:0;display:flex}.tut-nav-jammr{color:#8b5cf6;letter-spacing:-.3px;font-family:Nunito,sans-serif;font-size:15px;font-weight:900}.tut-nav-code{color:#ffffff80;letter-spacing:-.3px;font-family:Nunito,sans-serif;font-size:15px;font-weight:900}.tut-nav-center{flex-direction:column;flex:1;align-items:center;gap:4px;display:flex}.tut-nav-level-label{color:#ffffff59;letter-spacing:1px;font-family:Space Mono,monospace;font-size:10px}.tut-nav-dots{align-items:center;gap:5px;display:flex}.tut-nav-dot{border:1.5px solid #ffffff2e;border-radius:50%;flex-shrink:0;width:7px;height:7px;transition:background .25s,border-color .25s}.tut-nav-dot.done{background:#8b5cf6;border-color:#8b5cf6}.tut-nav-dot.current:not(.done){background:#8b5cf64d;border-color:#8b5cf6}.tut-nav-right{flex-shrink:0;align-items:center;gap:14px;display:flex}.tut-coins-display{align-items:center;gap:6px;display:flex;position:relative}.tut-coin{background:linear-gradient(135deg,#f59e0b,#fbbf24);border-radius:50%;flex-shrink:0;width:14px;height:14px;box-shadow:0 0 6px #f59e0b66}.tut-coin-sm{background:linear-gradient(135deg,#f59e0b,#fbbf24);border-radius:50%;flex-shrink:0;width:11px;height:11px}.tut-coins-num{color:#f59e0b;min-width:28px;font-family:Space Mono,monospace;font-size:13px}@keyframes coins-fly{0%{opacity:1;transform:translateY(0)scale(1)}60%{opacity:1;transform:translateY(-22px)scale(1.15)}to{opacity:0;transform:translateY(-38px)scale(.9)}}.tut-coins-fly{color:#10b981;white-space:nowrap;pointer-events:none;padding-left:6px;font-family:Space Mono,monospace;font-size:12px;font-weight:700;animation:1.5s ease-out forwards coins-fly;position:absolute;top:-4px;left:100%}.tut-nav-exit-btn{color:#ffffff47;cursor:pointer;letter-spacing:.5px;background:0 0;border:1px solid #ffffff1a;border-radius:5px;padding:4px 10px;font-family:Space Mono,monospace;font-size:10px;transition:color .15s,border-color .15s}.tut-nav-exit-btn:hover{color:#ffffff8c;border-color:#ffffff38}.tut-body{flex:1;min-height:0;display:flex;overflow:hidden}.tut-left{scrollbar-width:thin;scrollbar-color:#8b5cf626 transparent;background:#111;border-right:1px solid #8b5cf626;flex-direction:column;gap:0;width:38%;min-width:320px;max-width:440px;padding:28px 32px 24px;display:flex;overflow-y:auto}.tut-left::-webkit-scrollbar{width:4px}.tut-left::-webkit-scrollbar-track{background:0 0}.tut-left::-webkit-scrollbar-thumb{background:#8b5cf62e;border-radius:2px}.tut-level-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.tut-level-badges{align-items:center;gap:7px;display:flex}.tut-category-badge{color:#ffffff73;letter-spacing:.5px;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:4px;padding:3px 8px;font-family:Space Mono,monospace;font-size:10px}.tut-diff-badge{letter-spacing:.5px;border-radius:4px;padding:3px 8px;font-family:Space Mono,monospace;font-size:10px}.tut-level-coins{color:#f59e0b;align-items:center;gap:5px;font-family:Space Mono,monospace;font-size:12px;display:flex}.tut-section-label{color:#8b5cf68c;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;font-family:Space Mono,monospace;font-size:9px}.tut-goal{color:#fff;margin:0 0 14px;font-size:16px;font-weight:800;line-height:1.4}.tut-hear-btn{color:#ffffffa6;cursor:pointer;background:#8b5cf61a;border:1px solid #8b5cf647;border-radius:7px;align-items:center;gap:7px;margin-bottom:18px;padding:7px 14px;font-family:Nunito,sans-serif;font-size:13px;font-weight:700;transition:background .15s,border-color .15s,color .15s;display:inline-flex}.tut-hear-btn:hover{color:#fff;background:#8b5cf62e;border-color:#8b5cf673}.tut-hear-btn--active{color:#10b981;background:#10b9811a;border-color:#10b98159}.tut-hear-btn--active:hover{background:#10b9812e;border-color:#10b9818c}.tut-hear-tri{border:5px solid #0000;border-left:9px solid;border-right-width:0;width:0;height:0;display:inline-block}.tut-hear-sq{background:currentColor;border-radius:1.5px;width:9px;height:9px;display:inline-block}.tut-desc{color:#fff9;margin:0 0 20px;font-size:14px;line-height:1.72}.tut-fns{margin-bottom:20px}.tut-fn-list{flex-wrap:wrap;gap:6px;display:flex}.tut-fn-pill{color:#a78bfa;cursor:pointer;text-align:left;background:#0d0d14;border:1px solid #8b5cf640;border-radius:5px;padding:5px 10px;font-family:Space Mono,monospace;font-size:11px;transition:background .12s,border-color .12s}.tut-fn-pill:hover{background:#8b5cf61a;border-color:#8b5cf673}.tut-submit-wrap{border-top:1px solid #ffffff0f;flex-direction:column;gap:10px;margin-bottom:22px;padding-top:18px;display:flex}.tut-submit{color:#fff;cursor:pointer;letter-spacing:.3px;background:linear-gradient(135deg,#16a34a,#10b981);border:none;border-radius:8px;width:100%;padding:12px;font-family:Nunito,sans-serif;font-size:15px;font-weight:800;transition:opacity .15s,transform .1s}.tut-submit:hover:not(:disabled){opacity:.88}.tut-submit:active:not(:disabled){transform:scale(.98)}.tut-submit:disabled{opacity:.5;cursor:not-allowed}.tut-submit.pass{opacity:.7;background:linear-gradient(135deg,#059669,#10b981)}.tut-submit.fail{background:linear-gradient(135deg,#b91c1c,#ef4444)}@keyframes tut-result-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.tut-result{border-radius:7px;align-items:flex-start;gap:8px;padding:10px 14px;font-family:Nunito,sans-serif;font-size:14px;line-height:1.5;animation:.2s ease-out tut-result-in;display:flex}.tut-result.pass{color:#6ee7b7;background:#10b98114;border:1px solid #10b98140}.tut-result.fail{color:#ffffffb8;background:#ef444412;border:1px solid #ef444438}.tut-result-icon{flex-shrink:0;font-size:15px;font-weight:800;line-height:1.4}.tut-result.pass .tut-result-icon{color:#10b981}.tut-result.fail .tut-result-icon{color:#ef4444}.tut-next-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#8b5cf6,#1a9e7c);border:none;border-radius:8px;width:100%;padding:13px;font-family:Nunito,sans-serif;font-size:15px;font-weight:800;transition:opacity .15s,transform .1s;animation:.3s ease-out tut-result-in;box-shadow:0 4px 18px #8b5cf647}.tut-next-btn:hover{opacity:.9}.tut-next-btn:active{transform:scale(.98)}.tut-hints{flex-direction:column;gap:8px;margin-bottom:20px;display:flex}.tut-hint-btn{color:#ffffff59;letter-spacing:.5px;cursor:pointer;background:0 0;border:1px dashed #8b5cf640;border-radius:6px;align-self:flex-start;padding:7px 12px;font-family:Space Mono,monospace;font-size:10px;transition:color .15s,border-color .15s}.tut-hint-btn:hover{color:#fff9;border-color:#8b5cf673}.tut-hint-btn:disabled{opacity:.3;cursor:default}.tut-hint-box{background:#8b5cf60f;border:1px solid #8b5cf633;border-radius:7px;padding:12px 14px}.tut-hint-box--final{background:#f5a6230d;border-color:#f5a62333}.tut-hint-tag{color:#f5a623;letter-spacing:.5px;background:#f5a6231a;border:1px solid #f5a62340;border-radius:3px;margin-bottom:8px;padding:2px 6px;font-family:Space Mono,monospace;font-size:9px;display:inline-block}.tut-hint-text{color:#a78bfa;white-space:pre-wrap;margin:0;font-family:Space Mono,monospace;font-size:11.5px;line-height:1.65}.tut-hint-box--final .tut-hint-text{color:#fbbf24}.tut-ai{flex-direction:column;flex:1;gap:10px;display:flex}.tut-ai-log{scrollbar-width:thin;scrollbar-color:#8b5cf61f transparent;background:#0003;border:1px solid #ffffff0f;border-radius:8px;flex-direction:column;gap:8px;max-height:180px;padding:12px;display:flex;overflow-y:auto}.tut-ai-log::-webkit-scrollbar{width:3px}.tut-ai-log::-webkit-scrollbar-thumb{background:#8b5cf626;border-radius:2px}.tut-ai-bubble{border-radius:7px;max-width:90%;padding:8px 11px;font-size:13px;line-height:1.6}.tut-ai-bubble--user{color:#fffc;background:#8b5cf624;align-self:flex-end}.tut-ai-bubble--assistant{color:#ffffffa6;background:#ffffff0d;align-self:flex-start}.tut-ai-bubble--loading{align-items:center;gap:5px;padding:10px 14px;display:flex}@keyframes dot-pulse{0%,80%,to{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.tut-spinner-dot{background:#fff6;border-radius:50%;width:6px;height:6px;animation:1.2s ease-in-out infinite dot-pulse}.tut-spinner-dot:nth-child(2){animation-delay:.2s}.tut-spinner-dot:nth-child(3){animation-delay:.4s}.tut-ai-row{gap:8px;display:flex}.tut-ai-input{color:#fffc;background:#0000004d;border:1px solid #ffffff1a;border-radius:7px;outline:none;flex:1;padding:8px 12px;font-family:Nunito,sans-serif;font-size:13px;transition:border-color .15s}.tut-ai-input::placeholder{color:#ffffff38}.tut-ai-input:focus{border-color:#8b5cf666}.tut-ai-input:disabled{opacity:.5}.tut-ai-send{color:#a78bfa;cursor:pointer;background:#8b5cf62e;border:1px solid #8b5cf64d;border-radius:7px;flex-shrink:0;width:38px;font-size:16px;transition:background .15s}.tut-ai-send:hover:not(:disabled){background:#8b5cf64d}.tut-ai-send:disabled{opacity:.35;cursor:not-allowed}.tut-right{background:#0d0d14;flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.tut-editor-wrap{border-bottom:1px solid #8b5cf61a;flex:13;min-height:0;overflow:hidden}.tut-canvas-wrap{background:#070710;flex:7;min-height:140px;max-height:280px;position:relative;overflow:hidden}.tut-canvas{width:100%;height:100%;display:block}.tut-playing-badge{color:#10b981;letter-spacing:1px;z-index:2;background:#0a0712bf;border:1px solid #10b9814d;border-radius:12px;align-items:center;gap:6px;padding:4px 10px;font-family:Space Mono,monospace;font-size:9px;display:flex;position:absolute;top:10px;right:12px}@keyframes badge-pulse{0%,to{opacity:1}50%{opacity:.4}}.tut-playing-dot{background:#10b981;border-radius:50%;width:6px;height:6px;animation:1.2s ease-in-out infinite badge-pulse}.tut-mode-toggle{background:#ffffff0d;border:1px solid #ffffff14;border-radius:7px;gap:2px;padding:2px;display:flex}.tut-mode-btn{letter-spacing:.5px;cursor:pointer;color:#ffffff61;background:0 0;border:none;border-radius:5px;padding:4px 13px;font-family:Space Mono,monospace;font-size:10px;transition:background .15s,color .15s}.tut-mode-btn:hover:not(.tut-mode-btn--active){color:#fff9}.tut-mode-btn--active{color:#ffffffe6;background:#8b5cf647}.tut-nav-top-row{align-items:center;gap:8px;display:flex}.tut-track-pill{letter-spacing:.5px;border:1px solid;border-radius:10px;flex-shrink:0;padding:2px 8px;font-family:Space Mono,monospace;font-size:9px;font-weight:700}.tut-nav-dot-sep{background:#ffffff1a;flex-shrink:0;width:1px;height:8px;margin:0 3px}.tut-view-toggle{background:#ffffff0a;border:1px solid #ffffff12;border-radius:7px;gap:2px;margin-bottom:20px;padding:2px;display:flex}.tut-view-btn{letter-spacing:.5px;cursor:pointer;color:#ffffff61;background:0 0;border:none;border-radius:5px;flex:1;padding:6px 0;font-family:Space Mono,monospace;font-size:10px;transition:background .15s,color .15s}.tut-view-btn:hover:not(.tut-view-btn--active){color:#fff9}.tut-view-btn--active{color:#ffffffe6;background:#8b5cf647}.tut-lesson-panel{flex-direction:column;flex:1;display:flex}.tut-lesson-block{margin-bottom:20px}.tut-lesson-label{color:#8b5cf68c;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;font-family:Space Mono,monospace;font-size:9px}.tut-lesson-text{color:#ffffffa6;margin:0;font-size:14px;line-height:1.75}.tut-example-code{color:#a78bfa;white-space:pre-wrap;background:#00000040;border:1px solid #8b5cf626;border-radius:6px;margin:6px 0 0;padding:10px 12px;font-family:Space Mono,monospace;font-size:11px;line-height:1.65}.tut-to-create-btn{color:#8b5cf6a6;cursor:pointer;letter-spacing:.5px;background:0 0;border:none;align-self:flex-start;margin-top:4px;padding:0;font-family:Space Mono,monospace;font-size:11px;transition:color .15s}.tut-to-create-btn:hover{color:#a78bfa}.tut-welcome{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;width:100%;max-width:560px;margin:0 auto;padding:40px 20px;display:flex}.tut-welcome-logo{letter-spacing:-.3px;margin-bottom:24px;font-size:24px;font-weight:900}.tut-welcome-title{color:#ffffffeb;letter-spacing:-.5px;margin:0 0 10px;font-family:Nunito,sans-serif;font-size:32px;font-weight:900}.tut-welcome-sub{color:#ffffff73;margin:0 0 24px;font-size:15px;line-height:1.55}.tut-learner-cards{gap:12px;width:100%;margin-bottom:28px;display:flex}.tut-learner-card{cursor:pointer;text-align:center;background:#ffffff08;border:1px solid #ffffff1a;border-radius:12px;flex-direction:column;flex:1;align-items:center;gap:6px;padding:16px 12px;font-family:Nunito,sans-serif;transition:background .15s,border-color .15s,transform .12s;display:flex}.tut-learner-card:hover{background:#ffffff0f;border-color:#ffffff2e;transform:translateY(-1px)}.tut-learner-card--active{transform:translateY(-2px)}.tut-learner-card-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px;margin-bottom:2px}.tut-learner-card-title{color:#ffffffd1;font-size:13px;font-weight:800;line-height:1.3;transition:color .15s}.tut-learner-card-sub{color:#ffffff61;font-size:11px;line-height:1.4}.tut-welcome-form{width:100%;margin-bottom:28px}.tut-welcome-label{color:#8b5cf6a6;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;font-family:Space Mono,monospace;font-size:10px;display:block}.tut-welcome-input{box-sizing:border-box;color:#ffffffe0;background:#ffffff0d;border:1px solid #8b5cf64d;border-radius:10px;outline:none;width:100%;padding:12px 16px;font-family:Nunito,sans-serif;font-size:15px;transition:border-color .15s}.tut-welcome-input:focus{border-color:#8b5cf6a6}.tut-welcome-input::placeholder{color:#ffffff40}.tut-welcome-btns{flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.tut-welcome-start{color:#fff;cursor:pointer;background:linear-gradient(135deg,#8b5cf6,#6d28d9);border:none;border-radius:10px;width:100%;padding:14px 0;font-family:Nunito,sans-serif;font-size:15px;font-weight:800;transition:filter .15s,box-shadow .15s;box-shadow:0 4px 20px #8b5cf666}.tut-welcome-start:hover{filter:brightness(1.1);box-shadow:0 6px 28px #8b5cf699}.tut-welcome-skip{color:#ffffff4d;cursor:pointer;background:0 0;border:none;padding:4px 0;font-family:Space Mono,monospace;font-size:11px;transition:color .15s}.tut-welcome-skip:hover{color:#fff9}.tut-track-complete{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:40px 20px;display:flex;position:relative;overflow:hidden}.tut-tc-glow{pointer-events:none;animation:3s ease-in-out infinite tc-glow-pulse;position:absolute;inset:-20%}@keyframes tc-glow-pulse{0%,to{opacity:.6}50%{opacity:1}}.tut-tc-icon{margin-bottom:20px;animation:.6s cubic-bezier(.34,1.56,.64,1) tc-icon-in}@keyframes tc-icon-in{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}.tut-tc-track-name{letter-spacing:2px;text-transform:uppercase;opacity:.9;margin-bottom:8px;font-family:Space Mono,monospace;font-size:12px;font-weight:700}.tut-tc-title{color:#ffffffeb;letter-spacing:-.5px;margin:0 0 20px;font-family:Nunito,sans-serif;font-size:34px;font-weight:900}.tut-tc-coins{color:#f5a623;align-items:center;gap:8px;margin-bottom:28px;font-family:Space Mono,monospace;font-size:14px;font-weight:700;animation:.5s .3s both tc-coins-in;display:flex}@keyframes tc-coins-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tut-tc-next{align-items:center;gap:10px;margin-bottom:28px;font-family:Space Mono,monospace;font-size:11px;display:flex}.tut-tc-next-label{color:#fff6}.tut-tc-btns{flex-direction:column;align-items:center;gap:12px;display:flex}.tut-tc-canvas{pointer-events:none;z-index:-1;width:100%;height:100%;position:absolute;inset:0}.tut-checklist{background:#0003;border:1px solid #ffffff0f;border-radius:8px;flex-direction:column;gap:4px;margin-top:10px;padding:10px 12px;display:flex}.tut-check-item{align-items:center;gap:8px;font-family:Space Mono,monospace;font-size:10px;display:flex}.tut-check-item.pass{color:#10b981d9}.tut-check-item.fail{color:#ffffff73}.tut-check-icon{flex-shrink:0;width:14px;font-size:11px}.tut-check-item.pass .tut-check-icon{color:#10b981}.tut-check-item.fail .tut-check-icon{color:#ef4444b3}.landing{z-index:9000;background:#0a0a0a;justify-content:center;align-items:center;transition:opacity .55s;display:flex;position:fixed;inset:0}.landing:before{content:"";pointer-events:none;z-index:0;background-image:radial-gradient(circle,#ffffff0b 1px,#0000 1px);background-size:28px 28px;position:absolute;inset:0}.landing--fading{opacity:0;pointer-events:none}.landing-canvas{pointer-events:none;z-index:0;width:100%;height:100%;position:absolute;inset:0}.landing-radial-glow{pointer-events:none;z-index:0;background:radial-gradient(60% 50%,#8b5cf629 0%,#1a9e7c1a 50%,#0000 80%);animation:6s ease-in-out infinite radial-shift;position:absolute;inset:0}@keyframes radial-shift{0%{background:radial-gradient(60% 50%,#8b5cf629 0%,#1a9e7c1a 50%,#0000 80%)}50%{background:radial-gradient(60% 50%,#1a9e7c29 0%,#8b5cf61a 50%,#0000 80%)}to{background:radial-gradient(60% 50%,#8b5cf629 0%,#1a9e7c1a 50%,#0000 80%)}}.landing-glow{pointer-events:none;z-index:0;border-radius:50%;position:absolute}@keyframes landing-fadein{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.landing-anim{opacity:0;animation:.6s cubic-bezier(.22,1,.36,1) forwards landing-fadein}.landing-anim--0{animation-delay:50ms}.landing-anim--1{animation-delay:.25s}.landing-anim--2{animation-delay:.4s}.landing-anim--3{animation-delay:.55s}.landing-anim--4{animation-delay:.72s}@keyframes icon-float{0%,to{text-shadow:0 0 #0000;transform:translateY(0)scale(1)}50%{text-shadow:0 0 20px #8b5cf6cc,0 0 40px #8b5cf666,0 8px 24px #8b5cf64d;transform:translateY(-5px)scale(1.07)}}.li-note--pulse{animation:3s ease-in-out infinite icon-float;display:inline-block}.landing-particles{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.landing-particle{bottom:-10px;left:var(--px,50%);width:var(--size,4px);height:var(--size,4px);background:var(--color,#8b5cf6);opacity:0;animation:9s ease-in-out infinite particle-float;animation-delay:var(--delay,0s);box-shadow:0 0 8px var(--color,#8b5cf6), 0 0 16px var(--color,#8b5cf6);border-radius:50%;position:absolute}@keyframes particle-float{0%{opacity:0;transform:translateY(0)scale(.7)}8%{opacity:.75}88%{opacity:.25}to{opacity:0;transform:translateY(-95vh)scale(1.1)}}.landing-glow--bl{background:radial-gradient(circle,#7c5cbf99 0%,#0000 60%);width:800px;height:800px;animation:6s ease-in-out infinite glow-pulse-bl;bottom:-160px;left:-160px}.landing-glow--br{background:radial-gradient(circle,#1a9e7c8c 0%,#0000 60%);width:720px;height:720px;animation:7s ease-in-out infinite glow-pulse-br;bottom:-140px;right:-140px}@keyframes glow-pulse-bl{0%,to{opacity:1;transform:scale(1)}50%{opacity:.75;transform:scale(1.06)}}@keyframes glow-pulse-br{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.08)}}.landing-center{z-index:1;flex-direction:column;align-items:center;display:flex;position:relative}.landing-logo{align-items:center;gap:20px;margin-bottom:28px;display:flex}.landing-icon{letter-spacing:-1px;-webkit-user-select:none;user-select:none;font-family:Fira Code,Space Mono,monospace;font-size:36px;font-weight:700;line-height:1}.li-bracket--open{color:#8b5cf6}.li-note{color:#fff}.li-bracket--close{color:#1a9e7c}.landing-wordmark{flex-direction:row;align-items:baseline;line-height:1;display:flex}.lw-jammr{color:#fff;letter-spacing:-2px;text-shadow:0 0 40px #ffffff2e,0 0 80px #8b5cf61f;font-family:Nunito,sans-serif;font-size:52px;font-weight:900;line-height:1}.lw-code{color:#7c5cbf;letter-spacing:-2px;text-shadow:0 0 24px #7c5cbf73,0 0 48px #7c5cbf33;font-family:Nunito,sans-serif;font-size:52px;font-weight:900;line-height:1}.landing-tag{color:#ffffffd9;letter-spacing:.05px;margin:0 0 8px;font-family:Nunito,sans-serif;font-size:17px;font-weight:600}.landing-sub{color:#888;letter-spacing:.02em;margin:0 0 44px;font-family:Nunito,sans-serif;font-size:14px;font-weight:600}.landing-actions{flex-direction:column;align-items:stretch;gap:10px;width:300px;display:flex}@keyframes gradient-shift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.la-cta{color:#fff;cursor:pointer;letter-spacing:.03em;background:linear-gradient(270deg,#8b5cf6,#6d28d9,#1a9e7c,#6d28d9,#8b5cf6) 0 0/300% 300%;border:none;border-radius:8px;width:100%;padding:14px 28px;font-family:Nunito,sans-serif;font-size:16px;font-weight:900;transition:box-shadow .15s,transform 80ms;animation:5s infinite gradient-shift;box-shadow:0 0 28px #7c5cbf73,0 4px 16px #0006}.la-cta:hover{transform:scale(1.04);box-shadow:0 0 56px #7c5cbfbf,0 6px 24px #00000073}.la-cta:active{transform:scale(.97);box-shadow:0 0 16px #7c5cbf4d}.la-secondary{cursor:pointer;letter-spacing:.02em;background:#1a1a1a;border-radius:8px;width:100%;padding:13px 0;font-family:Nunito,sans-serif;font-size:15px;font-weight:800;transition:background .15s,box-shadow .15s,transform .15s,border-color .15s,color .15s}.la-secondary--white{color:#ffffffe6;border:1px solid #ffffff40}.la-secondary--white:hover{color:#fff;background:#ffffff12;border-color:#ffffff73;transform:scale(1.04);box-shadow:0 0 28px #ffffff1f}.la-secondary--teal{color:#3dc9a0f2;border:1px solid #1a9e7ca6}.la-secondary--teal:hover{color:#3dc9a0;background:#1a9e7c1f;border-color:#1a9e7ce6;transform:scale(1.04);box-shadow:0 0 32px #1a9e7c61}.la-secondary:active{transform:scale(.97)}.landing-hint{color:#ffffff73;letter-spacing:.02em;background:0 0;margin:18px 0 0;font-family:Nunito,sans-serif;font-size:12px;font-weight:600}.landing-preview-row{justify-content:center;margin-top:-12px;margin-bottom:28px;display:flex}.la-preview{letter-spacing:.04em;color:#ffffff8c;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff24;border-radius:20px;align-items:center;gap:8px;padding:9px 22px;font-family:Space Mono,monospace;font-size:11px;font-weight:400;transition:color .15s,border-color .15s,background .15s,box-shadow .15s;display:flex}.la-preview:hover{color:#ffffffd9;background:#8b5cf614;border-color:#8b5cf680;box-shadow:0 0 20px #8b5cf633}.la-preview--active{color:#10b981d9;background:#10b9810f;border-color:#10b98173;animation:1.8s ease-in-out infinite preview-pulse;box-shadow:0 0 20px #10b98126}@keyframes preview-pulse{0%,to{box-shadow:0 0 12px #10b9811f}50%{box-shadow:0 0 28px #10b98159}}.landing-about-btn{color:#ffffff47;cursor:pointer;letter-spacing:.04em;background:0 0;border:none;margin-top:20px;padding:4px 8px;font-family:Space Mono,monospace;font-size:11px;font-weight:400;transition:color .15s}.landing-about-btn:hover{color:#fff9}.auth-backdrop{z-index:9100;background:#000000bf;justify-content:center;align-items:center;animation:.18s ease-out auth-fade;display:flex;position:fixed;inset:0}@keyframes auth-fade{0%{opacity:0}to{opacity:1}}.auth-modal{background:#111;border:1px solid #7c5cbf4d;border-radius:16px;width:340px;padding:32px 28px 28px;transition:border-color .25s,box-shadow .25s;animation:.24s cubic-bezier(.34,1.56,.64,1) modal-up,.9s ease-out forwards modal-shimmer;position:relative;box-shadow:0 24px 64px #000000e6,0 0 0 1px #ffffff0a,0 0 80px #7c5cbf33}@keyframes modal-shimmer{0%{box-shadow:0 24px 64px #000000e6,0 0 0 1px #ffffff0a,0 0 #7c5cbf00}45%{box-shadow:0 24px 64px #000000e6,0 0 0 1px #ffffff0a,0 0 100px #7c5cbf66}to{box-shadow:0 24px 64px #000000e6,0 0 0 1px #ffffff0a,0 0 80px #7c5cbf33}}.auth-modal--success{border-color:#1a9e7ca6!important;box-shadow:0 24px 64px #000000e6,0 0 0 1px #ffffff0a,0 0 60px #1a9e7c47!important}@keyframes modal-up{0%{opacity:0;transform:translateY(22px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.auth-close{color:#ffffff61;cursor:pointer;background:#ffffff0f;border:none;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;font-size:14px;transition:background .12s,color .12s;display:flex;position:absolute;top:14px;right:14px}.auth-close:hover{color:#ffffffb3;background:#ffffff1c}.auth-title{color:#fff;letter-spacing:-.2px;margin:0 0 22px;font-family:Nunito,sans-serif;font-size:22px;font-weight:900}.auth-form{flex-direction:column;gap:10px;display:flex}@keyframes input-fadein{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes auth-shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}@keyframes auth-spin{to{transform:rotate(360deg)}}.auth-input{color:#ffffffd9;box-sizing:border-box;opacity:0;background:#ffffff0a;border:1px solid #ffffff17;border-radius:8px;outline:none;width:100%;padding:11px 14px;font-family:Nunito,sans-serif;font-size:14px;font-weight:600;transition:border-color .15s,box-shadow .15s;animation:.22s ease-out forwards input-fadein}.auth-input--stagger-0{animation-delay:50ms}.auth-input--stagger-1{animation-delay:.13s}.auth-input--shake{border-color:#ef44448c!important;animation:.32s ease-in-out auth-shake!important}.auth-spinner{vertical-align:middle;border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:15px;height:15px;animation:.55s linear infinite auth-spin;display:inline-block}.auth-input:focus{border-color:#7c5cbf8c;box-shadow:0 0 0 3px #7c5cbf1f}.auth-input::placeholder{color:#fff3}.auth-error{color:#ef4444;margin:0;padding-left:2px;font-size:12px;font-weight:600}.auth-submit{color:#fff;cursor:pointer;letter-spacing:.02em;background:#7c5cbf;border:none;border-radius:8px;width:100%;margin-top:4px;padding:12px;font-family:Nunito,sans-serif;font-size:15px;font-weight:900;transition:background .12s,box-shadow .12s,transform 80ms;box-shadow:0 0 20px #7c5cbf59}.auth-submit:hover{background:#8f6fd4;box-shadow:0 0 32px #7c5cbf80}.auth-submit:active{transform:scale(.98)}.auth-submit:disabled{opacity:.6;cursor:not-allowed}.auth-switch{text-align:center;color:#ffffff40;margin:18px 0 0;font-size:13px;font-weight:600}.auth-switch-btn{color:#9b7fd4;cursor:pointer;background:0 0;border:none;padding:0;font-family:Nunito,sans-serif;font-size:13px;font-weight:800;transition:color .12s}.auth-switch-btn:hover{color:#c4aaef}.auth-confirm{color:#ffffff8c;text-align:center;font-family:Space Mono,monospace;font-size:12px;line-height:1.65}.landing-code-anim{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.landing-code-snippet{left:var(--cx,10%);top:var(--cy,20%);color:#a78bfad9;white-space:nowrap;opacity:0;animation:code-appear var(--dur,7s) ease-in-out infinite;animation-delay:var(--delay,0s);text-shadow:0 0 12px #8b5cf6b3,0 0 24px #8b5cf64d;font-family:Fira Code,Space Mono,monospace;font-size:12px;position:absolute;overflow:hidden}@keyframes code-appear{0%{opacity:0;max-width:0}8%{opacity:0;max-width:0}22%{opacity:1;max-width:300px}72%{opacity:.75;max-width:300px}92%{opacity:0;max-width:300px}to{opacity:0;max-width:0}}.landing-music-notes{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.landing-music-note{bottom:8%;left:var(--nx,50%);font-size:var(--size,18px);color:var(--color,#8b5cf6);opacity:0;animation:note-float var(--dur,8s) ease-in-out infinite;animation-delay:var(--delay,0s);filter:drop-shadow(0 0 8px var(--color,#8b5cf6)) drop-shadow(0 0 16px var(--color,#8b5cf6));-webkit-user-select:none;user-select:none;position:absolute}@keyframes note-float{0%{opacity:0;transform:translateY(0)rotate(-8deg)scale(.8)}8%{opacity:1}45%{opacity:.8;transform:translateY(-38vh)rotate(12deg)scale(1.15)}85%{opacity:.3}to{opacity:0;transform:translateY(-62vh)rotate(-4deg)scale(.9)}}.landing-eq{pointer-events:none;z-index:0;opacity:.45;align-items:flex-end;gap:4px;width:180px;height:56px;display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.landing-eq-bar{min-height:4px;animation:1.05s ease-in-out infinite alternate eq-bounce;animation-delay:calc(var(--i) * 55ms);background:linear-gradient(#a78bfa80,#8b5cf6);border-radius:2px 2px 0 0;flex:1;box-shadow:0 0 6px #8b5cf680}@keyframes eq-bounce{0%{height:4px}to{height:44px}}.la-google{cursor:pointer;color:#1a1a2e;background:#fff;border:none;border-radius:8px;justify-content:center;align-items:center;gap:10px;width:100%;padding:13px 0;font-family:Nunito,sans-serif;font-size:15px;font-weight:800;transition:background .15s,transform 80ms,box-shadow .15s;display:flex;box-shadow:0 2px 8px #0000004d}.la-google:hover{background:#f5f5f5;transform:scale(1.03);box-shadow:0 4px 16px #0006}.la-google:active{transform:scale(.97)}.la-google:disabled{opacity:.6;cursor:not-allowed;transform:none}.auth-divider{align-items:center;gap:12px;margin:4px 0;display:flex}.auth-divider:before,.auth-divider:after{content:"";background:#ffffff1a;flex:1;height:1px}.auth-divider span{color:#fff3;font-family:Space Mono,monospace;font-size:10px}.discover-panel{background:var(--editor-bg);z-index:500;border-left:1px solid #8b5cf62e;flex-direction:column;width:560px;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:52px;bottom:0;right:0;transform:translate(100%);box-shadow:-12px 0 60px #000000b3}.discover-panel--open{transform:translate(0)}.discover-header{border-bottom:1px solid var(--divider);flex-shrink:0;justify-content:space-between;align-items:center;height:44px;padding:0 16px;display:flex}.discover-title{color:var(--panel-text);letter-spacing:.04em;align-items:center;gap:9px;font-family:Space Mono,monospace;font-size:11px;display:flex}.discover-badge{color:#8b5cf6;letter-spacing:1px;background:#8b5cf61f;border:1px solid #8b5cf64d;border-radius:5px;padding:2px 5px;font-family:Space Mono,monospace;font-size:9px;font-weight:700}.discover-close{color:#ffffff47;cursor:pointer;background:#ffffff0d;border:none;border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;transition:background .12s,color .12s;display:flex}.discover-close:hover{color:#ffffffa6;background:#ffffff1a}.discover-tabs{border-bottom:1px solid var(--divider,#ffffff0f);flex-shrink:0;gap:2px;padding:8px 16px 0;display:flex}.discover-tab{border:1px solid var(--border,#1e1e2e);color:var(--muted,#ffffff52);cursor:pointer;letter-spacing:.05em;white-space:nowrap;background:0 0;border-bottom:2px solid #0000;border-radius:5px 5px 0 0;padding:5px 14px;font-family:Space Mono,monospace;font-size:10px;font-weight:700;transition:background .12s,color .12s,border-color .12s}.discover-tab:hover{color:var(--text,#ddd6ee);background:#8b5cf614;border-color:#8b5cf64d}.discover-tab--active{color:var(--text,#ddd6ee);background:#8b5cf62e;border-color:#8b5cf673 #8b5cf673 #0000}.discover-body{scrollbar-width:thin;scrollbar-color:#2d2d42 transparent;flex:1;padding:18px 16px 24px;overflow-y:auto}.discover-body::-webkit-scrollbar{width:5px}.discover-body::-webkit-scrollbar-track{background:0 0}.discover-body::-webkit-scrollbar-thumb{background:#2d2d42;border-radius:3px}.discover-sub{color:#ffffff47;margin:0 0 18px;font-family:Nunito,sans-serif;font-size:13px;font-weight:600;line-height:1.5}.discover-sub strong{color:#ffffff80;font-weight:800}.discover-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.proj-card{cursor:default;background:#0e0e1c;border:1px solid #ffffff0f;border-radius:12px;transition:border-color .2s,box-shadow .2s,transform .15s;overflow:hidden}.proj-card:hover{border-color:#8b5cf647;transform:translateY(-2px);box-shadow:0 4px 24px #00000080,0 0 0 1px #8b5cf61a}.proj-preview{height:120px;position:relative;overflow:hidden}.cp{background:#070710;position:absolute;inset:0;overflow:hidden}.cp-glow{background:radial-gradient(circle, var(--c1) 0%, transparent 70%);opacity:.12;border-radius:50%;width:90px;height:90px;margin-top:-45px;margin-left:-45px;animation:3.5s ease-in-out infinite cp-glow-pulse;position:absolute;top:50%;left:50%}.proj-card:hover .cp-glow{opacity:.22;animation-duration:1.1s}@keyframes cp-glow-pulse{0%,to{opacity:.1;transform:scale(.8)}50%{opacity:.22;transform:scale(1.3)}}.cp-ring{opacity:0;pointer-events:none;border:1.5px solid;border-radius:50%;width:100px;height:100px;margin-top:-50px;margin-left:-50px;animation:3s ease-out infinite cp-ring-expand;position:absolute;top:50%;left:50%;transform:scale(.05)}.cp-r1{border-color:var(--c1);animation-delay:0s}.cp-r2{border-color:var(--c2);animation-delay:1s}.cp-r3{border-color:var(--c3);animation-delay:2s}.proj-card:hover .cp-ring{animation-duration:1s}.proj-card:hover .cp-r2{animation-delay:.33s}.proj-card:hover .cp-r3{animation-delay:.66s}@keyframes cp-ring-expand{0%{opacity:.7;transform:scale(.05)}70%{opacity:0;transform:scale(1.8)}to{opacity:0;transform:scale(1.8)}}.cp-dot{opacity:0;border-radius:50%;width:4px;height:4px;animation:2.5s ease-in-out infinite cp-dot-blink;position:absolute}.cp-d1{background:var(--c1);animation-delay:0s;top:28%;left:18%}.cp-d2{background:var(--c2);animation-delay:.8s;top:65%;left:72%}.cp-d3{background:var(--c3);animation-delay:1.6s;top:42%;left:58%}.cp-d4{background:var(--c1);animation-delay:.4s;top:75%;left:32%}.proj-card:hover .cp-dot{animation-duration:.8s}@keyframes cp-dot-blink{0%,to{opacity:0;transform:scale(.5)}30%,60%{opacity:.9;transform:scale(1.8)}}.cp-wave{background:linear-gradient(90deg, transparent 0%, var(--c2) 30%, var(--c1) 70%, transparent 100%);opacity:0;height:1.5px;animation:4s ease-in-out infinite cp-wave-scroll;position:absolute;bottom:28%;left:0;right:0}.proj-card:hover .cp-wave{animation-duration:1.4s}@keyframes cp-wave-scroll{0%{opacity:0;transform:translateY(0)scaleY(1)}25%{opacity:.5;transform:translateY(-8px)scaleY(2.5)}50%{opacity:.4;transform:translateY(4px)scaleY(1.5)}75%{opacity:.5;transform:translateY(-5px)scaleY(2)}to{opacity:0;transform:translateY(0)scaleY(1)}}.cp--techno .cp-glow{animation-duration:1.8s}.cp--glitch{background:#040c07}.cp--glitch .cp-glow{background:radial-gradient(circle, var(--c1) 0%, transparent 60%);animation-duration:.6s}.cp--glitch .cp-ring{border-style:dashed;animation-duration:.7s}.cp--lofi .cp-ring{border-width:1px;animation-duration:5s}.cp--lofi .cp-glow{animation-duration:6s}.cp--ambient .cp-ring{opacity:0;border-width:1px;animation-duration:7s}.cp--ambient .cp-glow{width:140px;height:140px;margin-top:-70px;margin-left:-70px;animation-duration:8s}.cp--fireworks .cp-dot,.cp--fireworks .cp-ring{animation-duration:1.8s}.cp--house .cp-ring{animation-timing-function:steps(4,end)}.cp--acid .cp-glow{background:radial-gradient(circle, var(--c1) 0%, transparent 55%);animation-duration:1.1s}.proj-genre{letter-spacing:.04em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;border-radius:5px;padding:2px 7px;font-family:Space Mono,monospace;font-size:9px;font-weight:700;position:absolute;top:8px;left:8px}.proj-bpm{color:#f5a623b3;letter-spacing:.04em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0000008c;border:1px solid #f5a62333;border-radius:5px;padding:2px 6px;font-family:Space Mono,monospace;font-size:9px;font-weight:700;position:absolute;top:8px;right:8px}.proj-footer{justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;display:flex}.proj-meta{flex-direction:column;gap:2px;min-width:0;display:flex}.proj-name{color:#ffffffd9;white-space:nowrap;text-overflow:ellipsis;font-family:Nunito,sans-serif;font-size:13px;font-weight:800;overflow:hidden}.proj-desc{color:#ffffff59;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-family:Nunito,sans-serif;font-size:11px;font-weight:400;line-height:1.4;display:-webkit-box;overflow:hidden}.proj-author{color:#ffffff40;letter-spacing:.03em;font-family:Space Mono,monospace;font-size:9px}.proj-remix-btn{color:#a78bfa;cursor:pointer;letter-spacing:.04em;background:#8b5cf61a;border:1px solid #8b5cf659;border-radius:7px;flex-shrink:0;padding:5px 12px;font-family:Space Mono,monospace;font-size:10px;font-weight:700;transition:background .12s,border-color .12s,color .12s,box-shadow .12s,transform 80ms}.proj-remix-btn:hover{color:#c4b5fd;background:#8b5cf638;border-color:#8b5cf699;box-shadow:0 0 14px #8b5cf640}.proj-remix-btn:active{transform:scale(.95)}.discover-footer-note{color:#ffffff24;text-align:center;margin:22px 0 0;font-family:Nunito,sans-serif;font-size:11px;font-weight:600;line-height:1.6}.discover-community{padding:4px 0}.discover-com-loading,.discover-com-empty{color:var(--muted,#ffffff52);text-align:center;padding:32px 16px;font-family:Nunito,sans-serif;font-size:13px;font-weight:600;line-height:1.6}.discover-com-grid{flex-direction:column;gap:8px;display:flex}.com-card{background:#ffffff08;border:1px solid #ffffff12;border-radius:10px;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;transition:border-color .15s,background .15s;display:flex}.com-card:hover{background:#8b5cf60d;border-color:#8b5cf638}.com-card-name{color:#ffffffd1;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-family:Nunito,sans-serif;font-size:13px;font-weight:800;overflow:hidden}.com-card-date{color:#ffffff40;white-space:nowrap;flex-shrink:0;font-family:Space Mono,monospace;font-size:9px}.com-card-actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.com-like-btn{color:#ffffff4d;cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;transition:background .12s,color .12s,border-color .12s;display:flex}.com-like-btn:hover{color:#d94f8a;background:#d94f8a1f;border-color:#d94f8a66}.com-like-btn--liked{color:#d94f8a;background:#d94f8a26;border-color:#d94f8a80}[data-theme=light] .discover-panel{border-left-color:#8b5cf640}[data-theme=light] .discover-body{color:var(--text)}[data-theme=light] .discover-tab{color:var(--muted);border-color:var(--border)}[data-theme=light] .discover-tab:hover{color:var(--text);background:#8b5cf61a;border-color:#8b5cf64d}[data-theme=light] .discover-tab--active{color:var(--text);background:#8b5cf62e;border-color:#8b5cf673}[data-theme=light] .proj-name{color:var(--text)}[data-theme=light] .proj-desc,[data-theme=light] .proj-author{color:var(--muted)}[data-theme=light] .proj-card{background:#ffffff0a;border-color:#ffffff1a}[data-theme=light] .proj-card:hover{background:#ffffff12;border-color:#8b5cf659}[data-theme=light] .discover-empty,[data-theme=light] .discover-com-loading,[data-theme=light] .discover-com-empty{color:var(--muted)}[data-theme=light] .com-card{background:#ffffff0a;border-color:#ffffff1a}[data-theme=light] .com-card:hover{background:#8b5cf60f;border-color:#8b5cf640}[data-theme=light] .com-card-name{color:var(--text)}[data-theme=light] .com-card-date{color:var(--muted)}.com-card-author-row{align-items:center;gap:8px;margin-bottom:4px;display:flex}.com-card-author-link{color:var(--purple);cursor:pointer;background:0 0;border:none;padding:0;font-family:Space Mono,monospace;font-size:9px;-webkit-text-decoration:underline #0000;text-decoration:underline #0000;transition:text-decoration-color .15s}.com-card-author-link:hover{-webkit-text-decoration-color:var(--purple);text-decoration-color:var(--purple)}.com-remix-badge{color:var(--teal);background:#1a9e7c1f;border:1px solid #1a9e7c4d;border-radius:10px;padding:1px 5px;font-family:Space Mono,monospace;font-size:8px}.com-follow-btn{color:var(--purple);cursor:pointer;background:#8b5cf61f;border:1px solid #8b5cf64d;border-radius:5px;padding:3px 9px;font-family:Nunito,sans-serif;font-size:10px;font-weight:700;transition:background .12s,border-color .12s}.com-follow-btn:hover{background:#8b5cf63d;border-color:#8b5cf68c}.com-follow-btn--following{color:var(--muted);background:0 0;border-color:#ffffff1f}.com-follow-btn--following:hover{color:#f87171;background:#ef444414;border-color:#ef444459}.about-overlay{z-index:8500;background:var(--bg,#0a0a0a);opacity:0;pointer-events:none;flex-direction:column;transition:opacity .3s,transform .3s cubic-bezier(.22,1,.36,1);display:flex;position:fixed;inset:0;transform:translateY(20px)}.about-overlay--open{opacity:1;pointer-events:all;transform:translateY(0)}.about-overlay:before{content:"";pointer-events:none;z-index:0;background-image:radial-gradient(circle,#ffffff0a 1px,#0000 1px);background-size:28px 28px;position:absolute;inset:0}.about-glow{pointer-events:none;z-index:0;border-radius:50%;position:absolute}.about-glow--tl{background:radial-gradient(circle,#8b5cf638 0%,#0000 60%);width:700px;height:700px;top:-220px;left:-220px}.about-glow--br{background:radial-gradient(circle,#1a9e7c33 0%,#0000 60%);width:700px;height:700px;bottom:-220px;right:-220px}.about-scroll{z-index:1;scrollbar-width:thin;scrollbar-color:#2d2d42 transparent;flex:1;justify-content:center;display:flex;position:relative;overflow-y:auto}.about-scroll::-webkit-scrollbar{width:5px}.about-scroll::-webkit-scrollbar-track{background:0 0}.about-scroll::-webkit-scrollbar-thumb{background:#2d2d42;border-radius:3px}.about-inner{width:100%;max-width:900px;padding:56px 40px 80px;position:relative}.about-close{color:#ffffff59;cursor:pointer;background:#ffffff0f;border:none;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;transition:background .12s,color .12s;display:flex;position:absolute;top:20px;right:20px}.about-close:hover{color:#ffffffbf;background:#ffffff1c}.about-hero{margin-bottom:52px}.about-logo{align-items:center;gap:18px;margin-bottom:16px;display:flex}.about-icon{letter-spacing:-1px;-webkit-user-select:none;user-select:none;font-family:Fira Code,monospace;font-size:32px;font-weight:700;line-height:1}.ab-br--open{color:#8b5cf6}.ab-note{color:#fff}.ab-br--close{color:#1a9e7c}.about-wordmark{align-items:baseline;display:flex}.ab-jammr{color:#fff;letter-spacing:-2px;font-family:Nunito,sans-serif;font-size:48px;font-weight:900;line-height:1}.ab-code{color:#7c5cbf;letter-spacing:-2px;font-family:Nunito,sans-serif;font-size:48px;font-weight:900;line-height:1}.about-hero-tag{color:#ffffff73;letter-spacing:.02em;margin:0;font-family:Nunito,sans-serif;font-size:16px;font-weight:600}.about-cards{grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:48px;display:grid}@media (width<=700px){.about-cards{grid-template-columns:1fr}}.about-card{background:#ffffff06;border:1px solid #ffffff12;border-radius:12px;padding:22px 20px;transition:border-color .15s,background .15s}.about-card:hover{background:#8b5cf60a;border-color:#8b5cf640}.about-card-title{color:#8b5cf6;letter-spacing:.01em;margin:0 0 12px;font-family:Nunito,sans-serif;font-size:13px;font-weight:800}.about-card-body{color:#ffffff8c;margin:0;font-family:Nunito,sans-serif;font-size:13px;font-weight:600;line-height:1.75}.about-link{color:#1a9e7c;font-weight:800;text-decoration:none;transition:color .12s}.about-link:hover{color:#3dc9a0;text-decoration:underline}.about-divider{background:#ffffff0f;height:1px;margin:0 0 40px}.about-section{margin-bottom:40px}.about-section-title{color:#ffffff47;letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px;font-family:Space Mono,monospace;font-size:10px;font-weight:700}.about-section-sub{color:#ffffff61;margin:0 0 14px;font-family:Nunito,sans-serif;font-size:13px;font-weight:600}.about-api{flex-direction:column;gap:5px;display:flex}.about-api-row{background:#0d0d14;border:1px solid #1e1e2e;border-radius:8px;align-items:baseline;gap:16px;padding:10px 16px;transition:border-color .12s;display:flex}.about-api-row:hover{border-color:#8b5cf64d}.about-api-code{color:#c084fc;white-space:nowrap;flex-shrink:0;min-width:260px;font-family:Fira Code,Space Mono,monospace;font-size:12px}.about-api-desc{color:#ffffff52;font-family:Nunito,sans-serif;font-size:12px;font-weight:600}.about-tech{flex-wrap:wrap;gap:8px;margin-top:4px;display:flex}.about-tc{letter-spacing:.04em;border:1px solid;border-radius:6px;padding:5px 12px;font-family:Space Mono,monospace;font-size:10px;font-weight:700}.about-tc--tone{color:#f5a623;background:#f5a62312;border-color:#f5a62333}.about-tc--cm{color:#a78bfa;background:#8b5cf612;border-color:#8b5cf633}.about-tc--react{color:#61dafb;background:#61dafb12;border-color:#61dafb33}.about-tc--sb{color:#3ecf8e;background:#3ecf8e12;border-color:#3ecf8e33}.about-tc--canvas{color:#fbbf24;background:#fbbf2412;border-color:#fbbf2433}.about-tc--ai{color:#d94f8a;background:#d94f8a12;border-color:#d94f8a33}[data-theme=light] .about-card{background:#ffffff0a;border-color:#ffffff1a}[data-theme=light] .about-card:hover{background:#8b5cf60f;border-color:#8b5cf647}[data-theme=light] .about-card-body,[data-theme=light] .about-hero-tag,[data-theme=light] .about-section-title,[data-theme=light] .about-section-sub,[data-theme=light] .about-api-desc{color:var(--muted)}[data-theme=light] .about-divider{background:var(--border)}[data-theme=light] .about-close{color:var(--muted);background:#ffffff0f}[data-theme=light] .about-close:hover{color:var(--text);background:#ffffff1a}.sp-overlay{z-index:800;background:#0000008c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.sp-panel{background:#111;border:1px solid #8b5cf640;border-radius:16px;width:360px;max-height:80vh;animation:.2s cubic-bezier(.34,1.56,.64,1) sp-in;overflow-y:auto;box-shadow:0 24px 64px #000c,0 0 40px #8b5cf61a}@keyframes sp-in{0%{opacity:0;transform:translateY(16px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.sp-header{border-bottom:1px solid #ffffff12;justify-content:space-between;align-items:center;padding:20px 20px 16px;display:flex}.sp-title{color:#fff;font-family:Nunito,sans-serif;font-size:16px;font-weight:900}.sp-close{color:#fff6;cursor:pointer;background:#ffffff0f;border:none;border-radius:7px;justify-content:center;align-items:center;width:26px;height:26px;transition:background .12s,color .12s;display:flex}.sp-close:hover{color:#ffffffb3;background:#ffffff1a}.sp-body{flex-direction:column;padding:20px;display:flex}.sp-section{flex-direction:column;gap:10px;display:flex}.sp-label{color:#fff6;letter-spacing:.08em;text-transform:uppercase;font-family:Space Mono,monospace;font-size:10px;font-weight:700}.sp-input{color:#ffffffd9;box-sizing:border-box;background:#ffffff0a;border:1px solid #ffffff17;border-radius:8px;outline:none;width:100%;padding:10px 12px;font-family:Nunito,sans-serif;font-size:14px;font-weight:600;transition:border-color .15s,box-shadow .15s}.sp-input:focus{border-color:#8b5cf680;box-shadow:0 0 0 3px #8b5cf61a}.sp-input::placeholder{color:#fff3}.sp-msg{margin:0;padding-left:2px;font-family:Nunito,sans-serif;font-size:12px;font-weight:600}.sp-msg--ok{color:#10b981}.sp-msg--err{color:#ef4444}.sp-btn{color:#fff;cursor:pointer;background:#7c5cbf;border:none;border-radius:8px;width:100%;padding:10px;font-family:Nunito,sans-serif;font-size:14px;font-weight:900;transition:background .12s,transform 80ms}.sp-btn:hover{background:#8f6fd4}.sp-btn:active{transform:scale(.98)}.sp-btn:disabled{opacity:.6;cursor:not-allowed}.sp-textarea{resize:vertical;min-height:72px;font-family:Nunito,sans-serif}.sp-toggle-row{cursor:pointer;align-items:center;gap:8px;display:flex}.sp-checkbox{width:14px;height:14px;accent-color:var(--purple);cursor:pointer}.sp-toggle-label{color:var(--muted);font-size:.82rem}.sp-divider{background:#ffffff12;height:1px;margin:20px 0}.sp-sublabel{color:#ffffff40;letter-spacing:.06em;text-transform:uppercase;margin-top:8px;font-family:Space Mono,monospace;font-size:9px}.sp-theme-options{gap:6px;display:flex}.sp-theme-btn{color:#ffffff59;cursor:pointer;letter-spacing:.04em;background:#ffffff08;border:1px solid #ffffff1a;border-radius:8px;flex:1;padding:8px 4px;font-family:Space Mono,monospace;font-size:10px;font-weight:700;transition:background .12s,border-color .12s,color .12s}.sp-theme-btn:hover{color:#fff9;background:#ffffff0f}.sp-theme-btn--active{color:#c084fc;background:#8b5cf624;border-color:#8b5cf673}.sp-animal-grid{flex-wrap:wrap;gap:6px;display:flex}.sp-animal-btn{color:#ffffff59;cursor:pointer;text-align:center;text-transform:capitalize;background:#ffffff08;border:1px solid #ffffff14;border-radius:10px;flex:1;min-width:56px;padding:10px 6px;font-family:Nunito,sans-serif;font-size:12px;font-weight:800;transition:background .12s,border-color .12s,color .12s}.sp-animal-btn:hover{color:#fff9;background:#ffffff0f}.sp-animal-btn--active{color:#c084fc;background:#8b5cf624;border-color:#8b5cf673;box-shadow:0 0 12px #8b5cf626}.sp-voice-options{grid-template-columns:1fr 1fr;gap:6px;display:grid}.sp-voice-btn{color:#ffffff59;cursor:pointer;letter-spacing:.04em;text-transform:uppercase;background:#ffffff08;border:1px solid #ffffff14;border-radius:8px;padding:9px 8px;font-family:Space Mono,monospace;font-size:9px;font-weight:700;transition:background .12s,border-color .12s,color .12s}.sp-voice-btn:hover{color:#fff9;background:#ffffff0f}.sp-voice-btn--active{color:#3dc9a0;background:#10b9811f;border-color:#10b98161}.ip-backdrop{z-index:490;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;position:fixed;inset:0}.ip-modal{z-index:500;opacity:0;pointer-events:none;background:#080810;border:1px solid #8b5cf62e;border-radius:16px;flex-direction:column;width:min(96vw,1100px);height:calc(100vh - 80px);max-height:820px;margin:auto;transition:opacity .22s,transform .22s;display:flex;position:fixed;inset:52px 0 0;overflow:hidden;transform:scale(.96)translateY(10px);box-shadow:0 24px 80px #000000bf,0 0 0 1px #ffffff0a}.ip-modal--open{opacity:1;pointer-events:all;transform:scale(1)translateY(0)}.ip-header{background:#ffffff04;border-bottom:1px solid #ffffff0f;flex-shrink:0;align-items:center;gap:12px;height:50px;padding:0 18px;display:flex}.ip-header-title{color:#3dc9a0;letter-spacing:.04em;flex-shrink:0;align-items:center;gap:9px;font-family:Space Mono,monospace;font-size:12px;font-weight:700;display:flex}.ip-search-wrap{flex:1;align-items:center;max-width:380px;display:flex;position:relative}.ip-search-icon{color:#ffffff47;pointer-events:none;flex-shrink:0;position:absolute;left:10px}.ip-search{color:#ffffffbf;background:#ffffff0d;border:1px solid #ffffff14;border-radius:8px;outline:none;width:100%;padding:7px 30px;font-family:Space Mono,monospace;font-size:11px;transition:border-color .15s,background .15s}.ip-search:focus{background:#8b5cf60f;border-color:#8b5cf666}.ip-search::placeholder{color:#ffffff38}.ip-search-clear{color:#ffffff4d;cursor:pointer;background:0 0;border:none;border-radius:3px;align-items:center;padding:2px;transition:color .12s;display:flex;position:absolute;right:8px}.ip-search-clear:hover{color:#ffffffa6}.ip-close{color:#ffffff4d;cursor:pointer;background:0 0;border:1px solid #ffffff14;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;margin-left:auto;transition:color .12s,border-color .12s,background .12s;display:flex}.ip-close:hover{color:#ffffffbf;background:#ffffff0a;border-color:#ffffff24}.ip-body{flex:1;display:flex;overflow:hidden}.ip-sidebar{scrollbar-width:thin;scrollbar-color:#8b5cf633 transparent;border-right:1px solid #ffffff0d;flex-direction:column;flex-shrink:0;gap:1px;width:160px;padding:10px 6px;display:flex;overflow-y:auto}.ip-cat{color:#ffffff61;cursor:pointer;text-align:left;letter-spacing:.02em;white-space:nowrap;background:0 0;border:none;border-left:2px solid #0000;border-radius:8px;align-items:center;gap:8px;padding:8px 10px;font-family:Space Mono,monospace;font-size:10px;font-weight:400;transition:background .1s,color .1s;display:flex}.ip-cat:hover{color:#ffffffa6;background:#ffffff0a}.ip-cat--active{color:#ffffffe6;border-left-color:var(--cat-color,#8b5cf6);background:#ffffff0d}.ip-cat-icon{opacity:.45;color:currentColor;flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;transition:opacity .1s;display:flex}.ip-cat--active .ip-cat-icon{opacity:1}.ip-cat:hover .ip-cat-icon{opacity:.7}.ip-cat-label{text-overflow:ellipsis;flex:1;overflow:hidden}.ip-cat-count{color:#ffffff2e;text-align:right;min-width:14px;font-size:9px}.ip-cat--active .ip-cat-count{color:#fff6}.ip-grid-area{scrollbar-width:thin;scrollbar-color:#8b5cf640 transparent;flex:1;padding:14px 16px;overflow-y:auto}.ip-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.ip-empty{color:#ffffff26;flex-direction:column;justify-content:center;align-items:center;gap:14px;height:200px;font-family:Nunito,sans-serif;font-size:13px;font-weight:600;display:flex}.ip-card{cursor:pointer;text-align:left;background:#ffffff06;border:1px solid #ffffff0d;border-radius:12px;flex-direction:column;gap:5px;padding:14px 14px 12px;transition:background .12s,border-color .12s,transform .1s,box-shadow .12s;display:flex;position:relative}.ip-card:hover{background:rgba(var(--inst-color,139,92,246), .06);border-color:#ffffff1a;transform:translateY(-1px);box-shadow:0 4px 16px #0000004d}.ip-card--selected{background:#8b5cf61a!important;border-color:#8b5cf666!important;box-shadow:0 0 0 1px #8b5cf633,0 6px 24px #00000059!important}.ip-card-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-bottom:2px}.ip-card-name{color:#ffffffe0;font-family:Nunito,sans-serif;font-size:13px;font-weight:800;line-height:1.2}.ip-card-cat{letter-spacing:.06em;text-transform:uppercase;opacity:.8;font-family:Space Mono,monospace;font-size:8px;font-weight:700}.ip-card-desc{color:#ffffff47;margin-top:2px;font-family:Nunito,sans-serif;font-size:11px;font-weight:600;line-height:1.4}.ip-card-actions{border-top:1px solid #8b5cf633;align-items:center;gap:8px;margin-top:10px;padding-top:10px;display:flex}.ip-card-play{color:#10b981;cursor:pointer;background:#10b9811a;border:1px solid #10b98166;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;transition:background .12s,border-color .12s,box-shadow .12s;display:flex}.ip-card-play:hover{background:#10b98133;border-color:#10b981b3;box-shadow:0 0 12px #10b9814d}.ip-card-play.playing{background:#10b98140;border-color:#10b981}.ip-card-use{color:#fff;letter-spacing:.05em;cursor:pointer;background:linear-gradient(135deg,#8b5cf6,#6d28d9);border:none;border-radius:8px;flex:1;padding:7px 0;font-family:Space Mono,monospace;font-size:10px;font-weight:700;transition:filter .12s,box-shadow .12s;box-shadow:0 2px 10px #8b5cf659}.ip-card-use:hover{filter:brightness(1.12);box-shadow:0 4px 18px #8b5cf680}.ip-card-use:active{filter:brightness(.9)}.ip-bottom{background:#00000040;border-top:1px solid #ffffff0f;flex-shrink:0;align-items:stretch;height:86px;display:flex;overflow:hidden}.ip-keyboard{flex-direction:column;flex:1;padding:6px 14px 4px;display:flex;overflow:hidden}.ip-keys-wrap{align-items:flex-start;gap:2px;height:52px;display:flex;overflow:hidden}.ip-key-col{flex-direction:column;display:flex;position:relative}.ip-key--white{cursor:pointer;background:#ffffffe0;border:1px solid #0000004d;border-radius:0 0 4px 4px;flex-shrink:0;width:28px;height:52px;padding:0;transition:background 60ms}.ip-key--white:hover{background:#fffffff5}.ip-key--white.ip-key--active{background:#8b5cf6!important}.ip-key--black{cursor:pointer;z-index:2;background:#1a1a2e;border:1px solid #ffffff14;border-radius:0 0 3px 3px;width:18px;height:32px;padding:0;transition:background 60ms;position:absolute;top:0;left:18px}.ip-key--black:hover{background:#2d2d45}.ip-key--black.ip-key--active{background:#7c3aed!important}.ip-keyboard-label{color:#ffffff38;letter-spacing:.03em;margin-top:6px;font-family:Space Mono,monospace;font-size:9px}.ip-samples{border-left:1px solid #ffffff0d;flex-direction:column;flex-shrink:0;gap:8px;width:200px;padding:10px 14px;display:flex}.ip-samples-label{color:#ffffff40;letter-spacing:.08em;text-transform:uppercase;font-family:Space Mono,monospace;font-size:9px;font-weight:700}.ip-samples-drop{color:#fff3;cursor:default;border:1px dashed #ffffff1a;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:7px;font-family:Space Mono,monospace;font-size:10px;transition:border-color .15s,color .15s;display:flex}.ip-samples-drop:hover{color:#8b5cf699;border-color:#8b5cf64d}[data-theme=light] .ip-modal{background:var(--panel-2);border-color:#8b5cf633}[data-theme=light] .ip-header{background:#ffffff05}[data-theme=light] .ip-header-title{color:var(--teal,#1a9e7c)}[data-theme=light] .ip-sidebar{border-right-color:var(--border)}[data-theme=light] .ip-cat{color:var(--muted)}[data-theme=light] .ip-cat:hover{color:var(--text);background:#ffffff0d}[data-theme=light] .ip-cat--active{color:#c4b5fd;border-left-color:var(--cat-color,#8b5cf6);background:#8b5cf61f}[data-theme=light] .ip-cat-count{color:#e8e3f540}[data-theme=light] .ip-cat--active .ip-cat-count{color:#e8e3f580}[data-theme=light] .ip-card{background:#ffffff0a;border-color:#ffffff1a}[data-theme=light] .ip-card:hover{background:#ffffff14;border-color:#ffffff2e}[data-theme=light] .ip-card--selected{background:#8b5cf624!important;border-color:#8b5cf666!important}[data-theme=light] .ip-card-name{color:var(--text)}[data-theme=light] .ip-card-desc{color:var(--muted)}[data-theme=light] .ip-search{border-color:var(--border);color:var(--text);background:#ffffff0d}[data-theme=light] .ip-search:focus{background:#8b5cf60f;border-color:#8b5cf680}[data-theme=light] .ip-search::placeholder{color:var(--muted)}[data-theme=light] .ip-bottom{border-top-color:var(--border);background:#ffffff05}[data-theme=light] .ip-key--white{background:#ffffffe6;border-color:#00000040}[data-theme=light] .ip-key--black{background:#1a1528}[data-theme=light] .ip-samples{border-left-color:var(--border)}[data-theme=light] .ip-samples-label{color:var(--muted)}[data-theme=light] .ip-samples-drop{border-color:var(--border);color:var(--muted)}[data-theme=light] .ip-samples-drop:hover{color:#a78bfa;border-color:#8b5cf666}[data-theme=light] .ip-empty,[data-theme=light] .ip-keyboard-label{color:var(--muted)}.proj-panel{background:var(--editor-bg);z-index:500;border-left:1px solid #f5a6232e;flex-direction:column;width:340px;transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:52px;bottom:0;right:0;transform:translate(100%);box-shadow:-8px 0 40px #0009}.proj-panel--open{transform:translate(0)}.proj-panel-header{border-bottom:1px solid var(--divider);flex-shrink:0;justify-content:space-between;align-items:center;height:42px;padding:0 14px;display:flex}.proj-panel-title{color:var(--panel-text);letter-spacing:.04em;align-items:center;gap:9px;font-family:Space Mono,monospace;font-size:11px;display:flex}.proj-panel-icon{color:#f5a623;letter-spacing:1px;background:#f5a6231a;border:1px solid #f5a6234d;border-radius:5px;padding:2px 5px;font-family:Space Mono,monospace;font-size:9px;font-weight:700}.proj-panel-close{color:#ffffff4d;cursor:pointer;background:0 0;border:1px solid #ffffff14;border-radius:6px;justify-content:center;align-items:center;width:24px;height:24px;transition:color .12s,background .12s;display:flex}.proj-panel-close:hover{color:#ffffffb3;background:#ffffff0d}.proj-panel-body{flex-direction:column;flex:1;gap:12px;padding:16px 14px;display:flex;overflow-y:auto}.proj-guest{flex-direction:column;gap:14px;padding-top:16px;display:flex}.proj-guest-text{color:#ffffff4d;text-align:center;font-family:Space Mono,monospace;font-size:11px;line-height:1.6}.proj-new-btn{color:#ffffff8c;cursor:pointer;letter-spacing:.04em;text-align:center;background:0 0;border:1px solid #ffffff1a;border-radius:8px;width:100%;padding:9px 12px;font-family:Space Mono,monospace;font-size:10px;font-weight:700;transition:background .12s,border-color .12s,color .12s}.proj-new-btn:hover{color:#c084fc;background:#8b5cf614;border-color:#8b5cf659}.proj-save-section{gap:8px;display:flex}.proj-name-input{color:#ffffffd1;background:#ffffff0a;border:1px solid #ffffff17;border-radius:8px;outline:none;flex:1;padding:9px 12px;font-family:Nunito,sans-serif;font-size:13px;font-weight:700;transition:border-color .15s,box-shadow .15s}.proj-name-input:focus{border-color:#f5a62373;box-shadow:0 0 0 3px #f5a62314}.proj-name-input::placeholder{color:#ffffff2e}.proj-save-btn{color:#0a0a10;cursor:pointer;white-space:nowrap;background:#f5a623;border:none;border-radius:8px;flex-shrink:0;padding:0 14px;font-family:Space Mono,monospace;font-size:11px;font-weight:700;transition:filter .12s,opacity .12s}.proj-save-btn:hover:not(:disabled){filter:brightness(1.1)}.proj-save-btn:disabled{opacity:.5;cursor:not-allowed}.proj-msg{color:#3dc9a0;text-align:center;font-family:Space Mono,monospace;font-size:10px}.proj-share-btn{color:#ffffff59;cursor:pointer;letter-spacing:.02em;text-align:center;background:0 0;border:1px solid #ffffff17;border-radius:7px;padding:8px 12px;font-family:Space Mono,monospace;font-size:10px;transition:background .12s,color .12s,border-color .12s}.proj-share-btn:hover{color:#ffffffa6;background:#ffffff0a;border-color:#fff3}.proj-share-url{color:#ffffff40;word-break:break-all;background:#ffffff08;border-radius:6px;padding:8px;font-family:Fira Code,monospace;font-size:9px;line-height:1.5}.proj-list-header{color:#fff3;letter-spacing:1px;text-transform:uppercase;justify-content:space-between;align-items:center;margin-top:4px;font-family:Space Mono,monospace;font-size:9px;display:flex}.proj-loading{color:#f5a62380}.proj-list{flex-direction:column;gap:4px;display:flex}.proj-empty{color:#ffffff2e;text-align:center;padding:20px 0;font-family:Space Mono,monospace;font-size:10px}.proj-item{background:#ffffff04;border:1px solid #ffffff0d;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;transition:background .12s,border-color .12s;display:flex}.proj-item:hover{background:#f5a6230a;border-color:#f5a62326}.proj-item--active{background:#f5a6230d;border-color:#f5a6234d}.proj-item-info{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.proj-item-name{color:#ffffffd1;white-space:nowrap;text-overflow:ellipsis;font-family:Nunito,sans-serif;font-size:13px;font-weight:800;overflow:hidden}.proj-item-date{color:#ffffff38;font-family:Space Mono,monospace;font-size:9px}.proj-item-actions{flex-shrink:0;align-items:center;gap:5px;display:flex}.proj-load-btn{color:#f5a623;cursor:pointer;background:#f5a62314;border:1px solid #f5a6234d;border-radius:5px;padding:5px 9px;font-family:Space Mono,monospace;font-size:9px;font-weight:700;transition:background .12s,border-color .12s}.proj-load-btn:hover{background:#f5a6232e;border-color:#f5a6238c}.proj-delete-btn{color:#fff3;cursor:pointer;background:0 0;border:1px solid #ffffff12;border-radius:5px;justify-content:center;align-items:center;width:24px;height:24px;transition:background .1s,border-color .1s,color .1s;display:flex}.proj-delete-btn:hover{color:#ef4444b3;background:#ef44441a;border-color:#ef444459}[data-theme=light] .proj-panel{border-left-color:#f5a6234d}[data-theme=light] .proj-item-name{color:var(--text)}[data-theme=light] .proj-item-date{color:var(--muted)}[data-theme=light] .proj-item{border-color:var(--border)}[data-theme=light] .proj-item:hover{background:#ffffff0a}[data-theme=light] .proj-hint{color:var(--muted)}[data-theme=light] .proj-input{border-color:var(--border);color:var(--text);background:#ffffff0d}[data-theme=light] .proj-input::placeholder,[data-theme=light] .proj-section-label{color:var(--muted)}.collab-panel{background:var(--editor-bg);z-index:500;border-left:1px solid #ec489933;flex-direction:column;width:320px;transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:52px;bottom:0;right:0;transform:translate(100%);box-shadow:-8px 0 40px #0009}.collab-panel--open{transform:translate(0)}.collab-panel-header{border-bottom:1px solid var(--divider);flex-shrink:0;justify-content:space-between;align-items:center;height:42px;padding:0 14px;display:flex}.collab-panel-title{color:var(--panel-text);letter-spacing:.04em;align-items:center;gap:9px;font-family:Space Mono,monospace;font-size:11px;display:flex}.collab-panel-icon{color:#ec4899;letter-spacing:1px;background:#ec48991a;border:1px solid #ec48994d;border-radius:5px;padding:2px 5px;font-family:Space Mono,monospace;font-size:9px;font-weight:700}.collab-panel-close{color:#ffffff4d;cursor:pointer;background:0 0;border:1px solid #ffffff14;border-radius:6px;justify-content:center;align-items:center;width:24px;height:24px;transition:color .12s,background .12s;display:flex}.collab-panel-close:hover{color:#ffffffb3;background:#ffffff0d}.collab-panel-body{flex-direction:column;flex:1;gap:18px;padding:20px 16px;display:flex;overflow-y:auto}.collab-notice{color:#ffffff4d;text-align:center;font-family:Space Mono,monospace;font-size:11px;line-height:1.6}.collab-start{flex-direction:column;gap:16px;display:flex}.collab-desc{color:#ffffff73;text-align:center;font-family:Nunito,sans-serif;font-size:13px;font-weight:600;line-height:1.55}.collab-start-btn{color:#fff;cursor:pointer;background:#ec4899;border:none;border-radius:8px;padding:12px;font-family:Space Mono,monospace;font-size:11px;font-weight:700;transition:filter .12s;box-shadow:0 0 20px #ec48994d}.collab-start-btn:hover{filter:brightness(1.1)}.collab-status{align-items:center;gap:8px;display:flex}.collab-dot{background:#2d2d42;border-radius:50%;flex-shrink:0;width:7px;height:7px}.collab-dot--live{background:#10b981;animation:1.4s ease-in-out infinite collab-pulse;box-shadow:0 0 6px #10b981}@keyframes collab-pulse{0%,to{opacity:1}50%{opacity:.45}}.collab-status-text{color:#ffffff59;font-family:Space Mono,monospace;font-size:10px}.collab-label{color:#fff3;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;font-family:Space Mono,monospace;font-size:9px}.collab-invite-section{flex-direction:column;display:flex}.collab-invite-row{gap:7px;display:flex}.collab-invite-input{color:#ffffff59;text-overflow:ellipsis;white-space:nowrap;background:#ffffff08;border:1px solid #ffffff14;border-radius:7px;outline:none;flex:1;padding:8px 10px;font-family:Fira Code,monospace;font-size:9px;overflow:hidden}.collab-copy-btn{color:#ec4899;cursor:pointer;white-space:nowrap;background:#ec48991a;border:1px solid #ec489959;border-radius:7px;padding:0 12px;font-family:Space Mono,monospace;font-size:9px;font-weight:700;transition:background .12s}.collab-copy-btn:hover{background:#ec489933}.collab-users-section{flex-direction:column;display:flex}.collab-users{flex-direction:column;gap:7px;display:flex}.collab-user{align-items:center;gap:10px;display:flex}.collab-avatar{color:#fff;opacity:.9;border:2px solid;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-family:Space Mono,monospace;font-size:9px;font-weight:700;display:flex}.collab-user-name{color:#fff9;text-overflow:ellipsis;white-space:nowrap;flex:1;font-family:Nunito,sans-serif;font-size:12px;font-weight:700;overflow:hidden}.collab-you{color:#fff3;flex-shrink:0;font-family:Space Mono,monospace;font-size:8px}.collab-leave-btn{color:#ef44448c;cursor:pointer;text-align:center;background:0 0;border:1px solid #ef444433;border-radius:7px;padding:9px;font-family:Space Mono,monospace;font-size:10px;transition:background .12s,border-color .12s,color .12s}.collab-leave-btn:hover{color:#ef4444cc;background:#ef444412;border-color:#ef444466}.collab-topbar-avatars{flex-shrink:0;align-self:stretch;align-items:center;gap:-4px;padding:0 8px;display:flex}.collab-topbar-avatar{color:#fff;border:1.5px solid var(--editor-bg);cursor:default;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;margin-left:-4px;font-family:Space Mono,monospace;font-size:7px;font-weight:700;display:flex}[data-theme=light] .collab-panel{border-left-color:#ec48994d}[data-theme=light] .collab-body{color:var(--text)}[data-theme=light] .collab-session-label,[data-theme=light] .collab-section-label{color:var(--muted)}[data-theme=light] .collab-url-box{border-color:var(--border);color:var(--text);background:#ffffff0a}[data-theme=light] .collab-participant-name{color:var(--panel-text)}.export-panel{background:var(--editor-bg);z-index:500;border-left:1px solid #10b98133;flex-direction:column;width:300px;transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:52px;bottom:0;right:0;transform:translate(100%);box-shadow:-8px 0 40px #0009}.export-panel--open{transform:translate(0)}.export-panel-header{border-bottom:1px solid var(--divider);flex-shrink:0;justify-content:space-between;align-items:center;height:42px;padding:0 14px;display:flex}.export-panel-title{color:var(--panel-text);letter-spacing:.04em;align-items:center;gap:9px;font-family:Space Mono,monospace;font-size:11px;display:flex}.export-panel-icon{color:#10b981;letter-spacing:1px;background:#10b9811a;border:1px solid #10b9814d;border-radius:5px;padding:2px 5px;font-family:Space Mono,monospace;font-size:9px;font-weight:700}.export-panel-close{color:#ffffff4d;cursor:pointer;background:0 0;border:1px solid #ffffff14;border-radius:6px;justify-content:center;align-items:center;width:24px;height:24px;transition:color .12s,background .12s;display:flex}.export-panel-close:hover{color:#ffffffb3;background:#ffffff0d}.export-panel-body{flex-direction:column;flex:1;gap:20px;padding:20px 16px;display:flex;overflow-y:auto}.export-option{flex-direction:column;gap:12px;display:flex}.export-option-info{flex-direction:column;gap:4px;display:flex}.export-option-name{color:#ffffffd1;font-family:Nunito,sans-serif;font-size:14px;font-weight:800}.export-option-desc{color:#ffffff4d;font-family:Nunito,sans-serif;font-size:12px;font-weight:600;line-height:1.5}.export-btn{cursor:pointer;letter-spacing:.03em;text-align:center;border:none;border-radius:8px;padding:11px 16px;font-family:Space Mono,monospace;font-size:11px;font-weight:700;transition:filter .12s,opacity .12s}.export-btn--wav{color:#fff;background:#8b5cf6;box-shadow:0 0 16px #8b5cf64d}.export-btn--code{color:#ffffffb3;background:#ffffff12;border:1px solid #ffffff1a}.export-btn--png{color:#3dc9a0;background:#10b9811a;border:1px solid #10b9814d}.export-btn:hover:not(:disabled){filter:brightness(1.15)}.export-btn--busy{opacity:.6;cursor:not-allowed}.export-progress-bar{background:#ffffff14;border-radius:2px;height:3px;overflow:hidden}.export-progress-fill{background:#8b5cf6;border-radius:2px;height:100%;transition:width .3s;box-shadow:0 0 6px #8b5cf699}.export-divider{background:var(--divider);height:1px}[data-theme=light] .export-panel{border-left-color:#10b9814d}[data-theme=light] .export-item-title{color:var(--text)}[data-theme=light] .export-item-desc{color:var(--muted)}.jc-overlay{z-index:8000;-webkit-backdrop-filter:blur(12px);pointer-events:all;background:#05030ed1;position:fixed;inset:0}.jc-highlight{outline-offset:5px;border-radius:8px;z-index:8500!important;pointer-events:none!important;outline:2px solid #8b5cf6!important;transition:none!important;position:relative!important;box-shadow:0 0 0 7px #8b5cf61f,0 0 50px #8b5cf673!important}.jc-onboard-card{z-index:9000;pointer-events:all;flex-direction:column;align-items:center;gap:14px;animation:.3s jc-card-in;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes jc-card-in{0%{opacity:0;transform:translate(-50%,-52%)scale(.94)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.jc-onboard-bubble{background:#0c0a1afa;border:1px solid #8b5cf661;border-radius:18px;min-width:300px;max-width:420px;padding:20px 24px 16px;box-shadow:0 24px 70px #000000d9,0 0 0 1px #ffffff0a}.jc-onboard-text{color:#ddd6ee;min-height:52px;margin:0 0 16px;font-family:Nunito,sans-serif;font-size:15px;line-height:1.65}.jc-demo{grid-template-columns:1.15fr .85fr;gap:12px;min-height:138px;margin-bottom:14px;display:grid}.jc-demo-code{color:#a7f3d0;white-space:pre-wrap;background:#050510b8;border:1px solid #8b5cf633;border-radius:10px;margin:0;padding:11px 12px;font-family:Fira Code,monospace;font-size:10px;line-height:1.45;overflow:hidden}.jc-demo-stage{background:radial-gradient(circle,#8b5cf62e,#0000 45%),linear-gradient(135deg,#1a9e7c24,#d94f8a1f),#070710;border:1px solid #ffffff14;border-radius:10px;position:relative;overflow:hidden}.jc-demo-ring{border:2px solid #8b5cf6bf;border-radius:50%;width:28px;height:28px;animation:1.6s ease-out infinite jc-demo-ring;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.jc-demo-ring--two{border-color:#d94f8ab8;animation-delay:.55s}.jc-demo-dot{background:#1a9e7c;border-radius:50%;width:8px;height:8px;animation:1.8s ease-in-out infinite jc-demo-dot;position:absolute;box-shadow:0 0 18px #1a9e7ccc}.jc-demo-dot--one{top:34%;left:18%}.jc-demo-dot--two{background:#f5c842;animation-delay:.45s;bottom:26%;right:20%}.jc-demo-wave{background:linear-gradient(90deg,#0000,#1a9e7c,#d94f8a,#0000);height:2px;animation:1.25s ease-in-out infinite jc-demo-wave;position:absolute;bottom:26%;left:-10%;right:-10%;box-shadow:0 0 16px #d94f8ab3}@keyframes jc-demo-ring{0%{opacity:.95;width:20px;height:20px}to{opacity:0;width:120px;height:120px}}@keyframes jc-demo-dot{0%,to{opacity:.7;transform:translateY(0)scale(1)}50%{opacity:1;transform:translateY(-12px)scale(1.45)}}@keyframes jc-demo-wave{0%,to{opacity:.45;transform:translateY(0)scaleY(1)}50%{opacity:1;transform:translateY(-12px)scaleY(2.4)}}.jc-cursor{color:#8b5cf6;margin-left:1px;font-weight:700;animation:.8s step-start infinite jc-blink}.jc-cursor--hide{opacity:0;animation:none}@keyframes jc-blink{50%{opacity:0}}.jc-onboard-actions{justify-content:flex-end;gap:8px;display:flex}.jc-btn{cursor:pointer;border:none;border-radius:8px;padding:7px 20px;font-family:Nunito,sans-serif;font-size:13px;font-weight:700;transition:opacity .15s,transform .1s}.jc-btn:hover{opacity:.85}.jc-btn:active{transform:scale(.96)}.jc-btn--primary{color:#fff;background:linear-gradient(135deg,#8b5cf6,#6d42e0);box-shadow:0 4px 16px #8b5cf673}.jc-btn--ghost{color:#ffffff73;background:0 0;border:1px solid #ffffff1f!important}.jc-onboard-progress{justify-content:center;gap:6px;display:flex}.jc-prog-dot{background:#ffffff24;border-radius:50%;width:7px;height:7px;transition:background .2s,transform .2s}.jc-prog-dot--active{background:#8b5cf6;transform:scale(1.35)}.jc-prog-dot--done{background:#1a9e7c}.jc-skip{color:#ffffff38;cursor:pointer;background:0 0;border:none;margin-top:-2px;padding:0;font-family:Nunito,sans-serif;font-size:11px;transition:color .15s}.jc-skip:hover{color:#ffffff80}.jc-cat{filter:drop-shadow(0 0 8px #8b5cf680);flex-shrink:0;transition:filter .15s,transform .15s;display:block}@keyframes jc-float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes jc-wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}@keyframes jc-bounce{0%,to{transform:translateY(0)scale(1)}30%{transform:translateY(-10px)scale(1.05)}60%{transform:translateY(-4px)scale(1.02)}}.jc-cat--happy{animation:2.5s ease-in-out infinite jc-float}.jc-cat--talking{animation:.5s ease-in-out infinite jc-wiggle}.jc-cat--excited{animation:.6s ease-in-out infinite jc-bounce}.jc-cat--thinking{animation:4s ease-in-out infinite jc-float}.jc-cat--idle{animation:3s ease-in-out infinite jc-float}.jc-ear{transform-origin:40px 32px}.jc-widget{z-index:500;flex-direction:column;align-items:flex-end;gap:10px;display:flex;position:fixed;bottom:20px;right:20px}.jc-cat-btn{cursor:pointer;filter:drop-shadow(0 4px 14px #8b5cf666);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:filter .18s,transform .18s;display:flex;position:relative}.jc-cat-btn:hover{filter:drop-shadow(0 6px 22px #8b5cf6b3);transform:scale(1.06)}.jc-cat-btn--open{filter:drop-shadow(0 6px 22px #8b5cf6b3)}.jc-notif{background:#ef4444;border:2px solid #0a0a14;border-radius:50%;width:11px;height:11px;animation:1.5s ease-in-out infinite jc-notif-pulse;position:absolute;top:2px;right:2px}@keyframes jc-notif-pulse{0%,to{box-shadow:0 0 #ef444480}50%{box-shadow:0 0 0 4px #ef444400}}.jc-panel{-webkit-backdrop-filter:blur(20px);background:#0a0a16f7;border:1px solid #8b5cf647;border-radius:16px;flex-direction:column;width:340px;max-height:480px;animation:.2s jc-panel-in;display:flex;overflow:hidden;box-shadow:0 20px 60px #000000d9,0 0 0 1px #ffffff0a}@keyframes jc-panel-in{0%{opacity:0;transform:translateY(10px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.jc-panel-header{border-bottom:1px solid #8b5cf621;flex-shrink:0;justify-content:space-between;align-items:center;padding:11px 14px;display:flex}.jc-panel-title{color:#e2d9f3;align-items:center;gap:7px;font-family:Nunito,sans-serif;font-size:13px;font-weight:700;display:flex}.jc-panel-close{color:#ffffff59;cursor:pointer;background:0 0;border:none;align-items:center;padding:4px;transition:color .15s;display:flex}.jc-panel-close:hover{color:#fffc}.jc-panel-body{scrollbar-width:thin;scrollbar-color:#8b5cf64d transparent;flex-direction:column;flex:1;gap:10px;padding:12px 14px;display:flex;overflow-y:auto}.jc-msg{flex-direction:column;gap:8px;font-family:Nunito,sans-serif;font-size:13px;line-height:1.55;display:flex}.jc-msg--user{color:#ddd6ee;background:#8b5cf62e;border:1px solid #8b5cf638;border-radius:12px 12px 3px;align-self:flex-end;max-width:88%;padding:8px 12px}.jc-msg--assistant{color:#ffffffd1;align-self:flex-start;max-width:100%}.jc-suggestion{background:#10b9810d;border:1px solid #10b98133;border-radius:10px;margin-top:6px;overflow:hidden}.jc-suggestion-code{color:#86efac;white-space:pre-wrap;word-break:break-all;max-height:140px;margin:0;padding:10px 12px;font-family:Fira Code,monospace;font-size:11.5px;line-height:1.5;overflow-y:auto}.jc-suggestion-row{border-top:1px solid #10b98124;gap:8px;padding:8px 12px;display:flex}.jc-apply{color:#10b981;cursor:pointer;background:#10b9812e;border:1px solid #10b98161;border-radius:8px;padding:5px 14px;font-family:Nunito,sans-serif;font-size:12px;font-weight:700;transition:background .14s}.jc-apply:hover{background:#10b98152}.jc-dismiss{color:#ef4444a6;cursor:pointer;background:0 0;border:1px solid #ef444447;border-radius:8px;padding:5px 14px;font-family:Nunito,sans-serif;font-size:12px;transition:border-color .14s,color .14s}.jc-dismiss:hover{color:#ef4444;border-color:#ef44448c}.jc-dots{gap:5px;padding:6px 0;display:flex}.jc-dots span{background:#8b5cf68c;border-radius:50%;width:6px;height:6px;animation:1.2s ease-in-out infinite jc-dot}.jc-dots span:nth-child(2){animation-delay:.2s}.jc-dots span:nth-child(3){animation-delay:.4s}@keyframes jc-dot{0%,80%,to{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.jc-quick{flex-wrap:wrap;gap:6px;margin-top:4px;display:flex}.jc-qa{color:#a78bfa;cursor:pointer;white-space:nowrap;background:#8b5cf61a;border:1px solid #8b5cf647;border-radius:20px;padding:4px 11px;font-family:Nunito,sans-serif;font-size:11px;font-weight:600;transition:background .14s,border-color .14s}.jc-qa:hover:not(:disabled){background:#8b5cf63d;border-color:#8b5cf680}.jc-qa:disabled{opacity:.4;cursor:not-allowed}.jc-panel-footer{border-top:1px solid #8b5cf61a;flex-shrink:0;gap:8px;padding:10px 12px;display:flex}.jc-input{color:#ddd6ee;background:#ffffff0d;border:1px solid #ffffff17;border-radius:10px;outline:none;flex:1;padding:8px 12px;font-family:Nunito,sans-serif;font-size:13px;transition:border-color .15s}.jc-input:focus{border-color:#8b5cf680}.jc-input::placeholder{color:#ffffff40}.jc-send{color:#fff;cursor:pointer;background:#8b5cf6bf;border:none;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:36px;transition:background .15s;display:flex}.jc-send:hover:not(:disabled){background:#8b5cf6}.jc-send:disabled{opacity:.35;cursor:not-allowed}.jc-run-tip{color:#ddd6ee;white-space:nowrap;background:#0a0a16eb;border:1px solid #8b5cf661;border-radius:10px 10px 2px;align-items:center;gap:6px;padding:7px 10px 7px 13px;font-family:Nunito,sans-serif;font-size:12px;font-weight:700;animation:.35s cubic-bezier(.22,1,.36,1) jc-tip-in;display:flex;box-shadow:0 4px 18px #0000008c}@keyframes jc-tip-in{0%{opacity:0;transform:translateY(8px)scale(.94)}to{opacity:1;transform:translateY(0)scale(1)}}.jc-run-tip-dismiss{color:#ffffff4d;cursor:pointer;background:0 0;border:none;flex-shrink:0;align-items:center;padding:2px;transition:color .15s;display:flex}.jc-run-tip-dismiss:hover{color:#ffffffb3}.lb-panel{background:var(--bg);z-index:60;flex-direction:column;font-family:Nunito,sans-serif;transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;inset:0;transform:translateY(100%)}.lb-panel--open{transform:translateY(0)}.lb-header{background:var(--topbar-bg,#0d0d14);border-bottom:1px solid var(--topbar-border,#8b5cf638);flex-shrink:0;justify-content:space-between;align-items:center;height:52px;padding:0 24px;display:flex}.lb-title{color:var(--amber);align-items:center;gap:8px;font-size:.95rem;font-weight:800;display:flex}.lb-close{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:4px;transition:color .15s;display:flex}.lb-close:hover{color:var(--text)}.lb-tabs{border-bottom:1px solid var(--border);background:var(--panel);flex-shrink:0;gap:0;display:flex}.lb-tab{color:var(--muted);letter-spacing:.06em;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:12px 16px;font-family:Space Mono,monospace;font-size:.75rem;transition:color .15s,border-color .15s}.lb-tab:hover{color:var(--text)}.lb-tab--active{color:var(--amber);border-bottom-color:var(--amber)}.lb-body{flex:1;width:100%;max-width:700px;margin:0 auto;padding:16px;overflow-y:auto}.lb-loading,.lb-empty{text-align:center;color:var(--muted);padding:60px 20px;font-size:.9rem}.lb-list{flex-direction:column;gap:6px;display:flex}.lb-row{background:var(--panel);border:1px solid var(--border);border-radius:10px;align-items:center;gap:12px;padding:12px 14px;transition:border-color .15s,background .15s;display:flex}.lb-row:hover{background:#8b5cf60f;border-color:#8b5cf659}.lb-row--medal{background:#f5a6230a;border-color:#f5a62333}.lb-row--medal:hover{background:#f5a62314;border-color:#f5a62366}.lb-rank{text-align:center;flex-shrink:0;width:32px;font-family:Space Mono,monospace;font-size:1.35rem;font-weight:900}.lb-user-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.lb-user-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:700;overflow:hidden}.lb-user-handle{color:var(--muted);font-family:Space Mono,monospace;font-size:.7rem}.lb-score{color:var(--amber);flex-direction:column;flex-shrink:0;align-items:flex-end;gap:1px;font-family:Space Mono,monospace;font-size:.88rem;font-weight:700;display:flex}.lb-score-label{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.62rem;font-weight:400}.lb-follow-btn{color:var(--purple);cursor:pointer;background:#8b5cf626;border:1px solid #8b5cf659;border-radius:6px;flex-shrink:0;padding:4px 12px;font-family:Nunito,sans-serif;font-size:.75rem;font-weight:700;transition:background .12s,border-color .12s}.lb-follow-btn:hover{background:#8b5cf647;border-color:#8b5cf699}.lb-follow-btn--following{border-color:var(--border);color:var(--muted);background:0 0}.lb-follow-btn--following:hover{color:#f87171;background:#ef444414;border-color:#ef444459}.lb-follow-btn:disabled{opacity:.5;cursor:default}.pp-page{background:var(--bg);min-height:100vh;color:var(--text);font-family:Nunito,sans-serif}.pp-topbar{background:var(--topbar-bg,#0d0d14);border-bottom:1px solid var(--topbar-border,#8b5cf638);z-index:10;justify-content:space-between;align-items:center;height:52px;padding:0 24px;display:flex;position:sticky;top:0}.pp-topbar-logo{letter-spacing:-.3px;font-size:17px;font-weight:900}.pp-back-btn{color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;align-items:center;gap:6px;padding:4px 10px;font-family:Space Mono,monospace;font-size:11px;transition:color .15s,background .15s,border-color .15s;display:flex}.pp-back-btn:hover{color:var(--text);background:#8b5cf61f;border-color:#8b5cf659}.pp-loading,.pp-notfound{min-height:60vh;color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:16px;font-size:.95rem;display:flex}.pp-content{max-width:760px;margin:0 auto;padding:40px 24px 80px}.pp-hero{align-items:flex-start;gap:24px;margin-bottom:28px;display:flex}.pp-avatar{background:var(--panel);border:2px solid var(--border);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:96px;height:96px;display:flex;overflow:hidden}.pp-identity{flex:1;min-width:0}.pp-display-name{color:var(--text);margin:0 0 4px;font-size:1.6rem;font-weight:800;line-height:1.2}.pp-username{color:var(--muted);margin-bottom:8px;font-family:Space Mono,monospace;font-size:.8rem;display:block}.pp-coins{color:var(--amber);background:#f5a6231f;border:1px solid #f5a6234d;border-radius:20px;align-items:center;gap:5px;padding:3px 8px;font-family:Space Mono,monospace;font-size:.75rem;display:inline-flex}.pp-follow-btn{background:var(--purple);color:#fff;cursor:pointer;border:none;border-radius:8px;flex-shrink:0;margin-top:4px;padding:8px 20px;font-family:Nunito,sans-serif;font-size:.85rem;font-weight:700;transition:opacity .15s,background .15s}.pp-follow-btn:hover{opacity:.85}.pp-follow-btn--following{border:1px solid var(--border-hi,#fff3);color:var(--muted);background:0 0}.pp-follow-btn--following:hover{color:#f87171;background:#ef44441a;border-color:#ef444466}.pp-stats{gap:24px;margin-bottom:24px;display:flex}.pp-stat{cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:2px;padding:0;text-decoration:none;display:flex}.pp-stat:is(button):hover .pp-stat-num{color:var(--purple)}.pp-stat-num{color:var(--text);font-size:1.25rem;font-weight:800;line-height:1;transition:color .15s}.pp-stat-label{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-family:Space Mono,monospace;font-size:.72rem}.pp-bio-section{margin-bottom:32px}.pp-bio{align-items:flex-start;gap:8px;display:flex}.pp-bio-text{color:var(--text);flex:1;font-size:.9rem;line-height:1.6}.pp-bio-placeholder{color:var(--muted);flex:1;font-size:.9rem;font-style:italic}.pp-bio-edit-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:2px;transition:color .15s}.pp-bio-edit-btn:hover{color:var(--purple)}.pp-bio-edit{flex-direction:column;gap:8px;display:flex}.pp-bio-textarea{background:var(--panel);border:1px solid var(--border);width:100%;min-height:80px;color:var(--text);resize:vertical;border-radius:8px;outline:none;padding:10px 12px;font-family:Nunito,sans-serif;font-size:.9rem;transition:border-color .15s}.pp-bio-textarea:focus{border-color:var(--purple)}.pp-bio-actions{gap:8px;display:flex}.pp-bio-save{background:var(--purple);color:#fff;cursor:pointer;opacity:1;border:none;border-radius:6px;padding:6px 16px;font-family:Nunito,sans-serif;font-size:.82rem;font-weight:700;transition:opacity .15s}.pp-bio-save:hover{opacity:.85}.pp-bio-save:disabled{opacity:.5;cursor:default}.pp-bio-cancel{border:1px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;border-radius:6px;padding:6px 14px;font-family:Nunito,sans-serif;font-size:.82rem;transition:border-color .15s,color .15s}.pp-bio-cancel:hover{border-color:var(--border-hi,#fff3);color:var(--text)}.pp-section-title{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:16px;font-family:Space Mono,monospace;font-size:.8rem}.pp-proj-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;display:grid}.pp-proj-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:8px;padding:14px;transition:border-color .15s;display:flex}.pp-proj-card:hover{border-color:#8b5cf666}.pp-proj-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:.88rem;font-weight:700;overflow:hidden}.pp-proj-meta{color:var(--muted);justify-content:space-between;align-items:center;font-family:Space Mono,monospace;font-size:.72rem;display:flex}.pp-remix-count{color:var(--teal)}.pp-remix-btn{color:var(--purple);cursor:pointer;background:#8b5cf626;border:1px solid #8b5cf659;border-radius:6px;align-self:flex-start;padding:5px 12px;font-family:Nunito,sans-serif;font-size:.78rem;font-weight:700;transition:background .15s,border-color .15s}.pp-remix-btn:hover{background:#8b5cf647;border-color:#8b5cf699}.pp-modal-overlay{z-index:100;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.pp-modal{background:var(--panel);border:1px solid var(--border);border-radius:12px;flex-direction:column;width:360px;max-height:480px;display:flex;overflow:hidden}.pp-modal-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:14px 16px;font-size:.9rem;font-weight:700;display:flex}.pp-modal-close{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:2px;transition:color .15s}.pp-modal-close:hover{color:var(--text)}.pp-modal-list{flex-direction:column;gap:4px;padding:8px;display:flex;overflow-y:auto}.pp-modal-empty{color:var(--muted);text-align:center;padding:24px 0;font-size:.85rem}.pp-modal-user{cursor:pointer;text-align:left;background:0 0;border:none;border-radius:8px;align-items:center;gap:10px;width:100%;padding:8px 10px;transition:background .12s;display:flex}.pp-modal-user:hover{background:#8b5cf61a}.pp-modal-name{color:var(--text);font-size:.85rem;font-weight:700}.pp-modal-uname{color:var(--muted);font-family:Space Mono,monospace;font-size:.72rem}