Build a single-file HTML landing page for "Daybreak", a fictional product that runs AI agents overnight on the work a team keeps pushing to tomorrow, and has it waiting, checked and reviewable in the morning. Bricolage Grotesque (display, optical sizing on), Figtree (body) and JetBrains Mono (labels) from Google Fonts, everything else inline, no libraries. Every illustration is inline SVG and CSS. Write all colour in oklch.
THE PALETTE
A deep night navy page (oklch 14% 0.045 265) with panels a step lighter, and a dusk ramp for accents: ember, flame, marigold, a pale sky cyan and a sun yellow (oklch 90.9% 0.189 99.9) for the primary buttons. Headlines are two lines: the first in a soft white-to-ice gradient, the second in a full spectrum gradient (cyan, violet, pink, orange, yellow) across the words. Buttons are fat pills with a darker bottom edge, so they read as pressable.
THE HERO
A small dot-led kicker, "Hand it off at dusk. / Wake up to it done.", a lede, and a command-line style input ("> Start a free night run") with a gradient hairline border and a yellow arrow key, then three checkmarked reassurances.
On wide desktops (1260px and up) only, frame the headline with the story's two ends in the side gutters. On the left is dusk: a glowing crescent moon in a faint orbit ellipse, and a dotted ember-to-violet trail down to a glass "6:00 PM · Brief handed off" card. On the right is daybreak: a steaming coffee mug (the copy says you check the result over coffee), drawn in SVG. It has a sun-yellow-to-marigold body with the headline's spectrum as a band, a dark glass saucer with a violet rim, and three steam curls that rise and fade. Give it the same glow as the moon, and add a dotted marigold trail down to a warm-rimmed "7:00 AM · Digest ready" card. Don't put a second sun here; the hero panel below already has one. Add a floating icon tile and a few twinkling stars and sparkles on each side. Size each side as min(270px, 50% - 434px) and anchor it 410px from centre, so it never touches the headline. Keep it behind the hero content and aria-hidden, and hide it below 1260px.
Under it, the signature: a big glass app panel in 3D (perspective from above, slightly tilted), with two faint orbit ellipses around it and a glowing floor. Inside, a paper-cut sunset drawn in SVG: a bloom and a radial sun, then three layered hills in blue, violet and a magenta-to-orange band, each edge traced with a blurred glowing stroke. Over it: an icon rail, a "Night run · 12 tasks completed" header and floating glass task cards (Bug fixes, Reconciliations, Reports filed, Follow-ups, Refunds) at different translateZ depths, bobbing gently. Small square icon tiles float outside the panel's edges. Size everything in the panel in cqi against a container-type: inline-size box, so the whole scene scales as one.
The panel is a button: clicking it slaps a round "done" sticker exactly where you clicked (Refund sent, Bug fixed, Inbox zero…), cycling colours, and bumps the task count. Each sticker peels on from a folded corner: compute the fold axis from a random angle, store it in custom properties, and animate one registered @property --p from folded to flat. Keep the last 14.
THE BANDS
The page is a stack of torn-paper bands that overlap with negative margins: an orange band ("One brief. One night. One review.") with three stat orbs (5× faster turnaround and two more), then a night-blue band for the product.
ONE NIGHT, HOUR BY HOUR
A half-dome night sky (aspect 2:1, rounded top) with stars and a sun that rises as the night progresses. A gradient arc traces the dome, with six stops placed along it: 6 PM Plain-language briefs, 8 PM Your tools scoped, 11 PM Many hands one run, 2 AM Checkpoints that hold, 5 AM Full replay, 7 AM The morning digest. Each stop is a button with a glowing orb and a label card placed on the side away from the arc. The active hour lights up, the past ones dim, the progress stroke fills to it via dashoffset, the stars fade and the sun climbs, and the sky's bottom glow changes colour per hour. Below, a console card: a "Night run · " bar, six progress segments (the current one fills over the 4.5s auto-advance), the time, a title, a paragraph and a one-line terminal snippet with a blinking caret, plus previous and next buttons. Auto-advance until the visitor picks an hour.
EVERY STEP, WRITTEN DOWN
A two-column section: copy and three live metrics (actions logged, agents working, waiting on you) beside a run log card for "Clear the refund backlog under $200". The log reveals a row every 1.4s on a vertical track that fills as it goes: brief received, work split four ways, orders matched, then "Paused for you" in red with a "Review 3 refunds" button, refunds issued, digest ready. Clicking review turns the row green ("Reviewed by you · Approved") and zeroes the waiting count. When the log completes, a "Morning digest ready" footer appears with "Replay the night"; it also replays by itself after a pause.
THE REST
Pricing (Solo $29, Team $99 lifted and outlined in yellow, Enterprise "Let's talk") as rimmed glass cards, an FAQ of native details with a plus that turns, a CTA with a second paper-cut sunset across the full width and the same command input (confirming inline on submit), and a footer with a reflection glow and link columns.
THE FLOOR
One h1, a main, data-section on every region, a visually hidden label on each command input, aria-pressed on the hour stops, aria-live on the console readout, aria-hidden on all decorative art, visible focus, no horizontal scroll at 390px. Under prefers-reduced-motion, stop both timers, show the whole run log, and freeze the bobbing, the stickers and the sky.