:root { --ink:#292d31; --muted:#6c7379; --paper:#fff; --ground:#f1f2f3; --cyan:#11b9dc; --blue:#268ee8; --line:#dce0e3; --shadow:0 18px 50px rgba(26,38,45,.12); font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif; color:var(--ink); background:var(--ground); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:300px; background:var(--ground); line-height:1.55; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.skip-link { position:fixed; z-index:100; left:1rem; top:-5rem; padding:.7rem 1rem; background:#000; color:#fff; }
.skip-link:focus { top:1rem; }
.preview-banner { padding:.45rem 1rem; background:#20262a; color:#fff; text-align:center; font-size:.78rem; letter-spacing:.04em; }
.site-header { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:70px; padding:0 2.5vw; background:rgba(255,255,255,.96); border-bottom:1px solid rgba(0,0,0,.05); backdrop-filter:blur(12px); }
.brand img { display:block; width:190px; max-height:32px; }
.desktop-nav,.actions { display:flex; align-items:center; gap:2.2rem; }
.desktop-nav a { text-decoration:none; font-size:1.04rem; }
.actions { justify-self:end; gap:.7rem; }
.icon-button,.menu-button { border:0; background:transparent; cursor:pointer; color:var(--ink); }
.icon-button { position:relative; display:grid; place-items:center; width:42px; height:42px; font-size:1.65rem; text-decoration:none; }
.cart-button span { position:absolute; right:0; top:0; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--cyan); color:#fff; font-size:.7rem; line-height:18px; }
.menu-button { display:none; }
.mobile-nav { grid-column:1/-1; padding:1rem 0; border-top:1px solid var(--line); }
.mobile-nav a { display:block; padding:.6rem 0; text-decoration:none; }
main { min-height:68vh; }
.catalog-hero { padding:clamp(4rem,9vw,8rem) max(2rem,7vw) 3rem; background:radial-gradient(circle at 80% 10%,rgba(17,185,220,.18),transparent 35%),linear-gradient(135deg,#eef2f3,#fff); }
.catalog-hero h1,.content-page h1,.product-summary h1 { max-width:1000px; margin:.1em 0 .25em; font-weight:400; font-size:clamp(2.5rem,6vw,5.8rem); line-height:1.02; letter-spacing:-.045em; }
.catalog-hero>p:last-child { max-width:650px; color:var(--muted); font-size:1.15rem; }
.eyebrow { margin:0 0 .5rem; color:#078eaa; font-size:.75rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.categories,.library { padding:clamp(3rem,7vw,6rem) max(1.25rem,4vw); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:2rem; }
.section-heading h2 { margin:0; font-size:clamp(1.9rem,3vw,3rem); font-weight:400; letter-spacing:-.025em; }
.section-heading>span { color:var(--muted); }
.category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,2rem); }
.category-card { position:relative; min-height:230px; display:flex; flex-direction:column; justify-content:end; padding:2rem; overflow:hidden; border-radius:3px; background:#33424a; color:#fff; text-decoration:none; box-shadow:var(--shadow); transition:transform .2s ease,box-shadow .2s ease; }
.category-card::before { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,rgba(10,18,22,.04) 20%,rgba(10,18,22,.82) 100%); }
.category-card-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.category-card:hover { transform:translateY(-4px); box-shadow:0 24px 60px rgba(26,38,45,.2); }
.category-card:hover .category-card-image { transform:scale(1.035); }
.category-card span,.category-card small { position:relative; z-index:2; text-shadow:0 1px 5px rgba(0,0,0,.55); }
.category-card span { font-size:1.55rem; }
.category-card small { opacity:.82; }
.library { background:#e9ebed; }
.catalog-controls { display:flex; gap:1rem; justify-content:flex-end; margin:0 0 1.5rem; }
.catalog-controls label { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.catalog-controls input,.catalog-controls select { display:block; min-width:230px; margin-top:.35rem; padding:.8rem 1rem; border:1px solid #cbd1d5; background:#fff; color:var(--ink); }
.sound-list { display:grid; gap:1px; background:#d3d7da; border:1px solid #d3d7da; }
.sound-card { display:grid; grid-template-columns:72px minmax(0,1fr) auto; align-items:center; gap:1rem; min-height:108px; padding:1rem 1.4rem; background:#fff; }
.sound-card[hidden] { display:none; }
.play-button { display:grid; place-items:center; width:52px; height:52px; border:1px solid #bcc4c8; border-radius:50%; background:#fff; color:var(--cyan); cursor:pointer; transition:.2s; }
.play-button:hover,.play-button.playing { border-color:var(--cyan); background:var(--cyan); color:#fff; }
.play-button.playing span { font-size:0; }.play-button.playing span::after { content:"Ⅱ"; font-size:1rem; }
.play-button:disabled { opacity:.35; cursor:not-allowed; }
.sound-copy { min-width:0; }
.sound-copy h3 { margin:0; font-size:1rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sound-copy h3 a { text-decoration:none; }
.sound-copy p { margin:.2rem 0 0; color:var(--muted); font-size:.82rem; }
.sound-meta { display:flex; align-items:center; gap:1rem; }
.add-button { width:40px; height:40px; border:0; border-radius:50%; background:#edf8fb; color:#068ca9; font-size:1.4rem; cursor:pointer; }
.empty-state { padding:3rem; text-align:center; }
.product-page,.content-page { width:min(1180px,calc(100% - 2.5rem)); margin:auto; padding:clamp(3rem,7vw,7rem) 0; }
.back-link { display:inline-block; margin-bottom:2rem; color:var(--muted); }
.product-layout { display:grid; grid-template-columns:minmax(300px,1fr) minmax(300px,.85fr); gap:clamp(2rem,7vw,7rem); align-items:center; }
.product-player { position:relative; min-height:530px; display:grid; place-items:center; align-content:center; gap:2rem; overflow:hidden; background:linear-gradient(145deg,#152d3d,#20bdda); color:#fff; }
.product-player .orb { position:absolute; width:320px; height:320px; border:1px solid rgba(255,255,255,.35); border-radius:50%; box-shadow:0 0 0 45px rgba(255,255,255,.06),0 0 0 100px rgba(255,255,255,.04); }
.product-player .play-button { position:relative; width:90px; height:90px; border:0; font-size:1.4rem; }
.product-player p { position:relative; max-width:250px; text-align:center; opacity:.8; font-size:.8rem; }
.product-summary h1 { font-size:clamp(2.2rem,4.3vw,4.7rem); }
.price { color:#078eaa; font-size:2rem; }
.product-summary dl { margin:2rem 0; border-top:1px solid var(--line); }
.product-summary dl div { display:grid; grid-template-columns:100px 1fr; padding:.8rem 0; border-bottom:1px solid var(--line); }
.product-summary dt { color:var(--muted); }.product-summary dd { margin:0; }
.button { display:inline-flex; justify-content:center; padding:.85rem 1.2rem; border:1px solid var(--cyan); text-decoration:none; cursor:pointer; }
.button.primary { background:var(--cyan); color:#fff; }.button.secondary { margin-left:.5rem; background:transparent; color:#078eaa; }
.product-tags { margin-top:4rem; padding-top:2rem; border-top:1px solid var(--line); }
.content-page { max-width:900px; min-height:60vh; }
.content-page h1 { font-size:clamp(2.8rem,7vw,6rem); }
.legacy-content { font-size:1.08rem; }
.legacy-content img,.content-page>img { max-width:100%; height:auto; }
.legacy-content iframe { max-width:100%; }
.feature-video { display:block; width:100%; max-height:70vh; margin:2rem 0 3rem; background:#111; box-shadow:var(--shadow); }
.notice,.status-list { padding:1.2rem 1.4rem; background:#e6f8fb; border-left:4px solid var(--cyan); }
.account-login { display:grid; gap:1rem; max-width:520px; margin-top:2rem; }
.account-login label { display:grid; gap:.35rem; color:var(--muted); }
.account-login input { width:100%; padding:.85rem 1rem; border:1px solid #cbd1d5; background:#fff; }
.account-login .button { justify-self:start; }
.form-error { padding:.75rem 1rem; background:#fff0f0; border-left:4px solid #c33; color:#7a1919; }
.account-records { padding:0; list-style:none; border-top:1px solid var(--line); }
.account-records li { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--line); }
.status-list li { margin:.6rem 0; }
.site-footer { display:grid; grid-template-columns:1.5fr 1fr auto; gap:3rem; padding:4rem max(1.5rem,4vw); background:#252b2f; color:#dce4e7; }
.site-footer img { width:170px; filter:brightness(0) invert(1); }.site-footer p { max-width:450px; color:#9ca9af; }.site-footer nav { display:grid; align-content:start; gap:.5rem; }
dialog { width:min(680px,calc(100% - 2rem)); border:0; padding:2rem; box-shadow:var(--shadow); }
dialog::backdrop { background:rgba(20,25,28,.62); backdrop-filter:blur(3px); }
dialog form { float:right; } dialog form button { border:0; background:none; font-size:1.8rem; cursor:pointer; }
.search-dialog label { display:block; margin:2rem 0 .5rem; font-size:1.8rem; }.search-dialog>div { display:flex; }.search-dialog input { flex:1; min-width:0; padding:1rem; border:1px solid var(--line); }
.cart-row { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--line); }.cart-row button { border:0; background:none; font-size:1.3rem; cursor:pointer; }.cart-note { color:var(--muted); font-size:.85rem; }
.audio-dock { position:fixed; z-index:30; left:50%; bottom:1.25rem; transform:translateX(-50%); width:min(760px,calc(100% - 2rem)); display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:1rem; padding:1rem 1.2rem; background:#20272b; color:#fff; box-shadow:var(--shadow); }.audio-dock[hidden] { display:none; }.audio-dock button { border:0; background:transparent; color:#fff; cursor:pointer; }.progress { width:100%; height:3px; margin-top:.4rem; background:#566168; }.progress span { display:block; width:0; height:100%; background:var(--cyan); }
@media (max-width:900px) { .site-header { grid-template-columns:1fr auto; min-height:62px; }.desktop-nav { display:none; }.menu-button { display:block; }.brand img { width:145px; }.category-grid { grid-template-columns:repeat(2,1fr); }.product-layout { grid-template-columns:1fr; }.product-player { min-height:400px; }.site-footer { grid-template-columns:1fr 1fr; }.site-footer>p { grid-column:1/-1; } }
@media (max-width:600px) { .preview-banner { font-size:.68rem; }.site-header { padding:0 1rem; }.actions { gap:0; }.icon-button { width:34px; }.catalog-hero { padding:3rem 1.25rem; }.category-grid { grid-template-columns:1fr; }.category-card { min-height:180px; }.catalog-controls { display:grid; }.catalog-controls input,.catalog-controls select { width:100%; min-width:0; }.sound-card { grid-template-columns:52px minmax(0,1fr); padding:.9rem; }.sound-meta { grid-column:2; justify-content:space-between; }.button.secondary { margin:.6rem 0 0; }.site-footer { grid-template-columns:1fr; }.audio-dock { bottom:.5rem; }.audio-dock time { display:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }