.active.svelte-4zq8fe{fill:#f20000!important;r:12!important}.stepper.svelte-cynicn{display:flex;align-items:center;justify-content:center;gap:2px;-webkit-user-select:none;user-select:none}.horizontal.svelte-cynicn{flex-direction:row}.vertical.svelte-cynicn{flex-direction:column}.step-btn.svelte-cynicn{display:flex;align-items:center;justify-content:center;background:#fff;border:1.5px solid #ccc;border-radius:50%;cursor:pointer;color:#555;transition:all .12s ease;padding:0;flex-shrink:0}.step-btn.svelte-cynicn:hover:not(:disabled){background:#eef;border-color:#9c52f2;color:#9c52f2}.step-btn.svelte-cynicn:active:not(:disabled){background:#ddf;transform:scale(.9)}.step-btn.svelte-cynicn:disabled{opacity:.25;cursor:not-allowed}.value-label.svelte-cynicn{display:flex;align-items:center;justify-content:center;font-weight:700;color:#222;flex:1;min-width:0}.value-input.svelte-cynicn{font-weight:700;color:#222;text-align:center;flex:1;min-width:0;width:100%;border:none;border-bottom:2px solid #9C52F2;background:transparent;outline:none;padding:2px 0;-moz-appearance:textfield}.value-input.svelte-cynicn::-webkit-outer-spin-button,.value-input.svelte-cynicn::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.value-input.svelte-cynicn:focus{border-bottom-color:#0d75ff}.controls-panel.svelte-di7q.svelte-di7q{display:flex;flex-direction:column;gap:12px;padding:16px 20px;background-color:#f0f0f0;border-radius:8px;margin:20px 0;width:100%;max-width:420px}.control-row.svelte-di7q.svelte-di7q{display:flex;align-items:center;gap:12px;min-height:36px}.control-row.svelte-di7q>label.svelte-di7q{font-weight:700;color:#000;font-size:16px;min-width:100px;flex-shrink:0;text-align:right}.control-right.svelte-di7q.svelte-di7q{display:flex;align-items:center;gap:8px;flex:1}.ratio-steppers.svelte-di7q.svelte-di7q{display:flex;align-items:center;gap:8px}.ratio-separator.svelte-di7q.svelte-di7q{font-size:20px;font-weight:700;color:#333}.period-info.svelte-di7q.svelte-di7q{font-size:12px;color:#666}.pattern-input.svelte-di7q.svelte-di7q{width:120px;border:1px solid #ccc;border-radius:4px;padding:4px;font-size:14px;font-family:monospace;letter-spacing:2px}.display.svelte-10s7urj{display:flex;flex-direction:column;border:5px solid #222;background:#fff;aspect-ratio:25 / 35;height:168px;font-family:Helvetica,Helvetica,sans-serif;font-weight:400;color:#222}.row.svelte-10s7urj{display:flex;align-items:center;justify-content:center}.bpm-row.svelte-10s7urj{height:38px;flex-shrink:0;font-size:32px;padding:0;border-bottom:3px solid #888}.ratio-row.svelte-10s7urj{position:relative;flex:1;border-bottom:3px solid #888}.ratio-label.svelte-10s7urj{position:absolute;font-size:44px;line-height:1;z-index:1}.top-left.svelte-10s7urj{top:2px;left:8px}.bottom-left.svelte-10s7urj{bottom:2px;left:8px}.top-right.svelte-10s7urj{top:2px;right:8px}.bottom-right.svelte-10s7urj{bottom:2px;right:8px}.ratio-arrow.svelte-10s7urj{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70%;height:80%}.beats-row.svelte-10s7urj{height:38px;flex-shrink:0;font-size:32px}body{background-color:#f0f0f0!important}.container.svelte-z92okf.svelte-z92okf{padding:20px;background:#f0f0f0;color:#222}.metronome-container.svelte-z92okf.svelte-z92okf{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px}.info-overlay.svelte-z92okf.svelte-z92okf{position:absolute;left:0;z-index:10}.controls-area.svelte-z92okf.svelte-z92okf{display:flex;flex-direction:row;align-items:flex-start;gap:16px}.spiral-wrapper.svelte-z92okf.svelte-z92okf{position:relative}.transport-overlay.svelte-z92okf.svelte-z92okf{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.transport-btn.svelte-z92okf.svelte-z92okf{width:78px;height:78px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#ffab00;color:#fff;transition:transform .1s ease,box-shadow .15s ease;box-shadow:0 2px 6px #00000026}.transport-btn.svelte-z92okf.svelte-z92okf:hover{transform:scale(1.08);box-shadow:0 3px 10px #00000040}.transport-btn.svelte-z92okf.svelte-z92okf:active{transform:scale(.95)}.info.svelte-z92okf.svelte-z92okf{margin-top:30px;text-align:center;color:#666}.info.svelte-z92okf a.svelte-z92okf{color:#9c52f2}@media (max-width: 600px){.container.svelte-z92okf.svelte-z92okf{padding:10px}.metronome-container.svelte-z92okf.svelte-z92okf{gap:15px}}