/* Local styles for the listening constellation. */
.listening-atlas{--atlas-ink:#edf0e9;--atlas-muted:#aeb8be;--atlas-dim:#727f89;color:var(--atlas-ink);background:#111b25;border-radius:18px;padding:clamp(20px,3vw,42px);overflow:hidden;position:relative;isolation:isolate;box-shadow:0 18px 48px #12201918}
.listening-atlas::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 38% 65%,#2636437a,transparent 65%),radial-gradient(ellipse at 10% 0%,#41505045,transparent 48%),linear-gradient(132deg,#13212b,#141a28 74%);pointer-events:none}
.listening-atlas button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.listening-atlas button:focus-visible{outline:2px solid #f1d69b;outline-offset:5px}
.atlas-heading{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:16px}
.atlas-eyebrow{font-size:10px;letter-spacing:.19em;color:#93a7ae}
.atlas-heading h1{font-size:clamp(28px,3vw,42px);font-weight:500;line-height:1.3;letter-spacing:.12em;color:var(--atlas-ink);margin:11px 0 7px}
.atlas-heading p{font-size:13px;color:var(--atlas-muted);margin:0;line-height:1.7}
.atlas-progress{display:flex;align-items:center;gap:11px;font-variant-numeric:tabular-nums;flex-shrink:0}
.atlas-progress strong{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:56px;line-height:1;letter-spacing:-.03em}
.atlas-progress>span{font-size:15px;color:#8d9da7;line-height:1.25}
.atlas-progress small{display:block;font-size:10px;letter-spacing:.15em;margin-top:7px}
.atlas-universe{display:grid;grid-template-columns:minmax(0,1fr) 294px;align-items:stretch;gap:25px;border-top:1px solid #cdd9e217;padding-top:10px}
.atlas-chart{height:440px;position:relative;min-width:0}
.atlas-sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.atlas-orbital-track{fill:none;stroke:#b4cbd60d;stroke-width:1;vector-effect:non-scaling-stroke}
.atlas-orbit{fill:none;stroke:#bac9d22b;stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .4s,filter .4s}
.atlas-orbit.is-lit{stroke:var(--star-colour);opacity:.5;filter:drop-shadow(0 0 4px var(--star-colour))}
.atlas-clusters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:absolute;top:12px;left:0;width:100%;gap:6px;pointer-events:none}
.atlas-cluster{text-align:center;line-height:1.25;min-width:0}
.atlas-cluster small{color:var(--star-colour);font-size:9px;letter-spacing:.13em;display:block;opacity:.8;margin-bottom:5px}
.atlas-cluster>span{font-size:11px;letter-spacing:.01em;display:block;color:#d2d9dc;min-height:28px;max-width:125px;margin:auto;text-wrap:balance}
.atlas-cluster em{font-size:10px;font-style:normal;color:#778d99;display:block;margin-top:3px}
.atlas-node{position:absolute;width:44px;height:44px;border:0;padding:0;background:transparent!important;border-radius:50%;transform:translate(-50%,-50%);color:#94a3ad;z-index:2}
.atlas-node-core{position:absolute;left:50%;top:50%;width:7px;height:7px;transform:translate(-50%,-50%);border:1px solid #93a6b17d;background:#182733;border-radius:50%;transition:width .24s,height .24s,box-shadow .3s,background .3s}
.atlas-node-halo{position:absolute;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%);border:1px solid #a9bacb16;border-radius:50%;transition:all .3s}
.atlas-node-name{position:absolute;top:calc(50% + 21px);left:50%;transform:translateX(-50%);width:108px;max-width:11vw;font-size:10px;line-height:1.35;letter-spacing:.015em;text-align:center;transition:color .2s;white-space:normal;pointer-events:none}
.atlas-node.is-lit{color:#dae2e2}
.atlas-node.is-lit .atlas-node-core{width:9px;height:9px;border-color:var(--star-colour);background:var(--star-colour);box-shadow:0 0 9px var(--star-colour),0 0 26px color-mix(in srgb,var(--star-colour) 25%,transparent)}
.atlas-node.is-lit .atlas-node-halo{border-color:color-mix(in srgb,var(--star-colour) 24%,transparent)}
.atlas-node.is-compared .atlas-node-halo{border-color:var(--star-colour);width:26px;height:26px;opacity:.8;box-shadow:0 0 0 4px #e1ecf209}
.atlas-node.is-selected .atlas-node-halo{width:36px;height:36px;border:1px dashed var(--star-colour);opacity:1;animation:atlas-orbit-turn 28s linear infinite}
.atlas-node.is-selected .atlas-node-name{color:var(--star-colour)}
.atlas-node:hover .atlas-node-core{width:11px;height:11px;box-shadow:0 0 12px var(--star-colour)}
.atlas-question-dot{display:none;position:absolute;top:7px;right:5px;width:5px;height:5px;background:#f3d693;transform:rotate(45deg);box-shadow:0 0 6px #f3d69344}
.atlas-node.has-question .atlas-question-dot{display:block}
.atlas-chart-legend{position:absolute;bottom:5px;left:0;right:0;display:flex;gap:17px;justify-content:center;color:#8ca0ad;font-size:10px}
.atlas-chart-legend>span{display:flex;align-items:center;gap:6px;white-space:nowrap}
.atlas-status-mark{display:inline-block;width:7px;height:7px;background:#a2b8c8;border-radius:50%;flex-shrink:0}
.atlas-status-mark.compare{width:10px;height:10px;background:transparent;border:1px solid currentColor;position:relative}
.atlas-status-mark.compare::after{content:"";width:4px;height:4px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:currentColor;border-radius:50%}
.atlas-status-mark.question{background:#d6c389;width:6px;height:6px;border-radius:0;transform:rotate(45deg)}
.atlas-detail{border-left:1px solid #cedce11b;padding:20px 0 12px 25px;min-width:0;display:flex;flex-direction:column;animation:atlas-detail-in .25s ease-out}
.atlas-detail-top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--star-colour);font-size:9px;letter-spacing:.18em}
.atlas-switch{display:flex;gap:6px}
.atlas-switch button{color:#c0ccd0;background:transparent;border:1px solid #94aabc33;border-radius:50%;width:29px;height:29px;padding:0;line-height:1}
.atlas-switch button:hover{border-color:#b6c6cd;color:white}
.atlas-selected-song{margin:13px 0 5px;color:#b4c2c9;font-size:12px;line-height:1.5}
.atlas-detail h2{margin:0 0 8px;color:var(--atlas-ink);font-size:24px;font-weight:500;line-height:1.45;letter-spacing:.025em}
.atlas-clip{font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#8ea1ad;margin:0 0 16px}
.atlas-status-row{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:15px}
.atlas-status{display:flex;align-items:center;gap:5px;font-size:10px;color:#92a4b0;opacity:.48}
.atlas-status.is-on{color:var(--star-colour);opacity:1}
.atlas-status.is-on .atlas-status-mark.listen{background:var(--star-colour)}
.atlas-terms{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.atlas-terms span{border:1px solid #b4c6d02b;padding:5px 8px;border-radius:4px;font-size:11px;color:#bdcbd1;line-height:1.4;background:#d2e4ef04}
.atlas-empty-note{font-size:12px;line-height:1.9;color:#92a7b4;margin:6px 0 20px}
.atlas-event-list{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.atlas-event{display:flex;text-align:left;align-items:baseline;gap:10px;border:0;color:#b9c9d3;padding:6px 0;background:transparent;font-size:11px!important;line-height:1.45}
.atlas-event-time{font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--star-colour);min-width:34px;opacity:.9}
.atlas-event>span:nth-child(2){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.atlas-event b{font-size:12px;font-weight:400;margin-left:auto;color:#788fa0}
.atlas-event:hover{color:white}
.atlas-questions{display:flex;flex-direction:column;gap:9px;margin:0 0 18px}
.atlas-questions button{border:0;border-left:1px solid #d6c3897a;text-align:left;padding:2px 0 2px 10px;background:transparent;color:#d0d9db;width:100%}
.atlas-questions button>span{display:block;font-size:9px;letter-spacing:.03em;color:#b2a780;margin-bottom:5px}
.atlas-questions q{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.65;quotes:none;overflow-wrap:anywhere}
.atlas-revisit{margin-top:auto;width:100%;padding:12px 13px;border:1px solid #c3d2db3d;background:#d6e4eb06;border-radius:5px;text-align:left;color:#e1e8e9;font-size:12px!important;display:flex;align-items:center;justify-content:space-between;gap:12px}
.atlas-revisit>span{color:var(--star-colour);font-size:11px;font-variant-numeric:tabular-nums}
.atlas-revisit:hover{background:#e8f2fa10;border-color:#bdcdd580}
.atlas-bottom{display:flex;gap:18px;align-items:center;flex-wrap:wrap;border-top:1px solid #cdd9e217;padding-top:18px;margin-top:9px;font-size:11px;color:#abbcc7}
.atlas-bottom small{font-size:10px;color:#778d9a}
.atlas-bottom button{margin-left:auto;background:transparent;border:0;color:#d6dddc;font-size:11px;padding:4px 0}
@keyframes atlas-orbit-turn{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes atlas-detail-in{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:1100px){.atlas-universe{grid-template-columns:minmax(0,1fr) 260px;gap:17px}.atlas-detail{padding-left:18px}.atlas-chart{height:420px}.atlas-node-name{font-size:9px;width:86px}.atlas-cluster>span{font-size:10px}.atlas-cluster em{font-size:9px}.atlas-detail h2{font-size:21px}}
@media (max-width:800px){.listening-atlas{padding:23px 20px;border-radius:12px}.atlas-universe{grid-template-columns:1fr;gap:0}.atlas-chart{height:390px}.atlas-node-name{max-width:17vw;width:102px;font-size:10px}.atlas-cluster>span{font-size:11px}.atlas-detail{padding:22px 0 8px;border-left:0;border-top:1px solid #cedce122;display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-items:start}.atlas-detail-top,.atlas-selected-song,.atlas-detail h2,.atlas-clip,.atlas-status-row,.atlas-terms{grid-column:1}.atlas-detail-top{grid-column:1/-1}.atlas-detail h2{font-size:24px}.atlas-event-list,.atlas-empty-note{grid-column:2;grid-row:2/7;margin-top:15px}.atlas-questions{grid-column:2;grid-row:7}.atlas-revisit{grid-column:1/-1;margin-top:6px}.atlas-bottom{gap:8px 16px}.atlas-chart-legend{bottom:9px}.atlas-heading h1{font-size:30px}.atlas-progress strong{font-size:50px}}
@media (max-width:480px){.listening-atlas{padding:20px 12px}.atlas-heading{padding:0 6px;gap:10px}.atlas-heading h1{font-size:27px}.atlas-eyebrow{font-size:7px;letter-spacing:.11em}.atlas-heading p{font-size:11px}.atlas-progress{gap:7px}.atlas-progress strong{font-size:39px}.atlas-progress>span{font-size:12px}.atlas-progress small{font-size:8px}.atlas-chart{height:384px}.atlas-node-name{font-size:8px;max-width:17vw;line-height:1.4;top:calc(50% + 20px)}.atlas-cluster>span{font-size:9px;min-height:32px;max-width:66px}.atlas-cluster em{font-size:8px;line-height:1.25}.atlas-clusters{gap:3px}.atlas-detail{padding:17px 6px 8px;column-gap:17px}.atlas-detail h2{font-size:19px}.atlas-selected-song{font-size:10px}.atlas-clip{font-size:10px;margin-bottom:12px}.atlas-terms{gap:5px;margin-bottom:12px}.atlas-terms span{font-size:10px;padding:4px 6px}.atlas-status-row{gap:8px}.atlas-status{font-size:9px}.atlas-event{font-size:10px!important;gap:6px}.atlas-event-time{min-width:31px;font-size:9px}.atlas-empty-note{font-size:11px}.atlas-questions q{font-size:11px}.atlas-bottom{padding:15px 6px 0;gap:8px;font-size:10px}.atlas-bottom small{font-size:9px}.atlas-bottom button{font-size:10px}.atlas-chart-legend{font-size:9px;gap:15px}}
@media (prefers-reduced-motion:reduce){.atlas-node.is-selected .atlas-node-halo,.atlas-detail{animation:none}.listening-atlas *{transition:none!important}}