/* mtech.css - Music Technology (includes/music/mtech.php; assets/music/mtech/*.js). Site tokens only, so light and dark
   come from brainlag.css. Every control is at least 44 px. Graphs and timelines run left to right in every language
   (time and frequency axes, the stereo field's left and right are physical); text and layout follow the page direction. */
.mtx-main{padding-top:10px;padding-bottom:40px}
main.wrap.mtx-main{max-width:1180px}
.mtx-main{--mtx-track:rgba(var(--ink-rgb),.15)}   /* a track that reads on the page, a card and the sunk boxes alike */   /* the tools need the room (sixteen steps, four strips); the text keeps its measure */
.mtx-main .b-sm,.mtx-panel .b-sm{min-height:44px}
.mtx-main .panel{background:var(--surface);border-radius:var(--r3);box-shadow:var(--shadow);margin:16px 0}
.mtx-main .tool-hero{margin:8px 0 4px}.mtx-main .tool-hero h1{margin:0 0 6px}.mtx-main .tool-hero p{margin:0;color:var(--ink-2);max-width:66ch}
.mtx-crumb{margin:6px 0 0;font-size:14.5px}
.mtx-crumb a{color:var(--study-ink);font-weight:700}
.mtx-muted{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:var(--warn-bg);color:var(--ink);font-weight:600}
.mtx-muted .b-text{min-height:44px;padding:0 4px}

/* the hub */
.mtx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:14px;margin:6px 0 14px}
.mtx-card{display:flex;gap:14px;align-items:center;padding:16px 18px;color:var(--ink);text-decoration:none;min-height:96px;transition:box-shadow .18s var(--ease-out),transform .18s var(--ease-out)}
.mtx-card:hover{outline:2px solid var(--study);outline-offset:-2px}
.mtx-card:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.mtx-card img{flex:none}
.mtx-ct{display:flex;flex-direction:column;gap:3px;min-width:0}
.mtx-ct b{font:700 18px var(--f-display)}
.mtx-ct span{font-size:14.5px;color:var(--ink-2)}
.mtx-ct .mtx-done{color:var(--study-ink);font-weight:700}

/* the tool panel */
.mtx-panel{padding:16px 20px 22px;container-type:inline-size;container-name:mtx}
@media (max-width:600px){.mtx-panel{padding:12px 12px 16px}}
.mtx-head{display:flex;align-items:flex-start;gap:8px}
.mtx-bar{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.mtx-kbd{flex:none}
.mtx-kbd .kbdm-pop{bottom:auto;top:calc(100% + 8px)}
.mtx-app{margin:14px 0 0}
/* the tool is drawn by its script after the first paint: its room held from the first paint, at the least height it
   is drawn at in each range (360-599, 600-1023, 1024 and up; the full version's own, taller; 16 Oct). Never more than
   the drawn tool, so it adds no space: before, "Try this" and the footer sat under an empty app and dropped (Sound lab
   CLS 0.45 at 390, 0.27 at 1440, signed in to the full version). Re-measure when a tool's layout changes. */
.mtx-bar{min-height:44px}
#mtx[data-tool="beat-maker"] .mtx-app{min-height:689px}#mtx[data-tool="synth"] .mtx-app{min-height:1382px}#mtx[data-tool="sound-lab"] .mtx-app{min-height:943px}#mtx[data-tool="eq-trainer"] .mtx-app{min-height:692px}#mtx[data-tool="mixer"] .mtx-app{min-height:1025px}#mtx[data-full][data-tool="beat-maker"] .mtx-app{min-height:1036px}#mtx[data-full][data-tool="synth"] .mtx-app{min-height:1946px}#mtx[data-full][data-tool="sound-lab"] .mtx-app{min-height:1274px}#mtx[data-full][data-tool="eq-trainer"] .mtx-app{min-height:692px}#mtx[data-full][data-tool="mixer"] .mtx-app{min-height:1503px}
@media (min-width:600px){#mtx[data-tool="beat-maker"] .mtx-app{min-height:618px}#mtx[data-tool="synth"] .mtx-app{min-height:1170px}#mtx[data-tool="sound-lab"] .mtx-app{min-height:870px}#mtx[data-tool="eq-trainer"] .mtx-app{min-height:557px}#mtx[data-tool="mixer"] .mtx-app{min-height:720px}#mtx[data-full][data-tool="beat-maker"] .mtx-app{min-height:915px}#mtx[data-full][data-tool="synth"] .mtx-app{min-height:1684px}#mtx[data-full][data-tool="sound-lab"] .mtx-app{min-height:1151px}#mtx[data-full][data-tool="eq-trainer"] .mtx-app{min-height:557px}#mtx[data-full][data-tool="mixer"] .mtx-app{min-height:1073px}}
@media (min-width:1024px){#mtx[data-tool="beat-maker"] .mtx-app{min-height:332px}#mtx[data-tool="synth"] .mtx-app{min-height:796px}#mtx[data-tool="sound-lab"] .mtx-app{min-height:605px}#mtx[data-tool="eq-trainer"] .mtx-app{min-height:441px}#mtx[data-tool="mixer"] .mtx-app{min-height:720px}#mtx[data-full][data-tool="beat-maker"] .mtx-app{min-height:563px}#mtx[data-full][data-tool="synth"] .mtx-app{min-height:1123px}#mtx[data-full][data-tool="sound-lab"] .mtx-app{min-height:865px}#mtx[data-full][data-tool="eq-trainer"] .mtx-app{min-height:441px}#mtx[data-full][data-tool="mixer"] .mtx-app{min-height:1073px}}
.mtx-play{min-width:120px}
.mtx-play svg{width:18px;height:18px}
.mtx-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 12px}
.mtx-h{font:700 15px var(--f-body);color:var(--ink-2);margin:0 0 8px}
.mtx-grid2{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 28px}
@container mtx (min-width:760px){.mtx-grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.mtx-box{padding:14px 14px 10px;border-radius:var(--r2);background:var(--sunk)}
.mtx-cv{display:block;width:100%;height:180px;border-radius:14px;background:var(--surface);touch-action:none}
.mtx-box .mtx-cv{background:var(--surface)}
.mtx-cap{margin:6px 0 0;font-size:13.5px;color:var(--ink-3);font-weight:600}
.mtx-read{display:flex;flex-wrap:wrap;gap:6px 22px;margin:10px 0 0}
.mtx-read div{display:flex;flex-direction:column;min-width:0}
.mtx-read b{font:700 22px/1.15 var(--f-display);color:var(--ink)}
.mtx-read div > span{font-size:13.5px;color:var(--ink-3);font-weight:600}

/* sliders: the value beside the label, and bl-drag (assets/css/bl-drag.css) under it; the range is its hidden model. Until
   bl-drag replaces it (loaded late on a page without it), the range keeps the control's 44 px box (CLS) */
.mtx-sl{min-width:0}
.mtx-sl-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.mtx-sl-top label{margin:0;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.mtx-sl-v{font:700 15px var(--f-body);color:var(--ink);white-space:nowrap}
.mtx-sl input[type=range]{display:block;width:100%;height:44px;margin:0}
.mtx-sls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:4px 18px}

/* chips and small buttons */
.mtx-seg button{display:inline-flex;align-items:center;gap:6px}
.mtx-seg button svg{width:30px;height:20px;flex:none}
.mtx-ib{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 10px;border:2px solid var(--rule-2);border-radius:12px;background:var(--surface);color:var(--ink);font:700 16px var(--f-body);cursor:pointer;touch-action:manipulation}
.mtx-ib:hover{border-color:var(--blue)}
.mtx-ib:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px}
.mtx-ib[aria-pressed="true"]{border-color:var(--study);background:var(--study-tint);color:var(--ink)}
.mtx-ib:disabled{opacity:.5;cursor:default}
.mtx-tempo{display:inline-flex;align-items:center;gap:6px}
.mtx-tempo output{min-width:3.4ch;text-align:center;font:700 22px var(--f-display);color:var(--ink)}
.mtx-tempo small{font:600 13px var(--f-body);color:var(--ink-3)}

/* the beat maker: tracks by sixteen steps (a desktop), or one track as four rows of four pads (a phone) */
.bm-grid{display:grid;gap:6px;direction:ltr}
.bm-row{display:grid;grid-template-columns:110px 44px minmax(0,1fr);gap:8px;align-items:center}
.bm-name{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;border:0;border-radius:12px;background:transparent;color:var(--ink);font:700 15px var(--f-body);cursor:pointer;text-align:start;direction:var(--pdir,ltr)}
.bm-name:hover{background:rgba(var(--ink-rgb),.06)}
.bm-name:focus-visible{outline:2px solid var(--study-ink)}
.bm-name i{flex:none;width:12px;height:12px;border-radius:4px;background:var(--lane)}
.bm-name.hit i{transform:scale(1.35)}
.bm-steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px}
.bm-steps .bm-s:nth-child(4n+1):not(:first-child){margin-inline-start:6px}
.bm-s{position:relative;min-height:44px;min-width:0;padding:0;border:0;border-radius:9px;background:rgba(var(--ink-rgb),.07);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .12s var(--ease-out),transform .1s var(--ease-out),box-shadow .12s var(--ease-out)}
.bm-s:nth-child(4n+1){background:rgba(var(--ink-rgb),.12)}
.bm-s:hover{box-shadow:inset 0 0 0 2px rgba(var(--ink-rgb),.25)}
.bm-s[aria-pressed="true"]{background:var(--lane)}
.bm-s[data-acc="1"]{box-shadow:inset 0 0 0 3px var(--surface),0 0 0 3px var(--lane)}
.bm-s:focus-visible{outline:3px solid var(--blue);outline-offset:1px;z-index:1}
.bm-s.now{box-shadow:0 0 0 2px var(--ink-3)}
.bm-s[aria-pressed="true"].now{transform:scale(1.08);box-shadow:0 0 0 3px var(--ink),0 4px 14px var(--lane)}
.bm-mute{min-height:44px}
.bm-row.muted .bm-steps{opacity:.35}
.bm-tracks{display:none}
.bm-pads{display:none}
/* phones: the track list, then the chosen track's sixteen steps as four beats of four */
.mtx-panel.pads .bm-grid{display:none}
.mtx-panel.pads .bm-tracks{display:grid;gap:6px;direction:ltr}
.mtx-panel.pads .bm-pads{display:grid;gap:8px;margin:14px 0 0;direction:ltr;align-content:start}
.mtx-panel.pads .bm-main{display:grid;gap:0 28px}
@container mtx (min-width:700px){.mtx-panel.pads .bm-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.mtx-panel.pads .bm-pads{margin:0}.mtx-panel.pads .bm-tracks{align-content:start}}
.bm-tr{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;align-items:center}
.bm-trb{display:grid;grid-template-columns:minmax(80px,auto) minmax(0,1fr);gap:10px;align-items:center;min-height:48px;padding:0 10px;border:2px solid transparent;border-radius:12px;background:rgba(var(--ink-rgb),.05);color:var(--ink);font:700 15px var(--f-body);cursor:pointer;text-align:start}
.bm-trb[aria-pressed="true"]{border-color:var(--lane);background:var(--surface)}
.bm-trb .bm-mini{display:grid;grid-template-columns:repeat(16,1fr);gap:2px;direction:ltr}
.bm-mini b{height:8px;border-radius:2px;background:rgba(var(--ink-rgb),.14)}
.bm-mini b.on{background:var(--lane)}
.bm-mini b.now{outline:2px solid var(--ink-3);outline-offset:0}
.bm-tr.muted .bm-mini{opacity:.35}
.bm-beat{display:grid;grid-template-columns:22px repeat(4,minmax(44px,1fr));gap:8px;align-items:center}
.bm-beat > span{font:700 14px var(--f-display);color:var(--ink-3);text-align:center}
.bm-beat .bm-s{min-height:58px;border-radius:14px}
.bm-beat .bm-s:nth-child(2){background:rgba(var(--ink-rgb),.12)}
.bm-beat .bm-s[aria-pressed="true"]{background:var(--lane)}
.bm-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:4px 22px;margin:16px 0 0}
.bm-pre{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.bm-undo{display:inline-flex;align-items:center;gap:10px;margin:10px 0 0;font-weight:600;color:var(--ink-2)}

/* the synth */
.sy-kb{margin:16px 0 0}
.sy-kb .mtk-kb{height:150px}
.sy-oct{display:inline-flex;align-items:center;gap:6px}
.sy-oct output{min-width:3.5ch;text-align:center;font:700 16px var(--f-body)}
.sy-env{height:120px}
.sy-filt{height:120px}

/* the vertical fader: a track, its fill, tick marks and a cap you can grab; the scale's numbers sit beside it */
.mtx-fd{position:relative;flex:none;width:44px;height:184px;cursor:ns-resize;touch-action:none;border-radius:12px}
.mtx-fd:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.mtx-fd-tr{position:absolute;left:50%;top:12px;bottom:12px;width:6px;margin-left:-3px;border-radius:3px;background:var(--mtx-track)}
.mtx-fd-fill{position:absolute;left:0;right:0;bottom:0;height:calc(var(--pf,.7) * 100%);border-radius:3px;background:var(--lane,var(--study))}
.mtx-fd-tk{position:absolute;left:8px;right:8px;height:1.5px;bottom:calc(12px + (100% - 24px) * var(--tp) - .75px);background:linear-gradient(to right,var(--ink-3) 0 9px,transparent 9px calc(100% - 9px),var(--ink-3) calc(100% - 9px));opacity:.55;pointer-events:none}
.mtx-fd-tk.zero{opacity:1;height:2px}
.mtx-fd-cap{position:absolute;left:3px;right:3px;height:24px;bottom:calc((100% - 24px) * var(--pf,.7));border-radius:7px;background:var(--surface);border:2px solid var(--ink-3);box-shadow:0 2px 5px rgba(6,14,26,.22);transition:transform .1s var(--ease-out)}
.mtx-fd-cap::after{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;margin-top:-1px;background:var(--ink-2)}
:root[data-theme="dark"] .mtx-fd-cap{background:#22385a;border-color:#9db3c9}
.mtx-fd.drag .mtx-fd-cap{transform:scale(1.08);border-color:var(--ink)}
.mtx-fd-scale{position:relative;flex:none;width:32px;height:184px;font:600 13px/1 var(--f-body);color:var(--ink-3);font-variant-numeric:tabular-nums}
.mtx-fd-scale span{position:absolute;right:0;bottom:calc(12px + (100% - 24px) * var(--tp) - 5px);white-space:nowrap}
.mtx-fd-scale span.zero{color:var(--ink);font-weight:800}

/* the knob: a dial of 52 px, a ±135° track, the coloured arc and a pointer; the value underneath */
.mtx-kn{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.mtx-kn-cap{font:600 12.5px var(--f-body);color:var(--ink-3);text-align:center}
.mtx-kn-dial{position:relative;width:52px;height:52px;border-radius:50%;cursor:ns-resize;touch-action:none;-webkit-tap-highlight-color:transparent}
.mtx-kn-dial svg{display:block;width:100%;height:100%;overflow:visible}
.mtx-kn-dial .kn-tr{stroke:var(--mtx-track)}
.mtx-kn-dial .kn-arc{stroke:var(--lane,var(--study))}
.mtx-kn-dial .kn-body{fill:var(--surface);stroke:var(--rule-2);stroke-width:1.5;filter:drop-shadow(0 1.5px 2px rgba(6,14,26,.2))}
:root[data-theme="dark"] .mtx-kn-dial .kn-body{fill:#22385a;stroke:#6b829d}
.mtx-kn-dial .kn-ptr{stroke:var(--ink)}
.mtx-kn-dial .kn-c{fill:var(--ink-3)}
.mtx-kn-dial:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.mtx-kn-dial:hover .kn-body{stroke:var(--blue)}
.mtx-kn-v{font:700 13.5px var(--f-body);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;min-height:1.3em;direction:ltr}
.mtx-kn-tip{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);padding:4px 8px;border-radius:8px;background:var(--navy);color:#fff;font:700 13px var(--f-body);font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s var(--ease-out);z-index:5;direction:ltr}
:root[data-theme="dark"] .mtx-kn-tip{background:#e9eef5;color:#0b1626}
.mtx-kn.drag .mtx-kn-tip{opacity:1}
.mtx-kns{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center}

/* the mixer */
.mx-field{height:260px}
.mx-strips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:16px 0 0}
.mx-strip{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 10px 10px;border-radius:var(--r2);background:var(--sunk);border:2px solid transparent;min-width:0;transition:opacity .15s var(--ease-out)}
.mx-strip.sel{border-color:var(--lane)}
.mx-strip h3{display:flex;align-items:center;justify-content:center;gap:6px;max-width:100%;margin:0;font:700 14.5px var(--f-body);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.mx-strip h3 i{flex:none;width:10px;height:10px;border-radius:3px;background:var(--lane)}
.mx-fdrow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;column-gap:6px;width:100%;direction:ltr}
/* the scale to the left, the fader on the strip's centre line, the meter to the right */
.mx-fdrow > *{grid-row:1}
.mx-fdrow > .mx-c1{grid-column:1;justify-self:end}
.mx-fdrow > .mx-c2{grid-column:2}
.mx-fdrow > .mx-c3{grid-column:3;justify-self:start}
.mx-meter{flex:none;width:8px;height:160px;margin-top:12px;border-radius:4px;background:var(--mtx-track);position:relative;overflow:hidden}
.mx-meter b{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--lane,var(--study));border-radius:4px}
.mx-stereo{display:flex;gap:6px}
.mx-meter.mst b{background:var(--ink-2)}
.mx-v{text-align:center;font:700 13.5px var(--f-body);color:var(--ink-2);min-height:1.3em;white-space:nowrap;font-variant-numeric:tabular-nums;direction:ltr}
.mx-stereo-w{display:flex;flex-direction:column;align-items:center;gap:4px}
.mx-lr{display:flex;gap:6px;font:700 13px/1 var(--f-body);color:var(--ink-3);direction:ltr}
.mx-lr span{width:6px;display:flex;justify-content:center}
.mx-meter.mst{width:6px}
.mx-ms{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
.mx-ms .mtx-ib{min-width:0;padding:0;font-size:14px}
.mx-ms .mtx-ib.mx-mute[aria-pressed="true"]{border-color:var(--gold);background:var(--gold);color:#3a2700}
.mx-ms .mtx-ib.mx-solo[aria-pressed="true"]{border-color:var(--study);background:var(--study);color:#fff}
:root[data-theme="dark"] .mx-ms .mtx-ib.mx-solo[aria-pressed="true"]{color:#04161c}
/* muted, or not soloed while another is: the strip dims (its buttons stay clear) */
.mx-strip.off > :not(.mx-ms){opacity:.38}
.mx-master{background:var(--sunk);--lane:var(--ink-2)}
.mx-master h3{color:var(--ink-2)}
@container mtx (max-width:640px){
  /* four strips side by side; the master below them, full width, with its stereo meter */
  .mx-strips{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .mx-master{grid-column:1 / -1}
  .mx-strip{padding:10px 4px 8px;gap:8px}
  .mx-strip:not(.mx-master) .mtx-fd-scale{display:none}
  .mx-strip h3{font-size:13px}
  .mx-strip h3 i{display:none}
  .mx-ms{grid-template-columns:minmax(44px,1fr);justify-items:stretch}
  .mx-fdrow{column-gap:3px}
}
/* the EQ trainer */
.eq-curve{height:220px}
.eq-ex .mtx-sls{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.eq-ans{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,128px),1fr));gap:8px;margin:14px 0 0}
.eq-ans button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:60px;padding:6px 8px;border:2px solid var(--rule-2);border-radius:14px;background:var(--surface);color:var(--ink);font:700 17px var(--f-display);cursor:pointer;touch-action:manipulation;transition:border-color .15s var(--ease-out),background-color .15s var(--ease-out),transform .1s var(--ease-out)}
.eq-ans button small{font:600 12.5px var(--f-body);color:var(--ink-3)}
.eq-ans button:hover:not(:disabled){border-color:var(--blue)}
.eq-ans button:focus-visible{outline:2px solid var(--study-ink);outline-offset:2px}
.eq-ans button.ok{border-color:var(--study);background:var(--study-tint)}
.eq-ans button.no{border-color:var(--warn-ink);background:rgba(var(--ink-rgb),.04)}
.eq-ans button:disabled{cursor:default}
.eq-score{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin:12px 0 0;font-weight:700;color:var(--ink-2)}
.eq-score b{font:700 20px var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.eq-fb{min-height:1.5em;margin:10px 0 0;font-weight:700;font-size:17px;color:var(--ink)}
.eq-fb.ok{color:var(--study-ink)}
.eq-bypass[aria-pressed="false"]{border-style:dashed}
.eq-dots{display:flex;gap:5px;margin:8px 0 0;direction:ltr}
.eq-dots i{width:14px;height:14px;border-radius:4px;background:rgba(var(--ink-rgb),.12)}
.eq-dots i.ok{background:var(--study)}
.eq-dots i.no{background:var(--ink-3);opacity:.55}
.eq-dots i.cur{box-shadow:0 0 0 2px var(--ink-3)}

/* the sound lab */
.sl-wave{height:220px}
.sl-harm{height:150px}
.sl-oct{display:inline-flex;gap:6px}

/* Try this */
.mtx-try{margin:16px 0 0;padding:4px 18px;border-radius:var(--r2);background:var(--surface);box-shadow:var(--shadow);transition:box-shadow .3s var(--ease-out)}
.mtx-try summary{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;font:700 17px var(--f-display);color:var(--ink);list-style:none}
.mtx-try summary::-webkit-details-marker{display:none}
.mtx-try summary::before{content:"";width:9px;height:9px;border-inline-end:2.5px solid var(--ink-3);border-bottom:2.5px solid var(--ink-3);transform:rotate(-45deg);transition:transform .2s var(--ease-out);margin-inline-end:2px}
[dir="rtl"] .mtx-try summary::before{transform:rotate(45deg)}
.mtx-try[open] summary::before{transform:rotate(45deg)}
[dir="rtl"] .mtx-try[open] summary::before{transform:rotate(-45deg)}
.mtx-try p{margin:0 0 12px;color:var(--ink-2);max-width:66ch}
.mtx-try-tick{display:none;width:22px;height:22px;border-radius:50%;background:var(--study)}
.mtx-try.done .mtx-try-tick{display:inline-block;background:var(--study) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat}
.mtx-try-msg{font-weight:700;color:var(--study-ink)!important}
.mtx-try-msg:empty{display:none}
.mtx-try.won{box-shadow:0 0 0 3px var(--study),var(--shadow)}

/* the full version: calm, no urgency */
.mtx-lock{margin:16px 0 0;padding:18px 20px;border-radius:var(--r2);background:var(--sunk)}
.mtx-lock h2{font-size:19px;margin:0 0 8px}
.mtx-lock p{margin:8px 0 0;color:var(--ink-2)}
.mtx-pro-list{margin:0;padding-inline-start:20px;color:var(--ink)}
.mtx-pro-list li{margin:3px 0}
.mtx-lock-act{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.mtx-lock-act .b{min-height:48px}
.mtx-lock-act{align-items:center;gap:6px 18px}
.mtx-lock-links{display:flex;flex-wrap:wrap;gap:0 18px}
.mtx-lock-links .b-text{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--study-ink)}
.mtx-pro{margin:18px 0 0;padding:14px 14px 12px;border-radius:var(--r2);border:2px solid var(--rule)}
.mtx-pro > h2{display:flex;align-items:center;gap:8px;font-size:16px;margin:0 0 10px;color:var(--ink)}

/* the "yes" moment: a soft ring that fades */
@keyframes mtxGlow{0%{box-shadow:0 0 0 0 rgba(13,154,167,.55)}100%{box-shadow:0 0 0 14px rgba(13,154,167,0)}}
.mtx-glow{animation:mtxGlow .8s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .mtx-glow{animation:none}
  .bm-s,.mtx-card,.mtx-try,.eq-ans button,.mtx-fd-cap,.mtx-kn-tip,.mx-strip{transition:none}
  .bm-s[aria-pressed="true"].now{transform:none}
  .bm-name.hit i{transform:none}
}

/* meters read green, amber, then the peak zone at the top (no red: the peak is the house purple); the zones sit at fixed
   heights (-12 dB and -3 dB on a scale from -48 to +3), so a rising level walks through them */
.mx-meter b,.mx-meter.mst b{background:linear-gradient(to top,var(--ok) 0 70.6%,var(--gold) 70.6% 88.2%,var(--play) 88.2%);background-size:100% 160px;background-position:bottom}

/* the "?" tips (MTXK.tip) */
.mtx-tip{position:relative;display:inline-flex}
.mtx-tip-b{display:inline-grid;place-items:center;width:44px;height:44px;margin:0 -8px;border:0;background:none;color:var(--study-ink);font:800 14px var(--f-body);cursor:pointer;border-radius:50%}
.mtx-tip-b::before{content:"";position:absolute;width:22px;height:22px;border-radius:50%;border:2px solid currentColor;opacity:.55}
.mtx-tip-b:hover::before,.mtx-tip-b[aria-expanded="true"]::before{opacity:1;background:var(--study-tint)}
.mtx-tip-b:focus-visible{outline:2px solid var(--study-ink);outline-offset:-4px}
.mtx-tip-pop{position:absolute;z-index:40;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);width:max-content;max-width:min(260px,calc(100vw - 40px));padding:10px 12px;border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px rgba(var(--ink-rgb),.12),0 10px 26px rgba(6,14,26,.2);font:500 14px/1.4 var(--f-body);text-align:start}
.mtx-tip-pop a{display:inline-block;margin-top:4px;color:var(--study-ink);font-weight:700}
:root[data-theme="dark"] .mtx-tip-pop{background:#1b2f4b}

/* the lesson card on the mixer page */
.mtx-lesson-card{display:inline-flex;align-items:center;gap:12px;min-height:56px;margin:12px 0 0;padding:6px 16px 6px 8px;border-radius:var(--r2);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);font-weight:700;text-decoration:none}
.mtx-lesson-card:hover{outline:2px solid var(--study);outline-offset:-2px}
.mtx-lesson-card:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.mtx-lc-art{display:grid;place-items:center;width:40px;height:52px;border-radius:10px;background:var(--sunk)}
.mtx-lc-art svg{width:24px;height:48px}

/* the channel strip drawing (the lesson and the card) */
.mtx-strip-svg .sv-bg{fill:var(--sunk);stroke:var(--rule-2);stroke-width:1.5}
.mtx-strip-svg .sv-tr,.mtx-strip-svg .sv-mt{fill:rgba(var(--ink-rgb),.15)}
.mtx-strip-svg .sv-fill{fill:var(--study)}
.mtx-strip-svg .sv-cap{fill:var(--surface);stroke:var(--ink-3);stroke-width:2}
.mtx-strip-svg .sv-capl{stroke:var(--ink-2);stroke-width:2}
.mtx-strip-svg .sv-ok{fill:var(--ok)}.mtx-strip-svg .sv-hot{fill:var(--gold)}
.mtx-strip-svg .sv-kn{fill:var(--surface);stroke:var(--rule-2);stroke-width:1.5}
.mtx-strip-svg .sv-arc{fill:none;stroke:var(--study);stroke-width:4;stroke-linecap:round}
.mtx-strip-svg .sv-ptr{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.mtx-strip-svg .sv-btn{fill:var(--surface);stroke:var(--rule-2);stroke-width:1.5}
.mtx-strip-svg .sv-btn.mu{fill:var(--gold);stroke:var(--gold)}
.mtx-strip-svg .sv-bt{font:800 14px var(--f-body);fill:var(--ink);text-anchor:middle}
.mtx-strip-svg .sv-call circle{fill:var(--navy)}
:root[data-theme="dark"] .mtx-strip-svg .sv-call circle{fill:#e9eef5}
.mtx-strip-svg .sv-call text{font:800 13px var(--f-body);fill:#fff;text-anchor:middle}
:root[data-theme="dark"] .mtx-strip-svg .sv-call text{fill:#0b1626}

/* the lesson (mtech-lesson.php), inside Learn's player */
.mtx-ln .mxl-unit{margin:0 0 4px;font-weight:700;color:var(--study-ink);font-size:14.5px}
.mtx-ln .mxl-lead{margin:8px 0 0;color:var(--ink-2)}
.mtx-ln .la-sec{scroll-margin-top:80px}
.mxl-h3{font-size:18px;margin:22px 0 6px}
.mxl-strip{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px 28px;align-items:center;margin:12px 0 0}
.mxl-strip .mtx-strip-svg{display:block;width:150px;min-width:150px;max-width:none;height:300px}
.mxl-legend{margin:0;padding:0;list-style:none;counter-reset:lg;display:grid;gap:12px}
.mxl-legend li{counter-increment:lg;display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;line-height:1.45;scroll-margin-top:90px;border-radius:12px}
.mxl-legend li::before{content:counter(lg);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font:800 13px var(--f-body)}
:root[data-theme="dark"] .mxl-legend li::before{background:#e9eef5;color:#0b1626}
.mxl-legend li:target{outline:3px solid var(--study);outline-offset:6px}
@media (max-width:520px){.mxl-strip{grid-template-columns:110px minmax(0,1fr);gap:14px}.mxl-strip .mtx-strip-svg{width:110px;min-width:110px;height:220px}}
.mxl-tasks{list-style:none;margin:8px 0 14px;padding:0;display:grid;gap:8px}
.mxl-tasks li{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-radius:12px;background:var(--sunk);font-weight:600;transition:background-color .2s var(--ease-out)}
.mxl-tick{flex:none;width:24px;height:24px;border-radius:50%;border:2.5px solid var(--ink-3)}
.mxl-tasks li.done{background:var(--study-tint)}
.mxl-tasks li.done .mxl-tick{border-color:var(--study);background:var(--study) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat}
.mxl-mixer{margin:0;box-shadow:0 0 0 1px var(--rule)}
.mxl-open{margin:10px 0 0;font-weight:700}
.mxl-open a{color:var(--study-ink)}
.mxl-db{margin:14px 0;padding:14px 16px;border-radius:var(--r2);background:var(--sunk)}
.mxl-db-h{display:grid;grid-template-columns:70px minmax(0,1fr) 54px;gap:12px;font:700 12.5px var(--f-body);color:var(--ink-3);margin:0 0 6px}
.mxl-db-h span:last-child{grid-column:2 / 4}
.mxl-db-r{display:grid;grid-template-columns:70px minmax(0,1fr) 54px;gap:12px;align-items:center;min-height:30px;direction:ltr}
.mxl-db-r b{font:700 15px var(--f-body);font-variant-numeric:tabular-nums;text-align:end}
.mxl-db-r.zero b{color:var(--study-ink)}
.mxl-db-bar{height:14px;border-radius:7px;background:rgba(var(--ink-rgb),.08);overflow:hidden}
.mxl-db-bar i{display:block;height:100%;width:var(--w);border-radius:7px;background:var(--study);transform-origin:left;animation:mxlGrow .8s var(--ease-out) both}
.mxl-db-x{font:700 14px var(--f-body);color:var(--ink-2)}
@keyframes mxlGrow{from{transform:scaleX(0)}to{transform:none}}
.mxl-db figcaption,.mxl-loud figcaption,.mxl-clip figcaption{margin:8px 0 0;font-size:13.5px;font-weight:600;color:var(--ink-3)}
.mxl-loud{margin:12px 0;padding:14px 16px;border-radius:var(--r2);background:var(--sunk)}
.mxl-loud-bars{display:flex;justify-content:space-around;align-items:flex-end;height:140px;direction:ltr}
.mxl-loud-bars div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.mxl-loud-bars span{width:46px;height:var(--h);border-radius:10px 10px 4px 4px;background:var(--blue)}
.mxl-loud-bars b{font:700 13px var(--f-body);color:var(--ink-2)}
.mxl-field{margin:12px 0;padding:12px;border-radius:var(--r2);background:var(--sunk)}
.mxl-field svg{display:block;width:100%;max-width:520px;margin:0 auto}
.mxl-field .f-room{fill:rgba(var(--ink-rgb),.06)}
.mxl-field .f-spk{fill:var(--surface);stroke:var(--ink-3);stroke-width:2}
.mxl-field .f-cone{fill:none;stroke:var(--ink-3);stroke-width:2}
.mxl-field .f-you{fill:var(--ink-2)}
.mxl-field .f-t{font:700 12px var(--f-body);fill:var(--ink-3);text-anchor:middle}
.mxl-field .f-dot.c,.mxl-field .f-dot.c2{fill:var(--study)}
.mxl-field .f-dot.side{fill:var(--blue)}
.mxl-field .f-dot.move{fill:var(--gold);animation:mxlPan 4.5s var(--ease-io) infinite alternate}
@keyframes mxlPan{0%{transform:translateX(-110px)}50%{transform:none}100%{transform:translateX(110px)}}
.mxl-field figcaption{margin:8px 0 0;font-size:14px;font-weight:600;color:var(--ink-2);line-height:1.8}
.mxl-field .k{display:inline-block;width:12px;height:12px;border-radius:50%;margin-inline-end:8px;vertical-align:-1px}
.mxl-field .k.c{background:var(--study)}.mxl-field .k.side{background:var(--blue)}
.mxl-law{padding:12px 16px;background:var(--study-tint);border-radius:12px}
.mxl-meter-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:14px;margin:12px 0}
@media (max-width:620px){.mxl-meter-row{grid-template-columns:minmax(0,1fr)}}
.mxl-meter,.mxl-clip{margin:0;padding:14px 16px;border-radius:var(--r2);background:var(--sunk)}
.mxl-meter{display:flex;gap:18px;align-items:stretch}
.mxl-mbar{position:relative;flex:none;width:18px;height:170px;border-radius:9px;overflow:hidden;display:flex;flex-direction:column}
.mxl-mbar i{display:block}.mxl-mbar i.pk{height:12%;background:var(--play)}.mxl-mbar i.hot{height:17.6%;background:var(--gold)}.mxl-mbar i.ok{flex:1;background:var(--ok)}
.mxl-mbar .mxl-level{position:absolute;left:0;right:0;top:0;background:var(--sunk);height:40%;animation:mxlLevel 2.4s var(--ease-io) infinite alternate}
@keyframes mxlLevel{0%{height:60%}60%{height:28%}100%{height:18%}}
.mxl-mbar .mxl-ceil{position:absolute;left:-2px;right:-2px;top:6%;height:2px;background:var(--ink);z-index:1}
.mxl-zones{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between;font-size:14px;font-weight:600;color:var(--ink-2)}
.mxl-zones .k{display:inline-block;width:12px;height:12px;border-radius:3px;margin-inline-end:8px;vertical-align:-1px}
.mxl-zones .k.pk{background:var(--play)}.mxl-zones .k.hot{background:var(--gold)}.mxl-zones .k.ok{background:var(--ok)}.mxl-zones .k.ceil{height:3px;background:var(--ink);vertical-align:3px}
.mxl-clip svg{display:block;width:100%;height:auto}
.mxl-clip .c-ceil{stroke:var(--ink);stroke-width:2;stroke-dasharray:6 5}
.mxl-clip .c-ghost{fill:none;stroke:var(--ink-3);stroke-width:2;stroke-dasharray:3 5;opacity:.6}
.mxl-clip .c-wave{fill:none;stroke:var(--play);stroke-width:3.5;stroke-linejoin:round}
.mxl-ms{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;margin:12px 0 0}
.mxl-ms-c{padding:14px 16px;border-radius:var(--r2);background:var(--sunk)}
.mxl-ms-c p{margin:10px 0 0;line-height:1.5}
.mxl-mini{display:flex;gap:8px;height:64px;align-items:flex-end;direction:ltr}
.mxl-mini i{flex:1;height:100%;border-radius:8px;background:var(--study);opacity:.9}
.mxl-mini i.off{opacity:.18}
.mxl-mini:not(.solo) i.off{background:var(--gold);opacity:.35}
.mxl-mini.solo i.on{background:var(--study);box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--study)}
.mxl-nextl{margin:8px 0 0;padding-inline-start:22px;display:grid;gap:8px}
.mxl-nextl small{color:var(--ink-3);font-weight:600}
.mxl-nextl a{color:var(--study-ink);font-weight:700;margin-inline-start:6px}
.mxl-q{padding-top:8px}
.mxl-done-in{max-width:520px;margin:40px auto;text-align:center}
.mxl-done-mk{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--study);color:#fff}
.mxl-done-mk svg{width:40px;height:40px}
.mxl-done-in h1{margin:14px 0 6px}
.mxl-done-score{font-size:18px;color:var(--ink-2);margin:0}
.mxl-done-xp{font:800 22px var(--f-display);color:var(--study-ink);margin:8px 0 0}
.mxl-done-act{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 0}
@media (prefers-reduced-motion:reduce){.mxl-db-bar i,.mxl-field .f-dot.move,.mxl-mbar .mxl-level{animation:none}.mxl-tasks li{transition:none}}
.mxl-units{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin:12px 0}
.mxl-unit-c{padding:14px 16px;border-radius:var(--r2);background:var(--sunk)}
.mxl-unit-c b{display:block;font:800 24px/1.1 var(--f-display);color:var(--study-ink)}
.mxl-unit-s{display:inline-block;margin:6px 0 0;padding:2px 8px;border-radius:6px;background:var(--surface);font:700 13px var(--f-body);color:var(--ink-2);font-variant-numeric:tabular-nums}
.mxl-unit-c p{margin:8px 0 0;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.mxl-gain{margin:12px 0;padding:14px 16px;border-radius:var(--r2);background:var(--sunk)}
.mxl-gain-row{display:flex;align-items:flex-end;justify-content:space-between;gap:6px}
.mxl-gs{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;flex:1}
.mxl-gs-m{position:relative;width:16px;height:96px;border-radius:8px;background:rgba(var(--ink-rgb),.12);overflow:hidden}
.mxl-gs-m i{position:absolute;left:0;right:0;bottom:0;height:var(--h);background:linear-gradient(to top,var(--ok) 0 70.6%,var(--gold) 70.6% 88.2%,var(--play) 88.2%);background-size:100% 96px;background-position:bottom}
.mxl-gs b{font:700 12.5px var(--f-body);color:var(--ink-2);text-align:center;overflow-wrap:anywhere}
.mxl-gs-ar{flex:none;width:18px;height:2px;margin-bottom:60px;background:var(--ink-3);position:relative}
.mxl-gs-ar::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--ink-3);border-right:0}
.mxl-gain figcaption{margin:10px 0 0;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.mxl-mask{margin:12px 0;padding:12px 16px;border-radius:var(--r2);background:var(--sunk)}
.mxl-mask svg{display:block;width:100%;max-width:520px;margin:0 auto}
.mxl-mask .m-base{stroke:var(--ink-3);stroke-width:1.5}
.mxl-mask .m-a{fill:rgba(13,154,167,.25);stroke:var(--study);stroke-width:3}
.mxl-mask .m-b{fill:none;stroke:var(--gold);stroke-width:3;stroke-dasharray:6 5}
.mxl-mask .m-hid{fill:rgba(var(--ink-rgb),.08);stroke:none}
.mxl-mask .m-t{font:700 12.5px var(--f-body);fill:var(--study-ink);text-anchor:middle}
.mxl-mask .m-t.b{fill:var(--ink-2);text-anchor:end}
.mxl-mask .m-arrow{stroke:var(--ink-3);stroke-width:1.5}
.mxl-mask figcaption{margin:6px 0 0;font-size:13.5px;font-weight:600;color:var(--ink-3)}
.mtx-hub-h{font-size:19px;margin:22px 0 0}
.mtx-cards .panel{margin:0}

/* the hub's lesson list, and a lesson's number on a tool page's card */
.mtx-lessons{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
.mtx-lessons .mtx-lesson-card{display:flex;margin:0;width:100%}
.mtx-lessons .mtx-lesson-card .mtx-done{margin-inline-start:auto;font-size:13.5px;color:var(--study-ink)}
.mtx-lc-n{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:var(--study-tint);color:var(--study-ink);font:800 16px var(--f-display)}
.mtx-lc-art .mtx-lc-n{background:none}

/* the lessons' figures (mtech-lessons/*.php): drawn from the numbers, in the site's tokens */
.mxl-fig{margin:12px 0;padding:14px 16px;border-radius:var(--r2);background:var(--sunk)}
.mxl-fig svg{display:block;width:100%;height:auto;overflow:visible}
.mxl-fig figcaption{margin:8px 0 0;font-size:14px;font-weight:600;color:var(--ink-2);line-height:1.45}
.mxl-t{font:600 13px var(--f-body);fill:var(--ink-2)}
.mxl-t.s{font-size:11.5px;fill:var(--ink-3)}
.mxl-t.b{font-weight:800;fill:var(--study-ink)}
.mxl-t.big{font:800 22px var(--f-display);fill:var(--ink-3)}
.mxl-axis{stroke:rgba(var(--ink-rgb),.25);stroke-width:1.5;fill:none}
.mxl-guide{stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:4 4;fill:none}
.mxl-brk{stroke:var(--ink-2);stroke-width:2;fill:none}
.mxl-line{stroke:var(--study);stroke-width:2.8;fill:none;stroke-linejoin:round;stroke-linecap:round}
.mxl-line2{stroke:var(--blue);stroke-width:2.4;fill:none;stroke-linejoin:round;stroke-linecap:round}
.mxl-line2.dash{stroke-dasharray:5 5;opacity:.6}
.mxl-fill{fill:rgba(13,154,167,.16);stroke:none}
.mxl-mark{stroke:var(--study-ink);stroke-width:2.5}
.mxl-tick{stroke:var(--ink-3);stroke-width:1.5}
.mxl-blk rect{fill:var(--surface);stroke:var(--study);stroke-width:2.5}
.mxl-blk.mod rect{stroke:var(--play);stroke-dasharray:5 4}
.mxl-blk.out rect{stroke:var(--ink-3)}
.mxl-blk text{font:700 14px var(--f-body);fill:var(--ink);text-anchor:middle}
.mxl-aud{stroke:var(--study);stroke-width:2.5;fill:none}
.mxl-ctl{stroke:var(--play);stroke-width:2;stroke-dasharray:5 4;fill:none}
.mxl-arrh{fill:var(--ink-2)}
.mxl-cards3,.mxl-cards4,.mxl-cards5{display:grid;gap:10px;margin:12px 0}
.mxl-cards3{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.mxl-cards4{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.mxl-cards5{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.mxl-wcard{margin:0;padding:10px 12px;border-radius:var(--r2);background:var(--sunk)}
.mxl-wcard svg{display:block;width:100%;height:auto}
.mxl-wcard figcaption{margin:6px 0 0;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.mxl-wcard figcaption b{color:var(--ink)}
.mxl-bar{fill:var(--blue)}.mxl-bar.f{fill:var(--study)}
.mxl-air path{stroke:var(--ink-3);stroke-width:2;opacity:.75}
@keyframes mxlAir{from{transform:translateX(calc(-6px - var(--s,0px)))}to{transform:translateX(calc(6px - var(--s,0px)))}}
@media (prefers-reduced-motion:no-preference){.mxl-air path{animation:mxlAir 1.2s cubic-bezier(.37,0,.63,1) infinite alternate;animation-delay:var(--d);transform-box:fill-box}}
.mxl-chips{display:flex;flex-wrap:wrap;gap:6px 10px;margin:10px 0 0}
.mxl-chips > span{padding:4px 10px;border-radius:8px;background:var(--surface);font-size:13.5px;color:var(--ink-2)}
.mxl-chips b{color:var(--ink)}
.mxl-band{fill:rgba(13,154,167,.22)}.mxl-band.b{fill:rgba(58,155,232,.22)}
.mxl-spl{display:grid;gap:6px}
.mxl-spl-r{display:grid;grid-template-columns:62px minmax(0,1fr) minmax(0,1.3fr);gap:10px;align-items:center;font-size:14px;color:var(--ink-2)}
.mxl-spl-r b{font:700 14px var(--f-body);font-variant-numeric:tabular-nums;color:var(--ink);text-align:end}
.mxl-spl-bar{height:12px;border-radius:6px;background:rgba(var(--ink-rgb),.08);overflow:hidden;direction:ltr}
.mxl-spl-bar i{display:block;height:100%;width:var(--w);background:var(--ok);border-radius:6px}
.mxl-spl-r.hot .mxl-spl-bar i{background:var(--gold)}.mxl-spl-r.pk .mxl-spl-bar i{background:var(--play)}
@media (max-width:520px){.mxl-spl-r{grid-template-columns:52px minmax(0,1fr)}.mxl-spl-r > span:last-child{grid-column:1 / -1;margin:-4px 0 4px}}
.mxl-reg{fill:rgba(var(--ink-rgb),.04)}.mxl-reg.alt{fill:rgba(var(--ink-rgb),.09)}
.mxl-ibar{fill:var(--study)}
.mxl-cell{fill:rgba(var(--ink-rgb),.08)}.mxl-cell.b{fill:rgba(var(--ink-rgb),.14)}
.mxl-cell.on.k{fill:var(--study)}.mxl-cell.on.s{fill:var(--blue)}.mxl-cell.on.h{fill:color-mix(in srgb,var(--study) 45%,var(--surface))}
.mxl-cell.hi{stroke:var(--study-ink);stroke-width:3}
.mxl-dot{fill:var(--study)}.mxl-dot.off{fill:var(--blue)}.mxl-dot.b.off{fill:var(--gold)}
.mxl-vel{fill:var(--blue);opacity:.7}.mxl-vel.acc{fill:var(--study);opacity:1}

}

/* ---- the lessons, one idea each (owner, 12 Oct: clearer text, bigger diagrams, no collisions, less at once) ---- */
.mtx-ln .lp-stage{padding-bottom:140px}
.mtx-ln .la-head h1{margin-bottom:4px}
.mxl-intro{max-width:60ch}
.mxl-intro p,.mtx-ln .lp-prose p{font-size:17.5px;line-height:1.6;color:var(--ink);max-width:60ch}
.mxl-intro .mxl-lead,.mtx-ln > .lp .mxl-lead{font:600 20px/1.45 var(--f-display);color:var(--ink);margin:6px 0 14px}
.mxl-big{margin:22px 0;padding:18px 18px 14px}
.mxl-big figcaption{font-size:15px;margin-top:12px}
.mxl-plain{background:none;padding:0}
.mxl-plain > figcaption{padding:0 4px}
.mxl-inner{margin:12px 0 0;background:var(--sunk)}
.mxl-wcard h3{margin:0 0 6px;font:700 16px var(--f-display);color:var(--ink)}
.mxl-wcard p{margin:6px 0 0;font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.mxl-fig-h{margin:14px 0 6px;font:700 16px var(--f-display);color:var(--ink)}
.mxl-fig-h:first-child{margin-top:0}
.mxl-ldr{stroke:var(--ink-2);stroke-width:1.5;fill:none}
.mxl-pt{fill:var(--surface);stroke:var(--ink-2);stroke-width:2}
.mxl-sep{stroke:rgba(var(--ink-rgb),.18);stroke-width:1;stroke-dasharray:3 4;fill:none}
.mxl-line.bold{stroke-width:3.6}
.mxl-t.in{font-weight:700;fill:var(--ink)}
.mxl-t.in .mxl-t.s,.mxl-t.in tspan{font-weight:600;fill:var(--ink-2)}
.mxl-t.in-w{font:800 15px var(--f-display);fill:#fff}
:root[data-theme="dark"] .mxl-t.in-w{fill:#04161c}
.mxl-band{fill:rgba(13,154,167,.2)}.mxl-band.b{fill:rgba(58,155,232,.2)}
.mxl-dot.off.sw{fill:var(--blue)}
.mxl-spl-r{grid-template-columns:70px minmax(0,1fr) minmax(0,1.2fr);font-size:15.5px;min-height:34px}
.mxl-spl-r b{font-size:15.5px}
.mxl-spl-bar{height:16px;border-radius:8px}
.mxl-spl-bar i{background:var(--study);border-radius:8px}
.mxl-spl-r.hot .mxl-spl-bar i{background:var(--blue)}
.mxl-maths{margin:6px 0 18px;padding:2px 16px;border-radius:var(--r2);background:var(--sunk);max-width:60ch}
.mxl-maths summary{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;font:700 16px var(--f-display);color:var(--ink);list-style:none}
.mxl-maths summary::-webkit-details-marker{display:none}
.mxl-maths summary::before{content:"";width:8px;height:8px;border-inline-end:2.5px solid var(--ink-3);border-bottom:2.5px solid var(--ink-3);transform:rotate(-45deg);transition:transform .2s var(--ease-out)}
[dir="rtl"] .mxl-maths summary::before{transform:rotate(45deg)}
.mxl-maths[open] summary::before{transform:rotate(45deg)}
.mxl-maths ul{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:6px}
.mxl-maths li{font:600 16px var(--f-mono);color:var(--ink);text-align:start}
/* the try-it is the hero: as wide as the tools' own pages */
.mxl-try{width:min(1180px,calc(100vw - 32px));margin-inline-start:calc(50% - min(590px,calc(50vw - 16px)));margin-top:28px}
.mxl-try > h2{max-width:none}
.mxl-try .mxl-tasks{max-width:none}
/* the end: no indent, the button is pinned in the bottom bar */
.mxl-end{margin:30px 0 8px;padding:18px 20px;border-radius:var(--r2);background:var(--study-tint)}
.mxl-end h2{margin:0 0 6px;font-size:20px}
.mxl-end p{margin:0;font-size:16.5px;color:var(--ink-2)}
.mtx-ln .lp-foot .lp-actions{justify-content:center}
.mtx-ln .lp-foot #mxlStart{min-width:min(100%,320px)}
/* the unit: dots in the bar; the list with the current lesson filled */
.mxl-dots{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 6px;text-decoration:none;flex-wrap:nowrap;overflow:hidden}
.mxl-dots i{flex:none;width:9px;height:9px;border-radius:50%;background:rgba(var(--ink-rgb),.18)}
.mxl-dots i.done{background:var(--study)}
.mxl-dots i.cur{width:12px;height:12px;background:var(--surface);box-shadow:0 0 0 3px var(--study)}
.mxl-dots i.cur.done{background:var(--study)}
@media (max-width:520px){.mxl-dots{gap:4px}.mxl-dots i{width:7px;height:7px}.mxl-dots i.cur{width:10px;height:10px}}
.mxl-nextl{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.mxl-nextl li{display:flex;align-items:center;gap:12px;min-height:46px;padding:4px 10px;border-radius:12px}
.mxl-nextl .n{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:rgba(var(--ink-rgb),.08);font:700 13.5px var(--f-body);color:var(--ink-2)}
.mxl-nextl li.done .n{background:var(--study);color:#fff}
:root[data-theme="dark"] .mxl-nextl li.done .n{color:#04161c}
.mxl-nextl .t{font-weight:700;color:var(--study-ink);text-decoration:none}
.mxl-nextl a.t:hover{text-decoration:underline}
.mxl-nextl li.cur{background:var(--study-tint)}
.mxl-nextl li.cur .t{color:var(--ink)}
.mxl-nextl li.cur .n{background:var(--study);color:#fff}
.mxl-nextl .here{margin-inline-start:auto;font-size:13.5px;font-weight:700;color:var(--study-ink)}
/* the bottom bar sits at the end of the lesson's flow and sticks to the bottom of the screen while reading */
.mtx-ln .lp-foot{position:sticky;bottom:0}
.mtx-ln .lp-stage{padding-bottom:24px}

.mxl-fig svg.mxl-grid{max-width:720px;margin:0 auto}
.mxl-fig-h{max-width:720px;margin-inline:auto}

/* ---- figures, polished (owner, 12 Oct: simple, nice, professional) ---- */
.mtx-ln{--mxl-reg1:rgba(var(--ink-rgb),.035);--mxl-reg2:rgba(var(--ink-rgb),.085)}
.mxl-fig figcaption,.mxl-big figcaption,.mxl-plain > figcaption{margin:12px 0 0;padding:0;font:500 14.5px/1.45 var(--f-body);color:var(--ink-3)}
.mxl-line.thick{stroke-width:3}
.mxl-shape{display:flex;flex-direction:column}
.mxl-shape h3{font:700 17px var(--f-display);margin:0 0 6px}
.mxl-shape svg{flex:1;min-height:80px}
.mxl-shape p{margin:6px 0 0;font-size:14.5px;line-height:1.35;color:var(--ink-2)}
.mxl-fig-h{font:700 17px var(--f-display);color:var(--ink);margin:18px auto 6px}
.mxl-cell{fill:rgba(var(--ink-rgb),.045)}.mxl-cell.b{fill:rgba(var(--ink-rgb),.085)}
.mxl-beat{fill:color-mix(in srgb,var(--study) 26%,var(--surface));stroke:color-mix(in srgb,var(--study) 55%,transparent);stroke-width:1.5}
.mxl-stp{fill:color-mix(in srgb,var(--study) 8%,var(--surface));stroke:color-mix(in srgb,var(--study) 40%,transparent);stroke-width:1.5}
/* numbered markers in a figure, and the key under it (HTML, so it wraps) */
.mxl-num circle{fill:var(--surface);stroke:var(--study-ink);stroke-width:2.5}
.mxl-num text{font:800 16px var(--f-body);fill:var(--study-ink);text-anchor:middle}
.mxl-key{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px;color:var(--ink)}
.mxl-key li{display:flex;align-items:center;gap:8px}
.mxl-sw{flex:none;display:inline-block;width:26px;height:4px;border-radius:2px;background:var(--study)}
.mxl-sw.line2{background:var(--blue)}
.mxl-sw.dash{background:repeating-linear-gradient(to right,var(--blue) 0 5px,transparent 5px 9px);opacity:.7}
.mxl-sw.num{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface);border:2.5px solid var(--study-ink);color:var(--study-ink);font:800 13px var(--f-body)}
.mxl-sw.k,.mxl-sw.s,.mxl-sw.h,.mxl-sw.beat,.mxl-sw.step{width:18px;height:18px;border-radius:5px}
.mxl-sw.k{background:var(--study)}.mxl-sw.s{background:var(--blue)}.mxl-sw.h{background:color-mix(in srgb,var(--study) 45%,var(--surface))}
.mxl-sw.beat{background:color-mix(in srgb,var(--study) 26%,var(--surface));border:1.5px solid color-mix(in srgb,var(--study) 55%,transparent)}
.mxl-sw.step{background:color-mix(in srgb,var(--study) 8%,var(--surface));border:1.5px solid color-mix(in srgb,var(--study) 40%,transparent)}
/* rows: a name and its picture (the name above it on a phone) */
.mxl-rows{display:grid;gap:10px}
.mxl-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center}
.mxl-row svg{display:block;width:100%;height:auto}
.mxl-rl{display:flex;flex-direction:column;gap:2px}
.mxl-rl b{font:700 15.5px var(--f-body);color:var(--ink)}
.mxl-rl span{font-size:13.5px;color:var(--ink-3);font-weight:600}
.mxl-row.sum{padding-top:10px;border-top:1px dashed rgba(var(--ink-rgb),.2)}
.mxl-row.sum .mxl-rl b{color:var(--study-ink)}
@media (max-width:560px){.mxl-row{grid-template-columns:minmax(0,1fr);gap:4px}}
/* the spectrum, in HTML */
.mxl-spec-grid{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 14px;align-items:center}
.mxl-spec-h{display:grid;font:700 12.5px var(--f-body);color:var(--ink-3);text-align:center;align-items:end}
.mxl-spec-h span{padding:0 1px;line-height:1.2;overflow-wrap:anywhere}
.mxl-spec-l{font:700 15px var(--f-body);color:var(--ink)}
.mxl-spec-tr{position:relative;height:26px;border-radius:6px}
.mxl-spec-tr i{position:absolute;top:4px;bottom:4px;border-radius:9px;background:var(--study)}
.mxl-spec-ax{position:relative;height:18px;font:600 12.5px var(--f-body);color:var(--ink-3)}
.mxl-spec-ax span{position:absolute;transform:translateX(-50%);white-space:nowrap}
@media (max-width:560px){
  .mxl-spec-grid{grid-template-columns:minmax(0,1fr);gap:2px}
  .mxl-spec-grid > .mxl-spec-l:empty{display:none}
  .mxl-spec-l{margin-top:8px;font-size:14px}
  .mxl-spec-h{font-size:11px}
}
/* phones: the drawings scale to the column, so their words grow to stay readable */
@media (max-width:620px){
  .mxl-fig svg .mxl-t{font-size:22px}
  .mxl-fig svg .mxl-t.s{font-size:20px}
  .mxl-fig svg .mxl-t.big{font-size:32px}
  .mxl-fig svg .mxl-t.alt{display:none}
  .mxl-num text{font-size:20px}
  .mxl-num circle{r:18px}
  .mxl-row svg .mxl-line,.mxl-row svg .mxl-line2{stroke-width:3.4}
  .mxl-big{padding:14px 12px 12px}
}

/* ---- the stepped lessons (coordinator, 12 Oct: like the app's Code lessons; one step on screen at a time) ---- */
.mxl-top{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px}
.mxl-seg{display:flex;gap:6px;min-width:0}
.mxl-sg{flex:1;height:8px;border-radius:4px;background:rgba(var(--ink-rgb),.12);overflow:hidden}
.mxl-sg i{display:block;height:100%;background:var(--study);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
[dir="rtl"] .mxl-sg i{transform-origin:right}
.mxl-menu{position:relative}
.mxl-menu-b{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer}
.mxl-menu-b:hover,.mxl-menu-b[aria-expanded="true"]{background:rgba(var(--ink-rgb),.08);color:var(--ink)}
.mxl-menu-b:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.mxl-menu-pop{position:absolute;z-index:50;top:calc(100% + 8px);inset-inline-end:0;width:min(340px,calc(100vw - 24px));max-height:min(70vh,560px);overflow:auto;padding:14px 12px 10px;border-radius:var(--r2);background:var(--surface);box-shadow:0 0 0 1px rgba(var(--ink-rgb),.12),0 16px 40px rgba(6,14,26,.22)}
:root[data-theme="dark"] .mxl-menu-pop{background:#1b2f4b}
.mxl-menu-h{margin:0 6px 8px;font:700 15px var(--f-display);color:var(--ink)}
.mxl-menu-f{margin:8px 6px 4px;font-size:14.5px}
.mxl-menu-f a{color:var(--study-ink);font-weight:700}
.mxl-menu .mxl-nextl{margin:0}
.mxl-menu .mxl-nextl li{min-height:44px}
.mxl-steps .mxl-step{animation:mxlIn .28s var(--ease-out)}
@keyframes mxlIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mxl-steps .mxl-step{animation:none}.mxl-sg i{transition:none}}
.mxl-step > h2{margin:6px 0 12px}
.mxl-steps .mxl-lead{font:600 20px/1.45 var(--f-display);color:var(--ink);margin:6px 0 10px;max-width:60ch}
.mxl-more{margin:14px 0 0;padding:2px 16px;border-radius:var(--r2);background:var(--sunk);max-width:none}
.mxl-more > summary{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;font:700 16px var(--f-display);color:var(--ink);list-style:none}
.mxl-more > summary::-webkit-details-marker{display:none}
.mxl-more > summary::before{content:"";width:8px;height:8px;border-inline-end:2.5px solid var(--ink-3);border-bottom:2.5px solid var(--ink-3);transform:rotate(-45deg);transition:transform .2s var(--ease-out)}
[dir="rtl"] .mxl-more > summary::before{transform:rotate(45deg)}
.mxl-more[open] > summary::before{transform:rotate(45deg)}
.mxl-more p{font-size:16.5px;line-height:1.6;max-width:60ch}
.mxl-more h3{margin:14px 0 6px;font-size:16px}
.mxl-mathl{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:6px}
.mxl-mathl li{font:600 16px var(--f-mono);color:var(--ink);text-align:start}
/* the pinned bar: Back on the left, the primary button always in the same place */
.mtx-ln .mxl-acts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:10px;max-width:640px;margin:0 auto;width:100%}
.mtx-ln .mxl-acts .mxl-primary,.mtx-ln .mxl-acts .lp-btn.go{grid-column:2;min-width:0;width:100%}
.mtx-ln .mxl-acts .mxl-back{grid-column:1;min-width:0;width:100%}
.mtx-ln .mxl-acts .mxl-back[hidden]{display:block;visibility:hidden}
.mtx-ln .mxl-acts:has(> .lp-btn.go:not(.mxl-primary):not([hidden])){grid-template-columns:minmax(0,1fr)}
.mtx-ln .mxl-acts:has(> .lp-btn.go:not(.mxl-primary):not([hidden])) .lp-btn.go{grid-column:1}
.mtx-ln .mxl-acts:has(> .lp-btn.go:not(.mxl-primary):not([hidden])) .mxl-back{display:none}
/* the try-it: tasks as a checklist above the tool, the tool full width */
.mxl-try{width:min(1180px,calc(100vw - 32px))}
.mxl-tasks li{min-height:48px;font-size:16px}
/* EQ shapes: one big card, five chips redraw the curve */
.mxl-shapes{margin:16px 0;padding:16px;border-radius:var(--r2);background:var(--sunk)}
.mxl-shapes .mt-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.mxl-shapes .mt-chips button{min-height:48px;padding:0 6px;font-size:15px}
@media (max-width:560px){.mxl-shapes .mt-chips{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mxl-shape-c{margin:12px 0 0;padding:14px;border-radius:14px;background:var(--surface)}
.mxl-shape-c svg{display:block;width:100%;height:auto}
.mxl-shape-c h3{margin:0 0 4px;font:700 18px var(--f-display)}
.mxl-shape-c p{margin:8px 0 0;font-size:16px;color:var(--ink-2)}
/* phones: drawings scale with the column; their words stay 13 px or more */
@media (max-width:620px){
  .mxl-fig svg .mxl-t,.mxl-shapes svg .mxl-t{font-size:26px}
  .mxl-fig svg .mxl-t.s,.mxl-shapes svg .mxl-t.s{font-size:26px}
}
/* every label in the tools 13 px or more */
.mtx-kn-cap{font-size:13px}
.eq-ans button small{font-size:13px}
.mtx .mtk-c,.mtx-ln .mtk-c{font-size:13px}
/* the EQ trainer's explore controls at 390: two groups with room, the eight bands as two rows of four */
.eq-ex .mtx-sls{gap:16px 24px}
.eq-ex .mtx-h{font-size:14.5px;margin:0 0 8px}
.eq-shape-row .mt-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.eq-shape-row .mt-chips button{min-height:46px;padding:0 4px}
.eq-ex .mtx-kn-dial{width:60px;height:60px}

.eq-grp{padding:14px;border-radius:var(--r2);background:var(--sunk);min-width:0}
.eq-grp h3.mtx-h{margin:0 0 10px}
.eq-shape-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
@media (max-width:560px){.eq-shape-row{grid-template-columns:minmax(0,1fr)}.eq-shape-row .mtx-kn{justify-self:start}}
.eq-ex .mtx-sls{grid-template-columns:minmax(0,1fr)}
@container mtx (min-width:760px){.eq-ex .mtx-sls{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}
.mtx-ln .mxl-steps h1[tabindex="-1"]:focus,.mtx-ln .mxl-steps h2[tabindex="-1"]:focus{outline:none}
.mtx-ln .lp-stage{padding-top:12px}
.mtx-ln .mxl-step > .la-head{margin-top:0}
@media (max-width:560px){
  .mxl-shapes .mt-chips{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px}
  .mxl-shapes .mt-chips::-webkit-scrollbar{display:none}
  .mxl-shapes .mt-chips button{flex:none;padding:0 16px}
}
.mtx-ln .lp-top.mxl-top::after{content:none;display:none}

/* ---------------------------------------------------------------- help mode (MTXK.help): the "?" in the header, rings on
   the controls it explains, one callout at a time on the real control, and a hover or long-press tooltip outside it */
.mtx-helpb{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-3);cursor:pointer;font:800 17px/1 var(--f-body)}
.mtx-helpb span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid currentColor}
.mtx-helpb:hover{background:rgba(var(--ink-rgb),.08);color:var(--ink)}
.mtx-helpb[aria-pressed="true"]{color:var(--study-ink)}
.mtx-helpb[aria-pressed="true"] span{background:var(--study);border-color:var(--study);color:#fff}
:root[data-theme="dark"] .mtx-helpb[aria-pressed="true"] span{color:#04161c}
.mtx-helpb:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.mtx-hl{outline:2px dashed rgba(var(--ink-rgb),.4);outline-offset:3px}
.mtx-hl.mtx-hl-cur{outline:3px solid var(--study-ink);outline-offset:3px}
.mtx-co{position:fixed;z-index:80;left:0;top:0;width:min(300px,calc(100vw - 24px));padding:12px 14px 12px 16px;border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px rgba(var(--ink-rgb),.14),0 14px 34px rgba(6,14,26,.24);text-align:start}
.mtx-co::before{content:"";position:absolute;left:calc(var(--ax,50%) - 7px);top:-7px;width:14px;height:14px;background:inherit;transform:rotate(45deg);box-shadow:-1px -1px 0 rgba(var(--ink-rgb),.14)}
.mtx-co.up::before{top:auto;bottom:-7px;box-shadow:1px 1px 0 rgba(var(--ink-rgb),.14)}
:root[data-theme="dark"] .mtx-co{background:#1b2f4b}
.mtx-co-top{display:flex;align-items:center;gap:8px;margin:-4px -8px 0 0}
.mtx-co-h{font:700 16px/1.25 var(--f-body);outline:none}
.mtx-co-n{margin-inline-start:auto;font:600 13px var(--f-body);color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.mtx-co-x{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-3);cursor:pointer}
.mtx-co-x:hover{background:rgba(var(--ink-rgb),.08);color:var(--ink)}
.mtx-co-x:focus-visible{outline:3px solid var(--study-ink);outline-offset:-3px}
.mtx-co-p{margin:2px 0 10px;font:500 15px/1.45 var(--f-body);color:var(--ink-2)}
.mtx-co-a{display:inline-block;margin:-4px 0 10px;color:var(--study-ink);font:700 14px var(--f-body)}
.mtx-co-acts{display:flex;justify-content:flex-end;gap:8px}
.mtx-co-acts .b{min-height:44px;min-width:88px}
.mtx-hint{position:fixed;z-index:80;left:0;top:0;max-width:min(260px,calc(100vw - 24px));padding:8px 11px;border-radius:10px;background:var(--navy);color:#fff;font:500 13.5px/1.4 var(--f-body);pointer-events:none;text-align:start}
.mtx-hint b{font-weight:700}
:root[data-theme="dark"] .mtx-hint{background:#e9eef5;color:#0b1626}
.mtx-hint::before{content:"";position:absolute;left:calc(var(--ax,50%) - 5px);top:-5px;width:10px;height:10px;background:inherit;transform:rotate(45deg)}
.mtx-hint.up::before{top:auto;bottom:-5px}
.mtx-co[hidden],.mtx-hint[hidden],.mtx-spot[hidden]{display:none}
/* the scrim: everything but the control being explained (and its caption) sits back; the controls stay usable */
.mtx-spot{position:fixed;z-index:79;border-radius:14px;pointer-events:none;box-shadow:0 0 0 200vmax rgba(6,14,26,.32)}
:root[data-theme="dark"] .mtx-spot{box-shadow:0 0 0 200vmax rgba(0,0,0,.5)}