:root{--c:#ccc;--bg:#000;--rowGap:34px} /* theme + vertical spacing knob */

/* ── Base / layout ─────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--c);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
body{display:flex;align-items:center;justify-content:center}
.wrap{width:min(980px,calc(100vw - 64px));padding:10px}

/* ── Header row (title + line + button) ───────────────────────── */
.top{display:flex;align-items:center;gap:22px;margin-bottom:var(--rowGap)}
.title{white-space:nowrap;letter-spacing:.16em}

/* Top separator line: left-to-right reveal (1000ms -> 3000ms via delay+duration) */
.hr{flex:1 1 auto;height:1px;background:var(--c);transform:scaleX(0);transform-origin:0 50%;transition:transform 2s linear 1s}
body.is-in .hr{transform:scaleX(1)}

.btn{background:transparent;color:var(--c);border:1px solid var(--c);padding:6px 12px;cursor:pointer;font:inherit}
.btn:active{transform:translateY(1px)}

/* ── Subtitle + L-hook (toggle) ───────────────────────────────── */
.subRow{display:flex;align-items:center;gap:12px;margin:0 0 var(--rowGap)}
.sub{white-space:nowrap}
.hook{background:transparent;border:0;padding:0;cursor:pointer;display:inline-block;position:relative;width:56px;height:14px}
.hook::before{content:"";position:absolute;left:0;top:6px;width:42px;height:1px;background:var(--c)}
.hook::after{content:"";position:absolute;left:42px;top:6px;width:1px;height:8px;background:var(--c);transform-origin:top}
.hook[aria-expanded="true"]::after{height:22px}

/* ── Description block ────────────────────────────────────────── */
.desc{margin:0 0 var(--rowGap);line-height:1.65}
.desc[hidden]{display:none}

/* ── Mode row (Auto / Energy) ─────────────────────────────────── */
.ui{margin:0;display:flex;align-items:center;gap:26px}
.opt{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.box{width:14px;height:14px;border:1px solid var(--c);position:relative;flex:0 0 auto}
.box.on::before,.box.on::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1px;background:var(--c);transform-origin:center}
.box.on::before{transform:translate(-50%,-50%) rotate(45deg)}
.box.on::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* ── Energy row enabled/disabled visual state ─────────────────── */
.energyRow{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0}

/* Energy inactive: only slider rail + tick dim; label + box stay #ccc */
.energyRow{opacity:1}
.energyRow.dim .track::before,.energyRow.dim .tick{opacity:.5}
.energyRow:not(.dim) .track::before,.energyRow:not(.dim) .tick{opacity:1}


/* Slider (minimal, crisp via JS-snapped --tickX) */
.track{flex:1 1 auto;min-width:0;position:relative;display:flex;align-items:center;--tickX:0px}
.track::before{content:"";position:absolute;left:0;right:0;top:calc(50% - .5px);height:1px;background:var(--c);pointer-events:none}
.tick{position:absolute;top:50%;left:var(--tickX);width:1px;height:18px;background:var(--c);transform:translateY(-50%);pointer-events:none}

/* invisible range keeps hit-area, removes native styling */
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;margin:0;outline:0;border:0;padding:0;accent-color:transparent;touch-action:pan-y}
input[type="range"]::-webkit-slider-runnable-track{height:26px;background:transparent;border:0}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;background:transparent;border:0;border-radius:0}
input[type="range"]::-moz-range-track{height:26px;background:transparent;border:0}
input[type="range"]::-moz-range-thumb{width:26px;height:26px;background:transparent;border:0;border-radius:0}

/* Listen button: hidden until JS shows it at 3000ms */
#plugBtn{display:none}
#plugBtn.is-in{display:inline-block}

/* Title: hidden until 1000ms */
.title{display:none}
body.title-in .title{display:block}