:root{
  --bg:#0b0b12; --card:#161622; --card2:#1f1f2e; --line:#2b2b3d; --text:#f3f3f8; --muted:#a3a3b8;
  --accent:#ff4fa3; --ok:#3ddc84; --warn:#ffc04d; --bad:#ff5c5c; --cur:#ff4fa3;
  --r:20px;
  --sat:env(safe-area-inset-top,0px); --sar:env(safe-area-inset-right,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px);
  --pad:16px; --gap:14px;
  --wheel:min(100%,320px);
}
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior:none;touch-action:manipulation}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;min-height:100vh;min-height:100dvh;overflow-x:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
[hidden]{display:none!important}
.glow{position:fixed;inset:-30vh -30vw auto -30vw;height:70vh;background:radial-gradient(closest-side,var(--cur),transparent);opacity:.22;pointer-events:none;transition:background .3s;z-index:0}

/* controls act like an app, not a document */
.app,.btn,.strip-main,.swatch,.wheel-wrap,.strip,.showall,.slider-row,summary,.top{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.status,.foot,.addr,.lead,.steps{-webkit-user-select:text;user-select:text}
canvas,img{-webkit-touch-callout:none;-webkit-user-drag:none}
.haptic{position:fixed;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;left:-10px;top:-10px}

.screen{position:relative;z-index:1;max-width:520px;margin:0 auto;
  padding:calc(var(--sat) + 12px) calc(var(--sar) + var(--pad)) calc(var(--sab) + 24px) calc(var(--sal) + var(--pad))}
h1{font-size:28px;margin:8px 0 14px;letter-spacing:-.02em}
h2,h3{font-size:18px;margin:0}
.top{display:flex;align-items:center;gap:10px}
.demo-tag{background:var(--warn);color:#000;font-weight:700;font-size:12px;padding:3px 8px;border-radius:99px}

.btn{appearance:none;-webkit-appearance:none;border:0;border-radius:16px;font:inherit;font-weight:650;color:var(--text);background:var(--card2);min-height:52px;padding:0 18px;cursor:pointer;touch-action:manipulation;
  transition:transform .12s cubic-bezier(.2,.8,.2,1),filter .12s,background .2s,box-shadow .12s}
.btn:active,.btn.pressed{transform:scale(.95);filter:brightness(1.25);transition-duration:.04s}
.btn:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,.swatch:focus-visible{outline:3px solid #fff;outline-offset:2px}
.btn-primary{background:var(--accent);color:#14000a}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.big{min-height:58px;font-size:18px}

/* no-bluetooth screen */
.nobt{display:flex;min-height:100vh;min-height:100dvh;align-items:center}
.nobt-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px 20px;display:flex;flex-direction:column;gap:12px;width:100%}
.nobt-card a.btn{display:flex;align-items:center;justify-content:center;text-decoration:none}
.bulb{font-size:44px}
.lead{color:var(--text);margin:0}
.steps{margin:4px 0 8px;padding-left:22px;color:var(--muted)}
.steps li{margin:6px 0}
.addr{color:var(--text);word-break:break-all;font-weight:600}

/* Desktop / laptop layout (the earlier card design). Picked by layout.js; never loaded with styles.css. */
/* app layout: one column on narrow windows */
.cc{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap);
  grid-template-areas:"strips" "power" "bri" "color" "fx"}
.card,.tile,.bar{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:16px;min-width:0}
.bar{grid-area:strips;gap:10px}
.power-tile{grid-area:power}
.bri-tile{grid-area:bri}
.color-tile{grid-area:color;align-items:center}
.fx-tile{grid-area:fx}
.section-title{font-size:15px;color:var(--muted);margin:0;text-transform:uppercase;letter-spacing:.06em;font-weight:700}

.strip{background:var(--card2);border:1px solid var(--line);border-radius:var(--r);padding:12px 12px 12px 16px}
.strip-head{display:flex;align-items:center;gap:12px}
.strip-text{flex:1;min-width:0}
.status{margin:2px 0 0;color:var(--muted);font-size:14px;overflow-wrap:break-word}
.dot{width:14px;height:14px;border-radius:50%;background:#555;flex:none;box-shadow:0 0 0 4px rgba(255,255,255,.04)}
.strip[data-state=connecting] .dot{background:var(--warn);animation:pulse 1s infinite}
.strip[data-state=connected] .dot{background:var(--ok);box-shadow:0 0 12px var(--ok)}
.strip[data-state=lost] .dot{background:var(--bad)}
@keyframes pulse{50%{opacity:.35}}
.btn-connect{min-width:116px;background:var(--accent);color:#14000a;flex:none}
.strip[data-state=connected] .btn-connect{background:#2a2a3d;color:var(--text)}
.variant{margin-top:10px;color:var(--muted);font-size:14px}
.variant summary{cursor:pointer;padding:10px 0;min-height:44px}
.variant label{display:flex;flex-direction:column;gap:6px;margin-top:6px}
select{font:inherit;font-size:16px;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:12px;min-height:48px;padding:0 12px;width:100%}
.showall{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:14px;padding:4px;min-height:48px}
.showall input{width:24px;height:24px;flex:none;accent-color:var(--accent)}

.power{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.power-btn{min-height:76px;font-size:22px;border-radius:20px}
.power-btn.on{background:var(--cur);color:#000;text-shadow:0 1px 0 rgba(255,255,255,.3)}
.power-btn.off{background:#000;border:1px solid var(--line)}

.wheel-wrap{position:relative;width:var(--wheel);aspect-ratio:1;margin:0 auto;touch-action:none;-webkit-user-select:none;user-select:none}
#wheel{width:100%;height:100%;border-radius:50%;display:block;box-shadow:0 0 40px rgba(0,0,0,.6)}
.knob{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:4px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.6);pointer-events:none;background:var(--cur);left:50%;top:50%;transition:width .12s,height .12s,margin .12s}
.wheel-wrap.dragging .knob{width:52px;height:52px;margin:-26px 0 0 -26px}

.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;width:100%;max-width:520px}
.swatch{aspect-ratio:1;min-height:48px;border-radius:16px;border:2px solid rgba(255,255,255,.12);cursor:pointer;padding:0;touch-action:manipulation;transition:transform .12s cubic-bezier(.2,.8,.2,1)}
.swatch:active{transform:scale(.9);transition-duration:.04s}
.swatch[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}

.slider-row{display:flex;flex-direction:column;gap:8px}
.slider-label{display:flex;justify-content:space-between;color:var(--muted);font-weight:600}
.slider-label output{color:var(--text);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:48px;background:transparent;margin:0;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:16px;border-radius:99px;background:linear-gradient(90deg,#222,var(--cur))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:38px;height:38px;border-radius:50%;background:#fff;margin-top:-11px;box-shadow:0 2px 8px rgba(0,0,0,.5);transition:transform .1s}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]::-moz-range-track{height:16px;border-radius:99px;background:linear-gradient(90deg,#222,var(--cur))}
input[type=range]::-moz-range-thumb{width:32px;height:32px;border-radius:50%;background:#fff;border:0}

.effects{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.effect{min-height:60px;font-size:15px;padding:0 6px;line-height:1.15}
.effect[aria-pressed=true]{background:var(--accent);color:#14000a}
.hint{color:var(--muted);font-size:13px;margin:0}

.foot{color:var(--muted);font-size:12px;text-align:center;padding:16px 8px 0}
.last-sent{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:#7d7d95;word-break:break-all;min-height:1em}
.toast{position:fixed;left:50%;bottom:calc(var(--sab) + 20px);transform:translateX(-50%);background:#2a2a3c;color:#fff;padding:12px 18px;border-radius:14px;z-index:10;max-width:min(90vw,520px);box-shadow:0 6px 24px rgba(0,0,0,.5);font-size:15px}


/* same-Wi-Fi sharing (hub) */
.share{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px;margin-top:2px}
.share-row{display:flex;align-items:center;gap:12px}
.share-row .strip-text{flex:1;min-width:0}
.share-row h3{font-size:15px}
.share .dot{flex:none;width:12px;height:12px;border-radius:50%;background:#555}
.share[data-state=live] .dot{background:var(--ok);box-shadow:0 0 12px var(--ok)}
.share[data-state=starting] .dot{background:var(--warn);animation:pulse 1s infinite}
.share[data-state=lost] .dot{background:var(--bad)}
.share-note{margin:0;color:var(--muted);font-size:13px}
.share[data-state=off] .share-note{display:none}
.switch{position:relative;flex:none;width:52px;height:32px;cursor:pointer}
.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.switch span{position:absolute;inset:0;border-radius:999px;background:#3a3a4c;transition:background .2s}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:transform .2s}
.switch input:checked+span{background:var(--ok)}
.switch input:checked+span::after{transform:translateX(20px)}
.netfind{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--card2);border:1px solid var(--line);border-radius:16px}
.netfind p{margin:0;font-weight:600}
.spinner{flex:none;display:inline-block;width:20px;height:20px;border-radius:50%;border:3px solid #444;border-top-color:var(--text);animation:spin .8s linear infinite;vertical-align:-4px}
.spinner.small{width:12px;height:12px;border-width:2px;margin-right:4px}
@keyframes spin{to{transform:rotate(360deg)}}
.bluefy-prompt{display:flex;flex-direction:column;gap:12px}
.netnote{display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:var(--card2);border:1px solid var(--line);border-radius:16px}
.netnote h2{font-size:17px;margin:0}
.netnote p{margin:0;color:var(--muted);font-size:14px}
.remote-box h3{font-size:16px}
/* second-device remote */
.remote-box{display:flex;flex-direction:column;gap:10px;background:var(--card2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.remote-box[data-state=connected] .dot{background:var(--ok);box-shadow:0 0 12px var(--ok)}
.remote-box[data-state=lost] .dot{background:var(--bad)}
.remote-box[data-state=connecting] .dot{background:var(--warn);animation:pulse 1s infinite}
.remote-strips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:14px}
.remote-strips li::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#555;margin-right:8px;vertical-align:1px}
.remote-strips li.on::before{background:var(--ok)}
.remote-mode .strip,.remote-mode .showall,.remote-mode .share{display:none!important}

/* iPhone landscape: wheel + presets pinned on the left, controls scroll on the right */
@media (orientation:landscape) and (max-height:540px){
  .screen{max-width:none;padding-top:calc(var(--sat) + 4px)}
  h1{font-size:20px;margin:2px 0 8px}
  .cc{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"color strips" "color power" "color bri" "color fx";align-items:start}
  .color-tile{position:sticky;top:calc(var(--sat) + 8px);grid-row:1/5;flex-direction:row;align-items:center;gap:12px;padding:12px}
  .wheel-wrap{width:auto;height:min(300px,calc(100vh - var(--sat) - var(--sab) - 92px));height:min(300px,calc(100dvh - var(--sat) - var(--sab) - 92px))}
  .swatches{grid-template-columns:repeat(2,44px);grid-auto-rows:1fr;gap:8px;width:auto;align-self:stretch;align-content:center}
  .swatch{min-height:0;height:auto;border-radius:12px}
  .power-btn{min-height:60px}
}
/* iPad portrait (and big phones held sideways are handled above) */
@media (min-width:700px) and (min-height:541px){
  :root{--pad:24px;--gap:18px}
  .screen{max-width:1100px;padding-top:calc(var(--sat) + 24px)}
  h1{font-size:34px}
  .cc{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-areas:"strips color" "power color" "bri color" "fx fx";align-items:stretch}
  .card{padding:20px;border-radius:28px}
  .color-tile{justify-content:center;gap:22px}
  .wheel-wrap{width:min(100%,460px)}
  .btn{min-height:58px;font-size:17px}
  .power-btn{min-height:88px;font-size:24px}
  .effects{grid-template-columns:repeat(5,1fr)}
  .effect{min-height:66px;font-size:16px}
  .fx-tile{display:grid;grid-template-columns:minmax(0,1fr);}
}
/* 12.9"/13" iPad portrait */
@media (min-width:1000px) and (min-height:1200px){
  .screen{max-width:1180px}
  h1{font-size:40px}
  .wheel-wrap{width:min(100%,560px)}
  .swatch{border-radius:20px}
  .effect{min-height:76px;font-size:17px}
  .power-btn{min-height:100px}
}
/* iPad landscape: three columns, everything on one screen */
@media (min-width:1000px) and (min-height:541px) and (orientation:landscape){
  .screen{max-width:1400px}
  .cc{grid-template-columns:minmax(300px,.9fr) minmax(0,1.3fr) minmax(280px,.9fr);grid-template-areas:"strips color fx" "power color fx" "bri color fx";align-items:stretch}
  .wheel-wrap{width:min(100%,calc(100dvh - 300px),560px)}
  .effects{grid-template-columns:repeat(3,1fr)}
  .fx-tile{display:flex;justify-content:flex-start}
  .strip-head{flex-wrap:wrap}
  .strip-main{flex:1 1 140px}
  .btn-connect{flex:1 1 100%}
  .foot{padding-top:12px}
}
/* no-bluetooth screen on tablets */
@media (min-width:700px){
  .nobt{max-width:600px}
  .nobt-card{padding:36px 32px;gap:14px}
  .nobt h1{font-size:36px}
}

@media (hover:hover){
  .btn:hover{filter:brightness(1.12)}
  .swatch:hover{transform:scale(1.05)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .btn:active,.btn.pressed,.swatch:active{transform:none}
  .glow{display:none}
}

/* ===== adapted to the shared markup ===== */
.cc{align-items:start}
.bar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center}
.bar .section-title{grid-column:1;grid-row:1}
.bar .demo-tag{grid-column:2;grid-row:1}
.gear-btn{grid-column:3;grid-row:1;width:48px;min-height:48px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card2);color:var(--text)}
.gear-btn svg{width:24px;height:24px}
.strip-list,.remote-box{grid-column:1/-1}
.strip-list{display:flex;flex-direction:column;gap:10px}
.strip-main{appearance:none;-webkit-appearance:none;border:0;background:none;color:inherit;font:inherit;display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:4px 0;margin:0;text-align:left;cursor:pointer;border-radius:12px}
.strip-text .nm{display:block;font-size:18px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strip-text .status{display:block}
.add-strip{min-height:52px;background:transparent;border:1px dashed #3b3b55;color:var(--text);width:100%}
.plus{font-size:1.25em;line-height:1}
.strip-list.empty .add-strip{background:var(--accent);color:#14000a;border:0}
.remote-mode .strip-list{display:none!important}
.power-tile{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wheel-box{width:100%;display:flex;justify-content:center}
.color-tile .wheel-wrap{width:min(100%,320px);height:auto}
.cc-slider{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 10px;color:var(--muted);font-weight:600;cursor:pointer}
.cc-slider .sl-ico{font-size:18px;grid-row:1;grid-column:1}
.cc-slider .sl-name{grid-row:1;grid-column:2}
.cc-slider output{grid-row:1;grid-column:3;color:var(--text);font-variant-numeric:tabular-nums}
.cc-slider input{grid-row:2;grid-column:1/-1}
.bri-tile{gap:8px}
@media (min-width:700px) and (min-height:541px){
  .color-tile .wheel-wrap{width:min(100%,460px)}
  .cc{align-items:stretch}
}
@media (min-width:1000px) and (min-height:541px) and (orientation:landscape){
  .color-tile{justify-content:center}
  .color-tile .wheel-wrap{width:min(100%,calc(100dvh - 300px),560px)}
  .cc{grid-template-rows:auto auto 1fr}
  .bri-tile{align-self:start}
}
@media (orientation:landscape) and (max-height:540px){
  .color-tile .wheel-wrap{width:auto;height:min(300px,calc(100dvh - 92px));aspect-ratio:1}
}

.tab-share{margin-top:12px}