:root{--bg:#14161c;--card:#1e222b;--card-raised:#262b36;--border:#333a49;--text:#e9ecf2;--text-dim:#97a1b3;--accent:#f0b429;--accent-soft:#f0b42929;--radius:16px;--shadow:0 10px 30px #00000059}*{box-sizing:border-box}html,body{height:100%}body{background:radial-gradient(1200px 800px at 50% -10%, #1c202a 0%, var(--bg) 55%);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,sans-serif}#main{grid-template-columns:1fr;align-content:start;gap:1rem;max-width:64rem;min-height:100%;margin:0 auto;padding:1.25rem;display:grid}@media (width>=48rem){#main{grid-template-columns:1fr 1fr;gap:1.25rem;padding:2rem}.app-header,.transport{grid-column:1/-1}}.app-header h1{letter-spacing:.35em;text-transform:uppercase;color:var(--text-dim);margin:.5rem 0;font-size:1.2rem;font-weight:700}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem}.transport{align-items:center;gap:1.75rem;display:flex}#play-control{cursor:pointer;border:1px solid var(--border);background:linear-gradient(145deg,#2a303d,#20242e);border-radius:50%;flex:none;place-items:center;width:6.5rem;height:6.5rem;transition:box-shadow .2s,transform .1s;display:grid;position:relative;box-shadow:0 6px 18px #00000073,inset 0 1px #ffffff0f}#play-control:hover{box-shadow:0 8px 22px #00000080, 0 0 0 6px var(--accent-soft)}#play-control:active{transform:scale(.97)}#play-checkbox{opacity:0;pointer-events:none;position:absolute}#play-control:has(#play-checkbox:focus-visible){outline:2px solid var(--accent);outline-offset:3px}#play-control .icon{width:44%;height:44%;fill:var(--text)}#play-control .icon-stop{display:none}#play-control.playing{box-shadow:0 6px 18px #00000073, 0 0 0 3px var(--accent), 0 0 28px var(--accent-soft)}#play-control.playing .icon-play{display:none}#play-control.playing .icon-stop{fill:var(--accent);display:block}.bpm-readout{align-items:baseline;gap:.6rem;display:flex}.bpm-readout output{font-variant-numeric:tabular-nums;cursor:pointer;border-bottom:2px dashed #0000;font-size:4rem;font-weight:800;line-height:1;transition:border-color .15s}.bpm-readout output:hover,.bpm-readout output:focus-visible{border-bottom-color:var(--text-dim)}.bpm-readout output:focus-visible{outline:none}.bpm-value{position:relative}.bpm-tooltip{background:var(--card-raised);border:1px solid var(--border);box-shadow:var(--shadow);color:var(--text-dim);white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;z-index:10;border-radius:10px;padding:.5rem .75rem;font-size:1rem;transition:opacity .15s,visibility .15s;position:absolute;top:calc(100% + .5rem);left:0}@media (hover:hover){.bpm-value:hover .bpm-tooltip,.bpm-value:focus-within .bpm-tooltip{opacity:1;visibility:visible}}.bpm-readout input{font-variant-numeric:tabular-nums;width:4ch;color:var(--text);background:var(--card-raised);border:1px solid var(--accent);appearance:textfield;border-radius:8px;padding:0 .25rem;font-family:inherit;font-size:4rem;font-weight:800;line-height:1}.bpm-readout input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.bpm-readout input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.bpm-readout input:focus{box-shadow:0 0 0 4px var(--accent-soft);outline:none}.bpm-unit{color:var(--text-dim);letter-spacing:.15em;text-transform:uppercase;font-size:1.1rem}.card h2{letter-spacing:.25em;text-transform:uppercase;color:var(--text-dim);margin:0 0 1.1rem;font-size:.9rem;font-weight:700}.control{margin-bottom:1.1rem}.control:last-of-type{margin-bottom:.25rem}.control-head{justify-content:space-between;align-items:baseline;margin-bottom:.3rem;display:flex}.control-head label{font-size:1.05rem}.control-head output{font-variant-numeric:tabular-nums;color:var(--accent);font-size:1.6rem;font-weight:800}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:2.25rem;margin:0}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{background:var(--card-raised);border:1px solid var(--border);border-radius:999px;height:.5rem}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);border:none;border-radius:50%;width:1.5rem;height:1.5rem;margin-top:-.55rem;box-shadow:0 2px 6px #00000080}input[type=range]::-moz-range-track{background:var(--card-raised);border:1px solid var(--border);border-radius:999px;height:.5rem}input[type=range]::-moz-range-thumb{background:var(--accent);border:none;border-radius:50%;width:1.5rem;height:1.5rem;box-shadow:0 2px 6px #00000080}input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px var(--accent-soft), 0 2px 6px #00000080}input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px var(--accent-soft), 0 2px 6px #00000080}.hint{position:relative}.hint-toggle{background:var(--accent-soft);width:1.6rem;height:1.6rem;color:var(--accent);cursor:pointer;border:none;border-radius:50%;place-items:center;padding:0;font-size:.95rem;font-weight:800;transition:background .15s,color .15s;display:grid}.hint-toggle:hover{background:var(--accent);color:var(--bg)}.hint-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hint-popover{background:var(--card-raised);border:1px solid var(--border);width:15rem;box-shadow:var(--shadow);color:var(--text-dim);z-index:10;border-radius:10px;padding:.75rem .9rem;font-size:1rem;font-weight:400;position:absolute;top:calc(100% + .5rem);right:0}.switch-row{cursor:pointer;align-items:center;gap:.75rem;margin-top:1.1rem;font-size:1.05rem;display:flex}.switch-row input{opacity:0;pointer-events:none;position:absolute}.switch{background:var(--card-raised);border:1px solid var(--border);border-radius:999px;flex:none;width:3rem;height:1.65rem;transition:background .15s,border-color .15s;position:relative}.switch:after{content:"";background:var(--text-dim);border-radius:50%;width:1.15rem;height:1.15rem;transition:left .15s,background .15s;position:absolute;top:50%;left:.2rem;transform:translateY(-50%)}.switch-row input:checked+.switch{background:var(--accent-soft);border-color:var(--accent)}.switch-row input:checked+.switch:after{background:var(--accent);left:calc(100% - 1.35rem)}.switch-row:has(input:focus-visible) .switch{outline:2px solid var(--accent);outline-offset:2px}
/*# sourceMappingURL=clicker.48fbdc4c.css.map */