/* ==========================================================================
   Tatroid Neural Core: hero stage, match engine demo, guide assistant.
   Uses the tokens from style-dm.css (--bg, --ink, --accent ...), so it
   follows the site's light and dark themes. The stage itself is always dark.
   ========================================================================== */

:root{
  --core-bg:      #0B0C13;
  --core-line:    rgba(140,155,255,.28);
  --core-text:    #E6E9FF;
  --core-dim:     #8D93B8;
}

/* ---------- Hero: copy + core ---------- */
.dm-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:56px;
  align-items:center;
}
.dm-hero-grid .dm-hero-inner{ max-width:none; }
.dm-core-wrap{ display:flex; flex-direction:column; gap:14px; min-width:0; }

.dm-core{
  position:relative;
  width:100%;
  max-width:560px;
  aspect-ratio:1 / 1;
  justify-self:end;
  border-radius:24px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 46%, rgba(70,84,200,.34), rgba(11,12,19,0) 70%),
    var(--core-bg);
  border:1px solid var(--core-line);
  overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(30,40,140,.55);
}
.dm-core canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  cursor:grab;
  touch-action:pan-y;
}
.dm-core canvas:active{ cursor:grabbing; }
.dm-core-tag, .dm-core-meta{
  position:absolute;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--core-dim);
  pointer-events:none;
}
.dm-core-tag{ top:14px; left:16px; display:flex; align-items:center; gap:8px; }
.dm-core-tag i{
  width:7px; height:7px; border-radius:50%;
  background:#2FCB9A; box-shadow:0 0 10px #2FCB9A;
  animation:coreBlink 2.4s ease-in-out infinite;
}
.dm-core-meta{ left:16px; right:16px; bottom:14px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.dm-core-meta b{ color:var(--core-text); font-weight:500; font-variant-numeric:tabular-nums; }
@keyframes coreBlink{ 50%{ opacity:.35; } }

.dm-core-legend{ display:flex; flex-wrap:wrap; gap:8px; max-width:560px; justify-self:end; }
.dm-core-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--ink-soft);
  font:600 13px/1 var(--font-body);
  cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.dm-core-chip i{ width:8px; height:8px; border-radius:50%; background:var(--chip,#6C7CFF); flex:none; }
.dm-core-chip:hover{ border-color:var(--ink); color:var(--ink); }
.dm-core-chip[aria-pressed="true"]{ border-color:var(--chip,var(--accent)); color:var(--ink); background:var(--accent-soft); }
.dm-core-caption{
  max-width:560px; justify-self:end; width:100%;
  min-height:4.6em;
  font-size:14.5px;
  color:var(--ink-soft);
}
.dm-core-caption b{ display:block; color:var(--ink); font-family:var(--font-display); font-size:16px; margin-bottom:2px; }
.dm-core-caption a{ color:var(--accent); font-weight:600; }
.dm-core-caption a:hover{ text-decoration:underline; }

@media (max-width:960px){
  .dm-hero-grid{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .dm-core, .dm-core-legend, .dm-core-caption{ justify-self:stretch; max-width:none; }
  .dm-core{ max-height:520px; aspect-ratio:1 / .92; }
}

/* ---------- Match engine ---------- */
.dm-match-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:40px;
  align-items:start;
}
.dm-match-panel{ display:flex; flex-direction:column; gap:22px; min-width:0; }
.mm-group{ display:flex; flex-direction:column; gap:10px; border:0; margin:0; padding:0; min-width:0; }
.mm-group legend, .mm-label{
  padding:0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.mm-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.mm-chip{
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:var(--bg);
  color:var(--ink-soft);
  font:600 13.5px/1.1 var(--font-body);
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.mm-chip:hover{ border-color:var(--ink); color:var(--ink); }
.mm-chip[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--accent); color:var(--ink); }
.mm-seg{ display:inline-flex; border:1px solid var(--line-strong); border-radius:999px; padding:3px; gap:2px; align-self:flex-start; background:var(--bg-soft); }
.mm-seg button{
  padding:8px 16px; border:0; border-radius:999px; background:transparent;
  color:var(--ink-soft); font:700 13.5px/1 var(--font-body); cursor:pointer;
}
.mm-seg button[aria-pressed="true"]{ background:var(--ink); color:var(--bg); }

.mm-results-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.mm-status{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); }
.mm-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.mm-item{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) minmax(70px,150px) 46px;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--bg);
  opacity:1;
  transform:none;
}
.mm-item.is-top{ border-color:var(--accent); background:var(--accent-soft); }
.mm-item.is-in{ animation:mmIn .45s cubic-bezier(.16,.8,.3,1) both; animation-delay:var(--d,0ms); }
@keyframes mmIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.mm-av{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-soft-2); color:var(--accent-ink);
  font:800 13px var(--font-display);
}
.mm-main{ min-width:0; }
.mm-main b{ display:block; font:700 14.5px/1.25 var(--font-display); color:var(--ink); overflow-wrap:anywhere; }
.mm-main span{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px; overflow-wrap:anywhere; }
.mm-bar{ height:6px; border-radius:999px; background:var(--line); overflow:hidden; }
.mm-bar i{ display:block; height:100%; width:0; border-radius:inherit; background:var(--accent); transition:width .8s cubic-bezier(.16,.8,.3,1); }
.mm-item.is-top .mm-bar i{ background:var(--mint); }
.mm-score{ font:700 14px var(--font-mono); text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); }
.mm-note{ font-size:12.5px; color:var(--ink-faint); max-width:60ch; }

.dm-core--sm{ aspect-ratio:1 / 1; max-width:none; justify-self:stretch; position:sticky; top:96px; }

@media (max-width:960px){
  .dm-match-grid{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .dm-core--sm{ position:relative; top:auto; aspect-ratio:1 / .85; order:-1; }
}
@media (max-width:520px){
  .mm-item{ grid-template-columns:36px minmax(0,1fr) 44px; gap:10px; }
  .mm-item .mm-bar{ grid-column:2 / 4; grid-row:2; }
  .mm-av{ width:36px; height:36px; }
}

/* ---------- Guide assistant ---------- */
.tg-launch{
  position:fixed;
  right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  z-index:80;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px 12px 14px;
  border-radius:999px;
  border:1px solid rgba(140,155,255,.4);
  background:var(--core-bg);
  color:#fff;
  font:700 14px/1 var(--font-body);
  cursor:pointer;
  box-shadow:0 16px 36px -14px rgba(20,30,120,.6);
  transition:transform .16s ease, border-color .16s ease;
}
.tg-launch:hover{ transform:translateY(-2px); border-color:#8C9BFF; }
.tg-launch svg{ width:20px; height:20px; flex:none; }
.tg-launch kbd{
  font:500 11px var(--font-mono); color:var(--core-dim);
  border:1px solid rgba(140,155,255,.3); border-radius:6px; padding:3px 6px;
}
.tg-panel{
  position:fixed;
  right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  z-index:90;
  width:min(380px, calc(100vw - 32px));
  max-height:min(560px, calc(100dvh - 32px));
  display:none;
  flex-direction:column;
  border:1px solid var(--line-strong);
  border-radius:18px;
  background:var(--bg);
  color:var(--ink);
  box-shadow:0 30px 70px -24px rgba(10,14,60,.55);
  overflow:hidden;
}
.tg-panel.open{ display:flex; }
.tg-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px;
  background:var(--core-bg); color:var(--core-text);
}
.tg-head b{ font:800 15px var(--font-display); letter-spacing:.01em; }
.tg-head span{ display:block; font:400 11px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--core-dim); margin-top:3px; }
.tg-close{
  width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(140,155,255,.3); background:transparent; color:#fff; cursor:pointer; font-size:18px; line-height:1;
}
.tg-log{
  flex:1 1 auto; min-height:120px; overflow-y:auto;
  padding:16px; display:flex; flex-direction:column; gap:10px;
}
.tg-msg{ max-width:88%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.45; overflow-wrap:anywhere; }
.tg-msg.bot{ align-self:flex-start; background:var(--bg-soft); color:var(--ink); border-bottom-left-radius:4px; }
.tg-msg.me{ align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px; }
.tg-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.tg-links a{
  padding:6px 11px; border-radius:999px; border:1px solid var(--accent);
  color:var(--accent); font-weight:700; font-size:12.5px;
}
.tg-links a:hover{ background:var(--accent); color:#fff; }
.tg-sugg{ display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px; }
.tg-sugg button{
  padding:7px 12px; border-radius:999px; border:1px solid var(--line-strong);
  background:transparent; color:var(--ink-soft); font:600 12.5px/1 var(--font-body); cursor:pointer;
}
.tg-sugg button:hover{ border-color:var(--ink); color:var(--ink); }
.tg-form{ display:flex; gap:8px; padding:12px 16px 16px; border-top:1px solid var(--line); }
.tg-form input{
  flex:1 1 auto; min-width:0;
  padding:10px 12px; border-radius:10px;
  border:1px solid var(--line-strong); background:var(--bg); color:var(--ink);
  font:500 16px var(--font-body);
}
.tg-form button{
  padding:10px 16px; border:0; border-radius:10px;
  background:var(--ink); color:var(--bg); font:700 14px var(--font-body); cursor:pointer;
}
.tg-form input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
[data-theme="dark"] .tg-msg.me{ color:#fff; }

@media (max-width:520px){
  .tg-launch kbd{ display:none; }
  .tg-panel{ right:8px; left:8px; width:auto; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce){
  .dm-core-tag i, .mm-item.is-in{ animation:none; }
  .mm-bar i{ transition:none; }
}

/* ==========================================================================
   How the core thinks: tabbed engine explainer
   ========================================================================== */
:root{ --amber:#E0A21B; --rose:#F0557C; }
[data-theme="dark"]{ --amber:#F2B93A; --rose:#FF7A9A; }

.fx{
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:28px;
  align-items:start;
}
.fx-tabs{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.fx-tab{
  display:flex; align-items:flex-start; gap:12px;
  text-align:left;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--bg);
  color:var(--ink-soft);
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.fx-tab i{ flex:none; width:10px; height:10px; margin-top:6px; border-radius:50%; background:var(--c); box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.fx-tab b{ display:block; font:700 15.5px/1.25 var(--font-display); color:var(--ink); }
.fx-tab small{ display:block; margin-top:3px; font:500 13px/1.35 var(--font-body); color:var(--ink-soft); }
.fx-tab:hover{ border-color:var(--line-strong); transform:translateX(2px); }
.fx-tab[aria-selected="true"]{ border-color:var(--c); background:var(--bg-soft); box-shadow:inset 3px 0 0 var(--c); }

.fx-stage{ min-width:0; }
.fx-panel{
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
  overflow:hidden;
}
.fx-art{ background:var(--bg-soft); border-bottom:1px solid var(--line); padding:12px 12px 4px; position:relative; }
.fx-art::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 50% 50%, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%);
}
.fx-svg{ display:block; width:100%; height:auto; max-height:380px; position:relative; }
.fx-body{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:28px; padding:24px 26px 26px; }
.fx-copy h3{ font-size:22px; line-height:1.2; margin-bottom:8px; }
.fx-copy p{ margin:0 0 10px; font-size:15px; color:var(--ink-soft); }
.fx-copy p.fx-for{
  margin:14px 0 6px; font:500 12px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);
}
.fx-cta{ color:var(--accent); font-weight:700; font-size:14.5px; }
.fx-cta:hover{ text-decoration:underline; }
.fx-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; counter-reset:fx; }
.fx-steps li{
  position:relative; padding-left:42px; min-height:30px;
  counter-increment:fx;
}
.fx-steps li::before{
  content:counter(fx);
  position:absolute; left:0; top:0;
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--c) 18%, var(--bg));
  border:1px solid var(--c);
  font:700 13px var(--font-display); color:var(--ink);
}
.fx-steps li:not(:last-child)::after{
  content:""; position:absolute; left:13.5px; top:32px; bottom:-12px; width:1px; background:var(--line-strong);
}
.fx-steps b{ display:block; font:700 14.5px/1.3 var(--font-display); color:var(--ink); }
.fx-steps span{ display:block; font-size:13.5px; color:var(--ink-soft); margin-top:2px; }

/* SVG parts, all theme-aware through tokens */
.fx-t{ font-family:var(--font-body); fill:var(--ink); }
.fx-h{ font-size:16px; font-weight:800; font-family:var(--font-display); }
.fx-n{ font-size:14px; font-weight:700; }
.fx-s{ font-size:13px; font-weight:600; fill:var(--ink-soft); }
.fx-dim{ fill:var(--ink-faint); }
.fx-lbl{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.07em; fill:var(--ink-faint); }
.fx-tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; fill:var(--ink-faint); }
.fx-card{ fill:var(--bg); stroke:var(--line-strong); stroke-width:1; }
.fx-chip{ fill:var(--bg-soft-2); stroke:none; }
.fx-chip.is-on{ fill:color-mix(in srgb, var(--c) 22%, var(--bg)); stroke:var(--c); stroke-width:1; }
.fx-av{ fill:var(--bg-soft-2); }
.fx-av-t{ font-size:11px; font-weight:800; fill:var(--accent-ink); }
.fx-track{ fill:var(--line); }
.fx-bar{ fill:var(--c); transform-box:fill-box; transform-origin:left center; }
.fx-bar.fx-top, .fx-bar.is-last{ fill:var(--mint); }
.fx-bar.is-gap{ fill:var(--amber); }
.fx-pct{ font-family:var(--font-mono); font-size:13px; font-weight:600; }
.fx-pct-top{ fill:var(--mint); font-weight:700; }
.fx-live{ fill:var(--mint); }
.fx-ring{ fill:none; stroke:var(--c); stroke-width:1.5; stroke-dasharray:3 5; opacity:.7; transform-box:fill-box; transform-origin:center; }
.fx-core{ fill:#0B0C13; stroke:var(--c); stroke-width:2; }
.fx-coreg{ fill:#E6E9FF; stroke:rgba(180,190,255,.8); stroke-width:1; }
.fx-flow{ fill:none; stroke:var(--c); stroke-width:2; stroke-dasharray:5 6; stroke-linecap:round; }
.fx-tail{ font-size:11.5px; font-weight:700; fill:var(--mint); }
.fx-r{ fill:none; stroke:var(--line-strong); stroke-width:1; stroke-dasharray:3 5; }
.fx-sweep path{ fill:color-mix(in srgb, var(--c) 18%, transparent); }
.fx-sweep{ transform-box:view-box; transform-origin:260px 160px; }
.fx-near circle{ fill:var(--c); }
.fx-near circle.is-outer{ fill:var(--c); opacity:.55; }
.fx-far circle{ fill:var(--ink-faint); opacity:.55; }
.fx-far path{ stroke:var(--ink-faint); stroke-width:1; stroke-dasharray:2 6; opacity:.45; fill:none; }
.fx-pin{ fill:var(--ink); stroke:var(--bg); stroke-width:2; }
.fx-pulse{ fill:none; stroke:var(--c); stroke-width:2; transform-box:fill-box; transform-origin:center; }
.fx-l1{ fill:var(--c); } .fx-l2{ fill:var(--ink-faint); opacity:.6; }
.fx-need{ stroke:var(--ink); stroke-width:2.5; stroke-linecap:round; }
.fx-gapzone{ fill:color-mix(in srgb, var(--amber) 22%, transparent); stroke:var(--amber); stroke-dasharray:3 3; }
.fx-ok{ font-size:13px; font-weight:700; fill:var(--mint); }
.fx-gap{ font-size:13px; font-weight:800; fill:var(--amber); }
.fx-cnt{ font-family:var(--font-mono); font-size:15px; font-weight:700; fill:var(--ink); }
.fx-cnt-in{ fill:#fff; }

/* animation: each panel replays when it is selected */
.fx-panel.is-play .fx-bar{ animation:fxGrow .9s cubic-bezier(.16,.8,.3,1) both; animation-delay:var(--d,0s); }
.fx-panel.is-play .fx-sk, .fx-panel.is-play .fx-st, .fx-panel.is-play .fx-var, .fx-panel.is-play .fx-status{ animation:fxRise .6s cubic-bezier(.16,.8,.3,1) both; animation-delay:var(--d,0s); }
.fx-panel.is-play .fx-sk .fx-bar, .fx-panel.is-play .fx-st .fx-bar{ animation-delay:calc(var(--d,0s) + .1s); }
.fx-panel.is-play .fx-flow{ animation:fxDash 1.2s linear infinite; }
.fx-panel.is-play .fx-ring{ animation:fxSpin 14s linear infinite; }
.fx-panel.is-play .fx-near circle{ animation:fxPop .5s cubic-bezier(.16,.8,.3,1) both; animation-delay:var(--d,0s); transform-box:fill-box; transform-origin:center; }
.fx-panel.is-play .fx-sweep{ animation:fxSpin 5s linear infinite; }
.fx-panel.is-play .fx-pulse{ animation:fxPing 2.2s ease-out infinite; }
.fx-panel.is-play .fx-live{ animation:coreBlink 2s ease-in-out infinite; }
@keyframes fxGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes fxRise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes fxDash{ to{ stroke-dashoffset:-22; } }
@keyframes fxSpin{ to{ transform:rotate(360deg); } }
@keyframes fxPop{ from{ opacity:0; transform:scale(0); } to{ opacity:1; transform:scale(1); } }
@keyframes fxPing{ from{ opacity:.9; transform:scale(1); } to{ opacity:0; transform:scale(4.2); } }

@media (max-width:1020px){
  .fx{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .fx-tabs{ flex-direction:row; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
  .fx-tab{ flex:0 0 auto; width:232px; scroll-snap-align:start; }
  .fx-tab:hover{ transform:none; }
  .fx-tab[aria-selected="true"]{ box-shadow:inset 0 3px 0 var(--c); }
}
@media (max-width:720px){
  .fx-body{ grid-template-columns:minmax(0,1fr); gap:22px; padding:20px 18px 22px; }
}
@media (prefers-reduced-motion: reduce){
  .fx-panel.is-play *{ animation:none !important; }
}

/* ==========================================================================
   Match engine: steps strip and score breakdown
   ========================================================================== */
.mm-steps{
  list-style:none; margin:0 0 30px; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
}
.mm-steps li{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg);
}
.mm-steps li > b{
  flex:none; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; font:700 13px var(--font-display);
}
.mm-steps strong{ display:block; font:700 14.5px/1.3 var(--font-display); color:var(--ink); }
.mm-steps span{ display:block; font-size:13px; color:var(--ink-soft); margin-top:2px; }
.mm-key{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--ink-soft); }
.mm-key span{ display:inline-flex; align-items:center; gap:7px; }
.mm-key i{ width:12px; height:8px; border-radius:2px; display:inline-block; }
.k-skill{ background:var(--accent); } .k-city{ background:var(--mint); } .k-depth{ background:var(--amber); }

.mm-item{ grid-template-columns:40px minmax(0,1fr) minmax(90px,170px) 48px; }
.mm-bar{ display:flex; height:10px; border-radius:999px; overflow:hidden; background:var(--line); }
.mm-bar i{ display:block; height:100%; width:0; border-radius:0; background:var(--accent); transition:width .8s cubic-bezier(.16,.8,.3,1); }
.mm-bar i.s2{ background:var(--mint); }
.mm-bar i.s3{ background:var(--amber); }
.mm-item.is-top .mm-bar i{ background:var(--accent); }
.mm-item.is-top .mm-bar i.s2{ background:var(--mint); }
.mm-item.is-top .mm-bar i.s3{ background:var(--amber); }
.mm-math{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.mm-top-badge{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  background:var(--mint); color:#fff; font:700 10.5px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; vertical-align:2px;
}

@media (max-width:760px){
  .mm-steps{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:520px){
  .mm-item{ grid-template-columns:36px minmax(0,1fr) 46px; }
  .mm-item .mm-bar{ grid-column:2 / 4; grid-row:2; }
}
.fx-panel[hidden]{ display:none; }
.fx-panel[hidden]{ display:none; }

/* polish */
.fx-av{ fill:var(--bg); stroke:var(--line-strong); stroke-width:1; }
.fx-sk .fx-bar{ fill:var(--accent); }
.fx-sk .fx-bar.is-gap{ fill:var(--amber); }
.fx-lbl{ paint-order:stroke; stroke:var(--bg-soft); stroke-width:4px; stroke-linejoin:round; }
@media (max-width:720px){
  .fx-art{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .fx-svg{ min-width:450px; }
  .fx-art::after{
    content:"Swipe sideways for the full graphic";
    position:sticky; left:0; display:block; padding:2px 4px 8px;
    font:500 11px var(--font-mono); letter-spacing:.04em; color:var(--ink-faint);
  }
}

/* ---------- Best-match ring on the match stage ---------- */
.dm-core-score{
  position:absolute; left:14px; bottom:14px;
  display:flex; align-items:center; gap:12px;
  padding:8px 16px 8px 8px;
  border:1px solid var(--core-line); border-radius:16px;
  background:rgba(11,12,19,.78);
  max-width:calc(100% - 28px);
  pointer-events:none;
}
.dm-core-score svg{ width:56px; height:56px; flex:none; display:block; }
.dm-core-score .rg-track{ fill:none; stroke:rgba(255,255,255,.14); stroke-width:6; }
.dm-core-score .rg-prog{ fill:none; stroke:#2FCB9A; stroke-width:6; stroke-linecap:round; stroke-dasharray:163.4; stroke-dashoffset:163.4; transition:stroke-dashoffset .9s cubic-bezier(.16,.8,.3,1); }
.dm-core-score b{ position:absolute; left:8px; top:8px; width:56px; height:56px; display:flex; align-items:center; justify-content:center; font:700 17px var(--font-mono); color:#fff; font-variant-numeric:tabular-nums; }
.dm-core-score span{ min-width:0; }
.dm-core-score em{ display:block; font:400 11px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--core-dim); font-style:normal; }
.dm-core-score strong{ display:block; font:700 15px/1.25 var(--font-display); color:#fff; overflow-wrap:anywhere; }
@media (prefers-reduced-motion: reduce){ .dm-core-score .rg-prog{ transition:none; } }

/* The existing Explore and quotes rails run a few pixels past the page on phones. */
body{ overflow-x:clip; }