/* Concepto: la historia de amor como un álbum de vinilo. Lado A = antes y el inicio, Lado B = nosotros.
   Editor en papel rosado; experiencia de quien recibe en "noche de vinilo" color vino. Columna móvil de 560px. */
:root{
  --paper:#FBF1EE; --card:#FFFFFF; --ink:#3A1620; --muted:#86606B; --line:#EBCFCB;
  --wine:#6E1F35; --rose:#D9567A; --blush:#F4D7D3; --gold:#C99A5B;
  --night:#22081A; --night2:#3A0F28; --cream:#FFF6EE; --cream-muted:#D9B9C1;
  --ok:#3E8E6B;
  --f-display:'Gloock', 'Georgia', serif;
  --f-body:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-hand:'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  color-scheme: light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
img{max-width:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html,body{min-height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;transition:background .5s}
body.dark{background:radial-gradient(120% 80% at 50% 0%, var(--night2), var(--night) 70%) fixed;color:var(--cream);color-scheme:dark}
#app{max-width:560px;margin:0 auto;padding-inline:16px;padding-block:20px 56px;position:relative;z-index:1}
h1,h2,h3{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0;line-height:1.1}
p{margin:0}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--rose);outline-offset:2px;border-radius:6px}

/* corazones flotantes */
.hearts{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hearts span{position:absolute;bottom:-40px;color:var(--rose);opacity:.16;animation:float linear infinite;font-size:var(--s,18px)}
body.dark .hearts span{opacity:.22}
@keyframes float{to{transform:translateY(-115vh) rotate(25deg)}}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:14px 22px;font-weight:600;background:var(--wine);color:var(--cream);transition:transform .15s, background .2s;text-decoration:none;min-height:48px}
.btn:hover{background:#5A182B}
.btn:active{transform:scale(.97)}
.btn.rose{background:var(--rose);color:#fff}
.btn.rose:hover{background:#C44669}
.btn.ghost{background:transparent;color:var(--wine);border:1.5px solid var(--line)}
.btn.ghost:hover{background:var(--blush)}
body.dark .btn.ghost{color:var(--cream);border-color:rgba(255,246,238,.25)}
body.dark .btn.ghost:hover{background:rgba(255,246,238,.08)}
.btn.small{padding:9px 14px;min-height:38px;font-size:14px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.row.between{justify-content:space-between;align-items:center}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);font-weight:700}
.hint{font-size:14px;color:var(--muted)}
body.dark .hint{color:var(--cream-muted)}
.hand{font-family:var(--f-hand)}

/* ---------- HOME ---------- */
.home{display:grid;gap:28px}
.home h1{font-size:clamp(44px,12vw,64px);color:var(--wine)}
.home .lede{font-size:18px;max-width:46ch}
.mini-album{position:relative;width:min(260px,70vw);aspect-ratio:1;margin:6px 0 0}
.mini-album .vin{position:absolute;top:6%;right:-26%;width:88%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--rose) 0 17%,#2b1a1f 17.5% 19%,transparent 19.5%),repeating-radial-gradient(circle,#161012 0 2px,#262022 2px 4px);
  box-shadow:0 10px 30px rgba(58,22,32,.25);animation:spin 9s linear infinite}
.mini-album .sl{position:absolute;inset:0;border-radius:6px;background:linear-gradient(150deg,#8A2A46,var(--wine) 55%,#4A1124);color:var(--cream);padding:18px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 18px 40px rgba(58,22,32,.3)}
.mini-album .sl b{font-family:var(--f-display);font-weight:400;font-size:30px;line-height:1}
.mini-album .sl small{letter-spacing:.12em;text-transform:uppercase;font-size:11px;opacity:.8}
.mini-album .sl .hrt{font-size:34px;color:var(--rose)}
.how{display:grid;gap:12px;padding:0;margin:0;list-style:none;counter-reset:s}
.how li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;counter-increment:s}
.how li::before{content:counter(s);width:34px;height:34px;border-radius:50%;background:var(--blush);color:var(--wine);display:grid;place-items:center;font-weight:700}
.note{font-size:13px;color:var(--muted);border-top:1px dashed var(--line);padding-top:14px}

/* ---------- EDITOR ---------- */
.ed-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.linkbtn{background:none;border:0;color:var(--wine);font-weight:600;padding:6px 0}
.saved{font-size:13px;color:var(--ok);opacity:0;transition:opacity .3s}
.saved.on{opacity:1}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:22px}
.steps button{border:0;background:none;padding:0;text-align:left;color:var(--muted);font-size:12px;font-weight:600}
.steps button i{display:block;height:5px;border-radius:5px;background:var(--line);margin-bottom:6px}
.steps button.done i{background:var(--rose)}
.steps button.cur{color:var(--wine)}
.steps button.cur i{background:var(--wine)}
.panel{background:var(--card);border-radius:20px;padding:22px 18px;display:grid;gap:18px;box-shadow:0 1px 0 var(--line),0 12px 30px rgba(110,31,53,.07)}
.panel h2{font-size:28px;color:var(--wine)}
.field{display:grid;gap:6px}
.field>span{font-weight:600;font-size:14px}
input[type=text],input[type=date],input[type=url],select,textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;color:var(--ink);background:var(--paper)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--rose);background:#fff}
textarea{min-height:150px;resize:vertical;line-height:1.55}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){.two{grid-template-columns:1fr}}
.err{color:#B3263E;font-size:14px;font-weight:600}
.countbox{display:grid;gap:10px;text-align:center}
.countbox output{font-family:var(--f-display);font-size:64px;color:var(--wine);line-height:1}
input[type=range]{width:100%;accent-color:var(--rose)}
.price{display:flex;justify-content:space-between;align-items:center;background:var(--paper);border-radius:14px;padding:12px 14px;font-size:14px}
.price b{font-size:18px;color:var(--wine)}
.tracklist{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:420px){.tracklist{grid-template-columns:1fr}}
.tracklist h3{font-size:16px;color:var(--rose);font-family:var(--f-body);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.tracklist ol{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:14px}
.tracklist li{display:grid;grid-template-columns:28px 1fr;gap:6px}
.tracklist li span{color:var(--muted);font-variant-numeric:tabular-nums}

.chap-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.track{font-family:var(--f-display);font-size:34px;color:var(--rose);line-height:1}
.dots{display:flex;flex-wrap:wrap;gap:6px}
.dots button{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);font-size:11px;font-weight:700;color:var(--muted);padding:0}
.dots button.part{border-color:var(--rose);color:var(--rose)}
.dots button.full{background:var(--rose);border-color:var(--rose);color:#fff}
.dots button.cur{outline:2px solid var(--wine);outline-offset:2px}
.media{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start}
@media (max-width:420px){.media{grid-template-columns:96px 1fr}}
.photo-drop{position:relative;aspect-ratio:5/6;border-radius:10px;border:2px dashed var(--line);display:grid;place-items:center;text-align:center;font-size:13px;color:var(--muted);overflow:hidden;cursor:pointer;background:var(--paper)}
.photo-drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.guide{background:var(--paper);border-radius:14px;padding:14px;display:grid;gap:6px}
.guide b{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--rose)}
.guide p{font-family:var(--f-hand);font-size:24px;line-height:1.15;color:var(--wine)}
.guide ul{margin:4px 0 0;padding-left:18px;font-size:13px;color:var(--muted);display:grid;gap:2px}
.recbox{border:1.5px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:10px}
.recbox .rec-title{font-weight:700;font-size:14px}
.recbtn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:12px 20px;background:var(--rose);color:#fff;font-weight:700;min-height:48px}
.recbtn .dot{width:12px;height:12px;border-radius:50%;background:#fff}
.recbtn.live{background:var(--wine)}
.recbtn.live .dot{background:#FF5A7A;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.rec-time{font-variant-numeric:tabular-nums;font-weight:700;color:var(--wine)}
.upload-link{position:relative;font-size:14px;color:var(--wine);font-weight:600;text-decoration:underline;cursor:pointer;overflow:hidden;display:inline-block}
.upload-link input{position:absolute;inset:0;opacity:0;cursor:pointer}
audio{width:100%;height:40px}
.spot{width:100%;border:0;border-radius:12px;display:block}
.spot-link{font-size:13px;color:inherit;opacity:.8}
.spot-card{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:#1E1418;color:#fff;text-decoration:none}
.spot-card .spot-dot{width:38px;height:38px;border-radius:50%;background:#1DB954;display:grid;place-items:center;color:#111;font-weight:700;flex:none}
.spot-card b{display:block;font-weight:600}
.spot-card small{opacity:.75}
.ok{color:var(--ok);font-weight:600;font-size:14px}
.toggle{display:flex;gap:10px;align-items:center;font-weight:600}
.toggle input{width:22px;height:22px;accent-color:var(--rose)}
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.summary div{background:var(--paper);border-radius:14px;padding:12px 6px}
.summary b{display:block;font-family:var(--f-display);font-size:28px;font-weight:400;color:var(--wine);font-variant-numeric:tabular-nums}
.summary span{font-size:12px;color:var(--muted)}
.giftcard{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;background:linear-gradient(150deg,#8A2A46,var(--wine) 60%,#4A1124);color:var(--cream);border-radius:18px;padding:18px}
@media (max-width:420px){.giftcard{grid-template-columns:1fr;justify-items:center;text-align:center}}
.giftcard .qr{background:#fff;padding:0;border-radius:10px;width:168px;height:168px;display:grid;place-items:center;overflow:hidden}
.giftcard .qr img,.giftcard .qr canvas{display:block}
.giftcard h3{font-size:26px}
.giftcard .hand{font-size:22px;color:var(--blush)}
.copyrow{display:flex;gap:8px;align-items:center;background:var(--paper);border-radius:12px;padding:8px 8px 8px 12px;min-width:0}
.copyrow code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}

/* ---------- PLAYER ---------- */
.pl{display:grid;gap:18px;justify-items:center;text-align:center;min-height:calc(100vh - 80px);align-content:center}
.pl-top{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--cream-muted)}
.pl-top button{background:none;border:0;color:var(--cream-muted);padding:6px 0;font-weight:600}
.progress{width:100%;height:3px;background:rgba(255,246,238,.15);border-radius:3px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--rose);transition:width .5s}

.env-wrap{display:grid;gap:22px;justify-items:center;cursor:pointer;border:0;background:none;color:inherit;padding:0}
.env{position:relative;width:min(320px,82vw);aspect-ratio:4/3;perspective:800px}
.env .back{position:absolute;inset:0;background:#F2CFC9;border-radius:10px;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.env .letter{position:absolute;left:8%;right:8%;top:10%;bottom:8%;background:var(--cream);border-radius:6px;transition:transform .8s .35s cubic-bezier(.2,.8,.2,1);display:grid;place-items:center;color:var(--wine);font-family:var(--f-hand);font-size:26px}
.env .front{position:absolute;inset:0;border-radius:10px;background:linear-gradient(to top right,#F6D9D4 50%,transparent 50.5%) left/50.5% 100% no-repeat,linear-gradient(to top left,#F6D9D4 50%,transparent 50.5%) right/50.5% 100% no-repeat}
.env .flap{position:absolute;left:0;right:0;top:0;height:58%;background:#EDBFB8;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .6s;border-radius:10px 10px 0 0}
.env .seal{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#A3324F,var(--wine));display:grid;place-items:center;color:#FFC9D6;font-size:24px;box-shadow:0 4px 10px rgba(0,0,0,.3);transition:opacity .3s}
.env.open .flap{transform:rotateX(180deg)}
.env.open .seal{opacity:0}
.env.open .letter{transform:translateY(-55%)}
.env-wrap .to{font-family:var(--f-hand);font-size:38px;line-height:1}
.env-wrap .tap{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-muted);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}

.sleeve-wrap{position:relative;width:min(280px,66vw);aspect-ratio:1;margin-right:18%}
.sleeve-wrap .vin{position:absolute;top:5%;left:5%;width:90%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--rose) 0 17%,#2b1a1f 17.5% 19%,transparent 19.5%),repeating-radial-gradient(circle,#120c0e 0 2px,#221b1e 2px 4px);
  box-shadow:0 10px 40px rgba(0,0,0,.5);animation:slideout 1.2s .3s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes slideout{to{left:38%}}
.sleeve{position:absolute;inset:0;border-radius:6px;background:linear-gradient(150deg,#9B3253,var(--wine) 55%,#3E0E1F);padding:20px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;box-shadow:0 24px 50px rgba(0,0,0,.45)}
.sleeve small{letter-spacing:.14em;text-transform:uppercase;font-size:11px;color:var(--blush)}
.sleeve h1{font-size:clamp(30px,9vw,40px);color:var(--cream)}
.sleeve .hand{font-size:22px;color:var(--blush)}
.counter{display:grid;gap:4px}
.counter .big{font-family:var(--f-display);font-size:22px}
.counter .clock{font-variant-numeric:tabular-nums;color:var(--cream-muted);font-size:14px;letter-spacing:.08em}

.polaroid{margin:0;background:var(--cream);padding:12px 12px 14px;border-radius:3px;box-shadow:0 22px 50px rgba(0,0,0,.45);transform:rotate(-2deg);width:min(300px,76vw);animation:drop .6s cubic-bezier(.2,.8,.2,1)}
.polaroid:nth-of-type(even){transform:rotate(2deg)}
@keyframes drop{from{opacity:0;transform:translateY(-16px) rotate(-6deg)}}
.polaroid img{display:block;width:100%;aspect-ratio:5/6;object-fit:cover;border-radius:2px}
.polaroid figcaption{color:#3A1620;font-family:var(--f-hand);font-size:28px;line-height:1.05;padding-top:10px}
.polaroid figcaption small{display:block;font-size:20px;color:#86606B}
.deck{width:100%;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:rgba(255,246,238,.06);border-radius:18px;padding:12px 14px;text-align:left}
.vinyl{width:62px;height:62px;border-radius:50%;background:radial-gradient(circle,var(--rose) 0 22%,#2b1a1f 22.5% 24%,transparent 24.5%),repeating-radial-gradient(circle,#120c0e 0 1.5px,#2a2226 1.5px 3px);position:relative}
.vinyl::after{content:"♥";position:absolute;inset:0;display:grid;place-items:center;font-size:11px;color:#fff}
.vinyl.spin{animation:spin 2.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.voice{display:grid;gap:6px;min-width:0}
.voice .who{font-size:13px;color:var(--cream-muted)}
.voice .ctl{display:flex;align-items:center;gap:10px}
.play{width:42px;height:42px;border-radius:50%;border:0;background:var(--rose);color:#fff;font-size:15px;flex:none;display:grid;place-items:center}
.wave{flex:1;display:flex;align-items:center;gap:2px;height:30px;min-width:0}
.wave i{flex:1;border-radius:2px;background:rgba(255,246,238,.22);min-width:2px}
.wave i.on{background:var(--rose)}
.ptime{font-variant-numeric:tabular-nums;font-size:13px;color:var(--cream-muted);min-width:36px;text-align:right}
.sub{font-family:var(--f-hand);font-size:25px;line-height:1.2;max-width:30ch;min-height:1.2em;color:var(--cream)}
.demo-tag{font-size:12px;color:var(--cream-muted)}
.songcard{width:100%;display:grid;gap:8px;text-align:left;animation:rise .6s cubic-bezier(.2,.8,.2,1)}
.songcard .lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);font-weight:700}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.pl-nav{width:100%;display:flex;justify-content:space-between;gap:10px}
.btn.glow{box-shadow:0 0 0 0 rgba(217,86,122,.6);animation:glow 1.6s infinite}
@keyframes glow{70%{box-shadow:0 0 0 14px rgba(217,86,122,0)}}

.letter-card{background:var(--cream);color:#3A1620;border-radius:6px;padding:26px 22px;text-align:left;width:100%;box-shadow:0 22px 50px rgba(0,0,0,.4);font-family:var(--f-hand);font-size:25px;line-height:1.25;white-space:pre-wrap}
.letter-card .sig{display:block;text-align:right;margin-top:14px;color:var(--wine)}
.ask{position:relative;width:100%;display:grid;gap:18px;padding:22px 0 10px}
.ask h2{font-size:30px}
.ask .btns{position:relative;height:64px;display:flex;justify-content:center;gap:14px}
.ask .no{transition:transform .25s}
.yes-msg{font-family:var(--f-hand);font-size:34px;color:var(--rose)}
.burst{position:fixed;pointer-events:none;z-index:5;font-size:22px;color:var(--rose);animation:burst 1.4s ease-out forwards}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) scale(.6);opacity:0}}
.playlist{width:100%;text-align:left;display:grid;gap:8px}
.playlist h3{font-size:22px;margin-bottom:4px}
.playlist a{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,246,238,.06);color:var(--cream);text-decoration:none;font-size:15px}
.playlist a span:first-child{color:var(--rose);font-weight:700;font-variant-numeric:tabular-nums}
.playlist a small{color:var(--cream-muted)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hearts{display:none}
  .sleeve-wrap .vin{left:38%}
}

/* ───────── app real ───────── */
.center-msg{min-height:70vh;display:grid;place-content:center;gap:14px;text-align:center;justify-items:center}
.center-msg h1{font-size:34px;color:var(--wine)}
body.dark .center-msg h1{color:var(--cream)}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--blush);border-top-color:var(--rose);animation:spin 1s linear infinite}
.saved.err{color:#B3263E;opacity:1}
.uploading{font-size:13px;color:var(--rose);font-weight:600}
.inapp{width:100%;background:rgba(255,246,238,.1);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--cream)}
.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:420px){.share-grid{grid-template-columns:1fr}}
.share-grid .btn{width:100%}
.welcome{background:var(--blush);border-radius:14px;padding:12px 14px;font-size:14px}
.audio-row{display:flex;align-items:center;gap:10px}
.form-card{max-width:440px;width:100%;text-align:left}
@media print{
  body{background:#fff!important}
  body *{visibility:hidden}
  .giftcard,.giftcard *{visibility:visible}
  .giftcard{position:fixed;left:50%;top:40px;transform:translateX(-50%);width:12cm;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .hearts{display:none}
}
html{background:var(--paper)}
html:has(body.dark){background:var(--night)}
body.dark{min-height:100vh;background-color:var(--night)}
/* playlist en el editor */
.pl-box{border-top:1px dashed var(--line);padding-top:18px;display:grid;gap:14px}
.pl-box h3{font-size:24px;color:var(--wine)}
.pl-steps{margin:0;padding-left:20px;display:grid;gap:16px;font-size:15px}
.pl-steps>li{display:grid;gap:8px}
.pl-steps>li::marker{color:var(--rose);font-weight:700}
.cover-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.cover-row canvas{width:112px;height:112px;border-radius:6px;box-shadow:0 6px 16px rgba(58,22,32,.2)}
.pl-songs{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.pl-songs li a{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:9px 12px;border-radius:10px;background:var(--paper);color:var(--ink);text-decoration:none;font-size:14px}
.pl-songs li a span:first-child{color:var(--rose);font-weight:700;font-variant-numeric:tabular-nums}
.pl-songs li a small{color:var(--wine);font-weight:600}
/* firma en el regalo */
.brand{font-size:12px;color:var(--cream-muted);letter-spacing:.06em}
.brand a{color:inherit}

/* marca */
.brand-logo{display:block;height:30px;width:auto;max-width:100%}
.brand-logo.lg{height:52px;margin:0 auto 6px}
.brand-logo.home{height:46px}
.ed-top .brand-logo{height:28px}
.env-brand{height:26px;width:auto;opacity:.72;margin-top:6px}
.sleeve-mark{position:absolute;right:14px;bottom:14px;width:26px;height:26px;opacity:.9}
.sleeve{position:absolute}
.brand-sign{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;letter-spacing:.08em;color:var(--cream-muted);text-decoration:none}
.brand-sign img{height:26px;width:auto;opacity:.8}
.brand-sign:hover img{opacity:1}
.giftcard .gc-brand{height:18px;width:auto;opacity:.85;margin-top:4px}
.home-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.playlist a.spot-link{display:inline-block;background:none;padding:6px 0;font-size:13px;color:var(--cream-muted)}