## Overview
Create a standalone dark project-cost planner as one complete `index.html`, with semantic HTML, embedded CSS and embedded vanilla JavaScript. It must open directly as a local file in a modern browser. Include the document head, viewport declaration and all necessary styles and logic. Use no external packages, fonts, imports, build step, remote requests or backend. Write the implementation independently from this specification.
The experience should feel spacious, precise and responsive: choose options on the left and inspect one total with an understandable breakdown on the right. Use fictional US-dollar amounts and English interface copy. Display `Illustrative estimate` beside the total and `Example prices and timing; not a quote or delivery commitment.` in the introduction. There is no purchasing, submission, contact, comparison-pricing or notification flow. The subjective design target is at least 95% of the intended dark-calculator impact; do not represent that target as a tested result.
## Layout
Use a full-width near-black section with an inner width of at most 1280px. Define the complete palette in scoped CSS: page background `#08080A`, form surface `#0D0D0D`, summary surface `#151519`, divider `#1E1E1E`, main text `#F7F7F8`, secondary text `#B6B6C2`, and coral emphasis `#FF5656`. These complete theme choices belong to this version; they do not claim to recover undefined source theme tokens.
Place a left-aligned introduction above the planner: a small uppercase eyebrow `PROJECT PLANNING`, an h1 `Shape a project estimate`, and the short demo explanation. This is followed by two separate rounded surfaces with a 24px gap, rather than a joined panel. At wide widths use a 7:5 grid, with the form first and the summary second. Each panel has a subtle border and 20px corner radius. Use 32px panel padding on ordinary widths and 48px from 1024px. Give the header a 32px gap before the panels. Do not fix either panel to the height of an old composition.
Within the form, place service selection first, then a page-count group, then the optional support choices, then timing. Each group is an independently titled fieldset separated by 28px of space; use a divider only before timing. At widths from 640px, content and SEO options can share a two-column row within their group. The summary contains a small caption, one large total, a short selected-configuration sentence, a cost breakdown, and a compact reset action. Add a narrow pink-to-orange decorative rule above the total, rather than making the whole summary a promotional gradient card. No agency or freelancer comparison cards are present.
## Components
Use native radio inputs, checkboxes and one range input. All controls have visible labels and a minimum 44px interactive label height. Radio and checkbox indicators are 20px; use coral for the selected state. Do not include copied SVG artwork. Use the browser's checkbox mark or independently drawn CSS decoration while retaining native input semantics.
The form state is exactly:
| Field | Accepted values | Default |
| --- | --- | --- |
| Service | `design`, `development`, `both` | `both` |
| Pages | integer 1–30, step 1 | 5 |
| Content support | Boolean | false |
| SEO preparation | Boolean | false |
| Timing | `regular`, `fast`, `rush` | `regular` |
The unchecked support defaults are a decision made for this version. Display service labels `Design`, `Development`, `Design + development`; a range label `Pages` with its current value; endpoint labels `1` and `30`; and checkbox labels `Content support` and `SEO preparation`, each annotated `+$50 / page`. Timing labels are `Standard`, `14-day example` with `+$25 / page`, and `7-day example` with `+$100 / page`. These durations are fictional examples.
Use a single summary total followed by a definition list or table with the rows `Starting price`, `Additional pages`, `Content support`, `SEO preparation`, and `Timing adjustment`. Show every row, including zero values, so the user can see what is contributing. Show the service name and page count in the configuration sentence; do not add unverifiable savings claims.
## Interactions
Maintain one source of truth and derive all displayed amounts from the current valid form values. Preserve these arithmetic rules exactly, but write the JavaScript anew:
| Service | Starting price B | Additional-page rate R |
| --- | --- | --- |
| design | 399 | 100 |
| development | 199 | 100 |
| both | 499 | 200 |
For page count P, the service subtotal is `max(B, B + (P − 1) × R)`. Content adds `P × 50` when selected, otherwise 0. SEO adds `P × 50` when selected, otherwise 0. Timing adds `P × 100` for rush, `P × 25` for fast, or 0 for regular. The total is the service subtotal plus those three additions. Timing is mutually exclusive. These rows completely define the demonstration total.
For the breakdown, show B as the starting price and `service subtotal − B` as additional pages; then the three additions. These rows must sum to the total. Format every amount as a dollar prefix plus `toLocaleString()` integer grouping; the browser locale controls grouping. This version specifies display dollars, not a currency-conversion service.
Update on the range's `input` event and on radio/checkbox changes. Keep the focused control in place; update only dependent text and visual values. Enforce integer pages between 1 and 30 whenever values are read; if a programmatic value is invalid or non-finite, restore 5. An unknown service or timing falls back to `both` or `regular`. These safeguards are version-specific decisions, not source facts.
The range must support Left/Down to subtract one, Right/Up to add one, Home for 1 and End for 30. Retain native keyboard behavior; do not add a second handler that applies a change twice. Clamp at both ends and keep the numeric label synchronized. Native radios support arrow selection and checkboxes support Space.
The `Reset estimate` button restores both, 5 pages, unchecked support options and regular timing, and immediately updates the summary. Handle form reset explicitly so rendered values do not lag behind native reset; restore controls before calling the same summary-rendering function. Keep focus on the reset button. Use no local storage or persistence.
The following are arithmetic review examples, not executed tests:
| Configuration | Starting | Extra pages | Content | SEO | Timing | Total |
| --- | ---: | ---: | ---: | ---: | ---: | ---: |
| both, 5 pages, no support, regular | 499 | 800 | 0 | 0 | 0 | 1299 |
| design, 1 page, no support, regular | 399 | 0 | 0 | 0 | 0 | 399 |
| development, 1 page, no support, regular | 199 | 0 | 0 | 0 | 0 | 199 |
| both, 5 pages, both support options, rush | 499 | 800 | 250 | 250 | 500 | 2299 |
| development, 30 pages, both support options, fast | 199 | 2900 | 1500 | 1500 | 750 | 6849 |
Use only brief color/focus transitions of 160ms. Do not animate numeric counting, add entrance animation, or trigger success toasts.
## Responsive
Use one column below 1024px and the 7:5 panel grid from 1024px. Below 640px use 16px page gutters, 24px panel padding, stacked service labels if needed, and a single column for support choices. From 640px use 32px page gutters; from 1024px use 64px gutters. Page vertical padding is 64px below 768px and 112px from 768px. Use `min-width: 0` on grid children and allow labels to wrap.
Make the h1 fluid between 30px and 48px and the summary amount between 40px and 56px. Keep totals legible without clipping at the largest supported value or at 200% text zoom. Place the summary after all controls in the document and mobile reading order. No sticky summary, forced minimum height or nested scroll region is required. Design for 320px through wide desktop screens without horizontal scrolling.
## Accessibility
Use a labelled main region, proper heading hierarchy, fieldset/legend groups, unique input ids and full clickable labels. Use a range label and visible value output; expose its minimum, maximum and current value through native semantics. Provide a 3px high-contrast `:focus-visible` outline with a 3px offset on all controls and the reset button. Do not remove focus indicators or use color as the only selected-state cue.
Use a concise polite status region to announce the updated total after interaction; avoid announcing every breakdown row or the initial render. Coalesce rapid range changes so the last total is announced after approximately 200ms of idle time. The visible amount updates immediately. This short announcement delay is a version-specific accessibility choice. Under reduced motion disable decorative transitions. Keep readable text contrast on dark surfaces, and ensure control labels remain visible with forced colors.
## Resources
This specification needs no images, video, audio, logo, external icon or custom font. Use system sans-serif for the body and a system monospace stack for small labels. The initial file must make no network requests and require no external assets. All configuration is local JavaScript data in the file.
Real quotation rules, business currency policy, taxes and delivery commitments are `UNSPECIFIED`; this does not leave the fictional demonstration behavior undefined. No quotation endpoint, commerce flow or external destination is specified. If a future user wants real pricing, they must supply and review those business rules separately. Do not portray this fictional configuration as a real offer. Write all HTML, CSS and JavaScript independently, and do not fetch or copy source implementation code. Deliver the complete single file; include a short note that browser behavior, accessibility and tool compatibility still require actual verification.
