/* Traceroute — "NetPath" console.
   ---------------------------------------------------------------------------
   This page runs its own visual system rather than the shared .nettool-page one,
   because it is showing something the other tools are not: a path through several
   networks. Colour here carries two independent meanings at once — hue says which
   network a hop belongs to, and the latency ramp (green → amber → rose) says how
   far away it is. Those two scales have to stay clear of each other or the page
   lies, which is why the network hues are all cool/saturated and the ramp owns
   green-amber-rose exclusively.

   Everything is scoped under .trace-page so nothing here can leak into the shared
   stylesheet the rest of the network tools use.
   =========================================================================== */

.trace-page {
    /* surfaces */
    --paper: #f6f8fd;
    --card: #ffffff;
    --sunk: #f0f3fa;
    --rule: #e2e7f3;
    --rule-2: #cfd8eb;

    /* ink — all three pass WCAG AA on white */
    --ink: #111827;     /* 15.8:1 */
    --dim: #46536f;     /*  8.1:1 */
    --faint: #616d8b;   /*  4.9:1 */

    /* network hues — assigned to autonomous systems in order, never by meaning */
    --violet: #5b3df5;
    --blue: #0b6fd0;
    --teal: #0a8f84;
    --pink: #d2287c;
    --slate: #7c88a6;

    /* latency ramp — kept clear of every network hue above */
    --fast: #0e9e66;
    --mid: #d97904;
    --slow: #da2a50;

    --sh-sm: 0 1px 2px rgba(17, 24, 39, .05);
    --sh-md: 0 6px 18px -8px rgba(17, 24, 39, .16), 0 1px 3px rgba(17, 24, 39, .05);
    --sh-lg: 0 30px 60px -32px rgba(17, 24, 39, .3), 0 2px 10px rgba(17, 24, 39, .05);

    --display: "Chakra Petch", ui-sans-serif, system-ui, sans-serif;
    --body: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

    position: relative;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.trace-page * { box-sizing: border-box }

/* The three tinted washes from the design. Pinned to the page rather than the
   viewport so they scroll away instead of following the reader down. */
.trace-page::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 780px;
    pointer-events: none; z-index: 0;
    background:
        radial-gradient(780px 420px at 12% -10%, rgba(91, 61, 245, .12), transparent 68%),
        radial-gradient(700px 380px at 62% -14%, rgba(10, 143, 132, .11), transparent 68%),
        radial-gradient(620px 340px at 98% -6%, rgba(210, 40, 124, .09), transparent 66%);
}

.trace-page .trace-shell {
    position: relative; z-index: 1;
    width: min(1360px, calc(100% - 32px)); margin: 0 auto; padding: 0 0 40px;
}

.trace-page .eyebrow {
    margin: 0;
    font-family: var(--mono); font-size: 11.5px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}

/* ================================================================ console == */

.trace-page .console { padding: 42px 0 34px }
.trace-page .hero-head { max-width: 820px }
.trace-page .hero-head h1 {
    margin: 16px 0 0;
    font-family: var(--display); font-weight: 700;
    font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: -.015em;
    color: var(--ink);
}
.trace-page .hero-head h1 em {
    font-style: normal;
    background: linear-gradient(96deg, var(--violet), var(--blue) 48%, var(--teal));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.trace-page .hero-head p {
    margin: 18px 0 0; max-width: 700px;
    color: var(--dim); font-size: 17.5px; line-height: 1.6;
}

.trace-page .query {
    margin-top: 32px; border: 1px solid var(--rule-2); border-radius: 18px;
    background: var(--card); box-shadow: var(--sh-lg); overflow: hidden;
}
.trace-page .query-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1px; background: var(--rule) }
.trace-page .q-field { flex: 1 1 320px; min-width: 0; background: var(--card); padding: 18px 22px }
.trace-page .q-field label {
    display: block; margin-bottom: 8px;
    font-family: var(--mono); font-size: 11.5px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.trace-page .q-field input,
.trace-page .q-field select {
    width: 100%; padding: 0; border: 0; outline: none; background: transparent;
    color: var(--ink); font-family: var(--mono); font-size: 17px; font-weight: 500;
}
.trace-page .q-field input::placeholder { color: #9aa5c0; font-weight: 400 }
/* Room for the chevron drawn by .select-wrap::after - without it a long option
   name ("Auto (best available probe)") runs straight underneath the arrow. */
.trace-page .q-field select { appearance: none; cursor: pointer; padding-right: 22px }
.trace-page .q-field.select-wrap { flex: 0 1 300px; position: relative }
.trace-page .q-field.select-wrap::after {
    content: ""; position: absolute; right: 22px; bottom: 24px;
    width: 8px; height: 8px; pointer-events: none;
    border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
    transform: rotate(45deg);
}

.trace-page .q-run {
    flex: 0 0 auto; border: 0; cursor: pointer; color: #fff;
    background: linear-gradient(135deg, var(--violet), #6b45f2 55%, #2f6fe8);
    font-family: var(--display); font-weight: 600; font-size: 16.5px;
    padding: 0 34px; min-height: 86px;
    display: flex; align-items: center; justify-content: center; gap: 11px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: filter .16s, box-shadow .16s;
}
.trace-page .q-run:hover:not(:disabled) {
    filter: brightness(1.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 28px -10px rgba(91, 61, 245, .66);
}
.trace-page .q-run:disabled { background: var(--sunk); color: var(--faint); cursor: progress; box-shadow: none }

.trace-page .q-opts {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
    padding: 16px 22px; border-top: 1px solid var(--rule); background: var(--sunk);
}
.trace-page .opt { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; color: var(--dim) }
.trace-page .opt .k {
    font-size: 11.5px; font-weight: 500; letter-spacing: .09em;
    text-transform: uppercase; color: var(--faint);
}
.trace-page .seg { display: flex; border: 1px solid var(--rule-2); border-radius: 8px; overflow: hidden; background: var(--card) }
.trace-page .seg button {
    border: 0; cursor: pointer; background: transparent; color: var(--dim);
    font-family: var(--mono); font-size: 12.5px; font-weight: 500; padding: 7px 13px; transition: .15s;
}
.trace-page .seg button:hover { background: var(--sunk) }
.trace-page .seg button[aria-pressed="true"] { background: var(--violet); color: #fff }

.trace-page .swtch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-size: 13px }
.trace-page .swtch i {
    width: 34px; height: 20px; flex: 0 0 auto; border-radius: 999px;
    background: var(--rule-2); position: relative; transition: .18s;
}
.trace-page .swtch i::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px;
    border-radius: 50%; background: #fff; box-shadow: var(--sh-sm); transition: .18s;
}
.trace-page .swtch[aria-checked="true"] i { background: var(--violet) }
.trace-page .swtch[aria-checked="true"] i::after { left: 17px }

.trace-page .q-note {
    margin: 0; padding: 12px 22px; border-top: 1px solid var(--rule);
    background: var(--card); color: var(--faint); font-size: 12.5px; line-height: 1.55;
}

/* probe strip */
.trace-page .probes { margin-top: 30px }
.trace-page .probes-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 13px }
.trace-page .probes-head p { margin: 0; font-size: 15px; color: var(--dim) }
.trace-page .probe-scroll {
    display: flex; gap: 11px; overflow-x: auto; padding: 3px 3px 10px;
    scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent;
}
.trace-page .probe-scroll::-webkit-scrollbar { height: 6px }
.trace-page .probe-scroll::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 9px }
.trace-page .chip {
    flex: 0 0 auto; cursor: pointer; text-align: left; position: relative;
    padding: 11px 18px 11px 30px; border: 1px solid var(--rule); border-radius: 13px;
    background: var(--card); box-shadow: var(--sh-sm); transition: .16s;
}
.trace-page .chip::before {
    content: ""; position: absolute; left: 14px; top: 19px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--slate));
}
.trace-page .chip:hover { border-color: var(--rule-2); box-shadow: var(--sh-md); transform: translateY(-1px) }
.trace-page .chip strong { display: block; font-family: var(--display); font-weight: 600; font-size: 15.5px; line-height: 1.25; color: var(--ink) }
.trace-page .chip span { display: block; margin-top: 3px; font-family: var(--mono); font-size: 11.5px; color: var(--faint) }
.trace-page .chip[aria-pressed="true"] { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(91, 61, 245, .13), var(--sh-md) }

.trace-page .msg { display: none; margin-top: 16px; padding: 12px 16px; border-radius: 11px; font-size: 14.5px }
.trace-page .msg.show { display: block }
.trace-page .msg.info { background: rgba(11, 111, 208, .08); border: 1px solid rgba(11, 111, 208, .26); color: #0a5aa8 }
.trace-page .msg.error { background: rgba(218, 42, 80, .07); border: 1px solid rgba(218, 42, 80, .28); color: #b02241 }

/* ================================================================ results == */

.trace-page .results { padding: 4px 0 30px }
.trace-page .results[hidden] { display: none }

.trace-page .result-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
    padding: 18px 22px; margin-bottom: 22px;
    border: 1px solid var(--rule); border-radius: 14px; background: var(--card); box-shadow: var(--sh-md);
}
.trace-page .result-bar .target { font-family: var(--mono); font-size: 15.5px; color: var(--dim); overflow-wrap: anywhere }
.trace-page .result-bar .target b { color: var(--violet); font-weight: 600 }
.trace-page .result-bar .meta { font-family: var(--mono); font-size: 12.5px; color: var(--faint) }
.trace-page .verdict {
    margin-left: auto; display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 15px; border-radius: 9px;
    font-family: var(--mono); font-size: 13px; font-weight: 500;
}
.trace-page .verdict.ok   { border: 1px solid rgba(14, 158, 102, .36); background: rgba(14, 158, 102, .09); color: #0a7a4e }
.trace-page .verdict.warn { border: 1px solid rgba(217, 121, 4, .36);  background: rgba(217, 121, 4, .09);  color: #96540a }
.trace-page .verdict.bad  { border: 1px solid rgba(218, 42, 80, .36);  background: rgba(218, 42, 80, .08);  color: #b02241 }

.trace-page .grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start }
.trace-page .card { border: 1px solid var(--rule); border-radius: 16px; background: var(--card); box-shadow: var(--sh-md); overflow: hidden }
.trace-page .card-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 17px 20px; border-bottom: 1px solid var(--rule) }
.trace-page .card-head h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: .03em; color: var(--ink) }
.trace-page .card-head .hint { margin-left: auto; font-size: 13px; color: var(--faint) }

.trace-page .lad-legend {
    display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 13px 20px;
    background: var(--sunk); border-bottom: 1px solid var(--rule);
    font-family: var(--mono); font-size: 12px; color: var(--dim);
}
.trace-page .lad-legend b { display: flex; align-items: center; gap: 8px; font-weight: 400 }
.trace-page .lad-legend i { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; display: block }

/* ---------------------------------------------------------- network bands -- */
.trace-page .band { position: relative; background: var(--tint); border-bottom: 1px solid var(--rule) }
.trace-page .band::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--as) }
.trace-page .band:last-child { border-bottom: 0 }
.trace-page .band-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    padding: 13px 20px 13px 22px; border-bottom: 1px solid rgba(255, 255, 255, .9);
}
.trace-page .as-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px;
    border: 1.5px solid var(--as); border-radius: 7px; background: #fff;
    color: var(--as); font-family: var(--mono); font-size: 13px; font-weight: 600;
}
.trace-page .band-head .netname { font-size: 14px; font-weight: 500; color: var(--ink) }
.trace-page .band-head .tally { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--dim) }

/* The hop number gets its own column rather than being absolutely positioned inside
   the rail. Overlaying the two put the number's right edge exactly on the node's
   centre, and the node - which is opaque and sits at z-index 2 - painted straight
   over it, so no hop number was visible at all. Separate columns cannot collide. */
.trace-page .hop {
    display: grid; grid-template-columns: 24px 20px minmax(0, 1fr) 150px minmax(140px, 1fr);
    gap: 14px; align-items: center; padding: 14px 20px 14px 12px; position: relative;
}
.trace-page .hop + .hop { border-top: 1px solid rgba(255, 255, 255, .9) }
.trace-page .hop:hover { background: rgba(255, 255, 255, .72) }

.trace-page .hop .rail { position: relative; min-height: 46px; height: 100%; display: flex; align-items: center; justify-content: center }
.trace-page .hop .rail::before {
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
    transform: translateX(-50%); background: var(--as); opacity: .34;
}
.trace-page .hop.is-first .rail::before { top: 50% }
.trace-page .hop.is-last .rail::before { bottom: 50% }
.trace-page .hop.timeout .rail::before {
    background: repeating-linear-gradient(to bottom, var(--slate) 0 4px, transparent 4px 9px); opacity: .75;
}
.trace-page .node {
    position: relative; z-index: 2; width: 12px; height: 12px; border-radius: 50%;
    background: #fff; border: 3px solid var(--fast); box-shadow: 0 0 0 4px var(--tint);
}
.trace-page .node.solid { background: currentColor }
.trace-page .hop.timeout .node { border-color: var(--slate); border-style: dashed; border-width: 2px }
.trace-page .hopnum {
    text-align: right; align-self: center;
    font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--faint);
}

.trace-page .hopinfo { min-width: 0 }
.trace-page .hopinfo .host {
    font-family: var(--mono); font-size: 14.5px; font-weight: 500; color: var(--ink);
    line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trace-page .hopinfo .sub {
    margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px 14px; line-height: 1.4;
    font-family: var(--mono); font-size: 12.5px; color: var(--faint);
}
.trace-page .hopinfo .sub .ip { color: var(--dim); font-weight: 500 }
.trace-page .hopinfo .sub .geo::before { content: "◈ "; color: var(--as) }
.trace-page .hop.timeout .host { color: var(--faint); letter-spacing: .24em; font-weight: 500 }
.trace-page .hop.timeout .sub { font-family: var(--body); font-size: 13.5px; color: var(--dim) }

.trace-page .rtts { display: flex; gap: 11px; justify-content: flex-end; font-family: var(--mono); font-size: 13px; color: var(--faint) }
.trace-page .rtts .best { color: var(--ink); font-weight: 700 }

.trace-page .track { position: relative; height: 28px; border-radius: 7px; background: #fff; border: 1px solid var(--rule); overflow: hidden }
.trace-page .track .bar { position: absolute; top: 0; bottom: 0; border-radius: 6px; min-width: 3px; transform-origin: left }
.trace-page .track .tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rule) }
.trace-page .track .lbl {
    position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap;
    font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--dim);
}

.trace-page .handoff {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 13px 20px 13px 22px; background: var(--sunk); border-bottom: 1px solid var(--rule);
    font-size: 13.5px; font-weight: 500; color: var(--dim);
}
.trace-page .handoff .arrow { display: flex; align-items: center; gap: 6px; flex: 0 0 auto }
.trace-page .handoff .sw { width: 11px; height: 11px; border-radius: 3px }
.trace-page .handoff em { font-style: normal; color: var(--faint); font-weight: 400 }

/* ------------------------------------------------------------ side column -- */
.trace-page .side { display: flex; flex-direction: column; gap: 22px }

.trace-page .insight { padding: 20px; display: flex; gap: 14px; background: #fffaf0; border-color: #f0ddb6 }
/* The rule above sets display, which beats the browser's own [hidden] rule - so the
   card the script hides by setting .hidden would otherwise stay on screen with an
   empty heading. Restated here at equal specificity, after it, so hidden wins. */
.trace-page .insight[hidden] { display: none }
.trace-page .insight h3 { margin: 0 0 7px; font-family: var(--display); font-weight: 600; font-size: 16px; color: #9a5b02 }
.trace-page .insight p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--dim) }
.trace-page .insight p b { color: var(--ink); font-weight: 600; font-family: var(--mono); font-size: 14px }

.trace-page .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule) }
.trace-page .stat { background: var(--card); padding: 17px 20px; position: relative }
.trace-page .stat::before {
    content: ""; position: absolute; left: 0; top: 17px; bottom: 17px; width: 4px;
    border-radius: 0 4px 4px 0; background: var(--c);
}
.trace-page .stat .k {
    font-family: var(--mono); font-size: 11.5px; font-weight: 500;
    letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
}
.trace-page .stat .v { margin-top: 7px; font-family: var(--mono); font-size: 26px; font-weight: 600; line-height: 1; color: var(--c) }
.trace-page .stat .v small { margin-left: 4px; font-size: 13px; font-weight: 400; color: var(--faint) }

.trace-page .profile { padding: 18px 18px 12px }
.trace-page .profile svg { display: block; width: 100%; height: auto; overflow: visible }

/* ==================================================================== map == */
/* The shared Leaflet component does the drawing; this only gives it a box. Taller
   than the design's 484x214 because the arcs are the point, and a short box squeezes
   a trans-Pacific leg into something you cannot read. */
.trace-page .mapcard { display: flex; flex-direction: column; margin-bottom: 22px }
.trace-page .mapbox { position: relative; flex: 1 1 auto; min-height: 0 }
.trace-page .trace-map { height: 460px; border-radius: 0; border: 0 }

/* Permanent tooltip on the two ends, so the origin and destination read without a
   click while the intermediate hops stay quiet until you ask. */
.trace-page .qdt-map-routelabel,
.qdt-map-routelabel {
    background: rgba(255, 255, 255, .94); border: 1px solid var(--rule-2, #cfd8eb);
    border-radius: 7px; box-shadow: 0 2px 8px rgba(17, 24, 39, .12);
    font-family: var(--mono, monospace); font-size: 12px; font-weight: 600; color: #111827;
    padding: 3px 8px;
}
.qdt-map-routelabel::before { display: none }

.trace-page .map-btn {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 6px 12px; border: 1px solid var(--rule-2); border-radius: 8px;
    background: var(--card); color: var(--dim);
    font-family: var(--mono); font-size: 12px; font-weight: 500; transition: .15s;
}
.trace-page .map-btn:hover { border-color: var(--violet); color: var(--violet) }
.trace-page .map-btn svg { width: 13px; height: 13px }
.trace-page .card-head .map-btn { margin-left: auto }

.trace-page .map-foot {
    display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 13px 20px;
    border-top: 1px solid var(--rule); font-size: 13px; color: var(--dim);
}
.trace-page .map-foot b { font-weight: 400; display: flex; align-items: center; gap: 8px }
.trace-page .map-foot i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; display: block }

/* Expanded. Two mechanisms on purpose: the Fullscreen API where it exists, and a
   fixed overlay where it does not — iOS Safari has never supported it on a plain
   div, and a button that silently does nothing there is worse than no button. */
.trace-page .mapcard.is-expanded,
.trace-page .mapcard:fullscreen {
    position: fixed; inset: 0; z-index: 9000;
    width: 100vw; height: 100vh; max-width: none;
    border-radius: 0; border: 0; box-shadow: none;
}
.trace-page .mapcard:fullscreen { background: var(--card) }
/* The map fills whatever is left after the header and footer rows, so Leaflet gets a
   real height to size its tiles against rather than the fixed 460px. */
.trace-page .mapcard.is-expanded .mapbox,
.trace-page .mapcard:fullscreen .mapbox { padding: 0 }
.trace-page .mapcard.is-expanded .trace-map,
.trace-page .mapcard:fullscreen .trace-map { height: 100% }
body.trace-map-open { overflow: hidden }

/* ================================================================= motion == */
.trace-page .reveal { opacity: 0; transform: translateY(7px) }
.trace-page .playing .reveal { animation: trace-rise .45s cubic-bezier(.2, .7, .3, 1) forwards; animation-delay: calc(var(--i) * 45ms) }
@keyframes trace-rise { to { opacity: 1; transform: none } }
.trace-page .playing .track .bar { animation: trace-grow .5s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--i) * 45ms + 120ms) }
@keyframes trace-grow { from { transform: scaleX(0) } to { transform: scaleX(1) } }

.trace-page :focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 4px }

.trace-page .empty {
    margin-top: 6px; padding: 40px 24px; text-align: center;
    border: 1px dashed var(--rule-2); border-radius: 16px;
    background: rgba(255, 255, 255, .7); color: var(--faint); font-size: 15px;
}
.trace-page .empty[hidden] { display: none }

/* ============================================================= responsive == */
@media (max-width: 1180px) {
    .trace-page .grid { grid-template-columns: 1fr }
}
@media (max-width: 760px) {
    .trace-page { font-size: 15.5px }
    .trace-page .console { padding: 30px 0 26px }
    .trace-page .hop { grid-template-columns: 24px 20px minmax(0, 1fr); gap: 12px; row-gap: 11px; padding: 16px 18px 16px 12px }
    .trace-page .rtts { grid-column: 3; justify-content: flex-start }
    .trace-page .track { grid-column: 3 }
    .trace-page .band-head .tally { margin-left: 0; width: 100% }
    .trace-page .q-run { min-height: 64px; width: 100%; }
    .trace-page .card-head .hint { margin-left: 0; width: 100% }
    .trace-page .card-head .map-btn { margin-left: 0 }
    .trace-page .stats { grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce) {
    .trace-page *, .trace-page *::before, .trace-page *::after {
        animation-duration: .001ms !important; transition-duration: .001ms !important;
    }
    .trace-page .reveal { opacity: 1; transform: none }
}