/* =========================================================
   SKIN · PROFILE — early-2000s digital music meets MySpace
   A band profile, 2006: the blue top bar, the two columns, the
   orange blurb headers, Verdana at ten points, and a music player
   dressed like the ones people ran on their desktops then.

   Dark mode is a "pimped" profile — the custom layouts everybody
   pasted in. Light mode is the stock profile, as it shipped.
   Every rule is scoped under body[data-skin="profile"] or lives
   inside #profile, so none of it leaks into the other skins.
   ========================================================= */

/* ---------- the desktop steps aside ---------- */
#profile{display:none}
body[data-skin="profile"] #profile{display:block}
body[data-skin="profile"] .menubar,
body[data-skin="profile"] .dock,
body[data-skin="profile"] .wallpaper,
body[data-skin="profile"] .hero-type,
body[data-skin="profile"] .stage,
body[data-skin="profile"] #hint,
body[data-skin="profile"] .icons{display:none!important}
/* The desktop stays in the document for one reason: it holds the window
   layer. Pictures, dialogs and the readme still open as windows, over
   the page. It lets every click through to the page underneath. */
body[data-skin="profile"] .desktop{z-index:840;pointer-events:none;padding-top:0;animation:none}
/* the page scrolls; the desktop never did */
body[data-skin="profile"]{overflow:visible;height:auto;overflow-x:hidden}
/* the toast has to stay on screen while the page scrolls under it */
body[data-skin="profile"] > .hint{position:fixed;bottom:22px}

/* ---------- tokens: the pimped profile (dark) ---------- */
.pf{
  --pf-bg:#070b24;
  --pf-page:rgba(9,14,44,.92);
  --pf-text:#e7ebff;
  --pf-dim:#9aa6d6;
  --pf-link:#9fd0ff;
  --pf-top:linear-gradient(180deg,#1b3fae,#0b2474);
  --pf-nav:#4a78c8;
  --pf-box-line:#3f67b8;
  --pf-box-bg:rgba(12,20,64,.78);
  --pf-head:#16307c;
  --pf-head-ink:#fff;
  --pf-blurb-bg:rgba(255,140,40,.14);
  --pf-blurb-ink:#ffb14a;
  --pf-cell:#1a2a6c;
  --pf-cell-ink:#cfe0ff;
  font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:12px;line-height:1.45;
  color:var(--pf-text);
  min-height:100vh;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M16 6l2 8 8 2-8 2-2 8-2-8-8-2 8-2z' fill='%23ffd65a' fill-opacity='.35'/%3E%3Cpath d='M48 38l1.2 4.8 4.8 1.2-4.8 1.2L48 50l-1.2-4.8L42 44l4.8-1.2z' fill='%239fd0ff' fill-opacity='.35'/%3E%3C/svg%3E") 0 0/64px 64px fixed,
    radial-gradient(90% 60% at 20% 0%,#16307f 0%,transparent 60%) fixed,
    var(--pf-bg);
}
/* ---------- the stock profile (light) ---------- */
body.light .pf{
  --pf-bg:#e5e5e5;
  --pf-page:#fff;
  --pf-text:#000;
  --pf-dim:#555;
  --pf-link:#003399;
  --pf-top:linear-gradient(180deg,#1d4fbf,#003399);
  --pf-nav:#6698cb;
  --pf-box-line:#6698cb;
  --pf-box-bg:#fff;
  --pf-head:#6698cb;
  --pf-head-ink:#fff;
  --pf-blurb-bg:#ffcc99;
  --pf-blurb-ink:#ff6600;
  --pf-cell:#b1d0f0;
  --pf-cell-ink:#336699;
  background:var(--pf-bg);
}
.pf a{color:var(--pf-link)}
.pf a:hover{color:#ff6600}
.pf button{font:inherit}
.pf .pf-link{color:var(--pf-link);text-decoration:underline;padding:0;display:inline}
.pf .pf-link:hover{color:#ff6600}
.pf-small{font-size:10.5px;color:var(--pf-dim)}

/* ---------- the top bar ---------- */
.pf-top{background:var(--pf-top);color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.pf-top-in{position:relative;max-width:800px;margin:0 auto;height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 10px}
.pf-logo{color:#fff!important;text-decoration:none;font:700 26px/1 Arial,Helvetica,sans-serif;letter-spacing:-.04em;display:flex;align-items:baseline;gap:1px;flex-wrap:wrap}
.pf-logo small{font-size:14px;font-weight:400;opacity:.8;letter-spacing:0}
.pf-logo em{flex-basis:100%;font:italic 11px/1.4 Verdana,sans-serif;letter-spacing:0;opacity:.85;margin-top:2px}
.pf-top-r{display:flex;gap:6px;align-items:center}
.pf-chip{min-width:30px;height:24px;padding:0 7px;border:1px solid rgba(255,255,255,.55);border-radius:3px;
  background:rgba(255,255,255,.12);color:#fff;font:700 11px/1 Verdana,sans-serif;display:grid;place-items:center}
.pf-chip:hover{background:#fff;color:#003399}
.pf-theme svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.pf-theme .ic-sun circle{fill:currentColor;stroke:none}
.pf-theme .ic-moon{fill:currentColor;stroke:none;display:none}
body.light .pf-theme .ic-sun{display:none}
body.light .pf-theme .ic-moon{display:block}
/* the era switch, dead centre of the bar, as in every skin — square
   2009 chips, and the current era is the white one */
.pf .pf-era{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.45);border-radius:3px;color:#fff;
  font:700 11px/1 Verdana,sans-serif}
.pf .pf-era button{border-radius:2px;font-size:11px;padding:4px 8px;opacity:.85}
.pf .pf-era button b{font:700 10px/1 Verdana,sans-serif;opacity:.75}
.pf .pf-era button:hover{background:rgba(255,255,255,.2)}
.pf .pf-era button[aria-current="true"]{background:#fff;color:#003399}
.pf-nav{background:var(--pf-nav);text-align:center;padding:5px 8px;font:700 11px/1.4 Arial,sans-serif;
  border-top:1px solid rgba(255,255,255,.25)}
.pf-nav button{color:#fff;padding:0 6px}
.pf-nav button:hover{text-decoration:underline}
.pf-nav i{font-style:normal;opacity:.6}

/* ---------- the page ---------- */
.pf-page{max-width:800px;margin:10px auto 0;background:var(--pf-page);padding:10px 10px 0;
  box-shadow:0 0 0 1px var(--pf-box-line)}

/* the custom header: the character sheet, live */
.pf-banner{position:relative;margin:0 0 10px;border:1px solid var(--pf-box-line);background:#03060f}
/* its own strip over the drawing, not laid across it: across it, it sat on
   the FRONT / 3-4 / SIDE labels */
.pf-glitter{margin:0;padding:10px 8px 8px;text-align:center;pointer-events:none;background:#03060f;
  border-bottom:1px solid var(--pf-box-line);
  font:italic 900 clamp(24px,5.4vw,46px)/1 'Trebuchet MS',Verdana,sans-serif;letter-spacing:.02em;
  background:linear-gradient(100deg,#ff6fd8 0%,#ffe45c 22%,#fff 30%,#6ff7ff 45%,#b18cff 62%,#fff 70%,#ff6fd8 100%) 0 0/220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.6px rgba(255,255,255,.35);
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(255,111,216,.45));
  animation:pfGlitter 3.2s linear infinite}
@keyframes pfGlitter{to{background-position:-220% 0}}
.pf-banner .mount-body,.pf-banner .scene-wrap{height:auto}
.pf-banner .scene-stage{padding:0}
.pf-banner .scene{border-radius:0}
.pf-banner .scene-tip{font-size:9.5px}

.pf-cols{display:grid;grid-template-columns:300px 1fr;gap:12px;align-items:start}
.pf-left,.pf-right{display:flex;flex-direction:column;gap:10px;min-width:0}

/* ---------- boxes ---------- */
.pf-box{border:1px solid var(--pf-box-line);background:var(--pf-box-bg)}
.pf-box > h3{margin:0;padding:3px 7px;background:var(--pf-head);color:var(--pf-head-ink);font:700 12px/1.4 Verdana,sans-serif}
/* the right column's headers are the orange blurbs */
.pf-right > .pf-box > h3{background:var(--pf-blurb-bg);color:var(--pf-blurb-ink);font-size:13px}
.pf-box > h4{margin:8px 8px 0;font:700 11px/1.3 Verdana,sans-serif;color:var(--pf-blurb-ink)}
.pf-box > p{margin:8px}

.pf-card{padding:0 2px}
.pf-name{margin:0 0 6px;font:700 20px/1.1 Verdana,sans-serif}
.pf-id-row{display:flex;gap:10px}
.pf-pic{flex:0 0 150px;padding:0;border:1px solid var(--pf-box-line)}
.pf-pic img{width:150px;height:170px;object-fit:cover;object-position:50% 25%}
.pf-id-txt p{margin:0 0 6px;font-size:11px}
.pf-quote{font-style:italic;font-weight:700}
.pf-online{color:#ff9d1c;font-weight:700;display:flex;align-items:center;gap:4px}
.pf-online i{width:14px;height:10px;background:linear-gradient(180deg,#ffd35a,#ff8a00);border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);animation:pfBlink 1.6s steps(1) infinite}
@keyframes pfBlink{50%{opacity:.35}}
.pf-mood{margin:8px 0 0;font-size:11px}

.pf-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--pf-box-line);border-top:1px solid var(--pf-box-line)}
.pf-contact-grid > *{display:flex;align-items:center;gap:6px;padding:7px 8px;background:var(--pf-cell);color:var(--pf-cell-ink)!important;
  font-weight:700;font-size:11px;text-decoration:none;text-align:left}
.pf-contact-grid > *:hover{filter:brightness(1.15);text-decoration:underline}
.pf-contact-grid i{font-style:normal;width:18px;height:18px;display:grid;place-items:center;border-radius:2px;
  background:rgba(255,255,255,.2);color:inherit;flex:0 0 auto}

.pf-url{border:1px solid var(--pf-box-line);padding:6px 8px;font-size:11px;background:var(--pf-box-bg)}
.pf-details table{width:100%;border-collapse:separate;border-spacing:3px}
.pf-details th{width:42%;text-align:left;vertical-align:top;padding:4px 6px;background:var(--pf-cell);color:var(--pf-cell-ink);font-size:10.5px}
.pf-details td{padding:4px 6px;font-size:11px}
.pf-blog p{font-size:11px}

.pf-network{margin:0;padding:10px;border:1px solid var(--pf-box-line);text-align:center;font:700 15px/1.3 Verdana,sans-serif;
  background:var(--pf-box-bg)}

/* ---------- the modules: views, in period dress ---------- */
.pf .mount-body{color:var(--pf-text)}
.pf .pad{padding:10px}
.pf .eyebrow{color:var(--pf-dim);letter-spacing:.08em}
.pf .muted{color:var(--pf-dim)}
.pf .hd{font-family:Verdana,sans-serif;--hand-acc:none;font-size:18px!important}
.pf .btn{border-radius:3px;padding:6px 12px;font:700 11px/1.2 Verdana,sans-serif;
  background:linear-gradient(180deg,#f7f7f7,#d8d8d8);color:#000;border:1px solid #888}
.pf .btn:hover{transform:none;filter:brightness(1.05)}

/* the player — a skinned desktop player, brushed metal and a green LCD */
.pf-music .mount-body{padding:8px}
.pf-music .player{display:grid;grid-template-columns:86px 1fr;grid-template-areas:"art meta" "viz viz" "ctrl ctrl";
  height:auto;border-radius:4px;border:1px solid #111;
  background:linear-gradient(180deg,#5a5f73,#2c2f3c 40%,#20222c);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.pf-music .pl-art{grid-area:art;padding:8px;min-height:0}
.pf-music .pl-art img{width:70px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.pf-music .pl-meta{grid-area:meta;margin:8px 8px 0 0;padding:6px 8px;text-align:left;
  background:#000;border:1px solid #111;box-shadow:inset 0 0 0 1px #3a3d4a;overflow:hidden;white-space:nowrap}
.pf-music .pl-t{--hand-acc:none;display:inline-block;font:700 14px/1.2 'Courier New',monospace;color:#39ff5a;letter-spacing:.04em;
  text-shadow:0 0 6px rgba(57,255,90,.5);margin:0;padding-left:100%;animation:pfMarquee 12s linear infinite}
@keyframes pfMarquee{to{transform:translateX(-100%)}}
.pf-music .pl-a{font:11px/1.4 'Courier New',monospace;color:#39ff5a;opacity:.8;letter-spacing:0;text-transform:none}
.pf-music .pl-a::after{content:' · 128 kbps · 44 kHz · stereo'}
.pf-music .pl-viz{grid-area:viz;height:42px;margin:6px 8px 0;padding:4px;background:#000;border:1px solid #111;gap:1px}
.pf-music .pl-viz i{background:linear-gradient(0deg,#39ff5a 0%,#d8ff3a 70%,#ff4a3a 100%);border-radius:0}
.pf-music .pl-ctrl{grid-area:ctrl;padding:6px 10px 10px}
.pf-music .pl-bar-t{height:6px;border-radius:0;background:#0b0c12;box-shadow:inset 0 1px 2px #000}
.pf-music .pl-bar-f{height:6px;border-radius:0;background:linear-gradient(90deg,#1c6b2a,#39ff5a)}
.pf-music .pl-bar-h{border-radius:2px;width:18px;height:10px;background:linear-gradient(180deg,#eee,#999)}
.pf-music .pl-times{font-family:'Courier New',monospace;color:#39ff5a}
.pf-music .pl-btns{gap:6px;margin-top:8px}
.pf-music .pl-btns button{width:36px;height:24px;border-radius:2px;color:#222;
  background:linear-gradient(180deg,#f2f2f2,#b9bcc6);border:1px solid #111;box-shadow:inset 0 1px 0 #fff}
.pf-music .pl-btns button:hover{transform:none;color:#000}
.pf-music .pl-btns svg{width:13px;height:13px}
.pf-music .pl-play{width:48px!important;height:24px!important;box-shadow:inset 0 1px 0 #fff!important;background:linear-gradient(180deg,#f2f2f2,#b9bcc6)!important;color:#222!important}
.pf-music .pl-note{color:#9aa0b8;font-size:10.5px;margin-top:8px}
.pf-music .pl-ctrl p{color:#cfd3e6!important}

/* the tracklist — the player's playlist window */
.pf-playlist .album-hero,.pf-playlist .pad{display:none}
.pf-playlist .tracks{background:#000;padding:2px 0;font-family:Arial,sans-serif}
.pf-playlist .trk{padding:3px 8px;gap:8px;color:#39ff5a}
.pf-playlist .trk + .trk{border-top:0}
.pf-playlist .trk:hover{background:#12151f}
.pf-playlist .trk.is-playing{background:#0b1f8a}
.pf-playlist .trk.is-playing .trk-t{color:#fff}
.pf-playlist .trk-art{width:22px;height:22px;border-radius:0;box-shadow:none}
.pf-playlist .trk-t{font-size:12px;font-weight:400;color:#39ff5a}
.pf-playlist .trk-s{display:none}
.pf-playlist .trk-n,.pf-playlist .trk-time{color:#39ff5a;font-family:Arial,sans-serif}
.pf-playlist .trk.locked .trk-t,.pf-playlist .trk.locked .trk-n,.pf-playlist .trk.locked .trk-time{color:#2d6b3a}
.pf-playlist .trk-go{width:18px;height:18px;background:none;color:#39ff5a}
.pf-playlist .trk:hover .trk-go{background:none;color:#fff}

.pf-about .about-top{padding:8px 8px 0}
.pf-about .about-top > img{display:none}
.pf-about .about-head .hd{display:none}
.pf-about .about-head{justify-content:flex-start}
.pf-about .about-p{font-size:12px;line-height:1.55}
.pf .facts{background:var(--pf-box-line);border-color:var(--pf-box-line);margin-top:10px;grid-template-columns:repeat(2,1fr)}
.pf .fact{background:var(--pf-box-bg)}
.pf .fact b{color:var(--pf-dim)}
.pf .soc{color:var(--pf-link);--ac:var(--pf-link)}

.pf-top8{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 6px;padding:0 8px 10px}
.pf-friend{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--pf-link)}
.pf-friend b{font-size:10.5px;text-decoration:underline;text-align:center}
.pf-friend-pic{width:100%;aspect-ratio:1;display:grid;place-items:center;background:#fff;border:1px solid var(--pf-box-line);overflow:hidden}
.pf-friend-pic img{width:100%;height:100%;object-fit:contain;padding:6px}
.pf-friend:hover .pf-friend-pic{outline:2px solid #ff6600}
/* the Kid's head is a cut-out: the same crop and mask as in his sheet */
.pf-kid{background:#0a1433;position:relative}
.pf-kid::before{content:'';position:absolute;inset:6%;
  background:url(../assets/img/kid/head.jpg) center/contain no-repeat;
  -webkit-mask:url(../assets/img/kid/head-m.png) center/contain no-repeat;mask:url(../assets/img/kid/head-m.png) center/contain no-repeat}

.pf-pics .gal{columns:4;column-gap:6px;padding:8px}
.pf-pics .gal figure{margin-bottom:6px;border-radius:0;box-shadow:none;border:1px solid var(--pf-box-line)}
/* 2009 had "Pics | Videos" as plain links, not a segmented control */
.pf-pics .gal-tabs{margin:8px 8px 0;padding:0;background:none;border-radius:0;gap:10px}
.pf-pics .gal-tab{padding:0;border-radius:0;font-size:12px;color:var(--pf-link);text-decoration:underline}
.pf-pics .gal-tab[aria-selected="true"]{background:none;box-shadow:none;color:var(--pf-text);text-decoration:none}
.pf-pics .bts-empty,.pf-pics .bts-empty b{color:var(--pf-dim)}

.pf-merch .store-grid{padding:10px;gap:8px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.pf .sku{border-radius:0;background:var(--pf-box-bg);border-color:var(--pf-box-line);color:var(--pf-text)}
.pf .sku p,.pf .store-note{color:var(--pf-dim)}
/* placeholders read in the page's own dim ink, not 2026's grey (lost on navy) */
.pf .sku .btn.is-soon{color:var(--pf-dim);border-color:var(--pf-box-line)}
.pf .sku:hover{transform:none;box-shadow:none}
.pf .store-note{padding:0 10px 10px}

.pf-credits .mount-body{max-height:420px;overflow:auto}
.pf .tr-marca,.pf .tr-hecho{border-radius:0;border-color:var(--pf-box-line)}
.pf .tr-marcas,.pf .tr-bloque{padding-left:10px;padding-right:10px}
.pf .tr-fila{border-color:var(--pf-box-line)}
.pf .tr-d{color:var(--pf-dim)}
.pf .tr-a{color:var(--pf-blurb-ink)}

/* the guestbook, as the comment wall: an avatar box beside every comment */
.pf-comments .gb-form{background:var(--pf-cell);border-bottom:1px solid var(--pf-box-line);padding:10px}
.pf-comments .gb-form input,.pf-comments .gb-form textarea{border-radius:0;border:1px solid #7f9db9;background:#fff;color:#000;font:12px Verdana,sans-serif}
.pf-comments .gb-count{color:var(--pf-cell-ink)}
.pf-comments .gb-list{padding:0}
.pf-comments .gb-item{display:grid;grid-template-columns:70px 1fr;grid-template-areas:"av msg" "av meta";column-gap:10px;
  padding:8px;border-bottom:1px solid var(--pf-box-line)}
.pf-comments .gb-item::before{content:'✦';grid-area:av;width:70px;height:70px;display:grid;place-items:center;
  font-size:28px;color:#ffd65a;background:#0a1433;border:1px solid var(--pf-box-line)}
.pf-comments .gb-msg{grid-area:msg;font-size:12px}
.pf-comments .gb-msg::before{content:none}
.pf-comments .gb-meta{grid-area:meta;color:var(--pf-link);font-family:Verdana,sans-serif;font-weight:700}
.pf-comments .gb-note{color:var(--pf-dim)}

.pf-foot{text-align:center;padding:18px 10px 26px;font-size:10.5px;color:var(--pf-dim)}
.pf-foot nav{margin-bottom:8px}
.pf-foot nav i{font-style:normal;margin:0 6px;opacity:.6}
.pf-foot p{margin:4px 0}
.pf-gen{font-style:italic}

/* ---------- a phone ---------- */
@media (max-width:840px),(max-height:500px) and (hover:none){
  .pf-top-in{height:auto;min-height:54px;padding:8px 10px;flex-wrap:wrap;gap:8px}
  .pf .pf-era{position:relative;left:auto;top:auto;transform:none;order:3;margin:0 auto}
  .pf-logo{font-size:22px}
  .pf-nav{overflow-x:auto;white-space:nowrap}
  .pf-page{margin-top:0;padding:8px 8px 0}
  .pf-cols{grid-template-columns:1fr}
  /* the sheet keeps its whole composition here — it is the header, not
     something to pan around as it is in the window */
  .pf-banner .scene-stage{overflow:hidden}
  .pf-banner .scene{width:100%}
  .pf-banner .scene-tip{display:none}
  /* At phone width the sheet's small print cannot shrink any further (its
     sizes have floors) and piles up on itself. In the header the drawing is
     the point; the full sheet, text and all, is one tap away. */
  .pf-banner .idcol,.pf-banner .id-stats,.pf-banner .pnl-bar b,.pf-banner .pc-lab{display:none}
  .pf-pics .gal{columns:3}
  .pf-top8{grid-template-columns:repeat(4,1fr)}
  body[data-skin="profile"] .win-body{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .pf-glitter,.pf-music .pl-t,.pf-online i{animation:none}
  .pf-music .pl-t{padding-left:0}
}

/* An empty Top 8 seat: the head-and-shoulders a profile had before its
   photo went up. Plain spans, not buttons — there is nobody to visit yet. */
.pf-open{cursor:default}
.pf-open b{text-decoration:none;opacity:.5}
.pf-open .pf-friend-pic,.pf-nopic .pf-friend-pic{background:
  radial-gradient(circle at 50% 38%,#c9ced8 0 17%,transparent 17.5%),
  radial-gradient(ellipse 34% 26% at 50% 88%,#c9ced8 0 99%,transparent 100%) #eef0f4}
.pf-open:hover .pf-friend-pic{outline:none}

/* A patron's photo fills the seat, like a real profile picture. */
a.pf-friend .pf-friend-pic img{object-fit:cover;padding:0}

/* Previous / next song: the band page's own grey buttons. */
body[data-skin="profile"] .pf-music .pl-skip{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;
  font:11px/1 'Courier New',monospace;color:#39ff5a}
body[data-skin="profile"] .pf-music .pl-skip button{width:32px;height:22px;border-radius:2px;color:#222;display:grid;place-items:center;
  background:linear-gradient(180deg,#f2f2f2,#b9bcc6);box-shadow:inset 0 1px 0 #fff;border:1px solid #555}
body[data-skin="profile"] .pf-music .pl-skip svg{width:12px;height:12px;fill:currentColor}

/* Same for the band page's footer on a phone: it scrolls clear of EL KID. */
@media (max-width:840px),(max-height:500px) and (hover:none){ .pf-foot{padding-bottom:110px} }

/* The "Hear it first" card (app.js, offerSignup) is built outside #profile,
   so it can't read the .pf tokens: the two palettes are written out here.
   A profile box, not an OS card: a header bar, Verdana, square corners, a
   plain inset field and a grey push button, the way 2009 forms looked. */
body[data-skin="profile"] .signup{padding:0;border-radius:0;border:1px solid #3f67b8;
  background:rgba(12,20,64,.96);color:#e7ebff;box-shadow:none;
  font:11px/1.45 Verdana,Geneva,Tahoma,sans-serif}
body[data-skin="profile"] .su-t{margin:0;padding:3px 26px 3px 7px;background:#16307c;color:#fff;font:700 12px/1.4 Verdana,sans-serif}
body[data-skin="profile"] .su-x{top:1px;right:3px;width:20px;height:20px;border-radius:0;color:#fff;font-size:15px}
body[data-skin="profile"] .su-x:hover,body[data-skin="profile"] .su-x:focus-visible{background:rgba(255,255,255,.18)}
body[data-skin="profile"] .su-l{margin:8px 8px 7px;color:#9aa6d6;font-size:11px}
body[data-skin="profile"] .su-f{margin:0 8px 9px;gap:5px}
body[data-skin="profile"] .su-f input[type=email]{padding:3px 5px;border:1px solid #7f9db9;border-radius:0;background:#fff;color:#000;font:11px Verdana,sans-serif}
body[data-skin="profile"] .su-f input[type=email]:focus{box-shadow:none;border-color:#ff6600}
body[data-skin="profile"] .su-f .btn{padding:3px 10px;border:1px solid #707070;border-radius:2px;
  background:linear-gradient(180deg,#fff,#dcdcdc);color:#000;font:11px Verdana,sans-serif;box-shadow:none}
body[data-skin="profile"] .su-f .btn:hover{background:linear-gradient(180deg,#fff,#cfe3ff);border-color:#3c7fb1}
body[data-skin="profile"] .su-done{margin:8px;color:#ffb14a;font:700 11px Verdana,sans-serif}
/* the stock profile, by day */
body.light[data-skin="profile"] .signup{border-color:#6698cb;background:#fff;color:#000}
body.light[data-skin="profile"] .su-t{background:#6698cb}
body.light[data-skin="profile"] .su-l{color:#555}
body.light[data-skin="profile"] .su-done{color:#ff6600}
/* the album row's download pill, in the playlist's green */
.pf-playlist .trk-dl{margin-right:8px;padding:1px 6px;border-radius:0;border-color:#39ff5a;color:#39ff5a;font-family:Arial,sans-serif;font-size:11px}
.pf-playlist .trk-dl:hover,.pf-playlist .trk-dl:focus-visible{background:#39ff5a;color:#000;border-color:#39ff5a}