`, the header/brand mark and the footer. **North star:** The visual confidence of a luxury hypercar world premiere, the drama of an elite motorsport documentary, the functional clarity of F1 race control, and the disciplined innovation of an Awwwards-winning digital experience. This should plausibly look like a six-figure creative studio commission, not like a generic AI landing page. It must remain usable, accurate, performant, and visually compelling at both 390px and 1440px. **No questions. Make strong decisions and execute.** Focus on the working application and its quality. Spend substantial effort on implementation and visual polish. --- # 1 / FIRST ACTIONS: INSPECT AND PRESERVE THE PROJECT KIT 1. Inspect the current directory, reference file structure, image files and supplied content. Respect existing work and do not overwrite unrelated files. 2. Read `README.md`, `AGENTS.md`, `data/SCHEMA.md`, `data/driver.json`, `data/seasons.json`, `data/standings-2026.json`, `data/races-2025.json`, `data/races-2026.json`, `data/milestones.json`, `data/images.json`, `data/design-tokens.json`, `data/sources.json`, `content/en.json`, `content/it.json`, `content/EDITORIAL_COPY_EN.md`, `content/EDITORIAL_COPY_IT.md`, `CREDITS.md`. 3. Use the supplied historical data as the source of truth. Never silently change racing facts to fit the layout. 4. The dataset is a **fixed historical snapshot: 2026-10-12**. You must NOT update it to live race data for this project. Any additional editorial facts need verifiable sources, or omit them. 5. Inspect the bundled originals in `assets/photos/` and local availability in `KIT_STATUS.json`. Embed available credited local assets directly in the HTML as base64 data URIs. Omit manifest entries without a local file or show an honest unavailable state. NEVER present an unrelated driver or an AI-generated photo as Antonelli. 6. Do not mutate the source data to fit your layout. Produce transformations or copied/generated app data as needed. 7. Create the single `index.html` deliverable in the project root, leaving source data, assets and licenses intact. If an existing usable application is already present, adapt it instead of destructively replacing it. ## Real source-of-truth numbers 2026 season through Singapore (October 12 snapshot): championship P1, 340 points, eight Grand Prix wins, 14 Grand Prix podiums, six poles, seven Grand Prix fastest laps, 17 completed Grand Prix weekends. George Russell: P2, 238 points; the gap is **102**. Antonelli has **NOT** won the 2026 drivers' championship at this date. 2025 season: seventh in the championship, 150 points, three podiums, no Grand Prix win. **Do not conflate GP points with weekend points containing sprint results.** Cumulative-point charts must use the provided weekend point values, not derive points from a finishing position. Source files contain the authoritative per-race data. Use the full historical data for both years; don't cherry-pick only wins. Do not fabricate telemetry, race results, quotations, performance metrics or engineering specifications. --- # 2 / NON-NEGOTIABLE DELIVERY: EXACTLY ONE SELF-CONTAINED HTML FILE Create **`index.html` in the project root**, containing the complete working website. Do not create `website/`, a framework project, separate pages, a package manifest, a lockfile, separate assets, a delivery README or a ZIP as the output. - Semantic HTML, custom CSS inside `<style>`, and vanilla JavaScript inside inline classic `<script>` tags. No imports, module loading, package managers or external libraries. - Embed all required historical data and English/Italian content as inline JavaScript objects or `<script type="application/json">` blocks. Escape embedded content safely, including closing script sequences. Never use `fetch()`, XHR or runtime file reads for kit content. - Embed credited bundled photos as base64 `data:image/...;base64,...` URIs. Reuse one embedded source per photo across views rather than duplicating the same binary unnecessarily. Decorative graphics and charts should use inline SVG, CSS or Canvas. - Use system fonts, or embed appropriately licensed font bytes as data URIs if available locally. No remote font imports or external stylesheets. - Use native browser animation and interaction APIs, CSS transitions, IntersectionObserver and requestAnimationFrame as appropriate. Honor reduced motion. - No Node.js, npm, Next.js, React, TypeScript, Tailwind toolchain, build process, development server, backend, API keys, CDN or external runtime dependencies. - The HTML must work offline when opened directly via `file://` and when copied alone into an empty folder. All navigation, language switching, charts, filters, car exploration and lightbox controls must remain functional. - Storage is optional: guard localStorage access and retain functional in-memory state if storage is unavailable for local files. - Source, photographer and license links may open external pages when explicitly clicked. Those links must never be used to load runtime assets. Keep the source readable with clear logical sections and reusable JavaScript functions within the one file. No dead controls. A single-file format does not reduce the required visual quality or interactive depth. **Information architecture: in-document sections or hash-addressed views within this HTML:** - `#home` — cohesive monumental cinematic homepage with all designed scenes. - `#formula-1` — F1 overview with season navigation. - `#season-2026` — race archive, championship charts and real results. - `#season-2025` — debut story and results. - `#journey` — earlier career story. - `#gallery` — photography archive and fullscreen lightbox. - `#statistics` — interactive data comparisons. - `#credits` — image provenance and independent fan-site disclaimer. Use real anchor links and, where needed, a hashchange-driven view switcher. Browser Back/Forward and opening the HTML with a hash must preserve meaningful navigation. Do not use server paths, a framework router or path-based history rewriting. All views and their content live in the same document. --- # 3 / VISUAL DESIGN SYSTEM: UNCOMPROMISING ART DIRECTION **You are not designing a SaaS product.** Reject the usual sequence of gradient hero + rounded cards + three statistic tiles + testimonials. No generic stock photos, no cartoon F1 cars, no fake dashboard values, no rainbow neon, no excessive translucent glass, and no random blob backgrounds. Use `data/design-tokens.json` as the starting palette: - Vacuum black `#050608` - Carbon `#141A1F` - Graphite `#232B31` - Ice white `#F2F5F4` - Silver `#AEBBC0` - Mercedes-inspired turquoise `#00D2BE` - Hyper cyan `#66FFF0` - Signal red `#FF3B47` - Champagne/podium gold `#E5C174` (rare) Target ~70% dark atmosphere with occasional bright editorial counterpoints. Prefer an expensive motorsport feeling over an RGB-gaming aesthetic. Let real photography retain natural color where appropriate. ## Typography as architecture Invent a distinctive multi-tier typographic language: monumental condensed motorsport headlines, immaculate readable editorial text, technical monospaced metadata and tabular numerals. Use expressive system font stacks, or embed appropriately licensed fonts if they are already available locally. Never load external fonts. Use clamp() fluid scaling, controlled line-height, intentional negative tracking and dramatic asymmetry. A word may cross a photo border or become an image mask; headings should have a deliberate relationship to subjects in the pictures. The number **12** is the dominant recurring symbol. It should function as a brand mark, a page-transition portal, a scale motif, a data annotation and a memory of the opening sequence—without being pasted decoratively on every card. At least three distinct original graphic motifs must reappear consistently throughout the site. Ideas: continuous circuit/racing path, precise coordinate labels, cutout picture windows, timing-sector ticks, typography-as-architecture, Italian heritage micro-details. The supplied `assets/ui/*.svg` are optional raw ingredients; create original enhancements. ## Composition diversity Every major scene must be individually art-directed while sharing a visual grammar. Deliberately mix: - edge-to-edge cinematic photographs; - impossibly large type with severe editorial negative space; - asymmetric two- and three-column image compositions; - dense but legible race-control data; - intentionally quiet portrait storytelling; - bold light/dark chapter transitions; - technical photography and subtle SVG callouts; - spatial transitions that visually connect sections. **First fold standard:** A viewer should recognize Kimi / Mercedes / #12 in three seconds, and the composition should look like a real top-tier automotive campaign. Make the hero beautiful in a narrow mobile screenshot too. This is not optional. --- # 4 / BUILD TWELVE COMPLETE CINEMATIC SCENES The homepage should tell ONE escalating story, not look like twelve unrelated components. Reserve ~80–85% of editorial emphasis for Formula 1; earlier categories collectively ~15–20%. ## SCENE 00 — IGNITION An elegant, nonblocking introduction lasting approximately 1–2 seconds: black screen, elegant #12 line work, turquoise scan, race-start light motif and precise tiny labels. The intro is skippable and remembers the visit when reasonably possible. No forced loading animation when the website is already ready. A reduced-motion user sees the site immediately. The next frame reveals the hero naturally, not via a jarring cut. ## SCENE 01 — HERO: THE FUTURE HAS A NUMBER A jaw-dropping fullscreen photograph of Kimi or his 2026 Mercedes, selected from genuine Wikimedia imagery. Monumental `KIMI / ANTONELLI`, massive `12` graphical portal, secondary `BEYOND THE APEX`, subtle Italian identity, and restrained team context. Photo composition must accommodate headline legibility. Small racing interface elements: `AKA / 012`, `ITA`, `MERCEDES`, `F1 2026`, `SCROLL TO EXPLORE` and a functional CTA. Consciously layer image, graphic mask and text. Make scroll move the image and type at different rates without hijacking scrolling. Desktop 1440px and mobile 390px should both feel deliberately art-directed. ## SCENE 02 — THE NUMBER A huge visual interlude composed around `12` as architecture. Consider an outline transitioning into a photo-filled numeral then opening to the next scene. Line: `NOT JUST A NUMBER. AN IDENTITY.` Avoid gratuitous animation; create one astonishing, well-timed transition. ## SCENE 03 — BEHIND THE HELMET An emotionally resonant driver portrait and editorial biographical composition. Bologna, 25 August 2006, Italian heritage, Mercedes, number 12. Human-sized copy balanced against vast photographic scale. Use genuine portrait imagery. Include verified details; don't invent direct quotations or personal motivations. The bilingual copy and existing editorial files are your starting content. ## SCENE 04 — THIS IS FORMULA 1 Switch the pace. Immersive Mercedes W17 action photograph with an image-slice expansion, technical coordinate framework, controlled racing-line animation, and enormous `THE PINNACLE` typography. A viewer should *feel* the transition from personal history to Grand Prix racing. No stock speed trails, fake engine telemetry or inaccurate 3D substitutes. ## SCENE 05 — 2026 / THE ASCENT A visually extraordinary but *accurate* championship-status composition. Start with huge `2026 / P1`, use architectural number placement for **340 points**, **8 wins**, **14 podiums**, **6 poles**, **7 fastest laps**, and the **102-point lead**. Incorporate a proportional championship comparison versus Russell using the supplied standings. Do not create six identical rounded cards. Label the snapshot date and incomplete season status. Give the statistics an animated but readable entrance; counters must end at exact values. ## SCENE 06 — RACE CONTROL A real interactive system backed by `data/races-2026.json`: all 17 Grand Prix weekends (through Singapore 2026). Invent an interface combining a cinematic selected-event panel with a beautiful race-rail navigation system. Inputs: select race, next/previous event, all/wins/podiums/other filters, season data, touch controls and focused keyboard interactions. Race details must update; calculated cumulative totals must reflect *weekend* points, including sprints. Display real dates/positions. Include a custom-designed cumulative points visualization, actual axes/labels, hover/focus/touch tooltips, and accessible tabular alternative. China must show P1, 29 weekend points and cumulative 47; Singapore must show P3, 20 weekend points and cumulative 340. Race events without matching Commons photos should receive a legitimate typographic/graphic treatment rather than an inaccurately captioned image. ## SCENE 07 — SHANGHAI / FIRST VICTORY A cinematic emotional high point built around `chinese_first_win` from the media manifest. `SHANGHAI / 15.03.2026 / FIRST. VICTORY.` Give the actual victory photograph breathing room. Use a captivating composition, graceful parallax and a short truthful editorial paragraph. No silly trophy icons, confetti effects or invented fan/driver quotations. ## SCENE 08 — THE MACHINE A near-museum-grade photographic study of the 2026 Mercedes W17. Giant authentic image, precision SVG annotations, technical microtype, sparse photography-aware overlays. At least three genuinely working annotations (e.g. front wing, halo and rear wing) that point to reasonably correct visible regions, or an accurate companion SVG technical-view selector if photography makes precise hotspots unreliable. Clicking/tapping/focusing a part opens an accessible details panel. Never invent confidential or unverified car specifications. If enough true photographs are available, provide a 2025 W16 vs 2026 W17 image mode that actually changes the displayed source. ## SCENE 09 — THE ROOKIE / THE CONTENDER An exceptionally polished 2025 ↔ 2026 season morph. 2025: P7, 150 points, 3 podiums, 0 GP wins, completed season. 2026: P1, 340 points, 14 GP podiums, 8 GP wins, partial through Singapore. An intentional photographic and typographic transition changes year, data, headings, layout emphasis and graph values together. Season comparisons must identify differing numbers of completed Grands Prix. Don't misrepresent incomplete season statistics as final totals. ## SCENE 10 — THE ROAD TO THE GRID A tighter, elegant short timeline: karting → double Formula 4 titles in 2022 → double Formula Regional titles in 2023 → 2024 Formula 2 PREMA (Silverstone and Hungary wins) → Mercedes F1 race debut in 2025 → 2026 breakthrough. Design this as a premium archival collage / racing trajectory rather than a long Wikipedia article. Earlier categories are genuinely secondary to Formula 1. Avoid year-inaccurate images and claims unsupported by `data/milestones.json`. ## SCENE 11 — PHOTOGRAPHIC ARCHIVE At least twelve **distinct** genuine Commons photographs if available, and no unrelated-subject substitutions. Invent an asymmetric editorial photo mosaic with striking crop choices. Add real filters (all, 2026, 2025, portrait, on-track, celebrations, early career only if content exists); clicking an image opens a proper modal with next/previous, keyboard Arrow keys/Escape, mobile touch handling, focus trapping/restoration, photographer credit, exact license, and Commons source link. Maintain correct responsive sizes, loading indicators or soft valid fallbacks. Include a persistent accessible link to `#credits`. Don't present empty category tabs. ## SCENE 12 — THE FINAL STATEMENT A satisfying, monumental finale with `THE STORY IS STILL BEING WRITTEN`, huge number 12, expertly art-directed photograph or typographic atmosphere, and a visual motif recalling the first scene. Conclude with working CTAs and an unusually beautiful minimal footer. The footer must feel designed, not slapped on after the hard part. Include an explicit independent fan-site disclaimer and real credits navigation. --- # 5 / IN-DOCUMENT VIEWS MUST DELIVER REAL VALUE Do not make the site a huge homepage with empty secondary views. `#season-2026` should permit exploration of each round and show real cumulative data. `#statistics` should provide distinct meaningful visualizations rather than mirror the homepage unchanged. `#gallery` should be a satisfying full photography experience. `#journey` may expand the archival timeline without overpowering the main F1 narrative. `#credits` must enumerate photo author/license/source and disclose site independence. Keep primary navigation available in every view and preserve browser Back/Forward and hash navigation when opened as a local file. Advanced interaction expectations: in-document view transitions where practical, precise active link styling, accessible mobile full-screen menu, visually intentional hover/focus states, language switching with UI state preservation, proper loading/error states. Every visible button must do something real. --- # 6 / INVENT AT LEAST FOUR SIGNATURE INTERACTIONS These must be polished AND usable. Choose from, or exceed: 1. **12 PHOTO PORTAL:** the outlined number becomes a photo mask, then seamlessly gives way to a full-screen image. 2. **KINETIC CHAMPIONSHIP WALL:** oversized P1 / 340 / 8 / 14 elements compose, decompose and morph through scroll choreography. 3. **SOPHISTICATED RACE RAIL:** selecting a round transitions real stats, images, running total and graphical emphasis. 4. **MERCEDES ENGINEERING EXHIBIT:** accurate interactive hotspots, animated SVG connector strokes, detail panels and touch behavior. 5. **SEASON MORPH:** 2025/2026 toggle transforms visuals, copy, charts and numerical data as one composition. 6. **RACING PATH MOTIF:** a custom SVG trajectory that meaningfully connects multiple consecutive sections. 7. **TECHNICAL TYPOGRAPHIC EXPERIMENT:** typography interacts with photographs using clipping/masking rather than generic text overlays. 8. **EDITORIAL PHOTO MOSAIC:** extraordinary image arrangements that reorganize at breakpoints while preserving focal points. 9. **BESPOKE POINTS GRAPH:** a distinctive, data-accurate racing-style curve with a meaningful event inspection mode. 10. **CIRCULAR FINALE:** a visual callback to the opening number 12 when the scroll narrative concludes. No interaction should block normal navigation. Be bold, not gratuitous. At least four sections must have meaningfully different motion concepts, not the same opacity + translateY entrance reused everywhere. --- # 7 / WIKIMEDIA COMMONS: TRUE PHOTO ASSETS, CORRECT RIGHTS All photography of the driver, race cars or career must be genuinely sourced from Wikimedia Commons. The kit includes **14 bundled asset records** in `data/images.json` with IDs, authors, licenses, attribution URLs, original URLs, dimensions, local destinations and descriptions. Inspect the bundled files in `assets/photos/` and `KIT_STATUS.json`; all 14 manifest assets are present. Use local binary assets. Preserve original URLs as provenance metadata. Credits must be visible, not merely hidden in metadata. Build a plain JavaScript mapping from photo IDs to embedded data URIs and attribution metadata. The final HTML must not load `assets/photos/` or any other sibling files. Extra files without manifest attribution must not be used as website photography until their provenance is documented. Suggested roles from the manifest: `chinese_first_win` for the first-win scene; W17 entries for hero and car exhibition; authentic portraits for the human story; 2025 W16 entries for the rookie year. You must deliberately inspect dimensions/crops and match photos to each use. Respect CC BY / CC BY-SA / other license requirements for derivative photographs; link to the individual source pages and indicate modifications if significant. Do not treat Commons as public-domain-by-default. No AI-generated Antonelli imagery. Original decorative SVGs and data charts are allowed and encouraged. --- # 8 / BILINGUAL CONTENT AND EDITORIAL STANDARDS Implement fully functional **English and Italian** language modes; source copy from `content/en.json`, `content/it.json`, and the editorial Markdown files. The switch must update menu labels, section headings, CTAs, chart labels, race-detail labels, galleries and substantive text. Preserve current section/view when language switches. Avoid untranslated fragments, weird Italian grammar, fake quotes, and placeholder slogans. Keep headings atmospheric and explanatory copy factual. No lorem ipsum anywhere. Historical English headlines can serve as brand expressions in either mode when artistically justified, but the navigational and supporting content should properly localize. Use real locale-sensitive dates where appropriate. Accessibility labels must also be translated. --- # 9 / MAKE MOBILE AS EXPENSIVE AS DESKTOP Design and check at 320, 375, 390, 768, 1024, 1440, 1920 and 2560px where practical. Desktop isn't the master layout to shrink; mobile is a deliberate new composition. At 390px, hero typography is bold but not clipped; portrait and car imagery are art-directed with mobile-specific focal positioning. Statistics avoid tiny illegible labels. Race rail becomes a vertical / horizontal touch-friendly navigator; car callouts can become a bottom-sheet/list selector. Chart alternatives remain readable. Gallery swipes and controls remain reachable. No horizontal document overflow, overlapped nav, inaccessible modal buttons, hover-only required actions, or pinned-section scroll traps. Honor `prefers-reduced-motion`, provide visible keyboard focus, correct heading structure, semantic HTML, adequate contrast, alt text, dialog focus handling, chart descriptions, Escape behavior, reasonable touch targets, and accessible links. Never hide essential content behind JavaScript animation that may fail. --- # 10 / ANIMATION AND PERFORMANCE Prefer transform/opacity and GPU-friendly transitions; avoid expensive continuously animated CSS properties. Use fine easing and compositional choreography, not excessive mouse-following toys. Intro short and skippable. Motion for scroll entry, photograph reveal, SVG racing path, stats counters and view transitions must be purposeful. For people with motion reduction or slow devices, simplify effects while preserving an exceptional design. Avoid layout shifts, reserve image dimensions, defer decoding below-the-fold images, minimize JavaScript work and clean up observers/listeners. Embed reasonably sized photo variants where useful to control the HTML size while retaining hero quality. All variants must remain inside the same file. Do not load external thumbnails or photos. Provide honest image states without fake placeholder photographs. --- # 11 / TECHNICAL QUALITY + DATA ENGINEERING - Organize embedded plain JavaScript data for driver, seasons, race results, milestones, photos, image credits and championship standings. - Treat the provided datasets as authoritative read-only fixtures; transform them via pure reusable functions. - Validate point totals, win counts, podium counts, snapshot dates and image metadata. - Implement real filters, buttons, in-document views, charts and transitions. No `href="#"` dead ends. - Distinguish absent data from zero values. Never invent telemetry or lap speeds. - Focus on website implementation; do not run benchmarking, scoring, automated test suites or browser evaluation workflows. - Include a descriptive title (it must contain the site name "AKA12"), meta description and semantic HTML. Inline structured data is optional. Do not create separate sitemap or robots files. Never impersonate an official team site. - Deliver only `index.html`; explain in the final response that it opens directly in a browser with no setup. - Provide proper licensing/attribution UI. This is a fan project, not sponsored or endorsed by Kimi, Mercedes, F1, or FIA. --- # 12 / ACTUAL EXECUTION WORKFLOW — DO NOT STOP EARLY **Phase A: inspect.** Inventory reference data, local images, translations and facts; decide architecture and visual direction. Keep internal planning short. Do not ask the user to resolve choices. **Phase B: create the file.** Write the HTML structure, inline styles, embedded data and translations, image data URIs, and vanilla JavaScript in `index.html`. Do not install dependencies or create an app scaffold. **Phase C: realize art direction.** Build hero first, then the complete cinematic homepage and all navigation destinations. Reuse consistent tokens but create each scene as an individually art-directed composition. **Phase D: wire interactions.** Race selection, filtering, accurate charts, 2025/2026 switch, functional car exhibit, gallery lightbox, language toggle and accessible navigation. Treat these as essential product features. **Phase E: polish.** Examine weak photo crops, repeated components, unbalanced typography, mobile overflow, dead control states, credits, missing copy and poor image fallbacks. Iterate to make the entire experience feel coherent and expensive. Don't waste most of the budget on reasoning about ideas that never ship. **Phase F: deliver.** Leave exactly one finished `index.html` file, containing every runtime resource. Briefly summarize implemented features and real limitations, and tell the user to open the file directly in a browser. Do not add setup instructions, package files, external assets or a separate README. --- # 13 / A FINAL REMINDER ABOUT QUALITY Build something unexpectedly ambitious with precision: a stunning typographic portal, impossible-feeling but technically reliable scroll scenes, sophisticated race-control interfaces, elegant bilingual copy, deliberate photo curation, beautiful data-viz, and real working in-document navigation. You are allowed to be creatively obsessive, but NOT allowed to replace functioning software with a convincing screenshot. Make extraordinary design decisions **and then execute them completely**. **MAKE IT BALLISTIC. MAKE IT ACCURATE. MAKE IT WORK. MAKE IT UNFORGETTABLE.** Now read the kit, implement the website, fix defects, and deliver the single self-contained HTML file. Start working immediately.

# AKA12 / BEYOND THE APEX ## WEBSITE IMPLEMENTATION BRIEF — DELIVER ONE SELF-CONTAINED HTML FILE **MANDATORY OUTPUT CONTRACT: deliver exactly one `index.html` file in this directory.** Use plain HTML, inline CSS and vanilla JavaScript. Embed all scripts, styles, data, translations, images and graphics inside this file. It must open by double-click, work offline via `file://`, and remain complete when copied alone into an empty folder. **No npm, Node.js, frameworks, installation, build tools, server, CDN, external runtime requests or additional deliverable files.** This contract overrides any conflicting guidance. Source/license links are allowed only as user-clicked attribution links. You are operating as a senior multidisciplinary team: creative director, award-winning web designer, motion designer, frontend architect, data-visualization engineer, accessibility engineer, and content specialist. You have access to a local project directory containing a frozen, curated dataset and visual assets. **Your job is to WRITE, RUN, AND FINISH THE ACTUAL WEBSITE IN THIS REPOSITORY.** You must not stop at a description, plan, wireframe, static screenshot, code snippet, or homepage-only mockup. **Project:** An astonishing, immersive, futuristic, premium-quality independent fan site celebrating Andrea Kimi Antonelli, Formula 1 driver for Mercedes-AMG PETRONAS, number 12. **Creative identity:** `AKA12 — BEYOND THE APEX` / `THE FUTURE HAS A NUMBER.` The website is named **AKA12**: use that name in the page ``, the header/brand mark and the footer. **North star:** The visual confidence of a luxury hypercar world premiere, the drama of an elite motorsport documentary, the functional clarity of F1 race control, and the disciplined innovation of an Awwwards-winning digital experience. This should plausibly look like a six-figure creative studio commission, not like a generic AI landing page. It must remain usable, accurate, performant, and visually compelling at both 390px and 1440px. **No questions. Make strong decisions and execute.** Focus on the working application and its quality. Spend substantial effort on implementation and visual polish. --- # 1 / FIRST ACTIONS: INSPECT AND PRESERVE THE PROJECT KIT 1. Inspect the current directory, reference file structure, image files and supplied content. Respect existing work and do not overwrite unrelated files. 2. Read `README.md`, `AGENTS.md`, `data/SCHEMA.md`, `data/driver.json`, `data/seasons.json`, `data/standings-2026.json`, `data/races-2025.json`, `data/races-2026.json`, `data/milestones.json`, `data/images.json`, `data/design-tokens.json`, `data/sources.json`, `content/en.json`, `content/it.json`, `content/EDITORIAL_COPY_EN.md`, `content/EDITORIAL_COPY_IT.md`, `CREDITS.md`. 3. Use the supplied historical data as the source of truth. Never silently change racing facts to fit the layout. 4. The dataset is a **fixed historical snapshot: 2026-10-12**. You must NOT update it to live race data for this project. Any additional editorial facts need verifiable sources, or omit them. 5. Inspect the bundled originals in `assets/photos/` and local availability in `KIT_STATUS.json`. Embed available credited local assets directly in the HTML as base64 data URIs. Omit manifest entries without a local file or show an honest unavailable state. NEVER present an unrelated driver or an AI-generated photo as Antonelli. 6. Do not mutate the source data to fit your layout. Produce transformations or copied/generated app data as needed. 7. Create the single `index.html` deliverable in the project root, leaving source data, assets and licenses intact. If an existing usable application is already present, adapt it instead of destructively replacing it. ## Real source-of-truth numbers 2026 season through Singapore (October 12 snapshot): championship P1, 340 points, eight Grand Prix wins, 14 Grand Prix podiums, six poles, seven Grand Prix fastest laps, 17 completed Grand Prix weekends. George Russell: P2, 238 points; the gap is **102**. Antonelli has **NOT** won the 2026 drivers' championship at this date. 2025 season: seventh in the championship, 150 points, three podiums, no Grand Prix win. **Do not conflate GP points with weekend points containing sprint results.** Cumulative-point charts must use the provided weekend point values, not derive points from a finishing position. Source files contain the authoritative per-race data. Use the full historical data for both years; don't cherry-pick only wins. Do not fabricate telemetry, race results, quotations, performance metrics or engineering specifications. --- # 2 / NON-NEGOTIABLE DELIVERY: EXACTLY ONE SELF-CONTAINED HTML FILE Create **`index.html` in the project root**, containing the complete working website. Do not create `website/`, a framework project, separate pages, a package manifest, a lockfile, separate assets, a delivery README or a ZIP as the output. - Semantic HTML, custom CSS inside `<style>`, and vanilla JavaScript inside inline classic `<script>` tags. No imports, module loading, package managers or external libraries. - Embed all required historical data and English/Italian content as inline JavaScript objects or `<script type="application/json">` blocks. Escape embedded content safely, including closing script sequences. Never use `fetch()`, XHR or runtime file reads for kit content. - Embed credited bundled photos as base64 `data:image/...;base64,...` URIs. Reuse one embedded source per photo across views rather than duplicating the same binary unnecessarily. Decorative graphics and charts should use inline SVG, CSS or Canvas. - Use system fonts, or embed appropriately licensed font bytes as data URIs if available locally. No remote font imports or external stylesheets. - Use native browser animation and interaction APIs, CSS transitions, IntersectionObserver and requestAnimationFrame as appropriate. Honor reduced motion. - No Node.js, npm, Next.js, React, TypeScript, Tailwind toolchain, build process, development server, backend, API keys, CDN or external runtime dependencies. - The HTML must work offline when opened directly via `file://` and when copied alone into an empty folder. All navigation, language switching, charts, filters, car exploration and lightbox controls must remain functional. - Storage is optional: guard localStorage access and retain functional in-memory state if storage is unavailable for local files. - Source, photographer and license links may open external pages when explicitly clicked. Those links must never be used to load runtime assets. Keep the source readable with clear logical sections and reusable JavaScript functions within the one file. No dead controls. A single-file format does not reduce the required visual quality or interactive depth. **Information architecture: in-document sections or hash-addressed views within this HTML:** - `#home` — cohesive monumental cinematic homepage with all designed scenes. - `#formula-1` — F1 overview with season navigation. - `#season-2026` — race archive, championship charts and real results. - `#season-2025` — debut story and results. - `#journey` — earlier career story. - `#gallery` — photography archive and fullscreen lightbox. - `#statistics` — interactive data comparisons. - `#credits` — image provenance and independent fan-site disclaimer. Use real anchor links and, where needed, a hashchange-driven view switcher. Browser Back/Forward and opening the HTML with a hash must preserve meaningful navigation. Do not use server paths, a framework router or path-based history rewriting. All views and their content live in the same document. --- # 3 / VISUAL DESIGN SYSTEM: UNCOMPROMISING ART DIRECTION **You are not designing a SaaS product.** Reject the usual sequence of gradient hero + rounded cards + three statistic tiles + testimonials. No generic stock photos, no cartoon F1 cars, no fake dashboard values, no rainbow neon, no excessive translucent glass, and no random blob backgrounds. Use `data/design-tokens.json` as the starting palette: - Vacuum black `#050608` - Carbon `#141A1F` - Graphite `#232B31` - Ice white `#F2F5F4` - Silver `#AEBBC0` - Mercedes-inspired turquoise `#00D2BE` - Hyper cyan `#66FFF0` - Signal red `#FF3B47` - Champagne/podium gold `#E5C174` (rare) Target ~70% dark atmosphere with occasional bright editorial counterpoints. Prefer an expensive motorsport feeling over an RGB-gaming aesthetic. Let real photography retain natural color where appropriate. ## Typography as architecture Invent a distinctive multi-tier typographic language: monumental condensed motorsport headlines, immaculate readable editorial text, technical monospaced metadata and tabular numerals. Use expressive system font stacks, or embed appropriately licensed fonts if they are already available locally. Never load external fonts. Use clamp() fluid scaling, controlled line-height, intentional negative tracking and dramatic asymmetry. A word may cross a photo border or become an image mask; headings should have a deliberate relationship to subjects in the pictures. The number **12** is the dominant recurring symbol. It should function as a brand mark, a page-transition portal, a scale motif, a data annotation and a memory of the opening sequence—without being pasted decoratively on every card. At least three distinct original graphic motifs must reappear consistently throughout the site. Ideas: continuous circuit/racing path, precise coordinate labels, cutout picture windows, timing-sector ticks, typography-as-architecture, Italian heritage micro-details. The supplied `assets/ui/*.svg` are optional raw ingredients; create original enhancements. ## Composition diversity Every major scene must be individually art-directed while sharing a visual grammar. Deliberately mix: - edge-to-edge cinematic photographs; - impossibly large type with severe editorial negative space; - asymmetric two- and three-column image compositions; - dense but legible race-control data; - intentionally quiet portrait storytelling; - bold light/dark chapter transitions; - technical photography and subtle SVG callouts; - spatial transitions that visually connect sections. **First fold standard:** A viewer should recognize Kimi / Mercedes / #12 in three seconds, and the composition should look like a real top-tier automotive campaign. Make the hero beautiful in a narrow mobile screenshot too. This is not optional. --- # 4 / BUILD TWELVE COMPLETE CINEMATIC SCENES The homepage should tell ONE escalating story, not look like twelve unrelated components. Reserve ~80–85% of editorial emphasis for Formula 1; earlier categories collectively ~15–20%. ## SCENE 00 — IGNITION An elegant, nonblocking introduction lasting approximately 1–2 seconds: black screen, elegant #12 line work, turquoise scan, race-start light motif and precise tiny labels. The intro is skippable and remembers the visit when reasonably possible. No forced loading animation when the website is already ready. A reduced-motion user sees the site immediately. The next frame reveals the hero naturally, not via a jarring cut. ## SCENE 01 — HERO: THE FUTURE HAS A NUMBER A jaw-dropping fullscreen photograph of Kimi or his 2026 Mercedes, selected from genuine Wikimedia imagery. Monumental `KIMI / ANTONELLI`, massive `12` graphical portal, secondary `BEYOND THE APEX`, subtle Italian identity, and restrained team context. Photo composition must accommodate headline legibility. Small racing interface elements: `AKA / 012`, `ITA`, `MERCEDES`, `F1 2026`, `SCROLL TO EXPLORE` and a functional CTA. Consciously layer image, graphic mask and text. Make scroll move the image and type at different rates without hijacking scrolling. Desktop 1440px and mobile 390px should both feel deliberately art-directed. ## SCENE 02 — THE NUMBER A huge visual interlude composed around `12` as architecture. Consider an outline transitioning into a photo-filled numeral then opening to the next scene. Line: `NOT JUST A NUMBER. AN IDENTITY.` Avoid gratuitous animation; create one astonishing, well-timed transition. ## SCENE 03 — BEHIND THE HELMET An emotionally resonant driver portrait and editorial biographical composition. Bologna, 25 August 2006, Italian heritage, Mercedes, number 12. Human-sized copy balanced against vast photographic scale. Use genuine portrait imagery. Include verified details; don't invent direct quotations or personal motivations. The bilingual copy and existing editorial files are your starting content. ## SCENE 04 — THIS IS FORMULA 1 Switch the pace. Immersive Mercedes W17 action photograph with an image-slice expansion, technical coordinate framework, controlled racing-line animation, and enormous `THE PINNACLE` typography. A viewer should *feel* the transition from personal history to Grand Prix racing. No stock speed trails, fake engine telemetry or inaccurate 3D substitutes. ## SCENE 05 — 2026 / THE ASCENT A visually extraordinary but *accurate* championship-status composition. Start with huge `2026 / P1`, use architectural number placement for **340 points**, **8 wins**, **14 podiums**, **6 poles**, **7 fastest laps**, and the **102-point lead**. Incorporate a proportional championship comparison versus Russell using the supplied standings. Do not create six identical rounded cards. Label the snapshot date and incomplete season status. Give the statistics an animated but readable entrance; counters must end at exact values. ## SCENE 06 — RACE CONTROL A real interactive system backed by `data/races-2026.json`: all 17 Grand Prix weekends (through Singapore 2026). Invent an interface combining a cinematic selected-event panel with a beautiful race-rail navigation system. Inputs: select race, next/previous event, all/wins/podiums/other filters, season data, touch controls and focused keyboard interactions. Race details must update; calculated cumulative totals must reflect *weekend* points, including sprints. Display real dates/positions. Include a custom-designed cumulative points visualization, actual axes/labels, hover/focus/touch tooltips, and accessible tabular alternative. China must show P1, 29 weekend points and cumulative 47; Singapore must show P3, 20 weekend points and cumulative 340. Race events without matching Commons photos should receive a legitimate typographic/graphic treatment rather than an inaccurately captioned image. ## SCENE 07 — SHANGHAI / FIRST VICTORY A cinematic emotional high point built around `chinese_first_win` from the media manifest. `SHANGHAI / 15.03.2026 / FIRST. VICTORY.` Give the actual victory photograph breathing room. Use a captivating composition, graceful parallax and a short truthful editorial paragraph. No silly trophy icons, confetti effects or invented fan/driver quotations. ## SCENE 08 — THE MACHINE A near-museum-grade photographic study of the 2026 Mercedes W17. Giant authentic image, precision SVG annotations, technical microtype, sparse photography-aware overlays. At least three genuinely working annotations (e.g. front wing, halo and rear wing) that point to reasonably correct visible regions, or an accurate companion SVG technical-view selector if photography makes precise hotspots unreliable. Clicking/tapping/focusing a part opens an accessible details panel. Never invent confidential or unverified car specifications. If enough true photographs are available, provide a 2025 W16 vs 2026 W17 image mode that actually changes the displayed source. ## SCENE 09 — THE ROOKIE / THE CONTENDER An exceptionally polished 2025 ↔ 2026 season morph. 2025: P7, 150 points, 3 podiums, 0 GP wins, completed season. 2026: P1, 340 points, 14 GP podiums, 8 GP wins, partial through Singapore. An intentional photographic and typographic transition changes year, data, headings, layout emphasis and graph values together. Season comparisons must identify differing numbers of completed Grands Prix. Don't misrepresent incomplete season statistics as final totals. ## SCENE 10 — THE ROAD TO THE GRID A tighter, elegant short timeline: karting → double Formula 4 titles in 2022 → double Formula Regional titles in 2023 → 2024 Formula 2 PREMA (Silverstone and Hungary wins) → Mercedes F1 race debut in 2025 → 2026 breakthrough. Design this as a premium archival collage / racing trajectory rather than a long Wikipedia article. Earlier categories are genuinely secondary to Formula 1. Avoid year-inaccurate images and claims unsupported by `data/milestones.json`. ## SCENE 11 — PHOTOGRAPHIC ARCHIVE At least twelve **distinct** genuine Commons photographs if available, and no unrelated-subject substitutions. Invent an asymmetric editorial photo mosaic with striking crop choices. Add real filters (all, 2026, 2025, portrait, on-track, celebrations, early career only if content exists); clicking an image opens a proper modal with next/previous, keyboard Arrow keys/Escape, mobile touch handling, focus trapping/restoration, photographer credit, exact license, and Commons source link. Maintain correct responsive sizes, loading indicators or soft valid fallbacks. Include a persistent accessible link to `#credits`. Don't present empty category tabs. ## SCENE 12 — THE FINAL STATEMENT A satisfying, monumental finale with `THE STORY IS STILL BEING WRITTEN`, huge number 12, expertly art-directed photograph or typographic atmosphere, and a visual motif recalling the first scene. Conclude with working CTAs and an unusually beautiful minimal footer. The footer must feel designed, not slapped on after the hard part. Include an explicit independent fan-site disclaimer and real credits navigation. --- # 5 / IN-DOCUMENT VIEWS MUST DELIVER REAL VALUE Do not make the site a huge homepage with empty secondary views. `#season-2026` should permit exploration of each round and show real cumulative data. `#statistics` should provide distinct meaningful visualizations rather than mirror the homepage unchanged. `#gallery` should be a satisfying full photography experience. `#journey` may expand the archival timeline without overpowering the main F1 narrative. `#credits` must enumerate photo author/license/source and disclose site independence. Keep primary navigation available in every view and preserve browser Back/Forward and hash navigation when opened as a local file. Advanced interaction expectations: in-document view transitions where practical, precise active link styling, accessible mobile full-screen menu, visually intentional hover/focus states, language switching with UI state preservation, proper loading/error states. Every visible button must do something real. --- # 6 / INVENT AT LEAST FOUR SIGNATURE INTERACTIONS These must be polished AND usable. Choose from, or exceed: 1. **12 PHOTO PORTAL:** the outlined number becomes a photo mask, then seamlessly gives way to a full-screen image. 2. **KINETIC CHAMPIONSHIP WALL:** oversized P1 / 340 / 8 / 14 elements compose, decompose and morph through scroll choreography. 3. **SOPHISTICATED RACE RAIL:** selecting a round transitions real stats, images, running total and graphical emphasis. 4. **MERCEDES ENGINEERING EXHIBIT:** accurate interactive hotspots, animated SVG connector strokes, detail panels and touch behavior. 5. **SEASON MORPH:** 2025/2026 toggle transforms visuals, copy, charts and numerical data as one composition. 6. **RACING PATH MOTIF:** a custom SVG trajectory that meaningfully connects multiple consecutive sections. 7. **TECHNICAL TYPOGRAPHIC EXPERIMENT:** typography interacts with photographs using clipping/masking rather than generic text overlays. 8. **EDITORIAL PHOTO MOSAIC:** extraordinary image arrangements that reorganize at breakpoints while preserving focal points. 9. **BESPOKE POINTS GRAPH:** a distinctive, data-accurate racing-style curve with a meaningful event inspection mode. 10. **CIRCULAR FINALE:** a visual callback to the opening number 12 when the scroll narrative concludes. No interaction should block normal navigation. Be bold, not gratuitous. At least four sections must have meaningfully different motion concepts, not the same opacity + translateY entrance reused everywhere. --- # 7 / WIKIMEDIA COMMONS: TRUE PHOTO ASSETS, CORRECT RIGHTS All photography of the driver, race cars or career must be genuinely sourced from Wikimedia Commons. The kit includes **14 bundled asset records** in `data/images.json` with IDs, authors, licenses, attribution URLs, original URLs, dimensions, local destinations and descriptions. Inspect the bundled files in `assets/photos/` and `KIT_STATUS.json`; all 14 manifest assets are present. Use local binary assets. Preserve original URLs as provenance metadata. Credits must be visible, not merely hidden in metadata. Build a plain JavaScript mapping from photo IDs to embedded data URIs and attribution metadata. The final HTML must not load `assets/photos/` or any other sibling files. Extra files without manifest attribution must not be used as website photography until their provenance is documented. Suggested roles from the manifest: `chinese_first_win` for the first-win scene; W17 entries for hero and car exhibition; authentic portraits for the human story; 2025 W16 entries for the rookie year. You must deliberately inspect dimensions/crops and match photos to each use. Respect CC BY / CC BY-SA / other license requirements for derivative photographs; link to the individual source pages and indicate modifications if significant. Do not treat Commons as public-domain-by-default. No AI-generated Antonelli imagery. Original decorative SVGs and data charts are allowed and encouraged. --- # 8 / BILINGUAL CONTENT AND EDITORIAL STANDARDS Implement fully functional **English and Italian** language modes; source copy from `content/en.json`, `content/it.json`, and the editorial Markdown files. The switch must update menu labels, section headings, CTAs, chart labels, race-detail labels, galleries and substantive text. Preserve current section/view when language switches. Avoid untranslated fragments, weird Italian grammar, fake quotes, and placeholder slogans. Keep headings atmospheric and explanatory copy factual. No lorem ipsum anywhere. Historical English headlines can serve as brand expressions in either mode when artistically justified, but the navigational and supporting content should properly localize. Use real locale-sensitive dates where appropriate. Accessibility labels must also be translated. --- # 9 / MAKE MOBILE AS EXPENSIVE AS DESKTOP Design and check at 320, 375, 390, 768, 1024, 1440, 1920 and 2560px where practical. Desktop isn't the master layout to shrink; mobile is a deliberate new composition. At 390px, hero typography is bold but not clipped; portrait and car imagery are art-directed with mobile-specific focal positioning. Statistics avoid tiny illegible labels. Race rail becomes a vertical / horizontal touch-friendly navigator; car callouts can become a bottom-sheet/list selector. Chart alternatives remain readable. Gallery swipes and controls remain reachable. No horizontal document overflow, overlapped nav, inaccessible modal buttons, hover-only required actions, or pinned-section scroll traps. Honor `prefers-reduced-motion`, provide visible keyboard focus, correct heading structure, semantic HTML, adequate contrast, alt text, dialog focus handling, chart descriptions, Escape behavior, reasonable touch targets, and accessible links. Never hide essential content behind JavaScript animation that may fail. --- # 10 / ANIMATION AND PERFORMANCE Prefer transform/opacity and GPU-friendly transitions; avoid expensive continuously animated CSS properties. Use fine easing and compositional choreography, not excessive mouse-following toys. Intro short and skippable. Motion for scroll entry, photograph reveal, SVG racing path, stats counters and view transitions must be purposeful. For people with motion reduction or slow devices, simplify effects while preserving an exceptional design. Avoid layout shifts, reserve image dimensions, defer decoding below-the-fold images, minimize JavaScript work and clean up observers/listeners. Embed reasonably sized photo variants where useful to control the HTML size while retaining hero quality. All variants must remain inside the same file. Do not load external thumbnails or photos. Provide honest image states without fake placeholder photographs. --- # 11 / TECHNICAL QUALITY + DATA ENGINEERING - Organize embedded plain JavaScript data for driver, seasons, race results, milestones, photos, image credits and championship standings. - Treat the provided datasets as authoritative read-only fixtures; transform them via pure reusable functions. - Validate point totals, win counts, podium counts, snapshot dates and image metadata. - Implement real filters, buttons, in-document views, charts and transitions. No `href="#"` dead ends. - Distinguish absent data from zero values. Never invent telemetry or lap speeds. - Focus on website implementation; do not run benchmarking, scoring, automated test suites or browser evaluation workflows. - Include a descriptive title (it must contain the site name "AKA12"), meta description and semantic HTML. Inline structured data is optional. Do not create separate sitemap or robots files. Never impersonate an official team site. - Deliver only `index.html`; explain in the final response that it opens directly in a browser with no setup. - Provide proper licensing/attribution UI. This is a fan project, not sponsored or endorsed by Kimi, Mercedes, F1, or FIA. --- # 12 / ACTUAL EXECUTION WORKFLOW — DO NOT STOP EARLY **Phase A: inspect.** Inventory reference data, local images, translations and facts; decide architecture and visual direction. Keep internal planning short. Do not ask the user to resolve choices. **Phase B: create the file.** Write the HTML structure, inline styles, embedded data and translations, image data URIs, and vanilla JavaScript in `index.html`. Do not install dependencies or create an app scaffold. **Phase C: realize art direction.** Build hero first, then the complete cinematic homepage and all navigation destinations. Reuse consistent tokens but create each scene as an individually art-directed composition. **Phase D: wire interactions.** Race selection, filtering, accurate charts, 2025/2026 switch, functional car exhibit, gallery lightbox, language toggle and accessible navigation. Treat these as essential product features. **Phase E: polish.** Examine weak photo crops, repeated components, unbalanced typography, mobile overflow, dead control states, credits, missing copy and poor image fallbacks. Iterate to make the entire experience feel coherent and expensive. Don't waste most of the budget on reasoning about ideas that never ship. **Phase F: deliver.** Leave exactly one finished `index.html` file, containing every runtime resource. Briefly summarize implemented features and real limitations, and tell the user to open the file directly in a browser. Do not add setup instructions, package files, external assets or a separate README. --- # 13 / A FINAL REMINDER ABOUT QUALITY Build something unexpectedly ambitious with precision: a stunning typographic portal, impossible-feeling but technically reliable scroll scenes, sophisticated race-control interfaces, elegant bilingual copy, deliberate photo curation, beautiful data-viz, and real working in-document navigation. You are allowed to be creatively obsessive, but NOT allowed to replace functioning software with a convincing screenshot. Make extraordinary design decisions **and then execute them completely**. **MAKE IT BALLISTIC. MAKE IT ACCURATE. MAKE IT WORK. MAKE IT UNFORGETTABLE.** Now read the kit, implement the website, fix defects, and deliver the single self-contained HTML file. Start working immediately.