html,body{height:100%;margin:0;padding:0;overflow:hidden}body{color:#fff;color-scheme:dark;accent-color:#0f0;background-color:#000;font-family:sans-serif}.container{box-sizing:border-box;flex-direction:column;height:100%;margin:10px;display:flex}.controls{flex-flow:wrap;justify-content:flex-start;align-items:center;gap:10px;margin-bottom:10px;padding-top:35px;display:flex}#toggle-controls-btn{z-index:1001;color:#fff;cursor:pointer;box-sizing:border-box;background-color:#000;border:1px solid #666;height:28px;padding:5px 10px;font-size:14px;line-height:16px;position:absolute;top:10px;left:80px}#pause-resume-btn{z-index:1001;color:#fff;cursor:pointer;box-sizing:border-box;background-color:#000;border:1px solid #666;height:28px;padding:5px 10px;font-size:14px;line-height:16px;position:absolute;top:10px;left:10px}.main-spectrogram-area{flex-direction:row;flex-grow:1;width:100%;min-height:0;display:flex;position:relative}#selection-overlay{box-sizing:border-box;pointer-events:none;z-index:200;border:2px dashed #ffffffb3;width:calc(100% - 41px);height:100%;display:none;position:absolute;top:0;left:0}canvas{border:0}#spectrogram{z-index:100;touch-action:none;background-color:#000;flex:1;width:calc(100% - 41px)}#cursor-line-canvas{pointer-events:none;z-index:300;width:calc(100% - 41px);height:100%;position:absolute;top:0;left:0}#frequency-labels{background-color:#0000;border-left:none;flex:0 0 41px}.frequency-controls{align-items:center;gap:5px;display:flex}.frequency-controls>label:first-child{min-width:130px;font-weight:700}.frequency-controls>label[for=sample-rate]{vertical-align:middle;line-height:20px}.color-controls{align-items:center;gap:5px;display:flex}.color-controls>label:first-child{min-width:130px;font-weight:700}.processing-controls{align-items:center;gap:5px;display:flex}.processing-controls>label:first-child{min-width:130px;font-weight:700}.misc-controls{align-items:center;gap:5px;display:flex}.misc-controls>label:first-child{min-width:130px;font-weight:700}.slider-label-right{margin-right:15px}.build-info{opacity:.6;margin-top:8px;font-size:.8em}.build-info a{color:#0f0;text-decoration:underline}.build-info button{font-size:inherit;cursor:pointer;color:#fff;background-color:#000;border:1px solid #666;margin-left:8px;padding:2px 8px}.fps-counter{z-index:1001;color:#fff;font-size:14px;font-weight:700;position:absolute;top:10px;left:10px}#pause-resume-btn{cursor:pointer;width:70px;padding:5px 10px;font-size:14px}input[type=range]{width:100px}select{padding:5px;font-size:14px}label{font-size:14px}.frequency-controls span,.color-controls span{text-align:right;min-width:40px;font-weight:700;display:inline-block}.misc-controls span{text-align:right;min-width:30px;font-weight:700;display:inline-block}.tooltip{color:#fff;pointer-events:none;z-index:1000;background-color:#000000b3;border-radius:3px;padding:5px;font-size:12px;display:none;position:absolute}.resize-handle{z-index:500;cursor:ns-resize;touch-action:none;background-color:#0000;flex-shrink:0;height:5px;margin-top:5px;margin-bottom:5px;position:relative}.resize-handle:before{content:"";position:absolute;inset:-14px 0}.resize-handle:hover{background-color:#333}.waveform-area{background-color:#000;flex:0 0 100px;min-height:50px;margin-bottom:15px;position:relative}#waveform-canvas{cursor:pointer;touch-action:none;background-color:#000;border-radius:4px;display:block}.waveform-label{color:#888;pointer-events:none;z-index:1;font-family:monospace;font-size:12px;position:absolute;top:5px;left:10px}@media (width<=600px){.container{overflow:hidden auto}.controls{flex-direction:column;align-items:stretch;gap:6px;padding-top:35px}.frequency-controls,.color-controls,.processing-controls,.misc-controls{grid-template-columns:auto 1fr;align-items:center;gap:4px 8px;display:grid}.frequency-controls>label:first-child,.color-controls>label:first-child,.processing-controls>label:first-child,.misc-controls>label:first-child{grid-column:1/-1;min-width:auto;margin-bottom:0}input[type=range]{width:auto;min-width:0}select{grid-column:1/-1;width:100%;font-size:13px}label{white-space:nowrap;font-size:13px}.slider-label-right{margin-right:0}.processing-controls{grid-template-columns:auto 1fr auto}.processing-controls>label:first-child{grid-column:1/-1}.slider-label-left,.slider-label-right{font-size:11px}.frequency-controls>label[for=log-scale-checkbox],.frequency-controls>label[for=sample-rate]{grid-column:1/-1}}
/*# sourceMappingURL=spectroscope.f9e22af9.css.map */