# Metro line 404 > The enamel sign of a closed station and the line map: the train stops everywhere except at 404, where it rolls on. - Category: [404](https://library.aimran.es/components/404) - Built with: HTML + CSS - Live editor: https://library.aimran.es/blocks/404-metro - Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham ## Where to use it Transport sites and city guides can borrow the look of underground signage for their error page. A white enamel sign with a red line badge reads Page 404, closed station, with warning tape across one corner, and below it a line diagram shows six stations on white subway tiles. A small train moves along the line, waits at each stop and passes the hatched 404 station without stopping while it flickers. It is all HTML and CSS keyframes. Change the line color with the accent and link the button to the first station. ## Code ### HTML ```html 404 · Page not found

This train doesn't stop at page 404.

The station has been closed for a while and trains pass straight through. Get off at the next stop or go back to the start of the line.

Back to the start of the line

``` ### CSS ```css .n4-metro { --accent: #e03a3e; --k: 1; position: fixed; inset: 0; z-index: 0; overflow: hidden; container-type: size; display: grid; place-items: center; background: #000; color: #f5f5f7; font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif; -webkit-font-smoothing: antialiased; text-align: center; line-height: 1.4; } .n4-metro *,.n4-metro *::before,.n4-metro *::after { box-sizing: border-box; } .n4-metro .n4-copy { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 1.6cqmin; width: 100%; max-width: 680px; padding: 0 6cqw; } .n4-metro .n4-title { margin: 0; font-size: clamp(17px,4.2cqmin,36px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; } .n4-metro .n4-sub { margin: 0; max-width: 34em; font-size: clamp(13px,2.4cqmin,18px); color: #a1a1a6; text-wrap: balance; } .n4-metro .n4-tag { font: 600 clamp(10px,1.9cqmin,13px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .n4-metro .n4-cta { margin-top: 1.8cqmin; display: inline-flex; align-items: center; gap: .5em; padding: .85em 1.5em; border-radius: 999px; background: #f5f5f7; color: #000; font-size: clamp(13px,2.2cqmin,16px); font-weight: 600; text-decoration: none; transition: transform .3s cubic-bezier(.25,.1,.25,1),box-shadow .3s cubic-bezier(.25,.1,.25,1); } .n4-metro .n4-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -10px var(--accent); } .n4-metro .n4-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .n4-metro .n4-stars,.n4-metro .n4-stars2 { position: absolute; inset: -4%; pointer-events: none; } .n4-metro .n4-stars { background-image: radial-gradient(1px 1px at 8% 12%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 68%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 35% 24%,#fff 60%,transparent),radial-gradient(1px 1px at 48% 82%,#fff 60%,transparent),radial-gradient(1px 1px at 57% 9%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 66% 44%,#fff 60%,transparent),radial-gradient(1px 1px at 74% 72%,#fff 60%,transparent),radial-gradient(1px 1px at 86% 18%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 93% 58%,#fff 60%,transparent),radial-gradient(1px 1px at 14% 42%,#fff 60%,transparent),radial-gradient(1px 1px at 40% 55%,#fff 60%,transparent),radial-gradient(1px 1px at 81% 90%,#fff 60%,transparent),radial-gradient(1px 1px at 4% 88%,#fff 60%,transparent),radial-gradient(1px 1px at 62% 30%,#fff 60%,transparent); opacity: .75; animation: n4-metro-tw calc(5s / var(--k)) ease-in-out infinite alternate; } .n4-metro .n4-stars2 { background-image: radial-gradient(2px 2px at 18% 30%,rgba(255,255,255,.9) 50%,transparent),radial-gradient(1.5px 1.5px at 72% 20%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 30% 85%,rgba(255,255,255,.7) 50%,transparent),radial-gradient(1.5px 1.5px at 88% 70%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 52% 60%,rgba(255,255,255,.6) 50%,transparent),radial-gradient(1.5px 1.5px at 6% 55%,rgba(255,255,255,.8) 50%,transparent); opacity: .55; animation: n4-metro-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse; } .n4-metro [data-depth] { transition: transform .9s cubic-bezier(.2,.7,.2,1); } @keyframes n4-metro-tw { from { opacity: .3; } } @keyframes n4-metro-spin { to { transform: rotate(1turn); } } @keyframes n4-metro-fade { from { opacity: 0; transform: translateY(10px); } } @media (prefers-reduced-motion:reduce) { .n4-metro *,.n4-metro *::before,.n4-metro *::after { animation: none!important; transition: none!important; } } .n4-metro { background: linear-gradient(#d9dee1 .18cqmin,transparent .18cqmin) 0 0/10cqmin 5cqmin,linear-gradient(90deg,#d9dee1 .18cqmin,transparent .18cqmin) 0 0/10cqmin 5cqmin,linear-gradient(#fbfcfc,#edf0f1); color: #1d1d1f; font-family: "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; } .n4-metro .n4-sign { position: relative; display: flex; align-items: center; gap: .8em; overflow: hidden; font-size: min(2.6cqmin,19px); padding: .75em 3.6em .75em .85em; border-radius: .9em; background: #fff; box-shadow: inset 0 0 0 .22em #1d1d1f,0 .9em 1.4em -.8em rgba(0,0,0,.35); } .n4-metro .n4-sign::after { content: ""; position: absolute; right: -3.4em; top: 1em; width: 8em; height: 1em; rotate: 38deg; background: repeating-linear-gradient(-45deg,var(--accent) 0 .7em,#fff .7em 1.4em); box-shadow: 0 .1em .3em rgba(0,0,0,.25); } .n4-metro .n4-line { display: grid; place-items: center; flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--accent); color: #fff; font: 800 1.3em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; } .n4-metro .n4-name { display: grid; gap: .15em; text-align: left; } .n4-metro .n4-name b { font: 800 1.9em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; letter-spacing: -.02em; } .n4-metro .n4-name small { font: 700 .72em/1.2 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; color: #6b6b70; text-transform: uppercase; letter-spacing: .16em; } .n4-metro .n4-map { position: relative; width: min(70cqmin,480px); height: 4.6em; font-size: min(1.8cqmin,13px); margin: 2.2cqmin 0 .6cqmin; } .n4-metro .n4-track { position: absolute; left: 4%; right: 4%; top: 1.4em; height: .7em; border-radius: 1em; background: var(--accent); } .n4-metro .n4-st { position: absolute; top: 1.75em; left: calc(4% + var(--p) * .92%); display: grid; justify-items: center; translate: -50% -.75em; } .n4-metro .n4-st i { width: 1.5em; height: 1.5em; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 .32em #1d1d1f; } .n4-metro .n4-st span { margin-top: .5em; font: 700 .95em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; white-space: nowrap; } .n4-metro .n4-ghost i { background: repeating-linear-gradient(45deg,#fff 0 .2em,#dcdce0 .2em .4em); box-shadow: inset 0 0 0 .32em #9a9aa0; animation: n4-metro-flick calc(14s / var(--k)) linear infinite alternate; } .n4-metro .n4-ghost span { color: #8d8d93; text-decoration: line-through; text-decoration-color: var(--accent); } .n4-metro .n4-train { position: absolute; z-index: 2; top: 1.75em; left: 4%; width: 3.4em; height: 1.4em; translate: -50% -50%; border-radius: .7em; background: linear-gradient(90deg,transparent .5em,rgba(255,255,255,.85) .5em 1em,transparent 1em 1.3em,rgba(255,255,255,.85) 1.3em 1.8em,transparent 1.8em 2.1em,rgba(255,255,255,.85) 2.1em 2.6em,transparent 2.6em) 0 50%/100% .5em no-repeat,#1d1d1f; box-shadow: 0 .2em .4em rgba(0,0,0,.35); animation: n4-metro-ride calc(14s / var(--k)) ease-in-out infinite alternate; } .n4-metro .n4-title { font-size: clamp(20px,5cqmin,42px); font-weight: 800; letter-spacing: -.03em; } .n4-metro .n4-sub { color: #5d5d63; } .n4-metro .n4-cta { background: #1d1d1f; color: #fff; } @keyframes n4-metro-ride { 0%,4% { left: 4%; } 16%,22% { left: 22.4%; } 38%,44% { left: 40.8%; } 70%,76% { left: 77.6%; } 92%,100% { left: 96%; } } @keyframes n4-metro-flick { 0%,52%,62%,100% { box-shadow: inset 0 0 0 .32em #9a9aa0; } 55%,59% { box-shadow: inset 0 0 0 .32em var(--accent),0 0 0 .5em color-mix(in srgb,var(--accent) 35%,transparent); } } ``` ### React ```tsx import type { CSSProperties } from "react"; const css = ` .n4-metro { --accent: #e03a3e; --k: 1; position: fixed; inset: 0; z-index: 0; overflow: hidden; container-type: size; display: grid; place-items: center; background: #000; color: #f5f5f7; font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif; -webkit-font-smoothing: antialiased; text-align: center; line-height: 1.4; } .n4-metro *,.n4-metro *::before,.n4-metro *::after { box-sizing: border-box; } .n4-metro .n4-copy { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 1.6cqmin; width: 100%; max-width: 680px; padding: 0 6cqw; } .n4-metro .n4-title { margin: 0; font-size: clamp(17px,4.2cqmin,36px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; } .n4-metro .n4-sub { margin: 0; max-width: 34em; font-size: clamp(13px,2.4cqmin,18px); color: #a1a1a6; text-wrap: balance; } .n4-metro .n4-tag { font: 600 clamp(10px,1.9cqmin,13px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .n4-metro .n4-cta { margin-top: 1.8cqmin; display: inline-flex; align-items: center; gap: .5em; padding: .85em 1.5em; border-radius: 999px; background: #f5f5f7; color: #000; font-size: clamp(13px,2.2cqmin,16px); font-weight: 600; text-decoration: none; transition: transform .3s cubic-bezier(.25,.1,.25,1),box-shadow .3s cubic-bezier(.25,.1,.25,1); } .n4-metro .n4-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -10px var(--accent); } .n4-metro .n4-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .n4-metro .n4-stars,.n4-metro .n4-stars2 { position: absolute; inset: -4%; pointer-events: none; } .n4-metro .n4-stars { background-image: radial-gradient(1px 1px at 8% 12%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 68%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 35% 24%,#fff 60%,transparent),radial-gradient(1px 1px at 48% 82%,#fff 60%,transparent),radial-gradient(1px 1px at 57% 9%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 66% 44%,#fff 60%,transparent),radial-gradient(1px 1px at 74% 72%,#fff 60%,transparent),radial-gradient(1px 1px at 86% 18%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 93% 58%,#fff 60%,transparent),radial-gradient(1px 1px at 14% 42%,#fff 60%,transparent),radial-gradient(1px 1px at 40% 55%,#fff 60%,transparent),radial-gradient(1px 1px at 81% 90%,#fff 60%,transparent),radial-gradient(1px 1px at 4% 88%,#fff 60%,transparent),radial-gradient(1px 1px at 62% 30%,#fff 60%,transparent); opacity: .75; animation: n4-metro-tw calc(5s / var(--k)) ease-in-out infinite alternate; } .n4-metro .n4-stars2 { background-image: radial-gradient(2px 2px at 18% 30%,rgba(255,255,255,.9) 50%,transparent),radial-gradient(1.5px 1.5px at 72% 20%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 30% 85%,rgba(255,255,255,.7) 50%,transparent),radial-gradient(1.5px 1.5px at 88% 70%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 52% 60%,rgba(255,255,255,.6) 50%,transparent),radial-gradient(1.5px 1.5px at 6% 55%,rgba(255,255,255,.8) 50%,transparent); opacity: .55; animation: n4-metro-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse; } .n4-metro [data-depth] { transition: transform .9s cubic-bezier(.2,.7,.2,1); } @keyframes n4-metro-tw { from { opacity: .3; } } @keyframes n4-metro-spin { to { transform: rotate(1turn); } } @keyframes n4-metro-fade { from { opacity: 0; transform: translateY(10px); } } @media (prefers-reduced-motion:reduce) { .n4-metro *,.n4-metro *::before,.n4-metro *::after { animation: none!important; transition: none!important; } } .n4-metro { background: linear-gradient(#d9dee1 .18cqmin,transparent .18cqmin) 0 0/10cqmin 5cqmin,linear-gradient(90deg,#d9dee1 .18cqmin,transparent .18cqmin) 0 0/10cqmin 5cqmin,linear-gradient(#fbfcfc,#edf0f1); color: #1d1d1f; font-family: "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; } .n4-metro .n4-sign { position: relative; display: flex; align-items: center; gap: .8em; overflow: hidden; font-size: min(2.6cqmin,19px); padding: .75em 3.6em .75em .85em; border-radius: .9em; background: #fff; box-shadow: inset 0 0 0 .22em #1d1d1f,0 .9em 1.4em -.8em rgba(0,0,0,.35); } .n4-metro .n4-sign::after { content: ""; position: absolute; right: -3.4em; top: 1em; width: 8em; height: 1em; rotate: 38deg; background: repeating-linear-gradient(-45deg,var(--accent) 0 .7em,#fff .7em 1.4em); box-shadow: 0 .1em .3em rgba(0,0,0,.25); } .n4-metro .n4-line { display: grid; place-items: center; flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--accent); color: #fff; font: 800 1.3em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; } .n4-metro .n4-name { display: grid; gap: .15em; text-align: left; } .n4-metro .n4-name b { font: 800 1.9em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; letter-spacing: -.02em; } .n4-metro .n4-name small { font: 700 .72em/1.2 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; color: #6b6b70; text-transform: uppercase; letter-spacing: .16em; } .n4-metro .n4-map { position: relative; width: min(70cqmin,480px); height: 4.6em; font-size: min(1.8cqmin,13px); margin: 2.2cqmin 0 .6cqmin; } .n4-metro .n4-track { position: absolute; left: 4%; right: 4%; top: 1.4em; height: .7em; border-radius: 1em; background: var(--accent); } .n4-metro .n4-st { position: absolute; top: 1.75em; left: calc(4% + var(--p) * .92%); display: grid; justify-items: center; translate: -50% -.75em; } .n4-metro .n4-st i { width: 1.5em; height: 1.5em; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 .32em #1d1d1f; } .n4-metro .n4-st span { margin-top: .5em; font: 700 .95em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; white-space: nowrap; } .n4-metro .n4-ghost i { background: repeating-linear-gradient(45deg,#fff 0 .2em,#dcdce0 .2em .4em); box-shadow: inset 0 0 0 .32em #9a9aa0; animation: n4-metro-flick calc(14s / var(--k)) linear infinite alternate; } .n4-metro .n4-ghost span { color: #8d8d93; text-decoration: line-through; text-decoration-color: var(--accent); } .n4-metro .n4-train { position: absolute; z-index: 2; top: 1.75em; left: 4%; width: 3.4em; height: 1.4em; translate: -50% -50%; border-radius: .7em; background: linear-gradient(90deg,transparent .5em,rgba(255,255,255,.85) .5em 1em,transparent 1em 1.3em,rgba(255,255,255,.85) 1.3em 1.8em,transparent 1.8em 2.1em,rgba(255,255,255,.85) 2.1em 2.6em,transparent 2.6em) 0 50%/100% .5em no-repeat,#1d1d1f; box-shadow: 0 .2em .4em rgba(0,0,0,.35); animation: n4-metro-ride calc(14s / var(--k)) ease-in-out infinite alternate; } .n4-metro .n4-title { font-size: clamp(20px,5cqmin,42px); font-weight: 800; letter-spacing: -.03em; } .n4-metro .n4-sub { color: #5d5d63; } .n4-metro .n4-cta { background: #1d1d1f; color: #fff; } @keyframes n4-metro-ride { 0%,4% { left: 4%; } 16%,22% { left: 22.4%; } 38%,44% { left: 40.8%; } 70%,76% { left: 77.6%; } 92%,100% { left: 96%; } } @keyframes n4-metro-flick { 0%,52%,62%,100% { box-shadow: inset 0 0 0 .32em #9a9aa0; } 55%,59% { box-shadow: inset 0 0 0 .32em var(--accent),0 0 0 .5em color-mix(in srgb,var(--accent) 35%,transparent); } } `; export default function NotFoundMetro() { return ( <>

This train doesn't stop at page 404.

The station has been closed for a while and trains pass straight through. Get off at the next stop or go back to the start of the line.

Back to the start of the line

); } ``` ## Prompt for AI assistants Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…): ````text I want to add the “Metro line 404” block (404) from AIMRAN Library to my project. ## What it is The enamel sign of a closed station and the line map: the train stops everywhere except at 404, where it rolls on. ## Chosen settings - Accent color: #e03a3e - Speed: 1x (from 0.5 to 2x) - Title: "Este tren no para en la página 404." - Message: "La estación lleva tiempo cerrada y los trenes pasan sin detenerse. Baja en la siguiente parada o vuelve al inicio de la línea." - Button: "Volver al inicio de la línea" ## What I need 1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing. 2. It is built with plain HTML and CSS (the reference wraps it in a React component with its CSS). If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file. 3. Expose the settings above as props (or CSS variables) with those values as defaults. 4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens. 5. Make it look right in light and dark mode. 6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support. 7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result. ## Reference code ```tsx import type { CSSProperties } from "react"; const css = ` .n4-metro { --accent: #e03a3e; --k: 1; position: fixed; inset: 0; z-index: 0; overflow: hidden; container-type: size; display: grid; place-items: center; background: #000; color: #f5f5f7; font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif; -webkit-font-smoothing: antialiased; text-align: center; line-height: 1.4; } .n4-metro *,.n4-metro *::before,.n4-metro *::after { box-sizing: border-box; } .n4-metro .n4-copy { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 1.6cqmin; width: 100%; max-width: 680px; padding: 0 6cqw; } .n4-metro .n4-title { margin: 0; font-size: clamp(17px,4.2cqmin,36px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; } .n4-metro .n4-sub { margin: 0; max-width: 34em; font-size: clamp(13px,2.4cqmin,18px); color: #a1a1a6; text-wrap: balance; } .n4-metro .n4-tag { font: 600 clamp(10px,1.9cqmin,13px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .n4-metro .n4-cta { margin-top: 1.8cqmin; display: inline-flex; align-items: center; gap: .5em; padding: .85em 1.5em; border-radius: 999px; background: #f5f5f7; color: #000; font-size: clamp(13px,2.2cqmin,16px); font-weight: 600; text-decoration: none; transition: transform .3s cubic-bezier(.25,.1,.25,1),box-shadow .3s cubic-bezier(.25,.1,.25,1); } .n4-metro .n4-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -10px var(--accent); } .n4-metro .n4-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .n4-metro .n4-stars,.n4-metro .n4-stars2 { position: absolute; inset: -4%; pointer-events: none; } .n4-metro .n4-stars { background-image: radial-gradient(1px 1px at 8% 12%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 68%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 35% 24%,#fff 60%,transparent),radial-gradient(1px 1px at 48% 82%,#fff 60%,transparent),radial-gradient(1px 1px at 57% 9%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 66% 44%,#fff 60%,transparent),radial-gradient(1px 1px at 74% 72%,#fff 60%,transparent),radial-gradient(1px 1px at 86% 18%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 93% 58%,#fff 60%,transparent),radial-gradient(1px 1px at 14% 42%,#fff 60%,transparent),radial-gradient(1px 1px at 40% 55%,#fff 60%,transparent),radial-gradient(1px 1px at 81% 90%,#fff 60%,transparent),radial-gradient(1px 1px at 4% 88%,#fff 60%,transparent),radial-gradient(1px 1px at 62% 30%,#fff 60%,transparent); opacity: .75; animation: n4-metro-tw calc(5s / var(--k)) ease-in-out infinite alternate; } .n4-metro .n4-stars2 { background-image: radial-gradient(2px 2px at 18% 30%,rgba(255,255,255,.9) 50%,transparent),radial-gradient(1.5px 1.5px at 72% 20%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 30% 85%,rgba(255,255,255,.7) 50%,transparent),radial-gradient(1.5px 1.5px at 88% 70%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 52% 60%,rgba(255,255,255,.6) 50%,transparent),radial-gradient(1.5px 1.5px at 6% 55%,rgba(255,255,255,.8) 50%,transparent); opacity: .55; animation: n4-metro-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse; } .n4-metro [data-depth] { transition: transform .9s cubic-bezier(.2,.7,.2,1); } @keyframes n4-metro-tw { from { opacity: .3; } } @keyframes n4-metro-spin { to { transform: rotate(1turn); } } @keyframes n4-metro-fade { from { opacity: 0; transform: translateY(10px); } } @media (prefers-reduced-motion:reduce) { .n4-metro *,.n4-metro *::before,.n4-metro *::after { animation: none!important; transition: none!important; } } .n4-metro { background: linear-gradient(#d9dee1 .18cqmin,transparent .18cqmin) 0 0/10cqmin 5cqmin,linear-gradient(90deg,#d9dee1 .18cqmin,transparent .18cqmin) 0 0/10cqmin 5cqmin,linear-gradient(#fbfcfc,#edf0f1); color: #1d1d1f; font-family: "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; } .n4-metro .n4-sign { position: relative; display: flex; align-items: center; gap: .8em; overflow: hidden; font-size: min(2.6cqmin,19px); padding: .75em 3.6em .75em .85em; border-radius: .9em; background: #fff; box-shadow: inset 0 0 0 .22em #1d1d1f,0 .9em 1.4em -.8em rgba(0,0,0,.35); } .n4-metro .n4-sign::after { content: ""; position: absolute; right: -3.4em; top: 1em; width: 8em; height: 1em; rotate: 38deg; background: repeating-linear-gradient(-45deg,var(--accent) 0 .7em,#fff .7em 1.4em); box-shadow: 0 .1em .3em rgba(0,0,0,.25); } .n4-metro .n4-line { display: grid; place-items: center; flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--accent); color: #fff; font: 800 1.3em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; } .n4-metro .n4-name { display: grid; gap: .15em; text-align: left; } .n4-metro .n4-name b { font: 800 1.9em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; letter-spacing: -.02em; } .n4-metro .n4-name small { font: 700 .72em/1.2 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; color: #6b6b70; text-transform: uppercase; letter-spacing: .16em; } .n4-metro .n4-map { position: relative; width: min(70cqmin,480px); height: 4.6em; font-size: min(1.8cqmin,13px); margin: 2.2cqmin 0 .6cqmin; } .n4-metro .n4-track { position: absolute; left: 4%; right: 4%; top: 1.4em; height: .7em; border-radius: 1em; background: var(--accent); } .n4-metro .n4-st { position: absolute; top: 1.75em; left: calc(4% + var(--p) * .92%); display: grid; justify-items: center; translate: -50% -.75em; } .n4-metro .n4-st i { width: 1.5em; height: 1.5em; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 .32em #1d1d1f; } .n4-metro .n4-st span { margin-top: .5em; font: 700 .95em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; white-space: nowrap; } .n4-metro .n4-ghost i { background: repeating-linear-gradient(45deg,#fff 0 .2em,#dcdce0 .2em .4em); box-shadow: inset 0 0 0 .32em #9a9aa0; animation: n4-metro-flick calc(14s / var(--k)) linear infinite alternate; } .n4-metro .n4-ghost span { color: #8d8d93; text-decoration: line-through; text-decoration-color: var(--accent); } .n4-metro .n4-train { position: absolute; z-index: 2; top: 1.75em; left: 4%; width: 3.4em; height: 1.4em; translate: -50% -50%; border-radius: .7em; background: linear-gradient(90deg,transparent .5em,rgba(255,255,255,.85) .5em 1em,transparent 1em 1.3em,rgba(255,255,255,.85) 1.3em 1.8em,transparent 1.8em 2.1em,rgba(255,255,255,.85) 2.1em 2.6em,transparent 2.6em) 0 50%/100% .5em no-repeat,#1d1d1f; box-shadow: 0 .2em .4em rgba(0,0,0,.35); animation: n4-metro-ride calc(14s / var(--k)) ease-in-out infinite alternate; } .n4-metro .n4-title { font-size: clamp(20px,5cqmin,42px); font-weight: 800; letter-spacing: -.03em; } .n4-metro .n4-sub { color: #5d5d63; } .n4-metro .n4-cta { background: #1d1d1f; color: #fff; } @keyframes n4-metro-ride { 0%,4% { left: 4%; } 16%,22% { left: 22.4%; } 38%,44% { left: 40.8%; } 70%,76% { left: 77.6%; } 92%,100% { left: 96%; } } @keyframes n4-metro-flick { 0%,52%,62%,100% { box-shadow: inset 0 0 0 .32em #9a9aa0; } 55%,59% { box-shadow: inset 0 0 0 .32em var(--accent),0 0 0 .5em color-mix(in srgb,var(--accent) 35%,transparent); } } `; export default function NotFoundMetro() { return ( <>

This train doesn't stop at page 404.

The station has been closed for a while and trains pass straight through. Get off at the next stop or go back to the start of the line.

Back to the start of the line

); } ``` Give me the complete final code, ready to paste, and tell me in one line where to put it in my project. ````