Build a single self-contained HTML, CSS and JavaScript page called ACHIVII: a dark-mode daily focus tracker styled to look like a real iPhone prototype with four tabs.

DESIGN TOKENS
bg-dark #080B11, bg-canvas #0E131F, bg-card #141B2B, card border rgba(255,255,255,0.07), mint gradient #4EE2B6 to #2DD4BF, purple accent #818CF8, text colors #FFFFFF / #F1F5F9 / #94A3B8 / #64748B. Font: Plus Jakarta Sans, weights 400 to 800. Corner radii 12, 16 and 22px. Custom easing curves: ease-out cubic-bezier(0.23, 1, 0.32, 1), ease-in-out cubic-bezier(0.77, 0, 0.175, 1), spring cubic-bezier(0.34, 1.56, 0.64, 1), drawer cubic-bezier(0.32, 0.72, 0, 1).

DEVICE CHROME
Build the phone as two layers: an outer frame that carries the bezel shadow ring and three thin physical side-button bars, wrapping an inner screen layer that clips everything (overflow hidden, radius 48, minimum height around 860px). Add a black Dynamic Island pill centered over a status bar showing the time plus signal, wifi and battery glyphs. At the bottom, add a frosted glass tab bar with four tabs (Today with a leaf icon, Goals with a bar-chart icon, Calendar, Profile) where the active tab gets a soft mint pill behind its icon, plus a thin iOS-style home-indicator bar underneath.

SCREEN ONE, TODAY
Header row: small caps ACHIVII wordmark plus a large date, and a mint status pill with a slowly pulsing dot reading something like Calm Focus, On Track. Below it, a fully tappable Daily Goal card containing a circular SVG progress ring showing completed over total blocks, a title and a subtitle. The whole card is the interactive control, there is no separate button. Tapping it advances the count, animates the ring with a spring easing, and shows a toast. Under that, a vertical timeline of five time-stamped tasks connected by a wavy S-curve SVG path, not a straight line, calculated in JavaScript from each node's real measured position on screen. Color the path mint from the top down to the active task, then fade it to purple for the rest. One task is the active one and shows a small checklist and a progress bar instead of a description. Three tasks are compact, icon and title only, no description. The last task uses a distinct purple accent instead of mint. Tapping any task card opens a bottom sheet, described below.

SCREEN TWO, PROGRESS
Three small stat tiles for streak, focus hours and completion rate that count up from zero whenever this tab is opened. A seven column bar chart for the week where each bar animates in from zero height using a scale transform with a staggered spring, and today's column gets a purple outline ring. A short list of labeled progress rows underneath.

SCREEN THREE, CALENDAR
A month grid generated in JavaScript. Completed days get a small mint dot under the number, and the current day gets a solid purple circle behind it.

SCREEN FOUR, PROFILE
A gradient avatar circle with initials, a name and subtitle, three stat tiles, and a list of pressable settings rows with an icon, a label and a chevron.

TASK DETAIL BOTTOM SHEET
This sheet must stay confined inside the phone glass, meaning it is positioned absolutely inside the clipped screen layer, not the browser viewport. A dim backdrop fades in behind it. The sheet itself slides up starting from a full translateY offset of its own height, never from a zero scale, using the drawer easing curve. Its contents: a small drag handle, the tapped task's icon cloned in, a title, a time label, a description, and a Mark Complete button that dims the source card, adds a small mint checkmark badge to it, closes the sheet, and shows a toast. The sheet can be dismissed four ways: tapping the backdrop, pressing Escape, tapping the complete button, or a real drag gesture on the handle using pointer capture, with resistance if dragged past the fully open position, and a release rule based on either velocity being fast enough or the drag distance being large enough, not distance alone.

NAVIGATION
Tapping a tab swaps the visible screen using a fast opacity plus small translateY crossfade, roughly 120 milliseconds out and 180 milliseconds in. Keep this quick since switching tabs happens many times per session, this is not the place for a showy animation.

RULES TO FOLLOW
Only animate transform and opacity for anything performance sensitive, for example the bar chart should scale a bar from zero inside a fixed height track rather than animating height directly. Never write a transition on the all property, always name exact properties. Never animate an entrance from a zero scale, start around 0.95 scale with zero opacity, or slide in from a full offset. Every pressable element such as cards, buttons and nav items needs a pressed state that scales down slightly, somewhere around 0.94 to 0.985. Gate hover-only effects behind a hover and fine pointer media query so touch devices never get stuck hover states. Respect a reduced motion preference by cutting stagger delays and animation durations down close to zero. Keep entrance stagger delays short, about 50 to 80 milliseconds apart, never longer.

Build a React Native screen called ACHIVII, Today, that recreates a dark mode daily focus and habit tracker. Match this specification precisely: colors, spacing, copy, structure and motion, not a loose interpretation.

TECH STACK
Expo, or bare React Native, with TypeScript. Use react-native-svg for the donut progress ring, the wavy timeline connector and every line icon, do not use emoji or bitmap icons. Use react-native-reanimated version three for entrance stagger, press feedback, the donut progress animation and the sheet drag gesture. Use expo-linear-gradient for gradient fills and expo-blur for the glass tab bar. Load Plus Jakarta Sans in weights 400, 500, 600, 700 and 800. Handle safe areas with react-native-safe-area-context.

DESIGN TOKENS
Background dark #080B11, background canvas #0E131F, background card #141B2B, card border rgba(255,255,255,0.07), mint primary #4EE2B6, mint secondary #2DD4BF, mint glow rgba(78,226,182,0.25), purple accent #818CF8, purple glow rgba(129,140,248,0.25), text white #FFFFFF, text heading #F1F5F9, text body #94A3B8, text muted #64748B. Corner radii 22, 16 and 12. Screen background is bg-dark with two soft glow layers, a mint glow near the top center and a faint purple glow near the bottom right, built from layered gradients or a pre-rendered glow image since React Native has no true radial gradient.

SCREEN STRUCTURE, TOP TO BOTTOM

Header: small caps ACHIVII wordmark, a large bold date beneath it, and to the right a mint tinted pill with a slowly pulsing dot reading something like Calm Focus, On Track.

Daily Goal card, entirely tappable, no separate button anywhere on it: a seventy two point circular progress ring built from an SVG Circle with a mint to teal gradient stroke, showing completed over total blocks centered inside it, plus a title and subtitle to the right. Tapping anywhere on the card advances the completed count, wrapping back to one after reaching the total, animates the ring with a spring, updates the text, and fires a toast. Give the card a pressed state that scales it down slightly, and mark it as an accessible button with a label.

Vertical timeline of five rows, each a time label on the left, a small circular node on a shared connector, and a card on the right. The connector is the signature detail: a smooth wavy S curve, not a straight line, drawn as an SVG Path built from cubic bezier segments that alternate curving left and right around the nodes, computed from each node's actual measured position through onLayout rather than hardcoded numbers, so it stays correct no matter the card heights. Split the curve into two path segments, a solid mint one with a soft glow running from the first node through the active node, and a fainter purple one at reduced opacity running from the active node to the last node.

Row one is a standard card: icon box with a mint meditation icon, a title, a description line, and a small clock plus duration line underneath.

Row two is the active card, visually the most prominent: a mint bordered card with a soft mint glow, a laptop icon, a title, then a checklist of three tasks each independently tappable without triggering the goal card, and a thin progress bar underneath whose fill width matches the checked fraction and animates on change.

Rows three through five are compact cards, icon plus title only, tighter padding, no description and no time tag. Row three shows two small icon boxes side by side, a fork and knife icon then a shoe icon, next to the title. Row four shows a single pencil icon next to a title that wraps across two lines. Row five uses a distinct purple accent instead of mint: a larger solid purple node with a glow, a purple bordered card, and a purple stroked icon, title wrapping across two lines.

All five rows fade and slide in on mount, staggered about sixty milliseconds apart, easing out, with the header and goal card animating in just ahead of the timeline. Respect a reduced motion setting by skipping the slide and shortening durations close to zero.

Bottom tab bar: a blurred glass background pinned to the bottom safe area, four evenly spaced tabs, Today, Goals, Calendar and Profile. The active tab's icon turns mint and sits inside a soft mint pill chip, the other three stay a muted gray. Tapping a tab swaps its active state with a quick color transition and a small press scale, well under two hundred milliseconds.

Toast: a small mint pill near the top center that appears on goal card interaction with an eased fade plus slight vertical slide, and auto dismisses after about two and a half seconds.

NON NEGOTIABLES
The connector line must be wavy, this is the single most distinctive visual element, do not ship a straight line. Rows three through five have no description text and no time tag row, only icon and title. Only row one has a description, row two has the checklist instead. The Daily Goal card has no visible button, the whole card is the tap target. Animate only opacity, transform and the ring's stroke offset, never animate layout properties like width, height or padding for anything performance sensitive, the progress bar width tween is the one intentional short exception. All icons are thin two point stroke line icons with round caps, not filled or solid icons. Every pressable surface needs a visible pressed state, nothing should feel inert when tapped.