/* Concept G: one continuous scene, followed by the prototype story. */
:root{--paper:#f5f2e9;--ink:#292d3a;--muted:#676775;--line:#cfced2;--blue:#3553c7;--blue-light:#e5e9ff;--pink:#b52a62;--pink-light:#f9e1ea;--sans:'DM Sans',sans-serif;--label:'Barlow Condensed',sans-serif;--mono:'IBM Plex Mono',monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:5px}button{font:inherit;color:inherit}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.skip{position:fixed;top:12px;left:12px;z-index:10;padding:12px 18px;background:var(--ink);color:var(--paper);transform:translateY(-180%)}.skip:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:min(1350px,calc(100% - 96px));margin:auto}
.eyebrow{font:10px/1.8 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;padding:12px 19px;background:var(--blue);color:#fff;border-radius:4px;font-size:12px;font-weight:500;text-decoration:none;min-height:45px}.cta:hover{background:#2945b0}
.placeholder{font:9px/1.8 var(--mono);color:var(--muted);margin-top:7px}
.site-credit{border-top:1px solid var(--line);padding:22px 0 32px;display:flex;justify-content:space-between;gap:24px;font:11px/1.8 var(--mono);color:var(--muted)}.site-credit div{display:flex;gap:23px}.site-credit a{text-decoration:none}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes flow{to{stroke-dashoffset:-70}}
.graph-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.graph-lines path{fill:none;stroke:var(--blue);stroke-width:3.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.graph-lines .branch-line{stroke:var(--pink);stroke-dasharray:6 7}.has-branch .graph-lines .branch-line{stroke-dasharray:none}
.graph-lines .future-line{stroke:#3553c778;stroke-dasharray:3 8;stroke-width:2}
.graph-lines .stream,.graph-lines .branch-stream{stroke:#fff;stroke-width:2;stroke-dasharray:1 34;opacity:0}
.playing .graph-lines .stream{opacity:.85;animation:flow 1.25s linear infinite}
.playing[data-selected=night] .graph-lines .branch-stream,.playing[data-selected=pulse] .graph-lines .branch-stream{opacity:.85;animation:flow 1.25s linear infinite}
.mobile-lines{display:none}
.node{--node-color:var(--blue);--node-soft:var(--blue-light);position:absolute;left:var(--x);top:var(--y);width:124px;transform:translate(-50%,-22px);text-align:center;border:0;background:transparent;padding:0 3px 8px;cursor:pointer;border-radius:4px}
.node-orb{position:relative;display:grid;place-items:center;width:44px;height:44px;margin:0 auto 8px;border:2px solid var(--node-color);background:#fffdf8;color:var(--node-color);border-radius:50%;box-shadow:0 3px 8px #35426718;transition:background .18s,color .18s,box-shadow .18s,transform .18s}
.node-orb svg{width:11px;height:13px;margin-left:2px;fill:currentColor}
.node[data-branch=true]{--node-color:var(--pink);--node-soft:var(--pink-light)}
.node:hover .node-orb{background:var(--node-soft);box-shadow:0 0 0 6px #3553c710;transform:scale(1.06)}
.node[aria-pressed=true] .node-orb{background:var(--node-color);color:#fff;transform:scale(1.12);box-shadow:0 0 0 6px #3553c71a}
.node-title{display:table;max-width:100%;margin:0 auto;padding:2px 7px;background:#f5f2e9ed;border-radius:3px;font-size:15px;font-weight:600;line-height:1.4;letter-spacing:-.3px;color:var(--ink)}
.node-note{display:table;max-width:100%;margin:3px auto 0;padding:1px 5px;border-radius:2px;background:#f5f2e9ed;color:#555b69;font:9px/1.6 var(--mono)}
.node[aria-pressed=true] .node-title{color:var(--node-color)}
.playing .node[aria-pressed=true] .node-orb{box-shadow:0 0 0 calc(5px + var(--beat,0) * 8px) #3553c722,0 3px 9px #35426718}
.playing .node[data-branch=true][aria-pressed=true] .node-orb{box-shadow:0 0 0 calc(5px + var(--beat,0) * 8px) #b52a6225,0 3px 9px #35426718}
.branch-label{position:absolute;left:38%;top:43%;font-size:11px;line-height:1.6;font-weight:500;color:var(--pink);background:#f5f2e9dc;border-radius:2px;padding:3px 7px;transform:rotate(19deg)}
.return{position:absolute;bottom:20px;left:24px;display:inline-flex;align-items:center;gap:10px;background:#fffdf5;border:1px solid var(--blue);border-radius:4px;color:var(--blue);padding:11px 15px;min-height:43px;font-size:12px;font-weight:500;cursor:pointer;z-index:2;box-shadow:0 3px 8px #3040670b}
.return:disabled{opacity:.5;cursor:default}.return:not(:disabled):hover{background:var(--blue-light)}

.playhead-area{position:absolute;bottom:0;left:0;right:0;height:3px;overflow:hidden;pointer-events:none;background:#3553c712}.playhead{position:absolute;top:0;left:0;height:3px;width:35px;background:var(--blue);opacity:0}.playing .playhead{opacity:1}


/* The exposed timber at the top of the image is the upstairs floor cut in section. */
.reserve{position:relative;isolation:isolate;background:#343229;overflow:hidden;scroll-margin-top:0}
.reserve-room{display:block;width:100%;height:auto}
.reserve h2{position:absolute;top:17%;left:22%;right:22%;margin:0;text-align:center;color:#fff5dc;font:500 clamp(28px,5.5vw,100px)/1.02 var(--label);letter-spacing:-.015em;text-shadow:0 2px 12px #15150f66;text-wrap:balance}
.reserve h2 span{display:block}

.song-history{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,7vw,110px);padding:78px 0 64px}
.song-history p,.proof-strip p,.horizon p,.join p{margin:0}
.song-history .eyebrow,.proof-strip .eyebrow,.horizon .eyebrow,.join .eyebrow{font-size:11px;color:var(--muted);margin-bottom:17px}
.song-history h2,.horizon h2,.join h2{font:500 clamp(40px,4.6vw,64px)/1.05 var(--label);letter-spacing:-.025em;margin:0 0 22px;text-wrap:balance}
.song-history h2 span{color:var(--blue)}
.history-intro{max-width:460px}
.history-intro .lead{font-size:18px;line-height:1.65;color:var(--ink);margin-bottom:16px}
.history-intro .history-context{font-size:14px;line-height:1.8;color:var(--muted);max-width:400px}
.interviews{margin-top:15px;max-width:420px}
.interviews summary{font-size:12px;min-height:44px;display:list-item;padding:10px 0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px}
.interviews p{font-size:13px;line-height:1.8;color:var(--muted);padding:6px 0 0}
.action-list{position:relative;align-self:start;padding:4px 0 0}
.action-list:before{content:'';position:absolute;left:7px;top:22px;bottom:56px;width:1px;background:#97a6db}
.action-row{position:relative;display:grid;grid-template-columns:16px minmax(0,1fr);gap:22px;padding:0 0 27px}
.action-row:last-child{padding-bottom:0}
.action-dot{width:15px;height:15px;border:2px solid var(--blue);border-radius:50%;background:var(--paper);margin-top:10px;z-index:1}
.action-row:nth-child(2) .action-dot{border-color:var(--pink)}
.action-row:last-child .action-dot{background:var(--blue)}
.action-row h3{font:500 30px/1.2 var(--label);letter-spacing:-.015em;margin:0 0 7px}
.action-row p{font-size:14px;line-height:1.75;color:var(--muted);max-width:420px}
.proof-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0 24px}
.proof-strip .eyebrow{margin-bottom:20px}
.proof-facts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,7vw,110px)}
.proof-facts h3{font-size:15px;line-height:1.5;font-weight:600;margin:0 0 9px}
.proof-facts p{font-size:13px;line-height:1.8;color:var(--muted);max-width:460px}
.proof-strip .proof-context{font-size:11px;line-height:1.8;color:var(--muted);max-width:920px;margin-top:22px}
.horizon{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,7vw,110px);padding:65px 0}
.horizon .eyebrow{color:var(--pink)}
.horizon h2{font-size:clamp(38px,4.1vw,55px);max-width:420px;margin-bottom:0}
.horizon-copy{max-width:510px;padding-top:3px}
.horizon-copy p{font-size:14px;line-height:1.85;color:var(--muted)}
.horizon-copy p+p{margin-top:15px}
.horizon-copy .vision-lead{font-size:18px;color:var(--ink)}
.horizon-copy strong{font-weight:500;color:var(--ink)}
.horizon-copy .future-limit{font:11px/1.8 var(--mono);color:var(--pink);margin-top:19px}
.join{display:flex;align-items:center;justify-content:space-between;gap:32px;background:var(--blue-light);border-radius:6px;padding:32px 36px;margin-bottom:32px}
.join .eyebrow{color:var(--blue);margin-bottom:9px}
.join h2{font-size:clamp(32px,3.2vw,44px);margin:0}
.join-action{flex-shrink:0}
.join .cta{font-size:14px;min-height:50px;gap:35px}
.join .placeholder{font:10px/1.8 var(--mono);margin-top:8px;color:#555b69;max-width:290px}
.site-credit{font-size:11px;align-items:center}
.site-credit p{margin:0}.site-credit a{padding:10px 0;display:inline-block}
@media(max-width:900px){.song-history,.horizon{gap:40px}.song-history h2{font-size:48px}.action-row{gap:16px}.action-row h3{font-size:28px}.join{padding:28px;gap:24px}.join .cta{gap:22px}.site-credit div{gap:17px}}
@media(max-width:760px){.song-history{grid-template-columns:1fr;gap:34px;padding:43px 0 36px}.song-history h2{font-size:45px;max-width:450px;margin-bottom:18px}.history-intro{max-width:none}.history-intro .lead{font-size:17px;margin-bottom:13px}.history-intro .history-context{max-width:480px}.action-row p{max-width:480px}.action-row{padding-bottom:25px}.proof-strip{padding:25px 0}.proof-facts{grid-template-columns:1fr;gap:22px}.proof-strip .proof-context{margin-top:20px}.horizon{grid-template-columns:1fr;gap:23px;padding:39px 0}.horizon h2{font-size:41px;max-width:none}.horizon-copy{padding-top:0;max-width:none}.join{display:block;padding:25px 22px;margin-bottom:24px}.join-action{margin-top:23px}.join .cta{max-width:none;font-size:13px}.join .placeholder{max-width:none}.site-credit{display:block;font-size:10px;padding-top:18px}.site-credit>p+p{margin-top:10px}.site-credit div{margin-top:7px;display:flex;flex-wrap:wrap;gap:20px}}



/* The sky and the room reach all four edges; controls sit in the sky. */
.hero{--tree-lift:88px;--tree-height:clamp(190px,26vh,260px);position:relative;isolation:isolate;height:100vh;height:100svh;min-height:max(780px,50vw)}
.stage{position:absolute;inset:0;z-index:0;overflow:hidden;background:#9bc6e5 url("studio-room.jpg") center top/auto 250% no-repeat}
.studio-scene{position:absolute;left:0;right:0;bottom:0;aspect-ratio:1400/649;isolation:isolate;z-index:0}
.stage-room{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 clamp(24px,4vw,48px));mask-image:linear-gradient(to bottom,transparent,#000 clamp(24px,4vw,48px))}
.hero-nav{position:absolute;top:26px;left:4.5%;z-index:4}
.brand{display:inline-flex;gap:10px;align-items:center;font-size:24px;font-weight:700;letter-spacing:-1px;text-decoration:none;min-height:36px}.brand svg{width:36px;height:36px;color:var(--blue)}
.hero-head{position:absolute;top:22px;right:28px;z-index:3;max-width:min(760px,calc(100% - 270px));text-align:right}
.hero-head h1{font:500 clamp(38px,3.8vw,60px)/.94 var(--label);letter-spacing:-.025em;margin:0}
.hero-head h1 span{white-space:nowrap}
.hero-head p{font-size:16px;line-height:1.6;margin:10px 0 0 auto;max-width:360px}
.graph{position:absolute;top:auto;bottom:min(calc(57.15% + 16px + var(--tree-lift)),calc(max(100svh,780px,50vw) - var(--tree-height) * .761905 - 183px));left:6.6%;right:0;width:92%;margin-inline:auto;height:var(--tree-height);z-index:1;animation:float 8s ease-in-out infinite}
.listen-bar{position:absolute;left:4.5%;top:calc(100% - 26.5vw - var(--tree-height) * .761905 + 70px);z-index:4;width:258px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.play{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:14px;min-height:54px;width:100%;background:var(--blue);border:1px solid var(--blue);color:#fff;padding:13px 18px;border-radius:5px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 4px 0 #253c9c;transition:transform .16s,box-shadow .16s}
.play:hover{background:#2945b0}.play:active{transform:translateY(2px);box-shadow:0 2px 0 #253c9c}.play[data-state=playing]{background:var(--ink);border-color:var(--ink);box-shadow:0 4px 0 #151722}
/* Drawn icons: text symbols such as ▶ turn into emoji on iPhone. */
#play-icon{display:flex}#play-icon svg{width:14px;height:16px;fill:currentColor}
.icon-pause,.play[data-state=playing] .icon-play{display:none}.play[data-state=playing] .icon-pause{display:block}
.icon-stop{width:8px;height:8px;margin-right:4px;fill:currentColor;vertical-align:0}
.controls{display:flex;gap:7px;grid-column:1/-1}
.control{background:#f5f2e9df;border:1px solid #7d899e;border-radius:4px;padding:10px 12px;min-width:64px;min-height:44px;font:10px var(--mono);cursor:pointer}.control:hover{border-color:var(--ink)}.control:disabled{opacity:.45;cursor:default}.control[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.demo-caption span{display:block}
.demo-caption{grid-column:1/-1;font:10px/1.7 var(--mono);color:#34425a;margin:1px 0 0;max-width:258px}
.return{left:4.5%;bottom:calc(26px + max(0px,100% - 100vh));bottom:calc(26px + max(0px,100% - 100svh))}.return:disabled{display:none}
.scroll-cue{position:absolute;right:4.5%;bottom:26px;z-index:3;background:#f5f2e9f2;border:1px solid #ddd6c4;border-radius:4px;padding:10px 15px;min-height:44px;display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-size:12px;color:var(--ink)}.scroll-cue:hover{background:var(--paper)}
.no-script{position:absolute;z-index:4;top:46%;left:4.5%;font:12px/1.7 var(--mono);max-width:270px;background:#f5f2e9ed;padding:14px}
.no-js .listen-bar,.no-js .return{display:none}.no-js .graph{animation:none}.no-js .node{cursor:default}
@media(max-width:1150px) and (min-width:761px){.hero{--tree-height:260px}}
@media(max-width:1050px){.wrap{width:calc(100% - 56px)}.node{width:115px}.node-title{font-size:14px}.node-note{font-size:9px}.branch-label{left:35%;font-size:10px}}
.phone-thread{display:none}
@media(max-width:760px) and (orientation:portrait),(max-width:760px) and (min-height:501px){
 /* Two screens. The sky stays still behind the page (Safari paints the strip behind the clock in one flat colour,
    the same blue as the top of this sky); the title, Play and the tree fill the first screen, and the desk with
    the "Save As" window rises from below. A dotted line leaves "+ melody" and comes down to the computer. */
 html,body{background:#5fadfd}
 .hero{--tree-nudge:clamp(0px,calc(0.46 * 100vw - 164px),26px);min-height:0;height:200vh;height:200lvh}
 .hero:before{content:"";position:fixed;z-index:-1;left:0;right:0;top:0;height:100vh;height:100lvh;background:#79bef9 url("ciel-telephone.jpg") center top/100% auto no-repeat}
 .stage{background:none}
 .stage-room{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 260px);mask-image:linear-gradient(to bottom,transparent,#000 260px)}
 .hero-nav{left:20px;top:16px}.brand{font-size:20px}.brand svg{width:31px;height:31px}
 .hero-head{left:20px;right:auto;top:84px;max-width:none;text-align:left}.hero-head h1{font-size:32px;line-height:.95}.hero-head h1 span{display:block}
 .hero-head p{font-size:13px;line-height:1.35;margin:8px 0 0;max-width:112px}
 .hero-head h1,.hero-head p,.brand{text-shadow:0 0 18px #ffffff66}
 /* Play on the right of the title, Mute and Stop under it; both blocks leave some air under the logo. */
 .listen-bar{left:auto;right:20px;top:92px;width:170px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
 .play{width:170px;min-height:44px;padding:0 12px;gap:9px;font-size:13px;border-radius:999px;box-shadow:0 6px 18px #1d2c8a40}
 .controls{width:100%;gap:6px}
 .control{flex:1;min-width:44px;min-height:44px;padding:0 8px;font-size:9px;border-radius:999px;background:#ffffff4d;border:1px solid #ffffffb3;color:#16202f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
 .control:disabled{opacity:.8}
 .demo-caption{order:3;width:100%;max-width:none;margin:0;font-size:9.5px;line-height:1.35;text-align:right;color:#16202f;text-shadow:0 0 6px #ffffffb0}
 /* The room keeps the painting's own scale, centred on the computer, at the bottom of the second screen. */
 .studio-scene{left:50%;right:auto;width:1400px;transform:translateX(-53.3%)}
 /* The tree runs the whole page: under the title, down to the computer. It shifts right as the
    screen gets wider (nothing on a 320px phone, where the longest label already reaches the edge). */
 .graph{left:calc(53.3% - 50vw);right:auto;top:calc(965px - 200vh);top:calc(965px - 200lvh);bottom:auto;width:100vw;margin:0;height:calc(200vh - 693px);height:calc(200lvh - 693px);animation:none}
 .desktop-lines{display:none}
 .mobile-lines{display:block;transform:translateX(var(--tree-nudge))}
 .graph-lines path{stroke-width:4}
 .graph-lines .branch-line{stroke-dasharray:7 8}
 .mobile-lines .future-line{display:block;stroke:#3553c7a6;stroke-width:3.5;stroke-dasharray:0 12;stroke-linecap:round;animation:thread 1.4s linear infinite}
 .node,.node[data-branch=true]{left:var(--px);top:var(--py);width:auto;height:auto;padding:0;transform:translate(calc(-24px + var(--tree-nudge)),-24px);display:grid;grid-template-columns:48px auto;grid-template-rows:auto auto;align-content:center;column-gap:8px;text-align:left;min-height:48px;border-radius:12px}
 .node-orb,.node[data-branch=true] .node-orb{position:relative;grid-row:1/3;width:48px;height:48px;margin:0;border-width:2.5px;box-shadow:0 4px 14px #1d2c8a33}
 .node-orb svg{width:12px;height:14px}
 .node-title,.node[data-branch=true] .node-title,.node-note,.node[data-branch=true] .node-note{position:static;display:block;justify-self:stretch;transform:none;max-width:none;margin:0;white-space:nowrap;text-shadow:none;background:#f5f2e9f0}
 .node-title,.node[data-branch=true] .node-title{align-self:end;padding:6px 8px 1px;border-radius:7px 7px 0 0;font-size:16px;line-height:1.25;color:var(--ink)}
 .node-note,.node[data-branch=true] .node-note{align-self:start;padding:1px 8px 6px;border-radius:0 0 7px 7px;font:10px/1.5 var(--mono);color:#5b6070}
 .node-title,.node-note{box-shadow:0 6px 14px -8px #1d2c8a59}
 .node[aria-pressed=true] .node-title{color:var(--node-color)}
 .node[aria-pressed=true] .node-orb{transform:scale(1.08);box-shadow:0 0 0 7px #3553c724,0 4px 14px #1d2c8a33}
 .node[data-branch=true][aria-pressed=true] .node-orb{box-shadow:0 0 0 7px #b52a6224,0 4px 14px #1d2c8a33}
 .node[data-version=chords]{--px:10%;--py:3.1%}.node[data-version=drums]{--px:10%;--py:25.9%}
 .node[data-version=bass]{--px:10%;--py:48.8%}.node[data-version=melody]{--px:10%;--py:71.6%}
 .node[data-version=night]{--px:54%;--py:48.8%}.node[data-version=pulse]{--px:54%;--py:71.6%}
 .branch-label{display:none}
 /* "Back to your mix" sits in the sky under Play, clear of the tree and of the computer. */
 .return{left:auto;right:16px;top:236px;bottom:auto;font-size:11px;min-height:44px;padding:10px 14px;border-radius:999px;background:#fffdf5;box-shadow:0 4px 14px #1d2c8a26}
 .no-script{left:20px;top:240px;max-width:calc(100% - 40px);font-size:11px;line-height:1.45;padding:10px}
 .wrap{width:calc(100% - 36px)}
}
/* Phones held sideways, and other short wide windows: the title on the right and the tree across the sky, as on
   a computer; below, the desk at the painting's own scale, as on a phone held upright, so the "Save As" window
   stays readable. The still sky and its blue are the upright phone's. */
@media(orientation:landscape) and (max-height:500px){
 html,body{background:#5fadfd}
 .hero{min-height:0;height:max(200vh,880px);height:max(200lvh,880px)}
 .hero:before{content:"";position:fixed;z-index:-1;left:0;right:0;top:0;height:100vh;height:100lvh;background:#79bef9 url("ciel-telephone.jpg") center top/100% auto no-repeat}
 .stage{background:none}
 .stage-room{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 260px);mask-image:linear-gradient(to bottom,transparent,#000 260px)}
 .studio-scene{left:50%;right:auto;width:1400px;transform:translateX(-53.3%)}
 .hero-nav{left:24px;top:14px}.brand{font-size:20px}.brand svg{width:30px;height:30px}
 .hero-head{left:auto;right:24px;top:16px;max-width:calc(100% - 200px)}
 .hero-head h1{font-size:30px;line-height:1}
 .hero-head p{font-size:13px;line-height:1.35;margin:4px 0 0 auto}
 .hero-head h1,.hero-head p,.brand{text-shadow:0 0 18px #ffffff66}
 /* Play, Mute and Stop in one row under the logo, the caption after them. */
 .listen-bar{left:24px;top:70px;width:auto;display:flex;align-items:center;gap:8px}
 .play{width:auto;min-height:40px;padding:0 18px;gap:9px;font-size:13px;border-radius:999px;box-shadow:0 6px 18px #1d2c8a40}
 .controls{gap:6px}
 .control{min-width:58px;min-height:40px;padding:0 10px;font-size:9px;border-radius:999px;background:#ffffff4d;border:1px solid #ffffffb3;color:#16202f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
 .control:disabled{opacity:.8}
 .demo-caption{margin:0 0 0 4px;font-size:9.5px;line-height:1.35;color:#16202f;text-shadow:0 0 6px #ffffffb0}
 /* The tree 120px under the top, as wide as the screen; the desk starts well below it. */
 .graph{left:calc(53.3% - 47vw);right:auto;width:94vw;margin:0;bottom:auto;top:calc(769px - max(200vh,880px));top:calc(769px - max(200lvh,880px));height:clamp(235px,calc(100vh - 128px),280px);height:clamp(235px,calc(100svh - 128px),280px);animation:none}
 .branch-label{display:none}
 .return{left:24px;bottom:auto;top:calc(100vh - 62px);top:calc(100svh - 62px);font-size:11px;min-height:40px;padding:9px 14px;border-radius:999px;box-shadow:0 4px 14px #1d2c8a26}
}
@media(max-width:360px){.hero-head h1{font-size:30px}}
@media(max-width:340px){.hero-head h1{font-size:27px}.listen-bar{width:145px}.play{width:145px}.node-title,.node[data-branch=true] .node-title{font-size:14px}.node-note,.node[data-branch=true] .node-note{font-size:9px}}
@keyframes thread{to{stroke-dashoffset:-24}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.graph{transform:none}.playing .node[aria-pressed=true] .node-orb,.playing .node[data-branch=true][aria-pressed=true] .node-orb{box-shadow:0 0 0 5px #3553c71a}.playing .graph-lines .stream,.playing[data-selected=night] .graph-lines .branch-stream,.playing[data-selected=pulse] .graph-lines .branch-stream{opacity:0}.playhead{display:none}}