html,
body[data-system="instrument"] {
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	overflow: hidden;
}

body[data-system="instrument"] {
	--instrument-renderer-inspector-width: var(--instrument-inspector-width);
	/* Focus is ATTENTION, not alarm. The kit's pinned releases alias the focus
	   band to the identity accent, which makes every focused field look like
	   the invalid state. Fixed at the source in super-interface-kit
	   (tokens.css, 2026-08-18); this override carries the decision to every
	   already-pinned release. Red stays reserved for invalid. */
	--instrument-color-focus: var(--instrument-color-text);
	position: relative;
	background: #000000;
}

[data-system="instrument"] *,
[data-system="instrument"] *::before,
[data-system="instrument"] *::after {
	box-sizing: border-box;
}

[data-system="instrument"] [hidden] {
	display: none !important;
}

[data-system="instrument"] .instrument-renderer-surface {
	position: fixed;
	inset: 0;
	z-index: var(--instrument-z-base);
}

/* An open inspector owns its column — the renderer surface yields instead of
   running underneath it. Renderers re-read their canvas size per frame. */
body[data-system="instrument"][data-controls="visible"] .instrument-renderer-surface {
	inset-inline-end: var(--instrument-renderer-inspector-width);
}

[data-system="instrument"] .instrument-renderer-chrome {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	display: grid;
	/* The first column holds the brand trail, which is navigation and must
	   never clip. No tool shows the overview rail, so locking this column to
	   the rail's width only truncated long trails; the descriptive middle
	   zone is what gives way instead (see the media rules below). */
	grid-template-columns:
		max-content
		minmax(0, 1fr)
		var(--instrument-renderer-inspector-width);
	align-items: stretch;
	block-size: var(--instrument-chrome-height);
	color: var(--instrument-color-text);
	background: color-mix(
		in srgb,
		var(--instrument-color-canvas) 88%,
		transparent
	);
	z-index: var(--instrument-z-sheet);
}

[data-system="instrument"] .instrument-renderer-chrome::after {
	position: absolute;
	inset: auto 0 0;
	block-size: 1px;
	background: var(--instrument-rule-horizontal);
	content: "";
}

[data-system="instrument"] .instrument-renderer-chrome-zone {
	position: relative;
	display: flex;
	align-items: center;
	min-inline-size: 0;
	padding-inline: var(--instrument-space-6);
	font-size: var(--instrument-font-size-small);
	font-weight: var(--instrument-font-weight-semibold);
}

[data-system="instrument"] .instrument-renderer-chrome-zone + .instrument-renderer-chrome-zone::before {
	position: absolute;
	inset: 0 auto 0 0;
	inline-size: 1px;
	background: var(--instrument-rule-vertical);
	content: "";
}

[data-system="instrument"] .instrument-renderer-chrome-zone--middle {
	gap: var(--instrument-space-6);
	color: var(--instrument-color-text-muted);
}

[data-system="instrument"] .instrument-renderer-chrome-zone--end {
	justify-content: space-between;
}

[data-system="instrument"] .instrument-identity-mark {
	display: inline-block;
	inline-size: var(--instrument-space-1);
	block-size: var(--instrument-identity-mark-size);
	margin-inline-end: var(--instrument-space-2);
	background: var(--instrument-color-accent);
	border-radius: var(--instrument-identity-mark-radius);
}

/* ---------------------------------------------------------------------------
   Brand trail — the gallery masthead carried into every tool.

   One definition here, because fifty pages each carrying their own crumb CSS
   is fifty chances to drift (bw-crumb and cga76-breadcrumb had already
   diverged). Same Tanker face and square accent mark as .gallery-brand in
   gallery.css; the trail reads SUPERMEGA / EXPERIMENTS / TOOL.
   ------------------------------------------------------------------------ */
@font-face {
	font-family: "Tanker";
	src: url("fonts/Tanker-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

[data-system="instrument"] .experiment-brand {
	gap: var(--instrument-space-2);
	overflow: hidden;
	font-family: "Tanker", var(--instrument-font-sans);
	font-weight: var(--instrument-font-weight-regular);
	letter-spacing: var(--instrument-letter-spacing-label);
	white-space: nowrap;
}

[data-system="instrument"] .experiment-brand a {
	color: var(--instrument-color-text);
	text-decoration: none;
}

[data-system="instrument"] .experiment-brand a:hover {
	color: var(--instrument-color-accent);
}

[data-system="instrument"] .experiment-brand-mark {
	flex: none;
	display: inline-block;
	inline-size: var(--instrument-space-4);
	block-size: var(--instrument-space-4);
	background: var(--instrument-color-accent);
}

[data-system="instrument"] .experiment-brand-sep {
	color: var(--instrument-color-text-faint);
	font-family: var(--instrument-font-mono);
}

[data-system="instrument"] .experiment-brand-here {
	overflow: hidden;
	color: var(--instrument-color-text-muted);
	text-overflow: ellipsis;
}

/* The trail must never wrap or clip into the zone beside it. The middle zone
   is the only chrome that carries no navigation, so it is what gives way
   first; when space runs out entirely, the root crumb goes too.
   NOTE: media queries take width, not inline-size — max-inline-size is not a
   media feature and the whole rule is silently dropped (this exact typo is
   why the original bubble-writer rule never fired). */
@media (max-width: 1180px) {
	/* visibility, not display: removing the zone from the grid would slide the
	   end zone into the middle column by auto-placement. The kit's own 767px
	   rule may display:none it because that layout drops to two columns. */
	[data-system="instrument"] .instrument-renderer-chrome-zone--middle {
		visibility: hidden;
	}
}

@media (max-width: 720px) {
	[data-system="instrument"] .experiment-brand [data-crumb="root"],
	[data-system="instrument"] .experiment-brand [data-crumb="root"] + .experiment-brand-sep {
		display: none;
	}
}

[data-system="instrument"] .instrument-renderer-panel {
	position: fixed;
	inset-block: var(--instrument-chrome-height) 0;
	inset-inline-end: 0;
	inline-size: var(--instrument-renderer-inspector-width);
	overflow-y: auto;
	color: var(--instrument-color-text);
	background: color-mix(
		in srgb,
		var(--instrument-color-surface-overlay) 92%,
		transparent
	);
	transition:
		transform var(--instrument-duration-base) var(--instrument-ease-standard),
		opacity var(--instrument-duration-base) var(--instrument-ease-standard);
	z-index: calc(var(--instrument-z-sheet) - 1);
}

[data-system="instrument"] .instrument-renderer-panel::before {
	position: absolute;
	inset: 0 auto 0 0;
	inline-size: 1px;
	background: var(--instrument-rule-vertical);
	content: "";
	pointer-events: none;
}

[data-system="instrument"] .instrument-renderer-panel.hidden {
	transform: translateX(100%);
	opacity: 0;
	pointer-events: none;
}

[data-system="instrument"] .instrument-renderer-panel .instrument-panel {
	min-block-size: 100%;
}

/* The renderer panel's header is the title alone — full weight, in the section
   wash, laid out like the application-window header. Configuration reset and
   controls visibility are chrome verbs: Defaults sits beside Controls in
   .instrument-renderer-chrome-zone--end; there is no Hide button. Decided
   2026-09-21 (Markiian, from the header specimen sheet); the kit carries the
   same title rule from its next release, this mirrors it for every pinned page. */
[data-system="instrument"] .instrument-renderer-panel .instrument-panel-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: var(--instrument-space-3);
}

[data-system="instrument"] .instrument-renderer-panel .instrument-panel-title {
	opacity: 1;
}

[data-system="instrument"] .instrument-renderer-panel-lede {
	margin: 0;
	padding: var(--instrument-space-5) var(--instrument-space-3);
	color: var(--instrument-color-text-muted);
	font-size: var(--instrument-font-size-small);
	line-height: 1.5;
}

[data-system="instrument"] .instrument-renderer-section {
	min-block-size: var(--instrument-space-6);
	padding-inline: var(--instrument-space-3);
	color: var(--instrument-color-text-muted);
	background: var(--instrument-section-wash);
	font-size: var(--instrument-font-size-label);
	font-weight: var(--instrument-font-weight-semibold);
	line-height: var(--instrument-space-6);
	text-transform: uppercase;
}

/* A disclosure inside a renderer panel is a SECTION, and it speaks in the
   section band's voice — the same uppercase wash as .instrument-renderer-
   section, label left, a quiet +/− on the right edge (the reference grammar).
   The kit's default summary is a document-scale header with an accent marker;
   a tool panel needs the denser section register, and this is the renderer
   context's own layer to say so.
   The kit now owns this as data-instrument-variant="section" (super-interface-
   kit 0bf752f); when the lab re-pins a release that ships it, pages can set
   the attribute and this whole block retires. */
[data-system="instrument"] .instrument-renderer-panel .instrument-disclosure {
	background: transparent;
}

/* The wash band is the whole boundary; the kit's rule lines above and below
   each disclosure would double it. */
[data-system="instrument"] .instrument-renderer-panel .instrument-disclosure::before,
[data-system="instrument"] .instrument-renderer-panel .instrument-disclosure::after {
	content: none;
}

[data-system="instrument"] .instrument-renderer-panel .instrument-disclosure > summary {
	align-items: center;
	min-block-size: var(--instrument-space-6);
	padding: 0 var(--instrument-space-3);
	color: var(--instrument-color-text-muted);
	background: var(--instrument-section-wash);
	font-size: var(--instrument-font-size-label);
	line-height: var(--instrument-space-6);
	text-transform: uppercase;
}

[data-system="instrument"] .instrument-renderer-panel .instrument-disclosure > summary::before {
	content: none;
}

[data-system="instrument"] .instrument-renderer-panel .instrument-disclosure > summary::after {
	margin-inline-start: auto;
	color: var(--instrument-color-text-faint);
	content: "+";
	font-family: var(--instrument-font-mono);
}

[data-system="instrument"] .instrument-renderer-panel .instrument-disclosure[open] > summary::after {
	content: "−";
}

[data-system="instrument"] .instrument-renderer-panel .instrument-disclosure > summary:focus-visible {
	outline: var(--instrument-rule-width) solid var(--instrument-color-rule-strong);
	outline-offset: calc(var(--instrument-rule-width) * -1);
}

/* The band already separates; the body keeps only its breathing room.
   The reference rhythm is a 6px beat — head, 6px, row, 6px, row, 6px, next
   head — so the body carries half a space unit and the first block drops its
   own top margin instead of stacking on the band. */
[data-system="instrument"] .instrument-renderer-panel .instrument-disclosure-body::before {
	content: none;
}

[data-system="instrument"] .instrument-renderer-panel .instrument-disclosure-body {
	padding: calc(var(--instrument-space-3) / 2) var(--instrument-space-3);
}

[data-system="instrument"] .instrument-renderer-panel .instrument-disclosure-body .instrument-group > :first-child {
	margin-block-start: 0;
}

[data-system="instrument"] .instrument-renderer-choice,
[data-system="instrument"] .instrument-renderer-actions,
[data-system="instrument"] .instrument-renderer-swatches {
	display: flex;
	gap: var(--instrument-space-1);
	inline-size: 100%;
}

[data-system="instrument"] .instrument-renderer-choice .instrument-action,
[data-system="instrument"] .instrument-renderer-actions .instrument-action {
	flex: 1;
}

[data-system="instrument"] .instrument-renderer-swatches {
	justify-content: flex-end;
}

[data-system="instrument"] .instrument-renderer-swatch {
	position: relative;
	border: 0;
	cursor: pointer;
}

[data-system="instrument"] .instrument-renderer-swatch[aria-pressed="true"]::after {
	position: absolute;
	inset: -3px;
	border: 1px solid var(--instrument-color-accent);
	border-radius: var(--instrument-radius-round);
	content: "";
}

/* ---------------------------------------------------------------------------
   The generated panel — what is left here

   The seven arrangements the shell emits (the choice grid, the stacked row, the
   section reset, the colour list, the stage, the viewport bar and the
   inapplicable row) moved UP into the kit once three pages rendered them, so
   they arrive with the pinned release. What stays below is this host's own
   business: how a generated panel sits inside the renderer's fixed columns.
   --------------------------------------------------------------------------- */

/* The chrome's end column is exactly the panel's width, so two more actions in
   it need the zone's own spacing back. Measured: five children come to 275px in
   a 320px column, which fits on the tighter padding and not on the wide one.
   Only a page carrying a generated panel is affected. */
body[data-shell-ready] .instrument-renderer-meta {
	white-space: nowrap;
}

body[data-shell-ready] .instrument-renderer-chrome-zone--end {
	justify-content: flex-end;
	gap: var(--instrument-space-1);
	padding-inline: var(--instrument-space-3);
}

/* Column widths for a generated row, scoped to the generated panel so the 99
   hand-written ones keep whatever they set for themselves. Measured from
   dash-loom, which sized these by hand: a value cell wide enough for 0.0090,
   and a slider that does not swallow the row. */
[data-system="instrument"] .instrument-renderer-checkbox {
	inline-size: var(--instrument-control-min-height);
	block-size: var(--instrument-control-min-height);
}

[data-system="instrument"] .instrument-renderer-panel .instrument-row-control select,
[data-system="instrument"] .instrument-renderer-panel .instrument-row-control input[type="text"] {
	inline-size: 100%;
}

[data-system="instrument"] .instrument-renderer-panel .instrument-row-value {
	min-inline-size: 48px;
}

/* The generated panel's column widths. They sit AFTER the renderer-panel rules
   above on purpose: `[data-shell-panel] .instrument-row-value.instrument-mini-
   field` and `[data-system="instrument"] .instrument-renderer-panel
   .instrument-row-value` are both (0,3,0), so before the move the 48px minimum
   won and the 96px one was a declaration that did nothing. */
[data-shell-panel] .instrument-row-value.instrument-mini-field {
	flex: none;
	/* 96, not dash-loom's 84: a generated cell also carries its unit suffix, and
	   "1280 px" truncated to "12…" at 84. */
	inline-size: 96px;
	min-inline-size: 96px;
}

[data-shell-panel] .instrument-row-value.instrument-mini-field .instrument-mini-input {
	flex: 1 1 auto;
	inline-size: 100%;
	min-inline-size: 0;
}

[data-shell-panel] .instrument-row .instrument-range {
	flex: 1 1 auto;
	inline-size: auto;
	min-inline-size: 0;
}

[data-shell-panel] .instrument-row .instrument-mini-select,
[data-shell-panel] .instrument-row .instrument-mini-select-input {
	flex: 1 1 auto;
	inline-size: 100%;
	min-inline-size: 0;
}

[data-system="instrument"] .instrument-renderer-meta {
	color: var(--instrument-color-text-faint);
	font-family: var(--instrument-font-mono);
	font-size: var(--instrument-font-size-label);
}

[data-system="instrument"] .instrument-renderer-hud {
	position: fixed;
	inset-inline-start: var(--instrument-space-3);
	color: #ffffff;
	font-size: var(--instrument-font-size-label);
	font-weight: var(--instrument-font-weight-semibold);
	mix-blend-mode: difference;
	pointer-events: none;
	z-index: var(--instrument-z-raised);
}

[data-system="instrument"] .instrument-renderer-hud--top {
	inset-block-start: calc(var(--instrument-chrome-height) + var(--instrument-space-3));
}

[data-system="instrument"] .instrument-renderer-hud--bottom {
	inset-block-end: var(--instrument-space-3);
}

[data-system="instrument"] .instrument-renderer-credit {
	position: fixed;
	inset-inline-start: 50%;
	inset-block-end: var(--instrument-space-3);
	max-inline-size: calc(100% - var(--instrument-renderer-inspector-width) - var(--instrument-space-8));
	transform: translateX(-50%);
	color: #ffffff;
	font-size: var(--instrument-font-size-label);
	text-align: center;
	mix-blend-mode: difference;
	opacity: 0.54;
	pointer-events: none;
	z-index: var(--instrument-z-raised);
}

[data-system="instrument"] .instrument-mode-dock.instrument-renderer-dock {
	inset-inline-start: calc((100% - var(--instrument-renderer-inspector-width)) / 2);
	gap: var(--instrument-space-4);
	inline-size: max-content;
	z-index: var(--instrument-z-sheet);
}

body[data-system="instrument"][data-controls="hidden"] .instrument-mode-dock.instrument-renderer-dock {
	inset-inline-start: 50%;
}

[data-system="instrument"] .instrument-material-grid,
[data-system="instrument"] .instrument-material-grain {
	position: fixed;
}

body[data-system="instrument"][data-instrument-embed="true"] .instrument-renderer-chrome,
body[data-system="instrument"][data-instrument-embed="true"] .instrument-mode-dock.instrument-renderer-dock,
body[data-system="instrument"][data-instrument-embed="true"] .instrument-renderer-credit,
body[data-system="instrument"][data-instrument-embed="true"] .instrument-renderer-hud--bottom {
	display: none;
}

body[data-system="instrument"][data-instrument-embed="true"] .instrument-renderer-panel {
	inset-block-start: 0;
}

body[data-system="instrument"][data-instrument-embed="true"] .instrument-renderer-hud--top {
	inset-block-start: var(--instrument-space-3);
}

@media (max-width: 767px) {
	body[data-system="instrument"] {
		--instrument-renderer-inspector-width: min(360px, 100%);
	}

	[data-system="instrument"] .instrument-renderer-chrome {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	[data-system="instrument"] .instrument-renderer-chrome-zone--middle {
		display: none;
	}

	[data-system="instrument"] .instrument-renderer-panel {
		inline-size: 100%;
		max-inline-size: var(--instrument-renderer-inspector-width);
	}

	[data-system="instrument"] .instrument-mode-dock.instrument-renderer-dock,
	body[data-system="instrument"][data-controls="hidden"] .instrument-mode-dock.instrument-renderer-dock {
		inset-inline-start: var(--instrument-space-2);
	}

	[data-system="instrument"] .instrument-renderer-credit {
		display: none;
	}

	[data-system="instrument"] .instrument-renderer-hud--bottom {
		inset-block-end: calc(var(--instrument-dock-min-height) + var(--instrument-space-5));
	}
}