/* Linguo — visual: cartões em pasta empilhados, selos-estrela, cores chapadas.
   Uma coluna de app (máx. 480px), navegação flutuante em pílula, lições em tela cheia. */
:root{
  --ink:#111111; --paper:#FFFFFF; --mist:#F6F6F1; --soft:#EFEFE9; --line:#E6E6DF; --muted:#66665E;
  --green:#CCF80C; --green-2:#111111; --lime-ink:#4E6600; --lime-soft:#F1FDC2; --violet:#6B4BEA; --violet-ink:#5536D6; --tomato:#F0502F;
  --lime:#CCF80C; --yellow:#FFE14A; --pink:#FFB3DE; --bad:#B8320A; --bad-soft:#FFE4DA; --good-soft:#F1FDC2;
  --night:#111111; --night-2:#1E1E1C; --night-3:#3A3A36; --night-muted:#B8B8B0;
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,sans-serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{touch-action:manipulation}
html,body{margin:0;min-height:100%;background:var(--mist);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45;-webkit-tap-highlight-color:transparent}
body.dark{background:var(--night)}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.015em;line-height:1.08;text-wrap:balance}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.muted{color:var(--muted)}
.eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.row{display:flex;gap:10px;align-items:center}
.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.col{display:flex;flex-direction:column;gap:12px;min-width:0}
[hidden]{display:none!important}

#app{max-width:480px;margin:0 auto;min-height:100vh;padding:calc(var(--safe-t) + 22px) 20px calc(var(--safe-b) + 112px);display:flex;flex-direction:column;gap:18px}
body.dark #app{color:#fff}

/* Botões */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;border-radius:18px;padding:12px 20px;font-weight:700;font-size:1.05rem;background:var(--ink);color:#fff;text-decoration:none;transition:transform .08s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.4;cursor:default}
.btn.green{background:var(--green);color:var(--ink)}
.btn.lime{background:var(--lime);color:var(--ink)}
.btn.light{background:var(--soft);color:var(--ink)}
.btn.tomato{background:var(--tomato)}
.btn.small{min-height:42px;font-size:.92rem;border-radius:14px;padding:8px 14px}
.btn.play{justify-content:flex-start;padding:10px 18px 10px 10px}
.btn.play .sq{width:44px;height:44px;border-radius:12px;border:2px solid currentColor;display:flex;align-items:center;justify-content:center}
.btn.play .grow{flex:1;text-align:left}
.link{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.round{position:relative;width:44px;height:44px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;flex:none}
.round.soft{background:var(--soft)}
.sq-play{width:40px;height:40px;border-radius:12px;background:var(--green);color:var(--ink);display:flex;align-items:center;justify-content:center;flex:none}
.sq-play svg{width:18px;height:18px}

/* Boas-vindas */
.welcome{background:var(--paper);margin:calc(-1 * (var(--safe-t) + 22px)) -20px 0;padding:calc(var(--safe-t) + 40px) 24px 28px;min-height:100vh;display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.welcome h1{font-size:clamp(3.2rem,17vw,4.4rem);font-weight:800;line-height:.9;letter-spacing:-.035em;text-transform:uppercase;position:relative}
.welcome .lede{font-size:1.06rem;color:#4A4A52;max-width:30ch}
.sticker{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--display);font-weight:800;line-height:1.05}
.sticker svg{position:absolute;inset:0;width:100%;height:100%}
.sticker span{position:relative}
.lvpills{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.lvpill{font-family:var(--display);font-weight:800;font-size:.82rem;padding:6px 12px;border-radius:999px}
.field{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.9rem}
.field input,.field select,.field textarea{border:2px solid var(--line);background:var(--paper);border-radius:14px;padding:12px 14px;font-weight:500;width:100%}
.field textarea{min-height:110px;resize:vertical}

/* Início */
.hello h1{font-size:2rem;font-weight:800}
.stats{display:flex;gap:12px;font-weight:700;font-size:.9rem;flex-wrap:wrap}
.stats span{display:flex;align-items:center;gap:4px}
.lvtag{border-radius:8px;padding:0 8px;font-family:var(--display);font-weight:800}
.goal{position:relative;background:var(--green);color:var(--ink);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:14px}
.goal p{text-align:center;font-weight:600;font-size:.95rem}
.digits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center}
.digits>div{display:flex;flex-direction:column;gap:6px;align-items:center}
.digits .d{display:flex;gap:4px}
.digits .d b{background:var(--green-2);color:var(--lime);border-radius:8px;width:34px;height:46px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:1.75rem;font-variant-numeric:tabular-nums}
.digits small{font-size:.76rem;opacity:.88}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sec-h h2{font-size:1.35rem;font-weight:800}
.sec-h span{font-size:.85rem;font-weight:700;color:var(--muted)}

/* Cartões em pasta */
.folders{display:flex;flex-direction:column}
.folder{position:relative;display:flex;flex-direction:column;text-align:left;width:100%;color:var(--fc-ink,#111111)}
.folder+.folder{margin-top:-26px}
.folder .tab{align-self:flex-start;background:var(--fc);border-radius:18px 18px 0 0;padding:10px 18px 4px;font-family:var(--display);font-weight:800;font-size:.95rem}
.folder .body{background:var(--fc);border-radius:0 22px 22px 22px;padding:8px 18px 40px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.folder.closed .body{flex-direction:row;align-items:center;justify-content:space-between;padding-top:10px;border-radius:22px}
.folder.closed .body b{font-family:var(--display);font-weight:700;font-size:1.15rem}
.folder.last .body{padding-bottom:22px}
.folder h3{font-size:1.6rem;font-weight:800;max-width:11ch}
.folder .ctx{font-size:.9rem;opacity:.92;max-width:26ch}
.lpills{display:flex;gap:6px;flex-wrap:wrap;position:relative}
.lp{display:flex;align-items:center;gap:5px;border-radius:999px;padding:7px 11px;font-size:.78rem;font-weight:700;background:rgba(255,255,255,.24)}
.lp.done{background:#fff;color:var(--ink)}
.lp.cur{background:var(--lime);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);font-weight:800}
.lp.lock{opacity:.7}
.lp svg{width:14px;height:14px}
.folder .cta{display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:#fff;border-radius:16px;padding:14px 18px;font-weight:700;position:relative}

/* Mascote */
.masc{position:relative;flex:none;display:block;object-fit:contain;filter:drop-shadow(0 3px 0 rgba(17,17,17,.14))}
.result .masc{align-self:center}

/* Navegação flutuante */
.nav{position:fixed;left:50%;bottom:calc(var(--safe-b) + 18px);transform:translateX(-50%);display:flex;gap:8px;background:var(--ink);padding:8px;border-radius:999px;z-index:20;box-shadow:0 10px 30px rgba(20,20,20,.25)}
body.dark .nav{background:var(--night-2)}
.nav a,.nav button{width:52px;height:52px;border-radius:50%;background:#2A2A2E;color:#fff;display:flex;align-items:center;justify-content:center;position:relative;text-decoration:none}
body.dark .nav a,body.dark .nav button{background:var(--night-3)}
.nav [aria-current="page"]{background:var(--lime)!important;color:var(--ink)}
.badge{position:absolute;top:5px;right:5px;min-width:17px;height:17px;border-radius:999px;background:var(--tomato);color:#fff;font-size:.65rem;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* Trilha completa */
.lvstack{display:flex;flex-direction:column}
.lvcard{background:var(--fc);color:var(--fc-ink);border-radius:24px 24px 0 0;padding:14px 18px 34px;display:flex;flex-direction:column;gap:12px}
.lvcard+.lvcard{margin-top:-22px}
.lvcard:last-child{border-radius:24px;padding-bottom:16px}
.lvcard .head{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left}
.lvcard .k{background:var(--ink);color:var(--fc);border-radius:10px;padding:4px 10px;font-family:var(--display);font-weight:800}
.lvcard .bars{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;max-width:240px}
.lvcard .bars i{height:10px;border-radius:999px;background:currentColor;opacity:.25}
.lvcard .bars i.on{opacity:1}
.urow{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.22);text-align:left;width:100%}
.urow .n{font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums}
.urow .dots{display:flex;gap:3px}
.urow .dots i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.3}
.urow .dots i.on{opacity:1}

/* Cartões genéricos */
.card{background:var(--paper);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:12px}
body.dark .card{background:var(--night-2)}
.note{font-size:.88rem;color:var(--muted)}
body.dark .note{color:var(--night-muted)}
.tip{display:flex;gap:10px;align-items:flex-start;background:var(--lime);color:var(--ink);border-radius:16px;padding:12px;font-size:.92rem}
.fix{display:flex;flex-direction:column;gap:3px;background:var(--mist);border-radius:16px;padding:12px 14px}
.fix s{color:var(--muted)}

/* Lição (tela cheia) */
#lesson{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;z-index:40;background:var(--paper);overflow-y:auto;-webkit-overflow-scrolling:touch}
.lw{max-width:480px;margin:0 auto;min-height:100%;padding:calc(var(--safe-t) + 16px) 20px calc(var(--safe-b) + 20px);display:flex;flex-direction:column;gap:18px}
.lbar{display:flex;align-items:center;gap:12px}
.prog{flex:1;height:10px;border-radius:999px;background:var(--line);overflow:hidden}
.prog i{display:block;height:100%;background:var(--ink);border-radius:999px;transition:width .3s}
.count{flex:none;background:var(--yellow);border-radius:12px;padding:8px 10px;font-weight:800;font-size:.88rem;font-family:var(--display)}
.lbody{flex:1;display:flex;flex-direction:column;gap:18px}
.q h1{font-size:1.75rem;font-weight:800}
.prompt{font-size:1.3rem;font-weight:700;line-height:1.3}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opts.one{grid-template-columns:1fr}
.opt{min-height:62px;border-radius:16px;background:var(--soft);font-weight:600;padding:10px 12px;text-align:center}
.opt[aria-pressed="true"]{background:var(--lime);box-shadow:inset 0 0 0 2px var(--ink);font-weight:700}
.opt.right{background:var(--lime);box-shadow:inset 0 0 0 2px var(--lime-ink)}
.opt.wrong{background:var(--bad-soft);box-shadow:inset 0 0 0 2px var(--bad)}
.dlg{background:var(--pink);border-radius:24px;padding:18px 14px;display:flex;flex-direction:column;gap:12px}
.bub{display:flex;gap:8px;align-items:flex-end}
.bub.me{flex-direction:row-reverse}
.bub .t{background:#fff;border-radius:16px 16px 16px 4px;padding:10px 12px;max-width:78%;font-size:.98rem}
.bub.me .t{border-radius:16px 16px 4px 16px}
.bub .t small{display:block;color:var(--muted);font-size:.82rem;margin-top:3px}
.built{min-height:64px;border-bottom:2px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;padding-bottom:10px}
.bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.w{padding:10px 14px;border-radius:14px;background:var(--soft);font-weight:700}
.w.used{visibility:hidden}
.ans{border:2px solid var(--line);border-radius:16px;padding:14px;min-height:96px;width:100%;resize:none;font-size:1.05rem}
.foot{position:sticky;bottom:0;z-index:2;margin:0 -20px calc(-1 * (var(--safe-b) + 20px));padding:14px 20px calc(var(--safe-b) + 18px);background:var(--paper);display:flex;flex-direction:column;gap:12px}
.foot.ok{background:var(--good-soft)}
.expl{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.75);border-radius:14px;padding:10px 12px;font-size:.93rem;line-height:1.4}
.foot.no{background:var(--bad-soft)}
.foot .msg{font-family:var(--display);font-weight:800;font-size:1.2rem}
.foot.ok .msg{color:var(--lime-ink)}
.foot.no .msg{color:var(--bad)}
.chunk{background:var(--fc,#6B4BEA);color:var(--fc-ink,#fff);border-radius:26px;padding:24px 20px;min-height:280px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.chunk .en{font-family:var(--display);font-weight:800;font-size:1.75rem;line-height:1.15}
.chunk .pt{font-size:1.02rem;opacity:.92}
.speakres{display:flex;flex-direction:column;gap:8px;background:var(--mist);border-radius:18px;padding:14px}
.speakres .words{display:flex;flex-wrap:wrap;gap:6px}
.speakres .words span{padding:4px 9px;border-radius:9px;font-weight:700;font-size:.92rem;background:var(--good-soft);color:var(--lime-ink)}
.speakres .words span.miss{background:var(--bad-soft);color:var(--bad)}
.mic{width:72px;height:72px;border-radius:50%;background:var(--lime);color:var(--ink);display:flex;align-items:center;justify-content:center;flex:none;transition:box-shadow .2s}
.mic.small{width:52px;height:52px}
.mic svg{width:30px;height:30px}
.mic.small svg{width:24px;height:24px}
.mic.rec{background:var(--tomato);color:#fff;box-shadow:0 0 0 8px rgba(240,80,47,.3);animation:pulse 1.2s ease-in-out infinite}
.mic.busy{opacity:.6}
@keyframes pulse{50%{box-shadow:0 0 0 14px rgba(240,80,47,.12)}}
.result{align-items:center;text-align:center;justify-content:center}
.score{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center;flex:none}
.score svg{position:absolute;inset:0;width:100%;height:100%}
.score div{position:relative;display:flex;flex-direction:column;align-items:center;color:var(--ink)}
.score b{font-family:var(--display);font-weight:800;font-size:3rem;line-height:1;font-variant-numeric:tabular-nums}
.score small{font-weight:700;font-size:.78rem}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
.tile{border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;text-align:left}
.tile span{font-size:.84rem;font-weight:600}
.tile b{font-family:var(--display);font-weight:800;font-size:1.65rem;font-variant-numeric:tabular-nums}

/* Conversa por voz */
.stage{position:relative;background:var(--night);color:#fff;margin:calc(-1 * (var(--safe-t) + 16px)) -20px 0;padding:calc(var(--safe-t) + 16px) 20px 22px;border-radius:0 0 34px 34px;display:flex;flex-direction:column;gap:14px;min-height:0}
.stage .round{color:var(--ink)}
.stage.live{position:sticky;top:calc(-1 * (var(--safe-t) + 16px));z-index:3;padding-bottom:16px;gap:8px}
.stage.live .hero{min-height:0}
.stage .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stage .who{display:flex;flex-direction:column;align-items:center;text-align:center}
.stage .who b{font-family:var(--display);font-size:1.1rem;font-variant-numeric:tabular-nums}
.stage .who small{font-size:.78rem;opacity:.85}
.stage .hero{flex:1;display:flex;align-items:center;justify-content:center;position:relative}
.stage .name{position:absolute;right:6px;top:8px;background:#fff;color:var(--ink);border-radius:14px 14px 4px 14px;padding:8px 12px;font-weight:700;font-size:.88rem;max-width:60%}
.stage .say{position:absolute;left:0;bottom:4px;max-width:86%;background:rgba(20,20,20,.55);border-radius:14px;padding:8px 12px;font-size:.92rem}
.controls{align-self:center;display:flex;align-items:center;gap:10px;background:#fff;border-radius:22px;padding:8px}
.controls .c{width:52px;height:52px;border-radius:16px;background:var(--soft);color:var(--ink);display:flex;align-items:center;justify-content:center}
.controls .c.end{background:var(--tomato);color:#fff}
.chat{display:flex;flex-direction:column;gap:12px}
.m-ai{align-self:flex-start;max-width:84%;display:flex;flex-direction:column;gap:4px}
.m-ai .t{background:var(--violet);color:#fff;border-radius:16px 16px 16px 4px;padding:10px 13px}
.m-me{align-self:flex-end;max-width:86%;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.m-me .t{background:var(--yellow);border-radius:16px 16px 4px 16px;padding:10px 13px}
.m-ai small,.m-me small{font-size:.72rem;color:var(--muted)}
.wave{display:inline-flex;align-items:center;gap:3px;height:20px;vertical-align:middle;margin-right:8px}
.wave i{width:3px;border-radius:2px;background:var(--ink)}
.composer{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.composer textarea{border:2px solid var(--line);border-radius:16px;padding:12px;min-height:52px;height:52px;resize:none}

/* Ajuda no roleplay */
.helpbar{display:flex;gap:8px;flex-wrap:wrap}
.hintbox{background:var(--mist);gap:10px}
.hintopt{display:flex;flex-direction:column;gap:8px;background:var(--paper);border-radius:16px;padding:12px}

/* Progresso (tema escuro) */
.dk .card{background:var(--night-2);color:#fff}
.chartbars{display:flex;align-items:flex-end;gap:8px;height:90px}
.chartbars i{flex:1;border-radius:8px;background:var(--night-3);min-height:6px}
.chartbars i.hi{background:var(--lime)}
.weekbars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:end;height:110px}
.weekbars div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;font-size:.72rem;color:var(--night-muted);font-weight:700}
.weekbars i{width:100%;max-width:30px;border-radius:8px 8px 4px 4px;background:var(--night-3);min-height:5px}
.weekbars i.hit{background:var(--yellow)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600}
.toggle input{width:48px;height:28px;accent-color:var(--lime)}
.dk .field input,.dk .field select{background:var(--night-3);border-color:var(--night-3);color:#fff}

/* Avisos */
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--safe-b) + 96px);z-index:60;background:var(--ink);color:#fff;font-weight:700;padding:12px 16px;border-radius:14px;max-width:88vw;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}
body.dark #toast{background:var(--lime);color:var(--ink)}
.modal{position:fixed;inset:0;z-index:70;background:rgba(20,20,20,.5);display:flex;align-items:flex-end;justify-content:center}
.modal .sheet{background:var(--paper);color:var(--ink);width:100%;max-width:480px;border-radius:26px 26px 0 0;padding:22px 20px calc(var(--safe-b) + 22px);display:flex;flex-direction:column;gap:14px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Conversa por voz contínua: orbe que reage a quem fala (o JS muda --lv de 0 a 1) */
.stage.call{position:sticky;top:calc(-1 * (var(--safe-t) + 16px));z-index:3;align-items:stretch;gap:10px;padding-bottom:18px}
.orb{--lv:0;--oc1:#FFFFFF;--oc2:#CCF80C;position:relative;width:140px;height:140px;align-self:center;margin:14px 0 10px}
.orb i{position:absolute;inset:0;border-radius:50%;will-change:transform}
.orb #orbface{position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);z-index:3;pointer-events:none}
.orb i:nth-child(1){background:radial-gradient(circle at 34% 30%,#fff 0,var(--oc1) 32%,var(--oc2) 78%);transform:scale(calc(.72 + var(--lv) * .32));box-shadow:0 0 calc(14px + var(--lv) * 40px) var(--oc1);z-index:2}
.orb i:nth-child(2){border:2px solid var(--oc1);opacity:calc(.18 + var(--lv) * .5);transform:scale(calc(.9 + var(--lv) * .22))}
.orb i:nth-child(3){border:2px solid var(--oc1);opacity:calc(.08 + var(--lv) * .35);transform:scale(calc(1.02 + var(--lv) * .34))}
.orb[data-state=voce]{--oc1:#F8F65A;--oc2:#8FB800}
.orb[data-state=falando]{--oc1:#FFE14A;--oc2:#6B4BEA}
.orb[data-state=pensando]{--oc1:#C9B8FF;--oc2:#5536D6}
.orb[data-state=pensando] i:nth-child(1){background:conic-gradient(from 0deg,#6B4BEA,#CCF80C,#FFE14A,#6B4BEA);animation:orbspin 1.4s linear infinite}
.orb[data-state=conectando] i:nth-child(1),.orb[data-state=pausada] i:nth-child(1),.orb[data-state=encerrada] i:nth-child(1){opacity:.7}
.orb[data-state=conectando] i:nth-child(2){animation:orbping 1.2s ease-out infinite}
@keyframes orbspin{to{transform:scale(calc(.72 + var(--lv) * .32)) rotate(360deg)}}
@keyframes orbping{from{transform:scale(.8);opacity:.6}to{transform:scale(1.25);opacity:0}}
.stage .vs{text-align:center;font-weight:700;min-height:1.4em;margin:0}
.stage.call .controls{margin-top:2px}
/* Trilhas */
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.trk{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--paper);color:var(--ink);border:2px solid var(--line);border-radius:16px;padding:10px 12px;font:inherit;cursor:pointer}
.trk .ic{font-size:1.3rem;line-height:1}
.trk b{font-family:var(--display);font-weight:800;font-size:1rem}
.trk small{font-size:.76rem;color:var(--muted);line-height:1.25}
.trk.on{background:var(--lime);border-color:var(--ink)}
.trk.on small{color:var(--ink)}
.trkchip{align-self:flex-start;display:inline-flex;gap:6px;align-items:center;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-weight:700;font-size:.9rem;color:var(--ink);cursor:pointer}