#noiseMeter { --ink:#26383e; --muted:#566b74; position:fixed; inset:0; margin:0; border:0; border-radius:0; padding:0; width:100%; height:100%; height:100dvh; max-width:none; max-height:none; overflow:hidden; overscroll-behavior:none; color:var(--ink); background:#dce6e9; font-family:system-ui,-apple-system,"PingFang SC","Microsoft Yahei",sans-serif; letter-spacing:0; }
#noiseMeter[open] { display:flex; flex-direction:column; }
#noiseMeter * { box-sizing:border-box; }
#noiseMeter::backdrop { background:#dce6e9; }
#noiseMeter header { display:flex; align-items:center; justify-content:space-between; padding:24px 36px; flex-shrink:0; gap:16px; background:#cfdddd; }
#noiseMeter .nm-brand { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:700; }
#noiseMeter .nm-brand img { width:36px; height:36px; object-fit:contain; }
#noiseMeter h2 { margin:0 0 0 10px; padding-left:22px; border-left:1px solid #dfe5e8; font-size:24px; }
#noiseMeter button { font:inherit; border:1px solid #aebfc0; border-radius:6px; cursor:pointer; color:var(--ink); background:#e8efec; min-height:44px; padding:10px 20px; }
#noiseMeter button:hover { background:#f1f6f4; }
#noiseMeter button:focus-visible, #noiseMeter input:focus-visible { outline:3px solid #6bbfaa; outline-offset:4px; }
#noiseMeter .nm-close { font-size:30px; border:0; padding:0; width:44px; height:44px; color:#4d626b; background:transparent; }
#noiseMeter .nm-stage { flex:1 0 380px; min-height:380px; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:12px 20px 0; }
#noiseMeter .nm-reading { width:360px; height:330px; position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; padding-top:24px; flex-shrink:0; }
#noiseMeter .nm-gauge { position:absolute; inset:0; pointer-events:none; }
#noiseMeter .nm-tick { position:absolute; left:calc(50% - 3px); top:calc(50% - 11px); width:6px; height:22px; border-radius:3px; background:#e6ebed; transform:rotate(var(--angle)) translateY(-160px); transition:background .2s; }
#noiseMeter .nm-value { font-size:132px; font-weight:750; line-height:1; font-variant-numeric:tabular-nums; }
#noiseMeter .nm-unit { color:var(--muted); font-size:16px; margin-top:16px; }
#noiseMeter .nm-status { position:relative; margin:-4px 0 0; min-height:44px; max-width:640px; text-align:center; line-height:26px; font-size:18px; font-weight:600; color:#23916e; padding:9px 24px; overflow-wrap:anywhere; }
#noiseMeter[data-loud="true"] .nm-status, #noiseMeter[data-loud="true"] .nm-value { color:#ce5d50; }
#noiseMeter .nm-pet { position:absolute; width:220px; height:220px; object-fit:contain; left:calc(50% + 230px); bottom:28px; mix-blend-mode:multiply; }
#noiseMeter meter { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#noiseMeter .nm-times { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.7fr); width:860px; max-width:calc(100% - 32px); align-self:center; text-align:center; margin:16px auto 36px; flex-shrink:0; }
#noiseMeter .nm-count-stat strong { color:#a95038; overflow-wrap:anywhere; }
#noiseMeter .nm-times > div + div { border-left:1px solid #dfe5e8; }
#noiseMeter .nm-times span { display:block; color:var(--muted); font-size:16px; }
#noiseMeter .nm-times strong { display:block; font-size:42px; margin-top:8px; font-weight:650; line-height:1.2; font-variant-numeric:tabular-nums; }
#noiseMeter .nm-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:36px; align-items:center; padding:22px 36px; border-top:1px solid #b7c9c6; background:#cbdcd5; flex-shrink:0; }
#noiseMeter label { display:block; font-size:14px; color:#59656e; margin-bottom:10px; }
#noiseMeter .nm-input { display:flex; gap:16px; align-items:center; }
#noiseMeter input[type="range"] { accent-color:#299e79; flex:1; min-width:0; width:100%; cursor:pointer; }
#noiseMeter #nm-ceiling { accent-color:#dbaa37; }
#noiseMeter output { width:65px; flex-shrink:0; font-size:14px; text-align:right; color:#59656e; font-variant-numeric:tabular-nums; }
#noiseMeter footer { display:flex; align-items:center; gap:12px; }
#noiseMeter .nm-main { background:#258f70; border-color:#258f70; color:#fff; width:122px; }
#noiseMeter .nm-main:hover { background:#1b795d; }
#noiseMeter #nm-reset { font-size:26px; line-height:1; width:48px; padding:6px; }
#noiseMeter .nm-note { margin:0; padding:0 36px 14px; background:#cbdcd5; color:#526963; font-size:11px; line-height:1.6; flex-shrink:0; }
@media(min-height:900px) and (min-width:1100px) { #noiseMeter .nm-reading { transform:scale(1.18); margin:30px 0; } #noiseMeter .nm-times { margin-bottom:48px; } }
@media(max-width:950px) { #noiseMeter .nm-pet { width:150px; height:150px; left:calc(50% + 180px); } #noiseMeter .nm-controls { gap:20px; padding:20px; } }
@media(max-width:700px) {
    #noiseMeter header { padding:16px; } #noiseMeter .nm-brand { gap:8px; } #noiseMeter .nm-brand > span { display:none; } #noiseMeter h2 { border:0; margin:0; padding:0; font-size:20px; }
    #noiseMeter .nm-stage { flex-basis:320px; min-height:320px; padding:0; }
    #noiseMeter .nm-reading { width:280px; height:270px; padding-top:12px; }
    #noiseMeter .nm-tick { width:4px; left:calc(50% - 2px); height:16px; top:calc(50% - 8px); transform:rotate(var(--angle)) translateY(-124px); }
    #noiseMeter .nm-value { font-size:96px; } #noiseMeter .nm-unit { font-size:13px; }
    #noiseMeter .nm-pet { width:64px; height:64px; left:auto; right:12px; bottom:4px; }
    #noiseMeter .nm-status { font-size:14px; margin:0 60px; padding:6px 0; min-height:40px; }
    #noiseMeter .nm-times { margin:12px auto 24px; } #noiseMeter .nm-times span { font-size:12px; } #noiseMeter .nm-times strong { font-size:26px; }
    #noiseMeter .nm-controls { grid-template-columns:1fr 1fr; gap:18px 20px; padding:18px 16px; }
    #noiseMeter .nm-input { gap:4px; } #noiseMeter output { width:49px; font-size:12px; } #noiseMeter label { font-size:12px; }
    #noiseMeter footer { grid-column:1/-1; justify-content:center; } #noiseMeter .nm-main { width:160px; } #noiseMeter .nm-note { padding:0 16px max(14px,env(safe-area-inset-bottom)); }
}
@media(max-height:650px) and (min-width:701px) { #noiseMeter .nm-stage { min-height:290px; flex-basis:290px; } #noiseMeter .nm-reading { transform:scale(.8); margin:-32px 0; } #noiseMeter .nm-times { margin:8px auto 18px; } #noiseMeter .nm-times strong { font-size:30px; } #noiseMeter header { padding:12px 24px; } }

/* The instrument scales inside the remaining space; controls never leave the viewport. */
html:has(#noiseMeter[open]), body:has(#noiseMeter[open]) { overflow:hidden !important; overscroll-behavior:none; }
#noiseMeter .nm-stage { flex:1 1 0; min-height:0; padding:0; }
#noiseMeter .nm-reading { position:absolute; left:50%; top:calc((100% - var(--nm-status-height,60px))/2); margin:0; transform:translate(-50%,-50%) scale(var(--nm-scale,1)); transform-origin:center; }
#noiseMeter .nm-status { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:calc(100% - 32px); max-width:640px; margin:0; }
#noiseMeter .nm-pet { max-height:70%; object-fit:contain; }
@media(max-height:720px) {
    #noiseMeter header { padding:8px 16px; }
    #noiseMeter .nm-times { margin:6px auto 12px; }
    #noiseMeter .nm-times strong { font-size:26px; margin-top:4px; }
    #noiseMeter .nm-controls { padding:12px 16px; gap:10px 16px; }
    #noiseMeter label { margin-bottom:6px; }
    #noiseMeter .nm-note { font-size:10px; line-height:1.4; padding:0 16px max(6px,env(safe-area-inset-bottom)); }
}
@media(max-height:480px) and (min-width:601px) {
    #noiseMeter header { padding:4px 16px; }
    #noiseMeter .nm-controls { grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; padding:8px 16px; }
    #noiseMeter footer { grid-column:auto; }
    #noiseMeter .nm-main { width:122px; }
    #noiseMeter .nm-times { margin:0 auto 6px; }
    #noiseMeter .nm-times strong { font-size:22px; }
    #noiseMeter .nm-times span { font-size:12px; }
}
@media(max-width:400px) {
    #noiseMeter .nm-times strong { font-size:21px; }
    #noiseMeter .nm-times span { font-size:11px; }
}