丸KMARU–KFIELD MANUAL 163 ← RETURN TO AISLE 4

BUILD NOTES / NIGHT REGISTER 04

How the light
stayed on.

PURE HTML / CSS / JSEVERY VISUAL CODE-MADECHECKED 03:12

01 / EMOTIONAL REGISTER

Precision outside.
Private weather inside.

MARU-K treats a convenience store as a temporary shelter. Perfectly faced shelves suggest ritual and care; five customers reveal the unruly lives moving past them. A nurse holds hot lemon against glove marks. A bassist mends a photograph with tape. An exam student writes herself a permission slip on a gum wrapper. The fluorescent field is lonely, never bleak: a place can keep watch without asking why you are awake.

Wing VII provides no generated assets, and this room makes that constraint visible. Cartons, portraits, frozen stock, floor reflections, wrapper diagrams, grain, and receipt paper are assembled from HTML, CSS gradients, borders, masks, pseudo-elements, and inline SVG. Code is not a substitute for atmosphere here; it is the atmosphere’s material.

Design rule 03: every straight shelf line belongs to the store; every tender sentence belongs to somebody passing through it.

02 / SIGNATURE — THE RECEIPT

The page notices
you noticing.

sectionObserver sees a section cross 16%.
addReceiptItem() writes once to a Map.
renderReceipt() totals attention and tax.
updateScrollProgress() advances the red feed line.

The receipt is a memory system, not a sidebar. Desktop paper feeds continuously from a dark printer; tablet and phone preserve the aisle width with a live total tab that opens the same paper as a focus-trapped drawer. The seconds counter pauses when the tab is hidden. At checkout, openKeepsake() copies only the aisles actually witnessed, itemizes them, tears the paper, and returns focus to the visitor’s original control. Its final thermochromic field uses setThermalInk() plus pointer-position CSS variables to reveal a message beneath a moving pool of warmth; the same reveal latches from a keyboard button.

03 / SHELVES, BREATH, FOUR NOTES

Operational systems
with human residue.

The shelf uses exact six-column grids, repeated carton geometry, millimeter-facing labels, inset folds, and drop shadows. Repetition supplies retail discipline; small lot codes and price strips stop it feeling like a generic card grid. The 03:00 cast deliberately breaks that geometry with five distinct CSS portraits and a moving pool of shelf-label light.

Each freezer door layers stock, reflection, and a blurred .fog sheet. setDoor() writes pointer coordinates into --hand-x and --hand-y; a radial CSS mask clears only that spot, draws a temporary palm, then re-fogs after 6.5 seconds. The four-step wrapper lesson uses setFoldStep() for keyboard and pointer progression. The jingle remains silent: four timed light columns spatialize “Bright. Bright. Upward. Home.” startLight() and stopLight() keep the cursor lamp smooth and pause its animation frame when the document is hidden.

04 / PALETTE + TYPE

Fluorescent authority,
warm operational signals.

Fluorescent#EAFFFF
Shelf label#FFE34F
Wrapper green#007C63
Register red#F64B3C
Freezer blue#96DDF5
Night ink#00352E

Zen Kaku Gothic New supplies the humane store voice at weights 500–900. VT323 handles prices, clocks, lot codes, scores, and printer copy. Tight display tracking contrasts with the receipt’s open, stepped rhythm. Both families are self-hosted from /assets/fonts/.

05 / REPRODUCE THIS

Prompt for a behavior,
not a convenience-store skin.

Ask an AI coding agent for a pure HTML/CSS/JS nocturnal retail essay where every visual is code. Require a persistent receipt that logs viewed sections and linger time, tears into a keepsake, and condenses without covering phone copy. Specify six-column perfect-facing shelves, five one-item character vignettes, hand-position freezer fog, a keyboard-operable folding sequence, and a silent four-note light score. Provide the six tokens above and the Zen Kaku Gothic New / VT323 pairing. Demand a staged fluorescent startup, focus trapping, visibility-paused timers and animation frames, reduced-motion honesty, three-width screenshots, and zero overflow. End with the emotional rule: the store’s light is a form of care.