/* Hero sample visual: cogs. Source: src/styles/vis-cogs.css (edit there, then run scripts/vis-css.mjs). Linked by templates/Landing.astro only on a page with hero.visual: cogs. */
.vg-pill{display:flex;align-items:center;padding:var(--s-2) var(--s-4);border:1px solid var(--panel-line);border-radius:var(--r-pill);font-weight:600}.vg-book{display:grid;gap:var(--s-2)}.vg-book li{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}.vg-book li>span{color:var(--panel-muted)}.vg-book b{color:var(--accent-on-panel);font-variant-numeric:tabular-nums}.vg-sum{padding-top:var(--s-3);border-top:1px solid var(--panel-line)}.vg-sum b{font-size:var(--fs-card-h3);letter-spacing:var(--track-num)}.vg-ok{display:flex;align-items:center;gap:var(--s-2);color:var(--accent-on-panel);font-weight:600}.vg-n{display:inline-flex;align-items:baseline}.dg{display:inline-block;height:1.2em;line-height:1.2;overflow:hidden;vertical-align:bottom}.dg .ro{display:block;transform:translateY(var(--y,0%))}.dg .ro::before{content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";white-space:pre;font-variant-numeric:tabular-nums;text-align:center;display:block}.d0{--y:0%}.d1{--y:-10%}.d2{--y:-20%}.d3{--y:-30%}.d4{--y:-40%}.d5{--y:-50%}.d6{--y:-60%}.d7{--y:-70%}.d8{--y:-80%}.d9{--y:-90%}@media (prefers-reduced-motion:no-preference){html.js .vis.run .vg-pill{animation:vis-drop var(--dur-hero-step) var(--ease-out) var(--at) backwards}html.js .vis.run .vg-book li{animation:vis-fade var(--dur-hero-step) var(--ease-out) calc(var(--at) + var(--step)) backwards}html.js .vis.run .vg-book li:nth-child(2){animation-delay:calc(var(--at) + var(--step) * 2)}html.js .vis.run .vg-book li:nth-child(3){animation-delay:calc(var(--at) + var(--step) * 3)}html.js .vis.run .dg .ro{animation:vis-roll var(--dur-draw) var(--ease-out) calc(var(--at) + var(--step) * 3) backwards}html.js .vis.run .vg-ok{animation:vis-fade var(--dur-hero-step) var(--ease-out) calc(var(--at) + var(--step) * 3 + var(--dur-draw)) backwards}}