:root{
  --bg:#0c1020;
  --slate:#111730;
  --slate-2:#0e1428;
  --panel:rgba(255,255,255,.045);
  --panel-2:rgba(255,255,255,.08);
  --line:rgba(160,170,235,.16);
  --line-2:rgba(160,170,235,.34);
  --text:#edf0fb;
  --text-2:#aeb6d8;
  --text-3:#7c85ac;
  --text-4:#565f84;
  --accent:#9b7cf6;
  --accent-2:#c0abff;
  --alice:#f2b35c;
  --alice-dim:rgba(242,179,92,.16);
  --bob:#48c7d8;
  --bob-dim:rgba(72,199,216,.16);
  --eve:#ff6f5e;
  --good:#5fdb9f;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
body.boot *{transition:none !important; animation:none !important}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text); font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(125% 90% at 50% -10%, #1d2244 0%, #11162c 50%, #080b16 100%);
  background-attachment:fixed;
}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px; border-radius:7px}
button{font-family:inherit; color:inherit; background:none; border:none}

.page{display:flex; flex-direction:column; min-height:100vh}

/* ---------- top bar ---------- */
.bar{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:max(14px, env(safe-area-inset-top)) 20px 0; flex:none;
}
.home,.icon{
  display:inline-flex; align-items:center; gap:7px; height:38px;
  color:var(--text); text-decoration:none; font:500 14px/1 var(--sans);
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  cursor:pointer; transition:background .15s, border-color .15s;
}
.home{padding:0 14px 0 10px}
.home span{font-family:var(--serif); font-size:18px; letter-spacing:.01em}
.icon{width:38px; justify-content:center; padding:0}
.home:hover,.icon:hover{background:var(--panel-2); border-color:var(--line-2)}

/* ---------- layout ---------- */
main{
  flex:1; display:grid; grid-template-columns:minmax(0,1fr) 344px;
  gap:26px; padding:10px 20px max(22px, env(safe-area-inset-bottom));
  align-items:start; align-content:start;
  width:100%; max-width:1104px; margin:0 auto;
}
.stage{display:flex; flex-direction:column; gap:14px; min-width:0}
.titleblock{max-width:640px; padding:6px 2px 0}
.kicker{font-size:11.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--text-3)}
h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(34px, 4.4vw, 58px);
  line-height:.98; letter-spacing:-.01em; margin:4px 0 8px;
}
.sub{font-size:14.5px; line-height:1.55; color:var(--text-2); max-width:64ch}
.sub b{font-weight:600; color:var(--text)}
.lbl{
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-3); display:flex; justify-content:space-between; align-items:baseline; gap:8px;
}
.lbl .hint{font-size:10px; font-weight:500; letter-spacing:.05em; text-transform:none; color:var(--text-4)}
.srlive{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.code{font:600 12px/1 var(--mono); letter-spacing:.04em; color:var(--accent-2); text-transform:none}
.say sup,.cap sup,.everd sup,.note sup,.eknows sup{font-size:.74em; vertical-align:super; line-height:0}

/* ---------- the board ---------- */
.slate{
  background:var(--slate); border-radius:18px; border:1px solid rgba(150,160,230,.12);
  padding:17px 18px 13px; min-width:0;
  box-shadow:0 1px 0 rgba(190,200,255,.07) inset, 0 22px 44px -28px #000;
  background-image:radial-gradient(118% 128% at 20% 0%, #1b2246 0%, #111730 62%);
}
.board{position:relative; display:flex; flex-direction:column}

.duo{display:grid; grid-template-columns:1fr 1fr; gap:16px; position:relative}
.bots{gap:54px}
.pty{display:flex; flex-direction:column; gap:7px; min-width:0}
.pname{
  display:flex; align-items:center; gap:7px;
  font:600 12.5px/1 var(--sans); color:var(--text-2); letter-spacing:.01em;
}
.pname .dot{width:8px; height:8px; border-radius:50%; flex:none}
.pty.a .dot{background:var(--alice); box-shadow:0 0 0 3px var(--alice-dim)}
.pty.b .dot{background:var(--bob); box-shadow:0 0 0 3px var(--bob-dim)}
.pname .tag{
  margin-left:auto; font:600 9.5px/1 var(--sans); letter-spacing:.11em; text-transform:uppercase;
  color:var(--text-4); display:inline-flex; align-items:center; gap:4px;
}
.pname .tag::before{
  content:''; width:9px; height:11px; flex:none; background:currentColor;
  -webkit-mask:var(--lock) center/contain no-repeat; mask:var(--lock) center/contain no-repeat;
}
:root{--lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cpath d='M4 9V6a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2zm2 0h6V6a3 3 0 0 0-6 0z'/%3E%3C/svg%3E")}

.cell{
  position:relative; border-radius:14px; min-height:104px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  background:var(--slate-2); border:1px solid rgba(150,160,230,.13);
  padding:12px 10px; overflow:hidden;
  transition:border-color .22s, background .22s, opacity .3s, transform .3s;
}
.cell.empty{opacity:.4}
.pty.a .cell.lit{border-color:rgba(242,179,92,.42); background:#1b1a2b}
.pty.b .cell.lit{border-color:rgba(72,199,216,.42); background:#11202f}
.cell.key.lit{border-color:rgba(95,219,159,.46); background:#0f2232}
.cap{
  font:500 11.5px/1.4 var(--sans); color:var(--text-3); text-align:center;
  min-height:2.8em; padding:0 2px;
}
.cap b{color:var(--text-2); font-weight:600}
.cap .m{font:600 11px/1 var(--mono); letter-spacing:.03em; color:var(--text-2)}

/* paint swatch */
.sw{
  display:inline-block; vertical-align:middle;
  width:58px; height:58px; border-radius:50%; flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 6px 16px -8px #000;
  transition:background .35s;
}
.sw.sm{width:30px; height:30px}
.sw.xs{width:17px; height:17px; box-shadow:0 0 0 1px rgba(255,255,255,.18) inset}
.swname{
  font:600 11px/1.2 var(--sans); color:var(--text); text-align:center; letter-spacing:.01em;
}
.swname.dim{color:var(--text-4); font-weight:500}
.ph{
  width:58px; height:58px; border-radius:50%; flex:none;
  display:grid; place-items:center; border:1px dashed rgba(160,170,235,.28);
  font:400 25px/1 var(--serif); color:var(--text-4);
}
/* numbers */
.big{
  font:600 clamp(20px,3.3vw,27px)/1 var(--mono); letter-spacing:.01em; color:var(--text);
  word-break:break-all; text-align:center;
}
.pty.a .cell.lit .big{color:var(--alice)}
.pty.b .cell.lit .big{color:var(--bob)}
.cell.key.lit .big{color:var(--good)}
.frm{
  font:500 11px/1 var(--mono); color:var(--text-4); letter-spacing:.04em; text-align:center;
}
.frm sup{font-size:.78em}

body.mode-paint .onlynum{display:none}
body.mode-numbers .onlypaint{display:none}

/* ---------- connectors ---------- */
.link{position:relative; height:42px; flex:none}
.link.up{height:50px}
.link svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.link path{fill:none; stroke-width:1.5; stroke-dasharray:4 5; vector-effect:non-scaling-stroke}
.link .la{stroke:rgba(242,179,92,.5)}
.link .lb{stroke:rgba(72,199,216,.5)}
.lnote{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:#141a35; padding:3px 10px; border-radius:999px; white-space:nowrap;
  border:1px solid rgba(150,160,230,.14);
  font:600 9.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--text-4);
}

/* ---------- the wire ---------- */
.wire{
  border-radius:13px; padding:10px 12px 12px;
  background:rgba(255,255,255,.028);
  border:1px dashed rgba(160,170,235,.26);
}
.wlab{
  display:flex; align-items:flex-start; gap:7px; margin-bottom:9px;
  font:600 10px/1.35 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--text-4);
}
.ear{
  width:12px; height:12px; flex:none; border-radius:50%; background:var(--eve);
  box-shadow:0 0 0 3px rgba(255,111,94,.16);
  position:relative;
}
.ear::after{
  content:''; position:absolute; inset:-3px; border-radius:50%; border:1px solid var(--eve);
  opacity:.5; animation:ear 2.4s ease-out infinite;
}
@keyframes ear{0%{transform:scale(.9); opacity:.6} 70%{transform:scale(1.9); opacity:0} 100%{opacity:0}}
.wrow{display:flex; gap:9px; flex-wrap:wrap; align-items:stretch}
.pill{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:6px; min-height:46px; padding:9px 13px;
  border-radius:11px; background:rgba(255,255,255,.05);
  border:1px solid rgba(150,160,230,.15); min-width:0;
  transition:opacity .25s, border-color .25s, background .25s;
}
.pill.pub{flex:0 1 auto}
.pill.a,.pill.b{flex:1 1 180px}
.pill.a{border-color:rgba(242,179,92,.34); background:rgba(242,179,92,.07)}
.pill.b{border-color:rgba(72,199,216,.34); background:rgba(72,199,216,.07)}
.pill.gone{opacity:0; pointer-events:none}
.pl{
  font:600 9.5px/1 var(--sans); letter-spacing:.11em; text-transform:uppercase;
  color:var(--text-4); flex:none; white-space:nowrap;
}
.pill.a .pl{color:rgba(242,179,92,.8)}
.pill.b .pl{color:rgba(72,199,216,.8)}
.pv{
  display:flex; align-items:center; gap:9px; min-width:0;
  font:600 15px/1.15 var(--mono); color:var(--text); letter-spacing:.01em;
}
.pvt{display:block; min-width:0; word-break:break-word}
body.mode-paint .pvt{font:600 12.5px/1.25 var(--sans); letter-spacing:.01em}
.pill.a .pv{color:var(--alice)}
.pill.b .pv{color:var(--bob)}
.pv .sub2{display:block; margin-top:2px; font:500 9.5px/1.3 var(--sans); color:var(--text-4); letter-spacing:.04em}
.pv .sub2 sup{font-size:.85em}

/* ---------- the match ---------- */
.match{
  position:absolute; left:50%; top:52px; transform:translate(-50%,-50%) scale(.6);
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:#0e2a23; border:1px solid var(--good); color:var(--good);
  font:600 19px/1 var(--mono); opacity:0;
  box-shadow:0 0 18px -4px rgba(95,219,159,.45);
  transition:opacity .3s, transform .3s cubic-bezier(.3,1.5,.5,1);
}
.match.on{opacity:1; transform:translate(-50%,-50%) scale(1)}
.match::before{
  content:''; position:absolute; left:-10px; right:-10px; top:50%; height:1px; z-index:-1;
  background:rgba(95,219,159,.45);
}

.say{
  margin-top:13px; padding-top:11px; border-top:1px solid rgba(150,160,230,.1);
  font-size:13px; line-height:1.5; color:var(--text-2); min-height:3.1em;
}
.say b{color:var(--text); font-weight:600}
.say .m{font:600 12.5px/1 var(--mono); color:var(--accent-2); letter-spacing:.02em}
.say .g{color:var(--good); font-weight:600}

/* ---------- the flyer ---------- */
.flyer{
  position:absolute; z-index:5; display:flex; align-items:center; justify-content:center;
  gap:8px; border-radius:11px; padding:7px 13px; pointer-events:none;
  background:#1a2146; border:1px solid var(--line-2);
  box-shadow:0 10px 26px -10px #000;
  font:600 15px/1 var(--mono);
}
.flyer.a{border-color:rgba(242,179,92,.6); color:var(--alice)}
.flyer.b{border-color:rgba(72,199,216,.6); color:var(--bob)}

/* ---------- Eve ---------- */
.eve{
  border-radius:16px; padding:14px 16px 15px;
  background:rgba(255,111,94,.045); border:1px solid rgba(255,111,94,.2);
  display:flex; flex-direction:column; gap:9px;
  transition:background .3s, border-color .3s;
}
.eve.broken{background:rgba(255,111,94,.1); border-color:rgba(255,111,94,.55)}
.elab{
  display:flex; align-items:center; gap:8px;
  font:600 10.5px/1 var(--sans); letter-spacing:.13em; text-transform:uppercase; color:var(--eve);
}
.eicon{
  width:13px; height:13px; flex:none; background:currentColor;
  -webkit-mask:var(--eye) center/contain no-repeat; mask:var(--eye) center/contain no-repeat;
}
:root{--eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M12 0C6 0 1.7 4.6 0 8c1.7 3.4 6 8 12 8s10.3-4.6 12-8c-1.7-3.4-6-8-12-8zm0 13a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E")}
.eknows{font-size:13px; line-height:1.55; color:var(--text-2)}
.eknows b{color:var(--text); font-weight:600}
.eknows .m{font:600 12px/1 var(--mono); color:var(--text); letter-spacing:.03em}
.erow{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.emeter{
  flex:1 1 120px; height:6px; border-radius:999px; min-width:90px;
  background:rgba(255,255,255,.07); overflow:hidden;
}
.ebar{display:block; height:100%; width:0; background:var(--eve); transition:width .12s linear}
.ecount{
  font:600 11.5px/1.3 var(--mono); color:var(--text-3); letter-spacing:.02em;
  white-space:nowrap; flex:none;
}
.everd{font-size:13px; line-height:1.55; color:var(--text-2); min-height:1.55em}
.everd b{color:#ff9d90; font-weight:600}
.everd .m{font:600 12.5px/1 var(--mono); color:#ff9d90}
.everd.safe b,.everd.safe .m{color:var(--good)}
.everd .tries{display:flex; gap:5px; align-items:center; margin-top:7px; flex-wrap:wrap}
.btn.go{
  flex:none; height:36px; padding:0 15px; border-radius:9px; cursor:pointer;
  font:600 12.5px/1 var(--sans); color:#2a0d08;
  background:var(--eve); border:1px solid var(--eve);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .14s, opacity .14s;
}
.btn.go:hover{background:#ff8b7c}
.btn.go:disabled{opacity:.45; cursor:default}

/* ---------- panel ---------- */
.panel{
  display:flex; flex-direction:column; gap:14px; position:sticky; top:12px;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:15px 15px 13px;
}
.grp{display:flex; flex-direction:column; gap:9px}
.note{font-size:11.5px; line-height:1.5; color:var(--text-3)}
.note b{color:var(--text-2); font-weight:600}
.note .m{font:600 11px/1 var(--mono); color:var(--accent-2)}

.seg{display:flex; gap:5px}
.seg button{
  flex:1; height:34px; border-radius:9px; cursor:pointer; padding:0 2px;
  background:var(--panel-2); border:1px solid var(--line);
  font:600 12.5px/1 var(--sans); color:var(--text-2);
  transition:background .14s, border-color .14s, color .14s;
}
.seg button:hover{border-color:var(--line-2); color:var(--text)}
.seg button.is-on{background:var(--accent); border-color:var(--accent); color:#160b33}
.seg.sizes button{font:600 11.5px/1 var(--mono); letter-spacing:-.01em}

/* steps */
.steps{list-style:none; display:flex; flex-direction:column; gap:4px}
.steps button{
  display:flex; align-items:flex-start; gap:9px; width:100%; text-align:left; cursor:pointer;
  padding:7px 10px 7px 8px; border-radius:9px;
  background:var(--panel-2); border:1px solid transparent;
  font:500 12px/1.4 var(--sans); color:var(--text-3);
  transition:background .14s, border-color .14s, color .14s;
}
.steps button b{
  flex:none; width:17px; height:17px; border-radius:50%; margin-top:1px;
  display:grid; place-items:center; font:600 10px/1 var(--mono);
  background:rgba(255,255,255,.08); color:var(--text-3);
}
.steps button:hover{color:var(--text-2); border-color:var(--line)}
.steps li.on button{background:rgba(155,124,246,.14); border-color:rgba(155,124,246,.45); color:var(--text)}
.steps li.on button b{background:var(--accent); color:#160b33}

/* palettes */
.who{display:flex; align-items:center; gap:9px}
.who>span{
  flex:none; width:38px; font:600 10.5px/1 var(--sans); letter-spacing:.02em;
}
.wa{color:var(--alice)} .wb{color:var(--bob)}
.pal{display:grid; grid-template-columns:repeat(6,1fr); gap:5px; flex:1; min-width:0}
.pal button{
  aspect-ratio:1; border-radius:8px; cursor:pointer; border:1px solid rgba(255,255,255,.1);
  position:relative; transition:transform .12s, box-shadow .14s;
}
.pal button:hover{transform:translateY(-2px)}
.pal button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--slate), 0 0 0 4px currentColor}
#palA button[aria-pressed="true"]{color:var(--alice)}
#palB button[aria-pressed="true"]{color:var(--bob)}
.pal button.tried::after{
  content:''; position:absolute; inset:0; border-radius:7px;
  background:rgba(12,16,32,.72); border:1px solid rgba(255,111,94,.5);
}
.pal button.found::after{
  content:''; position:absolute; inset:-3px; border-radius:10px;
  border:2px solid var(--eve); animation:ping 1.2s ease-out infinite;
}
@keyframes ping{0%,100%{transform:scale(1); opacity:1} 60%{transform:scale(1.12); opacity:.3}}

/* sliders */
.sl{display:flex; flex-direction:column; gap:5px}
.slab{
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  font:600 11px/1 var(--sans); letter-spacing:.02em;
}
.slab .v{font:600 12.5px/1 var(--mono); color:var(--text); letter-spacing:.02em}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:20px; background:none; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:4px; border-radius:999px; background:rgba(255,255,255,.12)}
input[type=range]::-moz-range-track{height:4px; border-radius:999px; background:rgba(255,255,255,.12)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%; margin-top:-6px;
  background:var(--text); border:none; box-shadow:0 2px 6px -1px #000;
}
input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:var(--text); border:none;
}
#aRange::-webkit-slider-thumb{background:var(--alice)}
#aRange::-moz-range-thumb{background:var(--alice)}
#bRange::-webkit-slider-thumb{background:var(--bob)}
#bRange::-moz-range-thumb{background:var(--bob)}

.btn{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:0 11px; height:36px; border-radius:10px; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line);
  font:600 12.5px/1 var(--sans); color:var(--text-2);
  transition:background .14s, border-color .14s, transform .08s, color .14s;
}
.btn:hover{background:rgba(255,255,255,.13); border-color:var(--line-2); color:var(--text)}
.btn:active{transform:translateY(1px)}
.btn.wide{width:100%}

.foot{
  font-size:11.5px; line-height:1.6; color:var(--text-4);
  border-top:1px solid var(--line); padding-top:12px;
}
.link{
  color:var(--accent-2); cursor:pointer; font:inherit; font-weight:600; text-align:left;
  text-decoration:underline; text-underline-offset:2px;
}
.link:hover{color:#ddd0ff}

/* ---------- about ---------- */
dialog{
  border:none; padding:0; background:transparent; max-width:min(700px, 92vw);
  max-height:86vh; margin:auto;
}
dialog::backdrop{background:rgba(5,7,16,.68); backdrop-filter:blur(3px)}
.about{
  position:relative; background:#141a33; border:1px solid rgba(160,170,235,.22);
  border-radius:18px; padding:26px 28px 24px; overflow-y:auto; max-height:86vh;
  box-shadow:0 30px 60px -28px #000;
}
.about h2{
  font-family:var(--serif); font-weight:400; font-size:31px; line-height:1.05;
  margin:4px 0 14px; color:var(--text);
}
.about p{font-size:14.5px; line-height:1.68; color:var(--text-2); margin-bottom:12px}
.about p b{color:var(--text); font-weight:600}
.about em,.about i{font-style:italic}
.about sup{font-size:.72em}
.about .fine{
  font-size:12.5px; color:var(--text-3); border-top:1px solid var(--line);
  padding-top:12px; margin-top:16px; margin-bottom:0;
}
kbd{
  font:600 11px/1.6 var(--mono); background:rgba(255,255,255,.07);
  border:1px solid var(--line-2); border-bottom-width:2px; border-radius:5px; padding:1px 5px;
}
.x{
  position:absolute; top:14px; right:14px; width:32px; height:32px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--text-3);
  background:var(--panel-2); border:1px solid var(--line); border-radius:999px;
}
.x:hover{color:var(--text); border-color:var(--line-2)}

/* ---------- narrow ---------- */
@media (max-width:920px){
  main{grid-template-columns:minmax(0,1fr); gap:16px; padding:8px 14px max(20px, env(safe-area-inset-bottom))}
  .panel{position:static}
  .titleblock{padding-top:2px}
  h1{font-size:clamp(30px, 8.6vw, 42px)}
  .sub{font-size:14px}
  .slate{padding:13px 13px 11px; border-radius:15px}
  .about{padding:22px 20px 20px; border-radius:15px}
  .about h2{font-size:26px}
}
@media (max-width:520px){
  .duo{gap:10px}
  .bots{gap:44px}
  .cell{min-height:92px; padding:10px 7px; border-radius:12px}
  .sw{width:46px; height:46px}
  .swname{font-size:10px}
  .big{font-size:21px}
  .cap{font-size:10.5px; min-height:3.2em}
  .pname{font-size:11.5px; gap:5px}
  .pname .tag{font-size:8.5px; letter-spacing:.06em}
  .pname .tag::before{width:8px; height:10px}
  .link{height:34px}
  .link.up{height:44px}
  .match{top:46px; width:34px; height:34px; font-size:16px}
  .lnote{font-size:8.5px; letter-spacing:.07em; padding:3px 7px}
  .wrow{gap:6px}
  .pill{padding:6px 10px; gap:7px; min-height:42px}
  .pill.a,.pill.b{flex:1 1 100%}
  .pv{font-size:13.5px}
  .say{font-size:12.5px}
  .who>span{width:32px; font-size:10px}
  .eve{padding:12px 13px 13px; border-radius:14px}
  .eknows,.everd{font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important}
}