/* ww-mock.css — the Win Win plugin mocks, shared by the product page and Home.
 *
 * Everything that draws the plugin itself: the scaled frames, the Focus / All Six /
 * Learn windows (.wwm, .wwl), the circuit browser, the Mirror and Musical panels
 * (.ww-dark) and the tooltip. Split out of ww.css on 2026-09-26 so Home could show the
 * same plugin instead of old screenshots without loading the whole product page's
 * stylesheet. site-js/ww-bench.js builds the markup these rules style.
 *
 * Loaded AFTER site.css. On the product page it loads before ww.css, which owns the
 * page layout around the mocks (hero, sections, breakpoints) and --ww-big.
 *
 * No inline styles anywhere: state-driven values (a station colour, a knob position)
 * arrive through CSSOM from ww-bench.js, which the CSP's style-src 'self' allows.
 */

/* ── the plugin frames ─────────────────────────────────────────────────────── */
/* A frame keeps the plugin's own aspect ratio; ww-bench.js drops a fixed-size stage
   into it and scales the whole stage to frame width ÷ plugin width. */
.ww-frame {
  position: relative;
  width: 100%;
  border-radius: 12px;
  background: #141310;
  overflow: hidden;
}

.ww-frame-hero {
  aspect-ratio: 1820 / 1014;
  box-shadow: 0 40px 90px rgba(47, 47, 47, .3), 0 4px 12px rgba(47, 47, 47, .14);
}

/* Breaks out of the 1240 text column to the same measure as the hero, centred on it. */
.ww-frame-rack {
  width: var(--ww-big);
  margin-left: calc(50% - var(--ww-big) / 2);
  aspect-ratio: 1825 / 1009;
  box-shadow: 0 36px 80px rgba(47, 47, 47, .26), 0 4px 12px rgba(47, 47, 47, .12);
}

.ww-frame-learn {
  aspect-ratio: 849 / 524;
  border-radius: 10px;
  background: #191814;
  box-shadow: 0 36px 80px rgba(47, 47, 47, .28), 0 4px 12px rgba(47, 47, 47, .12);
}

/* ── the plugin chassis ────────────────────────────────────────────────────── */
/* Everything under .wwm is drawn in the plugin's own pixels: the positions below are
   the plugin's layout, not a web layout, and they only make sense inside a stage of
   exactly the stated size. A transform scales text, SVGs and hit targets together;
   iOS text inflation must not enlarge labels inside this fixed-coordinate artwork. */
.wwm {
  position: absolute;
  top: 0;
  left: 0;
  background: #141310;
  color: #efe9d8;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  overflow: hidden;
  transform-origin: 0 0;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

.wwm-hero { width: 1820px; height: 1014px; }
.wwm-rack { width: 1825px; height: 1009px; }
.wwm-learn { width: 849px; height: 524px; background: #191814; }

.wwm button { font-family: inherit; }

/* the top bar */
.wwm-top {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 0 8px;
  border-bottom: 1px solid rgba(239, 233, 216, .08);
}

.wwm-rack .wwm-top { padding: 0 12px; }

.wwm-brand { display: flex; align-items: baseline; gap: 9px; width: 222px; }

.wwm-brand-word {
  color: #d24240;
  font-family: Anton, sans-serif;
  font-size: 22px;
  line-height: 1;
  text-shadow: 0 2px 0 #7d1f1e;
}

.wwm-brand-sub { font-size: 10px; font-weight: 700; letter-spacing: .26em; }
.wwm-vsep { width: 1px; height: 26px; background: rgba(239, 233, 216, .12); }

.wwm-preset { display: flex; align-items: center; gap: 12px; width: 320px; margin-left: 40px; }
.wwm-preset-arrow { color: #a9a392; font-size: 13px; }
.wwm-preset-arrow:last-child { margin-left: auto; }
.wwm-preset-bank { color: #d4ab28; font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.wwm-preset-name { font-family: Archivo, sans-serif; font-size: 15.5px; font-weight: 700; white-space: nowrap; }

.wwm-learnbtn { display: block; flex: none; width: 44px; height: 44px; margin-left: 12px; }
.wwm-learn-icon { display: block; overflow: visible; }

.wwm-spacer { width: 398px; margin-left: 46px; }

.wwm-matched,
.wwm-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
}

.wwm-matched {
  width: 90px;
  height: 26px;
  margin-left: 14px;
  border: 1px solid rgba(239, 233, 216, .12);
  background: #221f18;
  color: #a9a392;
}

.wwm-autopk { display: flex; gap: 3px; margin-left: 36px; }
.wwm-chip { width: 62px; height: 20px; border: 1px solid rgba(239, 233, 216, .2); }
.wwm-chip.off { width: 58px; border-color: rgba(239, 233, 216, .12); background: #221f18; color: #a9a392; }

.wwm-pk { width: 70px; margin-left: 14px; text-align: center; }
.wwm-autopk + .wwm-pk { margin-left: 46px; }
.wwm-rack .wwm-autopk + .wwm-pk { margin-left: 52px; }
.wwm-pk-label { display: block; color: #a9a392; font-size: 9.5px; font-weight: 700; letter-spacing: .16em; }
.wwm-pk-val { display: block; font-size: 21px; font-weight: 700; line-height: 1.1; }

.wwm-view { display: flex; height: 26px; margin-left: 22px; border: 1px solid rgba(239, 233, 216, .2); }

/* `.wwm .wwm-view a` rather than `.wwm-view a`: body.ww-light a turns every link on
   this page green, and that rule outranks a single class. */
.wwm .wwm-view > * {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  color: #efe9d8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-decoration: none;
}

.wwm .wwm-view a:hover { background: #221f18; color: #efe9d8; }
.wwm .wwm-view .on { background: #efe9d8; color: #1a1813; }

.wwm-engaged {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 26px;
  font-family: Anton, sans-serif;
  font-size: 13px;
  letter-spacing: .06em;
}

.wwm-engaged-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d24240;
  box-shadow: 0 0 8px rgba(210, 66, 64, .7);
}

/* the station plates across the top of Focus */
.wwm-plates,
.wwm-labels {
  position: absolute;
  left: 10px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 1800px;
}

.wwm-plates { top: 50px; }
.wwm-labels { top: 252px; }

.wwm-plate { position: relative; height: 260px; }

.wwm-plate-btn {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 197px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.wwm-plate.is-active .wwm-plate-btn { height: 205px; }

.wwm-plate img {
  display: block;
  width: auto;
  height: auto;
  max-width: 282px;
  max-height: 190px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  transition: transform .25s ease;
}

.wwm-plate.is-active img { max-width: 300px; max-height: 205px; }
.wwm-plate.is-off img { opacity: .45; }
.wwm-plate-btn:hover img,
.wwm-plate-btn:focus-visible img { transform: translateY(-3px); }
.wwm-plate-btn:focus-visible { outline: 2px solid var(--hue); outline-offset: -2px; }

.wwm-plate-bar { position: absolute; top: 205px; right: 4px; left: 4px; height: 3px; }
.wwm-plate.is-active .wwm-plate-bar { background: var(--hue); }

.wwm-label { display: flex; flex-direction: column; align-items: center; }
.wwm-label-row { display: flex; align-items: center; gap: 18px; height: 20px; }

.wwm-lamp {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1.5px solid rgba(239, 233, 216, .55);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.wwm-lamp.is-live { border-color: var(--hue); background: var(--hue); }

.wwm-step {
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #cfc9b8;
  font-size: 16px;
  cursor: pointer;
}

.wwm-step:hover { color: #efe9d8; }
.wwm-dots { color: #a9a392; font-size: 9px; letter-spacing: .2em; }
.wwm-label-title { margin-top: 5px; color: var(--hue); font-size: 12px; font-weight: 700; letter-spacing: .22em; }
.wwm-label-model { margin-top: 2px; color: #cfc9b8; font-size: 11.5px; letter-spacing: .22em; }
.wwm-label.is-active .wwm-label-model { color: #efe9d8; font-weight: 700; }

/* the spectrum and the open station */
.wwm-scope { position: absolute; top: 320px; left: 15px; }

.wwm-fknob,
.wwm-rknob {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  transition: background-color .2s ease;
}

.wwm-fknob { position: absolute; top: 800px; width: 90px; }
.wwm-rknob { height: 92px; }

.wwm-fknob:hover,
.wwm-fknob:focus-visible,
.wwm-rknob:hover,
.wwm-rknob:focus-visible { background: rgba(239, 233, 216, .05); }

.wwm-fknob:focus-visible,
.wwm-rknob:focus-visible { box-shadow: 0 0 0 1px rgba(239, 233, 216, .5); }

/* Bigger than the plugin draws them. At 1:1 the plugin's 7 px labels are fine; on a
   laptop the mock draws at about three quarters of that, and Amit found them too small
   to read. Line height is tightened so the larger type keeps the plugin's rows. */
.wwm-knob-label { margin-top: 7px; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: .1em; white-space: nowrap; }
.wwm-knob-val { display: flex; align-items: baseline; gap: 5px; margin-top: 4px; line-height: 1.2; }
.wwm-knob-num { font-family: Archivo, sans-serif; font-size: 17px; font-weight: 700; }
.wwm-knob-unit { color: #a9a392; font-size: 9px; }

.wwm-rknob .wwm-knob-label { margin-top: 3px; font-size: 9.5px; letter-spacing: .08em; }
.wwm-rknob .wwm-knob-val { gap: 4px; margin-top: 3px; }
.wwm-rknob .wwm-knob-num { font-size: 15px; }
.wwm-rknob .wwm-knob-unit { font-size: 8.5px; }

.wwm-adv,
.wwm-stage-btn,
.wwm-mix,
.wwm-emph,
.wwm-mirror,
.wwm-stepper,
.wwm-readout { position: absolute; }

.wwm-adv,
.wwm-stage-btn {
  top: 922px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  border: 1px solid rgba(239, 233, 216, .2);
  font-weight: 700;
}

.wwm-adv { left: 28px; gap: 6px; width: 96px; font-size: 10px; letter-spacing: .12em; }
.wwm-adv span { color: #a9a392; }

.wwm-stage-btn { left: 136px; width: 92px; font-size: 9.5px; letter-spacing: .1em; cursor: pointer; }
.wwm-stage-btn:hover,
.wwm-stage-btn:focus-visible { background: #221f18; outline: none; }

.wwm-meter-head {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
}

.wwm-meter-head span:first-child { color: #a9a392; }

.wwm-mix { top: 922px; left: 420px; width: 205px; }
.wwm-mix-bar { height: 5px; margin-top: 4px; background: var(--hue); }

.wwm-emph {
  top: 921px;
  left: 642px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 23px;
  background: var(--hue);
  color: var(--on-hue);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
}

.wwm-mirror { top: 922px; left: 746px; width: 155px; }
.wwm-mirror-track { position: relative; height: 5px; margin-top: 4px; background: rgba(239, 233, 216, .12); }
.wwm-mirror-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 83%; background: var(--hue); }

.wwm-stepper {
  top: 925px;
  left: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 162px;
}

.wwm-stepper .wwm-step { padding: 0 4px; }
.wwm-stepper-name { color: var(--hue); font-size: 12px; font-weight: 700; letter-spacing: .24em; }

.wwm-readout { top: 806px; left: 1475px; width: 309px; }
.wwm-readout-row { display: flex; align-items: baseline; justify-content: space-between; }
.wwm-readout-row.second { margin-top: 17px; }
.wwm-readout-label { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; }
.wwm-readout-val { font-family: Archivo, sans-serif; font-size: 23px; font-weight: 800; line-height: 1.3; }
.wwm-readout-track { position: relative; height: 4px; margin-top: 6px; background: rgba(239, 233, 216, .08); }
.wwm-readout-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--hue); }

.wwm-harm { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 9px; }
.wwm-harm-cell { display: flex; flex-direction: column; align-items: center; }
.wwm-harm-well { position: relative; width: 100%; height: 44px; background: #1f1d17; }
.wwm-harm-bar { position: absolute; right: 4px; bottom: 0; left: 4px; background: #e08424; }
.wwm-harm-n { margin-top: 4px; color: #cfc9b8; font-size: 9.5px; line-height: 1.2; }
.wwm-harm-v { margin-top: 2px; color: #a9a392; font-size: 9.5px; line-height: 1.2; }

.wwm-freq {
  position: absolute;
  top: 982px;
  color: #8f897a;
  font-size: 9.5px;
  transform: translateX(-50%);
}

/* ── the tooltip ───────────────────────────────────────────────────────────── */
.ww-tip {
  position: fixed;
  z-index: 90;
  max-width: 270px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #2f2f2f;
  color: #f7f7ff;
  box-shadow: 0 18px 40px rgba(47, 47, 47, .34);
  pointer-events: none;
  transform: translate(-50%, -118%);
}

.ww-tip-title {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ww-tip-body { margin-top: 5px; font-size: 14px; line-height: 1.35; }

/* ── All Six: the rack ─────────────────────────────────────────────────────── */
.wwm-cols {
  position: absolute;
  top: 50px;
  left: 12px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 1800px;
  height: 860px;
}

.wwm-col {
  position: relative;
  height: 860px;
  border-right: 1px solid rgba(239, 233, 216, .07);
  color: #efe9d8;
}

.wwm-col.is-off { color: rgba(239, 233, 216, .42); }

.wwm-col > * { position: absolute; }

.wwm-col-row { right: 10px; left: 10px; }

.wwm-col-head {
  top: 2px;
  right: 12px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 18px;
}

.wwm-col-num { color: var(--hue); font-family: Archivo, sans-serif; font-size: 18px; font-weight: 800; }
.wwm-col.is-off .wwm-col-num { color: var(--hue-dim); }
.wwm-col-name { font-size: 12px; font-weight: 700; letter-spacing: .22em; }

.wwm-col-lamp {
  width: 11px;
  height: 11px;
  margin-left: auto;
  padding: 0;
  border: 1.5px solid rgba(239, 233, 216, .55);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}

.wwm-col-lamp.is-live { border-color: var(--hue); background: var(--hue); }

.wwm-col-art { top: 31px; right: 0; left: 0; display: flex; justify-content: center; height: 113px; }

.wwm-col-art img {
  display: block;
  width: auto;
  height: 113px;
  max-width: 250px;
  object-fit: contain;
}

.wwm-col.is-off .wwm-col-art img { opacity: .5; }

.wwm-col-model {
  top: 151px;
  right: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wwm-col-model .wwm-step { padding: 0 4px; color: #a9a392; font-size: 15px; }
.wwm-col-model-name { font-size: 12.5px; font-weight: 700; letter-spacing: .24em; }

.wwm-col-count {
  top: 172px;
  right: 0;
  left: 0;
  color: #a9a392;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-align: center;
}

.wwm-col-knobs {
  right: 10px;
  left: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 8px;
}

.wwm-col-eqhead { top: 595px; display: flex; align-items: center; justify-content: space-between; }

.wwm-col-emph {
  padding: 3px 6px;
  background: var(--hue);
  color: var(--on-hue);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
}

.wwm-col-bands { color: #a9a392; font-size: 9.5px; letter-spacing: .12em; }

.wwm-col-well {
  top: 620px;
  height: 79px;
  border: 1px solid rgba(239, 233, 216, .08);
  overflow: hidden;
}

.wwm-col-well svg { position: absolute; inset: 0; }

.wwm-col-bypass {
  position: absolute;
  top: 24px;
  left: 12px;
  color: #cfc9b8;
  font-size: 10px;
  letter-spacing: .08em;
}

.wwm-col-freqs { top: 700px; color: #a9a392; font-size: 9px; line-height: 1.2; }
.wwm-col-freqs span { position: absolute; }
.wwm-col-freqs .f100 { left: 23%; }
.wwm-col-freqs .f1k { left: 56%; }
.wwm-col-freqs .f10k { left: 88%; }

.wwm-col-mixhead { top: 718px; display: flex; justify-content: space-between; font-size: 9.5px; line-height: 1.2; letter-spacing: .1em; }
.wwm-col-mixhead span:first-child { color: #a9a392; }
.wwm-col-mixbar { top: 734px; height: 5px; background: var(--hue); }
.wwm-col.is-off .wwm-col-mixbar { background: rgba(169, 163, 146, .5); }

.wwm-col-gr,
.wwm-col-harm { display: flex; align-items: baseline; justify-content: space-between; }

.wwm-col-gr { top: 754px; }
.wwm-col-harm { top: 796px; }
.wwm-col-gr-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.wwm-col-gr-val { font-family: Archivo, sans-serif; font-size: 19px; font-weight: 800; line-height: 1.2; }
.wwm-col-harm-val { font-family: Archivo, sans-serif; font-size: 15px; font-weight: 800; line-height: 1.2; }

.wwm-col-grbar { top: 778px; height: 5px; background: rgba(239, 233, 216, .08); }
.wwm-col-grbar span { position: absolute; top: 0; bottom: 0; left: 0; background: var(--hue); }

.wwm-col-box {
  top: 818px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 33px;
  border: 1px dashed rgba(239, 233, 216, .18);
  color: #a9a392;
  font-size: 9.5px;
  letter-spacing: .08em;
}

.wwm-foot {
  position: absolute;
  top: 910px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 1800px;
  height: 60px;
  padding: 0 11px;
  border-top: 1px solid rgba(239, 233, 216, .08);
  border-bottom: 1px solid rgba(239, 233, 216, .08);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
}

.wwm-foot-rule { flex: 1; height: 1px; background: rgba(239, 233, 216, .12); }

.wwm-reset {
  margin-left: 80px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d24240;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  cursor: pointer;
}

.wwm-reset:hover { color: #f0a09c; }

/* ── the circuit browser ───────────────────────────────────────────────────── */
/* Not a fixed-size mock: this one is a real web layout on the plugin's colours, so it
   reflows instead of shrinking. */
.ww-dark,
.ww-browser {
  border-radius: 12px;
  background: #141310;
  color: #efe9d8;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  box-shadow: 0 36px 80px rgba(47, 47, 47, .26), 0 4px 12px rgba(47, 47, 47, .12);
  overflow: hidden;
}

.ww-dark button,
.ww-browser button { font-family: inherit; }

/* Reserve space while below-the-fold interactive panels wait to be needed. */
.ww-dark[data-ww-mirror]:empty { min-height: 363px; }
.ww-dark[data-ww-musical]:empty { min-height: 329px; }

.ww-browser-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(239, 233, 216, .08);
}

.ww-browser-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; }
.ww-browser-num { color: var(--hue); font-family: Archivo, sans-serif; font-size: 22px; font-weight: 800; }
.ww-browser-name { font-family: Archivo, sans-serif; font-size: 20px; font-weight: 800; }
.ww-browser-hint { color: #a9a392; font-size: 10px; letter-spacing: .24em; }

.ww-browser-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }

.ww-browser-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(239, 233, 216, .16);
  background: transparent;
  color: #efe9d8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  cursor: pointer;
}

.ww-browser-tab:hover { border-color: rgba(239, 233, 216, .45); }
.ww-browser-tab.is-on { border-color: #efe9d8; background: #efe9d8; color: #1a1813; }
.ww-browser-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hue); }

.ww-browser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 24px;
}

.ww-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid rgba(239, 233, 216, .1);
  background: #1a1914;
  color: #efe9d8;
  text-align: left;
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease;
}

.ww-card.is-loaded { border-color: var(--hue); }

.ww-card:hover,
.ww-card:focus-visible { border-color: rgba(239, 233, 216, .4); outline: none; transform: translateY(-3px); }

.ww-card-plate-wrap { width: 100%; padding: 22px 22px 0; }

.ww-card-plate {
  position: relative;
  width: 100%;
  aspect-ratio: 2.2;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .5);
  overflow: hidden;
}

/* The plate photographs carry a little bench around the faceplate; this crops it. */
.ww-card-plate img {
  position: absolute;
  top: -8.38%;
  left: -3.44%;
  display: block;
  width: 107%;
  height: 117.95%;
}

.ww-card-meta { display: flex; align-items: center; gap: 10px; width: 100%; padding: 16px 12px 14px; }
.ww-card-num { color: #a9a392; font-size: 9px; }
.ww-card.is-loaded .ww-card-num { color: var(--hue); }
.ww-card-name { font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.ww-card-loaded { margin-left: auto; color: var(--hue-ink); font-size: 7.5px; font-weight: 700; letter-spacing: .18em; }

/* ── the Mirror and Musical panels ─────────────────────────────────────────── */
.ww-dark-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(239, 233, 216, .08);
}

.ww-dark-id { display: flex; align-items: baseline; gap: 9px; }
.ww-dark-num { font-family: Archivo, sans-serif; font-size: 17px; font-weight: 800; }
.ww-dark-name { font-size: 10px; font-weight: 700; letter-spacing: .22em; }

.ww-dark-seg { display: flex; height: 24px; margin-left: auto; border: 1px solid rgba(239, 233, 216, .2); }

.ww-dark-seg button {
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: #efe9d8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  cursor: pointer;
}

.ww-dark-seg button.is-on { background: #efe9d8; color: #1a1813; }

.ww-dark-plot { position: relative; background: #0d0c08; }
.ww-dark-plot svg { display: block; width: 100%; height: auto; }
.ww-plot-mirror { aspect-ratio: 640 / 260; }
.ww-plot-musical { aspect-ratio: 640 / 240; }

.ww-legend {
  position: absolute;
  top: 12px;
  left: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .14em;
}

.ww-legend-item { display: flex; align-items: center; gap: 6px; }
.ww-legend-swatch { width: 14px; height: 2px; }
.ww-legend-item.pre { color: #e8b04a; }
.ww-legend-item.pre .ww-legend-swatch { background: #e8b04a; }
.ww-legend-item.mirror { color: #cfc9b8; }
.ww-legend-item.mirror .ww-legend-swatch { height: 0; border-top: 1.5px dashed #cfc9b8; }
.ww-legend-item.hears { color: #e0807e; }
.ww-legend-item.hears .ww-legend-swatch { width: 10px; height: 8px; background: rgba(210, 66, 64, .6); }
.ww-legend-item.out { color: #efe9d8; }
.ww-legend-item.out .ww-legend-swatch { background: #f6f3ea; }

.ww-plot-freqs {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  color: #8f897a;
  font-size: 7.5px;
}

.ww-dark-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 22px;
  padding: 16px;
}

.ww-range { display: flex; flex-direction: column; gap: 6px; }

.ww-range-head {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .14em;
}

.ww-range-label { color: #a9a392; }
.ww-range input { width: 100%; cursor: pointer; }

.ww-dark-status { padding: 0 16px 16px; color: #cfc9b8; font-size: 10px; letter-spacing: .06em; }

.ww-band-badge {
  padding: 4px 8px;
  background: #e0736a;
  color: #1a1813;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}

.ww-root { display: flex; align-items: baseline; gap: 8px; margin-left: auto; }
.ww-root-label { color: #a9a392; font-size: 8.5px; font-weight: 700; letter-spacing: .16em; }
.ww-root-note { font-family: Archivo, sans-serif; font-size: 20px; font-weight: 800; }
.ww-root-hz { color: #a9a392; font-size: 9px; }

.ww-keys-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 16px 16px;
}

.ww-keys {
  display: grid;
  flex: 1 1 320px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px;
}

.ww-key {
  height: 28px;
  padding: 0;
  border: 1px solid rgba(239, 233, 216, .16);
  background: transparent;
  color: #efe9d8;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
}

.ww-key:hover { border-color: rgba(239, 233, 216, .5); }
.ww-key.is-on { border-color: #e0736a; background: #e0736a; color: #1a1813; }

.ww-range-q { flex: 0 1 180px; min-width: 140px; }

/* ── Learn ─────────────────────────────────────────────────────────────────── */
/* The Learn window at its own 849 × 524, same approach as Focus and All Six. */
.wwm-learn > * { position: absolute; }

.wwl-title { top: 18px; left: 18px; color: #d24240; font-family: Anton, sans-serif; font-size: 19px; line-height: 1; }
.wwl-kicker { top: 15px; left: 127px; color: #cfc9b8; font-size: 9.5px; letter-spacing: .18em; }
.wwl-desc { top: 32px; left: 127px; font-family: Archivo, sans-serif; font-size: 17px; font-weight: 700; white-space: nowrap; }
.wwl-close { top: 18px; left: 817px; font-size: 15px; font-weight: 700; }

.wwl-dirs-h { top: 66px; left: 18px; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.wwl-sugg { top: 67px; left: 238px; color: #a9a392; font-size: 8.5px; letter-spacing: .1em; }
.wwl-dirs-rule { top: 88px; left: 18px; width: 1px; height: 364px; background: rgba(239, 233, 216, .12); }

.wwl-dirs { top: 88px; left: 18px; display: flex; flex-direction: column; width: 285px; }

.wwl-dir {
  position: relative;
  display: flex;
  align-items: center;
  height: 40.4px;
  padding: 0 8px 0 22px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: #cfc9b8;
  text-align: left;
  cursor: pointer;
}

.wwl-dir:hover { background: rgba(239, 233, 216, .04); }
.wwl-dir.is-sel { border-left-color: #d24240; background: #2a2721; color: #efe9d8; }
.wwl-dir.is-na { color: #6e695c; cursor: default; }
.wwl-dir.is-na:hover { background: transparent; }

.wwl-lamp { position: absolute; top: 17px; left: 6px; width: 7px; height: 7px; border-radius: 50%; }
.wwl-lamp.is-on { background: #d24240; box-shadow: 0 0 6px rgba(210, 66, 64, .8); }

.wwl-dir-text { display: flex; flex-direction: column; gap: 3px; }
.wwl-dir-name { font-family: Archivo, sans-serif; font-size: 14.5px; font-weight: 800; line-height: 1; letter-spacing: .01em; }
.wwl-dots { display: flex; align-items: center; gap: 4px; }
.wwl-dot { width: 4px; height: 4px; border-radius: 50%; background: #4a463c; }
.wwl-dir-sub { margin-left: 6px; color: #8f897a; font-size: 8px; line-height: 1.2; letter-spacing: .1em; }
.wwl-dir-val { margin-left: auto; color: #cfc9b8; font-size: 10.5px; }
.wwl-dir.is-sel .wwl-dir-val { color: #d4ab28; }

.wwl-tick { top: 69px; left: 322px; width: 1px; height: 9px; background: #a9a392; }
.wwl-track { top: 86px; left: 322px; width: 510px; height: 2px; background: rgba(239, 233, 216, .14); }
.wwl-start { top: 83px; left: 320px; width: 7px; height: 7px; border-radius: 50%; background: #c9c28a; }

.wwl-knob {
  top: 78px;
  width: 17px;
  height: 17px;
  border: 2px solid #f0a09c;
  border-radius: 50%;
  background: #d24240;
  box-shadow: 0 0 0 6px rgba(210, 66, 64, .18), 0 0 14px rgba(210, 66, 64, .6);
  transition: left .4s cubic-bezier(.2, .7, .2, 1);
}

.wwl-soft,
.wwl-range,
.wwl-aggr { top: 101px; font-size: 9px; letter-spacing: .12em; }

.wwl-soft { left: 322px; color: #a9a392; }
.wwl-range { left: 322px; width: 510px; color: #c9c28a; text-align: center; }
.wwl-aggr { left: 742px; width: 90px; color: #a9a392; text-align: right; }

.wwl-rule { height: 1px; background: rgba(239, 233, 216, .1); }
.wwl-rule1 { top: 128px; left: 322px; width: 510px; }
.wwl-rule2 { top: 319px; left: 322px; width: 510px; }
.wwl-rule3 { top: 475px; left: 18px; width: 814px; }

.wwl-big { top: 148px; left: 322px; color: #d4ab28; font-family: Archivo, sans-serif; font-size: 25px; font-weight: 800; }
.wwl-biglabel { top: 151px; left: 440px; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; }
.wwl-est { top: 168px; left: 440px; color: #a9a392; font-size: 8px; letter-spacing: .14em; }

.wwl-cols {
  top: 192px;
  left: 322px;
  display: grid;
  grid-template-columns: 163px 177px 1fr;
  column-gap: 14px;
  width: 510px;
}

.wwl-col { display: flex; flex-direction: column; }
.wwl-col-title { color: #a9a392; font-size: 8.5px; line-height: 1.3; letter-spacing: .14em; }
.wwl-row { margin-top: 7px; }
.wwl-row-label { display: block; font-size: 8px; line-height: 1.3; letter-spacing: .08em; white-space: nowrap; }
.wwl-row-line { display: flex; align-items: center; gap: 10px; margin-top: 2px; line-height: 1.3; }
.wwl-row-track { position: relative; flex: 1; height: 3px; }
.wwl-row-base { position: absolute; top: 1px; right: 0; left: 0; height: 1px; background: rgba(239, 233, 216, .14); }
.wwl-row-bar { position: absolute; top: 0; height: 3px; background: #efe9d8; transition: left .4s ease, width .4s ease; }
.wwl-row-bar.neg { background: #d24240; }
.wwl-row-val { width: 54px; font-size: 11px; text-align: right; }
.wwl-row-val.neg { color: #e0605d; }

.wwl-sets { top: 329px; left: 322px; color: #a9a392; font-size: 8.5px; letter-spacing: .14em; }

.wwl-env,
.wwl-btn,
.wwl-auto {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  letter-spacing: .14em;
}

.wwl-env {
  top: 323px;
  left: 723px;
  width: 109px;
  height: 22px;
  border: 1px solid rgba(239, 233, 216, .2);
  background: #100f0a;
  font-size: 8.5px;
  font-weight: 700;
}

.wwl-times { top: 348px; left: 322px; font-size: 10px; }
.wwl-sat { top: 366px; left: 322px; font-family: Archivo, sans-serif; font-size: 14px; }

.wwl-views { top: 484px; left: 18px; display: flex; }

.wwl-views button {
  width: 83px;
  height: 26px;
  border: 1px solid rgba(239, 233, 216, .18);
  background: #100f0a;
  color: #efe9d8;
  font-size: 9.5px;
  letter-spacing: .1em;
  cursor: pointer;
}

.wwl-views button.is-on { border-color: #d24240; background: #d24240; }

.wwl-auto { top: 484px; left: 191px; width: 144px; border: 1px solid #6b5a1c; background: #2c2614; color: #d4ab28; font-size: 9.5px; }

.wwl-btn {
  top: 484px;
  border: 1px solid rgba(239, 233, 216, .12);
  background: #100f0a;
  font-size: 8.5px;
  font-weight: 700;
}

.wwl-relearn { left: 557px; width: 83px; }
.wwl-back { left: 647px; width: 82px; }
.wwl-keep { left: 735px; width: 97px; border-color: #d24240; background: #d24240; }