# GLOBAL WORK / Happy Nyanco Day 2026 — Style Reference

> A slender cat-filled scrapbook, printed in blue on butter-yellow paper, with a white product catalog running through its middle.

**Website:** [GLOBAL WORK — Happy Nyanco Day 2026](https://www.globalwork.jp/women/happy_nyanco_day_2026/)
**Original URL:** https://www.globalwork.jp/women/happy_nyanco_day_2026/
**Final URL:** https://www.globalwork.jp/women/happy_nyanco_day_2026/
**Theme:** one observed light palette: cream yellow, deep blue, white, and small bright accents.
**Inspected:** September 12, 2026. Supplied browser evidence retrieved at 08:01:54.951 UTC / 17:01:54.951 JST.
**Viewports:** desktop 1440 × 1000 and mobile 390 × 844 CSS pixels.
**Scope:** the current campaign feature on the original brand website: opening composition, introduction, cat survey, collaboration overview, product stories, cat comments, profile and contest content recorded in the DOM, and closing/footer compositions. Three desktop captures show the opening, a product section, and the footer; two mobile captures show the opening and footer.

The page combines editorial entertainment with shopping links. A survey of staff members’ cats, individual cat commentary, collaboration merchandise, and contest results share one long reading sequence. The supplied session displays the **ENGLISH** language state, with Japanese lettering retained in parts of the campaign artwork. Japanese-mode body typesetting was not separately captured.

The defining desktop structure is a **430px central column between two 505px side regions**. The left region carries brand identity and an Instagram invitation. The right region carries illustrated section shortcuts and an All Items link. These side compositions remain visually stationary across the supplied desktop scroll positions. The central story changes from cream to white and back while the surrounding cream field stays constant.

Real cat photographs provide expression and surprise. Blue fish silhouettes, cat-shaped symbols, dotted rules, clipped corners, and pink dots turn those photographs into a playful collage. Merchandise receives large, clear photographs and small purchase labels; the cats act as companions and commentators throughout the catalog.

## How to Read This Reference

- **Measured** means a value appears in the supplied rendered DOM, computed-style records, or element rectangles. Values are rounded for readability where appropriate.
- **Visual estimate** means a dimension, color, or shape is estimated from the original-page captures. No pixel-sampling tool was used.
- **Derived** means a relationship is calculated from measurements. It does not establish the original CSS formula.
- **Recommended** means an implementation choice for a new build, including the CSS and responsive breakpoint below.
- Token names are descriptive aliases. They are not claimed to be original source variables.
- The screenshots establish appearance at particular moments. A transition declaration establishes available styling, but does not establish its trigger or a successfully tested interaction.
- The desktop opening image contains a blank cream area below the first dotted rule, although the DOM locates introduction paragraphs there and the mobile opening visibly shows them. Its cause is unverified; do not reproduce that blank capture region as an intentional permanent spacer.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Cream Paper | `#fff9d1` | `--color-paper` | Measured background of the Cat’s ISSUE information panel. Visually consistent with the large cream canvas, hero, and desktop side regions; those canvas elements were not separately sampled. |
| Campaign Blue | `#1f2e98` | `--color-ink` | Measured `rgb(31, 46, 152)` on body copy, navigation labels, product information, and many headings. The visual reference for blue rules and symbols. |
| Catalog White | `#ffffff` | `--color-white` | Measured collaboration-section background and Instagram link text. Also visibly used in the footer and outlined shopping button. |
| Text Black | `#000000` | `--color-black` | Measured survey explanation text; visibly present in brand marks and footer details. |
| Comment Gray | Approximately `#eeeeee` | `--color-comment` | Visual estimate of the rounded cat-comment speech bubble. |
| Dot Pink | Approximately `#ff2fa8` | `--color-pink` | Visual estimate of the hero’s tiny dots, date pin, and small decorative marks. |
| Buy Yellow | Approximately `#f5e622` | `--color-buy` | Visual estimate of the small BUY capsule in the product capture. |
| Push Coral | Approximately `#f5646b` | `--color-push` | Visual estimate of the top of the illustrated PUSH ME button; its sides use a darker red. |

Blue and cream create the identity. White introduces the shopping chapter without widening the column. Pink belongs to decorative artwork; yellow gives a compact purchase label a distinct signal. The coral button is a localized playful object, rather than a general action color.

The supplied anchor records often report transparent backgrounds and zero border radius even when the screenshot shows a filled, clipped-corner button. Its visible geometry may come from descendants, pseudo-elements, or artwork. Use the screenshot to identify the shape, and do not interpret the anchor’s transparent background as the final surface color.

The exported `--swiper-theme-color: #007aff` is a library preset, not evidence that bright system blue belongs in this page’s visible palette.

### Theme Presets

Only the light appearance above is evidenced. No alternate theme or color-mode selector was supplied. The visible ENGLISH utility indicates the captured language state; its switching behavior and provider were not established.

## Tokens — Typography

### Body and Japanese-Capable Interface Text

**Measured source stack:** `Zen Kaku Gothic New`, `Hiragino Kaku Gothic ProN`, `Hiragino Sans`, `Helvetica Neue`, `Arial`, `Meiryo`, `sans-serif`.

The default measured weight is **500**. Navigation and survey summary statements use **700**. This gives the small text enough firmness to sit beside busy photographic cutouts and thin decorative rules.

Paragraphs are often centered and deliberately broken into short lines. The introduction uses nearly double line spacing. Cat comments use a tighter, conversational rhythm inside speech bubbles.

### Latin Labels and Product Details

**Measured source family:** `Outfit, sans-serif`.

Outfit appears on collaboration captions, CAT REPORT, the About heading, the novelty-giveaway heading, product names, prices, and small Cat’s comment labels. Most examples use weight **500**; the About heading uses **600**, and the giveaway heading uses **700**.

Tracking commonly ranges from **0.04em to 0.08em**. Product information uses **0.07em**. These small, spaced labels provide a more orderly counterpoint to the scattered hero lettering.

### Campaign Lettering and Logos

The opening Happy Nyanco Day lettering is an artwork composition: italic-looking blue Latin words stagger across three lines, with small cat details between them. The inspected `h1` has no extracted text and a measured artwork-sized box. Its inherited 5.2–5.73px computed font size is **not** the size of the visible lettering.

Preserve the supplied campaign title and brand marks as artwork when available. The exact font used to draw their lettering is not established by the evidence. A live-text substitute would be an adaptation, not a verified font match.

### Type Scale

The source root is measured at **5.73333px on desktop** and **5.2px on mobile**. In this reference, **1u means one measured source root unit**, rather than a conventional 16px rem.

| Role | Family / weight | Desktop size / line height | Mobile size / line height | Tracking |
| --- | --- | --- | --- | --- |
| Introduction | Zen Kaku Gothic New / 500 | `16.05 / 30.96px` | `14.56 / 28.08px` | Normal |
| Section-navigation label | Zen Kaku Gothic New / 700 | `13.83 / 21.24px` | `14.56 / 22.36px` | Normal |
| Survey result label | Zen Kaku Gothic New / 500 | `13.76 / 15.82px` | `12.48 / 14.35px` | Normal |
| Survey summary | Zen Kaku Gothic New / 700 | `17.2 / 29.24px` | `15.6 / 26.52px` | Normal |
| Survey explanation | Zen Kaku Gothic New / 500 | `14.91 / 29.24px` | `13.52 / 26.52px` | Normal |
| CAT REPORT | Outfit / 500 | `11.47 / 11.47px` | `10.4 / 10.4px` | `0.04em` |
| About heading | Outfit / 600 | `14.33 / 16.48px` | `13 / 14.95px` | `0.06em` |
| About paragraph | Zen Kaku Gothic New / 500 | `14.33 / 26.95px` | `13 / 24.44px` | Normal |
| Novelty Giveaway heading | Outfit / 700 | `25.8 / 25.8px` | `23.4 / 23.4px` | `0.08em` |
| Product name and price | Outfit / 500 | `15.48 / 22.19px` | `14.04 / 20.12px` | `0.07em` |
| Product collaboration caption | Outfit / 500 | `12.04 / 12.04px` | `10.92 / 10.92px` | `0.07em` |
| Cat’s comment ticker label | Outfit / 500 | `10.32 / 11.87px` | `9.36 / 10.76px` | `0.07em` |
| Ticker sentence | Zen Kaku Gothic New / 500 | `13.19 / 15.16px` | `11.96 / 13.75px` | Normal |
| Cat name | Zen Kaku Gothic New / 500 | `11.47 / 13.19px` | `10.4 / 11.96px` | Normal |
| Active speech-bubble text | Zen Kaku Gothic New / 500 | `15.48 / 25.01px` | `14.04 / 22.68px` | Normal |

The navigation is an important exception to uniform scaling: its mobile text is larger than the desktop sidebar text. Do not scale the entire desktop composition as a single image.

## Tokens — Spacing & Shapes

**Density:** generous vertical storytelling around compact text, small symbols, and narrow controls.

### Responsive Unit

The two measured root sizes match the central content width divided by 75:

- Desktop: `430 / 75 = 5.73333px`.
- Mobile: `390 / 75 = 5.2px`.

This is a **derived relationship**, not a retrieved source declaration. The Quick Start uses `--u: calc(var(--strip-width) / 75)` to reproduce the sampled sizes while keeping the document root conventional.

### Spacing Scale

| Use | Measured or derived amount | Desktop | Mobile |
| --- | --- | --- | --- |
| Hero-title horizontal inset | Approximately `4.4u` | `25.23px` | `22.88px` |
| Introduction top padding | `7u` | `40.13px` | `36.4px` |
| Introduction bottom padding | `6u` | `34.4px` | `31.2px` |
| Survey top padding | `12u` | `68.8px` | `62.4px` |
| Survey bottom padding | `10.5u` | `60.2px` | `54.6px` |
| About-panel top padding | `12u` | `68.8px` | `62.4px` |
| About-panel bottom padding | `9.9u` | `56.76px` | `51.48px` |
| Common product-caption left inset | Approximately `6u` | `34.39px` | `31.19px` |
| Cat-name column left inset | Approximately `4u` | `22.92px` | `20.80px` |

These are repeated relationships, not a claim that every margin follows a single spacing scale. The hero collage and product photographs use individually composed placements.

### Border Radius

| Element | Observed shape | Implementation guidance |
| --- | --- | --- |
| Instagram and All Items buttons | Rectangles with four clipped corners | Use a polygon or supplied vector outline; a rounded rectangle changes the character. |
| Hero frame | Wide ten-sided polygon | Preserve the horizontal top and bottom edges, angled shoulders, and pointed side middles. |
| Comment ticker | Thin elongated frame with clipped corners | Keep its height close to one line of text. |
| Comment bubble | Rounded rectangle with a left-pointing tail | Radius is visually about `12px` on desktop; exact CSS was not supplied. |
| BUY marker | Small capsule | Use a fully rounded end treatment, confined to this small label. |
| Section arrows | Small blue circles | Preserve the small visible symbol while providing a larger recommended hit area. |
| Cat’s ISSUE information panel | Square-cornered panel | Measured radius `0`. |
| Date and speech labels | Outlined paper-like shapes | Preserve the slight rotation and irregular silhouettes. |

### Layout Measurements

| Element | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Central story width | `430px`, x = `505px` | `390px`, x = `0px` | Measured section rectangles |
| Each desktop side region | `505px` | Absent as side regions | Derived from viewport and story edges; visually confirmed |
| Header height | `80.27px` | `72.80px` | Measured; desktop header element spans the center and right region |
| Hero-title box | `379.53 × 128.5px` | `344.23 × 116.55px` | Measured `h1` bounds |
| Hero polygon | Approximately `330 × 246px` | Approximately `300 × 223px` | Visual estimate |
| Desktop brand link | `95 × 55.66px`, x = `35px`, y = `29px` | Not present in the opening corner | Measured desktop link; mobile capture |
| Sidebar Instagram button | `258 × 58.47px` | Sidebar version absent | Measured |
| Sidebar All Items button | `258 × 58.47px` | Sidebar version absent | Measured |
| Survey See more button | `266.02 × 58.47px` | `241.27 × 53.03px` | Measured |
| Store-list button | `321.06 × 58.47px` | `291.19 × 53.03px` | Measured |
| About-panel width | `332.53px` | `301.59px` | Measured, approximately `58u` |
| Active comment text width | `246.58px` | `223.64px` | Measured |

## Components

### Desktop Brand and Social Rail

**Role:** maintain campaign identity and a social destination while the reader explores the long central story.

The upper-left GLOBAL WORK logo is separate from the vertically centered campaign invitation. Its measured link starts 35px from the left and 29px from the top. The original black wordmark, blue symbol, and small Live together line remain intact.

The central social group contains, in order:

1. A small February 22 date line.
2. The Happy Nyanco Day campaign lettering.
3. A floating cat-head photograph.
4. A short keyword sentence.
5. A large blue Instagram link.
6. A two-line hashtag invitation in smaller type.

The Instagram link is a **258 × 58.47px clipped-corner shape**, with a white Instagram symbol at left, centered text, and a northeast arrow at right. A pale, hard offset shadow is visible below and to the right; its offset is visually about 5px.

The keyword sentence uses 14px text and 0.04em tracking. The helper text below the button uses 12px text, about 17.14px line height, and the same tracking ratio.

A reclining black cat photograph crosses the lower-right edge of this side region and is cropped where the central story begins. This edge placement helps the composition feel inhabited. It is a photographic cutout, even though the dark fur reads almost as a silhouette.

The rail stays in the same visible position in all three desktop captures. Fixed positioning is a suitable reproduction strategy; the supplied records do not include its actual `position` declaration.

### Illustrated Section Navigation

**Role:** provide persistent access to the major chapters and the merchandise list.

The desktop navigation occupies a visually estimated **285px-wide group** in the right region. Its upper row has two illustrated shortcuts: a cat survey and collaboration items. Each combines a small angular speech label, cat or product imagery, a centered label, and a blue circular downward arrow.

Two wider rows follow: staff cat profiles and the photo contest. Each row has a tiny blue animal symbol at left, a two-line label, and a circular arrow at right. Fine dotted blue rules separate the rows; their visible vertical pitch is approximately 91px.

The All Items area sits below another generous gap. It has a small collaboration caption and a white, blue-outlined clipped-corner link. A product thumbnail occupies the left slot and a basket symbol the right. The measured destination is the brand’s merchandise-list page on `dot-st.com`.

On mobile, the same chapter labels appear in the document flow after the introduction, rather than remaining as a side column. The DOM places the first pair of labels around y = 1373px. The opened mobile menu was not captured, so its contents and transition should not be inferred from the sidebar alone.

### Campaign Header and Mobile Utilities

**Role:** identify the collaboration and keep compact navigation affordances available.

The visible header row uses a blue fish symbol at left, the Cat’s ISSUE × GLOBAL WORK caption near the center, and a blue cat-shaped symbol at right. On mobile, the right symbol contains white hamburger lines and has a visible footprint of roughly 38 × 30px.

The fish and cat-shaped menu symbol remain near the top in the mobile footer capture. The collaboration caption is no longer visible there. This supports persistent icon controls, without establishing that the complete header row is sticky.

A small white ENGLISH utility with a downward triangle sits at the upper-right edge. Its open state, available options, and switching behavior were not exercised in the supplied evidence.

### Opening Cat Collage

**Role:** establish the campaign immediately through typography, cat expressions, and small merchandise previews.

The composition has six recognizable layers:

1. Staggered Happy Nyanco Day title artwork.
2. A narrow tilted date tag reading `2月22日!!`, with a pink pin.
3. A blue-outlined, ten-sided frame filled with staggered pink dots.
4. Large cat-head photographs inside the frame, including partially cropped neighbors at either side.
5. Additional cat cutouts and narrow vertical Japanese lettering around the frame.
6. The bold `#グローバルニャーク!!` line above a horizontal band of miniature product cutouts.

The primary frame occupies about **77% of the story width**. The large central face is the focal point; surrounding heads are deliberately clipped. Keep the natural fur edges and the individuality of the photographs.

Blue fish and cat silhouettes provide graphic punctuation. The dot field is sparse enough to remain visible around the faces. Merchandise thumbnails form a continuous-looking band that clips at the column edges. A dotted blue rule closes the opening composition at y = 677.42px on desktop and y = 614.39px on mobile.

Different current captures show different cat and product imagery. This supports variation in the rendered compositions, but does not establish a specific autoplay sequence, direction, or duration.

### Introduction

**Role:** explain Cat Day, the collaboration, and the participation of approximately 100 staff members’ cats.

The introduction continues on cream. Text is centered across the story width, with short lines and unusually generous leading: **30.96px at 16.05px type on desktop**, and **28.08px at 14.56px type on mobile**.

Separate paragraphs leave clear pauses between the date explanation, the staff-cat invitation, and the campaign hashtag. The mobile introduction also accommodates the section-navigation group, making it substantially taller than the desktop introduction.

The supplied text includes a Pet me~ invitation, but no resulting interaction was recorded. Preserve the distinction between visible playful copy and verified behavior.

### Cat Survey

**Role:** make the staff-cat theme into editorial content before the merchandise chapter.

This section is supported by DOM measurements and text; its complete chart artwork is not visible in the supplied screenshots.

The measured structure includes a small Outfit CAT REPORT label, a large heading region, an angled survey callout, question blocks, result labels and percentages, blue summary statements, black explanatory paragraphs, and a See more button.

The first question’s container measures **326.80 × 95.38px on desktop** and **296.39 × 86.5px on mobile**, with a flex layout for the question prefix and text. Breed labels occupy a broad left region and percentages a narrow right region. Recorded examples include Mixed at 24.7% and Scottish Fold at 15.7%.

The mobile text also records a second question with Boy at 52.9% and Girl at 47.1%. The evidence does not establish whether these results are drawn as bars, circles, or another graphic form; do not invent a chart type.

Blue summary text is bold and slightly larger than the following black explanation. This is a meaningful hierarchy change within a predominantly blue interface. The See more button is a real button in the DOM, but its expansion result was not supplied.

### Collaboration Overview and Information Panel

**Role:** introduce the merchandise collaboration and give supporting project information.

The shopping chapter switches the central column to measured white at approximately **y = 3824px on desktop** and **y = 3993px on mobile**. The surrounding desktop canvas remains cream.

Before the product stories, the DOM records the collaboration heading, explanatory paragraphs, a store-list link, an About panel, and a novelty-giveaway section.

The About panel brings cream back inside the white chapter. Its measured width is **332.53px desktop / 301.59px mobile**, or approximately 77.3% of the story width. It has square corners, generous top and bottom padding, a small Outfit heading, an image region, and a narrower paragraph column. The paragraph width is **271.75px desktop / 246.47px mobile**.

The panel includes links to the Cat’s ISSUE website and Instagram account. These establish the collaboration partner within the page; they are not website-production credits.

The novelty heading is a comparatively prominent live-text heading: Outfit 700 at **25.8px desktop / 23.4px mobile**, with 0.08em tracking. The recorded copy explains the purchase-linked pouch giveaway and its limited quantities. Availability was not tested.

### Product Story

**Role:** give each item a small editorial feature with a direct shopping destination.

The DOM contains six product categories: shirt, umbrella, bag, pouch, key charm, and tops and pants. The captured pouch story is labeled **item 04**.

The visible anatomy is:

1. A fine dotted divider inset from the column edges.
2. A small collaboration caption at upper left.
3. A large, slanted item-number graphic at upper right.
4. A generous product photograph.
5. A compact product-name and price group with a yellow BUY capsule.
6. A thin Cat’s comment ticker.
7. A cat portrait, speech bubble, and small face selectors.

The pouch photograph shows black and silver padded products with visible embossed cat details, yellow fabric tags, and natural cast shadows. Those shadows belong to the product image. The surrounding white section does not use a raised card surface.

Product names and prices use Outfit 500 at **15.48px desktop / 14.04px mobile**, with 0.07em tracking. In the pouch entry the purchase block is aligned to the right: its desktop link starts at x = 696.78px, approximately 191.78px into the story column. Other measured entries place purchase text near the common 34.4px left inset.

The visible BUY capsule is approximately **48 × 18px**, estimated from the product capture. It is a small accent within the larger product link, not the entire interaction target. The recorded pouch link leads to item `636180` on the brand’s `dot-st.com` store.

### PUSH ME Object

**Role:** introduce a tactile, playful interruption within the pouch story.

A small illustrated red push button sits to the left of the pouch purchase information. Its top is an ellipse, its darker side gives it depth, and a flat gray oval forms the ground shadow. The small PUSH ME caption and two short decorative strokes sit above it.

This object has a different visual language from the clipped-corner navigation links, but remains small enough to feel like a toy within the catalog. The evidence does not show what pressing it does. Sound, product transformation, animation, or other feedback must remain unverified.

### Cat Comment Ticker

**Role:** connect merchandise information with the campaign’s cat voices.

A narrow blue outlined strip with clipped corners holds a repeating Cat’s comment label, tiny cat symbols, and a sentence. Its visible desktop size is approximately **376 × 28px**.

The label uses Outfit at 10.32px with 0.07em tracking; the sentence uses Zen Kaku Gothic New at 13.19px. On mobile those sizes become 9.36px and 11.96px.

The DOM records repeated copies extending outside the story column. Together with the clipped screenshot, this supports a ticker-like track structure. Its movement speed, direction, and pause behavior were not measured. A static clipped strip is sufficient for a first visual implementation; a moving version needs explicit accessible handling.

### Cat Comment and Face Selectors

**Role:** present a product benefit as a short statement from a named cat.

A small cutout portrait and centered name occupy the left column. A light-gray bubble occupies the right, with a triangular tail pointing toward the cat. The active text column measures **246.58px on desktop** and **223.64px on mobile**.

The desktop bubble in the product capture is visually about **287px wide and 80px tall**, with approximately 12px corner rounding. The active comment uses 15.48px type and 25.01px leading. The cat’s name is much smaller, at 11.47px.

Three miniature cat faces sit below the comment area. The first has a blue underline; the other two have pale-gray underlines. The DOM contains three named comments per product and offscreen alternatives. This supports a carousel-like presentation, but the supplied evidence does not verify whether it changes by click, swipe, autoplay, or a combination.

Maintain the generous white interval around this small control group. It separates each product story more effectively than adding another enclosing card.

### Profiles, Contest Results, and Social Content

**Role:** extend the campaign from merchandise into the staff and visitor cat community.

The DOM records a section introducing profiles of approximately 100 staff members’ cats. It also records scroll and, on mobile, Stop! text. The profile arrangement and any stop-control behavior are not visible in the supplied captures.

The current contest copy says **Results announced!!!** and identifies five Special Award winners with Instagram links. This is a results state in the captured page. A new implementation of this reference should not replace it with an invented active-entry form.

Further copy invites visitors to explore the campaign hashtag and describes a special collaboration movie available on Instagram. Detailed profile cards, winner-image layouts, and embedded video behavior cannot be reconstructed from the supplied text alone.

### Closing Campaign Composition and Footer

**Role:** return to the campaign identity, then hand the visitor back to the main brand and store.

The closing cream composition repeats the staggered title, date tag, pink-dot polygon, fish symbol, and campaign hashtag. In the supplied closing captures the polygon contains a much smaller cat than the opening hero. Its exact movement and sequencing are unverified.

The footer switches to white and uses black details. Its stack contains:

1. The GLOBAL WORK logo and Live together line.
2. A horizontal rule.
3. Four social symbols: Instagram, LINE, Facebook, and X.
4. A second horizontal rule.
5. A circular and ST store mark.
6. The OFFICIAL WEB STORE label.
7. A thin upward-arrow affordance.
8. The copyright line.

The rules are visually about **376px wide on desktop** and **342px on mobile**, leaving proportional side insets. The footer stays within the story column on desktop and fills the screen width on the captured phone.

The original-page text states: `Copyright © Adastria Co., Ltd. All rights reserved.` The upward arrow suggests a return-to-top action, but that action was not tested.

## Tokens — Motion & Interaction

| Treatment | Supplied evidence | What can be concluded |
| --- | --- | --- |
| Section-navigation labels | `0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)` | A short transition with an overshooting curve is defined. Changed properties and interaction endpoints were not supplied. |
| All Items, See more, store-list controls | `color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1)` | A 200ms text-color transition is defined. The destination color and hover appearance were not captured. |
| Active cat-comment text | `opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s` | A delayed opacity transition is defined for the active comment. It does not establish the carousel’s full timing. |
| Mobile survey heading | `opacity 0.1s cubic-bezier(0.39, 0.575, 0.565, 1)` and `transform 0.6s cubic-bezier(0.19, 1, 0.22, 1)` | Reveal-like styling is present. Trigger, displacement, and replay rules are unknown. |
| Cat and merchandise variations | Different original-page captures show different imagery | Variation is visible; no playback sequence or duration can be measured from these stills. |
| Comment ticker | Repeated off-column text and a clipped visible strip | A track structure is supported; continuous movement is not directly timed. |
| Desktop side compositions | Same viewport placement at opening, product, and footer positions | Persistent visual positioning is supported. Exact source positioning rules are unavailable. |
| Menu, See more, PUSH ME, Stop!, language utility | Labels or controls exist | Open states and action results were not supplied. |

Many sampled elements report `animation: none`. This does not establish that the entire page is static: animated descendants, artwork, script-driven changes, and controls outside the sample may behave differently.

**Recommended motion direction:** keep responses short and slightly buoyant, using the observed curves where appropriate. Let the cats and small decorative objects carry movement. Retain stable text and purchase targets. Avoid assigning guessed multi-second autoplay timings as if they were source values.

## Surfaces

| Surface | Appearance | Purpose |
| --- | --- | --- |
| Desktop canvas | Flat cream yellow | Holds the persistent side compositions and visually joins them to the opening story. |
| Story column | Cream or white, with a subtle side shadow visible on desktop | Separates a narrow reading experience from the wide surrounding canvas. Shadow parameters are unmeasured. |
| Shopping chapter | Flat white | Gives product photography a clean setting while retaining blue type. |
| About panel | Cream inset rectangle, square corners | Creates a quieter information region inside the white chapter. |
| Comment bubble | Light gray, rounded, with a triangular tail | Distinguishes a cat’s voice from product metadata. |
| Navigation link | Blue fill or white fill with blue outline, clipped corners | Establishes clear destination controls. |
| Footer | White with black rules, icons, and brand artwork | Returns to the parent brand’s identity. |

This is not a general elevation system. Most separation comes from background changes, dotted rules, spacing, and photographic boundaries. The central desktop shadow and the Instagram button’s offset shadow are localized treatments.

## Imagery

The page’s strongest asset is its collection of individual cat photographs. Preserve fur texture, uneven outlines, whiskers, expressions, and varied head angles. Some cutouts show only a face; others show a whole body. Cropping heads at the edges of the polygon produces a sense of a larger group extending beyond the visible frame.

Product images retain realistic material detail: silver reflections, dark fabric, printed patterns, embossed surfaces, and yellow tags. Use contained, uncropped imagery where the product must remain identifiable. Product thumbnails in decorative bands can be smaller and partially clipped at the track edges.

Graphic assets are much simpler: solid blue fish, cat-head silhouettes, thin arrows, pink dots, clipped frames, and tilted paper labels. This contrast between photographic texture and flat graphics is central to the design.

Do not apply a duotone filter to all photography or use pixelated rendering. The supplied cats and merchandise retain natural color and smooth image edges.

### Observed Asset References

Image `src` values and vector-file paths were not included in the evidence. This is therefore an asset inventory, not a downloadable file list.

| Asset group | Original-page evidence | Reuse requirement |
| --- | --- | --- |
| GLOBAL WORK identity | Desktop corner and desktop/mobile footer | Preserve the original wordmark, blue symbol, and tagline proportions. |
| Happy Nyanco Day title | Opening and closing captures | Preserve staggered words, italic appearance, and small embedded cat details. |
| Large cat heads | Opening polygon | Use clean cutouts with distinct expressions and natural fur edges. |
| Decorative full-body cats | Hero edges and desktop left region | Compose against page boundaries rather than placing each in a card. |
| Product cutouts | Opening ribbon, right navigation, and product story | Maintain recognizable silhouettes at both thumbnail and feature sizes. |
| Cat portraits and selectors | Product comments | Pair each portrait with its corresponding name and quotation. |
| Fish, cat, arrow, and frame artwork | Header, navigation, hero, and footer | Keep blue linework and simple flat silhouettes. |
| and ST and social marks | Footer | Use authorized brand assets rather than approximate text or generic substitutes. |

## Layout & Responsive Behavior

The desktop page allocates only **29.9% of the viewport width** to the central story. The remaining space is functional: the left maintains social identity and the right maintains chapter navigation. Product content remains a single sequence rather than expanding into a desktop merchandise grid.

At 390px, the story occupies the full viewport. The separate left social rail is absent from the opening, and chapter navigation is present later within the introduction. Compact fish and menu symbols remain visible near the top in the mobile footer capture.

### Measured Section Positions

The following y values are document coordinates from the DOM, not positions within the later scrolled screenshots.

| Measurement | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Hero-title top | `83.13px` | `75.39px` |
| Introduction start | `677.42px` | `614.39px` |
| Introduction height | `631.31px` | `1097.31px` |
| Survey start | `1308.73px` | `1711.70px` |
| Survey height | `2515.47px` | `2281.30px` |
| White collaboration section start | `3824.20px` | `3993px` |
| White collaboration section height | `8084.89px` | `7639.16px` |
| Document height | Approximately `17,965.56px` | Approximately `17,200.06px` |

The root unit and many central dimensions shrink by about 9.3% from the desktop strip to mobile. Section placement does not follow that ratio universally: navigation relocation and content wrapping change total heights.

The evidence also includes off-column ticker copies and inactive comments. These do not indicate additional page columns. Keep their overflow local to the relevant track instead of allowing them to widen the document.

**Recommended breakpoint:** use a wide layout at approximately 1100px and above, where a 430px center leaves enough room for the observed side controls. This breakpoint is an implementation recommendation; the original breakpoint and intermediate tablet layouts were not supplied.

**Recommended scrolling model:** retain normal document scrolling for the long story and persistent side controls on wide screens. The source document’s large measured height supports this reading model; there is no evidence for a fixed-height application with a separately scrolling central pane.

## Do’s and Don’ts

### Do

- Preserve the narrow 430px desktop story and broad cream surroundings.
- Use the measured blue `#1f2e98` consistently for text and as the reference for graphic linework.
- Keep the white merchandise chapter inside the same story width.
- Pair Zen Kaku Gothic New body copy with Outfit product and utility labels.
- Preserve real cat expressions, natural photo edges, and irregular collage placement.
- Use dotted rules, clipped corners, angular paper labels, and small blue animal symbols.
- Give individual products large photographs and compact purchase information.
- Keep cat comments visually distinct through gray bubbles, small names, and portrait selectors.
- Reflect the captured contest-results state when reproducing current content.
- Keep the footer’s black-and-white brand treatment separate from the blue campaign copy.

### Don’t

- Don’t stretch the central story across the full desktop viewport.
- Don’t replace the product sequence with a uniform rounded-card grid.
- Don’t turn every link into a large yellow or coral button.
- Don’t treat the inherited root size as the visible size of graphic headings.
- Don’t substitute the Swiper preset blue for the measured campaign blue.
- Don’t recolor or pixelate all cat and product photography.
- Don’t add shadows around every section or speech bubble.
- Don’t reproduce the temporarily blank desktop introduction area as permanent empty content.
- Don’t infer chart shapes, menu overlays, sound effects, or carousel timings from labels alone.
- Don’t assume that a past calendar date means the current page is unavailable or that all promotions remain active.

## Recommended Implementation Additions

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

- Give the cat-shaped menu button, fish control, arrows, portrait selectors, and upward arrow explicit accessible names.
- Provide a semantic heading or text alternative for the graphic campaign title. The empty extracted `h1` does not establish its accessible name.
- Use destination links for shopping and social navigation. Use buttons for state changes such as opening a menu or changing a comment.
- Keep the tiny visible arrow circles and BUY capsules, but expand their interactive areas to at least 44 × 44px where they operate independently.
- Make every cat comment reachable by keyboard. Exclude decorative ticker duplicates from the accessibility tree while retaining one complete readable sentence.
- Provide reduced-motion behavior and a pause mechanism for any continuously moving tracks. Keep meaningful content visible when motion is disabled.
- Avoid making content visibility depend solely on a reveal animation completing. The introductory copy should remain readable after delayed loading or script failure.
- Allow labels, prices, and speech bubbles to grow when text is enlarged or translated. Match the captured proportions without fixing every text region to a single height.
- If implementing an opened mobile menu, define focus management, close behavior, and section navigation explicitly; its original open state is unknown.

## Agent Prompt Guide

### Quick Color Reference

- Cream surface: `#fff9d1`, measured on the inset information panel and visually consistent with the canvas.
- Main text and reference ink: `#1f2e98`.
- Product chapter and footer: `#ffffff`.
- Survey explanation and footer details: `#000000`.
- Pink dots: approximately `#ff2fa8`.
- Comment bubble: approximately `#eeeeee`.
- Small BUY marker: approximately `#f5e622`.
- Local push-button illustration: approximately `#f5646b`.

### Overall Prompt

“Create a cat-themed fashion campaign feature with a 430px central story on desktop and full-width content at 390px. Use cream yellow `#fff9d1`, deep blue `#1f2e98`, Zen Kaku Gothic New body copy, and Outfit for Latin labels and prices. Keep a persistent social composition on the left and illustrated chapter navigation on the right at wide widths. Build the opening from staggered title artwork, real cat cutouts, a ten-sided pink-dot frame, a tilted date tag, small fish symbols, and a clipped merchandise ribbon. Continue into a white product chapter with large photographs, small yellow BUY labels, dotted dividers, thin comment tickers, and named cats speaking through gray bubbles. Finish with a cream campaign reprise and a white brand footer. Keep unverified interactions separate from the visual reconstruction.”

### Example Component Prompts

1. **Opening collage:** “Compose a narrow cream hero with blue staggered Happy Nyanco Day artwork. Center a wide ten-sided frame about 77% of the column width, fill it with small staggered pink dots, and place a large natural cat-head cutout between cropped neighboring faces. Add a tilted February 22 tag and small blue fish symbols.”
2. **Desktop navigation:** “Design a compact right-side contents group on cream: two illustrated shortcuts above two horizontal rows, dotted blue separators, small circular down arrows, and a white clipped-corner All Items link with a product thumbnail and basket icon. Use small bold blue text and generous surrounding space.”
3. **Product story:** “Present the pouch as item 04 inside a white 430px story column. Place a small tracked collaboration caption opposite a large slanted item marker, followed by a large contained photograph of black and silver pouches. Align the name and price toward the right and append a small yellow BUY capsule.”
4. **Cat comment:** “Use a natural cat-head cutout and a small name at left, with a pale-gray rounded speech bubble and left-pointing tail at right. Set the comment in medium-weight blue type. Below it, show three tiny cat-face selectors with thin underlines and a blue active state.”
5. **Mobile adaptation:** “At 390px, remove the desktop side regions and let the story fill the screen. Place the chapter navigation within the introduction. Preserve a compact fish symbol and cat-shaped menu affordance near the top. Scale central artwork proportionally while allowing translated paragraphs and comments to grow.”
6. **Footer:** “Finish the narrow story with a white footer containing the authorized GLOBAL WORK mark, black horizontal rules, four evenly spaced social icons, a circular store mark, an uppercase store label, and a thin upward arrow. Use generous vertical spacing and retain the cream surroundings on desktop.”

## Quick Start

### CSS Custom Properties

This is a **recommended CSS adaptation**, not recovered source code. It reproduces the two measured central widths through `--u`, leaves the root font size conventional, and uses a proposed 1100px breakpoint. Accent colors, bubble radius, polygon geometry, and shadows are visual approximations.

Use the approved title, cat, product, and brand artwork as image children. Font files and image assets are not included. The CSS supplies the shell and representative components; menu state, comment selection, and media behavior require separate implementation.

Place `.section-nav` after the introduction copy in document order. Its wide-screen rule moves it into the right side region. Avoid transformed ancestors that would change its fixed-position containing block.

```css
:root {
  /* Measured colors and visual approximations */
  --color-paper: #fff9d1;
  --color-ink: #1f2e98;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-comment: #eeeeee;
  --color-pink: #ff2fa8;
  --color-buy: #f5e622;
  --color-push: #f5646b;

  /* Measured family stacks; load approved fonts separately */
  --font-body: 'Zen Kaku Gothic New',
    'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
    'Helvetica Neue', Arial, Meiryo, sans-serif;
  --font-latin: Outfit, sans-serif;

  /* Derived from the two inspected content widths */
  --strip-max: 430px;
  --strip-width: min(100vw, var(--strip-max));
  --u: calc(var(--strip-width) / 75);

  --text-body: calc(2.8 * var(--u));
  --text-product: calc(2.7 * var(--u));
  --text-caption: calc(2.1 * var(--u));
  --text-cat-name: calc(2 * var(--u));
  --text-ticker-label: calc(1.8 * var(--u));
  --leading-intro: calc(5.4 * var(--u));
  --leading-comment: 1.6154;
  --tracking-label: 0.07em;

  --inset: calc(4.8 * var(--u));
  --section-space: calc(12 * var(--u));
  --radius-bubble: calc(2.2 * var(--u));
  --corner: calc(2.6 * var(--u));
  --dot-step: calc(3.5 * var(--u));

  --ease-soft: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-buoyant: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --cut-shape: polygon(
    var(--corner) 0,
    calc(100% - var(--corner)) 0,
    100% var(--corner),
    100% calc(100% - var(--corner)),
    calc(100% - var(--corner)) 100%,
    var(--corner) 100%,
    0 calc(100% - var(--corner)),
    0 var(--corner)
  );
  --cat-frame-shape: polygon(
    35% 0, 65% 0, 90% 19%, 100% 50%, 90% 81%,
    65% 100%, 35% 100%, 10% 81%, 0 50%, 10% 19%
  );
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
}

button,
input,
select {
  font: inherit;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

.page-strip {
  width: var(--strip-width);
  margin-inline: auto;
  background: var(--color-paper);
}

.campaign-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: calc(14 * var(--u));
  padding-inline: calc(3 * var(--u));
}

.campaign-caption {
  margin: 0;
  font-family: var(--font-latin);
  font-size: var(--text-caption);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-align: center;
}

.hero {
  overflow: hidden;
  padding-bottom: calc(5 * var(--u));
  border-bottom: 1px dotted var(--color-ink);
}

.hero-title {
  width: 88.26%;
  margin: calc(0.5 * var(--u)) auto calc(6.5 * var(--u));
}

.hero-title img {
  display: block;
  width: 100%;
  height: auto;
}

.cat-frame {
  position: relative;
  width: 77%;
  aspect-ratio: 330 / 246;
  margin-inline: auto;
  background: var(--color-ink);
  clip-path: var(--cat-frame-shape);
}

.cat-frame__paper {
  position: absolute;
  inset: 1px;
  overflow: hidden;
  background-color: var(--color-paper);
  background-image:
    radial-gradient(circle, var(--color-pink) 1.3px, transparent 1.5px),
    radial-gradient(circle, var(--color-pink) 1.3px, transparent 1.5px);
  background-size: var(--dot-step) var(--dot-step);
  background-position:
    0 0,
    calc(var(--dot-step) / 2) calc(var(--dot-step) / 2);
  clip-path: var(--cat-frame-shape);
}

/* Position individual approved cutouts inside this local frame. */
.hero-cats {
  position: absolute;
  inset: 0;
}

.product-ribbon {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--u));
  overflow: hidden;
  margin-top: calc(5 * var(--u));
}

.product-ribbon img {
  flex: 0 0 calc(10 * var(--u));
  width: calc(10 * var(--u));
  height: calc(11 * var(--u));
  object-fit: contain;
}

.intro {
  padding-block: calc(7 * var(--u)) calc(6 * var(--u));
  text-align: center;
}

.intro-copy {
  margin: 0;
  padding-inline: calc(2 * var(--u));
  font-size: var(--text-body);
  line-height: var(--leading-intro);
}

.intro-copy + .intro-copy {
  margin-top: calc(4.1 * var(--u));
}

.social-rail,
.brand-corner {
  display: none;
}

.section-nav {
  padding-block: calc(6 * var(--u));
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.5357;
}

.section-nav__inner {
  width: min(300px, calc(100% - 32px));
  margin-inline: auto;
}

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

.nav-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  min-height: 91px;
  border-top: 1px dotted var(--color-ink);
  text-decoration: none;
  text-align: left;
}

.nav-arrow {
  display: grid;
  width: 22px;
  height: 22px;
  margin: auto;
  place-items: center;
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-ink);
}

.cut-button {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  width: min(calc(45 * var(--u)), 100%);
  min-height: max(44px, calc(10.2 * var(--u)));
  margin-inline: auto;
  padding: 10px 20px;
  border: 0;
  color: var(--color-ink);
  background: transparent;
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color 200ms var(--ease-soft);
}

.cut-button::before,
.cut-button::after {
  content: '';
  position: absolute;
  clip-path: var(--cut-shape);
  pointer-events: none;
}

.cut-button::before {
  z-index: -2;
  inset: 0;
  background: var(--color-ink);
}

.cut-button::after {
  z-index: -1;
  inset: 1px;
  background: var(--color-white);
}

.cut-button--filled {
  color: var(--color-white);
  filter: drop-shadow(5px 5px 0 rgb(0 0 0 / 10%));
}

.cut-button--filled::after {
  background: var(--color-ink);
}

.cut-button--more {
  width: min(calc(46.4 * var(--u)), 100%);
}

.cut-button--stores {
  width: min(calc(56 * var(--u)), 100%);
  font-size: calc(2.6 * var(--u));
}

.catalog-section {
  background: var(--color-white);
  padding-block: calc(7.3 * var(--u)) var(--section-space);
}

.about-panel {
  width: calc(58 * var(--u));
  max-width: calc(100% - 32px);
  margin-inline: auto;
  padding-block: calc(12 * var(--u)) calc(9.9 * var(--u));
  border-radius: 0;
  background: var(--color-paper);
}

.about-panel__copy {
  width: calc(47.4 * var(--u));
  max-width: calc(100% - 32px);
  margin-inline: auto;
  font-size: calc(2.5 * var(--u));
  line-height: 1.88;
}

.product-story {
  position: relative;
  padding-block: calc(6 * var(--u)) calc(15 * var(--u));
}

.product-story::before {
  content: '';
  position: absolute;
  inset: 0 calc(3 * var(--u)) auto;
  border-top: 1px dotted var(--color-ink);
}

.product-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-inline: calc(5.7 * var(--u)) calc(3.6 * var(--u));
}

.product-eyebrow {
  margin: 0;
  font-family: var(--font-latin);
  font-size: var(--text-caption);
  line-height: 1;
  letter-spacing: var(--tracking-label);
}

.product-photo {
  display: block;
  width: 100%;
  height: auto;
  margin-block: calc(5 * var(--u));
  object-fit: contain;
}

.product-purchase-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding-inline: calc(6 * var(--u));
}

.product-buy {
  display: block;
  min-height: 44px;
  font-family: var(--font-latin);
  font-size: var(--text-product);
  line-height: 1.4333;
  letter-spacing: var(--tracking-label);
  text-decoration: none;
}

.product-buy--right {
  margin-left: auto;
}

.buy-label {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--color-buy);
  font-size: 0.85em;
  line-height: 1.15;
  vertical-align: baseline;
}

.cat-ticker {
  margin: calc(5 * var(--u)) var(--inset);
  overflow: hidden;
  border: 1px solid var(--color-ink);
  font-size: calc(2.3 * var(--u));
  line-height: 1.15;
}

/* Static first pass; use approved vector art for exact clipped edges. */
.cat-ticker__track {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--u));
  width: max-content;
  min-height: calc(4.8 * var(--u));
  padding-inline: 8px;
  white-space: nowrap;
}

.cat-ticker__label {
  font-family: var(--font-latin);
  font-size: var(--text-ticker-label);
  letter-spacing: var(--tracking-label);
}

.comment-row {
  display: grid;
  grid-template-columns: calc(12.8 * var(--u)) minmax(0, 1fr);
  align-items: start;
  gap: calc(4.1 * var(--u));
  padding-inline: calc(4 * var(--u));
}

.cat-portrait {
  margin: 0;
  text-align: center;
}

.cat-portrait img {
  display: block;
  width: calc(10 * var(--u));
  height: calc(11 * var(--u));
  margin-inline: auto;
  object-fit: contain;
}

.cat-portrait figcaption {
  margin-top: 6px;
  font-size: var(--text-cat-name);
  line-height: 1.15;
}

.comment-bubble {
  position: relative;
  margin: 0;
  padding: calc(2.6 * var(--u)) calc(2.5 * var(--u))
    calc(2.6 * var(--u)) calc(4.4 * var(--u));
  border-radius: var(--radius-bubble);
  background: var(--color-comment);
  font-size: var(--text-product);
  line-height: var(--leading-comment);
}

.comment-bubble::before {
  content: '';
  position: absolute;
  top: calc(6 * var(--u));
  left: calc(-2 * var(--u));
  border-top: calc(1.2 * var(--u)) solid transparent;
  border-bottom: calc(1.2 * var(--u)) solid transparent;
  border-right: calc(2 * var(--u)) solid var(--color-comment);
}

.comment-selectors {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: calc(12 * var(--u));
}

.comment-selector {
  display: grid;
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
  place-items: center;
  border: 0;
  border-bottom: 1px solid #cccccc;
  background: transparent;
  cursor: pointer;
}

.comment-selector img {
  width: 22px;
  height: 24px;
  object-fit: contain;
}

.comment-selector[aria-pressed='true'] {
  border-bottom-color: var(--color-ink);
}

.brand-footer {
  padding: calc(9 * var(--u)) calc(4.6 * var(--u)))
    calc(7 * var(--u));
  color: var(--color-black);
  background: var(--color-white);
  text-align: center;
}

/* Explicit longhands keep the footer padding easy to adapt. */
.brand-footer {
  padding-top: calc(9 * var(--u));
  padding-right: calc(4.6 * var(--u));
  padding-bottom: calc(7 * var(--u));
  padding-left: calc(4.6 * var(--u));
}

.footer-socials {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-block: calc(6 * var(--u));
  padding-block: calc(2.5 * var(--u));
  border-block: 1px solid currentColor;
}

.footer-socials a {
  display: grid;
  width: 44px;
  min-height: 44px;
  place-items: center;
}

:where(a, button, select):focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 4px;
}

/* Recommended wide-layout breakpoint; original breakpoint unknown. */
@media (min-width: 1100px) {
  .page-strip {
    box-shadow: 0 0 14px rgb(0 0 0 / 10%);
  }

  .social-rail,
  .section-nav {
    position: fixed;
    z-index: 5;
    inset-block: 0;
    display: flex;
    flex-direction: column;
    width: calc((100vw - var(--strip-max)) / 2);
    overflow-y: auto;
    padding: 110px 0 24px;
  }

  .social-rail {
    left: 0;
    text-align: center;
  }

  .section-nav {
    right: 0;
    font-size: 13.83px;
    line-height: 21.24px;
  }

  .rail-inner,
  .section-nav__inner {
    flex-shrink: 0;
    margin-block: auto;
  }

  .rail-inner {
    width: 100%;
  }

  .section-nav__inner {
    width: min(285px, calc(100% - 32px));
  }

  .brand-corner {
    position: fixed;
    z-index: 6;
    top: 29px;
    left: 35px;
    display: block;
    width: 95px;
  }
}

/* Recommended accessibility behavior for optional animated tracks. */
@media (prefers-reduced-motion: reduce) {
  .page-strip *,
  .social-rail *,
  .section-nav * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}
```

The polygon uses nested clipped elements to approximate a blue outline. An approved SVG frame is preferable when an exact, uniform stroke is required. The ticker is intentionally static in this starter; its original motion timing was not provided. Portrait selection should update the visible comment and `aria-pressed` state through application code.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This does not identify the original site’s framework. Define the custom properties above first.

```css
@theme inline {
  --color-nyanco-paper: var(--color-paper);
  --color-nyanco-ink: var(--color-ink);
  --color-nyanco-white: var(--color-white);
  --color-nyanco-comment: var(--color-comment);
  --color-nyanco-pink: var(--color-pink);
  --color-nyanco-buy: var(--color-buy);

  --font-nyanco-body: var(--font-body);
  --font-nyanco-latin: var(--font-latin);

  --text-nyanco-body: var(--text-body);
  --text-nyanco-product: var(--text-product);
  --text-nyanco-caption: var(--text-caption);
  --text-nyanco-cat-name: var(--text-cat-name);

  --spacing-nyanco-unit: var(--u);
  --spacing-nyanco-inset: var(--inset);
  --spacing-nyanco-section: var(--section-space);
  --radius-nyanco-bubble: var(--radius-bubble);
}
```

## Sources & Evidence

- **Inspected original page:** [GLOBAL WORK — Happy Nyanco Day 2026](https://www.globalwork.jp/women/happy_nyanco_day_2026/). The supplied observation reports HTTP 200 and the same original and final URL.
- **Capture date and scope:** supplied browser evidence retrieved September 12, 2026 at 08:01:54.951 UTC. Individual screenshots do not have separate timestamps in the provided record.
- **Desktop evidence:** three original-page screenshots at 1440 × 1000, showing the opening composition, the pouch/comment region, and the closing/footer region. Measured document height is approximately 17,965.56px.
- **Mobile evidence:** two original-page screenshots at 390 × 844, showing the opening and footer. The accompanying DOM also records the intermediate sections. Measured document height is approximately 17,200.06px.
- **Rendered DOM and computed styles:** authority for text, destination links, family stacks, weights, type sizes, explicit transitions, selected background colors, and element rectangles. No complete asset manifest or original stylesheet formulas were supplied.
- **Inspection procedure:** the supplied browser process waited for document loading, layout/text stability, and image decoding within stated limits; it temporarily paused perpetual animations during readiness checks and resumed them afterward. It traversed intermediate scroll positions. These checks do not establish semantic completeness or successful interaction testing.
- **Limitations:** the captured session uses English body text. Open menus, language switching, survey expansion, portrait selection, PUSH ME feedback, Stop! behavior, outgoing product availability, and footer-arrow activation were not supplied as tested interactions. No additional browsing or file inspection was performed for this reference.

This document describes the current page represented by the supplied original-site evidence. Measurements, visual estimates, derived relationships, and implementation recommendations remain separately identified.