:root {
  color-scheme: light;
  --color-background:#f3f6f6;
  --color-surface:#ffffff;
  --color-surface-secondary:#f5f7f8;
  --color-text-primary:#151922;
  --color-text-secondary:#657083;
  --color-text-muted:#8792a0;
  --color-primary:#087f72;
  --color-primary-hover:#066b61;
  --color-primary-soft:#e1f4f1;
  --color-download:#ef5b43;
  --color-download-hover:#dc4933;
  --color-download-soft:#ffe6df;
  --color-border:#d6dee5;
  --color-border-strong:#bdc9d3;
  --color-divider:#e7ecef;
  --color-duration:#f6c45d;
  --color-on-accent:#ffffff;
  --color-header:rgba(243,246,246,.94);
  --color-skeleton:rgba(255,255,255,.68);
  --color-error-text:#9d3b29;
  --shadow-small:0 4px 14px rgba(19,34,48,.06);
  --shadow-medium:0 12px 30px rgba(19,34,48,.09);
  --radius-small:10px;
  --radius-medium:14px;
  --radius-large:18px;
  --font-size-body:16px;
  --font-size-small:14px;
  --font-size-caption:12px;
  --line-height-body:1.58;
  --line-height-tight:1.14;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --control-height:44px;
  --transition-fast:150ms ease;
  --ink:var(--color-text-primary);
  --muted:var(--color-text-secondary);
  --soft:var(--color-surface-secondary);
  --canvas:var(--color-background);
  --panel:var(--color-surface);
  --line:var(--color-border);
  --line-strong:var(--color-border-strong);
  --teal:var(--color-primary);
  --teal-dark:var(--color-primary-hover);
  --teal-soft:var(--color-primary-soft);
  --coral:var(--color-download);
  --coral-soft:var(--color-download-soft);
  --gold:var(--color-duration);
  --shadow:var(--shadow-medium);
  --max:1180px;
}
html[data-theme="dark"] {
  color-scheme:dark;
  --color-background:#0d1218;
  --color-surface:#151b23;
  --color-surface-secondary:#1b232d;
  --color-text-primary:#f3f6f8;
  --color-text-secondary:#aeb8c5;
  --color-text-muted:#84909f;
  --color-primary:#36b5a5;
  --color-primary-hover:#53cabb;
  --color-primary-soft:#183d39;
  --color-download:#ff735d;
  --color-download-hover:#ff8a76;
  --color-download-soft:#452b2a;
  --color-border:#2a3541;
  --color-border-strong:#3a4654;
  --color-divider:#232d38;
  --color-duration:#dcae4f;
  --color-on-accent:#071210;
  --color-header:rgba(13,18,24,.94);
  --color-skeleton:rgba(255,255,255,.08);
  --color-error-text:#ffc0b3;
  --shadow-small:0 4px 16px rgba(0,0,0,.2);
  --shadow-medium:0 14px 36px rgba(0,0,0,.3);
}
* { box-sizing:border-box; }
html { background:var(--canvas); scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--canvas); font:var(--font-size-body)/var(--line-height-body) Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color:inherit; }
button,input,select { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid color-mix(in srgb,var(--teal) 60%,transparent); outline-offset:2px; }
.site-header,main,.site-footer { width:min(var(--max), calc(100% - 28px)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:20; padding:8px 0; background:var(--color-header); }
.header-inner { display:grid; grid-template-columns:auto minmax(220px,1fr) auto auto; align-items:center; gap:10px; min-height:56px; padding:6px 8px; border:1px solid var(--line); border-radius:var(--radius-medium); background:var(--panel); box-shadow:var(--shadow-small); }
.home-header:not(.is-compact) .header-search { display:none; }
.home-header:not(.is-compact) .header-inner { grid-template-columns:auto 1fr auto; }
.home-header:not(.is-compact) nav { justify-content:flex-end; }
.theme-menu { position:relative; }
.theme-menu summary { display:flex; align-items:center; gap:6px; min-height:38px; padding:7px 10px; border:1px solid var(--line); border-radius:var(--radius-small); background:var(--soft); color:var(--ink); font-size:13px; font-weight:800; cursor:pointer; list-style:none; }
.theme-menu summary::-webkit-details-marker { display:none; }
.theme-icon { display:inline-grid; place-items:center; inline-size:17px; block-size:17px; color:var(--teal); }
.theme-icon svg { inline-size:100%; block-size:100%; }
.theme-options { position:absolute; right:0; top:calc(100% + 8px); z-index:35; display:grid; min-width:188px; padding:6px; border:1px solid var(--line); border-radius:var(--radius-medium); background:var(--panel); box-shadow:var(--shadow-medium); }
.theme-options button { display:flex; align-items:center; gap:9px; min-height:38px; padding:8px 9px; border:0; border-radius:var(--radius-small); background:transparent; color:var(--ink); font-size:13px; font-weight:750; text-align:left; cursor:pointer; }
.theme-options button:hover,.theme-options button.is-active { background:var(--teal-soft); color:var(--teal-dark); }
.theme-options button.is-active::after { content:"✓"; margin-left:auto; font-weight:950; }
.brand { display:inline-flex; align-items:center; gap:9px; min-height:44px; color:var(--ink); font-weight:900; line-height:1; text-decoration:none; }
.brand-mark { display:grid; place-items:center; inline-size:34px; block-size:34px; background:transparent; color:var(--color-on-accent); font-size:18px; }
.brand-mark img { inline-size:100%; block-size:100%; object-fit:contain; }
.brand small { display:block; margin-top:3px; color:var(--teal); font-size:11px; font-weight:850; letter-spacing:0; text-transform:uppercase; }
.site-header nav,.site-footer nav { display:flex; flex-wrap:wrap; gap:6px; }
.site-header nav a,.site-footer nav a { min-height:38px; display:inline-flex; align-items:center; padding:8px 10px; border-radius:var(--radius-small); color:var(--muted); font-size:14px; font-weight:800; text-decoration:none; transition:background var(--transition-fast),color var(--transition-fast); }
.site-header nav a:hover,.site-header nav a[aria-current="page"],.site-footer nav a:hover { color:var(--teal-dark); background:var(--teal-soft); }
.site-header nav a[aria-current="page"] { box-shadow:inset 0 -2px var(--teal); }
.menu-button { display:none; min-height:var(--control-height); border:1px solid var(--line); border-radius:var(--radius-small); background:var(--soft); color:var(--ink); font-weight:850; cursor:pointer; }
main { padding-bottom:54px; }
h1,h2,h3,p { margin-top:0; }
.sr-only { position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
h1 { margin-bottom:14px; font-size:clamp(2rem,4vw,3.25rem); line-height:1.06; letter-spacing:-.035em; }
h2 { margin-bottom:9px; font-size:clamp(1.6rem,2.6vw,2.3rem); line-height:var(--line-height-tight); letter-spacing:-.025em; }
h3 { margin-bottom:7px; font-size:18px; line-height:1.22; letter-spacing:0; }
p { color:var(--muted); }
.eyebrow { margin:0 0 8px; color:var(--coral); font-size:12px; font-weight:950; letter-spacing:0; text-transform:uppercase; }
.button { min-height:var(--control-height); display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 15px; border:1px solid transparent; border-radius:var(--radius-small); font-weight:900; text-decoration:none; cursor:pointer; transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast); }
.button.primary { background:var(--teal); color:var(--color-on-accent); box-shadow:0 8px 18px color-mix(in srgb,var(--teal) 22%,transparent); }
.button.primary:hover { background:var(--teal-dark); }
.button:disabled,.button.is-disabled { cursor:not-allowed; opacity:.56; box-shadow:none; }
.button.secondary { border-color:color-mix(in srgb,var(--teal) 28%,var(--line)); background:var(--teal-soft); color:var(--teal-dark); }
.button.ghost { border-color:var(--line); background:var(--panel); color:var(--ink); }
.text-link { color:var(--teal-dark); font-weight:900; text-decoration:none; }
.download-button:hover { background:var(--color-download-hover); }
.search-box,.header-search,.catalog-tools { position:relative; }
.search-box { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; width:100%; }
.search-box label,.header-search label,.catalog-tools label,.search-field { display:grid; gap:5px; min-width:0; color:var(--muted); font-size:13px; font-weight:850; }
.search-box label span,.header-search label span { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0); }
.search-box input,.header-search input,.catalog-tools input,.catalog-tools select { width:100%; min-height:var(--control-height); padding:10px 12px; border:1px solid var(--line-strong); border-radius:var(--radius-small); background:var(--panel); color:var(--ink); outline:none; }
.hero-search input,.hero-search .button { min-height:56px; font-size:16px; }
.hero-search .button.primary { border-color:var(--line-strong); background:var(--soft); color:var(--teal-dark); box-shadow:none; }
.hero-search .button.primary:hover { border-color:var(--teal); background:var(--teal-soft); }
.search-box input:focus,.header-search input:focus,.catalog-tools input:focus,.catalog-tools select:focus { border-color:var(--teal); box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 22%,transparent); }
.search-box input::placeholder,.header-search input::placeholder,.catalog-tools input::placeholder { color:var(--color-text-muted); }
.header-search { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:6px; }
.header-search button { min-height:var(--control-height); border:0; border-radius:var(--radius-small); background:var(--teal); color:var(--color-on-accent); font-size:18px; cursor:pointer; }
.search-suggestions { position:absolute; inset-inline:0; top:calc(100% + 6px); z-index:30; display:grid; gap:3px; padding:8px; border:1px solid var(--line); border-radius:var(--radius-medium); background:var(--panel); box-shadow:var(--shadow-medium); }
.search-suggestions[hidden] { display:none; }
.search-suggestions button { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:8px; border:0; border-radius:7px; background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.search-suggestions button:hover { background:var(--soft); }
.suggestion-main { display:flex; align-items:center; min-width:0; gap:10px; }
.suggestion-main > span:last-child { display:grid; gap:1px; min-width:0; }
.suggestion-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.suggestion-main small { color:var(--muted); font-size:11px; }
.suggestion-icon { display:grid; flex:0 0 auto; place-items:center; inline-size:26px; block-size:26px; border-radius:50%; background:var(--teal-soft); color:var(--teal-dark); }
.suggestion-icon svg,.action-icon { inline-size:16px; block-size:16px; }
.suggestion-duration { flex:0 0 auto; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.search-loading,.search-empty { display:block; padding:10px 8px; color:var(--muted); font-size:13px; }
.search-suggestions small { color:var(--muted); }
.hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.8fr); gap:28px; align-items:center; margin-top:14px; padding:30px 32px; border:1px solid var(--line); border-radius:var(--radius-large); background:var(--panel); box-shadow:var(--shadow-medium); }
.hero-copy { max-width:720px; }
.hero-search { margin:18px 0 0; }
.hero-panel { display:grid; grid-template-rows:minmax(0,1fr); gap:14px; align-self:stretch; }
.hero-player { min-height:0; }
.hero-player .ringtone-card { min-height:100%; border-color:color-mix(in srgb,var(--teal) 70%,var(--line)); background:var(--soft); }
.hero-category-grid { display:flex; flex-wrap:wrap; gap:10px; padding:18px 0 0; }
.hero-category-grid a { display:inline-flex; align-items:center; min-height:42px; padding:9px 14px; border:1px solid var(--line-strong); border-radius:14px; background:var(--panel); color:var(--ink); font-size:15px; font-weight:850; text-decoration:none; box-shadow:var(--shadow-small); transition:border-color var(--transition-fast),background var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast); }
.hero-category-grid a:hover { border-color:var(--teal); background:var(--teal-soft); color:var(--teal-dark); box-shadow:var(--shadow-medium); transform:translateY(-1px); }
.hero-category-grid .hero-category-all,.hero-category-grid .is-active { border-color:var(--teal); background:var(--teal); color:var(--color-on-accent); }
.hero-category-grid .hero-category-all:hover,.hero-category-grid .is-active:hover { background:var(--teal-dark); color:var(--color-on-accent); }
.quick-filters,.article-categories { display:flex; flex-wrap:wrap; gap:8px; }
.quick-filters { margin:0 0 20px; }
.article-categories { margin:12px 0 0; }
.quick-filters a,.article-categories a { min-height:36px; display:inline-flex; align-items:center; padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:var(--soft); color:var(--teal-dark); font-size:14px; font-weight:850; text-decoration:none; transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast); }
.quick-filters a:hover,.article-categories a:hover { border-color:var(--teal); background:var(--teal-soft); }
.content-section { padding:44px 0; border-bottom:1px solid var(--line); }
.collection-priority { padding-top:28px; }
.compact-section { padding:28px 0; }
.section-heading,.listing-header,.catalog-header { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.section-heading p,.listing-header p,.catalog-header p { max-width:720px; margin-bottom:0; }
.catalog-header,.listing-header { padding:26px 0; }
.catalog-total { flex:0 0 auto; color:var(--teal-dark); font-weight:900; }
.catalog-tools { display:grid; grid-template-columns:minmax(230px,1fr) minmax(150px,.34fr) minmax(150px,.34fr) 44px; gap:10px; align-items:end; margin-bottom:20px; padding:14px; border:1px solid var(--line); border-radius:var(--radius-medium); background:var(--panel); box-shadow:var(--shadow-small); }
.catalog-tools.is-loading::after { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--color-skeleton); animation:skeleton 1.2s infinite; pointer-events:none; }
.search-field { grid-column:auto; }
.icon-button { width:44px; height:44px; border:1px solid var(--line-strong); border-radius:var(--radius-small); background:var(--panel); color:var(--ink); font-size:24px; cursor:pointer; }
.ringtone-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.ringtone-card { position:relative; display:grid; gap:10px; min-height:124px; padding:14px; border:1px solid var(--line); border-radius:var(--radius-medium); background:var(--panel); box-shadow:var(--shadow-small); transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),background var(--transition-fast); }
.ringtone-card:hover { border-color:color-mix(in srgb,var(--teal) 50%,var(--line)); box-shadow:var(--shadow-medium); transform:translateY(-1px); }
.ringtone-card.is-playing { border-color:var(--teal); background:var(--teal-soft); box-shadow:var(--shadow-small); }
.card-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; align-items:center; }
.play-button { position:relative; z-index:2; inline-size:44px; block-size:44px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--teal); color:var(--color-on-accent); cursor:pointer; box-shadow:0 8px 16px color-mix(in srgb,var(--teal) 20%,transparent); transition:background var(--transition-fast),transform var(--transition-fast); }
.play-button:hover { background:var(--teal-dark); }
.play-button.is-disabled { background:var(--line-strong); color:var(--color-text-muted); box-shadow:none; cursor:not-allowed; }
.ringtone-grid .play-button:not(.is-disabled):not(.is-playing) { background:var(--line-strong); color:var(--teal-dark); box-shadow:none; }
.ringtone-grid .play-button:not(.is-disabled):not(.is-playing):hover { background:var(--teal-soft); }
.play-icon { display:grid; place-items:center; inline-size:24px; block-size:24px; }
.play-icon svg { inline-size:100%; block-size:100%; }
.pause-shape { display:none; }
.play-button.is-playing .play-shape { display:none; }
.play-button.is-playing .pause-shape { display:block; }
.card-title-group { min-width:0; }
.card-title-group h3 { margin-bottom:3px; }
.card-title-group h3 { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.card-meta-line { display:flex; align-items:center; gap:8px; min-width:0; }
.card-category { flex:0 1 auto; min-width:0; margin:0; color:var(--muted); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-rank { flex:0 0 auto; display:inline-flex; align-items:center; gap:3px; min-height:22px; padding:3px 6px 3px 5px; border-radius:999px; font-size:10px; font-weight:950; line-height:1; white-space:nowrap; }
.card-rank svg { inline-size:13px; block-size:13px; }
.card-rank-1 { background:#f4c84f; color:#312400; box-shadow:0 3px 8px color-mix(in srgb,#f4c84f 25%,transparent); }
.card-rank-2 { background:#cbd5e1; color:#18222e; box-shadow:0 3px 8px color-mix(in srgb,#cbd5e1 18%,transparent); }
.card-rank-3 { background:#d79061; color:#35180a; box-shadow:0 3px 8px color-mix(in srgb,#d79061 18%,transparent); }
.duration-chip { min-height:30px; display:inline-flex; align-items:center; justify-content:center; padding:4px 8px; border-radius:999px; background:var(--gold); color:var(--color-text-primary); font-size:12px; font-weight:950; white-space:nowrap; }
.card-download-icon { inline-size:36px; block-size:36px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:50%; background:var(--soft); color:var(--muted); font-size:22px; font-weight:950; line-height:1; transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast); }
.ringtone-card:hover .card-download-icon { border-color:var(--teal); background:var(--teal-soft); color:var(--teal-dark); box-shadow:none; }
.card-progress { block-size:7px; overflow:hidden; border-radius:999px; background:var(--color-divider); }
.card-progress span { display:block; inline-size:0; block-size:100%; border-radius:inherit; background:var(--coral); transition:inline-size .12s linear; }
.card-time { display:flex; align-items:center; justify-content:space-between; color:var(--color-text-muted); font-size:12px; font-variant-numeric:tabular-nums; }
.card-meta { display:flex; flex-wrap:wrap; gap:10px; margin:0; }
.card-meta div { min-width:84px; }
.download-stat { display:inline-flex; align-items:baseline; gap:4px; min-width:64px !important; }
.download-stat dt { color:var(--teal-dark); font-size:18px; font-weight:950; line-height:1; }
.download-stat dd { color:var(--ink); font-size:14px; font-weight:900; }
.pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:24px 0; padding:14px 0; border-block:1px solid var(--line); }
.pagination p { margin:0; color:var(--muted); font-size:14px; }
.pagination div { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pagination a,.pagination-current { display:inline-grid; place-items:center; min-inline-size:40px; min-block-size:40px; padding:0 10px; border:1px solid var(--line-strong); border-radius:8px; text-decoration:none; }
.pagination-current { border-color:var(--teal); background:var(--teal); color:var(--color-on-accent); font-weight:850; }
.card-meta dt { color:var(--muted); font-size:11px; }
.card-meta dd { margin:1px 0 0; font-size:13px; font-weight:850; }
.card-open-overlay { position:absolute; inset:0; z-index:1; border-radius:inherit; }
.card-open-overlay:focus-visible { outline:3px solid color-mix(in srgb,var(--teal) 60%,transparent); outline-offset:2px; }
.hero-player .featured-card { position:relative; isolation:isolate; min-height:0; block-size:100%; padding:28px; overflow:hidden; border-color:color-mix(in srgb,var(--teal) 78%,var(--line)); background:radial-gradient(circle at 8% 0%,color-mix(in srgb,var(--teal) 27%,transparent),transparent 42%),radial-gradient(circle at 94% 100%,color-mix(in srgb,var(--coral) 20%,transparent),transparent 40%),linear-gradient(135deg,color-mix(in srgb,var(--teal-soft) 72%,var(--panel)),var(--soft)); box-shadow:0 18px 42px color-mix(in srgb,var(--teal) 22%,transparent),inset 0 1px 0 color-mix(in srgb,var(--color-on-accent) 18%,transparent); grid-template-rows:repeat(4,auto); align-content:space-between; align-items:stretch; }
.hero-player .featured-card::before { content:""; position:absolute; inset:auto -70px -105px auto; z-index:0; inline-size:250px; block-size:250px; border:1px solid color-mix(in srgb,var(--teal) 52%,transparent); border-radius:50%; box-shadow:0 0 0 32px color-mix(in srgb,var(--teal) 11%,transparent),0 0 0 64px color-mix(in srgb,var(--teal) 6%,transparent); pointer-events:none; }
.hero-player .featured-card > :not(.card-open-overlay) { position:relative; z-index:2; }
.featured-card { gap:16px; min-height:0; padding:20px; }
.featured-player-top { display:grid; grid-template-columns:78px minmax(0,1fr) 44px; gap:16px; align-items:center; }
.featured-play { inline-size:78px; block-size:78px; background:linear-gradient(135deg,var(--teal),color-mix(in srgb,var(--teal) 55%,#77e5ff)); box-shadow:0 12px 26px color-mix(in srgb,var(--teal) 44%,transparent),inset 0 1px 0 color-mix(in srgb,var(--color-on-accent) 38%,transparent); }
.featured-play .play-icon { inline-size:48px; block-size:48px; transform:translateX(2px); }
.featured-play:hover { background:linear-gradient(135deg,var(--teal-dark),var(--teal)); transform:translateY(-2px) scale(1.03); }
.featured-play::before { content:""; position:absolute; inset:-7px; border:1px solid color-mix(in srgb,var(--teal) 58%,transparent); border-radius:inherit; opacity:.8; pointer-events:none; }
.featured-card .card-title-group h2 { margin:0 0 5px; font-size:28px; line-height:1.12; letter-spacing:-.025em; text-shadow:0 2px 12px color-mix(in srgb,var(--teal) 24%,transparent); }
.featured-card .card-category { color:color-mix(in srgb,var(--ink) 72%,var(--teal)); font-size:18px; font-weight:700; }
.featured-progress { block-size:10px; background:color-mix(in srgb,var(--ink) 10%,var(--soft)); box-shadow:inset 0 1px 2px color-mix(in srgb,var(--ink) 13%,transparent); }
.hero-player .featured-progress span { background:linear-gradient(90deg,var(--coral),#ffbb70); box-shadow:0 0 14px color-mix(in srgb,var(--coral) 72%,transparent); }
.featured-time { display:flex; justify-content:space-between; color:var(--muted); font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; }
.featured-timing { display:flex; align-items:center; justify-content:space-between; margin-top:-8px; color:var(--muted); font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; }
.featured-stats { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; }
.featured-stats div { min-width:0; min-height:0; padding:7px 9px; border:1px solid color-mix(in srgb,var(--teal) 28%,var(--line)); border-radius:var(--radius-small); background:color-mix(in srgb,var(--panel) 72%,transparent); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--color-on-accent) 10%,transparent); }
.featured-stats dt { color:color-mix(in srgb,var(--muted) 82%,var(--teal)); font-size:10px; font-weight:800; }
.featured-stats dd { margin:1px 0 0; overflow:hidden; color:var(--ink); font-size:12px; font-weight:950; text-overflow:ellipsis; white-space:nowrap; }
.featured-download { position:relative; z-index:2; inline-size:44px; block-size:44px; display:grid; flex:0 0 auto; place-items:center; border:1px solid var(--line-strong); border-radius:50%; background:var(--teal); color:var(--color-on-accent); box-shadow:0 8px 16px color-mix(in srgb,var(--teal) 20%,transparent); transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast); }
.featured-download:hover { background:var(--teal-dark); transform:translateY(-1px); }
.hero-player .featured-download { border-color:color-mix(in srgb,var(--teal) 52%,var(--line)); background:color-mix(in srgb,var(--panel) 70%,var(--teal-soft)); color:var(--teal); box-shadow:0 8px 20px color-mix(in srgb,var(--teal) 20%,transparent),inset 0 1px 0 color-mix(in srgb,var(--color-on-accent) 20%,transparent); }
.hero-player .featured-download:hover { border-color:var(--teal); background:var(--teal); color:var(--color-on-accent); box-shadow:0 10px 24px color-mix(in srgb,var(--teal) 38%,transparent); }
.featured-download.is-disabled { background:var(--line-strong); color:var(--color-text-muted); box-shadow:none; }
.featured-download .action-icon { inline-size:21px; block-size:21px; }
.button.download-button { background:var(--coral); color:var(--color-on-accent); }
.collection-priority .text-link { color:var(--muted); }
.collection-priority .text-link:hover { color:var(--teal-dark); }
.ringtone-card.is-loading .play-button::after { content:""; position:absolute; inset:5px; border:2px solid color-mix(in srgb,var(--color-on-accent) 45%,transparent); border-top-color:var(--color-on-accent); border-radius:50%; animation:spin .7s linear infinite; }
.inline-error { margin:0; padding:8px; border-radius:var(--radius-small); background:var(--coral-soft); color:var(--color-error-text); font-size:13px; }
.category-grid,.collection-grid,.entity-link-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.entity-header { max-width:920px; margin-bottom:20px; }
.entity-updated { margin:18px 0 0; color:var(--muted); font-size:14px; }
.entity-sort-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:18px 0; }
.entity-sort-controls label { color:var(--muted); font-size:14px; font-weight:800; }
.entity-sort-controls select { min-height:44px; padding:9px 12px; border:1px solid var(--line-strong); border-radius:var(--radius-small); background:var(--panel); color:var(--ink); }
.small-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.category-link,.mini-link { display:grid; gap:4px; min-height:84px; padding:15px; border:1px solid var(--line); border-radius:var(--radius-medium); background:var(--panel); text-decoration:none; box-shadow:var(--shadow-small); transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast); }
.category-link:hover,.mini-link:hover { border-color:var(--teal); box-shadow:var(--shadow-medium); transform:translateY(-1px); }
.category-link span,.mini-link span { font-weight:950; }
.category-link small,.mini-link small { color:var(--muted); }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; padding:18px 0 8px; color:var(--muted); font-size:13px; }
.breadcrumbs a { color:var(--teal-dark); text-decoration:none; }
.breadcrumbs a::after { content:"/"; margin-left:8px; color:var(--line-strong); }
.detail-lead { max-width:760px; font-size:18px; }
.entity-links { margin:14px 0 0; color:var(--muted); }
.entity-links a { color:var(--teal-dark); font-weight:800; }
.ringtone-detail { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; padding:24px; border:1px solid var(--line); border-radius:var(--radius-large); background:var(--panel); box-shadow:var(--shadow-medium); }
.detail-player { display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:14px; align-items:center; margin-top:24px; padding:16px; border:1px solid var(--line); border-radius:var(--radius-medium); background:var(--soft); }
.large-play { inline-size:64px; block-size:64px; }
.detail-player-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.detail-player-copy p { margin:0; color:var(--ink); font-weight:900; }
.detail-player-heading .duration-chip { flex:0 0 auto; }
.large-progress { block-size:9px; }
.detail-side { padding:18px; border:1px solid var(--line); border-radius:8px; background:var(--soft); }
.side-title { margin-bottom:12px; color:var(--ink); font-size:18px; font-weight:950; }
.detail-meta { display:grid; gap:10px; margin:0; }
.detail-meta div { padding:10px; border-radius:var(--radius-small); background:var(--panel); }
.detail-meta dt { color:var(--muted); font-size:12px; }
.detail-meta dd { margin:2px 0 0; color:var(--ink); font-weight:900; }
.audio-pending { margin:0; padding:12px; border-radius:var(--radius-small); background:var(--coral-soft); color:var(--color-error-text); }
.install-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.install-grid article,.info-panel { padding:20px; border:1px solid var(--line); border-radius:var(--radius-medium); background:var(--panel); }
.install-grid ol { margin:12px 0 0; padding-left:22px; color:var(--muted); }
.article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.article-card { display:grid; gap:10px; min-height:250px; padding:16px; border:1px solid var(--line); border-radius:var(--radius-medium); background:var(--panel); box-shadow:var(--shadow-small); }
.article-card h2 { font-size:20px; }
.article-card h2 a { text-decoration:none; }
.article-category-group { margin-top:28px; }
.article-category-group h3 { margin-bottom:14px; }
.article-card p { margin-bottom:0; }
.article-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; color:var(--muted); font-size:13px; }
.news-list { display:grid; gap:12px; }
.news-preview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.news-card { position:relative; display:grid; grid-template-columns:220px 112px minmax(0,1fr); gap:18px; padding:18px; border:1px solid var(--line); border-radius:var(--radius-medium); background:var(--panel); box-shadow:var(--shadow-small); transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast); }
.news-card:hover { border-color:var(--teal); box-shadow:var(--shadow-medium); transform:translateY(-1px); }
.news-card-overlay { position:absolute; inset:0; z-index:1; border-radius:inherit; }
.news-card-overlay:focus-visible { outline:3px solid color-mix(in srgb,var(--teal) 60%,transparent); outline-offset:2px; }
.news-preview-grid .news-card { grid-template-columns:1fr; gap:12px; min-height:240px; }
.news-image { margin:0; }
.news-image img { display:block; inline-size:100%; block-size:auto; aspect-ratio:16 / 9; border-radius:var(--radius-small); object-fit:cover; background:var(--soft); }
.news-image figcaption { position:relative; z-index:2; margin-top:6px; color:var(--muted); font-size:11px; line-height:1.35; }
.news-image figcaption a { color:var(--teal-dark); }
.news-date { display:flex; align-items:flex-start; color:var(--teal-dark); font-size:14px; font-weight:900; line-height:1.25; }
.news-card-copy { display:grid; align-content:start; gap:8px; }
.news-card-copy .eyebrow { margin:0; }
.news-card h2 { margin:0; font-size:22px; }
.news-card p { margin:0; }
.news-card .text-link { margin-top:4px; }
.news-card:hover .text-link { color:var(--teal); }
.news-page > .news-image { margin:0 0 22px; }
.news-source { margin:26px 0 0; padding-top:16px; border-top:1px solid var(--line); font-size:14px; }
.news-source a { color:var(--teal-dark); font-weight:900; }
.news-page .content-section { padding-bottom:0; border-bottom:0; }
.article-reading-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:24px; align-items:start; }
.article-reading-layout > .article-page { width:100%; max-width:none; }
.article-popular-sidebar { position:sticky; top:86px; }
.article-popular-ringtones { padding:16px; border:1px solid var(--line); border-radius:var(--radius-medium); background:var(--panel); box-shadow:var(--shadow-small); }
.article-popular-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px; }
.article-popular-heading .eyebrow { margin-bottom:5px; }
.article-popular-heading h2 { margin:0; font-size:20px; }
.article-ringtone-list { display:grid; gap:7px; }
.article-ringtone-list a { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:42px; padding:8px 9px; border:1px solid var(--line); border-radius:var(--radius-small); background:var(--soft); color:var(--ink); font-size:13px; font-weight:850; text-decoration:none; transition:border-color var(--transition-fast),background var(--transition-fast),color var(--transition-fast); }
.article-ringtone-list a:hover { border-color:var(--teal); background:var(--teal-soft); color:var(--teal-dark); }
.article-ringtone-list a span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.article-ringtone-list a small { flex:0 0 auto; color:var(--gold); font-size:12px; font-weight:950; }
.article-popular-mobile { display:none; }
.article-page { max-width:840px; padding:24px; border:1px solid var(--line); border-radius:var(--radius-large); background:var(--panel); box-shadow:var(--shadow-small); }
.article-page h1,.not-found h1 { font-size:38px; }
.article-page h2 { margin-top:34px; font-size:26px; }
.article-page h3 { margin-top:24px; font-size:20px; }
.article-lead { font-size:18px; }
.article-byline { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; color:var(--muted); font-size:14px; font-weight:800; }
.article-hero-image { margin:0 0 24px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-medium); background:var(--soft); }
.article-hero-image img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.article-hero-image figcaption { padding:9px 12px; color:var(--muted); font-size:12px; line-height:1.4; }
.article-hero-image a { color:var(--teal-dark); font-weight:850; }
.article-card { overflow:hidden; }
.article-card-image { display:block; margin:-18px -18px 15px; overflow:hidden; background:var(--soft); }
.article-card-image img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform var(--transition-fast); }
.article-card:hover .article-card-image img { transform:scale(1.03); }
.toc { display:grid; gap:8px; margin:20px 0; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--soft); }
.toc p { margin:0; color:var(--ink); font-weight:950; }
.toc a { color:var(--teal-dark); text-decoration:none; }
.narrow-text { max-width:860px; }
.compact-article { max-width:none; }
.seo-text-block .article-page { box-shadow:none; }
.faq-block details { border:1px solid var(--line); border-radius:var(--radius-small); background:var(--panel); }
.faq-block details + details { margin-top:8px; }
.faq-block summary { min-height:48px; display:flex; align-items:center; padding:12px 14px; cursor:pointer; font-weight:900; }
.faq-block details p { padding:0 14px 14px; }
.ad-slot { min-height:96px; display:grid; place-items:center; margin:18px 0; border:1px dashed var(--line-strong); border-radius:var(--radius-medium); background:var(--soft); color:var(--muted); font-size:13px; font-weight:850; }
.sitemap-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.sitemap-links a { min-height:40px; padding:8px 10px; border-radius:8px; background:var(--soft); color:var(--teal-dark); text-decoration:none; }
.not-found { max-width:720px; margin:58px auto; padding:26px; border:1px solid var(--line); border-radius:var(--radius-large); background:var(--panel); text-align:center; box-shadow:var(--shadow-medium); }
.not-found-search { margin:18px auto; max-width:560px; }
.empty-state { grid-column:1/-1; display:grid; gap:5px; padding:22px; border:1px dashed var(--line-strong); border-radius:var(--radius-medium); background:var(--soft); color:var(--muted); text-align:center; }
.empty-state strong { color:var(--ink); }
.load-more { display:flex; margin:18px auto 0; }
.catalog-result-note { margin:16px 0 0; text-align:center; font-size:14px; }
.site-footer { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(0,1fr); gap:26px; padding:28px 0 48px; border-top:1px solid var(--line); }
.site-footer p { max-width:560px; margin:10px 0 0; font-size:13px; }
.site-footer nav { justify-content:flex-end; align-content:start; }
.footer-tools { display:grid; justify-items:end; gap:16px; }
.footer-theme .theme-options { top:auto; bottom:calc(100% + 8px); }
@keyframes skeleton { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:960px) {
  .header-inner { grid-template-columns:auto minmax(0,1fr) auto; }
  .header-search { grid-column:1/-1; order:3; }
  .menu-button { display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; }
  .site-header nav { display:none; grid-column:1/-1; order:4; padding-top:8px; border-top:1px solid var(--line); }
  .site-header nav[data-open] { display:flex; }
  .hero,.ringtone-detail { grid-template-columns:1fr; }
  .ringtone-grid,.article-grid,.news-preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .category-grid,.collection-grid,.entity-link-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .catalog-tools { grid-template-columns:1fr 1fr; }
  .search-field { grid-column:1/-1; }
  .icon-button { justify-self:end; }
  .site-footer { grid-template-columns:1fr; }
  .site-footer nav { justify-content:flex-start; }
  .footer-tools { justify-items:start; }
  .article-reading-layout { display:block; }
  .article-popular-sidebar { display:none; }
  .article-popular-mobile { display:block; margin:28px 0; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
@media (max-width:640px) {
  .site-header,main,.site-footer { width:min(100% - 22px,var(--max)); }
  h1 { font-size:32px; }
  h2 { font-size:24px; }
  .hero { padding:20px 16px; gap:20px; }
  .detail-lead,.article-lead { font-size:16px; }
  .search-box,.detail-player { grid-template-columns:1fr; }
  .ringtone-grid,.article-grid,.news-preview-grid,.category-grid,.collection-grid,.entity-link-grid,.install-grid,.sitemap-links { grid-template-columns:1fr; }
  .news-card { grid-template-columns:1fr; gap:10px; }
  .catalog-tools { grid-template-columns:1fr; padding:12px; }
  .icon-button { justify-self:start; }
  .section-heading,.listing-header,.catalog-header { align-items:stretch; flex-direction:column; }
  .ringtone-detail,.article-page,.not-found { padding:18px; }
  .article-card-image { margin:-16px -16px 14px; }
  .site-header { padding-top:8px; }
  .featured-card { padding:16px; }
  .hero-player .featured-card { min-height:0; block-size:auto; }
  .featured-stats div { min-height:0; padding:7px; }
  .featured-stats dd { font-size:12px; }
  .site-header nav a,.theme-menu summary,.theme-options button,.quick-filters a,.card-download-icon,.pagination a,.pagination-current { min-height:44px; }
}