/* Conquer English — VYYN companion pages
   One committed look: near-black with the imprint's antique gold, hairline
   rules instead of boxes, and the diamond from the mark as the section break.
   Display face is a publishing serif; everything functional is geometric,
   matching the letterforms in VYYN itself. */
:root{
  --bg:#0A090E;
  --raise:#13111A;
  --sunk:#0F0E15;
  --fg:#EDE7DC;
  --muted:#A39EAC;
  --faint:#7E7690;
  --gold:#C09050;
  --gold-dim:#8A6838;
  --hair:rgba(192,144,80,.22);
  --hair-soft:rgba(192,144,80,.10);
  --mint:#5FD3B2;
  --ochre:#D9924A;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ui:"Jost",ui-sans-serif,system-ui,-apple-system,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--ui);font-size:15.5px;
  -webkit-text-size-adjust:100%;line-height:1.55}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3{text-wrap:balance;margin:0;font-weight:400}

.wrap{max-width:44rem;margin:0 auto;padding-inline:22px;
  padding-block:calc(34px + env(safe-area-inset-top,0px)) calc(80px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:0}

/* ---------------------------------------------------------------- identity */
.brand{display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:38px}
.brand img{width:68px;height:auto;opacity:.95}
.brand .rule{width:100%;height:1px;background:linear-gradient(90deg,
  transparent, var(--hair) 18%, var(--hair) 82%, transparent);margin-top:30px}

header{text-align:center;padding-bottom:10px}
.eyebrow{font-size:.63rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);font-weight:500}
header .ttl{font-family:var(--display);font-size:clamp(2.3rem,8vw,3.4rem);
  font-weight:300;letter-spacing:.005em;line-height:1.08;margin-top:14px;color:var(--fg)}
header .lede{color:var(--muted);margin:16px auto 0;font-size:.97rem;
  line-height:1.65;max-width:32em}

/* ------------------------------------------------------------- the stations */
#stations{display:flex;flex-direction:column;gap:0}
.card{position:relative;padding:46px 0 10px;min-width:0;background:none;border:0;box-shadow:none}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair) 20%,var(--hair) 80%,transparent)}
.card::after{content:"";position:absolute;top:-6px;left:50%;width:11px;height:11px;
  margin-left:-5.5px;border:1px solid var(--gold-dim);transform:rotate(45deg);
  background:var(--bg)}
.card h2{font-family:var(--display);font-size:1.6rem;font-weight:400;
  letter-spacing:.01em;margin-top:9px;line-height:1.2}
.card .sub{color:var(--muted);font-size:.9rem;line-height:1.6;margin:11px 0 0;max-width:40em}
.card .eyebrow{display:block}
.quote{font-family:var(--display);font-size:1.22rem;font-style:italic;color:var(--fg);
  border-left:1px solid var(--hair);padding-left:16px;margin:20px 0 0;line-height:1.45}

.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hint{color:var(--faint);font-size:.8rem;line-height:1.55}

/* ----------------------------------------------------------------- controls */
button{font:inherit;font-family:var(--ui);cursor:pointer;border-radius:2px;
  border:1px solid var(--hair);background:transparent;color:var(--fg);
  padding:10px 20px;font-weight:400;font-size:.84rem;letter-spacing:.09em;
  text-transform:uppercase;transition:border-color .18s,color .18s,background .18s}
button:hover{border-color:var(--gold);color:var(--gold)}
button:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
button[disabled]{opacity:.3;cursor:default}
button.go{border-color:var(--gold);color:var(--gold)}
button.go:hover{background:var(--gold);color:#0A090E}
button.big{padding:14px 30px;font-size:.86rem}

.dial{font-family:var(--display);font-variant-numeric:tabular-nums;font-weight:300;
  letter-spacing:-.01em;line-height:1;color:var(--fg)}
.dial.xl{font-size:clamp(3.4rem,17vw,5rem)}
.dial.lg{font-size:2.4rem}

/* -------------------------------------------------------------------- video */
.player{position:relative;width:100%;aspect-ratio:16/9;max-width:100%;margin-top:22px;
  overflow:hidden;background:#000;border:1px solid var(--hair)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.watchout{display:inline-block;margin-top:14px;font-size:.76rem;color:var(--faint);
  text-decoration:none;letter-spacing:.1em;text-transform:uppercase}
.watchout:hover{color:var(--gold)}


/* ---------------------------------------------------------------- checklist */
.checks{display:flex;flex-direction:column;gap:0;margin-top:22px;
  border-top:1px solid var(--hair-soft)}
.ck{display:flex;gap:16px;align-items:flex-start;padding:16px 2px;cursor:pointer;
  min-width:0;border-bottom:1px solid var(--hair-soft)}
.ck input{appearance:none;width:13px;height:13px;flex:none;margin:5px 0 0;
  border:1px solid var(--gold-dim);background:transparent;cursor:pointer;
  transform:rotate(45deg);transition:background .18s}
.ck input:checked{background:var(--gold);border-color:var(--gold)}
.ck input:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.ck p{margin:0;font-size:.93rem;line-height:1.6;min-width:0}
.ck.done p{color:var(--faint)}
.prog{margin-top:20px;display:flex;align-items:center;gap:14px}
.prog .bar{flex:1;height:1px;background:var(--hair-soft)}
.prog .bar i{display:block;height:1px;width:0;background:var(--gold);transition:width .3s}
.prog span{font-size:.7rem;color:var(--faint);letter-spacing:.14em;flex:none;
  text-transform:uppercase;font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------------- notes */
.note{margin-top:24px}
.note label{display:block;font-size:.86rem;line-height:1.6;margin-bottom:10px;color:var(--muted)}
.note textarea{width:100%;min-height:74px;resize:vertical;font:inherit;font-size:.95rem;
  background:var(--sunk);color:var(--fg);border:1px solid var(--hair-soft);border-radius:2px;
  padding:13px;line-height:1.6;font-family:var(--ui)}
.note textarea:focus{outline:none;border-color:var(--hair)}
.saved{font-size:.66rem;color:var(--gold);height:1em;margin-top:7px;letter-spacing:.16em;
  text-transform:uppercase}

/* ------------------------------------------------------------------- sprint */
.slots{display:grid;gap:1px;margin-top:26px;background:var(--hair-soft)}
.slot{background:var(--bg);padding:18px 10px;text-align:center;min-width:0}
.slot .n{font-family:var(--display);font-size:1.9rem;font-weight:300;
  font-variant-numeric:tabular-nums;line-height:1}
.slot .l{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  margin-top:9px}
.slot.full .n{color:var(--gold)}

/* --------------------------------------------------------------- race / quiz */
.prompt{font-family:var(--display);font-size:clamp(1.5rem,5.4vw,2.1rem);line-height:1.3;
  font-weight:300;min-height:2.8em;display:flex;align-items:center;margin-top:24px}
.answer{color:var(--gold);font-style:italic}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.chip{font-size:.7rem;font-variant-numeric:tabular-nums;padding:6px 12px;
  border:1px solid var(--hair-soft);color:var(--faint);letter-spacing:.07em}
.chip.fast{color:var(--gold);border-color:var(--hair)}

/* ------------------------------------------------------------------ tracker */
.tallyrow{display:grid;grid-template-columns:5rem 1fr 1fr;gap:12px;align-items:center;
  margin-top:14px}
.tallyrow .when{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.counter{display:flex;align-items:center;gap:4px;border:1px solid var(--hair-soft);
  padding:4px 4px;min-width:0}
.counter button{padding:4px 12px;border:0;font-size:.95rem;color:var(--faint);
  letter-spacing:0;text-transform:none}
.counter button:hover{background:none;color:var(--gold)}
.counter .v{flex:1;text-align:center;font-family:var(--display);font-weight:400;
  font-variant-numeric:tabular-nums;font-size:1.3rem}
.counter.a .v{color:var(--ochre)} .counter.b .v{color:var(--mint)}
.legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px;font-size:.68rem;
  color:var(--faint);letter-spacing:.12em;text-transform:uppercase}
.key{display:inline-flex;align-items:center;gap:8px}
.key i{width:6px;height:6px;display:inline-block;transform:rotate(45deg)}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:24px;align-items:end}
.day{min-width:0;text-align:center}
.bars{display:flex;gap:4px;align-items:flex-end;justify-content:center;height:68px}
.bars i{width:5px;display:block;min-height:1px}
.day .d{font-size:.6rem;color:var(--faint);margin-top:10px;letter-spacing:.14em;
  text-transform:uppercase}
.day.today .d{color:var(--gold)}

/* -------------------------------------------------------------------- index */
.grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--hair-soft)}
.chapcard{display:flex;align-items:baseline;gap:18px;text-decoration:none;
  padding:19px 2px;border-bottom:1px solid var(--hair-soft);min-width:0;
  transition:padding-left .2s,border-color .2s}
.chapcard:hover{padding-left:12px;border-color:var(--hair)}
.chapcard .num{font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);flex:none;width:5.6rem}
.chapcard b{font-family:var(--display);font-size:1.3rem;font-weight:400;flex:1;min-width:0}
.chapcard span:not(.num){color:var(--faint);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;flex:none;text-align:right}
@media (max-width:560px){
  .chapcard{flex-wrap:wrap;gap:4px 16px}
  .chapcard b{flex:1 0 100%;order:2}
  .chapcard span:not(.num){order:3;text-align:left;flex:1 0 100%}
  .chapcard .num{order:1}
}

/* -------------------------------------------------------------------- outro */
nav.pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:56px;padding-top:26px;border-top:1px solid var(--hair-soft)}
nav.pager a{text-decoration:none;font-size:.68rem;color:var(--faint);letter-spacing:.18em;
  text-transform:uppercase;transition:color .18s}
nav.pager a:hover{color:var(--gold)}
footer{color:var(--faint);font-size:.76rem;line-height:1.8;margin-top:34px;
  text-align:center;letter-spacing:.03em}
footer strong{color:var(--muted);font-weight:400;display:block;margin-bottom:5px;
  font-family:var(--display);font-size:1.02rem;letter-spacing:.02em}
footer .mark{width:24px;opacity:.72;margin-bottom:18px}

@media (max-width:420px){
  .tallyrow{grid-template-columns:1fr 1fr;grid-template-areas:"w w" "a b"}
  .tallyrow .when{grid-area:w}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================ signature band */
.sig{position:relative;height:132px;margin:-4px 0 2px;opacity:0;
  transition:opacity 1.4s ease .15s;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.sig.live{opacity:.92}
.sig canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (max-width:560px){.sig{height:108px}}

/* ============================================================= video facade */
.player{cursor:pointer}
.player .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;transition:opacity .5s,transform 6s ease-out}
.player .playmark{position:absolute;inset:0;width:100%;height:100%;border:0;
  background:radial-gradient(ellipse at center,rgba(10,9,14,.30),rgba(10,9,14,.66));
  display:flex;align-items:center;justify-content:center;padding:0;border-radius:0}
.player .playmark:hover{border:0;background:radial-gradient(ellipse at center,
  rgba(10,9,14,.16),rgba(10,9,14,.56))}
.player .playmark i{display:block;width:54px;height:54px;border:1px solid var(--gold);
  transform:rotate(45deg);position:relative;transition:transform .45s cubic-bezier(.2,.8,.2,1),
  background .3s;background:rgba(10,9,14,.42)}
.player .playmark i::after{content:"";position:absolute;top:50%;left:50%;
  width:0;height:0;transform:translate(-56%,-50%) rotate(-45deg);
  border-left:12px solid var(--gold);border-top:8px solid transparent;
  border-bottom:8px solid transparent}
.player .playmark:hover i,.player .playmark:focus-visible i{transform:rotate(135deg);
  background:rgba(192,144,80,.10)}
.player .playmark:focus-visible{outline:1px solid var(--gold);outline-offset:-4px}
.player.on .poster,.player.on .playmark{opacity:0;pointer-events:none}
.player .runtime{position:absolute;right:11px;bottom:9px;font-size:.62rem;
  letter-spacing:.2em;color:var(--fg);background:rgba(10,9,14,.6);padding:4px 9px;
  border:1px solid var(--hair-soft)}

/* =================================================================== motion */
.js .card,.js .brand,.js header{opacity:0;transform:translateY(14px)}
.js .card.in,.js .brand.in,.js header.in{opacity:1;transform:none;
  transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.js .chapcard{opacity:0;transform:translateY(10px)}
.js .chapcard.in{opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
@view-transition{navigation:auto}
::selection{background:rgba(192,144,80,.30);color:#FFF8EC}
::-moz-selection{background:rgba(192,144,80,.30);color:#FFF8EC}
body{-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){
  .js .card,.js .brand,.js header,.js .chapcard{opacity:1!important;transform:none!important}
  .sig{transition:none}
}
@media print{
  body{background:#fff;color:#000}
  .sig,.player,.brand img,nav.pager{display:none}
}

/* ============================================================== the mic strip */
.mic{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;
  padding:14px 0;border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft)}
.micbtn{padding:7px 15px;font-size:.7rem}
.mic.live .micbtn{border-color:var(--gold);color:var(--gold)}
.meterwrap{flex:1 0 110px;height:2px;background:var(--hair-soft);position:relative;min-width:90px}
.meterwrap i{position:absolute;left:0;top:0;height:2px;width:0;background:var(--gold);
  transition:width .06s linear}
.mic.live .meterwrap{background:rgba(192,144,80,.18)}
.micsay{flex:1 0 100%;font-size:.76rem;color:var(--faint);line-height:1.55}

/* ================================================================== results */
.result{display:none;gap:1px;margin-top:24px;background:var(--hair-soft);
  grid-template-columns:repeat(3,1fr)}
.result.up{display:grid}
.rz{background:var(--bg);padding:16px 8px;text-align:center;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px}
.rz .big{font-family:var(--display);font-size:1.6rem;font-weight:300;color:var(--gold);
  line-height:1;font-variant-numeric:tabular-nums}
.rz .lbl{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.spark{display:block;overflow:visible}
.spark polyline{fill:none;stroke:var(--gold-dim);stroke-width:1.2;
  stroke-linejoin:round;stroke-linecap:round}
.spark circle{fill:var(--muted)}
.spark circle.good{fill:var(--mint)}
.level{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  min-height:1em}

/* =============================================================== the boards */
.board{margin-top:26px;border-top:1px solid var(--hair-soft);padding-top:16px}
.bhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
button.tiny{padding:5px 11px;font-size:.62rem;letter-spacing:.14em}
button.tiny.on{border-color:var(--gold);color:var(--gold)}
.ranks{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:1px}
.ranks li{display:flex;align-items:baseline;gap:12px;padding:9px 2px;
  border-bottom:1px solid var(--hair-soft);font-size:.86rem}
.ranks li:last-child{border-bottom:0}
.ranks li.me{color:var(--gold)}
.ranks .pos{width:1.6rem;flex:none;font-size:.64rem;letter-spacing:.14em;color:var(--faint);
  font-variant-numeric:tabular-nums}
.ranks li.me .pos{color:var(--gold)}
.ranks .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranks .vf{flex:none;color:var(--mint);font-size:.7rem}
.ranks .val{flex:none;font-variant-numeric:tabular-nums;font-size:.78rem;color:var(--muted)}
.ranks li.me .val{color:var(--gold)}
.myrank{margin:14px 0 0;font-size:.82rem;color:var(--muted)}
.myrank b{color:var(--gold);font-weight:400}

.postrow{margin-top:22px}
.join{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.join input{flex:1 1 170px;min-width:0;font:inherit;font-size:.9rem;padding:10px 13px;
  background:var(--sunk);color:var(--fg);border:1px solid var(--hair-soft);border-radius:2px}
.join input:focus{outline:none;border-color:var(--hair)}
.join .hint{flex:1 0 100%;font-size:.74rem}

/* ================================================================== extras */
.reveal{margin-top:22px}
.ans{margin-top:14px;padding:14px 16px;border-left:1px solid var(--gold-dim);
  background:rgba(192,144,80,.045)}
.ans .answer{font-family:var(--display);font-size:1.15rem;font-style:italic;margin:0}
.ans .hint{margin:8px 0 0}
.miss{display:block;font-size:.7rem;color:var(--faint);letter-spacing:.06em;margin-top:8px;
  font-style:normal;font-family:var(--ui)}
.chip.off{border-color:var(--hair-soft);color:var(--faint)}
.week{position:relative}
.goal{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--gold-dim);
  pointer-events:none}
.goal span{position:absolute;right:0;top:-15px;font-size:.55rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);background:var(--bg);padding:0 4px}
.sharebit{flex:none;padding:3px 8px;font-size:.78rem;border:0;color:var(--faint);
  background:none;line-height:1}
.sharebit:hover{background:none;border:0;color:var(--gold)}
.ck{align-items:center}
.card.pointed::before{background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent)}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:60;
  background:#16141D;color:var(--fg);border:1px solid var(--hair);padding:11px 18px;
  font-size:.82rem;max-width:calc(100vw - 40px);text-align:center;opacity:0;
  pointer-events:none;transition:opacity .25s,transform .25s}
.toast.up{opacity:1;transform:translate(-50%,0)}
@media (max-width:420px){
  .result{grid-template-columns:1fr 1fr}
  .rz:nth-child(3){grid-column:1/-1}
}

/* ======================================================= the front dashboard */
.onething{margin-top:26px;padding:18px 0 0;border-top:1px solid var(--hair-soft);
  display:flex;flex-direction:column;gap:9px}
.onething a{font-family:var(--display);font-size:1.35rem;color:var(--fg);text-decoration:none;
  border-bottom:1px solid var(--gold-dim);align-self:flex-start;padding-bottom:3px;
  transition:color .2s,border-color .2s}
.onething a:hover{color:var(--gold);border-color:var(--gold)}
footer .fb,footer .printlink,footer a{display:inline-block}
footer a{color:var(--faint);text-decoration:none;border-bottom:1px solid var(--hair-soft);
  margin:0 9px;transition:color .2s,border-color .2s}
footer a:hover{color:var(--gold);border-color:var(--gold-dim)}

/* =========================================================== the language */
.brand{position:relative}
.langtog{position:absolute;top:2px;inset-inline-end:0;padding:5px 12px;font-size:.62rem;
  letter-spacing:.14em;color:var(--faint);border-color:var(--hair-soft);text-transform:none}
.langtog:hover{color:var(--gold);border-color:var(--gold-dim)}
[lang=ckb],[dir=rtl]{font-family:"Noto Naskh Arabic","Jost",ui-sans-serif,system-ui,sans-serif}
[dir=rtl] .ttl,[dir=rtl] .card h2,[dir=rtl] footer strong{font-family:"Noto Naskh Arabic",var(--display),serif}
[dir=rtl] .prompt,[dir=rtl] .chip,[dir=rtl] .quote,[dir=rtl] .ans,[dir=rtl] textarea,
[dir=rtl] .ranks .val,[dir=rtl] .dial{direction:ltr;unicode-bidi:isolate}
[dir=rtl] .prompt,[dir=rtl] .quote,[dir=rtl] .ans{text-align:left}
[dir=rtl] .runtime{right:auto;left:11px}
[dir=rtl] .goal span{right:auto;left:0}
[dir=rtl] .ranks .who{text-align:right}
[dir=rtl] .ans{border-left:0;border-right:1px solid var(--gold-dim)}
[dir=rtl] .eyebrow,[dir=rtl] .lbl,[dir=rtl] .l,[dir=rtl] .d,[dir=rtl] .when,
[dir=rtl] nav.pager a,[dir=rtl] button{letter-spacing:0}
[dir=rtl] .chapcard:hover{padding-left:2px;padding-right:12px}
[dir=rtl] .asis{text-align:left}
[dir=rtl] header .asis,[dir=rtl] .rz .asis,[dir=rtl] .slot .asis,
[dir=rtl] .day .asis,[dir=rtl] footer .asis{text-align:center}
[dir=rtl] .onething a.asis{align-self:flex-end}
.row.dlrow{margin-top:24px}
.bars i.ochre,.key i.ochre{background:var(--ochre)}
.bars i.mint,.key i.mint{background:var(--mint)}
.card .sub a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-dim);
  transition:border-color .2s}
.card .sub a:hover{border-color:var(--gold)}
.card .sub b{color:var(--fg);font-weight:400}

/* ============================================= exercise header + sharing */
.cardhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.cardtitle{min-width:0;flex:1}
.sharecard{flex:none;margin-top:4px;padding:6px 13px;font-size:.6rem;letter-spacing:.16em;
  color:var(--faint);border-color:var(--hair-soft)}
.sharecard:hover{color:var(--gold);border-color:var(--gold-dim);background:none}
[dir=rtl] .sharecard{letter-spacing:0}

/* ===================================================== microphone, louder */
.mic{align-items:center}
.meterwrap{height:5px;border-radius:3px;overflow:visible;position:relative}
.meterwrap i{height:5px;border-radius:3px;transition:width .05s linear}
.meterwrap b{position:absolute;top:-2px;width:2px;height:9px;background:var(--gold);
  opacity:.75;transition:left .12s linear;pointer-events:none}
.mic:not(.live) .meterwrap b{display:none}
.heard{flex:none;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mint);opacity:0;transition:opacity .25s;min-width:0}
.heard.up{opacity:1}
.mic.deaf .micbtn{border-color:var(--ochre);color:var(--ochre)}
.mic.deaf .micsay{color:var(--ochre)}