@import "./src/styles/v2-cd-viewer.css?v=20260725-youtube-audio-demo1";

:root[data-theme-preset="pixel"] {
  --page:#c0c0c0;
  --ink:#000;
  --muted:#404040;
  --accent:#000080;
  --glass:#c0c0c0;
  --glass-strong:#c0c0c0;
  --panel:#c0c0c0;
  --line:#000;
  --shadow:transparent;
  color-scheme:light;
}

:root[data-theme-preset="pixel"] body {
  background:#c0c0c0;
  color:#000;
}

:root[data-theme-preset="pixel"] body,
:root[data-theme-preset="pixel"] button,
:root[data-theme-preset="pixel"] input,
:root[data-theme-preset="pixel"] select {
  font-family:"Times New Roman", Times, serif;
}

:root[data-theme-preset="pixel"] body::before {
  display:block;
  background-image:
    var(--bg-image),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.09) 0 1px, transparent 1px 4px);
  background-repeat:var(--bg-repeat), repeat;
  background-position:var(--bg-position), center;
  background-size:var(--bg-size), auto;
}

:root[data-theme-preset="pixel"] #cd-stage canvas {
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

:root[data-theme-preset="pixel"] .brand-pill,
:root[data-theme-preset="pixel"] .mode-pill,
:root[data-theme-preset="pixel"] .disc-mode-pill,
:root[data-theme-preset="pixel"] .theme-mode-pill,
:root[data-theme-preset="pixel"] .settings-pill,
:root[data-theme-preset="pixel"] .bio-pill,
:root[data-theme-preset="pixel"] #settings-button,
:root[data-theme-preset="pixel"] #settings-popover,
:root[data-theme-preset="pixel"] #link-profile {
  border-width:2px;
  border-style:solid;
  border-color:#fff #404040 #404040 #fff;
  border-radius:0;
  background:#c0c0c0;
  color:#000;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

:root[data-theme-preset="pixel"] .brand-pill,
:root[data-theme-preset="pixel"] .mode-pill,
:root[data-theme-preset="pixel"] .disc-mode-pill,
:root[data-theme-preset="pixel"] .theme-mode-pill,
:root[data-theme-preset="pixel"] .settings-pill,
:root[data-theme-preset="pixel"] .bio-pill {
  min-height:24px;
  padding:2px 8px;
  font:700 12px/1.1 "Times New Roman", Times, serif;
  text-transform:none;
}

:root[data-theme-preset="pixel"] .brand-pill span,
:root[data-theme-preset="pixel"] .social-icon,
:root[data-theme-preset="pixel"] #video-play-cta {
  color:#000080;
  text-decoration:underline;
}

:root[data-theme-preset="pixel"] .mode-pill[aria-pressed="true"],
:root[data-theme-preset="pixel"] .disc-mode-pill[aria-pressed="true"],
:root[data-theme-preset="pixel"] .theme-mode-pill[aria-pressed="true"],
:root[data-theme-preset="pixel"] .settings-pill[aria-pressed="true"] {
  background:#000080;
  color:#fff;
  border-color:#404040 #fff #fff #404040;
}

:root[data-theme-preset="pixel"] #settings-button:hover,
:root[data-theme-preset="pixel"] #settings-button[aria-expanded="true"],
:root[data-theme-preset="pixel"] .settings-pill:hover,
:root[data-theme-preset="pixel"] .bio-pill:hover {
  transform:none;
  box-shadow:none;
}

:root[data-theme-preset="pixel"] #link-profile {
  padding:14px;
}

:root[data-theme-preset="pixel"] .eyebrow {
  color:#555;
  font:700 11px/1.2 "Times New Roman", Times, serif;
  letter-spacing:0;
  text-transform:none;
}

:root[data-theme-preset="pixel"] #profile-title {
  font:700 clamp(25px, 4vw, 48px)/1 "Times New Roman", Times, serif;
  letter-spacing:0;
  text-shadow:none;
}

:root[data-theme-preset="pixel"] #profile-artist,
:root[data-theme-preset="pixel"] #profile-meta,
:root[data-theme-preset="pixel"] #player-pill button {
  color:#000;
}

:root[data-theme-preset="pixel"] .social-icon svg,
:root[data-theme-preset="pixel"] .social-detect svg {
  stroke-width:1.8;
  filter:none;
}

:root[data-theme-preset="pixel"] #video-play-cta {
  font:700 12px/1 "Times New Roman", Times, serif;
  text-shadow:none;
}

:root[data-theme-preset="geocities"] {
  --muted:color-mix(in srgb, var(--ink), transparent 32%);
  --line:var(--ink);
  --shadow:transparent;
  color-scheme:light;
}

:root[data-theme-preset="geocities"] body {
  background:var(--page);
  color:var(--ink);
}

:root[data-theme-preset="geocities"] body,
:root[data-theme-preset="geocities"] button,
:root[data-theme-preset="geocities"] input,
:root[data-theme-preset="geocities"] select {
  font-family:var(--theme-font);
}

:root[data-theme-preset="geocities"] body::after,
:root[data-theme-preset="geocities"] #cd-stage::after {
  display:none;
}

:root[data-theme-preset="geocities"] body::before {
  display:block;
  background:var(--bg-image);
  background-repeat:var(--bg-repeat);
  background-position:var(--bg-position);
  background-size:var(--bg-size);
}

:root[data-theme-preset="geocities"] #link-topbar {
  top:18px;
  left:18px;
  gap:12px;
}

:root[data-theme-preset="geocities"] .brand-pill,
:root[data-theme-preset="geocities"] .mode-pill,
:root[data-theme-preset="geocities"] .disc-mode-pill,
:root[data-theme-preset="geocities"] .theme-mode-pill,
:root[data-theme-preset="geocities"] .settings-pill,
:root[data-theme-preset="geocities"] .bio-pill {
  min-height:0;
  padding:2px 5px;
  border:1px solid var(--ink);
  border-radius:0;
  background:var(--page);
  color:var(--link);
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  font:700 16px/1.1 var(--theme-font);
  text-decoration:underline;
}

:root[data-theme-preset="geocities"] .mode-pill[aria-pressed="true"],
:root[data-theme-preset="geocities"] .disc-mode-pill[aria-pressed="true"],
:root[data-theme-preset="geocities"] .theme-mode-pill[aria-pressed="true"],
:root[data-theme-preset="geocities"] .settings-pill[aria-pressed="true"] {
  background:var(--accent);
  color:var(--page);
  text-decoration:none;
}

:root[data-theme-preset="geocities"] #settings-button {
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  border:1px solid var(--ink);
  border-radius:0;
  background:var(--page);
  color:var(--link);
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

:root[data-theme-preset="geocities"] #settings-button:hover,
:root[data-theme-preset="geocities"] #settings-button[aria-expanded="true"],
:root[data-theme-preset="geocities"] .settings-pill:hover,
:root[data-theme-preset="geocities"] .bio-pill:hover {
  transform:none;
  box-shadow:none;
  background:var(--glass-strong);
}

:root[data-theme-preset="geocities"] #settings-popover,
:root[data-theme-preset="geocities"] #link-profile,
:root[data-theme-preset="geocities"] .theme-preview,
:root[data-theme-preset="geocities"] .theme-preview-pill {
  border:1px solid var(--ink);
  border-radius:0;
  background:var(--panel);
  color:var(--ink);
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

:root[data-theme-preset="geocities"] #settings-popover {
  top:62px;
  right:14px;
}

:root[data-theme-preset="geocities"] .settings-group,
:root[data-theme-preset="geocities"] .theme-settings-block {
  border-top:1px solid var(--ink);
  padding-top:8px;
}

:root[data-theme-preset="geocities"] .settings-group summary,
:root[data-theme-preset="geocities"] .theme-settings-block summary {
  color:var(--link);
  font:700 17px/1.2 var(--theme-font);
  text-decoration:underline;
}

:root[data-theme-preset="geocities"] #link-profile {
  padding:0 0 18px;
  text-align:center;
}

:root[data-theme-preset="geocities"] .eyebrow {
  display:block;
  margin:0 0 12px;
  padding:3px 8px;
  background:var(--accent);
  color:var(--page);
  font:700 18px/1.1 var(--theme-font);
  letter-spacing:0;
  text-transform:none;
}

:root[data-theme-preset="geocities"] #profile-title {
  padding:0 12px;
  color:var(--link);
  font:700 clamp(28px, 4vw, 54px)/1.05 var(--theme-font);
  letter-spacing:0;
  text-decoration:underline;
}

:root[data-theme-preset="geocities"] #profile-artist,
:root[data-theme-preset="geocities"] #profile-meta {
  color:var(--ink);
  font:700 18px/1.25 var(--theme-font);
}

:root[data-theme-preset="geocities"] #profile-meta {
  color:var(--muted);
}

:root[data-theme-preset="geocities"] #social-links {
  justify-content:center;
}

:root[data-theme-preset="geocities"] .social-icon,
:root[data-theme-preset="geocities"] .social-detect,
:root[data-theme-preset="geocities"] #video-play-cta {
  color:var(--link);
  text-decoration:underline;
}

:root[data-theme-preset="geocities"] #player-pill {
  justify-content:center;
}

:root[data-theme-preset="geocities"] #player-pill button {
  color:var(--link);
}

:root[data-theme-preset="geocities"] .theme-control-grid input,
:root[data-theme-preset="geocities"] .theme-control-grid select,
:root[data-theme-preset="geocities"] .social-field input,
:root[data-theme-preset="geocities"] .link-import-field input,
:root[data-theme-preset="geocities"] .social-add,
:root[data-theme-preset="geocities"] .social-remove {
  border:1px solid var(--ink);
  border-radius:0;
  background:var(--page);
  color:var(--ink);
  box-shadow:none;
}

@media (max-width: 760px) {
  :root[data-theme-preset="geocities"] #link-topbar {
    top:16px;
    left:12px;
    right:58px;
    gap:8px;
    flex-wrap:wrap;
  }

  :root[data-theme-preset="geocities"] .brand-pill,
  :root[data-theme-preset="geocities"] .mode-pill,
  :root[data-theme-preset="geocities"] .disc-mode-pill,
  :root[data-theme-preset="geocities"] .theme-mode-pill {
    font-size:14px;
  }

  :root[data-theme-preset="geocities"] #link-profile {
    left:18px;
    right:18px;
    bottom:24px;
    width:auto;
  }
}