/* Monosounds Ear Training — width-locked column (TikTok-friendly frames).
   Visual language mirrors monosounds.studio global.css: paper editorial,
   white cards, hairline borders, flat yellow, radius 0, mono meta labels. */

@font-face{font-family:'PF Din Text Pro';src:url('../fonts/PFDinTextPro-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'PF Din Text Pro';src:url('../fonts/PFDinTextPro-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Gilroy';src:url('../fonts/Gilroy-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'CodePro';src:url('../fonts/CodePro-LC.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --ink:#151817;
  --paper:#f3f4ef;
  --card:#ffffff;
  --line:#d7dbd5;
  --line-soft:#e7eae4;
  --art:#dfe3dc;
  --dim:#4f5752;
  --dim-2:#6e7571;
  --yellow:#ffe600;
  --yellow-2:#ecd400;
  --din:'PF Din Text Pro','Arial Narrow',system-ui,sans-serif;
  --body:'Gilroy',system-ui,-apple-system,sans-serif;
  --mono:'CodePro',ui-monospace,SFMono-Regular,Menlo,monospace;
  --w:430px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:#e4e6df;
  color:var(--ink);
  font-family:var(--body);
  display:flex;justify-content:center;
  overscroll-behavior-y:none;
}
/* The whole game lives in one width-locked column, desktop included. */
.app{
  width:100%;max-width:var(--w);
  height:100dvh;
  background:var(--paper);
  border-left:1px solid var(--ink);
  border-right:1px solid var(--ink);
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
/* The screen is the ONLY scroller — the nav sits outside it, so it can never
   float over the list mid-scroll. */
.screen{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}

/* ---------- shared atoms ---------- */
.k{font:400 10px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}
.k.chip{background:var(--yellow);color:var(--ink);padding:4px 8px;letter-spacing:.08em;width:fit-content}
h1,.h1{font:700 34px/1.02 var(--din);letter-spacing:-.02em;color:var(--ink)}
h2,.h2{font:700 22px/1.05 var(--din);letter-spacing:-.015em;color:var(--ink)}
.dim{color:var(--dim);font-size:14px;line-height:1.55}

.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:16px 20px;border:1px solid var(--ink);border-radius:0;cursor:pointer;
  font:700 15px/1 var(--din);letter-spacing:.02em;
  background:var(--yellow);color:var(--ink);
  transition:background .16s ease;
  user-select:none;text-decoration:none;
}
.btn:hover{background:var(--yellow-2)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--card);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn[disabled]{opacity:.4;pointer-events:none}

.card{background:var(--card);border:1px solid var(--line);border-radius:0;padding:18px}
.card.strong{border-color:var(--ink)}

/* ---------- top bar: paper editorial, like the site header ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 18px 13px;border-bottom:1px solid var(--ink);background:var(--paper);
}
.topbar .logo{font:700 19px/1 var(--din);letter-spacing:-.025em;color:var(--ink);display:inline-flex;align-items:baseline;gap:2px}
.topbar .logo i{font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2);font-style:normal}
.stats{display:flex;gap:16px;align-items:center}
.stat{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.stat b{font:700 14px/1 var(--din);color:var(--ink)}

/* ---------- intro / calibration ---------- */
.intro{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:26px 22px 30px;gap:14px;position:relative}
.intro .art{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(430px 320px at 88% -60px, rgba(255,230,0,.32), transparent 64%),
    repeating-linear-gradient(90deg, transparent 0 52px, rgba(21,24,23,.035) 52px 53px);
}
.intro > *{position:relative}
.intro h1{font-size:44px}
.intro h1 span{background:var(--yellow);padding:0 6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.langsw{position:absolute;top:18px;right:18px;display:flex;gap:0}
.langsw button{
  background:var(--card);border:1px solid var(--ink);color:var(--dim);
  font:400 11px/1 var(--mono);letter-spacing:.1em;padding:8px 11px;cursor:pointer;margin-left:-1px;
}
.langsw button.on{color:var(--ink);background:var(--yellow)}

.cal-meter{display:flex;align-items:center;gap:14px;margin:8px 0 2px}
input[type=range]{
  flex:1;-webkit-appearance:none;appearance:none;height:8px;
  background:linear-gradient(90deg,var(--yellow) var(--fill,60%),var(--line-soft) var(--fill,60%));
  border:1px solid var(--line);
  outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:0;
  background:var(--ink);border:1px solid var(--ink);box-shadow:inset 0 0 0 3px var(--paper);
  cursor:pointer;
}

/* ---------- home / chapters ---------- */
.home{flex:1;padding:18px;display:flex;flex-direction:column;gap:10px}
.chapter{
  display:flex;align-items:center;gap:16px;padding:16px;
  background:var(--card);border:1px solid var(--line);cursor:pointer;
  transition:border-color .15s ease;
}
.chapter:hover{border-color:var(--ink)}
.chapter.locked{cursor:default;background:transparent}
.chapter.locked:hover{border-color:var(--line)}
.chapter.locked .ch-title,.chapter.locked .ch-num{color:#a7aca6}
.ch-num{
  width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;
  font:700 18px/1 var(--din);background:var(--paper);border:1px solid var(--line);color:var(--ink);
}
.chapter.done .ch-num{background:var(--yellow);border-color:var(--ink)}
.ch-body{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.ch-title{font:700 16px/1.1 var(--din);color:var(--ink)}
.ch-progress{height:8px;background:var(--line-soft);overflow:hidden;margin-top:4px}
.ch-progress i{display:block;height:100%;background:var(--yellow);border-right:1px solid rgba(21,24,23,.35)}
.chapter .go{
  flex:none;font:700 13px/1 var(--din);color:var(--ink);
  border:1px solid var(--ink);background:var(--yellow);padding:9px 12px;
}
.chapter.locked .go{display:none}

.chapter.soon{
  background:transparent;border-style:dashed;cursor:default;
  align-items:center;
}
.chapter.soon .ch-num{background:transparent;border-style:dashed;color:#a7aca6}
.chapter.soon .ch-title{color:#a7aca6}

/* ---------- level grid (secondary screen) ---------- */
.lvlgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:18px}
.lvl{
  aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:transparent;border:1px solid var(--line);cursor:default;
  font:700 14px/1 var(--din);color:#a7aca6;
}
.lvl.open{color:var(--ink);background:var(--card);cursor:pointer}
.lvl.open:hover{border-color:var(--ink)}
.lvl.now{background:var(--yellow);color:var(--ink);border-color:var(--ink)}
.lvl .st{font-size:8px;letter-spacing:1px;color:var(--ink)}
.back{
  display:inline-flex;align-items:center;gap:8px;background:none;border:0;color:var(--dim);
  font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:0;
}
.back:hover{color:var(--ink)}
.lvlchip{
  font:400 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  background:var(--yellow);border:1px solid var(--ink);color:var(--ink);
  padding:6px 9px;cursor:pointer;
}

/* ---------- play screen ---------- */
.play{flex:1;display:flex;flex-direction:column;padding:18px;gap:14px}
.play-head{display:flex;align-items:center;justify-content:space-between}
.qcard{flex:none;display:flex;flex-direction:column;gap:10px}
.qcard .h2{font-size:24px}
.ab{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.ab button{
  padding:20px 10px;border:1px solid var(--line);cursor:pointer;
  background:var(--paper);color:var(--ink);font:700 16px/1 var(--din);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:border-color .14s ease, background .14s ease;
}
.ab button:hover{border-color:var(--ink)}
.ab button.playing{border-color:var(--ink);background:var(--yellow)}
.ab button.playing .k{color:var(--ink)}
.ab button .k{pointer-events:none}
.wave{display:flex;gap:2px;align-items:flex-end;height:18px}
.wave i{width:3px;background:var(--dim-2);height:30%}
.playing .wave i{background:var(--ink);animation:wv .5s ease-in-out infinite alternate}
.wave i:nth-child(2){animation-delay:.1s;height:70%}
.wave i:nth-child(3){animation-delay:.2s;height:45%}
.wave i:nth-child(4){animation-delay:.3s;height:90%}
.wave i:nth-child(5){animation-delay:.15s;height:55%}
@keyframes wv{from{transform:scaleY(.4)}to{transform:scaleY(1.15)}}

.answers{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.answers.cols1{grid-template-columns:1fr}
.answers button{
  padding:19px 12px;border:1px solid var(--line);cursor:pointer;
  background:var(--card);color:var(--ink);font:700 17px/1 var(--din);
  transition:border-color .14s ease,background .14s ease;
}
.answers button:hover{border-color:var(--ink)}
.answers button:active{transform:translateY(1px)}
.answers button.hit{background:var(--yellow);border-color:var(--ink)}
.answers button.near{background:var(--line-soft);border-color:var(--ink)}
.answers button.miss{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* The correct answer is always marked green after answering. */
.answers button.truth{background:#dff0e0;border-color:#2f7d44;outline:2px solid #2f7d44;outline-offset:2px}
.answers button.hit.truth{background:#8fd99a;border-color:#2f7d44;outline:none}

.verdict{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 18px;text-align:center}
.verdict .stars{font:700 30px/1 var(--din);letter-spacing:6px;color:var(--ink)}
.verdict .stars .off{color:var(--line)}
.verdict .pts{font:700 44px/1 var(--din);color:var(--ink)}
.verdict .pts em{font-style:normal;background:var(--yellow);padding:0 8px}
.verdict .tip{
  text-align:left;background:var(--paper);border:1px solid var(--line);
  padding:13px 14px;font-size:13.5px;line-height:1.55;color:var(--dim);width:100%;
}
.verdict .tip b{font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);display:block;margin-bottom:6px}
.badge{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0}
.badge .k.chip{letter-spacing:.12em}
.badge-title{font:700 24px/1 var(--din);color:var(--ink)}


/* ---------- MATCH tasks: slider you set by ear ---------- */
.matchbox{display:flex;flex-direction:column;gap:11px}
.matchval{
  font:700 34px/1 var(--din);color:var(--ink);
  background:var(--yellow);border:1px solid var(--ink);
  padding:9px 12px;width:fit-content;
}
.matchbox input[type=range]{width:100%;height:12px}
.matchbox input[type=range]::-webkit-slider-thumb{width:26px;height:26px}

/* ---------- ABX / ranking / two-knob ---------- */
.ab.abx{grid-template-columns:1fr 1fr 1fr}
.ab.abx .xbtn{background:var(--ink);color:var(--paper)}
.ab.abx .xbtn .k{color:var(--paper)}
.ab.abx .xbtn.playing{background:var(--yellow);color:var(--ink)}
.ab.abx .xbtn.playing .k{color:var(--ink)}
.ab.rank3{grid-template-columns:1fr 1fr 1fr}
.ab.rank3 button.picked{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.rankslots{display:flex;flex-direction:column;gap:9px;margin-top:10px}
.slots{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.slots i{
  font:700 20px/1 var(--din);font-style:normal;color:var(--ink);text-align:center;
  border:1px solid var(--line);padding:12px 0;background:var(--paper);
}
.rankbtns{display:flex;gap:10px;align-items:center}
.rankbtns .btn{flex:1}
.knob{display:flex;flex-direction:column;gap:6px}
.knobhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.knobhead b{font:700 19px/1 var(--din);color:var(--ink);background:var(--yellow);padding:3px 7px}

/* ---------- quiz / gear panels ---------- */
.ab.one{grid-template-columns:1fr}
.gearbox{padding:10px 4px 2px;display:flex;flex-direction:column;align-items:center;gap:8px}
.gearbox svg{width:100%;height:auto;max-height:190px}
.gearname{color:var(--ink);background:var(--yellow);padding:4px 8px;letter-spacing:.1em}

/* ---------- profile ---------- */
.prof-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pstat{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pstat b{font:700 30px/1 var(--din);color:var(--ink)}
.ach-list{display:flex;flex-direction:column;gap:8px}
.ach{display:flex;align-items:center;gap:12px;padding:12px 14px}
.ach b{font:700 16px/1 var(--din)}


/* ---------- welcome note + free promise ---------- */
.welcome{justify-content:center;gap:16px}
.welcome h1{font-size:38px}
.note{display:flex;flex-direction:column;gap:9px}
.note p{font-size:14.5px;line-height:1.6;color:var(--dim)}
.freecard{
  background:var(--yellow);border:1px solid var(--ink);padding:14px 15px;
  display:flex;flex-direction:column;gap:8px;
}
.freecard .k.chip{background:var(--ink);color:var(--yellow)}
.freecard p{font:700 14px/1.5 var(--din);color:var(--ink)}

/* ---------- onboarding ---------- */
.onboard{gap:13px}
.onboard h2{font-size:26px;margin-top:4px}
.dots{display:flex;gap:5px}
.dots i{flex:1;height:5px;background:var(--line-soft);border:1px solid var(--line)}
.dots i.on{background:var(--yellow);border-color:var(--ink)}
.onboard .answers button{font-size:15px;padding:16px 14px;text-align:left}

/* ---------- bottom nav ---------- */
.nav{
  flex:none;
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--ink);background:var(--card);
}
.nav[hidden]{display:none}
.nav button{
  padding:15px 8px;border:0;border-right:1px solid var(--line);background:none;cursor:pointer;
  font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.nav button:last-child{border-right:0}
.nav button.on{background:var(--yellow);color:var(--ink)}

.rankstrip{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:12px 14px}
.rankstrip:hover{border-color:var(--ink)}
.myrank{display:flex;align-items:center;justify-content:space-between}
.myrank-l{display:flex;align-items:center;gap:12px}
.myrank-l b{display:block;font:700 20px/1.1 var(--din);color:var(--ink)}
.myrank-r{text-align:right}
.myrank-r b{display:block;font:700 22px/1 var(--din);color:var(--ink)}
.idava svg{display:block;width:100%;height:100%}
.scoreline{margin-top:-4px}
.howscore{margin-top:12px;line-height:1.6;text-transform:none;letter-spacing:.02em;font-size:11px}

/* ---------- leaderboard ---------- */
.board{display:flex;flex-direction:column;gap:6px}
.brow{
  display:flex;align-items:center;gap:11px;padding:10px 13px;
  background:var(--card);border:1px solid var(--line);
}
.brow.me{border-color:var(--ink);background:#fdfbe6}
.brow .rank{font:700 13px/1 var(--din);color:var(--dim-2);min-width:22px}
.brow .ava{width:30px;height:30px;flex:none;display:block}
.brow .ava svg{display:block;width:30px;height:30px}
.brow .bname{flex:1;font:700 14px/1.2 var(--din);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .bname em{font:400 10px/1 var(--mono);font-style:normal;color:var(--dim-2);letter-spacing:.1em}
.brow b{font:700 14px/1 var(--din)}

/* ---------- profile id card + rewards ---------- */
.idcard{display:flex;gap:16px;align-items:center}
.idava{width:92px;height:92px;flex:none;border:1px solid var(--line);background:var(--paper)}
.idava svg{display:block;width:100%;height:100%}
.idmeta{display:flex;flex-direction:column;gap:7px;align-items:flex-start;min-width:0}
.idmeta b{font:700 19px/1.05 var(--din)}
.idbtns{display:flex;gap:6px;flex-wrap:wrap}
/* ---------- avatars: bundled Notionists faces ---------- */
.avimg{display:block;overflow:hidden}
.avimg svg{width:100%;height:100%;display:block}
.avpick{display:flex;flex-direction:column;gap:9px}
.avtabs{display:flex;gap:8px}
.avtabs button{
  flex:1;padding:9px 4px;border:1px solid var(--line);background:var(--paper);cursor:pointer;
  font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.avtabs button.on{background:var(--yellow);border-color:var(--ink);color:var(--ink)}
.avgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.avcell{
  padding:3px;border:1px solid var(--line);background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.avcell.on{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.avatar-stage{display:flex;align-items:center;justify-content:center;padding:10px}
.authbox .legal{margin:2px 0 0;line-height:1.5;text-transform:none;letter-spacing:.02em;font-size:10.5px}
.authbox .legal a{color:var(--ink);text-decoration:underline}
.reward{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.reward .dim{font-size:12.5px}
.achtxt{display:flex;flex-direction:column;gap:3px;min-width:0}
.achtxt em{font-style:normal;font-size:12px;line-height:1.4;color:var(--dim)}

/* ---------- avatar builder ---------- */
.avatar-stage{display:flex;justify-content:center;padding:14px}
.avatar-stage svg{display:block}
.picks{display:flex;flex-direction:column;gap:12px}
.pick .opts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.pick .opts button{
  min-width:38px;padding:9px 10px;background:var(--card);border:1px solid var(--line);cursor:pointer;
  font:400 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
}
.pick .opts button.on{border-color:var(--ink);background:var(--yellow);color:var(--ink)}
.pick .opts button i{display:block;width:20px;height:20px;border:1px solid var(--ink)}

.authscreen{justify-content:center;gap:12px}
.authbox{display:flex;flex-direction:column;gap:12px}
.authtabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink)}
.authtabs button{
  padding:12px 8px;border:0;background:var(--card);cursor:pointer;
  font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.authtabs button.on{background:var(--yellow);color:var(--ink)}
#authform{display:flex;flex-direction:column;gap:9px}
#authform input{
  padding:14px 13px;border:1px solid var(--line);background:var(--paper);
  font:400 15px/1.2 var(--body);color:var(--ink);border-radius:0;
}
#authform input:focus{outline:none;border-color:var(--ink)}
#authform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.err{color:#a3372b;letter-spacing:.04em;text-transform:none;font-size:12px;line-height:1.5}
.gbtn{display:flex;justify-content:center;min-height:44px}
.oror{text-align:center}

/* ---------- gates + share ---------- */
.gatescreen{justify-content:center}
.reflink{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.gatemeter{display:flex;flex-direction:column;gap:6px}
.gatemeter b{font:700 15px/1 var(--din);color:var(--ink)}
.reflink code{
  font:400 11px/1.5 var(--mono);color:var(--ink);word-break:break-all;
  background:var(--paper);padding:9px 10px;border:1px solid var(--line);
}
.socials{display:flex;flex-direction:column;gap:8px}
.socials .btn{text-decoration:none}
.sharecard{width:100%;height:auto;display:block;border:1px solid var(--line)}
.fakecard{display:flex;flex-direction:column;gap:10px;align-items:center;padding:22px 10px;text-align:center}
.fakecard .pts{font:700 46px/1 var(--din)}
.fakecard .pts em{font-style:normal;background:var(--yellow);padding:0 8px}

/* ---------- confetti (flat squares, no gradients) ---------- */
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;top:-10px;display:block;animation:conf linear forwards}
@keyframes conf{
  0%{transform:translateY(0) rotate(0)}
  100%{transform:translateY(340px) rotate(540deg);opacity:.15}
}
.verdict{position:relative}

/* ---------- screen transition ---------- */
.screen.enter > *{animation:slidein .28s ease both}
@keyframes slidein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.footer-note{padding:12px 18px 18px;text-align:center;display:flex;flex-direction:column;gap:9px;align-items:center}
.packbtn{
  display:inline-block;padding:9px 13px;border:1px solid var(--ink);background:var(--card);
  font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;transition:background .16s ease,color .16s ease;
}
.packbtn:hover{background:var(--ink);color:var(--paper)}

/* ---------- desktop stage: editorial frame around the phone column ---------- */
.stage-deco{display:none}
@media (min-width:1000px){
  body{
    background:
      radial-gradient(720px 480px at 78% -10%, rgba(255,230,0,.16), transparent 60%),
      repeating-linear-gradient(0deg, transparent 0 64px, rgba(21,24,23,.035) 64px 65px),
      repeating-linear-gradient(90deg, transparent 0 64px, rgba(21,24,23,.035) 64px 65px),
      #e7e9e2;
  }
  .app{
    border:1px solid var(--ink);
    box-shadow: 18px 18px 0 rgba(21,24,23,.10), 0 30px 80px rgba(21,24,23,.16);
    margin:26px 0;
    height:calc(100dvh - 52px);
  }
  .stage-deco{
    display:flex;position:fixed;top:0;bottom:0;pointer-events:none;z-index:0;
    flex-direction:column;justify-content:space-between;padding:34px 0;
  }
  .stage-deco.left{left:4vw;align-items:flex-start}
  .stage-deco.right{right:4vw;align-items:flex-end;text-align:right}
  .deco-word{
    font:700 min(11vw,150px)/0.88 var(--din);letter-spacing:-.03em;
    color:transparent;-webkit-text-stroke:1.5px rgba(21,24,23,.22);
    user-select:none;white-space:pre-line;
  }
  .deco-word em{font-style:normal;color:var(--yellow);-webkit-text-stroke:1.5px var(--ink)}
  .deco-meta{
    font:400 11px/1.9 var(--mono);letter-spacing:.18em;text-transform:uppercase;
    color:#6e7571;
  }
  .deco-meta b{display:block;color:var(--ink);font-weight:400}
  .deco-sq{display:flex;gap:8px;margin:14px 0}
  .deco-sq i{width:12px;height:12px;background:var(--yellow);border:1px solid var(--ink)}
  .deco-sq i:nth-child(2){background:var(--ink)}
  .deco-sq i:nth-child(3){background:transparent}
}
@media (min-width:1450px){
  .deco-word{font-size:170px}
}