*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#f9f9f9;color:#222;line-height:1.6}
img{max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:1.5rem 1rem}
.site-header{background:#f5c518;color:#1a1a1a;padding:.7rem 1rem}
.hbar{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.brand{font-size:1.4rem;font-weight:800;text-decoration:none;color:#1a1a1a}
.nav{margin-left:auto}
.nav ul{list-style:none;display:flex;gap:.2rem;margin:0;padding:0;flex-wrap:wrap;align-items:center}
.nav a{color:#1a1a1a;text-decoration:none;font-weight:600;padding:.5rem .75rem;border-radius:8px;display:inline-block}
.nav a:hover{background:rgba(0,0,0,.08)}
.nav .has-sub{position:relative}
.nav .sub{position:absolute;top:100%;left:0;min-width:210px;background:#f5c518;border-radius:0 0 10px 10px;box-shadow:0 8px 20px rgba(0,0,0,.2);display:none;flex-direction:column;z-index:60;padding:.25rem}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{display:flex}
.nav-toggle{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;margin-left:auto}
.theme-toggle{background:rgba(0,0,0,.1);border:0;color:#1a1a1a;font-size:1.05rem;padding:.45rem .7rem;border-radius:8px;cursor:pointer}
.hero{text-align:center}
.hero h1{font-size:2rem;margin:.2rem 0 .6rem}
.hero p{max-width:840px;margin:.4rem auto;color:#333}
.crumbs{max-width:1200px;margin:1rem auto 0;padding:0 1rem;font-size:.9rem;color:#666}
.crumbs a{color:#b8860b;text-decoration:none}
.search{max-width:560px;margin:1.3rem auto}
.search input{width:100%;padding:.8rem 1rem;font-size:1rem;border:2px solid #e0a800;border-radius:10px}
.cat-links{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:1.2rem 0}
.cat-links a{background:#f5b301;color:#1a1a1a;text-decoration:none;padding:.5rem 1rem;border-radius:20px;font-weight:600;font-size:.92rem}
.cat-links a:hover{background:#e0a800}
.sec-title{display:flex;align-items:center;gap:.4rem;font-size:1.35rem;margin:2rem 0 .3rem}
.sec-title .star{color:#e0a800}
.sound-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:26px 14px;margin:1rem 0}
.sound-card{width:150px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.35rem}
.sc-title{text-decoration:none;color:#222}
.sc-title h3{font-size:.92rem;margin:.15rem 0;line-height:1.25}
.sc-actions{display:flex;gap:.55rem;justify-content:center}
.ic{background:none;border:0;cursor:pointer;font-size:1.2rem;text-decoration:none;line-height:1;padding:2px;color:#e0a800}
.ic-like{color:#bbb}
.ic-like.on{color:#e5383b}
.ic-dl{color:#e0a800;font-size:1.25rem}
.arcade{width:118px;height:96px;border:0;background:transparent;padding:0;cursor:pointer;position:relative;display:block;--c:#e5383b;--cd:#a4161a}
.arcade .base{position:absolute;left:50%;top:40px;transform:translateX(-50%);width:118px;height:46px;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#dfe3e6,#aab0b4 60%,#7f868b);box-shadow:0 6px 10px rgba(0,0,0,.28)}
.arcade .top{position:absolute;left:50%;top:6px;transform:translateX(-50%);width:104px;height:64px;border-radius:50%;background:radial-gradient(ellipse at 42% 28%,#ffffff 0%,var(--c) 46%,var(--cd) 100%);box-shadow:inset 0 -6px 10px rgba(0,0,0,.3),inset 0 6px 12px rgba(255,255,255,.4);transition:transform .05s}
.arcade .shine{position:absolute;left:24px;top:12px;width:44px;height:20px;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(2px)}
.arcade:active .top,.arcade.playing .top{transform:translateX(-50%) translateY(5px)}
.arcade--lg{width:190px;height:150px}
.arcade--lg .base{top:64px;width:190px;height:74px}
.arcade--lg .top{width:168px;height:104px}
.arcade--lg .shine{left:42px;top:22px;width:70px;height:32px}
.load-more{display:flex;justify-content:center;margin:1.2rem 0}
.load-more button,.view-more{background:#f5b301;color:#1a1a1a;border:0;border-radius:25px;padding:.7rem 1.5rem;font-size:1rem;cursor:pointer;text-decoration:none;font-weight:700}
.load-more button:hover,.view-more:hover{background:#e0a800}
.prose{max-width:900px;margin:0 auto}
.prose h2{margin:2rem 0 .5rem}
.prose p,.prose li{font-size:1.05rem;line-height:1.7}
.prose a{color:#b8860b}
.tag-row a{display:inline-block;background:#f5c518;color:#1a1a1a;text-decoration:none;padding:.2rem .7rem;border-radius:16px;font-size:.85rem;font-weight:600;margin:.15rem}
.faq details{background:#fff;border:1px solid #e3e6e4;border-radius:10px;margin:.6rem 0;padding:.1rem .4rem}
.faq summary{cursor:pointer;font-weight:700;padding:.8rem;font-size:1.05rem}
.faq .fa{padding:0 .8rem .9rem}
.sound-hero{max-width:720px;margin:0 auto;text-align:center;background:#fff;border:1px solid #eee;border-radius:14px;padding:1.5rem;box-shadow:0 4px 14px rgba(0,0,0,.06);display:flex;flex-direction:column;align-items:center;gap:.5rem}
.ad-slot{max-width:970px;margin:1.5rem auto;min-height:90px;text-align:center}
.footer-cols{background:#f5c518;color:#1a1a1a;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.4rem;padding:2rem 1rem}
.footer-cols strong{display:block;margin-bottom:.5rem}
.footer-cols ul{list-style:none;margin:0;padding:0}
.footer-cols li{margin:.3rem 0}
.footer-cols a{color:#1a1a1a;text-decoration:none}
.footer-cols a:hover{text-decoration:underline}
.site-footer{background:#e0a800;color:#1a1a1a;text-align:center;padding:1rem}
:root[data-theme="dark"] body{background:#141816;color:#e7eae8}
:root[data-theme="dark"] .sc-title{color:#e7eae8}
:root[data-theme="dark"] .prose p,:root[data-theme="dark"] .prose li,:root[data-theme="dark"] .hero p{color:#c9d0cc}
:root[data-theme="dark"] .faq details,:root[data-theme="dark"] .sound-hero{background:#1e2421;border-color:#2c332f}
@media (max-width:768px){.nav{display:none;flex-basis:100%;margin-left:0}.nav.open{display:block}.nav ul{flex-direction:column;align-items:stretch}.nav .sub{position:static;background:rgba(0,0,0,.1)}.nav-toggle{display:inline-block}.hero h1{font-size:1.6rem}}