:root {
	--surface-card: #121a24;
	--surface-input: #0d141d;
	--border-default: #293747;
	--border-input: #546a80;
	--text-primary: #dce5ee;
	--text-secondary: #91a2b2;
	--action-primary: #18864f;
	--action-primary-hover: #126a3e;
	--link-accent: #6ee7a8;
	--focus-ring: #50d890;
}

html {
  font-size: 14px;
  color-scheme: dark;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin: 0 0 60px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.08), transparent 32rem),
    #0b0f14;
  color: #dce5ee;
}

.app-shell .navbar,
.app-shell .footer {
  background: #101720;
  border-color: #263342 !important;
}

.app-shell .navbar-brand {
  color: #f3f7fb;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.app-shell .nav-link,
.app-shell .footer a {
  color: #aebdca;
}

.app-shell .nav-link:hover,
.app-shell .footer a:hover {
  color: #fff;
}

.card {
  background: var(--surface-card);
  border-color: var(--border-default);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.22);
}

.form-control,
.form-select {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-input);
  border-radius: 0.5rem;
  background-color: var(--surface-input);
  color: #e7eef5;
  font: inherit;
  line-height: 1.5;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--surface-input);
  border-color: var(--focus-ring);
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(80, 216, 144, 0.18);
}

.text-muted {
  color: var(--text-secondary) !important;
}

.app-shell main .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.6rem 0.9rem;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	font: inherit;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.app-shell main .btn-primary {
	border-color: #24a866;
	background: var(--action-primary);
	color: #fff;
}

.app-shell main .btn-primary:hover {
	background: var(--action-primary-hover);
}

.app-shell main .btn-outline-primary {
	border-color: var(--link-accent);
	background: transparent;
	color: var(--link-accent);
}

.app-shell main .btn-outline-primary:hover {
	background: var(--surface-input);
}

.app-shell main .btn-outline-danger {
	border-color: #e27985;
	background: transparent;
	color: #ffc4cb;
}

.app-shell main .btn:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
}

.btn-primary {
  --bs-btn-bg: #18864f;
  --bs-btn-border-color: #24a866;
  --bs-btn-hover-bg: #126a3e;
  --bs-btn-hover-border-color: #32b871;
  --bs-btn-active-bg: #147340;
  --bs-btn-active-border-color: #24a866;
}

.btn-outline-primary {
  --bs-btn-color: #65dda0;
  --bs-btn-border-color: #32b871;
  --bs-btn-hover-bg: #18864f;
  --bs-btn-hover-border-color: #32b871;
}

.signal-chain-panel {
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid #2d3d4e;
  border-radius: 0.6rem;
  background:
    linear-gradient(rgba(53, 70, 88, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 70, 88, 0.18) 1px, transparent 1px),
    #0a1017;
  background-size: 2rem 2rem;
}

.signal-chain-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 8), minmax(7.5rem, 1fr));
  align-items: center;
  gap: 1.8rem;
  min-width: 72rem;
  padding: 1.5rem 0.5rem;
}

.signal-block {
  position: relative;
  grid-column: var(--grid-column);
  display: grid;
  grid-row: var(--grid-row, 1);
  min-height: 5.25rem;
  place-content: center;
  padding: 0.7rem;
  border: 2px solid #58708a;
  border-radius: 0.45rem;
  background: linear-gradient(145deg, #253547, #182330);
  color: #f4f8fb;
  text-align: center;
  box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.35);
  font: inherit;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.signal-block[aria-pressed="true"] { outline: 3px solid #65dda0; outline-offset: 3px; }
.signal-block:focus-visible { outline: 3px solid #f4f8fb; outline-offset: 5px; }
.block-settings[hidden] { display: none; }
.parameter-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .5rem 1rem; }
.parameter-list dt, .parameter-list dd { margin: 0; overflow-wrap: anywhere; }

.proposal-editor { min-width: 0; }
.editor-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.editor-field { display: grid; align-content: start; gap: .4rem; min-width: 0; }
.editor-field input, .editor-field select, .editor-comment textarea, .version-picker select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: .65rem .75rem;
  border: 1px solid var(--border-input);
  border-radius: .45rem;
  color: var(--text-primary);
  background: var(--surface-input);
  font: inherit;
}
.editor-field :is(input, select):focus-visible, .editor-comment textarea:focus-visible, .version-picker select:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.editor-field small { color: var(--text-secondary); }
.editor-field [aria-invalid="true"] { border-color: #ff9ca7; }
.editor-comment { display: grid; gap: .5rem; margin: 1rem 0; max-width: 42rem; }
.editor-status { margin: .75rem 0; color: var(--text-secondary); }
.editor-error { border-left: 3px solid #ff9ca7; padding: .75rem 1rem; color: #ffc4cb; }
.version-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: end; gap: 1rem; }
.version-picker label { display: grid; gap: .5rem; }
.revision-history { display: grid; gap: .75rem; padding: 0; list-style: none; }
.revision-history li { padding: .75rem 0; border-bottom: 1px solid var(--border-default); }
.revision-history time { display: block; margin-top: .3rem; color: var(--text-secondary); font-size: .85rem; }
.revision-history p { margin: .4rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.semantic-diff { width: 100%; border-collapse: collapse; }
.semantic-diff caption { text-align: left; margin-bottom: .75rem; color: var(--text-secondary); }
.semantic-diff th, .semantic-diff td { padding: .75rem; text-align: left; border-bottom: 1px solid var(--border-default); overflow-wrap: anywhere; }
.semantic-diff .diff-before { color: #ffc4cb; }
.semantic-diff .diff-after { color: #87edb7; }
@media (max-width: 575px) {
  .semantic-diff { font-size: .85rem; table-layout: fixed; }
  .semantic-diff th, .semantic-diff td { padding: .6rem .35rem; }
  .parameter-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .proposal-editor .ui-panel { padding: 1rem; }
}

.signal-block.has-route::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 2px);
  width: 1.8rem;
  height: 2px;
  background: #55d996;
  box-shadow: 0 0 0.4rem rgba(85, 217, 150, 0.65);
}

.signal-block.has-route::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.28rem);
  left: calc(100% + 1.45rem);
  border-top: 0.32rem solid transparent;
  border-bottom: 0.32rem solid transparent;
  border-left: 0.48rem solid #55d996;
}

.signal-block-position {
  color: #8ca1b5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
}

.signal-block-instance {
  color: #6ee7a8;
  font-size: 0.78rem;
}

.signal-block-input,
.signal-block-output {
  border-color: #4ba3e3;
}

.signal-block-amp {
  border-color: #e5a94d;
  background: linear-gradient(145deg, #4c3820, #251d16);
}

.signal-block-cab {
  border-color: #cb8068;
  background: linear-gradient(145deg, #452b28, #241919);
}

.signal-chain-caption {
  color: #91a2b2;
  font-size: 0.84rem;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.tone-target-prompt:focus::placeholder { color: transparent; }

.validation-summary-valid {
	display: none;
}

.d-none,
[hidden] {
	display: none !important;
}

.account-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: 28rem;
	margin: 2.5rem auto;
	padding: 1rem;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.5;
}

.account-page *,
.account-page *::before,
.account-page *::after {
	box-sizing: border-box;
}

.account-page-single {
	justify-content: center;
}

.account-eyebrow {
	margin: 0 0 1rem;
	color: var(--link-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.account-card {
	min-width: 0;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid var(--border-default);
	border-radius: 1rem;
	background: var(--surface-card);
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.25);
}

.account-card-header {
	margin-bottom: 1.75rem;
}

.account-card-header .account-eyebrow {
	margin-bottom: 0.6rem;
}

.account-card h1 {
	margin: 0;
	color: #f3f7fb;
	font-size: 1.8rem;
	font-weight: 650;
	line-height: 1.25;
	letter-spacing: -0.03em;
}

.account-card-header > p:last-child {
	margin: 0.75rem 0 0;
	color: var(--text-secondary);
	font-size: 0.9rem;
}

.account-form {
	display: grid;
	gap: 1.25rem;
}

.account-field {
	display: grid;
	gap: 0.5rem;
	min-width: 0;
}

.account-field label {
	color: var(--text-primary);
	font-size: 0.875rem;
	font-weight: 500;
}

.account-control {
	display: block;
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--border-input);
	border-radius: 0.5rem;
	background: var(--surface-input);
	color: #e7eef5;
	font: inherit;
	font-size: 16px;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.account-control:focus {
	outline: none;
	border-color: var(--focus-ring);
	box-shadow: 0 0 0 3px rgba(80, 216, 144, 0.18);
}

.account-code {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.account-submit {
	min-height: 48px;
	margin-top: 0.25rem;
	padding: 0.75rem 1rem;
	border: 1px solid #24a866;
	border-radius: 0.5rem;
	background: var(--action-primary);
	color: #fff;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.account-submit:hover {
	background: var(--action-primary-hover);
}

.account-submit:focus-visible,
.account-card a:focus-visible {
	outline: 2px solid var(--link-accent);
	outline-offset: 4px;
}

.account-card a {
	color: var(--link-accent);
	text-decoration: none;
	text-underline-offset: 0.2em;
}

.account-card a:hover {
	color: #a3f3c6;
	text-decoration: underline;
}

.account-help {
	margin-top: 1.25rem;
	font-size: 0.85rem;
}

.account-help p {
	margin: 0.4rem 0 0;
	color: var(--text-secondary);
	font-size: 0.8rem;
}

.account-card-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.6rem;
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border-default);
	color: var(--text-secondary);
	font-size: 0.85rem;
}

.account-validation.validation-summary-errors {
	margin-bottom: 1.5rem;
	padding: 0.85rem 1rem;
	border: 1px solid #914650;
	border-radius: 0.5rem;
	background: #331d26;
	color: #ffc4cb;
	font-size: 0.875rem;
}

.account-validation ul {
	margin: 0;
	padding-left: 1rem;
}

@media (max-width: 767px) {
	.account-page {
		grid-template-columns: minmax(0, 28rem);
		justify-content: center;
		gap: 1.5rem;
		margin: 1rem auto;
		padding: 0.5rem;
	}
}

.app-shell .navbar .container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.app-shell .container {
	box-sizing: border-box;
	width: 100%;
	max-width: 1140px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 1rem;
	padding-left: 1rem;
}

.table-responsive {
	max-width: 100%;
	overflow-x: auto;
}

.app-navigation {
	flex: 1;
	min-width: 0;
}

.app-navigation .navbar-nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.account-navigation {
	margin-left: auto;
}

.app-navigation button.nav-link {
	border: 0;
	background: transparent;
	font: inherit;
	cursor: pointer;
}

.app-navigation .nav-link {
	display: inline-block;
	padding: 0.65rem 0;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.page-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1.5rem 0;
}

.page-heading > div {
	min-width: 0;
}

.page-heading h1 {
	margin: 0;
	font-size: 1.75rem;
	line-height: 1.3;
}

.page-heading p {
	max-width: 42rem;
	margin: 0.5rem 0 0;
	color: var(--text-secondary);
}

.page-actions,
.page-pagination {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.page-actions .btn,
.compact-form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
}

.app-navigation a:focus-visible,
.app-navigation button:focus-visible,
.ui-panel summary:focus-visible,
.page-actions a:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
}

.page-pagination {
	margin: 1rem 0;
}

.page-pagination p {
	margin: 0;
	color: var(--text-secondary);
	font-size: 0.85rem;
}

.back-link {
	display: inline-block;
	margin-bottom: 0.6rem;
	color: var(--link-accent);
	font-size: 0.85rem;
}

.ui-panel,
.table-panel {
	min-width: 0;
	margin: 1rem 0;
	border: 1px solid var(--border-default);
	border-radius: 0.75rem;
	background: var(--surface-card);
}

.ui-panel {
	padding: 1.5rem;
	overflow-wrap: anywhere;
}

.ui-panel > .card-body {
	padding: 0;
}

.ui-panel h2 {
	font-size: 1.15rem;
}

.ui-panel summary {
	padding: 0.25rem 0;
	cursor: pointer;
	font-weight: 600;
}

.ui-panel details[open] > summary,
.ui-panel[open] > summary {
	margin-bottom: 1rem;
}

.table-panel {
	max-width: 100%;
	overflow-x: auto;
}

.job-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.job-table th,
.job-table td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--border-default);
	text-align: left;
	vertical-align: middle;
}

.job-table th {
	color: var(--text-secondary);
	font-weight: 600;
	white-space: nowrap;
}

.job-table tbody tr:last-child td {
	border-bottom: 0;
}

.job-table td:first-child {
	white-space: nowrap;
}

.job-table a {
	display: inline-block;
	min-width: 10rem;
	color: var(--link-accent);
	text-decoration: none;
}

.job-table a:hover {
	text-decoration: underline;
}

.job-status {
	display: inline-block;
	padding: 0.2rem 0.55rem;
	border: 1px solid var(--border-input);
	border-radius: 0.4rem;
	color: var(--text-primary);
	font-size: 0.8rem;
	white-space: nowrap;
}

.detail-grid {
	display: grid;
	grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr);
	gap: 0.6rem 1.25rem;
	margin: 1rem 0;
}

.detail-grid dt {
	color: var(--text-secondary);
	font-weight: 500;
}

.detail-grid dd {
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
}

.job-prompt {
	margin: 1rem 0;
	padding: 1rem;
	border: 1px solid var(--border-default);
	border-radius: 0.5rem;
	background: var(--surface-input);
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.job-diagnostics {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border-default);
	font-size: 0.875rem;
}

.workspace-note {
	margin: 0.75rem 0;
	color: var(--text-secondary);
	font-size: 0.85rem;
}

.workspace-note summary {
	cursor: pointer;
}

.empty-state {
	padding: 2.5rem 1.5rem;
	text-align: center;
}

.empty-state p {
	color: var(--text-secondary);
}

.compact-form {
	display: grid;
	gap: 0.75rem;
	max-width: 28rem;
}

.metric-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.metric {
	padding: 1rem;
	border: 1px solid var(--border-default);
	border-radius: 0.5rem;
	background: var(--surface-input);
}

.metric strong {
	display: block;
	font-size: 1.75rem;
	font-variant-numeric: tabular-nums;
}

.metric span {
	color: var(--text-secondary);
	font-size: 0.85rem;
}

.row-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.row-actions button {
	min-height: 44px;
}

@media (max-width: 767px) {
	.app-navigation {
		flex-basis: 100%;
	}

	.account-navigation {
		margin-left: 0;
	}

	.page-heading {
		align-items: flex-start;
	}

	.page-actions {
		width: 100%;
	}

	.page-actions > a {
		flex: 1;
	}

	.ui-panel {
		padding: 1rem;
	}

	.detail-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.25rem;
	}

	.detail-grid dd {
		margin-bottom: 0.65rem;
	}

	.metric-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.form-control,
	.form-select {
		min-width: 0;
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.account-control {
		transition: none;
	}
}

.tone-designer-page {
	--surface-card: #111b29;
	--surface-input: #0c1522;
	--text-primary: #edf2f8;
	--text-secondary: #a5b3c7;
	background: #0b111a;
}
.tone-designer-page .container { max-width: 1440px; }
.tone-designer { min-width: 0; }
.designer-workspace {
	display: grid;
	grid-template-columns: minmax(300px, .85fr) minmax(0, 1.45fr);
	gap: 20px;
	align-items: start;
	margin-top: 20px;
}
.designer-workspace > *, .designer-workspace .card-body { min-width: 0; }
.tone-designer .card { background: var(--surface-card); border-radius: 12px; }
.tone-designer .card-body { padding: 22px; }
.designer-rig { border: 0; padding: 0; margin-top: 18px; }
.designer-rig .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.designer-rig .row > div { width: auto; padding: 0; }
.designer-rig > .row > div:first-child { grid-column: 1 / -1; }
.designer-rig select:disabled { opacity: 1; color: var(--text-secondary); }
.designer-transcript { display: grid; gap: 14px; border-top: 1px solid var(--border-default); margin-top: 20px; padding-top: 18px; }
.designer-message { border-left: 2px solid var(--border-default); padding-left: 12px; min-width: 0; }
.designer-message.assistant { border-color: #88ddb3; }
.designer-message strong { color: var(--text-secondary); font-size: .75rem; }
.designer-message p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0; }
.designer-composer { margin-top: 20px; }
.tone-target-prompt:focus::placeholder { color: transparent; }
.designer-generate { width: 100%; }
.designer-empty { text-align: center; padding: 35px 16px; }
.designer-empty > div { color: #88ddb3; font-size: 28px; }
.designer-empty p { color: var(--text-secondary); max-width: 320px; margin: auto; }
.designer-new-preset { margin-top: 12px; }
.designer-secondary-tools { border-top: 1px solid var(--border-default); margin-top: 22px; padding-top: 16px; }
.tone-match-spectrum svg { display: block; width: 100%; height: 220px; }
.spectrum-grid { stroke: var(--border-default); }
.spectrum-label { fill: var(--text-secondary); font-size: 11px; }
.spectrum-curve { fill: none; stroke-width: 1.8; }
.spectrum-user { stroke: #6ab8f5; }
.spectrum-target { stroke: #e5b370; stroke-dasharray: 5 4; }
.spectrum-preview { stroke: #88ddb3; stroke-width: 2.5; }
.spectrum-curve[hidden] { display: none; }
.spectrum-legend { display: flex; gap: 7px; flex-wrap: wrap; margin: 8px 0 16px; }
.spectrum-legend button { font: inherit; font-size: .75rem; border: 1px solid var(--border-default); border-radius: 5px; background: var(--surface-input); color: var(--text-primary); padding: 6px 8px; }
.spectrum-legend button::before { content: ""; display: inline-block; width: 12px; height: 3px; margin-right: 7px; vertical-align: middle; background: #6ab8f5; }
.spectrum-legend [data-spectrum-toggle="target"]::before { background: #e5b370; }
.spectrum-legend [data-spectrum-toggle="preview"]::before { background: #88ddb3; }
.spectrum-legend [aria-pressed="false"] { opacity: .45; }
.tone-designer details > summary { cursor: pointer; }
.tone-designer :is(p, li, small) { overflow-wrap: anywhere; }
.tone-designer .signal-chain-grid {
	grid-template-columns: repeat(var(--grid-columns, 8), 10.5rem);
	width: max-content;
	min-width: 0;
	gap: 1.2rem;
	padding: 1rem .3rem;
}
.tone-designer .signal-chain-panel { padding: .7rem; margin-top: 12px; max-width: 100%; }
.tone-designer .signal-block.has-route::after { width: 1.2rem; }
.tone-designer .signal-block.has-route::before { left: calc(100% + .85rem); }
.tone-designer .block-settings { margin-top: 16px; background: var(--surface-input); }
.tone-designer .editor-fields { margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.designer-recommendation { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.designer-reset { font: inherit; font-size: .7rem; color: #88ddb3; background: transparent; border: 1px solid var(--border-input); border-radius: 5px; padding: 4px 7px; }
.designer-value-track { position: relative; margin: 4px 3px; padding-bottom: 8px; }
.designer-value-track input[type="range"] { width: 100%; padding: 0; border: 0; min-height: 24px; accent-color: #88ddb3; }
.designer-value-track span { position: absolute; bottom: 0; width: 2px; height: 7px; background: #88ddb3; transform: translateX(-50%); pointer-events: none; }
.tone-designer :is(button, a, summary, input, select, textarea):focus-visible { outline: 2px solid #88ddb3; outline-offset: 3px; }

.signal-block { --family-color: #2d3a3e; }
.signal-block-input { --family-color: #002179; }
.signal-block-output { --family-color: #004100; }
.signal-block-amp { --family-color: #1d1c1c; }
.signal-block-cab { --family-color: #2d3a3e; }
.signal-block-chorus { --family-color: #167ac8; }
.signal-block-delay { --family-color: #0e4172; }
.signal-block-drive { --family-color: #721a11; }
.signal-block-gate, .signal-block-gate-expander, .signal-block-gate---expander { --family-color: #684301; }
.signal-block-peq, .signal-block-parametric-eq { --family-color: #9c571e; }
.signal-block-reverb { --family-color: #44206c; }
.signal-block {
	background: var(--family-color);
	background: linear-gradient(145deg, color-mix(in srgb, var(--family-color) 88%, white), var(--family-color) 65%, color-mix(in srgb, var(--family-color) 85%, black));
	border: 2px solid color-mix(in srgb, var(--family-color) 65%, #a5b3c7);
	border-radius: 5px;
	color: white;
	box-shadow: inset 0 1px 0 #ffffff14;
}
.signal-block .signal-block-position, .signal-block .signal-block-instance { color: #fff; }
.tone-designer .signal-block > strong { white-space: normal; overflow-wrap: normal; font-size: .875rem; }
.tone-designer .signal-block { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.tone-designer .signal-block-instance { overflow-wrap: normal; }
.signal-block-amp { background: radial-gradient(ellipse at 50% 75%, #8d73373d, transparent 68%), #1d1c1c; }
.signal-block-amp > strong { border-top: 3px dotted #a59468; padding-top: 4px; }
@media (max-width: 850px) {
	.designer-workspace { grid-template-columns: minmax(0, 1fr); }
	.tone-designer .card-body { padding: 18px; }
}
@media (max-width: 440px) {
	.tone-designer .card-body { padding: 15px; }
	.tone-designer .editor-fields { grid-template-columns: minmax(0, 1fr); }
	.tone-designer .page-actions > * { max-width: 100%; }
	.tone-designer .version-picker { grid-template-columns: minmax(0, 1fr); }
}