morphogen.css

/* morphogen.css — the component's own styles. Every color/size falls back to a sensible value so the
   component works on any page; on the portfolio the site's tokens win. Spacing follows the site's gutter
   (17px) and its Fibonacci spacing scale (8 / 13 / 21); a toggled control carries aria-pressed="true" or a
   checked box, a green border, the green-10 fill and an inset green ring. The `rd` class namespace is the
   component's own (it began as the reaction–diffusion field) and is kept stable across versions. */

.rd { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gutter, 17px); }
.rd > * { min-width: 0; }
.rd [hidden] { display: none; }

/* ---- the category row (0.7.0): DETERMINISTIC and STOCHASTIC named above their groups, one vertical divider between them,
   three buttons beneath (Stepwise, Flowing | Chance-driven), each with its formal line; the definition under the row ---- */
.rd__categories { display: grid; grid-template-columns: minmax(0, 2fr) 1px minmax(0, 1fr); gap: var(--gutter, 17px); align-items: stretch; }
.rd__catgroup { display: grid; gap: 8px; align-content: start; min-width: 0; }
.rd__cathead { margin: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3, #6B6B6B); }
.rd__catbtns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--gutter, 17px); }
.rd__catdivider { background: var(--struct-med, rgba(26,26,26,.5)); width: 1px; align-self: stretch; }
.rd__cat-sub { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .04em; text-transform: none; color: var(--text-3, #6B6B6B); }
.rd__family[aria-pressed="true"] .rd__cat-sub, .rd__family:hover .rd__cat-sub { color: var(--text-2, #4A4A4A); }
/* the definition, in its own frame across the full width: the three categories as bullets, the placement rule beside them */
.rd__catnote { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 13px var(--gutter, 17px); padding: 13px 17px; border: 1px solid var(--struct-card, rgba(26,26,26,.2)); background: var(--surface, #EDF1F4); font-size: 13px; line-height: 1.5; color: var(--text-2, #4A4A4A); }
.rd__catlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.rd__catlist li { padding-left: 17px; position: relative; }
.rd__catlist li::before { content: "▸"; position: absolute; left: 0; color: var(--text-3, #6B6B6B); }
.rd__catlist b { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 500; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-1, #1A1A1A); }
.rd__catrule { margin: 0; color: var(--text-3, #6B6B6B); }
@media (max-width: 768px) {
  .rd__categories { grid-template-columns: minmax(0, 1fr); }
  .rd__catdivider { width: auto; height: 1px; }
  .rd__catnote { grid-template-columns: minmax(0, 1fr); }
}
/* the 0.4–0.6 family row (two buttons), kept for pages written against it */
.rd__families { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter, 17px); }
.rd__family {
  min-height: 38px; padding: 9px 13px; width: 100%;
  background: var(--surface, #EDF1F4); border: 1px solid var(--struct-med, rgba(26,26,26,.5)); cursor: pointer;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-2, #4A4A4A);
}
.rd__family:hover { border-color: var(--green, #008432); background: var(--green-10, rgba(0,132,50,.1)); color: var(--ink, #1B1B1B); }
.rd__family[aria-pressed="true"] { border-color: var(--green, #008432); box-shadow: inset 0 0 0 1px var(--green, #008432); background: var(--green-10, rgba(0,132,50,.1)); color: var(--ink, #1B1B1B); }

/* ---- the model tiles: nine slots per category (owner ruling 2026-10-12), live thumbnails with the model's name beneath;
   a slot whose model is not yet built is a greyed, unclickable tile naming it ---- */
.rd__presets { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--gutter, 17px); margin: 0; padding: 0; list-style: none; }
.rd__presets li[hidden] { display: none; }
.rd__thumb--planned { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--canvas, #F4F7F9); border: 1px dashed var(--struct-card, rgba(26,26,26,.2)); box-sizing: border-box; }
.rd__preset--planned { cursor: not-allowed; opacity: .55; }
.rd__preset--planned:hover { border-color: var(--struct-med, rgba(26,26,26,.5)); background: var(--surface, #EDF1F4); color: var(--text-2, #4A4A4A); }
.rd__planned { display: block; font-size: 10px; letter-spacing: .03em; text-transform: none; color: var(--text-3, #6B6B6B); margin-top: 2px; }
/* the preset chips under the mode line: one per preset of the active model; the pressed one takes the site's green treatment */
.rd__chips { display: flex; flex-wrap: wrap; gap: 8px 13px; }
.rd__chips[hidden] { display: none; }
.rd__chip {
  min-height: 24px; padding: 4px 11px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-2, #4A4A4A); background: var(--surface, #EDF1F4); border: 1px solid var(--struct-med, rgba(26,26,26,.5)); cursor: pointer;
}
.rd__chip:hover, .rd__chip:focus-visible { border-color: var(--green, #008432); background: var(--green-10, rgba(0,132,50,.1)); color: var(--ink, #1B1B1B); }
.rd__chip[aria-pressed="true"] { border-color: var(--green, #008432); box-shadow: inset 0 0 0 1px var(--green, #008432); background: var(--green-10, rgba(0,132,50,.1)); color: var(--ink, #1B1B1B); }
.rd__preset-line { margin: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .03em; color: var(--text-3, #6B6B6B); }
/* each parameter's unit, after its number box; the seed row */
.rd__unit { grid-column: 2 / 4; margin-top: -6px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .03em; color: var(--text-3, #6B6B6B); }
.rd__unit:empty { display: none; }
.rd__seedrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; }
.rd__seedrow label { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2, #4A4A4A); white-space: nowrap; }
.rd__seedrow input[type="number"] { width: 100%; }
.rd__ctl--small { min-height: 24px; padding: 3px 11px; font-size: 11px; width: auto; }
.rd__modelrow { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.rd__modelrow > label { display: grid; gap: 5px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2, #4A4A4A); min-width: 0; }
.rd__modelrow > label[hidden] { display: none; }
.rd__modelrow input[type="text"] { height: 24px; box-sizing: border-box; padding: 0 6px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--text-1, #1A1A1A); background: var(--paper, #FFFDF3); border: 1px solid var(--struct-med, rgba(26,26,26,.5)); width: 100%; }
.rd__preset {
  display: grid; justify-items: center; gap: 6px; padding: 6px 6px 7px; width: 100%;
  background: var(--surface, #EDF1F4); border: 1px solid var(--struct-med, rgba(26,26,26,.5)); cursor: pointer;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-2, #4A4A4A); line-height: 1;
}
.rd__thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--struct-card, rgba(26,26,26,.2)); image-rendering: auto; }
.rd__preset:hover { border-color: var(--green, #008432); background: var(--green-10, rgba(0,132,50,.1)); color: var(--ink, #1B1B1B); }
.rd__preset[aria-pressed="true"] { border-color: var(--green, #008432); box-shadow: inset 0 0 0 1px var(--green, #008432); background: var(--green-10, rgba(0,132,50,.1)); color: var(--ink, #1B1B1B); }
.rd__preset[aria-pressed="true"] .rd__thumb { border-color: var(--green, #008432); }
@media (max-width: 900px) { .rd__presets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- the stage: the field (16:9, wide) beside the controls panel; the field sets the height and the
   panel is pinned to exactly that height, so the two always make one rectangle ---- */
.rd { container-type: inline-size; }
.rd__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gutter, 17px); }
@container (min-width: 1000px) {
  .rd__stage { padding-right: calc((100% - var(--gutter, 17px)) * 7 / 23 + var(--gutter, 17px)); }
  .rd__panel { position: absolute; top: 0; bottom: 0; right: 0; width: calc((100% - var(--gutter, 17px)) * 7 / 23); overflow: auto; box-sizing: border-box; }
}
.rd__mode { margin: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-1, #1A1A1A); }
.rd__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0;
  border: 1px solid var(--embed-frame, rgba(26,26,26,.6));
  background-color: var(--canvas, #F4F7F9);
  background-image: linear-gradient(var(--hair, rgba(26,26,26,.1)) 1px, transparent 1px), linear-gradient(90deg, var(--hair, rgba(26,26,26,.1)) 1px, transparent 1px);
  background-size: 38px 38px;
}
/* touch-action none: a finger on the field paints; the rails beside the field keep a thumb's scroll room (the host page's law) */
.rd__canvas { display: block; width: 100%; height: 100%; image-rendering: auto; background: #000; cursor: crosshair; touch-action: none; }
.rd__frame > .corner { position: absolute; width: var(--corner-size, 38px); height: var(--corner-size, 38px); border: 0 solid var(--ink, #1B1B1B); pointer-events: none; z-index: 1; }
.rd__frame > .corner--tl { top: 0; left: 0;  border-top-width: var(--corner-w, 2px); border-left-width: var(--corner-w, 2px); }
.rd__frame > .corner--tr { top: 0; right: 0; border-top-width: var(--corner-w, 2px); border-right-width: var(--corner-w, 2px); }
.rd__frame > .corner--bl { bottom: 0; left: 0;  border-bottom-width: var(--corner-w, 2px); border-left-width: var(--corner-w, 2px); }
.rd__frame > .corner--br { bottom: 0; right: 0; border-bottom-width: var(--corner-w, 2px); border-right-width: var(--corner-w, 2px); }
.rd__frame:hover > .corner, .rd__frame:focus-within > .corner { border-color: var(--green, #008432); }
@media (max-width: 480px) { .rd__frame > .corner { width: calc(var(--corner-size, 38px) / 2); height: calc(var(--corner-size, 38px) / 2); } }

/* ---- in-field controls, top right: stacked, equal widths ---- */
.rd__hud { position: absolute; top: 17px; right: 17px; z-index: 2; display: grid; gap: 8px; justify-items: stretch; }
.rd__ctl {
  min-width: 24px; min-height: 24px; width: 100%; text-align: left;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-1, #1A1A1A); background: var(--surface, #EDF1F4); border: 1px solid var(--struct-med, rgba(26,26,26,.5));
  padding: 7px 13px; cursor: pointer;
}
.rd__ctl:hover, .rd__ctl:focus-visible, .rd__ctl:active, .rd__ctl[aria-expanded="true"], .rd__ctl[aria-pressed="true"] {
  border-color: var(--green, #008432); color: var(--ink, #1B1B1B);
  background: var(--surface, #EDF1F4);
  background: color-mix(in srgb, var(--green, #008432) 12%, var(--surface, #EDF1F4));
}
.rd__ctl[aria-expanded="true"], .rd__ctl[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--green, #008432); }
.rd__loading { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.rd__loading::before { content: ""; width: 18px; height: 18px; margin-right: 10px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: rd-spin .8s linear infinite; }
.rd__loading > span { display: inline-flex; align-items: center; }
.rd__loading[hidden] { display: none; }
@keyframes rd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rd__loading::before { animation: none; } }
.rd__colors { display: grid; }
.rd__colors-menu {
  position: absolute; top: 0; right: calc(100% + 8px); z-index: 3; margin: 0; padding: 0; border: 0; min-width: 0;
  display: grid; background: var(--surface, #EDF1F4);
  border-left: 1px solid var(--struct-med, rgba(26,26,26,.5)); border-bottom: 1px solid var(--struct-med, rgba(26,26,26,.5));
  clip-path: inset(0 0 100% 0); visibility: hidden; pointer-events: none;
  transition: clip-path .3s ease, visibility 0s linear .3s;
}
.rd__colors-menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; pointer-events: auto; transition: clip-path .3s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .rd__colors-menu { transition: none; } }
.rd__colors-menu legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rd__palette {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px;
  padding: 6px 10px; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-60, #5c5c5c);
}
.rd__palette input { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rd__palette:hover, .rd__palette:has(input:focus-visible) { border-color: var(--green, #008432); background: var(--green-10, rgba(0,132,50,.1)); color: var(--ink, #1B1B1B); }
.rd__palette:has(input:checked) { border-color: var(--green, #008432); box-shadow: inset 0 0 0 1px var(--green, #008432); background: var(--green-10, rgba(0,132,50,.1)); color: var(--ink, #1B1B1B); }
.rd__swatches { display: inline-grid; grid-template-columns: repeat(4, 11px); gap: 2px; }
.rd__sw { width: 11px; height: 11px; border: 1px solid var(--struct-med, rgba(26,26,26,.5)); }
.rd__sw--black { background: #000000; }  .rd__sw--white { background: #FFFFFF; }
.rd__sw--red { background: #D30011; }    .rd__sw--orange { background: #FD5F00; }
.rd__sw--yellow { background: #FDD100; } .rd__sw--green { background: #009149; }
.rd__sw--cyan { background: #0095DA; }   .rd__sw--blue { background: #003E99; }
.rd__sw--violet { background: #7728A8; } .rd__sw--buff { background: #FEEEA3; }

/* ---- the controls panel: Controls → Accessibility, then the parameter and resolution groups (unheaded; named for assistive tech).
   Spacing on the host's scale: 17px padding, 13px between groups and rows, 17px between paired boxes ---- */
.rd__panel { border: 1px solid var(--struct-card, rgba(26,26,26,.2)); background: var(--surface, #EDF1F4); padding: 17px; display: grid; align-content: start; gap: 13px; min-width: 0; }
.rd__panel-h { margin: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: 14px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: var(--text-1, #1A1A1A); }
.rd__group { display: grid; gap: 13px; padding-top: 13px; border-top: 1px solid var(--hair, rgba(26,26,26,.1)); }
.rd__group-h { margin: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3, #6B6B6B); }
.rd__param { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; }
.rd__param > * { min-width: 0; }
.rd__param label { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2, #4A4A4A); white-space: nowrap; }
/* sliders: the track in the site's structural line color on the panel surface; the green only on the thumb */
.rd__param input[type="range"] { width: 100%; min-width: 0; min-height: 24px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.rd__param input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--struct-med, rgba(26,26,26,.5)); border: 0; }
.rd__param input[type="range"]::-moz-range-track { height: 2px; background: var(--struct-med, rgba(26,26,26,.5)); border: 0; }
.rd__param input[type="range"]::-moz-range-progress { height: 2px; background: var(--green, #008432); }
.rd__param input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -6px; background: var(--green, #008432); border: 1px solid var(--surface, #EDF1F4); border-radius: 0; }
.rd__param input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; background: var(--green, #008432); border: 1px solid var(--surface, #EDF1F4); border-radius: 0; }
.rd__param input[type="range"]:focus-visible { outline: 2px solid var(--green, #008432); outline-offset: 2px; }
/* the number boxes show the whole value: wide enough for eight characters and the spinner, no taller than a control */
.rd__param input[type="number"], .rd__select {
  height: 24px; box-sizing: border-box; padding: 0 2px 0 6px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px;
  color: var(--text-1, #1A1A1A); background: var(--paper, #FFFDF3); border: 1px solid var(--struct-med, rgba(26,26,26,.5));
}
.rd__param input[type="number"] { width: 11.5ch; }
.rd__select { width: 100%; cursor: pointer; }
/* paired boxes: Resolution beside Brush width; the measure spans both */
.rd__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.rd__pair > label { display: grid; gap: 5px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2, #4A4A4A); min-width: 0; }
.rd__ticks { grid-column: 2; display: flex; justify-content: space-between; margin-top: -9px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .03em; color: var(--text-3, #6B6B6B); }
.rd__ticks span:nth-child(2) { color: var(--text-2, #4A4A4A); }
.rd__number-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the accessibility toggles: a check box with its name inside one labelled control, Reduced motion and Hover mode
   sharing one line (the Resolution / Brush width split), stacking on phones; a checked toggle takes the site's pressed treatment */
.rd__pair--acc { align-items: stretch; }
@media (max-width: 480px) { .rd__pair--acc { grid-template-columns: 1fr; } }
.rd__toggle {
  display: flex; align-items: center; gap: 10px; min-height: 24px; padding: 7px 13px; box-sizing: border-box; min-width: 0;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-1, #1A1A1A); background: var(--paper, #FFFDF3); border: 1px solid var(--struct-med, rgba(26,26,26,.5)); cursor: pointer;
}
.rd__toggle input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--green, #008432); cursor: pointer; }
.rd__toggle:hover, .rd__toggle:has(input:focus-visible) { border-color: var(--green, #008432); background: var(--green-10, rgba(0,132,50,.1)); color: var(--ink, #1B1B1B); }
.rd__toggle:has(input:checked), .rd__toggle[aria-pressed="true"] { border-color: var(--green, #008432); box-shadow: inset 0 0 0 1px var(--green, #008432); background: var(--green-10, rgba(0,132,50,.1)); color: var(--ink, #1B1B1B); }
.rd__hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-3, #6B6B6B); }
.rd__measure { margin: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .03em; color: var(--text-3, #6B6B6B); }

/* ---- under the tool: the state line, then the active pattern's note ---- */
.rd__state { margin: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2, #4A4A4A); }
.rd__notes { margin: 0; }
.rd__note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2, #4A4A4A); }
.rd__note b { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 500; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-1, #1A1A1A); }
.rd__note math { font-size: 1em; }

.rd :focus-visible { outline: 2px solid var(--green, #008432); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- below tablet: the field becomes a square and the panel sits beneath it ---- */
@media (max-width: 768px) {
  .rd__frame { aspect-ratio: 1 / 1; }
  .rd__hud { top: 9px; right: 9px; }
}

/* Windows high contrast: keep the frame, brackets, thumbnails and swatches visible */
@media (forced-colors: active) {
  .rd__frame, .rd__frame > .corner, .rd__sw, .rd__thumb { border-color: CanvasText; }
  .rd__preset[aria-pressed="true"], .rd__family[aria-pressed="true"], .rd__toggle:has(input:checked) { border-width: 3px; }
  .rd__sw { forced-color-adjust: none; }
}