*{box-sizing:border-box}
:root{color-scheme:dark;--ink:#eee5cb;--muted:#969180;--line:#393a31;--panel:#151712;--gold:#dfc47e}
body{margin:0;background:
 radial-gradient(circle at 43% 40%,rgba(80,83,57,.16),transparent 27%),
 radial-gradient(circle at 45% 40%,#20221b,#131510 57%,#0d0e0b);
 color:var(--ink);font-family:Arial,sans-serif;min-height:100vh}
body:before{content:"";position:fixed;inset:-8%;pointer-events:none;z-index:-1;opacity:.055;
 background:
 repeating-radial-gradient(circle at 43% 43%,transparent 0 18px,rgba(235,221,178,.45) 19px,transparent 20px 43px),
 radial-gradient(ellipse at 39% 42%,rgba(150,95,170,.12),transparent 36%),
 radial-gradient(ellipse at 48% 47%,rgba(92,142,126,.10),transparent 34%);
 animation:slowRipple 34s ease-in-out infinite}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.025;
 background:repeating-linear-gradient(117deg,transparent 0 31px,rgba(226,194,113,.28) 32px,transparent 33px 68px);
 animation:acidDrift 48s linear infinite}
@keyframes slowRipple{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(.7%,-.5%) scale(1.014)}}
@keyframes acidDrift{0%{transform:translateX(-1%)}50%{transform:translateX(1%)}100%{transform:translateX(-1%)}}

main{max-width:1380px;margin:auto;padding:28px 38px}
header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px;gap:24px}
small{font:10px monospace;letter-spacing:.18em;color:var(--muted)}
h1{font-size:34px;font-weight:500;margin:5px 0 0}
h1 em{font-style:normal;color:var(--gold);font-family:monospace}
.transport{display:flex;gap:12px;align-items:center;flex:0 0 auto}
.transport label{font:11px monospace;color:var(--muted);display:flex;align-items:center}
.transport input{width:72px;background:#10110e;border:1px solid var(--line);color:var(--ink);padding:10px;margin-left:8px}
button{background:#1c1e18;border:1px solid #424338;color:var(--ink);padding:9px 12px;border-radius:3px;font:10px monospace;cursor:pointer}
button:hover,button.active{background:#292b22;border-color:#989078}
.transport button{min-width:90px}
.transport .playing{background:#d8c58d;color:#11120f}

.stage{display:grid;grid-template-columns:76px minmax(500px,1fr) 370px;min-height:760px;align-items:center;column-gap:18px}
.rings{position:relative;display:grid;place-items:center;min-width:0}
.rings:before{content:"";position:absolute;width:min(88%,680px);aspect-ratio:1;border-radius:50%;pointer-events:none;
 box-shadow:0 0 80px rgba(218,194,125,.045),inset 0 0 65px rgba(127,155,132,.025)}
.rings canvas{width:min(760px,100%);height:auto;display:block;filter:drop-shadow(0 0 18px rgba(218,194,125,.035))}
.centre{position:absolute;text-align:center;pointer-events:none}
.centre b{display:block;font:42px monospace;color:#d8c58d;text-shadow:0 0 24px rgba(216,197,141,.10)}
.centre span{font:9px monospace;letter-spacing:.16em;color:#777667}

.energy-rail{height:540px;position:relative;display:flex;align-items:center;justify-content:center;align-self:center}
.energy-rail .energy{position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;white-space:nowrap}
.energy-rail .energy span{font:10px monospace;letter-spacing:.16em;color:var(--muted)}
.energy-rail .energy output{font:11px monospace;color:var(--ink)}
.energy-slider{width:36px;height:410px;display:flex;align-items:center;justify-content:center}
.energy-slider input[type=range]{width:410px;height:2px;margin:0;transform:rotate(-90deg);transform-origin:center;background:#4a493d}
.energy-slider input[type=range]::-webkit-slider-thumb{width:19px;height:19px;border:4px solid #28291f;background:#ddc77f}
.energy-rail .energy-max,.energy-rail .energy-min{position:absolute;left:50%;transform:translateX(-50%);font:8px monospace;color:#67675d}
.energy-rail .energy-max{top:61px}.energy-rail .energy-min{bottom:55px}

aside{border-left:1px solid var(--line);padding-left:32px;min-width:0}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:38px}
.tab{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:rgba(18,20,15,.35)}
.tab.selected{border-color:#9c9278}
.pick{width:100%;border:0;border-radius:0;background:transparent}
.pick b,.pick span{display:block}.pick span{font-size:8px;color:var(--muted);margin-top:3px}
.ms{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.ms button{border:0;border-radius:0;padding:5px;color:#777668;background:#11120f}
.ms button+button{border-left:1px solid var(--line)}
.ms button.on{background:#d8c58d;color:#11120f}
.intro{min-height:145px}.intro h2{font-size:38px;font-weight:500;margin:5px 0}.intro p{font-size:13px;line-height:1.55;color:#b6b09b}
.ctrl{margin:24px 0}.ctrl label{display:flex;justify-content:space-between;font:10px monospace;letter-spacing:.12em;color:#a29d8c}.ctrl output{color:var(--ink)}
input[type=range]{appearance:none;width:100%;height:2px;background:#45463b;margin-top:15px}
input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#dccb91;border:4px solid #25261f}
.setup{margin-top:34px}.setup div{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.hint{border-top:1px solid var(--line);padding-top:16px;margin-top:34px;color:#7a796b;font-size:11px;line-height:1.5}
footer{border-top:1px solid var(--line);padding-top:16px;font:9px monospace;color:#777668}
footer b{color:#aaa287;margin-right:10px}

@media(max-width:1050px){
 main{padding:24px}
 .stage{grid-template-columns:64px minmax(430px,1fr) 320px;column-gap:12px}
 aside{padding-left:24px}
 .energy-rail{height:470px}.energy-slider{height:350px}.energy-slider input[type=range]{width:350px}
 .intro h2{font-size:32px}
}
@media(max-width:900px){
 main{padding:20px}
 header{align-items:flex-end}
 .stage{grid-template-columns:1fr;min-height:0}
 .rings{grid-row:2;margin:10px auto 18px;width:min(720px,100%)}
 .energy-rail{grid-row:1;height:auto;width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:14px;padding:26px 4px 12px}
 .energy-rail .energy{position:static;transform:none;flex-direction:row;justify-content:flex-start}
 .energy-slider{width:100%;height:auto}
 .energy-slider input[type=range]{width:100%;transform:none;margin:0}
 .energy-rail .energy-max,.energy-rail .energy-min{display:none}
 aside{grid-row:3;border-left:0;border-top:1px solid var(--line);padding:28px 0 0}
 .tabs{margin-bottom:28px}
}
@media(max-width:600px){
 main{padding:16px}
 header{align-items:flex-start;gap:16px}
 h1{font-size:29px}
 .transport{gap:7px}
 .transport label{font-size:9px}
 .transport input{width:62px;margin-left:5px;padding:8px}
 .transport button{min-width:68px;padding:8px}
 .energy-rail{grid-template-columns:1fr;padding-top:20px;gap:10px}
 .energy-rail .energy{justify-content:space-between;width:100%}
 .rings{margin-top:0}
 .tabs{gap:4px}
 .pick{padding-left:5px;padding-right:5px}
 .intro{min-height:0;margin-bottom:26px}
 .intro h2{font-size:32px}
}
@media(max-width:420px){
 header{display:grid;grid-template-columns:1fr auto}
 header small{letter-spacing:.12em}
 .transport{align-self:center}
 .stage{margin-top:4px}
 .tabs{grid-template-columns:1fr}
 .tab{display:grid;grid-template-columns:1fr 86px}
 .ms{border-top:0;border-left:1px solid var(--line)}
 footer{line-height:1.6}
}

.energy-rail{height:100%;min-height:700px;align-self:stretch}.energy-rail .energy{top:24px}.energy-slider{width:36px;height:620px}.energy-slider input[type=range]{width:620px;min-width:620px;flex:0 0 620px}.centre{width:120px;height:120px;display:grid;place-items:center}.centre span{position:absolute;top:calc(50% + 52px);left:50%;transform:translateX(-50%);white-space:nowrap}.convergence{--conv:.06;--together:0;position:relative;width:34px;height:34px;border-radius:46% 54% 52% 48%/52% 43% 57% 48%;background:radial-gradient(circle at 38% 34%,rgba(242,224,157,.92),rgba(205,169,104,.52) 42%,rgba(118,142,124,.2) 70%,transparent 72%);opacity:calc(.34 + var(--conv)*.62);transform:scale(calc(.72 + var(--conv)*1.15));filter:blur(calc((1 - var(--conv))*1.2px));box-shadow:0 0 calc(12px + var(--conv)*34px) rgba(220,194,124,calc(.08 + var(--conv)*.24)),0 0 calc(20px + var(--together)*44px) rgba(129,105,157,calc(var(--together)*.12));transition:transform 90ms ease-out,opacity 120ms linear,filter 160ms linear,box-shadow 120ms linear}.convergence:before,.convergence:after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(220,199,139,calc(.025 + var(--together)*.14));opacity:var(--together);transform:scale(calc(.75 + var(--together)*.72));transition:transform 180ms ease-out,opacity 220ms ease-out}.convergence:after{inset:-17px;border-color:rgba(128,153,135,calc(.02 + var(--together)*.1));transform:scale(calc(.70 + var(--together)*.95))}
@media(max-width:1050px){.energy-rail{height:470px;min-height:470px;align-self:center}.energy-slider{height:350px}.energy-slider input[type=range]{width:350px;min-width:350px;flex:0 0 350px}}
@media(max-width:900px){.energy-rail{height:auto;min-height:0;align-self:auto}.energy-slider{height:auto}.energy-slider input[type=range]{width:100%;min-width:0;flex:1 1 auto;transform:none}}
@media(max-width:600px){header{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}header>div:first-child{grid-row:1}.transport{grid-row:2;justify-self:start;gap:8px}}
@media(max-width:420px){header{grid-template-columns:1fr}}
.energy-rail .energy-max,.energy-rail .energy-min{display:none!important}
/* 1.2.1 convergence bloom: diffuse rather than object-like */
.convergence{width:72px;height:64px;border-radius:58% 42% 63% 37%/46% 57% 43% 54%;background:radial-gradient(ellipse at center,rgba(218,195,126,calc(.13 + var(--conv)*.20)) 0,rgba(185,174,119,calc(.08 + var(--conv)*.13)) 28%,rgba(113,143,126,calc(.035 + var(--together)*.10)) 53%,rgba(130,102,154,calc(var(--together)*.055)) 68%,transparent 78%);opacity:calc(.42 + var(--conv)*.42);transform:scale(calc(.82 + var(--conv)*1.05)) rotate(calc(-5deg + var(--together)*11deg));filter:blur(calc(7px - var(--conv)*2.5px));box-shadow:none;transition:transform 130ms ease-out,opacity 180ms linear,filter 220ms linear,border-radius 180ms ease-out}
.convergence:before{inset:-22px;border:0;background:radial-gradient(ellipse at center,rgba(222,197,127,calc(var(--together)*.09)),rgba(111,145,127,calc(var(--together)*.045)) 43%,transparent 69%);border-radius:43% 57% 39% 61%/56% 41% 59% 44%;opacity:calc(.16 + var(--together)*.62);transform:scale(calc(.78 + var(--together)*1.12)) rotate(calc(8deg - var(--together)*15deg));filter:blur(8px);transition:transform 220ms ease-out,opacity 300ms ease-out}
.convergence:after{inset:-34px;border:1px solid rgba(202,190,137,calc(var(--together)*.10));background:transparent;border-radius:48% 52% 55% 45%/53% 46% 54% 47%;opacity:calc(var(--together)*.72);transform:scale(calc(.62 + var(--together)*1.34));filter:blur(2px);transition:transform 280ms cubic-bezier(.16,.72,.24,1),opacity 420ms ease-out}

/* LIGHT RESTYLE FIRST PASS */
:root{color-scheme:light;--ink:#292a24;--muted:#69695e;--line:rgba(55,56,47,.28);--panel:#d8d1b9;--gold:#b85e32}
html{background:#bdb69e}
body{color:var(--ink);background:radial-gradient(circle at 42% 39%,rgba(255,250,224,.44),transparent 31%),radial-gradient(circle at 76% 20%,rgba(166,114,74,.055),transparent 28%),linear-gradient(135deg,#e5dec7,#d8d1b9 52%,#c9c1a8)}
body:before{opacity:.2;background:repeating-radial-gradient(circle at 42% 42%,transparent 0 24px,rgba(68,72,57,.035) 25px,transparent 26px 55px),radial-gradient(ellipse at 39% 43%,rgba(137,70,110,.045),transparent 37%),radial-gradient(ellipse at 48% 47%,rgba(64,120,108,.045),transparent 35%)}
body:after{opacity:.16;background:repeating-linear-gradient(0deg,rgba(50,48,39,.018) 0,rgba(50,48,39,.018) 1px,transparent 1px,transparent 4px)}
h1,.intro h2,.pick b{font-family:Rockwell,"Roboto Slab","Courier New",serif;font-weight:700}
h1{font-size:38px;letter-spacing:-.035em}h1 em{color:#b85e32}
header,footer,.hint,aside{border-color:var(--line)}
.transport input{color:var(--ink);background:rgba(250,245,224,.34);border-color:var(--line)}
button{background:rgba(240,234,211,.2);border-color:var(--line);color:var(--ink);border-radius:2px}
button:hover,button.active{background:rgba(73,78,61,.1);border-color:rgba(55,56,47,.48)}
.transport .playing,.setup button.active{background:#b85e32;border-color:#b85e32;color:#f5ecd4}
.rings:before{background:radial-gradient(circle,rgba(255,250,226,.18),transparent 61%);box-shadow:0 0 0 1px rgba(57,59,48,.035),0 18px 70px rgba(68,61,42,.06)}
.rings canvas{filter:saturate(.78) sepia(.08)}
.tab{border-color:rgba(55,56,47,.14);background:rgba(238,231,207,.24)}
.tab.selected{border-color:rgba(55,56,47,.6);box-shadow:inset 0 -2px 0 #b85e32}
.ms{border-color:rgba(55,56,47,.14)}.ms button{background:rgba(255,255,255,.05);color:var(--muted)}.ms button.on{background:#657b66;color:#f4edd8}
.intro h2{font-size:39px;letter-spacing:-.025em}.intro p{color:#56574e}
input[type=range]{background:rgba(54,56,47,.35)}
input[type=range]::-webkit-slider-thumb{border-radius:2px;background:#e5dec7;border-color:#292a24}
.energy-slider input[type=range]{background:linear-gradient(90deg,#657b66,#aa8b48,#b85e32)}
.energy-slider input[type=range]::-webkit-slider-thumb{border-radius:2px;background:#e5dec7;border-color:#292a24}
/* convergence: faint dirty-print chromatic misregistration at rest, separation on convergence */
.convergence{background:radial-gradient(ellipse at center,rgba(63,61,48,.19),rgba(78,77,61,.09) 37%,transparent 72%);opacity:calc(.38 + var(--conv)*.35);filter:blur(calc(6px - var(--conv)*2px));box-shadow:none}
.convergence:before,.convergence:after{inset:-9px;border:0;mix-blend-mode:multiply;filter:blur(5px)}
.convergence:before{background:radial-gradient(ellipse at center,rgba(171,53,91,.19),transparent 63%);opacity:calc(.035 + var(--together)*.48);transform:translate(calc(var(--together)*-5px),calc(var(--together)*1.5px)) scale(calc(.88 + var(--together)*.24))}
.convergence:after{background:radial-gradient(ellipse at center,rgba(30,127,125,.19),transparent 63%);opacity:calc(.035 + var(--together)*.48);transform:translate(calc(var(--together)*5px),calc(var(--together)*-1.5px)) scale(calc(.9 + var(--together)*.26))}
@media(max-width:600px){h1{font-size:32px}.intro h2{font-size:33px}}

/* 1.5.1 contrast + sequencer definition */
.rings canvas{filter:none!important}
.rings:before{background:radial-gradient(circle,rgba(255,250,226,.08),transparent 56%);box-shadow:0 0 0 1px rgba(57,59,48,.055),0 12px 42px rgba(68,61,42,.035)}
small,.ctrl label,.energy-rail .energy span,.hint,footer{color:#55574d}
.intro p{color:#45473f}
header,footer,.hint,aside{border-color:rgba(47,49,41,.34)}
.tab{border-color:rgba(47,49,41,.22)}.tab.selected{border-color:rgba(47,49,41,.68)}
button{border-color:rgba(47,49,41,.32)}
input[type=range]{background:rgba(47,49,41,.46)}
.centre{width:112px;height:112px}
.convergence{width:58px;height:52px;background:radial-gradient(ellipse at center,rgba(50,50,41,.16),rgba(66,67,54,.065) 38%,transparent 69%);opacity:calc(.29 + var(--conv)*.34);filter:blur(calc(5px - var(--conv)*1.8px));box-shadow:none}
.convergence:before,.convergence:after{inset:-6px;filter:blur(4px)}
.convergence:before{opacity:calc(.025 + var(--together)*.5);transform:translate(calc(-1px + var(--together)*-4px),calc(var(--together)*1px)) scale(calc(.91 + var(--together)*.2))}
.convergence:after{opacity:calc(.025 + var(--together)*.5);transform:translate(calc(1px + var(--together)*4px),calc(var(--together)*-1px)) scale(calc(.92 + var(--together)*.22))}

/* 1.5.3 convergence pass */
.convergence{opacity:calc(.32 + var(--conv)*.46);transform:scale(calc(.76 + var(--conv)*1.18)) rotate(calc(-4deg + var(--together)*10deg));filter:blur(calc(4.8px - var(--conv)*2.8px));transition:transform 90ms ease-out,opacity 110ms linear,filter 150ms linear}
.convergence:before{opacity:calc(.035 + var(--together)*.72);transform:translate(calc(-1px + var(--together)*-7px),calc(var(--together)*2px)) scale(calc(.90 + var(--together)*.32));filter:blur(calc(4px - var(--together)*1.2px))}
.convergence:after{opacity:calc(.035 + var(--together)*.72);transform:translate(calc(1px + var(--together)*7px),calc(var(--together)*-2px)) scale(calc(.91 + var(--together)*.34));filter:blur(calc(4px - var(--together)*1.2px))}

/* 1.5.4 visual dynamics */
.energy-slider{width:46px}.energy-slider input[type=range]{height:7px;border-radius:2px;background:linear-gradient(90deg,#657b66 0%,#aa8b48 52%,#b85e32 100%);box-shadow:inset 0 0 0 1px rgba(47,49,41,.14)}
.energy-slider input[type=range]::-webkit-slider-thumb{width:25px;height:25px;border-radius:3px;border:3px solid #292a24;background:#e8e0c8;box-shadow:0 2px 5px rgba(45,42,31,.16)}
.energy-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:3px;border:3px solid #292a24;background:#e8e0c8}.energy-slider input[type=range]::-moz-range-track{height:7px;border-radius:2px;background:linear-gradient(90deg,#657b66,#aa8b48 52%,#b85e32)}
.convergence{width:64px;height:58px;background:radial-gradient(ellipse at center,rgba(47,47,39,.21),rgba(71,70,55,.085) 35%,transparent 67%);opacity:calc(.38 + var(--conv)*.52);transform:scale(calc(.78 + var(--conv)*1.08)) rotate(calc(-3deg + var(--together)*8deg));filter:blur(calc(4px - var(--conv)*2.5px));transition:transform 125ms ease-out,opacity 145ms linear,filter 170ms linear}
.convergence:before{background:radial-gradient(ellipse at center,rgba(178,45,92,.25),transparent 62%);opacity:calc(.055 + var(--together)*.78);transform:translate(calc(-1.5px + var(--together)*-7px),calc(var(--together)*1.8px)) scale(calc(.92 + var(--together)*.30));filter:blur(calc(3.5px - var(--together)*1px))}
.convergence:after{background:radial-gradient(ellipse at center,rgba(22,132,132,.25),transparent 62%);opacity:calc(.055 + var(--together)*.78);transform:translate(calc(1.5px + var(--together)*7px),calc(var(--together)*-1.8px)) scale(calc(.93 + var(--together)*.32));filter:blur(calc(3.5px - var(--together)*1px))}

/* 1.5.5 event-driven convergence + responsive Energy */
@media(max-width:900px){
 .energy-rail{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;width:100%!important;padding-left:8px!important;padding-right:8px!important}
 .energy-rail .energy{position:static!important;transform:none!important;width:100%!important;flex-direction:row!important;justify-content:space-between!important}
 .energy-slider{width:100%!important;max-width:none!important;height:32px!important;display:flex!important}
 .energy-slider input[type=range]{display:block!important;width:100%!important;min-width:100%!important;max-width:none!important;flex:1 1 100%!important;transform:none!important;margin:0!important}
}

/* 1.5.6 continuous playhead + value-aware Energy */
.energy-slider input[type=range]{--energy:35%;background:linear-gradient(90deg,#657b66 0%,#aa8b48 calc(var(--energy)*.72),#b85e32 var(--energy),#a9a38f var(--energy),#c1baa3 100%)!important}
@media(max-width:900px){.energy-slider input[type=range]{background:linear-gradient(90deg,#657b66 0%,#aa8b48 calc(var(--energy)*.72),#b85e32 var(--energy),#a9a38f var(--energy),#c1baa3 100%)!important}}

/* 1.5.7 Energy + BPM */
.energy-slider input[type=range]{background:var(--energy-gradient,#aaa590)!important}
.transport label:first-child{position:relative;gap:7px;padding:5px 7px 5px 9px;border:1px solid rgba(47,49,41,.22);background:rgba(244,238,216,.18);border-radius:2px}
.transport label:first-child input#bpm{appearance:textfield;-moz-appearance:textfield;width:68px;margin:0;padding:5px 6px 4px;border:0;border-bottom:2px solid rgba(184,94,50,.48);background:transparent;font:700 20px/1 "Courier New",monospace;text-align:center;cursor:ns-resize;user-select:none}
.transport label:first-child input#bpm::-webkit-inner-spin-button,.transport label:first-child input#bpm::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.transport label:first-child input#bpm:focus{outline:none;border-bottom-color:#b85e32;background:rgba(255,250,230,.24);cursor:text}

/* 1.5.8 Firefox Energy track fix */
.energy-slider input[type=range]{
  background:var(--energy-gradient,#aaa590)!important;
}
.energy-slider input[type=range]::-moz-range-track{
  height:7px;
  border-radius:2px;
  background:var(--energy-gradient,#aaa590)!important;
  box-shadow:inset 0 0 0 1px rgba(47,49,41,.14);
}
@media(max-width:900px){
  .energy-slider input[type=range]::-moz-range-track{
    background:var(--energy-gradient,#aaa590)!important;
  }
}

/* 1.5.9 cross-browser control consistency */

/* Standard player controls: compact squared studio-control thumb */
.ctrl input[type=range]{
  height:2px;
  border-radius:0;
  background:rgba(47,49,41,.46);
}
.ctrl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;
  height:16px;
  border-radius:2px;
  border:4px solid #292a24;
  background:#e5dec7;
  box-shadow:none;
}
.ctrl input[type=range]::-moz-range-thumb{
  width:8px;
  height:8px;
  border-radius:2px;
  border:4px solid #292a24;
  background:#e5dec7;
  box-shadow:none;
}
.ctrl input[type=range]::-moz-range-track{
  height:2px;
  border-radius:0;
  background:rgba(47,49,41,.46);
}

/* Energy remains deliberately larger/chunkier */
.energy-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:25px;
  height:25px;
  border-radius:3px;
  border:3px solid #292a24;
  background:#e8e0c8;
  box-shadow:0 2px 5px rgba(45,42,31,.16);
}
.energy-slider input[type=range]::-moz-range-thumb{
  width:19px;
  height:19px;
  border-radius:3px;
  border:3px solid #292a24;
  background:#e8e0c8;
  box-shadow:0 2px 5px rgba(45,42,31,.16);
}
.energy-slider input[type=range]::-moz-range-track{
  height:7px;
  border-radius:2px;
  background:var(--energy-gradient,#aaa590)!important;
  box-shadow:inset 0 0 0 1px rgba(47,49,41,.14);
}

/* Keyboard focus is visible but restrained in both engines */
.ctrl input[type=range]:focus-visible,
.energy-slider input[type=range]:focus-visible{
  outline:1px solid rgba(184,94,50,.62);
  outline-offset:5px;
}

/* Keep BPM free of browser-native number furniture */
#bpm{
  appearance:textfield;
  -moz-appearance:textfield;
}
#bpm::-webkit-inner-spin-button,
#bpm::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* 1.6.0: Rotation retained in engine but demoted from primary UI */
.ctrl-rotation{display:none!important}

/* 1.6.4 Cohesion without changing the 1.6.2 stage geometry */
.energy-rail{position:relative}
.cohesion-inline{position:absolute;left:calc(100% + 18px);bottom:10px;width:210px;display:grid;gap:7px}
.cohesion-inline label{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;letter-spacing:.12em;font-weight:700}
.cohesion-inline output{font:700 11px/1 "Courier New",monospace;letter-spacing:0}
.cohesion-inline input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:rgba(79,119,104,.48)}
.cohesion-inline input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:2px;border:4px solid #292a24;background:#e5dec7}
.cohesion-inline input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(79,119,104,.48)}
.cohesion-inline input[type=range]::-moz-range-thumb{width:8px;height:8px;border-radius:2px;border:4px solid #292a24;background:#e5dec7}
@media(max-width:1100px){.cohesion-inline{position:static;width:100%;margin-top:12px}.energy-rail{height:auto!important}.cohesion-inline label{font-size:11px}.cohesion-inline input[type=range]{width:100%}}

/* 1.6.5 Cohesion lives in the player panel, above the player tabs */
.cohesion-inline{display:none!important}
.cohesion-panel{position:static;width:100%;box-sizing:border-box;display:grid;grid-template-columns:110px 1fr;align-items:center;gap:14px;margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid rgba(47,49,41,.18)}
.cohesion-panel label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:10px;letter-spacing:.12em;font-weight:700}
.cohesion-panel output{font:700 11px/1 "Courier New",monospace;letter-spacing:0}
.cohesion-panel input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:rgba(79,119,104,.48);cursor:pointer}
.cohesion-panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:2px;border:4px solid #292a24;background:#e5dec7}
.cohesion-panel input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(79,119,104,.48)}
.cohesion-panel input[type=range]::-moz-range-thumb{width:8px;height:8px;border-radius:2px;border:4px solid #292a24;background:#e5dec7}
@media(max-width:900px){.cohesion-panel{grid-template-columns:100px 1fr;margin-bottom:14px;padding-bottom:14px}}

/* 1.6.6 starting points */
.preset-panel{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:14px;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid rgba(47,49,41,.18)}
.preset-panel label{font-size:10px;letter-spacing:.12em;font-weight:700}
.preset-panel select{width:100%;box-sizing:border-box;border:1px solid rgba(47,49,41,.28);border-radius:2px;background:#e5dec7;padding:7px 28px 7px 9px;color:#292a24;font:700 12px/1.2 "Courier New",monospace}
@media(max-width:900px){.preset-panel{grid-template-columns:100px 1fr}}

/* 1.7.0 finishing controls */
.advanced{margin-top:16px;border-top:1px solid rgba(47,49,41,.18);padding-top:11px}
.advanced summary{cursor:pointer;list-style:none;font-size:10px;letter-spacing:.13em;font-weight:700;user-select:none}
.advanced summary::-webkit-details-marker{display:none}
.advanced summary:after{content:" +";float:right}
.advanced[open] summary:after{content:" –"}
.advanced-body{display:grid;gap:11px;padding-top:14px}
.mixrow{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:12px}
.mixrow label{display:flex;justify-content:space-between;gap:8px;font-size:9px;letter-spacing:.08em;font-weight:700}
.mixrow output{font:700 10px/1 "Courier New",monospace;letter-spacing:0}
.mixrow input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:3px;background:rgba(47,49,41,.34);border-radius:1px}
.mixrow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border:4px solid #292a24;border-radius:2px;background:#e5dec7}
.mixrow input[type=range]::-moz-range-track{height:3px;background:rgba(47,49,41,.34)}
.mixrow input[type=range]::-moz-range-thumb{width:6px;height:6px;border:4px solid #292a24;border-radius:2px;background:#e5dec7}

/* 1.7.1 Advanced modal */
.advanced{display:none!important}
.advanced-open{display:block;margin:14px 0 0 auto;padding:5px 0;border:0;border-bottom:1px solid rgba(47,49,41,.35);background:transparent;color:#292a24;font:700 9px/1.2 "Courier New",monospace;letter-spacing:.12em;cursor:pointer}
.advanced-open:hover{border-bottom-color:#b85e32}
.advanced-modal{width:min(480px,calc(100vw - 32px));box-sizing:border-box;padding:0;border:1px solid rgba(47,49,41,.42);border-radius:3px;background:#e5dec7;color:#292a24;box-shadow:0 18px 60px rgba(37,34,25,.30)}
.advanced-modal::backdrop{background:rgba(39,38,32,.48);backdrop-filter:blur(2px)}
.advanced-modal-head{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 22px 15px;border-bottom:1px solid rgba(47,49,41,.18)}
.advanced-modal-head small{display:block;margin-bottom:3px;font-size:9px;letter-spacing:.16em;font-weight:700;opacity:.65}
.advanced-modal-head h3{margin:0;font-family:Georgia,serif;font-size:25px;font-weight:700}
.advanced-close{border:0;background:transparent;color:#292a24;font:400 28px/1 Georgia,serif;cursor:pointer;padding:0 2px}
.advanced-modal .advanced-body{display:grid;gap:17px;padding:21px 22px 24px}
.advanced-modal .mixrow{grid-template-columns:145px 1fr}
.advanced-modal .rotation-advanced{margin-top:5px;padding-top:17px;border-top:1px solid rgba(47,49,41,.16)}
@media(max-width:560px){.advanced-modal{width:calc(100vw - 22px)}.advanced-modal .mixrow{grid-template-columns:1fr;gap:7px}}