/* ==========================================================================
   The talent-tree map (ui/tree.js): one look for every tree        owner: the redesign, part A (docs/redesign-ia.md 2)
   A sheet of old paper with wobbly ink: round steps, diamond rule changers, octagon choices (pick one of two), gold-ringed
   capstone medals ("pick one"), crowned keystones; quiet gate lines between the sections; the ink of a learned link bold
   in its branch's colour. Loaded last.
   The weight pass (2026-10-21): three states you can tell apart at a glance — learned (full colour, the bold coloured
   path), learnable (bright paper, a soft pulse in the branch's colour, its price), locked (pale and grey, no price);
   prices only where they can be paid (or on hover and selection); small rank dots; names on a paper plate; thin quiet
   links and gate lines; the thick ink stays on the nodes (what you press).
   ========================================================================== */
.tm-map{
  --oct:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);
  --plate:rgba(253,245,226,.92);
  position:relative;width:100%;box-sizing:border-box;border:var(--line-s) solid var(--ink);border-radius:var(--r-card);overflow:hidden;isolation:isolate;
  background:
    radial-gradient(circle at 18% 22%,rgba(122,82,36,.08) 0 1.5px,transparent 2px) 0 0/17px 17px,
    radial-gradient(circle at 62% 70%,rgba(255,255,255,.35) 0 1.5px,transparent 2px) 0 0/23px 23px,
    radial-gradient(ellipse 85% 75% at 50% 42%,#fffaf0 0%,#f6e6c4 58%,#e6c891 100%);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.35),inset 0 0 30px rgba(122,82,36,.24),var(--drop-xs);
}
.tm-ink{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.tm-ink .doodle{fill:none;stroke:rgba(122,82,36,.18);stroke-width:2;stroke-linecap:round}
/* the links: learned bold and coloured; reachable thin and solid; the rest faint and dashed */
.tm-ink .ink-u{fill:none;stroke-linecap:round}
.tm-ink .ink-u.on{stroke:var(--ink);stroke-width:9}
.tm-ink .ink.on{fill:none;stroke:var(--lc);stroke-width:5;stroke-linecap:round}
.tm-ink .ink-u.reach{stroke:rgba(42,26,46,.46);stroke-width:2.4}
.tm-ink .ink-u.off{stroke:rgba(90,63,82,.26);stroke-width:2;stroke-dasharray:4 6}
.tm-ink .ink.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:tm-draw .6s var(--out) forwards}
@keyframes tm-draw{to{stroke-dashoffset:0}}
/* a gate: one quiet line across the map (open: a faint solid line), and for a shut one a small tag on it */
.tm-ink .gate-line{fill:none;stroke:rgba(90,63,82,.34);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 6}
.tm-ink .gate-line.open{stroke:rgba(122,82,36,.2);stroke-dasharray:none}
.tm-gate{
  position:absolute;left:50%;translate:-50% -50%;z-index:3;display:inline-flex;align-items:center;gap:4px;max-width:92%;padding:2px 9px 3px 6px;
  border-radius:var(--r-pill);background:var(--plate);box-shadow:0 0 0 1.5px var(--hair);
  font:var(--w-body) var(--t-caption)/1.2 var(--f-ui);color:var(--ink-2);white-space:nowrap;cursor:default;font-variant-numeric:tabular-nums;
}
.tm-gate .ic{width:15px;height:15px;flex:none;opacity:.75}
.tm-gate b{font-weight:var(--w-strong);color:var(--ink)}
.tm-gate.open .ic{opacity:1}
/* the branch names over the top row: the branch's colour, a light outline */
.tm-lane{
  position:absolute;translate:-50% -50%;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:3px 9px 4px;border-radius:var(--r-cap);white-space:nowrap;cursor:default;
  background:var(--lc);border:var(--line-2) solid var(--ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.3);
  font:400 var(--t-name-s)/1 var(--f-display);letter-spacing:.02em;color:#fff;-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;
}
.tm-lane .ic{width:17px;height:17px;margin:-3px 0 -3px -3px}
.tm-lane.l0{translate:-28% -50%}
.tm-lane.ln{translate:-72% -50%}

/* ---------- a node ---------- */
.tm-n{
  all:unset;box-sizing:border-box;position:absolute;translate:-50% -50%;z-index:4;width:50px;height:50px;display:grid;place-items:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;--face:#fbf3e1;
}
.tm-n:is(:hover,.sel,:focus-visible){z-index:7}
.tm-face{
  position:absolute;inset:0;box-sizing:border-box;display:grid;place-items:center;border:var(--line-s) solid var(--ink);border-radius:50%;
  background:var(--face);box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 3px 0 var(--ink);
  transition:transform .14s var(--out),filter .14s var(--out);
}
.tm-n .ic{width:28px;height:28px;position:relative;z-index:1}
/* a rule changer: a diamond */
.tm-n.k-rule .tm-face{inset:4px;border-radius:10px;rotate:45deg}
.tm-n.k-rule .tm-face .ic{rotate:-45deg;width:27px;height:27px}
/* a choice: an octagon (an ink octagon with a paper one inside, the drop as a filter); both halves until you pick */
.tm-n.k-choice{width:56px;height:56px;filter:drop-shadow(0 3px 0 var(--ink))}
.tm-n.k-choice .tm-face{border:0;border-radius:0;background:var(--ink);clip-path:var(--oct);box-shadow:none}
.tm-n.k-choice .tm-face::before{content:"";position:absolute;inset:3px;clip-path:var(--oct);background:var(--face);box-shadow:inset 0 2px 0 rgba(255,255,255,.7)}
.tm-n.k-choice .tm-face::after{content:"";position:absolute;inset:3px;clip-path:var(--oct);background:linear-gradient(180deg,rgba(255,255,255,.45),transparent 40%);pointer-events:none}
.tm-half{position:absolute;top:0;bottom:0;width:50%;display:grid;place-items:center;z-index:1;overflow:hidden}
.tm-half.a{left:0;clip-path:polygon(0 0,100% 0,72% 100%,0 100%)}
.tm-half.b{right:0;clip-path:polygon(28% 0,100% 0,100% 100%,0 100%)}
.tm-half .ic{width:22px;height:22px}
.tm-half.a .ic{margin-left:7px}
.tm-half.b .ic{margin-right:7px}
.tm-n.k-choice:not(.picked) .tm-face::after{background:linear-gradient(106deg,transparent calc(50% - 1.4px),rgba(42,26,46,.6) calc(50% - 1.4px) calc(50% + 1.4px),transparent calc(50% + 1.4px)),linear-gradient(180deg,rgba(255,255,255,.45),transparent 40%)}
.tm-n.k-choice .tm-face>.ic{width:30px;height:30px}
/* a capstone: a big medal with a gold ring; a keystone: the same, crowned in gold */
.tm-n.k-cap,.tm-n.k-key{width:64px;height:64px}
.tm-n.k-cap .ic,.tm-n.k-key .ic{width:36px;height:36px}
.tm-n.k-cap .tm-face,.tm-n.k-key .tm-face{box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 0 0 3px #f2c94c,0 0 0 6px var(--ink),0 7px 0 var(--ink)}
.tm-n.k-key .tm-face{box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 0 0 4px #f7d86a,0 0 0 7px var(--ink),0 8px 0 var(--ink)}
.tm-n.k-key::before{content:"";position:absolute;left:50%;top:-16px;width:30px;height:16px;translate:-50% 0;z-index:5;
  background:#f2c94c;border:2.5px solid var(--ink);border-bottom:0;clip-path:polygon(0 100%,0 20%,25% 60%,50% 0,75% 60%,100% 20%,100% 100%);box-sizing:border-box}

/* ---------- states ---------- */
/* locked (behind a node or a gate): pale, grey, a light dashed rim, no drop, no price */
.tm-n:is(.s-locked,.s-gate){--face:#efe6d2}
.tm-n:is(.s-locked,.s-gate) .tm-face{border-color:rgba(42,26,46,.3);border-style:dashed;box-shadow:none}
.tm-n.k-choice:is(.s-locked,.s-gate){filter:none}
.tm-n.k-choice:is(.s-locked,.s-gate) .tm-face{background:rgba(42,26,46,.28)}
.tm-n:is(.s-locked,.s-gate) .ic{filter:grayscale(1);opacity:.36}
.tm-n:is(.k-cap,.k-key):is(.s-locked,.s-gate) .tm-face{box-shadow:0 0 0 3px #e2d3b0,0 0 0 5px rgba(42,26,46,.22)}
.tm-n.k-key:is(.s-locked,.s-gate)::before{opacity:.45;filter:grayscale(.6)}
/* open but nothing to pay with yet: plain paper, a touch muted */
.tm-n.s-wait .ic{filter:saturate(.75);opacity:.8}
/* learnable (a new node you can pay for now): bright paper and a soft pulse in the branch's colour. A learned node that
   can take another rank stays calm: its dots say there is more, hover or selection shows the price */
.tm-n.s-open{--face:#fffdf6}
.tm-n.can.s-open .tm-face{animation:tm-glow 2.2s var(--out) infinite}
.tm-n.k-choice.can.s-open{animation:tm-glowf 2.2s var(--out) infinite}
.tm-n.k-choice.can .tm-face{animation:none}
@keyframes tm-glow{0%{box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 3px 0 var(--ink),0 0 0 2px color-mix(in srgb,var(--lc) 70%,transparent)}70%,100%{box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 3px 0 var(--ink),0 0 0 9px color-mix(in srgb,var(--lc) 0%,transparent)}}
@keyframes tm-glowf{0%{filter:drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 0 1px color-mix(in srgb,var(--lc) 80%,transparent))}50%{filter:drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 0 6px color-mix(in srgb,var(--lc) 60%,transparent))}100%{filter:drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 0 1px color-mix(in srgb,var(--lc) 0%,transparent))}}
.tm-n:is(.k-cap,.k-key).can.s-open .tm-face{animation:tm-glowc 2.2s var(--out) infinite}
@keyframes tm-glowc{0%{box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 0 0 3px #f2c94c,0 0 0 6px var(--ink),0 7px 0 var(--ink),0 0 0 6px rgba(242,201,76,.55)}70%,100%{box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 0 0 3px #f2c94c,0 0 0 6px var(--ink),0 7px 0 var(--ink),0 0 0 14px rgba(242,201,76,0)}}
/* learned: full colour (max: a gold rim) */
.tm-n:is(.s-some,.s-max){--face:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--lc) 40%,#fff) 0 30%,var(--lc) 84%)}
.tm-n.s-max:not(.k-cap):not(.k-key):not(.k-choice) .tm-face{box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 3px 0 var(--ink),0 0 0 3px #f2c94c}
.tm-n.k-choice.s-max .tm-face{background:#f2c94c}
/* selected: the blue ring */
.tm-n.sel .tm-face{outline:4px solid var(--player);outline-offset:4px}
.tm-n.k-choice.sel::before{content:"";position:absolute;inset:-7px;clip-path:var(--oct);background:var(--player);z-index:-1}
.tm-n.k-choice.sel .tm-face{outline:0}
html.kbd-nav .tm-n:focus .tm-face{outline:4px solid var(--player);outline-offset:4px}
.tm-n:focus{outline:none}
@media (hover:hover) and (pointer:fine){ .tm-n:not(.s-locked):not(.s-gate):hover .tm-face{transform:scale(1.08)} }
.tm-n:active .tm-face{transform:scale(.94)}
.tm-n.just .tm-face{animation:tm-pop .44s var(--pop)}
@keyframes tm-pop{0%{transform:scale(.7)}60%{transform:scale(1.22)}100%{transform:scale(1)}}
.tm-n.nope{animation:tm-nope .32s var(--out)}
@keyframes tm-nope{20%,60%{translate:calc(-50% - 4px) -50%}40%,80%{translate:calc(-50% + 4px) -50%}}
.tm-n.goal .tm-face{animation:tm-pop .5s var(--pop) 2}

/* ---------- ranks, price, the swap mark, a lock, a form's level ---------- */
/* ranks: small dots under the node, the branch's colour when taken */
.tm-r{position:absolute;left:50%;bottom:-12px;translate:-50% 0;display:flex;gap:3px;z-index:6;pointer-events:none}
.tm-r i{width:5px;height:5px;border-radius:50%;background:rgba(42,26,46,.2)}
.tm-r i.on{background:var(--lc);box-shadow:0 0 0 1.5px var(--ink)}
.tm-n:is(.k-cap,.k-key) .tm-r{bottom:-16px}
/* the price: gold where it can be paid now; on hover or selection it shows anyway (paper when you cannot pay yet) */
.tm-cost{
  position:absolute;top:-8px;right:-12px;z-index:6;min-width:19px;height:19px;padding:0 5px;box-sizing:border-box;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;gap:2px;
  background:var(--g-gold);border:var(--line-2) solid var(--ink);font:400 var(--t-tag)/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums;
  opacity:0;scale:.8;transition:opacity .14s var(--out),scale .14s var(--out);pointer-events:none;
}
.tm-n:is(.can.s-open,.sel,:hover,:focus-visible) .tm-cost{opacity:1;scale:1}
.tm-cost .ic{width:13px;height:13px;margin-left:-3px}
.tm-cost:is(.coin,.medal){padding:0 6px 0 4px}
.tm-cost.medal{background:linear-gradient(180deg,#fff2c6,#eac254)}
.tm-n:is(.k-cap,.k-key) .tm-cost{top:-6px;right:-10px}
.tm-n:not(.can) .tm-cost{background:var(--paper);color:var(--ink-3);-webkit-text-stroke:0;font:var(--w-strong) var(--t-label)/1 var(--f-ui)}
/* the swap mark: only on a choice that holds a version; small and quiet */
.tm-swap{position:absolute;top:-4px;left:-5px;z-index:6;width:16px;height:16px;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1.5px solid var(--ink);font:var(--w-strong) var(--t-micro)/1 var(--f-ui);color:var(--ink-2);pointer-events:none}
.tm-lock{position:absolute;right:-5px;bottom:-3px;z-index:6;width:17px;height:17px;display:grid;place-items:center;pointer-events:none}
.tm-lock .ic{width:17px;height:17px;filter:none!important;opacity:.85!important}
.tm-badge{position:absolute;top:-6px;left:-8px;z-index:6;min-width:19px;height:19px;padding:0 4px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;
  background:#a052a0;border:var(--line-2) solid var(--ink);font:400 var(--t-tag)/1 var(--f-display);color:#fff}
/* the node's name, under it on a paper plate (no line runs through it), once the map is wide enough to read it; a
   choice's other version on hover and selection */
.tm-name{display:none;position:absolute;left:50%;top:calc(100% + 13px);translate:-50% 0;z-index:5;width:max-content;max-width:100px;padding:1px 5px 2px;border-radius:6px;
  background:var(--plate);font:var(--w-strong) var(--t-label)/1.2 var(--f-ui);color:var(--ink);text-align:center;text-wrap:balance;pointer-events:none}
.tm-name.pick>span{font-size:var(--t-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.tm-n:is(.k-cap,.k-key) .tm-name{top:calc(100% + 17px)}
.tm-n:is(.s-locked,.s-gate) .tm-name{color:var(--ink-3)}
@container tree (min-width:470px){ .tm-map:not(.narrow) .tm-name{display:block} }
@container tree (min-width:250px){ .tm-map.narrow .tm-name{display:block} }

/* ---------- Learn (the one panel, armory.css .ip, holds it) ---------- */
.tm-learn{
  all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:3px 5px 3px 16px;
  border:var(--line-s) solid var(--ink);border-radius:var(--r-pill);background:var(--g-gold);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 4px 0 var(--ink);
  font:400 var(--t-name)/1 var(--f-display);color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;transition:transform .12s var(--out),box-shadow .12s var(--out);
}
.tm-learn i{display:inline-flex;align-items:center;gap:3px;padding:3px 9px 3px 4px;border-radius:var(--r-pill);background:rgba(42,26,46,.84);font-style:normal;font-size:var(--t-name-s);-webkit-text-stroke:0;color:var(--gold-hi)}
.tm-learn i .ic{width:18px;height:18px}
.tm-learn:disabled{cursor:default;background:var(--paper-2);color:var(--ink-3);-webkit-text-stroke:0;font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);border-width:var(--line-xs);box-shadow:none;text-wrap:balance}
.tm-learn:disabled i{background:rgba(42,26,46,.12);color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){ .tm-learn:not(:disabled):hover{transform:translateY(-2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 6px 0 var(--ink)} }
.tm-learn:not(:disabled):active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 2px 0 var(--ink);transition-duration:.06s}
.tm-learn:focus-visible,html.kbd-nav .tm-learn:focus{outline:var(--focus-ring);outline-offset:var(--focus-off)}

/* ---------- the account tree's narrow maps: a little smaller ---------- */
.tm-map.narrow .tm-n{width:44px;height:44px}
.tm-map.narrow .tm-n .ic{width:25px;height:25px}
.tm-map.narrow .tm-n.k-choice{width:50px;height:50px}
.tm-map.narrow .tm-n.k-key{width:56px;height:56px}
.tm-map.narrow .tm-n.k-key .ic{width:31px;height:31px}
.tm-map.narrow .tm-cost{height:18px;font-size:var(--t-tag);top:-9px;right:-14px}
.tm-map.narrow .tm-cost .ic{width:12px;height:12px}
.tm-map.narrow .tm-name{max-width:92px;font-size:var(--t-label)}

/* ---------- phones: smaller nodes ---------- */
@media (max-width:720px){
  .tm-n{width:44px;height:44px}
  .tm-n .ic{width:25px;height:25px}
  .tm-n.k-choice{width:50px;height:50px}
  .tm-n.k-cap,.tm-n.k-key{width:54px;height:54px}
  .tm-n.k-cap .ic,.tm-n.k-key .ic{width:30px;height:30px}
  .tm-lane{font-size:var(--t-tag);padding:2px 6px 3px;-webkit-text-stroke:2px var(--ink)}
  .tm-lane .ic{display:none}
  .tm-gate{font-size:var(--t-label);padding:2px 8px 3px 5px}
  .tm-gate .ic{width:14px;height:14px}
  .tm-learn{min-height:44px}
  .tm-name{max-width:84px;font-size:var(--t-micro)}
}

/* ---------- reduced motion, photo mode ---------- */
@media (prefers-reduced-motion:reduce){
  .tm-n.can .tm-face,.tm-n.k-choice.can,.tm-n.just .tm-face,.tm-n.nope,.tm-n.goal .tm-face{animation:none}
  .tm-n.can.s-open .tm-face{box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 3px 0 var(--ink),0 0 0 3px color-mix(in srgb,var(--lc) 55%,transparent)}
  .tm-ink .ink.draw{animation:none;stroke-dashoffset:0}
  .tm-face,.tm-learn,.tm-cost{transition:none}
}
.shot :is(.tm-n.can .tm-face,.tm-n.k-choice.can){animation:none}

/* ---------- the signature web (2026-10-22): the fighter in the middle, its talents on rings around it ----------
   2026-10-24, the owner: "also too many dotted lines here", then of the page: "such a mess". No frame, no rings, no
   dashes: the fighter in a pool of light and the talents around it. What is shut is small, pale and nameless; a gold dot
   marks a talent you can learn now (no price tag, no pulse); the picked one has the kit's pick ring. The fighter in the
   middle is a button too (picked, the panel shows the fighter), with the points to spend in a gold badge. */
.tw-map{border:0;border-radius:32px;background:radial-gradient(closest-side,rgba(255,250,240,.95),rgba(255,250,240,.62) 64%,rgba(255,250,240,0));box-shadow:none}
.tw-map .tm-ink .ink-u.off{stroke:rgba(90,63,82,.14);stroke-width:2;stroke-dasharray:none}
.tw-map .tm-n:is(.s-locked,.s-gate){scale:.74}
.tw-map .tm-n:is(.s-locked,.s-gate) .tm-face{border-style:solid;border-color:rgba(42,26,46,.2)}
.tw-map .tm-n:is(.s-locked,.s-gate) .tm-name{visibility:hidden}
.tw-map .tm-n:is(.s-locked,.s-gate).sel{scale:.86}
.tw-map .tm-n:is(.s-locked,.s-gate).sel .tm-name{visibility:visible}
.tw-map .tm-cost{display:none}
.tw-map .tm-n.can .tm-face,.tw-map .tm-n.k-choice.can{animation:none}
.tw-map .tm-n.can::after{content:"";position:absolute;top:-4px;right:-4px;z-index:7;width:15px;height:15px;box-sizing:border-box;border-radius:50%;border:2px solid var(--ink);background:var(--g-gold);box-shadow:0 0 0 2px #fffaf0}
.tw-map .tm-n.sel .tm-face{outline:3px solid var(--gold-lo);outline-offset:4px}
.tw-map .tm-n.k-cap.sel .tm-face{outline-offset:9px}
.tw-map .tm-n.k-choice.sel::before{background:var(--gold-lo)}
.tw-map .tm-name{background:none;padding:0;-webkit-text-stroke:4px #fbf3e1;paint-order:stroke fill}
.tw-center{all:unset;position:absolute;translate:-50% -50%;z-index:5;cursor:pointer;display:grid;place-items:center;border-radius:50%;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tw-center img{display:block;width:clamp(56px,15cqi,100px);height:auto;aspect-ratio:1;box-sizing:border-box;border-radius:50%;border:var(--line-s) solid var(--ink);object-fit:cover;object-position:50% 22%;background:#e9cf9f;box-shadow:0 0 0 5px #fffaf0,0 5px 0 5px rgba(42,26,46,.2);transition:translate .12s var(--out)}
.tw-center.sel img{box-shadow:0 0 0 3px #fffaf0,0 0 0 6px var(--gold-lo),0 5px 0 6px rgba(42,26,46,.2)}
@media (hover:hover) and (pointer:fine){ .tw-center:not(.sel):hover img{translate:0 -2px} }
.tw-center:focus-visible img,html.kbd-nav .tw-center:focus img{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.tw-pts{position:absolute;top:-2px;right:-10px;min-width:26px;height:26px;padding:0 8px 0 4px;box-sizing:border-box;display:flex;align-items:center;gap:2px;border-radius:var(--r-pill);border:var(--line-2) solid var(--ink);background:var(--g-gold);font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px #fffaf0}
@media (prefers-reduced-motion:reduce){ .tw-center img{transition:none} }
@media (max-width:720px){ .tw-map .tm-n{width:44px;height:44px} .tw-map .tm-name{font-size:var(--t-micro)} }