:root{
  --bg:#08101d;--bg2:#0b1627;--panel:#101c2d;--panel2:#14243a;
  --text:#f5f8fc;--muted:#94a4ba;--line:#23354d;--accent:#5ea1ff;
  --accent2:#2f73d8;--soft:#182b44;--safe:#6f829a;
}
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{margin:0;background:radial-gradient(circle at 50% -10%,#142a49 0,#08101d 42%,#07101c 100%);color:var(--text);min-height:100vh}
button,input{font:inherit}
a{color:inherit}
.shell{width:min(720px,calc(100% - 28px));margin:0 auto}
header{height:54px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center}
.header-inner{width:min(920px,calc(100% - 28px));margin:auto;display:flex;align-items:center;justify-content:space-between}
.wordmark{font-weight:800;font-size:14px;letter-spacing:-.02em}.wordmark b{color:var(--accent)}
.header-link{font-size:12px;color:var(--muted);text-decoration:none}
main{padding:18px 0 44px}
.hero{overflow:hidden;border-radius:14px;margin:2px 0 10px;border:1px solid rgba(255,255,255,.06);box-shadow:0 8px 22px rgba(0,0,0,.18)}.hero img{display:block;width:100%;height:118px;object-fit:cover;object-position:center 46%}
h1{font-size:clamp(28px,7vw,40px);line-height:1.03;letter-spacing:-.045em;text-align:center;margin:0 0 5px}
.sub{text-align:center;color:var(--muted);font-size:14px;margin:0 0 14px}
.sound-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.sound{appearance:none;border:1px solid var(--line);background:rgba(16,28,45,.92);color:var(--text);border-radius:14px;min-height:72px;padding:11px 8px;cursor:pointer;transition:.15s ease}
.sound:hover{border-color:#365374}.sound.active{background:linear-gradient(180deg,#17345a,#132944);border-color:#6db0ff;box-shadow:0 0 0 1px rgba(94,161,255,.15),0 8px 26px rgba(38,104,190,.12)}
.sound-icon{display:block;font-size:23px;line-height:1;margin-bottom:8px}.sound-name{font-size:13px;font-weight:750}
.player{margin-top:13px;background:rgba(16,28,45,.92);border:1px solid var(--line);border-radius:16px;padding:18px}
.player-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.now{font-size:11px;color:var(--muted)}.now strong{display:block;color:var(--text);font-size:18px;margin-top:2px}
.play{width:60px;height:60px;border:0;border-radius:50%;background:linear-gradient(180deg,#70b5ff,#3e82e8);color:#fff;font-size:21px;cursor:pointer;box-shadow:0 9px 26px rgba(64,132,232,.26);display:grid;place-items:center}
.volume-row{display:flex;align-items:center;gap:12px;margin-top:18px}.volume-row label{font-size:11px;color:var(--muted);min-width:50px}
input[type=range]{width:100%;accent-color:var(--accent)}
.timers{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:16px}
.timer{border:1px solid var(--line);background:#132136;color:var(--muted);border-radius:10px;padding:10px 4px;font-size:11px;cursor:pointer}
.timer.active{background:linear-gradient(180deg,#2f7ddd,#235fae);border-color:#78b8ff;color:white;font-weight:750}
.status{text-align:center;color:#9fb0c7;font-size:11px;margin-top:12px;min-height:16px}
.safety{font-size:10.5px;line-height:1.5;color:var(--safe);margin-top:12px}

.info{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.06)}
.info h2{font-size:18px;margin:0 0 8px}.info p{font-size:13px;line-height:1.65;color:var(--muted);margin:0}
.footer{border-top:1px solid rgba(255,255,255,.06);padding:20px 0 26px;color:#71839b;font-size:11px}
.footer-inner{width:min(920px,calc(100% - 28px));margin:auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer a{text-decoration:none;color:#8192aa}
@media(min-width:620px){.sound-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:460px){.shell{width:min(100% - 22px,720px)}main{padding-top:8px}.hero{border-radius:12px;margin-bottom:8px}.hero img{height:92px;object-position:center 44%}.sub{font-size:13px;margin-bottom:12px}.timers{gap:5px}.timer{font-size:10.5px;padding:9px 2px}.player{padding:16px}}

:root{--safe:#a2b1c6}
:focus-visible{outline:3px solid #ffd28a;outline-offset:4px}
.header-link,.sound-name,.volume-row label,.timer{font-size:14px}
.now,.status,.safety,.footer{font-size:13px}.info p{font-size:16px}
.timer{min-height:44px}.sound{min-height:72px}.volume-row input{min-height:30px}
.hero img{height:106px}.hero{position:relative}
.hero-caption{position:absolute;bottom:5px;right:8px;background:#08101dd9;padding:2px 6px;border-radius:4px;font-size:12px;color:#d8e4f4}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}.brand img{width:30px;height:30px}
.safety a{text-decoration:underline}.info h3{font-size:17px;margin:20px 0 7px}
.info p+p{margin-top:12px}details{border-bottom:1px solid var(--line);padding:14px 0}summary{cursor:pointer;font-weight:600;font-size:16px}details p{padding-top:10px}
.doc{max-width:720px;margin:auto;padding:32px 22px 56px}.doc h1{text-align:left;font-size:36px;margin:24px 0}.doc h2{font-size:21px;margin-top:28px}.doc p,.doc li{font-size:16px;line-height:1.75;color:#b7c5d8}.doc a{color:#9fcbff}.doc .updated{font-size:13px}
.skip{position:absolute;left:10px;top:-100px;background:#fff;color:#08101d;padding:10px;z-index:10}.skip:focus{top:10px}
#remaining{font-size:13px;color:#b7c5d8;text-align:center;min-height:20px;margin-top:8px}
@media(max-width:460px){.hero img{height:76px}.sound{padding:8px}.sound-icon{font-size:20px;margin-bottom:6px}.player{padding:12px;margin-top:10px}.volume-row{margin-top:8px}.timers{margin-top:9px;grid-template-columns:1.35fr 1fr 1fr 1fr}.timer{font-size:12px}.status{margin-top:7px}.sub{margin-bottom:9px}.safety{margin-top:7px}.wordmark{font-size:13px}.header-inner{gap:8px}.play{width:54px;height:54px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}