@font-face { font-family: Manrope; font-style: normal; font-weight: 400; font-display: swap; src: url("manrope-400.ttf") format("truetype"); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 700; font-display: swap; src: url("manrope-700.ttf") format("truetype"); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 800; font-display: swap; src: url("manrope-800.ttf") format("truetype"); }
:root { color-scheme: light; --surface:#fcfaf6; --ink:#28203f; --muted:#6e687f; --accent:#7049e9; --card:#efebfb; --rail:#d9d1f5; --focus:#8667d4; }
* { box-sizing:border-box; }
body { margin:0; background:var(--surface); color:var(--ink); font:14px/1.6 Manrope,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
main { width:min(100% - 40px,520px); margin:0 auto; padding:24px 0 32px; }
.brand-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-size:15px; font-weight:800; letter-spacing:-.5px; text-decoration:none; }
.brand img { flex-shrink:0; border-radius:12px; }
.sound-counter { border:1px solid var(--rail); border-radius:999px; padding:3px 9px; color:var(--muted); font-size:10px; white-space:nowrap; }
.intro { margin:30px 0 20px; text-align:center; }
.eyebrow { margin:0 0 6px; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.7px; }
h1 { margin:0; font-size:clamp(28px,7.5vw,36px); font-weight:800; line-height:1.2; letter-spacing:-1.5px; }
.intro-copy { max-width:390px; margin:8px auto 0; color:var(--muted); font-size:12px; }
.listening-card { padding:20px; border:1px solid var(--rail); border-radius:26px; background:var(--surface); box-shadow:0 12px 40px #28203f06; }
.target-head { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.target-head label { font-size:14px; font-weight:800; letter-spacing:-.3px; }
.target-head output { color:var(--accent); font-size:28px; font-weight:800; letter-spacing:-1px; font-variant-numeric:tabular-nums; line-height:1.2; }
.target-head output span { font-size:18px; }
.target-copy { min-height:35px; margin:5px 0 8px; color:var(--muted); font-size:12px; line-height:1.45; }
.target-copy[data-direction="up"], .target-copy[data-direction="down"] { color:var(--accent); }
.sample-range { position:relative; height:28px; }
#test-level-progress { position:absolute; top:11px; left:0; width:100%; height:6px; border:0; appearance:none; }
#test-level-progress::-webkit-progress-bar { border-radius:999px; background:var(--rail); }
#test-level-progress::-webkit-progress-value { border-radius:999px; background:var(--accent); }
input[type="range"] { position:relative; z-index:1; appearance:none; display:block; width:100%; height:28px; margin:0; background:transparent; cursor:pointer; }
input[type="range"]::-webkit-slider-runnable-track { height:6px; border:0; background:transparent; }
input[type="range"]::-webkit-slider-thumb { appearance:none; width:21px; height:21px; margin-top:-7.5px; border:2px solid var(--accent); border-radius:50%; background:var(--surface); box-shadow:0 2px 4px #28203f12; }
input[type="range"]::-moz-range-track { height:6px; border-radius:999px; background:var(--rail); }
input[type="range"]::-moz-range-progress { height:6px; border-radius:999px; background:var(--accent); }
input[type="range"]::-moz-range-thumb { width:17px; height:17px; border:2px solid var(--accent); border-radius:50%; background:var(--surface); }
.range-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; }
.sample-intro { display:flex; align-items:center; gap:11px; padding-top:18px; }
.sound-mark { display:grid; place-items:center; flex:0 0 36px; height:36px; border-radius:12px; background:var(--card); color:var(--accent); }
.sound-mark svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.sample-intro h2 { margin:0; font-size:13px; font-weight:800; line-height:1.4; }
.sample-intro p { margin:2px 0 0; color:var(--muted); font-size:11px; line-height:1.4; }
.playback-controls { display:grid; grid-template-columns:140px minmax(0,1fr); gap:10px; margin-top:14px; }
.play-button { width:100%; min-height:48px; padding:10px 16px; border:0; border-radius:999px; color:var(--surface); background:var(--ink); font:inherit; font-size:12px; font-weight:800; cursor:pointer; transition:transform .18s; }
.play-button:hover { transform:translateY(-1px); }
.play-button:active { transform:translateY(0); }
.audio-status { min-height:18px; margin:8px 0 0; color:var(--muted); font-size:11px; text-align:center; }
.mode-controls { display:grid; grid-template-columns:1fr 1fr; padding:5px; border-radius:999px; background:var(--card); }
.mode-controls button { min-width:0; min-height:38px; border:0; border-radius:999px; background:transparent; color:var(--muted); font:inherit; font-size:11px; cursor:pointer; padding:6px; }
.mode-controls button[aria-pressed="true"] { background:var(--surface); color:var(--ink); box-shadow:0 2px 7px #28203f07; }
.signal-visual { margin-top:16px; padding:16px; border-radius:20px; background:var(--card); }
.meter-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.signal-visual h2 { margin:0; font-size:12px; font-weight:800; line-height:1.5; letter-spacing:-.25px; }
.guide-tag { color:var(--accent); font-size:10px; }
.meter-chart { position:relative; height:222px; margin:26px 0 0; }
.meter-axis { position:absolute; top:-17px; bottom:62px; left:0; display:flex; flex-direction:column; justify-content:space-between; color:var(--muted); font-size:9px; }
.meter-columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.meter-column { display:flex; flex-direction:column; align-items:center; min-width:0; }
.meter-well { position:relative; width:58px; height:150px; border-radius:10px; background:var(--surface); overflow:hidden; }
.meter-fill { position:absolute; left:0; bottom:0; width:100%; height:var(--level,0%); border-radius:9px 9px 0 0; transition:height .08s linear; }
.input-fill { background:var(--muted); }
.output-fill { background:var(--accent); }
.signal-visual[data-mode="normalized"] .output-fill { height:min(var(--level,0%),calc(var(--aim,60) * 1%)); }
.signal-visual[data-mode="original"] .output-fill { background:var(--muted); }
.meter-name { margin-top:12px; color:var(--muted); font-size:11px; }
.meter-value { display:block; margin-top:2px; color:var(--ink); font-size:19px; line-height:1.3; font-weight:800; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.output-value { color:var(--accent); }
.target-guide { position:absolute; z-index:1; top:calc((100 - var(--aim,60)) * 1.5px); left:8px; right:8px; border-top:2px dashed var(--accent); pointer-events:none; }
.target-guide span { position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:3px 9px; border:1px solid var(--accent); border-radius:999px; background:var(--card); color:var(--accent); white-space:nowrap; font-size:10px; line-height:1.6; font-weight:700; }
.meter-explanation { padding-top:11px; border-top:1px solid var(--rail); }
.meter-explanation strong { font-size:12px; font-weight:800; }
.meter-explanation p { margin:2px 0 0; color:var(--muted); font-size:11px; line-height:1.65; }
.more-sounds { margin-top:18px; }
.next-sound { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 18px; border-radius:999px; background:var(--accent); color:#fff; text-decoration:none; box-shadow:0 7px 22px #7049e925; transition:transform .18s,box-shadow .18s; }
.next-sound:hover { transform:translateY(-1px); box-shadow:0 10px 26px #7049e935; }
.next-sound strong { display:block; font-size:13px; font-weight:800; }
.next-sound small { display:block; font-size:10px; opacity:.82; line-height:1.3; }
.next-sound svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sound-picker { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:12px; }
.sound-picker a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:6px 3px; border:1px solid transparent; border-radius:12px; color:var(--muted); font-size:10px; font-weight:700; text-decoration:none; text-align:center; }
.sound-picker a:hover { background:var(--card); }
.sound-picker a[aria-current="page"] { border-color:var(--rail); background:var(--card); color:var(--accent); }
.guide-note { margin:14px 0 0; color:var(--muted); font-size:10px; text-align:center; }
.how-it-works { max-width:450px; margin:12px auto 0; color:var(--muted); font-size:11px; }
.how-it-works summary { width:fit-content; margin:0 auto; color:var(--accent); cursor:pointer; font-weight:700; }
.how-it-works p { margin:9px 0 0; line-height:1.7; }
.how-it-works a { color:var(--accent); }
.nv-ad-slot { width:300px; min-height:274px; margin:24px auto 0; padding:0; text-align:center; }
.nv-ad-slot>span { display:block; color:var(--muted); font:9px/18px Manrope,system-ui,sans-serif; letter-spacing:.8px; text-transform:uppercase; margin-bottom:6px; }
.nv-ad-slot iframe { display:block; margin:0 auto; width:300px; height:250px; border:0; }
.site-footer { display:flex; justify-content:center; gap:14px; margin:22px 0 0; color:var(--muted); font-size:10px; }
.site-footer a { color:var(--muted); text-decoration:none; }
.site-footer a:hover { text-decoration:underline; text-underline-offset:3px; }
.site-footer button { padding:0; border:0; background:none; color:var(--muted); font:inherit; cursor:pointer; }
.site-footer button:hover { text-decoration:underline; text-underline-offset:3px; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
@media (max-width:380px) { main { width:calc(100% - 28px); padding-top:18px; } .brand { font-size:13px; gap:8px; } .brand img { width:34px; height:34px; } .sound-counter { padding:3px 7px; font-size:9px; } .listening-card { padding:16px; } .signal-visual { padding:16px 12px; } .playback-controls { grid-template-columns:112px minmax(0,1fr); gap:8px; } .sound-picker { gap:2px; } .sound-picker a { font-size:9px; } }
@media (max-width:327px) { .nv-ad-slot { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before { animation:none!important; transition:none!important; } .play-button:hover,.next-sound:hover { transform:none; } }