# aisaac — Style Reference

> A company presented as a living laboratory through candid photography, geometric cutouts, and vivid red.

**Website:** [aisaac.jp](https://aisaac.jp/)
**Original URL:** https://aisaac.jp/
**Final URL:** https://aisaac.jp/
**Theme:** light gray canvas, white content surfaces, red identity accents, and a dark footer; no theme selector was observed.
**Inspected:** September 12, 2026, from supplied evidence captured at `2026-09-12T14:59:23.070Z` — 23:59:23 JST.
**Viewports:** desktop `1440 × 1000` and mobile `390 × 844` CSS pixels.
**Scope:** the current corporate homepage: opening composition, persistent navigation, Purpose and Value content, business philosophy, group companies, news, recruitment, and footer. Original screenshots cover the opening, group-company area, and recruitment/footer; the remaining sections have rendered DOM evidence. Linked pages and the expanded mobile menu were not inspected.

The homepage turns the idea of experimentation into a repeatable visual system. An apple wordmark, flask-like silhouettes, angular containers, and pinched columns sit beside photographs of people talking and working. Some containers hold photographs; others become solid red, ink, or gray masses. The oversized Japanese statement, “世の中を、実験しよう。”, anchors this changing field.

The supporting interface is restrained. White navigation capsules float above the content. Japanese section titles use medium-weight sans-serif type, with smaller red English labels. Company identities retain their individual colors inside a consistent grid. White news cards provide a quieter reading rhythm, followed by a red recruitment panel and an expansive dark footer.

This is a corporate information hub with several destinations: company information, business details, news, careers, and contact. Its defining relationship is expressive geometry around a legible, orderly company structure.

## How to Read This Reference

- **Measured** means a value appears in the supplied computed styles or element rectangles. Values are occasionally rounded for readability.
- **Calculated** means a result derived from those measurements or exposed custom-property formulas.
- **Estimated** means a visual approximation from an original screenshot, without a corresponding element measurement.
- **Recommended** means guidance for a new implementation. The CSS, proposed breakpoint, hover feedback, and accessibility additions belong to this category unless stated otherwise.
- Token aliases describe reusable roles. Names explicitly marked as **source** are actual exposed custom properties.
- Element rectangles can include transforms. A sampled parent can also have different typography or paint from its visible children. Neither should be treated as a complete description of the rendered component.

## Tokens — Colors

### Default Palette

| Name | Value | Source / implementation alias | Role and evidence |
| --- | --- | --- | --- |
| Experiment Red | `#f03737` | Source `--color-red`; alias `--color-accent` | Measured red text on Purpose and section labels; visually the identity color for the logo, large shapes, and recruitment field |
| Light Gray Canvas | `#f3f3f3` | Source `--color-light-gray`; alias `--color-canvas` | Measured body background; visible around the hero, content panels, and above the footer |
| Ink | `#191d25` | Source `--color-black`; alias `--color-ink` | Measured body text and footer background; visually used for solid hero geometry and the top Contact capsule |
| White | `#ffffff` | Source `--color-white`; alias `--color-surface` | Measured news-card backgrounds, playback-control surface, and reversed footer/recruitment text; visible navigation capsules |
| Gray Rule | `#dddddd` | Source `--color-gray`; alias `--color-rule` | Declared neutral suited to the fine boundaries visible around some company artwork; individual tile border colors were not sampled |
| Shape Gray | `#62606c` | Source `--color-dark-gray`; alias `--color-shape-muted` | Declared dark gray corresponding to the muted geometric accent family |
| Footer Muted Text | `#909399` | Computed `rgb(144, 147, 153)`; alias `--color-footer-muted` | Measured policy-link and copyright color |
| Secondary Blue | `#3750f0` | Source `--color-blue` | Declared token; its use as a general homepage UI accent is not established by the supplied captures |

Use the source hex values when implementing the interface. Do not replace them with approximate screenshot samples: image encoding and display treatment can make the red appear slightly different.

The global palette is narrow, but the company gallery is deliberately multicolored. Blue Link artwork, pale pink Laskoi artwork, a lavender Aimy panel, and dark ArtX and THE NUDE panels belong to their individual identities. They are content colors, not evidence of a broad global button palette.

### Color Distribution

Large light-gray and white areas carry the page. Red alternates between small labels and large expressive fields. Ink gives the hero weight and closes the page in the footer. The contrast between these areas creates hierarchy without a general shadow system.

A cropped business illustration above the company grid includes softly shaded spheres and fine curves on red. Preserve this as a localized illustration treatment; the surrounding cards and navigation remain visually flat.

## Tokens — Typography

### Japanese Text

**Declared source family:** Noto Sans JP, followed by Japanese system fallbacks including Hiragino Kaku Gothic ProN, Hiragino Kaku Gothic Pro, Meiryo, and MS PGothic, then sans-serif.

Noto Sans JP is directly present in the computed stacks for body copy, section headings, company names, and recruitment copy. Most prose uses weight `400`; section headings, company names, and larger statements use `500`.

The typography is firm and readable without making every heading extremely bold. Body copy generally uses a generous `1.7` line height. Section headings use approximately `1.5` on desktop and `1.4` on mobile.

### English Labels

**Source variable:** `--font-en: "Outfit", serif`.

Outfit is directly reported for Purpose, Value, and copyright text. It supplies the rounded geometric character visible in the English utility language. Several sampled navigation and section-label records are parent elements whose computed family remains the Japanese stack; the exact child style was not provided. Applying Outfit consistently to English labels in the Quick Start is an implementation adaptation, not a claim that every sampled anchor reports it directly.

The source explicitly supplies a serif fallback for Outfit. A font declaration does not independently establish the downloaded font file or version.

### Hero Lettering and Identity Artwork

The visible hero statement is much larger than its sampled text node. The DOM text record measures only `4 × 4px` with inherited body typography. That record therefore cannot establish the font, weight, size, or rendering method of the visible statement.

Visually, the hero uses very heavy Japanese lettering in two lines. Its approximate apparent size is `96–108px` on desktop and `50–56px` on mobile. These are estimates, not computed font sizes. Reuse the authorized headline artwork when available; a heavy Noto Sans JP heading is only a practical approximation.

The apple wordmark and company logos are identity artwork. Do not reconstruct their lettering by assuming they use the interface font.

### Type Scale

Sizes below are measured unless explicitly marked as estimates. Values describe the sampled element, not every descendant.

| Role | Desktop size / line height | Mobile size / line height | Weight | Notes |
| --- | --- | --- | --- | --- |
| General body | `16 / 27.2px` | `15.022 / 25.538px` | `400` | Company descriptions, philosophy prose, news copy |
| Main section heading | `40 / 60px` | `28.175 / 39.491px` | `500` | Group Companies, News, Career |
| English section subtitle parent | `18 / 21.6px` | `16.032 / 19.239px` | `500` | Red subtitle accompanying the Japanese heading |
| Purpose statement | `39.974 / 59.962px` | `29.113 / 40.805px` | `500` | Red multiline statement |
| Business philosophy statement | `40 / 60px` | `29.113 / 40.805px` | `500` | Centered in its mobile text region |
| Purpose supporting copy | `19.987 / 33.978px` | `16.636 / 28.281px` | `500` | Deliberate short lines |
| Recruitment copy | `20 / 34px` | `16.636 / 28.281px` | `500` | White on the red panel |
| Company name | `20 / 34px` | `16.058 / 27.299px` | `500` | Separate from the company logo |
| Purpose / Value label | `15.990 / 19.188px` | `16.636 / 19.963px` | `500` | Directly computed Outfit |
| Large CTA anchor | `17.008 / 20.410px` | `15.040 / 18.048px` | `500` | Company, Business, News, Career |
| Social button anchor | `13.000 / 15.601px` | `12.014 / 14.417px` | `500` | Note and X |
| Copyright | `13.000 / 15.601px` | `12.014 / 14.417px` | `500` | Directly computed Outfit |
| Visible hero lettering | Approximately `96–108px` | Approximately `50–56px` | Visually heavy | Screenshot estimate; not a verified font assignment |

Tracking is reported as `normal` on the sampled text. Avoid adding wide tracking to Japanese paragraphs. Preserve the distinction between the exceptionally heavy hero and the medium-weight informational headings.

## Tokens — Spacing & Shapes

### Responsive Unit

The source exposes viewport-aware `--scale`, `--px`, and `--rem` properties. With the captured `16px` root, their relevant behavior simplifies to:

```text
W = viewport width in CSS pixels
S = max(1, W / 1440)
source --px = 1px × S
source --rem = 1rem × S
```

At both inspected widths, `S = 1`. The mobile interface is therefore not a desktop page uniformly scaled by `390 / 1440`. Mobile changes come from component formulas, line wrapping, and layout switches.

Above 1440px, the exposed scale can grow. That behavior was not visually inspected. The Quick Start instead caps its page container at 1440px as a recommended, predictable extension.

### Spacing Scale

The following calculations use the exposed formulas at the captured root size.

| Source token / use | At 1440px | At 390px | Status |
| --- | --- | --- | --- |
| `--spacing-30-20` | `30px` | `20.141px` | Calculated from source formula |
| `--spacing-40-20` / `--grid-gutter` | `40px` | `20.290px` | Calculated; positioned mobile edges commonly round to `20.281px` |
| `--spacing-40-30` | `40px` | `30.141px` | Calculated; measured as mobile news padding and company-list gap |
| `--spacing-60-40` | `60px` | `40.290px` | Calculated from source formula |
| `--spacing-120-80` | `120px` | `80.579px` | Calculated from source formula |
| Company name to description | `10px` | `10px` | Measured from text rectangles |
| Company rows | `40px` | `30.141px` | Measured between adjacent rows/cards |
| News-card grid gap | `20px` | Approximately `20.281px` | Calculated from card positions |
| Main content to footer | `80px` | `60.290px` | Measured main bottom padding |

The company gallery has two horizontal inset levels: the page edge to its white parent surface, then that surface to the cards. News cards use only the outer inset. This is why mobile company cards are approximately 309px wide while news cards are approximately 349px wide.

### Border Radius

| Element | Value | Evidence |
| --- | --- | --- |
| Navigation and CTA capsules | Fully rounded | Source reports a very large radius; reproduce with `999px` |
| Company-card anchor | `6px` | Measured at both viewports |
| News card | `10px` desktop; `7.044px` mobile | Measured; matches source `--radius-10-7` |
| Large content panels | Approximately `7–10px` | Visible estimate; use the panel-radius family as an adaptation |
| Category badge and circular arrow | Pill / circle | Screenshot observation |
| Geometric cutout vertices | Slightly softened in places | Screenshot observation; exact path geometry was not supplied |

A rounded rectangle and a geometric mask serve different roles. Do not replace the masks with ordinary rounded cards. CSS polygons can approximate the silhouettes, but exact softened diagonal corners require authored SVG paths or equivalent masks.

### Layout Measurements

| Element | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Document height | `6809.594px` | `8657.047px` | Measured; content and capture state dependent |
| Main logo | `119 × 34px`, at `(40, 28)` | `85.5 × 24.141px`, at approximately `(35, 33.906)` | Measured |
| Opening navigation capsule | Approximately `338 × 50px`, centered | Approximately `350 × 50px`, at `(20, 20)` | Screenshot estimate |
| Header Contact | `152 × 50px` | Hidden in the closed-header screenshot | Desktop measured; mobile visibility observed |
| Mobile menu button | Not shown | `30 × 30px`, at `(325, 30)` | Measured |
| Upper hero cutout height | Approximately `380px` | Approximately `166px` | Screenshot estimate |
| Hero playback control | `81.938 × 28.969px` | `69.656 × 24.953px` | Measured |
| Group-company content width | `1280px`, starting at `x = 80` | `308.875px`, starting at `x = 40.563` | Measured |
| Company columns | Three, `400px` each | One, `308.875px` | Measured positions |
| Company artwork | Approximately `400 × 247px` | Approximately `309 × 191px` | Desktop visual estimate; mobile calculated at the same approximate ratio |
| News card | `670 × 256.375px` | `349.438px` wide; approximately `258.828–284.344px` high | Measured |
| Large section CTA | `260 × 66px` | `200.859 × 53.219px` | Measured |
| Footer | `295.813px` high | `445.375px` high | Measured |

## Components

### Persistent Header

**Role:** maintain identity and access to the site's primary destinations.

At the desktop opening, three independent groups sit across the top: a red apple wordmark at the left, a white navigation capsule centered on the viewport, and a dark Contact capsule at the right. The primary navigation reads Company, Business, News, and Career. Measured link positions establish approximately `20px` gaps between these labels.

Later desktop screenshots show a compact centered capsule containing a small red apple icon followed by the same links. The detached left logo and right Contact control are absent from those crops. This establishes a visible scrolled variant, but not its precise trigger or transition.

At 390px, the header becomes a single white capsule about 350px wide, inset 20px from the top and sides. A smaller wordmark sits left and a two-line menu icon sits right. The same capsule remains visible above the recruitment content in the lower capture.

The mobile menu button has the source label “メニューを開く”. The expanded menu was not exercised. Offscreen or hidden navigation text in the DOM is not evidence that those links are visibly layered over the closed header.

### Experimental Hero

**Role:** express the company's identity before introducing its information architecture.

The desktop composition is an oversized two-row field that extends beyond the viewport at the right. The upper row begins around `y = 110px` and is approximately `380px` high. Its first octagonal photo container spans roughly `x = 40–420px`; the adjacent flask spans roughly `x = 420–800px`. Narrower waisted photography and another cropped container continue to the right.

The second row starts around `y = 540px`. The statement occupies the lower-left area, with large geometric masses to its right. Intentional partial shapes at the edges make the composition feel larger than the viewport.

On mobile, the composition is rearranged into three bands:

1. A cropped row of shapes around `y = 104–270px`.
2. The centered two-line statement around `y = 308–425px`.
3. Another cropped row of shapes around `y = 468–634px`.

The statement remains fully visible while decorative shapes are allowed to leave the frame. This is an art-directed reordering, not merely narrower desktop columns.

### Hero Playback Control

**Role:** expose control over the hero's changing presentation.

A small white capsule sits below the right side of the composition. The visible label is Pause with a pause symbol, rendered in red. Both Pause and Play text are present in the DOM.

The control measures about `82 × 29px` on desktop and `70 × 25px` on mobile. It is positioned relative to the hero area, not demonstrated as a persistent bottom-screen control.

The supplied evidence supports the presence of a playback affordance and time-managed image state. It does not establish a successful pause/resume interaction, the exact image sequence, or the transition method. A new implementation should connect this control to every timer and animation participating in the hero.

### Purpose and Value Block

**Role:** explain the culture behind the visual experiment metaphor.

Purpose consists of a small red English label, a larger red Japanese statement, and several lines of medium-weight supporting copy. The mobile opening capture reveals the top of a white panel with modestly rounded corners, beginning around `y = 715px`.

The statement reads “全ての挑戦者が、生涯働きたいと思える場所をつくる”. Mobile introduces narrower line breaks, while supporting copy uses deliberate short lines rather than a dense paragraph.

The desktop DOM places the Purpose text region on the left and the Value label in a separate right-hand region, with staggered vertical positions. On mobile, both text regions share approximately `x = 40.563px` and `308.875px` width. The full surrounding artwork and Value backing surface are not visible in the original screenshot set.

Value contains three numbered items: “ワクワクを勝たせろ”, “Less is more”, and “Get things done”. The Value label is measured in white. Preserve the numbered hierarchy, but do not invent an unseen decorative treatment from that foreground color alone.

### Business Philosophy and Ecosystem Illustration

**Role:** connect the group's independent businesses to a shared management philosophy.

The statement “次世代のエゴにベットする” uses red medium-weight Japanese type. On desktop, its text region sits left of a `620px` prose column. On mobile, the statement is centered above a `308.875px` paragraph region.

The lower edge of a red illustration is visible immediately above the company section. It contains softly shaded red spheres, white labels, and thin curved lines. Only this cropped portion is available visually; the complete diagram, any labels outside the crop, and interactive behavior remain unverified.

### Bilingual Section Heading

**Role:** give each major information section a consistent entry point.

On desktop, a `40px` Japanese heading sits beside a red `18px` English subtitle, with approximately `20px` horizontal separation. The subtitle aligns low within the heading row rather than sitting above it as an eyebrow.

On mobile, the pair stacks: Japanese heading first, English subtitle below. Group Companies retains the deeper business-panel inset; News and Career align with the outer page inset.

This component should preserve the hierarchy between the two languages. The English subtitle is a supporting label, not a second heading of equal visual weight.

### Group-Company Card

**Role:** introduce a business and link to its detail page.

Each card is one anchor containing:

1. A landscape artwork panel with an approximately `400:247` ratio.
2. A white category capsule near the artwork's upper-left corner.
3. A small white circular arrow near its lower-right corner.
4. A company name below the artwork.
5. A short Japanese description below the name.

The visible artwork badges and arrow circles are inset by approximately `20px`; the circle is about `30px` across. These are screenshot estimates. The title begins approximately `20px` below the artwork, followed by a measured `10px` gap before the description.

Descriptions sit directly on the shared section surface. There is no visible raised card surrounding both image and text. Longer descriptions increase the card's height; desktop rows align to the tallest item before adding the `40px` row gap.

The DOM contains eight entries: six group companies followed by two investment entries. The final row therefore has two cards on desktop. Keep the “投資先” distinction where supplied instead of presenting every entry as an identical ownership relationship.

The first six destinations are under `/business/link/`, `/business/laskoi/`, `/business/aimy/`, `/business/artx/`, `/business/marketingx/`, and `/business/thenude/`. These hrefs are observed; their destination layouts were not inspected.

### News Card

**Role:** surface recent announcements with enough text to identify the subject.

Four news links form a two-column desktop grid and a single mobile column. Each has a measured white background and a rounded perimeter. Desktop cards use `40px` padding; mobile cards use approximately `30.141px`.

The content includes a year/month string, a separate day, the category “プレスリリース”, and an announcement title. The provided sample does not include computed styles for the individual date children, so their exact typographic scale is not established.

The cards use ordinary body-size Japanese copy at `1.7` line height. Mobile heights vary with the number of wrapped lines: the first card is about one body line taller than the other three. Preserve that content-driven behavior rather than forcing a short fixed height.

### Capsule Link Family

**Role:** provide consistent onward navigation at different levels of emphasis.

The top Contact link uses an ink capsule with white text and a rightward arrow. The recruitment Career link reverses this into a white capsule with red text and arrow. Footer Contact and social links use fine outlines on the dark surface.

Large Company, Business, News, and Career links share measured desktop dimensions of `260 × 66px`, reducing to approximately `201 × 53px` on mobile. The first three have measured white foregrounds, but their painted backing layers are not exposed in the sampled anchors or original crops. The Quick Start's ink-filled default is a recommendation, not a verified fill assignment for all three.

Repeated words such as CompanyCompany appear in extracted DOM text while the screenshots show a single label. This is consistent with layered text markup, but no particular hover animation was verified. Keep one accessible label even if a new implementation uses duplicate visual layers.

### Recruitment Panel

**Role:** turn the culture story into a clear route toward careers.

A large red panel follows the Career heading. On desktop, a broad photograph of three colleagues fills its upper portion. Oversized red “We Are” and “aisaac” lettering overlaps the photograph at opposite edges, with intentional cropping.

Below the photograph, white Japanese copy occupies a measured `620px` column at the left. A `260 × 66px` white Career capsule sits at the right, aligned with the start of the text. Pale silhouettes repeat the hero's geometric vocabulary along the bottom of the red field.

On mobile, the text becomes a narrow column with more deliberate line breaks. The Career capsule moves below the copy and centers within the panel. The lower capture shows a large, low-contrast geometric silhouette behind this area.

Keep decoration subordinate to the text and button. The strong recruitment color field is followed by about `60px` of gray canvas on mobile and `80px` on desktop before the footer.

### Footer

**Role:** finish the page with full navigation, contact, social channels, and policies.

The footer uses measured ink `#191d25` with white primary content and muted `#909399` policy/copyright text.

Desktop anatomy:

- White `119 × 34px` wordmark at the left.
- Main navigation starting around `x = 340px`.
- Outlined Contact capsule at the far right, `150 × 50px`.
- Note and X outlined links stacked beneath the logo, each `140 × 40px`, with `10px` between them.
- Policy links below the navigation and copyright aligned right.

Mobile anatomy:

- Wordmark and a `130.281 × 40.141px` Contact capsule share the first row.
- Company, Business, News, and Career spread across a separate row.
- Note and X become equal-width columns, each approximately `164.719 × 30.141px`.
- The three policy links form a centered row.
- Copyright occupies its own centered final row.

The footer grows from approximately `296px` to `445px` high. Its generous mobile separation is part of the design; it is not simply the desktop layout squeezed into fewer columns.

## Tokens — Motion & Interaction

| Treatment | Evidence | What can be reused confidently | Limitation |
| --- | --- | --- | --- |
| Shared transition duration | Source `--transition-duration: .4s` | A `400ms` timing token exists | Does not establish which properties use it |
| Mobile philosophy statement | Computed transform and opacity transitions, `0.42s cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s` | A paired transform/opacity transition with a `500ms` delay is configured | Trigger, starting transform, and observed trajectory were not supplied |
| Hero playback | Visible Pause control; Pause/Play DOM text; running/timer-related image state | Playback is an intended interface concept | Sequence, loop duration, easing, and successful toggling remain unverified |
| Header persistence | Capsule remains at the top in opening and lower-page captures | Persistent navigation and a desktop scrolled variant | Exact sticky/fixed implementation and threshold are unknown |
| Layered link labels | Duplicate DOM words, one visible label | Preserve a single readable label | Vertical rolling, sliding, or fading on hover is not demonstrated |
| Company/news links | Rendered anchor destinations | Whole-card navigation | Hover paint, image zoom, and focus treatment were not tested |
| Mobile menu | Named menu button in the closed state | Compact header with a menu affordance | Open state, focus management, dismissal, and animation are unverified |

The sampled containers often report `animation: none`. That does not establish that descendant images, scripts, or pseudo-elements are static. Conversely, different photographed or solid-filled shapes across captures do not reveal an exact animation timeline.

**Recommended motion approach:** keep the headline stationary and readable while decorative cutouts change. Use the source `400ms` token for restrained interface feedback and the documented `420ms` reveal only where appropriate. Do not prescribe a carousel direction, morphing algorithm, or loop speed as an original-site finding.

## Surfaces

| Layer | Appearance | Function |
| --- | --- | --- |
| Page canvas | Flat `#f3f3f3` | Connects sections and gives the hero breathing room |
| Floating navigation | White pill | Keeps navigation legible over photographs and colored sections |
| Business content surface | Broad white field in the company capture | Groups diverse company identities |
| Company artwork | Individual branded color/image panel | Preserves each business's visual identity |
| News card | White, `7–10px` radius | Separates announcement links on the gray canvas |
| Recruitment panel | Red field with white copy and pale geometry | Creates a distinct career invitation |
| Footer | Full-width ink field | Closes the page and organizes utility links |
| Small control | White pill or fine outlined capsule | Supports playback, categories, social links, and navigation |

There is no observed general elevation scale. Most separation comes from background changes, whitespace, image boundaries, and a few fine outlines. Avoid adding soft drop shadows to every card.

## Imagery

### People and Photography

The original captures show colleagues talking outdoors, people working together at laptops, a seated smiling person, and close views of focused work. The photographs use natural-looking color, ordinary clothing, and recognizable office or street settings. Warm interiors and green outdoor backgrounds soften the otherwise assertive red-and-ink composition.

The photographs are integrated through shape, not through a uniform color filter. Preserve skin tones and environmental color. Avoid recoloring every image red or desaturating the entire collection.

Crop decisions are important: faces and hands need to survive the narrow waists and angled boundaries. Use individual focal positions for each photograph. The wide recruitment crop is a separate composition from the small hero cutouts, even when it uses related people or imagery.

### Geometric Vocabulary

Use a small, repeated family:

- An octagon with broad diagonal corners.
- A narrow-necked flask with sloping shoulders and a wide base.
- A pinched or repeatedly waisted vertical column.
- A shield-like container ending in a lower point.
- A broad bottle-like silhouette with a short neck and angular body.

These forms alternate between photographs and flat fills. Their identity comes from silhouette and proportion rather than outline strokes. Keep the page background visible between them, and allow selected outer forms to be cropped by the hero frame.

### Company Artwork

| Visible company artwork | Observed treatment |
| --- | --- |
| Link | White wordmark on layered blue curved bands |
| Laskoi / “ラス恋” | Pink lettering on a pale pink field |
| Aimy | Pink-to-blue logo on a pale lavender-blue field |
| ArtX | White identity on an almost-black field |
| MarketingX | Dark typographic identity on a nearly white field |
| THE NUDE | Teal lettering on an almost-black field |

These descriptions come from the original company-grid capture. Exact artwork background colors, logo typefaces, and image filenames were not supplied.

### Observed Asset References

The evidence identifies visible wordmarks, photographs, company artwork, and geometric forms, but does not provide their image `src` URLs or mask files. No asset paths can therefore be documented reliably.

Use authorized assets when available. The CSS below supplies silhouette approximations and layout slots; it does not reproduce proprietary logo artwork, exact softened mask paths, or the original photographic crops.

## Layout & Responsive Behavior

### Desktop: 1440 × 1000

The page uses broad horizontal compositions with a consistent outer inset near `40px`. The hero is the exception to ordinary content containment: its decorative field intentionally extends out of view.

The company section adds another `40px` inset, producing `1280px` of inner width. Three `400px` cards plus two `40px` gaps fill that region exactly. News instead uses two `670px` cards separated by `20px` inside the `1360px` outer content width.

Purpose and Value occupy separate horizontal text regions. The business philosophy pairs a statement with prose. Recruitment pairs its final text block with a right-aligned button. These arrangements create varied rhythm without changing the core typography and capsule controls.

### Mobile: 390 × 844

The outer inset becomes approximately `20.28px`. Business content adds the inset again, giving a `308.875px` column. News retains the wider `349.438px` outer content width.

Both company and news grids become single columns. Bilingual section headings stack. Philosophy text becomes vertically ordered. Large section links reduce to approximately `201 × 53px`. The header changes to the single logo/menu capsule, while the footer reorganizes into five content rows.

The hero receives a distinct arrangement: imagery above and below, with the statement centered between. Its decorative overflow stays inside the hero rather than creating horizontal page scrolling. Purpose begins within the first mobile viewport, whereas the desktop opening capture is almost entirely occupied by the hero.

### Content Wrapping and Breakpoints

Mobile copy is intentionally rebroken in Purpose and Career. Preserve Japanese punctuation and meaningful phrase grouping. Do not simulate these breaks by scaling the entire text block down.

Only two viewport widths were inspected. No exact source breakpoint, tablet configuration, orientation behavior, or ultrawide rendering is established. The Quick Start uses `48rem` as a recommended layout switch and fluid spacing between the observed endpoints. Intermediate widths require visual review.

## Do’s and Don’ts

### Do

- Keep the measured red, light gray, and ink as the global foundation.
- Use photographs and solid colors inside the same small family of geometric silhouettes.
- Preserve the fully readable two-line hero statement when rearranging mobile imagery.
- Keep the opening desktop navigation centered independently of the left logo and right Contact link.
- Distinguish heavy hero lettering from medium-weight section headings.
- Use Japanese body copy near `1.7` line height.
- Preserve the deeper inset of the company gallery relative to the news cards.
- Keep company descriptions outside their branded artwork panels.
- Let each company retain its own logo colors and background treatment.
- Carry the hero's shapes into the recruitment decoration.
- Retain the spacious, reorganized mobile footer.
- Provide functional pause and menu behavior when implementing their controls.

### Don’t

- Don't shrink the desktop hero wholesale to fit a phone.
- Don't use the tiny alternate hero text node as the visible headline's font measurement.
- Don't turn every photo into an ordinary rounded rectangle.
- Don't apply a red tint to all photography or company identities.
- Don't add a general shadow, glass, or glossy-gradient system to the interface.
- Don't force company descriptions or news titles into clipped fixed-height boxes.
- Don't make the circular card arrow a nested button inside an already linked card.
- Don't expose duplicate animated labels to assistive technology.
- Don't infer an open mobile menu from hidden DOM link positions.
- Don't invent image filenames, hero loop timing, or specific hover effects as observed facts.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified features of the original page:

- Keep decorative hero forms out of the accessibility tree, while providing one complete readable statement and appropriate alternatives for meaningful imagery.
- Preserve the small visual menu and playback controls but enlarge their interactive areas to at least `44 × 44px` where possible.
- Implement mobile navigation with an explicit expanded state, keyboard access, predictable dismissal, and appropriate focus handling.
- Connect Pause to CSS animations and JavaScript timers together. Honor reduced-motion preferences before starting decorative playback.
- Keep content visible by default if reveal scripts fail. Add enhancement states only after the script is ready.
- Check small red labels and muted footer text for sufficient contrast at their actual sizes. Preserve the large decorative palette while adjusting small-text treatment where needed.
- Give each company card one descriptive link name; mark its arrow and duplicate logo text as decorative when redundant.
- Reserve image dimensions before loading and use responsive image sources with per-image focal positions.
- Review the 768px transition, narrow phones, text zoom, and widths above 1440px before treating the adaptation as complete.

## Agent Prompt Guide

### Quick Color Reference

- Canvas: `#f3f3f3`.
- Main text and footer: `#191d25`.
- Brand accent, large experimental shapes, and recruitment field: `#f03737`.
- Navigation, news cards, and reversed recruitment CTA: `#ffffff`.
- Muted geometric accent: `#62606c`.
- Neutral rules: source `#dddddd`.
- Footer secondary text: `#909399`.
- Company artwork: preserve individual supplied brand colors.

### Overall Prompt

“Create a Japanese corporate homepage inspired by aisaac's experimental visual language. Use a light-gray `#f3f3f3` canvas, ink `#191d25`, vivid red `#f03737`, and white surfaces. Build an oversized opening composition from candid workplace photographs and flat color blocks clipped into octagonal, flask, waisted-column, and bottle-like silhouettes. Anchor it with the two-line statement ‘世の中を、実験しよう。’. Use a centered white navigation capsule, Noto Sans JP for Japanese information, and Outfit for English labels. Follow with Purpose and Value content, a business philosophy section, a three-column company gallery, a two-column news grid, a red photographic recruitment panel, and a spacious dark footer. On mobile, place the hero statement between two cropped image bands, collapse the content grids, and reorganize the header and footer. Keep motion controllable; treat its timing as a new design decision.”

### Example Component Prompts

1. **Hero:** “Arrange natural workplace photographs and solid red/ink shapes in two oversized rows. Use flask, octagonal, and pinched silhouettes with open gray space between them. Keep the Japanese statement fully visible at lower left on desktop and centered between image bands on mobile. Let only decorative forms crop at the outer edges.”
2. **Header:** “At desktop width, place a red wordmark left, a 50px-high white pill with Company, Business, News, and Career at the true center, and a dark Contact pill right. At 390px, use a 350px-wide white capsule with a smaller wordmark and a two-line menu icon.”
3. **Company card:** “Create a single linked company entry with a 400:247 branded artwork panel, white category pill at upper left, and a small circular arrow at lower right. Below the artwork, place a medium-weight company name and a readable Japanese description. Use no card shadow. Arrange three columns with 40px gaps on desktop and one deeply inset column on mobile.”
4. **News grid:** “Use white news cards on light gray, with 10px desktop corners, 40px padding, date/category metadata, and Japanese titles at 16px with 1.7 line height. Use two columns on desktop and one on mobile, allowing the card height to follow wrapped text.”
5. **Recruitment:** “Build a broad red panel with a candid group photograph, oversized red identity lettering overlapping the image, white Japanese copy below, and a white Career capsule. Repeat pale geometric silhouettes behind the lower area. Stack the text and centered CTA on mobile.”
6. **Footer:** “Use an ink background, white wordmark and navigation, thin outlined Contact and social capsules, and muted policy links. On mobile, arrange logo/contact, navigation, two social links, policies, and copyright as generously separated rows.”

## Quick Start

### CSS Custom Properties

This is a recommended static adaptation of the measured visual system. It keeps a conventional root font size, simplifies the source spacing formulas for the inspected width range, and caps the page at 1440px. Font files, identity artwork, exact mask paths, menu behavior, and hero playback must be supplied separately.

The hero headline uses live text as an approximation because its visible source font was not established. The polygon masks have sharp internal vertices; replace them with authored paths when matching the softened source shapes precisely.

```css
:root {
  /* Source colors, exposed through semantic aliases. */
  --color-accent: #f03737;
  --color-canvas: #f3f3f3;
  --color-ink: #191d25;
  --color-surface: #fff;
  --color-rule: #ddd;
  --color-shape-muted: #62606c;
  --color-footer-muted: #909399;

  /* English-name subset of the observed Japanese fallback stack. */
  --font-ja: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN',
    'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif;
  --font-en: 'Outfit', serif;

  /* Recommended interpolation near the measured type endpoints. */
  --text-body: clamp(.9375rem, calc(.916rem + .094vw), 1rem);
  --text-section: clamp(1.75rem, calc(1.485rem + 1.13vw), 2.5rem);
  --text-company: clamp(1rem, calc(.912rem + .38vw), 1.25rem);
  --text-lead: clamp(1.04rem, calc(.958rem + .33vw), 1.25rem);
  --text-mission: clamp(1.82rem, 2.78vw, 2.5rem);
  --leading-body: 1.7;
  --leading-heading: 1.5;

  /* Source-derived spacing within the inspected width range. */
  --space-30-20: clamp(20px, calc(.939vw + 16.479px), 30px);
  --space-40-20: clamp(20px, calc(1.88vw + 12.958px), 40px);
  --space-40-30: clamp(30px, calc(.939vw + 26.479px), 40px);
  --space-60-40: clamp(40px, calc(1.88vw + 32.958px), 60px);
  --space-120-80: clamp(80px, calc(3.76vw + 65.915px), 120px);
  --gutter: var(--space-40-20);

  --page-max: 1440px;
  --radius-card: 6px;
  --radius-panel: clamp(7px, calc(.282vw + 5.944px), 10px);
  --radius-pill: 999px;

  /* Source timing; use on deliberately selected properties. */
  --motion-duration: 400ms;
  --motion-reveal-duration: 420ms;
  --motion-reveal-ease: cubic-bezier(.075, .82, .165, 1);
  --motion-reveal-delay: 500ms;
}

* { box-sizing: border-box; }

/* Apply this class to the page body. */
.aisaac-page {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-ja);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.aisaac-page img { display: block; max-width: 100%; }
.aisaac-page button { font: inherit; cursor: pointer; }
.aisaac-page a { color: inherit; }

.shell {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section + .section { margin-top: var(--space-120-80); }

.section-heading {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: var(--space-40-30);
}

.section-heading h2 {
  margin: 0;
  font-size: var(--text-section);
  font-weight: 500;
  line-height: var(--leading-heading);
}

.section-heading p {
  margin: 0;
  color: var(--color-accent);
  font: 500 18px/1.2 var(--font-en);
}

/* Persistent header; the scrolled attribute requires application logic. */
.site-header {
  position: fixed;
  z-index: 50;
  inset: 20px 0 auto;
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.header-brand { width: 119px; height: 34px; }
.header-brand img { width: 100%; height: 100%; object-fit: contain; }

.nav-pill {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 50px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font: 500 16px/1.2 var(--font-en);
}

.nav-pill a { text-decoration: none; }
.nav-home { display: none; width: 24px; height: 24px; }
.menu-toggle { display: none; }

.site-header[data-scrolled='true'] .nav-home { display: block; }
.site-header[data-scrolled='true'] .header-brand,
.site-header[data-scrolled='true'] .header-contact {
  visibility: hidden;
}

/* Ink is a recommended default for section links whose fill was unverified. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 260px;
  min-height: 66px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--color-surface);
  background: var(--color-ink);
  font: 500 17px/1.2 var(--font-en);
  text-decoration: none;
}

.button--light {
  color: var(--color-accent);
  background: var(--color-surface);
}

.button--outline {
  color: var(--color-surface);
  background: transparent;
  border-color: var(--color-shape-muted);
}

.header-contact {
  justify-self: end;
  width: 152px;
  min-height: 50px;
}

/* Static hero approximation with locally clipped decorative overflow. */
.hero {
  --tile: clamp(260px, 26.389vw, 380px);
  position: relative;
  width: 100%;
  max-width: var(--page-max);
  height: calc(240px + 2 * var(--tile));
  margin-inline: auto;
  overflow: hidden;
}

.cutout {
  position: absolute;
  top: 110px;
  width: var(--tile);
  height: var(--tile);
  overflow: hidden;
  background: var(--color-accent);
}

.cutout img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal-point, 50% 50%);
}

.cutout--1 { left: 2.778%; }
.cutout--2 { left: 29.167%; background: var(--color-ink); }
.cutout--3 {
  left: 59.444%;
  width: calc(.7 * var(--tile));
  background: var(--color-shape-muted);
}
.cutout--4 { left: 85.139%; background: var(--color-ink); }
.cutout--5 {
  top: calc(160px + var(--tile));
  left: 51.25%;
  width: calc(.8 * var(--tile));
}
.cutout--6 {
  top: calc(160px + var(--tile));
  left: 77.014%;
  background: var(--color-shape-muted);
}

.shape-octagon {
  clip-path: polygon(34% 0, 66% 0, 100% 34%, 100% 66%,
    66% 100%, 34% 100%, 0 66%, 0 34%);
}

.shape-flask {
  clip-path: polygon(35% 0, 65% 0, 65% 20%, 100% 85%,
    88% 100%, 12% 100%, 0 85%, 35% 20%);
}

.shape-waisted {
  clip-path: polygon(0 0, 100% 0, 100% 10%, 87% 30%,
    100% 50%, 87% 70%, 100% 90%, 100% 100%,
    0 100%, 0 90%, 13% 70%, 0 50%, 13% 30%, 0 10%);
}

.shape-shield {
  clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%);
}

.shape-bottle {
  clip-path: polygon(36% 0, 64% 0, 64% 12%, 88% 20%,
    100% 53%, 88% 87%, 50% 100%, 12% 87%,
    0 53%, 12% 20%, 36% 12%);
}

.hero-title {
  position: absolute;
  z-index: 1;
  top: calc(160px + var(--tile));
  left: 5.556%;
  margin: 0;
  font-size: clamp(56px, 6.945vw, 100px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.04em;
}

/* Render this only when a working playback controller is connected. */
.hero-pause {
  position: absolute;
  top: calc(160px + 2 * var(--tile));
  right: 20px;
  width: 82px;
  min-height: 29px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  background: var(--color-surface);
  font: 500 12px/1.2 var(--font-en);
}

.purpose-card,
.business-surface {
  padding: var(--gutter);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.eyebrow {
  margin: 0 0 24px;
  color: var(--color-accent);
  font: 500 16px/1.2 var(--font-en);
}

.mission {
  margin: 0 0 24px;
  color: var(--color-accent);
  font-size: var(--text-mission);
  font-weight: 500;
  line-height: 1.5;
}

.lead {
  margin: 0;
  font-size: var(--text-lead);
  font-weight: 500;
  line-height: 1.7;
}

/* Place business-surface inside shell to create the deeper card inset. */
.company-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 40px;
}

.company-link {
  display: grid;
  gap: 20px;
  min-width: 0;
  border-radius: var(--radius-card);
  text-decoration: none;
}

.brand-tile {
  position: relative;
  aspect-ratio: 400 / 247;
  overflow: hidden;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--brand-surface, var(--color-surface));
}

/* Supply complete branded artwork, including its intended background. */
.brand-tile > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.category-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 5px 15px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  background: var(--color-surface);
  font-size: 11px;
  line-height: 1.4;
}

.card-arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-rule);
  border-radius: 50%;
  color: var(--color-accent);
  background: var(--color-surface);
}

.company-copy h3 {
  margin: 0;
  font-size: var(--text-company);
  font-weight: 500;
  line-height: 1.7;
}

.company-copy p { margin: 10px 0 0; }

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  min-height: 256px;
  padding: var(--space-40-30);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  text-decoration: none;
}

.news-meta { display: flex; align-items: baseline; gap: 20px; }
.news-meta time { font-family: var(--font-en); }
.news-card p { margin: 0; }

.career-panel {
  padding: 20px 20px 0;
  overflow: hidden;
  border-radius: var(--radius-panel);
  color: var(--color-surface);
  background: var(--color-accent);
}

.career-visual { position: relative; }
.career-photo {
  width: 100%;
  aspect-ratio: 3 / 1;
  border-radius: var(--radius-card);
  object-fit: cover;
  object-position: var(--career-focal-point, 50% 50%);
}

.career-body {
  display: grid;
  grid-template-columns: minmax(0, 620px) auto;
  justify-content: space-between;
  align-items: start;
  gap: 40px;
  padding: 40px 20px 60px;
}

.career-body p { margin: 0; }
.career-body .button { justify-self: end; }

.site-footer {
  margin-top: 80px;
  padding-block: 40px;
  color: var(--color-surface);
  background: var(--color-ink);
  font-family: var(--font-en);
}

.footer-inner {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 150px;
  align-items: center;
  gap: 30px 40px;
}

.footer-brand { grid-area: 1 / 1; width: 119px; height: 34px; }
.footer-nav { grid-area: 1 / 2; display: flex; gap: 30px; }
.footer-nav a, .footer-policies a { text-decoration: none; }
.footer-contact { grid-area: 1 / 3; width: 150px; min-height: 50px; }

.footer-social {
  grid-area: 2 / 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-social .button {
  width: 140px;
  min-height: 40px;
  padding-inline: 20px;
  font-size: 13px;
}

.footer-policies {
  grid-area: 3 / 2;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  color: var(--color-footer-muted);
  font-size: 13px;
  line-height: 1.2;
}

.footer-copyright {
  grid-area: 3 / 3;
  justify-self: end;
  margin: 0;
  color: var(--color-footer-muted);
  font-size: 13px;
  line-height: 1.2;
}

/* Recommended breakpoint; the source threshold was not provided. */
@media (max-width: 48rem) {
  :root { --leading-heading: 1.4; }

  .section-heading { flex-direction: column; gap: 5px; }
  .section-heading p { font-size: 16px; }

  .header-inner {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 40px);
    min-height: 50px;
    padding-inline: 15px;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
  }

  .header-brand { width: 85.5px; height: 24.14px; }
  .nav-pill, .header-contact { display: none; }
  .site-header[data-scrolled='true'] .header-brand { visibility: visible; }

  /* Larger recommended hit area around the small visual icon. */
  .menu-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -7px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--color-ink);
    background: transparent;
  }

  .button {
    width: 200.86px;
    min-height: 53.22px;
    padding-inline: 20px;
    font-size: 15.04px;
  }

  .hero {
    --tile: min(42.667vw, 220px);
    height: calc(382px + 2 * var(--tile));
  }

  .cutout { top: 104px; }
  .cutout--1 { left: calc(50% - 249px); }
  .cutout--2 { left: calc(50% - 83px); }
  .cutout--3 { left: calc(50% + 109px); }
  .cutout--4 {
    top: calc(302px + var(--tile));
    left: calc(50% - 262px);
  }
  .cutout--5 {
    top: calc(302px + var(--tile));
    left: calc(50% - 59px);
  }
  .cutout--6 {
    top: calc(302px + var(--tile));
    left: calc(50% + 96px);
  }

  .hero-title {
    top: calc(134px + var(--tile));
    right: 20px;
    left: 20px;
    font-size: clamp(44px, 13.333vw, 52px);
    line-height: 1.25;
    text-align: center;
  }

  .hero-pause {
    top: calc(302px + 2 * var(--tile));
    width: 70px;
    min-height: 25px;
    font-size: 11px;
  }

  .mission { line-height: 1.4; }
  .company-grid { grid-template-columns: 1fr; gap: var(--space-40-30); }
  .news-grid { grid-template-columns: 1fr; gap: var(--gutter); }
  .news-card { min-height: 259px; }

  .career-panel { padding: var(--gutter) var(--gutter) 0; }
  .career-photo { aspect-ratio: 3 / 2; }
  .career-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-40-30);
    padding: 30px 0 var(--space-60-40);
  }
  .career-body .button { align-self: center; }

  .site-footer { margin-top: 60.29px; padding-block: 60px; }
  .footer-inner { grid-template-columns: 1fr auto; gap: 0 20px; }
  .footer-brand { grid-area: 1 / 1; }
  .footer-contact {
    grid-area: 1 / 2;
    width: 130.28px;
    min-height: 40.14px;
  }
  .footer-nav {
    grid-area: 2 / 1 / 3 / -1;
    justify-content: space-between;
    gap: 12px;
    margin-block: 60px;
    font-size: 14px;
    line-height: 1.2;
  }
  .footer-social {
    grid-area: 3 / 1 / 4 / -1;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 30px;
  }
  .footer-social .button {
    flex: 1;
    width: auto;
    min-height: 30.14px;
    padding-inline: 15px;
    font-size: 12px;
  }
  .footer-policies {
    grid-area: 4 / 1 / 5 / -1;
    justify-content: center;
    margin-bottom: 60px;
    font-size: 12px;
  }
  .footer-copyright {
    grid-area: 5 / 1 / 6 / -1;
    justify-self: center;
    font-size: 12px;
  }
}

/* Recommended feedback, not a verified original hover treatment. */
.button .arrow { transition: transform var(--motion-duration) ease; }
@media (hover: hover) {
  .button:hover .arrow { transform: translateX(4px); }
}

.aisaac-page :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .aisaac-page *,
  .aisaac-page *::before,
  .aisaac-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  /* JavaScript image timers must also honor this preference. */
}
```

**Structure contract:** apply `.aisaac-page` to the body. Use `.hero` with one `.hero-title`, six numbered `.cutout` elements, and a mask class on each cutout. Add authorized photographs as image children where appropriate. Use `.shell > .business-surface > .company-grid` for the deeply inset company section; each `.company-link` contains `.brand-tile` and `.company-copy`. News uses `.shell > .news-grid` without the extra business inset.

Keep `.card-arrow` decorative inside the card anchor. Place the recruitment lettering and pale silhouettes as additional positioned artwork layers; their exact source asset geometry is intentionally not fabricated here. Add playback and menu controls only alongside their working behavior.

### Tailwind v4 Token Mapping

Optional aliases for an implementation already using Tailwind v4. This is not evidence that the original website uses Tailwind. Define the custom properties above first.

```css
@theme inline {
  --color-aisaac-red: var(--color-accent);
  --color-aisaac-canvas: var(--color-canvas);
  --color-aisaac-ink: var(--color-ink);
  --color-aisaac-surface: var(--color-surface);
  --color-aisaac-rule: var(--color-rule);
  --color-aisaac-muted: var(--color-footer-muted);

  --font-japanese: var(--font-ja);
  --font-english: var(--font-en);

  --text-aisaac-body: var(--text-body);
  --text-aisaac-heading: var(--text-section);
  --text-aisaac-company: var(--text-company);

  --spacing-aisaac-gutter: var(--gutter);
  --spacing-aisaac-section: var(--space-120-80);
  --radius-aisaac-card: var(--radius-card);
  --radius-aisaac-panel: var(--radius-panel);
}
```

## Sources & Evidence

- **Inspected original and final page:** [aisaac homepage](https://aisaac.jp/). The supplied browser observation reports HTTP `200` with the original and final URLs identical.
- **Capture timestamp:** `2026-09-12T14:59:23.070Z`, corresponding to September 12, 2026 at 23:59:23 JST.
- **Desktop evidence:** three original `1440 × 1000` captures covering the opening hero, group-company area, and recruitment/footer, plus rendered text, links, element rectangles, computed typography, colors, and root custom properties. Measured document height was approximately `6809.594px`.
- **Mobile evidence:** two original `390 × 844` captures covering the opening and recruitment/footer, plus the equivalent full-page DOM/style measurements. Measured document height was approximately `8657.047px`.
- **Observed state:** closed mobile navigation, visible Pause control, primary and footer links, and navigation that remains at the top in lower-page captures. No click, hover, menu-open, or pause/resume test result was supplied.
- **Capture limitations:** the supplied process observed the initial page for at least five seconds and waited for loading, finite animation, layout/text stability, and image decoding within bounded limits. Perpetual animations were temporarily paused during readiness checks and then resumed. These measures do not establish natural animation timing, complete delayed content, or unexercised interaction behavior.
- **Analysis limitations:** no additional browsing, command execution, or file inspection was performed. Asset URLs, exact hero graphic typography, full mask paths, intermediate breakpoints, and complete animation behavior remain unverified. The CSS and optional framework mapping are implementation guidance, not extracted production source.