.tuner{--tuner-surface: var(--color-primary-muted);--tuner-surface-hover: color-mix(in srgb, var(--color-primary-muted), var(--color-light-intense) 10%);background:var(--color-primary);color:var(--color-accent);font-family:var(--font-body);text-align:center;padding-block:var(--space-lg);overflow-x:clip}.layout>.tuner.fullwidth{margin-block-end:0}.tuner-inner{max-width:72rem;margin-inline:auto;padding-inline:var(--space-md)}.tuner .tuner-heading-group{display:flex;flex-direction:column;gap:.25rem;width:fit-content;margin-inline:auto;h1{margin:0}}.tuner .version{font-size:.8rem;opacity:.8;margin-block:0 var(--space-md);align-self:end}.tuner .main-display{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:40px;min-height:340px;padding-inline-start:20px}.tuner .left-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;height:220px;position:relative}.tuner #cooldown-container{display:flex;justify-content:center;align-items:center;gap:10px;font-size:18px;position:absolute;top:0;left:400%;transform:translate(-50%);text-align:start}.tuner #cooldown-light{display:inline-flex;align-items:center;gap:.5em;padding:.4em .9em;font:600 .8rem/1 var(--font-sans);text-transform:uppercase;letter-spacing:.08em;color:var(--color-light-intense);border-radius:var(--border-radius);transition:background-color .25s,color .25s}.tuner #cooldown-light.ready{background-color:#2f7d3f}.tuner #cooldown-light.wait{background-color:#a83232}.tuner #cooldown-light.starting{background-color:var(--tuner-surface);color:var(--color-accent-muted)}.tuner #cooldown-light.starting:before{content:"";width:.7em;height:.7em;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:tuner-spin .8s linear infinite}@keyframes tuner-spin{to{rotate:360deg}}@media(prefers-reduced-motion:reduce){.tuner #cooldown-light.starting:before{animation:none}}.tuner #level-container{position:relative;width:50px;height:280px;margin-block-start:100px}.tuner #level{width:50px;height:220px;background-color:var(--color-primary);border:2px solid var(--color-accent);border-radius:var(--border-radius);position:relative;overflow:hidden}.tuner #level-bar{position:absolute;bottom:0;width:100%;background-color:red;transition:height .1s,background-color .2s}.tuner #threshold-slider{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;-webkit-appearance:slider-vertical;writing-mode:bt-lr}.tuner #threshold-line{position:absolute;width:100%;height:10px;background-color:var(--color-light-intense);pointer-events:none;border-radius:var(--border-radius);box-shadow:0 0 4px #0009}.tuner #threshold-line:before{content:"";position:absolute;top:4px;left:0;width:100%;height:2px;background-color:var(--color-dark-intense)}.tuner .meter-container{display:flex;flex-direction:column;align-items:center;gap:20px;position:relative;top:-20px}.tuner #meter-label-upper,.tuner #meter-label-lower{font-size:28px;height:50px;min-width:120px}.tuner #meter-label-upper{position:relative;top:15px}.tuner #meter-label-lower{position:relative;top:-10px}.tuner .octave-small{font-size:18px;vertical-align:sub;margin-inline-start:-8px}.tuner #meter{width:20px;height:220px;border:2px solid var(--color-accent);border-radius:var(--border-radius);position:relative;background-color:var(--color-primary)}.tuner #slider{position:absolute;width:120%;height:10px;background-color:var(--color-accent);left:-10%;border-radius:var(--border-radius);box-shadow:0 0 6px #00000080}.tuner #cents{position:absolute;left:30px;transform:translateY(-50%);font-size:22px;font-weight:700;width:60px;text-align:start}.tuner .note-display{margin-block-start:50px;text-align:center;width:200px}.tuner #note-tone-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;width:180px;height:220px;padding:10px;background-color:var(--tuner-surface);color:var(--color-accent);border:2px solid var(--color-accent);border-radius:var(--border-radius);font-family:var(--font-sans);text-transform:none;letter-spacing:normal;white-space:normal;cursor:pointer;transition:background-color .15s,color .15s}.tuner #note-tone-btn.on{background-color:var(--color-accent);color:var(--color-primary)}.tuner #note{font-family:var(--font-display);font-size:120px;line-height:1;min-height:140px;min-width:150px;max-width:100%;display:inline-block}.tuner #note span.flat-b{font-family:var(--font-sans);font-size:.85em;vertical-align:baseline}.tuner #octave{font-size:30px;vertical-align:sub;margin-inline-start:-12px}.tuner #hz{font-size:26px;white-space:nowrap}.tuner #confidence{font-size:18px;margin-block-start:5px}.tuner #candidate-selector-container{width:fit-content;margin:20px auto 10px;text-align:center}.tuner #candidate-label{font-size:17px;font-weight:600;margin-block-end:12px}.tuner #candidate-selector{display:flex;width:fit-content;margin-inline:auto;min-height:4.5rem;background-color:var(--tuner-surface);border:2px solid var(--color-accent);border-radius:var(--border-radius);overflow:hidden;cursor:pointer}.tuner .candidate-segment{flex:1;min-width:4.5rem;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:10px 12px;border-inline-end:1px solid var(--color-primary);transition:background-color .15s,color .15s}.tuner .candidate-segment:last-child{border-inline-end:none}.tuner .candidate-segment:hover{background-color:var(--tuner-surface-hover)}.tuner .candidate-segment.active{background-color:var(--color-accent);color:var(--color-primary)}.tuner .candidate-note{font-family:var(--font-display);font-size:23px;line-height:1.05;font-weight:600}.tuner .candidate-hz{font-size:13px;opacity:.95;margin-block-start:1px}.tuner hr{width:80%;margin-block:var(--space-lg);margin-inline:auto;border:none;height:var(--border-width);background:currentColor}.tuner #guidance{width:100%;max-width:800px;margin-inline:auto}.tuner .table-scroll{overflow-x:auto}.tuner #chime-select{width:auto;min-width:12rem;margin-block-end:20px;color:var(--color-accent);border-color:var(--color-accent)}.tuner #chime-select option{color:var(--color-text);background-color:var(--color-background)}.tuner #chime-select:focus{background-color:transparent;border-color:var(--color-accent-muted)}.tuner table{width:100%;border-collapse:collapse}.tuner th,.tuner td{border:1px solid var(--color-accent);padding:10px;text-align:center;vertical-align:middle}.tuner :is(td,th) :is(input,select){vertical-align:middle;margin-block:0}.tuner thead{border-bottom:none}.tuner th{background-color:var(--tuner-surface)}.tuner tbody tr:nth-child(odd),.tuner tbody tr:nth-child(2n){background-color:transparent}.tuner .greyed{opacity:.45;pointer-events:none}.tuner button.detected{display:flex;width:100%;min-height:60px;height:auto;padding:10px;background-color:var(--tuner-surface);color:var(--color-accent);border:2px solid var(--color-accent);border-radius:var(--border-radius);font:600 .85rem/1.2 var(--font-sans);text-transform:none;letter-spacing:normal;white-space:normal;cursor:pointer;transition:background-color .15s,color .15s}.tuner button.detected.locked{background-color:var(--color-accent);color:var(--color-primary)}.tuner-actions{display:flex;justify-content:center;gap:1rem;margin-block-start:20px}.tuner #reset,.tuner #auto{min-width:5rem;height:auto;padding:10px 20px;background-color:var(--tuner-surface);color:var(--color-accent);border:2px solid var(--color-accent);border-radius:var(--border-radius);font:600 .85rem/1 var(--font-sans);text-transform:none;letter-spacing:normal;cursor:pointer;transition:background-color .15s,color .15s}.tuner .tone{height:auto;padding:10px 20px;background-color:var(--tuner-surface);color:var(--color-accent);border:2px solid var(--color-accent);border-radius:var(--border-radius);font:600 .85rem/1 var(--font-sans);text-transform:none;letter-spacing:normal;cursor:pointer;transition:background-color .15s,color .15s}.tuner .tone.on{background-color:var(--color-accent);color:var(--color-primary)}.tuner .tone.disabled{opacity:.45;cursor:not-allowed}.tuner :is(#auto,#reset,#note-tone-btn):where(:hover,:focus-visible),.tuner .tone:not(.disabled):where(:hover,:focus-visible),.tuner button.detected:where(:hover,:focus-visible){background-color:var(--tuner-surface-hover)}.tuner #note-tone-btn.on:where(:hover,:focus-visible),.tuner .tone.on:where(:hover,:focus-visible){background-color:var(--color-accent-intense)}.tuner input[type=number]{border-color:var(--color-accent)}.tuner input[type=radio]{appearance:none;width:1.05em;height:1.05em;border:var(--border-width) solid var(--color-accent);border-radius:50%;display:inline-block;vertical-align:middle;cursor:pointer}.tuner input[type=radio]:checked{background:radial-gradient(circle,var(--color-accent) 0 55%,transparent 60%)}.tuner select{cursor:pointer;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23d8b362" d="M0,0l6,8l6-8"/></svg>')}.tuner select:focus{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23d8b362" d="M12,8L6,0L0,8"/></svg>')}.tuner :is(button,select,input):focus-visible{outline:none;box-shadow:var(--focus-ring)}