/* ===== fonts (self-hosted) ===== */
@font-face{font-family:'Kelly Slab';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/kellyslab-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Kelly Slab';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/kellyslab-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/plexmono-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/plexmono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/plexmono-600-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/plexmono-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/plexsans-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/plexsans-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/plexsans-600-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
/* scripts with no Latin/Cyrillic coverage above */
@font-face{font-family:'Noto Armenian';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('assets/fonts/notoarm-400.woff2') format('woff2');
  unicode-range:U+0308,U+0530-058F,U+2010,U+2024,U+25CC,U+FB13-FB17;}
@font-face{font-family:'Noto Arabic';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('assets/fonts/notoarab-400.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFF;}

/* ===== palette ===== */
:root{
  --card:#F2E8D5;
  --strip:#E6D7B8;
  --ink:#1E1B18;
  --red:#D8432B;
  --brass:#B8893A;
  --wrong:#8C8377;
  --outer:#E2D4B4;
  --mono:'Plex Mono','Noto Arabic','Noto Armenian','Noto Sans Mono CJK SC','WenQuanYi Zen Hei',ui-monospace,monospace;
  --sans:'Plex Sans','Noto Arabic','Noto Armenian','Noto Sans CJK SC','WenQuanYi Zen Hei','DejaVu Sans',system-ui,sans-serif;
  --slab:'Kelly Slab','Noto Arabic','Noto Armenian','Noto Sans CJK SC','WenQuanYi Zen Hei',serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{background:var(--card)}
body{
  min-height:100vh;
  color:var(--ink);
  font-family:var(--sans);
  background:var(--outer);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:0;
}
.backdrop{
  position:fixed;inset:0;z-index:-1;
  background-image:url('assets/paper_tile.webp');
  background-size:128px 128px;
  background-color:var(--outer);
  opacity:.9;
}

/* ===== card / stage ===== */
.stage{
  position:relative;
  width:100%;
  max-width:640px;
  background-color:var(--card);
  background-image:url('assets/paper_tile.webp');
  background-size:128px 128px;
  min-height:100vh;
  overflow:hidden;
}
@media(min-width:700px){
  body{padding:26px 18px 60px;}
  .stage{
    min-height:0;
    border:2px solid var(--ink);
    box-shadow:4px 4px 0 0 var(--ink);
    border-radius:3px;
  }
}

.screen{
  display:none;
  position:relative;
  padding:22px 16px 20px;
  min-height:inherit;
}
.screen.is-active{display:flex;flex-direction:column;animation:feed .26s ease-out both}
@keyframes feed{
  from{transform:translateX(34px);opacity:.35}
  to{transform:translateX(0);opacity:1}
}
.screen.is-active.instant{animation:none}

/* perforated edges */
.perf{position:absolute;left:0;right:0;height:9px;pointer-events:none}
.perf.top{top:-1px;
  background-image:radial-gradient(circle 5px at 8px 0, var(--outer) 4.6px, transparent 4.9px);
  background-size:16px 9px;background-repeat:repeat-x;background-position:0 0;}
.perf.bottom{bottom:-1px;
  background-image:radial-gradient(circle 5px at 8px 9px, var(--outer) 4.6px, transparent 4.9px);
  background-size:16px 9px;background-repeat:repeat-x;background-position:0 0;}

/* registration marks */
.reg{position:absolute;font:600 15px/1 var(--mono);color:var(--ink);opacity:.75;pointer-events:none}
.reg.tl{top:9px;left:9px}
.reg.tr{top:9px;right:9px}
.reg.bl{bottom:9px;left:9px}
.reg.br{bottom:9px;right:9px}

/* rules */
.rule{height:0;border-top:2px solid var(--ink);margin:0 auto}
.rule.brass{border-top:2px solid var(--brass)}
.rule+.title{border-top:0}

/* ===== start screen ===== */
.start-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;padding:14px 4px 8px}
.title{
  font-family:var(--slab);
  font-weight:400;
  font-size:clamp(40px,13.5vw,66px);
  line-height:.92;
  letter-spacing:.01em;
  margin:14px 0;
  padding:6px 0;
}
.start-inner .rule.brass{width:min(320px,80%)}
.subtitle{
  font-family:var(--mono);font-weight:600;
  font-size:clamp(10px,2.9vw,12.5px);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  margin:16px 0 4px;
}
.box-wrap{width:min(calc(360px * var(--box-scale,1)),84%);margin:8px auto 4px}
.musicbox{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 0 rgba(30,27,24,.16))}

.start-btn{
  font-family:var(--slab);font-size:clamp(24px,7vw,32px);
  color:var(--card);background:var(--red);
  border:2px solid var(--ink);
  border-radius:10px;
  padding:12px 44px 10px;
  margin:14px auto 0;
  box-shadow:0 4px 0 0 var(--ink);
  transition:transform .06s steps(2),box-shadow .06s steps(2);
  cursor:pointer;
}
.start-btn:active{transform:translateY(4px);box-shadow:0 0 0 0 var(--ink)}

.hint{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mono);font-weight:600;font-size:11.5px;letter-spacing:.08em;
  margin:22px 0 0;color:var(--ink);
}
.hint svg{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.hint svg path:first-child{fill:var(--ink);stroke:var(--ink)}
.hint-sub{font-family:var(--sans);font-size:12px;color:var(--wrong);margin:6px 0 0}

/* language gate on the start screen */
body.no-lang .only-when-lang{display:none}
body.no-lang .gate-pick{display:none}
body.no-lang .mute-txt{display:none}
body.no-lang .start-inner{padding-top:26px}
body.no-lang .box-wrap{width:min(230px,62%);margin:2px auto 0}
body.no-lang .lang-gate{margin-top:10px}
.lang-gate{display:flex;flex-direction:column;align-items:center;gap:14px;margin:20px 0 4px}
.gate-pick{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--wrong);margin:0}
.gate-globe{stroke:var(--ink);opacity:.75}
.lang-gate-row{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.gate-btn{
  font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.04em;
  color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:24px;
  padding:10px 17px;cursor:pointer;box-shadow:0 3px 0 0 var(--ink);
  transition:transform .06s steps(2),box-shadow .06s steps(2),background .12s linear,color .12s linear;
}
.gate-btn:active{transform:translateY(3px);box-shadow:0 0 0 0 var(--ink)}
.gate-btn[aria-pressed="true"]{background:var(--red);color:var(--card)}
body.no-lang .gate-btn{font-size:15px;padding:13px 21px}

/* second level: which songs */
.set-pick{display:flex;flex-direction:column;align-items:center;gap:9px;margin:18px 0 0;width:100%}
.set-row{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:480px}
.set-line-row{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.set-group{font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--wrong);margin:6px 0 0}
.set-btn{
  display:inline-flex;align-items:baseline;gap:6px;
  font-family:var(--sans);font-weight:600;font-size:13px;line-height:1.15;
  color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:8px;
  padding:8px 11px;cursor:pointer;box-shadow:0 3px 0 0 var(--ink);text-align:start;
  transition:transform .06s steps(2),box-shadow .06s steps(2),background .12s linear,color .12s linear;
}
.set-btn small{font-family:var(--mono);font-size:10.5px;opacity:.7}
.set-btn:active{transform:translateY(3px);box-shadow:0 0 0 0 var(--ink)}
.set-btn[aria-pressed="true"]{background:var(--ink);color:var(--card)}
.set-btn[aria-pressed="true"] small{opacity:.85}
body:not(.no-lang) .start-inner .box-wrap{width:min(calc(190px * var(--box-scale,1)),46%)}
body:not(.no-lang) .start-inner .title{margin:8px 0;font-size:clamp(36px,11vw,58px)}

.set-line{font-family:var(--slab);font-size:clamp(17px,5vw,21px);color:var(--red);margin:4px 0 0;min-height:1.2em}
.set-btn:active{background:var(--brass);color:var(--ink)}
.pulse{animation:setpulse .32s ease-out}
@keyframes setpulse{0%{transform:scale(1.08)}100%{transform:scale(1)}}

/* language switch */
.lang-ctl{position:fixed;top:10px;left:10px;z-index:21;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.lang-toggle{
  display:flex;align-items:center;gap:6px;
  background:var(--card);border:2px solid var(--ink);border-radius:20px;
  padding:5px 11px 5px 9px;cursor:pointer;
  font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.08em;color:var(--ink);
  box-shadow:0 3px 0 0 var(--ink);
}
.lang-toggle:active{transform:translateY(2px);box-shadow:0 1px 0 0 var(--ink)}
.lang-toggle svg{stroke:var(--ink)}
.lang-menu{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;max-width:calc(100vw - 20px);
  background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:8px;
  box-shadow:4px 4px 0 0 var(--ink)}
.lang-menu[hidden]{display:none}
.lang-btn{
  font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.08em;
  color:var(--ink);background:transparent;
  border:2px solid var(--ink);border-radius:20px;padding:5px 14px;cursor:pointer;text-align:center;
}
.lang-btn[aria-pressed="true"]{background:var(--ink);color:var(--card)}
.lang-btn:active{transform:translateY(1px)}

/* ===== round screen ===== */
.round-inner{display:flex;flex-direction:column;gap:12px;flex:1;justify-content:space-between}
.round-head{display:flex;flex-direction:column;gap:10px;padding-left:0}
@media(min-width:700px){.round-inner{justify-content:flex-start}.round-head{padding-left:0}}
.hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-right:56px;min-height:34px}
@media(min-width:700px){.hdr{padding-right:0}}
.round-label{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.08em;display:flex;flex-direction:column;gap:3px}
.round-set{font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:0;color:var(--red)}
.strip{transition:transform .5s ease-out}
.strip.running{transition:none}
.score-wrap{display:flex;align-items:baseline;gap:8px}
.score-cap{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.08em;color:var(--wrong)}
.score-val{
  font-family:var(--mono);font-weight:600;font-size:26px;line-height:1;font-variant-numeric:tabular-nums;
  border-bottom:3px solid var(--brass);padding:0 2px 1px;min-width:52px;text-align:right;display:inline-block;
}
.timer{height:3px;background:rgba(30,27,24,.14);border-radius:2px;overflow:hidden}
.timer i{display:block;height:100%;width:100%;background:var(--ink);transform-origin:left;transition:transform .25s linear}
.timer.warn i{background:var(--red)}

/* strip window */
.strip-window{
  position:relative;overflow:hidden;
  height:clamp(150px,29vh,212px);
  border:2px solid var(--ink);border-radius:6px;
  background-color:var(--strip);
  background-image:url('assets/strip_tile.webp');
  background-size:96px 148px;
  box-shadow:inset 0 0 0 1px rgba(30,27,24,.06);
  touch-action:none;
}
@media(min-width:700px){
  .strip-window{height:182px;background-size:96px 182px}
}
.strip{position:absolute;top:0;bottom:0;left:0;will-change:transform;
  background-image:url('assets/strip_tile.webp');background-repeat:repeat-x;background-position:center}
.hole{position:absolute;border-radius:3px;background:var(--ink);
  transition:background .12s linear,box-shadow .12s linear}
.hole.lit{background:var(--red);box-shadow:0 0 10px 1px rgba(216,67,43,.55)}
.comb{position:absolute;top:0;bottom:0;width:5px;background:var(--brass);z-index:2;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.28),inset -1px 0 0 rgba(30,27,24,.35),0 0 0 1px rgba(30,27,24,.35)}
.comb::after{content:"";position:absolute;top:0;bottom:0;left:5px;width:2px;background:repeating-linear-gradient(180deg,var(--ink) 0 3px,transparent 3px 7px);opacity:.3}
.comb-label{position:absolute;top:7px;font-family:var(--mono);font-size:8px;letter-spacing:.14em;color:var(--ink);opacity:.5;transform:translateX(9px);z-index:5}

/* brass rail on the paper's feed edge, with rivet and punch holes */
.rail{position:absolute;left:0;top:0;bottom:0;width:13px;z-index:4;
  background:var(--brass);
  box-shadow:inset 2px 0 0 rgba(255,255,255,.25),inset -3px 0 0 rgba(30,27,24,.28),2px 0 0 rgba(30,27,24,.35)}
.rail .rivet{position:absolute;left:2px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;
  background:var(--brass);box-shadow:inset 1px 1px 0 rgba(255,255,255,.5),inset -1px -1px 0 rgba(30,27,24,.5)}
.rail::after{content:"";position:absolute;right:-4px;top:0;bottom:0;width:9px;
  background-image:radial-gradient(circle at 0 50%,var(--ink) 3.4px,transparent 3.7px);
  background-size:12px 12px;background-repeat:repeat-y;background-position:0 0}

/* brass caps top and bottom of the window */
.cap{position:absolute;left:0;right:0;height:6px;background:var(--brass);z-index:4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(30,27,24,.3)}
.cap.top{top:0}
.cap.bottom{bottom:0}

/* play row */
.play-row{display:flex;align-items:center;gap:14px;margin-top:2px}
.play-btn{
  width:58px;height:58px;border-radius:50%;flex:0 0 auto;
  background:var(--red);border:2px solid var(--ink);
  box-shadow:0 4px 0 0 var(--ink);
  display:flex;align-items:center;justify-content:center;
  color:var(--card);cursor:pointer;
  transition:transform .06s steps(2),box-shadow .06s steps(2);
}
.play-btn:active{transform:translateY(4px);box-shadow:0 0 0 0 var(--ink)}
.play-btn svg{fill:var(--card);stroke:var(--card)}
.play-btn .ico-play{display:block}
.play-btn .ico-replay{display:none}
.play-btn.played .ico-play{display:none}
.play-btn.played .ico-replay{display:block}
.play-btn.playing{animation:beat .5s steps(2) infinite}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(.93)}}
.play-meta{display:flex;flex-direction:column;gap:2px}
.play-label{font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:.08em}
.worth{font-family:var(--mono);font-size:12px;color:var(--red);letter-spacing:.04em}
.worth.dim{color:var(--wrong)}

/* answers */
.answers{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:560px){.answers{grid-template-columns:1fr 1fr}}
.ticket{
  position:relative;text-align:start;
  min-height:60px;
  background-color:var(--card);
  background-image:url('assets/paper_tile.webp');background-size:96px 96px;
  border:2px solid var(--ink);border-radius:2px;
  padding:9px 12px 9px 24px;
  cursor:pointer;overflow:hidden;
  transition:transform .06s steps(2),background .12s linear,color .12s linear;
  box-shadow:0 3px 0 0 var(--ink);
}
@media(min-width:560px){.ticket{min-height:66px}}
.ticket::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:9px;
  background-image:radial-gradient(circle at 0 50%, var(--ink) 4.6px, transparent 4.9px);
  background-size:13px 13px;background-repeat:repeat-y;background-position:0 0;
}
.ticket:active{transform:translateY(3px);box-shadow:0 0 0 0 var(--ink)}
.ticket[disabled]{color:var(--ink);opacity:1;cursor:default}
.ticket .opt{
  display:block;font-family:var(--mono);font-weight:400;font-size:9.5px;
  letter-spacing:.08em;color:var(--wrong);margin-bottom:2px;
}
.ticket .name{display:block;font-family:var(--slab);font-size:clamp(17px,4.6vw,21px);line-height:1.22}
.ticket.correct{background-color:var(--red);background-image:none;color:var(--card);box-shadow:0 3px 0 0 var(--ink)}
.ticket.correct .opt{color:rgba(242,232,213,.7)}
.ticket.wrong{background-color:var(--wrong);background-image:none;color:var(--card)}
.ticket.wrong .opt{color:rgba(242,232,213,.65)}
.ticket.wrong .name{text-decoration:line-through;text-decoration-thickness:2px}
.ticket.reveal{background-color:var(--red);background-image:none;color:var(--card)}
.ticket[disabled]{cursor:default}
.stamp{
  position:absolute;right:8px;top:6px;bottom:6px;
  display:flex;align-items:center;
  font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.08em;
  color:var(--card);
  border:2px double var(--card);border-radius:4px;
  padding:2px 7px;transform:rotate(-6deg);
  animation:stamp .15s ease-out both;
}
@keyframes stamp{from{transform:rotate(-6deg) scale(1.3)}to{transform:rotate(-6deg) scale(1)}}

.next-btn{
  font-family:var(--slab);font-size:24px;color:var(--card);background:var(--red);
  border:2px solid var(--ink);border-radius:10px;padding:10px 30px 8px;
  box-shadow:0 4px 0 0 var(--ink);cursor:pointer;margin:2px auto 0;
  transition:transform .06s steps(2),box-shadow .06s steps(2);
}
.next-btn:active{transform:translateY(4px);box-shadow:0 0 0 0 var(--ink)}

/* ===== final ===== */
.final-inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 2px 6px}
.final-title{font-family:var(--slab);font-size:46px;margin:6px 0 8px;line-height:1}
.final-rule{width:min(280px,74%);margin:8px auto}
.total-wrap{display:flex;flex-direction:column;align-items:center;margin-top:6px}
.total{font-family:var(--slab);font-size:clamp(64px,20vw,96px);line-height:1;border-bottom:4px solid var(--brass);padding:0 6px 4px}
.total-max{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--wrong);margin-top:8px}
.rank{font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;margin:16px 0 6px;color:var(--red)}
.stubs{list-style:none;width:100%;margin:12px 0 18px;padding:0;display:flex;flex-direction:column;gap:7px}
.stub{
  position:relative;
  display:flex;align-items:center;gap:10px;
  border:2px solid var(--ink);border-radius:2px;
  padding:8px 10px 8px 23px;background-color:var(--card);background-image:url('assets/paper_tile.webp');background-size:96px 96px;
  text-align:start;overflow:hidden;
}
.stub::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:9px;
  background-image:radial-gradient(circle at 0 50%, var(--ink) 4.6px, transparent 4.9px);
  background-size:13px 13px;background-repeat:repeat-y;background-position:0 0;
}
.stub .s-name{font-family:var(--slab);font-size:17px;flex:1;line-height:1.1}
.stub .s-mark{font-family:var(--mono);font-weight:600;font-size:16px}
.stub .s-pts{font-family:var(--mono);font-weight:600;font-size:13px;min-width:44px;text-align:right}
.stub.ok .s-mark,.stub.ok .s-pts{color:var(--red)}
.stub.no .s-mark,.stub.no .s-pts{color:var(--wrong)}

/* ===== mute ===== */
.mute{
  position:fixed;top:10px;right:10px;z-index:20;
  display:flex;align-items:center;gap:6px;
  background:var(--card);border:2px solid var(--ink);border-radius:20px;
  padding:5px 10px 5px 8px;cursor:pointer;
  font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.08em;color:var(--ink);
  box-shadow:0 3px 0 0 var(--ink);
}
.mute:active{transform:translateY(2px);box-shadow:0 1px 0 0 var(--ink)}
.mute svg{fill:var(--ink);stroke:var(--ink);stroke-width:1.8;fill-rule:evenodd}
.mute svg path[fill="none"]{fill:none}
.mute .mute-slash{display:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round}
.mute.off .mute-wave,.mute.off .mute-wave2{display:none}
.mute.off .mute-slash{display:block}
@media(max-width:420px){.mute .mute-txt{display:none}}