/* ---------- Theme: light is the default, dark follows the system or the toggle ---------- */
:root {
  --bg:#eef3f3; --fg:#111414; --muted:#55625f; --card:#ffffff; --line:#cddad9; --accent2:#a8c9c8;
  --accent:#c2410c; --on-accent:#fff; --good:#1f7a45; --mark:rgba(168,201,200,.35);
  --serif:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:6px; color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#121313; --fg:#f4f1ee; --muted:#9aa5a4; --card:#1a1c1c; --line:#2b2f2f; --accent2:#a8c9c8;
    --accent:#f45b0b; --on-accent:#121313; --good:#4ade80; --mark:rgba(168,201,200,.12); color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --bg:#121313; --fg:#f4f1ee; --muted:#9aa5a4; --card:#1a1c1c; --line:#2b2f2f; --accent2:#a8c9c8;
  --accent:#f45b0b; --on-accent:#121313; --good:#4ade80; --mark:rgba(168,201,200,.12); color-scheme:dark;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:76px; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
a, button { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .35s, color .35s; }
::selection { background:var(--accent); color:var(--on-accent); }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
h1,h2,h3,h4 { margin:0; line-height:1.1; }
h2, h1 { font-family:var(--serif); font-weight:650; letter-spacing:-.035em; }
p { margin:0 0 1em; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
main { counter-reset:sec; }
section { padding:96px 0 8px; position:relative; }

/* Links inside text: the underline draws itself on hover */
.u, .lead a, .links a, .cvrow a, .md-addr a {
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat; padding-bottom:1px; transition:background-size .3s, color .2s;
}
.u:hover, .lead a:hover, .links a:hover, .cvrow a:hover { background-size:100% 100%; color:var(--bg); }
.links a:hover, .cvrow a:hover { background-image:linear-gradient(var(--fg),var(--fg)); color:var(--bg); }

.eyebrow { font:500 .8rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; display:flex; align-items:center; gap:12px; }
.eyebrow::before { counter-increment:sec; content:counter(sec,decimal-leading-zero); color:var(--muted); }
.eyebrow::after { content:""; height:1px; flex:0 0 56px; background:var(--line); }
h2 { font-size:clamp(2rem,4.6vw,3.1rem); margin-bottom:18px; max-width:760px; }
.lead { color:var(--muted); font-size:1.12rem; max-width:660px; }
.lead a { color:var(--fg); }

/* ---------- Progress line + nav ---------- */
.progress { position:fixed; top:0; left:0; height:4px; width:calc(var(--p,0) * 100%); background:var(--accent); z-index:60; }
.progress::after { content:""; position:absolute; right:0; top:0; width:18px; height:100%; background:repeating-conic-gradient(var(--fg) 0 25%, var(--bg) 0 50%) 0 0/4px 4px; }
nav.top { position:fixed; inset:0 0 auto 0; z-index:50; background:var(--bg); border-bottom:1px solid transparent; transition:border-color .3s, background .35s; }
nav.top.scrolled { border-bottom-color:var(--line); }
nav .wrap { display:flex; align-items:center; gap:14px; height:62px; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:600; font-size:1.05rem; }
.brand svg { width:34px; height:24px; overflow:visible; }
.brand svg path { fill:none; stroke:var(--accent); stroke-width:10; stroke-linecap:round; stroke-linejoin:round; transition:stroke-width .25s; }
.brand:hover svg path { stroke-width:14; }
nav ul { display:flex; gap:2px; list-style:none; margin:0 0 0 auto; padding:0; }
nav ul a { color:var(--muted); font-size:.9rem; padding:8px 11px; display:block; position:relative; transition:color .2s; }
nav ul a::after { content:""; position:absolute; left:11px; right:11px; bottom:4px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
nav ul a:hover, nav ul a.on { color:var(--fg); }
nav ul a:hover::after, nav ul a.on::after { transform:scaleX(1); }
.lang { display:inline-flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.lang button { border:0; background:transparent; color:var(--muted); font:500 .76rem/1 var(--mono); padding:9px 10px; cursor:pointer; transition:background .2s, color .2s; }
.lang button:hover { color:var(--fg); }
.lang button[aria-pressed="true"] { background:var(--fg); color:var(--bg); }
.theme-btn, .menu-btn { border:1px solid var(--line); background:transparent; color:var(--fg); border-radius:var(--r); width:38px; height:34px; cursor:pointer; display:grid; place-items:center; transition:background .2s, border-color .2s; }
.theme-btn:hover, .menu-btn:hover { border-color:var(--fg); }
.theme-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.theme-btn:hover svg { transform:rotate(25deg); }
.theme-btn .moon { display:none; }
:root[data-theme="dark"] .theme-btn .sun { display:none; }
:root[data-theme="dark"] .theme-btn .moon { display:block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .sun { display:none; }
  :root:not([data-theme="light"]) .theme-btn .moon { display:block; }
}
.menu-btn { display:none; font-size:1.1rem; }
@media (max-width:860px) {
  nav ul { position:absolute; top:62px; left:0; right:0; flex-direction:column; padding:8px 24px 16px; background:var(--bg); border-bottom:1px solid var(--line); display:none; margin:0; }
  nav ul.open { display:flex; }
  nav ul a::after { left:0; right:auto; width:28px; }
  .menu-btn { display:grid; }
  .lang { margin-left:auto; }
}

/* ---------- Hero ---------- */
.hero { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:110px 0 70px; }
.hero .wrap { display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:center; width:100%; }
.kicker { font:500 .82rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:26px; }
.hero h1 { font-size:clamp(3rem,9.5vw,7rem); font-weight:700; letter-spacing:-.05em; line-height:.95; }
.hero h1 .ln { display:block; overflow:hidden; padding-bottom:.08em; }
.hero h1 .ln span { display:block; transform:translateY(105%); animation:rise 1s cubic-bezier(.2,.8,.2,1) forwards; }
.hero h1 .ln:nth-child(2) span { animation-delay:.12s; color:var(--accent); }
@keyframes rise { to { transform:none; } }
.role { font-size:1.2rem; font-weight:500; margin:28px 0 14px; opacity:0; animation:up .8s .5s forwards; }
.pitch { color:var(--muted); max-width:560px; font-size:1.08rem; margin-bottom:30px; opacity:0; animation:up .8s .65s forwards; }
.cta { display:flex; flex-wrap:wrap; gap:12px; opacity:0; animation:up .8s .8s forwards; }
@keyframes up { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.btn { display:inline-flex; align-items:center; gap:10px; padding:12px 22px; border-radius:var(--r); font-weight:600; font-size:.96rem; border:1px solid var(--fg); background:transparent; color:var(--fg); cursor:pointer; font-family:inherit; transition:transform .18s, box-shadow .18s, background .2s, color .2s; }
.btn:hover { transform:translate(-3px,-3px); box-shadow:3px 3px 0 var(--fg); }
.btn:active { transform:none; box-shadow:none; }
.btn.primary { background:var(--fg); color:var(--bg); }
.btn.primary:hover { background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:3px 3px 0 var(--fg); }
.btn svg { width:18px; height:18px; transition:transform .25s; }
.btn.cv-link:hover svg { transform:translateY(2px); }
.social { display:flex; gap:8px; margin-top:34px; opacity:0; animation:up .8s .95s forwards; }
.social a { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); color:var(--fg); transition:background .2s, color .2s, border-color .2s, transform .25s cubic-bezier(.2,.8,.2,1); }
.social a:hover { background:var(--accent); border-color:var(--accent); color:var(--on-accent); transform:translateY(-4px) rotate(-6deg); }
.social svg { width:19px; height:19px; fill:currentColor; }
.mono { width:100%; max-width:340px; justify-self:center; overflow:visible; }
.mono path { fill:none; stroke:var(--accent); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
.mono .g { animation:draw 1.6s .3s cubic-bezier(.6,0,.2,1) forwards; }
.mono .l { animation:draw 1s 1.6s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }
.mono-wrap { display:grid; place-items:center; gap:10px; }
.gl3d { width:min(100%,380px); aspect-ratio:1; display:grid; place-items:center; }
.gl3d.live .mono { display:none; }
.gl3d canvas { display:block; cursor:grab; outline:none; }
.gl3d.grab canvas { cursor:grabbing; }
.hint { margin:0; font:.72rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
@media (max-width:860px) {
  .hero .wrap { grid-template-columns:1fr; }
  .mono-wrap { order:-1; justify-items:start; }
  .gl3d { width:min(70%,260px); }
  .mono-wrap { justify-items:start; }
}

/* ---------- Reveal ---------- */
.rv { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s); }
.rv.in { opacity:1; transform:none; }

/* ---------- About ---------- */
.about { display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:start; }
.about .lead { margin-bottom:1.1em; }
.facts { margin:6px 0 0; border-top:1px solid var(--fg); }
.facts div { display:flex; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:.96rem; transition:padding .25s, background .25s; }
.facts div:hover { padding-left:10px; padding-right:10px; background:var(--mark); }
.facts dt { color:var(--muted); font-family:var(--mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; padding-top:2px; }
.facts dd { margin:0; text-align:right; font-weight:600; }
@media (max-width:860px) { .about { grid-template-columns:1fr; gap:30px; } }

/* ---------- Services ---------- */
.svcs { list-style:none; margin:34px 0 0; padding:0; border-top:1px solid var(--fg); counter-reset:svc; }
.svc { display:grid; grid-template-columns:70px minmax(180px,1fr) 2fr; gap:20px; align-items:baseline; padding:24px 0; border-bottom:1px solid var(--line); counter-increment:svc; position:relative; transition:padding .3s cubic-bezier(.2,.7,.2,1), background .3s; }
.svc::before { content:counter(svc,decimal-leading-zero); font:500 .85rem var(--mono); color:var(--muted); transition:color .2s; }
.svc h3 { font-family:var(--serif); font-weight:600; letter-spacing:-.02em; font-size:1.4rem; transition:transform .3s cubic-bezier(.2,.7,.2,1), color .2s; }
.svc p { color:var(--muted); margin:0; }
.svc:hover { background:var(--mark); padding-left:14px; padding-right:14px; }
.svc:hover::before, .svc:hover h3 { color:var(--accent); }
.svc:hover h3 { transform:translateX(6px); }
.banner { margin-top:34px; padding:28px; display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; background:var(--fg); color:var(--bg); border-radius:var(--r); }
.banner p { margin:0; font:600 1.35rem/1.25 var(--serif); letter-spacing:-.02em; max-width:520px; }
.banner .btn { border-color:var(--bg); color:var(--bg); }
.banner .btn.primary { background:var(--bg); color:var(--fg); }
.banner .btn.primary:hover { background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:3px 3px 0 var(--bg); }
@media (max-width:700px) { .svc { grid-template-columns:36px 1fr; gap:6px 12px; } .svc p { grid-column:2; } }

/* ---------- Cards ---------- */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr)); gap:22px; margin-top:36px; }
.cards.two { grid-template-columns:repeat(auto-fill,minmax(min(440px,100%),1fr)); }
.card { background:var(--card); border:1px solid var(--fg); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s; }
.card.rv.in:hover { transform:translate(-4px,-4px); box-shadow:6px 6px 0 var(--accent); }
.shot { position:relative; aspect-ratio:16/9.4; overflow:hidden; background:var(--bg); border-bottom:1px solid var(--fg); }
.shot img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; filter:saturate(.75); transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .4s; }
.card:hover .shot img { transform:scale(1.05); filter:none; }
.chrome { position:absolute; left:0; right:0; top:0; height:24px; display:flex; align-items:center; gap:5px; padding:0 10px; background:var(--card); border-bottom:1px solid var(--line); font:.66rem var(--mono); color:var(--muted); z-index:2; }
.chrome i { width:8px; height:8px; border-radius:50%; background:var(--line); display:block; transition:background .2s; }
.card:hover .chrome i:nth-child(1) { background:#ff5f57; }
.card:hover .chrome i:nth-child(2) { background:#febc2e; }
.card:hover .chrome i:nth-child(3) { background:#28c840; }
.chrome em { font-style:normal; margin-left:8px; }
.shot.hasChrome img { padding-top:24px; background:var(--card); }
.body { padding:20px 22px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.badge { font:500 .68rem/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:5px 8px; border-radius:3px; border:1px solid var(--line); color:var(--muted); }
.badge.client { color:var(--fg); }
.badge.own, .badge.alpha { color:var(--accent); border-color:var(--accent); }
.star { margin-left:auto; font:500 .82rem var(--mono); color:var(--muted); }
.card h3 { font-family:var(--serif); font-weight:650; letter-spacing:-.025em; font-size:1.5rem; }
.card p { color:var(--muted); font-size:.97rem; margin:0; }
.tags { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:auto; padding-top:8px; font:.78rem var(--mono); color:var(--muted); }
.tags span::before { content:"#"; opacity:.5; }
.links { display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:4px; font-weight:600; font-size:.94rem; }
.links a { padding:2px 1px; }
.links a::after { content:" ↗"; display:inline-block; transition:transform .25s; }
.links a:hover::after { transform:translate(3px,-3px); }
.morecard { grid-column:1 / -1; background:transparent; border-style:dashed; border-color:var(--line); }
.morecard .body { padding:22px 26px; justify-content:center; }
.morecard.rv.in:hover { box-shadow:none; transform:none; border-color:var(--fg); }

/* ---------- Timeline ---------- */
.cols { display:grid; grid-template-columns:1fr 1fr; gap:56px; margin-top:34px; }
@media (max-width:860px) { .cols { grid-template-columns:1fr; gap:34px; } }
.cols h3 { font-family:var(--serif); font-weight:650; letter-spacing:-.025em; font-size:1.5rem; margin-bottom:22px; }
.tl { position:relative; margin:0; padding:0 0 0 26px; list-style:none; }
.tl::before { content:""; position:absolute; left:5px; top:8px; bottom:8px; width:1px; background:var(--fg); opacity:.4; }
.tl > li { position:relative; padding-bottom:28px; }
.tl > li::before { content:""; position:absolute; left:-26px; top:7px; width:11px; height:11px; border:1px solid var(--fg); background:var(--bg); transform:rotate(45deg); transition:background .25s, transform .3s; }
.tl > li:hover::before { background:var(--accent); border-color:var(--accent); transform:rotate(225deg) scale(1.15); }
.tl > li.now::before { background:var(--accent); border-color:var(--accent); }
.tl .when { color:var(--accent); font:500 .78rem var(--mono); letter-spacing:.05em; text-transform:uppercase; }
.tl h4 { margin:4px 0 2px; font-size:1.1rem; }
.tl .org { color:var(--muted); font-size:.95rem; margin-bottom:6px; }
.tl ul { margin:6px 0 0; padding-left:18px; color:var(--muted); font-size:.95rem; }
.tl ul li::marker { color:var(--accent); }

/* ---------- Skills ---------- */
.skillgrid { margin-top:34px; border-top:1px solid var(--fg); }
.skill { display:grid; grid-template-columns:220px 1fr; gap:10px 24px; padding:20px 0; border-bottom:1px solid var(--line); }
.skill h3 { font:500 .8rem var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding-top:7px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chips span { padding:5px 12px; border:1px solid var(--line); border-radius:3px; font-size:.92rem; cursor:default; transition:transform .2s, background .2s, color .2s, border-color .2s; }
.chips span:hover { transform:translateY(-3px) rotate(-1.5deg); background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
@media (max-width:700px) { .skill { grid-template-columns:1fr; } .skill h3 { padding-top:0; } }

/* ---------- Contact ---------- */
.contact { padding-bottom:80px; }
.contact h2 { font-size:clamp(2.4rem,7vw,5rem); max-width:none; margin-bottom:20px; }
.contact h2 em { color:var(--accent); }
.contact .lead { margin-bottom:28px; }
.cvrow { margin:26px 0 0; color:var(--muted); font-size:.95rem; }
.cvrow a { color:var(--fg); font-weight:600; }
footer { color:var(--muted); font:.78rem var(--mono); padding:24px 24px 44px; max-width:1080px; margin:0 auto; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.totop { position:fixed; right:18px; bottom:18px; width:44px; height:44px; border-radius:50%; border:1px solid var(--fg); background:var(--bg); color:var(--fg); cursor:pointer; display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity .3s, transform .2s, background .2s, color .2s; z-index:40; }
.totop.show { opacity:1; pointer-events:auto; }
.totop:hover { transform:translateY(-4px); background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

/* ---------- Contact dialog (mailto does not work everywhere, so mail buttons open this) ---------- */
dialog { border:1px solid var(--fg); border-radius:var(--r); background:var(--card); color:var(--fg); padding:0; width:min(440px, calc(100vw - 32px)); box-shadow:8px 8px 0 var(--accent); }
dialog::backdrop { background:rgba(0,0,0,.45); }
dialog[open] { animation:pop .25s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }
.md { padding:28px 24px 22px; text-align:center; position:relative; }
.md h3 { font-family:var(--serif); font-weight:650; font-size:1.6rem; margin-bottom:6px; }
.md-close { position:absolute; top:10px; right:10px; width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--muted); font-size:1.7rem; line-height:1; cursor:pointer; }
.md-close:hover { background:var(--bg); color:var(--fg); }
.md-addr { font:600 1rem var(--mono); margin:8px 0 20px; word-break:break-all; user-select:all; -webkit-user-select:all; }
.md-actions { display:grid; gap:10px; }
.md-actions .btn { justify-content:center; width:100%; min-height:48px; }
.md-note { min-height:1.4em; margin:12px 0 0; color:var(--good); font-size:.92rem; }
@media (max-width:560px) {
  dialog { margin:auto auto 0; width:100%; max-width:none; border-radius:var(--r) var(--r) 0 0; border-bottom:0; box-shadow:none; }
  dialog[open] { animation:sheet .3s cubic-bezier(.2,.8,.2,1); }
  @keyframes sheet { from { transform:translateY(100%); } to { transform:none; } }
  .md { padding-bottom:calc(22px + env(safe-area-inset-bottom)); }
}

/* ---------- Phones ---------- */
@media (max-width:640px) {
  body { font-size:16px; }
  section { padding:68px 0 4px; }
  .wrap { padding:0 18px; }
  nav .wrap { gap:8px; }
  .brand span { font-size:1rem; }
  .lang button { min-height:36px; padding:0 12px; }
  .theme-btn, .menu-btn { width:42px; height:38px; }
  nav ul a { padding:14px 0; font-size:1rem; }
  .hero { padding:92px 0 48px; min-height:0; }
  .hero h1 { font-size:clamp(2.7rem,15vw,4rem); }
  .cta { flex-direction:column; align-items:stretch; }
  .cta .btn { justify-content:center; min-height:50px; }
  .social a { width:48px; height:48px; }
  .lead { font-size:1.03rem; }
  .facts div { flex-direction:column; gap:2px; }
  .facts dd { text-align:left; }
  .banner { flex-direction:column; align-items:stretch; padding:22px; }
  .banner .btn { justify-content:center; min-height:50px; }
  .cards { margin-top:26px; gap:18px; }
  .body { padding:16px 18px 16px; }
  .card h3 { font-size:1.4rem; }
  .totop { right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); }
  footer { padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
}
@media (max-width:380px) { .brand span { display:none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .rv, .role, .pitch, .cta, .social { opacity:1 !important; transform:none !important; }
  .hero h1 .ln span { transform:none !important; }
  .mono path { stroke-dashoffset:0; }
}

/* ---------- A little racing: checkered finish line, livery stripes ---------- */
footer { position:relative; margin-top:40px; border-top:0; padding-top:30px; }
footer::before { content:""; position:absolute; left:24px; right:24px; top:0; height:8px; background:repeating-conic-gradient(var(--fg) 0 25%, transparent 0 50%) 0 0/8px 8px; opacity:.85; }
.mono-wrap { position:relative; }
.mono-wrap::before, .mono-wrap::after { content:""; position:absolute; top:-8%; bottom:-8%; width:14px; background:var(--accent); transform:skewX(-14deg) scaleY(0); transform-origin:50% 0; animation:stripe 1s .5s cubic-bezier(.2,.8,.2,1) forwards; z-index:-1; opacity:.9; }
.mono-wrap::before { left:74%; }
.mono-wrap::after { left:calc(74% + 24px); width:6px; background:var(--accent2); animation-delay:.65s; }
@keyframes stripe { to { transform:skewX(-14deg) scaleY(1); } }
@media (max-width:860px) { .mono-wrap::before, .mono-wrap::after { display:none; } }

/* ---------- The car on the road ---------- */
.road { position:fixed; left:0; bottom:8px; z-index:35; pointer-events:none; will-change:transform; }
.road canvas { display:block; }
.road .trail { position:absolute; right:92%; bottom:22%; height:3px; width:0; opacity:0; background:linear-gradient(90deg, transparent, var(--accent)); box-shadow:0 -7px 0 -1px color-mix(in srgb, var(--accent2) 70%, transparent), 0 7px 0 -1px color-mix(in srgb, var(--accent2) 70%, transparent); }
.totop { bottom:76px; }
@media (max-width:640px) { .totop { bottom:calc(60px + env(safe-area-inset-bottom)); } }

footer { flex-wrap:wrap; gap:8px 16px; }
footer .stats-note { flex-basis:100%; font-size:.72rem; opacity:.85; }