@import "https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;500;600;700&display=swap";:root{color:#f1f2ed;font-synthesis:none;text-rendering:optimizelegibility;--acid:#c8ff35;--muted:#8c9189;--line:#ffffff1c;background:#090a09;font-family:DM Sans,system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 78% 4%,#c8ff350f,#0000 25rem),#090a09;min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{color:inherit}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-shell{min-height:100vh}.app-shell.has-player{padding-bottom:248px}.credits-screen{z-index:100;opacity:1;visibility:visible;touch-action:none;background:#000;place-items:center;transition:opacity .6s,visibility .6s;display:grid;position:fixed;inset:0}.credits-screen.is-leaving{opacity:0;visibility:hidden}.credits-content{flex-direction:column;align-items:center;gap:24px;animation:.75s cubic-bezier(.2,.8,.2,1) both credits-reveal;display:flex}.credits-content img{object-fit:contain;width:clamp(150px,34vw,290px);height:auto;display:block}.credits-content p{color:#fff;letter-spacing:.16em;text-align:center;margin:0;font-family:Archivo Black,sans-serif;font-size:clamp(14px,2.4vw,20px)}.topbar{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:20;background:#090a09d1;justify-content:space-between;align-items:center;height:82px;padding:0 clamp(22px,6vw,96px);display:flex;position:sticky;top:0}.brand{color:#fff;letter-spacing:-.04em;align-items:center;gap:12px;font-family:Archivo Black,sans-serif;font-size:18px;text-decoration:none;display:flex}.brand strong{color:var(--acid);font-weight:inherit}.brand-mark{background:0 0;border-radius:10px;place-items:center;width:40px;height:40px;display:grid;overflow:hidden}.brand-mark img{object-fit:contain;width:100%;height:100%;display:block}.menu-container{position:relative}.menu-trigger{border:1px solid var(--line);color:#d8dad4;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;background:#151714;border-radius:99px;justify-content:center;align-items:center;gap:11px;min-width:98px;height:40px;padding:0 15px;font-size:12px;font-weight:700;display:flex}.menu-trigger:hover,.menu-trigger[aria-expanded=true]{color:var(--acid);border-color:#c8ff3599}.menu-bars{gap:4px;display:grid}.menu-bars i{background:currentColor;width:13px;height:1px;display:block}.settings-menu{background:#141613fa;border:0;border-bottom:1px solid #c8ff3540;border-radius:0 0 20px 20px;width:100%;padding:24px clamp(22px,6vw,96px) 28px;animation:.15s ease-out menu-in;position:fixed;top:82px;left:0;right:0;box-shadow:0 22px 70px #0000008c}.settings-content{width:min(760px,100%);margin:0 auto}.menu-heading{justify-content:space-between;align-items:end;padding:0 2px 14px;display:flex}.menu-heading span{font-size:14px;font-weight:700}.menu-heading small{color:var(--acid);letter-spacing:.14em;text-transform:uppercase;font-size:9px;font-weight:700}.menu-row,.menu-volume{color:#d7dad3;background:0 0;border:0;width:100%;min-height:48px;padding:0 3px}.menu-row{cursor:pointer;justify-content:space-between;align-items:center;display:flex}.menu-row:disabled{opacity:.35;cursor:not-allowed}.row-label,.menu-volume>span{align-items:center;gap:10px;font-size:12px;font-weight:600;display:flex}.row-label svg,.menu-volume svg{width:19px;height:19px;fill:var(--muted)}.mute-line{fill:none;stroke:#ff6868;stroke-width:2px;stroke-linecap:round}.switch{background:#343832;border-radius:20px;width:32px;height:18px;padding:3px;transition:background .15s}.switch i{background:#8d9289;border-radius:50%;width:12px;height:12px;transition:transform .15s,background .15s;display:block}.switch.is-on{background:#c8ff3540}.switch.is-on i{background:var(--acid);transform:translate(14px)}.quick-actions{grid-template-columns:1fr 1fr;gap:18px;margin-bottom:8px;display:grid}.quick-actions .menu-row{border:1px solid var(--line);background:#191c17;border-radius:10px;min-height:52px;padding:0 12px}.quick-actions .menu-row:not(:disabled):hover{border-color:#c8ff3580}.stop-action{justify-content:flex-end}.menu-volume{border:1px solid var(--line);background:#10120f;border-radius:10px;grid-template-columns:1fr auto;align-items:center;padding:12px;display:grid}.menu-volume strong{color:var(--acid);font-size:11px}.menu-volume input[type=range]{grid-column:1/-1;justify-self:stretch;width:100%;min-width:0;margin:12px 0 0;display:block}.menu-divider{background:var(--line);height:1px;margin:18px 0 14px}.install-button{background:var(--acid);color:#10120e;text-align:left;cursor:pointer;border:0;border-radius:10px;align-items:center;gap:12px;width:100%;min-height:55px;padding:9px 11px;display:flex}.install-button:disabled{color:#777c73;cursor:not-allowed;background:#272a25}.install-button svg{fill:currentColor;flex:0 0 22px;width:22px}.install-button>span{font-size:12px;font-weight:700}.install-button small{opacity:.65;margin-top:2px;font-size:9px;font-weight:500;display:block}input[type=range]{width:90px;height:3px;accent-color:var(--acid);cursor:pointer}.stop-icon{background:#f55;border-radius:1px;width:8px;height:8px}main{width:min(1160px,100% - 44px);margin:0 auto}.hero{border-bottom:1px solid var(--line);flex-direction:column;justify-content:center;min-height:440px;padding:80px 0 54px;display:flex;position:relative}.eyebrow{color:var(--acid);letter-spacing:.18em;margin:0 0 20px;font-size:11px;font-weight:700}.eyebrow span{background:var(--acid);width:28px;height:2px;margin:0 10px 3px 0;display:inline-block}h1{letter-spacing:-.065em;text-transform:uppercase;max-width:800px;margin:0;font-family:Archivo Black,Impact,sans-serif;font-size:clamp(52px,8vw,104px);line-height:.88}h1 em{color:var(--acid);font-style:normal}.intro{color:var(--muted);margin:0;font-size:16px;line-height:1.65}.hero-bottom{justify-content:space-between;align-items:end;gap:32px;margin-top:28px;display:flex}.sound-count{align-items:center;gap:12px;display:flex}.sound-count strong{color:var(--acid);letter-spacing:-.07em;font-family:Archivo Black,sans-serif;font-size:42px}.sound-count span{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:10px;line-height:1.2}.error-message{color:#ff9797;background:#ff555512;border:1px solid #ff555559;border-radius:8px;margin:24px 0 -12px;padding:12px 16px;font-size:13px}.sound-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:48px 32px;padding:56px 0 90px;display:grid}.sound-card{cursor:pointer;background:0 0;border:0;flex-direction:column;align-items:center;min-width:0;padding:0;display:flex;position:relative}.button-wrap{aspect-ratio:1;place-items:center;width:min(148px,100%);transition:transform .18s cubic-bezier(.2,.8,.2,1),filter .18s;display:grid;position:relative}.image-frame{background:#161914;border:2px solid #d7dcd3a6;border-radius:50%;width:100%;height:100%;display:block;overflow:hidden;box-shadow:inset 0 0 0 2px #090a09bf,0 5px 16px #0000004d}.image-frame img{object-fit:cover;object-position:center;filter:saturate(.88)brightness(.92);-webkit-user-select:none;user-select:none;width:100%;height:100%;transition:filter .18s,transform .18s;display:block;transform:scale(1.035)}.sound-card:hover .button-wrap{transform:translateY(-5px)scale(1.035)}.sound-card:hover .image-frame img{filter:saturate(1.08)brightness(1.08);transform:scale(1.07)}.sound-card:active .button-wrap{transform:translateY(1px)scale(.96)}.play-badge{background:var(--acid);color:#090a09;border:3px solid #090a09;border-radius:50%;place-items:center;width:31px;height:31px;padding-left:2px;font-size:10px;display:grid;position:absolute;bottom:4px;right:4px}.pulse-ring{border:1px solid #0000;border-radius:50%;position:absolute;inset:8px}.is-playing .pulse-ring{border-color:var(--acid);animation:1.15s ease-out infinite pulse}.is-playing .image-frame{border-color:var(--acid)}.is-playing .image-frame img{filter:saturate(1.15)brightness(1.08)}.equalizer{align-items:end;gap:2px;height:12px;display:flex}.equalizer i{background:#090a09;width:2px;height:9px;animation:.55s ease-in-out infinite alternate equalize}.equalizer i:nth-child(2){height:12px;animation-delay:-300ms}.equalizer i:nth-child(3){height:6px;animation-delay:-150ms}.sound-title{color:#d8dad4;text-align:center;width:100%;min-height:38px;margin-top:15px;font-size:12px;font-weight:600;line-height:1.35}.sound-number{color:#51554f;letter-spacing:.15em;margin-top:4px;font-size:9px;font-weight:700}.is-playing .sound-title,.is-playing .sound-number{color:var(--acid)}footer{border-top:1px solid var(--line);color:#555a53;letter-spacing:.14em;text-transform:uppercase;justify-content:center;align-items:center;min-height:90px;padding:0 clamp(22px,6vw,96px);font-size:10px;font-weight:700;display:flex}.footer-info{text-align:center;flex-direction:column;align-items:center;gap:7px;display:flex}footer a{color:var(--acid);text-underline-offset:3px;text-transform:lowercase;text-decoration:underline;transition:color .16s}footer a:hover,footer a:focus-visible{color:#fff}.player-drawer{z-index:40;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0d0f0cf7;border-top:1px solid #c8ff3547;min-height:232px;animation:.24s cubic-bezier(.2,.8,.2,1) drawer-in;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -22px 70px #0000008c}.player-inner{grid-template-rows:auto 76px auto;grid-template-columns:1fr;align-items:center;gap:8px;width:min(1160px,100% - 80px);min-height:232px;margin:0 auto;padding:36px 0 18px;display:grid}.drawer-sound-icon{z-index:2;object-fit:cover;filter:drop-shadow(0 7px 16px #000000a6);background:#0d0f0c;border:1px solid #c8ff3573;border-radius:50%;width:76px;height:76px;padding:3px;position:absolute;top:0;left:50%;transform:translate(-50%,-50%)}.drawer-close{color:#72776f;cursor:pointer;background:0 0;border:0;width:30px;height:30px;padding:0;font-size:25px;line-height:1;position:absolute;top:12px;right:clamp(14px,3vw,42px)}.drawer-close:hover{color:var(--acid)}.player-identity{align-items:center;min-width:0;display:flex}.player-identity div{min-width:0}.player-identity small{color:var(--acid);letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px;font-size:9px;font-weight:700;display:block}.player-identity strong{color:#f3f4ef;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:1.3;display:block;overflow:hidden}.visualizer-wrap{align-items:center;width:100%;min-width:0;height:76px;display:flex;position:relative}.visualizer{width:100%;height:64px;display:block}.player-controls{justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.player-controls button{border:1px solid var(--line);cursor:pointer;background:#1b1e19;border-radius:50%;place-items:center;width:42px;height:42px;padding:0;display:grid}.player-controls button:hover{border-color:var(--acid)}.player-controls .stop-control:hover{border-color:#f55}.player-controls .stop-control .stop-icon{width:10px;height:10px}.player-controls .primary-control{border-color:var(--acid);background:var(--acid);color:#0b0d09;width:56px;height:56px}.player-controls svg{fill:currentColor;width:20px;height:20px}.primary-control svg{width:24px;height:24px}.timeline{grid-template-columns:38px 1fr 38px;align-items:center;gap:10px;display:grid}.timeline span{color:#73786f;font-variant-numeric:tabular-nums;font-size:9px}.timeline span:last-child{text-align:right}.timeline input{width:100%;height:3px;accent-color:var(--acid);margin:0}@supports (background:linear-gradient(to right, #000 0%, #000 50%, #fff 50%)){.timeline input{appearance:none;background:linear-gradient(to right, var(--acid) 0 var(--progress), #3a3e37 var(--progress) 100%);border-radius:4px}.timeline input::-webkit-slider-thumb{appearance:none;border:3px solid var(--acid);background:#11130f;border-radius:50%;width:12px;height:12px}.timeline input::-moz-range-thumb{border:3px solid var(--acid);background:#11130f;border-radius:50%;width:8px;height:8px}}@keyframes pulse{0%{opacity:.9;inset:8px}to{opacity:0;inset:-8px}}@keyframes equalize{to{height:3px}}@keyframes menu-in{0%{opacity:0;transform:translateY(-100%)}}@keyframes drawer-in{0%{opacity:0;transform:translateY(100%)}}@keyframes credits-reveal{0%{opacity:0;transform:translateY(12px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=900px){.sound-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.player-inner{width:min(100% - 48px,760px)}}@media (width<=620px){.topbar{height:68px;padding:0 18px}.brand{font-size:15px}.brand-mark{width:34px;height:34px}.menu-trigger{min-width:auto;height:36px;padding:0 12px}.settings-menu{border-radius:0 0 16px 16px;padding:18px 16px 22px;top:68px}main{width:min(100% - 32px,1160px)}.hero{justify-content:flex-start;min-height:0;padding:58px 0 34px}h1{font-size:clamp(48px,17vw,72px)}.intro{font-size:14px}.desktop-break{display:none}.hero-bottom{align-items:center;margin-top:28px}.sound-count strong{font-size:32px}.sound-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 16px;padding:42px 0 70px}.button-wrap{width:min(120px,100%)}.play-badge{width:27px;height:27px;bottom:0;right:0}footer{min-height:110px;padding:18px}.app-shell.has-player{padding-bottom:312px}.player-drawer{min-height:294px}.player-inner{grid-template-rows:auto 76px auto;grid-template-columns:1fr;gap:11px;width:calc(100% - 32px);min-height:294px;padding:40px 0 18px}.drawer-sound-icon{width:68px;height:68px}.player-identity{grid-area:1/1}.player-identity strong{max-width:180px}.visualizer-wrap{grid-area:2/1;height:76px}.visualizer{height:56px}.player-controls button{width:38px;height:38px}.player-controls .primary-control{width:50px;height:50px}.timeline{grid-area:3/1}.drawer-close{background:0 0;border:0;border-radius:0;width:32px;height:32px;top:10px;right:12px}}@media (width<=440px){.brand{gap:8px;font-size:12px}.menu-trigger{font-size:10px}.hero-bottom{flex-direction:column;align-items:flex-start;gap:16px}.sound-count{align-self:flex-start}.player-inner{grid-template-columns:minmax(0,1fr)}.player-identity strong{max-width:128px}.player-controls{gap:8px}.quick-actions{gap:10px}.quick-actions .menu-row{padding:0 9px}.row-label{gap:7px;font-size:11px}}@media (width<=380px){.sound-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
