/* =========================================================================
   Studio Variant — Start a project

   Page-scoped styling only. Every colour, space, radius, font and easing
   comes from the shared tokens in sv.css. Selectors are all st-*, so this
   layer cannot reach any other page.

   The page has one accent that follows the customer: brass for creators,
   titanium for commercial. It is set once on <body data-mode> and read
   everywhere as --st-accent.
   ========================================================================= */

/* The script shows and hides blocks with the hidden attribute; it must win
   over any display rule below. */
.st-page [hidden] {
	display: none !important;
}

.st-page {
	--st-accent: var(--sv-titanium);
	--st-accent-bright: var(--sv-titanium-bright);
	--st-accent-wash: var(--sv-titanium-wash);
	--st-accent-line: var(--sv-titanium-line);
}
.st-page[data-mode="creator"] {
	--st-accent: var(--sv-brass);
	--st-accent-bright: var(--sv-brass-bright);
	--st-accent-wash: var(--sv-brass-wash);
	--st-accent-line: var(--sv-brass-line);
}

/* --------------------------------- Intro -------------------------------- */

.st-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(var(--sv-7), 6vw, var(--sv-9)) 0 clamp(var(--sv-6), 4vw, var(--sv-8));
	background-color: var(--sv-bg);
	background-image: var(--sv-texture-carbon);
}
.st-hero-inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: clamp(var(--sv-6), 4vw, var(--sv-8));
	align-items: end;
}
.st-hero-text {
	display: flex;
	flex-direction: column;
	gap: var(--sv-5);
	max-width: 52ch;
}
.st-hero h1 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: clamp(2.5rem, 5.6vw, 4.5rem);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.034em;
	text-transform: uppercase;
	color: var(--sv-text);
}
.st-sub {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	font-weight: 500;
	color: var(--sv-mist-200);
}
.st-hero-notes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
}
.st-hero-notes li {
	display: flex;
	align-items: center;
	gap: var(--sv-3);
}
.st-hero-notes i {
	width: 10px;
	height: 1px;
	background: var(--st-accent);
}

/* Title-block plate: the drawing-sheet corner, used as the hero's art */
.st-hero-plate {
	justify-self: end;
	width: min(100%, 420px);
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-xs);
	background: rgba(8, 9, 10, 0.55);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.st-hero-plate-row {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: var(--sv-3);
	padding: 11px var(--sv-4);
	border-top: 1px solid var(--sv-border);
}
.st-hero-plate-row:first-child {
	border-top: 0;
}
.st-hero-plate-row span {
	color: var(--sv-text-faint);
}
.st-hero-plate-row b {
	font-weight: 500;
	color: var(--sv-mist-200);
}
.st-blink {
	color: var(--sv-success) !important;
}
.st-blink::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sv-success);
	margin-right: var(--sv-2);
	animation: st-pulse 2.4s ease-in-out infinite;
}
@keyframes st-pulse {
	0%,
	100% {
		opacity: 0.35;
	}
	50% {
		opacity: 1;
	}
}

/* ------------------------------- The Studio ----------------------------- */

.st-studio {
	position: relative;
	padding: clamp(var(--sv-7), 6vw, var(--sv-9)) 0;
	border-top: 1px solid var(--sv-border-hairline);
	background: rgba(8, 9, 10, 0.55);
}
.st-studio-head {
	display: flex;
	flex-direction: column;
	gap: var(--sv-4);
	max-width: 62ch;
	margin-bottom: var(--sv-6);
}

/* Mode gate */
.st-gate {
	display: flex;
	flex-direction: column;
	gap: var(--sv-4);
	margin-bottom: var(--sv-6);
	padding: var(--sv-5);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-graphite-850);
}
.st-gate-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sv-4);
}
.st-gate-card {
	appearance: none;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	padding: var(--sv-5);
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-graphite-900);
	color: var(--sv-text);
	cursor: pointer;
	transition: border-color var(--sv-base) var(--sv-ease-precision), background-color var(--sv-base);
}
.st-gate-card strong {
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	font-weight: 500;
}
.st-gate-code {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.2em;
	color: var(--sv-text-faint);
}
.st-gate-desc {
	font-size: var(--sv-body-s);
	line-height: 1.55;
	color: var(--sv-text-muted);
}
.st-gate-go {
	margin-top: auto;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.st-gate-card.is-creator .st-gate-go {
	color: var(--sv-brass-bright);
}
.st-gate-card.is-commercial .st-gate-go {
	color: var(--sv-titanium-bright);
}
.st-gate-card.is-creator:hover {
	border-color: var(--sv-brass);
	background: var(--sv-brass-wash);
}
.st-gate-card.is-commercial:hover {
	border-color: var(--sv-titanium);
	background: var(--sv-titanium-wash);
}
.st-gate-card:focus-visible {
	outline: none;
	box-shadow: var(--sv-focus);
}

/* Progress indicator: 01 CHOOSE — 02 CONFIGURE — 03 BRIEF. Compact,
   near the workspace header; highlights on scroll, jumps on click. */
.st-stagebar {
	list-style: none;
	margin: 0 0 var(--sv-3);
	padding: 0;
	display: flex;
	width: max-content;
	max-width: 100%;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-graphite-900);
	overflow: hidden;
}
.st-stagebar li + li {
	border-left: 1px solid var(--sv-border);
}
.st-stagebar button {
	appearance: none;
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--sv-2);
	padding: 11px var(--sv-4);
	border: 0;
	background: transparent;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--sv-base), background-color var(--sv-base);
}
.st-stagebar button i {
	font-style: normal;
	color: var(--sv-graphite-400);
}
.st-stagebar button:hover {
	color: var(--sv-text);
}
.st-stagebar li.is-done button {
	color: var(--sv-text-muted);
}
.st-stagebar li.is-done button i {
	color: var(--st-accent);
}
.st-stagebar li.is-current button {
	color: var(--sv-text);
	background: var(--st-accent-wash);
	box-shadow: inset 0 -2px 0 var(--st-accent);
}

/* Workspace grid: everything | project summary. The summary column spans
   the workspace and the set-up beneath it, so it can stay in view. */
.st-work {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(250px, 296px);
	gap: var(--sv-4);
	align-items: start;
}
.st-main {
	display: flex;
	flex-direction: column;
	gap: var(--sv-5);
	min-width: 0;
}
/* Upper band: canvas toolbar | concept canvas */
.st-workspace {
	display: grid;
	grid-template-columns: 212px minmax(0, 1fr);
	gap: var(--sv-4);
	align-items: start;
	min-width: 0;
}
/* Set-up beneath: 01 Choose · 02 Configure · 03 Brief, full width */
.st-setup {
	display: flex;
	flex-direction: column;
	gap: var(--sv-4);
	min-width: 0;
}
.st-panel {
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-graphite-850);
	padding: var(--sv-4);
	display: flex;
	flex-direction: column;
	gap: var(--sv-4);
}
.st-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-3);
	padding-bottom: var(--sv-3);
	border-bottom: 1px solid var(--sv-border);
}
.st-panel-head .sv-label b {
	color: var(--st-accent);
	font-weight: 500;
	margin-right: var(--sv-2);
}
.st-mode-swap,
.st-linkbtn {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--sv-graphite-500);
}
.st-mode-swap:hover,
.st-linkbtn:hover {
	color: var(--sv-text);
}
.st-mode-swap span {
	color: var(--st-accent);
}
.st-block {
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	animation: st-in var(--sv-slow) var(--sv-ease-settle);
}
@keyframes st-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.st-empty,
.st-hint,
.st-note {
	margin: 0;
	font-size: var(--sv-body-s);
	line-height: 1.55;
	color: var(--sv-text-muted);
}
.st-note {
	padding: var(--sv-3);
	border: 1px dashed var(--sv-border-strong);
	border-radius: var(--sv-radius-xs);
}

/* Three ways to begin */
.st-begin {
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
}
.st-begin-card {
	appearance: none;
	text-align: left;
	display: grid;
	grid-template-columns: 28px 1fr;
	grid-template-rows: auto auto;
	column-gap: var(--sv-3);
	padding: var(--sv-3) var(--sv-4);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-graphite-900);
	color: var(--sv-text);
	cursor: pointer;
	transition: border-color var(--sv-base) var(--sv-ease-precision), background-color var(--sv-base);
}
.st-begin-card i {
	grid-row: 1 / span 2;
	align-self: start;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-xs);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	font-style: normal;
	color: var(--sv-text-muted);
}
.st-begin-card strong {
	font-family: var(--sv-font-display);
	font-weight: 500;
	font-size: var(--sv-body);
}
.st-begin-card span {
	font-size: var(--sv-body-s);
	line-height: 1.5;
	color: var(--sv-text-muted);
}
.st-begin-card:hover {
	border-color: var(--sv-graphite-400);
	background: var(--sv-surface-hover);
}
.st-begin-card.is-selected {
	border-color: var(--st-accent-line);
	background: var(--st-accent-wash);
	box-shadow: inset 2px 0 0 var(--st-accent);
}
.st-begin-card.is-selected i {
	border-color: var(--st-accent);
	color: var(--st-accent);
}

/* Chips: categories, products, materials, fonts */
.st-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
}
.st-chip {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: var(--sv-2);
	padding: 9px var(--sv-3);
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-graphite-900);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-text-secondary);
	cursor: pointer;
	transition: border-color var(--sv-base) var(--sv-ease-precision), background-color var(--sv-base), color var(--sv-base);
}
.st-chip:hover {
	border-color: var(--sv-graphite-400);
	color: var(--sv-text);
}
.st-chip[aria-pressed="true"] {
	border-color: var(--st-accent);
	background: var(--st-accent-wash);
	color: var(--sv-text);
}
.st-chip small {
	font-size: inherit;
	color: var(--sv-text-faint);
	letter-spacing: 0.08em;
	text-transform: none;
}

/* Shape tiles: drawn outlines, so a design is chosen visually */
.st-shapes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: var(--sv-2);
}
.st-shape {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sv-2);
	padding: var(--sv-3) var(--sv-2);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-graphite-900);
	color: var(--sv-text-muted);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color var(--sv-base) var(--sv-ease-precision), background-color var(--sv-base), color var(--sv-base);
}
.st-shape svg {
	display: block;
	width: 56px;
	height: 36px;
}
.st-shape svg .st-shape-line {
	fill: none;
	stroke: var(--sv-mist-400);
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
}
.st-shape:hover {
	border-color: var(--sv-graphite-400);
	color: var(--sv-text);
}
.st-shape[aria-pressed="true"] {
	border-color: var(--st-accent);
	background: var(--st-accent-wash);
	color: var(--sv-text);
}
.st-shape[aria-pressed="true"] svg .st-shape-line {
	stroke: var(--st-accent-bright);
}

/* Fonts */
.st-fonts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: var(--sv-2);
}
.st-font {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: var(--sv-2) var(--sv-3);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-graphite-900);
	color: var(--sv-text);
	cursor: pointer;
	transition: border-color var(--sv-base) var(--sv-ease-precision), background-color var(--sv-base);
}
.st-font b {
	font-weight: 500;
	font-size: 1.05rem;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.st-font span {
	font-family: var(--sv-font-mono);
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}
.st-font:hover {
	border-color: var(--sv-graphite-400);
}
.st-font[aria-pressed="true"] {
	border-color: var(--st-accent);
	background: var(--st-accent-wash);
}

/* Sliders, segments, swatches, quantity */
.st-sliders {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-3) var(--sv-4);
}
.st-slider {
	display: flex;
	align-items: center;
	gap: var(--sv-2);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
	min-width: 0;
}
.st-slider input[type="range"] {
	accent-color: var(--st-accent);
	width: 110px;
}
.st-slider b {
	font-weight: 500;
	color: var(--sv-text);
	min-width: 5ch;
}
.st-seg {
	display: inline-flex;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-xs);
	overflow: hidden;
}
.st-seg button {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 8px var(--sv-3);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
	cursor: pointer;
}
.st-seg button + button {
	border-left: 1px solid var(--sv-border-strong);
}
.st-seg button[aria-pressed="true"] {
	background: var(--st-accent-wash);
	color: var(--sv-text);
}
.st-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
}
.st-swatch {
	appearance: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid var(--sv-graphite-600);
	padding: 0;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
	transition: border-color var(--sv-base), transform var(--sv-fast);
}
.st-swatch:hover {
	transform: translateY(-1px);
}
.st-swatch[aria-pressed="true"] {
	border-color: var(--sv-text);
}
.st-qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-3);
}
.st-qty-ctl {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-xs);
	overflow: hidden;
}
.st-qty-ctl button {
	appearance: none;
	width: 36px;
	border: 0;
	background: var(--sv-graphite-900);
	color: var(--sv-text);
	font-family: var(--sv-font-mono);
	cursor: pointer;
}
.st-qty-ctl .sv-input {
	width: 72px;
	text-align: center;
	border: 0;
	border-radius: 0;
	padding: 9px var(--sv-2);
	font-family: var(--sv-font-mono);
	-moz-appearance: textfield;
}
.st-qty-ctl .sv-input::-webkit-outer-spin-button,
.st-qty-ctl .sv-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.st-check {
	display: inline-flex;
	align-items: center;
	gap: var(--sv-2);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
	cursor: pointer;
}
.st-check input {
	accent-color: var(--st-accent);
	margin: 0;
}

/* Commercial questions, revealed one at a time */
.st-cq {
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
}
.st-cq .sv-field {
	animation: st-in var(--sv-slow) var(--sv-ease-settle);
}
.st-cq-dims {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sv-2);
}
.st-cq-dims .sv-input {
	padding: 10px var(--sv-3);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-body-s);
}
.st-cq .st-chips .st-chip {
	padding: 7px var(--sv-3);
}

/* Files */
.st-drop {
	padding: var(--sv-5) var(--sv-4);
}
.st-drop-title {
	margin: 0 0 var(--sv-1);
	font-family: var(--sv-font-display);
	font-weight: 500;
	color: var(--sv-text);
}
.st-drop:focus-visible {
	outline: none;
	box-shadow: var(--sv-focus);
}
.st-files {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
}
.st-file {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	align-items: center;
	gap: var(--sv-3);
	padding: var(--sv-2) var(--sv-3);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-graphite-900);
}
.st-file-thumb {
	width: 44px;
	height: 34px;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-bg-sunken) center / cover no-repeat;
	display: grid;
	place-items: center;
	font-family: var(--sv-font-mono);
	font-size: 0.55rem;
	letter-spacing: 0.1em;
	color: var(--sv-text-faint);
}
.st-file-meta {
	min-width: 0;
}
.st-file-meta b {
	display: block;
	font-weight: 500;
	font-size: var(--sv-body-s);
	color: var(--sv-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.st-file-meta span {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.1em;
	color: var(--sv-text-faint);
}
.st-file-x {
	appearance: none;
	border: 1px solid transparent;
	background: transparent;
	color: var(--sv-text-faint);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	cursor: pointer;
	padding: 6px;
	border-radius: var(--sv-radius-xs);
}
.st-file-x:hover {
	color: var(--sv-error);
	border-color: rgba(184, 93, 81, 0.4);
}
.st-desc {
	min-height: 150px;
}

/* ------------------------------ The canvas ------------------------------ */

.st-stage {
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	min-width: 0;
}
.st-canvas-wrap {
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-bg-sunken);
	overflow: hidden;
	box-shadow: var(--sv-shadow-raised);
}
.st-canvas-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-3);
	padding: 9px var(--sv-4);
	border-bottom: 1px solid var(--sv-border);
	background: var(--sv-graphite-900);
}
.st-canvas-title {
	margin: 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.st-canvas-title b {
	font-weight: 500;
	color: var(--st-accent);
	margin-right: var(--sv-2);
}
.st-zoom {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	overflow: hidden;
}
.st-zoom button {
	appearance: none;
	border: 0;
	background: transparent;
	width: 28px;
	height: 26px;
	color: var(--sv-text-muted);
	font-family: var(--sv-font-mono);
	cursor: pointer;
}
.st-zoom button:hover {
	color: var(--sv-text);
	background: rgba(255, 255, 255, 0.04);
}
.st-zoom b {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	font-weight: 500;
	color: var(--sv-text-secondary);
	min-width: 4.5ch;
	text-align: center;
}
.st-canvas {
	position: relative;
	aspect-ratio: 4 / 3;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	cursor: crosshair;
}
.st-canvas svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.st-canvas.is-dragover {
	box-shadow: inset 0 0 0 2px var(--st-accent);
}

/* Drawn layers. The classes are read by start.js, so they stay stable. */
.st-c-grid-minor {
	fill: none;
	stroke: rgba(185, 192, 196, 0.05);
	stroke-width: 1;
}
.st-c-grid-major {
	fill: none;
	stroke: rgba(185, 192, 196, 0.11);
	stroke-width: 1;
}
.st-c-axis {
	stroke: rgba(185, 192, 196, 0.22);
	stroke-width: 1;
	stroke-dasharray: 4 6;
}
.st-c-tick {
	stroke: rgba(185, 192, 196, 0.4);
	stroke-width: 1;
}
.st-c-tick-label {
	font-family: var(--sv-font-mono);
	font-size: 8.5px;
	letter-spacing: 0.08em;
	fill: var(--sv-mist-500);
}
.st-c-ruler {
	fill: rgba(16, 18, 19, 0.85);
}
.st-c-corner {
	fill: none;
	stroke: var(--st-accent);
	stroke-width: 1.2;
}
.st-c-dim {
	stroke: var(--sv-mist-400);
	stroke-width: 1;
}
.st-c-dim-label {
	font-family: var(--sv-font-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	fill: var(--sv-mist-200);
}
.st-c-info {
	font-family: var(--sv-font-mono);
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	fill: var(--sv-mist-400);
}
.st-c-info b {
	fill: var(--sv-mist-100);
}
.st-c-hole {
	fill: #08090a;
	stroke: rgba(0, 0, 0, 0.6);
	stroke-width: 1;
}
.st-c-outline {
	fill: none;
	stroke: rgba(255, 255, 255, 0.28);
	stroke-width: 1;
}
.st-c-text {
	cursor: move;
	paint-order: stroke fill;
}
.st-c-image {
	cursor: move;
}
.st-c-selection {
	fill: none;
	stroke: var(--st-accent);
	stroke-width: 1;
	stroke-dasharray: 3 4;
	pointer-events: none;
}
.st-c-placeholder {
	fill: none;
	stroke: var(--sv-mist-500);
	stroke-width: 1.2;
	stroke-dasharray: 6 5;
}
.st-c-envelope {
	fill: rgba(185, 192, 196, 0.04);
	stroke: var(--sv-mist-300);
	stroke-width: 1;
	stroke-dasharray: 5 4;
}
.st-c-empty {
	font-family: var(--sv-font-mono);
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	fill: var(--sv-mist-500);
}

/* Entry motion: the product's outline draws itself, then the brackets and
   dimensions settle. Short by design. */
.st-anim-draw {
	stroke-dasharray: 1200;
	stroke-dashoffset: 1200;
	animation: st-draw 900ms var(--sv-ease-precision) forwards;
}
@keyframes st-draw {
	to {
		stroke-dashoffset: 0;
	}
}
.st-anim-fill {
	animation: st-fill 700ms 300ms var(--sv-ease-settle) both;
}
@keyframes st-fill {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.st-anim-late {
	animation: st-late 500ms 650ms var(--sv-ease-settle) both;
}
@keyframes st-late {
	from {
		opacity: 0;
		transform: translateY(3px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.st-anim-bracket {
	transform-box: fill-box;
	transform-origin: center;
	animation: st-bracket 600ms 500ms var(--sv-ease-settle) both;
}
@keyframes st-bracket {
	from {
		opacity: 0;
		transform: scale(1.12);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.st-anim-draw,
	.st-anim-fill,
	.st-anim-late,
	.st-anim-bracket,
	.st-block,
	.st-blink::before {
		animation: none;
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

/* Status strip */
.st-status {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2) var(--sv-5);
	padding: 8px var(--sv-4);
	border-top: 1px solid var(--sv-border);
	background: var(--sv-graphite-900);
	font-family: var(--sv-font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.st-status span {
	display: inline-flex;
	gap: var(--sv-2);
	min-width: 0;
}
.st-status i {
	font-style: normal;
	color: var(--sv-text-faint);
}
.st-status b {
	font-weight: 500;
	color: var(--sv-mist-200);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 22ch;
}
.st-status-ok b {
	color: var(--sv-success);
}

/* Placed-reference controls */
.st-placed {
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-graphite-850);
	padding: var(--sv-3) var(--sv-4);
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
}
.st-placed-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-3) var(--sv-4);
}
.st-placed-row > b {
	font-weight: 500;
	font-size: var(--sv-body-s);
	color: var(--sv-text);
	max-width: 24ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Reference tray: uploaded files as technical cards */
.st-tray {
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
}
.st-tray-cards {
	display: flex;
	gap: var(--sv-2);
	overflow-x: auto;
	padding-bottom: var(--sv-1);
}
.st-card {
	flex: none;
	width: 128px;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-graphite-900);
	overflow: hidden;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	transition: border-color var(--sv-base) var(--sv-ease-precision), transform var(--sv-fast);
	animation: st-in var(--sv-slow) var(--sv-ease-settle);
}
.st-card:hover {
	border-color: var(--st-accent);
	transform: translateY(-1px);
}
.st-card.is-placed {
	border-color: var(--st-accent-line);
}
.st-card.is-file {
	cursor: default;
}
.st-card-img {
	height: 74px;
	background: var(--sv-bg-sunken) center / contain no-repeat;
	border-bottom: 1px solid var(--sv-border);
	display: grid;
	place-items: center;
	font-family: var(--sv-font-mono);
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	color: var(--sv-text-faint);
}
.st-card-meta {
	padding: 6px 8px;
	font-family: var(--sv-font-mono);
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.st-card-meta b {
	display: block;
	color: var(--sv-mist-200);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
}
.st-card-actions {
	display: flex;
	border-top: 1px solid var(--sv-border);
}
.st-card-actions button {
	appearance: none;
	flex: 1;
	border: 0;
	background: transparent;
	padding: 6px 4px;
	font-family: var(--sv-font-mono);
	font-size: 0.56rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
	cursor: pointer;
}
.st-card-actions button:hover {
	color: var(--sv-text);
	background: rgba(255, 255, 255, 0.04);
}
.st-ghost {
	position: fixed;
	z-index: 200;
	width: 96px;
	height: 72px;
	border: 1px solid var(--st-accent);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-bg-sunken) center / contain no-repeat;
	pointer-events: none;
	opacity: 0.9;
	box-shadow: var(--sv-shadow-float);
	transform: translate(-50%, -50%);
}

/* ------------------------------- Job sheet ------------------------------ */

.st-sheet {
	position: sticky;
	top: 92px;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-graphite-900);
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.st-sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-3);
	padding: var(--sv-3) var(--sv-4);
	border-bottom: 1px solid var(--sv-border-strong);
}
.st-sheet-head b {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	font-weight: 500;
	letter-spacing: 0.16em;
	color: var(--st-accent);
}
.st-sheet-rows {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(84px, 0.7fr) 1fr;
}
.st-sheet-rows dt,
.st-sheet-rows dd {
	margin: 0;
	padding: 9px var(--sv-4);
	border-bottom: 1px solid var(--sv-border);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	min-width: 0;
	overflow-wrap: anywhere;
}
.st-sheet-rows dt {
	color: var(--sv-text-faint);
	border-right: 1px solid var(--sv-border);
}
.st-sheet-rows dd {
	color: var(--sv-mist-100);
}
.st-sheet-rows dd.is-empty {
	color: var(--sv-graphite-400);
}
.st-sheet-rows dd.is-text {
	text-transform: none;
	letter-spacing: 0.04em;
}
.st-sheet-foot {
	padding: var(--sv-4);
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
}
.st-mobile-send,
.st-mobile-nav {
	display: none;
}

/* ------------------------------- After ---------------------------------- */

.st-after-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: var(--sv-6);
}
.st-after-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.st-after-list li {
	display: grid;
	grid-template-columns: 40px 1fr;
	grid-template-rows: auto auto;
	column-gap: var(--sv-3);
	padding: var(--sv-4) 0;
	border-top: 1px solid var(--sv-border);
}
.st-after-list i {
	grid-row: 1 / span 2;
	font-family: var(--sv-font-mono);
	font-style: normal;
	font-size: var(--sv-label);
	color: var(--sv-titanium);
}
.st-after-list b {
	font-family: var(--sv-font-display);
	font-weight: 500;
	font-size: var(--sv-h4);
	color: var(--sv-text);
}
.st-after-list span {
	font-size: var(--sv-body-s);
	line-height: 1.55;
	color: var(--sv-text-muted);
	max-width: 56ch;
}

/* ------------------------------ Review sheet ---------------------------- */

.st-review {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: rgba(8, 9, 10, 0.86);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	overflow-y: auto;
	padding: clamp(var(--sv-4), 4vw, var(--sv-8)) var(--sv-4);
}
.st-review-sheet {
	max-width: 1080px;
	margin: 0 auto;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-graphite-900);
	box-shadow: var(--sv-shadow-float);
	animation: st-in var(--sv-slow) var(--sv-ease-settle);
}
.st-review-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-4);
	padding: var(--sv-4) var(--sv-5);
	border-bottom: 1px solid var(--sv-border-strong);
}
.st-review-head h3,
.st-done h3 {
	margin: var(--sv-1) 0 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h2);
	font-weight: 500;
	color: var(--sv-text);
}
.st-review-body {
	display: flex;
	flex-direction: column;
	gap: var(--sv-5);
	padding: var(--sv-5);
}
.st-review-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--sv-5);
}
.st-review-mock,
.st-review-spec {
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	min-width: 0;
}
.st-review-canvas {
	aspect-ratio: 4 / 3;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-bg-sunken);
	overflow: hidden;
}
.st-review-canvas svg {
	width: 100%;
	height: 100%;
	display: block;
}
.st-review-spec .st-sheet-rows {
	border: 1px solid var(--sv-border);
	border-bottom: 0;
}
.st-review-files {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
}
.st-review-files li {
	display: inline-flex;
	align-items: center;
	gap: var(--sv-2);
	padding: 6px 10px;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.08em;
	color: var(--sv-text-secondary);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.st-review-files li i {
	width: 22px;
	height: 16px;
	border-radius: 2px;
	background: var(--sv-bg-sunken) center / cover no-repeat;
	flex: none;
}
.st-review-desc {
	margin: 0;
	font-size: var(--sv-body-s);
	line-height: 1.6;
	color: var(--sv-text-secondary);
	white-space: pre-line;
}
.st-contact {
	display: flex;
	flex-direction: column;
	gap: var(--sv-4);
	padding-top: var(--sv-5);
	border-top: 1px solid var(--sv-border-strong);
}
.st-contact-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sv-4);
}
.st-review-note {
	margin: 0;
	font-size: var(--sv-body-s);
	line-height: 1.6;
	color: var(--sv-text-muted);
	max-width: 70ch;
}
.st-review-note b {
	color: var(--sv-text);
	font-weight: 500;
}
.st-review-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--sv-3);
}
.st-done {
	padding: var(--sv-6) var(--sv-5);
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
}
.st-done-ref {
	margin: 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
}
.st-done-ref b {
	color: var(--st-accent);
	font-weight: 500;
}
.st-done .st-review-actions {
	justify-content: flex-start;
	margin-top: var(--sv-3);
}
.st-done:focus {
	outline: none;
}
.st-send-status {
	margin: var(--sv-3) 0 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
	text-align: right;
}
.st-send-status:empty {
	display: none;
}

/* ------------------------------- Responsive ----------------------------- */

@media (min-width: 1081px) {
	.st-hero-inner {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	}
}

/* Narrow desktop: a slimmer toolbar and summary */
@media (max-width: 1240px) {
	.st-work {
		grid-template-columns: minmax(0, 1fr) minmax(230px, 260px);
	}
	.st-workspace {
		grid-template-columns: 188px minmax(0, 1fr);
	}
}
@media (max-width: 1080px) {
	.st-after-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sv-4);
	}
	.st-review-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Tablet: one column. Canvas, tools strip, summary, then the set-up. */
	.st-work {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--sv-4);
	}
	.st-main {
		display: contents;
	}
	.st-workspace {
		order: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--sv-3);
	}
	.st-sheet {
		order: 1;
		position: static;
		max-height: none;
		overflow: visible;
	}
	.st-setup {
		order: 2;
	}
	.st-sheet-rows {
		grid-template-columns: minmax(120px, 0.4fr) 1fr;
	}
}

/* Mobile: one column. Workspace header, canvas, tools strip, summary
   drawer, then 01 Choose · 02 Configure · 03 Brief. */
@media (max-width: 760px) {
	.st-gate-options {
		grid-template-columns: minmax(0, 1fr);
	}
	.st-stagebar {
		width: 100%;
	}
	.st-stagebar li {
		flex: 1 1 0;
		min-width: 0;
	}
	.st-stagebar button {
		justify-content: center;
		padding: 10px 4px;
		font-size: 0.55rem;
		letter-spacing: 0.08em;
	}
	.st-work {
		gap: var(--sv-3);
	}
	.st-work > *,
	.st-main > * {
		min-width: 0;
		max-width: 100%;
	}
	.st-canvas-bar {
		flex-wrap: wrap;
	}
	.st-sheet-foot .sv-btn {
		display: none;
	}
	.st-mobile-send {
		display: flex;
		flex-direction: column;
		gap: var(--sv-3);
		padding: var(--sv-4);
		border: 1px solid var(--sv-border);
		border-radius: var(--sv-radius-sm);
		background: var(--sv-graphite-850);
	}
	.st-contact-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.st-review {
		padding: var(--sv-3);
	}
	.st-review-body {
		padding: var(--sv-4);
	}
	.st-hero-plate {
		justify-self: stretch;
		width: 100%;
	}
	.st-status {
		gap: var(--sv-2) var(--sv-3);
		flex-wrap: wrap;
	}
	.st-canvas-bar {
		flex-wrap: wrap;
		gap: var(--sv-2) var(--sv-3);
	}
	.st-canvas-wrap {
		max-width: 100%;
		overflow: hidden;
	}
}

/* =========================================================================
   Concept builder refinement: functional stages, object canvas, layers,
   selection panel, notes, dimensions, drafts and the review brief.
   ========================================================================= */

.st-studio-line {
	margin: var(--sv-3) 0 0;
	font-size: var(--sv-body-s);
	color: var(--sv-text-muted);
	max-width: 62ch;
}
.st-studio-line b {
	color: var(--sv-text);
	font-weight: 500;
}

/* Draft banner and inline confirmations */
.st-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-3) var(--sv-5);
	margin: 0 0 var(--sv-4);
	padding: var(--sv-3) var(--sv-4);
	border: 1px solid var(--st-accent);
	border-radius: var(--sv-radius-xs);
	background: var(--st-accent-wash);
}
.st-banner p {
	margin: 0;
	flex: 1 1 320px;
	font-size: var(--sv-body-s);
	color: var(--sv-text-muted);
}
.st-banner p b {
	color: var(--sv-text);
	font-weight: 500;
}
.st-banner-actions {
	display: flex;
	gap: var(--sv-2);
}
.st-confirm {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-2) var(--sv-3);
	padding: var(--sv-3) var(--sv-4);
	border: 1px solid var(--sv-warning);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-warning-wash);
	font-size: var(--sv-body-s);
	color: var(--sv-text);
}
.st-confirm span {
	flex: 1 1 240px;
}
.st-confirm-bar {
	border-radius: 0;
	border-left: 0;
	border-right: 0;
}

/* Stage states */
.st-stagebar li.is-upcoming button {
	color: var(--sv-text-faint);
}
.st-stagebar li.is-upcoming button:hover {
	color: var(--sv-text);
	background: rgba(185, 192, 196, 0.04);
}
.st-stagebar li.is-done button i::after {
	content: " ✓";
	font-size: 0.85em;
}
.st-stagebar button:focus-visible {
	outline: none;
	box-shadow: var(--sv-focus);
}

/* Focus flash when a stage is opened */
.is-focus {
	animation: st-focus 1.6s var(--sv-ease-settle);
}
@keyframes st-focus {
	0% {
		box-shadow: 0 0 0 1px var(--st-accent), 0 0 0 6px var(--st-accent-wash);
	}
	100% {
		box-shadow: 0 0 0 0 transparent;
	}
}

/* Block furniture */
.st-block-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sv-3);
}
.st-block-head .sv-label {
	margin: 0;
}
.st-micro {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
	white-space: nowrap;
}
.st-chips-sm .st-chip {
	padding: 6px 10px;
	font-size: 0.6rem;
}
.st-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-2) var(--sv-3);
}
.st-hint a {
	color: var(--st-accent-bright);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	white-space: nowrap;
}
.st-hint-strong b {
	color: var(--sv-text);
	font-weight: 500;
}
.st-panel[data-panel-tools] .st-hint-strong {
	margin-top: calc(-1 * var(--sv-2));
}

/* Templates are technical objects: drag or click */
.st-shape {
	cursor: grab;
	touch-action: none;
}
.st-shape:active {
	cursor: grabbing;
}
.st-shape svg .st-shape-line.is-custom {
	stroke-dasharray: 3 3;
}

/* Dimensions */
.st-dims {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sv-2);
}
.st-dims label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.st-dims label span {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}
.st-dims .sv-input {
	padding: 8px 10px;
	min-width: 0;
	font-family: var(--sv-font-mono);
}
.st-dims .sv-input:disabled {
	opacity: 0.4;
}
.st-dims .sv-input::-webkit-outer-spin-button,
.st-dims .sv-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}
.st-qty-input {
	max-width: 160px;
	font-family: var(--sv-font-mono);
}

/* Tool forms */
.st-add {
	display: flex;
	gap: var(--sv-2);
}
.st-add .sv-input {
	flex: 1 1 auto;
	min-width: 0;
}
.st-add .sv-btn {
	flex: none;
}
.st-prompts {
	margin: var(--sv-3) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 4px;
}
.st-prompts li {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}
.st-prompts li::before {
	content: "— ";
	color: var(--st-accent);
}

/* Canvas bar tools */
.st-canvas-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-2);
}
.st-zoom button:disabled {
	opacity: 0.3;
	cursor: default;
}
.st-zoom button[data-reset] {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	width: auto;
	padding: 0 10px;
}
.st-canvas-note {
	margin: var(--sv-2) 0 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}
.st-status-save b {
	color: var(--sv-mist-400);
	max-width: 40ch;
}
.st-canvas {
	cursor: default;
}

/* Objects */
.st-c-obj {
	cursor: move;
}
.st-c-fill {
	fill: var(--sv-graphite-800);
	stroke: none;
}
.st-c-fill.is-top {
	fill: var(--sv-graphite-800);
}
.st-c-obj.is-template .st-c-outline {
	stroke: var(--sv-mist-300);
	stroke-width: 1.2;
	fill: none;
	vector-effect: non-scaling-stroke;
}
.st-c-outline.is-custom {
	stroke-dasharray: 5 4;
}
/* Product outlines are placement guides, not the item: dashed and quiet. */
.st-c-outline.is-placement {
	stroke-dasharray: 6 4;
	stroke: var(--sv-mist-400, rgba(255, 255, 255, 0.42));
}
.st-c-placement-label {
	font-size: 7px;
	letter-spacing: 0.14em;
	fill: var(--sv-brass, #c3a06a);
	pointer-events: none;
}
.st-c-obj.is-selected .st-c-outline {
	stroke: var(--st-accent-bright);
}
.st-c-hitbox,
.st-c-hit {
	fill: transparent;
	stroke: none;
	pointer-events: all;
}
.st-c-hit {
	cursor: pointer;
}
.st-c-text {
	fill: var(--sv-mist-100);
	paint-order: stroke fill;
	stroke: rgba(8, 9, 10, 0.5);
	stroke-width: 0.6px;
}
.st-c-missing {
	fill: rgba(185, 192, 196, 0.05);
	stroke: var(--sv-mist-500);
	stroke-width: 1;
	stroke-dasharray: 4 4;
}
.st-c-note {
	fill: rgba(16, 18, 19, 0.92);
	stroke: var(--sv-warning);
	stroke-width: 1;
}
.st-c-note-text {
	font-family: var(--sv-font-mono);
	letter-spacing: 0.1em;
	fill: var(--sv-warning);
}
.st-c-leader {
	stroke: var(--sv-warning);
	stroke-width: 1;
	stroke-dasharray: 3 3;
}
.st-c-target {
	fill: none;
	stroke: var(--sv-warning);
	stroke-width: 1;
}
.st-c-obj.is-note .st-c-target {
	fill: rgba(200, 160, 74, 0.25);
}
.st-c-guide {
	stroke: var(--st-accent-bright);
	stroke-width: 1;
	stroke-dasharray: 2 3;
	opacity: 0.8;
	pointer-events: none;
}
.st-c-handle {
	fill: var(--sv-graphite-950);
	stroke: var(--st-accent);
	stroke-width: 1;
}
.st-c-rot {
	fill: var(--sv-graphite-950);
	stroke: var(--st-accent-bright);
	stroke-width: 1.2;
}
.st-c-rot-stem {
	stroke: var(--st-accent);
	stroke-width: 1;
	stroke-dasharray: 2 2;
}
.st-c-dims {
	pointer-events: none;
}
.st-c-dim-note {
	font-family: var(--sv-font-mono);
	font-size: 7.5px;
	letter-spacing: 0.14em;
	fill: var(--sv-mist-500);
}
.st-c-empty-title {
	font-family: var(--sv-font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	fill: var(--sv-mist-300);
}
.st-c-empty-sub {
	font-family: var(--sv-font-body);
	font-size: 11px;
	letter-spacing: 0.02em;
	text-transform: none;
	fill: var(--sv-mist-500);
}
.st-c-info-head {
	fill: var(--sv-mist-100);
}
.st-c-selection-group {
	pointer-events: none;
}
.st-c-selection-group .st-c-hit {
	pointer-events: all;
}

/* Selected object panel */
.st-sel {
	margin-top: var(--sv-3);
	border: 1px solid var(--st-accent);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-graphite-850);
	padding: var(--sv-3) var(--sv-4);
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
}
.st-sel-head {
	display: flex;
	align-items: center;
	gap: var(--sv-3);
}
.st-sel-head .st-micro:first-child {
	color: var(--st-accent);
}
.st-sel-name {
	flex: 1 1 auto;
	min-width: 0;
	appearance: none;
	border: 0;
	border-bottom: 1px solid var(--sv-border-strong);
	background: transparent;
	padding: 4px 0;
	color: var(--sv-text);
	font-family: var(--sv-font-body);
	font-size: var(--sv-body-s);
	font-weight: 500;
}
.st-sel-name:focus {
	outline: none;
	border-bottom-color: var(--st-accent);
}
.st-sel-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-2) var(--sv-4);
}
.st-sel-row .sv-input {
	flex: 1 1 200px;
	padding: 8px 10px;
}
.st-sel-row .st-slider {
	flex: 1 1 180px;
}
.st-sel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
}
.st-sel-actions button,
.st-layer-btn,
.st-layer-eye {
	appearance: none;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-graphite-900);
	color: var(--sv-text-muted);
	font-family: var(--sv-font-mono);
	font-size: 0.6rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 8px 10px;
	cursor: pointer;
	transition: border-color var(--sv-base), color var(--sv-base);
}
.st-sel-actions button:hover,
.st-layer-btn:hover:not(:disabled),
.st-layer-eye:hover {
	border-color: var(--sv-graphite-400);
	color: var(--sv-text);
}
.st-sel-actions button.is-danger,
.st-layer-btn.is-danger {
	color: var(--sv-error);
}
.st-sel-actions button.is-danger:hover,
.st-layer-btn.is-danger:hover {
	border-color: var(--sv-error);
}

/* Under the canvas: layers and references */
.st-under {
	margin-top: var(--sv-3);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sv-3);
	align-items: start;
}
.st-under:has(.st-tray[hidden]) {
	grid-template-columns: minmax(0, 1fr);
}
.st-under .st-tray:not([hidden]) {
	display: flex;
}
.st-layers {
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-graphite-850);
	padding: var(--sv-3) var(--sv-4);
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
	min-width: 0;
}
.st-layer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.st-layer {
	display: flex;
	align-items: stretch;
	gap: 4px;
	min-width: 0;
}
.st-layer-eye {
	width: 32px;
	padding: 0;
	flex: none;
	font-size: 0.7rem;
}
.st-layer-main {
	flex: 1 1 auto;
	min-width: 0;
	appearance: none;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 2px var(--sv-2);
	padding: 5px 10px;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-graphite-900);
	color: var(--sv-text-muted);
	text-align: left;
	cursor: pointer;
	transition: border-color var(--sv-base), background-color var(--sv-base);
}
.st-layer-main i {
	white-space: nowrap;
	font-style: normal;
	font-family: var(--sv-font-mono);
	font-size: 0.58rem;
	letter-spacing: 0.14em;
	color: var(--sv-text-faint);
}
.st-layer-main i { grid-column: 1; grid-row: 1; }
.st-layer-main small { grid-column: 2; grid-row: 1; justify-self: end; }
.st-layer-main b { grid-column: 1 / -1; grid-row: 2; }
.st-layer-main b {
	font-weight: 500;
	font-size: var(--sv-body-s);
	color: var(--sv-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.st-layer-main small {
	font-family: var(--sv-font-mono);
	font-size: 0.55rem;
	letter-spacing: 0.14em;
	color: var(--sv-text-faint);
}
.st-layer-main:hover {
	border-color: var(--sv-graphite-400);
}
.st-layer.is-selected .st-layer-main {
	border-color: var(--st-accent);
	background: var(--st-accent-wash);
}
.st-layer.is-hidden .st-layer-main b {
	color: var(--sv-text-faint);
	text-decoration: line-through;
}
.st-layer-btn {
	width: 32px;
	padding: 0;
	flex: none;
}
.st-layer-btn:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Summary drawer toggle (mobile only) */
.st-sheet-toggle {
	display: none;
}

/* Review brief */
.st-review-band {
	margin: 0 0 var(--sv-4);
	padding: var(--sv-3) var(--sv-4);
	border: 1px solid var(--sv-border-strong);
	border-left: 2px solid var(--st-accent);
	background: var(--sv-graphite-900);
	font-size: var(--sv-body-s);
	color: var(--sv-text-muted);
}
.st-review-band b {
	color: var(--sv-text);
	font-weight: 500;
}
.st-review-mock .st-block-head,
.st-review-spec .st-block-head {
	margin-bottom: var(--sv-2);
}
.st-review-spec .st-block-head + .st-sheet-rows,
.st-review-spec .st-review-files,
.st-review-spec .st-review-desc {
	margin-bottom: var(--sv-4);
}
.st-review-notes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
}
.st-review-notes li {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-warning);
	border: 1px solid var(--sv-warning);
	border-radius: 2px;
	padding: 5px 8px;
}
.st-review-notes li.is-empty,
.st-review-files li.is-empty {
	color: var(--sv-text-faint);
	border-color: var(--sv-border);
}
.st-review-desc.is-empty {
	color: var(--sv-text-faint);
}
body.st-modal-open {
	overflow: hidden;
}

/* Responsive */
@media (max-width: 1240px) {
	.st-under {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 760px) {
	.st-dims {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* Project summary becomes a collapsible drawer */
	.st-sheet {
		display: flex !important;
	}
	.st-sheet-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sv-3);
		appearance: none;
		width: 100%;
		border: 0;
		background: transparent;
		padding: var(--sv-3) var(--sv-4);
		cursor: pointer;
		min-height: 44px;
	}
	.st-sheet-toggle .sv-label {
		margin: 0;
	}
	.st-sheet-toggle b {
		font-family: var(--sv-font-mono);
		font-size: var(--sv-micro);
		font-weight: 500;
		letter-spacing: 0.14em;
		color: var(--st-accent);
	}
	.st-sheet-toggle::after {
		content: "+";
		font-family: var(--sv-font-mono);
		color: var(--sv-text-faint);
		margin-left: var(--sv-2);
	}
	.st-sheet.is-open .st-sheet-toggle::after {
		content: "–";
	}
	.st-sheet-head,
	.st-sheet-rows,
	.st-sheet-foot {
		display: none;
	}
	.st-sheet.is-open .st-sheet-rows,
	.st-sheet.is-open .st-sheet-foot {
		display: grid;
	}
	.st-sheet.is-open .st-sheet-head {
		display: none;
	}
	.st-sheet-foot .sv-btn {
		display: inline-flex;
	}
	.st-sel-actions button,
	.st-layer-eye,
	.st-layer-btn,
	.st-chip {
		min-height: 40px;
	}
	.st-layer-eye,
	.st-layer-btn {
		width: 40px;
	}
	.st-c-info {
		display: none;
	}
}

/* ==========================================================================
   Simple / Advanced · Project Navigator hand-off · Technical requirements
   Added for the navigation / navigator / start refinement. Same tokens,
   same accent, same chips. Simple mode is one column on every screen.
   ========================================================================== */

/* Hidden overrides: the stage bar and workspace have their own display
   rules on small screens, so [hidden] needs teeth here. */
.st-stagebar[hidden],
.st-work[hidden],
.st-simple[hidden],
.st-modebar[hidden],
.st-banner[hidden] {
	display: none !important;
}

/* ---- Mode switch: a quiet line, not a banner ---- */
.st-modebar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-3) var(--sv-5);
	margin: 0 0 var(--sv-5);
	padding: var(--sv-3) 0;
	border-top: 1px solid var(--sv-border-hairline);
	border-bottom: 1px solid var(--sv-border-hairline);
}
.st-modebar-note {
	margin: 0;
	font-size: var(--sv-body-s);
	color: var(--sv-text-muted);
}
.st-modebar-note b {
	color: var(--sv-text);
	font-weight: 500;
}
.st-modebar .st-seg button {
	padding: 9px var(--sv-4);
}

/* ---- Navigator banner ---- */
.st-banner-nav p {
	display: flex;
	flex-wrap: wrap;
	gap: 2px var(--sv-3);
}
.st-banner-nav p b {
	flex-basis: 100%;
}
.st-banner-sub {
	flex-basis: 100%;
	color: var(--sv-text-faint);
}

/* ---- Simple journey ---- */
.st-simple {
	max-width: 72ch;
	margin: 0 auto var(--sv-8);
}
.st-simple-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
}
.st-simple-step {
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-surface);
	padding: var(--sv-4) var(--sv-5);
}
.st-simple-step.is-open {
	border-color: var(--st-accent-line);
	box-shadow: var(--sv-shadow-hairline);
	padding: var(--sv-5) var(--sv-5) var(--sv-6);
}
.st-simple-step.is-done {
	background: transparent;
}
.st-simple-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sv-2) var(--sv-3);
}
.st-simple-head i {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	color: var(--st-accent);
	font-style: normal;
}
.st-simple-head h3 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--sv-text);
}
.st-simple-step.is-done .st-simple-head h3 {
	font-size: var(--sv-body);
	color: var(--sv-text-muted);
}
.st-simple-answer {
	flex: 1 1 200px;
	min-width: 0;
	font-size: var(--sv-body-s);
	color: var(--sv-text);
	overflow-wrap: anywhere;
}
.st-simple-answer.is-empty {
	color: var(--sv-text-faint);
}
.st-simple-step > .st-hint {
	margin: var(--sv-2) 0 var(--sv-4);
	max-width: 60ch;
}
.st-simple-body {
	display: flex;
	flex-direction: column;
	gap: var(--sv-4);
}
.st-simple-body .st-chips {
	gap: var(--sv-2);
}
.st-chip-lg {
	padding: 12px var(--sv-4);
	min-height: 44px;
}
.st-simple-text {
	min-height: 120px;
}
.st-simple-inline {
	max-width: 320px;
}
.st-simple-dims {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 420px;
}
.st-simple-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
	padding-top: var(--sv-2);
}
.st-simple-nav {
	margin: 0;
}
.st-simple-files {
	gap: var(--sv-2);
}
.st-simple-files li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sv-2) var(--sv-3);
	padding: var(--sv-2) var(--sv-3);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	font-size: var(--sv-body-s);
	color: var(--sv-text);
}
.st-simple-finish {
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	margin-top: var(--sv-5);
	padding: var(--sv-5);
	border: 1px solid var(--st-accent-line);
	border-radius: var(--sv-radius-xs);
	background: var(--st-accent-wash);
}
.st-simple-finish .st-hint {
	margin: 0;
	max-width: 60ch;
}
.st-simple-finish .sv-btn {
	align-self: flex-start;
}

/* ---- Technical requirements (Advanced) ---- */
.st-tech {
	margin-top: var(--sv-5);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-surface);
}
.st-tech > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sv-2) var(--sv-3);
	padding: var(--sv-3) var(--sv-4);
	cursor: pointer;
	list-style: none;
}
.st-tech > summary::-webkit-details-marker {
	display: none;
}
.st-tech > summary::before {
	content: "+";
	font-family: var(--sv-font-mono);
	color: var(--st-accent);
}
.st-tech[open] > summary::before {
	content: "−";
}
.st-tech > summary .sv-label {
	margin: 0;
}
.st-tech-sub {
	font-size: var(--sv-body-s);
	color: var(--sv-text-faint);
}
.st-tech-count {
	margin-left: auto;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--st-accent-bright);
	font-weight: 500;
}
.st-tech-body {
	padding: 0 var(--sv-4) var(--sv-4);
	border-top: 1px solid var(--sv-border-hairline);
	display: flex;
	flex-direction: column;
	gap: var(--sv-4);
}
.st-tech-body > .st-hint {
	margin-top: var(--sv-3);
}
.st-tech-body .st-block {
	margin: 0;
}
.st-tech-groups {
	display: flex;
	flex-direction: column;
	gap: var(--sv-5);
}
.st-tech-group {
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
}
.st-tech-field {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 4px var(--sv-2);
	align-items: center;
	padding: var(--sv-2) 0;
	border-bottom: 1px solid var(--sv-border-hairline);
}
.st-tech-field label {
	grid-column: 1 / -1;
	font-size: var(--sv-body-s);
	color: var(--sv-text-secondary);
}
.st-tech-field .sv-input {
	padding: 8px 10px;
	min-width: 0;
}
.st-tech-field.is-critical label {
	color: var(--sv-text);
}
.st-tech-field.is-critical label::after {
	content: " · CRITICAL";
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	color: var(--sv-brass);
}
.st-tech-crit {
	appearance: none;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-xs);
	background: transparent;
	padding: 8px 10px;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
	cursor: pointer;
}
.st-tech-crit:hover {
	color: var(--sv-text);
	border-color: var(--sv-graphite-400);
}
.st-tech-crit[aria-pressed="true"] {
	border-color: var(--sv-brass);
	color: var(--sv-brass);
	background: var(--sv-brass-wash, transparent);
}
.st-tech-empty {
	margin: 0;
}
.st-review-extra {
	margin-top: var(--sv-3);
	color: var(--sv-text-secondary);
}

@media (max-width: 760px) {
	.st-modebar {
		margin-bottom: var(--sv-4);
	}
	.st-simple-step,
	.st-simple-step.is-open {
		padding: var(--sv-4);
	}
	.st-simple-body .st-chips .st-chip,
	.st-simple-actions .sv-btn {
		width: 100%;
		justify-content: center;
	}
	.st-simple-dims {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.st-tech-field {
		grid-template-columns: minmax(0, 1fr);
	}
	.st-tech-crit {
		justify-self: start;
	}
}

/* ==========================================================================
   Guided project flow · Canvas tools · Provenance
   Added for the guided flow / canvas toolbox refinement. Same tokens,
   same accent. Guided is calmer, not different: one decision at a time
   beside a live build path and the live concept.
   ========================================================================== */

/* ---- Page identity: one clear engineered heading treatment ---- */
.st-hero-label {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--sv-3);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}
.st-hero-label span {
	padding: 3px 7px;
	border: 1px solid var(--st-accent-line);
	color: var(--st-accent);
	letter-spacing: 0.18em;
}
.st-hero-label i {
	width: 28px;
	height: 1px;
	background: var(--sv-border-strong);
}
.st-hero h1 {
	font-size: clamp(2.75rem, 6vw, 5rem);
	font-weight: 600;
	letter-spacing: -0.04em;
}
.st-h2 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h2);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--sv-text);
}
.st-studio-head {
	gap: var(--sv-3);
	margin-bottom: var(--sv-5);
}
.st-studio-head .st-studio-line {
	max-width: 60ch;
}
.st-eyebrow {
	margin: 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}

/* ---- Guided layout: questions + sticky live panel ---- */
.st-simple {
	max-width: none;
}
.st-guided {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.75fr);
	gap: var(--sv-6);
	align-items: start;
}
.st-guided-main {
	min-width: 0;
	max-width: 76ch;
}
.st-guided-live {
	position: sticky;
	top: 92px;
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	padding: var(--sv-4);
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-graphite-900);
	min-width: 0;
}
.st-guided-live .st-eyebrow + .st-eyebrow,
.st-guided-live .st-concept + .st-eyebrow,
.st-guided-live .st-path-key + .st-eyebrow {
	margin-top: var(--sv-3);
}
.st-guided-rows {
	border: 1px solid var(--sv-border);
	border-bottom: 0;
	margin-top: var(--sv-3);
}
.st-simple-step.is-open .st-simple-head h3 {
	font-weight: 600;
	letter-spacing: -0.02em;
}
.st-guided-shapes .st-shape {
	min-width: 96px;
}
.st-suggestion {
	padding: var(--sv-3) var(--sv-4);
	border-left: 2px solid var(--st-accent);
	background: var(--st-accent-wash);
}
.st-suggestion b {
	color: var(--sv-text);
	font-weight: 500;
}
.st-fontchips .st-fontchip {
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	padding: 8px var(--sv-4);
}

/* ---- Build path: assembles as questions are answered ---- */
.st-path {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 0;
}
.st-path-stage {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 10px;
	border: 1px solid var(--sv-border-strong);
	border-radius: 2px;
	background: var(--sv-surface);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-mist-100);
	max-width: 100%;
}
.st-path-stage i {
	font-style: normal;
	color: var(--sv-text-faint);
}
.st-path-stage b {
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.st-path-stage.is-confirmed {
	border-color: var(--st-accent-line);
	box-shadow: inset 2px 0 0 var(--st-accent);
}
.st-path-stage.is-suggested {
	border-style: dashed;
	color: var(--sv-mist-200);
}
.st-path-stage.is-pending {
	color: var(--sv-text-faint);
	background: transparent;
}
.st-path-link {
	width: 14px;
	height: 1px;
	background: var(--sv-border-strong);
	flex: none;
}
.st-path-stage.is-new {
	animation: st-path-in 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.st-path-link.is-new {
	animation: st-path-link 260ms ease-out both;
}
@keyframes st-path-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}
@keyframes st-path-link {
	from { transform: scaleX(0); transform-origin: left; }
	to { transform: scaleX(1); transform-origin: left; }
}
.st-path-key {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2) var(--sv-4);
	font-family: var(--sv-font-mono);
	font-size: 0.6rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}
.st-path-key span::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	vertical-align: -1px;
	border: 1px solid var(--sv-border-strong);
}
.st-path-key .is-confirmed::before {
	background: var(--st-accent);
	border-color: var(--st-accent);
}
.st-path-key .is-suggested::before {
	border-style: dashed;
}

/* ---- Live concept: the same objects the canvas holds ---- */
.st-concept {
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background:
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 20px 20px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 20px 20px,
		var(--sv-graphite-950, #0b0c0d);
	overflow: hidden;
}
.st-concept-svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Project direction ---- */
.st-direction {
	margin-top: var(--sv-5);
	padding: var(--sv-5);
	border: 1px solid var(--st-accent-line);
	border-radius: var(--sv-radius-xs);
	background: var(--st-accent-wash);
	display: flex;
	flex-direction: column;
	gap: var(--sv-5);
}
.st-direction-head {
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
}
.st-direction-head h3 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--sv-text);
}
.st-direction-head .st-hint {
	margin: 0;
	max-width: 60ch;
}
.st-direction-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
	gap: var(--sv-5);
	align-items: start;
}
.st-direction-rows {
	border: 1px solid var(--sv-border);
	border-bottom: 0;
	background: var(--sv-graphite-900);
}
.st-direction-live {
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
}
.st-direction-flow {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	counter-reset: st-flow;
}
.st-direction-flow li {
	counter-increment: st-flow;
	padding: 8px 0 8px 36px;
	position: relative;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-mist-100);
	border-bottom: 1px solid var(--sv-border);
}
.st-direction-flow li::before {
	content: counter(st-flow, decimal-leading-zero);
	position: absolute;
	left: 0;
	color: var(--st-accent);
}
.st-direction-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-3);
}
.st-direction-quiet {
	margin: 0;
}

/* ---- Provenance: confirmed vs suggested ---- */
.st-src {
	display: block;
	margin-top: 3px;
	font-family: var(--sv-font-mono);
	font-size: 0.6rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}
.st-src::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 6px;
	border: 1px solid var(--sv-border-strong);
	vertical-align: 0;
}
.st-src.is-confirmed::before {
	background: var(--st-accent);
	border-color: var(--st-accent);
}
.st-src.is-suggested::before {
	border-style: dashed;
}
.st-src[hidden] {
	display: none;
}
.st-block .st-src {
	margin: var(--sv-2) 0 0;
}
.st-review-guided {
	color: var(--sv-text-muted);
}

/* ---- Canvas tools ---- */
.st-sheet {
	max-height: calc(100vh - 110px);
	overflow: auto;
}
.st-toolbar-sel {
	border-top: 1px solid var(--sv-border-strong);
	padding: var(--sv-3) var(--sv-3) var(--sv-4);
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
}
.st-toolbar-sel .st-block-head {
	margin: 0;
	flex-wrap: wrap;
	gap: 2px var(--sv-2);
}
.st-toolbar-sel .st-block-head .st-micro {
	min-width: 0;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.st-tools {
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
}
.st-tools-empty {
	margin: 0;
	font-size: var(--sv-body-s);
	color: var(--sv-text-faint);
}
.st-tool-head {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: var(--sv-2);
}
.st-tool-head i {
	font-style: normal;
	font-family: var(--sv-font-mono);
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--st-accent);
}
.st-tool-name {
	padding: 7px var(--sv-3);
	font-size: var(--sv-body-s);
}
.st-tool-group {
	border: 1px solid var(--sv-border);
	border-radius: 2px;
	background: var(--sv-surface);
}
.st-tool-group summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var(--sv-3);
	padding: 9px var(--sv-3);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sv-text);
}
.st-tool-group summary::-webkit-details-marker {
	display: none;
}
.st-tool-group summary::before {
	content: "+";
	width: 12px;
	color: var(--st-accent);
	font-weight: 500;
}
.st-tool-group[open] summary::before {
	content: "–";
}
.st-tool-group summary b {
	font-weight: 500;
}
.st-tool-group summary i {
	margin-left: auto;
	font-style: normal;
	color: var(--sv-text-faint);
	letter-spacing: 0.08em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 50%;
}
.st-tool-body {
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	padding: var(--sv-2) var(--sv-3) var(--sv-4);
	border-top: 1px solid var(--sv-border);
}
.st-tool-text {
	min-height: 0;
	padding: 8px var(--sv-3);
	font-size: var(--sv-body-s);
	resize: vertical;
}
.st-tool-cats .st-chip,
.st-tool-body .st-chips .st-chip {
	padding: 6px 10px;
}
.st-tool-body .st-fontchips .st-fontchip {
	font-size: 0.95rem;
	padding: 6px 10px;
}
.st-tool-note {
	margin: 0;
	font-size: 0.72rem;
	line-height: 1.45;
	color: var(--sv-text-faint);
}
.st-tool-range {
	display: grid;
	grid-template-columns: 74px 1fr 52px;
	align-items: center;
	gap: var(--sv-2);
	font-family: var(--sv-font-mono);
	font-size: 0.6rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}
.st-tool-range input[type="range"] {
	width: 100%;
	min-width: 0;
	accent-color: var(--st-accent);
}
.st-tool-range output {
	text-align: right;
	color: var(--sv-mist-100);
}
.st-tool-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.st-tool-btn {
	appearance: none;
	border: 1px solid var(--sv-border-strong);
	border-radius: 2px;
	background: transparent;
	color: var(--sv-mist-100);
	padding: 6px 10px;
	min-width: 34px;
	font-family: var(--sv-font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 120ms ease, background 120ms ease;
}
.st-tool-btn:hover:not(:disabled) {
	border-color: var(--st-accent);
}
.st-tool-btn.is-on {
	background: var(--st-accent-wash);
	border-color: var(--st-accent);
	color: var(--sv-text);
}
.st-tool-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.st-tool-btn.is-danger {
	color: var(--sv-danger, #c86a5a);
}
.st-tool-xy {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sv-2);
}
.st-tool-xy label,
.st-tool-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: var(--sv-font-mono);
	font-size: 0.6rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}
.st-tool-xy .sv-input,
.st-tool-field .sv-input {
	padding: 7px var(--sv-3);
	font-size: var(--sv-body-s);
}
.st-seg-wrap {
	flex-wrap: wrap;
}
.st-tool-warn {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.st-tool-warn li {
	padding: 7px var(--sv-3);
	border-left: 2px solid var(--sv-warning);
	background: rgba(200, 160, 74, 0.08);
	font-size: 0.74rem;
	line-height: 1.45;
	color: var(--sv-mist-100);
}

/* Mobile drawer: hidden on desktop; the same tools live in the sheet. */
.st-tools-drawer {
	display: none;
}

/* ---- Text on the canvas: intent and style ---- */
.st-c-text.is-outline {
	fill: none;
	stroke: var(--sv-mist-100);
	paint-order: stroke;
}
.st-c-text.is-engraved {
	fill: rgba(8, 9, 10, 0.85);
	stroke: rgba(255, 255, 255, 0.35);
	stroke-width: 0.5px;
}
.st-c-text.is-engraved.is-outline {
	fill: none;
	stroke: rgba(255, 255, 255, 0.55);
}
.st-c-text.is-raised {
	fill: var(--sv-mist-50, #f2f4f5);
	filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7));
}
.st-c-text.is-cut {
	fill: rgba(8, 9, 10, 0.98);
	stroke: rgba(255, 255, 255, 0.5);
	stroke-width: 0.6px;
	stroke-dasharray: 2 1.5;
}
.st-c-intent {
	font-family: var(--sv-font-mono);
	font-size: 8px;
	letter-spacing: 0.16em;
	fill: var(--sv-text-faint);
	pointer-events: none;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
	.st-guided {
		grid-template-columns: minmax(0, 1fr) minmax(240px, 0.7fr);
	}
	.st-direction-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 760px) {
	.st-guided {
		display: flex;
		flex-direction: column-reverse;
		gap: var(--sv-4);
	}
	.st-guided-live {
		position: static;
		padding: var(--sv-3);
	}
	.st-guided-live .st-concept-live {
		max-height: 140px;
	}
	.st-guided-live .st-concept-live svg {
		max-height: 140px;
	}
	.st-guided-live .st-guided-rows {
		display: none;
	}
	.st-direction {
		padding: var(--sv-4);
	}
	.st-direction-actions .sv-btn {
		flex: 1 1 100%;
	}
	.st-hero h1 {
		font-size: clamp(2.5rem, 11vw, 3.25rem);
	}
}

/* ---- Guided journey: progress, carried-in answers, contextual size ---- */
.st-simple-progress {
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
	margin-bottom: var(--sv-4);
}
.st-simple-progress .st-eyebrow,
.st-simple-progress .st-hint {
	margin: 0;
}
.st-simple-bar {
	height: 3px;
	border-radius: 2px;
	background: var(--sv-border);
	overflow: hidden;
}
.st-simple-bar i {
	display: block;
	height: 100%;
	background: var(--st-accent);
	transition: width 320ms ease;
}
.st-simple-step.is-ahead {
	border-style: dashed;
}
.st-simple-step.is-ahead .st-simple-head h3 {
	color: var(--sv-text-muted);
}
.st-simple-sizectx {
	margin: 0;
	font-size: var(--sv-body-s);
	color: var(--sv-text-secondary);
}
.st-simple-sizectx b {
	font-weight: 500;
	color: var(--sv-text);
}
.st-size-chips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--sv-2);
}
.st-size-chip {
	appearance: none;
	display: grid;
	gap: 3px;
	padding: 10px 12px;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-graphite-900);
	color: var(--sv-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease;
}
.st-size-chip b {
	font-family: var(--sv-font-display);
	font-weight: 500;
	font-size: var(--sv-body-s);
	line-height: 1.2;
}
.st-size-chip span {
	font-size: var(--sv-micro);
	line-height: 1.35;
	color: var(--sv-text-secondary);
}
.st-size-chip:hover,
.st-size-chip:focus-visible {
	border-color: var(--st-accent-line);
}
.st-size-chip:focus-visible {
	outline: 2px solid var(--st-accent);
	outline-offset: 2px;
}
.st-size-chip[aria-pressed="true"] {
	border-color: var(--st-accent);
	background: var(--st-accent-wash, var(--sv-titanium-wash));
}
.st-simple-measure {
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	padding: var(--sv-4);
	border: 1px dashed var(--sv-border);
	border-radius: var(--sv-radius-xs);
}
.st-simple-measure[hidden] {
	display: none;
}
.st-simple-measure .st-eyebrow,
.st-simple-measure .st-hint {
	margin: 0;
}
.st-size-links {
	padding-top: 0;
}
.st-direction-message {
	margin: var(--sv-4) 0 var(--sv-2);
}
.st-direction-message textarea {
	min-height: 84px;
}
.st-review-extra {
	white-space: pre-line;
}

/* ------------------------------------------------------------------
   Category → product → style system
   ------------------------------------------------------------------ */
.st-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--sv-2);
}
.st-cat-card {
	appearance: none;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: var(--sv-2);
	row-gap: 2px;
	align-items: start;
	padding: 10px 12px;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-graphite-900);
	color: var(--sv-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease;
}
.st-cat-card i {
	grid-row: 1 / span 2;
	font-family: var(--sv-font-mono);
	font-style: normal;
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	color: var(--st-accent-bright);
	padding-top: 2px;
}
.st-cat-card .st-cat-name {
	font-family: var(--sv-font-display);
	font-weight: 500;
	font-size: var(--sv-body-s);
	line-height: 1.2;
}
.st-cat-card small {
	font-size: var(--sv-micro);
	line-height: 1.35;
	color: var(--sv-text-secondary);
}
.st-cat-card:hover,
.st-cat-card:focus-visible {
	border-color: var(--st-accent-line);
}
.st-cat-card:focus-visible {
	outline: 2px solid var(--st-accent);
	outline-offset: 2px;
}
.st-cat-card[aria-pressed="true"] {
	border-color: var(--st-accent);
	background: var(--st-accent-wash, var(--sv-titanium-wash));
}
.st-cantfind {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-2) var(--sv-3);
	margin-top: var(--sv-3);
}
.st-cantfind .st-hint {
	margin: 0;
	flex: 1 1 220px;
}
.st-cantfind-btn[aria-pressed="true"] {
	border-color: var(--st-accent);
	color: var(--sv-text);
}
.st-describe-line {
	margin-top: var(--sv-3);
}
.st-describe-line .st-row {
	display: flex;
	gap: var(--sv-2);
	align-items: stretch;
}
.st-describe-line .sv-input {
	flex: 1 1 auto;
	min-width: 0;
}
.st-describe-line .sv-btn {
	flex: 0 0 auto;
	white-space: nowrap;
}
.st-describe-note:empty {
	display: none;
}
.st-crumb {
	margin: 0 0 var(--sv-3);
	padding: 6px 10px;
	border-left: 2px solid var(--st-accent);
	background: var(--st-accent-wash);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-text);
}
.st-tpl-heading {
	text-transform: uppercase;
}
.st-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
	gap: var(--sv-2);
}
.st-product-card {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: var(--sv-3) var(--sv-3) 10px;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-graphite-900);
	color: var(--sv-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease;
}
.st-product-card svg {
	display: block;
	width: 72px;
	height: 44px;
	margin: 0 auto 4px;
}
.st-product-card svg .st-shape-line {
	fill: none;
	stroke: var(--sv-mist-400);
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
}
.st-product-card svg .st-shape-line.is-custom {
	stroke-dasharray: 3 3;
}
.st-product-card .st-product-name {
	font-family: var(--sv-font-display);
	font-weight: 500;
	font-size: var(--sv-body-s);
	line-height: 1.2;
}
.st-product-card small {
	font-size: var(--sv-micro);
	line-height: 1.35;
	color: var(--sv-text-secondary);
}
.st-product-card:hover,
.st-product-card:focus-visible {
	border-color: var(--st-accent-line);
}
.st-product-card:focus-visible {
	outline: 2px solid var(--st-accent);
	outline-offset: 2px;
}
.st-product-card[aria-pressed="true"] {
	border-color: var(--st-accent);
	background: var(--st-accent-wash, var(--sv-titanium-wash));
}
.st-product-card[aria-pressed="true"] svg .st-shape-line {
	stroke: var(--st-accent-bright);
}
.st-product-card.is-start {
	border-style: dashed;
}
.st-product-card.is-link .st-product-name::after {
	content: " →";
	color: var(--st-accent-bright);
}
.st-style-shapes .st-shape,
.st-guided-shapes .st-shape {
	min-width: 96px;
}
.st-shape.is-photo svg .st-shape-line {
	stroke-dasharray: 2 3;
}
.st-shape svg .st-shape-line.is-line,
.st-product-card svg .st-shape-line.is-line {
	fill: none;
}
.st-shape svg .st-shape-line.is-faint,
.st-product-card svg .st-shape-line.is-faint {
	opacity: 0.45;
	stroke-dasharray: 2 2;
}
.st-shape svg .st-shape-line.is-cut,
.st-product-card svg .st-shape-line.is-cut {
	stroke-dasharray: 1.5 2;
}
.st-shape-text {
	fill: var(--sv-text);
	font-size: 9px;
	letter-spacing: 0.02em;
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
}
.st-shape[aria-pressed="true"] .st-shape-text,
.st-product-card[aria-pressed="true"] .st-shape-text {
	fill: var(--st-accent-bright);
}
.st-asks {
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
}
.st-ask .st-hint {
	margin-top: 6px;
}
.st-brief-block {
	padding: var(--sv-3) var(--sv-4);
	border-left: 2px solid var(--st-accent);
	background: var(--st-accent-wash);
}
.st-brief-list {
	margin: var(--sv-2) 0 0;
	padding-left: 18px;
	font-size: var(--sv-body-s);
	color: var(--sv-text-secondary);
	line-height: 1.5;
}
.st-brief-list b {
	color: var(--sv-text);
	font-weight: 500;
}
.st-dims label[hidden] {
	display: none;
}
.st-dims.is-placement {
	opacity: 0.85;
}
.st-occasions .st-chip {
	text-transform: none;
	letter-spacing: 0;
}
[data-size-intro]:empty {
	display: none;
}
/* Canvas: lines, rings, faint parts and the visual-brief label */
.st-c-outline.is-line,
.st-c-outline.is-faint {
	fill: none;
}
.st-c-outline.is-faint {
	opacity: 0.5;
	stroke-dasharray: 3 3;
}
.st-c-ring {
	fill: none;
	stroke: var(--sv-mist-400);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 2 2;
}
.st-c-obj.is-brief .st-c-outline {
	stroke-dasharray: 6 4;
}
.st-c-brief-label {
	font-family: var(--sv-font-mono);
	font-size: 8px;
	letter-spacing: 0.12em;
	fill: var(--sv-text-secondary);
	pointer-events: none;
}
@media (max-width: 760px) {
	.st-cat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.st-cat-card {
		padding: 8px 10px;
	}
	.st-cat-card small {
		display: none;
	}
	.st-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.st-product-card svg {
		width: 56px;
		height: 36px;
	}
	.st-describe-line .st-row {
		flex-wrap: wrap;
	}
	.st-describe-line .sv-btn {
		flex: 1 1 100%;
	}
	.st-crumb {
		position: sticky;
		top: 0;
		z-index: 2;
	}
}

/* =========================================================================
   Workspace Builder · set up below, design above, summary always available
   Canvas toolbar | concept canvas | project summary, then the numbered
   set-up sections full width beneath. Same tokens, same accent.
   ========================================================================= */

/* ---- Canvas toolbar (left of the canvas) ---- */
.st-toolbar {
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-graphite-900);
	display: flex;
	flex-direction: column;
	min-width: 0;
	position: sticky;
	top: 92px;
	max-height: calc(100vh - 110px);
	overflow: auto;
}
.st-toolbar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-3);
	padding: var(--sv-3) var(--sv-3);
	border-bottom: 1px solid var(--sv-border-strong);
}
.st-toolbar-head .sv-label {
	margin: 0;
}
.st-toolbar-head b {
	color: var(--st-accent);
	font-weight: 500;
	min-width: 4.5ch;
	text-align: right;
}
.st-toolbar-groups {
	display: flex;
	flex-direction: column;
	padding: var(--sv-2) var(--sv-3) var(--sv-3);
	gap: var(--sv-2);
}
.st-tb-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 6px 0;
}
.st-tb-group + .st-tb-group {
	border-top: 1px solid var(--sv-border);
}
.st-tb-label {
	font-style: normal;
	font-family: var(--sv-font-mono);
	font-size: 0.56rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}
.st-tool-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.st-tool {
	appearance: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 40px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-graphite-850);
	color: var(--sv-text-muted);
	cursor: pointer;
	transition: color var(--sv-base), border-color var(--sv-base), background-color var(--sv-base);
}
.st-tool svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.st-tool span {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.st-tool-wide {
	width: auto;
	padding: 0 12px 0 10px;
}
.st-tool:hover {
	color: var(--sv-text);
	border-color: var(--sv-border-strong);
	background: rgba(255, 255, 255, 0.04);
}
.st-tool:focus-visible {
	outline: none;
	box-shadow: var(--sv-focus);
}
.st-tool[aria-expanded="true"],
.st-tool.is-active {
	color: var(--sv-text);
	border-color: var(--st-accent);
	background: var(--st-accent-wash);
	box-shadow: inset 0 -2px 0 var(--st-accent);
}
.st-tool:disabled {
	opacity: 0.3;
	cursor: default;
}
.st-tool:disabled:hover {
	color: var(--sv-text-muted);
	border-color: var(--sv-border);
	background: var(--sv-graphite-850);
}
/* Tooltip: ICON · TOOL NAME · SHORT FUNCTION */
.st-tool[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	left: 0;
	top: calc(100% + 6px);
	z-index: 40;
	width: max-content;
	max-width: 220px;
	padding: 6px 8px;
	border: 1px solid var(--sv-border-strong);
	border-radius: 2px;
	background: var(--sv-graphite-950, #0b0d0e);
	color: var(--sv-mist-100);
	font-family: var(--sv-font-mono);
	font-size: 0.6rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.5;
	text-align: left;
	white-space: normal;
	box-shadow: var(--sv-shadow-float);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-2px);
	transition: opacity var(--sv-base), transform var(--sv-base), visibility 0s linear var(--sv-base);
	pointer-events: none;
}
.st-tool[data-tip]:hover::after,
.st-tool[data-tip]:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0.25s, 0.25s, 0s;
}
.st-tool:disabled[data-tip]:hover::after {
	opacity: 0;
	visibility: hidden;
}
.st-tool-pop {
	margin-top: var(--sv-2);
	padding: var(--sv-3);
	border: 1px solid var(--st-accent);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-graphite-850);
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
}
.st-tool-pop[hidden] {
	display: none;
}
.st-tool-pop .sv-label,
.st-tool-pop .st-hint {
	margin: 0;
}
.st-tool-pop .st-add {
	flex-direction: column;
	align-items: stretch;
}
.st-tool-pop .st-add .sv-btn {
	width: 100%;
}
.st-toolbar-hint {
	margin: 0;
	padding: 0 var(--sv-3) var(--sv-3);
	font-size: 0.72rem;
	line-height: 1.5;
	color: var(--sv-text-faint);
}

/* ---- Canvas bar: title and the workspace rule ---- */
.st-canvas-meta {
	margin: 0;
	display: flex;
	gap: var(--sv-3);
	font-family: var(--sv-font-mono);
	font-size: 0.56rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
	white-space: nowrap;
}
.st-canvas-meta span + span::before {
	content: "·";
	margin-right: var(--sv-3);
	color: var(--sv-graphite-500);
}

/* ---- Set-up sections: 01 / CHOOSE · 02 / CONFIGURE · 03 / BRIEF ---- */
.st-section {
	scroll-margin-top: 96px;
	gap: var(--sv-5);
	padding: var(--sv-5);
}
.st-section-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: baseline;
	gap: var(--sv-2) var(--sv-4);
	padding-bottom: var(--sv-4);
	border-bottom: 1px solid var(--sv-border-strong);
}
.st-section-head .sv-section-mark {
	margin: 0;
}
.st-section-title {
	margin: 0;
	font-family: var(--sv-font-display, inherit);
	font-weight: 400;
	font-size: clamp(1.15rem, 1.6vw, 1.45rem);
	letter-spacing: -0.005em;
	color: var(--sv-text);
}
.st-section-head .st-mode-swap {
	justify-self: end;
}
.st-section-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sv-5);
	align-items: start;
}
.st-section-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding-top: var(--sv-4);
	border-top: 1px solid var(--sv-border);
}
.st-section-grid > .st-block {
	min-width: 0;
}
.st-section .st-cat-grid {
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.st-section .st-hint-strong {
	margin: 0;
}
.st-setup .st-mobile-send {
	display: none;
}

/* ---- Project summary: live overview with EDIT → links ---- */
.st-sheet-rows dd .st-sheet-edit {
	display: block;
	appearance: none;
	border: 0;
	background: transparent;
	padding: 2px 0 0;
	font-family: var(--sv-font-mono);
	font-size: 0.56rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--sv-base), color var(--sv-base);
}
.st-sheet-rows dd:hover .st-sheet-edit,
.st-sheet-rows dd:focus-within .st-sheet-edit {
	opacity: 1;
}
.st-sheet-rows dd .st-sheet-edit:hover,
.st-sheet-rows dd .st-sheet-edit:focus-visible {
	color: var(--st-accent);
	outline: none;
}

/* ---- Back to canvas ---- */
.st-back-canvas {
	position: fixed;
	right: var(--sv-4);
	bottom: var(--sv-4);
	z-index: 35;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: var(--sv-2);
	padding: 10px 14px;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-graphite-900);
	color: var(--sv-text-muted);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: var(--sv-shadow-float);
	transition: color var(--sv-base), border-color var(--sv-base), opacity var(--sv-base), transform var(--sv-base);
}
.st-back-canvas i {
	font-style: normal;
	color: var(--st-accent);
}
.st-back-canvas:hover {
	color: var(--sv-text);
	border-color: var(--st-accent);
}
.st-back-canvas:focus-visible {
	outline: none;
	box-shadow: var(--sv-focus);
}
.st-back-canvas[hidden],
body.st-modal-open .st-back-canvas,
body[data-view="guided"] .st-back-canvas {
	display: none;
}

/* ---- Compact screens (tablet and phone): the toolbar becomes a strip under
   the canvas and the selected element's tools move to the drawer. ---- */
@media (max-width: 1080px) {
	/* Order under the canvas: tools strip, note, selected-element drawer,
	   layers and references. */
	.st-stage {
		display: contents;
	}
	.st-workspace .st-canvas-wrap {
		order: -3;
	}
	.st-toolbar {
		order: -2;
		position: static;
		max-height: none;
		overflow: visible;
	}
	.st-toolbar-groups {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--sv-2) var(--sv-3);
		padding: var(--sv-2) var(--sv-3);
	}
	.st-tb-group {
		flex: 0 0 auto;
		padding: 4px 0;
	}
	.st-tb-group + .st-tb-group {
		border-top: 0;
		border-left: 1px solid var(--sv-border);
		padding-left: var(--sv-3);
	}
	.st-tool-row {
		flex-wrap: nowrap;
	}
	.st-tool-pop {
		margin: 0 var(--sv-3) var(--sv-3);
	}
	.st-tool-pop .st-add {
		flex-direction: row;
		align-items: center;
	}
	.st-tool-pop .st-add .sv-btn {
		width: auto;
	}
	.st-toolbar-hint {
		display: none;
	}
	.st-toolbar-sel {
		display: none;
	}
	.st-tools-drawer {
		display: block;
		margin-top: var(--sv-3);
		border: 1px solid var(--sv-border-strong);
		border-radius: var(--sv-radius-xs);
		background: var(--sv-graphite-900);
	}
	.st-tools-drawer summary {
		list-style: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sv-3);
		padding: var(--sv-3) var(--sv-4);
	}
	.st-tools-drawer summary::-webkit-details-marker {
		display: none;
	}
	.st-tools-drawer summary .sv-label {
		margin: 0;
	}
	.st-tools-drawer[open] summary {
		border-bottom: 1px solid var(--sv-border);
	}
	.st-tools-drawer .st-tools {
		padding: var(--sv-3) var(--sv-4) var(--sv-4);
	}
	.st-section {
		padding: var(--sv-4);
		gap: var(--sv-4);
	}
	.st-section-grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.st-sheet-rows dd .st-sheet-edit {
		opacity: 1;
	}
	.st-setup .st-mobile-send {
		display: flex;
	}
}
@media (max-width: 760px) {
	.st-section-grid,
	.st-section-grid-3 {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sv-4);
	}
	.st-section-head {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.st-section-head .st-section-title {
		grid-column: 1 / -1;
	}
	.st-section {
		scroll-margin-top: 80px;
	}
	.st-tool {
		height: 40px;
		width: 42px;
	}
	.st-tool-wide {
		width: auto;
	}
	.st-canvas-meta {
		display: none;
	}
	.st-back-canvas {
		right: var(--sv-3);
		bottom: var(--sv-3);
	}
	.st-toolbar-sel {
		display: none;
	}
}

/* ---- Public preview: the final step of the review (PUBLIC_PREVIEW_MODE) ---- */
.st-preview-end {
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	padding: var(--sv-5);
	border: 1px solid var(--sv-border);
	border-left: 2px solid var(--sv-titanium);
	background: var(--sv-graphite-850);
}
.st-preview-end h3 {
	margin: var(--sv-1) 0 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h2);
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--sv-text);
}
.st-preview-end .sv-body {
	margin: 0;
	max-width: 60ch;
	color: var(--sv-text-secondary);
}
.st-preview-end .st-review-actions {
	margin-top: var(--sv-2);
}
.st-hero .sv-preview-note {
	margin-top: var(--sv-5);
}