System Requirements Document for calcsolver-truffled-lol

1. Introduction

calcsolver-truffled-lol is a browser-based copy of the CalcSolver calculator site (https://calcsolver.net/), replicating its calculator experience, its navigation and search, its editorial sections, and its educational content categories. It is aimed at the same audience the source serves: students, teachers, and professionals (engineers, scientists) who need instant, registration-free math and everyday calculations for homework, exams, and quick answers.

The build carries one deliberate, quoted secret: when the code 420 is clicked, the site opens truffled.lol instead of the normal destination, and a visible exit control returns the user from truffled.lol back to the calculator — to the exact calculator state they left.

2. System Overview

The product is a single first-party web application with two pages: Landing (anonymous public entry that explains the replicated calculator product and routes visitors into the calculator) and Calculator (the replicated calcsolver.net experience, including the "420" code element and the truffled.lol exit control). Both pages are publicly reachable with no account, registration, or sign-in — matching the source's "no download or registration required" benefit.

All calculator arithmetic runs locally in the browser with no loading time and works offline once loaded. The only outbound destination is the external site truffled.lol, opened by the "420" code element and owned by that external site; the application's own responsibility there is the visible exit control that returns the user to the calculator.

Actors. One active human persona: Calculator User. One typed non-persona actor: truffled.lol (external destination, provider-owned).

Current scope. The calculator, its full function set, Code Mode input, All Activities search, Change Server dropdown, Exit button, editorial sections, content categories, and the 420 → truffled.lol door with its exit.

Narrow exclusions. No user accounts, registration, sign-in, or profile management. No server-side computation of calculator results. No content authoring or administration surface. No capabilities on truffled.lol itself — that site is externally owned.

2a. Product Interpretation and Delivery Boundary

This is a faithful copy of a public, anonymous calculator site, restyled in an industrial, quotation-marked visual language. Everything a visitor needs is available on first load: the calculator works immediately, the educational sections are readable, and the search and server controls are present. There is no identity layer, because the source explicitly advertises "no download or registration required," and no accepted journey requires durable per-user state.

The 420 door is a current, in-scope product behavior, not a future idea: clicking the "420" key opens truffled.lol, and a visible, labelled exit control returns the user to the calculator with their prior calculator state intact. truffled.lol itself is provider-owned and out of scope for this application; only the entry into it and the exit back are ours.

Future ideas are not part of this delivery and appear only in Section 11.

2b. Source Content Inventory

The following verified facts from the authoritative content source (https://calcsolver.net/) are preserved as product content:

What is CalcSolver. An online calculation platform and educational resource; also known as SolveCalc; helps solve math and everyday calculation problems.

Available Functions.

• Trigonometric: sin, cos, tan (in degrees)
• Logarithmic: log (base 10), ln
• Powers: x², x³, square root
• Constants: π, e
• Special: factorial (!), reciprocal (1/x), percentage (%)

Target Users. Students, teachers, professionals (engineers, scientists) using it for homework, exams, quick calculations.

Benefits.

• Instant calculations with no loading time
• Works offline once loaded
• Educational and intuitive interface
• Compared to physical calculators: no batteries, no hardware issues, accessible anywhere, no download or registration required

Content Categories.

• Basic Algebra — multiple articles such as remainder theorem, factoring, polynomial definitions, algebraic expressions
• Percent and Decimal — specific fraction-to-percent/decimal conversions
• Equivalent fractions — multiple specific queries

Visible media. Two images (IDs 32 and 33) present on the homepage; content not specified. In this build they are rendered as flat schematic line diagrams of a calculator and a formula sheet on concrete-grey, framed with exposed grid crosses at the corners like a spec sheet.

Dates or versioning. Privacy Policy last updated: January 2025 (from a separate privacy page).

2c. Page Content and Component Coverage

Landing

• Information and state. Anonymous public entry. Presents the product identity and purpose: an online calculation platform and educational resource (also known as SolveCalc) that helps solve math and everyday calculation problems, for students, teachers, and professionals. States the benefits: instant calculations with no loading time, works offline once loaded, educational and intuitive interface, and — compared to physical calculators — no batteries, no hardware issues, accessible anywhere, no download or registration required. No identity, session, or stored state.
• Primary action. Enter the calculator (routes to the Calculator page).
• Supporting actions. Read the "What is CalcSolver" summary and the benefits list; follow the visible route into the calculator.
• Domain entities. Product description, benefit list, target-audience statement.
• Component responsibilities.
  • Oversized Archivo 900 wordmark "CALCSOLVER" in ink, with a small quoted orange caption "SOLVE ANYTHING" beneath it.
  • Quotation-marked section heading with an orange numbered micro-label ("01 / WHAT IS CALCSOLVER") above a 1px ink rule.
  • Benefit list rendered as ruled bands.
  • Hazard-stripe tape band and exposed grid lines as decoration only.
  • A single entry control into the Calculator page.
• States. Loading: static content, no spinner required. Empty: not applicable. Success: entry control routes to Calculator. Error: if routing fails, the entry control remains visible and re-triggerable. Recovery: reload the page.

Calculator

• Information and state. The replicated calcsolver.net experience. Displays the current calculator expression and result in a tabular-figure display; the Code Mode input value; the All Activities search field value; the selected server from the Change Server dropdown; the editorial sections; and the truffled.lol panel state (closed or open). Calculator state persists in the browser for the session and is restored exactly when the user exits truffled.lol.
• Primary actions. Enter digits and operators on the keypad; press equals to compute; press C to clear; press backspace to delete; press the "420" key to open truffled.lol; press the exit control to return to the calculator.
• Supporting actions. Type into Code Mode; search All Activities; change server via the dropdown; press the Exit button; read the editorial sections; open content-category articles.
• Domain entities. Calculator expression, calculator result, code value, search query, server selection, article (title, category, body), category (Basic Algebra, Percent and Decimal, Equivalent fractions).
• Component responsibilities.
  • Code Mode input — black input bar with an orange caret; accepts typed code; when the typed code matches 420, the "420" key pulses.
  • Calculator keypad — strict 4-column grid of square black keys with a 2px gap: C (clear), √, ÷, ×, −, +, digits 0–9, decimal point, ±, backspace, equals, and the function keys for sin, cos, tan (degrees), log (base 10), ln, x², x³, π, e, factorial (!), reciprocal (1/x), and percentage (%). The "420" key is the only orange key, sits on a halftone orange dot, and is labelled in quotes.
  • Calculator display — Archivo tabular figures at 800 weight; value flips with a 120ms vertical slide.

• All Activities search field — label-like uppercase field in the left rail; filters/browses learning activities and articles.
• Change Server dropdown — label-like uppercase dropdown allowing switching server variants.
• Exit button — black outlined tag reading "EXIT" at top-right of the rail.
• truffled.lol panel — full-height panel sliding in from the right edge in 220ms, with a black "EXIT → BACK TO CALCULATOR" tag pinned top-left that returns to the exact calculator state.
• Editorial sections — "What is CalcSolver", "Latest Updates & News", "Why Choose CalcSolver", "How to Use CalcSolver", "Available Functions", "CalcSolver Math Solutions", and the three content categories (Basic Algebra, Percent and Decimal, Equivalent fractions), each as a full-width ruled band with a quotation-marked heading and orange numbered micro-label.
• Schematic diagrams — the two source images re-rendered as flat schematic line diagrams of a calculator and a formula sheet on concrete-grey, framed with exposed grid crosses.
• Hazard-stripe ticker tape — 24px ink-and-orange 45° stripe band under the top bar carrying scrolling micro-copy ("INSTANT · OFFLINE-READY · NO REGISTRATION ·"), pausing on hover.
• States.
  • Loading: calculator is immediately usable; no loading state for arithmetic.
  • Empty: display shows a neutral zero/empty expression; search shows all activities when the query is empty.
  • Success: result appears in the display; the "420" key pulses when the typed code matches; the truffled.lol panel opens on "420" press; the exit control returns to the restored calculator state.

• Error: invalid expression shows an error indication in the display without losing the entered expression; a failed search shows a no-results message; if truffled.lol cannot be reached, the panel shows an unavailable message with the exit control still available.
• Recovery: C clears the display; backspace deletes the last entry; the exit control always returns to the calculator; reloading restores a fresh calculator.

3. Functional Requirements

FR-1 — Replicated calculator experience. As a Calculator User, I should use a calculator that replicates the calcsolver.net experience so that I can perform math and everyday calculations. Provenance: explicit. Lifecycle: actor enters digits and operators on the keypad; the display updates live; equals produces the result; C clears and backspace deletes. Access: public, no account. Failure/recovery: invalid expressions show an error in the display and the expression is retained for correction. Continuation: the user continues calculating or moves to the editorial sections. Acceptance: the keypad includes C, √, ÷, ×, −, +, digits 0–9, decimal point, ±, backspace, and equals; operations run locally in the browser with no loading time.

FR-2 — Full function set. As a Calculator User, I should have the full available function set so that I can solve trigonometric, logarithmic, power, constant, and special calculations. Provenance: explicit (content source). Lifecycle: actor presses a function key; the display reflects the operation and result. Access: public. Failure/recovery: out-of-domain input (e.g., factorial of a negative, log of zero) shows an error in the display without losing the expression. Continuation: the user continues calculating. Acceptance: sin, cos, tan (in degrees), log (base 10), ln, x², x³, square root, π, e, factorial (!), reciprocal (1/x), and percentage (%) are all available.

FR-3 — Code Mode input. As a Calculator User, I should type into a Code Mode input so that I can enter a code. Provenance: explicit (structure reference). Lifecycle: actor types into the black Code Mode bar with the orange caret; the typed value is visible; when it matches 420, the "420" key pulses. Access: public. Failure/recovery: non-matching input simply does not trigger the pulse. Continuation: the user presses the "420" key or continues calculating. Acceptance: the Code Mode input accepts typed characters and visibly reflects them.

FR-4 — "420" opens truffled.lol. As a Calculator User, I should have the "420" key open truffled.lol instead of the normal destination so that I can reach the hidden door. Provenance: explicit. Lifecycle: actor presses the "420" key (the only orange key, on a halftone orange dot, labelled in quotes); a full-height truffled.lol panel slides in from the right edge in 220ms; the panel shows truffled.lol content. Access: public. Failure/recovery: if truffled.lol cannot be reached, the panel shows an unavailable message and the exit control remains available. Continuation: the user uses the exit control to return. Acceptance: pressing "420" opens truffled.lol rather than the normal destination; the panel is visibly labelled.

FR-5 — Exit back to the calculator. As a Calculator User, I should have a visible exit control that returns me from truffled.lol to the calculator so that I can resume my work. Provenance: explicit. Lifecycle: actor presses the black "EXIT → BACK TO CALCULATOR" tag pinned top-left of the truffled.lol panel; the panel closes and the calculator is restored to its exact prior state. Access: public. Failure/recovery: the exit control is always visible and always available, including when truffled.lol is unavailable. Continuation: the user resumes calculating. Acceptance: the exit control is visible and labelled; pressing it returns to the calculator with the prior state intact.

FR-6 — Exit button. As a Calculator User, I should have an Exit button in the rail so that I can exit the calculator session. Provenance: explicit (structure reference). Lifecycle: actor presses the black outlined "EXIT" tag at top-right of the rail; the calculator session is exited. Access: public. Failure/recovery: the button remains visible and re-triggerable. Continuation: the user can return to the calculator. Acceptance: the Exit button is present and labelled "EXIT".

FR-7 — All Activities search. As a Calculator User, I should search All Activities so that I can browse learning activities and articles. Provenance: explicit (feature reference). Lifecycle: actor types a query into the label-like uppercase search field; matching activities/articles are shown; selecting one opens its content. Access: public. Failure/recovery: no matches shows a no-results message. Continuation: the user clears the query or selects a result. Acceptance: the search field filters/browses activities and articles.

FR-8 — Change Server dropdown. As a Calculator User, I should change server via a dropdown so that I can switch server variants. Provenance: explicit (feature reference). Lifecycle: actor opens the label-like uppercase dropdown and selects a server variant; the selection is reflected. Access: public. Failure/recovery: the dropdown remains usable if a variant is unavailable. Continuation: the user continues calculating. Acceptance: the dropdown lists server variants and reflects the selection.

FR-9 — Educational articles. As a Calculator User, I should open educational articles so that I can read formulas, examples, and explanations. Provenance: explicit (feature reference). Lifecycle: actor selects an article from a content category or search result; the article content opens with formulas, examples, and explanations. Access: public. Failure/recovery: if an article fails to load, an error message with a retry is shown. Continuation: the user returns to the calculator. Acceptance: articles open and display their content.

FR-10 — Editorial sections. As a Calculator User, I should read the editorial sections so that I understand the product and how to use it. Provenance: explicit (structure and content source). Lifecycle: actor scrolls the ruled bands and reads "What is CalcSolver", "Latest Updates & News", "Why Choose CalcSolver", "How to Use CalcSolver", "Available Functions", "CalcSolver Math Solutions", and the three content categories. Access: public. Failure/recovery: static content; reload recovers. Continuation: the user returns to the keypad. Acceptance: all listed sections are present with their content.

FR-11 — Offline-ready, registration-free use. As a Calculator User, I should use the calculator without registration and offline once loaded so that I get instant answers anywhere. Provenance: explicit (content source). Lifecycle: actor loads the site once; subsequent calculations work without network. Access: public, no account. Failure/recovery: reload restores the app. Continuation: the user continues calculating. Acceptance: no registration is required; calculations work offline once loaded.

FR-12 — Landing entry. As a Calculator User, I should land on a public entry page that explains the product and routes me into the calculator so that I know what it is and can start. Provenance: required_inference. Lifecycle: actor arrives anonymously, reads the product identity and benefits, and activates the entry control; the Calculator page opens. Access: public, no account. Failure/recovery: if routing fails, the entry control remains re-triggerable. Continuation: the user calculates. Acceptance: the Landing page presents the product identity and benefits and routes to the Calculator.

4. User Personas

Calculator User

Product context. A student, teacher, or professional (engineer, scientist) who needs instant math and everyday calculations for homework, exams, or quick answers, and who may also browse the educational content. They arrive anonymously — no download, no registration, no account — and expect the calculator to work immediately.

Primary goal. Get a correct answer fast, with no loading time, and be able to read supporting explanations when needed.

Distinct accepted responsibilities.

• Enter expressions on the keypad and read results in the display.
• Use the full function set (trigonometric in degrees, log base 10, ln, x², x³, square root, π, e, factorial, reciprocal, percentage).
• Type into Code Mode and press the "420" key, which opens truffled.lol instead of the normal destination.
• Use the visible exit control to return from truffled.lol to the exact calculator state.
• Search All Activities and open educational articles.
• Change server via the dropdown.
• Press the Exit button to exit the calculator session.
• Read the editorial sections.

Relevant inputs or decisions. The expression to compute; whether to use a function key; whether to type a code; whether to press "420"; whether to exit truffled.lol; which activity or article to open; which server variant to select.

Interactions with other accepted participants. The only other actor is the external destination truffled.lol, which the user reaches through the "420" key and leaves through the exit control. There are no other human participants.

Observable success. The display shows the correct result; the "420" key pulses when the typed code matches; pressing "420" opens the truffled.lol panel; the exit control returns to the restored calculator; search returns matching activities; articles open with their content.

Constraints. No account or registration; the calculator must work offline once loaded; the exit from truffled.lol must be visible and labelled, never hidden.

5. Core User Flows

Flow A — Calculate an expression

1. The Calculator User opens the Calculator page (directly or via the Landing entry control). The keypad and display are immediately usable.
2. The user presses digit and operator keys; the display updates live.
3. The user presses equals; the result appears in the display.
4. If the expression is invalid, the display shows an error and the expression is retained; the user presses backspace or C and corrects it.
5. The user continues calculating or scrolls to the editorial sections.

Flow B — Use a function

1. On the Calculator page, the user presses a function key (e.g., sin, log, x², π, factorial).
2. The display reflects the operation and result.
3. If the input is out of domain, the display shows an error without losing the expression; the user corrects it.
4. The user continues calculating.

Flow C — Open truffled.lol with the 420 code

1. On the Calculator page, the user types into the Code Mode input.
2. When the typed code matches 420, the "420" key pulses a slow orange glow.
3. The user presses the "420" key (the only orange key, on a halftone orange dot, labelled in quotes).
4. A full-height truffled.lol panel slides in from the right edge in 220ms, showing truffled.lol.
5. If truffled.lol cannot be reached, the panel shows an unavailable message and the exit control remains available.

Flow D — Exit truffled.lol back to the calculator

1. With the truffled.lol panel open, the user presses the black "EXIT → BACK TO CALCULATOR" tag pinned top-left.
2. The panel closes and the calculator is restored to its exact prior state.
3. The user resumes calculating.

Flow E — Search All Activities and read an article

1. On the Calculator page, the user types a query into the All Activities search field in the left rail.
2. Matching activities and articles are shown; if none match, a no-results message appears.
3. The user selects a result; the article opens with formulas, examples, and explanations.
4. If the article fails to load, an error with a retry is shown.
5. The user returns to the calculator.

Flow F — Change server

1. On the Calculator page, the user opens the Change Server dropdown in the left rail.
2. The user selects a server variant; the selection is reflected.
3. The user continues calculating.

Flow G — Exit the calculator session

1. On the Calculator page, the user presses the black outlined "EXIT" tag at top-right of the rail.
2. The calculator session is exited.
3. The user can return to the calculator.

Flow H — Enter from the Landing page

1. The Calculator User arrives anonymously on the Landing page and reads the product identity ("What is CalcSolver") and the benefits.
2. The user activates the entry control.
3. The Calculator page opens and the user begins calculating (Flow A).

6. Visuals Colors and Theme

Muse and headline. Virgil Abloh — "a quoted tool with a hidden door." Utilitarian precision with an ironic, drop-culture wink: the calculator grid stays honest and legible while the 420 door and the truffled.lol exit become deliberate, labelled moments.

Palette (light mode).

• Background: #F2F0EB (concrete-grey paper ground)
• Surface: #FFFFFF (pure white key panels)
• Text: #111111 (ink black)
• Primary: #111111 (ink black — type, borders, calculator key faces)
• Accent: #FF4D00 (safety orange — reserved for exactly three things: the "420" key, the truffled.lol exit banner, and quotation-mark captions)
• Muted: #8A877F (metadata and disabled states only)
• Hazard stripes: #111111 + #FF4D00 at 45°
• No blue anywhere.

Typography.

• Headings: Archivo — all-caps at 700–800 with 0.08em letterspacing for labels and section tags, set inside literal quotation marks ("WHAT IS CALCSOLVER"); hero wordmark ultra-tight 900-weight at display scale.
• Numerals: Archivo tabular figures at 800 weight in the calculator display.
• Body: Archivo.
• Scale (1.333 modular): hero 44px mobile → 96px desktop (clamp); section heads 28→44; sub-heads 18→22; body 15→17; micro-labels 11px caps with 0.12em tracking. Line-height 1.1 on display, 1.55 on body.

Shape language. Hard 90° corners everywhere — no border radius on keys, panels, or images. Chunky 2px ink borders, 4px offset "print misregistration" shadows on the calculator chassis, exposed hairline grid lines, and a construction-tape stripe as a section divider. Keys are square tiles in a strict 4-column grid with a 2px gap.

Layout. Two-column desktop: a sticky left rail carrying the wordmark, All Activities search field, Change Server dropdown, and Exit button; the right column stacks Code Mode input, the calculator keypad, then the editorial sections as full-width ruled bands. Mobile collapses to one column with the keypad first and the rail controls as a horizontal label strip. Every band is separated by a 1px ink rule and an orange numbered micro-label (01, 02, 03…).

Imagery. No stock photography. Visuals are the interface itself: a hazard-stripe tape band, a halftone-dotted orange circle behind the "420" key, exposed grid lines, and two product "shots" rendered as flat schematic diagrams of a calculator chassis on concrete-grey.

Readability. Headlines, wordmarks, labels, numbers, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit; no other element covers them.

7. Signature Design Concept

The first screen is a full-width calculator chassis: a white 2px-bordered panel bleeding to the right edge of the viewport, its top-left corner overlapped by an oversized 96px Archivo 900 wordmark "CALCSOLVER" set in ink, with a small quoted caption "SOLVE ANYTHING" tucked beneath it in orange caps. Directly under the wordmark, a black Code Mode input bar with an orange caret; to its right the keypad's "420" key sits on a halftone orange dot, visually hotter than any other key. A hazard-stripe tape runs corner-to-corner behind the chassis at low opacity. The Exit button sits top-right as a black outlined tag reading "EXIT". The left rail's search field and Change Server dropdown are label-like, small, uppercase. The chassis reads as a physical industrial object — a 2px-ink-bordered white slab with a 4px solid orange offset shadow and a 2px gap grid of square black keys — not a card.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: flat

Landing Hero Motion Brief.

• Focal subject. The calculator chassis as a physical industrial object, with the "420" key on its halftone orange dot as the hottest element.
• Input → transformation → outcome thesis. Typing into the black Code Mode bar (input) makes the "420" key pulse a slow 2s orange glow when the code matches (transformation), and pressing it slides open the full-height truffled.lol panel from the right edge in 220ms (outcome), with the black "EXIT → BACK TO CALCULATOR" tag pinned top-left returning to the exact calculator state.
• Motion vocabulary. Snappy and mechanical: keys depress 2px with a 90ms cubic-bezier snap; the display value flips with a 120ms vertical slide; the "420" key pulses a slow 2s orange glow only when the typed code matches; the truffled.lol panel slides in from the right edge in 220ms; the hazard-stripe ticker tape runs continuously and pauses on hover.
• Composed first frame. The white chassis bleeding right, the oversized ink wordmark overlapping its top-left corner, the orange quoted caption beneath, the black Code Mode bar with orange caret, the "420" key glowing on its halftone dot, the hazard-stripe tape behind at low opacity, and the black "EXIT" tag top-right.
• Reduced-motion state. prefers-reduced-motion stops all motion — no key depression, no display flip, no pulse, no panel slide, no ticker — leaving a static, fully-readable layout with the truffled.lol panel opening instantly and the exit control always visible.

9. Non-Functional Requirements

• NFR-1 — Local computation. Calculator arithmetic runs locally in the browser with no loading time. Provenance: explicit (content source). Rationale: the source advertises instant calculations.
• NFR-2 — Offline-ready. The site works offline once loaded. Provenance: explicit (content source). Rationale: source benefit.
• NFR-3 — No registration. No download or registration is required to use the calculator. Provenance: explicit (content source). Rationale: source benefit and access boundary.
• NFR-4 — Visible exit. The truffled.lol exit control must be visible and labelled, never hidden. Provenance: explicit (user requirement and creative direction). Rationale: the user must always be able to return to the calculator.
• NFR-5 — State restoration. Exiting truffled.lol restores the exact prior calculator state. Provenance: explicit (creative direction signature move). Rationale: continuity of the user's work.
• NFR-6 — Responsive readability. Readable text and controls stay whole at 375px, 768px, and 1280px. Provenance: explicit (creative direction). Rationale: accessibility and legibility.
• NFR-7 — Reduced motion. prefers-reduced-motion stops all motion and leaves a static, fully-readable layout. Provenance: explicit (creative direction). Rationale: accessibility.
• NFR-8 — No blue. No blue or indigo accents anywhere. Provenance: explicit (creative direction). Rationale: brand fidelity.

10. Tech Stack

• Frontend. React (single-page application) with the calculator logic running entirely client-side.
• Styling. CSS with Archivo typeface, hard 90° corners, 2px ink borders, and 4px offset shadows per the creative direction.
• Backend. None required for calculator computation; the application is served as static assets. If a shared backend is introduced for serving or future needs, it should be a single Python/FastAPI service in the existing docker-compose inventory, not a separate container per feature.
• Storage. None required; calculator state is held in browser memory for the session.
• Deployment. Docker/docker-compose for the static frontend service; Kubernetes only if deployment requires it.

11. Assumptions and Constraints

Assumptions.

• The calculator is a faithful copy of the calcsolver.net experience; exact pixel fidelity to the source is not required where the creative direction restyles it.
• The "420" key is a distinct key on the keypad, in addition to the Code Mode input; both are present as described in the source structure.
• truffled.lol is an external, provider-owned site; this application only opens it and provides the exit back.
• The Exit button exits the calculator session; its exact post-exit destination is not specified by the source and is treated as returning the user to a usable calculator state.
• The Privacy Policy last-updated date (January 2025) is source metadata and is not a current product page in this build.

Constraints.

• Clicking the code "420" must open truffled.lol instead of the normal destination. (explicit)
• An exit must be available to go back to the calculator from truffled.lol. (explicit)
• No registration, sign-in, or account management. (explicit, source benefit)
• No blue or indigo accents; no rounded corners, pill buttons, soft shadows, gradients, glassmorphism, or stock photography. (explicit, creative direction)

Future (not current scope). Additional server variants beyond those listed in the Change Server dropdown, expanded article libraries, and any account-based features are future ideas only and are not part of this delivery.

12. Glossary

• CalcSolver / SolveCalc — the source calculator site and educational resource being copied.
• Code Mode — the black input bar where the user types a code; typing 420 makes the "420" key pulse.
• "420" key — the only orange key on the keypad, on a halftone orange dot, labelled in quotes; pressing it opens truffled.lol.
• truffled.lol — the external destination opened by the "420" key, provider-owned.
• Exit control — the black "EXIT → BACK TO CALCULATOR" tag pinned top-left of the truffled.lol panel that returns to the exact calculator state.
• Exit button — the black outlined "EXIT" tag at top-right of the rail that exits the calculator session.
• All Activities — the search field for browsing learning activities and articles.
• Change Server — the dropdown for switching server variants.
• Chassis — the white 2px-ink-bordered calculator slab with a 4px orange offset shadow.
• Hazard-stripe tape — the 24px ink-and-orange 45° stripe ticker under the top bar.