@font-face{font-family:"PlexC";src:url(/fonts/plexcond-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"PlexC";src:url(/fonts/plexcond-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Plex";src:url(/fonts/plexsans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url(/fonts/plexsans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Mono";src:url(/fonts/mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Mono";src:url(/fonts/mono-500.woff2) format("woff2");font-weight:500;font-display:swap}
/* ============================================================================
   Nux — the surface.
   Paper ground, ink type, one accent that means exactly one thing: deviation.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts -- */

/* --------------------------------------------------------------- tokens -- */
:root{
  /* Ground and ink */
  --ground:#0A0B0D;
  --raised:#101216;
  --sunk:#15181D;
  --ink:#EDEEF0;
  --ink-soft:#9BA1AB;
  --ink-faint:#7B818C;

  /* The accent means DEVIATION. Nothing healthy is ever this colour. */
  --accent:#FF6B2C;
  --accent-soft:#2A1710;
  --accent-ink:#0A0B0D;

  --line:rgba(255,255,255,.11);
  --line-strong:rgba(255,255,255,.19);

  /* Shadows tinted to the paper hue, never neutral black */
  --sh:220 40% 2%;
  --e1:0 1px 2px hsl(var(--sh)/.06), 0 1px 3px hsl(var(--sh)/.05);
  --e2:0 1px 2px hsl(var(--sh)/.05), 0 6px 16px -4px hsl(var(--sh)/.12);
  --e3:0 2px 4px hsl(var(--sh)/.05), 0 16px 34px -8px hsl(var(--sh)/.16),
       0 40px 70px -30px hsl(var(--sh)/.14);

  /* One radius scale */
  --r1:7px; --r2:11px; --r3:17px; --r4:24px;

  /* 4px spacing base */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;   --s5:1.5rem;
  --s6:2rem;   --s7:3rem;   --s8:4rem;   --s9:6rem;

  --gutter:clamp(1rem,4.5vw,2.5rem);
  --thread-w:640px;
  --rail-w:264px;

  --font:"Plex",system-ui,sans-serif;
  --mono:"Mono",ui-monospace,monospace;

  --ease:cubic-bezier(.23,1,.32,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  /* engine token overrides — the engine derives from these */
  --sc-canvas:var(--ground);
  --sc-surface:var(--raised);
  --sc-ink:var(--ink);
  --sc-ink-soft:var(--ink-soft);
  --sc-accent:var(--accent);
  --sc-accent-ink:var(--accent-ink);
  --sc-font-display:var(--font);
  --sc-font-text:var(--font);
  --sc-font-mono:var(--mono);
  --sc-shadow-color:var(--sh);
}


/* light is an explicit choice, same contract as the rest of the site */
html[data-theme="light"]{
  --ground:#FFFFFF; --raised:#FAFAFA; --sunk:#F2F3F5;
  --ink:#0C0E11; --ink-soft:#4E545E; --ink-faint:#5F656D;
  --accent:#B83C08; --accent-soft:#FDF1EE; --accent-ink:#FFFFFF;
  --line:rgba(12,14,17,.11); --line-strong:rgba(12,14,17,.19);
  --sh:38 12% 32%;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ground);color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-variant-numeric:tabular-nums;
  font-optical-sizing:auto;
}

/* Browser surfaces carry the design too */
::selection{background:var(--accent);color:var(--accent-ink)}
:root{caret-color:var(--accent);accent-color:var(--accent)}
:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r1)
}
@supports(scrollbar-width:thin){html{scrollbar-color:var(--line-strong) transparent;scrollbar-width:thin}}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.07em}

.u-hide{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ====================================================== app shell ======== */
.app{display:grid;grid-template-columns:1fr;min-height:100svh}

/* --- the rail (desktop nav, in the app's own idiom) --- */
.rail{display:none}

@media (min-width:1000px){
  .app{grid-template-columns:var(--rail-w) 1fr}
  .rail{
    display:flex;flex-direction:column;gap:var(--s5);
    position:sticky;top:0;height:100svh;padding:var(--s5) var(--s4);
    border-right:1px solid var(--line);background:var(--ground);z-index:20;
  }
}

.rail__brand,.status__brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit}
.rail__acct{
  border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3);
  background:var(--raised);box-shadow:var(--e1)
}
.rail__acctname{font-weight:600;font-size:.875rem;letter-spacing:-.01em}
.rail__state{
  display:flex;align-items:center;gap:6px;margin-top:5px;
  font-family:var(--mono);font-size:.6875rem;color:var(--ink-soft);letter-spacing:.01em
}
.dot{width:6px;height:6px;border-radius:50%;background:#1B9E5A;flex:none}
.dot--live{box-shadow:0 0 0 0 rgba(27,158,90,.5);animation:pulse 2.6s var(--ease-soft) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(27,158,90,.45)}70%{box-shadow:0 0 0 7px rgba(27,158,90,0)}100%{box-shadow:0 0 0 0 rgba(27,158,90,0)}}

.rail__label{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:var(--s2)
}
.rail__cmds{display:flex;flex-direction:column;gap:1px;overflow-y:auto;flex:1;min-height:0}
.rail__cmd{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  font-family:var(--mono);font-size:.75rem;color:var(--ink-soft);
  padding:5px 8px;border-radius:var(--r1);border:0;background:none;cursor:pointer;
  text-align:left;width:100%;transition:background 140ms var(--ease),color 140ms var(--ease)
}
.rail__cmd em{font-style:normal;color:var(--ink-faint);font-size:.6875rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;text-align:right}
.rail__cmd>span:first-child{flex:none}
@media (hover:hover) and (pointer:fine){
  .rail__cmd:hover{background:var(--sunk);color:var(--ink)}
}
.rail__cmd:active{transform:translateY(1px)}
.rail__foot{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:.75rem;color:var(--ink-faint);padding-top:var(--s4);border-top:1px solid var(--line)}
.rail__foot a{text-decoration:none}
@media (hover:hover){.rail__foot a:hover{color:var(--ink);text-decoration:underline}}

/* --- status bar (mobile chrome, and the alert dock on every size) --- */
.status{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:var(--s3);
  padding:10px var(--gutter);
  background:color-mix(in oklab,var(--ground) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.status__id{display:flex;align-items:center;gap:8px;min-width:0}
.status__name{font-weight:600;font-size:.875rem;letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status__meta{font-family:var(--mono);font-size:.6875rem;color:var(--ink-soft);display:flex;align-items:center;gap:5px}
.status__spacer{flex:1}
@media (min-width:1000px){.status__brand{display:none}}

/* the docked alert badge — the signature move's residue */
.badge{
  display:none;align-items:center;gap:6px;flex:none;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  color:var(--accent);background:var(--accent-soft);
  border:1px solid color-mix(in oklab,var(--accent) 28%,transparent);
  padding:4px 9px;border-radius:100px;cursor:pointer;
  transition:transform 140ms var(--ease),background 140ms var(--ease)
}
.badge.is-on{display:inline-flex;animation:badgeIn .5s var(--ease) both}
@keyframes badgeIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@media (hover:hover) and (pointer:fine){.badge:hover{background:color-mix(in oklab,var(--accent) 16%,var(--accent-soft))}}
.badge:active{transform:scale(.97)}

/* ====================================================== the thread ======= */
.thread{
  width:100%;max-width:var(--thread-w);margin-inline:auto;
  padding:0 var(--gutter);
  display:flex;flex-direction:column;
}

.msg{display:flex;flex-direction:column;margin-block:var(--s3)}
.msg--out{align-items:flex-end}
.msg--in{align-items:flex-start}

.bubble{
  max-width:min(88%,470px);
  padding:11px 15px;border-radius:var(--r3);
  font-size:.9375rem;line-height:1.5;
  box-shadow:var(--e1)
}
.msg--out .bubble{
  background:var(--ink);color:var(--ground);
  border-bottom-right-radius:var(--r1);
  font-family:var(--mono);font-size:.875rem;font-weight:400
}
.msg--in .bubble{
  background:var(--raised);border:1px solid var(--line);
  border-bottom-left-radius:var(--r1)
}
.msg__who{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:5px;padding-inline:3px
}

/* system line — also the page's real <h1> at the top of the thread */
.sys{
  display:flex;align-items:center;gap:var(--s3);
  margin-block:var(--s6) var(--s5);
  font-family:var(--mono);font-size:.6875rem;font-weight:400;
  letter-spacing:.06em;color:var(--ink-faint);text-transform:none
}
.sys::before,.sys::after{content:"";height:1px;background:var(--line);flex:1}
.sys--tight{margin-block:var(--s5) var(--s4)}

/* ====================================================== metric card ====== */
.card{
  width:100%;max-width:min(94%,500px);
  background:var(--raised);border:1px solid var(--line);
  border-radius:var(--r2);box-shadow:var(--e2);overflow:hidden
}
.card__head{padding:13px 16px 11px;border-bottom:1px solid var(--line)}
.card__eyebrow{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint)
}
.card__title{font-size:1.0625rem;font-weight:700;letter-spacing:-.022em;margin-top:3px;line-height:1.2}
.card__sub{font-family:var(--mono);font-size:.6875rem;color:var(--ink-soft);margin-top:4px}

.rows{display:grid;grid-template-columns:1fr auto;gap:0}
.row{display:contents}
.row__k,.row__v{padding:9px 16px;border-bottom:1px solid var(--line)}
.row__k{font-size:.8125rem;color:var(--ink-soft)}
.row__v{font-family:var(--mono);font-size:.8125rem;font-weight:500;text-align:right;white-space:nowrap}
.rows .row:last-child .row__k,.rows .row:last-child .row__v{border-bottom:0}
.delta{font-size:.6875rem;font-weight:400;color:var(--ink-faint);margin-left:7px}
.delta--bad{color:var(--accent);font-weight:500}

.card__foot{padding:10px 16px;background:var(--sunk);font-family:var(--mono);font-size:.6875rem;color:var(--ink-soft)}

/* the drawn baseline chart */
.spark{display:block;width:calc(100% - 32px);height:52px;margin:var(--s2) 16px var(--s3)}
.spark__base{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:2 3}
.spark__line{fill:none;stroke:var(--ink);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.spark__hit{fill:var(--accent)}

/* ====================================================== the alert ======== */
.alert-slot{position:relative;min-height:1px}
.alert{
  position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 12px);
  width:min(420px,calc(100vw - 24px));
  z-index:60;
  transform:translate(-50%,-160%);
  opacity:0;
  background:var(--raised);
  border:1px solid color-mix(in oklab,var(--accent) 30%,var(--line));
  border-radius:var(--r2);box-shadow:var(--e3);
  padding:12px 14px;
  cursor:pointer;
  transition:transform .62s var(--ease),opacity .38s var(--ease-soft);
  will-change:transform,opacity
}
.alert.is-in{transform:translate(-50%,0);opacity:1}
.alert.is-gone{transform:translate(-50%,-160%);opacity:0}
.alert__top{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.alert__app{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.alert__now{margin-left:auto;font-family:var(--mono);font-size:.625rem;color:var(--ink-faint)}
.alert__title{font-size:.9375rem;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.alert__body{font-family:var(--mono);font-size:.75rem;color:var(--ink-soft);margin-top:5px;line-height:1.5}
.alert__hot{color:var(--accent);font-weight:500}

@media (prefers-reduced-motion:reduce){
  .alert{transition:opacity .3s linear;transform:translate(-50%,0)}
  .alert.is-gone{transform:translate(-50%,0)}
  .dot--live{animation:none}
}

/* ====================================================== console ========== */
.console{width:100%;max-width:min(94%,500px)}
.console__form{display:flex;align-items:center;gap:var(--s2);
  background:var(--raised);border:1px solid var(--line-strong);border-radius:var(--r3);
  padding:5px 6px 5px 14px;box-shadow:var(--e2);
  transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease)}
.console__form:focus-within{border-color:var(--ink);box-shadow:var(--e2),0 0 0 3px rgba(20,21,26,.06)}
.console__caret{font-family:var(--mono);color:var(--ink-faint);font-size:.875rem;flex:none}
.console__in{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-family:var(--mono);font-size:.875rem;color:var(--ink);padding:7px 0
}
.console__in::placeholder{color:var(--ink-faint)}
.console__go{
  flex:none;border:0;cursor:pointer;border-radius:100px;
  background:var(--ink);color:var(--ground);
  font-family:var(--font);font-weight:600;font-size:.8125rem;letter-spacing:-.01em;
  padding:8px 15px;transition:transform 120ms var(--ease),opacity 120ms var(--ease)
}
@media (hover:hover) and (pointer:fine){.console__go:hover{opacity:.86}}
.console__go:active{transform:translateY(1px)}
.console__hint{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3)
}
.chip{
  font-family:var(--mono);font-size:.6875rem;color:var(--ink-soft);
  background:var(--sunk);border:1px solid var(--line);border-radius:100px;
  padding:4px 10px;cursor:pointer;
  transition:background 140ms var(--ease),color 140ms var(--ease),transform 120ms var(--ease)
}
@media (hover:hover) and (pointer:fine){.chip:hover{background:var(--raised);color:var(--ink)}}
.chip:active{transform:translateY(1px)}

/* ====================================================== CTA ============== */
.go{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:.9375rem;letter-spacing:-.012em;
  padding:12px 20px;border-radius:100px;text-decoration:none;border:1px solid transparent;
  transition:transform 130ms var(--ease),opacity 130ms var(--ease),background 130ms var(--ease);
  white-space:nowrap
}
.btn--pri{background:var(--ink);color:var(--ground)}
.btn--sec{background:transparent;color:var(--ink);border-color:var(--line-strong)}
@media (hover:hover) and (pointer:fine){
  .btn--pri:hover{opacity:.87}
  .btn--sec:hover{background:var(--raised);border-color:var(--ink)}
}
.btn:active{transform:translateY(1px)}

.stage{position:relative;z-index:1}

/* ====================================================== footer =========== */
.foot{
  border-top:1px solid var(--line);margin-top:var(--s9);
  padding:var(--s6) var(--gutter) var(--s7)
}
.foot__in{max-width:var(--thread-w);margin-inline:auto;display:flex;flex-wrap:wrap;gap:var(--s5);align-items:flex-start;justify-content:space-between}
.foot__links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);font-size:.875rem;color:var(--ink-soft)}
.foot__links a{text-decoration:none}
@media (hover:hover){.foot__links a:hover{color:var(--ink);text-decoration:underline}}
.foot__note{font-family:var(--mono);font-size:.6875rem;color:var(--ink-faint);width:100%}

/* ====================================================== wordmark ========= */
.wm{font-family:"PlexC";font-weight:700;letter-spacing:-.02em;font-size:1.125rem;line-height:1;color:var(--ink)}
.mark{display:block;flex:none}

/* ====================================================== acts ============= */
[data-sc-act]{position:relative}
.act{padding-block:var(--s6)}
.act__stage{
  display:flex;flex-direction:column;justify-content:center;
  padding-block:var(--s6);overflow:clip
}
.act__stage>.thread{width:100%}
/* authored silence, sized to be felt without reading as a broken page */
.quiet{min-height:30svh}

@media (max-width:640px){
  :root{--thread-w:100%}
  .bubble{max-width:92%}
  .card,.console{max-width:100%}
  .btn{flex:1 1 auto;justify-content:center}
}

/* author display rules would otherwise defeat the UA [hidden] rule */
[hidden]{display:none!important}


/* ====================================================== idle state ======= */
/* The peak act holds this while nothing is happening. The emptiness is the
   point, but it has to look composed rather than unfinished. */
.idle{
  display:flex;flex-direction:column;align-items:center;gap:var(--s4);
  padding-block:var(--s7);transition:opacity .5s var(--ease)
}
.idle.is-out{opacity:0}
.idle__bar{
  display:flex;align-items:center;gap:8px;
  width:min(100%,340px);padding:11px 15px;
  border:1px dashed var(--line-strong);border-radius:var(--r3);
  background:color-mix(in oklab,var(--raised) 55%,transparent)
}
.idle__caret{
  width:8px;height:17px;border-radius:2px;background:var(--ink-faint);
  animation:blink 1.15s steps(2,start) infinite
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.idle__note{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.09em;
  color:var(--ink-faint);text-align:center
}
@media (prefers-reduced-motion:reduce){.idle__caret{animation:none}}

/* the conversation tail, carried into the peak so the pin is never a bare screen */
.tail{pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 62%);
  mask-image:linear-gradient(180deg,transparent,#000 62%)}
/* faded history reads as light and recessive, never as a grey slab */
.tail .bubble{box-shadow:none;color:var(--ink-soft)}
.tail .msg--out .bubble{background:var(--sunk);color:var(--ink-soft)}
.tail .msg--in .bubble{background:transparent;border-color:transparent}
.tail .msg__who{color:var(--ink-faint)}

/* ====================================================== documents ======== */
/* Pricing and Privacy are documents, not the surface. They keep the app shell
   because in a real product these live behind a settings panel. */
.doc{width:100%;max-width:var(--thread-w);margin-inline:auto;padding:var(--s7) var(--gutter) 0}
.doc__kicker{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint)}
.doc__title{font-size:clamp(1.9rem,1.3rem+2.6vw,2.9rem);font-weight:800;
  letter-spacing:-.04em;line-height:1.05;margin-top:var(--s3);text-wrap:balance}
.doc__lede{color:var(--ink-soft);margin-top:var(--s4);max-width:58ch;font-size:1.0625rem;text-wrap:pretty}
.doc__meta{font-family:var(--mono);font-size:.6875rem;color:var(--ink-faint);margin-top:var(--s4)}

.doc h2{font-size:1.0625rem;font-weight:700;letter-spacing:-.02em;
  margin-top:var(--s7);margin-bottom:var(--s3)}
.doc h2:first-of-type{margin-top:var(--s6)}
.doc p{color:var(--ink-soft);max-width:62ch;text-wrap:pretty}
.doc p+p{margin-top:var(--s3)}
.doc ul{list-style:none;margin-top:var(--s3);display:flex;flex-direction:column;gap:var(--s3)}
.doc li{color:var(--ink-soft);max-width:62ch;padding-left:var(--s5);position:relative;text-wrap:pretty}
.doc li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--line-strong)}
.doc strong{color:var(--ink);font-weight:600}
.doc code,.doc__code{font-family:var(--mono);font-size:.875em;background:var(--sunk);
  padding:1px 5px;border-radius:var(--r1);color:var(--ink)}
.doc a:not(.btn){color:var(--ink);text-decoration-color:var(--line-strong)}
@media (hover:hover){.doc a:not(.btn):hover{text-decoration-color:var(--accent)}}
.doc__rule{height:1px;background:var(--line);margin-block:var(--s7)}

/* pricing plate */
.plate{border:1px solid var(--line);border-radius:var(--r2);background:var(--raised);
  box-shadow:var(--e2);overflow:hidden;margin-top:var(--s6)}
.plate__head{padding:var(--s5);border-bottom:1px solid var(--line)}
.plate__tier{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint)}
.plate__fig{display:flex;align-items:baseline;gap:8px;margin-top:var(--s3)}
.plate__amt{font-size:3rem;font-weight:800;letter-spacing:-.05em;line-height:1}
.plate__per{font-family:var(--mono);font-size:.8125rem;color:var(--ink-soft)}
.plate__list{padding:var(--s4) var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.plate__row{display:flex;gap:var(--s3);align-items:flex-start;font-size:.9375rem;color:var(--ink-soft)}
.plate__row svg{flex:none;margin-top:3px;color:var(--ink-faint)}
.plate__row strong{color:var(--ink);font-weight:600}
.plate__foot{padding:var(--s4) var(--s5);background:var(--sunk);
  font-family:var(--mono);font-size:.6875rem;color:var(--ink-soft);line-height:1.6}

/* doc rail: a short index rather than an empty column */
.rail__nav{display:flex;flex-direction:column;gap:1px}
.rail__navlink{display:block;padding:6px 8px;border-radius:var(--r1);text-decoration:none;
  font-size:.875rem;color:var(--ink-soft);transition:background 140ms var(--ease),color 140ms var(--ease)}
.rail__navlink[aria-current="page"]{color:var(--ink);font-weight:600;background:var(--sunk)}
@media (hover:hover) and (pointer:fine){.rail__navlink:hover{background:var(--sunk);color:var(--ink)}}

/* theme toggle, shared shape with the rest of the site */
.tt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);
  background:transparent;color:var(--ink-soft);cursor:pointer;padding:5px 9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.tt:hover{color:var(--ink);border-color:var(--ink)}
.tt__d{width:9px;height:9px;border:1.5px solid currentColor;border-radius:50%;
  background:linear-gradient(90deg,currentColor 50%,transparent 50%)}