/* ── O nás · direction A "Manifesto & five layers" (final) ──
   Manifesto: scroll-linked word reveal (port of Motion "Scroll word reveal", 21st 24525; rest .3, latched, done once the
   whole sentence is on screen) with one low marker band on "jistotu" (port of "Text Highlighter", 21st 18771; same
   grammar as #audit .au-hl). The only yellow in the section.
   Pillars: Produkt-family hairline grid (radius 8) on a 4-track system shared with the team grid (1|1|2 over 1|1|1|1).
   01 delivery Gantt · 02 two-lane run chart from "1. den" (lane/axis grammar of openstatus "Status Bar", 21st 26906) ·
   03 the five layers as an isometric stack (port of "Stack", 21st 40278): one bottom-up climb, then rests on 05.
   Team: place (CZ outline + pin) and people (port of "Team Member Cards", 21st 28619: avatar with monogram fallback).
   Every base style IS the final state; JS only adds a visible "before" state (screen only), so print, no-JS and
   reduced motion all show finished UI. Loops are finite (≤ 2 iterations, < 5 s) and replay per viewport entry. */
/* section locals alias the site tokens (base.css / style.css); green (--on-g) is only for ✓ */
#o-nas{--on-k:var(--black);--on-m:var(--label);--on-l:rgba(0,0,0,.08);--on-chip:var(--paper-2);--on-g:#2F9E5B;--on-ease:cubic-bezier(.2,.7,.2,1)}

/* ── manifesto ── */
#o-nas .on-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--kick-gap) 48px;align-items:end}
/* shared .kick (style.css); the rail takes the place of its ::after hairline */
#o-nas .on-kick{grid-column:1/-1}
#o-nas .on-kick::after{content:none}
#o-nas .on-rail{position:relative;flex:1;min-width:24px;height:1px;background:var(--line);overflow:hidden}
/* the ink progress only exists while the statement reveals; it then fades and the rail rests as a hairline */
#o-nas .on-rail i{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,1));opacity:0}
#o-nas.on-js .on-rail i{opacity:1}
#o-nas.on-js .on-rail.on-done i{opacity:0;transition:opacity .9s ease .25s}
#o-nas .on-st{max-width:16.5ch;color:var(--ink)}
#o-nas .on-st .on-w{transition:opacity .12s linear}
#o-nas .on-mk{padding:0 .04em;margin:0 -.04em;border-radius:2px;background:linear-gradient(var(--yellow),var(--yellow)) 0 92%/100% .36em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
#o-nas .on-body p{max-width:42ch;font-size:17px;line-height:1.6;color:var(--muted)}
#o-nas .on-body p+p{margin-top:14px}
#o-nas .on-id{font-weight:500;color:var(--ink)}

/* ── pillars: hairline grid of white cards, 4 tracks (1|1|2) ── */
#o-nas .on-pl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:var(--head-gap);background:var(--on-l);border:1px solid var(--on-l);border-radius:8px;overflow:hidden}
#o-nas .on-card{display:flex;flex-direction:column;min-width:0;background:#fff}
#o-nas .on-c3{grid-column:span 2}
#o-nas .on-fr{position:relative;display:grid;place-items:start center;height:260px;padding:40px 22px 0;overflow:hidden;isolation:isolate}
#o-nas .on-cp{padding:6px 28px 30px}
#o-nas .on-cp .lbl{display:block;font:400 11.5px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--on-m)}
#o-nas .on-cp h3{margin:12px 0 8px;font-size:18px;line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
#o-nas .on-cp p{max-width:46ch;font-size:15px;line-height:1.55;color:var(--muted)}

/* shared mini UI (same family as the product cards); 01 and 02 share one height */
#o-nas .on-ui{--lc:76px;position:relative;display:flex;flex-direction:column;width:100%;max-width:300px;min-height:184px;background:#fff;border:1px solid var(--on-l);border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(0,0,0,.18);font:400 12.5px/1.3 var(--font);color:var(--on-k)}
#o-nas .on-uh{display:flex;align-items:center;gap:10px;min-height:50px;padding:10px 12px;border-bottom:1px solid var(--on-l)}
#o-nas .on-uh b{font-weight:500;font-size:13px;letter-spacing:-.005em}
#o-nas .on-ic{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:var(--on-chip);border:1px solid var(--on-l)}
#o-nas .on-ic svg{width:15px;height:15px;fill:none;stroke:var(--on-k);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#o-nas .on-ic-s{width:24px;height:24px;border-radius:6px}
#o-nas .on-ic-s svg{width:13px;height:13px}
#o-nas .on-ok-d{flex:none;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--on-g)}
#o-nas .on-ok-d svg{width:9px;height:9px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* 01 · delivery Gantt: build → deploy (✓, the card's one green signal) → measure (ongoing) */
#o-nas .on-gt{position:relative;flex:1;display:grid;align-content:center;gap:9px;padding:12px 12px 10px}
#o-nas .on-gt::before{content:"";position:absolute;left:calc(var(--lc) + 20px);right:12px;top:6px;bottom:4px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.075) 0 1px,transparent 1px 100%) 0 0/12.5% 100%;pointer-events:none}
#o-nas .on-gr{display:grid;grid-template-columns:var(--lc) minmax(0,1fr);align-items:center;gap:8px}
#o-nas .on-gr>span{font-size:12px;color:var(--on-m);white-space:nowrap}
#o-nas .on-tr{position:relative;height:20px}
#o-nas .on-tr::before{content:"";position:absolute;top:6px;height:8px;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);border-radius:4px;background:rgba(0,0,0,.07)}
#o-nas .on-bar{position:absolute;top:6px;height:8px;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);border-radius:4px;background:var(--on-k);transform-origin:0 50%}
#o-nas .on-bm{background:linear-gradient(90deg,var(--on-k) 0,var(--on-k) 62%,rgba(11,11,11,.12) 100%)}
#o-nas .on-ck{position:absolute;left:calc(var(--b) * 100%);top:50%;display:grid;place-items:center;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--on-g);border:2px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,.15)}
#o-nas .on-ck svg{width:9px;height:9px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#o-nas .on-hd,#o-nas .on-nw{position:absolute;left:86%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--on-k);box-shadow:0 0 0 2px #fff}
#o-nas .on-hd::after,#o-nas .on-nw::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--on-k);opacity:0}
#o-nas .on-ax{display:flex;align-items:center;justify-content:flex-end;gap:5px;padding:9px 12px 10px;border-top:1px solid var(--on-l);font:400 10.5px/1 var(--mono);color:var(--on-m)}
#o-nas .on-ax svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* 02 · support: header state "součást dodávky ✓" (one green signal) over a two-lane run chart that starts at one ink
   tick ("1. den"), passes "dnes" and fades out: "od prvního dne … poběží dál", no uptime record implied */
#o-nas .on-hs{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:12px;color:var(--on-m);white-space:nowrap}
#o-nas .on-up{--lc:54px}
#o-nas .on-run{gap:12px}
#o-nas .on-run .on-tr::before{display:none}
#o-nas .on-run::after{content:"";position:absolute;left:calc(var(--lc) + 19px);top:6px;bottom:4px;width:1.5px;border-radius:1px;background:var(--on-k)}
#o-nas .on-run .on-bar{border-radius:0 4px 4px 0}
#o-nas .on-bf{background:linear-gradient(90deg,var(--on-k) 0,var(--on-k) 54%,rgba(11,11,11,.06) 100%)}
#o-nas .on-bs{top:8px;height:4px;background:linear-gradient(90deg,rgba(11,11,11,.5) 0,rgba(11,11,11,.5) 54%,rgba(11,11,11,.04) 100%)}
#o-nas .on-nw{left:54%}
#o-nas .on-ax2{display:grid;grid-template-columns:var(--lc) minmax(0,1fr);column-gap:8px}
#o-nas .on-ax-t{grid-column:2;position:relative;display:flex;justify-content:space-between;align-items:center;height:12px}
#o-nas .on-ax-now{position:absolute;left:54%;transform:translateX(-50%)}
#o-nas .on-ax-end{display:inline-flex;align-items:center;gap:3px}

/* 03 · five layers, isometric: crisp plates; the active layer = ink side band + ink outline + ink label */
#o-nas .on-c3 .on-fr{padding:24px 16px 0}
#o-nas .on-stk{width:100%;max-width:300px}
#o-nas .on-stk-svg{display:block;width:100%;height:auto;overflow:visible}
#o-nas .on-bp{fill:none;stroke:rgba(0,0,0,.22);stroke-width:1;stroke-dasharray:3 3}
#o-nas .on-sd{fill:url(#on-sg);stroke:rgba(0,0,0,.16);stroke-width:1;stroke-linejoin:round}
#o-nas .on-sk{fill:var(--on-k);opacity:0}
#o-nas .on-tp{fill:#fff;stroke:rgba(0,0,0,.2);stroke-width:1;stroke-linejoin:round}
#o-nas .on-tk{fill:none;stroke:var(--on-k);stroke-width:1.5;stroke-linejoin:round;opacity:0}
#o-nas .on-ld{fill:none;stroke:rgba(0,0,0,.28);stroke-width:1}
#o-nas .on-lb{font:500 12.5px var(--font);letter-spacing:-.005em;fill:var(--on-m)}
#o-nas .on-lb .on-n{font:500 10.5px var(--mono);letter-spacing:.02em}
#o-nas .on-l5 .on-sk,#o-nas .on-l5 .on-tk{opacity:1}
#o-nas .on-l5 .on-lb{fill:var(--on-k)}
#o-nas .on-ly{transition:transform .5s var(--on-ease)}
#o-nas .on-sol{transition:opacity .45s ease,transform .6s var(--on-ease);transition-delay:calc(var(--i) * .16s + .15s)}
/* pick (hover): the gap opens and the hovered layer takes the same treatment (hard cut, never two half-lit) */
@media (hover:hover){
  #o-nas .on-stk:hover .on-ly{transform:translateY(calc(var(--i) * -5px))}
  #o-nas .on-stk:has(.on-ly:hover) .on-ly:not(:hover) .on-sk,#o-nas .on-stk:has(.on-ly:hover) .on-ly:not(:hover) .on-tk{opacity:0!important}
  #o-nas .on-stk:has(.on-ly:hover) .on-ly:not(:hover) .on-lb{fill:var(--on-m)!important}
  #o-nas .on-stk .on-ly:hover .on-sk,#o-nas .on-stk .on-ly:hover .on-tk{opacity:1!important}
  #o-nas .on-stk .on-ly:hover .on-lb{fill:var(--on-k)!important}
}

/* ── team: place + people, on the same 4 tracks as the pillars ── */
#o-nas .on-tw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:1px;margin-top:20px;background:var(--on-l);border:1px solid var(--on-l);border-radius:8px;overflow:hidden}
#o-nas .on-ppl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;padding:0;list-style:none;background:var(--on-l)}
#o-nas .on-place,#o-nas .on-p{display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-width:0;padding:24px 28px;background:#fff}
#o-nas .on-map{position:relative;width:100%;max-width:200px;aspect-ratio:206/122}
#o-nas .on-map svg{display:block;width:100%;height:100%;overflow:visible}
#o-nas .on-cz{fill:#F4F3EF;stroke:rgba(0,0,0,.42);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#o-nas .on-pin{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--on-k);box-shadow:0 0 0 2.5px #fff,0 2px 6px rgba(0,0,0,.3)}
#o-nas .on-pin::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--on-k);opacity:0}
#o-nas .on-loc b{display:block;font-weight:500;font-size:18px;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
#o-nas .on-loc span{display:block;margin-top:3px;font-size:14px;color:var(--muted);white-space:nowrap}
#o-nas .on-pid{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
/* avatar: monogram now; an <img> dropped inside .on-av covers it (Team Member Cards: AvatarImage over AvatarFallback) */
#o-nas .on-av{position:relative;flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
#o-nas .on-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#o-nas .on-mono{font:500 14px/1 var(--mono);letter-spacing:.02em;color:var(--ink)}
#o-nas .on-av-ic svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#o-nas .on-who{min-width:0}
#o-nas .on-who b{display:block;margin-top:6px;font-weight:500;font-size:18px;line-height:1.2;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
/* phone: reads and acts as a call link without hover (persistent underline, phone glyph); ::after extends the hit area to 44 px
   without moving the focus ring. It grows upwards (over the non-interactive label): the sales@ button sits 4.4 px below the
   number at ≤600 px, so the bottom inset stays under that gap and the two targets never overlap. */
#o-nas .on-tel{position:relative;border-radius:4px;text-decoration:underline;text-decoration-color:rgba(20,20,20,.28);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .2s ease}
#o-nas .on-tel::after{content:"";position:absolute;inset:-21px -4px -3px}
#o-nas .on-tel:hover{text-decoration-color:currentColor}
#o-nas .on-tel-ic{display:inline-block;width:14px;height:14px;margin-left:7px;vertical-align:-1px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#o-nas .on-act{display:flex;align-items:center;gap:10px;min-height:44px;margin:0 -10px -6px;padding:0 10px;border-radius:8px;text-decoration:none;font-size:14px;color:var(--ink);transition:background-color .2s ease}
#o-nas .on-act:hover{background:var(--on-chip)}
#o-nas .on-act:hover .on-at{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
#o-nas .on-act .on-ic{transition:background-color .2s ease,border-color .2s ease}
#o-nas .on-act:hover .on-ic{background:#fff}
#o-nas .on-at{min-width:0;overflow-wrap:break-word}
#o-nas .on-act:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#o-nas .on-tel:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ── motion: "before" states (visible ghosts/blueprints) only on screen, only once JS runs with motion allowed ── */
@media screen{
  #o-nas.on-js .on-mk{background-size:0% .36em;transition:background-size 1s var(--on-ease)}
  #o-nas.on-js .on-mk.on-on{background-size:100% .36em}
  #o-nas.on-js .on-card:not(.on-in) .on-bar{transform:scaleX(0)}
  #o-nas.on-js .on-card:not(.on-in) .on-ck,#o-nas.on-js .on-card:not(.on-in) .on-ok-d{opacity:0;transform:scale(.4)}
  #o-nas.on-js .on-card:not(.on-in) .on-hd,#o-nas.on-js .on-card:not(.on-in) .on-nw{opacity:0}
  #o-nas.on-js .on-card:not(.on-in) .on-sol{opacity:0;transform:translateY(-16px)}
  #o-nas.on-js .on-card:not(.on-in) .on-l5 .on-sk,#o-nas.on-js .on-card:not(.on-in) .on-l5 .on-tk{opacity:0}
  #o-nas.on-js .on-card:not(.on-in) .on-l5 .on-lb{fill:var(--on-m)}
}
#o-nas .on-bar{transition:transform .7s var(--on-ease);transition-delay:calc(var(--t) * .45s + .2s)}
#o-nas .on-ck{transition:opacity .3s ease 1.25s,transform .45s var(--on-ease) 1.25s}
#o-nas .on-hd{transition:opacity .3s ease 1.7s}
#o-nas .on-nw{transition:opacity .3s ease .9s}
#o-nas .on-ok-d{transition:opacity .3s ease 1.15s,transform .45s var(--on-ease) 1.15s}
/* 03 climb, once after the plates land (~1.4 s): 01 → 05 at .35 s a step, hard cuts, then rests on 05 */
#o-nas.on-js .on-c3.on-in .on-ly:not(.on-l5) .on-sk,#o-nas.on-js .on-c3.on-in .on-ly:not(.on-l5) .on-tk{animation:on-hit .35s steps(1,end) calc(var(--i) * .35s + 1.5s) 1}
#o-nas.on-js .on-c3.on-in .on-ly:not(.on-l5) .on-lb{animation:on-hit-l .35s steps(1,end) calc(var(--i) * .35s + 1.5s) 1}
#o-nas.on-js .on-c3.on-in .on-l5 .on-sk,#o-nas.on-js .on-c3.on-in .on-l5 .on-tk{animation:on-wait 2.9s steps(1,end) 1}
#o-nas.on-js .on-c3.on-in .on-l5 .on-lb{animation:on-wait-l 2.9s steps(1,end) 1}
@keyframes on-hit{from,to{opacity:1}}
@keyframes on-hit-l{from,to{fill:var(--on-k)}}
@keyframes on-wait{from,to{opacity:0}}
@keyframes on-wait-l{from,to{fill:var(--on-m)}}
/* living details: finite (2 iterations, all done within ~5 s of entry), replay on each viewport entry (.on-live) */
#o-nas .on-in.on-live .on-hd::after{animation:on-ping 1.6s ease-out 1.9s 2}
#o-nas .on-in.on-live .on-nw::after{animation:on-ping 1.6s ease-out 1.2s 2}
#o-nas .on-place.on-live .on-pin::after{animation:on-ping 2s ease-out .8s 2}
@keyframes on-ping{0%{transform:scale(.5);opacity:.6}80%,100%{transform:scale(1.5);opacity:0}}

/* ── responsive ── */
@media (max-width:1280px){
  #o-nas .on-c1 .on-fr,#o-nas .on-c2 .on-fr{padding-left:16px;padding-right:16px}
  #o-nas .on-dl{--lc:70px}
}
@media (max-width:1200px){
  /* contact sheet: place keeps track 1, people become rows over tracks 2–4 (emails never wrap) */
  #o-nas .on-ppl{grid-template-columns:1fr}
  #o-nas .on-p{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px 24px;padding:18px 28px}
  #o-nas .on-pid{flex-direction:row;align-items:center;gap:16px}
  #o-nas .on-p .on-act{margin:0 -10px 0 auto}
}
@media (max-width:1080px){
  #o-nas .on-head{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--kick-gap) 40px;align-items:start}
  #o-nas .on-st{grid-column:1/-1}
  #o-nas .on-body{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  #o-nas .on-body p+p{margin-top:0}
  #o-nas .on-pl{grid-template-columns:repeat(2,minmax(0,1fr))}
  #o-nas .on-c1 .on-fr,#o-nas .on-c2 .on-fr{padding-left:22px;padding-right:22px}
  #o-nas .on-dl{--lc:76px}
  #o-nas .on-c3{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}
  #o-nas .on-c3 .on-fr{height:280px;place-items:center;padding:16px}
  #o-nas .on-c3 .on-cp{padding:28px 32px 28px 8px}
  #o-nas .on-tw{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
}
@media (max-width:900px){
  #o-nas .on-tw{grid-template-columns:1fr}
  #o-nas .on-place{flex-direction:row;align-items:center;justify-content:flex-start;gap:28px;padding:20px 28px}
  #o-nas .on-map{width:200px;flex:none}
}
@media (max-width:600px){
  #o-nas .on-head{grid-template-columns:1fr}
  #o-nas .on-body{grid-template-columns:1fr;gap:14px}
  #o-nas .on-body p{font-size:16px}
  #o-nas .on-pl{grid-template-columns:1fr}
  #o-nas .on-c3{display:flex}
  #o-nas .on-fr,#o-nas .on-c1 .on-fr,#o-nas .on-c2 .on-fr{height:auto;padding:16px 16px 12px}
  #o-nas .on-c3 .on-fr{height:auto;padding:10px 8px 0}
  #o-nas .on-ui{min-height:0}
  #o-nas .on-uh{min-height:46px;padding:8px 12px}
  #o-nas .on-gt{gap:8px;padding:10px 12px 8px}
  #o-nas .on-run{gap:11px}
  #o-nas .on-ax{padding:8px 12px 9px}
  #o-nas .on-stk{max-width:276px}
  #o-nas .on-cp,#o-nas .on-c3 .on-cp{padding:6px 20px 20px}
  #o-nas .on-cp h3{margin:10px 0 6px}
  #o-nas .on-lb{font-size:15px}
  #o-nas .on-lb .on-n{font-size:12.5px}
  #o-nas .on-tw{margin-top:16px}
  #o-nas .on-place{gap:18px;padding:16px 20px}
  #o-nas .on-map{width:148px}
  #o-nas .on-loc b{font-size:17px}
  #o-nas .on-loc span{font-size:13.5px}
  /* people: avatar left, role + name beside it, mail underneath (chip centred under the avatar, text under the name) */
  #o-nas .on-p{flex-direction:column;align-items:stretch;gap:4px;padding:14px 20px 8px}
  #o-nas .on-pid{gap:14px}
  #o-nas .on-av{width:40px;height:40px}
  #o-nas .on-mono{font-size:13px}
  #o-nas .on-av-ic svg{width:18px;height:18px}
  #o-nas .on-who b{margin-top:4px;font-size:17px}
  #o-nas .on-p .on-act{margin:0 -10px;padding:0 10px 0 18px;gap:12px}
}
@media (max-width:400px){
  #o-nas .on-place{gap:16px}
  #o-nas .on-map{width:140px}
  #o-nas .on-loc span{white-space:normal}
}
@media (max-width:380px){
  #o-nas .on-p .on-act{padding-left:10px;gap:10px}
}
@media (max-width:340px){
  #o-nas .on-place{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  #o-nas *,#o-nas *::before,#o-nas *::after{animation:none!important;transition:none!important}
  #o-nas .on-ly{transform:none!important}
}
@media print{
  #o-nas *,#o-nas *::before,#o-nas *::after{animation:none!important;transition:none!important}
  #o-nas .on-w{opacity:1!important}
  #o-nas .on-rail i{opacity:0!important}
}
/* Windows high contrast: the 1px-gap hairlines are background, so give the cells real borders */
@media (forced-colors:active){
  #o-nas .on-pl,#o-nas .on-tw,#o-nas .on-ppl{background:Canvas;gap:0}
  #o-nas .on-card,#o-nas .on-place,#o-nas .on-p{border:1px solid CanvasText}
  #o-nas .on-av{border:1px solid CanvasText}
  #o-nas .on-mk{background:none;text-decoration:underline;text-decoration-thickness:.12em}
  #o-nas .on-rail{background:CanvasText}
  /* decorative visuals keep their drawn colours, like images */
  #o-nas .on-fr,#o-nas .on-map{forced-color-adjust:none}
}