/* SystemChart home page: a hero with a live chart, then one chapter per section. */
.up { color: var(--up); }
.down { color: var(--down); }
.btn.ghost { background: rgba(255, 255, 255, .03); border-color: var(--line-2); color: var(--bright); }

/* A <picture> only chooses the file; its image keeps taking part in the parent's layout, and a <source> is never a box
   (as a flex item it would add a gap beside the image). */
picture { display: contents; }
picture > source { display: none; }

/* transition-sound.js adds its buttons after the first paint. Until they arrive an empty box of the same size holds their
   place, so the header links do not jump (phone button 32px square; desktop button about 76px by 30px). */
@media (max-width: 820px) {
  .js .nav-station:not(:has(.nav-sound))::after { content: ''; order: 1; flex: none; width: 32px; height: 32px; }
}
.js .nav-context:not(:has(.nav-sound))::after { content: ''; flex: none; width: 76px; height: 30px; }

/* A framed screenshot: the app window, with a soft floor light. */
.shot {
  position: relative; margin: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid #232838; background: var(--bg-app);
  box-shadow: 0 50px 120px -50px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .05) inset;
}
.shot img { width: 100%; }
.shot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); pointer-events: none; }

/* Reveal on scroll (home.js). Without script everything is simply shown. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.hero { display: flex; flex-direction: column; min-height: max(700px, 100svh); padding-top: var(--header); overflow: clip; }
.hero-copy { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 24px 0; text-align: center; }
.hero-mark { margin-bottom: 26px; }
.hero-mark img.mark { width: 80px; height: 80px; }
.hero-mark canvas.sparks { left: -152px; top: -152px; width: 384px; height: 384px; }
.hero h1 { font-size: clamp(46px, 6.6vw, 98px); line-height: .98; letter-spacing: -.046em; font-weight: 700; }
.grad { background: linear-gradient(92deg, #22d3ee 0%, #7dd3fc 34%, #9b7bf0 66%, #f0186f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { max-width: 35em; margin: 22px auto 0; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.6; color: var(--dim); }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 18px 0 0; padding: 0; list-style: none; font: 600 12px/1 var(--mono); color: var(--faint); letter-spacing: .03em; }
.meta li::before { content: '\25B2'; margin-right: 7px; font-size: 8px; color: var(--up); vertical-align: 1px; }
.hero-chart { position: relative; height: clamp(200px, 30vh, 340px); margin-top: 26px; }
.hero-chart::before { content: ''; position: absolute; inset: -40px 0 0; background: linear-gradient(180deg, rgba(7, 9, 14, 0), rgba(7, 9, 14, .86) 45%); }
.hero-chart .live { position: absolute; inset: 0; }
.sim-note { position: absolute; right: 18px; top: 4px; max-width: calc(100% - 36px); text-align: right; font: 600 11px/1.3 var(--mono); color: var(--faint); letter-spacing: .03em; }
.readout { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 30px; padding: 13px 24px; border-top: 1px solid var(--line); background: rgba(7, 9, 14, .94); font: 700 11px/1 var(--mono); letter-spacing: .08em; color: var(--faint); }
.readout span { display: inline-flex; align-items: baseline; gap: 8px; }
.readout b { font: 600 15px/1 var(--din); letter-spacing: .01em; color: var(--bright); }
.readout small { font: 600 11.5px/1 var(--din); letter-spacing: .01em; }
.readout i { width: 8px; height: 8px; border-radius: 2px; align-self: center; }
.readout .k-cpu { background: var(--cpu); }
.readout .k-gpu { background: var(--gpu); }
.readout .k-mem { background: var(--mem); }
.readout .k-pwr { background: var(--sky); }
.readout .k-temp { background: #ff9f70; }

/* ---------- live chart (livechart.js) ---------- */
.live-chart { position: relative; width: 100%; height: 100%; }
.live-chart canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- tape: the application's headline strip (tape.js) ---------- */
.tape { position: relative; display: flex; align-items: center; height: 34px; overflow: hidden; border-bottom: 1px solid var(--line); background: rgba(8, 10, 15, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12.5px; }
.tape-label { flex: none; padding: 0 12px 0 16px; font: 700 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--faint); height: 100%; display: flex; align-items: center; border-right: 1px solid var(--line); background: rgba(8, 10, 15, .95); position: relative; z-index: 2; }
.tape-window { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.tape-run { display: flex; width: max-content; animation: tape var(--tape-duration, 80s) linear infinite; }
.tape:hover .tape-run { animation-play-state: paused; }
@keyframes tape { to { transform: translateX(-50%); } }
.tick { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; white-space: nowrap; border-right: 1px solid var(--line); color: var(--text); }
.tick b { font: 700 10px/1 var(--mono); letter-spacing: .06em; }
.tick .tag { font: 700 9.5px/1 var(--mono); padding: 3px 5px; border-radius: 4px; background: #3a2f12; color: var(--gold); letter-spacing: .05em; }
.tick .tag.retrace { background: transparent; border: 1px solid #3b4254; color: var(--dim); }
.tick .bull { color: var(--up); }
.tick time { color: var(--faint); font-size: 11.5px; }

/* Without script there is no live feed, so the parts that only show one are left out. */
html:not(.js) :is(.hero-chart, .readout, .tape, .quote-row, .candles, .scale-marker) { display: none; }

/* ---------- chapters ---------- */
main > section[id]:not([data-flush]) { scroll-margin-top: var(--header); }
.chapter { padding-top: clamp(100px, 11vw, 156px); overflow-x: clip; }
.chapter-head { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 0 24px; text-align: center; }
.numeral { position: absolute; left: 50%; top: -.36em; z-index: -1; transform: translateX(-50%); font: 700 clamp(150px, 19vw, 280px)/1 var(--din); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .075); pointer-events: none; user-select: none; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--stop-color); }
.kicker::before, .kicker::after { content: ''; width: 20px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; }
.chapter h2 { margin-top: 18px; font-size: clamp(38px, 5vw, 70px); line-height: 1.02; letter-spacing: -.038em; font-weight: 700; }
.chapter-head p { max-width: 35em; margin: 20px auto 0; font-size: 18px; line-height: 1.6; color: var(--dim); }

.stage { position: relative; width: min(100% - 48px, 1120px); margin: 58px auto 0; }
.stage::before { content: ''; position: absolute; inset: 8% 4% -14%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--stop-color) 22%, transparent), transparent); filter: blur(30px); opacity: .9; }
.stage .frame { position: relative; transform-origin: 50% 0; }
.js .stage.reveal { transform: none; }
.js .stage.reveal .frame { transform: perspective(2200px) rotateX(16deg) translateY(50px) scale(.94); transition: transform 1.7s var(--ease); }
.js .stage.reveal.in .frame { transform: none; }
.caption { display: flex; justify-content: center; gap: 10px 26px; flex-wrap: wrap; margin-top: 22px; padding: 0 24px; font-size: 14px; color: var(--faint); }
.caption b { color: var(--text); font-weight: 600; }

/* Price levels: the chart's own lines, labelled on the axis outside the picture. */
.levels { position: absolute; top: 0; bottom: 0; left: 100%; width: 0; }
.level { position: absolute; left: 0; top: var(--y); display: flex; align-items: center; transform: translateY(-50%); opacity: 0; transition: opacity .8s var(--ease) calc(1.1s + var(--i, 0) * .15s); }
.level.avg { --y: 36.7%; --c: #22d3ee; --i: 0; }
.level.low { --y: 76.1%; --c: #a78bfa; --i: 1; }
.stage.in .level, html:not(.js) .level { opacity: 1; }
.level::before { content: ''; width: 14px; border-top: 1px dashed var(--c); margin-right: 5px; }
.level b { padding: 5px 7px; border-radius: 3px; background: var(--c); color: #07090e; font: 700 12.5px/1 var(--din); white-space: nowrap; }
.level small { position: absolute; left: 19px; top: calc(100% + 5px); font: 700 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c); white-space: nowrap; }

/* Inside: the map, with the two dies below it. */
.dies { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-top: 18px; align-items: start; }

/* Games: the rank scale, with a live marker riding it. */
.rankscale { width: min(100% - 48px, 1120px); margin: 48px auto 0; }
.scale-title { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 46px; font: 700 11px/1 var(--mono); letter-spacing: .14em; color: var(--faint); }
.scale-bar { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; height: 10px; }
.scale-bar > span { height: 100%; border-radius: 2px; background: var(--b); opacity: .92; }
.scale-bar > span:nth-child(1) { --b: #8a8f9c; }
.scale-bar > span:nth-child(2) { --b: #e8621e; }
.scale-bar > span:nth-child(3) { --b: #f0980e; }
.scale-bar > span:nth-child(4) { --b: #a3e635; }
.scale-bar > span:nth-child(5) { --b: #a78bfa; }
.scale-bar > span:nth-child(6) { --b: #7dd3fc; }
.scale-bar > span:nth-child(7) { --b: #6ee7a8; }
.scale-names { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 12px; font: 700 10.5px/1 var(--mono); letter-spacing: .08em; color: var(--faint); text-align: center; }
.scale-names span { white-space: nowrap; }
.scale-names small { display: block; margin-top: 6px; font: 600 11.5px/1 var(--din); letter-spacing: .02em; color: #5d6373; }
.scale-marker { position: absolute; top: -34px; left: var(--x, 80%); transform: translateX(-50%); transition: left .9s var(--ease); display: flex; flex-direction: column; align-items: center; }
.scale-marker b { padding: 5px 8px; border-radius: 4px; background: var(--band, #6ee7a8); color: #07090e; font: 700 12.5px/1 var(--din); white-space: nowrap; transition: background .6s; }
.scale-marker i { width: 0; height: 0; margin-top: -1px; border: 6px solid transparent; border-top-color: var(--band, #6ee7a8); transition: border-color .6s; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 30px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--line); }
.stat { padding: 20px 22px; background: rgba(13, 16, 24, .96); }
.stat b { display: block; font: 600 34px/1 var(--din); color: var(--bright); letter-spacing: .005em; }
.stat b small { font-size: 15px; color: var(--dim); margin-left: 4px; }
.stat span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--faint); }
.stat .band { color: #6ee7a8; font-weight: 600; }

/* Black Box: the report lies on top of the timeline. */
.box-stage { padding-bottom: 60px; }
.report { position: absolute; right: -40px; bottom: -70px; width: 27%; transform: rotate(4deg); transform-origin: 100% 100%; }
.report .shot { border-color: #2e3446; box-shadow: 0 50px 90px -30px #000, 0 0 0 1px rgba(0, 0, 0, .6); }
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; font: 700 10px/1 var(--mono); letter-spacing: .1em; }
.badge.free { background: rgba(38, 166, 154, .16); color: #5fe0d0; border: 1px solid rgba(38, 166, 154, .45); }
.badge.pro { background: rgba(227, 179, 65, .14); color: #f4c85a; border: 1px solid rgba(227, 179, 65, .45); }
.report .badge { position: absolute; left: 12px; top: -10px; z-index: 2; background: #1a1507; }

/* Extras: two cards. */
.pair { display: grid; grid-template-columns: 1.05fr 1fr; gap: 18px; width: min(100% - 48px, 1120px); margin: 58px auto 0; }
.card { position: relative; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, rgba(20, 24, 34, .9), rgba(12, 15, 22, .9)); overflow: hidden; }
.card h3 { display: flex; align-items: center; gap: 10px; font-size: 22px; letter-spacing: -.02em; }
.card p { margin-top: 10px; color: var(--dim); font-size: 15px; }
.card p.small { font-size: 13px; color: var(--faint); }
.quote-row { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; }
.quote-row .sym { font: 700 12px/1 var(--mono); letter-spacing: .1em; color: var(--faint); }
.quote-row .px { font: 600 30px/1 var(--din); color: var(--bright); }
.quote-row small { font: 600 13px/1 var(--din); }
.candles { height: 200px; margin: 12px -8px 0; }
.card .shot { margin-top: 20px; border-radius: 10px; }

/* ---------- Free and Pro: the same record, more ways to use it ---------- */
.pro-band { position: relative; margin-top: clamp(110px, 12vw, 160px); padding: 76px 0 70px; border-block: 1px solid rgba(227, 179, 65, .22); background: radial-gradient(80% 120% at 85% 0%, rgba(227, 179, 65, .12), transparent 60%), linear-gradient(180deg, rgba(24, 19, 8, .92), rgba(10, 9, 7, .94)); }
.pro-band::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, #f4c85a, transparent); }
.pro-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; margin-bottom: 36px; }
.pro-band .kicker { color: #f0c36d; }
.pro-intro h2 { margin-top: 16px; font-size: clamp(34px, 4vw, 56px); line-height: 1.04; letter-spacing: -.035em; }
.pro-intro h2 .gold { color: #f4c85a; }
.pro-intro-copy > p { color: #d0c8b7; font-size: 17px; max-width: 34em; }
.pro-intro-copy p.pro-availability { margin-top: 16px; font-size: 13px; color: #b0a894; }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.side { min-width: 0; overflow: hidden; border: 1px solid #2c4345; border-radius: 18px; background: linear-gradient(160deg, #112023, #0c1117 55%); }
.side.pro { border-color: #766030; background: linear-gradient(160deg, #2c2515, #15140f 55%); }
.edition-copy { padding: 28px 28px 22px; }
.side-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.side-head h3 { font-size: 22px; }
.edition-promise { margin-top: 12px; font-size: clamp(25px, 2.5vw, 32px); line-height: 1.2; font-weight: 650; letter-spacing: -.025em; color: var(--bright); }
.edition-description { margin-top: 10px; font-size: 15px; color: #b5bdc7; min-height: 3.2em; }
.edition-figure { margin: 0 16px; }
.edition-image { display: block; position: relative; overflow: hidden; border: 1px solid #303642; border-radius: 8px; background: #0b1018; }
.edition-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.edition-image > span { position: absolute; right: 8px; bottom: 8px; padding: 5px 9px; border: 1px solid #59606d; border-radius: 4px; background: #090d16eb; color: #edf0f6; font: 600 11px/1.5 var(--sans); }
.edition-image:hover { border-color: #f0c36d; }
.edition-image:focus-visible, .edition-guide:focus-visible, .edition-comparison summary:focus-visible { outline: 2px solid #f4c85a; outline-offset: 4px; }
.edition-figure figcaption { padding: 10px 4px 0; font-size: 11px; color: #adb5c2; }
.edition-benefits { padding-top: 16px; }
.side ul { margin: 0; padding: 0; list-style: none; font-size: 14px; color: #d7dce4; }
.side li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #ffffff0b; }
.side li::before { content: '\2713'; flex: none; color: #7ad8c4; }
.side.pro li::before { color: #f4c85a; }
.edition-example { margin-top: 20px; padding-left: 14px; border-left: 2px solid #49766e; font-size: 14px; color: #c3cbd5; }
.side.pro .edition-example { border-color: #a48946; }
.edition-example > span { display: block; margin-bottom: 5px; font: 600 10px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8bdcc9; }
.side.pro .edition-example > span { color: #f4c85a; }
.edition-image-note { margin-top: 14px; font-size: 12px; color: #a8a18f; }
.pro-examples-heading { margin: 48px 0 20px; }
.pro-examples-heading h3 { margin-top: 8px; font-size: clamp(23px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -.025em; }
.pro-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pro-example { display: flex; flex-direction: column; min-width: 0; border: 1px solid #383225; border-radius: 12px; overflow: hidden; background: #101114; transition: border-color .25s, transform .3s var(--ease); }
.pro-example:hover, .pro-example:focus-within { border-color: #6a5a34; transform: translateY(-2px); }
.pro-example .edition-image { border: 0; border-bottom: 1px solid #383225; border-radius: 0; }
.pro-example .edition-image:focus-visible { outline-offset: -3px; }
.edition-widget { background: radial-gradient(ellipse at center, #203736, #0d1419); }
.edition-widget img { padding: 10px; }
.pro-example-copy { display: flex; flex: 1; flex-direction: column; padding: 22px; }
.pro-example-label { font: 600 10px/1.6 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: #ddb966; }
.pro-example h4 { margin: 8px 0 0; font: 650 21px/1.25 var(--sans); letter-spacing: -.02em; color: var(--bright); }
.pro-example p { margin: 12px 0 18px; font-size: 14px; color: #b1b8c4; }
.edition-guide { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 36px; margin-top: auto; color: #efd394; font-size: 12px; font-weight: 600; }
.edition-guide:hover { color: #fff; }
.edition-comparison { margin-top: 32px; border: 1px solid #52432a; border-radius: 12px; overflow: hidden; background: #11110f; }
.edition-comparison summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 26px; cursor: pointer; list-style: none; color: #f1e5c8; font-size: 17px; font-weight: 600; }
.edition-comparison summary::-webkit-details-marker { display: none; }
.edition-comparison summary small { display: block; margin-top: 3px; color: #b4ab96; font-size: 12px; font-weight: 400; }
.edition-expand { flex: none; width: 28px; text-align: center; font-size: 25px; font-weight: 400; }
.edition-expand::before { content: '+'; }
.edition-comparison[open] .edition-expand::before { content: '\2212'; }
.edition-comparison table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; line-height: 1.55; }
.edition-comparison th, .edition-comparison td { padding: 15px 24px; border-top: 1px solid #302c23; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.edition-comparison thead th { background: #211d14; color: #efdfba; }
.edition-comparison th:first-child { width: 27%; }
.edition-comparison tbody th { color: #d9d9d4; font-weight: 500; }
.edition-comparison td { color: #bfc3ca; }
.edition-comparison td:last-child { background: #d1a74208; }
.edition-bottom { display: flex; justify-content: space-between; align-items: center; gap: 40px; margin-top: 30px; }
.edition-bottom > div { max-width: 730px; }
.edition-bottom h3 { font-size: 18px; color: #e7deca; }
.edition-bottom p { margin-top: 8px; font-size: 14px; color: #bfb8a7; }
.edition-bottom p.pro-note { font-size: 12px; color: #a39e92; }
.edition-bottom .btn { flex: none; }

/* ---------- close ---------- */
.close { padding: clamp(110px, 12vw, 150px) 24px 90px; text-align: center; }
.close-mark { margin-bottom: 30px; }
.close-mark img.mark { width: 64px; height: 64px; }
.close-mark canvas.sparks { left: -128px; top: -128px; width: 320px; height: 320px; }
.close h2 { font-size: clamp(40px, 5.4vw, 76px); line-height: 1; letter-spacing: -.042em; font-weight: 700; }
.close p { margin-top: 18px; color: var(--dim); font-size: 18px; }
.hint { margin-top: 18px; font: 600 12px/1 var(--mono); color: var(--faint); }

/* The ruler clears the chapter text once there is room beside it. */
@media (max-width: 1260px) {
  .report { right: -10px; }
}
@media (max-width: 1100px) {
  .levels { display: none; }
  .pro-intro { gap: 32px; }
}
@media (max-width: 820px) {
  .pair, .dies, .sides { grid-template-columns: 1fr; }
  .pro-intro { grid-template-columns: 1fr; gap: 22px; }
  .pro-examples { grid-template-columns: 1fr; gap: 14px; }
  .edition-bottom { align-items: flex-start; flex-direction: column; gap: 22px; }
  .stats { grid-template-columns: 1fr; }
  .report { position: relative; right: auto; bottom: auto; width: 62%; margin: -40px 0 0 auto; transform: rotate(2.5deg); transform-origin: 50% 50%; }
  .js .stage.reveal .frame { transform: translateY(40px) scale(.97); }
  .box-stage { padding-bottom: 0; }
  .scale-names { display: none; }
  .readout span:nth-child(n+4) { display: none; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(38px, 10vw, 46px); }
  .pro-band { padding-block: 48px; }
  .edition-copy { padding: 22px; }
  .edition-description { min-height: 0; }
  .edition-figure { margin-inline: 10px; }
  .edition-comparison summary { padding: 18px; font-size: 15px; }
  .edition-comparison th, .edition-comparison td { padding: 12px 9px; font-size: 12px; }
  .edition-comparison th:first-child { width: 27%; }
  .hero-mark img.mark { width: 64px; height: 64px; }
  .hero-mark canvas.sparks { left: -64px; top: -110px; width: 192px; height: 260px; }
  .chapter-head p, .close p { font-size: 16.5px; }
  .stage { width: calc(100% - 28px); }
  .sim-note { right: 14px; max-width: calc(100% - 28px); }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .stage.reveal .frame { transform: none; transition: none; }
  .level { opacity: 1; transition: none; }
  .tape-run { animation: none; }
  .pro-example { transition: none; }
  .pro-example:hover, .pro-example:focus-within { transform: none; }
}