:root{font-family:system-ui,sans-serif;color:#173c32;background:#f3f2e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}main{max-width:480px;margin:auto;padding:28px 24px 40px}header{font-weight:800;letter-spacing:.14em;font-size:14px}header span{font-weight:400}.hero{text-align:center;padding:52px 0 40px}.eyebrow,.label{font-size:11px;font-weight:750;letter-spacing:.16em;color:#778981}.note{border:0;background:none;color:#173c32;font-size:112px;font-weight:600;line-height:1.1;letter-spacing:-.07em}.note span{font-size:24px;vertical-align:middle;margin-left:10px}.cent-display{color:#ad813e;font-size:20px;margin:8px}.cent-display small{font-size:13px}.panel{background:#fff;border-radius:24px;padding:30px;box-shadow:0 10px 40px #2442330d}.label{display:flex;justify-content:space-between}.label span{color:#ad813e;font-size:14px;letter-spacing:0}.adjust{display:flex;align-items:center;gap:16px;margin-top:18px}.adjust button,.dialog-head button{border:0;background:#f2f5f1;color:#173c32;border-radius:50%;width:42px;height:42px;font-size:23px;flex:none}input[type=range]{width:100%;accent-color:#c7984d}.range-labels{display:flex;justify-content:space-between;margin:2px 57px;color:#9ba9a2;font-size:11px}.volume-label{margin:36px 0 18px}.actions{display:flex;justify-content:center;align-items:center;gap:28px;margin-top:42px}.actions button{border:0;border-radius:50%;display:grid;place-items:center}.detect{width:62px;height:62px;background:#eef3ef;color:#173c32;font-size:34px}.play{width:82px;height:82px;background:#173c32;color:#fff;font-size:26px}.play.active{background:#c7984d}.status{text-align:center;color:#82938a;font-size:13px;min-height:20px;margin:14px 0 0}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#102c24aa;display:flex;align-items:center;justify-content:center;padding:24px}.dialog{background:#fff;border-radius:24px;padding:24px;width:min(100%,400px)}.dialog-head{display:flex;align-items:center;justify-content:space-between}.dialog h2{font-size:19px}.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.notes button{border:0;border-radius:12px;background:#f1f5f1;color:#173c32;padding:16px;font-size:20px}.notes .selected{background:#173c32;color:#fff}button:focus-visible,input:focus-visible{outline:3px solid #c7984d;outline-offset:3px}.listening{text-align:center}.listening p{color:#778981;font-size:14px}.listening progress{width:100%;height:12px;accent-color:#c7984d;margin:20px 0}.listening button{border:0;border-radius:24px;padding:12px 28px;background:#173c32;color:#fff}main{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.hero{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.note{display:inline-flex;align-items:center;gap:20px}.note span{display:block;line-height:1;margin-left:0;letter-spacing:0}.actions{justify-content:space-between;padding:0 8px}.detect,.play{width:72px;height:72px}