/* Roller rink at midnight: the landing page, plus the studio re-skinned on top of style.css. */
:root{--night:#100C12;--night-2:#1C1520;--raised:#2A2027;--raised-2:#3A2D35;--ink:#FFF4EC;--muted:#C4B3B8;--rule:#FFF4EC1F;--pink:#FF5C8A;--pink-ink:#22060F;--pink-press:#B3315A;--amber:#FFC56B;--round:"Rubik",Arial,Helvetica,sans-serif;--sans:"Figtree",Arial,Helvetica,sans-serif;
  --line:var(--rule);--blue:var(--pink);font-family:var(--sans);color:var(--ink);background:var(--night)}
body{background:var(--night)}
a{color:inherit}
::selection{background:var(--pink);color:var(--pink-ink)}
:focus-visible{outline-color:var(--pink)!important}

/* buttons: pink with a hard press shadow */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--pink);color:var(--pink-ink);font:700 17px var(--sans);padding:16px 28px;border-radius:999px;box-shadow:0 4px 0 var(--pink-press);text-decoration:none;transition:transform .08s,box-shadow .08s}
.btn.small{padding:11px 20px;font-size:14px;box-shadow:0 3px 0 var(--pink-press)}
header.nav .btn.small{background:var(--pink);color:var(--pink-ink)}
.btn:hover{background:#ff7099}
.btn:active,.primary:active,.round:active{transform:translateY(3px);box-shadow:0 1px 0 var(--pink-press)}

/* nav */
header.nav{height:auto;border:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px max(16px,5vw);background:var(--night)}
.logo{display:flex;align-items:center;gap:12px;font:700 24px var(--round);font-stretch:110%;letter-spacing:-.01em;text-decoration:none}
.logo img{display:block;border-radius:9px}
header.nav nav{display:flex;gap:30px;align-items:center;font-size:15px;font-weight:600}
header.nav nav a:not(.btn){text-decoration:none;color:#eadbd6}
header.nav nav a:not(.btn):hover{color:var(--ink)}

/* hero: the rink. Grid keeps the rail and floor below the copy at any headline length. */
.hero{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) min(600px,44vw);column-gap:56px;align-items:center;padding:40px max(16px,5vw) 0}
.wall{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(300px 220px at 16% 0%,#ff5c8a33,transparent 70%),radial-gradient(260px 220px at 56% 0%,#ffc56b24,transparent 70%),radial-gradient(280px 230px at 92% 0%,#5cc8ff22,transparent 70%),linear-gradient(#0c0910,#1a1219)}
.hero .copy{position:relative;z-index:2;grid-column:1;min-width:0}
.hero h1{font:700 clamp(50px,6.6vw,100px)/.92 var(--round);font-stretch:112%;letter-spacing:-.035em;margin:0;color:var(--ink)}
.hero h1 span,.landing h2 span{color:var(--pink)}
.hero .lede{font-size:21px;line-height:1.5;max-width:32ch;margin:26px 0 30px;color:#eadbd6}
.hero .fine{margin-top:18px;font-size:14px;color:var(--muted)}
.rink-screen{position:relative;grid-column:2;width:100%;aspect-ratio:600/380;border-radius:22px;border:10px solid #2c2128;overflow:hidden;z-index:2;display:block;text-decoration:none;color:var(--ink)}
.rink-screen .scene,.reflect .scene{position:absolute;inset:0}
.rink-screen .caption{position:absolute;left:0;right:0;bottom:15%;text-align:center;font:600 clamp(16px,1.7vw,24px) var(--sans);text-shadow:0 2px 4px #0009;padding:0 16px}
.rink-screen .caption small{display:block;font-size:11px;letter-spacing:.24em;margin-top:6px}
.rink-screen .hud{position:absolute;left:20px;right:20px;top:16px;display:flex;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.16em}
.rail{grid-column:1/-1;margin:64px calc(-1 * max(16px,5vw)) 0;height:22px;background:#3a2a33;border-top:3px solid var(--pink)}
.floor{grid-column:1/-1;position:relative;margin:0 calc(-1 * max(16px,5vw));height:190px;overflow:hidden;background:repeating-linear-gradient(90deg,#3a2622 0 60px,#33221f 60px 62px),linear-gradient(#3a2622,#22160f)}
.floor::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 120px at 74% 10%,#ff5c8a40,transparent 70%),radial-gradient(360px 90px at 30% 40%,#ffc56b2a,transparent 70%)}
.floor .lane{position:absolute;left:-10%;right:-10%;top:110px;height:6px;background:var(--pink);opacity:.85;border-radius:3px;transform:rotate(-1.2deg)}
.floor .lane.b{top:150px;background:var(--amber);opacity:.6;transform:rotate(-.6deg)}
.reflect{position:absolute;right:max(16px,5vw);top:10px;width:min(600px,44vw);height:150px;transform:scaleY(-1);opacity:.3;filter:blur(3px);overflow:hidden;border-radius:22px}

/* landing sections */
.section{padding:96px max(16px,5vw)}
.landing h2{font:700 clamp(38px,4.4vw,60px)/.98 var(--round);font-stretch:110%;letter-spacing:-.03em;margin:0;color:var(--ink)}
.landing h3{font:700 26px var(--round);letter-spacing:-.01em;margin:0;color:var(--ink)}
.landing p{color:#e2d3cf;font-size:16px;line-height:1.55}
.program{display:grid;grid-template-columns:minmax(260px,400px) 1fr;gap:72px;border-top:1px solid var(--rule)}
.board{margin:0;padding:0;border-top:2px solid var(--ink)}
.board li{list-style:none;display:grid;grid-template-columns:90px 210px 1fr 120px;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--rule)}
.board .time{font:600 22px var(--round);color:var(--muted)}
.board b{font:700 28px var(--round);font-stretch:108%;letter-spacing:-.02em}
.board .sw{height:52px;border-radius:12px}
.board li.now b,.board li.now .time{color:var(--pink)}
.board li.now .time::after{content:" · now";font-size:14px}
.how{background:var(--night-2)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;margin:56px 0 0;padding:0}
.steps li{list-style:none}
.steps .n{display:block;font:700 92px/1 var(--round);font-stretch:115%;color:var(--pink);letter-spacing:-.04em;margin-bottom:14px}
.steps h3{margin-bottom:10px}
.how .about-lead{margin-top:72px;padding-top:40px;border-top:1px solid var(--rule);max-width:80ch}
.how .about-lead h3{font-size:22px;margin-bottom:10px}
.faq-list{margin-top:44px;max-width:90ch}
.faq-list details{border-top:1px solid var(--rule);padding:18px 0}
.faq-list details:last-child{border-bottom:1px solid var(--rule)}
.faq-list summary{cursor:pointer;font:700 21px var(--round);color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--pink);font-size:26px;line-height:1}
.faq-list details[open] summary::after{content:"–"}
.faq-list details p{margin:10px 0 0;max-width:70ch;color:var(--muted)}
footer.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:28px max(16px,5vw);border-top:1px solid var(--rule);font-size:14px;color:var(--muted);letter-spacing:0}
footer.foot a{color:var(--ink);text-underline-offset:3px}
body.immersive:not(.studio-open) .landing,body.immersive:not(.studio-open)>footer.foot,body.immersive:not(.studio-open)>header.nav{display:none}

/* ---------- studio re-skin ---------- */
main#make{max-width:none;padding:56px max(16px,5vw) 72px;border-top:3px solid var(--pink);background:var(--night);scroll-margin-top:0}
.studio-title{font:700 40px var(--round);font-stretch:110%;letter-spacing:-.02em;margin:0 0 6px}
.intro p{font-size:15px;color:var(--muted)}
p,.hint{color:var(--muted)}
.hint strong{color:var(--ink)}
h2{font-family:var(--round);font-weight:700;font-size:18px;letter-spacing:-.01em}
h2 span{font-family:var(--sans);font-weight:500;font-size:12px}
.screen{background:#000;border:8px solid #2c2128;border-radius:22px;box-shadow:none}
.screen-label{font-family:var(--sans);font-weight:700}
#dropOverlay{background:#100c12e6;border:3px dashed var(--pink);border-radius:14px;font:700 28px var(--round);color:var(--ink)}
.quiet{color:var(--muted);font-size:13px;font-weight:600;border-radius:999px;padding:9px 14px}
.quiet:hover{color:var(--ink);background:var(--raised)}
.round{width:46px;height:46px;background:var(--pink);color:var(--pink-ink);font-weight:800;box-shadow:0 3px 0 var(--pink-press)}
#beatStatus{font-size:12px}
.beat-led{background:var(--pink)}
.hit .beat-led{box-shadow:0 0 0 4px #ff5c8a55}
.small{background:var(--raised);color:var(--ink);border-radius:999px;padding:10px 16px;font-size:13px;font-weight:600}
.small:hover{background:var(--raised-2)}
#addFolder,#studio{background:var(--pink);color:var(--pink-ink);box-shadow:0 3px 0 var(--pink-press)}
#addFolder:hover,#studio:hover{background:#ff7099}
.primary{background:var(--pink);color:var(--pink-ink);border-radius:999px;font:700 15px var(--sans);padding:14px;box-shadow:0 4px 0 var(--pink-press)}
.primary:hover{background:#ff7099}
aside{border-left:0;padding:24px 24px 8px;background:var(--night-2);border-radius:22px}
aside section{border-bottom-color:var(--rule)}
.number{font-family:var(--round);color:var(--muted)}
.aside-footer{font-family:var(--round);font-style:normal;color:var(--muted)}
select,#tempoSource,#manualBpm,.reactive-controls>select,.reactive-controls>input[type=date],#myLines,#titleText{background:var(--raised);border:1px solid transparent;color:var(--ink);border-radius:12px;padding:9px 10px;font-size:13px}
select:hover{border-color:var(--raised-2)}
input[type=range],input[type=checkbox]{accent-color:var(--pink)}
.slider-label,.check,.select-row{font-size:13px}
output{color:var(--muted)}
#audioStatus,#reactiveStatus,#quoteCount{color:var(--muted)}
.audio-readout #bpmReadout{font:700 40px var(--round);color:var(--pink)}
.audio-readout #vibeReadout{color:var(--ink);font-weight:600}
.audio-readout span,.audio-readout small{color:var(--muted)}
.presets button{background:var(--raised);color:var(--muted);border-radius:999px}
.presets button.selected{background:var(--pink);color:var(--pink-ink)}
.thumb{background:var(--raised);border-radius:12px;border-width:3px}
.thumb.active{border-color:var(--pink)}
button.folder{background:var(--night-2);border:0;border-radius:16px;padding:10px;outline:0}
button.folder:hover{background:var(--raised)}
button.folder.selected{background:var(--raised);outline:3px solid var(--pink);outline-offset:0}
button.folder.selected:after{background:var(--pink);color:var(--pink-ink);font-weight:800}
.style-preview{border-radius:10px}
.folder strong{font:700 16px var(--round)}
.style-description{color:var(--muted);font-size:12px}
.look-controls summary{color:var(--muted)}
.reactive-controls{border-color:var(--rule)}
.reactive-controls h2{font-size:16px}
.viewer-bottom .quiet,#viewerSettings{background:#100c12cc;border:1px solid #fff4ec24;border-radius:999px;color:var(--ink)}
.viewer-wordmark{font-family:var(--round)}
.privacy{color:var(--muted)}

@media(max-width:1100px){
  .board li{grid-template-columns:70px 170px 1fr}
  .board .sw{display:none}
}
@media(max-width:860px){
  header.nav nav a:not(.btn){display:none}
  .hero{grid-template-columns:1fr;padding:24px 16px 0}
  .hero .lede{font-size:18px}
  .rink-screen{grid-column:1;margin-top:36px;border-width:7px}
  .rail{margin:40px -16px 0}
  .floor{margin:0 -16px;height:130px}
  .floor .lane{top:52px}.floor .lane.b{top:88px}
  .reflect{display:none}
  .program{grid-template-columns:1fr;gap:28px}
  .steps{grid-template-columns:1fr;gap:36px}
  .section{padding:64px 16px}
  .steps .n{font-size:64px}
  main#make{padding:40px 16px 56px}
  aside{padding:20px 16px 8px}
}
@media(max-width:520px){
  .board li{grid-template-columns:56px 1fr;gap:4px 14px}
  .board li p{grid-column:2}
  .board b{font-size:24px}
  .logo{font-size:21px}
  header.nav{padding:18px 16px}
}
@media(prefers-reduced-motion:reduce){.btn,.primary,.round{transition:none}}

/* landing headings keep their pink word at full size (studio h2 span rule is for counters) */
.landing h2 span,.hero h1 span{font:inherit;margin:0;color:var(--pink)}

/* sidebar: essentials up front, advanced settings folded into groups */
aside .look-controls{padding-bottom:16px;margin-bottom:18px}
aside .look-controls .section-heading{margin:0}
aside .look-controls h2{font-size:22px}
.audio .audio-readout{margin:16px 0 0;grid-template-columns:80px minmax(0,1fr)}
.quick .select-row{margin-bottom:10px}
.quick .select-row select{min-width:150px}
.quick #styleHint{margin:-2px 0 10px}
.quick .slider-label{margin-top:8px}
.quick .check{margin:12px 0}
details.group{border-bottom:1px solid var(--rule)}
details.group:last-of-type{border-bottom:0}
details.group>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:15px 0;font:700 16px var(--round);color:var(--ink)}
details.group>summary::-webkit-details-marker{display:none}
details.group>summary::after{content:"+";color:var(--pink);font-size:22px;line-height:1}
details.group[open]>summary::after{content:"–"}
details.group>summary:hover{color:var(--pink)}
.group-body{padding:0 0 18px}
.group-body>label:not(.check){display:block;font-size:12px;margin:14px 0 6px}
.group-body>label:first-child{margin-top:0}
.group-body>select,.group-body>input[type=number],.group-body>input[type=date],.group-body>input[type=text]{width:100%}
.group-body>.small{margin:8px 8px 4px 0}
.group-body .hint{margin-top:6px}
.group-body.reactive-controls{border:0;margin:0;padding:0 0 18px}

/* hero and nav share a capped, centred content width; the rink wall and floor stay full-bleed */
:root{--gutter:max(16px,5vw,calc((100vw - 1240px) / 2))}
header.nav{padding-left:var(--gutter);padding-right:var(--gutter)}
.hero{padding-left:var(--gutter);padding-right:var(--gutter);grid-template-columns:minmax(0,1fr) min(540px,42vw);column-gap:64px}
.rail{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
.floor{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
.reflect{right:var(--gutter);width:min(540px,42vw)}
.hero h1{font-size:clamp(50px,6vw,92px)}
@media(max-width:860px){:root{--gutter:16px}.hero{grid-template-columns:1fr}}
main#make,.section,footer.foot{padding-left:var(--gutter);padding-right:var(--gutter)}

/* Rubik: heavier weight and slightly tighter tracking for display, so headings stay bold without the bubbly look */
.hero h1{font-weight:800;letter-spacing:-.04em;line-height:.95}
.landing h2{font-weight:800;letter-spacing:-.035em}
.steps .n{font-weight:800}

/* the old style.css .faq{max-width:80ch} squeezed the whole section once gutters were added */
section.faq{max-width:none}

/* home: section ledes, use cases, footer guide links */
.section-lede{max-width:60ch;margin-top:16px;font-size:18px!important;color:#e2d3cf}
.uses{border-top:1px solid var(--rule)}
.use-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin-top:48px}
.use-grid h3{font-size:22px;margin-bottom:10px}
.use-grid h3 a{color:var(--ink);text-decoration:none;background:linear-gradient(var(--pink),var(--pink)) 0 100%/100% 3px no-repeat;padding-bottom:2px}
.use-grid h3 a:hover{color:var(--pink)}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 24px;width:100%;margin-bottom:6px}
.foot-links a{color:var(--ink);font-weight:600}
@media(max-width:1100px){.use-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.use-grid{grid-template-columns:1fr;gap:28px}}

/* guide pages */
.guide-page main.guide{display:block;max-width:none;margin:0;padding:24px var(--gutter) 40px}
.crumbs{display:flex;gap:10px;font-size:14px;color:var(--muted);margin-bottom:28px}
.crumbs a{color:var(--muted)}
.guide-hero{display:grid;grid-template-columns:minmax(0,1fr) min(440px,38vw);gap:56px;align-items:center}
.guide-hero h1{font:800 clamp(40px,5vw,72px)/.98 var(--round);letter-spacing:-.04em;margin:0;color:var(--ink)}
.guide-hero h1 span{color:var(--pink)}
.guide-hero .lede{font-size:20px;line-height:1.55;max-width:44ch;margin:24px 0 28px;color:#eadbd6}
.guide-hero .fine{margin-top:16px;font-size:14px;color:var(--muted)}
.guide-hero .rink-screen{grid-column:auto;width:100%}
.guide-rail{height:22px;background:#3a2a33;border-top:3px solid var(--pink);margin:64px calc(-1 * var(--gutter)) 0}
.guide-sec{max-width:820px;padding:56px 0 0}
.guide-sec h2,.guide-cta h2{font:800 clamp(28px,3vw,40px)/1.05 var(--round);letter-spacing:-.03em;margin:0 0 20px;color:var(--ink)}
.guide-sec p,.guide-sec li{font-size:17px;line-height:1.65;color:#e2d3cf}
.guide-sec b{color:var(--ink)}
.guide-steps,.guide-list{margin:0;padding-left:22px;display:grid;gap:12px}
.guide-steps li::marker{color:var(--pink);font-weight:800;font-family:var(--round)}
.guide-list li::marker{color:var(--pink)}
.guide-sec .faq-list{margin-top:8px}
.guide-cta{margin-top:72px;padding:48px 0;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.guide-cta h2{margin:0}
@media(max-width:860px){.guide-hero{grid-template-columns:1fr;gap:32px}.guide-rail{margin-top:40px}.guide-sec{padding-top:44px}}