/* ════════════════════════════════════════════════════════════════════
/work/collapse — public build-log post + embedded "Collapse" generator.
Reads as Post P—04 opened up: same chrome, same .sec/.sec-label rhythm,
same big-number results treatment as the home page. Token-driven only
(no literal hexes) so it follows the palette collapse.js applies (Carbon).
Inherits tokens from styles.css and components (.topbar/.col/.sec/.display/
.post/.cta/.footer/.meter-chip) from v2.css.
════════════════════════════════════════════════════════════════════ */
/* clip horizontal overflow at the body level only. Putting overflow-x on
makes it the scroll container, which breaks the sticky .topbar
(it stops pinning to the viewport). The home page clips on body too. */
.collapse-page { background: var(--surface-page); color: var(--text-primary); overflow-x: hidden; }
/* ambient packet background sits above the page bg, below all content */
.cp-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.collapse-page > main, .collapse-page > .cp-footer { position: relative; z-index: 1; }
/* topbar smart-back breadcrumb (sits in .topbar .right beside the theme btn):
shows WHERE you are (posts / collapse) and returns to the post list. */
.cp-crumb {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-mono);
color: var(--text-secondary); text-decoration: none;
border: 1px solid var(--line); border-radius: var(--radius-pill);
padding: 5px 12px 5px 10px;
transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.cp-crumb:hover { color: var(--text-primary); border-color: var(--line-strong); background: var(--surface-panel); }
.cp-crumb .arr { color: var(--accent); font-style: normal; display: inline-flex; transition: transform var(--dur-base) var(--ease-out); }
.cp-crumb:hover .arr { transform: translateX(-3px); }
.cp-crumb .sep { opacity: 0.5; }
.cp-crumb .cur { color: var(--text-primary); }
body[data-flood="3"] .cp-crumb .arr { color: var(--text-primary); }
/* ── reveal — gated behind html.cv-ready (added by collapse.js only when it
will run). No JS / error / reduced-motion ⇒ everything paints visible. ── */
.cv-rv { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
html.cv-ready .cv-rv { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
html.cv-ready .cv-rv.is-in { opacity: 1; transform: none; }
html.cv-ready .cv-rv.d1 { transition-delay: 80ms; }
html.cv-ready .cv-rv.d2 { transition-delay: 160ms; }
html.cv-ready .cv-rv.d3 { transition-delay: 240ms; }
}
/* ── post header ───────────────────────────────────────────────────── */
/* ── post header — distinct from the body: a FULL-BLEED static grid backdrop.
It breaks out of the .col column to 100vw and is fully opaque, so the body's
packet animation is completely covered behind the hero (calm, static anchor). ── */
.cp-head {
position: relative; isolation: isolate;
padding: clamp(56px, 11vh, 128px) 0 clamp(48px, 8vh, 92px);
}
.cp-head::before {
content: ""; position: absolute; z-index: -2; pointer-events: none;
top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw;
background-color: var(--surface-page);
}
/* the hero backdrop IS the article subject: a faint, static WFC dungeon
(rooms / corridors / room-graph) painted full-bleed behind the title. */
.cp-head-bg {
position: absolute; z-index: -1; pointer-events: none;
top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%;
/* legibility: fade the lower edge into the page so the dek/tags read clean */
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 96%);
mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 96%);
}
/* hero grid runs flush into the first seam — no transparent gap, no packets */
.collapse-page .cp-head + .byteline { margin-top: 0; }
/* seams are opaque divider bands: the packet field shows only in the sections between them */
.collapse-page .byteline { background: var(--surface-page); }
.cp-kicker {
font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-caps);
text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 10px;
}
body[data-flood="3"] .cp-kicker { color: var(--text-primary); }
.cp-title {
font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.92;
font-size: clamp(56px, 11vw, 150px); margin: 16px 0 0; color: var(--text-primary);
}
.cp-title .tick { color: var(--accent); }
body[data-flood="3"] .cp-title .tick { color: var(--text-primary); }
.cp-dek {
margin: 26px 0 0; max-width: 760px; text-wrap: pretty;
font-family: var(--font-display); font-stretch: 110%; font-weight: 500;
font-size: clamp(20px, 2.4vw, 30px); line-height: 1.32; color: var(--text-primary);
}
.cp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 30px; }
.cp-meta .m {
font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-mono);
color: var(--text-secondary); display: inline-flex; align-items: center; gap: 8px;
}
.cp-meta .m::before { content: "·"; color: var(--text-secondary); margin-right: 10px; }
.cp-meta .m:first-child::before { content: none; }
.cp-meta .tag {
font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-caps);
text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 4px 9px; border-radius: var(--radius-1);
}
body[data-flood="3"] .cp-meta .tag { background: var(--text-primary); color: var(--surface-page); }
/* tech-stack chips, now living in the hero */
.cp-hero-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.cp-hero-tags .t {
font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono);
color: var(--text-primary); border: 1px solid var(--line-strong); border-radius: var(--radius-1);
padding: 7px 13px; background: color-mix(in srgb, var(--surface-panel) 70%, transparent);
}
.cp-hero-tags .t::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--accent); vertical-align: middle; }
body[data-flood="3"] .cp-hero-tags .t::before { background: var(--text-primary); }
/* frame-time meter echo (static, NOT data-meter) */
.vtd-meter {
font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
border: 1px solid var(--line); border-radius: var(--radius-1); padding: 6px 11px;
background: var(--surface-panel);
}
.vtd-meter .dot { color: var(--success); }
.vtd-meter .dot.warn { color: var(--accent); }
/* Drop the trailing hairline that fills each section label row — on this page it reads as
clutter. (Scoped to the collapse page; the home page keeps its approved look.) */
.collapse-page .sec-label::after { display: none; }
/* ── prose ─────────────────────────────────────────────────────────── */
.cp-lede {
margin: 0; max-width: 880px; text-wrap: pretty;
font-size: clamp(20px, 2vw, 28px); line-height: 1.45; color: var(--text-primary); font-weight: 500;
font-family: var(--font-body);
}
.cp-prose { max-width: 740px; margin-top: 28px; display: flex; flex-direction: column; gap: 20px; }
.cp-prose p { margin: 0; font-size: var(--text-base); line-height: var(--leading-body); color: var(--text-secondary); text-wrap: pretty; }
.cp-prose strong { color: var(--text-primary); font-weight: 600; }
.cp-ph { color: var(--text-secondary); border-bottom: 1px dashed var(--line-strong); font-style: italic; }
.cp-prose code, .cp-inline-code {
font-family: var(--font-mono); font-size: 0.88em; color: var(--text-primary);
background: var(--surface-panel); border: 1px solid var(--line); border-radius: var(--radius-1); padding: 1px 6px;
}
/* problem chips */
.cp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.cp-chip {
font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono);
color: var(--text-primary); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
padding: 7px 14px; display: inline-flex; align-items: center; gap: 8px;
}
.cp-chip::before { content: "▪"; color: var(--accent); font-size: 9px; }
body[data-flood="3"] .cp-chip::before { color: var(--text-primary); }
/* ── how-it-works: numbered stages list ───────────────────────────── */
.cp-stages { margin-top: 36px; display: flex; flex-direction: column; border-top: 1px solid var(--line); max-width: 880px; }
.cp-stage {
display: grid; grid-template-columns: 92px 1fr; gap: 20px; align-items: baseline;
padding: 22px 0; border-bottom: 1px solid var(--line);
}
.cp-stage .sx { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); }
.cp-stage .sx b { color: var(--accent); font-weight: 500; }
body[data-flood="3"] .cp-stage .sx b { color: var(--text-primary); }
.cp-stage h4 {
margin: 0 0 7px; font-family: var(--font-display); font-stretch: 110%; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(17px, 1.6vw, 22px); color: var(--text-primary);
}
.cp-stage p { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.cp-stage .cp-term { font-family: var(--font-mono); font-size: 0.9em; color: var(--text-primary); }
.cp-stages-note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); margin-top: 20px; }
.cp-stages-note b { color: var(--accent); font-weight: 500; }
body[data-flood="3"] .cp-stages-note b { color: var(--text-primary); }
/* ════════════════════════════════════════════════════════════════════
THE GENERATOR — #vtd shell. States toggled by Claude Code's engine.
Looks correct with NO JS. First paint = vtd--idle.
════════════════════════════════════════════════════════════════════ */
.vtd {
border: 1px solid var(--line-strong); border-radius: var(--radius-2);
background: var(--surface-panel); overflow: hidden; margin-top: 36px;
}
.vtd-bar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-page); }
.vtd-bar .dots { display: inline-flex; gap: 6px; }
.vtd-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); display: block; }
.vtd-bar .dots i:first-child { background: var(--accent); }
body[data-flood="3"] .vtd-bar .dots i:first-child { background: var(--text-primary); }
.vtd-title { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); }
.vtd-title b { color: var(--text-primary); font-weight: 500; }
.vtd-bar .spacer { flex: 1; }
.vtd-body { display: grid; grid-template-columns: 1fr 288px; gap: 0; }
.vtd-stage { position: relative; border-right: 1px solid var(--line); min-width: 0; background: var(--surface-page); }
.vtd-canvas-wrap { position: relative; aspect-ratio: 1 / 1; width: 100%; }
#vtd-canvas { display: block; width: 100%; height: 100%; background: var(--surface-page); image-rendering: pixelated; }
.vtd-stage::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background-image:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 32px 32px; opacity: 0.5;
}
.vtd--running .vtd-stage::before,
.vtd--done .vtd-stage::before { opacity: 0; }
.vtd-overlay {
position: absolute; inset: 0; z-index: 2; display: none;
align-items: center; justify-content: center; flex-direction: column; gap: 14px;
text-align: center; padding: 24px;
}
/* idle: the canvas shows a static DESIGN-REFERENCE render (rooms/corridors/edges),
so the hint sits as a pill at the bottom instead of covering it */
.vtd-overlay.is-idle { justify-content: flex-end; padding-bottom: 20px; }
.vtd--idle .vtd-hint {
background: color-mix(in srgb, var(--surface-page) 84%, transparent);
border: 1px solid var(--line); border-radius: var(--radius-2);
padding: 11px 20px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.vtd--idle .vtd-hint .glyph { display: inline-block; font-size: 15px; margin: 0 9px 0 0; vertical-align: 0; }
.vtd--idle .vtd-hint .line { display: inline; }
.vtd-hint { color: var(--text-secondary); }
.vtd-hint .glyph { font-family: var(--font-mono); font-size: 28px; color: var(--accent); display: block; margin-bottom: 12px; }
body[data-flood="3"] .vtd-hint .glyph { color: var(--text-primary); }
.vtd-hint .line { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-mono); }
.vtd-hint .sub { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); opacity: 0.7; margin-top: 6px; }
.vtd-spin-ring {
width: 34px; height: 34px; border: 2px solid var(--line-strong); border-top-color: var(--accent);
border-radius: 50%; animation: vtd-spin 0.8s linear infinite;
}
body[data-flood="3"] .vtd-spin-ring { border-top-color: var(--text-primary); }
@keyframes vtd-spin { to { transform: rotate(360deg); } }
.vtd-spin-label { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary); letter-spacing: var(--tracking-mono); }
@media (prefers-reduced-motion: reduce) {
.vtd-spin-ring { animation: none; border-top-color: var(--line-strong); }
}
.vtd-error {
border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius-1);
padding: 16px 18px; max-width: 420px;
}
.vtd-error .etitle { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
body[data-flood="3"] .vtd-error .etitle { color: var(--text-primary); }
.vtd-error .emsg { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-primary); line-height: 1.5; }
.vtd--idle .vtd-overlay.is-idle { display: flex; }
.vtd--running .vtd-overlay.is-running { display: flex; }
.vtd--error .vtd-overlay.is-error { display: flex; }
.vtd-controls { padding: 18px 16px; display: flex; flex-direction: column; gap: 16px; border: 0; margin: 0; min-width: 0; }
.vtd-controls legend { padding: 0; }
.vtd-group { display: flex; flex-direction: column; gap: 8px; }
.vtd-glabel { font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); }
.vtd-seed-row { display: flex; gap: 8px; }
#vtd-seed {
flex: 1; min-width: 0; box-sizing: border-box; font-family: var(--font-mono); font-size: 13px;
color: var(--text-primary); background: transparent; border: 1px solid var(--line-strong);
border-radius: var(--radius-1); padding: 9px 11px;
transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
-moz-appearance: textfield;
}
#vtd-seed::-webkit-outer-spin-button, #vtd-seed::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#vtd-seed:focus { outline: none; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.vtd-icon-btn {
flex: none; width: 40px; display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-1);
color: var(--text-primary); font-size: 15px; cursor: pointer; line-height: 1;
transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.vtd-icon-btn:hover { background: var(--surface-raise); border-color: var(--accent); }
.vtd-icon-btn:active { transform: translateY(1px); }
/* size — number field (square grid). Contract:
default 48, min 16 / max 128. Matches the seed field's box. */
.vtd-glabel .vtd-grange { color: var(--text-secondary); opacity: 0.7; text-transform: none; letter-spacing: var(--tracking-mono); margin-left: 8px; }
.vtd-num { display: flex; align-items: stretch; }
#vtd-size {
flex: 1; min-width: 0; box-sizing: border-box; appearance: textfield; -moz-appearance: textfield;
font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); background: transparent;
border: 1px solid var(--line-strong); border-right: 0;
border-radius: var(--radius-1) 0 0 var(--radius-1); padding: 9px 11px;
transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
#vtd-size::-webkit-outer-spin-button, #vtd-size::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#vtd-size:focus { outline: none; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.vtd-num-suf {
flex: none; display: inline-flex; align-items: center; padding: 0 12px;
font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-mono);
color: var(--text-secondary); background: var(--surface-raise);
border: 1px solid var(--line-strong); border-radius: 0 var(--radius-1) var(--radius-1) 0;
}
#vtd-size:focus + .vtd-num-suf { border-color: var(--accent); }
.vtd-divider { height: 1px; background: var(--line); margin: 2px 0; }
.vtd-run {
display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
padding: 13px 18px; font-family: var(--font-mono); font-size: 13px; font-weight: 500;
letter-spacing: var(--tracking-mono); cursor: pointer; border-radius: var(--radius-1);
background: var(--accent); color: var(--accent-ink); border: 1px solid transparent;
transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.vtd-run:hover { filter: brightness(1.08); }
.vtd-run:active { transform: translateY(1px); }
.vtd-run .lbl { display: none; }
.vtd--idle .vtd-run .lbl-idle { display: inline; }
.vtd--running .vtd-run .lbl-running { display: inline; }
.vtd--done .vtd-run .lbl-done { display: inline; }
.vtd--error .vtd-run .lbl-idle { display: inline; }
.vtd--running .vtd-run { background: transparent; color: var(--text-primary); border-color: var(--line-strong); }
.vtd--running .vtd-run:hover { filter: none; background: var(--surface-raise); border-color: var(--accent); }
.vtd-playback { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vtd-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-mono);
background: transparent; color: var(--text-primary); border: 1px solid var(--line-strong);
border-radius: var(--radius-1); cursor: pointer;
transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.vtd-btn:hover { background: var(--surface-raise); border-color: var(--accent); }
.vtd-btn:active { transform: translateY(1px); }
.vtd-btn .ico { font-size: 11px; }
.vtd-btn .lbl-pause { display: none; }
#vtd-playpause[aria-pressed="true"] .lbl-play { display: none; }
#vtd-playpause[aria-pressed="true"] .lbl-pause { display: inline-flex; }
.vtd-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
.vtd-switch .sw-label { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); letter-spacing: var(--tracking-mono); }
.vtd-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.vtd-switch .track { width: 38px; height: 20px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: transparent; position: relative; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); flex: none; }
.vtd-switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-secondary); transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.vtd-switch input:checked + .track { border-color: var(--accent); background: var(--accent-soft); }
.vtd-switch input:checked + .track::after { transform: translateX(18px); background: var(--accent); }
body[data-flood="3"] .vtd-switch input:checked + .track::after { background: var(--text-primary); }
.vtd-switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.vtd-foot { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-page); flex-wrap: wrap; }
.vtd-progress { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono); color: var(--text-secondary); white-space: nowrap; }
.vtd-progress b { color: var(--text-primary); font-weight: 500; }
.vtd-bar-track { flex: 1; min-width: 120px; height: 4px; background: var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.vtd-bar-fill { height: 100%; width: 0%; background: var(--accent); border-radius: inherit; transition: width var(--dur-base) var(--ease-out); }
body[data-flood="3"] .vtd-bar-fill { background: var(--text-primary); }
/* ── live metrics strip — part of the generator panel, fills as it runs ── */
.vtd-metrics {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
background: var(--line); border-top: 1px solid var(--line);
}
.vtd-metric { background: var(--surface-page); padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.vtd-metric .v {
font-family: var(--font-mono); font-size: 22px; line-height: 1; color: var(--accent);
font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
body[data-flood="3"] .vtd-metric .v { color: var(--text-primary); }
.vtd-metric .v .u { font-size: 12px; color: var(--text-secondary); margin-left: 4px; letter-spacing: 0; }
.vtd-metric .k {
font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-caps);
text-transform: uppercase; color: var(--text-secondary);
}
/* throughput — the headline “fast number”, given a faint accent wash */
.vtd-metric.is-hero { background: color-mix(in srgb, var(--accent) 6%, var(--surface-page)); }
.vtd-metric.is-hero .v { font-size: 25px; }
@media (max-width: 560px) { .vtd-metrics { grid-template-columns: repeat(2, 1fr); } }
.vtd--done .vtd-bar-fill { width: 100%; background: var(--success); }
.vtd--running #vtd-seed,
.vtd--running #vtd-size,
.vtd--running #vtd-randomize,
.vtd--running .vtd-cycle,
.vtd--running .vtd-adv,
.vtd :disabled,
.vtd .is-disabled {
opacity: 0.4; cursor: not-allowed; pointer-events: none;
}
.vtd--idle #vtd-playpause,
.vtd--idle #vtd-step,
.vtd--error #vtd-playpause,
.vtd--error #vtd-step { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
#vtd-step:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
/* ════════════════════════════════════════════════════════════════════
BIOME selector · per-theme RENDER palettes · Advanced panel
─────────────────────────────────────────────────────────────────────
The per-theme palettes below are the deliverable Claude Code wires into
render.js: one block per #vtd[data-theme="0".."4"], one custom property per
render slot. Theme 0 (Cyberpunk / Carbon) is also the base on #vtd, so the
demo opens in its own aesthetic with no attribute set.
Slot → class: --vtd-floor-accent = class 1 · --vtd-floor-special = class 2 ·
--vtd-door = class 6. Alpha is baked into the rgba() — drop in verbatim.
════════════════════════════════════════════════════════════════════ */
#vtd {
--vtd-void:#070809; --vtd-grid:rgba(137,144,153,0.10);
--vtd-room:#232a32; --vtd-room-edge:rgba(176,186,196,0.55);
--vtd-cor:#161c22; --vtd-cor-edge:rgba(176,186,196,0.30);
--vtd-wave:#00E0B8;
--vtd-floor-accent:rgba(176,186,196,0.10); --vtd-floor-special:#B6FF00; --vtd-door:rgba(182,255,0,0.50);
--accent:#B6FF00; --accent-soft:rgba(182,255,0,0.14);
}
#vtd[data-theme="1"] { /* Dungeon — cool grey stone, torch amber */
--vtd-void:#0b0c0e; --vtd-grid:rgba(150,150,160,0.08);
--vtd-room:#262b31; --vtd-room-edge:rgba(190,195,205,0.50);
--vtd-cor:#181c21; --vtd-cor-edge:rgba(190,195,205,0.28);
--vtd-wave:#6ea8ff;
--vtd-floor-accent:rgba(190,195,205,0.10); --vtd-floor-special:#ffb454; --vtd-door:rgba(255,180,84,0.50);
--accent:#ffb454; --accent-soft:rgba(255,180,84,0.15);
}
#vtd[data-theme="2"] { /* Caverns — damp mossy greens */
--vtd-void:#07100b; --vtd-grid:rgba(120,160,130,0.08);
--vtd-room:#16241b; --vtd-room-edge:rgba(150,200,160,0.45);
--vtd-cor:#0e1813; --vtd-cor-edge:rgba(150,200,160,0.26);
--vtd-wave:#38e08a;
--vtd-floor-accent:rgba(110,174,90,0.16); --vtd-floor-special:#9be15a; --vtd-door:rgba(155,225,90,0.50);
--accent:#9be15a; --accent-soft:rgba(155,225,90,0.15);
}
#vtd[data-theme="3"] { /* Catacombs — bone + dried blood */
--vtd-void:#0c0a09; --vtd-grid:rgba(160,150,140,0.08);
--vtd-room:#2a2420; --vtd-room-edge:rgba(210,200,185,0.50);
--vtd-cor:#1a1512; --vtd-cor-edge:rgba(210,200,185,0.28);
--vtd-wave:#e8c89a;
--vtd-floor-accent:rgba(210,200,185,0.12); --vtd-floor-special:#c0413b; --vtd-door:rgba(192,65,59,0.50);
--accent:#d9534c; --accent-soft:rgba(217,83,76,0.16);
}
#vtd[data-theme="4"] { /* Mines — earth browns, gold ore */
--vtd-void:#0a0806; --vtd-grid:rgba(160,140,120,0.08);
--vtd-room:#2b2218; --vtd-room-edge:rgba(205,180,150,0.48);
--vtd-cor:#1b140d; --vtd-cor-edge:rgba(205,180,150,0.26);
--vtd-wave:#ff9f45;
--vtd-floor-accent:rgba(205,180,150,0.12); --vtd-floor-special:#ffc24d; --vtd-door:rgba(255,194,77,0.50);
--accent:#ffc24d; --accent-soft:rgba(255,194,77,0.15);
}
/* contract