/* ============================================================================
EUCLID — UI STYLESHEET
On-chain generative synthesizer · Apex II · by Hideki Tsukamoto
Visual system derived from BRAINSTEM (Distance Fields collective).
Typeface: Trim. Grid: power-of-two. Discipline: razor-sharp, pixel-aligned.
This file is the single source of truth. Every literal here is intentional.
Do not introduce values outside the scales below.
============================================================================ */
/* ----------------------------------------------------------------------------
0 · FONT
Two weights only. Regular for data + body, Medium for emphasis/headers.
---------------------------------------------------------------------------- */
@font-face {
font-family: "Trim";
src: url("fonts/Trim-Regular.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Trim";
src: url("fonts/Trim-Medium.woff2") format("woff2");
font-weight: 500;
font-display: swap;
}
/* ----------------------------------------------------------------------------
1 · TOKENS
---------------------------------------------------------------------------- */
:root {
/* — Surfaces — */
--eu-bg: #070808; /* canvas — near-pure black */
--eu-bg-raised: #0c0d0e; /* panel / inset */
--eu-bg-block: #15171a; /* dim filled meter segment */
--eu-bg-hatch: #0a0b0c; /* collapsed/empty track fill */
/* — Monochrome ink ramp (text + linework) — */
--eu-ink-0: #f2f3f4; /* pure white · active value, selection text */
--eu-ink-1: #c9cbce; /* primary · titles, bold label half */
--eu-ink-2: #8a8e92; /* secondary · light label half, values */
--eu-ink-3: #565a5e; /* tertiary · captions, axis labels */
--eu-ink-4: #34383b; /* faint · disabled, ghost */
/* — Lines — */
--eu-rule: #1c1f22; /* hairline rule (1px) */
--eu-rule-strong: #2a2e32; /* divider between active rows */
--eu-tick: #24282b; /* vertical tick-division below header rules */
--eu-cap: #f2f3f4; /* the bright END-CAP tick — signature detail */
/* — Accents (EUCLID extends BRAINSTEM's monochrome; use SPARINGLY) — */
--eu-cyan: #2ef0c0; /* PRIMARY · active, transport, selection, focus */
--eu-blue: #5e90d8; /* channel data — default lane color */
--eu-magenta: #f03090; /* accent channel / alert / over-threshold */
--eu-green: #1e9a66; /* secondary channel group */
--eu-yellow: #e8c33b; /* DYNAMIC signal — binding-mapper cords/ports */
/* — Power-of-two spacing scale (base unit = 8px) — */
--eu-u: 8px; /* the unit. all spacing is a power-of-two multiple */
--eu-2: 2px;
--eu-4: 4px;
--eu-8: 8px;
--eu-16: 16px;
--eu-32: 32px;
--eu-64: 64px;
--eu-128:128px;
/* — Type scale (px) — */
--eu-t-cap: 11px; /* captions, axis, micro-labels */
--eu-t-label: 13px; /* section + control labels (small-caps) */
--eu-t-body: 16px; /* running text */
--eu-t-val-s: 22px; /* inline values */
--eu-t-val: 32px; /* readouts */
--eu-t-disp: 48px; /* display numerals */
/* — Tracking — */
--eu-track-label: 0.085em; /* small-caps labels */
--eu-track-cap: 0.12em; /* tiny captions */
--eu-track-tight: 0.005em; /* display numerals */
/* — Geometry — */
--eu-hair: 1px; /* every border/rule is exactly 1px, never blurred */
--eu-row: 32px; /* track row height (4 units) — shared by overview */
--eu-node: 8px; /* ring-node diameter on meters */
}
/* ----------------------------------------------------------------------------
2 · ROOT / RESET
---------------------------------------------------------------------------- */
.eu {
background: var(--eu-bg);
color: var(--eu-ink-2);
font-family: "Trim", "Helvetica Neue", Arial, sans-serif;
font-weight: 400;
font-size: var(--eu-t-body);
line-height: 1;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
font-variant-numeric: tabular-nums; /* numerals MUST align in columns */
}
.eu *, .eu *::before, .eu *::after { box-sizing: border-box; }
/* ----------------------------------------------------------------------------
3 · SMALL-CAPS LABELS + BOLD/LIGHT LABEL PAIRS
The BRAINSTEM label idiom: a bright leading token + a dim trailing token,
e.g. ALLOC heap · BUFFER perm · HIGH frequency channel
Markup: ALLOC HEAP
---------------------------------------------------------------------------- */
.eu-label {
font-size: var(--eu-t-label);
letter-spacing: var(--eu-track-label);
text-transform: uppercase;
color: var(--eu-ink-1);
font-weight: 400;
}
.eu-cap {
font-size: var(--eu-t-cap);
letter-spacing: var(--eu-track-cap);
text-transform: uppercase;
color: var(--eu-ink-3);
font-weight: 400;
}
.eu-pair { color: var(--eu-ink-3); font-size: var(--eu-t-label);
letter-spacing: var(--eu-track-label); text-transform: uppercase; }
.eu-pair b { color: var(--eu-ink-1); font-weight: 500; } /* leading token */
/* ----------------------------------------------------------------------------
4 · NUMERIC READOUTS
Light-weight, tabular, large. Caption sits beneath in small-caps.
---------------------------------------------------------------------------- */
.eu-value { font-size: var(--eu-t-val); color: var(--eu-ink-0);
font-weight: 400; letter-spacing: var(--eu-track-tight);
font-variant-numeric: tabular-nums; line-height: 1; }
.eu-value--dim { color: var(--eu-ink-3); }
.eu-display { font-size: var(--eu-t-disp); color: var(--eu-ink-0);
font-weight: 400; letter-spacing: var(--eu-track-tight);
font-variant-numeric: tabular-nums; line-height: 1; }
/* ----------------------------------------------------------------------------
5 · THE RULE + END-CAP ★ SIGNATURE ★
A section is a small-caps title sitting ABOVE a full-width 1px rule.
ORDER, top to bottom: title → rule → content.
The title labels the bar from above (BRAINSTEM); the content region hangs
BELOW the same rule. The rule carries:
· a bright END-CAP tick at its left origin (.eu-section__rule::before)
· faint vertical tick-divisions at grid columns (--eu-col background)
Markup:
---------------------------------------------------------------------------- */
.eu-section__title {
font-size: var(--eu-t-label);
letter-spacing: var(--eu-track-label);
text-transform: uppercase;
color: var(--eu-ink-3); /* trailing qualifier color = dim */
font-weight: 400;
margin-bottom: var(--eu-8); /* 8px gap from title down to the rule */
}
/* The section title IS a label-pair: a bright PRIMARY term + a dim qualifier,
carrying two related pieces of information as one header.
Markup: BANDWIDTH per stem
*/
.eu-section__title b {
color: var(--eu-ink-1); /* leading primary term = bright */
font-weight: 500;
}
/* the rule that sits directly UNDER the title */
.eu-section__rule {
position: relative;
height: var(--eu-hair);
background: var(--eu-rule);
}
/* bright end-caps: short thin WHITE horizontal segments capping BOTH ends of
the rule — a start cap and an end cap. Shorter + thinner than a column tick. */
.eu-section__rule::before,
.eu-section__rule::after {
content: "";
position: absolute;
top: -1px;
width: 10px; height: 1px;
background: var(--eu-cap);
}
.eu-section__rule::before { left: 0; } /* start cap */
.eu-section__rule::after { right: 0; } /* end cap */
.eu-section__body { padding-top: var(--eu-16); }
/* A bare measured rule (no title) — ticks every column.
Set --eu-col to the column pitch; ticks drop 5px below the rule. */
.eu-rule {
position: relative;
height: var(--eu-hair);
background: var(--eu-rule);
}
.eu-rule::before,
.eu-rule::after { /* horizontal start + end caps, short + thin */
content: "";
position: absolute; top: -1px; width: 10px; height: 1px; background: var(--eu-cap);
}
.eu-rule::before { left: 0; }
.eu-rule::after { right: 0; }
.eu-rule--ticked {
background:
/* vertical column ticks, 5px tall, hanging below */
repeating-linear-gradient(90deg,
var(--eu-tick) 0, var(--eu-tick) 1px,
transparent 1px, transparent var(--eu-col, 96px)) bottom / 100% 5px no-repeat,
/* the rule itself */
linear-gradient(var(--eu-rule), var(--eu-rule)) top / 100% 1px no-repeat;
height: 6px;
}
/* ----------------------------------------------------------------------------
6 · METER / BAR with RING NODES ★ SIGNATURE ★
A horizontal hairline terminated and jointed by hollow ring nodes.
Filled segments (solid / dim) + dotted connectors carry the value.
---------------------------------------------------------------------------- */
.eu-bar {
position: relative;
height: var(--eu-node);
display: flex;
align-items: center;
}
.eu-bar__line { flex: 1; height: var(--eu-hair); background: var(--eu-rule); }
.eu-bar__line--dotted {
background: repeating-linear-gradient(90deg,
var(--eu-ink-3) 0, var(--eu-ink-3) 2px, transparent 2px, transparent 6px);
height: var(--eu-hair);
}
.eu-bar__fill { height: 4px; background: var(--eu-ink-0); } /* solid value */
.eu-bar__fill--dim { height: 4px; background: var(--eu-ink-4); } /* track/ghost */
/* the ring node — hollow circle end-cap */
.eu-node {
width: var(--eu-node); height: var(--eu-node);
border: var(--eu-hair) solid var(--eu-ink-2);
border-radius: 50%;
background: var(--eu-bg);
flex: 0 0 auto;
}
.eu-node--filled { background: var(--eu-ink-0); border-color: var(--eu-ink-0); }
/* ----------------------------------------------------------------------------
7 · TRACK STRIP (EUCLID core)
16 channels, indexed 00–15 (2-digit tabular). Each row:
[index] [M] [S] | lane
Row height is --eu-row and is SHARED by the overview/summary bar so the two
read as one continuous grid. Lanes are 1px-bordered clips in channel color.
---------------------------------------------------------------------------- */
.eu-track {
display: flex;
align-items: stretch;
height: var(--eu-row);
border-bottom: var(--eu-hair) solid var(--eu-rule);
}
.eu-track__index {
width: 32px;
display: flex; align-items: center;
font-size: var(--eu-t-label);
color: var(--eu-ink-2);
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
}
.eu-track.is-sel .eu-track__index { color: var(--eu-cyan); }
/* M / S square toggles — exactly --eu-row tall, 1px hairline */
.eu-ms {
width: 24px;
display: flex; align-items: center; justify-content: center;
margin: 4px 0 4px 4px;
border: var(--eu-hair) solid var(--eu-rule-strong);
font-size: var(--eu-t-cap);
letter-spacing: 0.06em;
color: var(--eu-ink-3);
cursor: pointer;
user-select: none;
}
.eu-ms:hover { border-color: var(--eu-ink-3); color: var(--eu-ink-2); }
.eu-ms.is-mute { color: var(--eu-magenta); border-color: var(--eu-magenta); }
.eu-ms.is-solo { color: var(--eu-cyan); border-color: var(--eu-cyan); }
.eu-lane {
position: relative;
flex: 1;
margin-left: var(--eu-8);
align-self: center;
height: 24px;
/* The tool look: segments sit on a charcoal lane carrying the Binder's grid.
A vertical line every 8 seconds (the timeline is 128s → 128/8 = 16 cells →
6.25% each); each 8s cell spans two grid units. Every lane shares the same
width and left edge, so the lines align across all 16 rows into one board
grid. */
background-color: transparent; /* segments sit straight on the page black — no grey lane fill */
background-image: linear-gradient(to right, var(--cb-grid-line, #1e2023) 1px, transparent 1px);
background-size: 6.25% 100%;
border-radius: 3px;
overflow: hidden;
}
/* a clip / note block in the lane */
.eu-clip {
position: absolute; top: 0; bottom: 0;
border: var(--eu-hair) solid var(--eu-blue);
background: color-mix(in oklab, var(--eu-blue) 16%, transparent);
}
.eu-clip--cyan { border-color: var(--eu-cyan);
background: color-mix(in oklab, var(--eu-cyan) 14%, transparent); }
.eu-clip--magenta { border-color: var(--eu-magenta);
background: color-mix(in oklab, var(--eu-magenta) 16%, transparent); }
.eu-clip--green { border-color: var(--eu-green);
background: color-mix(in oklab, var(--eu-green) 18%, transparent); }
.eu-clip--ghost { border-color: var(--eu-ink-4); background: transparent; }
/* collapsed / empty track — a faint diagonal hatch over the charcoal lane */
.eu-track--empty .eu-lane {
background-color: transparent; /* no grey fill — the faint hatch alone marks an empty lane */
background-image: repeating-linear-gradient(45deg,
transparent 0, transparent 5px, var(--eu-rule) 5px, var(--eu-rule) 6px);
background-size: auto;
}
/* ----------------------------------------------------------------------------
8 · OVERVIEW / SUMMARY BAR
A per-channel summary that is a literal extension of the track grid:
identical row height + baseline + bottom rule. NOT a separate widget.
---------------------------------------------------------------------------- */
.eu-summary { display: flex; align-items: stretch; height: var(--eu-row);
border-bottom: var(--eu-hair) solid var(--eu-rule); }
.eu-summary__val { width: 48px; display: flex; align-items: center;
font-size: var(--eu-t-label); color: var(--eu-ink-2);
font-variant-numeric: tabular-nums; }
.eu-summary__spark{ flex: 1; align-self: center; height: var(--eu-hair);
background: var(--eu-rule); position: relative; }
/* ----------------------------------------------------------------------------
9 · BUTTONS
Rectangular, 1px hairline, small-caps. Default ghost; active fills.
Transport PLAY uses cyan. Padding on the 8px grid.
---------------------------------------------------------------------------- */
.eu-btn {
display: inline-flex; align-items: center; gap: var(--eu-8);
height: 24px; padding: 0 var(--eu-8);
border: var(--eu-hair) solid var(--eu-rule-strong);
background: transparent;
color: var(--eu-ink-2);
font-family: inherit; font-size: var(--eu-t-cap);
letter-spacing: 0.08em; text-transform: uppercase;
cursor: pointer; line-height: 1;
}
.eu-btn:hover { border-color: var(--eu-ink-3); color: var(--eu-ink-1); }
.eu-btn.is-active { background: var(--eu-ink-0); border-color: var(--eu-ink-0);
color: var(--eu-bg); }
.eu-btn--accent { border-color: var(--eu-cyan); color: var(--eu-cyan); }
.eu-btn--accent:hover { background: var(--eu-cyan); color: var(--eu-bg); }
/* ----------------------------------------------------------------------------
10 · KNOB
Circular 1px ring with an arc indicator + small-caps label + value.
---------------------------------------------------------------------------- */
.eu-knob {
width: 48px; height: 48px; border-radius: 50%;
border: var(--eu-hair) solid var(--eu-rule-strong);
position: relative;
}
.eu-knob__arc { /* conic arc shows the set amount */
position: absolute; inset: -1px; border-radius: 50%;
background: conic-gradient(var(--eu-cyan) calc(var(--eu-amt,0.5) * 1turn),
transparent 0);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
}
.eu-knob__pointer { /* the indicator notch */
position: absolute; left: 50%; top: 2px; width: 1px; height: 10px;
background: var(--eu-ink-0); transform-origin: bottom center;
}
/* ----------------------------------------------------------------------------
11 · TIMELINE RULER
Major ticks at 8s, minor between. Numerals tabular, small-caps captions.
---------------------------------------------------------------------------- */
.eu-ruler {
height: 12px; position: relative;
background:
repeating-linear-gradient(90deg, var(--eu-ink-4) 0, var(--eu-ink-4) 1px,
transparent 1px, transparent calc(var(--eu-col, 96px) / 8)) bottom / 100% 4px no-repeat,
repeating-linear-gradient(90deg, var(--eu-ink-3) 0, var(--eu-ink-3) 1px,
transparent 1px, transparent var(--eu-col, 96px)) bottom / 100% 8px no-repeat;
}