.tjm-player { --tjm-accent:#d91f45; --tjm-ink:#fff; --tjm-panel:#0d0d0d; --tjm-border:#292929; color:var(--tjm-ink); background:var(--tjm-panel); border:1px solid var(--tjm-border); border-radius:.5rem; box-shadow:0 .4rem 1.4rem rgba(0,0,0,.28); margin:1rem 0; overflow:hidden; }
.tjm-player__now { display:flex; align-items:center; gap:1rem; padding:1rem; }
.tjm-player__toggle { flex:0 0 3rem; width:3rem; height:3rem; border:1px solid #ff657e; border-radius:50%; background:linear-gradient(145deg,#ef4e69,#a90024); box-shadow:0 0 0 3px rgba(217,31,69,.14); color:#fff; cursor:pointer; font-size:0; -webkit-appearance:none; appearance:none; }
.tjm-player__toggle,.tjm-player__fullscreen-play { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.tjm-player__toggle::before,.tjm-player__fullscreen-play::before { content:""; display:block; width:0; height:0; margin:auto; border-top:.45rem solid transparent; border-bottom:.45rem solid transparent; border-left:.72rem solid currentColor; transform:translateX(.08rem); }
.tjm-player__toggle.is-playing::before,.tjm-player__fullscreen-play.is-playing::before { width:.72rem; height:.9rem; border:0; background:linear-gradient(90deg,currentColor 0 32%,transparent 32% 68%,currentColor 68% 100%); transform:none; }
.tjm-player__body { min-width:0; flex:1; display:grid; grid-template-columns:1fr auto; gap:.25rem .75rem; align-items:center; }
.tjm-player__title { grid-column:1 / -1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tjm-player__wave { grid-column:1 / -1; display:block; width:100%; height:48px; }
.tjm-player__visualizer { grid-column:1 / -1; display:block; width:100%; height:48px; }
.tjm-player__visualizer[hidden],.tjm-player__wave[hidden] { display:none; }
.tjm-player__seek { grid-column:1; width:100%; accent-color:#e63151; }
.tjm-player__time { grid-column:2; font-variant-numeric:tabular-nums; font-size:.8rem; }
.tjm-player__mobile-time { display:none; font-size:.78rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tjm-player__volume-controls { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; flex:0 0 3.25rem; align-self:stretch; }
.tjm-player__mute { display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; padding:0; border:1px solid var(--tjm-border); border-radius:50%; background:#171717; color:var(--tjm-ink); cursor:pointer; font-size:1rem; }
.tjm-player__mute:hover,.tjm-player__mute:focus-visible { border-color:var(--tjm-accent); outline:none; }
.tjm-player__volume { width:1.2rem; height:3.6rem; margin:.1rem 0; accent-color:var(--tjm-accent); writing-mode:vertical-lr; direction:rtl; }
.tjm-player__volume-value { min-width:2.6rem; color:var(--tjm-ink); font-size:.7rem; font-variant-numeric:tabular-nums; text-align:center; white-space:nowrap; }
.tjm-player__visualizer-toggle { flex:0 0 2.5rem; width:2.5rem; height:2.5rem; padding:0; border:1px solid var(--tjm-border); border-radius:.35rem; background:#171717; color:var(--tjm-ink); cursor:pointer; font-size:0; line-height:1; }
.tjm-player__visualizer-toggle::before { content:"≋"; display:block; font-size:1.55rem; line-height:1; }
.tjm-player__visualizer-toggle[data-mode="bars"]::before { content:"▥"; font-size:1.3rem; }
.tjm-player__visualizer-toggle[data-mode="scope"]::before { content:"∿"; font-size:1.65rem; }
.tjm-player__visualizer-toggle:hover,.tjm-player__visualizer-toggle:focus-visible { border-color:var(--tjm-accent); color:#ff5b76; outline:none; }
.tjm-player__view-controls { display:flex; flex:0 0 2.5rem; flex-direction:column; gap:.35rem; }
.tjm-player__fullscreen-toggle { flex:0 0 2.5rem; width:2.5rem; height:2.5rem; padding:0; border:1px solid var(--tjm-border); border-radius:.35rem; background:#171717; color:var(--tjm-ink); cursor:pointer; font-size:1.25rem; line-height:1; }
.tjm-player__fullscreen-toggle:hover,.tjm-player__fullscreen-toggle:focus-visible { border-color:var(--tjm-accent); color:#ff5b76; outline:none; }
.tjm-player__fullscreen { position:fixed; inset:0; z-index:2147483647; width:100vw; height:100dvh; margin:0; overflow:hidden; background:#020204; color:#fff; cursor:none; }
.tjm-player__fullscreen[hidden] { display:none; }
.tjm-player__fullscreen:fullscreen { width:100vw; height:100vh; }
.tjm-player__fullscreen-canvas,.tjm-player__magnetosphere-canvas,.tjm-player__classic-canvas,.tjm-player__fullscreen-shade { position:absolute; inset:0; display:block; width:100%; height:100%; }
.tjm-player__fullscreen-canvas[hidden],.tjm-player__magnetosphere-canvas[hidden],.tjm-player__classic-canvas[hidden] { display:none; }
.tjm-player__fullscreen-shade { background:radial-gradient(circle at center,transparent 30%,rgba(0,0,0,.18) 68%,rgba(0,0,0,.72) 100%); pointer-events:none; }
.tjm-player__fullscreen-info { position:absolute; left:clamp(24px,5vw,80px); bottom:clamp(28px,7vh,90px); display:flex; flex-direction:column; gap:.35rem; max-width:75vw; opacity:0; transform:translateY(10px); transition:opacity .5s,transform .5s; text-shadow:0 2px 16px #000; pointer-events:none; }
.tjm-player__fullscreen-title { overflow:hidden; font-size:clamp(1.3rem,3vw,3rem); text-overflow:ellipsis; white-space:nowrap; }
.tjm-player__fullscreen-segment { overflow:hidden; max-width:min(72vw,900px); color:#fff; font-size:clamp(1rem,1.8vw,1.55rem); font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.tjm-player__fullscreen-segment[hidden] { display:none; }
.tjm-player__fullscreen-time { color:#ddd;font-size:clamp(.85rem,1.2vw,1.1rem);font-variant-numeric:tabular-nums; }
.tjm-player__fullscreen-close { position:absolute; top:24px; right:24px; width:46px; height:46px; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(0,0,0,.38); color:#fff; cursor:pointer; font-size:1.2rem; opacity:0; transition:opacity .5s,border-color .2s; }
.tjm-player__fullscreen-controls { position:absolute; left:50%; bottom:clamp(24px,6vh,72px); display:flex; align-items:center; gap:.75rem; opacity:0; transform:translate(-50%,10px); transition:opacity .5s,transform .5s; }
.tjm-player__fullscreen-play,.tjm-player__fullscreen-style,.tjm-player__fullscreen-settings { border:1px solid rgba(255,255,255,.42); background:rgba(0,0,0,.42); color:#fff; cursor:pointer; backdrop-filter:blur(8px); }
.tjm-player__fullscreen-play { width:52px; height:52px; padding:0; border-radius:50%; font-size:0; -webkit-appearance:none; appearance:none; }
.tjm-player__fullscreen-style { min-width:88px; padding:.65rem .9rem; border-radius:999px; font-size:.8rem; line-height:1; white-space:nowrap; }
.tjm-player__fullscreen-settings { width:44px; height:44px; padding:0; border-radius:50%; font-size:1.1rem; }
.tjm-player__fullscreen-play:hover,.tjm-player__fullscreen-style:hover,.tjm-player__fullscreen-settings:hover,.tjm-player__fullscreen-play:focus-visible,.tjm-player__fullscreen-style:focus-visible,.tjm-player__fullscreen-settings:focus-visible { border-color:#fff; outline:none; }
.tjm-player__fullscreen.is-awake { cursor:default; }
.tjm-player__fullscreen.is-awake .tjm-player__fullscreen-info,.tjm-player__fullscreen.is-awake .tjm-player__fullscreen-close { opacity:1; transform:none; }
.tjm-player__fullscreen.is-awake .tjm-player__fullscreen-controls { opacity:1; transform:translate(-50%,0); }
.tjm-player__fullscreen-close:hover,.tjm-player__fullscreen-close:focus-visible { border-color:#fff; outline:none; }
.tjm-player__magnet-status { position:absolute; top:clamp(24px,5vh,64px); left:50%; z-index:2; padding:.55rem .85rem; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(0,0,0,.48); box-shadow:0 8px 30px rgba(0,0,0,.3); color:#fff; font-size:.82rem; letter-spacing:.03em; opacity:0; pointer-events:none; transform:translate(-50%,-8px); transition:opacity .25s,transform .25s; backdrop-filter:blur(9px); }
.tjm-player__magnet-status.is-visible { opacity:1; transform:translate(-50%,0); }
.tjm-player__visualizer-help { position:absolute; top:50%; left:50%; z-index:4; width:min(560px,calc(100vw - 40px)); max-height:calc(100dvh - 60px); overflow:auto; padding:1.4rem 1.6rem; border:1px solid rgba(255,255,255,.28); border-radius:1rem; background:rgba(4,4,9,.88); box-shadow:0 24px 80px rgba(0,0,0,.65); color:#fff; cursor:default; transform:translate(-50%,-50%); backdrop-filter:blur(16px); }
.tjm-player__visualizer-help[hidden] { display:none; }
.tjm-player__visualizer-help h2 { margin:0 0 1rem; color:#fff; font-size:1.35rem; }
.tjm-player__visualizer-help dl { display:grid; grid-template-columns:1fr 1fr; gap:0 1.5rem; margin:0; }
.tjm-player__visualizer-help dl div { display:grid; grid-template-columns:5rem 1fr; gap:.65rem; padding:.48rem 0; border-bottom:1px solid rgba(255,255,255,.1); }
.tjm-player__visualizer-help dt { color:#ff7790; font-weight:700; }
.tjm-player__visualizer-help dd { margin:0; color:#eee; }
.tjm-player__visualizer-settings { position:absolute; right:clamp(16px,3vw,42px); bottom:clamp(90px,13vh,150px); z-index:5; width:min(360px,calc(100vw - 32px)); max-height:min(72vh,680px); overflow:auto; box-sizing:border-box; padding:1rem; border:1px solid rgba(255,255,255,.3); border-radius:1rem; background:rgba(5,5,10,.9); box-shadow:0 22px 70px rgba(0,0,0,.62); color:#fff; cursor:default; backdrop-filter:blur(18px); }
.tjm-player__visualizer-settings[hidden] { display:none; }
.tjm-player__visualizer-settings header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
.tjm-player__visualizer-settings header button { width:32px; height:32px; padding:0; border:1px solid rgba(255,255,255,.25); border-radius:50%; background:transparent; color:#fff; cursor:pointer; }
.tjm-player__visualizer-settings label { display:grid; gap:.32rem; margin:.72rem 0; color:#eee; font-size:.82rem; }
.tjm-player__visualizer-settings select,.tjm-player__visualizer-settings input[type="range"] { width:100%; box-sizing:border-box; }
.tjm-player__visualizer-settings select { padding:.5rem; border:1px solid rgba(255,255,255,.25); border-radius:.35rem; background:#15151c; color:#fff; }
.tjm-player__visualizer-settings .tjm-player__setting-check { display:flex; align-items:center; gap:.5rem; }
.tjm-player__visualizer-settings .tjm-player__setting-check input { margin:0; }
.tjm-player__classic-status { margin:.65rem 0 .85rem; padding:.55rem .65rem; border:1px solid rgba(255,255,255,.14); border-radius:.45rem; background:rgba(255,255,255,.055); color:#cfd0d8; font-size:.72rem; line-height:1.45; }
.tjm-player audio { display:none; }
.tjm-player__tracks { counter-reset:tjm-track; list-style:none; margin:0; padding:0; border-top:1px solid var(--tjm-border); }
.tjm-player__tracks li { counter-increment:tjm-track; display:flex; align-items:stretch; margin:0; padding:0; }
.tjm-player__tracks li::before { content:counter(tjm-track) "."; flex:0 0 2.2rem; padding:.7rem 0 .7rem 1rem; border-bottom:1px solid var(--tjm-border); box-sizing:border-box; }
.tjm-player__tracks button { display:flex; flex:1 1 auto; align-items:center; justify-content:space-between; gap:1rem; min-width:0; padding:.7rem 1rem .7rem .35rem; border:0; border-bottom:1px solid var(--tjm-border); color:inherit; background:transparent; text-align:left; cursor:pointer; }
.tjm-player__tracks button:hover,.tjm-player__tracks button.is-current { background:#1b1b1b; color:#ff5b76; }
.tjm-player__tracks small { white-space:nowrap; }
.tjm-player-warning { border-left:4px solid #dba617; background:#fff8dc; margin:.75rem 0; padding:.75rem 1rem; }
.tjm-service-links { display:inline-flex; align-items:center; gap:.35em; margin-left:.35em; }
.tjm-service-link { display:inline-flex; align-items:center; justify-content:center; width:1.15em; height:1.15em; color:currentColor; line-height:1; text-decoration:none; vertical-align:-.14em; }
.tjm-service-link svg { display:block; width:100%; height:100%; }
.tjm-service-link--spotify { color:#1db954; }
.tjm-service-link--spotify path { fill:none; stroke:#fff; stroke-width:1.45; stroke-linecap:round; }
.tjm-service-link--apple { color:#111; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; font-size:1.28em; }
.tjm-apple-mark { display:block; transform:translateY(-.02em); }
[data-marker].tjm-current-marker { color:#ff5b76; font-weight:700; }
.tjm-marker-row { display:grid; grid-template-columns:2.2rem minmax(0,1fr) auto; align-items:center; gap:.35rem; margin:0; padding:0; border:1px solid #292929; border-bottom:0; background:#0d0d0d; color:#fff; line-height:1.35; cursor:pointer; }
.tjm-marker-row:last-of-type { border-bottom:1px solid #292929; }
.tjm-marker-row:hover,.tjm-marker-row:focus-visible,.tjm-marker-row.is-current { background:#1b1b1b; color:#ff5b76; outline:none; }
.tjm-marker-row__number { align-self:stretch; display:flex; align-items:center; padding:.7rem 0 .7rem .8rem; border-right:1px solid #292929; color:inherit; font-variant-numeric:tabular-nums; }
.tjm-marker-row__content { display:flex; align-items:center; min-width:0; padding:.7rem .2rem; }
.tjm-marker-row__content > [data-marker] { min-width:0; color:inherit; text-decoration:none; }
.tjm-marker-row .tjm-service-links { margin-left:.25rem; }
.tjm-marker-row .tjm-service-link--apple { color:#fff; }
.tjm-marker-row__time { padding:.7rem .8rem .7rem .25rem; color:inherit; font-size:.8em; font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (max-width:700px) {
  .tjm-player__now { display:grid; grid-template-columns:3rem minmax(0,1fr) auto; align-items:center; gap:.65rem; padding:.8rem; }
  .tjm-player__body { grid-column:1 / -1; grid-row:1; width:100%; }
  .tjm-player__time { display:none; }
  .tjm-player__seek { grid-column:1 / -1; }
  .tjm-player__toggle { grid-column:1; grid-row:2; }
  .tjm-player__mobile-time { display:block; grid-column:2; grid-row:2; align-self:center; }
  .tjm-player__view-controls { grid-column:3; grid-row:2; flex-basis:auto; flex-direction:row; gap:.45rem; }
  .tjm-player__visualizer-toggle,.tjm-player__fullscreen-toggle { width:3rem; height:3rem; }
  .tjm-player__volume-controls { display:none; }
}
@media (max-width:620px) {
  .tjm-player__fullscreen-info { left:20px; right:20px; bottom:calc(112px + env(safe-area-inset-bottom,0px)); max-width:none; }
  .tjm-player__fullscreen-title { font-size:clamp(1.05rem,5vw,1.4rem); }
  .tjm-player__fullscreen-controls { bottom:calc(24px + env(safe-area-inset-bottom,0px)); }
  .tjm-player__fullscreen-close { top:calc(18px + env(safe-area-inset-top,0px)); right:18px; }
  .tjm-player__visualizer-help dl { grid-template-columns:1fr; }
  .tjm-player__visualizer-settings { left:12px; right:12px; bottom:calc(88px + env(safe-area-inset-bottom,0px)); width:auto; max-height:62vh; border-radius:1rem 1rem .6rem .6rem; }
}
@media (max-width:480px) { .tjm-marker-row { grid-template-columns:2rem minmax(0,1fr) auto; } }