@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&display=swap');
:root{color-scheme:dark;--bg:#0b0d10;--line:#24272b;--text:#f1f1ed;--muted:#82868a;--lime:#c4f466;--pink:#f09fca;font-family:'DM Sans',system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:5px}button{color:inherit}button:disabled:not(.branch){opacity:.35}
.stage{height:100svh;min-height:580px;max-width:1500px;margin:auto;padding:24px 5vw 22px;display:grid;grid-template-rows:32px minmax(142px,1fr) minmax(218px,1.2fr) 160px 55px;gap:14px;overflow:hidden}.masthead{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:9px;font-size:21px;letter-spacing:-1px;font-weight:650}.brand img{width:36px;height:36px;object-fit:contain;border-radius:8px;flex-shrink:0}.brand-dot{font-size:10px;align-self:flex-start;padding-top:4px;margin-left:-5px}.edition{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted)}.tiny-dot{width:5px;height:5px;border-radius:50%;background:var(--lime)}.hero{text-align:center;align-self:center}.eyebrow,.graph-heading,.node-tag{font-size:9px;letter-spacing:1.7px;font-weight:550;color:var(--muted)}.hero>.eyebrow{font-size:9px;letter-spacing:2.6px;margin-bottom:14px}h1{font-size:clamp(34px,4.8vw,68px);line-height:1.03;letter-spacing:-3px;font-weight:450;margin:0}h1>span{color:var(--lime)}.hero>p{font-size:13px;color:#94979a;margin:14px 0 0;line-height:1.5}.mobile-only{display:none}
.graph-section{min-height:0;display:flex;flex-direction:column;max-width:1040px;width:100%;justify-self:center}.graph-heading{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}#route-help{letter-spacing:0;text-transform:none;font-size:11px;font-weight:400}.graph{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;column-gap:14%;row-gap:10px;padding:18px 26px 2px;align-items:center}.edges{position:absolute;width:100%;height:100%;inset:0;overflow:visible;pointer-events:none}.edges>path{stroke:#41454a;stroke-width:1.2;fill:none;transition:stroke .25s;stroke-dasharray:4 5}.edges>path.active{stroke:var(--lime);stroke-dasharray:none;filter:drop-shadow(0 0 4px #c4f42233)}#edge-pink.active{stroke:var(--pink)}.node{z-index:1;position:relative;background:#111417;border:1px solid #2c3034;border-radius:11px;padding:15px 17px;text-align:left;min-width:0;width:100%;max-width:230px;justify-self:center;transition:border-color .2s,background .2s,transform .2s}.node h2{font-size:19px;letter-spacing:-.6px;line-height:1.14;font-weight:550;margin:10px 0 6px}.node p{font-size:10px;color:#868b91;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.node-tag{font-size:8px;letter-spacing:1.4px;display:flex;align-items:center;justify-content:space-between;gap:5px}.node-tag>i{width:5px;height:5px;background:var(--lime);border-radius:50%;margin-right:0}.origin,.junction{grid-row:1 / 3}.origin{grid-column:1}.junction{grid-column:2}.gasoline{grid-column:3;grid-row:1;--accent:var(--lime)}.pink{grid-column:3;grid-row:2;--accent:var(--pink)}.node-bottom{display:flex;align-items:center;gap:6px;border-top:1px solid var(--line);margin-top:15px;padding-top:10px;font-size:9px;color:var(--muted)}.equalizer{height:9px;display:flex;align-items:center;gap:2px}.equalizer i{height:3px;width:2px;background:var(--lime)}.equalizer i:nth-child(2){height:9px}.equalizer i:nth-child(3){height:6px}.playing .equalizer i{animation:bars .7s infinite alternate}.playing .equalizer i:nth-child(even){animation-delay:-.3s}.junction-dot{height:5px;width:5px;border:1px solid #aaa;border-radius:50%}.node.current{border-color:#667942;background:linear-gradient(110deg,#1b2115,#111417 80%)}.node.completed{opacity:.55}.branch{padding:10px 16px}.branch h2{font-size:17px;margin-top:6px}.branch:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px)}.branch[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,#111417)}.branch[aria-pressed=true] h2,.branch[aria-pressed=true] .arm-label{color:var(--accent)}.branch:disabled:not([aria-pressed=true]){opacity:.4}.route-symbol{font-size:15px;color:#727a80}.arm-label{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:1px;color:#b8bdc1;margin-top:9px}.arm-label>span{font-size:15px}.branch[aria-pressed=true] .route-symbol{color:var(--accent)}
.player{border-top:1px solid var(--line);padding-top:13px;align-self:end;width:100%;max-width:1120px;justify-self:center}.player-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.player-heading>div{display:flex;align-items:center;gap:16px;min-width:0}.now-playing{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clock{font-size:10px;color:#c0c4c7;font-variant-numeric:tabular-nums;white-space:nowrap}.clock-divider{padding:0 8px;color:#555b61}.waveform{height:78px;position:relative;margin:7px 0 5px}.waveform canvas{width:100%;height:100%;display:block}.waveform input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:crosshair}.waveform:focus-within{outline:1px solid var(--lime);outline-offset:3px;border-radius:3px}.loading-wave{position:absolute;inset:0;display:grid;place-content:center;font-size:11px;color:var(--muted);pointer-events:none}.loading-wave.hidden{display:none}.transport{display:flex;align-items:center;gap:15px;min-height:34px}.play{border:0;background:var(--lime);color:#18200e;border-radius:5px;display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:11px;font-weight:650;white-space:nowrap;min-width:125px;justify-content:center}.play:hover{background:#d5ff88}#play-icon{font-size:11px;width:12px}.subtle-button,.icon-button{background:transparent;border:0;color:#a3a8ad;padding:6px 0;font-size:10px;white-space:nowrap}.subtle-button span{font-size:13px;margin-left:5px}.subtle-button:hover,.icon-button:hover{color:var(--text)}.player-status{font-size:10px;color:var(--muted);margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-status.error{color:var(--pink)}.icon-button{font-size:22px;padding:1px 4px}.icon-button[aria-pressed=true]{color:var(--pink)}footer{display:flex;align-items:end;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px;gap:20px}footer nav{display:flex;gap:10px}.cta{border:1px solid #353a40;border-radius:5px;padding:9px 13px;font-size:11px;color:#b5b9bc;white-space:nowrap;display:flex;gap:15px;align-items:center}.cta.primary{border-color:#737a66;color:#e2e8d7}.cta:hover{color:var(--lime);border-color:var(--lime)}.cta>span{color:#777f85}.footer-note{font-size:10px;color:#6e7378;white-space:nowrap}.footer-note>span{color:#a0a4a8}noscript{position:fixed;bottom:15%;background:#161b11;padding:20px;color:var(--lime)}
@keyframes bars{to{height:9px}}
@media(min-height:900px){.stage{padding-top:34px;padding-bottom:30px;grid-template-rows:34px minmax(210px,1fr) minmax(270px,1.3fr) 180px 60px;gap:22px}.graph{padding-top:24px;padding-bottom:15px;row-gap:16px}.branch{padding:15px 18px}.waveform{height:94px}}
@media(max-width:700px){.stage{padding:18px 22px 16px;grid-template-rows:28px minmax(146px,1fr) minmax(200px,1.15fr) 155px 54px;gap:12px}.edition{font-size:9px}.brand{font-size:19px}.brand img{width:30px;height:30px}h1{font-size:clamp(32px,5.5vw,42px);letter-spacing:-1.5px}.hero>.eyebrow{font-size:8px;margin-bottom:13px}.hero>p{font-size:11px;margin-top:12px}.graph{padding:14px 0 2px;column-gap:7%;row-gap:10px}.node{padding:12px 10px;border-radius:8px}.branch{padding:10px}.node h2{font-size:15px;margin:8px 0 6px}.node p{font-size:8px}.node-tag{font-size:6px;letter-spacing:.7px}.node-bottom{font-size:7px;gap:4px;margin-top:11px;padding-top:9px}.arm-label{font-size:7px;letter-spacing:.5px;margin-top:8px}.arm-label span{font-size:11px}.graph-heading{font-size:8px;letter-spacing:1px}#route-help{font-size:9px;max-width:64%;text-align:right}.player-heading>div{gap:10px}.now-playing{font-size:9px}.player-heading .eyebrow{font-size:8px;letter-spacing:1px}.waveform{height:70px}.play{min-width:100px;padding:9px 11px;font-size:10px}.transport{gap:11px;flex-wrap:wrap;position:relative;padding-bottom:16px}.player-status{position:absolute;bottom:-4px;left:0;right:0;text-align:left;font-size:9px}.subtle-button{font-size:9px}.icon-button{margin-left:auto}#restart{margin-left:0}.footer-note{display:none}footer{padding-top:12px}.cta{padding:9px 11px;font-size:10px;gap:12px}.clock{font-size:9px}.clock-divider{padding:0 4px}}
@media(max-width:380px){.stage{padding-left:14px;padding-right:14px}.edition{font-size:8px}h1{font-size:30px}.node h2{font-size:13px}.node p{font-size:7px}.arm-label{font-size:6px}.node-tag{font-size:5.5px}}
@media(max-height:650px){.stage{min-height:420px;grid-template-rows:24px minmax(80px,1fr) minmax(160px,1.15fr) 125px 40px;gap:7px;padding-top:12px;padding-bottom:10px}.hero>.eyebrow{display:none}h1{font-size:clamp(26px,4vw,42px)}.hero>p{margin-top:6px;font-size:10px}.graph-heading{padding-bottom:6px}.graph{padding-top:7px;row-gap:5px}.node{padding:9px 12px}.node h2{font-size:15px;margin:5px 0}.node-bottom{margin-top:8px;padding-top:6px}.branch{padding:7px 12px}.arm-label{margin-top:5px}.waveform{height:50px}.player{padding-top:8px}.play{padding:7px 12px}footer{padding-top:8px}.cta{padding:7px 11px}}
/* In phone landscape, put the headline beside the graph to keep one screen. */
@media(min-width:700px) and (max-height:500px){.stage{min-height:320px;padding:10px 24px;grid-template-columns:.85fr 1.15fr;grid-template-rows:24px minmax(135px,1fr) 100px 34px;gap:6px 28px}.masthead{grid-column:1 / -1}.hero{grid-column:1;grid-row:2;text-align:left}h1{font-size:32px;letter-spacing:-1.5px}.hero>p{font-size:10px;max-width:250px}.graph-section{grid-column:2;grid-row:2}.graph-heading{font-size:7px;letter-spacing:.7px;padding-bottom:4px}#route-help{font-size:8px}.graph{column-gap:6%;padding:5px 0 0;row-gap:4px}.node{padding:6px 7px;border-radius:6px}.node h2{font-size:13px}.node p{display:none}.node-tag{font-size:6px;letter-spacing:.5px}.node-bottom{font-size:7px;margin-top:5px;padding-top:5px}.arm-label{font-size:6px;margin-top:4px;letter-spacing:.4px}.arm-label>span{font-size:10px}.route-symbol{font-size:10px}.player{grid-column:1 / -1;grid-row:3;padding-top:5px}.waveform{height:37px;margin:3px 0}.transport{min-height:28px}.play{padding:6px 12px}footer{grid-column:1 / -1;grid-row:4;padding-top:5px}.cta{padding:5px 10px;font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Keep the page focused on songs and the waveform, not explanatory chrome. */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.24;background:url('./assets/background-poster.jpg') center/cover no-repeat}
.ambient video{width:100%;height:100%;object-fit:cover;display:block}
.stage{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.ambient video{display:none}}
.masthead{gap:16px}
.contact-links{display:flex;align-items:center;justify-content:flex-end;gap:22px;font-size:12px;white-space:nowrap}
.contact-links a{padding:8px 0;color:#b5b9bc}
.contact-links a:hover{color:var(--lime)}
.node h2{margin-top:0}
.transport{flex-wrap:nowrap;padding-bottom:0}
.play{width:38px;height:36px;min-width:38px;padding:0;flex-shrink:0}
.player-status{position:static;flex:1;min-width:0;margin-left:0}
.icon-button{margin-left:0}
@media(max-width:700px){.contact-links{gap:16px;font-size:11px}.masthead{gap:10px}.player-status{font-size:9px}}
@media(max-width:380px){.brand{font-size:17px;gap:6px}.brand img{width:28px;height:28px}.contact-links{gap:12px;font-size:10px}}