@font-face{font-family:Nunito;font-style:normal;font-weight:400 1000;font-display:swap;src:url(/fonts/nunito-latin.woff2)format("woff2")}:root{color:#f3f5ff;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;-webkit-font-smoothing:antialiased;background:#061226;font-family:Nunito,Segoe UI,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation;color:inherit;background:#0c1c32;border:1px solid #253b58;border-radius:12px;min-height:44px}button:disabled{cursor:default;opacity:.5}button[aria-pressed=true]{background:#172e51;border-color:#5075bc}a{color:#9ebcff}button,input,a{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline-offset:2px;outline:3px solid #94baff}.app-shell{--pulse-color:#aabbdc;--step-color:#ffda49;--direction-color:#70e4a0;--clave-color:#49adff;--conga-color:#c47aff;--voice-color:#b4c5ed;background:radial-gradient(at 50% 18%,#10213d55,#0000 55%),#061226;max-width:720px;min-height:100svh;margin:auto;padding:16px 20px}.app-shell.main-active{flex-direction:column;height:100svh;display:flex}.app-header{flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;display:flex}.identity{min-width:0}.brand{color:#f4f6ff;letter-spacing:-.8px;white-space:nowrap;font-size:30px;font-weight:1000;line-height:1.08;text-decoration:none}.eyebrow{color:#a7b9db;letter-spacing:.3px;margin-top:3px;font-size:12px;display:block}.tabs{align-items:center;gap:4px;display:flex}.tabs button{color:#adbfdf;background:0 0;border-color:#0000;min-width:44px;padding:7px;font-size:12px}.tabs button[aria-selected=true]{color:#fff}.tabs button[aria-selected=true]:after{content:"";background:#6f93ff;border-radius:2px;width:14px;height:2px;margin:3px auto 0;display:block}.tabs .action-icon{width:26px;height:26px}.main-panel{flex:1;min-height:0;display:flex}.player{flex-direction:column;gap:8px;width:100%;min-height:0;display:flex}.action-icon,.stroke-icon{vertical-align:middle;flex-shrink:0;width:24px;height:24px}.stroke-step,.step-legend{color:var(--step-color)}.stroke-direction,.direction-legend{color:var(--direction-color)}.stroke-clave,.clave-legend{color:var(--clave-color)}.stroke-open,.stroke-slap,.stroke-heel,.stroke-toe,.conga-legend{color:var(--conga-color)}.stroke-pulse{color:var(--pulse-color)}.now-stage{flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:175px;display:flex}.now-stage h1{color:#a9bae2;letter-spacing:2px;margin:0;font-size:16px;font-weight:900;line-height:1.2}.now-number{letter-spacing:-8px;color:#fffbea;font-variant-numeric:tabular-nums;text-shadow:0 0 24px #fff3be14;min-height:0;font-size:clamp(100px,25svh,260px);font-weight:1000;line-height:.94}.now-stage.is-playing .now-number{text-shadow:0 0 22px #fff3be35}.now-and{letter-spacing:-2px;vertical-align:middle;color:#bfcef0;margin-left:5px;font-size:.38em}.now-events{grid-template-columns:repeat(3,1fr);width:min(100%,350px);margin-top:10px;display:grid}.now-event{color:#a2b4d4;flex-direction:column;align-items:center;gap:5px;font-size:14px;font-weight:800;display:flex}.now-event .stroke-icon{opacity:.13;width:clamp(34px,7svh,70px);height:clamp(34px,7svh,70px)}.now-event.has-event .stroke-icon{opacity:.7}.now-event.sounding .stroke-icon{opacity:1;filter:drop-shadow(0 0 7px)}.now-event.sounding{color:#f3f5ff}.panel-heading{flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;min-height:36px;display:flex}.focus-pulse{color:#8e9fbe;align-items:center;gap:6px;font-size:10px;display:flex}.focus-pulse .stroke-icon{opacity:.22;width:18px;height:18px}.focus-pulse.sounding .stroke-icon{opacity:1}.edit-main{color:#d4dff4;justify-content:center;align-items:center;gap:6px;min-height:36px;padding:5px 10px;font-size:11px;display:flex}.counts{background:linear-gradient(135deg,#0d2038,#0a192d);border:1px solid #263c58;border-radius:16px;flex-shrink:0;padding:5px}.count-group{grid-template-columns:repeat(8,minmax(0,1fr));min-width:0;display:grid}.count-group+.count-group{border-top:1px solid #2a405d;margin-top:4px;padding-top:4px}.beat{background-color:#0000;border:1px solid #0000;border-radius:8px;flex-direction:column;align-items:center;gap:3px;min-width:0;min-height:0;padding:4px 0;display:flex;position:relative}.beat+.beat:before{content:"";background:#263c5866;width:1px;position:absolute;top:7px;bottom:7px;left:-1px}.beat:disabled{opacity:1}.beat>span{color:#ecf1ff;justify-content:center;align-items:center;height:26px;font-size:26px;font-weight:1000;line-height:1;display:flex}.beat.between>span{color:#a1b4d9;font-size:17px}.beat small{grid-template-rows:repeat(3,22px) 12px;place-items:center;gap:1px;width:100%;display:grid}.beat .hit-icon{opacity:.8;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.beat .hit-icon .stroke-icon{width:23px;height:22px}.beat .track-0 .stroke-icon{width:14px;height:12px}.beat .empty-mark{color:#354c6c;font-size:12px;line-height:1}.beat .slot-0{font-size:10px}.beat.current{background:#152943;border-color:#fff1d7;box-shadow:inset 0 0 0 1px #fff1d7}.beat.step-hit>span{color:#fff6d9;text-shadow:0 0 9px #ffefb8b3}.beat .hit-icon.striking{opacity:1;filter:drop-shadow(0 0 3px)}.legend{background:#0b1b30;border:1px solid #203650;border-radius:12px;flex-shrink:0;justify-content:space-evenly;align-items:center;gap:5px;min-height:30px;padding:3px 6px;font-size:11px;display:flex}.legend>span{align-items:center;gap:5px;display:flex}.legend .stroke-icon{width:19px;height:21px}.legend>span{color:#dfe7f7}.pulse-visual{flex-shrink:0;align-items:stretch;gap:8px;display:flex}.voice-toggle{flex:1;justify-content:center;align-items:center;gap:6px;min-width:0;padding:5px 7px;display:flex}.voice-toggle .action-icon{width:20px;height:20px;color:var(--voice-color)}.voice-copy{flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 4px;line-height:1.15;display:flex}.voice-copy small{color:#b9c8e1;font-size:11px}.voice-copy b{font-size:12px;font-weight:800}.voice-copy small:nth-of-type(2){width:100%;font-size:9px}.pulse-visual [role=group]{border:1px solid #253b58;border-radius:12px;align-items:center;gap:0;padding:2px;display:flex}.pulse-visual [role=group]:before{content:"Visa pulsruta";color:#a9bad9;margin-inline:5px;font-size:10px}.pulse-visual [role=group] button{background:0 0;border-color:#0000;min-width:36px;min-height:40px;padding:4px;font-size:11px}.pulse-visual [role=group] button[aria-pressed=true]{color:#fff;background:linear-gradient(135deg,#294473,#243c65);border-color:#5c7fb6}.main-transport{flex-shrink:0;grid-template-columns:minmax(0,1fr) 120px;align-items:center;gap:15px;display:grid}.main-tempo{align-items:center;gap:10px;min-width:0;display:flex}.main-tempo label{white-space:nowrap;align-items:baseline;gap:4px;display:flex}.main-tempo strong{font-variant-numeric:tabular-nums;font-size:22px;font-weight:1000;line-height:1}.main-tempo small{font-size:10px;font-weight:800}.main-tempo input{width:100%;min-width:0;margin:0}.play{color:#fff;background:linear-gradient(130deg,#345bdc,#3155d0);border:1px solid #8baaff;border-radius:14px;justify-content:center;align-items:center;gap:7px;width:100%;min-height:48px;font-size:19px;font-weight:1000;display:flex;box-shadow:inset 0 1px 2px #b4c9ff66,0 3px 14px #18387844}.play .action-icon{fill:currentColor;width:24px;height:24px}.quick-tracks{flex-shrink:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;display:grid}.quick-tracks button{background:0 0;border-color:#0000;border-radius:10px;grid-template-columns:19px auto;place-content:center;align-items:center;gap:1px 5px;min-height:48px;padding:3px;display:grid}.quick-tracks button[aria-pressed=true]{background:#112746;border-color:#2d4b77}.quick-tracks .stroke-icon{grid-row:1/3;width:18px;height:18px}.quick-tracks b{text-align:left;font-size:11px;font-weight:800;line-height:1.1}.quick-tracks small{text-align:left;color:#a9bcde;font-size:10px;line-height:1.1}.quick-tracks button:not([aria-pressed=true]) .stroke-icon{opacity:.3}input[type=range]{accent-color:#668cff;width:100%;min-height:44px}.main-tempo input[type=range]{appearance:none;cursor:pointer;background:0 0}.main-tempo input::-webkit-slider-runnable-track{background:linear-gradient(to right,#507bff 0 var(--tempo-progress),#243953 var(--tempo-progress) 100%);border-radius:10px;height:6px}.main-tempo input::-webkit-slider-thumb{appearance:none;background:#f5f7ff;border:1px solid #dae5ff;border-radius:50%;width:23px;height:23px;margin-top:-8px;box-shadow:0 2px 7px #0004}.main-tempo input::-moz-range-track{background:#243953;border-radius:10px;height:6px}.main-tempo input::-moz-range-progress{background:#507bff;height:6px}.main-tempo input::-moz-range-thumb{background:#f5f7ff;border:1px solid #dae5ff;border-radius:50%;width:23px;height:23px}.sample-notice,.voice-notice,.edit-hint{color:#c1cfe6;margin:0;font-size:11px}.sample-notice button,.voice-notice button{padding:5px}.is-editing .counts{flex-direction:column;flex:1;min-height:0;display:flex}.is-editing .count-group{flex:1;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}.is-editing .beat{border-color:#2e4564;justify-content:center;min-height:44px}.is-editing .beat small{grid-template-rows:24px}.is-editing .main-transport{grid-template-columns:minmax(0,1fr) 145px}.is-editing .play{font-size:12px}@media (width<=380px){.app-shell{padding:10px}.brand{font-size:26px}.eyebrow{font-size:10px}.main-transport{grid-template-columns:minmax(0,1fr) 100px;gap:9px}.main-tempo{gap:6px}.main-tempo strong{font-size:19px}.legend{gap:3px;padding-inline:3px;font-size:10px}.legend>span{gap:2px}.pulse-visual{gap:5px}.voice-toggle .action-icon{width:16px}.voice-copy small{font-size:10px}.voice-copy b{font-size:11px}.pulse-visual [role=group]:before{display:none}.quick-tracks{gap:2px}}@media (height<=780px){.app-shell{padding-block:8px}.player{gap:5px}.now-stage{flex-flow:wrap;column-gap:20px;min-height:95px}.now-stage h1{text-align:center;width:100%;font-size:11px;line-height:1}.now-number{letter-spacing:-4px;font-size:90px}.now-events{width:210px;margin:0}.now-event{gap:2px;font-size:11px}.now-event .stroke-icon{width:34px;height:34px}.beat small{grid-template-rows:repeat(3,18px) 10px;gap:0}.beat .hit-icon .stroke-icon{width:20px;height:18px}.beat .track-0 .stroke-icon{width:13px;height:10px}.beat>span{height:22px;font-size:23px}.beat{gap:1px;padding-block:2px}.beat.between>span{font-size:15px}.counts{padding:3px}.count-group+.count-group{margin-top:3px;padding-top:3px}.legend{min-height:26px}.legend .stroke-icon{height:18px}.panel-heading,.edit-main{min-height:32px}.is-editing .beat small{grid-template-rows:20px}}@media (height<=590px){.brand{font-size:25px}.eyebrow{font-size:10px}.app-header{margin-bottom:2px}.now-stage{column-gap:12px;min-height:77px}.now-stage h1{display:none}.now-number{font-size:77px}.now-events{width:195px}.now-event .stroke-icon{width:30px;height:30px}.player{gap:4px}.quick-tracks button,.play{min-height:44px}}@media (height<=500px){.app-shell.main-active{height:auto;min-height:100svh}.player{min-height:0}.now-stage{flex:none;min-height:110px}.is-editing .counts{flex:none}}@media (prefers-reduced-motion:reduce){.beat .hit-icon.striking,.now-event.sounding .stroke-icon{filter:none}.beat.step-hit>span,.now-stage.is-playing .now-number{text-shadow:none}}.settings-panel{padding:16px 4px 40px}.settings-panel h2{letter-spacing:-.5px;font-size:24px;font-weight:1000}.help{color:#a9b9d5;font-size:14px;line-height:1.7}.saved-counts{border-block:1px solid #243954;margin:24px 0;padding:22px 0}.section-title{justify-content:space-between;align-items:center;gap:12px;display:flex}.section-title h2{font-size:21px}.section-title>span{color:#bda6bb;white-space:nowrap;font-size:11px}.save-form label,.load-form>label{color:#dbe4f5;margin:18px 0 8px;font-size:14px;display:block}.library-row{gap:10px;display:flex}.library-row input,.library-row select{color:#f3f5ff;background:#0e2038;border:1px solid #344e72;border-radius:12px;flex:1;width:100%;min-width:0;min-height:48px;padding:12px;font-size:16px}.library-row button{background:#23428b;border-color:#5e82dd;min-width:140px;min-height:48px;padding:12px 18px}.library-message{color:#ffd0b1;font-size:13px;line-height:1.6}.library-message:empty{display:none}.library-error{color:#ffbc96;font-size:13px;line-height:1.6}.track{background:linear-gradient(130deg,#10223a,#0b192e);border:1px solid #243954;border-radius:17px;margin:12px 0;padding:16px}.track-top{align-items:center;gap:12px;display:flex}.track-top>span{color:#a9b9d5;margin-left:auto;font-size:12px}.track-top>b{font-size:15px}.track-controls{align-items:center;gap:16px;margin-top:16px;display:flex}.track-controls label{color:#a9b9d5;flex:1;min-width:0;font-size:12px}.track-controls button{padding:10px 14px;font-size:12px}details{color:#a9b9d5;margin-top:28px;font-size:13px;line-height:1.7}summary{cursor:pointer;align-content:center;min-height:44px}@media (width<=600px){.library-row{flex-direction:column}.track-controls{gap:10px}.track-controls button{max-width:125px}.section-title h2{font-size:18px}}.now-stage{container-type:size}.now-number{letter-spacing:-5px;flex-shrink:0;font-family:Segoe UI,Arial,sans-serif;font-size:clamp(76px,55cqh,230px);font-weight:800;line-height:1}.now-stage h1{flex-shrink:0}.now-events{flex-shrink:0;margin-top:6px}.brand{font-weight:900}@media (height<=780px){.now-stage{container-type:normal}.now-number{font-size:80px}.now-event .stroke-icon{width:32px;height:32px}}@media (height<=590px){.now-number{font-size:72px}.now-event .stroke-icon{width:30px;height:30px}}.panel-heading,.edit-main{min-height:44px}.update-notice{color:#f5f7ff;background:#10213b;border:1px solid #536d8e;border-radius:16px;margin:12px 0;padding:14px}.update-notice p{margin:0 0 10px;font-size:14px}.update-notice button{border-radius:12px;min-height:44px;padding:8px 16px}.player{position:relative}.now-stage{flex-flow:column;gap:0;min-height:124px;container-type:size}.now-number{letter-spacing:-3px;font-size:clamp(68px,56cqh,210px);line-height:1}.now-events{width:min(100%,320px);margin-top:3px}.now-event{gap:2px;font-size:11px}.now-event .stroke-icon{width:clamp(26px,16cqh,52px);height:clamp(26px,16cqh,52px)}.panel-heading{pointer-events:none;align-items:flex-start;position:absolute;top:0;left:0;right:0}.edit-main{pointer-events:auto;background:0 0;border-color:#0000;gap:4px;min-height:44px;padding:4px 7px;font-size:10px}.edit-main .action-icon{width:14px;height:14px}.focus-pulse{padding-top:14px;font-size:9px}.focus-pulse .stroke-icon{width:14px}.is-editing .panel-heading{position:static}.voice-toggle{gap:4px;padding:3px 5px}.voice-toggle .action-icon{width:16px;height:16px}.voice-copy{flex-direction:column;gap:1px}.voice-copy small{font-size:9px}.voice-copy small:first-child:after{content:none}.voice-copy b{font-size:10px}.step-sound-toggle{flex-direction:column;justify-content:center;align-items:center;min-width:58px;padding:3px 5px;display:flex}.step-sound-toggle small{color:#b9c8e1;font-size:9px}.step-sound-toggle b{font-size:10px}.pulse-visual{gap:5px}.pulse-visual [role=group]:before{display:none}.pulse-visual [role=group] button{min-width:44px;min-height:40px}.main-transport{grid-template-columns:minmax(0,1fr) 94px;align-self:center;gap:10px;width:100%;max-width:470px}.main-tempo{gap:7px}.main-tempo strong{font-size:18px}.main-tempo small{font-size:9px}.play{border-radius:12px;gap:5px;min-height:44px;font-size:16px}.play .action-icon{width:19px;height:19px}.main-tempo input::-webkit-slider-runnable-track{height:4px}.main-tempo input::-webkit-slider-thumb{width:19px;height:19px;margin-top:-7.5px}.main-tempo input::-moz-range-track{height:4px}.main-tempo input::-moz-range-progress{height:4px}.main-tempo input::-moz-range-thumb{width:19px;height:19px}.beat .track-0{opacity:.65}.beat .track-0.striking{opacity:1}.beat .track-0.striking .stroke-pulse{color:#fff4cf;filter:drop-shadow(0 0 4px #ffe1a0);stroke-width:3px}@media (width<=380px){.voice-toggle .action-icon{display:none}.main-transport{grid-template-columns:minmax(0,1fr) 88px}}@media (height<=590px){.now-stage{min-height:116px}.now-number{font-size:68px}.now-event .stroke-icon{width:25px;height:25px}.now-event{font-size:10px}.now-events{margin-top:1px}}@media (height<=500px){.now-stage{flex:none;height:130px}}@media (prefers-reduced-motion:reduce){.beat .track-0.striking .stroke-pulse{filter:none}}.pulse-visual [role=group]{padding:0;position:relative}.pulse-visual [role=group]:before{text-align:center;pointer-events:none;margin:0;font-size:8px;line-height:10px;display:block;position:absolute;top:1px;left:0;right:0}.pulse-visual [role=group] button{min-height:44px;padding-top:12px;padding-bottom:1px}.beat .hit-icon.striking:not(.track-0){filter:none}.beat .hit-icon.striking:not(.track-0) .stroke-icon{filter:brightness(1.3)drop-shadow(0 0 3px)drop-shadow(0 0 5px)}.now-event.sounding .stroke-icon{transform-origin:50%;animation:.12s ease-out instrument-strike}@keyframes instrument-strike{0%{filter:brightness(1.35)drop-shadow(0 0 10px);transform:scale(1.17)}to{filter:drop-shadow(0 0 7px);transform:scale(1)}}@media (prefers-reduced-motion:reduce){.now-event.sounding .stroke-icon{animation:none}.beat .hit-icon.striking:not(.track-0) .stroke-icon{filter:brightness(1.3)}}