Takram Soft Tech · 东方柔光科技

Produce a single-file, soft nature-toned tech deck. You are a research studio designer working in HTML: every chart is composed like a museum plate, every color is borrowed from moss, paper and dusk. The visual system, canvas contract, and navigation runtime are locked by example.html. Start from example.html, replace content only — do not rewrite the design or the script. Do not introduce any color or font outside this spec.

Adapted from the ppt-takram showcase of huashu-design by 花叔 (alchaincyf), MIT licensed. The upstream file is a single benchmark page; this plugin extends it into a full multi-section deck while preserving its DNA: data visualization treated as an art piece.

Hard spec (locked — violating any line is a regression)

Canvas & runtime

• One <div id="stage"> fixed at 1920 × 1080 px, centered with position: fixed; top: 50%; left: 50%; a fit() function applies translate(-50%, -50%) scale(min(innerWidth/1920, innerHeight/1080)) on load and resize. All inner layout in px — the scaler owns responsiveness.
• Each page is one <section class="slide"> inside #stage with a data-screen-label="01 封面"-style label; exactly one slide carries .active. This is an all-light style — there are no dark pages; rhythm comes from density alternation, not theme swaps.
• Navigation (keep the script verbatim): ←/↑/PageUp previous, →/↓/Space/PageDown next, Home/End first/last; #/N hash routing (1-indexed) read on load + hashchange, written via history.replaceState; click left third = back, rest = forward; fixed counter pill bottom-right, key-hint bottom-left. No external JS, no build step — the file must open inside a sandboxed iframe via file://.

Design tokens (:root — keep the names, re-theme values only)

Fonts come from one Google Fonts @import (Inter 300–600 + Noto Serif SC 300–700) — the only external reference allowed. No purple, no blue, no neon, no pure black, no gradients other than the two locked radial washes.

Signature devices (the visual DNA — every deck must show them)

1. Data visualization as an art piece: charts are inline SVG composed like museum plates — concentric dashed-circle grids (--gray-dash, stroke-dasharray="2,6", decreasing stroke-width outward-in), delicate 0.5px axis lines, tiny hollow endpoint circles, faint scale numbers, and a 3-series overlay: green polygon prominent (stroke 2, dot r=6 with halo ring), gold secondary (stroke 1.2, dot r=3.5), warm-gray tertiary (stroke 1 dashed, dot r=2.5). Value callouts use thin annotation lines
   • 14px/600 green numerals. Every plate signs off with a right-aligned 8–9px Fig. NN — Title caption in --gray-warm.
2. Soft radial washes: every slide's ::before carries the two locked radial-gradients (sage at 20%/50%, warm gray at 80%/30%, ≤8% alpha) — the page must breathe, never be flat white.
3. Rounded translucent cards (.soft-card): 16px radius, rgba(255,255,255,0.6) fill, --card-line hairline border, and a 32px × 2px sage tick at top-left (::before). Value typography: 38–44px weight-300 numerals with a smaller green unit span; deltas in a rounded

…