.mml-layout{flex-direction:column;gap:1.25rem;display:flex}.mml-tabs{border-bottom:1px solid var(--border);gap:.5rem;padding-bottom:1px;display:flex;overflow-x:auto}.mml-tab-btn{cursor:pointer;color:var(--text-dim);white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000;padding:.6rem 1rem;font-size:.95rem;font-weight:600;transition:all .15s}.mml-tab-btn:hover{color:var(--text);background:var(--bg-hover);border-radius:var(--radius) var(--radius) 0 0}.mml-tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}.mml-grid{grid-template-columns:1fr;gap:1.25rem;display:grid}.mml-canvas-insight-wrap{margin-top:1rem}@media (width>=800px){.mml-grid{grid-template-columns:1.1fr .9fr;align-items:start}}.mml-canvas-wrap{width:100%;min-width:0}.mml-canvas-shell{aspect-ratio:1;border:1px solid var(--border);border-radius:var(--radius);background:#111420;justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}html.theme-light .mml-canvas-shell,:root:not(.theme-dark) .mml-canvas-shell{background:#00000005!important}.mml-canvas-actions{z-index:5;gap:.5rem;display:flex;position:absolute;top:.5rem;right:.5rem}.mml-fs-btn{width:2.2rem;height:2.2rem;color:var(--text);cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1a1d27d9;border:0;border-radius:.4rem;justify-content:center;align-items:center;font-size:1.1rem;transition:all .15s;display:flex}.mml-fs-btn:hover{color:var(--accent);background:var(--bg-hover);transform:scale(1.05)}html.theme-light .mml-fs-btn,:root:not(.theme-dark) .mml-fs-btn{background:#ffffffd9!important;border:1px solid #00000014!important}.mml-canvas-shell:fullscreen{background:#090b11;border:none;justify-content:center;align-items:center;width:100vw;height:100vh;padding:1.5rem;display:flex}.mml-canvas-shell:fullscreen canvas{max-width:95vw;max-height:95vh}canvas#mml-canvas{cursor:pointer;display:block}.mml-sidebar{flex-direction:column;gap:1.25rem;display:flex}.mml-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}.mml-card-title{color:var(--text);align-items:center;gap:.4rem;margin-bottom:.75rem;font-size:1.05rem;font-weight:700;display:flex}.mml-prime-pads{grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1rem;display:grid}@media (width<=480px){.mml-prime-pads{grid-template-columns:repeat(3,1fr)}}.mml-pad-btn{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);height:3.5rem;color:var(--text);font-family:var(--font-mono);cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;transition:all .15s;display:flex}.mml-pad-btn:hover{background:var(--bg-hover);border-color:var(--prime-color,var(--accent))}.mml-pad-btn span.num{font-size:1.15rem;font-weight:700}.mml-pad-btn span.note{opacity:.65;font-size:.75rem}.mml-pad-btn[data-prime="2"]{--prime-color:#f76c8f}.mml-pad-btn[data-prime="3"]{--prime-color:#f59e0b}.mml-pad-btn[data-prime="5"]{--prime-color:#10b981}.mml-pad-btn[data-prime="7"]{--prime-color:#06b6d4}.mml-pad-btn[data-prime="11"]{--prime-color:#6366f1}.mml-pad-btn[data-prime="13"]{--prime-color:#a855f7}.mml-pad-btn[data-prime="17"]{--prime-color:#ec4899}.mml-pad-btn:hover{border-color:var(--prime-color);background:color-mix(in srgb, var(--prime-color) 12%, var(--bg));transform:translateY(-2px)}.mml-pad-btn.active{border-color:var(--prime-color);background:var(--prime-color);color:#fff;box-shadow:0 0 12px var(--prime-color);transform:scale(.96)}.mml-pad-btn.active span.note{color:#fff;opacity:.9}@keyframes mml-shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.mml-pad-btn.error-shake{animation:.15s ease-in-out 2 mml-shake;box-shadow:0 0 8px #ef444466;border-color:#ef4444!important}.mml-btn-row{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.75rem;display:flex}.mml-btn{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-hover);color:var(--text);cursor:pointer;height:var(--control-h);align-items:center;gap:.35rem;padding:.5rem .9rem;font-weight:600;transition:all .15s;display:inline-flex}.mml-btn:hover{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, var(--bg-hover))}.mml-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.mml-btn-primary:hover{background:var(--accent-dim);border-color:var(--accent-dim)}.mml-btn:disabled{opacity:.4;cursor:not-allowed;border-color:var(--border);background:var(--bg-hover)}.mml-select{height:var(--control-h);border-radius:var(--radius);border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;cursor:pointer;flex-grow:1;padding:.4rem .65rem}.mml-select:focus{border-color:var(--accent);outline:none}.mml-row{grid-template-columns:1fr;gap:.75rem;margin-bottom:1rem;display:grid}.mml-field{flex-direction:column;gap:.35rem;display:flex}.mml-field label{color:var(--text-dim);font-size:.85rem;font-weight:600}.mml-input-group{align-items:center;gap:.5rem;display:flex}.mml-input-group input[type=number]{height:var(--control-h);border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);width:5.5rem;color:var(--text);text-align:right;font-family:var(--font-mono);padding:0 .5rem}.mml-input-group input[type=number]:focus{border-color:var(--accent);outline:none}.mml-slider{accent-color:var(--accent);flex-grow:1;height:6px}.mml-math-output{font-family:var(--font-mono);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);word-break:break-all;margin-bottom:.75rem;padding:.75rem}.mml-math-large{color:var(--accent);font-size:1.5rem;font-weight:700}.mml-factors{color:var(--text-dim);margin-top:.25rem}.mml-factors span.factor{color:var(--text);font-weight:600}.mml-insight-box{border-left:3px solid var(--accent);background:color-mix(in srgb, var(--accent) 5%, var(--bg-surface));border-radius:0 var(--radius) var(--radius) 0;padding:.75rem;font-size:.9rem;line-height:1.45}.mml-euclid-tracks{flex-direction:column;gap:.6rem;margin-bottom:1rem;display:flex}.mml-track-bar{border:1px solid var(--border);background:#ffffff05;border-radius:8px;gap:5px;padding:6px;display:flex;overflow-x:auto}.mml-step-cell{width:1.6rem;height:1.6rem;color:var(--text-dim);-webkit-user-select:none;user-select:none;background:#ffffff08;border:1px solid #ffffff0f;border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:.7rem;font-weight:700;transition:all .15s;display:flex}.mml-step-cell.active-beat{color:#fff;background:#06b6d4;border-color:#06b6d4;box-shadow:0 0 6px #06b6d459}.mml-step-cell.active-beat.track-b{color:#fff;background:#f97316;border-color:#f97316;box-shadow:0 0 6px #f9731659}.mml-step-cell.playing-pulse{outline-offset:1px;z-index:2;outline:2px solid #fff;transform:scale(1.15)}html.theme-light .mml-step-cell,:root:not(.theme-dark) .mml-step-cell{color:var(--text-dim)!important;background:#0000000a!important;border-color:#00000014!important}html.theme-light .mml-step-cell.active-beat,:root:not(.theme-dark) .mml-step-cell.active-beat{color:#fff!important;background:#06b6d4!important;border-color:#06b6d4!important}html.theme-light .mml-step-cell.active-beat.track-b,:root:not(.theme-dark) .mml-step-cell.active-beat.track-b{color:#fff!important;background:#f97316!important;border-color:#f97316!important}.mml-tuning-meter{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);height:1.8rem;margin-bottom:1rem;position:relative;overflow:hidden}.mml-meter-line{background:var(--text-dim);width:2px;position:absolute;top:0;bottom:0}.mml-meter-marker{border-radius:2px;width:4px;transition:left .3s cubic-bezier(.2,.8,.2,1);position:absolute;top:15%;bottom:15%}.mml-marker-just{background:#10b981;box-shadow:0 0 6px #10b981}.mml-marker-equal{background:#f76c8f;box-shadow:0 0 6px #f76c8f}.mml-meter-label{color:var(--text-dim);justify-content:space-between;margin-top:.25rem;font-size:.75rem;display:flex}#btn-play-just{color:#10b981;background:#10b9810d;border-color:#10b981}#btn-play-just:hover{background:#10b98126;border-color:#10b981}#btn-play-equal{color:#f76c8f;background:#f76c8f0d;border-color:#f76c8f}#btn-play-equal:hover{background:#f76c8f26;border-color:#f76c8f}#btn-play-both{color:#a855f7;background:#a855f70d;border-color:#a855f7}#btn-play-both:hover{background:#a855f726;border-color:#a855f7}#tuning-latex-eq{max-width:100%;padding:.2rem 0;font-size:.82rem;overflow-x:auto}#tuning-latex-eq .katex-display{text-align:left!important;justify-content:flex-start!important;width:100%!important;margin:.5em 0!important;display:flex!important}#tuning-latex-eq .katex-display>.katex{text-align:left!important;white-space:nowrap!important;display:inline-block!important}#tuning-latex-eq .katex-display>.katex>.katex-html{text-align:left!important;display:inline-block!important}#tuning-latex-eq .aligned{text-align:left!important;display:inline-table!important}@media (width<=799px){#panel-tuning .mml-btn-row{flex-direction:column}#panel-tuning .mml-btn-row .mml-select{width:100%;max-width:none!important}#panel-tuning .mml-btn-row .mml-btn{justify-content:center;width:100%}}@media (width>=800px){#panel-tuning .mml-btn-row .mml-select{flex:100%;width:100%;max-width:none!important}}
