:root{font-family:'Courier New',monospace;color:#111;background:#fff;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:480px;margin:0 auto;padding:30px 20px;text-align:center}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:disabled{opacity:.4;cursor:default}.logo{font-size:18px;font-weight:900;color:inherit;text-decoration:none}.logo span{color:inherit}h1{font:900 clamp(34px,8vw,48px)/1.05 Impact,'Arial Black',sans-serif;text-transform:uppercase;letter-spacing:-1px;margin:38px 0 20px}.listen{display:flex;gap:18px;justify-content:center}.listen button{font:12px 'Courier New',monospace;border:0;border-bottom:1px dashed #888;background:#fff;padding:5px}.record{display:block;margin:24px auto 0;border:3px solid #111;background:#fff;padding:12px 34px;font-weight:900;box-shadow:4px 4px 0 #111;font-size:17px;text-transform:uppercase}.recording .record{background:#111;color:#fff}#status{font-size:11px;line-height:1.5;min-height:22px;margin:17px auto 0;max-width:340px}audio{display:block;width:min(100%,300px);height:32px;margin:12px auto}[hidden]{display:none!important}#results{margin-top:20px}.gauge{max-width:320px;margin:auto}.gauge svg{display:block;width:100%;overflow:visible}.gauge-track{fill:none;stroke:#111;stroke-width:10;stroke-linecap:square}.gauge-ticks{fill:none;stroke:#111;stroke-width:3}#needle{transform-origin:160px 160px;transform:rotate(0deg);transition:transform .7s cubic-bezier(.2,.8,.2,1)}.scanning #needle{animation:judge .7s ease-in-out infinite alternate}@keyframes judge{from{transform:rotate(-82deg)}to{transform:rotate(82deg)}}.gauge-ends{display:flex;justify-content:space-between;align-items:flex-end;margin-top:-7px;font-size:11px;font-weight:bold}.gauge-ends>span{display:flex;flex-direction:column;align-items:center}.bruno-face,#brunoMascot{display:block;width:94px;height:94px;object-fit:contain;margin-top:-35px}.native-end{padding-bottom:0;min-width:90px}.total{margin-top:15px}.total strong{font:900 62px/1 Impact,'Arial Black',sans-serif}.total>span{font-size:13px;margin-left:5px}.score-label{font-size:12px;font-weight:bold;min-height:14px;margin:10px 0}.challenge-outcome,.challenge{font-size:11px;line-height:1.5}.challenge{border:1px dashed #111;padding:10px;margin:22px 0 -18px}.share-score{border:2px solid #111;background:#111;color:#fff;padding:11px 18px;margin-top:12px;font-size:13px;font-weight:bold}.share-options{display:block;border:0;border-bottom:1px dashed #777;background:transparent;margin:10px auto;padding:3px;font-size:10px}footer{margin-top:32px;font-size:9px;line-height:1.8;color:#777}footer span{font-size:9px}button:focus-visible,a:focus-visible{outline:3px dotted #111;outline-offset:4px}dialog{color:#111;background:#fff;border:3px solid #111;box-shadow:7px 7px 0 #111;padding:18px;width:min(400px,calc(100% - 28px));max-height:90dvh;overflow:auto}dialog::backdrop{background:#0009}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.dialog-heading h2{font:900 23px Impact,'Arial Black',sans-serif;text-transform:uppercase;margin:0}.dialog-heading button{border:0;background:none;font:26px monospace;padding:0 4px}#sharePreview{display:block;width:min(100%,230px);height:auto;margin:20px auto;border:1px solid #111}.share-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.share-actions a,.share-actions button{border:2px solid #111;color:#111;background:#fff;padding:8px 11px;font:bold 11px monospace;text-decoration:none;cursor:pointer}#shareStatus{font-size:10px;line-height:1.5;text-align:center;margin:15px 0 0}#manualCopy{margin-top:12px;width:100%;font:12px monospace;padding:10px;border:1px solid #111;background:#fff;resize:none}@media(prefers-reduced-motion:reduce){#needle{transition:none}.scanning #needle{animation:none}}@media(max-width:480px){main{padding-top:22px}h1{margin-top:30px}}
.listen{gap:14px}.listen .reference-tape{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:145px;border:2px solid #111;background:#fff;padding:11px 12px;font-weight:bold;box-shadow:2px 2px 0 #111}.reference-tape small{font-size:7px;font-weight:normal;letter-spacing:.4px}.reference-tape[aria-pressed=true]{background:#111;color:#fff}.mini-tape{display:flex;width:53px;height:24px;border:1px solid currentColor;align-items:center;justify-content:space-around;padding:3px;position:relative}.mini-tape i{display:block;width:13px;height:13px;border:2px dashed currentColor;border-radius:50%}.reference-tape[aria-pressed=true] .mini-tape i{animation:spool 1s linear infinite}.record.tape-recorder{width:216px;background:#dddcd5;border:3px solid #111;box-shadow:5px 5px 0 #111;padding:9px 13px 12px;display:flex;flex-direction:column;align-items:center;gap:9px}.tape-heading{font:8px 'Courier New',monospace;letter-spacing:1px}.tape-window{display:flex;align-items:center;justify-content:space-around;width:170px;height:48px;border:2px solid #111;background:#444;padding:4px 10px}.reel{width:32px;height:32px;border:7px solid #eee;border-radius:50%;position:relative;z-index:1}.reel:after{content:'';position:absolute;inset:3px;border:2px dashed #eee;border-radius:50%}.tape-line{position:absolute;display:block;width:100px;height:1px;background:#eee}.record-key{border:2px solid #111;background:#f6f4ed;padding:7px 20px;min-width:114px;box-shadow:0 3px 0 #777;font:bold 14px 'Courier New',monospace;display:flex;align-items:center;justify-content:center;gap:8px}.rec-light{display:inline-block;width:10px;height:10px;border-radius:50%;background:#c90000;border:1px solid #111}.recording .record.tape-recorder{background:#dddcd5;color:#111}.recording .reel{animation:spool .8s linear infinite}.recording .rec-light{animation:blink .7s steps(2,end) infinite}.recording .record-key{box-shadow:none;transform:translateY(2px)}#nativeMascot{display:block;width:94px;height:94px;object-fit:contain;margin-top:-35px}.tape-window{position:relative}@keyframes spool{to{transform:rotate(360deg)}}@keyframes blink{50%{opacity:.25}}@media(prefers-reduced-motion:reduce){.recording .reel,.recording .rec-light,.reference-tape[aria-pressed=true] .mini-tape i{animation:none}}
.try-other{margin:0 0 16px;font-size:11px;color:#555}.try-other a{color:inherit;text-underline-offset:3px}
.try-other a,footer a{color:inherit;text-underline-offset:3px}