/* Dub Lab demo page — 1.0.2 (effects strip and Share window, Founder-approved mockups Oct 18 2026; first built as v0.9.4 from the Oct 16 mockups). Dub Lab and Jam View are a Think G Media product.
   Colors are variables; the Founder's own values (Dub Lab demo › Colors & text) are printed on body.dld-page and override these defaults. */

/* ---------- The page around it (this page only) ---------- */
html body.dld-page{overflow-x:clip}
.dld-page .site-header{margin-bottom:0}
.dld-page #content,.dld-page .site-content{background:var(--navy,#0d1b2a)}
.dld-page .site-content .col-full{max-width:1180px}
.dld-page .content-area{width:100%;float:none;margin-right:0;margin-left:0}
.dld-page #secondary,.dld-page .storefront-breadcrumb,.dld-page .entry-header{display:none}
.dld-page .site-main,.dld-page .hentry{margin-bottom:0;padding-bottom:0}
html.dld-lock,html.dld-lock body{overflow:hidden}
/* Think G Media (Astra theme): full-width navy page, no boxed article, no theme title or sidebar */
.dld-page.ast-separate-container,.dld-page.ast-plain-container,.dld-page.ast-page-builder-template,.dld-page .site-content{background:var(--navy,#0d1b2a)}
.dld-page .site-content>.ast-container{max-width:1240px}
.dld-page #primary{width:100%;max-width:100%;flex:1 1 100%;margin:0;padding:0;border:0}
.dld-page .ast-article-single,.dld-page .ast-article-post,.dld-page.ast-separate-container .ast-article-single{padding:0!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.dld-page .ast-single-entry-banner,.dld-page .ast-breadcrumbs-wrapper,.dld-page .ast-archive-description{display:none}
.dld-page .entry-content[ast-blocks-layout]>.dld,.dld-page .entry-content>.dld{max-width:none;width:100%;margin-left:0;margin-right:0}
.dld-page .entry-content{margin:0}

.dld{--navy:#0d1b2a;--ink:#000;--red:#C8102E;--play:#D21034;--gold:#FFD23F;--cream:#FFE9B0;--muted:#d8c690;--green:#1E7F34;--lime:#2FBF5A;--tape:#A30F24;
  color:var(--cream);font-family:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.4;padding:0 0 8px}
.dld *,.dld *::before,.dld *::after{box-sizing:border-box}
.dld p,.dld h1,.dld h2{margin:0}
.dld [hidden]{display:none!important}
.dld button{font-family:inherit;margin:0;text-shadow:none;text-transform:none;letter-spacing:normal;line-height:1.2;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dld button:focus-visible,.dld [role=slider]:focus-visible,.dld a:focus-visible,.dld input:focus-visible{outline:3px solid #4d8cff;outline-offset:2px}
.dld button:disabled{opacity:.45;cursor:default}
.dld-pending{padding:48px 24px;text-align:center;color:var(--cream,#FFE9B0);background:var(--navy,#0d1b2a)}
.dld-admin-note{max-width:760px;margin:12px auto 0;padding:10px 14px;border-left:4px solid #FFD23F;background:#fff8dc;color:#142032;font-size:14px}

/* ---------- Hero ---------- */
.dld-hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;padding:48px 0 24px}
.dld-hero-main{display:flex;flex-direction:column;gap:10px;max-width:680px}
.dld-tags{display:flex;gap:10px;align-items:center}
.dld-tag{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:100px;padding:5px 12px}
.dld-tag-dev{color:#142032;background:var(--gold)}
.dld-tag-demo{color:var(--cream);border:1px solid var(--cream);padding:4px 12px}
.dld h1.dld-h1{margin:0;font-size:64px;line-height:1;font-weight:900;color:var(--gold);letter-spacing:.02em;font-family:inherit}
.dld h1.dld-h1 span{font-size:30px;font-weight:700;color:var(--cream);letter-spacing:0}
.dld p.dld-pitch{font-size:20px;line-height:1.45;color:var(--cream)}
.dld p.dld-hero-note{font-size:15px;color:var(--cream);text-align:right;line-height:1.5}
@media (max-width:700px){.dld-hero{padding:28px 0 16px}.dld h1.dld-h1{font-size:44px}.dld h1.dld-h1 span{font-size:22px;display:block;margin-top:4px}.dld p.dld-pitch{font-size:17px}.dld p.dld-hero-note{text-align:left}}

/* ---------- Cards and buttons ---------- */
.dld-card{background:var(--ink);border:2px solid var(--red);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.dld-card-hd{display:flex;flex-direction:column;gap:2px}
.dld-card-hd.dld-row{flex-direction:row;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.dld h2.dld-kicker{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-family:inherit;line-height:1.3}
.dld p.dld-card-sub{font-size:13px;color:var(--muted)}
html .dld a.dld-btn,.dld button.dld-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:100px;font-size:16px;font-weight:700;text-decoration:none;border:2px solid transparent}
html .dld a.dld-btn-gold,html .dld a.dld-btn-gold:hover,.dld button.dld-btn-gold,.dld button.dld-btn-gold:hover{background:var(--gold);color:#142032;border-color:var(--gold)}
html .dld a.dld-btn-line,html .dld a.dld-btn-line:hover{background:transparent;color:var(--cream);border-color:var(--cream)}
.dld button.dld-btn-goldline,.dld button.dld-btn-goldline:hover{min-height:44px;background:transparent;color:var(--gold);border-color:var(--gold);font-size:15px}
.dld button.dld-btn-goldline[aria-pressed=true]{background:var(--gold);color:#142032}
.dld button.dld-btn-green,.dld button.dld-btn-green:hover{background:var(--green);border-color:var(--lime);color:#fff}
.dld button.dld-btn-s,.dld button.dld-btn-s:hover{min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--cream);background:transparent;color:var(--cream);font-size:15px;font-weight:400}
.dld button.dld-share,.dld button.dld-share:hover{border-color:var(--gold);color:var(--gold)}
.dld button.dld-x,.dld button.dld-x:hover{width:44px;height:44px;padding:0;border-radius:100px;border:1px solid var(--cream);background:transparent;color:var(--cream);display:inline-flex;align-items:center;justify-content:center;flex:none}

/* ---------- Computer layout ---------- */
.dld-app{position:relative;outline:none}
/* 1.2.0 (Founder's layout): mirrored. The DUB LAB panel sits on the LEFT, under the "DUB LAB with
   Jam View" title it belongs to, with Effects and the Mixer stacked beneath it as one signal chain.
   The version picker, Stem jam, Now playing and Jam View (with the power button) move to the RIGHT.
   The wide column is now the first one, so the grid columns swap too. */
.dld-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);grid-template-areas:"dub left" "mix jam";gap:24px;align-items:start;padding:8px 0 40px}
.dld-left{grid-area:left;display:flex;flex-direction:column;gap:16px;min-width:0}
.dld-grid>.dld-dub{grid-area:dub;min-width:0}
.dld-grid>.dld-rcol{grid-area:dub;min-width:0;display:flex;flex-direction:column;gap:24px}
.dld-rcol>.dld-dub{min-width:0}
.dld-grid>.dld-jam{grid-area:jam;align-self:stretch;border-color:var(--green)}
.dld-grid>.dld-mix{grid-area:mix;align-self:stretch;padding:12px 18px}
/* 1.0.2: on wide screens the Jam View card sits right under Now playing, and the right column runs Dub Lab, effects strip, Mixer */
/* 1.1.2: on wide screens the Mixer joins the right column instead of sitting in its own grid row.
   It used to be pinned in a row whose height came from the left column, so when the Dub Lab panel
   shrank (the "Try this" box clearing) the Effects strip rose but the Mixer stayed put and left a
   gap under it. In the column it simply follows everything above it, and the whole right side
   closes up as one piece. Same arrangement on screen: Dub Lab, Effects, Mixer, top to bottom. */
@media (min-width:1101px){.dld-grid{grid-template-areas:"dub left" "dub jam"}.dld-grid>.dld-jam,.dld-grid>.dld-jamwrap{align-self:start}}
/* 1.0.4: with the power button, a wrapper takes the "jam" grid area instead so the button can sit
   centered in whatever room is left under the card, the same way at every width. */
.dld-grid>.dld-jamwrap{grid-area:jam;align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0;
  margin-top:7px} /* 1.2.1-2: Founder's nudge -- drops the Jam View block 6px so it sits level with the Mixer beside it */
.dld-jamwrap>.dld-jam{align-self:stretch;flex:none;width:100%}
@media (max-width:1100px){.dld-grid{grid-template-areas:"dub left" "mix mix" "jam jam"}}
@media (max-width:900px){.dld-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"dub" "mix" "left" "jam"}}

/* Versions */
.dld-verlist{display:flex;flex-direction:column;gap:12px}
.dld button.dld-ver,.dld button.dld-ver:hover{text-align:left;min-height:52px;border-radius:12px;border:1px solid #3a3a3a;background:#0b0b0b;color:var(--cream);padding:8px 14px;font-size:16px;display:flex;flex-direction:column;gap:1px;align-items:flex-start;justify-content:center}
.dld button.dld-ver[aria-pressed=true]{border:2px solid var(--gold);background:#1a1a1a;padding:7px 13px}
.dld-ver-l{font-weight:700}
.dld-ver-s{font-size:13px;color:var(--muted)}
.dld button.dld-ver-stem{display:none}
.dld-versions{border-color:var(--red)}
/* Stem jam */
.dld-stems{border-color:var(--gold);padding:16px 18px;gap:10px}
.dld-chans{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.dld button.dld-chan,.dld button.dld-chan:hover{min-height:44px;border-radius:10px;border:2px solid var(--c);background:transparent;color:var(--c);font-size:14px;font-weight:800;padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dld button.dld-chan[aria-pressed=true]{background:var(--c);color:#000}
/* Now playing */
.dld-now{gap:14px}
.dld-nowinfo{display:flex;flex-direction:column;gap:2px}
.dld p.dld-nowtitle{font-size:18px;font-weight:700;color:var(--cream)}
.dld p.dld-nowartist{font-size:15px;color:var(--muted)}
.dld-prog{display:flex;align-items:center;gap:10px}
.dld-t{font-size:13px;color:var(--muted);min-width:32px;font-variant-numeric:tabular-nums}
.dld-t:last-child{text-align:right}
.dld input.dld-range{flex:1 1 auto;min-width:0;accent-color:var(--play);background:transparent;margin:0}
.dld-ctl{display:flex;gap:12px;align-items:center}
.dld button.dld-round,.dld button.dld-round:hover{width:48px;height:48px;flex:none;padding:0;border-radius:100px;border:1px solid var(--cream);background:transparent;color:var(--cream);display:inline-flex;align-items:center;justify-content:center}
.dld button.dld-play,.dld button.dld-play:hover{flex:1 1 auto;height:52px;border-radius:100px;border:0;background:var(--play);color:#fff;font-size:18px;font-weight:700;padding:0 12px}
.dld button.dld-restore{width:100%}
.dld p.dld-status{font-size:14px;color:var(--gold);min-height:0}
.dld p.dld-status:empty{display:none}
.dld-kids-block{padding:28px 20px;border:2px solid var(--gold);border-radius:14px;background:var(--ink);color:var(--cream);font-size:17px;text-align:center}
.dld-kids-chip{display:inline-block;margin-top:4px;font-size:12px;font-weight:700;color:#142032;background:var(--lime);border-radius:100px;padding:2px 10px;align-self:flex-start}

/* The real Dub Lab panel, at the approved demo sizes */
.dld .wrbr-dub{padding:22px;border-radius:14px;background:var(--ink);border-color:var(--red);color:var(--cream)}
.dld .wrbr-dub-ttl{color:var(--gold)}
.dld .wrbr-dub-tips{background:var(--green);border-color:var(--gold)}
.dld .wrbr-dub-tips h4{color:var(--gold)}
.dld .wrbr-dub-ttl{font-size:22px;font-weight:800;letter-spacing:.04em}
.dld .wrbr-dub-sub{font-size:15px;color:var(--cream)}
.dld .wrbr-dub-btns{gap:10px}
.dld .wrbr-dub button.wrbr-dub-btn,.dld .wrbr-dub button.wrbr-dub-btn:hover{min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--cream);background:transparent;color:var(--cream);font-size:15px;font-weight:400}
.dld .wrbr-dub button.wrbr-dub-share,.dld .wrbr-dub button.wrbr-dub-share:hover{border-color:var(--gold);color:var(--gold)}
.dld .wrbr-dub-beats{font-size:14px;color:var(--cream)}
.dld .wrbr-dub-grid{gap:14px}
.dld .wrbr-dub-card{padding:16px;border-width:2px}
.dld .wrbr-dub-card h4{font-size:19px!important;font-weight:800}
.dld .wrbr-dub-how{font-size:15px;line-height:1.4}
.dld .wrbr-dub-how-s{display:none}
.dld .wrbr-dub button.wrbr-dub-big{min-height:56px;font-size:17px;font-weight:800}
.dld .wrbr-dub-tips{padding:16px}
.dld .wrbr-dub-tips h4{font-size:17px!important;font-weight:800}
.dld .wrbr-dub-tips ol{font-size:15px!important;line-height:1.6}
.dld .wrbr-dub-foot{font-size:14px;color:var(--cream)}

/* Lights + Jam View card */
.dld-lights{position:relative;height:170px;border-radius:10px;background:#050505;overflow:hidden}
.dld-lights-idle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.dld-lights-idle svg{width:260px;max-width:90%;height:160px}
.dld-lights .wrbr-vis{height:100%}
.dld-lights .wrbr-vis-stage{aspect-ratio:auto;height:100%;border-radius:10px;padding:0}
.dld-lights .wrbr-vis-stage.wrbr-vis-frame-wood{padding:8px}
.dld-lights .wrbr-vis-bar{display:none}
.dld-jamrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.dld-jamtext{font-size:15px;color:var(--cream)}

/* ---------- Power button (1.0.4; layered rays and the on/off switch redone in 1.0.7) ---------- */
.dld button.dld-power,.dld button.dld-power:hover{background:none;border:0;padding:0;margin:auto 0;flex:none;
  width:42%;max-width:220px;min-width:92px;cursor:pointer;display:block;position:relative;--glow:0}
.dld-power-mark{position:absolute;right:6%;bottom:8%;color:var(--muted);opacity:.55;pointer-events:none;
  display:block;line-height:0;z-index:1}
.dld-power-mark svg{display:block;width:14px;height:14px}
/* The bulb body and its five rays stack as separate images, same canvas, one rotation applied once
   to the whole stack so they move together. Each ray's own opacity is set in JS, frame by frame. */
.dld-power-stage{position:relative;width:100%;aspect-ratio:700/689;transform:rotate(15deg);transform-origin:center;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.dld-power-img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.dld-power-base{filter:saturate(.25) brightness(.72);transition:filter .2s ease}
.dld button.dld-power.is-on .dld-power-base{filter:saturate(1) brightness(calc(1 + var(--glow) * .22))}
.dld-power-ray{opacity:.12;transition:opacity .09s linear}
/* 1.1.1: the ring is for keyboard navigation only. Chrome keeps a clicked button "focus-visible",
   which left a gold box sitting around the bulb after a mouse click; dublab-demo.js drops focus
   after a pointer click so only Tab leaves it focused, and the ring with it. */
.dld button.dld-power:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:10px}
@media (prefers-reduced-motion:reduce){.dld-power-base,.dld-power-ray{transition:none}}

/* ---------- Top bar (phone, and Jam View) ---------- */
.dld-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.dld-top-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.dld-top-ttl{font-size:20px;font-weight:800;color:var(--gold);letter-spacing:.04em;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.dld-top-sub{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cream)}
.dld-top-b{display:flex;gap:8px;flex:none}

/* ---------- Footer ---------- */
.dld-foot{border-top:1px solid #2c3e55;padding:28px 0 48px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.dld-foot-text{display:flex;flex-direction:column;gap:6px;max-width:640px}
.dld p.dld-foot-h{font-size:22px;font-weight:700;color:var(--gold)}
.dld p.dld-foot-p{font-size:16px;color:var(--cream)}
.dld-foot-btns{display:flex;flex-wrap:wrap;gap:12px}
/* 1.0.6: on phones the app's own ending card (.dld-pend) already says "Coming to websites..." and
   has its own Partner with Think G Media button, so this static block would repeat both right
   underneath it. Hide the repeat here and keep only what's unique to this block: Listen to WRBR
   Radio. Desktop never shows .dld-pend, so nothing changes there. */
.dld.is-phone .dld-foot{justify-content:center;padding:20px 0 40px}
.dld.is-phone .dld-foot-text{display:none}
.dld.is-phone .dld-foot-btns .dld-partner{display:none}

/* ---------- Phone column (also the full-screen DUB LAB view) ---------- */
.dld-app.is-col{display:flex;flex-direction:column;gap:12px;background:var(--ink);border-radius:14px;padding:14px 14px 24px;margin:0 0 24px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.dld-app.is-full{position:fixed;inset:0;z-index:100000;margin:0;border-radius:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:max(14px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
.is-col .dld-versions{background:none;border:0;padding:0;gap:0}
.is-col .dld-versions .dld-card-hd{display:none}
.is-col .dld-verlist{flex-direction:row;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.is-col .dld-verlist::-webkit-scrollbar{display:none}
.dld .is-col button.dld-ver,.dld .is-col button.dld-ver:hover{flex:0 0 auto;min-height:44px;padding:0 14px;border-radius:100px;font-size:14px;font-weight:400}
.dld .is-col button.dld-ver[aria-pressed=true]{padding:0 13px;font-weight:700}
.is-col .dld-ver-s{display:none}
.dld .is-col button.dld-ver-stem,.dld .is-col button.dld-ver-stem:hover{display:flex;border:2px solid var(--gold);background:transparent;color:var(--gold);font-weight:700;padding:0 13px}
.dld .is-col button.dld-ver-stem[aria-pressed=true]{background:var(--gold);color:#142032}
.is-col .dld-stems{padding:12px}
.is-col .dld-stems .dld-card-hd{display:none}
.is-col .dld-chans{gap:5px}
.dld .is-col button.dld-chan{font-size:13px}
.dld .is-col p.dld-nowtitle{font-size:16px}
.dld .is-col p.dld-nowartist{font-size:14px}
.is-col .dld-lights{height:150px;border:1px solid var(--green);flex:none}
.is-col .dld-ctl{gap:10px}
.dld .is-col button.dld-play{height:48px;font-size:17px}
.dld .is-col button.dld-share-phone{min-height:48px;border-radius:100px;padding:0 12px;font-size:14px}
.is-col .dld-prog{margin-top:-4px}
.is-col .dld-dub .wrbr-dub{padding:0;border:0;background:none}
.is-col .wrbr-dub-hd{display:none}
.is-col .wrbr-dub-beats{margin:0 0 10px;font-size:13px}
.is-col .wrbr-dub-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
.is-col .wrbr-dub-card{padding:12px;display:flex;flex-direction:column;gap:8px}
.is-col .wrbr-dub-card h4{font-size:16px!important}
.dld .is-col .wrbr-dub-how{display:none}
.dld .is-col .wrbr-dub-how-s{display:block;margin:0!important;font-size:13px;line-height:1.35}
.dld .is-col .wrbr-dub button.wrbr-dub-big{min-height:52px;font-size:16px}
.is-col .wrbr-dub-fv{min-width:30px}
.dld .wrbr-dub-fad input{min-width:0}
.is-col>.dld-jambtn{align-self:stretch}
.is-col>.wrbr-dub-tips{margin-top:0}
.dld-pend{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:4px}
.dld p.dld-pend-h{font-size:17px;font-weight:700;color:var(--gold)}
.dld-pend .wrbr-dub-foot{margin-top:2px;font-size:12px}
.dld-pend-row{display:flex;align-items:center;gap:16px;width:100%}
.dld.is-phone button.dld-power,.dld.is-phone button.dld-power:hover{align-self:center;width:36%;max-width:170px;min-width:90px;margin:0;flex:none}
.dld.is-phone .dld-power-mark svg{width:13px;height:13px}

/* ---------- Jam View (full screen; Lights behind the controls) ---------- */
.dld-app.is-jamview{position:fixed;inset:0;z-index:100001;margin:0;border-radius:0;overflow-y:auto;background:#000;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.dld-app.is-jamview:fullscreen{width:100%;height:100%}
.is-jamview .dld-lights{position:fixed;inset:0;z-index:0;height:auto;border:0;border-radius:0}
.is-jamview .dld-lights .wrbr-vis-stage{border-radius:0}
.dld-jamchips{display:none}
.is-jamview .dld-jamchips{display:block;margin:-4px 0 12px}
.dld-jamchips .wrbr-vis-bar{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.dld .wrbr-vis-fs{display:none}
.dld .wrbr-vis-chip,.dld .wrbr-vis-chip:hover{min-height:36px;padding:0 12px;border:1px solid var(--cream);border-radius:100px;background:rgba(0,0,0,.6);color:var(--cream);font-size:13px;font-weight:700}
.dld .wrbr-vis-chip[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#142032}
.is-jamview>*:not(.dld-lights),.is-jamview .dld-grid>*:not(.dld-jam){position:relative;z-index:1}
.is-jamview .dld-grid{position:static}
.is-jamview .dld-grid{padding-bottom:24px}
.is-jamview .dld-jam{display:contents}
.is-jamview .dld-jamrow,.is-jamview>.dld-jambtn{display:none}
.is-jamview .dld-card,.is-jamview .wrbr-dub{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.is-jamview .dld-top{margin-bottom:12px}
.is-jamview.is-col{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.is-jamview.is-col .dld-dub,.is-jamview.is-col .dld-mix{background:rgba(0,0,0,.6);border-radius:12px}
.is-jamview.is-col .dld-dub{padding:10px}

/* ---------- How to play (docked, so the Lab stays usable) ---------- */
.dld-guide{position:fixed;right:16px;bottom:16px;z-index:100003;width:min(400px,calc(100vw - 32px));max-height:min(82vh,640px);overflow-y:auto;background:#111;border:2px solid var(--gold);border-radius:14px;padding:16px;color:var(--cream);box-shadow:0 10px 30px rgba(0,0,0,.5);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;outline:none}
.dld-guide-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.dld p.dld-guide-ttl{font-size:18px;font-weight:800;color:var(--gold)}
.dld ol.dld-guide-steps{margin:0 0 12px;padding-left:22px;font-size:14.5px;line-height:1.5}
.dld-guide-steps li{margin:0 0 6px}
.dld-guide-steps strong{color:var(--gold)}
.dld p.dld-guide-kh{font-size:13px;font-weight:700;color:var(--gold);margin-bottom:6px}
.dld p.dld-guide-note{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,210,63,.25);
  font-size:13px;line-height:1.6;color:var(--cream);opacity:.9}
.dld-guide-kr{display:flex;gap:10px;align-items:center;font-size:14px;margin-bottom:4px}
.dld-guide-kr kbd{min-width:44px;text-align:center;padding:2px 6px;border:1px solid #555;border-radius:6px;background:#222;color:#fff;font:600 12px system-ui,sans-serif}
.dld button.dld-guide-ok{width:100%;margin-top:10px}
@media (max-width:600px){.dld-guide{left:0;right:0;bottom:0;width:100%;max-height:60vh;border-radius:14px 14px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}}

/* ---------- Mixer strip ---------- */
.dlm{display:flex;flex-direction:column;gap:6px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--cream)}
.dlm-hd{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dlm-ttl{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--gold)}
.dlm-sub{font-size:12px;color:var(--muted)}
.dlm-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px}
.dlm-knobs{display:flex;gap:14px;align-items:flex-end}
.dlm-knob{display:flex;flex-direction:column;align-items:center}
.dlm-dial{width:104px;height:104px;touch-action:none;cursor:ns-resize;border-radius:50%;user-select:none;-webkit-user-select:none}
.dlm-dial svg,.dlm-sw svg,.dlm-fad svg{display:block;width:100%;height:100%}
.dlm-knob-name,.dlm-label,.dlm-fxname{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cream)}
.dlm-knob-bass .dlm-knob-name{color:#2FBF5A}
.dlm-knob-mid .dlm-knob-name{color:#FFD23F}
.dlm-knob-treble .dlm-knob-name{color:#ff6b7d}
.dlm-knob-val{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.dlm-fx{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 6px;border-left:1px solid #333;border-right:1px solid #333}
.dlm-pads{display:grid;grid-template-columns:repeat(2,80px);gap:8px}
.dld button.dlm-pad,.dld button.dlm-pad:hover{width:100%;height:62px;padding:0;border-radius:10px;border:2px solid var(--pb);background:var(--pg);color:var(--pt);box-shadow:inset 0 -3px 0 rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;font-weight:800;touch-action:manipulation;transition:box-shadow .08s,filter .08s}
.dld button.dlm-pad.is-hot{box-shadow:0 0 0 3px var(--pb),0 0 18px 4px var(--pb);filter:brightness(1.15)}
.dlm-pad-siren{--pb:#C8102E;--pg:#A30F24;--pt:#FFE9B0}
.dlm-pad-horn{--pb:#FFD23F;--pg:#F2B705;--pt:#4A0A10}
.dlm-pad-rewind{--pb:#2FBF5A;--pg:#1E7F34;--pt:#FFE9B0}
.dlm-pad-bomb{--pb:#FFE9B0;--pg:#2b2b2b;--pt:#FFE9B0}
.dlm-fxctl{display:flex;flex-direction:column;gap:4px;padding-top:4px}
.dlm-fxrow{display:flex;align-items:center;gap:6px;width:186px}
.dlm-fxrow label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--cream);min-width:44px;white-space:nowrap}
.dlm-fxrow input{flex:1 1 auto;min-width:0;accent-color:var(--gold);margin:0}
.dlm-fxval{font-size:11px;color:var(--muted);min-width:28px;text-align:right;font-variant-numeric:tabular-nums}
.dlm-right{display:flex;gap:14px;align-items:flex-end}
.dlm-switch,.dlm-fader{display:flex;flex-direction:column;align-items:center;gap:2px}
.dlm-sw-on,.dlm-sw-off{font-size:11px;font-weight:700;color:var(--cream)}
.dld button.dlm-sw,.dld button.dlm-sw:hover{width:62px;height:104px;padding:0;border:0;background:none;border-radius:10px;touch-action:none}
.dlm-sw-bat{transition:transform .06s}
.dlm-fad{width:64px;height:132px;touch-action:none;cursor:ns-resize;user-select:none;-webkit-user-select:none}

/* Phone mixer: knobs, switch and fader in a row; the four pads in a row; Pitch and Time under them */
.is-phone .dld-mix{padding:12px;min-width:0;max-width:100%}
.is-phone .dlm-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 2px;min-width:0}
.is-phone .dlm-knobs{gap:2px}
.is-phone .dlm-right{gap:2px;order:1}
.is-phone .dlm-fx{order:2;flex:1 1 100%;min-width:0;border:0;padding:4px 0 0;align-items:stretch;border-top:1px solid #333}
.is-phone .dlm-dial{width:70px;height:70px}
.is-phone .dlm-knob-name,.is-phone .dlm-label{font-size:11px}
.is-phone .dlm-label{letter-spacing:0;font-size:10.5px}
.is-phone .dlm-knob-val{font-size:11px}
.dld.is-phone button.dlm-sw,.dld.is-phone button.dlm-sw:hover{width:44px;height:74px}
.is-phone .dlm-sw-on,.is-phone .dlm-sw-off{font-size:10px}
.is-phone .dlm-fad{width:44px;height:96px}
.is-phone .dlm-pads{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}
.dld.is-phone button.dlm-pad{height:58px;font-size:11.5px}
.is-phone .dlm-fxctl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding-top:8px}
.is-phone .dlm-fxrow{width:auto;min-width:0}
.is-phone .dlm-fxrow label{min-width:0;flex:none}
.is-phone .dld-top-sub{font-size:11px;letter-spacing:.05em}
.is-phone .dlm-fxname{display:none}

/* ---------- "Try this" (1.1.1) ----------
   Shows on arrival, clears itself once all four steps are ticked or the person closes it, and
   takes its space with it -- no collapsed pill left behind. Returns on the power-off reset. */
.dld-tips-wrap{position:relative;transition:opacity .28s ease,transform .28s ease,max-height .3s ease,margin .3s ease}
.dld-tips-wrap.is-gone{opacity:0;transform:translateY(-6px);max-height:0;overflow:hidden;margin:0;pointer-events:none}
.dld button.dld-tips-x,.dld button.dld-tips-x:hover{position:absolute;top:12px;right:10px;width:30px;height:30px;
  min-width:0;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,210,63,.55);color:var(--gold);cursor:pointer}
.dld button.dld-tips-x:hover{background:rgba(0,0,0,.4)}
.dld button.dld-tips-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dld .dld-tips-wrap .wrbr-dub-tips{padding-right:48px}
@media (prefers-reduced-motion:reduce){.dld-tips-wrap{transition:none}}

/* ---------- Sliders (1.1.0) ----------
   Every slider is drawn by hand instead of leaning on accent-color. accent-color is the browser's
   own tint and some setups ignore it (the Founder's Chrome does), which dropped Echo, Reverb, Pitch
   and Time back to the default white track and blue thumb. Track, fill and thumb are all set here,
   so they look the same in every browser. --sl is the colour, --p the filled percentage (set by
   dublab-demo.js as the slider moves, since the filled part can't be done in CSS alone). */
.dld input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;
  --sl:var(--gold);--slh:7px;--p:0%}
.dld input[type=range]::-webkit-slider-runnable-track{height:var(--slh);border-radius:999px;
  background:linear-gradient(to right,var(--sl) 0 var(--p),#3b3b3b var(--p) 100%)}
.dld input[type=range]::-moz-range-track{height:var(--slh);border-radius:999px;background:#3b3b3b}
.dld input[type=range]::-moz-range-progress{height:var(--slh);border-radius:999px;background:var(--sl)}
.dld input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:19px;height:19px;border-radius:50%;background:var(--sl);border:2px solid #0b0b0b;
  box-shadow:0 1px 3px rgba(0,0,0,.6);margin-top:calc((var(--slh) - 19px) / 2)}
.dld input[type=range]::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:var(--sl);
  border:2px solid #0b0b0b;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.dld input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:999px}
/* Each slider's own colour, matching the card it sits in (as the old accent-color rules did). */
.dld .wrbr-dub-card.red .wrbr-dub-fad input{--sl:var(--gold)}
.dld .wrbr-dub-card.gold .wrbr-dub-fad input{--sl:#a30f24}
.dld .dlm-fxrow input{--sl:var(--gold)}
.dld input.dld-range{--sl:var(--play)}

/* Phones: every slider gets a 44 px tall touch area.
   1.0.8: this used to be height:44px on the input itself, which some browsers (iOS Safari and
   Chrome on Android among them) read as "make the whole control 44 px tall" -- the track stretched
   into a thick white box instead of staying a slim bar. Padding gives the same 44 px tap target
   while the control itself keeps its natural height, the way it already renders on desktop. */
.dld.is-phone input[type=range]{height:auto;padding:19px 0;background:transparent}
.dld.is-phone .wrbr-dub-fad{min-height:44px}

@media (prefers-reduced-motion:reduce){.dld button.dlm-pad,.dlm-sw-bat{transition:none}}

/* ---------- Effects strip (1.0.2): meters, filter sweep, tape stop ---------- */
.dld-grid .dld-fx,.dld .dld-fx{padding:12px 18px 16px}
.dlf{display:flex;flex-direction:column;gap:10px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--cream)}
.dlf-hd{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dlf-ttl{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--gold)}
.dlf-sub{font-size:12px;color:var(--muted)}
.dlf-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:stretch}
.dlf-part{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.dlf-level{padding-right:16px;border-right:1px solid #333}
.dlf-filter{padding:0 16px;gap:4px}
.dlf-tape{padding-left:16px;border-left:1px solid #333;gap:8px;min-width:190px}
.dlf-name{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cream);text-align:center}
.dlf-note{font-size:11px;color:var(--muted);text-align:center;max-width:170px}
.dlf-meters{display:flex;gap:14px;padding:8px 12px;background:#0b0b0b;border:1px solid #3a3a3a;border-radius:10px}
.dlf-ch{display:flex;flex-direction:column;align-items:center;gap:6px}
.dlf-bar{display:flex;flex-direction:column-reverse;gap:2px}
.dlf-seg{display:block;width:30px;height:6px;border-radius:2px;transition:background-color .05s}
.dlf-seg.is-g{background:#0f3a1c}.dlf-seg.is-y{background:#3a3110}.dlf-seg.is-r{background:#3d1414}
.dlf-seg.is-g.is-on{background:#2FBF5A;box-shadow:0 0 6px #2FBF5A}
.dlf-seg.is-y.is-on{background:#FFD23F;box-shadow:0 0 6px #FFD23F}
.dlf-seg.is-r.is-on{background:#ff3b3b;box-shadow:0 0 6px #ff3b3b}
.dlf-chname{font-size:11px;font-weight:800;color:var(--muted)}
.dlf-dial{width:132px;height:132px;touch-action:none;cursor:ew-resize;border-radius:50%;user-select:none;-webkit-user-select:none}
.dlf-dial svg{display:block;width:100%;height:100%}
.dlf-tick{stroke:var(--cream)}.dlf-tick-mid{stroke:var(--gold)}.dlf-arc{stroke:var(--gold)}
.dlf-scale{display:flex;justify-content:space-between;gap:8px;width:100%;max-width:220px;font-size:12px;font-weight:700;color:var(--muted)}
.dlf-fval{color:var(--gold);font-variant-numeric:tabular-nums;text-align:center}
.dlf-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;align-items:center;font-size:12px;color:var(--muted);margin-top:4px}
.dlf-keys kbd{min-width:22px;text-align:center;padding:1px 6px;border:1px solid #555;border-radius:6px;background:#222;color:#fff;font:600 12px system-ui,sans-serif}
.dld button.dlf-tape-btn,.dld button.dlf-tape-btn:hover{width:150px;height:112px;padding:0;border-radius:12px;border:2px solid var(--red);background:var(--tape);color:var(--cream);box-shadow:inset 0 -3px 0 rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:15px;font-weight:800;touch-action:manipulation;transition:box-shadow .08s,filter .08s}
.dld button.dlf-tape-btn.is-hot{box-shadow:0 0 0 3px var(--red),0 0 18px 4px var(--red);filter:brightness(1.15)}
.dlf-reel{width:40px;height:40px;display:block}
.dlf-tape-st{font-size:13px;color:var(--gold);min-height:18px}
.dld-dub+.dld-fx{margin:0}
/* Jam View: the strip is a card like the others (see-through over the Lights) */
.is-jamview .dld-fx{background:rgba(0,0,0,.6)}

/* Effects strip on phones: the meters lie sideways, the knob and tape stop sit side by side */
.is-phone .dld-fx{padding:12px}
.is-phone .dlf-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
.is-phone .dlf-level{grid-column:1 / -1;padding:0;border:0;align-items:stretch}
.is-phone .dlf-level>.dlf-name{display:none}
.is-phone .dlf-meters{flex-direction:column;gap:6px;padding:8px 10px}
.is-phone .dlf-ch{flex-direction:row-reverse;gap:8px}
.is-phone .dlf-bar{flex-direction:row;flex:1 1 auto}
.is-phone .dlf-seg{flex:1 1 0;width:auto;height:12px}
.is-phone .dlf-chname{width:10px}
.is-phone .dlf-filter{padding:0}
.is-phone .dlf-tape{padding:0;border:0;min-width:0}
.is-phone .dlf-name{font-size:11px;letter-spacing:.06em}
.is-phone .dlf-dial{width:108px;height:108px}
.is-phone .dlf-scale{font-size:11px}
.dld.is-phone button.dlf-tape-btn{width:100%;height:108px;font-size:14px}
.is-phone .dlf-tape-st{font-size:12px}
/* A narrow computer window (no phone layout): stack the three parts */
@media (max-width:640px){.dld:not(.is-phone) .dlf-row{grid-template-columns:minmax(0,1fr);gap:14px}.dld:not(.is-phone) .dlf-level,.dld:not(.is-phone) .dlf-tape{padding:0;border:0}}

@media (prefers-reduced-motion:reduce){.dlf-seg{transition:none}.dlf-seg.is-on{box-shadow:none!important}.dld button.dlf-tape-btn{transition:none}}

/* ---------- Share window (1.0.2, computers) ---------- */
.dld-sharewin{position:fixed;inset:0;z-index:100004;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;background:rgba(0,0,0,.6);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.dld-sharewin[hidden]{display:none!important}
.dld-share-box{width:min(460px,100%);box-sizing:border-box;background:#111;border:2px solid var(--gold);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px;color:var(--cream);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.dld-share-hd{display:flex;justify-content:space-between;align-items:center;gap:10px}
.dld p.dld-share-ttl{font-size:18px;font-weight:800;color:var(--gold)}
.dld p.dld-share-line{font-size:15px;line-height:1.4;color:var(--cream)}
.dld label.dld-share-lab{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:2px 0 -6px}
.dld input.dld-share-url{width:100%;height:48px;box-sizing:border-box;padding:0 14px;border-radius:10px;border:1px solid #555;background:#000;color:var(--cream);font-size:15px;font-family:inherit;margin:0;box-shadow:none}
.dld-share-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.dld button.dld-btn-cream,.dld button.dld-btn-cream:hover{background:transparent;color:var(--cream);border-color:var(--cream)}
.dld p.dld-share-msg{min-height:20px;font-size:15px;font-weight:700;color:var(--gold)}
.dld .dld-retry{appearance:none;border:0;border-radius:999px;background:var(--gold);color:#142032;font-weight:800;font-size:14px;min-height:40px;padding:0 16px;margin-left:6px;cursor:pointer;vertical-align:middle} /* 1.3.2 */