.split-view{display:flex;flex-direction:row;width:100%;flex:1;min-height:0;overflow:hidden}.split-view-left{flex:0 0 60%;max-width:60%;overflow:hidden;display:flex;flex-direction:column;border-right:1px solid #27272a}.split-view-right{flex:0 0 40%;max-width:40%;overflow-y:auto;background:linear-gradient(180deg,#0a0a10,#08080c 120px);border-left:1px solid #1f2937;color:#d4d4d8;padding:1.25rem;font-family:system-ui,sans-serif;font-size:.85rem;line-height:1.6}.split-view-right .zenbakiz-html{width:100%}.split-view-right .main-page{margin-bottom:1rem}.split-view-right .nota-osoa{display:inline-flex;flex-direction:column;align-items:center;margin:0 3px 10px}.split-view-right .nota{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:14px;font-weight:700;background:#1e1e3a;color:#e4e4e7;box-shadow:0 2px 6px #0000004d;transition:background .1s ease,box-shadow .1s ease}.split-view-right .nota-osoa{transition:outline .08s ease,background .08s ease}.split-view-right .behean{font-size:11px;color:#a1a1aa;font-family:monospace;margin-top:3px;white-space:nowrap}.split-view-right .goigoian{font-size:14px;color:#fff;font-family:monospace;font-weight:700}.split-view-right .border-dark{border-color:#3f3f46!important}.split-view-right .d-flex{display:flex}.split-view-right .flex-row{flex-direction:row}.split-view-right .flex-column{flex-direction:column}.split-view-right .align-items-center{align-items:center}.split-view-right .justify-content-center{justify-content:center}.split-view-right .justify-content-start{justify-content:flex-start}.split-view-right .flex-wrap{flex-wrap:wrap}.split-view-right .gap-1{gap:.25rem}.split-view-right .mt-1{margin-top:.25rem}.split-view-right .mb-3{margin-bottom:.75rem}.split-view-right .me-1{margin-right:.25rem}.split-view-right .position-relative{position:relative}.split-view-right .h-100{height:100%!important}.split-view-right .h-75{height:75%!important}.split-view-right .h-50{height:50%!important}.split-view-right .h-25{height:25%!important}.split-view-right .h-auto{height:auto!important}.split-view-right .mh-100{max-height:100%!important}.split-view-right .vh-100{height:100vh!important}.split-view-right .min-vh-100{min-height:100vh!important}.split-view-right img{display:none}.split-view-right img[alt=Parentesia]{display:inline;height:2.4em;filter:brightness(0) invert(1);opacity:.85}.split-view-right svg.parentesi-etzana{display:inline;height:1.4em;width:auto;color:#e4e4e7;opacity:.85}.split-view-right h2,.split-view-right h3,.split-view-right h4{color:#e4e4e7;margin-bottom:.5rem}.split-view-right p,.split-view-right div:not([class]){color:#d4d4d8}.split-view-right .title-page{color:#f4f4f5;font-weight:700;font-size:1rem;margin-bottom:.5rem}@media(max-width:767px){.split-view{flex-direction:column;overflow-y:auto}.split-view-left,.split-view-right{flex:none;max-width:100%;width:100%}.split-view-left{border-right:none;border-bottom:1px solid #27272a;overflow-y:visible}.split-view-right{min-height:300px}}.btn-active{transition:fill .05s ease}circle[id^=treble-glow-],circle[id^=bass-glow-]{transition:opacity .08s ease}.visualizer{background:var(--color-bg-app, #050507);color:var(--color-text);font-family:var(--font-sans, Inter, system-ui, sans-serif);min-height:100vh}.overlay #drop-zone{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);border-radius:calc(var(--radius-md) * 1px)}.tab-btn{background:transparent;border:none;color:var(--color-text-muted, #9fa0a0);padding:calc(var(--space-1));cursor:pointer;border-radius:var(--radius-sm);transition:color var(--motion-fast, .14s) ease,border-color var(--motion-fast, .14s) ease,box-shadow var(--motion-fast, .14s) ease}.tab-btn.active{color:var(--color-text);background:linear-gradient(90deg,var(--color-accent),var(--color-accent-mint, #2fd6a1));box-shadow:var(--shadow-1)}.btn-submit{margin-top:var(--space-3);padding:10px 16px;border-radius:999px;font-weight:600;transition:transform var(--motion-fast) ease,box-shadow var(--motion-medium) ease}.btn-primary{background:linear-gradient(90deg,var(--color-accent),var(--color-accent-mint, #2fd6a1));color:#050507}.btn-submit:hover,.btn-primary:hover,.tab-btn:hover{filter:brightness(1.08)}.btn-submit:focus-visible,.btn-primary:focus-visible,.tab-btn:focus-visible,#speed-select:focus-visible,#seek-bar:focus-visible,#html-input:focus-visible,#html-input-combined:focus-visible,#bpm-input:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 40%,transparent)}.controls{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#00000026;border-radius:var(--radius-md);position:fixed;bottom:18px;left:50%;transform:translate(-50%);z-index:120}.btn-play{min-width:44px;min-height:44px;display:inline-grid;place-items:center;border-radius:10px;background:var(--color-bg-surface, #101010);color:var(--color-accent);font-size:18px;border:none;box-shadow:var(--shadow-1)}.time-display{font-family:var(--font-mono, "JetBrains Mono", monospace);font-size:13px;color:var(--color-text-secondary, #b8b3b0);font-variant-numeric:tabular-nums}.is-hidden{display:none}.video-status{display:none;text-align:center;padding:8px 0}.video-progress{width:200px;vertical-align:middle}.video-progress-text{margin-left:8px;color:var(--color-text-secondary, #b8b3b0)}.btn-cancel-video{margin-left:8px;font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-bg-surface, #101010);color:var(--color-text)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){*{transition:none;animation:none}}@media(max-width:640px){.controls{gap:6px;padding:8px;bottom:12px}.btn-play{min-width:40px;min-height:40px}}.fit-metrics{display:none;font-size:13px;color:var(--color-text-secondary, #b8b3b0);margin-top:8px;font-family:var(--font-mono, "JetBrains Mono", monospace)}@media(min-width:800px){.fit-metrics{display:block}}.btn-play,.btn-submit,#file-label{will-change:transform,box-shadow}.piano-roll-strip:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,rgba(0,217,146,.4) 20%,rgba(0,217,146,.2) 50%,rgba(0,217,146,.4) 80%,transparent 100%);pointer-events:none;z-index:10;opacity:.7}.spinner-ring{width:28px;height:28px;position:relative;flex-shrink:0}.spinner-ring-inner{width:28px;height:28px;border:2.5px solid rgba(255,255,255,.08);border-top-color:#10b981;border-radius:50%;animation:spin-ring .7s cubic-bezier(.4,0,.2,1) infinite}@keyframes spin-ring{to{transform:rotate(360deg)}}.loader-loading{display:flex;align-items:center;gap:1rem;padding:2.5rem 1rem;color:#a1a1aa;animation:fadeIn .3s ease}.loader-loading-text{display:flex;flex-direction:column;gap:.15rem}.loader-loading-title{font-size:.9rem;font-weight:600;color:#e4e4e7}.loader-loading-subtitle{font-size:.75rem;color:#71717a}.visualizer-container{animation:fadeIn .35s ease both}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.tab-btn{transition:all .2s ease}.tab-btn:hover:not(.active){transform:translateY(-1px);box-shadow:0 2px 8px #0003}@media(prefers-reduced-motion:reduce){.spinner-ring-inner{animation-duration:1.5s}.visualizer-container,.loader-loading{animation:none}}.visualizer-svg-enter{animation:svgFadeIn .5s ease both}@keyframes svgFadeIn{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.tooltip-validation{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:.5rem;padding:.375rem .75rem;border-radius:.5rem;background:#18181b;border:1px solid #3f3f46;color:#d4d4d8;font-size:.6875rem;white-space:nowrap;box-shadow:0 4px 16px #0006;pointer-events:none;opacity:0;transition:opacity .2s ease;z-index:20}.tooltip-validation:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:#3f3f46}@keyframes tabFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.tab-panel-enter{animation:tabFadeIn .2s ease both}#trikitixa-svg{width:100%!important;height:auto!important;max-height:100%;display:block;max-width:min(100%,880px);margin-inline:auto;touch-action:manipulation;overflow:visible;filter:drop-shadow(0 10px 30px rgba(0,0,0,.4))}#trikitixa-svg circle[id^=treble-btn-],#trikitixa-svg circle[id^=bass-btn-]{stroke:var(--btn-stroke, #4a4745)!important;stroke-width:var(--btn-stroke-width, 2.5)!important;transition:fill .1s ease,filter .15s ease,transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s ease;transform-box:fill-box;transform-origin:center;cursor:pointer}#trikitixa-svg circle[id^=treble-glow-].btn-glow-active,#trikitixa-svg circle[id^=bass-glow-].btn-glow-active{opacity:.3!important;fill:var(--finger-color, #00d992);transition:opacity .12s ease,fill .1s ease;filter:blur(2px)}#trikitixa-svg .touch-overlay{cursor:pointer}#trikitixa-svg circle[id^=treble-btn-]:hover,#trikitixa-svg circle[id^=bass-btn-]:hover,#trikitixa-svg circle[id^=treble-btn-]:focus,#trikitixa-svg circle[id^=bass-btn-]:focus{filter:brightness(1.3) drop-shadow(0 0 6px rgba(0,217,146,.4));stroke:var(--color-accent, #00d992)!important;stroke-width:3!important;outline:none}.btn-active{filter:drop-shadow(0 0 8px var(--finger-color, #00d992)) brightness(1.1);transform:scale(1.18);transition:filter .1s ease,transform .1s ease}