/* =========================================================================
   MORE SKINS: Fish Tank, PS3, Wii, Y2K Chrome, Party, Liquid Glass and Dreamcore (html[data-skin="..."]).
   The moving backgrounds are drawn by skin-fx.js into #skin-decor.
   Fish Tank photos: Wikimedia Commons (credits on the Themes page). Fonts: M PLUS Rounded 1c,
   Michroma and Bungee (SIL Open Font Licence), served from /static/skins/fonts.
   ========================================================================= */
@font-face { font-family: "Crate Rounded"; src: url("skins/fonts/MPLUSRounded1c-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Crate Rounded"; src: url("skins/fonts/MPLUSRounded1c-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Crate Rounded"; src: url("skins/fonts/MPLUSRounded1c-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Crate Wide"; src: url("skins/fonts/Michroma-400.woff2") format("woff2"); font-display: swap; }

/* ---- shared: the animated background sits behind a see-through app ---- */
/* The cover wheel on a see-through stage: the covers themselves fade out at the sides (a coloured
   gradient would show as a band over the moving background). */
html[data-skin="aqua"] .cf-fade, html[data-skin="ps3"] .cf-fade, html[data-skin="chrome"] .cf-fade { display: none; }
html[data-skin="aqua"] .cf-stage, html[data-skin="ps3"] .cf-stage, html[data-skin="chrome"] .cf-stage {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%); }
#skin-decor.fx-aqua, #skin-decor.fx-ps3, #skin-decor.fx-chrome { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#skin-decor canvas { display: block; width: 100%; height: 100%; }
html[data-skin="aqua"] body, html[data-skin="ps3"] body, html[data-skin="chrome"] body { background: transparent; }
html[data-skin="aqua"] #app, html[data-skin="ps3"] #app, html[data-skin="chrome"] #app,
html[data-skin="wii"] #app { position: relative; z-index: 1; }

/* =========================================================================
   FISH TANK: Y2K glass and water. Frosted, glossy panels floating in a
   sunlit aquarium; aqua gel buttons; bubble-shaped play buttons.
   ========================================================================= */
html[data-skin="aqua"] {
  --font: "Segoe UI", "Trebuchet MS", "Lucida Grande", "Helvetica Neue", Arial, sans-serif;
  --glass: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.08) 42%, rgba(10,60,130,.10) 58%, rgba(190,240,255,.14) 100%);
  --glass-edge: rgba(255,255,255,.62);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 26px rgba(150,230,255,.22), 0 12px 34px rgba(0,30,90,.35);
  --gel: linear-gradient(180deg, #e6fdff 0%, #9cecff 42%, #31c3f2 50%, #1fa8e3 72%, #7fe2ff 100%);
  --page-bg: transparent;
  background: #0a3a86;
  color-scheme: dark;
}
html[data-skin="aqua"] body { text-shadow: 0 1px 2px rgba(0,40,90,.35); }
/* every glass panel: frosted, glossy top, bright rim */
html[data-skin="aqua"] .side-nav, html[data-skin="aqua"] .side-lib, html[data-skin="aqua"] .side-bottom,
html[data-skin="aqua"] .np-glass, html[data-skin="aqua"] .sheet, html[data-skin="aqua"] .ctx-menu, html[data-skin="aqua"] .notice,
html[data-skin="aqua"] .promo, html[data-skin="aqua"] .status-line, html[data-skin="aqua"] .theme-card, html[data-skin="aqua"] .tile,
html[data-skin="aqua"] .remote-card, html[data-skin="aqua"] #preview-bar, html[data-skin="aqua"] #sel-bar, html[data-skin="aqua"] .now-card {
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
  backdrop-filter: blur(7px) saturate(1.35); -webkit-backdrop-filter: blur(7px) saturate(1.35);
}
@media (min-width: 900px) {
  html[data-skin="aqua"] #main { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 26px; box-shadow: var(--glass-shadow);
    backdrop-filter: blur(6px) saturate(1.3); -webkit-backdrop-filter: blur(6px) saturate(1.3); }
  html[data-skin="aqua"] .side-nav, html[data-skin="aqua"] .side-lib, html[data-skin="aqua"] .side-bottom { border-radius: 22px; }
  html[data-skin="aqua"] #main::before { content: ""; position: sticky; top: 0; display: block; height: 0; z-index: 30; pointer-events: none;
    box-shadow: 0 0 0 0 transparent; }
  html[data-skin="aqua"] .searchbox { background: transparent; }
}
@media (max-width: 899px) {
  html[data-skin="aqua"] #main::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 40%, rgba(10,60,130,.12));
    backdrop-filter: blur(6px) saturate(1.3); -webkit-backdrop-filter: blur(6px) saturate(1.3); }
}
/* the "glass shine": a bright curved reflection across the top of big panels */
html[data-skin="aqua"] .side-nav, html[data-skin="aqua"] .tile, html[data-skin="aqua"] .promo, html[data-skin="aqua"] .theme-card { position: relative; overflow: hidden; }
html[data-skin="aqua"] .side-nav::after, html[data-skin="aqua"] .promo::after, html[data-skin="aqua"] .tile::after, html[data-skin="aqua"] .theme-card::after {
  content: ""; position: absolute; left: -10%; right: -10%; top: -60%; height: 105%; border-radius: 0 0 50% 50%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.04)); }
html[data-skin="aqua"] .topbar h1, html[data-skin="aqua"] .hero h1, html[data-skin="aqua"] .section-head h2 {
  color: #fff; text-shadow: 0 0 14px rgba(140,230,255,.75), 0 2px 3px rgba(0,40,100,.45); letter-spacing: -.01em; }
html[data-skin="aqua"] .section-head h2::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 2px;
  background: radial-gradient(circle at 35% 30%, #fff 0 20%, #8be9ff 45%, #1aa0e0 100%); box-shadow: 0 0 8px rgba(120,230,255,.9); }
html[data-skin="aqua"] .hero::before { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 75%); border-radius: 26px 26px 0 0; }
/* pictures sit in glass frames, like the fish in the old log-in screen */
html[data-skin="aqua"] .card .cover, html[data-skin="aqua"] .hero-art, html[data-skin="aqua"] .np-art .cover {
  border-radius: 16px; border: 3px solid rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(80,170,230,.6), inset 0 0 12px rgba(255,255,255,.6), 0 10px 26px rgba(0,30,90,.45); }
html[data-skin="aqua"] .hero-art .cover { border-radius: 13px; }
html[data-skin="aqua"] .card.round .cover { border-radius: 50%; }
html[data-skin="aqua"] .card:hover .cover { box-shadow: 0 0 0 1px #9df0ff, 0 0 22px rgba(120,230,255,.9), 0 10px 26px rgba(0,30,90,.45); }
html[data-skin="aqua"] .tile { border-radius: 16px; }
html[data-skin="aqua"] .item .cover, html[data-skin="aqua"] .track .cover, html[data-skin="aqua"] .tile .cover { border-radius: 10px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.7), 0 3px 8px rgba(0,30,90,.35); }
html[data-skin="aqua"] .item:hover, html[data-skin="aqua"] .track:hover, html[data-skin="aqua"] .side-lib .item:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
html[data-skin="aqua"] .track.playing .track-title { color: #b8f6ff; text-shadow: 0 0 10px rgba(120,235,255,1); }
html[data-skin="aqua"] .track-sub, html[data-skin="aqua"] .item-sub, html[data-skin="aqua"] .card-sub { color: rgba(225,246,255,.85); }
/* aqua gel buttons */
html[data-skin="aqua"] .btn, html[data-skin="aqua"] .chip.active, html[data-skin="aqua"] .switch.on {
  background: var(--gel); color: #003352; border: 1px solid rgba(255,255,255,.9); text-shadow: 0 1px 0 rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 6px rgba(0,120,200,.35), 0 4px 14px rgba(0,110,210,.45); }
html[data-skin="aqua"] .btn:hover { filter: brightness(1.08) saturate(1.1); box-shadow: inset 0 1px 0 #fff, 0 0 18px rgba(130,235,255,.9); }
html[data-skin="aqua"] .btn.ghost, html[data-skin="aqua"] .btn.secondary, html[data-skin="aqua"] .chip {
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.1) 50%, rgba(255,255,255,.06) 51%, rgba(255,255,255,.18));
  color: #fff; border: 1px solid rgba(255,255,255,.65); text-shadow: 0 1px 2px rgba(0,40,90,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
html[data-skin="aqua"] .btn.danger { background: linear-gradient(180deg, #ffd2d6, #ff7d8b 48%, #e8324a 52%, #ff8a97); color: #4a0010; }
html[data-skin="aqua"] .play-btn, html[data-skin="aqua"] .np-controls .big, html[data-skin="aqua"] .desk-ctl [data-action="p-toggle"] {
  background: radial-gradient(circle at 34% 26%, #fff 0 9%, rgba(255,255,255,.55) 16%, rgba(130,230,255,.55) 38%, #1aa6e6 70%, #0b6fbf 100%);
  color: #fff; border: 1px solid rgba(255,255,255,.9); box-shadow: inset 0 -6px 12px rgba(0,60,140,.45), inset 0 3px 6px rgba(255,255,255,.6), 0 6px 20px rgba(0,90,200,.55), 0 0 0 4px rgba(255,255,255,.12); }
html[data-skin="aqua"] .np-controls .big svg, html[data-skin="aqua"] .play-btn svg { filter: drop-shadow(0 1px 2px rgba(0,50,120,.6)); }
html[data-skin="aqua"] .desk-ctl [data-action="p-toggle"] { width: 44px; height: 44px; border-radius: 50%; }
html[data-skin="aqua"] .icon-btn.on, html[data-skin="aqua"] .ctl.on { color: #b8f6ff; filter: drop-shadow(0 0 6px rgba(120,235,255,.9)); }
html[data-skin="aqua"] .field, html[data-skin="aqua"] .searchbox label, html[data-skin="aqua"] .album-search {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(225,245,255,.86)); color: #06395c; border: 1px solid rgba(255,255,255,.95);
  border-radius: 14px; box-shadow: inset 0 2px 5px rgba(0,60,120,.25), 0 0 0 1px rgba(80,170,230,.45); text-shadow: none; }
html[data-skin="aqua"] .searchbox input, html[data-skin="aqua"] .album-search input { color: #06395c; }
html[data-skin="aqua"] .searchbox input::placeholder, html[data-skin="aqua"] .album-search input::placeholder { color: #4e86a8; }
html[data-skin="aqua"] .searchbox { background: transparent; }
html[data-skin="aqua"] input[type=range] { background: linear-gradient(180deg, rgba(0,40,90,.45), rgba(255,255,255,.35)); height: 6px; box-shadow: inset 0 1px 2px rgba(0,30,70,.5); }
html[data-skin="aqua"] input[type=range]::-webkit-slider-thumb { width: 16px; height: 16px; background: radial-gradient(circle at 35% 30%, #fff 0 25%, #8be9ff 55%, #1aa0e0); box-shadow: 0 0 8px rgba(130,235,255,.9); }
/* phone: glass top bar, tab bar and mini player */
html[data-skin="aqua"] #tabs { background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.12)); border-top: 1px solid rgba(255,255,255,.7);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 1px 0 #fff; }
html[data-skin="aqua"] .tab { color: rgba(225,246,255,.85); }
html[data-skin="aqua"] .tab.active { color: #fff; text-shadow: 0 0 10px rgba(130,235,255,1); }
html[data-skin="aqua"] .tab.active svg { filter: drop-shadow(0 0 6px rgba(130,235,255,.95)); }
html[data-skin="aqua"] .mini, html[data-skin="aqua"] .desk-player {
  background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.14) 48%, rgba(255,255,255,.08) 52%, rgba(190,240,255,.24));
  border: 1px solid rgba(255,255,255,.75); box-shadow: inset 0 1px 0 #fff, 0 8px 26px rgba(0,30,90,.4);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); }
html[data-skin="aqua"] .mini { border-radius: 20px; padding-left: 12px; }
html[data-skin="aqua"] .mini .cover { border-radius: 10px; }
@media (min-width: 900px) {
  html[data-skin="aqua"] .desk-player { border-radius: 26px; height: 78px; padding: 0 18px 0 13px; }
  html[data-skin="aqua"] .desk-now .cover { border-radius: 12px; }
}
/* Now Playing and lyrics float as frosted glass over the tank */
html[data-skin="aqua"] .np, html[data-skin="aqua"] .lyrics-view {
  background: linear-gradient(180deg, rgba(120,215,255,.26), rgba(10,70,150,.34)); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); }
html[data-skin="aqua"] .np-art .cover { border-radius: 18px; border-width: 5px; }
html[data-skin="aqua"] .ly-line.on { color: #fff; text-shadow: 0 0 18px rgba(130,235,255,1); }
html[data-skin="aqua"] .ly-top { background: linear-gradient(180deg, rgba(120,215,255,.55), rgba(120,215,255,0)); }
html[data-skin="aqua"] .sheet { border-radius: 26px 26px 0 0; background: linear-gradient(180deg, rgba(150,225,255,.55), rgba(20,90,170,.62)); }
html[data-skin="aqua"] .sheet button.opt:hover, html[data-skin="aqua"] .ctx-menu button:hover { background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.12)); border-radius: 12px; }
html[data-skin="aqua"] .ctx-menu { border-radius: 18px; background: linear-gradient(180deg, rgba(150,225,255,.62), rgba(20,90,170,.7)); }
html[data-skin="aqua"] .toast { background: var(--glass), rgba(20,100,180,.65); color: #fff; border: 1px solid var(--glass-edge); border-radius: 18px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--glass-shadow); }
html[data-skin="aqua"] .toast button { color: #b8f6ff; }
html[data-skin="aqua"] .cf-stage { background: transparent; border-radius: 26px; }
html[data-skin="aqua"] .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 0 12px rgba(120,230,255,.7); }
html[data-skin="aqua"] .side-link.active, html[data-skin="aqua"] .side-link:hover { color: #fff; text-shadow: 0 0 10px rgba(130,235,255,1); }
html[data-skin="aqua"] ::-webkit-scrollbar { width: 10px; }
html[data-skin="aqua"] ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, rgba(255,255,255,.7), rgba(160,230,255,.5)); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }

/* =========================================================================
   PS3: the XMB. Light, glowing white type floating over the wave; almost
   no boxes; focused things get bigger and glow; dark option panels.
   ========================================================================= */
html[data-skin="ps3"] {
  --font: "SST", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --glow: 0 0 10px rgba(255,255,255,.55), 0 0 2px rgba(255,255,255,.9);
  --page-bg: transparent;
  background: #1c1030;
  color-scheme: dark;
}
html[data-skin="ps3"] body { font-weight: 300; }
html[data-skin="ps3"] #main, html[data-skin="ps3"] .side-nav, html[data-skin="ps3"] .side-lib, html[data-skin="ps3"] .side-bottom { background: transparent; }
html[data-skin="ps3"] .searchbox { background: transparent; }
html[data-skin="ps3"] .topbar h1 { font-weight: 300; font-size: 30px; letter-spacing: .01em; text-shadow: var(--glow); }
html[data-skin="ps3"] .hero h1 { font-weight: 300; text-shadow: var(--glow); }
html[data-skin="ps3"] .section-head h2 { font-weight: 400; font-size: 19px; text-shadow: var(--glow); }
html[data-skin="ps3"] .hero::before { background: none; }
/* XMB rows: plain glowing text; the focused row gets the translucent card like the friends list */
html[data-skin="ps3"] .item, html[data-skin="ps3"] .track { border-radius: 8px; border: 1px solid transparent; transition: background .2s, transform .2s, border-color .2s; }
html[data-skin="ps3"] .item:hover, html[data-skin="ps3"] .track:hover, html[data-skin="ps3"] .side-lib .item:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08)); border-color: rgba(255,255,255,.35); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
html[data-skin="ps3"] .item-title, html[data-skin="ps3"] .track-title, html[data-skin="ps3"] .card-title { font-weight: 400; }
html[data-skin="ps3"] .item:hover .item-title, html[data-skin="ps3"] .track:hover .track-title { text-shadow: var(--glow); }
html[data-skin="ps3"] .track.playing .track-title { color: #fff; text-shadow: 0 0 12px #fff, 0 0 2px #fff; }
html[data-skin="ps3"] .item .cover, html[data-skin="ps3"] .track .cover, html[data-skin="ps3"] .card .cover, html[data-skin="ps3"] .tile .cover, html[data-skin="ps3"] .hero-art {
  border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 8px 18px rgba(0,0,0,.35); }
html[data-skin="ps3"] .card { transition: transform .25s; }
html[data-skin="ps3"] .card:hover { transform: scale(1.06); }
html[data-skin="ps3"] .card:hover .card-title { text-shadow: var(--glow); }
html[data-skin="ps3"] .card.round .cover { border-radius: 50%; }
html[data-skin="ps3"] .tile { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; }
html[data-skin="ps3"] .tile:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }
/* side menu: XMB category icons, the focused one larger and glowing */
html[data-skin="ps3"] .side-link { font-weight: 300; font-size: 16px; color: rgba(255,255,255,.62); transition: transform .2s, color .2s; }
html[data-skin="ps3"] .side-link svg { transition: transform .2s, filter .2s; }
html[data-skin="ps3"] .side-link.active, html[data-skin="ps3"] .side-link:hover { color: #fff; text-shadow: var(--glow); }
html[data-skin="ps3"] .side-link.active svg { transform: scale(1.3); filter: drop-shadow(0 0 6px #fff); }
html[data-skin="ps3"] .side-lib h3 { color: rgba(255,255,255,.7); font-weight: 400; }
html[data-skin="ps3"] .tab.active svg { transform: scale(1.18); filter: drop-shadow(0 0 6px #fff); }
html[data-skin="ps3"] .tab.active { text-shadow: var(--glow); }
html[data-skin="ps3"] #tabs { background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0)); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* buttons: thin glowing outlines */
html[data-skin="ps3"] .btn, html[data-skin="ps3"] .chip.active { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.75); font-weight: 400;
  text-shadow: var(--glow); box-shadow: 0 0 14px rgba(255,255,255,.25), inset 0 1px 0 rgba(255,255,255,.4); }
html[data-skin="ps3"] .btn:hover { background: rgba(255,255,255,.26); box-shadow: 0 0 22px rgba(255,255,255,.45); }
html[data-skin="ps3"] .chip, html[data-skin="ps3"] .btn.ghost, html[data-skin="ps3"] .btn.secondary { background: transparent; border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.85); font-weight: 400; }
html[data-skin="ps3"] .btn.danger { background: rgba(255,80,80,.25); border-color: rgba(255,160,160,.8); }
html[data-skin="ps3"] .play-btn, html[data-skin="ps3"] .np-controls .big {
  background: radial-gradient(circle, rgba(255,255,255,.25), rgba(255,255,255,.05)); color: #fff; border: 1.5px solid #fff;
  box-shadow: 0 0 18px rgba(255,255,255,.55), inset 0 0 12px rgba(255,255,255,.35); }
html[data-skin="ps3"] .play-btn svg, html[data-skin="ps3"] .np-controls .big svg { filter: drop-shadow(0 0 4px #fff); }
html[data-skin="ps3"] .field, html[data-skin="ps3"] .searchbox label, html[data-skin="ps3"] .album-search {
  background: rgba(0,0,0,.28); color: #fff; border: 1px solid rgba(255,255,255,.45); border-radius: 6px; box-shadow: inset 0 0 12px rgba(0,0,0,.3); }
html[data-skin="ps3"] .searchbox input, html[data-skin="ps3"] .album-search input { color: #fff; font-weight: 300; }
html[data-skin="ps3"] .searchbox input::placeholder { color: rgba(255,255,255,.6); font-weight: 300; }
/* boxes: the faint translucent cards of the XMB */
html[data-skin="ps3"] .notice, html[data-skin="ps3"] .promo, html[data-skin="ps3"] .status-line, html[data-skin="ps3"] .theme-card, html[data-skin="ps3"] .remote-card,
html[data-skin="ps3"] .now-card, html[data-skin="ps3"] #preview-bar, html[data-skin="ps3"] #sel-bar {
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.3); border-radius: 10px; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
/* option menus slide in as the dark panel on the right, like the triangle menu */
html[data-skin="ps3"] .sheet, html[data-skin="ps3"] .ctx-menu { background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.82)); border: 0; border-left: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html[data-skin="ps3"] .sheet button.opt, html[data-skin="ps3"] .ctx-menu button { font-weight: 300; }
html[data-skin="ps3"] .sheet button.opt:hover, html[data-skin="ps3"] .ctx-menu button:hover { background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0)); text-shadow: var(--glow); }
@media (min-width: 900px) {
  html[data-skin="ps3"] .sheet { left: auto; right: 0; top: 0; bottom: 0; margin: 0; width: 380px; max-width: none; border-radius: 0; transform: translateX(100%); padding-top: 40px; }
  html[data-skin="ps3"] .sheet.open { transform: none; }
  html[data-skin="ps3"] .sheet.add-songs, html[data-skin="ps3"] .sheet.confirm-sheet { width: 520px; transform: translateX(100%); left: auto; }
  html[data-skin="ps3"] .sheet.add-songs.open, html[data-skin="ps3"] .sheet.confirm-sheet.open { transform: none; }
}
html[data-skin="ps3"] .np, html[data-skin="ps3"] .lyrics-view { background: rgba(10,0,25,.38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html[data-skin="ps3"] .np-title, html[data-skin="ps3"] .ly-line.on { font-weight: 400; text-shadow: var(--glow); }
html[data-skin="ps3"] .ly-line { font-weight: 300; }
html[data-skin="ps3"] .ly-top { background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,0)); }
html[data-skin="ps3"] .mini, html[data-skin="ps3"] .desk-player { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (min-width: 900px) { html[data-skin="ps3"] .desk-player { border-radius: 10px; border-width: 1px 0 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.4)); } }
html[data-skin="ps3"] input[type=range] { background: rgba(255,255,255,.25); height: 3px; }
html[data-skin="ps3"] input[type=range]::-webkit-slider-thumb { box-shadow: 0 0 10px #fff; }
html[data-skin="ps3"] .toast { background: rgba(0,0,0,.72); color: #fff; border: 1px solid rgba(255,255,255,.35); font-weight: 400; backdrop-filter: blur(8px); }
html[data-skin="ps3"] .toast button { color: #fff; text-shadow: var(--glow); }
html[data-skin="ps3"] .cf-stage { background: transparent; }
html[data-skin="ps3"] .switch.on { background: rgba(255,255,255,.5); box-shadow: 0 0 10px rgba(255,255,255,.6); }
html[data-skin="ps3"] .switch.on::after { background: #fff; }
html[data-skin="ps3"] #view > * { animation: ps3-in .35s ease-out; }
@keyframes ps3-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
/* the status box in the top right corner */
.ps3-status { display: none; }
html[data-skin="ps3"] .ps3-status { position: fixed; z-index: 40; top: calc(var(--safe-t) + 14px); right: 18px; display: flex; align-items: center; gap: 14px;
  padding: 6px 12px 6px 8px; border: 1px solid rgba(255,255,255,.55); border-radius: 4px; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  color: #fff; font: 300 15px var(--font); letter-spacing: .02em; text-shadow: var(--glow); pointer-events: none; }
html[data-skin="ps3"] .ps3-status .ps3-user img { width: 18px; height: 18px; border-radius: 3px; object-fit: cover; }
html[data-skin="ps3"] .ps3-clock-ico { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; position: relative; box-shadow: 0 0 6px rgba(255,255,255,.8); }
html[data-skin="ps3"] .ps3-clock-ico::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 2px; height: 5px; background: #fff; box-shadow: 2px 3px 0 -0.5px #fff; }
@media (max-width: 899px) { html[data-skin="ps3"] .ps3-status { display: none; } }
@media (min-width: 900px) { html[data-skin="ps3"] #main .topbar { padding-right: 230px; } }

/* =========================================================================
   WII: the Wii Menu. White and light grey, pin-striped background, rounded
   "channel" boxes with grey rims that glow Wii-blue when pointed at, round
   glossy buttons, a curved bottom bar, the pointing-hand cursor.
   ========================================================================= */
html[data-skin="wii"] {
  --font: "Crate Rounded", "M PLUS Rounded 1c", "Arial Rounded MT Bold", "Helvetica Neue", Arial, sans-serif;
  --wii-blue: #34beed;
  --wii-rim: #c4c4c4;
  --page-bg: transparent;
  background: #f2f2f2;
  color-scheme: light;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='40' viewBox='0 0 34 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.7' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23ffd7dc'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11 2.5c1.7 0 3 1.3 3 3V17l1.2-.3c1.4-.4 2.8.4 3.2 1.8l.1.4 1.2-.3c1.4-.3 2.8.5 3.1 1.9l.1.4 1-.2c1.4-.3 2.8.6 3 2l1 6.6c.6 4-1.4 7.8-5 9.4l-.5.2H14.2c-2 0-3.8-1-4.9-2.7L3.6 27.6c-.8-1.2-.5-2.8.7-3.6 1.1-.8 2.6-.6 3.5.4L8 25.5V5.5c0-1.7 1.3-3 3-3z' fill='url(%23g)' stroke='%23222' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ctext x='19' y='34' font-family='Arial Rounded MT Bold,Arial' font-weight='bold' font-size='11' fill='%2334beed' text-anchor='middle'%3E1%3C/text%3E%3C/svg%3E") 11 2, auto;
}
html[data-skin="wii"] a, html[data-skin="wii"] button, html[data-skin="wii"] [data-action], html[data-skin="wii"] .track, html[data-skin="wii"] .card {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='40' viewBox='0 0 34 40'%3E%3Cpath d='M11 2.5c1.7 0 3 1.3 3 3V17l1.2-.3c1.4-.4 2.8.4 3.2 1.8l.1.4 1.2-.3c1.4-.3 2.8.5 3.1 1.9l.1.4 1-.2c1.4-.3 2.8.6 3 2l1 6.6c.6 4-1.4 7.8-5 9.4l-.5.2H14.2c-2 0-3.8-1-4.9-2.7L3.6 27.6c-.8-1.2-.5-2.8.7-3.6 1.1-.8 2.6-.6 3.5.4L8 25.5V5.5c0-1.7 1.3-3 3-3z' fill='%23e3f8ff' stroke='%2334beed' stroke-width='2' stroke-linejoin='round'/%3E%3Ctext x='19' y='34' font-family='Arial Rounded MT Bold,Arial' font-weight='bold' font-size='11' fill='%2334beed' text-anchor='middle'%3E1%3C/text%3E%3C/svg%3E") 11 2, pointer; }
html[data-skin="wii"] body { background: repeating-linear-gradient(180deg, #ffffff 0 3px, #f0f0f0 3px 6px) fixed; color: #3c3c3c; }
html[data-skin="wii"] #app::before { content: ""; position: fixed; inset: auto 0 0; height: 46vh; z-index: -1; pointer-events: none; opacity: .55;
  background: conic-gradient(from 45deg at 50% 50%, #e2e2e2 0 25%, transparent 0 50%, #e2e2e2 0 75%, transparent 0) 0 0 / 70px 70px;
  transform: perspective(500px) rotateX(58deg); transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 10%, transparent 85%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); }
@media (min-width: 900px) {
  html[data-skin="wii"] #main { background: transparent; }
  html[data-skin="wii"] .side-nav, html[data-skin="wii"] .side-lib, html[data-skin="wii"] .side-bottom { background: #fff; border: 3px solid #d6d6d6; border-radius: 22px;
    box-shadow: inset 0 -3px 0 #ececec, 0 4px 10px rgba(0,0,0,.05); }
}
html[data-skin="wii"] .searchbox { background: transparent; }
html[data-skin="wii"] .topbar h1, html[data-skin="wii"] .hero h1, html[data-skin="wii"] .section-head h2 { color: #6a6a6a; font-weight: 800; letter-spacing: 0; }
html[data-skin="wii"] .hero::before { background: linear-gradient(180deg, rgba(52,190,237,.14), rgba(255,255,255,0) 70%); }
/* channels: rounded boxes with a thick grey rim; pointing at one makes it glow blue */
html[data-skin="wii"] .tile, html[data-skin="wii"] .card .cover, html[data-skin="wii"] .theme-card, html[data-skin="wii"] .notice, html[data-skin="wii"] .promo,
html[data-skin="wii"] .status-line, html[data-skin="wii"] .remote-card, html[data-skin="wii"] .now-card {
  background: linear-gradient(180deg, #ffffff, #f6f6f6); border: 3px solid var(--wii-rim); border-radius: 18px; box-shadow: inset 0 0 0 2px #fff, 0 2px 0 #dcdcdc; color: #3c3c3c; }
html[data-skin="wii"] .card .cover { border-radius: 18px; }
html[data-skin="wii"] .card.round .cover { border-radius: 50%; }
html[data-skin="wii"] .tile:hover, html[data-skin="wii"] .card:hover .cover, html[data-skin="wii"] .theme-card:hover {
  border-color: var(--wii-blue); box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px rgba(52,190,237,.3), 0 0 18px rgba(52,190,237,.55); }
html[data-skin="wii"] .card { transition: transform .15s; }
html[data-skin="wii"] .card:hover { transform: scale(1.04); }
html[data-skin="wii"] .quick { gap: 12px; }
html[data-skin="wii"] .tile { border-radius: 18px; height: 72px; }
html[data-skin="wii"] .tile .cover { border-radius: 12px; margin: 6px; width: 54px; height: 54px; }
html[data-skin="wii"] .item .cover, html[data-skin="wii"] .track .cover { border-radius: 10px; box-shadow: 0 0 0 2px #d6d6d6; }
html[data-skin="wii"] .item, html[data-skin="wii"] .track { border-radius: 16px; border: 2px solid transparent; }
html[data-skin="wii"] .item:hover, html[data-skin="wii"] .track:hover, html[data-skin="wii"] .side-lib .item:hover { background: #fff; border-color: var(--wii-blue); box-shadow: 0 0 12px rgba(52,190,237,.35); }
html[data-skin="wii"] .track.playing .track-title { color: var(--wii-blue); }
html[data-skin="wii"] .track[data-status="none"] .track-title, html[data-skin="wii"] .track[data-status="failed"] .track-title { color: #9a9a9a; }
html[data-skin="wii"] .item-title, html[data-skin="wii"] .track-title, html[data-skin="wii"] .card-title { font-weight: 700; }
html[data-skin="wii"] .side-link { color: #8a8a8a; font-weight: 700; }
html[data-skin="wii"] .side-link.active, html[data-skin="wii"] .side-link:hover { color: var(--wii-blue); }
/* buttons: white, rounded, grey rim; blue glow on point */
html[data-skin="wii"] .btn, html[data-skin="wii"] .chip, html[data-skin="wii"] .btn.ghost, html[data-skin="wii"] .btn.secondary {
  background: linear-gradient(180deg, #ffffff, #ececec); color: #555; border: 2px solid #c8c8c8; font-weight: 700; box-shadow: 0 2px 0 #d2d2d2, inset 0 1px 0 #fff; }
html[data-skin="wii"] .btn:hover, html[data-skin="wii"] .chip:hover { border-color: var(--wii-blue); color: #1d9fd0; box-shadow: 0 0 0 3px rgba(52,190,237,.25), 0 0 14px rgba(52,190,237,.5); }
html[data-skin="wii"] .chip.active { background: linear-gradient(180deg, #e9f9ff, #c9efff); border-color: var(--wii-blue); color: #1d9fd0; }
html[data-skin="wii"] .btn.danger { color: #d33; }
html[data-skin="wii"] .play-btn, html[data-skin="wii"] .np-controls .big, html[data-skin="wii"] .desk-ctl [data-action="p-toggle"] {
  background: radial-gradient(circle at 50% 30%, #ffffff 0 45%, #e8e8e8 100%); color: #8a8a8a; border: 3px solid var(--wii-blue);
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px #d8d8d8, 0 4px 10px rgba(0,0,0,.12); }
html[data-skin="wii"] .desk-ctl [data-action="p-toggle"] { width: 48px; height: 48px; border-radius: 50%; }
html[data-skin="wii"] .play-btn:hover, html[data-skin="wii"] .np-controls .big:hover { color: var(--wii-blue); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--wii-blue), 0 0 16px rgba(52,190,237,.6); }
html[data-skin="wii"] .icon-btn { color: #8a8a8a; }
html[data-skin="wii"] .icon-btn:hover, html[data-skin="wii"] .icon-btn.on, html[data-skin="wii"] .ctl.on { color: var(--wii-blue); }
html[data-skin="wii"] .field, html[data-skin="wii"] .searchbox label, html[data-skin="wii"] .album-search { background: #fff; color: #444; border: 2px solid #cfcfcf; border-radius: 14px; }
html[data-skin="wii"] .searchbox input, html[data-skin="wii"] .album-search input { color: #444; }
html[data-skin="wii"] .switch.on { background: var(--wii-blue); }
/* the Wii Menu bottom bar: light grey, curving down in the middle, with a blue rim */
html[data-skin="wii"] #tabs { background: linear-gradient(180deg, #f7f7f7, #dedede); border-top: 3px solid var(--wii-blue); border-radius: 28px 28px 0 0; box-shadow: 0 -4px 14px rgba(0,0,0,.08);
  backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-skin="wii"] .tab { color: #9a9a9a; font-weight: 700; }
html[data-skin="wii"] .tab.active { color: var(--wii-blue); }
html[data-skin="wii"] .mini { background: #fff; border: 3px solid #d0d0d0; border-radius: 22px; color: #444; box-shadow: 0 4px 12px rgba(0,0,0,.1); padding-left: 11px; }
html[data-skin="wii"] .mini .cover { border-radius: 10px; }
html[data-skin="wii"] .mini-sub { color: #888; }
html[data-skin="wii"] .mini-progress { background: #e2e2e2; }
html[data-skin="wii"] .mini-progress i { background: var(--wii-blue); }
@media (min-width: 900px) {
  html[data-skin="wii"] .desk-player { position: relative; height: 104px; padding-top: 22px; background: transparent; color: #555; }
  html[data-skin="wii"] .desk-player::before { content: ""; position: absolute; inset: 0 -8px -8px; z-index: -1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f5f5f5'/%3E%3Cstop offset='1' stop-color='%23d9d9d9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 6 H330 C365 6 372 15 410 15 H590 C628 15 635 6 670 6 H1000 V100 H0Z' fill='url(%23b)'/%3E%3Cpath d='M0 6 H330 C365 6 372 15 410 15 H590 C628 15 635 6 670 6 H1000' fill='none' stroke='%2334beed' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    filter: drop-shadow(0 -3px 8px rgba(0,0,0,.08)); }
  html[data-skin="wii"] .desk-player .mini-sub { color: #8a8a8a; }
  html[data-skin="wii"] .desk-now .cover { border-radius: 14px; width: 58px; height: 58px; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #cfcfcf; }
}
html[data-skin="wii"] input[type=range] { background: #d8d8d8; height: 6px; }
html[data-skin="wii"] input[type=range]::-webkit-slider-thumb { width: 18px; height: 18px; background: #fff; border: 3px solid var(--wii-blue); }
/* menus and Now Playing: white rounded panels */
html[data-skin="wii"] .sheet, html[data-skin="wii"] .ctx-menu { background: #fff; color: #444; border: 3px solid #d0d0d0; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
html[data-skin="wii"] .sheet { border-radius: 28px 28px 0 0; border-bottom: 0; }
html[data-skin="wii"] .sheet button.opt:hover, html[data-skin="wii"] .ctx-menu button:hover { background: #e9f9ff; color: #1d9fd0; border-radius: 14px; }
html[data-skin="wii"] .sheet-head { border-color: #e2e2e2; }
html[data-skin="wii"] .np { background: repeating-linear-gradient(180deg, #ffffff 0 3px, #f0f0f0 3px 6px); color: #444; }
html[data-skin="wii"] .np .icon-btn, html[data-skin="wii"] .np .ctl, html[data-skin="wii"] .np-context, html[data-skin="wii"] .np-artist, html[data-skin="wii"] .times { color: #7a7a7a; }
html[data-skin="wii"] .np-art .cover { border-radius: 28px; border: 4px solid #d0d0d0; box-shadow: inset 0 0 0 3px #fff, 0 8px 20px rgba(0,0,0,.12); }
html[data-skin="wii"] .lyrics-view { background: #fff; color: #444; }
html[data-skin="wii"] .ly-line { color: #c3c3c3; }
html[data-skin="wii"] .ly-line.past { color: #9a9a9a; }
html[data-skin="wii"] .ly-line.on { color: var(--wii-blue); }
html[data-skin="wii"] .ly-top { background: linear-gradient(180deg, #fff 70%, rgba(255,255,255,0)); color: #555; }
html[data-skin="wii"] .ly-title span, html[data-skin="wii"] .ly-foot { color: #888; }
html[data-skin="wii"] .toast { background: #fff; color: #444; border: 3px solid var(--wii-blue); border-radius: 18px; }
html[data-skin="wii"] .toast button { color: #1d9fd0; }
html[data-skin="wii"] .cf-stage { background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, #e4e4e4 75%); border-radius: 22px; }
html[data-skin="wii"] .cf-fade-l { background: linear-gradient(to right, #e4e4e4, rgba(228,228,228,0)); }
html[data-skin="wii"] .cf-fade-r { background: linear-gradient(to left, #e4e4e4, rgba(228,228,228,0)); }
html[data-skin="wii"] .cf-caption h2 { color: #555; }
html[data-skin="wii"] #preview-bar, html[data-skin="wii"] #sel-bar { background: #fff; border: 3px solid var(--wii-blue); color: #444; }
html[data-skin="wii"] .avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #d0d0d0; }
html[data-skin="wii"] #view > * { animation: wii-zoom .28s cubic-bezier(.2,.8,.25,1); }
@keyframes wii-zoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
html[data-skin="wii"] .badge-e { background: #9a9a9a; color: #fff; }

/* =========================================================================
   Y2K CHROME: liquid chrome and thorns on black. skin-fx.js draws the metal
   in front of the app (frames that swell and pinch round every panel,
   tribal thorns on the corners, stars, crawling mercury beads) and dim
   flowing chrome silk behind it. Here: dark glass panels whose edges hide
   under the metal, and controls shaped like drops of liquid chrome.
   Nothing is a plain circle or a plain box.
   ========================================================================= */
html[data-skin="chrome"] {
  --font: "Crate Rounded", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --metal: linear-gradient(180deg, #ffffff 0%, #eef1f4 18%, #c3cad3 46%, #9aa3ae 54%, #d9dee4 76%, #ffffff 100%);
  --rim: linear-gradient(160deg, #ffffff, #7c8592 34%, #f5f7f9 56%, #59616d 78%, #dfe3e8);
  --pane: rgba(7, 8, 12, .72);
  --drop: 26px 34px 24px 36px / 32px 24px 34px 26px;
  --drop2: 34px 24px 36px 26px / 24px 34px 26px 32px;
  --page-bg: transparent;
  background: #030305;
  color-scheme: dark;
}
#chrome-over { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 32; pointer-events: none; transition: opacity .2s; }
html[data-skin="chrome"] body { color: #eef1f5; }
html[data-skin="chrome"] .page, html[data-skin="chrome"] .hero, html[data-skin="chrome"] .tracks { text-shadow: 0 1px 3px rgba(0,0,0,.9); }

/* panels: dark glass; their straight edges sit under the liquid frames */
html[data-skin="chrome"] #main, html[data-skin="chrome"] .side-nav, html[data-skin="chrome"] .side-lib, html[data-skin="chrome"] .side-bottom,
html[data-skin="chrome"] .desk-player { background: var(--pane); box-shadow: none; border: 0; }
@media (min-width: 900px) {
  html[data-skin="chrome"] #app { gap: 28px; padding: 56px 64px; }
  html[data-skin="chrome"] #sidebar { gap: 28px; }
  html[data-skin="chrome"] .side-link { padding: 8px 14px; }
  html[data-skin="chrome"] #main { border-radius: 32px; }
  html[data-skin="chrome"] .side-nav, html[data-skin="chrome"] .side-lib, html[data-skin="chrome"] .side-bottom { border-radius: 28px; }
  html[data-skin="chrome"] .side-nav, html[data-skin="chrome"] .side-lib { padding: 10px 10px; }
  html[data-skin="chrome"] .side-bottom { padding: 6px 10px; }
  html[data-skin="chrome"] .page, html[data-skin="chrome"] .hero { padding-left: 30px; padding-right: 30px; }
  html[data-skin="chrome"] .desk-player { border-radius: 40px; height: 88px; padding: 0 30px 0 22px; }
  html[data-skin="chrome"] .desk-now .cover { width: 58px; height: 58px; border-radius: 14px 18px 14px 20px; box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 6px 14px rgba(0,0,0,.7); }
  html[data-skin="chrome"] .searchbox { background: transparent; }
}
/* phones: the bars stay nearly solid so the page doesn't show through them */
html[data-skin="chrome"] .mini { background: #0b0c10; border-radius: 26px 32px 26px 32px / 30px 26px 30px 26px; padding-left: 13px; padding-right: 10px; box-shadow: none; }
html[data-skin="chrome"] .mini .cover { border-radius: 10px 13px 10px 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
html[data-skin="chrome"] #tabs { background: linear-gradient(180deg, #0a0b0f, #040407); backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 899px) {
  html[data-skin="chrome"] .mini { left: 14px; right: 14px; }
  html[data-skin="chrome"] .page { padding-left: 20px; padding-right: 20px; }
}
html[data-skin="chrome"] .hero::before { background: radial-gradient(80% 90% at 30% 0%, rgba(255,255,255,.06), rgba(0,0,0,0) 70%); }

/* type: big titles in soft liquid silver (no dark band through the middle), everything else clean white */
html[data-skin="chrome"] .topbar h1, html[data-skin="chrome"] .hero h1, html[data-skin="chrome"] .section-head h2, html[data-skin="chrome"] .cf-caption h2 {
  background: linear-gradient(180deg, #ffffff 10%, #e3e8ee 45%, #b7c0cb 62%, #f4f6f9 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.95)) drop-shadow(0 0 12px rgba(200,215,255,.18)); }
html[data-skin="chrome"] .topbar h1 { font-size: 31px; font-weight: 800; letter-spacing: -.01em; }
html[data-skin="chrome"] .hero h1 { font-weight: 800; }
html[data-skin="chrome"] .section-head h2 { font-size: 20px; font-weight: 800; }
html[data-skin="chrome"] .item-sub, html[data-skin="chrome"] .track-sub, html[data-skin="chrome"] .card-sub { color: #b4bcc6; }
html[data-skin="chrome"] .avatar { box-shadow: 0 0 0 2px #0a0b0f, 0 0 0 3.5px #c9d0d8; }

/* cards and tiles: dark glass set in a polished silver rim, each one a slightly different drop shape;
   album art stays square-ish */
html[data-skin="chrome"] .tile, html[data-skin="chrome"] .card, html[data-skin="chrome"] .notice, html[data-skin="chrome"] .promo, html[data-skin="chrome"] .status-line,
html[data-skin="chrome"] .theme-card, html[data-skin="chrome"] .remote-card, html[data-skin="chrome"] .now-card, html[data-skin="chrome"] #preview-bar, html[data-skin="chrome"] #sel-bar {
  background: linear-gradient(170deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 40%, rgba(255,255,255,.05)) padding-box, linear-gradient(rgba(8,9,13,.8), rgba(8,9,13,.8)) padding-box, var(--rim) border-box;
  border: 2.5px solid transparent; color: #eef1f5;
  border-radius: var(--drop); box-shadow: 0 0 0 1px rgba(0,0,0,.85), inset 0 0 0 1px rgba(0,0,0,.7), 0 8px 18px rgba(0,0,0,.5); }
html[data-skin="chrome"] .card:nth-child(3n+2), html[data-skin="chrome"] .tile:nth-child(3n+2) { border-radius: var(--drop2); }
html[data-skin="chrome"] .card:nth-child(3n), html[data-skin="chrome"] .tile:nth-child(3n) { border-radius: 30px 26px 38px 22px / 28px 34px 22px 30px; }
html[data-skin="chrome"] .tile { height: 66px; padding-right: 12px; }
html[data-skin="chrome"] .tile .cover { width: 48px; height: 48px; margin: 7px 8px 7px 10px; border-radius: 12px 15px 12px 16px; box-shadow: 0 0 0 1.5px #c9d0d8, 0 0 0 2.5px #000; }
html[data-skin="chrome"] .card { width: 160px; padding: 9px 9px 12px; transition: transform .25s cubic-bezier(.3,1.6,.5,1), box-shadow .25s; }
html[data-skin="chrome"] .card .cover { width: 100%; height: auto; aspect-ratio: 1; border-radius: 14px 18px 14px 20px; box-shadow: 0 0 0 1.5px #c9d0d8, 0 0 0 2.5px #000, 0 6px 14px rgba(0,0,0,.6); }
html[data-skin="chrome"] .card.round .cover { border-radius: 48% 52% 46% 54% / 53% 47% 55% 45%; }
html[data-skin="chrome"] .card-title, html[data-skin="chrome"] .card-sub { padding: 0 4px; }
html[data-skin="chrome"] .grid .card { width: auto; }
html[data-skin="chrome"] .card:hover, html[data-skin="chrome"] .tile:hover { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(0,0,0,.7), 0 0 24px rgba(220,230,255,.32), 0 12px 24px rgba(0,0,0,.55); filter: brightness(1.06); }
html[data-skin="chrome"] .card:hover { transform: translateY(-4px) rotate(-.6deg); }
@media (min-width: 900px) { html[data-skin="chrome"] .card { width: 180px; } }
html[data-skin="chrome"] .promo { position: relative; padding-right: 54px; }
html[data-skin="chrome"] .promo .disc { background: var(--metal); border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%; box-shadow: inset 0 -2px 4px rgba(0,0,0,.4), 0 0 0 1px #000; }

/* rows */
html[data-skin="chrome"] .item, html[data-skin="chrome"] .track { border-radius: 18px 24px 18px 26px / 22px 18px 24px 18px; }
html[data-skin="chrome"] .item:hover, html[data-skin="chrome"] .track:hover, html[data-skin="chrome"] .side-lib .item:hover {
  background: linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)) padding-box, linear-gradient(#0b0c11, #0b0c11) padding-box, var(--rim) border-box; box-shadow: 0 0 0 1px #000; }
html[data-skin="chrome"] .item, html[data-skin="chrome"] .track { border: 2px solid transparent; }
html[data-skin="chrome"] .item .cover, html[data-skin="chrome"] .track .cover { border-radius: 10px 13px 10px 14px; box-shadow: 0 0 0 1.5px #c9d0d8, 0 0 0 2.5px #000, 0 3px 8px rgba(0,0,0,.6); }
html[data-skin="chrome"] .track.playing .track-title { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 6px rgba(255,255,255,.45)); }
html[data-skin="chrome"] .side-link { color: #c3c9d1; font-weight: 700; border-radius: var(--drop); }
html[data-skin="chrome"] .side-link.active { color: #08090c; background: var(--metal); text-shadow: 0 1px 0 rgba(255,255,255,.6);
  box-shadow: inset 0 -2px 4px rgba(30,40,60,.45), inset 0 1px 0 #fff, 0 0 0 1px #000, 0 6px 16px rgba(0,0,0,.6); }
html[data-skin="chrome"] .side-link:hover { color: #fff; }

/* buttons: drops of chrome. Play buttons slowly wobble like a bead of mercury */
html[data-skin="chrome"] .btn, html[data-skin="chrome"] .chip.active, html[data-skin="chrome"] .switch.on {
  background: var(--metal); color: #07080b; border: 0; border-radius: var(--drop); text-shadow: 0 1px 0 rgba(255,255,255,.65);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 5px rgba(30,40,60,.5), 0 0 0 1px rgba(0,0,0,.75), 0 6px 14px rgba(0,0,0,.55); }
html[data-skin="chrome"] .btn:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 5px rgba(30,40,60,.5), 0 0 0 1px #000, 0 0 22px rgba(220,230,255,.35); }
html[data-skin="chrome"] .chip, html[data-skin="chrome"] .btn.ghost, html[data-skin="chrome"] .btn.secondary {
  background: linear-gradient(rgba(12,13,18,.92), rgba(12,13,18,.92)) padding-box, var(--rim) border-box; border: 2.5px solid transparent; color: #eef1f5;
  text-shadow: none; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.5); border-radius: var(--drop2); }
html[data-skin="chrome"] .btn.danger { background: linear-gradient(180deg, #ffd9de, #e5737f 48%, #a8202f 54%, #f29aa5); color: #2a0007; }
html[data-skin="chrome"] .play-btn, html[data-skin="chrome"] .np-controls .big, html[data-skin="chrome"] .desk-ctl [data-action="p-toggle"] {
  background: radial-gradient(120% 95% at 32% 22%, #ffffff 0 7%, #e9edf1 20%, #a5aeb9 46%, #4b525d 66%, #c9d0d8 90%); color: #07080b; border: 0;
  border-radius: 56% 44% 52% 48% / 47% 55% 45% 53%; animation: ch-drop 7s ease-in-out infinite;
  box-shadow: inset 0 -4px 7px rgba(0,0,0,.35), inset 0 2px 2px rgba(255,255,255,.85), 0 0 0 1px rgba(0,0,0,.8), 0 8px 22px rgba(0,0,0,.6); }
html[data-skin="chrome"] .desk-ctl [data-action="p-toggle"] { width: 50px; height: 50px; }
@keyframes ch-drop {
  0%, 100% { border-radius: 56% 44% 52% 48% / 47% 55% 45% 53%; }
  33% { border-radius: 44% 56% 47% 53% / 56% 45% 55% 44%; }
  66% { border-radius: 52% 48% 58% 42% / 44% 52% 48% 56%; }
}
html[data-skin="chrome"] .icon-btn { color: #d3d9e0; }
html[data-skin="chrome"] .icon-btn:hover { color: #fff; filter: drop-shadow(0 0 5px rgba(220,230,255,.8)); }
html[data-skin="chrome"] .field, html[data-skin="chrome"] .searchbox label, html[data-skin="chrome"] .album-search {
  background: linear-gradient(rgba(6,7,10,.92), rgba(6,7,10,.92)) padding-box, var(--rim) border-box; border: 2.5px solid transparent;
  border-radius: 24px 34px 26px 36px / 30px 26px 34px 24px; color: #eef1f5; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(0,0,0,.7), 0 4px 14px rgba(0,0,0,.5); }
html[data-skin="chrome"] .searchbox input, html[data-skin="chrome"] .album-search input { color: #eef1f5; }
html[data-skin="chrome"] .searchbox input::placeholder, html[data-skin="chrome"] .album-search input::placeholder { color: #87909b; }
/* sliders: a thin chrome tube with a bead of mercury on it */
html[data-skin="chrome"] input[type=range] { background: linear-gradient(180deg, #f5f7fa, #7d8794 55%, #dfe3e8); height: 4px; border-radius: 3px; box-shadow: 0 0 0 1px #000; }
html[data-skin="chrome"] input[type=range]::-webkit-slider-thumb { width: 18px; height: 16px; border-radius: 56% 44% 52% 48% / 47% 55% 45% 53%;
  background: radial-gradient(120% 95% at 32% 24%, #fff 0 12%, #c8cfd8 40%, #59616c 70%, #d6dce3); box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,.7); }
html[data-skin="chrome"] input[type=range]::-moz-range-thumb { width: 18px; height: 16px; border: 0; border-radius: 56% 44% 52% 48% / 47% 55% 45% 53%;
  background: radial-gradient(120% 95% at 32% 24%, #fff 0 12%, #c8cfd8 40%, #59616c 70%, #d6dce3); }
html[data-skin="chrome"] .mini-progress { left: 18px; right: 18px; }
html[data-skin="chrome"] .mini-progress i { background: var(--metal); }
html[data-skin="chrome"] .switch { border-radius: 20px 26px 20px 26px / 24px 20px 24px 20px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
html[data-skin="chrome"] .tab { color: #9aa3ae; }
html[data-skin="chrome"] .tab.active { color: #fff; }
html[data-skin="chrome"] .tab.active svg { filter: drop-shadow(0 0 5px #fff); }
html[data-skin="chrome"] .colour-dot i { border-radius: 52% 48% 56% 44% / 46% 54% 46% 54%; }

/* Now Playing: deep black so the thorns round the art stand out */
html[data-skin="chrome"] .np { background: radial-gradient(110% 70% at 50% 32%, #1a1e29, #030305 70%); }
html[data-skin="chrome"] .lyrics-view { background: rgba(3,3,5,.9); }
html[data-skin="chrome"] .np-art .cover { border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 24px 60px rgba(0,0,0,.9); }
html[data-skin="chrome"] .np-art { padding: 34px 0; }
html[data-skin="chrome"] .lyrics-view { background: radial-gradient(120% 80% at 50% 0%, rgba(26,30,42,.94), rgba(3,3,5,.97) 70%); }
html[data-skin="chrome"] .ly-top { background: linear-gradient(180deg, rgba(5,6,9,.97) 60%, rgba(5,6,9,0)); }
html[data-skin="chrome"] .ly-title b { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 #000); }
html[data-skin="chrome"] .ly-line { color: rgba(220,228,240,.3); font-weight: 800; }
html[data-skin="chrome"] .ly-line.past { color: rgba(220,228,240,.5); }
html[data-skin="chrome"] .ly-line:hover { color: rgba(235,240,248,.75); }
html[data-skin="chrome"] .ly-line.on { background: linear-gradient(180deg, #ffffff 15%, #e3e8ee 50%, #b9c2cd 68%, #f6f8fa 90%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.95)) drop-shadow(0 0 14px rgba(210,225,255,.35)); }
html[data-skin="chrome"] .ly-plain { color: #e6ebf2; }
html[data-skin="chrome"] .sheet, html[data-skin="chrome"] .ctx-menu, html[data-skin="chrome"] .toast {
  background: linear-gradient(rgba(9,10,14,.97), rgba(9,10,14,.97)) padding-box, var(--rim) border-box; border: 1.5px solid transparent; color: #eef1f5;
  box-shadow: 0 20px 50px rgba(0,0,0,.85); }
html[data-skin="chrome"] .sheet { border-radius: 40px 52px 0 0 / 34px 44px 0 0; border-bottom: 0; }
html[data-skin="chrome"] .ctx-menu { border-radius: 24px 30px 22px 32px / 28px 22px 30px 24px; }
html[data-skin="chrome"] .toast { border-radius: var(--drop); }
html[data-skin="chrome"] .sheet button.opt:hover, html[data-skin="chrome"] .ctx-menu button:hover { background: rgba(255,255,255,.08); border-radius: 16px 22px 16px 24px; }
html[data-skin="chrome"] .toast button { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-skin="chrome"] .cf-stage { background: transparent; }
html[data-skin="chrome"] .live-tag { background: var(--metal); color: #111; }
html[data-skin="chrome"] ::-webkit-scrollbar { width: 9px; }
html[data-skin="chrome"] ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #f2f4f7, #7b8491 55%, #cfd5dc); border-radius: 9px 6px 9px 6px; }
#skin-decor.fx-chrome.fx-fallback { background: radial-gradient(90% 70% at 30% 20%, #1b1f2a, #030305 70%); }
@media (prefers-reduced-motion: reduce) { html[data-skin="chrome"] * { animation: none !important; } }

@media (prefers-reduced-motion: reduce) {
  html[data-skin="ps3"] #view > *, html[data-skin="wii"] #view > * { animation: none; }
}

/* =========================================================================
   Shared by the four themes below: a moving background from skin-fx.js
   behind a see-through app, and a cover wheel that fades into it.
   ========================================================================= */
@font-face { font-family: "Crate Party"; src: url("skins/fonts/Bungee-400.woff2") format("woff2"); font-display: swap; }
#skin-decor.fx-party, #skin-decor.fx-glass { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
:is(html[data-skin="party"], html[data-skin="glass"]) { --page-bg: transparent; }
:is(html[data-skin="party"], html[data-skin="glass"]) body { background: transparent; }
:is(html[data-skin="party"], html[data-skin="glass"]) #app { position: relative; z-index: 1; }
:is(html[data-skin="party"], html[data-skin="glass"]) .cf-stage { background: transparent;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%); }
:is(html[data-skin="party"], html[data-skin="glass"]) .cf-fade { display: none; }
:is(html[data-skin="party"], html[data-skin="glass"]) .searchbox { background: transparent; }
@media (min-width: 900px) {
  :is(html[data-skin="party"], html[data-skin="glass"]) #app { gap: 14px; padding: 14px; }
  :is(html[data-skin="party"], html[data-skin="glass"]) #sidebar { gap: 14px; }
  :is(html[data-skin="party"], html[data-skin="glass"]) .desk-player { height: 80px; padding: 0 22px 0 14px; }
}
:is(html[data-skin="party"], html[data-skin="glass"]) .mini { padding-left: 12px; }
:is(html[data-skin="party"], html[data-skin="glass"]) .mini .cover { border-radius: 9px; }

/* =========================================================================
   PARTY: dark club glass over the bouncing bars; the player pulses with
   the beat (skin-fx.js sets --beat on #player), neon gradients everywhere.
   ========================================================================= */
html[data-skin="party"] {
  --font: "Crate Rounded", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --mix: linear-gradient(90deg, #ff3fd8, #ff7a3f 35%, #ffe14f 55%, #3ff4ff 80%, #b84bff);
  background: #07030f;
  color-scheme: dark;
}
html[data-skin="party"] body { color: #fff; }
html[data-skin="party"] .side-nav, html[data-skin="party"] .side-lib, html[data-skin="party"] .side-bottom, html[data-skin="party"] .desk-player, html[data-skin="party"] .mini,
html[data-skin="party"] .sheet, html[data-skin="party"] .ctx-menu, html[data-skin="party"] .toast, html[data-skin="party"] #preview-bar, html[data-skin="party"] #sel-bar {
  background: rgba(10,5,22,.6); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 30px rgba(0,0,0,.5);
  backdrop-filter: blur(8px) saturate(1.3); -webkit-backdrop-filter: blur(8px) saturate(1.3); }
@media (min-width: 900px) {
  html[data-skin="party"] #main { background: rgba(10,5,22,.52); border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
    backdrop-filter: blur(6px) saturate(1.3); -webkit-backdrop-filter: blur(6px) saturate(1.3); }
  html[data-skin="party"] .side-nav, html[data-skin="party"] .side-lib, html[data-skin="party"] .side-bottom { border-radius: 18px; }
  html[data-skin="party"] .desk-player { border-radius: 22px; }
}
@media (max-width: 899px) {
  html[data-skin="party"] #main::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: rgba(8,4,18,.5);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  html[data-skin="party"] #tabs { background: rgba(8,4,18,.94); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 -1px 0 rgba(255,255,255,.08); }
  html[data-skin="party"] .mini { background: rgba(14,7,30,.95); }
}
/* the player throbs with the bass */
html[data-skin="party"] .desk-player, html[data-skin="party"] .mini {
  box-shadow: inset 0 0 0 1px rgba(255,120,240, calc(.15 + var(--beat, 0) * .6)), 0 0 calc(8px + var(--beat, 0) * 34px) rgba(255,63,216, calc(.15 + var(--beat, 0) * .45)), 0 10px 30px rgba(0,0,0,.5); }
html[data-skin="party"] .mini { border-radius: 16px; }
html[data-skin="party"] .desk-ctl [data-action="p-toggle"], html[data-skin="party"] .mini .icon-btn:last-child { transform: scale(calc(1 + var(--beat, 0) * .1)); }
html[data-skin="party"] .topbar h1, html[data-skin="party"] .hero h1, html[data-skin="party"] .section-head h2, html[data-skin="party"] .cf-caption h2 {
  font-family: "Crate Party", "Arial Black", sans-serif; font-weight: 400; letter-spacing: .01em;
  background: var(--mix); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(255,63,216,.35)); }
html[data-skin="party"] .topbar h1 { font-size: 26px; }
html[data-skin="party"] .section-head h2 { font-size: 17px; }
html[data-skin="party"] .tile, html[data-skin="party"] .card, html[data-skin="party"] .promo, html[data-skin="party"] .notice, html[data-skin="party"] .status-line,
html[data-skin="party"] .theme-card, html[data-skin="party"] .remote-card, html[data-skin="party"] .now-card {
  background: rgba(255,255,255,.06); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); border-radius: 14px; }
html[data-skin="party"] .card { padding: 8px 8px 10px; transition: transform .15s, box-shadow .15s; }
html[data-skin="party"] .card { width: 156px; }
@media (min-width: 900px) { html[data-skin="party"] .card { width: 186px; } }
html[data-skin="party"] .grid .card { width: auto; }
html[data-skin="party"] .card .cover { width: 100%; height: auto; aspect-ratio: 1; border-radius: 9px; }  /* fill the card, inside its padding */
html[data-skin="party"] .tile .cover { border-radius: 9px; margin-left: 4px; width: 52px; height: 52px; }
html[data-skin="party"] .card:hover, html[data-skin="party"] .tile:hover { box-shadow: inset 0 0 0 1.5px #ff3fd8, 0 0 22px rgba(255,63,216,.45), 0 0 44px rgba(63,244,255,.2); transform: translateY(-2px); }
html[data-skin="party"] .item, html[data-skin="party"] .track { border-radius: 10px; }
html[data-skin="party"] .item:hover, html[data-skin="party"] .track:hover, html[data-skin="party"] .side-lib .item:hover { background: rgba(255,255,255,.07); }
html[data-skin="party"] .track.playing .track-title { background: var(--mix); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-skin="party"] .side-link.active { background: linear-gradient(90deg, rgba(255,63,216,.28), rgba(63,244,255,.12)); color: #fff; border-radius: 12px; box-shadow: inset 2px 0 0 #ff3fd8; }
html[data-skin="party"] .btn, html[data-skin="party"] .chip.active, html[data-skin="party"] .switch.on {
  background: linear-gradient(90deg, #ff3fd8, #ff7a3f); color: #fff; border: 0; text-shadow: 0 1px 2px rgba(0,0,0,.35); box-shadow: 0 0 18px rgba(255,63,216,.45); }
html[data-skin="party"] .chip, html[data-skin="party"] .btn.ghost, html[data-skin="party"] .btn.secondary { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
html[data-skin="party"] .play-btn, html[data-skin="party"] .np-controls .big, html[data-skin="party"] .desk-ctl [data-action="p-toggle"] {
  background: linear-gradient(135deg, #ff3fd8, #7b2cff); color: #fff; box-shadow: 0 0 24px rgba(255,63,216,.6); }
html[data-skin="party"] .icon-btn.on, html[data-skin="party"] .ctl.on { color: #3ff4ff; filter: drop-shadow(0 0 6px #3ff4ff); }
html[data-skin="party"] .field, html[data-skin="party"] .searchbox label, html[data-skin="party"] .album-search { background: rgba(255,255,255,.07); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
html[data-skin="party"] input[type=range] { background: rgba(255,255,255,.22); }
html[data-skin="party"] .mini-progress i { background: var(--mix); }
html[data-skin="party"] .np { background: linear-gradient(180deg, rgba(20,6,40,.8), rgba(6,2,14,.94)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html[data-skin="party"] .np-art .cover { border-radius: 14px; box-shadow: 0 0 50px rgba(255,63,216,.35), 0 20px 50px rgba(0,0,0,.6); }
html[data-skin="party"] .lyrics-view { background: linear-gradient(180deg, rgba(14,5,30,.86), rgba(6,2,14,.92)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html[data-skin="party"] .ly-top { background: linear-gradient(180deg, rgba(12,4,26,.97) 60%, rgba(12,4,26,0)); }
html[data-skin="party"] .ly-title b { font-family: "Crate Party", "Arial Black", sans-serif; font-weight: 400; background: var(--mix); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-skin="party"] .ly-line { color: rgba(255,255,255,.3); }
html[data-skin="party"] .ly-line.past { color: rgba(255,255,255,.5); }
html[data-skin="party"] .ly-line:hover { color: rgba(255,255,255,.8); }
html[data-skin="party"] .ly-line.on { background: var(--mix); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(255,63,216,.5)); }
html[data-skin="party"] .ly-plain { color: #fff; }
html[data-skin="party"] .sheet { border-radius: 22px 22px 0 0; }
html[data-skin="party"] .ctx-menu, html[data-skin="party"] .toast { border-radius: 14px; }

/* =========================================================================
   LIQUID GLASS, like iOS 26. The wallpaper is the album art (or a colourful
   default) and skin-fx.js draws every big panel as a real lens over it, on
   a canvas just under the panels (so the panels themselves are see-through
   here). The glass goes light or dark to suit the art (html[data-glass]).
   Smaller things (cards, buttons, fields) are CSS glass on top.
   ========================================================================= */
html[data-skin="glass"] {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --chip: rgba(255,255,255,.42);
  --chip-hi: inset 1px 1px 0 -.5px rgba(255,255,255,.95), inset -1px -1px 0 -.5px rgba(255,255,255,.55), inset 0 0 12px rgba(255,255,255,.25), 0 0 0 .5px rgba(0,0,30,.06), 0 6px 18px rgba(20,30,70,.12);
  --blue: #0a7aff;
  background: #10121a;
  color-scheme: light;
}
html[data-skin="glass"][data-glass="dark"] {
  --chip: rgba(255,255,255,.12);
  --chip-hi: inset 1px 1px 0 -.5px rgba(255,255,255,.55), inset -1px -1px 0 -.5px rgba(255,255,255,.25), inset 0 0 12px rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.25);
  --blue: #4aa3ff;
  color-scheme: dark;
}
html[data-skin="glass"] body { color: var(--text); }
html[data-skin="glass"] #app { z-index: auto; }  /* the glass canvas has to slot in between the page and the panels */
#skin-decor.fx-glass { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: #10121a; }
#skin-decor.fx-glass .lg-wall { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity .7s ease; }
#skin-decor.fx-glass .lg-wall.on { opacity: 1; }
#glass-over { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 25; pointer-events: none; }

/* the panels: drawn by the canvas underneath, so here they're just see-through and lifted above it */
html.lg-on[data-skin="glass"] .side-nav, html.lg-on[data-skin="glass"] .side-lib, html.lg-on[data-skin="glass"] .side-bottom, html.lg-on[data-skin="glass"] .desk-player,
html.lg-on[data-skin="glass"] #tabs, html.lg-on[data-skin="glass"] .mini {
  background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--text); }
@media (min-width: 900px) {
  html[data-skin="glass"] #app { gap: 18px; padding: 18px; }
  html[data-skin="glass"] #sidebar { gap: 18px; }
  html[data-skin="glass"] .side-nav, html[data-skin="glass"] .side-lib, html[data-skin="glass"] .side-bottom { border-radius: 30px; position: relative; z-index: 26; }
  html[data-skin="glass"] .side-nav, html[data-skin="glass"] .side-lib { padding: 12px 10px; }
  html[data-skin="glass"] .side-bottom { padding: 8px 10px; }
  html[data-skin="glass"] #main { border-radius: 34px; z-index: 26; }
  html.lg-on[data-skin="glass"] #main { background: transparent; box-shadow: none; }
  html[data-skin="glass"] .desk-player { border-radius: 999px; margin: 0 2%; padding: 0 30px 0 12px; position: relative; z-index: 26; }
  html[data-skin="glass"] .desk-now .cover { border-radius: 50%; }
  html[data-skin="glass"] .page { padding: 24px 28px; }
}
@media (max-width: 899px) {
  /* phones: the page sits on frosted art; the tab bar and mini player float as glass capsules */
  html[data-skin="glass"] #main::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: rgba(255,255,255,.4);
    backdrop-filter: blur(20px) saturate(1.7); -webkit-backdrop-filter: blur(20px) saturate(1.7); }
  html[data-skin="glass"][data-glass="dark"] #main::before { background: rgba(14,14,20,.34); }
  html[data-skin="glass"] #tabs { left: 16px; right: 16px; bottom: calc(var(--safe-b) + 10px); height: calc(var(--tabs-h) + 4px); padding: 0 6px; border-radius: 999px; }
  html[data-skin="glass"] .mini { left: 16px; right: 16px; bottom: calc(var(--tabs-h) + var(--safe-b) + 22px); height: 58px; border-radius: 999px; padding-left: 10px; padding-right: 8px; }
  html[data-skin="glass"] .mini .cover { border-radius: 50%; width: 40px; height: 40px; }
  html[data-skin="glass"] .mini-progress { left: 30px; right: 30px; bottom: 3px; }
  html[data-skin="glass"] #main { padding-bottom: calc(var(--tabs-h) + var(--safe-b) + 34px); }
  html[data-skin="glass"] body.has-player #main { padding-bottom: calc(var(--tabs-h) + var(--mini-h) + var(--safe-b) + 48px); }
}
/* no WebGL: plain CSS glass instead */
html.lg-css[data-skin="glass"] .side-nav, html.lg-css[data-skin="glass"] .side-lib, html.lg-css[data-skin="glass"] .side-bottom, html.lg-css[data-skin="glass"] .desk-player,
html.lg-css[data-skin="glass"] #tabs, html.lg-css[data-skin="glass"] .mini, html.lg-css[data-skin="glass"] #main {
  background: var(--chip); box-shadow: var(--chip-hi); backdrop-filter: blur(26px) saturate(1.8); -webkit-backdrop-filter: blur(26px) saturate(1.8); }

html[data-skin="glass"] .tab { color: var(--muted); border-radius: 999px; margin: 6px 0; transition: background .2s; }
html[data-skin="glass"] .tab.active { color: var(--blue); background: var(--chip); box-shadow: var(--chip-hi); }
html[data-skin="glass"] .mini-sub, html[data-skin="glass"] .desk-player .mini-sub { color: var(--muted); }
html[data-skin="glass"] .mini-progress { background: rgba(127,127,140,.25); }
html[data-skin="glass"] .mini-progress i { background: var(--text); }
html[data-skin="glass"] .topbar h1, html[data-skin="glass"] .hero h1 { font-weight: 800; letter-spacing: -.03em; color: var(--text); }
html[data-skin="glass"] .section-head h2 { font-weight: 750; letter-spacing: -.02em; color: var(--text); }
html[data-skin="glass"] .item-sub, html[data-skin="glass"] .track-sub, html[data-skin="glass"] .card-sub { color: var(--muted); }
html[data-skin="glass"] .track[data-status="none"] .track-title, html[data-skin="glass"] .track[data-status="failed"] .track-title { color: var(--faint); }
/* the smaller glass: cards, tiles, banners */
html[data-skin="glass"] .tile, html[data-skin="glass"] .card, html[data-skin="glass"] .promo, html[data-skin="glass"] .notice, html[data-skin="glass"] .status-line,
html[data-skin="glass"] .theme-card, html[data-skin="glass"] .remote-card, html[data-skin="glass"] .now-card, html[data-skin="glass"] #preview-bar, html[data-skin="glass"] #sel-bar {
  background: var(--chip); border: 0; color: var(--text); border-radius: 22px; box-shadow: var(--chip-hi);
  backdrop-filter: blur(9px) saturate(1.6); -webkit-backdrop-filter: blur(9px) saturate(1.6); }
html[data-skin="glass"] .tile { border-radius: 20px; }
html[data-skin="glass"] .tile .cover { border-radius: 13px; margin-left: 6px; width: 50px; height: 50px; }
html[data-skin="glass"] .card { padding: 8px 8px 10px; transition: transform .3s cubic-bezier(.3,1.5,.5,1); }
html[data-skin="glass"] .card { width: 156px; }
@media (min-width: 900px) { html[data-skin="glass"] .card { width: 186px; } }
html[data-skin="glass"] .grid .card { width: auto; }
html[data-skin="glass"] .card .cover { width: 100%; height: auto; aspect-ratio: 1; border-radius: 15px; box-shadow: 0 6px 16px rgba(20,30,70,.18); }
html[data-skin="glass"] .card:hover { transform: translateY(-3px) scale(1.015); }
html[data-skin="glass"] .item, html[data-skin="glass"] .track { border-radius: 16px; }
html[data-skin="glass"] .item:hover, html[data-skin="glass"] .track:hover, html[data-skin="glass"] .side-lib .item:hover { background: var(--chip); box-shadow: var(--chip-hi); }
html[data-skin="glass"] .item .cover, html[data-skin="glass"] .track .cover { border-radius: 11px; }
html[data-skin="glass"] .track.playing .track-title { color: var(--blue); }
html[data-skin="glass"] .side-link { color: var(--muted); border-radius: 999px; }
html[data-skin="glass"] .side-link.active, html[data-skin="glass"] .side-link:hover { color: var(--text); }
html[data-skin="glass"] .side-link.active { background: var(--chip); box-shadow: var(--chip-hi); }
/* buttons: tinted glass pills */
html[data-skin="glass"] .btn, html[data-skin="glass"] .chip.active, html[data-skin="glass"] .switch.on {
  background: color-mix(in srgb, var(--blue) 85%, transparent); color: #fff; border: 0; border-radius: 999px; text-shadow: none;
  box-shadow: inset 1px 1px 0 -.5px rgba(255,255,255,.75), inset 0 0 10px rgba(255,255,255,.2), 0 6px 18px rgba(10,122,255,.3); }
html[data-skin="glass"] .chip, html[data-skin="glass"] .btn.ghost, html[data-skin="glass"] .btn.secondary { background: var(--chip); color: var(--text); box-shadow: var(--chip-hi);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
html[data-skin="glass"] .btn.danger { background: rgba(255,59,48,.88); color: #fff; }
html[data-skin="glass"] .play-btn, html[data-skin="glass"] .desk-ctl [data-action="p-toggle"] {
  background: var(--chip); color: var(--text); box-shadow: var(--chip-hi); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html[data-skin="glass"] .icon-btn { color: var(--muted); }
html[data-skin="glass"] .icon-btn:hover { color: var(--text); }
html[data-skin="glass"] .icon-btn.on, html[data-skin="glass"] .ctl.on { color: var(--blue); }
html[data-skin="glass"] .desk-player .icon-btn, html[data-skin="glass"] .mini .icon-btn, html[data-skin="glass"] .desk-seek { color: var(--text); }
html[data-skin="glass"] .field, html[data-skin="glass"] .searchbox label, html[data-skin="glass"] .album-search {
  background: var(--chip); border: 0; border-radius: 999px; color: var(--text); box-shadow: var(--chip-hi); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html[data-skin="glass"] .searchbox input, html[data-skin="glass"] .album-search input { color: var(--text); }
html[data-skin="glass"] input[type=range] { background: rgba(127,127,140,.3); }
html[data-skin="glass"] input[type=range]::-webkit-slider-thumb { background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,40,.15), 0 2px 8px rgba(0,0,40,.25); }
html[data-skin="glass"] .cf-caption h2 { color: var(--text); }
html[data-skin="glass"] .hero::before { background: none; }
/* Now Playing stays like Apple Music: the album's colour, white text, glass controls */
html[data-skin="glass"] .np { color: #fff; }
html[data-skin="glass"] .np-art .cover { border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
html[data-skin="glass"] .np-controls .big { background: rgba(255,255,255,.22); color: #fff; box-shadow: inset 1px 1px 0 -.5px rgba(255,255,255,.8), inset 0 0 14px rgba(255,255,255,.2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html[data-skin="glass"] .np .icon-btn, html[data-skin="glass"] .np .ctl { color: rgba(255,255,255,.9); }
html[data-skin="glass"] .sheet, html[data-skin="glass"] .ctx-menu, html[data-skin="glass"] .toast {
  background: color-mix(in srgb, var(--bg) 72%, transparent); color: var(--text); border: 0; box-shadow: var(--chip-hi), 0 20px 50px rgba(0,0,0,.25);
  backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8); }
html[data-skin="glass"] .sheet { border-radius: 32px 32px 0 0; }
html[data-skin="glass"] .ctx-menu { border-radius: 22px; }
html[data-skin="glass"] .toast { border-radius: 999px; }
html[data-skin="glass"] .sheet button.opt:hover, html[data-skin="glass"] .ctx-menu button:hover { background: var(--chip); border-radius: 14px; }
/* lyrics like Apple Music: the album art blurred and dimmed behind big white lines; the ones you're not on are soft and faded */
html[data-skin="glass"] .lyrics-view { background: rgba(10,10,16,.38); color: #fff; backdrop-filter: blur(44px) saturate(1.8) brightness(.85); -webkit-backdrop-filter: blur(44px) saturate(1.8) brightness(.85); }
html[data-skin="glass"] .ly-top { background: none; }
html[data-skin="glass"] .ly-top .icon-btn { width: 40px; height: 40px; border-radius: 50%; color: #fff; background: rgba(255,255,255,.16);
  box-shadow: inset 1px 1px 0 -.5px rgba(255,255,255,.7), inset 0 0 10px rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html[data-skin="glass"] .ly-title b { color: #fff; }
html[data-skin="glass"] .ly-title span, html[data-skin="glass"] .ly-foot, html[data-skin="glass"] .ly-note, html[data-skin="glass"] .ly-empty p { color: rgba(255,255,255,.65); }
html[data-skin="glass"] .ly-line { color: rgba(255,255,255,.4); font-weight: 800; letter-spacing: -.02em; filter: blur(1.4px); transform-origin: left center;
  transition: color .4s, filter .4s, transform .4s cubic-bezier(.3,1.4,.5,1); }
html[data-skin="glass"] .ly-line.past { color: rgba(255,255,255,.4); }
html[data-skin="glass"] .ly-line:hover { filter: none; color: rgba(255,255,255,.75); }
html[data-skin="glass"] .ly-line.on { color: #fff; filter: none; transform: scale(1.03); text-shadow: 0 0 22px rgba(255,255,255,.25); }
html[data-skin="glass"] .ly-plain { color: #fff; }

/* =========================================================================
   DREAMCORE: somewhere you half remember. skin-fx.js shows real places
   pushed into an unreal blue sky and green grass (a white house with a black
   doorway, an endless field with a door in it, a door on the clouds) under
   heavy grain, with odd lines of text surfacing and fading. The app's boxes
   are black voids standing in the landscape, like the doors and windows in
   those pictures; the page itself is see-through, so the place is always
   there. Headings echo and the lyrics scatter.
   Photos (CC0, Wikimedia Commons): Redd Angelo, Yaoqi Lai, desilia.
   Font: Comic Neue (OFL).
   ========================================================================= */
@font-face { font-family: "Dream Comic"; src: url("skins/fonts/ComicNeue-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Dream Comic"; src: url("skins/fonts/ComicNeue-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
html[data-skin="dream"] {
  --font: Arial, Helvetica, "Liberation Sans", sans-serif;
  --serif: "Times New Roman", Times, "Liberation Serif", Georgia, serif;
  --sky: #6fb6ff;
  --ink-shadow: 0 1px 2px rgba(0,0,0,.8), 0 0 1px rgba(0,0,0,.7);
  --page-bg: transparent;
  background: #0a3cf0;
  color-scheme: dark;
}
html[data-skin="dream"] body { background: transparent; color: #fff; }
html[data-skin="dream"] #app { position: relative; z-index: 1; transition: opacity .6s ease; }
html[data-skin="dream"] ::selection { background: #fff; color: #000; }
#skin-decor.fx-dream { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #0a3cf0; }
/* dark corners, and heavy grain that never sits still */
#skin-decor.fx-dream::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse 80% 75% at 50% 45%, transparent 55%, rgba(0,0,30,.38) 100%); }
#skin-decor.fx-dream::after { content: ""; position: absolute; inset: -60px; z-index: 2; opacity: .55; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: dream-grain .6s steps(4) infinite; }
@keyframes dream-grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-31px, 17px); } 50% { transform: translate(23px, -27px); }
  75% { transform: translate(-13px, -41px); } 100% { transform: translate(0, 0); } }
#dream-over { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 95; pointer-events: none; }
/* the plain white arrow with a black edge, and a glitter star */
@media (pointer: fine) {
  html[data-skin="dream"] body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M3 2v17l4.5-4 3 7 3-1.3-2.9-6.7h5.9z' fill='%23fff' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M20 2q0 4 4 4-4 0-4 4 0-4-4-4 4 0 4-4z' fill='%23fff'/%3E%3C/svg%3E") 3 2, auto; }
}

/* ---- the page is see-through: the place is always there; loose text gets a shadow so it reads on the grass ---- */
html[data-skin="dream"] :is(#main, .np, .lyrics-view) { text-shadow: var(--ink-shadow); }
html[data-skin="dream"] .hero::before { background: none; }
html[data-skin="dream"] .searchbox { background: transparent; }
@media (min-width: 900px) {
  html[data-skin="dream"] #app { gap: 22px; padding: 28px 36px; }
  html[data-skin="dream"] #sidebar { gap: 22px; }
  html[data-skin="dream"] #main { background: transparent; border-radius: 0; }
  html[data-skin="dream"] .desk-player { height: 80px; padding: 0 22px 0 14px; }
}

/* ---- black voids: every box is a doorway with nothing on the other side ---- */
html[data-skin="dream"] :is(.side-nav, .side-lib, .side-bottom, .desk-player, .mini, #tabs, .toast, #preview-bar, #sel-bar, .sheet, .ctx-menu,
  .tile, .card, .promo, .notice, .status-line, .theme-card, .remote-card, .now-card) {
  background: #000; color: #fff; border: 0; border-radius: 0; box-shadow: none; text-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-skin="dream"] :is(.item, .track) { background: #000; border-radius: 0; margin-bottom: 3px; text-shadow: none; transition: box-shadow .4s; }
html[data-skin="dream"] .side-lib .item { margin-bottom: 0; }
html[data-skin="dream"] :is(.item, .track, .tile, .card, .theme-card):hover { background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
html[data-skin="dream"] .card { padding: 8px 8px 10px; width: 156px; }
@media (min-width: 900px) { html[data-skin="dream"] .card { width: 186px; } }
html[data-skin="dream"] .grid .card { width: auto; }
html[data-skin="dream"] .card .cover { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; box-shadow: none; }
html[data-skin="dream"] .tile .cover { border-radius: 0; margin-left: 0; width: 56px; height: 56px; }
html[data-skin="dream"] :is(.item, .track) .cover, html[data-skin="dream"] :is(.mini, .desk-now, .sheet-head) .cover { border-radius: 0; }
/* no picture: just the dark */
html[data-skin="dream"] .cover.ph:not([style]) { background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
html[data-skin="dream"] .cover.ph:not([style]) svg { visibility: hidden; }
html[data-skin="dream"] .hero-art { border-radius: 0; box-shadow: 18px 14px 0 -6px rgba(0,0,0,.22); }
html[data-skin="dream"] .hero-art .cover { border-radius: 0; }
html[data-skin="dream"] :is(.item-sub, .track-sub, .card-sub, .mini-sub, .desk-player .mini-sub) { color: #a9acb8; }
html[data-skin="dream"] .track[data-status="none"] .track-title, html[data-skin="dream"] .track[data-status="failed"] .track-title { color: #6c6f7a; }
html[data-skin="dream"] .track.playing .track-title { color: var(--sky); }

/* phones: the tab bar and the mini player are black strips across the landscape */
@media (max-width: 899px) {
  html[data-skin="dream"] #tabs { background: #000; }
  html[data-skin="dream"] .mini { left: 10px; right: 10px; }
  html[data-skin="dream"] .mini-progress { left: 0; right: 0; }
}
html[data-skin="dream"] .mini-progress { background: rgba(255,255,255,.18); border-radius: 0; }
html[data-skin="dream"] .mini-progress i { background: #fff; border-radius: 0; }
html[data-skin="dream"] :is(.desk-player .icon-btn, .mini .icon-btn, .desk-seek) { color: #fff; }

/* where you are: white, with a glitter star */
html[data-skin="dream"] .tab { position: relative; color: #8b8e99; }
html[data-skin="dream"] .tab.active { color: #fff; }
html[data-skin="dream"] .tab.active::after { content: "\2726"; position: absolute; top: 5px; left: calc(50% + 9px); font-size: 10px; line-height: 1; color: #fff;
  animation: dream-twinkle 2.4s ease-in-out infinite; }
@keyframes dream-twinkle { 0%, 100% { opacity: .15; transform: scale(.55) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(45deg); } }
html[data-skin="dream"] .side-link { color: #8b8e99; border-radius: 0; }
html[data-skin="dream"] .side-link.active, html[data-skin="dream"] .side-link:hover { color: #fff; background: transparent; }
html[data-skin="dream"] .side-link.active::after { content: "\2726"; margin-left: auto; color: #fff; font-size: 12px; animation: dream-twinkle 2.6s ease-in-out infinite; }

/* ---- type: plain lowercase Arial, and the big headings echo down the page like a caption repeated ---- */
html[data-skin="dream"] :is(.topbar h1, .hero h1, .section-head h2, .cf-caption h2) { font-family: var(--font); font-weight: 400; letter-spacing: 0; text-transform: lowercase; color: #fff; }
/* the page title repeats twice more below itself, fainter each time (the gap under it is made room for them) */
html[data-skin="dream"] .topbar { margin-bottom: 64px; }
html[data-skin="dream"] .topbar h1 { font-size: 30px; text-shadow: var(--ink-shadow), .35em .95em 0 rgba(255,255,255,.32), .7em 1.9em 0 rgba(255,255,255,.15); }
html[data-skin="dream"] .hero h1 { font-size: 30px; }
html[data-skin="dream"] .section-head h2 { font-size: 21px; text-shadow: var(--ink-shadow), .35em .95em 0 rgba(255,255,255,.16); }
html[data-skin="dream"] .cf-caption h2 { font-size: 24px; }

/* ---- buttons: plain white blocks; the rest are voids with a thin edge ---- */
html[data-skin="dream"] :is(.btn, .chip.active) { background: #fff; color: #000; border: 0; border-radius: 0; box-shadow: none; text-shadow: none; font-weight: 700; }
html[data-skin="dream"] :is(.chip, .btn.ghost, .btn.secondary) { background: #000; color: #fff; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); text-shadow: none; }
html[data-skin="dream"] .switch.on { background: var(--sky); }
html[data-skin="dream"] .btn.danger { background: #e0001b; color: #fff; }
html[data-skin="dream"] :is(.play-btn, .np-controls .big, .desk-ctl [data-action="p-toggle"]) { background: #fff; color: #000; box-shadow: none; }
html[data-skin="dream"] .icon-btn { color: rgba(255,255,255,.75); }
html[data-skin="dream"] .icon-btn:hover { color: #fff; }
html[data-skin="dream"] :is(.icon-btn.on, .ctl.on) { color: var(--sky); }
html[data-skin="dream"] :is(.field, .searchbox label, .album-search) { background: #000; border: 0; border-radius: 0; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); text-shadow: none; }
html[data-skin="dream"] :is(.searchbox input, .album-search input) { color: #fff; }
html[data-skin="dream"] input::placeholder { color: #80838f; }
html[data-skin="dream"] input[type=range] { background-color: rgba(255,255,255,.25); border-radius: 0; }

/* the cover wheel: its stage melts into the place (the covers themselves are left alone) */
html[data-skin="dream"] .cf-stage { background: transparent;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%); }
html[data-skin="dream"] .cf-fade { display: none; }

/* ---- Now Playing: the app goes, and the song is just there in the place ---- */
html[data-skin="dream"] body:has(.np.open) #app { opacity: 0; }
html[data-skin="dream"] .np { color: #fff; background: linear-gradient(180deg, rgba(0,0,20,.18), transparent 30%, transparent 55%, rgba(0,0,0,.5)); }
html[data-skin="dream"] .np-context { text-transform: lowercase; letter-spacing: 0; font-size: 13px; color: rgba(255,255,255,.85); }
html[data-skin="dream"] .np-context b { color: #fff; }
html[data-skin="dream"] .np-art .cover { border-radius: 0; box-shadow: 22px 18px 0 -6px rgba(0,0,0,.25); }
html[data-skin="dream"] .np-title { font-size: 26px; font-weight: 400; letter-spacing: 0; }
html[data-skin="dream"] :is(.np-artist, .times) { color: rgba(255,255,255,.85); }
html[data-skin="dream"] :is(.np-title, .np-artist) .sub-link:hover { color: var(--sky); }
html[data-skin="dream"] :is(.np .icon-btn, .np .ctl) { color: #fff; }

/* ---- lyrics: words that surface one by one, scattered about, still in order ---- */
html[data-skin="dream"] body:has(.lyrics-view.open) :is(#main, #sidebar, #tabs) { opacity: 0; transition: opacity .6s; }
@media (max-width: 899px) { html[data-skin="dream"] body:has(.lyrics-view.open) #player { opacity: 0; transition: opacity .6s; } }
html[data-skin="dream"] .lyrics-view { color: #fff; background: rgba(0,0,20,.12); }
html[data-skin="dream"] .ly-top { background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,0)); }
html[data-skin="dream"] .ly-top .icon-btn { color: #fff; }
html[data-skin="dream"] .ly-title b { font-weight: 400; text-transform: lowercase; }
html[data-skin="dream"] :is(.ly-title span, .ly-foot, .ly-note, .ly-empty p) { color: rgba(255,255,255,.85); }
html[data-skin="dream"] .ly-line { font-family: var(--font); font-weight: 400; letter-spacing: 0; text-transform: lowercase; max-width: 62%;
  color: #fff; opacity: .1; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 1px #000; transition: opacity 1.1s ease, transform 1.1s ease; transform: translateY(6px); }
html[data-skin="dream"] .ly-line.on { opacity: 1; transform: none; }
html[data-skin="dream"] .ly-line.past { opacity: .5; transform: none; }
html[data-skin="dream"] .ly-line:hover { opacity: .85; }
/* where each line lands: a scatter that doesn't repeat for a while */
html[data-skin="dream"] .ly-line:nth-child(7n+1) { margin-left: 0; }
html[data-skin="dream"] .ly-line:nth-child(7n+2) { margin-left: 31%; }
html[data-skin="dream"] .ly-line:nth-child(7n+3) { margin-left: 9%; }
html[data-skin="dream"] .ly-line:nth-child(7n+4) { margin-left: 38%; }
html[data-skin="dream"] .ly-line:nth-child(7n+5) { margin-left: 4%; }
html[data-skin="dream"] .ly-line:nth-child(7n+6) { margin-left: 22%; }
html[data-skin="dream"] .ly-line:nth-child(7n) { margin-left: 14%; }
html[data-skin="dream"] .ly-line:nth-child(5n+1) { margin-bottom: 14px; }
html[data-skin="dream"] .ly-line:nth-child(5n+2) { margin-bottom: 52px; }
html[data-skin="dream"] .ly-line:nth-child(5n+3) { margin-bottom: 26px; }
html[data-skin="dream"] .ly-line:nth-child(5n+4) { margin-bottom: 80px; }
html[data-skin="dream"] .ly-line:nth-child(5n) { margin-bottom: 6px; }
html[data-skin="dream"] .ly-line:nth-child(4n+2) { font-size: clamp(19px, 4vw, 28px); }
html[data-skin="dream"] .ly-line:nth-child(4n+3) { font-size: clamp(25px, 5.4vw, 40px); }
html[data-skin="dream"] .ly-line:nth-child(6n+3) { font-family: var(--serif); font-style: italic; text-transform: none; }
html[data-skin="dream"] .ly-line:nth-child(9n+5) { font-family: "Dream Comic", "Comic Sans MS", cursive; font-weight: 700; text-transform: none; }
html[data-skin="dream"] .ly-plain { color: #fff; font-weight: 400; }

/* ---- sheets and menus: voids that come into focus ---- */
html[data-skin="dream"] .sheet.open, html[data-skin="dream"] .ctx-menu { animation: dream-wake .5s ease-out; }
@keyframes dream-wake { from { filter: blur(6px); opacity: .3; } to { filter: none; opacity: 1; } }
html[data-skin="dream"] .sheet-head { border-bottom-color: rgba(255,255,255,.14); }
html[data-skin="dream"] :is(.sheet button.opt:hover, .sheet button.opt:active, .ctx-menu button:hover) { background: #141414; border-radius: 0; }
html[data-skin="dream"] .ctx-menu button { border-radius: 0; }
html[data-skin="dream"] .scrim { background: rgba(0,0,0,.4); }

@media (prefers-reduced-motion: reduce) {
  html[data-skin="dream"] .tab.active::after, html[data-skin="dream"] .side-link.active::after, #skin-decor.fx-dream::after,
  html[data-skin="dream"] :is(.sheet.open, .ctx-menu) { animation: none; }
  html[data-skin="dream"] .ly-line { transition: none; }
}

/* =========================================================================
   ASCII: a terminal. Black, one monospace font, boxes drawn in lines,
   [ BUTTONS ], a blinking cursor. Behind it (skin-fx.js ascii()) the art of
   the song that's playing is drawn in characters over a drifting cloud.
   Colours: green screen, amber, white, or the album's own (html[data-ascii]).
   ========================================================================= */
@font-face { font-family: "Crate Mono"; src: url("skins/fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Crate Mono"; src: url("skins/fonts/JetBrainsMono-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
html[data-skin="ascii"] { --term: #5cff8a; --term-rgb: 92, 255, 138; --term-hi: #d4ffdf; }
html[data-skin="ascii"][data-ascii="amber"] { --term: #ffb22e; --term-rgb: 255, 178, 46; --term-hi: #ffe8c2; }
html[data-skin="ascii"]:is([data-ascii="white"], [data-ascii="album"]) { --term: #e8ebee; --term-rgb: 232, 235, 238; --term-hi: #ffffff; }
html[data-skin="ascii"] {
  --font: "Crate Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --bg-2: rgba(0,0,0,.72); --surface: rgba(var(--term-rgb), .07); --surface-2: rgba(var(--term-rgb), .13); --surface-3: rgba(var(--term-rgb), .22);
  --line: rgba(var(--term-rgb), .34); --text: var(--term-hi); --muted: rgba(var(--term-rgb), .74); --faint: rgba(var(--term-rgb), .5);
  --accent: var(--term); --accent-2: var(--term-hi); --accent-ink: #000; --danger: #ff5f56;
  --page-bg: transparent; --mini-bg: #000; --np-bg: #000;
  background: #000; color-scheme: dark; scrollbar-color: rgba(var(--term-rgb), .35) transparent;
}
html[data-skin="ascii"] body { background: transparent; color: var(--term-hi); }
html[data-skin="ascii"] #app { position: relative; z-index: 1; transition: opacity .3s; }
html[data-skin="ascii"] ::selection { background: var(--term); color: #000; }
html[data-skin="ascii"] :is(input, textarea) { caret-color: var(--term); }
/* square corners everywhere (the cover wheel is left exactly as it is) */
html[data-skin="ascii"] :not(.cf-stage, .cf-stage *) { border-radius: 0; }
#skin-decor.fx-ascii { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #000; }
/* a soft vignette and faint scanlines over the characters */
#skin-decor.fx-ascii::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 50%, rgba(0,0,0,.72) 100%); }
#skin-decor.fx-ascii::after { content: ""; position: absolute; inset: 0; z-index: 2;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,.22) 2px 3px); }
/* no WebGL: a still field of dots instead */
html.asc-css #skin-decor.fx-ascii { background: radial-gradient(rgba(var(--term-rgb), .28) 1px, transparent 1.5px) 0 0 / 9px 15px, #000; }

/* ---- the page sits on the characters: dark enough to read, clear enough to see them ---- */
@media (max-width: 899px) {
  html[data-skin="ascii"] #main::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.62) 36%, rgba(0,0,0,.76) 100%); }
  html[data-skin="ascii"] #tabs { background: #000; border-top: 3px double var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
  html[data-skin="ascii"] .mini { left: 6px; right: 6px; background: #000; border: 1px solid var(--line); box-shadow: 0 0 0 4px #000; }
  html[data-skin="ascii"] .mini-progress { left: 0; right: 0; }
}
@media (min-width: 900px) {
  html[data-skin="ascii"] #app { gap: 12px; padding: 14px; }
  html[data-skin="ascii"] #sidebar { gap: 12px; }
  html[data-skin="ascii"] :is(.side-nav, .side-lib, .side-bottom, .desk-player) { background: rgba(0,0,0,.84); border: 3px double var(--line); }
  html[data-skin="ascii"] #main { border: 3px double var(--line);
    background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.8) 45%, rgba(0,0,0,.55) 100%); }
  html[data-skin="ascii"] .side-link { font-weight: 400; }
  html[data-skin="ascii"] .side-link.active { background: var(--term); color: #000; }
  html[data-skin="ascii"] .side-link:not(.active):hover { background: var(--surface-2); color: var(--term-hi); }
  html[data-skin="ascii"] .side-lib h3 { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--term); }
  html[data-skin="ascii"] .side-lib .item:hover { background: var(--surface-2); }
  html[data-skin="ascii"] .searchbox { background: transparent; }
  html[data-skin="ascii"] .desk-player { height: 78px; }
  html[data-skin="ascii"] .desk-ctl .big { background: var(--term); color: #000; }
  html[data-skin="ascii"] .track:hover { background: var(--surface); }
}
html[data-skin="ascii"] .hero::before { background: linear-gradient(180deg, rgba(var(--term-rgb), .1), transparent 70%); }

/* ---- type: everything monospace; headings are prompts with a blinking cursor ---- */
html[data-skin="ascii"] :is(.topbar h1, .hero h1, .section-head h2, .cf-caption h2, .np-title, .item-title, .track-title, .card-title, .mini-title, .theme-name) { letter-spacing: 0; }
html[data-skin="ascii"] .topbar h1 { font-size: 22px; font-weight: 700; color: var(--term-hi); text-shadow: 0 0 10px rgba(var(--term-rgb), .45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: asc-glitch 11s steps(1) infinite; }
html[data-skin="ascii"] .topbar h1::before { content: "> "; color: var(--term); }
html[data-skin="ascii"] .topbar h1::after, html[data-skin="ascii"] .ly-line.on::after {
  content: ""; display: inline-block; width: .58em; height: 1.05em; margin-left: .18em; vertical-align: -.16em; background: var(--term);
  animation: asc-blink 1.06s steps(1) infinite; }
@keyframes asc-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* every so often the heading tears for a moment */
@keyframes asc-glitch { 0%, 95.5%, 97.5%, 100% { transform: none; text-shadow: 0 0 10px rgba(var(--term-rgb), .45); clip-path: none; }
  96% { transform: translateX(4px); text-shadow: -2px 0 rgba(255,40,80,.8), 2px 0 rgba(40,220,255,.8); clip-path: inset(10% 0 45% 0); }
  96.6% { transform: translateX(-3px); text-shadow: 2px 0 rgba(255,40,80,.8), -2px 0 rgba(40,220,255,.8); clip-path: inset(55% 0 5% 0); }
  97% { transform: translateX(1px); clip-path: none; } }
html[data-skin="ascii"] .hero h1 { font-weight: 700; letter-spacing: -.01em; text-shadow: 0 0 14px rgba(var(--term-rgb), .35); }
html[data-skin="ascii"] .section-head h2 { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--term); }
html[data-skin="ascii"] .section-head h2::before { content: "##"; color: var(--faint); }
html[data-skin="ascii"] .section-head h2::after { content: ""; flex: 1; min-width: 20px; border-top: 1px dashed var(--line); }
html[data-skin="ascii"] .section-head a { color: var(--muted); text-transform: lowercase; font-size: 13px; }
html[data-skin="ascii"] :is(.item-sub, .track-sub, .card-sub, .mini-sub, .theme-note, .track-dur, .track .num) { color: var(--muted); }
html[data-skin="ascii"] :is(.item-title, .track-title, .card-title, .mini-title) { font-weight: 700; color: var(--term-hi); }
html[data-skin="ascii"] .track[data-status="none"] .track-title, html[data-skin="ascii"] .track[data-status="failed"] .track-title { color: var(--faint); }
html[data-skin="ascii"] .track.playing .track-title { color: var(--term); }
html[data-skin="ascii"] .track.playing .track-title::before { content: "\25B6  "; font-size: .8em; }
html[data-skin="ascii"] .cf-caption h2 { font-weight: 700; color: var(--term-hi); }

/* ---- boxes: black, edged in thin lines ---- */
html[data-skin="ascii"] :is(.tile, .notice, .promo, .status-line, .theme-card, .remote-card, .now-card, #preview-bar, #sel-bar) {
  background: rgba(0,0,0,.8); border: 1px solid var(--line); box-shadow: none; color: var(--term-hi); }
html[data-skin="ascii"] :is(.promo, .notice) { border-style: dashed; }
html[data-skin="ascii"] .tile:hover, html[data-skin="ascii"] .tile:active { background: var(--surface-2); }
html[data-skin="ascii"] .theme-card { border-width: 1px; }
html[data-skin="ascii"] .theme-card.on { border-color: var(--term); box-shadow: inset 0 0 0 1px var(--term); }
html[data-skin="ascii"] :is(.item, .track, .card, .tile) .cover, html[data-skin="ascii"] :is(.mini, .desk-now, .sheet-head, .hero-art) .cover {
  box-shadow: none; outline: 1px solid var(--line); outline-offset: -1px; }
html[data-skin="ascii"] .cover.ph:not([style]) { background: rgba(0,0,0,.6); color: var(--faint); }
html[data-skin="ascii"] .avatar { outline: 1px solid var(--term); }
html[data-skin="ascii"] .colour-dot i { box-shadow: 0 0 0 1px var(--line); }
html[data-skin="ascii"] .colour-dot.on i { box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--term); }

/* ---- buttons: [ LIKE THIS ]; pressed or hovered, the colours swap ---- */
html[data-skin="ascii"] .btn { height: 40px; padding: 0 12px; gap: 7px; background: rgba(var(--term-rgb), .14); color: var(--term-hi); border: 0;
  box-shadow: none; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; }
html[data-skin="ascii"] .btn::before { content: "["; color: var(--term); }
html[data-skin="ascii"] .btn::after { content: "]"; color: var(--term); }
html[data-skin="ascii"] :is(.btn.secondary, .btn.ghost) { background: transparent; border: 0; color: var(--muted); }
html[data-skin="ascii"] .btn.small { height: 32px; padding: 0 8px; font-size: 12.5px; }
html[data-skin="ascii"] .btn.danger { color: var(--danger); background: rgba(255,95,86,.12); }
html[data-skin="ascii"] .btn:hover:not([disabled]), html[data-skin="ascii"] .btn:active:not([disabled]) { background: var(--term); color: #000; }
html[data-skin="ascii"] .btn:hover:not([disabled])::before, html[data-skin="ascii"] .btn:hover:not([disabled])::after { color: #000; }
html[data-skin="ascii"] .chip { background: transparent; color: var(--muted); border: 1px dashed var(--line); font-weight: 400; }
html[data-skin="ascii"] .chip.active { background: var(--term); color: #000; border: 1px solid var(--term); font-weight: 700; }
html[data-skin="ascii"] :is(.play-btn, .np-controls .big) { background: var(--term); color: #000; box-shadow: 0 0 0 3px #000, 0 0 0 4px var(--term), 0 0 18px rgba(var(--term-rgb), .35); }
html[data-skin="ascii"] .play-btn[disabled] { background: var(--surface-3); color: var(--faint); box-shadow: none; }
html[data-skin="ascii"] .icon-btn { color: var(--muted); }
html[data-skin="ascii"] .icon-btn:hover { color: var(--term-hi); }
html[data-skin="ascii"] :is(.icon-btn.on, .ctl.on) { color: var(--term); }
html[data-skin="ascii"] .ctl.on::after { border-radius: 0; background: var(--term); }
html[data-skin="ascii"] .switch.on { background: var(--term); }
html[data-skin="ascii"] :is(.field, .searchbox label, .album-search) { background: #000; color: var(--term-hi); border: 1px solid var(--line); box-shadow: none; }
html[data-skin="ascii"] :is(.field, .searchbox label, .album-search):focus-within { border-color: var(--term); }
html[data-skin="ascii"] :is(.searchbox input, .album-search input) { color: var(--term-hi); font-weight: 400; }
html[data-skin="ascii"] input::placeholder { color: var(--faint); font-weight: 400; }
/* sliders: a dotted track that fills with a solid bar, and a block cursor to drag */
html[data-skin="ascii"] input[type=range] { height: 10px; background-color: transparent;
  background-image: linear-gradient(var(--term), var(--term)), repeating-linear-gradient(90deg, rgba(var(--term-rgb), .4) 0 2px, transparent 2px 6px);
  background-size: var(--p, 0%) 4px, 100% 2px; background-position: 0 50%, 0 50%; background-repeat: no-repeat; }
html[data-skin="ascii"] input[type=range]::-webkit-slider-thumb { width: 9px; height: 16px; border-radius: 0; background: var(--term-hi); box-shadow: 0 0 8px rgba(var(--term-rgb), .6); }
html[data-skin="ascii"] input[type=range]::-moz-range-thumb { width: 9px; height: 16px; border-radius: 0; background: var(--term-hi); }

/* ---- phones: the tab bar and the mini player ---- */
html[data-skin="ascii"] .tab { color: var(--faint); }
html[data-skin="ascii"] .tab span { text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
html[data-skin="ascii"] .tab.active { color: var(--term); }
html[data-skin="ascii"] .tab.active span::before { content: "["; }
html[data-skin="ascii"] .tab.active span::after { content: "]"; }
html[data-skin="ascii"] .mini-progress { height: 3px; background: repeating-linear-gradient(90deg, rgba(var(--term-rgb), .3) 0 4px, transparent 4px 6px); }
html[data-skin="ascii"] .mini-progress i { background: repeating-linear-gradient(90deg, var(--term) 0 4px, transparent 4px 6px); }
html[data-skin="ascii"] :is(.mini .icon-btn, .desk-player .icon-btn, .desk-seek) { color: var(--term-hi); }

/* the cover wheel on the characters (the covers themselves are left alone) */
html[data-skin="ascii"] .cf-fade { display: none; }
html[data-skin="ascii"] .cf-stage { background: transparent;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%); }

/* ---- Now Playing: the page goes, the cover sits in its own characters ---- */
html[data-skin="ascii"] body:has(.np.open) #app { opacity: 0; }
html[data-skin="ascii"] .np { background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.05) 18%, rgba(0,0,0,.05) 50%, rgba(0,0,0,.82) 72%, #000); color: var(--term-hi); }
html[data-skin="ascii"] .np-context { color: var(--term); letter-spacing: .14em; }
html[data-skin="ascii"] .np-context b { color: var(--term-hi); letter-spacing: 0; }
html[data-skin="ascii"] .np-art .cover { box-shadow: 0 0 0 1px var(--term), 0 0 0 7px #000, 0 0 0 8px var(--line); }
@media (max-width: 899px) { html[data-skin="ascii"] .np-art .cover { width: min(76%, 46vh); } }
html[data-skin="ascii"] .np-title { font-weight: 700; text-shadow: 0 0 12px rgba(var(--term-rgb), .4); }
html[data-skin="ascii"] .np-title::before { content: "> "; color: var(--term); }
html[data-skin="ascii"] :is(.np-artist, .times) { color: var(--muted); }
html[data-skin="ascii"] :is(.np .icon-btn, .np .ctl) { color: var(--term-hi); }
html[data-skin="ascii"] .np .icon-btn span { text-transform: lowercase; }

/* ---- lyrics: lines of output; the one being sung has the cursor ---- */
html[data-skin="ascii"] body:has(.lyrics-view.open) :is(#main, #sidebar, #tabs, .np) { opacity: 0; transition: opacity .3s; }
@media (max-width: 899px) { html[data-skin="ascii"] body:has(.lyrics-view.open) #player { opacity: 0; } }
html[data-skin="ascii"] .lyrics-view { background: rgba(0,0,0,.42); color: var(--term-hi); }
html[data-skin="ascii"] .ly-top { background: linear-gradient(#000 60%, rgba(0,0,0,0)); }
html[data-skin="ascii"] .ly-top .icon-btn { color: var(--term-hi); }
html[data-skin="ascii"] :is(.ly-title span, .ly-foot, .ly-note, .ly-empty p) { color: var(--muted); }
html[data-skin="ascii"] .ly-line { font-weight: 700; font-size: clamp(19px, 4.2vw, 30px); letter-spacing: 0; line-height: 1.35; color: rgba(var(--term-rgb), .3);
  text-shadow: 0 0 4px #000, 0 0 2px #000; }
html[data-skin="ascii"] .ly-line.past { color: rgba(var(--term-rgb), .55); }
html[data-skin="ascii"] .ly-line.on { color: var(--term-hi); text-shadow: 0 0 14px rgba(var(--term-rgb), .55), 0 0 2px #000; }
html[data-skin="ascii"] .ly-line.on::before { content: "> "; color: var(--term); }
html[data-skin="ascii"] .ly-line:hover { color: var(--term-hi); }
html[data-skin="ascii"] .ly-plain { font-weight: 400; color: var(--term-hi); }

/* ---- sheets and menus: boxes that print in ---- */
html[data-skin="ascii"] :is(.sheet, .ctx-menu) { background: #000; border: 3px double var(--line); box-shadow: 0 0 0 4px #000; color: var(--term-hi); }
html[data-skin="ascii"] .sheet { border-bottom: 0; }
html[data-skin="ascii"] .sheet.open, html[data-skin="ascii"] .ctx-menu { animation: asc-print .22s steps(5); }
@keyframes asc-print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
html[data-skin="ascii"] .sheet-head { border-bottom: 1px dashed var(--line); }
html[data-skin="ascii"] :is(.sheet button.opt:hover, .sheet button.opt:active, .ctx-menu button:hover) { background: var(--term); color: #000; }
html[data-skin="ascii"] .scrim { background: rgba(0,0,0,.72); }
html[data-skin="ascii"] .toast { background: var(--term); color: #000; box-shadow: 0 0 0 3px #000, 0 0 0 4px var(--term); }
html[data-skin="ascii"] .toast button { color: #000; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  html[data-skin="ascii"] :is(.topbar h1, .topbar h1::after, .ly-line.on::after, .sheet.open, .ctx-menu) { animation: none; }
}