/* Moshi Moshi -- an entertainment-magazine look: warm paper, serif headlines, vermilion accent. WCAG AA text colours in both themes. */
:root {
  --bg:#faf6ef; --card:#ffffff; --card2:#f3ede2; --ink:#16130f; --dim:#554f46; --faint:#6b6458;
  --line:rgba(22,19,15,.12); --line2:rgba(22,19,15,.22);
  --accent:#c42d17; --accent-ink:#ffffff; --accent-weak:rgba(196,45,23,.09);
  --ok:#1d6b3b; --warn:#8a5a00; --shadow:0 1px 2px rgba(40,25,10,.08),0 8px 24px -12px rgba(40,25,10,.28);
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI","Noto Sans JP","Hiragino Sans","Yu Gothic","Malgun Gothic","Microsoft YaHei","Noto Sans",sans-serif;
  --r:14px; color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#14110f; --card:#1f1b18; --card2:#2a2420; --ink:#f4efe7; --dim:#c2baac; --faint:#a39b8d;
  --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.24);
  --accent:#ff7a5c; --accent-ink:#1a0d08; --accent-weak:rgba(255,122,92,.14);
  --ok:#6fd28f; --warn:#f0b955; --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px -12px rgba(0,0,0,.7); color-scheme:dark;
}
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) {
  --bg:#14110f; --card:#1f1b18; --card2:#2a2420; --ink:#f4efe7; --dim:#c2baac; --faint:#a39b8d;
  --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.24);
  --accent:#ff7a5c; --accent-ink:#1a0d08; --accent-weak:rgba(255,122,92,.14);
  --ok:#6fd28f; --warn:#f0b955; --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px -12px rgba(0,0,0,.7); color-scheme:dark; } }

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:70px; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 15px/1.55 var(--sans); min-height:100vh; display:flex; flex-direction:column; padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
a { color:inherit; } img { max-width:100%; }
button { font:inherit; color:inherit; cursor:pointer; }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:6px; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:-999px; top:8px; background:var(--accent); color:var(--accent-ink); padding:8px 14px; border-radius:8px; z-index:100; }
.skip:focus { left:8px; }
[hidden] { display:none !important; }

/* masthead */
.mast { position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top); }
.mast-in { max-width:1280px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:14px; }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; flex:none; }
.brand img { border-radius:8px; width:32px; height:32px; }
.brand-t { font:800 22px/1 var(--serif); letter-spacing:-.02em; }
.nav { display:none; gap:2px; margin-left:8px; }
.nav a { text-decoration:none; padding:8px 12px; border-radius:999px; font-weight:600; font-size:14px; color:var(--dim); }
.nav a:hover { background:var(--card2); color:var(--ink); }
.nav a[aria-current="page"] { background:var(--ink); color:var(--bg); }
.gsearch { flex:1; min-width:0; }
.gsearch input { width:100%; padding:10px 14px; border-radius:999px; border:1px solid var(--line2); background:var(--card); color:var(--ink); font:inherit; font-size:14px; }
.gsearch input::placeholder { color:var(--faint); }
.ibtn { flex:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--line2); background:var(--card); display:grid; place-items:center; }
.ibtn:hover { background:var(--card2); }

/* bottom tab bar (phones) */
.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; background:var(--card); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.tabbar a { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px 7px; text-decoration:none; font-size:11px; font-weight:600; color:var(--faint); min-height:56px; }
.tabbar a svg { width:22px; height:22px; }
.tabbar a[aria-current="page"] { color:var(--accent); }
@media (min-width:860px) { .nav { display:flex; } .tabbar { display:none; } body { padding-bottom:0; } .gsearch { max-width:380px; margin-left:auto; } }

.notice { max-width:1280px; margin:12px auto 0; padding:10px 14px; border:1px solid var(--line2); border-left:5px solid var(--warn); background:var(--card); border-radius:10px; font-size:13.5px; width:calc(100% - 32px); }
.updatebar { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(76px + env(safe-area-inset-bottom)); z-index:60; background:var(--ink); color:var(--bg); padding:10px 12px 10px 16px; border-radius:999px; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow); font-size:14px; }
.updatebar button { border:0; border-radius:999px; padding:7px 14px; font-weight:700; background:var(--accent); color:var(--accent-ink); }
.updatebar #updx { background:none; color:inherit; padding:4px 8px; font-size:18px; }
@media (min-width:860px) { .updatebar { bottom:20px; } }

main { flex:1; width:100%; max-width:1280px; margin:0 auto; padding:18px 16px 40px; outline:0; }
.loading { color:var(--faint); padding:60px 0; text-align:center; }
.foot { max-width:1280px; margin:0 auto; width:100%; padding:14px 16px 24px; display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between; font-size:12px; color:var(--faint); border-top:1px solid var(--line); }
.foot a { color:var(--dim); }

/* type */
.kicker { font:700 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
h1,h2,h3 { font-family:var(--serif); letter-spacing:-.02em; line-height:1.1; margin:0; }
.sec { margin:34px 0 0; }
.sec-h { display:flex; align-items:baseline; justify-content:space-between; gap:12px; border-top:3px solid var(--ink); padding-top:10px; margin-bottom:14px; }
.sec-h h2 { font-size:26px; font-weight:800; }
.sec-h .sub { color:var(--faint); font-size:13px; margin-left:10px; font-family:var(--sans); font-weight:500; letter-spacing:0; }
.more { font-size:13px; font-weight:700; color:var(--accent); text-decoration:none; white-space:nowrap; }
.more:hover { text-decoration:underline; }

/* controls */
.seg { display:inline-flex; background:var(--card2); border-radius:999px; padding:3px; gap:2px; }
.seg button { border:0; background:none; padding:7px 14px; border-radius:999px; font-weight:600; font-size:13px; color:var(--dim); }
.seg button[aria-pressed="true"] { background:var(--ink); color:var(--bg); }
.chips { display:flex; flex-wrap:wrap; gap:7px; }
.chip { border:1px solid var(--line2); background:var(--card); border-radius:999px; padding:6px 12px; font-size:13px; font-weight:500; color:var(--ink); display:inline-flex; align-items:center; gap:6px; }
.chip small { color:var(--faint); font-size:11.5px; font-weight:600; }
.chip:hover { border-color:var(--ink); }
.chip[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.chip[aria-pressed="true"] small { color:inherit; opacity:.85; }
.chip[disabled] { opacity:.45; cursor:not-allowed; }
.btn { border:1px solid var(--line2); background:var(--card); border-radius:999px; padding:9px 16px; font-weight:600; font-size:14px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.btn:hover { border-color:var(--ink); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.field { display:block; font-size:12px; font-weight:700; color:var(--dim); letter-spacing:.04em; text-transform:uppercase; margin:16px 0 6px; }
.in, select.in { width:100%; padding:9px 12px; border-radius:10px; border:1px solid var(--line2); background:var(--card); color:var(--ink); font:inherit; font-size:14px; }
input[type=range] { width:100%; accent-color:var(--accent); }

/* poster cards */
.rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(138px,158px); gap:14px; overflow-x:auto; padding:2px 2px 14px; scroll-snap-type:x proximity; scrollbar-width:thin; margin:0 -16px; padding-left:16px; padding-right:16px; }
.rail > * { scroll-snap-align:start; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:18px 14px; }
@media (min-width:640px) { .grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:22px 16px; } .rail { grid-auto-columns:minmax(160px,180px); } }
.card { display:block; text-decoration:none; position:relative; }
.poster { position:relative; aspect-ratio:2/3; border-radius:var(--r); overflow:hidden; background:var(--card2); box-shadow:var(--shadow); }
.poster img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
.card:hover .poster img { transform:scale(1.04); }
.ph { position:absolute; inset:0; display:flex; align-items:flex-end; padding:12px; font:700 16px/1.15 var(--serif); color:#fff; background:linear-gradient(160deg,hsl(var(--h) 55% 38%),hsl(calc(var(--h) + 40) 50% 22%)); }
.badges { position:absolute; left:8px; top:8px; display:flex; gap:5px; flex-wrap:wrap; }
.bdg { font:700 10.5px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; padding:5px 7px; border-radius:6px; background:rgba(15,12,10,.82); color:#fff; }
.bdg.k { background:var(--accent); color:var(--accent-ink); }
.score { position:absolute; right:8px; bottom:8px; background:rgba(15,12,10,.86); color:#fff; border-radius:8px; padding:4px 8px; font:700 13px/1.2 var(--sans); }
.score small { font-weight:600; opacity:.8; font-size:10px; display:block; letter-spacing:.04em; text-transform:uppercase; }
.wl { position:absolute; right:8px; top:8px; width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-size:13px; font-weight:800; }
.rk { position:absolute; left:-4px; bottom:30px; font:800 64px/1 var(--serif); color:#fff; -webkit-text-stroke:2px rgba(0,0,0,.75); text-shadow:0 2px 12px rgba(0,0,0,.6); pointer-events:none; }
.ct { margin-top:9px; font:700 15px/1.25 var(--serif); letter-spacing:-.01em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cm { margin-top:3px; font-size:12.5px; color:var(--faint); }
.cm .cds { color:var(--accent); font-weight:700; }

/* home */
.mhead { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:10px 20px; padding-bottom:6px; }
.mhead h1 { font-size:clamp(34px,6vw,60px); font-weight:800; }
.mhead .date { color:var(--faint); font-size:13px; margin-top:6px; }
.fbar { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin:16px 0 4px; }
.hero { display:grid; gap:18px; margin-top:20px; background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); position:relative; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(30px) saturate(1.3); opacity:.28; transform:scale(1.2); }
.hero-in { position:relative; display:grid; grid-template-columns:130px 1fr; gap:18px; padding:18px; align-items:center; }
.hero .poster { box-shadow:0 12px 30px -10px rgba(0,0,0,.5); }
.hero h2 { font-size:clamp(24px,4.5vw,42px); font-weight:800; margin:8px 0; }
.hero p { margin:0 0 12px; color:var(--dim); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; max-width:62ch; }
@media (min-width:700px) { .hero-in { grid-template-columns:220px 1fr; gap:30px; padding:26px 30px; } }
.cdbox { display:inline-flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:12px; background:var(--accent-weak); border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); }
.cdbox .cd { font:800 24px/1.1 var(--serif); font-variant-numeric:tabular-nums; color:var(--accent); }
.cdbox .lt { font-size:12.5px; color:var(--dim); }
.airlist { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); }
.airrow { display:flex; gap:12px; align-items:center; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:8px; }
.airrow:hover { border-color:var(--ink); }
.airrow img,.airrow .ph2 { width:48px; height:72px; border-radius:8px; object-fit:cover; flex:none; background:var(--card2); }
.airrow b { display:block; font:700 14.5px/1.25 var(--serif); }
.airrow span { font-size:12.5px; color:var(--faint); display:block; }
.airrow .cds { color:var(--accent); font-weight:700; }

/* browse */
.bwrap { display:grid; gap:20px; margin-top:12px; }
@media (min-width:900px) { .bwrap { grid-template-columns:280px 1fr; align-items:start; } .side { position:sticky; top:76px; max-height:calc(100vh - 92px); overflow:auto; padding-right:6px; } }
.side { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:6px 16px 18px; }
@media (max-width:899px) { .side[data-open="0"] .sidebody { display:none; } }
.sidehead { display:flex; justify-content:space-between; align-items:center; padding:10px 0 2px; font-weight:700; }
.sidehead .btn { padding:6px 12px; font-size:13px; }
.rhead { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 14px; margin-bottom:14px; }
.rhead h1,.rhead h2 { font-size:28px; }
.count { color:var(--faint); font-size:13.5px; }
.tselected { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.tcloud { max-height:210px; overflow:auto; padding:2px; display:flex; flex-wrap:wrap; gap:6px; }
.empty { padding:40px 16px; text-align:center; color:var(--dim); border:1px dashed var(--line2); border-radius:14px; }
.pgmore { display:flex; justify-content:center; margin:26px 0 6px; }
.yrs { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tpage .tcloud { max-height:none; }
.bigcloud .chip { font-size:14px; padding:8px 14px; }

/* title page */
.thero { position:relative; border-radius:20px; overflow:hidden; background:var(--card2); border:1px solid var(--line); margin-top:4px; }
.thero-bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(26px) saturate(1.3); opacity:.35; transform:scale(1.25); }
.thero-in { position:relative; display:grid; grid-template-columns:112px 1fr; gap:16px; padding:18px; }
@media (min-width:760px) { .thero-in { grid-template-columns:250px 1fr; gap:30px; padding:28px; } }
.thero h1 { font-size:clamp(26px,5vw,48px); font-weight:800; margin:8px 0 2px; }
.orig { color:var(--dim); font-size:15px; margin-bottom:10px; }
.facts { display:flex; flex-wrap:wrap; gap:6px 8px; margin:10px 0; }
.fact { background:var(--card); border:1px solid var(--line); border-radius:999px; padding:4px 11px; font-size:13px; font-weight:500; }
.tsyn { max-width:70ch; font-size:16px; line-height:1.65; white-space:pre-line; }
.wlbox { margin:14px 0 4px; }
.wlbox .seg button { padding:8px 14px; }
.cols { display:grid; gap:24px; margin-top:6px; }
@media (min-width:900px) { .cols { grid-template-columns:2fr 1fr; align-items:start; } }
.panel { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 18px; }
.panel + .panel { margin-top:16px; }
.panel h3 { font-size:20px; margin-bottom:10px; }
.panel .lab { font:700 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
dl.kv { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:0; font-size:14px; }
dl.kv dt { color:var(--faint); } dl.kv dd { margin:0; font-weight:500; }
.cast { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.cast li { background:var(--card2); border-radius:10px; padding:9px 11px; font-size:14px; }
.cast li b { display:block; font-weight:600; } .cast li span { color:var(--faint); font-size:12.5px; }
.srcs { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.srcbox { border:1px solid var(--line2); border-radius:12px; padding:12px 14px; background:var(--bg); }
.srcbox .big { font:800 34px/1 var(--serif); font-variant-numeric:tabular-nums; }
.srcbox .big small { font:600 14px var(--sans); color:var(--faint); }
.srcbox .nm { font-weight:700; font-size:13.5px; margin-top:6px; }
.srcbox p { margin:4px 0 0; font-size:12.5px; color:var(--dim); }
.srcbox.ext { border-top:4px solid var(--ink); } .srcbox.com { border-top:4px solid var(--ok); } .srcbox.you { border-top:4px solid var(--accent); }
.srcbox .tag { display:inline-block; font:700 10.5px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; padding:4px 7px; border-radius:5px; background:var(--card2); margin-bottom:8px; }
.stars { display:flex; gap:3px; flex-wrap:wrap; margin:8px 0; }
.stars button { width:34px; height:34px; border-radius:8px; border:1px solid var(--line2); background:var(--card); font-weight:700; font-size:13px; }
.stars button[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
textarea.in { min-height:84px; resize:vertical; }
.small { font-size:12.5px; color:var(--faint); }
.sample-tag { display:inline-block; background:var(--warn); color:#fff; font:700 10.5px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; padding:4px 7px; border-radius:5px; }
:root[data-theme="dark"] .sample-tag { color:#1a1000; }
.back { display:inline-block; margin:2px 0 12px; font-weight:600; font-size:14px; color:var(--dim); text-decoration:none; }
.back:hover { color:var(--accent); }

/* watchlist */
.wrow { display:grid; grid-template-columns:64px 1fr; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px; align-items:center; }
.wrow + .wrow { margin-top:10px; }
.wrow img,.wrow .ph2 { width:64px; height:96px; border-radius:8px; object-fit:cover; background:var(--card2); }
.wrow h3 { font-size:17px; } .wrow .meta { color:var(--faint); font-size:13px; margin:2px 0 6px; }
.wrow .act { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.wrow select { padding:6px 8px; border-radius:8px; border:1px solid var(--line2); background:var(--card); color:var(--ink); font:inherit; font-size:13px; }
.wrow .rm { border:0; background:none; color:var(--faint); text-decoration:underline; font-size:13px; padding:4px; }
.prose { max-width:70ch; } .prose h2 { font-size:24px; margin:26px 0 8px; } .prose p, .prose li { color:var(--dim); }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto !important; } .card:hover .poster img { transform:none; } }

/* small-screen safety: grid children may shrink, long titles wrap, segmented controls wrap */
.hero-in > div, .thero-in > div, .cols > *, .bwrap > * { min-width:0; }
.hero h2, .thero h1, .ct, .airrow b, .wrow h3 { overflow-wrap:anywhere; }
.wlbox .seg, .fbar .seg { flex-wrap:wrap; border-radius:18px; }
@media (max-width:420px) { .hero-in { grid-template-columns:104px 1fr; gap:14px; padding:14px; } .thero-in { grid-template-columns:104px 1fr; } .cdbox .cd { font-size:21px; } }
main:focus, main:focus-visible { outline:0; }

.mascot { flex:none; width:46px; height:46px; border-radius:50%; display:block; box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--line2); }
.mascot img { width:100%; height:100%; border-radius:50%; display:block; }
@media (min-width:860px) { .mascot, .mascot img { width:52px; height:52px; } }
@media (max-width:420px) { .mast-in { gap:8px; padding:8px 12px; } .brand-t { font-size:19px; } .brand img { width:26px; height:26px; } .mascot, .mascot img { width:40px; height:40px; } }

.aboutart { margin:0 0 18px; } .aboutart img { display:block; width:100%; max-width:420px; height:auto; border-radius:18px; box-shadow:var(--shadow); }

/* music */
.mcard .mart { aspect-ratio:1/1; } .mcard .cm { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rail:has(.mcard) { grid-auto-columns:minmax(150px,170px); }
.chart { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; }
.trk { display:grid; grid-template-columns:42px 60px 1fr auto; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 12px; }
.trk.top { border-color:var(--accent); background:linear-gradient(90deg,var(--accent-weak),var(--card) 70%); grid-template-columns:46px 84px 1fr auto; padding:14px 14px; }
.trk .num { font:800 30px/1 var(--serif); text-align:center; color:var(--faint); font-variant-numeric:tabular-nums; }
.trk.top .num { font-size:38px; color:var(--accent); }
.tart { width:60px; height:60px; border-radius:10px; object-fit:cover; background:var(--card2); box-shadow:var(--shadow); } .trk.top .tart { width:84px; height:84px; }
.tinfo { min-width:0; } .tinfo b { display:block; font:700 16px/1.25 var(--serif); overflow-wrap:anywhere; } .tinfo span { display:block; color:var(--dim); font-size:13.5px; overflow-wrap:anywhere; } .tinfo .small { color:var(--faint); font-size:12px; }
.no1 { display:inline-block; font:700 10.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; background:var(--accent); color:var(--accent-ink); padding:4px 7px; border-radius:5px; vertical-align:2px; }
.tact { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.play { width:42px; height:42px; border-radius:50%; border:0; background:var(--accent); color:var(--accent-ink); font-size:15px; display:grid; place-items:center; padding:0 0 0 2px; } .play[aria-pressed="true"] { padding:0; letter-spacing:-2px; }
.tlink { font-size:12px; font-weight:600; color:var(--dim); text-decoration:none; white-space:nowrap; } .tlink:hover { color:var(--accent); text-decoration:underline; }
@media (max-width:560px) { .trk { grid-template-columns:34px 52px 1fr auto; gap:10px; padding:9px 10px; } .tart { width:52px; height:52px; } .trk.top { grid-template-columns:38px 64px 1fr auto; } .trk.top .tart { width:64px; height:64px; } .trk .num { font-size:24px; } .trk.top .num { font-size:30px; } .tact { flex-direction:row-reverse; align-items:center; } .tlink { display:none; } }
a.chip[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
@media (max-width:560px) { .tlink { display:grid; place-items:center; font-size:0; width:42px; height:30px; } .tlink::before { content:"\2197"; font-size:20px; } }

.tlinks { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.tlink.yt::before { content:"\25B6"; font-size:8px; display:inline-block; vertical-align:1px; margin-right:5px; padding:2px 4px; border-radius:4px; background:var(--faint); color:var(--card); }
.tlink.yt:hover::before { background:var(--accent); }
@media (max-width:560px) { .tlinks { flex-direction:row-reverse; gap:0; } .tlink { display:grid; place-items:center; font-size:0; width:36px; height:30px; } .tlink::before { content:"\2197"; font-size:20px; margin:0; padding:0; background:none; color:inherit; }
  .tlink.yt::before { content:"\25B6"; font-size:11px; padding:5px 7px; border-radius:5px; background:var(--faint); color:var(--card); } }
.tinfo b .no1 { display:inline-block; color:var(--accent-ink); font-size:10.5px; }
@media (max-width:560px) { .tlink { width:28px; } .play { width:38px; height:38px; } .trk.top { grid-template-columns:34px 56px 1fr auto; } .trk.top .tart { width:56px; height:56px; } .tinfo b { font-size:15px; } .trk { gap:8px; } }

/* music preview = the music icon; YouTube link = the YouTube icon */
.play { width:50px; height:50px; background:none; border-radius:14px; padding:0; position:relative; display:grid; place-items:center; transition:transform .15s; }
.play img { width:46px; height:46px; display:block; filter:drop-shadow(0 3px 5px rgba(120,20,80,.3)); }
.play:hover { transform:scale(1.06); }
.play[aria-pressed="true"] { padding:0; letter-spacing:0; animation:mmpulse 1.4s ease-in-out infinite; }
.play[aria-pressed="true"]::after { content:"\275A\275A"; position:absolute; right:-2px; bottom:-2px; font-size:9px; letter-spacing:-1px; line-height:1; padding:4px 5px; border-radius:8px; background:var(--ink); color:var(--bg); }
@keyframes mmpulse { 0%,100% { box-shadow:0 0 0 0 rgba(236,64,150,.0); } 50% { box-shadow:0 0 0 6px rgba(236,64,150,.28); } }
.tlink.yt::before, .tlink.yt:hover::before { content:none; display:none; }
.tlink.yt { display:inline-flex; align-items:center; gap:6px; }
.tlink.yt .yti { width:32px; height:24px; border-radius:7px; display:block; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.tlink.yt:hover .yti { box-shadow:0 0 0 2px var(--accent); }
@media (max-width:560px) { .tlink.yt { display:grid; place-items:center; font-size:0; width:40px; height:30px; } .tlink.yt span { display:none; } .tlink.yt .yti { width:34px; height:26px; }
  .play { width:44px; height:44px; } .play img { width:40px; height:40px; } .tlinks { align-items:center; } }