/* Entry point for CSS so Reroute picks it up on hot reload. */
/* ./theme/index.css */
/*
 * CryptoBud Design System
 *
 * Convention: components/{name}.css root class is .{name}
 *   app-store-badge.css → .app-store-badge
 *   feature-list.css    → .feature-list
 * Nest children under that root (no BEM __ / --).
 */

/* ./tokens.css */
/*
 * /portfolio design tokens (the iOS app port): color, type, glass, motion.
 * Marketing pages use Bud Glass (src/ui/theme, generated from src/ds/tokens.ts) instead.
 */

:root {
	color-scheme: light dark;

	/* Canvas — frozen hexes */
	--color-bg-light: #fafafa;
	--color-bg-dark: #101010;
	--color-bg: var(--color-bg-light);

	/* Ink — iOS label / secondaryLabel */
	--ink: rgb(0 0 0 / 0.88);
	--ink-muted: rgb(60 60 67 / 0.6);
	/* UIColor.tertiaryLabel */
	--ink-tertiary: rgb(60 60 67 / 0.3);
	--on-ink: #fff;

	/* Brand accent — CryptoBud green. Stays dark in both schemes
	   so white labels on pills keep contrast. */
	--accent: rgb(26 140 77);
	--on-accent: #fff;

	/* Money / status */
	--profit: var(--accent);
	--loss: rgb(214 46 46);
	--paused: rgb(255 149 0);
	--profit-soft: color-mix(in srgb, var(--profit) 14%, transparent);
	--loss-soft: color-mix(in srgb, var(--loss) 14%, transparent);
	--paused-soft: color-mix(in srgb, var(--paused) 14%, transparent);
	--fill-soft: rgb(0 0 0 / 0.08);
	--fill-muted: rgb(128 128 128 / 0.08);
	--fill-muted-strong: rgb(128 128 128 / 0.16);
	--fill-muted-ring: rgb(128 128 128 / 0.28);

	/* iOS blue — portfolio chrome + true system controls */
	--system: rgb(0 122 255);
	/* iOS systemGreen — UISwitch on */
	--system-green: rgb(52 199 89);

	/* Glass / flat / backdrop — iOS Liquid Glass + ModuleChrome */
	--glass-tint: transparent;
	--glass-bg: rgb(255 255 255 / 0.82);
	--glass-border: rgb(255 255 255 / 0.86);
	--glass-highlight: rgb(255 255 255 / 0.72);
	--glass-filter: blur(48px) saturate(200%);
	--glass-opaque: rgb(248 248 250);
	--flat-fill: rgb(255 255 255 / 0.9);
	--flat-fill-opaque: rgb(250 250 252);
	--flat-border: rgb(255 255 255 / 0.78);
	--flat-filter: blur(24px) saturate(180%);
	--flat-shadow: 0 6px 20px rgb(0 0 0 / 0.05), 0 1px 0 var(--glass-highlight);
	--glass-shadow: var(--flat-shadow);
	--backdrop-bg: rgb(0 0 0 / 0.16);
	--backdrop-filter: blur(10px) saturate(150%);
	/* GlassBorderShade — light top fade + rim */
	--glass-shade-from: rgb(0 0 0 / 0.08);
	--glass-shade-mid: rgb(0 0 0 / 0.03);
	--glass-edge-top: rgb(255 255 255 / 0.72);
	--glass-edge-mid: rgb(255 255 255 / 0.18);
	--glass-edge-bottom: rgb(0 0 0 / 0.05);

	/* Glass specular */
	--specular-inset: 8%;
	--specular-height: 36%;
	--specular-blur: 12px;
	--specular-opacity: 0.28;
	--specular-from: rgb(255 255 255 / 0.4);

	/* Overlay z-index stack */
	--z-header: 30;
	--z-toast: 40;
	--z-sheet: 50;
	--z-nav: 51;
	--z-stacked: 60;
	--z-popover: 70;
	--z-calendar: 80;
	--z-alert: 90;

	/* Short aliases /portfolio still reads */
	--color-focus: var(--accent);
	--color-white: #ffffff;

	/* Typography — system UI body; Sora wordmark */
	--font-body:
		system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
		sans-serif;
	--font-wordmark: 'Sora', var(--font-body);

	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	--text-kicker: 0.62rem;
	--text-micro: 0.68rem;
	--text-dense: 0.72rem;
	--text-caption: 0.75rem;
	--text-fine: 0.78rem;
	--text-small: 0.8rem;
	--text-note: 0.82rem;
	--text-subhead: 0.88rem;
	--text-label: 0.92rem;
	--text-tab: 0.94rem;
	--text-ios-callout: 0.9375rem;
	--text-lead: 0.95rem;
	--text-body: 1rem;
	--text-headline: 1.06rem;
	--text-face: 1.1rem;
	--text-panel: 1.15rem;
	--text-title: 1.25rem;
	--text-hero: 1.35rem;
	--text-stat: 1.375rem;
	--text-ios-caption2: var(--space-11);
	--text-ios-caption: var(--space-12);
	--text-ios-footnote: var(--space-13);
	--text-ios-subhead: var(--space-15);
	--text-ios-body: var(--space-17);

	/* Space scale — pixel-named so components never write raw px. */
	--space-0: 0px;
	--space-1: 1px;
	--space-2: 2px;
	--space-3: 3px;
	--space-4: 4px;
	--space-4-5: 4.5px;
	--space-5: 5px;
	--space-5-5: 5.5px;
	--space-6: 6px;
	--space-6-5: 6.5px;
	--space-7: 7px;
	--space-8: 8px;
	--space-9: 9px;
	--space-10: 10px;
	--space-11: 11px;
	--space-12: 12px;
	--space-13: 13px;
	--space-14: 14px;
	--space-15: 15px;
	--space-16: 16px;
	--space-17: 17px;
	--space-18: 18px;
	--space-20: 20px;
	--space-22: 22px;
	--space-24: 24px;
	--space-26: 26px;
	--space-27: 27px;
	--space-28: 28px;
	--space-31: 31px;
	--space-32: 32px;
	--space-34: 34px;
	--space-36: 36px;
	--space-38: 38px;
	--space-40: 40px;
	--space-42: 42px;
	--space-44: 44px;
	--space-48: 48px;
	--space-51: 51px;
	--space-52: 52px;
	--space-54: 54px;
	--space-56: 56px;
	--space-60: 60px;
	--space-64: 64px;
	--space-72: 72px;
	--space-80: 80px;
	--space-82: 82px;
	--space-88: 88px;
	--space-120: 120px;
	--space-180: 180px;
	--space-240: 240px;
	--space-270: 270px;
	--space-280: 280px;
	--space-300: 300px;
	--space-204: 204px;
	--space-250: 250px;
	--space-320: 320px;
	--space-400: 400px;
	--space-420: 420px;
	--border-width: var(--space-1);
	--border-thick: 1.5px;
	--border-ios: 0.67px;
	--blur-2-5: 2.5px;
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--sheet-body-pad: calc(var(--text-body) + var(--safe-bottom));
	/* Rem space — /portfolio rem leftovers, same values. */
	--space-rem-0-5: 0.5rem;
	--space-rem-0-65: 0.65rem;
	--space-rem-0-85: 0.85rem;
	--space-rem-1-1: 1.1rem;
	--space-rem-0-15: 0.15rem;
	--space-rem-0-2: 0.2rem;
	--space-rem-0-25: 0.25rem;
	--space-rem-0-35: 0.35rem;
	--space-rem-0-55: 0.55rem;
	--space-rem-0-6: 0.6rem;
	--space-rem-0-75: 0.75rem;
	--space-rem-0-8: 0.8rem;
	--space-rem-0-95: 0.95rem;
	--space-rem-1-15: 1.15rem;
	--space-rem-1-25: 1.25rem;
	--space-rem-1-5: 1.5rem;
	--space-rem-1-75: 1.75rem;
	--space-rem-2: 2rem;
	--space-rem-2-5: 2.5rem;
	--space-rem-2-75: 2.75rem;
	--space-rem-3: 3rem;
	--space-rem-3-25: 3.25rem;
	--space-rem-4: 4rem;
	--space-rem-4-5: 4.5rem;
	--space-rem-5-5: 5.5rem;
	--space-half: var(--space-rem-0-5);
	--space-rem-sm: var(--space-rem-0-65);
	--space-rem-lg: var(--space-rem-1-1);
	/* Measure — rem widths / max-widths >= 6rem. */
	--measure-6: 6rem;
	--measure-6-5: 6.5rem;
	--measure-9: 9rem;
	--measure-12: 12rem;
	--measure-20: 20rem;
	--measure-22: 22rem;
	--measure-28: 28rem;
	--measure-34: 34rem;
	--measure-36: 36rem;
	--measure-40: 40rem;
	--measure-54: 54rem;
	--measure-72: 72rem;
	/* Scheme-stable washes — exact rgb, do not flip with --fill-soft. */
	--duration-swipe: 180ms;
	--white-00: rgb(255 255 255 / 0);
	--white-06: rgb(255 255 255 / 0.06);
	--white-08: rgb(255 255 255 / 0.08);
	--white-10: rgb(255 255 255 / 0.1);
	--white-12: rgb(255 255 255 / 0.12);
	--white-14: rgb(255 255 255 / 0.14);
	--white-16: rgb(255 255 255 / 0.16);
	--white-18: rgb(255 255 255 / 0.18);
	--white-22: rgb(255 255 255 / 0.22);
	--white-28: rgb(255 255 255 / 0.28);
	--white-55: rgb(255 255 255 / 0.55);
	--white-72: rgb(255 255 255 / 0.72);
	--black-05: rgb(0 0 0 / 0.05);
	--black-06: rgb(0 0 0 / 0.06);
	--black-07: rgb(0 0 0 / 0.07);
	--black-08: rgb(0 0 0 / 0.08);
	--black-12: rgb(0 0 0 / 0.12);
	--black-15: rgb(0 0 0 / 0.15);
	--black-16: rgb(0 0 0 / 0.16);
	--black-18: rgb(0 0 0 / 0.18);
	--black-32: rgb(0 0 0 / 0.32);
	--black-55: rgb(0 0 0 / 0.55);
	--black-72: rgb(0 0 0 / 0.72);
	--gray-15: rgb(127 127 127 / 0.15);
	--gray-18: rgb(127 127 127 / 0.18);
	--gray-25: rgb(127 127 127 / 0.25);
	--gray-35: rgb(127 127 127 / 0.35);

	/* Shape — pills / cards / chips. */
	--radius-full: 999px;
	--radius-circle: 50%;
	--radius-card: var(--space-18);
	--radius-bubble: var(--space-22);
	--radius-control: var(--space-12);
	--radius-compact: var(--space-14);
	--radius-chip: var(--space-8);
	--touch: var(--space-44);
	--hairline: 0.5px;
	--spinner-spoke-w: 2.3px;
	--spinner-spoke-offset: 1.15px;
	--slider-track: rgb(120 120 128 / 0.32);
	--slider-track-h: var(--space-4);
	--slider-thumb: rgb(255 255 255 / 0.96);
	--slider-thumb-w: var(--space-36);
	--slider-thumb-h: var(--space-22);
	--slider-thumb-shadow:
		0 0.33px 0 rgb(0 0 0 / 0.04), 0 0.67px 0 rgb(0 0 0 / 0.04),
		0 2px 6px rgb(0 0 0 / 0.18);
	--switch-track-w: var(--space-51);
	--switch-track-h: var(--space-31);
	--switch-knob: var(--space-27);
	--switch-inset: var(--space-2);
	--switch-travel: calc(
		var(--switch-track-w) - var(--switch-knob) - var(--switch-inset) * 2
	);

	/* Compare matrix scores */

	/* Breakpoints (reference only — used in media queries below) */

	/* Motion */
	--ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-leave: cubic-bezier(0.4, 0, 0.2, 1);
	--duration-base: 220ms;
	--duration-enter: 560ms;
	--duration-leave: 320ms;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-bg: var(--color-bg-dark);

		--ink: rgb(255 255 255 / 0.92);
		--ink-muted: rgb(255 255 255 / 0.56);
		--ink-tertiary: rgb(235 235 245 / 0.3);
		--on-ink: #1c1c1e;

		--accent: rgb(56 219 122);
		--loss: rgb(245 92 92);
		--paused: rgb(255 159 10);
		--fill-soft: rgb(255 255 255 / 0.08);

		--system: rgb(10 132 255);
		--system-green: rgb(48 209 88);

		--glass-tint: rgb(0 0 0 / 0.2);
		--glass-bg: rgb(0 0 0 / 0.2);
		--glass-border: rgb(255 255 255 / 0.1);
		--glass-highlight: rgb(255 255 255 / 0.08);
		--glass-opaque: rgb(28 28 30);
		--flat-fill: rgb(255 255 255 / 0.07);
		--flat-fill-opaque: rgb(36 36 38);
		--flat-border: rgb(255 255 255 / 0.1);
		--flat-filter: blur(24px) saturate(160%);
		--flat-shadow:
			0 12px 32px rgb(0 0 0 / 0.42), 0 1px 0 var(--glass-highlight);
		--backdrop-bg: rgb(0 0 0 / 0.48);
		--backdrop-filter: blur(8px) saturate(110%);

		--specular-blur: 16px;
		--specular-opacity: 0.12;
		--specular-from: rgb(255 255 255 / 0.1);
	}
}

@media (max-width: 900px) {
	:root {
		--scale: clamp(0.055px, calc(100vw / 6200), 0.09px);
		/* App Store CTAs read small on phone — bump ~20% vs desktop design-px */
	}
}

@media (max-width: 480px) {
	:root {
		--scale: clamp(0.06px, calc(100vw / 5200), 0.085px);
	}
}


/* ./fonts.css */
/* Self-hosted Sora: the /portfolio wordmark. Marketing (Bud Glass) uses the system font. */

@font-face {
	font-family: 'Sora';
	src:
		url('/assets/fonts/sora-400.woff2') format('woff2'),
		url('/assets/fonts/Sora-Regular.ttf') format('truetype');
	font-weight: var(--weight-regular);
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: 'Sora';
	src:
		url('/assets/fonts/sora-500.woff2') format('woff2'),
		url('/assets/fonts/Sora-Medium.ttf') format('truetype');
	font-weight: var(--weight-medium);
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: 'Sora';
	src:
		url('/assets/fonts/sora-700.woff2') format('woff2'),
		url('/assets/fonts/Sora-Bold.ttf') format('truetype');
	font-weight: var(--weight-bold);
	font-style: normal;
	font-display: block;
}


/* ./base.css */
/*
 * Reset for pages without the Glass marker (/portfolio). Glass pages bring
 * their own (ui/theme/base.css). The :where() guard adds no specificity, so
 * every selector weighs what it did before it was scoped.
 */

html:where(:not(:has([data-glass]))) {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background: var(--color-bg);
}

@media (prefers-reduced-motion: reduce) {
	html:where(:not(:has([data-glass]))) {
		scroll-behavior: auto;
	}
}

:where(html:not(:has([data-glass]))) {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	body {
		margin: 0;
		min-height: 100%;
		background: var(--color-bg);
		color: var(--ink);
		font-family: var(--font-body);
		font-weight: var(--weight-regular);
		font-kerning: normal;
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	img,
	svg,
	video {
		display: block;
		max-width: 100%;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	button,
	input,
	textarea,
	select {
		font: inherit;
	}

	ul,
	ol {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	h1,
	h2,
	h3,
	h4,
	p {
		margin: 0;
	}

	:focus-visible {
		outline: var(--space-2) solid var(--color-focus);
		outline-offset: var(--space-4);
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}


/* ./surfaces.css */
/*
 * Shared liquid-glass surface recipes.
 * Specular highlight + reduced-transparency / reduced-motion overrides.
 */

@media (prefers-reduced-transparency: reduce) {
	:root {
		--glass-bg: var(--glass-opaque);
		--glass-tint: transparent;
		--glass-filter: none;
		--backdrop-bg: rgb(0 0 0 / 0.45);
		--backdrop-filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-enter: 0ms;
		--duration-leave: 0ms;
	}
}

.specular {
	position: absolute;
	top: 0;
	right: var(--specular-inset);
	left: var(--specular-inset);
	z-index: 0;
	height: var(--specular-height);
	border-radius: var(--radius-full);
	pointer-events: none;
	background: linear-gradient(180deg, var(--specular-from), var(--white-00));
	filter: blur(var(--specular-blur));
	opacity: var(--specular-opacity);
}


/* ./components/step-slider.css */
/* Root class matches filename: step-slider.css → .step-slider
 * Shared 36×22 pill thumb. Marketing + /portfolio. */

.step-slider {
	--step-slider-accent: var(--accent);
	--step-slider-track: var(--slider-track);
	--step-slider-thumb: var(--slider-thumb);
	--step-slider-thumb-w: var(--slider-thumb-w);
	--step-slider-thumb-h: var(--slider-thumb-h);
	padding-bottom: var(--space-2);

	input[type='range'] {
		display: block;
		width: 100%;
		height: var(--step-slider-thumb-h);
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		appearance: none;
		cursor: pointer;

		&::-webkit-slider-runnable-track {
			height: var(--slider-track-h);
			border-radius: var(--radius-full);
			background: linear-gradient(
				to right,
				var(--step-slider-accent) 0 var(--step-slider-fill),
				var(--step-slider-track) var(--step-slider-fill) 100%
			);
		}

		&::-webkit-slider-thumb {
			width: var(--step-slider-thumb-w);
			height: var(--step-slider-thumb-h);
			margin-top: calc(
				(var(--slider-track-h) - var(--step-slider-thumb-h)) / 2
			);
			border: 0;
			border-radius: var(--radius-full);
			background: var(--step-slider-thumb);
			box-shadow: var(--slider-thumb-shadow);
			transform: translateZ(0);
			appearance: none;
			-webkit-appearance: none;
		}

		&:active::-webkit-slider-thumb {
			background: var(--step-slider-thumb);
		}

		&::-moz-range-track {
			height: var(--slider-track-h);
			border: 0;
			border-radius: var(--radius-full);
			background: var(--step-slider-track);
		}

		&::-moz-range-progress {
			height: var(--slider-track-h);
			border-radius: var(--radius-full);
			background: var(--step-slider-accent);
		}

		&::-moz-range-thumb {
			width: var(--step-slider-thumb-w);
			height: var(--step-slider-thumb-h);
			border: 0;
			border-radius: var(--radius-full);
			background: var(--step-slider-thumb);
			box-shadow: var(--slider-thumb-shadow);
			transform: translateZ(0);
			appearance: none;
		}

		&:active::-moz-range-thumb {
			background: var(--step-slider-thumb);
		}
	}

	.steps {
		display: flex;
		gap: 0;
		margin-top: var(--space-2);

		button {
			flex: 1 1 0;
			min-width: 0;
			min-height: var(--space-28);
			padding: 0;
			border: 0;
			background: transparent;
			color: var(--ink-muted);
			font-size: var(--text-micro);
			font-weight: var(--weight-medium);
			line-height: 1.1;
			cursor: pointer;

			&.is-active {
				color: var(--step-slider-accent);
			}
		}
	}
}

.portfolio .step-slider {
	--step-slider-accent: var(--portfolio-system);
	--step-slider-track: var(--portfolio-slider-track);
	--step-slider-thumb: var(--portfolio-slider-thumb);
}


/* ./components/gis-prompt.css */
/* GIS injects #credential_picker_container on document.body.
   Dark pages with color-scheme: light dark get an opaque white iframe
   canvas; light matches Google's document so the canvas stays clear. */
#credential_picker_container {
	color-scheme: light;

	iframe {
		color-scheme: light;
		background: transparent;
	}
}

/* Dead GIS host (blocker / plugin) must not swallow the fallback click. */
.auth-google:not(.is-gis-ready) .auth-google-gis {
	pointer-events: none;
}


/* ./portfolio/index.css */
/* ./tokens.css */
/*
 * Isolated /portfolio tokens. iOS 1:1 from PanelMetrics.standard,
 * ModuleChrome, SemanticColors, AppBackground, BottomNavBarMetrics.
 * Aliases shared :root DS; keeps only app-specific metrics.
 */

html:has(.portfolio) {
	--portfolio-canvas: rgb(230 230 230);
	--portfolio-canvas-spot: rgb(242 242 242);
	--portfolio-canvas-glow: rgb(224 224 224);
}

@media (prefers-color-scheme: dark) {
	html:has(.portfolio) {
		--portfolio-canvas: rgb(10 10 10);
		--portfolio-canvas-spot: rgb(36 36 36);
		--portfolio-canvas-glow: rgb(26 26 26);
	}
}

.portfolio {
	color-scheme: light dark;

	/* PanelMetrics.standard */
	--portfolio-pad: var(--space-16);
	--portfolio-section: var(--space-14);
	--portfolio-tile: var(--space-10);
	--portfolio-radius: var(--radius-card);
	--portfolio-radius-full: var(--radius-full);
	--portfolio-radius-circle: var(--radius-circle);
	--portfolio-radius-bubble: var(--radius-bubble);
	--portfolio-radius-control: var(--radius-control);
	--portfolio-radius-compact: var(--radius-compact);
	--portfolio-radius-chip: var(--radius-chip);
	--portfolio-hero-pnl: var(--space-40);
	--portfolio-hero-scanning: var(--space-28);
	--portfolio-hero-stack: var(--space-10);
	--portfolio-hero-chart-top: var(--space-8);
	--portfolio-hero-chart-footer: var(--space-10);
	--portfolio-hero-header-row: var(--space-48);
	--portfolio-daemon-control: var(--space-32);
	--portfolio-capital: var(--space-26);
	--portfolio-capital-tile-row: var(--space-6);
	--portfolio-capital-tile-title: var(--space-14);
	--portfolio-capital-tile-value: var(--space-32);
	--portfolio-capital-tile-progress: var(--slider-track-h);
	--portfolio-capital-tile-subtitle: var(--space-14);
	--portfolio-chart: var(--space-88);
	--portfolio-chart-inset: var(--border-thick);
	--portfolio-header-control: var(--space-48);
	--portfolio-header-control-inset: var(--space-3);
	--portfolio-header-segment: var(--space-42);
	--portfolio-header-tab-inset: var(--space-6);
	--portfolio-header-tab-bleed: var(--space-18);
	--portfolio-header-tab-fade: var(--space-24);
	--portfolio-header-tab-row: var(--space-60);
	--portfolio-header-breathing: var(--space-8);
	--portfolio-sticky-header: var(--space-82);
	--portfolio-pair-pad-x: var(--space-14);
	--portfolio-pair-pad-y: var(--space-11);
	--portfolio-pair-divider-inset: var(--space-52);
	--portfolio-border-width: var(--border-width);
	--portfolio-flat-border-width: var(--border-ios);
	--portfolio-module-pad: var(--space-14);

	/* BottomNavBarMetrics */
	--portfolio-nav-bar: var(--space-52);
	--portfolio-nav-item: var(--space-32);
	--portfolio-nav-segment: var(--space-56);
	--portfolio-nav-pad-x: var(--space-18);
	--portfolio-nav-breathing: var(--space-28);
	--portfolio-nav-pad-bottom: var(--space-12);
	--portfolio-nav-pill: var(--space-204);
	--portfolio-nav-collapsed: calc(
		var(--portfolio-nav-pad-x) * 2 + var(--portfolio-nav-item)
	);

	/* BottomNavBarMetrics springs — expand 0.52/0.62, collapse 0.34/0.84 */
	--portfolio-nav-expand-duration: 520ms;
	--portfolio-nav-collapse-duration: 340ms;
	--portfolio-nav-expand-ease: linear(
		0,
		0.065 6.3%,
		0.218 12.5%,
		0.406 18.8%,
		0.593 25%,
		0.757 31.3%,
		0.887 37.5%,
		0.981 43.8%,
		1.041 50%,
		1.072 56.3%,
		1.083 62.5%,
		1.08 68.8%,
		1.068 75%,
		1.053 81.3%,
		1.037 87.5%,
		1.023 93.8%,
		1
	);
	--portfolio-nav-collapse-ease: linear(
		0,
		0.062 6.3%,
		0.198 12.5%,
		0.358 18.8%,
		0.513 25%,
		0.647 31.3%,
		0.755 37.5%,
		0.839 43.8%,
		0.9 50%,
		0.943 56.3%,
		0.971 62.5%,
		0.989 68.8%,
		1 75%,
		1.005 81.3%,
		1.007 87.5%,
		1.008 93.8%,
		1
	);

	/* IosSheetChrome — presentationDetents medium + large */
	--portfolio-sheet-medium: 50svh;
	--portfolio-sheet-large: 94svh;
	--portfolio-sheet-handle: var(--space-14);
	--portfolio-sheet-header-min: var(--touch);
	--portfolio-touch: var(--touch);
	--portfolio-hairline: var(--hairline);
	--portfolio-sheet-chrome-control: var(--space-28);
	--portfolio-sheet-chrome-cta: var(--space-36);
	--portfolio-sheet-chrome-icon-glyph: var(--space-17);
	--portfolio-sheet-chrome-label: var(--text-ios-body);
	--portfolio-chat-send: var(--space-22);
	--portfolio-sheet-search: var(--space-0);
	--portfolio-sheet-header-pad-x: var(--space-14);
	--portfolio-sheet-header-pad-top: var(--space-10);
	--portfolio-sheet-header-pad-bottom: var(--space-6);
	/* UISheetPresentationController platter — not Form card 18. */
	--portfolio-sheet-radius: var(--space-38);
	--portfolio-sheet-chrome-bleed: var(--space-18);
	--portfolio-sheet-chrome-min: var(--space-54);
	--portfolio-sheet-chrome-fill: rgb(255 255 255 / 0.24);
	/* Complete recipes — WebKit drops backdrop-filter: blur(var(--x)). */
	--frost-layer-1: blur(2px);
	--frost-layer-2: blur(8px);
	--frost-layer-3: blur(24px);
	--frost-layer-4: blur(48px) saturate(200%);
	--portfolio-progress-blur: blur(var(--space-12));
	--frost-mask-1: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
	--frost-mask-2: linear-gradient(180deg, #000 0%, #000 42%, transparent 82%);
	--frost-mask-3: linear-gradient(180deg, #000 0%, #000 36%, transparent 72%);
	--frost-mask-4: linear-gradient(180deg, #000 0%, #000 32%, transparent 78%);

	--portfolio-shell-pad-x: var(--space-0);

	/* Type — aliases shared DS */
	--portfolio-font-body: var(--font-body);
	--portfolio-font-wordmark: var(--font-wordmark);
	--portfolio-font-capital: ui-monospace, 'SF Mono', Menlo, monospace;
	--portfolio-weight-regular: var(--weight-regular);
	--portfolio-weight-medium: var(--weight-medium);
	--portfolio-weight-semibold: var(--weight-semibold);
	--portfolio-weight-bold: var(--weight-bold);
	--portfolio-text-micro: var(--text-micro);
	--portfolio-text-caption: var(--text-caption);
	--portfolio-text-footnote: var(--text-ios-footnote);
	--portfolio-text-subhead: var(--text-subhead);
	--portfolio-text-body: var(--text-body);
	--portfolio-text-headline: var(--text-headline);
	--portfolio-text-title: var(--text-title);

	--portfolio-popover-row: var(--touch);
	--portfolio-popover-pad-x: var(--space-16);
	--portfolio-popover-min: var(--space-250);
	/* UIMenu / Picker .menu — iOS 26 Liquid Glass platter */
	--portfolio-popover-radius: var(--space-26);
	--portfolio-popover-cap: var(--space-10);
	--portfolio-popover-bg: rgb(255 255 255 / 0.72);
	--portfolio-popover-opaque: rgb(242 242 247);
	--portfolio-popover-filter: var(--frost-layer-4);
	--portfolio-popover-shadow:
		0 18px 48px rgb(0 0 0 / 0.18), 0 1px 0 var(--portfolio-glass-highlight);

	/* Light canvas — AppBackground white 0.9 + radials */
	--portfolio-canvas: rgb(230 230 230);
	--portfolio-canvas-spot: rgb(242 242 242);
	--portfolio-canvas-glow: rgb(224 224 224);

	/* Ink / semantic — aliases shared DS */
	--portfolio-ink: var(--ink);
	--portfolio-ink-muted: var(--ink-muted);
	--portfolio-ink-tertiary: var(--ink-tertiary);
	--portfolio-on-ink: var(--on-ink);
	--portfolio-profit: var(--profit);
	--portfolio-profit-action: rgb(28 133 77);
	--portfolio-loss: var(--loss);
	--portfolio-highlight: var(--profit);
	--portfolio-paused: var(--paused);
	--portfolio-demo: var(--ink-muted);
	--portfolio-profit-soft: var(--profit-soft);
	--portfolio-loss-soft: var(--loss-soft);
	--portfolio-paused-soft: var(--paused-soft);
	--portfolio-demo-soft: rgb(0 0 0 / 0.08);
	--portfolio-fill-soft: var(--fill-soft);
	--portfolio-fill-muted: var(--fill-muted);
	--portfolio-fill-muted-strong: var(--fill-muted-strong);
	--portfolio-fill-muted-ring: var(--fill-muted-ring);
	--portfolio-focus: var(--portfolio-profit);
	--portfolio-focus-soft: color-mix(
		in srgb,
		var(--portfolio-focus) 16%,
		transparent
	);

	/* Glass / flat / backdrop — aliases shared DS */
	--portfolio-glass-tint: var(--glass-tint);
	--portfolio-glass-bg: var(--glass-bg);
	--portfolio-glass-border: var(--glass-border);
	--portfolio-glass-highlight: var(--glass-highlight);
	--portfolio-glass-filter: var(--glass-filter);
	--portfolio-glass-opaque: var(--glass-opaque);
	--portfolio-glass-shade-from: var(--glass-shade-from);
	--portfolio-glass-shade-mid: var(--glass-shade-mid);
	--portfolio-glass-edge-top: var(--glass-edge-top);
	--portfolio-glass-edge-mid: var(--glass-edge-mid);
	--portfolio-glass-edge-bottom: var(--glass-edge-bottom);
	--portfolio-flat-fill: var(--flat-fill);
	--portfolio-flat-fill-opaque: var(--flat-fill-opaque);
	--portfolio-flat-border: var(--flat-border);
	--portfolio-flat-filter: var(--flat-filter);
	--portfolio-flat-shadow: var(--flat-shadow);
	--portfolio-flat-group-shadow: var(--flat-shadow);
	--portfolio-glass-shadow: var(--glass-shadow);
	--portfolio-backdrop-bg: var(--backdrop-bg);
	--portfolio-backdrop-filter: var(--backdrop-filter);
	--portfolio-nav-icon: rgb(0 0 0 / 0.76);
	--portfolio-nav-icon-active: var(--portfolio-ink);
	--portfolio-system: var(--system);
	--portfolio-system-green: var(--system-green);
	--portfolio-nav-selection: color-mix(
		in srgb,
		var(--portfolio-system) 22%,
		transparent
	);

	/* Glass specular — aliases shared DS */
	--portfolio-specular-inset: var(--specular-inset);
	--portfolio-specular-height: var(--specular-height);
	--portfolio-specular-blur: var(--specular-blur);
	--portfolio-specular-opacity: var(--specular-opacity);
	--portfolio-specular-from: var(--specular-from);

	/* Grouped form (iOS inset grouped) */
	--portfolio-form-fill: rgb(255 255 255 / 0.86);
	--portfolio-form-border: rgb(60 60 67 / 0.16);
	--portfolio-segment-track: rgb(118 118 128 / 0.12);
	--portfolio-segment-active: rgb(255 255 255 / 0.98);
	--portfolio-segment-shadow:
		0 3px 8px rgb(0 0 0 / 0.12), 0 3px 1px rgb(0 0 0 / 0.04);
	--portfolio-slider-track: var(--slider-track);
	--portfolio-slider-thumb: var(--slider-thumb);

	/* Signal chip catalog — pair row, recent signals, detail sheet */
	--signal-emerald: rgb(51 199 140);
	--signal-sky: rgb(89 173 250);
	--signal-violet: rgb(166 115 250);
	--signal-amber: rgb(158 112 15);
	--signal-rose: rgb(250 107 133);
	--signal-teal: rgb(56 199 199);
	--signal-indigo: rgb(115 133 250);
	--signal-cyan: rgb(10 122 143);
	--signal-lime: rgb(184 224 82);
	--signal-orange: rgb(250 148 56);
	--signal-slate: rgb(77 92 112);

	/* ReportSourcePalette */
	--report-series-0: rgb(51 140 242);
	--report-series-1: rgb(158 89 242);
	--report-series-2: rgb(242 140 46);
	--report-series-3: var(--portfolio-profit);

	/* Motion / z-index — aliases shared DS */
	--portfolio-ease-enter: var(--ease-enter);
	--portfolio-ease-leave: var(--ease-leave);
	--portfolio-duration-enter: var(--duration-enter);
	--portfolio-duration-leave: var(--duration-leave);
	--portfolio-z-header: var(--z-header);
	--portfolio-z-toast: var(--z-toast);
	--portfolio-z-sheet: var(--z-sheet);
	--portfolio-z-nav: var(--z-nav);
	--portfolio-z-stacked: var(--z-stacked);
	--portfolio-z-popover: var(--z-popover);
	--portfolio-z-calendar: var(--z-calendar);
	--portfolio-z-alert: var(--z-alert);

	/* UIAlertController — 270pt card, liquid-glass frost, hairline actions */
	--portfolio-alert-width: var(--space-270);
	--portfolio-alert-radius: var(--space-28);
	--portfolio-alert-hairline: var(--hairline);
	--portfolio-alert-bg: rgb(255 255 255 / 0.72);
	--portfolio-alert-opaque: rgb(242 242 247);
	--portfolio-alert-field: rgb(118 118 128 / 0.18);
	--portfolio-alert-separator: rgb(60 60 67 / 0.22);
	--portfolio-alert-press: rgb(0 0 0 / 0.06);
	--portfolio-alert-scrim: rgb(0 0 0 / 0.2);
	--portfolio-alert-filter: blur(48px) saturate(200%);
	--portfolio-alert-shadow:
		0 18px 48px rgb(0 0 0 / 0.18), 0 1px 0 var(--portfolio-glass-highlight);

	/* ServerTabBar pill — same frost as .glass (Allocated / Wallet) */
	--portfolio-server-tab-pill: var(--portfolio-glass-bg);
	--portfolio-server-tab-pill-tint: var(--portfolio-glass-tint);
	--portfolio-server-tab-pill-filter: var(--portfolio-glass-filter);
	--portfolio-server-tab-pill-highlight: var(--portfolio-glass-highlight);
	--portfolio-server-tab-pill-opaque: var(--portfolio-glass-opaque);
	--portfolio-server-tab-pill-duration: 340ms;
	--portfolio-server-tab-pill-ease: var(--portfolio-nav-collapse-ease);
}

@media (prefers-color-scheme: dark) {
	.portfolio {
		/* AppBackground dark canvas white 0.04 + radials */
		--portfolio-canvas: rgb(10 10 10);
		--portfolio-canvas-spot: rgb(36 36 36);
		--portfolio-canvas-glow: rgb(26 26 26);

		--portfolio-profit-action: rgb(41 148 87);
		--portfolio-highlight: rgb(250 209 71);
		--portfolio-demo-soft: rgb(255 255 255 / 0.12);
		--portfolio-focus: var(--portfolio-highlight);

		--portfolio-nav-icon: rgb(255 255 255 / 0.82);
		--portfolio-sheet-chrome-fill: rgb(0 0 0 / 0.22);

		--portfolio-form-fill: rgb(255 255 255 / 0.045);
		--portfolio-form-border: rgb(255 255 255 / 0.07);
		--portfolio-segment-track: rgb(118 118 128 / 0.24);
		--portfolio-segment-active: rgb(99 99 102);
		--portfolio-segment-shadow:
			0 1px 3px rgb(0 0 0 / 0.35),
			inset 0 var(--hairline) 0 rgb(255 255 255 / 0.08);

		--signal-amber: rgb(250 184 64);
		--signal-cyan: rgb(71 209 235);
		--signal-slate: rgb(158 173 199);

		--portfolio-alert-bg: rgb(44 44 46 / 0.42);
		--portfolio-alert-opaque: rgb(44 44 46);
		--portfolio-alert-field: rgb(0 0 0 / 0.38);
		--portfolio-alert-separator: rgb(255 255 255 / 0.12);
		--portfolio-alert-press: rgb(255 255 255 / 0.08);
		--portfolio-alert-scrim: rgb(0 0 0 / 0.32);
		--portfolio-alert-shadow:
			0 22px 56px rgb(0 0 0 / 0.45), 0 1px 0 var(--portfolio-glass-highlight);

		--portfolio-popover-bg: rgb(58 58 60 / 0.68);
		--portfolio-popover-opaque: rgb(58 58 60);
		--portfolio-popover-shadow:
			0 18px 40px rgb(0 0 0 / 0.45), 0 1px 0 var(--portfolio-glass-highlight);
	}
}


/* ./browserTokens.css */
/*
 * Browser-specific portfolio overrides.
 * Baseline tokens stay in tokens.css (12px loading default for all browsers).
 * Only override here when a browser needs something different.
 */

html[data-portfolio-browser='safari'] .portfolio {
	--portfolio-nav-pad-bottom: var(--space-10);
}


/* ./base.css */
/* Portfolio canvas + type. Page fill is :has(.portfolio) only.
 * Shell is edge-to-edge. Header and outlet share --portfolio-pad. */

html:has(.portfolio),
body:has(.portfolio),
#root:has(.portfolio) {
	width: 100%;
	min-height: 100dvh;
	margin: 0;
	background: var(--portfolio-canvas);
	overflow-x: clip;
	overscroll-behavior: none;
	scrollbar-width: none;
}

html:has(.portfolio)::-webkit-scrollbar,
body:has(.portfolio)::-webkit-scrollbar {
	display: none;
}

html.portfolio-pull-active:has(.portfolio),
html.portfolio-pull-active:has(.portfolio) body {
	overflow: hidden;
}

html:has(.portfolio) .portfolio,
.portfolio {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 100dvh;
	padding-inline: 0;
	overflow-x: clip;
}

.portfolio {
	color: var(--portfolio-ink);
	font-family: var(--portfolio-font-body);
	font-weight: var(--weight-regular);
	font-kerning: normal;
	line-height: 1.2;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: var(--portfolio-canvas);
	background-image:
		radial-gradient(
			circle var(--space-420) at 50% 0%,
			var(--portfolio-canvas-spot),
			var(--portfolio-canvas)
		),
		radial-gradient(
			circle var(--space-320) at 85% 75%,
			var(--portfolio-canvas-glow),
			transparent
		);
	background-attachment: fixed;
	scroll-padding-top: var(--portfolio-sticky-header);
	scroll-padding-bottom: calc(
		var(--portfolio-nav-bar) + var(--portfolio-nav-breathing) +
			var(--portfolio-nav-pad-bottom)
	);

	button,
	input,
	textarea,
	select {
		font: inherit;
		color: inherit;
	}

	button {
		touch-action: manipulation;
	}

	:focus-visible {
		outline: var(--space-2) solid var(--portfolio-focus);
		outline-offset: var(--space-3);
	}

	.wordmark {
		font-family: var(--portfolio-font-wordmark);
		font-weight: var(--portfolio-weight-bold);
	}

	.header-bar,
	main.outlet {
		padding-inline: var(--portfolio-pad);
	}

	.sheet .body,
	.sheet .feature {
		scrollbar-width: thin;
	}
}

@media (prefers-color-scheme: dark) {
	html:has(.portfolio),
	body:has(.portfolio),
	#root:has(.portfolio) {
		background: var(--portfolio-canvas);
	}
}


/* ./surfaces.css */
/*
 * Portfolio specular + reduced-transparency / reduced-motion.
 * Glass shadow lives on --portfolio-glass-shadow in tokens.css.
 */

@media (prefers-reduced-transparency: reduce) {
	.portfolio {
		--portfolio-glass-bg: var(--portfolio-glass-opaque);
		--portfolio-glass-tint: transparent;
		--portfolio-glass-filter: none;
		--portfolio-backdrop-bg: var(--backdrop-bg);
		--portfolio-backdrop-filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio {
		--portfolio-duration-enter: 0ms;
		--portfolio-duration-leave: 0ms;
		--portfolio-nav-expand-duration: 0ms;
		--portfolio-nav-collapse-duration: 0ms;
	}
}

.portfolio .specular {
	position: absolute;
	top: 0;
	right: var(--portfolio-specular-inset);
	left: var(--portfolio-specular-inset);
	z-index: 0;
	height: var(--portfolio-specular-height);
	border-radius: var(--portfolio-radius-full);
	pointer-events: none;
	background: linear-gradient(
		180deg,
		var(--portfolio-specular-from),
		var(--white-00)
	);
	filter: blur(var(--portfolio-specular-blur));
	opacity: var(--portfolio-specular-opacity);
}


/* ./components/glass.css */
/* Root class matches filename: glass.css → .glass */
/* Same frost + inset rim as .server-tab-bar .selection */

.portfolio {
	.glass {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		padding: var(--portfolio-module-pad);
		border-radius: var(--portfolio-radius);
		background: var(--portfolio-server-tab-pill);
		box-shadow: var(--portfolio-glass-shadow);
		backdrop-filter: var(--portfolio-server-tab-pill-filter);
		-webkit-backdrop-filter: var(--portfolio-server-tab-pill-filter);

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			z-index: 0;
			border-radius: inherit;
			pointer-events: none;
			background: linear-gradient(
				180deg,
				var(--portfolio-server-tab-pill-highlight) 0%,
				transparent 42%
			);
			box-shadow: inset 0 0 0 var(--space-1)
				var(--portfolio-server-tab-pill-highlight);
		}

		.body {
			position: relative;
			z-index: 1;
		}
	}
}

@media (prefers-color-scheme: dark) {
	.portfolio {
		.glass {
			background:
				linear-gradient(
					var(--portfolio-server-tab-pill-tint),
					var(--portfolio-server-tab-pill-tint)
				),
				var(--portfolio-server-tab-pill);

			&::before {
				background: linear-gradient(
					180deg,
					var(--white-06) 0%,
					transparent 40%
				);
				box-shadow: inset 0 0 0 var(--space-1) var(--white-06);
			}
		}
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio {
		.glass {
			background: var(--portfolio-server-tab-pill-opaque);
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
		}
	}
}


/* ./components/flat-glass.css */
/* Root class matches filename: flat-glass.css → .flat-glass */
/* Same frost + inset rim as .server-tab-bar .selection */

.portfolio {
	.flat-glass {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		border: 0;
		background: var(--portfolio-server-tab-pill);
		box-shadow: var(--portfolio-glass-shadow);
		backdrop-filter: var(--portfolio-server-tab-pill-filter);
		-webkit-backdrop-filter: var(--portfolio-server-tab-pill-filter);

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			z-index: 0;
			border-radius: inherit;
			pointer-events: none;
			background: linear-gradient(
				180deg,
				var(--portfolio-server-tab-pill-highlight) 0%,
				transparent 42%
			);
			box-shadow: inset 0 0 0 var(--space-1)
				var(--portfolio-server-tab-pill-highlight);
		}

		> * {
			position: relative;
			z-index: 1;
		}

		&.is-solo {
			border-radius: var(--portfolio-radius);
		}

		&.is-first {
			border-radius: var(--portfolio-radius) var(--portfolio-radius) 0 0;
		}

		&.is-middle {
			border-radius: 0;
		}

		&.is-last {
			border-radius: 0 0 var(--portfolio-radius) var(--portfolio-radius);
		}
	}
}

@media (prefers-color-scheme: dark) {
	.portfolio {
		.flat-glass {
			background:
				linear-gradient(
					var(--portfolio-server-tab-pill-tint),
					var(--portfolio-server-tab-pill-tint)
				),
				var(--portfolio-server-tab-pill);

			&::before {
				background: linear-gradient(
					180deg,
					var(--white-06) 0%,
					transparent 40%
				);
				box-shadow: inset 0 0 0 var(--space-1) var(--white-06);
			}
		}
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio {
		.flat-glass {
			background: var(--portfolio-server-tab-pill-opaque);
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
		}
	}
}


/* ./components/sheet.css */
/* Root class matches filename: sheet.css → .sheet */

.portfolio {
	.sheet {
		position: fixed;
		inset: 0;
		z-index: var(--portfolio-z-sheet);
		pointer-events: none;

		&.is-open {
			pointer-events: auto;
		}

		&.is-stacked {
			z-index: var(--portfolio-z-stacked);
		}

		/* Motion is owned by Sheet.tsx: enter, detent snaps and dismiss run as
		 * Web Animations sampled from a spring so a fling keeps its velocity.
		 * The stylesheet only describes the two rest states. */
		.backdrop {
			position: absolute;
			inset: 0;
			margin: 0;
			padding: 0;
			border: 0;
			cursor: pointer;
			touch-action: none;
			background: var(--portfolio-backdrop-bg);
			opacity: 0;
			transform: translateZ(0);
			backface-visibility: hidden;
		}

		/* Phone: the panel is the iPad card, flush to the bottom. The clip must
		 * stay a uniform rounded rect (equal radii, equal border widths) — Chrome
		 * otherwise isolates backdrop-filter descendants behind the clip and the
		 * `.frost-fade` layers sample only the panel, never the dashboard. So the
		 * bottom corners exist but sit one radius below the viewport; content-box
		 * sizing keeps the detent height (and drag height) as the visible part. */
		.panel {
			position: absolute;
			right: 0;
			bottom: calc(-1 * var(--portfolio-sheet-radius));
			left: 0;
			display: flex;
			flex-direction: column;
			box-sizing: content-box;
			width: auto;
			height: var(--portfolio-sheet-medium);
			max-height: 100svh;
			padding-bottom: var(--portfolio-sheet-radius);
			overflow: hidden;
			border: var(--portfolio-border-width) solid var(--portfolio-glass-border);
			border-radius: var(--portfolio-sheet-radius);
			box-shadow: var(--portfolio-glass-shadow);
			transform: translateY(calc(100% + var(--safe-bottom)));
		}

		&.is-open {
			.backdrop {
				opacity: 1;
			}

			.panel {
				transform: translateY(0);
			}
		}

		&.is-large .panel {
			height: var(--portfolio-sheet-large);
		}

		&.is-dragging .panel {
			cursor: grabbing;
			user-select: none;
			-webkit-user-select: none;
			-webkit-touch-callout: none;
			will-change: transform, height;
		}

		.handle {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			z-index: 3;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: var(--portfolio-sheet-handle);
			margin: 0;
			padding: 0;
			border: 0;
			appearance: none;
			-webkit-appearance: none;
			cursor: grab;
			touch-action: none;
			background: none;
			color: inherit;

			&::after {
				content: '';
				width: var(--space-36);
				height: var(--space-5);
				border-radius: var(--portfolio-radius-full);
				background: currentColor;
				opacity: 0.28;
			}

			&:active {
				cursor: grabbing;
			}
		}

		.frost {
			position: absolute;
			inset: 0;
			z-index: 0;
			overflow: hidden;
			pointer-events: none;
			border-radius: inherit;
			background: var(--portfolio-glass-bg);
			backdrop-filter: var(--portfolio-glass-filter);
			-webkit-backdrop-filter: var(--portfolio-glass-filter);
		}

		.body {
			position: relative;
			z-index: 1;
			display: flex;
			flex: 1;
			flex-direction: column;
			min-height: 0;
			overflow: auto;
			overscroll-behavior: contain;
			scrollbar-width: thin;
			scroll-padding-top: calc(
				var(--portfolio-sheet-header-min) +
					var(--portfolio-sheet-search, var(--space-0))
			);

			&:has(> .sheet-chrome .accessory) {
				--portfolio-sheet-search: var(--space-64);
			}
		}

		/* Scrolls with .body, not as its own box — a nested scroller would clip
		 * content at the sticky chrome instead of letting it pass under the frost. */
		.feature {
			display: flex;
			flex: 1 0 auto;
			flex-direction: column;
			overflow: visible;

			.buy-picker,
			.chat-panel,
			.report-panel,
			.task-list,
			.notifications-panel,
			.server-list {
				padding-bottom: var(--text-body);
			}

			.buy-picker {
				flex: 1;
				align-self: stretch;
				max-width: none;
				margin-inline: 0;
			}

			.chat-panel {
				min-height: 0;
				flex: 1;
			}
		}
	}
}

@media (prefers-color-scheme: dark) {
	.portfolio {
		.sheet {
			.frost {
				background:
					linear-gradient(
						var(--portfolio-glass-tint),
						var(--portfolio-glass-tint)
					),
					var(--portfolio-glass-bg);
			}
		}
	}
}

@media (min-width: 768px) {
	.portfolio {
		.sheet {
			.panel {
				right: auto;
				bottom: var(--portfolio-nav-pad-bottom);
				left: 50%;
				box-sizing: border-box;
				width: min(var(--measure-34), calc(100vw - var(--space-rem-2-5)));
				max-height: min(
					calc(88dvh - var(--portfolio-nav-pad-bottom)),
					var(--measure-54)
				);
				margin-left: calc(
					min(var(--measure-34), calc(100vw - var(--space-rem-2-5))) / -2
				);
				padding-bottom: 0;
			}
		}

		.sheet.is-large .panel {
			width: min(var(--measure-40), calc(100vw - var(--space-rem-2-5)));
			max-height: min(
				calc(92dvh - var(--portfolio-nav-pad-bottom)),
				var(--measure-72)
			);
			margin-left: calc(
				min(var(--measure-40), calc(100vw - var(--space-rem-2-5))) / -2
			);
		}
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio {
		.sheet {
			.frost {
				background: var(--portfolio-glass-opaque);
				backdrop-filter: none;
				-webkit-backdrop-filter: none;
			}
		}
	}
}


/* ./components/sheet-chrome.css */
/* Root class matches filename: sheet-chrome.css → .sheet-chrome
 * Sticky frost over scroll. `.frost-fade` bleeds past the header box and stacks
 * one small blur per layer; each layer samples the one painted before it, so the
 * radius accumulates toward the top and unwinds one step at a time downward and
 * the glass dissolves into the content with no seam.
 * Never give this element a backdrop root (isolation / transform / filter):
 * the layers would then sample an empty backdrop and blur nothing. */

.portfolio {
	.sheet-chrome {
		--sheet-chrome-bleed: var(--portfolio-sheet-chrome-bleed);
		--sheet-chrome-fill: var(--portfolio-sheet-chrome-fill);
		position: sticky;
		top: 0;
		z-index: 2;
		flex: 0 0 auto;
		min-height: var(--portfolio-sheet-chrome-min);
		overflow: visible;
		padding: var(--portfolio-sheet-handle) 0
			var(--portfolio-sheet-header-pad-bottom);
		pointer-events: none;

		.frost-fade {
			position: absolute;
			top: 0;
			right: 0;
			bottom: calc(-1 * var(--sheet-chrome-bleed));
			left: 0;
			z-index: 0;
			pointer-events: none;

			.layer {
				position: absolute;
				inset: 0;
				display: block;
			}

			/* Probe C masks, stretched so they finish at 100% — the 18px bleed —
			 * instead of dying inside the header. Solid through the title row,
			 * dissolve across the last half of the frost (header bottom + bleed). */
			.layer:nth-child(1) {
				backdrop-filter: var(--frost-layer-1);
				-webkit-backdrop-filter: var(--frost-layer-1);
				mask-image: var(--frost-mask-1);
				-webkit-mask-image: var(--frost-mask-1);
			}

			.layer:nth-child(2) {
				backdrop-filter: var(--frost-layer-2);
				-webkit-backdrop-filter: var(--frost-layer-2);
				mask-image: var(--frost-mask-2);
				-webkit-mask-image: var(--frost-mask-2);
			}

			.layer:nth-child(3) {
				backdrop-filter: var(--frost-layer-3);
				-webkit-backdrop-filter: var(--frost-layer-3);
				mask-image: var(--frost-mask-3);
				-webkit-mask-image: var(--frost-mask-3);
			}

			.layer:nth-child(4) {
				background: var(--sheet-chrome-fill);
				backdrop-filter: var(--frost-layer-4);
				-webkit-backdrop-filter: var(--frost-layer-4);
				mask-image: var(--frost-mask-4);
				-webkit-mask-image: var(--frost-mask-4);
			}
		}

		> * {
			pointer-events: auto;
		}

		.row {
			position: relative;
			z-index: 1;
			display: flex;
			align-items: center;
			min-height: var(--portfolio-sheet-chrome-cta);
			padding-inline: var(--portfolio-sheet-header-pad-x);
		}

		.leading {
			display: flex;
			z-index: 1;
			gap: var(--space-8);
			align-items: center;
			min-width: 0;
		}

		.brand {
			display: block;
			flex: 0 0 auto;
			box-sizing: border-box;
			width: var(--portfolio-sheet-chrome-cta);
			height: var(--portfolio-sheet-chrome-cta);
			min-height: var(--portfolio-sheet-chrome-cta);
			max-height: var(--portfolio-sheet-chrome-cta);
			border: var(--portfolio-border-width) solid var(--portfolio-glass-border);
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-glass-bg);
			object-fit: contain;
			backdrop-filter: var(--portfolio-glass-filter);
			-webkit-backdrop-filter: var(--portfolio-glass-filter);
		}

		.title {
			/* Inset is the wider side control, measured on the row, so the label
			 * stays centered and ellipsizes before it meets a button. */
			position: absolute;
			top: 0;
			right: calc(var(--sheet-chrome-title-inset, 0px) + var(--space-8));
			left: calc(var(--sheet-chrome-title-inset, 0px) + var(--space-8));
			height: var(--portfolio-sheet-chrome-cta);
			margin: 0;
			overflow: hidden;
			font-size: var(--portfolio-text-headline);
			font-weight: var(--portfolio-weight-semibold);
			line-height: var(--portfolio-sheet-chrome-cta);
			text-align: center;
			text-overflow: ellipsis;
			white-space: nowrap;
			pointer-events: none;
		}

		.trailing {
			display: flex;
			z-index: 1;
			gap: var(--space-8);
			align-items: center;
			margin-left: auto;
		}

		/* IosSheetTextButton + IosSheetGlassIconButton — same glass capsule. */
		.text-action,
		.done,
		.sheet-chrome-icon {
			display: inline-flex;
			z-index: 1;
			flex: 0 0 auto;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			height: var(--portfolio-sheet-chrome-cta);
			min-height: var(--portfolio-sheet-chrome-cta);
			max-height: var(--portfolio-sheet-chrome-cta);
			margin: 0;
			border: var(--portfolio-border-width) solid var(--portfolio-glass-border);
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-glass-bg);
			color: var(--portfolio-ink);
			font-size: var(--portfolio-sheet-chrome-label);
			font-weight: var(--portfolio-weight-semibold);
			line-height: 1;
			cursor: pointer;
			appearance: none;
			backdrop-filter: var(--portfolio-glass-filter);
			-webkit-backdrop-filter: var(--portfolio-glass-filter);

			&:disabled {
				cursor: default;
				opacity: 0.45;
			}
		}

		.text-action,
		.done {
			min-width: var(--portfolio-sheet-chrome-cta);
			padding: 0 var(--space-14);
		}

		.text-action.is-loss {
			color: var(--portfolio-loss);
		}

		.text-action.is-profit {
			color: var(--portfolio-profit);
		}

		.text-action.is-queued {
			color: var(--portfolio-ink-muted);
		}

		.sheet-chrome-icon {
			width: var(--portfolio-sheet-chrome-cta);
			padding: 0;
		}

		.accessory {
			position: relative;
			z-index: 1;
			padding: 0 0 var(--space-10);
		}
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio {
		.sheet-chrome {
			.frost-fade .layer {
				backdrop-filter: none;
				-webkit-backdrop-filter: none;
			}

			.frost-fade .layer:nth-child(4) {
				background: var(--portfolio-glass-opaque);
			}

			.text-action,
			.done,
			.sheet-chrome-icon,
			.brand {
				background: var(--portfolio-glass-opaque);
				backdrop-filter: none;
				-webkit-backdrop-filter: none;
			}
		}
	}
}


/* ./components/sheet-chrome-icon.css */
/* Root class matches filename: sheet-chrome-icon.css → .sheet-chrome-icon
 * Sheet-header glass icon — same capsule as Done (IosSheetGlassIconButton). */

.portfolio {
	.sheet-chrome-icon {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: var(--portfolio-sheet-chrome-cta);
		height: var(--portfolio-sheet-chrome-cta);
		min-height: var(--portfolio-sheet-chrome-cta);
		max-height: var(--portfolio-sheet-chrome-cta);
		margin: 0;
		padding: 0;
		border: var(--portfolio-border-width) solid var(--portfolio-glass-border);
		border-radius: var(--portfolio-radius-full);
		background: var(--portfolio-glass-bg);
		color: var(--portfolio-ink);
		cursor: pointer;
		appearance: none;
		backdrop-filter: var(--portfolio-glass-filter);
		-webkit-backdrop-filter: var(--portfolio-glass-filter);

		&:disabled {
			cursor: not-allowed;
			opacity: 0.45;
		}

		svg {
			display: block;
			width: var(--portfolio-sheet-chrome-icon-glyph);
			height: var(--portfolio-sheet-chrome-icon-glyph);
		}
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio .sheet-chrome-icon {
		background: var(--portfolio-glass-opaque);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}


/* ./components/popover.css */
/* Root class matches filename: popover.css → .popover */

.portfolio {
	.popover-root {
		position: fixed;
		inset: 0;
		z-index: var(--portfolio-z-popover);
		pointer-events: none;

		.backdrop {
			position: absolute;
			inset: 0;
			margin: 0;
			padding: 0;
			border: 0;
			pointer-events: auto;
			cursor: default;
			background: transparent;
		}
	}

	.popover {
		position: fixed;
		z-index: 1;
		isolation: isolate;
		width: max-content;
		max-width: calc(100vw - var(--space-rem-1-5));
		height: max-content;
		max-height: calc(100dvh - var(--space-16));
		padding: 0;
		overflow: auto;
		pointer-events: auto;
		border: var(--portfolio-border-width) solid var(--portfolio-glass-border);
		border-radius: var(--portfolio-popover-radius);
		background: var(--portfolio-popover-bg);
		box-shadow: var(--portfolio-popover-shadow);
		backdrop-filter: var(--portfolio-popover-filter);
		-webkit-backdrop-filter: var(--portfolio-popover-filter);
	}

	.overflow-menu {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		min-width: var(--portfolio-popover-min);
		height: max-content;
		overflow: visible;
		scrollbar-width: thin;

		&::before,
		&::after {
			content: '';
			display: block;
			flex-shrink: 0;
			height: var(--portfolio-popover-cap);
		}

		.section {
			display: flex;
			gap: var(--space-6);
			align-items: center;
			padding: var(--space-4) var(--portfolio-popover-pad-x);
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-caption);
			font-weight: var(--portfolio-weight-semibold);

			svg {
				width: var(--space-12);
				height: var(--space-12);
			}
		}

		.rule {
			height: var(--space-1);
			margin: var(--space-4) var(--space-8);
			background: var(--portfolio-glass-border);
		}

		button {
			display: flex;
			gap: var(--space-12);
			align-items: center;
			width: 100%;
			min-height: var(--portfolio-popover-row);
			margin: 0;
			padding: 0 var(--portfolio-popover-pad-x);
			border: 0;
			border-radius: var(--portfolio-radius-chip);
			background: transparent;
			color: inherit;
			font-size: var(--portfolio-text-headline);
			font-weight: var(--portfolio-weight-regular);
			line-height: 1.2;
			text-align: start;
			cursor: pointer;
		}

		button:active {
			background: var(--portfolio-segment-track);
		}

		button.is-danger {
			color: var(--portfolio-loss);
		}

		.check {
			display: flex;
			flex: 0 0 var(--space-14);
			align-items: center;
			justify-content: center;
			width: var(--space-14);
			height: var(--space-14);
			opacity: 0;

			svg {
				display: block;
				width: var(--space-12);
				height: var(--space-12);
			}
		}

		button.is-selected .check {
			opacity: 1;
		}

		.chevron {
			display: grid;
			flex: 0 0 var(--space-10);
			width: var(--space-10);
			height: var(--space-10);
			place-items: center;
			margin-left: auto;
			opacity: 0.35;

			svg {
				display: block;
				width: var(--space-8);
				height: var(--space-8);
			}
		}

		.label {
			flex: 1 1 auto;
			min-width: 0;
		}

		/* Menu rows with a subtitle (iOS Picker label with two Texts): fixed menu width, wrapped footnote. */
		&.has-subtitles {
			width: var(--portfolio-popover-min);

			button {
				padding-block: var(--space-8);
			}

			.label {
				display: flex;
				flex-direction: column;
				gap: var(--space-2);
			}

			.subtitle {
				color: var(--portfolio-ink-muted);
				font-size: var(--portfolio-text-footnote);
				line-height: 1.25;
			}
		}

		.icon {
			display: flex;
			flex: 0 0 var(--space-22);
			align-items: center;
			justify-content: center;
			width: var(--space-16);
			height: var(--space-16);

			svg {
				display: block;
				width: var(--space-16);
				height: var(--space-16);
			}

			path {
				fill-opacity: 1;
			}
		}
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio {
		.popover {
			background: var(--portfolio-popover-opaque);
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
		}
	}
}


/* ./components/alert.css */
/* Root class matches filename: alert.css → .alert */

.portfolio {
	.alert-root {
		position: fixed;
		inset: 0;
		z-index: var(--portfolio-z-alert);
		display: grid;
		place-items: center;
		padding: var(--space-24);
		isolation: isolate;
		pointer-events: none;

		.backdrop {
			position: absolute;
			inset: 0;
			margin: 0;
			padding: 0;
			border: 0;
			pointer-events: auto;
			cursor: default;
			background: var(--portfolio-alert-scrim);
			backdrop-filter: var(--portfolio-backdrop-filter);
			-webkit-backdrop-filter: var(--portfolio-backdrop-filter);
		}
	}

	.alert {
		position: relative;
		z-index: 1;
		isolation: isolate;
		width: min(var(--portfolio-alert-width), calc(100vw - var(--space-48)));
		overflow: hidden;
		pointer-events: auto;
		border: var(--portfolio-border-width) solid var(--portfolio-glass-border);
		border-radius: var(--portfolio-alert-radius);
		background: transparent;
		box-shadow: var(--portfolio-alert-shadow);
		color: var(--portfolio-ink);
		animation: portfolio-alert-enter var(--duration-base)
			var(--portfolio-ease-enter) both;

		.frost {
			position: absolute;
			inset: 0;
			z-index: 0;
			overflow: hidden;
			pointer-events: none;
			border-radius: inherit;
			background: var(--portfolio-alert-bg);
			backdrop-filter: var(--portfolio-alert-filter);
			-webkit-backdrop-filter: var(--portfolio-alert-filter);
		}

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			z-index: 1;
			border-radius: inherit;
			pointer-events: none;
			box-shadow: inset 0 0 0 var(--space-1) var(--portfolio-glass-highlight);
			background: linear-gradient(
				180deg,
				var(--portfolio-glass-highlight) 0%,
				transparent 42%
			);
		}

		.copy,
		.actions {
			position: relative;
			z-index: 2;
		}

		.copy {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			gap: var(--space-12);
			padding: var(--space-20) var(--space-16) var(--space-16);
			text-align: center;
		}

		.title {
			margin: 0;
			font-size: var(--text-ios-body);
			font-weight: var(--portfolio-weight-semibold);
			line-height: 1.25;
			letter-spacing: -0.02em;
		}

		.message {
			margin: 0;
			color: var(--portfolio-ink);
			font-size: var(--space-13);
			font-weight: var(--weight-regular);
			line-height: 1.35;
		}

		input {
			width: 100%;
			min-height: var(--space-36);
			padding: var(--space-8) var(--space-14);
			border: 0;
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-alert-field);
			box-shadow: inset 0 0 0 var(--hairline) var(--portfolio-alert-separator);
			color: var(--portfolio-ink);
			font: inherit;
			font-size: var(--text-ios-subhead);
			text-align: start;

			&::placeholder {
				color: var(--portfolio-ink-muted);
			}

			&:focus-visible {
				outline: none;
			}
		}

		.actions {
			display: flex;
			border-top: var(--portfolio-alert-hairline) solid
				var(--portfolio-alert-separator);
		}

		.actions button {
			flex: 1 1 50%;
			min-height: var(--space-48);
			margin: 0;
			padding: 0 var(--space-8);
			border: 0;
			background: transparent;
			color: var(--portfolio-system);
			font: inherit;
			font-size: var(--text-ios-body);
			line-height: 1.2;
			cursor: pointer;
		}

		.actions button + button {
			border-left: var(--portfolio-alert-hairline) solid
				var(--portfolio-alert-separator);
		}

		.actions.is-stacked {
			flex-direction: column;
		}

		.actions.is-stacked button {
			flex: 0 0 auto;
			width: 100%;
		}

		.actions.is-stacked button + button {
			border-left: 0;
			border-top: var(--portfolio-alert-hairline) solid
				var(--portfolio-alert-separator);
		}

		.actions .is-default {
			font-weight: var(--portfolio-weight-semibold);
		}

		.actions .is-cancel {
			font-weight: var(--weight-regular);
		}

		.actions .is-destructive {
			color: var(--portfolio-loss);
			font-weight: var(--portfolio-weight-semibold);
		}

		.actions button:active {
			background: var(--portfolio-alert-press);
		}
	}
}

@keyframes portfolio-alert-enter {
	from {
		opacity: 0;
		transform: scale(1.12);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@media (prefers-color-scheme: dark) {
	.portfolio {
		.alert .frost {
			background:
				linear-gradient(
					var(--portfolio-glass-tint),
					var(--portfolio-glass-tint)
				),
				var(--portfolio-alert-bg);
		}

		.alert::before {
			background: linear-gradient(180deg, var(--white-08) 0%, transparent 40%);
			box-shadow: inset 0 0 0 var(--space-1) var(--white-08);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .alert {
		animation: none;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio {
		.alert-root .backdrop {
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
		}

		.alert .frost {
			background: var(--portfolio-alert-opaque);
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
		}
	}
}


/* ./components/calendar.css */
/* Root class matches filename: calendar.css → .calendar */

.portfolio {
	.calendar-root {
		position: fixed;
		inset: 0;
		z-index: var(--portfolio-z-calendar);
		isolation: isolate;
		transform: translateZ(0);
		pointer-events: none;

		.backdrop {
			position: absolute;
			inset: 0;
			margin: 0;
			padding: 0;
			border: 0;
			pointer-events: auto;
			cursor: default;
			background: transparent;
		}
	}

	.calendar-popover {
		--calendar-fill: rgb(248 248 250 / 0.92);
		--calendar-surface:
			linear-gradient(var(--calendar-fill), var(--calendar-fill)),
			var(--portfolio-glass-bg);
		--calendar-arrow-size: var(--space-16);
		--calendar-arrow-clip-w: var(--space-26);
		--calendar-arrow-clip-h: var(--space-18);
		--calendar-arrow-overlap: var(--space-3);
		position: fixed;
		z-index: 1;
		width: min(var(--measure-20), calc(100vw - var(--space-rem-1-75)));
		padding: var(--space-14);
		overflow: visible;
		pointer-events: auto;
		border: var(--portfolio-border-width) solid var(--portfolio-glass-border);
		border-radius: var(--portfolio-radius-bubble);
		background: transparent;
		box-shadow: var(--portfolio-glass-shadow);
	}

	.calendar-popover .glass {
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: var(--calendar-surface);
		backdrop-filter: var(--portfolio-glass-filter);
		-webkit-backdrop-filter: var(--portfolio-glass-filter);
		pointer-events: none;
	}

	.calendar-popover .arrow {
		position: absolute;
		z-index: 2;
		width: var(--calendar-arrow-clip-w);
		height: var(--calendar-arrow-clip-h);
		overflow: hidden;
		background: transparent;
		pointer-events: none;
	}

	.calendar-popover .arrow::after {
		content: '';
		position: absolute;
		width: var(--calendar-arrow-size);
		height: var(--calendar-arrow-size);
		background: var(--calendar-surface);
		border: var(--portfolio-border-width) solid var(--portfolio-glass-border);
		border-top-color: transparent;
		border-left-color: transparent;
		transform: rotate(45deg);
	}

	.calendar-popover.is-arrow-bottom .arrow {
		bottom: calc(var(--calendar-arrow-overlap) - var(--calendar-arrow-clip-h));
		margin-left: calc(-0.5 * var(--calendar-arrow-clip-w));
		filter: drop-shadow(0 var(--space-3) var(--space-4) var(--black-16));
	}

	.calendar-popover.is-arrow-bottom .arrow::after {
		left: calc(
			0.5 * (var(--calendar-arrow-clip-w) - var(--calendar-arrow-size))
		);
		top: calc(var(--calendar-arrow-overlap) - 0.5 * var(--calendar-arrow-size));
	}

	.calendar-popover.is-arrow-top .arrow {
		top: calc(var(--calendar-arrow-overlap) - var(--calendar-arrow-clip-h));
		margin-left: calc(-0.5 * var(--calendar-arrow-clip-w));
		filter: drop-shadow(
			0 calc(-1 * var(--space-3)) var(--space-4) var(--black-16)
		);
	}

	.calendar-popover.is-arrow-top .arrow::after {
		left: calc(
			0.5 * (var(--calendar-arrow-clip-w) - var(--calendar-arrow-size))
		);
		bottom: calc(
			var(--calendar-arrow-overlap) - 0.5 * var(--calendar-arrow-size)
		);
		transform: rotate(225deg);
	}

	.calendar {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		gap: var(--space-10);
		color: var(--portfolio-ink);
	}

	.calendar .month {
		display: flex;
		align-items: center;
		min-height: var(--space-32);
	}

	.calendar .month .title {
		flex: 1 1 auto;
		margin: 0;
		font-size: var(--text-tab);
		font-weight: var(--portfolio-weight-semibold);
		line-height: 1.2;
		text-align: center;
	}

	.calendar .month .nav {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: var(--space-32);
		height: var(--space-32);
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: var(--portfolio-radius-chip);
		background: transparent;
		color: inherit;
		cursor: pointer;
	}

	.calendar .month .nav:disabled {
		opacity: 0.28;
		cursor: default;
	}

	.calendar .month .nav svg {
		display: block;
		width: var(--space-12);
		height: var(--space-12);
	}

	.calendar .weekdays {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		color: var(--portfolio-ink-muted);
		font-size: var(--text-micro);
		font-weight: var(--portfolio-weight-semibold);
		line-height: 1;
		text-align: center;
	}

	.calendar .grid {
		position: relative;
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		grid-template-rows: repeat(6, var(--space-36));
	}

	.calendar .range {
		position: absolute;
		inset: 0;
		pointer-events: none;
	}

	.calendar .capsule {
		position: absolute;
		background: var(--portfolio-profit-soft);
	}

	.calendar .capsule.is-leading {
		border-radius: var(--portfolio-radius) 0 0 var(--portfolio-radius);
	}

	.calendar .capsule.is-trailing {
		border-radius: 0 var(--portfolio-radius) var(--portfolio-radius) 0;
	}

	.calendar .capsule.is-leading.is-trailing {
		border-radius: var(--portfolio-radius);
	}

	.calendar .endpoint {
		position: absolute;
		border-radius: var(--portfolio-radius-full);
		background: color-mix(in srgb, var(--portfolio-profit) 52%, transparent);
	}

	.calendar .cell {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: var(--space-36);
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--portfolio-ink);
		font: inherit;
		font-size: var(--text-tab);
		line-height: 1;
		cursor: pointer;
	}

	.calendar .cell.is-empty {
		pointer-events: none;
	}

	.calendar .cell:disabled,
	.calendar .cell:not(.is-selectable) {
		color: rgb(128 128 128 / 0.35);
		cursor: default;
	}

	.calendar .cell.is-endpoint {
		color: var(--on-accent);
		font-weight: var(--portfolio-weight-semibold);
	}

	.calendar .cell .number {
		position: relative;
	}

	.calendar .cell .mark {
		position: absolute;
		top: var(--space-4);
		right: calc(50% - var(--space-14));
		width: var(--space-5);
		height: var(--space-5);
		border-radius: var(--portfolio-radius-full);
	}

	.calendar .cell .mark.is-profit {
		background: var(--portfolio-profit);
	}

	.calendar .cell .mark.is-loss {
		background: var(--portfolio-loss);
	}

	.calendar .footer {
		display: flex;
		gap: var(--space-6);
		align-items: center;
		min-height: var(--space-22);
	}

	.calendar .footer button {
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--portfolio-ink-muted);
		font: inherit;
		font-size: var(--text-tab);
		font-weight: var(--portfolio-weight-medium);
		line-height: 1.2;
		white-space: nowrap;
		cursor: pointer;
	}

	.calendar .footer button.is-apply {
		color: var(--portfolio-profit);
	}

	.calendar .footer button.is-apply:disabled {
		color: var(--portfolio-ink-muted);
		cursor: default;
	}

	.calendar .footer .dot {
		color: var(--portfolio-ink-muted);
		font-size: var(--text-tab);
		font-weight: var(--portfolio-weight-medium);
	}

	.calendar .footer .spacer {
		flex: 1 1 auto;
		min-width: var(--space-8);
	}
}

@media (prefers-color-scheme: dark) {
	.portfolio {
		.calendar-popover {
			--calendar-fill: rgb(28 28 30 / 0.96);
		}

		.calendar-popover.is-arrow-bottom .arrow {
			filter: drop-shadow(0 var(--space-3) var(--space-5) var(--black-32));
		}

		.calendar-popover.is-arrow-top .arrow {
			filter: drop-shadow(
				0 calc(-1 * var(--space-3)) var(--space-5) var(--black-32)
			);
		}
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio {
		.calendar-popover {
			--calendar-surface: var(--portfolio-glass-opaque);
		}

		.calendar-popover .glass {
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
		}
	}
}


/* ./components/bottom-nav.css */
/* Root class matches filename: bottom-nav.css → .bottom-nav */

.portfolio {
	.bottom-nav {
		--nav-first: calc(
			var(--portfolio-nav-segment) + var(--portfolio-nav-pad-x)
		);
		--nav-buy-center: calc(var(--nav-first) / 2);
		--nav-chat-center: calc(
			var(--nav-first) + var(--portfolio-nav-segment) / 2
		);
		--nav-report-center: calc(
			var(--nav-first) + var(--portfolio-nav-segment) + var(--nav-first) / 2
		);
		--nav-collapsed-center: calc(var(--portfolio-nav-collapsed) / 2);
		--nav-morph: var(--portfolio-nav-expand-duration)
			var(--portfolio-nav-expand-ease);

		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: var(--portfolio-z-nav);
		transform: translateZ(0);
		display: flex;
		justify-content: center;
		padding-top: var(--portfolio-nav-breathing);
		padding-bottom: var(--portfolio-nav-pad-bottom);
		pointer-events: none;

		.pill {
			display: block;
			width: var(--portfolio-nav-pill);
			height: var(--portfolio-nav-bar);
			overflow: hidden;
			pointer-events: auto;
			border: var(--portfolio-border-width) solid var(--portfolio-glass-border);
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-glass-bg);
			box-shadow: var(--portfolio-glass-shadow);
			backdrop-filter: var(--portfolio-glass-filter);
			-webkit-backdrop-filter: var(--portfolio-glass-filter);
			transform: translateY(0) scale(1, 1);
			transform-origin: center bottom;
			opacity: 1;
			transition:
				width var(--nav-morph),
				transform var(--nav-morph),
				opacity var(--nav-morph);
		}

		.track {
			display: flex;
			align-items: stretch;
			width: var(--portfolio-nav-pill);
			height: 100%;
			transform: translateX(0);
			transition: transform var(--nav-morph);
		}

		.item {
			display: grid;
			flex: 0 0 var(--portfolio-nav-segment);
			place-items: center;
			min-width: var(--portfolio-nav-segment);
			min-height: var(--portfolio-nav-bar);
			padding: 0;
			border: 0;
			background: transparent;
			color: var(--portfolio-nav-icon);
			cursor: pointer;
			opacity: 1;
			transform: scale(1);
			transform-origin: center;
			transition:
				transform var(--nav-morph),
				opacity var(--nav-morph);

			&:first-child,
			&:last-child {
				flex-basis: var(--nav-first);
			}

			&.is-active {
				color: var(--portfolio-nav-icon-active);
			}

			&:disabled {
				cursor: not-allowed;
				opacity: 0.38;
			}
		}

		&:not(.is-collapsed) .item:active:not(:disabled) {
			transform: scale(0.9);
		}

		.icon {
			display: grid;
			width: var(--portfolio-nav-item);
			height: var(--portfolio-nav-item);
			place-items: center;
			border-radius: var(--portfolio-radius-full);

			.is-active & {
				background: var(--portfolio-nav-selection);
				backdrop-filter: var(--portfolio-glass-filter);
				-webkit-backdrop-filter: var(--portfolio-glass-filter);
			}

			svg {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		&.is-collapsed {
			--nav-morph: var(--portfolio-nav-collapse-duration)
				var(--portfolio-nav-collapse-ease);

			.pill {
				width: 0;
				pointer-events: none;
				transform: translateY(var(--space-12)) scale(0.55, 0.84);
				opacity: 0;
			}

			.item {
				opacity: 0;
				transform: scale(0.25);
			}

			.item.is-active {
				opacity: 1;
				transform: scale(1.18);
			}

			&[data-active] .pill {
				width: var(--portfolio-nav-collapsed);
				transform: translateY(var(--space-12)) scale(1.05, 0.84);
			}

			&[data-active='buy'] .track {
				transform: translateX(
					calc(var(--nav-collapsed-center) - var(--nav-buy-center))
				);
			}

			&[data-active='chat'] .track {
				transform: translateX(
					calc(var(--nav-collapsed-center) - var(--nav-chat-center))
				);
			}

			&[data-active='report'] .track {
				transform: translateX(
					calc(var(--nav-collapsed-center) - var(--nav-report-center))
				);
			}
		}

		&.is-disabled:not(.is-collapsed) {
			.pill {
				opacity: 0.56;
			}
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio {
		.bottom-nav {
			.pill,
			.track,
			.item {
				transition: none;
			}

			&:not(.is-collapsed) .item:active:not(:disabled) {
				transform: none;
			}
		}
	}
}

@media (prefers-color-scheme: dark) {
	.portfolio {
		.bottom-nav {
			.pill {
				background:
					linear-gradient(
						var(--portfolio-glass-tint),
						var(--portfolio-glass-tint)
					),
					var(--portfolio-glass-bg);
			}

			.icon {
				.is-active & {
					background: var(--portfolio-nav-selection);
				}
			}
		}
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio {
		.bottom-nav {
			.pill,
			.icon {
				backdrop-filter: none;
				-webkit-backdrop-filter: none;
			}

			.pill {
				background: var(--portfolio-glass-opaque);
			}

			.icon {
				.is-active & {
					background: var(--portfolio-nav-selection);
				}
			}
		}
	}
}


/* ./components/header-bar.css */
/* Root class matches filename: header-bar.css → .header-bar */

.portfolio {
	.header-bar {
		position: sticky;
		top: 0;
		z-index: var(--portfolio-z-header);
		display: flex;
		gap: var(--space-8);
		align-items: center;
		min-height: var(--portfolio-header-tab-row);
		padding-block: var(--portfolio-header-breathing) var(--portfolio-section);
		padding-inline: var(--portfolio-pad);
		background: linear-gradient(
			180deg,
			var(--portfolio-canvas) 55%,
			transparent
		);

		.tabs {
			flex: 1 1 auto;
			min-width: 0;
		}

		.overflow {
			display: grid;
			flex: 0 0 var(--portfolio-header-control);
			width: var(--portfolio-header-control);
			height: var(--portfolio-header-control);
			place-items: center;
			padding: 0;
			border: var(--portfolio-border-width) solid var(--portfolio-glass-border);
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-glass-bg);
			color: var(--portfolio-ink);
			cursor: pointer;
			backdrop-filter: var(--portfolio-glass-filter);
			-webkit-backdrop-filter: var(--portfolio-glass-filter);

			svg {
				display: block;
				width: var(--space-18);
				height: var(--space-18);
			}
		}
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio {
		.header-bar {
			.overflow {
				background: var(--portfolio-glass-opaque);
				backdrop-filter: none;
				-webkit-backdrop-filter: none;
			}
		}
	}
}


/* ./components/server-tab-bar.css */
/* Root class matches filename: server-tab-bar.css → .server-tab-bar */

.portfolio {
	.server-tab-bar {
		display: flex;
		align-items: center;
		min-height: var(--portfolio-header-tab-row);

		.tabs {
			position: relative;
			display: flex;
			gap: var(--space-4);
			align-items: center;
			min-width: 0;
			padding-block: var(--portfolio-header-tab-inset);
			padding-inline-end: var(--space-8);
			overflow-x: auto;
			scrollbar-width: thin;
			scrollbar-width: none;
			-webkit-overflow-scrolling: touch;

			&.has-trailing-fade {
				mask-image: linear-gradient(
					90deg,
					#000 0,
					#000 calc(100% - var(--portfolio-header-tab-fade)),
					transparent
				);
			}

			&::-webkit-scrollbar {
				display: none;
			}
		}

		.selection {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
			overflow: hidden;
			isolation: isolate;
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-server-tab-pill);
			opacity: 0;
			pointer-events: none;
			backdrop-filter: var(--portfolio-server-tab-pill-filter);
			-webkit-backdrop-filter: var(--portfolio-server-tab-pill-filter);

			&::before {
				content: '';
				position: absolute;
				inset: 0;
				border-radius: inherit;
				pointer-events: none;
				background: linear-gradient(
					180deg,
					var(--portfolio-server-tab-pill-highlight) 0%,
					transparent 42%
				);
				box-shadow: inset 0 0 0 var(--space-1)
					var(--portfolio-server-tab-pill-highlight);
			}

			&.is-visible {
				opacity: 1;
			}

			&.is-animated {
				transition:
					transform var(--portfolio-server-tab-pill-duration)
						var(--portfolio-server-tab-pill-ease),
					width var(--portfolio-server-tab-pill-duration)
						var(--portfolio-server-tab-pill-ease),
					height var(--portfolio-server-tab-pill-duration)
						var(--portfolio-server-tab-pill-ease);
			}
		}

		.tab,
		.add {
			&:focus-visible {
				outline: var(--space-2) solid var(--portfolio-focus);
				outline-offset: var(--space-2);
			}
		}

		.tab {
			position: relative;
			z-index: 1;
			display: inline-flex;
			flex: 0 0 auto;
			gap: var(--space-6);
			align-items: center;
			min-height: var(--portfolio-header-control);
			min-width: var(--space-24);
			padding: 0 var(--space-12);
			border: 0;
			border-radius: var(--portfolio-radius-full);
			background: transparent;
			color: var(--portfolio-ink-muted);
			font-size: var(--text-tab);
			font-weight: var(--portfolio-weight-medium);
			line-height: 1;
			white-space: nowrap;
			cursor: pointer;

			&.is-selected {
				color: var(--portfolio-ink);
			}
		}

		.add {
			position: relative;
			z-index: 1;
			display: grid;
			flex: 0 0 var(--portfolio-header-control);
			width: var(--portfolio-header-control);
			height: var(--portfolio-header-control);
			margin-inline-start: var(--space-4);
			place-items: center;
			padding: 0;
			border: 0;
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-demo-soft);
			color: var(--portfolio-ink-muted);
			cursor: pointer;

			svg {
				display: block;
				width: var(--space-16);
				height: var(--space-16);
			}
		}

		.live {
			width: var(--space-6);
			height: var(--space-6);
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-profit);

			&.is-production {
				box-shadow: 0 0 0 var(--space-3)
					color-mix(in srgb, var(--portfolio-profit) 10%, transparent);
				animation: server-tab-live-pulse 1.35s ease-in-out infinite alternate;
			}

			&.is-paused {
				background: var(--portfolio-paused);
			}

			&.is-stopped {
				background: var(--portfolio-loss);
			}
		}

		.is-stale {
			display: grid;
			width: var(--space-10);
			height: var(--space-10);
			place-items: center;
			color: var(--portfolio-paused);

			svg {
				display: block;
				width: var(--space-10);
				height: var(--space-10);
			}
		}
	}
}

@keyframes server-tab-live-pulse {
	from {
		box-shadow: 0 0 0 var(--space-3)
			color-mix(in srgb, var(--portfolio-profit) 10%, transparent);
	}

	to {
		box-shadow: 0 0 0 var(--space-6)
			color-mix(in srgb, var(--portfolio-profit) 26%, transparent);
	}
}

@media (prefers-color-scheme: dark) {
	.portfolio {
		.server-tab-bar {
			.selection {
				background:
					linear-gradient(
						var(--portfolio-server-tab-pill-tint),
						var(--portfolio-server-tab-pill-tint)
					),
					var(--portfolio-server-tab-pill);

				&::before {
					background: linear-gradient(
						180deg,
						var(--white-06) 0%,
						transparent 40%
					);
					box-shadow: inset 0 0 0 var(--space-1) var(--white-06);
				}
			}
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio {
		.server-tab-bar {
			.selection.is-animated {
				transition: none;
			}

			.live.is-production {
				animation: none;
			}
		}
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio {
		.server-tab-bar {
			.selection {
				background: var(--portfolio-server-tab-pill-opaque);
				backdrop-filter: none;
				-webkit-backdrop-filter: none;
			}
		}
	}
}


/* ./components/status-pill.css */
/* Root class matches filename: status-pill.css → .status-pill */

.portfolio {
	.status-pill {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: var(--portfolio-daemon-control);
		padding: 0 var(--space-12);
		border-radius: var(--portfolio-radius-full);
		font-size: var(--portfolio-text-micro);
		font-weight: var(--portfolio-weight-semibold);
		letter-spacing: 0.02em;
		line-height: 1;
		text-transform: capitalize;

		&.is-profit {
			color: var(--portfolio-profit);
			background: var(--portfolio-profit-soft);
		}

		&.is-neutral {
			color: var(--portfolio-demo);
			background: var(--portfolio-demo-soft);
		}

		&.is-paused {
			color: var(--portfolio-paused);
			background: var(--portfolio-paused-soft);
		}
	}
}


/* ./components/host-status-chip.css */
/* Root class matches filename: host-status-chip.css → .host-status-chip */

.portfolio {
	.host-status-chip {
		display: inline-flex;
		align-items: center;
		min-height: var(--space-22);
		padding: var(--space-4) var(--space-8);
		border-radius: var(--portfolio-radius-full);
		font-size: var(--portfolio-text-micro);
		font-weight: var(--portfolio-weight-medium);
		letter-spacing: 0.01em;
		line-height: 1;

		&.is-running {
			color: var(--portfolio-profit);
			background: var(--portfolio-profit-soft);
		}

		&.is-stopped {
			color: var(--portfolio-ink-muted);
			background: var(--portfolio-demo-soft);
		}
	}
}


/* ./components/swipe-row.css */
/* Root class matches filename: swipe-row.css → .swipe-row */

.portfolio {
	.swipe-row {
		position: relative;
		overflow: hidden;
		touch-action: pan-y;
	}

	.swipe-row > .actions {
		position: absolute;
		inset-block: 0;
		z-index: 0;
		display: flex;
		width: var(--space-88);
		opacity: 0;
		pointer-events: none;
	}

	.swipe-row > .actions button {
		width: 100%;
		min-height: var(--portfolio-touch);
		padding: 0 var(--space-10);
		border: 0;
		color: var(--on-accent);
		font-size: var(--portfolio-text-subhead);
		font-weight: var(--portfolio-weight-semibold);
		cursor: pointer;
	}

	.swipe-row > .actions.is-leading {
		left: 0;
	}

	.swipe-row > .actions.is-leading button {
		background: var(--portfolio-system);
	}

	.swipe-row > .actions.is-trailing {
		right: 0;
	}

	.swipe-row > .actions.is-trailing button {
		background: var(--portfolio-loss);
	}

	.swipe-row > .front {
		position: relative;
		z-index: 1;
		background: var(--portfolio-flat-fill-opaque);
		touch-action: pan-y;
		transition: transform var(--duration-swipe) var(--portfolio-ease-leave);
	}

	.swipe-row.is-dragging > .front {
		transition: none;
	}

	.swipe-row.is-open > .actions,
	.swipe-row.is-dragging > .actions {
		opacity: 1;
		pointer-events: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .swipe-row > .front {
		transition: none;
	}
}


/* ./components/pin-sheet.css */
/* Root class matches filename: pin-sheet.css → .pin-sheet
 * iOS relay-token Form: footnote reason row + SecureField row in one inset card. */

.portfolio {
	.pin-sheet {
		position: relative;
		display: flex;
		flex-direction: column;
		min-height: 0;

		.text-row .reason {
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-footnote);
			line-height: 1.35;
		}

		.text-row label {
			position: absolute;
			width: var(--space-1);
			height: var(--space-1);
			overflow: hidden;
			clip: rect(0 0 0 0);
			clip-path: inset(50%);
			white-space: nowrap;
		}
	}
}


/* ./components/chat-panel.css */
/* Root class matches filename: chat-panel.css → .chat-panel */

.portfolio {
	.sheet .chat-panel {
		min-height: 0;
		flex: 1;
		padding-bottom: 0;

		.sheet-chrome {
			flex: 0 0 auto;
		}
	}

	.chat-panel {
		display: flex;
		flex-direction: column;
		min-height: calc(
			100dvh - var(--portfolio-sticky-header) - var(--portfolio-nav-bar)
		);
		padding-bottom: calc(
			var(--portfolio-nav-bar) + var(--portfolio-nav-breathing) +
				var(--portfolio-nav-pad-bottom)
		);

		.body {
			display: flex;
			flex: 1;
			flex-direction: column;
			min-height: 0;
		}

		.transcript {
			display: grid;
			flex: 1;
			align-content: start;
			gap: var(--space-14);
			min-height: 0;
			padding: var(--space-8) var(--space-16) var(--space-24);
			overflow: auto;
			scrollbar-width: thin;
			scroll-padding-top: var(--space-rem-4);
			scroll-padding-bottom: var(--measure-6);
		}

		.bottom {
			position: relative;
			z-index: 1;
			flex: 0 0 auto;
		}

		.prompts {
			position: relative;
			z-index: 1;
			padding-top: var(--space-8);
			overflow: visible;

			.chat-empty-mascot {
				position: absolute;
				right: var(--space-16);
				bottom: var(--space-12);
				z-index: 0;
			}

			.chat-suggestions {
				position: relative;
				z-index: 1;
			}
		}

		.inline-notice {
			margin-inline: var(--space-16);
		}

		.error {
			margin-inline: var(--space-16);
			color: var(--portfolio-loss);
		}

		.sr-only {
			position: absolute;
			width: var(--space-1);
			height: var(--space-1);
			overflow: hidden;
			clip: rect(0 0 0 0);
			white-space: nowrap;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .chat-panel,
	.portfolio .chat-panel * {
		transition: none;
		animation: none;
	}
}


/* ./components/chat-history.css */
/* Root class matches filename: chat-history.css → .chat-history */
/* iOS ChatSessionPickerPanel: 300pt wide, New chat row, divider, 320pt scroll list. */

.portfolio {
	.popover.chat-history {
		display: flex;
		flex-direction: column;
		width: var(--space-300);
		padding: var(--space-12) 0 var(--space-8);
		overflow: hidden;

		button {
			display: flex;
			gap: var(--space-10);
			width: 100%;
			margin: 0;
			padding: var(--space-10) var(--space-14);
			border: 0;
			background: transparent;
			color: var(--portfolio-ink);
			text-align: start;
			cursor: pointer;
		}

		button:active {
			background: var(--portfolio-segment-track);
		}

		.new-chat {
			flex: 0 0 auto;
			align-items: center;

			.icon {
				display: flex;
				flex: 0 0 var(--space-22);
				align-items: center;
				justify-content: center;
				height: var(--space-22);
				color: var(--portfolio-system);

				svg {
					display: block;
					width: var(--space-17);
					height: var(--space-17);
				}

				path {
					fill-opacity: 1;
				}

				.spinner {
					width: var(--space-16);
					height: var(--space-16);
				}
			}

			.label {
				flex: 1 1 auto;
				min-width: 0;
				font-size: var(--text-ios-body);
				font-weight: var(--portfolio-weight-semibold);
				line-height: 1.2;
			}
		}

		.rule {
			flex: 0 0 auto;
			height: var(--portfolio-hairline);
			margin: var(--space-4) 0;
			background: var(--portfolio-glass-border);
		}

		.sessions {
			display: flex;
			flex: 0 1 auto;
			flex-direction: column;
			max-height: var(--space-320);
			overflow-y: auto;
			overscroll-behavior: contain;
			scrollbar-width: thin;
		}

		.session {
			flex: 0 0 auto;
			align-items: flex-start;
		}

		.copy {
			display: flex;
			flex: 1 1 auto;
			flex-direction: column;
			gap: var(--space-2);
			min-width: 0;
		}

		.session .label {
			display: -webkit-box;
			overflow: hidden;
			font-size: var(--text-ios-subhead);
			font-weight: var(--portfolio-weight-semibold);
			line-height: 1.3;
			overflow-wrap: anywhere;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			line-clamp: 2;
		}

		.when {
			overflow: hidden;
			color: var(--portfolio-ink-muted);
			font-size: var(--text-ios-caption);
			line-height: 1.3;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.check {
			display: flex;
			flex: 0 0 auto;
			align-items: center;
			justify-content: center;
			width: var(--space-12);
			height: var(--space-20);
			margin-inline-start: var(--space-8);
			color: var(--portfolio-system);

			svg {
				display: block;
				width: var(--space-12);
				height: var(--space-12);
			}

			path {
				fill-opacity: 1;
			}
		}
	}
}


/* ./components/chat-empty-mascot.css */
/* Root class matches filename: chat-empty-mascot.css → .chat-empty-mascot
 * iOS ChatEmptyMascotView — look-down idle, 88pt default / 64pt compact. */

.portfolio {
	.chat-empty-mascot {
		display: block;
		width: var(--space-88);
		height: var(--space-88);
		pointer-events: none;
		object-fit: contain;
		user-select: none;
	}

	.chat-empty-mascot.is-compact {
		width: var(--space-64);
		height: var(--space-64);
	}
}


/* ./components/chat-message.css */
/* Root class matches filename: chat-message.css → .chat-message */

.portfolio {
	.chat-message {
		display: grid;
		gap: var(--space-10);
		max-width: min(100%, var(--measure-40));

		&.is-user {
			align-self: end;
			justify-self: end;
			max-width: min(100%, var(--measure-22));

			p {
				margin: 0;
				padding: var(--space-8) var(--space-12);
				border-radius: var(--portfolio-radius-compact);
				background: var(--portfolio-chat-user);
				color: var(--portfolio-ink);
				font-size: var(--text-ios-body);
				line-height: var(--space-22);
				white-space: pre-wrap;
				overflow-wrap: anywhere;
			}
		}

		&.is-assistant {
			justify-self: start;
			width: 100%;
		}

		p {
			margin: 0;
			overflow-wrap: anywhere;
		}

		.error {
			color: var(--portfolio-loss);
		}

		/* iOS ChatErrorBlock action: borderedProminent, controlSize small. */
		button.retry {
			justify-self: start;
			min-height: var(--space-32);
			padding: var(--space-rem-0-35) var(--space-rem-0-8);
			border: 0;
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-profit);
			color: var(--on-accent);
			font-weight: var(--portfolio-weight-semibold);
			cursor: pointer;
		}

		.still-working {
			display: flex;
			gap: var(--space-8);
			align-items: center;
			color: var(--portfolio-ink-muted);
			font-size: var(--text-ios-caption);
			line-height: var(--space-16);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .chat-message,
	.portfolio .chat-message * {
		transition: none;
		animation: none;
	}
}


/* ./components/chat-answer-actions.css */
/* Root class matches filename: chat-answer-actions.css → .chat-answer-actions */
/* iOS ChatView+MessageRows `answerActions`: ChatVersionSwitcher + ChatRegenerateMenu. */

.portfolio {
	.chat-answer-actions {
		display: flex;
		gap: var(--space-8);
		align-items: center;
		margin-inline-start: calc(-1 * var(--space-8));
		color: var(--portfolio-ink-muted);
		font-size: var(--portfolio-text-footnote);

		button {
			display: inline-grid;
			place-items: center;
			width: var(--space-28);
			height: var(--space-28);
			padding: 0;
			border: 0;
			background: none;
			color: var(--portfolio-ink-muted);
			cursor: pointer;

			&:focus-visible {
				outline: var(--space-2) solid var(--portfolio-focus);
				outline-offset: calc(-1 * var(--space-2));
				border-radius: var(--radius-chip);
			}
		}

		.version-switcher {
			display: inline-flex;
			align-items: center;

			.chevron svg {
				width: auto;
				height: var(--space-12);
			}

			.chevron[aria-disabled='true'] {
				color: var(--portfolio-ink-tertiary);
				cursor: default;
			}

			.count {
				font-variant-numeric: tabular-nums;
				white-space: nowrap;
			}

			.preset {
				padding-inline-start: var(--space-4);
				white-space: nowrap;
			}
		}

		.regenerate svg {
			width: auto;
			height: var(--space-14);
		}
	}
}


/* ./components/chat-composer.css */
/* Root class matches filename: chat-composer.css → .chat-composer */

.portfolio {
	.chat-composer {
		position: sticky;
		bottom: 0;
		z-index: 2;
		display: grid;
		gap: var(--space-rem-0-5);
		padding: var(--space-8) var(--space-16) var(--space-8);

		label {
			position: absolute;
			width: var(--space-1);
			height: var(--space-1);
			overflow: hidden;
			clip: rect(0 0 0 0);
			white-space: nowrap;
		}

		.pill {
			display: flex;
			gap: var(--space-10);
			align-items: flex-end;
			padding: var(--space-10) var(--space-14);
			border-radius: var(--portfolio-radius-bubble);
			background: var(--portfolio-glass-bg);
			box-shadow: var(--portfolio-glass-shadow);
			backdrop-filter: var(--portfolio-glass-filter);
			-webkit-backdrop-filter: var(--portfolio-glass-filter);
		}

		textarea {
			flex: 1;
			width: 100%;
			min-height: var(--space-24);
			max-height: var(--measure-6-5);
			padding: 0;
			border: 0;
			background: transparent;
			color: var(--portfolio-ink);
			font-size: var(--text-ios-body);
			line-height: var(--space-22);
			resize: none;
			field-sizing: content;
		}

		textarea:focus {
			outline: none;
		}

		/* ChatView+Content inlineSendButton — title2 arrow.up.circle.fill, plain. */
		button {
			display: grid;
			flex: 0 0 auto;
			width: var(--portfolio-chat-send);
			height: var(--portfolio-chat-send);
			min-width: var(--portfolio-chat-send);
			min-height: var(--portfolio-chat-send);
			place-items: center;
			padding: 0;
			border: 0;
			border-radius: var(--portfolio-radius-full);
			background: transparent;
			color: var(--portfolio-ink);
			cursor: pointer;
			appearance: none;
		}

		button.stop {
			background: transparent;
			color: var(--portfolio-loss);
		}

		button:disabled {
			cursor: not-allowed;
			opacity: 0.35;
		}

		svg {
			display: block;
			width: var(--portfolio-chat-send);
			height: var(--portfolio-chat-send);
		}

		/* arrow.up.circle.fill / stop.circle.fill — solid disc, contrasting glyph. */
		button.send svg path:first-child {
			fill: var(--portfolio-ink);
			fill-opacity: 1;
		}

		button.send svg path:nth-child(2) {
			fill: var(--portfolio-on-ink);
			fill-opacity: 1;
		}

		button.stop svg path:first-child {
			fill: var(--portfolio-loss);
			fill-opacity: 1;
		}

		button.stop svg path:nth-child(2) {
			fill: var(--portfolio-on-ink);
			fill-opacity: 1;
		}

		/* ChatPresetMenu — subheadline medium, secondary: symbol (small), name, chevron.up.chevron.down (caption2). */
		button.preset {
			display: inline-flex;
			gap: var(--space-4);
			align-items: center;
			width: auto;
			min-width: 0;
			height: var(--portfolio-chat-send);
			min-height: var(--portfolio-chat-send);
			border-radius: 0;
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-subhead);
			font-weight: var(--portfolio-weight-medium);
			white-space: nowrap;

			svg.symbol {
				width: var(--space-13);
				height: var(--space-13);
			}

			svg.chevron {
				width: var(--space-8);
				height: var(--space-10);
			}
		}

		.sr-only {
			position: absolute;
			width: var(--space-1);
			height: var(--space-1);
			overflow: hidden;
			clip: rect(0 0 0 0);
			white-space: nowrap;
		}
	}
}

@media (prefers-color-scheme: dark) {
	.portfolio .chat-composer button.send {
		color: var(--portfolio-ink);
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio .chat-composer .pill {
		background: var(--portfolio-glass-opaque);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .chat-composer,
	.portfolio .chat-composer * {
		transition: none;
		animation: none;
	}
}


/* ./components/chat-ui.css */
/* Root class matches filename: chat-ui.css → .chat-ui */

.portfolio {
	--portfolio-chat-user: color-mix(in srgb, var(--system) 18%, transparent);
	--portfolio-chat-module-pad: var(--space-12);

	.chat-thinking {
		display: inline-block;
		position: relative;
		flex: 0 0 auto;
		width: calc(var(--space-28) * var(--chat-thinking-scale, 1));
		height: calc(var(--space-28) * var(--chat-thinking-scale, 1));
		overflow: visible;
		vertical-align: middle;

		/* iOS `scaleEffect` — 28pt cluster, then shrink the whole silhouette. */
		.cluster {
			position: absolute;
			top: 50%;
			left: 50%;
			width: var(--space-28);
			height: var(--space-28);
			margin: calc(var(--space-28) / -2) 0 0 calc(var(--space-28) / -2);
			transform: scale(var(--chat-thinking-scale, 1));
			transform-origin: center;
		}

		.spark {
			position: absolute;
			top: 50%;
			left: 50%;
			display: grid;
			width: var(--spark-size);
			height: var(--spark-size);
			margin: calc(var(--spark-size) / -2) 0 0 calc(var(--spark-size) / -2);
			place-items: center;
			color: var(--portfolio-ink);
			transform: translate(var(--spark-x), var(--spark-y))
				scale(var(--spark-scale, 1)) rotate(var(--spark-rotate, 0deg));
			transform-origin: center;
		}

		.spark svg {
			display: block;
			width: 100%;
			height: 100%;
			max-width: none;
			opacity: var(--spark-primary, 0.74);
		}

		.glow {
			position: absolute;
			width: calc(var(--spark-size) * 1.7);
			height: calc(var(--spark-size) * 1.7);
			border-radius: var(--radius-circle);
			background: radial-gradient(
				circle,
				color-mix(
					in srgb,
					currentColor calc(var(--spark-glow, 0.16) * 100%),
					transparent
				),
				transparent
			);
			filter: blur(var(--blur-2-5));
			pointer-events: none;
		}

		.spark.is-lg {
			--spark-size: var(--space-15);
			--spark-x: var(--space-4-5);
			--spark-y: var(--space-4);
		}

		.spark.is-md {
			--spark-size: var(--space-8);
			--spark-x: calc(var(--space-5-5) * -1);
			--spark-y: calc(var(--border-thick) * -1);
		}

		.spark.is-sm {
			--spark-size: var(--space-5);
			--spark-x: var(--hairline);
			--spark-y: calc(var(--space-6-5) * -1);
		}
	}

	.chat-markdown {
		display: grid;
		gap: var(--space-18);
		color: var(--portfolio-ink);
		font-size: var(--text-ios-body);
		line-height: var(--space-22);

		&.is-footnote {
			color: var(--portfolio-ink-muted);
			font-size: var(--text-ios-footnote);
			line-height: var(--space-18);
		}

		p,
		ul,
		ol,
		blockquote,
		pre,
		table {
			margin: 0;
			line-height: var(--space-22);
			overflow-wrap: anywhere;
		}

		&.is-footnote p,
		&.is-footnote ul,
		&.is-footnote ol {
			line-height: var(--space-18);
		}

		strong {
			font-weight: var(--portfolio-weight-semibold);
		}

		em {
			font-style: italic;
		}

		a {
			color: var(--portfolio-system);
		}

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			margin: 0;
			font-weight: var(--portfolio-weight-semibold);
			line-height: 1.35;
		}

		h1 {
			font-size: 1.28em;
		}

		h2 {
			font-size: 1.18em;
		}

		h3 {
			font-size: 1.1em;
		}

		h4 {
			font-size: 1.05em;
		}

		code {
			padding: 0.05em 0.3em;
			border-radius: var(--space-6);
			background: var(--black-06);
			font-size: 0.92em;
		}

		pre {
			padding: var(--space-10);
			overflow-x: auto;
			border-radius: var(--portfolio-radius-control);
			background: var(--black-06);
		}

		pre code {
			padding: 0;
			background: none;
		}

		ul,
		ol {
			padding-left: var(--space-rem-lg);
		}

		th,
		td {
			padding: var(--space-6) var(--space-8);
			border: var(--portfolio-border-width) solid var(--black-15);
		}

		th {
			background: var(--black-08);
			font-weight: var(--portfolio-weight-semibold);
		}
	}

	.chat-reasoning,
	.chat-tools {
		display: grid;
		gap: var(--space-8);
		width: 100%;
		padding: var(--space-10);
		border: 0;
		border-radius: var(--portfolio-radius-control);
		background: var(--black-05);
		color: inherit;
		text-align: left;
		cursor: pointer;

		.head {
			display: flex;
			gap: var(--space-6);
			align-items: center;
		}

		.label {
			flex: 1;
			color: var(--portfolio-ink-muted);
			font-size: var(--text-ios-caption);
			font-weight: var(--portfolio-weight-semibold);
			transform-origin: left center;
		}

		.chevron {
			display: grid;
			flex: 0 0 var(--text-ios-caption2);
			width: var(--text-ios-caption2);
			height: var(--text-ios-caption2);
			place-items: center;
			color: var(--portfolio-ink-muted);
			rotate: 0deg;

			svg {
				display: block;
				width: var(--text-ios-caption2);
				height: var(--text-ios-caption2);
			}
		}

		.chevron.is-open {
			rotate: 90deg;
		}
	}

	.chat-tools {
		.chevron {
			rotate: 90deg;
		}

		.chevron.is-open {
			rotate: -90deg;
		}

		.gear {
			display: grid;
			flex: 0 0 var(--text-ios-caption);
			width: var(--text-ios-caption);
			height: var(--text-ios-caption);
			place-items: center;
			color: var(--portfolio-ink-muted);

			svg {
				display: block;
				width: var(--text-ios-caption);
				height: var(--text-ios-caption);
			}
		}

		.gear.is-spin {
			animation: chat-spark-spin 1.2s linear infinite;
		}

		ul {
			display: grid;
			gap: var(--space-8);
			margin: 0;
			padding: 0;
			list-style: none;
		}

		li {
			display: flex;
			gap: var(--space-8);
			align-items: baseline;
			color: var(--black-72);
			font-size: var(--text-ios-caption);
			line-height: var(--space-16);
		}

		li.is-fail {
			color: var(--portfolio-loss);
		}
	}

	.chat-suggestions {
		display: flex;
		gap: var(--space-8);
		padding: var(--space-8) var(--space-16) var(--space-4);
		overflow-x: auto;
		scrollbar-width: none;

		button {
			flex: 0 0 auto;
			min-height: var(--space-36);
			padding: var(--space-10) var(--space-14);
			border: var(--portfolio-border-width) solid var(--portfolio-glass-border);
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-glass-bg);
			color: var(--portfolio-ink);
			font-size: var(--text-ios-subhead);
			font-weight: var(--portfolio-weight-semibold);
			line-height: var(--space-20);
			white-space: nowrap;
			cursor: pointer;
			backdrop-filter: var(--portfolio-glass-filter);
			-webkit-backdrop-filter: var(--portfolio-glass-filter);
		}

		button:disabled {
			cursor: not-allowed;
			opacity: 0.45;
		}
	}

	.chat-module,
	.chat-buy,
	.chat-task {
		padding: var(--portfolio-chat-module-pad);
		border-radius: var(--portfolio-radius);
	}

	.chat-report-head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-8);
		margin-bottom: var(--space-8);

		h3,
		.summary {
			margin: 0;
			font-size: var(--text-ios-subhead);
			font-weight: var(--portfolio-weight-medium);
		}

		.profit {
			color: var(--portfolio-profit);
		}

		.loss {
			color: var(--portfolio-loss);
		}
	}

	.chat-pairs {
		display: grid;
		gap: var(--portfolio-tile);
	}

	.chat-trades li {
		border-top: 0;
	}

	.chat-buy,
	.chat-task {
		section {
			display: grid;
			gap: var(--space-6);
		}

		header {
			display: flex;
			gap: var(--space-10);
			align-items: center;
		}

		.icon,
		.active {
			display: inline-flex;
			align-items: center;
			gap: var(--space-6);
			color: var(--portfolio-ink-muted);

			svg {
				display: block;
				width: var(--space-16);
				height: var(--space-16);
			}
		}

		.active svg {
			width: var(--space-12);
			height: var(--space-12);
		}

		.pair,
		.label {
			flex: 1;
			font-weight: var(--portfolio-weight-medium);
		}

		.amount,
		.detail,
		.note,
		.trigger {
			color: var(--portfolio-ink-muted);
			font-size: var(--text-small);
		}

		button {
			justify-self: start;
			min-height: var(--space-32);
			padding: var(--space-rem-0-35) var(--space-rem-0-8);
			border: 0;
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-profit);
			color: var(--on-accent);
			font-weight: var(--portfolio-weight-semibold);
			cursor: pointer;
		}

		button:disabled {
			cursor: not-allowed;
			opacity: 0.5;
		}
	}
}

@media (prefers-color-scheme: dark) {
	.portfolio {
		--portfolio-chat-user: color-mix(in srgb, var(--system) 22%, transparent);

		.chat-markdown code,
		.chat-markdown pre {
			background: var(--white-08);
		}

		.chat-markdown th,
		.chat-markdown td {
			border-color: var(--white-12);
		}

		.chat-markdown th {
			background: var(--white-08);
		}

		.chat-reasoning,
		.chat-tools {
			background: var(--white-06);

			li {
				color: var(--white-72);
			}
		}
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio .chat-suggestions button {
		background: var(--portfolio-glass-opaque);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .chat-tools .gear.is-spin {
		animation: none;
	}
}

@keyframes chat-spark-spin {
	to {
		rotate: 360deg;
	}
}


/* ./components/task-list.css */
/* Root class matches filename: task-list.css → .task-list */

.portfolio {
	.task-list {
		display: flex;
		flex-direction: column;

		.grouped-form {
			padding-bottom: var(--sheet-body-pad);
		}

		ul {
			display: flex;
			flex-direction: column;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		li + li {
			border-top: var(--portfolio-flat-border-width) solid
				var(--portfolio-form-border);
		}

		.empty {
			margin: 0;
			padding: var(--portfolio-tile) var(--portfolio-pad);
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-subhead);
		}

		.task-row {
			display: flex;
			gap: var(--space-12);
			align-items: center;
			padding: var(--space-4) var(--portfolio-pad);
		}

		.open {
			display: flex;
			flex: 1 1 auto;
			gap: var(--space-8);
			align-items: center;
			min-width: 0;
			min-height: var(--portfolio-touch);
			padding: var(--space-4) 0;
			border: 0;
			background: transparent;
			text-align: start;
			cursor: pointer;

			.copy {
				display: flex;
				flex: 1 1 auto;
				flex-direction: column;
				gap: var(--space-4);
				min-width: 0;
			}

			.title {
				color: var(--portfolio-ink);
				font-size: var(--portfolio-text-body);
				font-weight: var(--portfolio-weight-semibold);
				line-height: 1.25;
			}

			.trigger {
				overflow: hidden;
				color: var(--portfolio-ink-muted);
				font-size: var(--portfolio-text-caption);
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.detail,
			.runs {
				color: var(--portfolio-ink-muted);
				font-size: var(--portfolio-text-footnote);
			}

			> svg {
				display: block;
				flex: 0 0 var(--space-8);
				width: var(--space-8);
				height: var(--space-12);
				color: var(--portfolio-ink-muted);
				opacity: 0.45;
			}
		}

		.toggle {
			display: grid;
			flex: 0 0 auto;
			width: var(--space-28);
			height: var(--space-28);
			place-items: center;
			padding: 0;
			border: 0;
			background: transparent;
			color: var(--portfolio-ink-muted);
			cursor: pointer;

			svg {
				display: block;
				width: var(--space-22);
				height: var(--space-22);
			}

			.spinner {
				width: var(--space-18);
				height: var(--space-18);
			}

			&.is-on {
				color: var(--portfolio-system);

				svg path:last-child {
					fill: var(--on-accent);
					fill-opacity: 1;
				}
			}

			&:disabled {
				cursor: default;
			}
		}

		.sheet-chrome-icon .spinner {
			width: var(--space-18);
			height: var(--space-18);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .task-list,
	.portfolio .task-list * {
		transition: none;
		animation: none;
	}
}


/* ./components/task-editor-sheet.css */
/* Root class matches filename: task-editor-sheet.css → .task-editor-sheet
 * Cron builder is portaled into the glass popover. */

.portfolio {
	.task-editor-sheet {
		display: flex;
		flex-direction: column;
	}

	.task-cron-field {
		display: flex;
		gap: var(--space-8);
		align-items: center;

		input {
			flex: 1 1 auto;
			min-width: 0;
			font-family: var(--portfolio-font-capital);
		}

		.builder {
			display: grid;
			flex: 0 0 auto;
			width: var(--space-32);
			height: var(--space-32);
			place-items: center;
			padding: 0;
			border: 0;
			background: transparent;
			color: var(--portfolio-ink);
			cursor: pointer;

			svg {
				display: block;
				width: var(--space-22);
				height: var(--space-22);
			}
		}
	}

	.task-cron-builder {
		display: flex;
		flex-direction: column;
		gap: var(--space-12);
		min-width: var(--measure-12);
		padding: var(--space-16);

		.picker-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-12);
			width: 100%;
			min-height: var(--portfolio-touch);
			padding: 0;
			border: 0;
			background: transparent;
			cursor: pointer;

			.label {
				color: var(--portfolio-ink);
				font-size: var(--portfolio-text-body);
			}

			.value {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				gap: var(--space-6);
				min-width: 0;
				color: var(--portfolio-ink-muted);
				font-size: var(--portfolio-text-body);

				svg {
					display: block;
					width: var(--space-8);
					height: var(--space-12);
					opacity: 0.45;
				}
			}
		}

		.time,
		.times {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-8);
			min-height: var(--portfolio-touch);
			color: var(--portfolio-ink);
			font-size: var(--portfolio-text-body);
		}

		.times input,
		.time input {
			min-height: var(--space-32);
			padding: 0;
			border: 0;
			background: transparent;
			color: var(--portfolio-ink);
			font-size: var(--portfolio-text-body);
			font-variant-numeric: tabular-nums;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .task-editor-sheet,
	.portfolio .task-editor-sheet * {
		transition: none;
		animation: none;
	}
}


/* ./components/server-list.css */
/* Root class matches filename: server-list.css → .server-list */

.portfolio {
	/* Shared so the portaled drag preview renders an identical row. */
	.server-list,
	.server-reorder-layer {
		.row {
			display: flex;
			gap: var(--space-10);
			align-items: center;
			min-height: var(--space-72);
			padding: var(--portfolio-tile) var(--portfolio-pad);
		}

		.row.is-dragging {
			opacity: 0;
		}

		.grip,
		.host {
			min-width: var(--space-24);
			min-height: var(--portfolio-touch);
			padding: 0;
			border: 0;
			background: transparent;
			cursor: pointer;
		}

		.grip {
			display: grid;
			flex: 0 0 auto;
			width: var(--space-32);
			height: var(--space-44);
			place-items: center;
			color: var(--portfolio-ink-muted);
			cursor: grab;
			touch-action: none;

			svg {
				display: block;
				width: var(--space-16);
				height: var(--space-16);
			}
		}

		.host {
			display: flex;
			flex: 1 1 auto;
			gap: var(--space-12);
			align-items: center;
			min-width: 0;
			text-align: start;
		}

		.details {
			display: flex;
			flex: 1 1 auto;
			flex-direction: column;
			gap: var(--space-4);
			min-width: 0;
		}

		.name {
			overflow: hidden;
			color: var(--portfolio-ink);
			font-size: var(--portfolio-text-body);
			font-weight: var(--portfolio-weight-semibold);
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.hostname {
			overflow: hidden;
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-caption);
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.chips {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-8);
		}

		.indicator {
			display: grid;
			flex: 0 0 auto;
			width: var(--space-28);
			height: var(--space-28);
			place-items: center;
			color: var(--portfolio-ink-muted);

			svg {
				display: block;
				width: var(--space-22);
				height: var(--space-22);
			}

			.spinner {
				width: var(--space-18);
				height: var(--space-18);
			}

			&.is-on {
				color: var(--portfolio-system);

				svg path:last-child {
					fill: var(--on-accent);
					fill-opacity: 1;
				}
			}
		}
	}

	.server-list {
		display: flex;
		flex-direction: column;
		gap: var(--portfolio-section);
		padding: 0 0 var(--text-body);

		h2 {
			margin: 0;
			padding: 0 var(--space-16);
			font-size: var(--portfolio-text-title);
			font-weight: var(--portfolio-weight-semibold);
		}

		ul {
			display: flex;
			flex-direction: column;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		li + li {
			border-top: var(--portfolio-flat-border-width) solid
				var(--portfolio-form-border);
		}

		ul.is-reordering .grip {
			cursor: grabbing;
		}

		.text-row label {
			position: absolute;
			width: var(--space-1);
			height: var(--space-1);
			overflow: hidden;
			clip: rect(0 0 0 0);
			clip-path: inset(50%);
			white-space: nowrap;
		}

		.hint,
		.error {
			margin: 0;
			padding: var(--space-10) var(--space-16) 0;
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-caption);
			line-height: 1.35;
		}

		.hint {
			padding: 0 var(--space-16);
			font-size: var(--portfolio-text-subhead);
		}

		.error {
			color: var(--portfolio-paused);
		}

		.empty-hint {
			padding: var(--space-4) 0 var(--space-8);
		}
	}

	.server-reorder-layer {
		position: fixed;
		inset: 0;
		z-index: var(--portfolio-z-popover);
		pointer-events: none;

		.insertion {
			position: fixed;
			height: var(--space-3);
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-system);
		}

		.drag-preview {
			position: fixed;
			overflow: hidden;
			border-radius: var(--portfolio-radius-control);
			background: var(--portfolio-form-fill);
			box-shadow: 0 var(--space-8) var(--space-28) var(--black-18);
		}

		.drag-preview .row {
			min-height: 100%;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .server-list,
	.portfolio .server-list * {
		transition: none;
		animation: none;
	}
}


/* ./components/manage-access.css */
/* Root class matches filename: manage-access.css → .manage-access */

.portfolio {
	.manage-access {
		.scope-intro {
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-subhead);
			line-height: 1.35;
		}

		.secret-row {
			display: flex;
			align-items: center;
			gap: var(--space-8);
			min-height: var(--portfolio-touch);
			padding: var(--portfolio-tile) var(--portfolio-pad);
		}

		.secret-row .token {
			flex: 1 1 auto;
			min-width: 0;
			margin: 0;
			font-family: var(--portfolio-font-capital);
			font-size: var(--portfolio-text-body);
			line-height: 1.35;
			overflow-wrap: anywhere;
		}

		.secret-row .token.is-hidden {
			color: var(--portfolio-ink-muted);
		}

		.secret-row .action {
			flex: 0 0 auto;
			margin: 0;
			padding: 0;
			border: 0;
			background: transparent;
			color: var(--portfolio-system);
			font: inherit;
			font-size: var(--portfolio-text-body);
			cursor: pointer;
		}

		.form-row-button {
			gap: var(--space-10);
		}

		.form-row-button.is-system {
			color: var(--portfolio-system);
		}

		.form-row-button svg {
			display: block;
			width: var(--space-22);
			height: var(--space-22);
			flex: 0 0 auto;
		}

		.rotate-row {
			display: flex;
			align-items: center;
			border-top: var(--portfolio-flat-border-width) solid
				var(--portfolio-form-border);
		}

		.rotate-row .form-row-button {
			flex: 1 1 auto;
			width: auto;
			border-top: 0;
		}

		.rotate-row .revoke {
			display: grid;
			place-items: center;
			flex: 0 0 auto;
			width: var(--portfolio-touch);
			height: var(--portfolio-touch);
			margin: 0;
			padding: 0;
			border: 0;
			background: transparent;
			color: var(--portfolio-loss);
			cursor: pointer;
		}

		.rotate-row .revoke svg {
			display: block;
			width: var(--space-22);
			height: var(--space-22);
		}

		.switch-row:has(+ .text-row) {
			margin-bottom: 0;
		}

		.switch-row + .text-row {
			border-top: var(--portfolio-flat-border-width) solid
				var(--portfolio-form-border);
		}
	}
}


/* ./components/notifications-panel.css */
/* Root class matches filename: notifications-panel.css → .notifications-panel */

.portfolio {
	.notifications-panel {
		display: flex;
		flex-direction: column;

		.grouped-form {
			padding-bottom: var(--sheet-body-pad);
		}

		.switch-row .label {
			font-weight: var(--portfolio-weight-regular);
		}

		.switch-row.is-master .label {
			font-weight: var(--portfolio-weight-semibold);
		}

		.switch-row input[type='checkbox']:checked {
			background: var(--portfolio-system);
		}

		.empty {
			margin: 0;
			padding: var(--portfolio-tile) var(--portfolio-pad);
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-subhead);
		}

		.empty.is-search {
			min-height: var(--space-80);
		}

		.switch-row + .empty {
			border-top: var(--portfolio-flat-border-width) solid
				var(--portfolio-form-border);
		}

		.visually-hidden {
			position: absolute;
			width: var(--space-1);
			height: var(--space-1);
			padding: 0;
			margin: calc(-1 * var(--space-1));
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .notifications-panel,
	.portfolio .notifications-panel * {
		transition: none;
		animation: none;
	}
}


/* ./components/spinner.css */
/* Root class matches filename: spinner.css → .spinner */

.portfolio {
	.spinner {
		position: relative;
		display: inline-block;
		width: var(--space-20);
		height: var(--space-20);
		color: var(--portfolio-ink-muted);

		> span {
			position: absolute;
			inset: 0;
			animation: spinner-spoke 1s linear infinite;

			&::after {
				content: '';
				position: absolute;
				top: var(--hairline);
				left: calc(50% - var(--spinner-spoke-offset));
				width: var(--spinner-spoke-w);
				height: var(--space-6);
				border-radius: var(--portfolio-radius-full);
				background: currentColor;
			}
		}
	}

	.spinner-status {
		display: grid;
		place-items: center;
		margin: 0;
	}
}

@keyframes spinner-spoke {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0.18;
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .spinner > span {
		animation: none;
		opacity: 0.35;
	}
}


/* ./components/chevron-disclosure.css */
/* Root class matches filename: chevron-disclosure.css → .chevron-disclosure */

.portfolio {
	.chevron-disclosure {
		display: grid;
		flex: 0 0 auto;
		width: var(--space-10);
		height: var(--space-10);
		place-items: center;
		color: var(--portfolio-ink-muted);
		opacity: 0.72;
		transition: transform 0.2s ease-in-out;

		&.is-open {
			transform: rotate(180deg);
		}

		svg {
			display: block;
			width: var(--space-10);
			height: var(--space-10);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .chevron-disclosure {
		transition: none;
	}
}


/* ./components/hero-panel.css */
/* Root class matches filename: hero-panel.css → .hero-panel */

.portfolio {
	main.outlet {
		display: flex;
		flex-direction: column;
		gap: var(--portfolio-section);
		padding-bottom: calc(
			var(--portfolio-nav-bar) + var(--portfolio-nav-breathing) +
				var(--portfolio-nav-pad-bottom) - var(--space-6)
		);
	}

	.hero-panel {
		padding: 0;

		.header {
			display: flex;
			gap: var(--space-8);
			align-items: center;
			min-height: var(--portfolio-hero-header-row);
			padding: var(--portfolio-pad) var(--portfolio-pad) 0;
		}

		.title {
			flex: 1 1 auto;
			min-width: 0;
		}

		.headline {
			display: block;
			width: 100%;
			margin: 0;
			padding: 0;
			border: 0;
			background: transparent;
			text-align: start;
			cursor: pointer;
		}

		.pnl {
			font-size: var(--portfolio-hero-pnl);
			font-weight: var(--portfolio-weight-bold);
			line-height: 1;
			letter-spacing: -0.03em;

			&.is-scanning {
				font-size: var(--portfolio-hero-scanning);
				font-weight: var(--portfolio-weight-semibold);
				color: var(--portfolio-ink);
				letter-spacing: -0.02em;
			}

			&.is-profit {
				color: var(--portfolio-profit);
			}

			&.is-loss {
				color: var(--portfolio-loss);
			}

			&.is-neutral {
				color: var(--portfolio-ink-muted);
			}
		}

		.daemon {
			display: flex;
			flex: 0 0 auto;
			gap: var(--space-6);
			align-items: center;
		}

		.control {
			display: grid;
			width: var(--portfolio-daemon-control);
			height: var(--portfolio-daemon-control);
			place-items: center;
			padding: 0;
			border: 0;
			border-radius: var(--portfolio-radius-full);
			cursor: pointer;

			svg {
				display: block;
				width: var(--space-12);
				height: var(--space-12);
			}

			&.is-start {
				color: var(--portfolio-profit);
				background: var(--portfolio-profit-soft);
			}

			&.is-pause {
				color: var(--portfolio-paused);
				background: var(--portfolio-paused-soft);
			}

			&.is-stop {
				color: var(--portfolio-ink-muted);
				background: var(--portfolio-demo-soft);
			}
		}

		.chart {
			display: block;
			width: 100%;
			margin: 0;
			padding: calc(
					var(--portfolio-hero-stack) + var(--portfolio-hero-chart-top)
				)
				0 0;
			border: 0;
			background: transparent;
			cursor: pointer;
		}

		.pnl-spark {
			display: block;
			width: 100%;
			height: var(--portfolio-chart);

			polyline,
			.line {
				fill: none;
				stroke-linecap: round;
				stroke-linejoin: round;
			}

			polyline {
				stroke-width: 2;
			}

			.baseline {
				fill: none;
				stroke: var(--portfolio-ink-muted);
				stroke-opacity: 0.25;
				stroke-width: 1;
			}

			&.has-fill .line {
				stroke-width: 2;
			}

			&:not(.has-fill) .line {
				stroke-width: 1.5;
			}

			&.is-profit {
				color: var(--portfolio-profit);
			}

			&.is-loss {
				color: var(--portfolio-loss);
			}

			&.is-neutral,
			&.is-inactive {
				color: var(--portfolio-ink-muted);
			}

			&.is-profit polyline,
			&.is-profit .line,
			&.is-loss polyline,
			&.is-loss .line,
			&.is-neutral polyline,
			&.is-neutral .line,
			&.is-inactive polyline,
			&.is-inactive .line {
				stroke: currentColor;
			}
		}

		.footer {
			display: flex;
			gap: var(--space-8);
			align-items: center;
			justify-content: space-between;
			padding: var(--portfolio-hero-chart-footer) var(--portfolio-pad)
				var(--portfolio-pad);
		}

		.next-tick-countdown {
			flex: 0 0 auto;
			color: var(--portfolio-ink-muted);
			font-size: var(--text-caption);
			line-height: 1;

			svg {
				display: block;
				width: var(--space-12);
				height: var(--space-12);
			}
		}

		.stats {
			flex: 1 1 auto;
			min-width: 0;
			margin: 0;
			padding: 0;
			border: 0;
			background: transparent;
			color: var(--portfolio-ink-muted);
			font-size: var(--text-caption);
			text-align: start;
			cursor: pointer;
		}

		p.stats {
			cursor: default;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .hero-panel,
	.portfolio .hero-panel * {
		transition: none;
		animation: none;
	}
}


/* ./components/pull-to-refresh.css */
/* Root class matches filename: pull-to-refresh.css → .pull-to-refresh
 * Motion is owned by PullToRefresh.tsx: the content follows the finger through
 * a rubber band and settles on a spring. The indicator reads `--pull-progress`
 * (0→1 up to the arm threshold) and `data-state`:
 *   idle       nothing visible
 *   arming     UIRefreshControl draw-in — spokes light up one by one and the
 *              wheel rotates with the pull
 *   refreshing spokes cycle while the content holds at the spinner
 *   leaving    still spinning while the JS fades it out */

.portfolio {
	.pull-to-refresh {
		position: relative;
		overflow-x: clip;
	}

	.pull-to-refresh .indicator {
		--pull-progress: 0;
		position: absolute;
		inset: 0 0 auto;
		z-index: 2;
		display: grid;
		height: var(--space-44);
		place-items: end center;
		opacity: 0;
		pointer-events: none;

		.spinner {
			margin-bottom: var(--space-6);
			transform: scale(calc(0.72 + 0.28 * var(--pull-progress)))
				rotate(calc(var(--pull-progress) * 200deg));
		}

		&[data-state='arming'] {
			opacity: clamp(0, var(--pull-progress) * 1.8, 1);

			.spinner > span {
				animation: none;
				opacity: 0;
			}

			.spinner > span:nth-child(1) {
				opacity: clamp(0, var(--pull-progress) * 12 - 0, 1);
			}

			.spinner > span:nth-child(2) {
				opacity: clamp(0, var(--pull-progress) * 12 - 1, 1);
			}

			.spinner > span:nth-child(3) {
				opacity: clamp(0, var(--pull-progress) * 12 - 2, 1);
			}

			.spinner > span:nth-child(4) {
				opacity: clamp(0, var(--pull-progress) * 12 - 3, 1);
			}

			.spinner > span:nth-child(5) {
				opacity: clamp(0, var(--pull-progress) * 12 - 4, 1);
			}

			.spinner > span:nth-child(6) {
				opacity: clamp(0, var(--pull-progress) * 12 - 5, 1);
			}

			.spinner > span:nth-child(7) {
				opacity: clamp(0, var(--pull-progress) * 12 - 6, 1);
			}

			.spinner > span:nth-child(8) {
				opacity: clamp(0, var(--pull-progress) * 12 - 7, 1);
			}

			.spinner > span:nth-child(9) {
				opacity: clamp(0, var(--pull-progress) * 12 - 8, 1);
			}

			.spinner > span:nth-child(10) {
				opacity: clamp(0, var(--pull-progress) * 12 - 9, 1);
			}

			.spinner > span:nth-child(11) {
				opacity: clamp(0, var(--pull-progress) * 12 - 10, 1);
			}

			.spinner > span:nth-child(12) {
				opacity: clamp(0, var(--pull-progress) * 12 - 11, 1);
			}
		}

		&[data-state='refreshing'],
		&[data-state='leaving'] {
			opacity: 1;

			.spinner {
				transform: none;
			}
		}

		&[data-state='idle'] .spinner > span {
			animation-play-state: paused;
		}
	}

	.pull-to-refresh .content {
		&.is-pulling {
			will-change: transform;
			user-select: none;
			-webkit-user-select: none;
			-webkit-touch-callout: none;
		}
	}
}


/* ./components/capital-panel.css */
/* Root class matches filename: capital-panel.css → .capital-panel */

.portfolio {
	.capital-panel {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--portfolio-tile);

		.tile {
			display: flex;
			flex-direction: column;
			gap: var(--portfolio-capital-tile-row);
			width: 100%;
			min-height: var(--space-24);
			margin: 0;
			padding: 0;
			border: 0;
			background: transparent;
			text-align: start;
			cursor: pointer;
		}

		div.tile {
			cursor: default;
		}

		.title {
			margin: 0;
			height: var(--portfolio-capital-tile-title);
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-micro);
			font-weight: var(--portfolio-weight-medium);
			letter-spacing: 0.04em;
			text-transform: uppercase;
		}

		.value {
			display: flex;
			gap: var(--space-4);
			align-items: baseline;
			min-height: var(--portfolio-capital-tile-value);
			margin: 0;
			font-family: var(--portfolio-font-capital);
			font-size: var(--portfolio-capital);
			font-weight: var(--portfolio-weight-semibold);
			line-height: 1;

			&.is-inactive {
				color: var(--portfolio-ink-muted);
			}

			.suffix {
				color: var(--portfolio-ink-muted);
				font-size: var(--portfolio-text-caption);
				font-weight: var(--portfolio-weight-medium);
			}
		}

		.progress {
			height: var(--portfolio-capital-tile-progress);
			overflow: hidden;
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-fill-soft);

			.fill {
				display: block;
				height: 100%;
				border-radius: inherit;
			}

			&.is-invested .fill {
				background: linear-gradient(
					90deg,
					color-mix(in srgb, var(--portfolio-profit) 85%, transparent),
					color-mix(in srgb, var(--portfolio-profit) 55%, transparent)
				);
			}

			&.is-available .fill {
				background: linear-gradient(
					90deg,
					color-mix(in srgb, var(--portfolio-system) 85%, transparent),
					color-mix(in srgb, var(--portfolio-system) 55%, transparent)
				);
			}

			&.is-inactive .fill {
				background: color-mix(in srgb, var(--portfolio-ink) 28%, transparent);
			}
		}

		.subtitle {
			margin: 0;
			height: var(--portfolio-capital-tile-subtitle);
			overflow: hidden;
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-caption);
			line-height: var(--portfolio-capital-tile-subtitle);
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}


/* ./components/cloud-sign-in.css */
/* Root class matches filename: cloud-sign-in.css → .cloud-sign-in */

.portfolio {
	.cloud-sign-in {
		display: flex;
		flex-direction: column;
		gap: var(--space-8);

		.pills {
			display: grid;
			gap: var(--space-8);
		}

		.cloud-sign-in-pill {
			position: relative;
			isolation: isolate;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: var(--space-rem-0-55);
			width: 100%;
			min-height: var(--space-48);
			margin: 0;
			padding: 0 var(--space-rem-lg);
			border: 0;
			border-radius: var(--portfolio-radius-full);
			box-shadow: var(--portfolio-glass-shadow);
			font-size: var(--text-lead);
			font-weight: var(--portfolio-weight-medium);
			cursor: pointer;

			&::before {
				content: '';
				position: absolute;
				inset: 0;
				z-index: 0;
				border-radius: inherit;
				pointer-events: none;
				box-shadow: inset 0 0 0 var(--space-1) var(--white-18);
			}

			.specular {
				z-index: 1;
			}

			.mark,
			span,
			.auth-google-face {
				position: relative;
				z-index: 1;
			}

			.auth-google-face {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				gap: var(--space-rem-0-55);
				pointer-events: none;
			}

			span {
				white-space: pre;
			}

			.auth-google-gis {
				position: absolute;
				left: 50%;
				top: 50%;
				z-index: 2;
				width: min(var(--space-400), 100%);
				height: var(--space-44);
				overflow: hidden;
				opacity: 0.01;
				transform: translate(-50%, -50%);

				> div,
				iframe {
					width: 100% !important;
					height: 100% !important;
				}
			}

			.mark {
				width: var(--space-rem-1-15);
				height: var(--space-rem-1-15);
				flex-shrink: 0;
			}

			&:focus-visible {
				outline: var(--space-2) solid var(--portfolio-focus);
				outline-offset: var(--space-3);
			}

			&.is-disabled,
			&:disabled {
				opacity: 0.48;
				cursor: default;
				pointer-events: none;
				transform: none;
			}
		}

		.cloud-sign-in-pill.is-apple {
			background:
				linear-gradient(180deg, var(--white-16) 0%, transparent 48%),
				linear-gradient(158deg, #3f4843 0%, #1c2320 54%, #101513 100%);
			color: var(--on-accent);
		}

		.cloud-sign-in-pill.is-google {
			background:
				linear-gradient(180deg, rgb(255 255 255 / 0.86) 0%, transparent 52%),
				linear-gradient(158deg, #fffdf8 0%, #eef3fa 58%, #dde8f6 100%);
			color: rgb(22 26 34 / 0.92);
		}

		.status {
			margin: 0;
			padding-inline: var(--space-2);
			color: var(--portfolio-ink-muted);
			font-size: var(--text-caption);
			line-height: 1.35;
			text-align: center;
			white-space: pre-wrap;
		}
	}
}

@media (prefers-color-scheme: dark) {
	.portfolio {
		.cloud-sign-in {
			.cloud-sign-in-pill::before {
				box-shadow: inset 0 0 0 var(--space-1) var(--white-10);
			}

			.cloud-sign-in-pill.is-apple {
				background:
					linear-gradient(180deg, var(--white-14) 0%, transparent 46%),
					linear-gradient(158deg, #5c6862 0%, #2b3430 52%, #151a18 100%);
			}

			.cloud-sign-in-pill.is-google {
				background:
					linear-gradient(180deg, rgb(255 255 255 / 0.94) 0%, transparent 50%),
					linear-gradient(158deg, #f7f4ee 0%, #e6edf7 58%, #d5e2f4 100%);
				color: rgb(22 26 34 / 0.92);

				&::before {
					box-shadow: inset 0 0 0 var(--space-1) var(--white-28);
				}
			}
		}
	}
}


/* ./components/always-on-checkout.css */
/* Root class matches filename: always-on-checkout.css → .always-on-checkout
 * iOS AlwaysOnBrandGradient wash — onboarding sheet + quick-menu banner. */

.portfolio {
	.always-on-checkout {
		display: flex;
		flex-direction: column;
	}

	.always-on-checkout-pill {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-rem-0-55);
		width: 100%;
		min-height: var(--space-48);
		margin: 0;
		padding: 0 var(--space-rem-lg);
		border: 0;
		border-radius: var(--portfolio-radius-full);
		box-shadow: var(--portfolio-glass-shadow);
		background: var(--portfolio-glass-bg);
		color: var(--portfolio-ink);
		font-size: var(--text-lead);
		font-weight: var(--portfolio-weight-semibold);
		text-decoration: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			z-index: 0;
			border-radius: inherit;
			pointer-events: none;
			box-shadow: inset 0 0 0 var(--space-1) var(--white-22);
		}

		.wash {
			position: absolute;
			inset: 0;
			z-index: 0;
			border-radius: inherit;
			pointer-events: none;
			background: linear-gradient(
				90deg,
				rgb(242 89 89 / 0.22) 0%,
				rgb(245 140 51 / 0.2) 25%,
				rgb(77 199 122 / 0.18) 55%,
				rgb(71 140 242 / 0.2) 80%,
				rgb(158 102 235 / 0.22) 100%
			);
		}

		.specular {
			z-index: 1;
		}

		.brand,
		span:not(.wash):not(.specular) {
			position: relative;
			z-index: 1;
		}

		.brand {
			display: block;
			flex: 0 0 auto;
			width: var(--space-22);
			height: var(--space-22);
			object-fit: contain;
		}

		span:not(.wash):not(.specular) {
			white-space: pre;
		}

		&:focus-visible {
			outline: var(--space-2) solid var(--portfolio-focus);
			outline-offset: var(--space-3);
		}
	}
}

@media (prefers-color-scheme: dark) {
	.portfolio {
		.always-on-checkout-pill {
			&::before {
				box-shadow: inset 0 0 0 var(--space-1) var(--white-12);
			}

			.wash {
				background: linear-gradient(
					90deg,
					rgb(242 89 89 / 0.28) 0%,
					rgb(245 140 51 / 0.26) 25%,
					rgb(77 199 122 / 0.24) 55%,
					rgb(71 140 242 / 0.26) 80%,
					rgb(158 102 235 / 0.28) 100%
				);
			}
		}
	}
}


/* ./components/warning-panel.css */
/* Root class matches filename: warning-panel.css → .warning-panel */

.portfolio {
	.warning-panel {
		display: flex;
		flex-direction: column;
		gap: var(--portfolio-tile);
		margin: 0;
		padding: 0;
		list-style: none;

		.item {
			display: flex;
			gap: var(--space-8);
			align-items: center;
			width: 100%;
			min-height: var(--space-32);
			margin: 0;
			padding: 0;
			border: 0;
			background: transparent;
			text-align: start;
			cursor: pointer;
		}

		.mark {
			display: grid;
			flex: 0 0 var(--space-20);
			width: var(--space-20);
			height: var(--space-20);
			place-items: center;
			border-radius: var(--portfolio-radius-full);
			font-size: var(--portfolio-text-caption);
			font-weight: var(--portfolio-weight-semibold);

			svg {
				display: block;
				width: var(--space-13);
				height: var(--space-13);
			}
		}

		.is-error .mark {
			color: var(--portfolio-loss);
			background: var(--portfolio-loss-soft);
		}

		.is-warn .mark {
			color: var(--portfolio-paused);
			background: var(--portfolio-paused-soft);
		}

		.title {
			flex: 1 1 auto;
			min-width: 0;
			overflow: hidden;
			font-size: var(--text-small);
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.chevron {
			display: grid;
			flex: 0 0 auto;
			width: var(--space-10);
			height: var(--space-10);
			place-items: center;
			color: var(--portfolio-ink-muted);

			svg {
				display: block;
				width: var(--space-8);
				height: var(--space-8);
			}
		}

		.item:focus-visible {
			outline: var(--space-2) solid var(--portfolio-ink);
			outline-offset: var(--space-2);
		}
	}

	.warning-detail {
		.copy {
			margin: 0;
			color: var(--portfolio-ink);
		}

		.symbols {
			display: flex;
			flex-direction: column;
			gap: var(--space-rem-0-35);
			margin: 0;
			padding: 0;
			list-style: none;
		}
	}
}


/* ./components/pair-list.css */
/* Root class matches filename: pair-list.css → .pair-list */

.portfolio {
	.pair-list {
		display: flex;
		flex-direction: column;
		gap: 0;

		> .glass {
			padding: 0;

			.body {
				display: flex;
				flex-direction: column;
			}
		}

		.pair-action-menu {
			display: block;
			width: 100%;
		}

		.pair-divider {
			position: absolute;
			right: 0;
			bottom: 0;
			left: var(--portfolio-pair-divider-inset);
			height: var(--portfolio-flat-border-width);
			background: var(--portfolio-flat-border);
			pointer-events: none;
		}

		&.is-selecting {
			scroll-margin-top: var(--portfolio-sticky-header);
			padding-bottom: calc(
				var(--portfolio-nav-bar) + var(--portfolio-nav-breathing) +
					var(--portfolio-nav-pad-bottom) + var(--space-rem-2-75)
			);
		}

		.empty {
			display: flex;
			flex-direction: column;
			gap: var(--space-12);
			align-items: center;
			padding: var(--space-32) var(--space-20);
			text-align: center;
		}

		.icon {
			width: var(--space-28);
			height: var(--space-28);
			color: var(--portfolio-ink-muted);
		}

		.title {
			margin: 0;
			font-size: var(--text-lead);
			font-weight: var(--portfolio-weight-semibold);
		}

		.subtitle {
			margin: 0;
			max-width: var(--measure-22);
			color: var(--portfolio-ink-muted);
			font-size: var(--text-small);
			line-height: 1.35;
		}

		.connect {
			margin-top: var(--space-4);
			padding: var(--space-7) var(--space-16);
			border: 0;
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-system);
			color: var(--on-accent);
			font-size: var(--text-subhead);
			font-weight: var(--portfolio-weight-semibold);
			cursor: pointer;
		}

		&.is-demo {
			gap: 0;
			filter: grayscale(1);
			opacity: 0.72;
		}

		.demo-pair {
			position: relative;
			display: flex;
			gap: var(--space-10);
			align-items: flex-start;
			width: 100%;
			padding: var(--portfolio-pair-pad-y) var(--portfolio-pair-pad-x);
			border: 0;
			background: transparent;
			color: inherit;
			text-align: start;
			cursor: pointer;
		}

		.demo-copy {
			display: flex;
			flex: 1 1 auto;
			gap: var(--space-8);
			align-items: flex-start;
			min-width: 0;
		}

		.demo-lead,
		.demo-trail {
			display: flex;
			flex-direction: column;
			gap: var(--space-4);
			min-width: 0;
		}

		.demo-lead {
			flex: 1 1 auto;
		}

		.demo-trail {
			flex: 0 0 auto;
			align-items: flex-end;
			text-align: end;
		}

		.demo-pair .symbol,
		.demo-pair .price {
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-subhead);
			font-weight: var(--portfolio-weight-semibold);
			line-height: 1.2;
		}

		.demo-pair .price {
			font-weight: var(--portfolio-weight-medium);
			font-variant-numeric: tabular-nums;
		}

		.demo-pair .strategy,
		.demo-pair .lots {
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-caption);
			line-height: 1.2;
		}

		.demo-pair .pair-asset-badge {
			margin-top: var(--space-1);
			opacity: 0.55;
		}
	}
}


/* ./components/pair-asset-badge.css */
/* Root class matches filename: pair-asset-badge.css → .pair-asset-badge */

.portfolio {
	.pair-asset-badge {
		display: grid;
		flex: 0 0 auto;
		place-items: center;
		overflow: hidden;
		border-radius: var(--portfolio-radius-full);
		background: var(--portfolio-demo-soft);

		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.fallback {
			color: var(--portfolio-ink-muted);
			font-size: var(--text-kicker);
			font-weight: var(--portfolio-weight-bold);
			letter-spacing: 0.02em;
		}
	}
}


/* ./components/pair-row.css */
/* Root class matches filename: pair-row.css → .pair-row */

.portfolio {
	.pair-row {
		position: relative;
		padding: var(--portfolio-pair-pad-y) var(--portfolio-pair-pad-x);

		&.is-dimmed {
			color: var(--portfolio-ink-muted);
		}

		.header {
			display: grid;
			grid-template-columns: auto minmax(0, 1fr);
			gap: var(--space-10);
			align-items: start;
			width: 100%;
		}

		.header-toggle {
			display: grid;
			grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
			grid-template-rows: auto auto;
			gap: var(--space-0) var(--space-8);
			align-items: center;
			width: 100%;
			min-width: 0;
		}

		&.is-selecting {
			scroll-margin-bottom: calc(
				var(--portfolio-nav-bar) + var(--portfolio-nav-breathing) +
					var(--portfolio-nav-pad-bottom) + var(--space-rem-2-75)
			);
		}

		&.is-selecting .header {
			grid-template-columns: var(--space-28) minmax(0, 1fr);
		}

		.mark {
			display: grid;
			width: var(--space-28);
			height: var(--space-28);
			place-items: center;
			color: var(--portfolio-ink-muted);

			&.is-on {
				color: var(--portfolio-system);

				svg path:last-child {
					fill: var(--on-accent);
					fill-opacity: 1;
				}
			}

			svg {
				display: block;
				width: var(--space-22);
				height: var(--space-22);
			}
		}

		.toggle-segment {
			margin: 0;
			padding: 0;
			border: 0;
			background: transparent;
			text-align: start;
			cursor: pointer;
		}

		.header-symbol {
			display: flex;
			grid-column: 1;
			grid-row: 1;
			gap: var(--space-4);
			align-items: baseline;
			min-height: var(--space-24);
		}

		.strategy {
			display: flex;
			grid-column: 1;
			grid-row: 2;
			flex-wrap: wrap;
			gap: var(--space-6);
			align-items: baseline;
			min-width: 0;
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-caption);
			line-height: 1.2;
		}

		.header-trail-pnl {
			grid-column: 2;
			grid-row: 1;
			justify-self: end;
			width: 100%;
			min-width: 0;
			text-align: end;
		}

		.header-trail-meta {
			grid-column: 2;
			grid-row: 2;
			justify-self: end;
			width: 100%;
			min-width: 0;
			text-align: end;
		}

		.symbol {
			font-size: var(--text-lead);
			font-weight: var(--portfolio-weight-semibold);
			line-height: 1.2;
		}

		.scale {
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-micro);
			font-weight: var(--portfolio-weight-medium);
			line-height: 1.2;
			opacity: 0.72;
		}

		.meta {
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-caption);
			line-height: 1.2;
		}

		.strategy-link {
			padding: 0;
			border: 0;
			background: transparent;
			color: inherit;
			font: inherit;
			line-height: inherit;
			cursor: pointer;
		}

		.off,
		.pending {
			font-size: var(--portfolio-text-micro);
			font-weight: var(--portfolio-weight-medium);
		}

		.pending {
			color: var(--portfolio-paused);
		}

		.header-trail-pnl .pnl {
			font-size: var(--text-lead);
			font-weight: var(--portfolio-weight-medium);
			font-variant-numeric: tabular-nums;
			line-height: 1.2;

			&.is-profit {
				color: var(--portfolio-profit);
			}

			&.is-loss {
				color: var(--portfolio-loss);
			}

			&.is-neutral {
				color: inherit;
			}
		}

		.chevron-disclosure.chevron {
			grid-column: 3;
			grid-row: 1 / span 2;
			align-self: center;
			height: var(--space-24);
		}

		.details {
			display: flex;
			flex-direction: column;
			gap: var(--space-10);
			padding-top: var(--space-10);
		}

		.section {
			display: flex;
			flex-direction: column;
			gap: var(--space-6);
		}

		.section-head {
			display: flex;
			gap: var(--space-8);
			align-items: baseline;
			justify-content: space-between;
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-micro);
		}

		.section-link {
			min-height: var(--space-24);
			padding: 0;
			border: 0;
			background: transparent;
			color: inherit;
			cursor: pointer;
		}

		h3,
		.section-title {
			margin: 0;
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-micro);
			font-weight: var(--portfolio-weight-semibold);
			letter-spacing: 0.04em;
			text-transform: uppercase;
		}

		.section-summary {
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-micro);
		}

		.section-rule {
			margin: var(--space-2) 0;
			border: 0;
			border-top: var(--space-1) solid var(--gray-18);
			opacity: 0.35;
		}

		.adjust-chips,
		.signals {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-6);
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.adjust-chips {
			padding-bottom: var(--space-6);
		}

		.signals.is-inert,
		.watch.is-inert {
			pointer-events: none;
		}

		.watch {
			margin: 0;
			padding-bottom: var(--space-6);
			color: var(--portfolio-paused);
			font-size: var(--portfolio-text-micro);
		}

		.entry {
			width: 100%;
			min-height: var(--space-32);
			padding: var(--space-7) var(--space-10);
			border: 0;
			border-radius: var(--portfolio-radius-chip);
			color: var(--portfolio-profit);
			background: var(--portfolio-profit-soft);
			font-size: var(--portfolio-text-caption);
			font-weight: var(--portfolio-weight-semibold);
			cursor: pointer;
		}

		.closed {
			display: flex;
			gap: var(--space-8);
			align-items: baseline;
			margin: var(--space-2) 0 0;
			font-size: var(--portfolio-text-micro);
			font-variant-numeric: tabular-nums;

			.pnl {
				font-size: inherit;
				font-weight: var(--portfolio-weight-medium);

				&.is-profit {
					color: var(--portfolio-profit);
				}

				&.is-loss {
					color: var(--portfolio-loss);
				}

				&.is-neutral {
					color: var(--portfolio-ink);
				}
			}
		}
	}
}


/* ./components/signal-chip.css */
/* Root class matches filename: signal-chip.css → .signal-chip */

.portfolio {
	.signal-tone,
	.signal-chip {
		&.is-emerald {
			--chip: var(--signal-emerald);
		}

		&.is-sky {
			--chip: var(--signal-sky);
		}

		&.is-violet {
			--chip: var(--signal-violet);
		}

		&.is-amber {
			--chip: var(--signal-amber);
		}

		&.is-rose {
			--chip: var(--signal-rose);
		}

		&.is-teal {
			--chip: var(--signal-teal);
		}

		&.is-indigo {
			--chip: var(--signal-indigo);
		}

		&.is-cyan {
			--chip: var(--signal-cyan);
		}

		&.is-lime {
			--chip: var(--signal-lime);
		}

		&.is-orange {
			--chip: var(--signal-orange);
		}

		&.is-slate {
			--chip: var(--signal-slate);
		}

		&.is-profit {
			--chip: var(--portfolio-profit);
		}

		&.is-loss {
			--chip: var(--portfolio-loss);
		}
	}

	.signal-chip {
		display: inline-flex;
		gap: var(--space-5);
		align-items: center;
		min-height: var(--space-24);
		padding: var(--space-5) var(--space-10);
		border: 0;
		border-radius: var(--portfolio-radius-full);
		background: color-mix(in srgb, var(--chip) 8%, transparent);
		color: var(--portfolio-ink);
		font-size: var(--portfolio-text-micro);
		font-weight: var(--portfolio-weight-semibold);
		line-height: 1;
		cursor: pointer;

		.dot {
			width: var(--space-6);
			height: var(--space-6);
			border-radius: var(--portfolio-radius-full);
			background: var(--chip);
		}

		&.is-waiting {
			background: color-mix(in srgb, var(--chip) 14%, transparent);
			color: var(--chip);
		}
	}

	.signal-overflow {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: var(--space-24);
		padding: var(--space-5) var(--space-10);
		border: 0;
		border-radius: var(--portfolio-radius-full);
		background: color-mix(in srgb, var(--portfolio-ink-muted) 8%, transparent);
		color: var(--portfolio-ink-muted);
		font-size: var(--portfolio-text-micro);
		font-weight: var(--portfolio-weight-semibold);
		line-height: 1;
		cursor: pointer;

		.footprint {
			visibility: hidden;
		}

		svg {
			position: absolute;
			display: block;
			width: var(--space-10);
			height: var(--space-10);
		}
	}
}


/* ./components/pair-trend-mini.css */
/* Root class matches filename: pair-trend-mini.css → .pair-trend-mini */

.portfolio {
	.pair-trend-mini {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		width: 100%;
		padding: 0;
		border: 0;
		background: transparent;
		text-align: start;
		cursor: pointer;

		&:not(button) {
			cursor: default;
		}

		.plot {
			display: block;
			width: 100%;
			height: var(--space-36);

			polyline,
			line,
			polygon {
				stroke-width: 1.5;
				stroke-linecap: round;
				stroke-linejoin: round;
			}

			.midline {
				stroke: var(--gray-15);
				stroke-width: 1;
			}

			.now-line {
				stroke: var(--gray-35);
				stroke-width: 1;
			}

			.position-column {
				stroke-width: 1;
				stroke-dasharray: 2 3;
			}

			&.is-profit polyline {
				stroke: var(--portfolio-profit);
			}

			&.is-loss polyline {
				stroke: var(--portfolio-loss);
			}

			&.is-neutral polyline {
				stroke: var(--portfolio-ink-muted);
			}

			.future {
				stroke: inherit;
				stroke-dasharray: 4 3;
			}

			.marker {
				stroke: none;

				&.is-profit {
					fill: var(--portfolio-profit);
				}

				&.is-loss {
					fill: var(--portfolio-loss);
				}

				&.is-neutral {
					fill: var(--portfolio-ink-muted);
				}

				&.is-projected {
					opacity: 0.65;
				}
			}
		}

		.price-row {
			display: flex;
			gap: var(--space-3);
			align-items: center;
			justify-content: center;
			margin: 0;
			font-size: var(--portfolio-text-micro);
			font-variant-numeric: tabular-nums;

			.is-muted {
				color: var(--portfolio-ink-muted);
			}

			.arrow {
				color: var(--portfolio-ink-muted);
			}

			.is-profit {
				color: var(--portfolio-profit);
			}

			.is-loss {
				color: var(--portfolio-loss);
			}
		}
	}
}


/* ./components/pair-trades-table.css */
/* Root class matches filename: pair-trades-table.css → .pair-trades-table */

.portfolio {
	.pair-trades-table {
		display: grid;
		grid-template-columns:
			max-content max-content max-content max-content max-content
			minmax(var(--space-rem-3), 1fr);
		column-gap: var(--space-5);
		row-gap: var(--space-4);
		width: 100%;
		font-size: var(--portfolio-text-micro);
		font-variant-numeric: tabular-nums;

		.row {
			display: grid;
			grid-column: 1 / -1;
			grid-template-columns: subgrid;
			align-items: baseline;
			padding: 0;
			border: 0;
			background: transparent;
			color: inherit;
			text-align: start;
		}

		.row > * {
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.row.head {
			color: var(--portfolio-ink-muted);
			font-weight: var(--portfolio-weight-medium);
			text-transform: uppercase;
		}

		.row.trade {
			cursor: pointer;
		}

		.row.trade:disabled {
			cursor: default;
		}

		.side {
			font-weight: var(--portfolio-weight-semibold);

			&.is-profit {
				color: var(--portfolio-profit);
			}

			&.is-loss {
				color: var(--portfolio-loss);
			}
		}

		.muted {
			color: var(--portfolio-ink-muted);
		}

		.badge-col,
		.pnl-col {
			justify-self: end;
			text-align: end;
		}

		.badge {
			display: inline-flex;
			padding: var(--space-1) var(--space-5);
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-demo-soft);
			color: var(--portfolio-ink-muted);
			font-weight: var(--portfolio-weight-semibold);
			white-space: nowrap;

			&.is-anchor {
				visibility: hidden;
			}
		}

		.pnl {
			font-size: inherit;
			font-weight: var(--portfolio-weight-medium);

			&.is-profit {
				color: var(--portfolio-profit);
			}

			&.is-loss {
				color: var(--portfolio-loss);
			}

			&.is-empty {
				opacity: 0;
			}
		}

		.exit-block {
			display: flex;
			grid-column: 1 / -1;
			flex-direction: column;
			gap: var(--space-4);
			padding-bottom: 0;

			&.has-gap {
				padding-bottom: var(--space-10);
			}
		}

		.exit-meta {
			display: flex;
			gap: var(--space-6);
			justify-content: space-between;
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-micro);

			span:last-child {
				text-align: end;
			}
		}

		.exit-cta {
			width: 100%;
			min-height: var(--space-32);
			padding: var(--space-7) var(--space-10);
			border: 0;
			border-radius: var(--portfolio-radius-chip);
			font-size: var(--portfolio-text-caption);
			font-weight: var(--portfolio-weight-semibold);
			cursor: pointer;

			&.is-profit {
				color: var(--portfolio-profit);
				background: var(--portfolio-profit-soft);
			}

			&.is-loss {
				color: var(--portfolio-loss);
				background: var(--portfolio-loss-soft);
			}
		}
	}
}


/* ./components/pair-trend-chart-sheet.css */
/* Root class matches filename: pair-trend-chart-sheet.css → .pair-trend-chart-sheet */

.portfolio {
	.pair-trend-chart-sheet {
		position: relative;
		display: flex;
		flex-direction: column;
		min-height: 0;
		flex: 1;

		.header {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: var(--space-12);
			padding: 0 var(--portfolio-sheet-header-pad-x) var(--space-12);
		}

		.price-block,
		.forecast-block {
			display: flex;
			flex-direction: column;
			gap: var(--space-4);
			min-width: 0;
		}

		.forecast-block {
			align-items: flex-end;
			text-align: end;
		}

		.forecast-primary {
			position: relative;
			display: grid;
			place-items: center;
		}

		.forecast-primary .spinner-status {
			position: absolute;
			inset: 0;
			display: grid;
			place-items: center;
		}

		.price,
		.forecast {
			margin: 0;
			font-size: var(--text-stat);
			font-weight: var(--portfolio-weight-semibold);
			font-variant-numeric: tabular-nums;
			line-height: 1.2;
		}

		.forecast.is-profit {
			color: var(--portfolio-profit);
		}

		.forecast.is-loss {
			color: var(--portfolio-loss);
		}

		.forecast.is-neutral,
		.forecast.is-loading {
			color: var(--portfolio-ink-muted);
		}

		.forecast.is-loading {
			visibility: hidden;
		}

		.subtitle,
		.forecast-label {
			margin: 0;
			color: var(--portfolio-ink-muted);
			font-size: var(--text-tab);
			font-variant-numeric: tabular-nums;
		}

		.empty {
			display: grid;
			flex: 1;
			place-items: center;
			gap: var(--space-12);
			margin: 0;
			padding: var(--space-rem-1-5) var(--portfolio-sheet-header-pad-x)
				var(--space-rem-2);
			color: var(--portfolio-ink-muted);
			text-align: center;
		}

		.retry {
			min-height: var(--space-36);
			padding: 0 var(--portfolio-sheet-header-pad-x);
			border: var(--portfolio-border-width) solid var(--portfolio-glass-border);
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-glass-bg);
			color: var(--portfolio-ink);
			font-weight: var(--portfolio-weight-semibold);
			cursor: pointer;
		}

		.hint,
		.range-busy {
			position: absolute;
			width: var(--space-1);
			height: var(--space-1);
			padding: 0;
			margin: calc(-1 * var(--space-1));
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}

		.range-busy {
			position: absolute;
			inset: auto 50% var(--space-rem-5-5);
			width: auto;
			height: auto;
			margin: 0;
			padding: var(--space-12);
			overflow: visible;
			clip: auto;
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-glass-bg);
			color: var(--portfolio-ink-muted);
			font-size: var(--text-note);
			transform: translateX(50%);
			backdrop-filter: var(--portfolio-glass-filter);
			-webkit-backdrop-filter: var(--portfolio-glass-filter);
		}

		.controls {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: var(--space-8) var(--portfolio-sheet-header-pad-x)
				var(--space-rem-1-25);
		}

		.zooms {
			display: flex;
			gap: var(--space-20);
		}

		.nav {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: var(--portfolio-touch);
			min-height: var(--portfolio-touch);
			padding: 0;
			border: 0;
			background: transparent;
			color: var(--portfolio-ink);
			cursor: pointer;

			&:disabled {
				cursor: not-allowed;
				opacity: 0.35;
			}

			svg {
				display: block;
				width: var(--space-17);
				height: var(--space-17);
			}

			&:focus-visible {
				outline: var(--space-2) solid var(--portfolio-ink);
				outline-offset: var(--space-2);
				border-radius: var(--space-10);
			}
		}

		.chart-host {
			display: flex;
			flex: 1;
			min-height: var(--space-180);
			padding: 0 var(--portfolio-sheet-header-pad-x);
		}

		.chart {
			display: block;
			width: 100%;
			height: 100%;
			min-height: var(--space-180);
			overflow: visible;
			touch-action: none;
			cursor: crosshair;

			&:focus-visible {
				outline: var(--space-2) solid var(--portfolio-ink);
				outline-offset: var(--space-4);
				border-radius: var(--portfolio-radius-control);
			}

			.midline,
			.now,
			.column,
			.scrub {
				stroke-width: 1;
			}

			.midline {
				stroke: var(--portfolio-ink-muted);
				opacity: 0.15;
			}

			.now {
				stroke: var(--portfolio-ink-muted);
				opacity: 0.35;
			}

			.scrub {
				stroke: var(--portfolio-ink);
				stroke-dasharray: 3 2;
				opacity: 0.45;
			}

			.past,
			.future {
				stroke: color-mix(
					in srgb,
					var(--portfolio-ink-muted) calc((1 - var(--trend-amount, 0)) * 100%),
					var(--trend-tip, var(--portfolio-profit))
						calc(var(--trend-amount, 0) * 100%)
				);
				stroke-width: 1.5;
				stroke-linecap: round;
				stroke-linejoin: round;
			}

			.future {
				stroke-dasharray: 4 3;
				opacity: 0.75;
			}

			&.is-profit {
				--trend-tip: var(--portfolio-profit);
			}

			&.is-loss {
				--trend-tip: var(--portfolio-loss);
			}

			&.is-muted {
				--trend-amount: 0;
			}

			.marker.is-profit {
				fill: var(--portfolio-profit);
			}

			.marker.is-loss {
				fill: var(--portfolio-loss);
			}

			.column {
				stroke-dasharray: 2 3;
				opacity: 0.85;
			}

			.axis {
				fill: var(--portfolio-ink-muted);
				font-size: var(--space-9);
				font-variant-numeric: tabular-nums;
				opacity: 0.85;
			}
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .pair-trend-chart-sheet,
	.portfolio .pair-trend-chart-sheet * {
		transition: none;
		animation: none;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio {
		.pair-trend-chart-sheet {
			.retry,
			.range-busy {
				background: var(--portfolio-glass-opaque);
				backdrop-filter: none;
				-webkit-backdrop-filter: none;
			}
		}
	}
}


/* ./components/report-panel.css */
/* Root class matches filename: report-panel.css → .report-panel */

.portfolio {
	.report-panel {
		display: flex;
		flex-direction: column;
		gap: var(--space-24);
		padding-block: var(--space-8) var(--portfolio-pad);
		padding-inline: 0;

		&.is-sheet {
			padding-inline: var(--space-16);
		}

		.heading {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-12);
			min-height: var(--portfolio-sheet-header-min);
		}

		h2 {
			margin: 0;
			font-size: var(--text-headline);
			font-weight: var(--portfolio-weight-semibold);
			line-height: 1.25;
		}

		.report-loading {
			display: grid;
			place-items: center;
			width: 100%;
			min-height: var(--space-240);

			.default-skeleton {
				min-height: 0;
			}

			.wheel {
				color: var(--portfolio-ink-muted);
			}
		}

		.notice {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: var(--space-12);
			padding: var(--portfolio-module-pad);
			border: var(--portfolio-border-width) solid var(--portfolio-glass-border);
			border-radius: var(--portfolio-radius);
			background: var(--portfolio-flat-fill);
		}

		.notice p {
			margin: 0;
			color: var(--portfolio-ink);
		}

		.notice button,
		.report-months-empty .reset {
			min-height: var(--portfolio-touch);
			min-width: var(--portfolio-touch);
			padding: var(--space-rem-0-55) var(--space-rem-0-95);
			border: var(--portfolio-border-width) solid var(--portfolio-glass-border);
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-glass-bg);
			color: var(--portfolio-ink);
			cursor: pointer;
		}

		.notice button:hover,
		.report-months-empty .reset:hover {
			background: var(--portfolio-flat-fill);
		}
	}
}


/* ./components/report-filters.css */
/* Root class matches filename: report-filters.css → .report-filters */

.portfolio {
	.report-filters {
		display: flex;
		flex-direction: column;
		gap: var(--space-8);

		.bar {
			display: flex;
			align-items: center;
			gap: var(--space-12);
			min-height: var(--space-32);
		}

		.leading {
			flex: 1 1 auto;
			min-width: 0;
		}

		.summary {
			margin: 0;
			overflow: hidden;
			color: var(--portfolio-ink-muted);
			font-size: var(--text-label);
			line-height: 1.2;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.clear {
			display: inline-flex;
			gap: var(--space-4);
			align-items: center;
			min-height: var(--space-32);
			min-width: var(--portfolio-touch);
			padding: var(--space-rem-0-2) var(--space-rem-0-15);
			border: 0;
			background: transparent;
			color: var(--portfolio-ink-muted);
			font-size: var(--text-label);
			cursor: pointer;

			&::before {
				content: '−';
				font-weight: var(--portfolio-weight-semibold);
			}
		}

		.chips {
			display: flex;
			flex: 0 0 auto;
			flex-wrap: wrap;
			gap: var(--space-16);
			align-items: center;
			justify-content: flex-end;
		}

		.chip {
			display: inline-flex;
			gap: var(--space-4);
			align-items: center;
			min-height: var(--space-32);
			min-width: var(--portfolio-touch);
			padding: var(--space-rem-0-2) 0;
			border: 0;
			background: transparent;
			color: var(--portfolio-ink);
			font-size: var(--text-label);
			font-weight: var(--portfolio-weight-medium);
			line-height: 1.2;
			cursor: pointer;
		}

		.chip span {
			overflow: hidden;
			max-width: var(--measure-9);
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.chip svg {
			width: var(--space-10);
			height: var(--space-10);
			opacity: 0.45;
		}

		.chip.is-open {
			color: var(--portfolio-ink);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio {
		.report-filters .chip {
			transition: none;
		}
	}
}


/* ./components/report-stats.css */
/* Root class matches filename: report-stats.css → .report-stats */

.portfolio {
	.report-stats {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--portfolio-pad);
		margin: 0;

		> div {
			display: flex;
			flex-direction: column;
			gap: var(--space-4);
			align-items: flex-start;
			min-height: var(--space-72);
		}

		dt {
			font-size: var(--text-label);
			color: var(--portfolio-ink-muted);
		}

		dd {
			margin: 0;
			font-size: var(--text-stat);
			font-weight: var(--portfolio-weight-semibold);
			font-variant-numeric: tabular-nums;
			line-height: 1.15;
		}

		.profit {
			color: var(--portfolio-profit);
		}

		.loss {
			color: var(--portfolio-loss);
		}

		.win-rate-bar {
			width: 100%;
			height: var(--portfolio-capital-tile-progress);
			min-height: var(--portfolio-capital-tile-progress);
			margin-top: var(--space-4);
			overflow: hidden;
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-fill-soft);

			.fill {
				display: block;
				height: 100%;
				border-radius: inherit;
				background: linear-gradient(
					90deg,
					color-mix(in srgb, var(--portfolio-profit) 85%, transparent),
					color-mix(in srgb, var(--portfolio-profit) 55%, transparent)
				);
			}

			&.is-loss .fill {
				background: linear-gradient(
					90deg,
					color-mix(in srgb, var(--portfolio-loss) 85%, transparent),
					color-mix(in srgb, var(--portfolio-loss) 55%, transparent)
				);
			}

			&.is-flat .fill {
				background: color-mix(in srgb, var(--portfolio-ink) 28%, transparent);
			}
		}
	}
}


/* ./components/report-chart.css */
/* Root class matches filename: report-chart.css → .report-chart */

.portfolio {
	.report-chart {
		display: flex;
		flex-direction: column;
		gap: var(--space-8);

		.title {
			margin: 0;
			font-size: var(--text-headline);
			font-weight: var(--portfolio-weight-semibold);
		}

		.bars {
			display: flex;
			align-items: stretch;
			gap: var(--space-6);
			height: var(--space-120);
		}

		&.is-dense .bars {
			gap: var(--space-3);
		}

		button,
		.col {
			display: flex;
			flex: 1 1 0;
			flex-direction: column;
			align-items: center;
			justify-content: flex-end;
			gap: var(--space-4);
			min-width: 0;
			min-height: 0;
			padding: 0;
			border: 0;
			background: transparent;
			color: var(--portfolio-ink-muted);
		}

		button {
			cursor: pointer;
		}

		button.is-selected {
			color: var(--portfolio-ink);
			font-weight: var(--portfolio-weight-semibold);
		}

		.plot {
			display: flex;
			flex: 1 1 auto;
			align-items: flex-end;
			justify-content: center;
			width: 100%;
			min-height: 0;
		}

		.bar {
			display: block;
			width: 100%;
			border-radius: var(--space-2);

			&.is-profit {
				background: var(--portfolio-profit);
			}

			&.is-loss {
				background: var(--portfolio-loss);
			}

			&.is-flat {
				background: var(--gray-25);
			}
		}

		button.is-selected .bar {
			box-shadow: inset 0 0 0 var(--border-thick) var(--black-55);
		}

		span {
			max-width: 100%;
			overflow: hidden;
			font-size: var(--text-ios-caption2);
			line-height: 1.2;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

@media (prefers-color-scheme: dark) {
	.portfolio {
		.report-chart button.is-selected .bar {
			box-shadow: inset 0 0 0 var(--border-thick) var(--white-55);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio {
		.report-chart button {
			transition: none;
		}
	}
}


/* ./components/report-months.css */
/* Root class matches filename: report-months.css → .report-months */

.portfolio {
	.report-months-empty {
		margin: 0;
		font-size: var(--text-label);
		color: var(--portfolio-ink-muted);
	}

	.report-months-empty .reset {
		padding: var(--space-rem-0-2) var(--space-rem-0-55);
		text-decoration: underline;
		background: transparent;
		border: 0;
		border-radius: var(--portfolio-radius-chip);
		color: inherit;
	}

	.report-months {
		display: flex;
		flex-direction: column;
		gap: var(--space-12);
	}

	.report-months article {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.report-months article + article {
		padding-top: var(--space-12);
		border-top: var(--portfolio-flat-border-width) solid
			var(--portfolio-flat-border);
	}

	.report-months article > header,
	.report-months .day header {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-12);
		margin-bottom: var(--space-8);
	}

	.report-months h3,
	.report-months h4 {
		margin: 0;
		font-weight: var(--portfolio-weight-semibold);
	}

	.report-months h3 {
		font-size: var(--text-body);
	}

	.report-months h4 {
		color: var(--portfolio-ink-muted);
		font-size: var(--text-subhead);
	}

	.report-months header p,
	.report-months .empty {
		margin: 0;
		font-size: var(--text-subhead);
		font-weight: var(--portfolio-weight-semibold);
	}

	.report-months .empty {
		color: var(--portfolio-ink-muted);
		font-weight: var(--weight-regular);
	}

	.report-months .day + .day {
		margin-top: var(--space-10);
		padding-top: var(--space-10);
		border-top: var(--portfolio-flat-border-width) solid
			var(--portfolio-flat-border);
	}

	.report-months ol {
		display: flex;
		flex-direction: column;
		gap: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.report-months li {
		padding-block: var(--space-8);
		border-top: var(--portfolio-flat-border-width) solid
			var(--portfolio-flat-border);
	}

	.report-months .trade-row {
		display: flex;
		gap: var(--space-12);
		align-items: flex-start;
	}

	.report-months .trade-body {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: var(--space-6);
		min-width: 0;
	}

	.report-months .meta {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--space-12);
	}

	.report-months .pills {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-4);
		align-items: center;
		min-width: 0;
	}

	.report-months .pill {
		display: inline-flex;
		gap: var(--space-4);
		align-items: center;
		min-height: var(--space-24);
		padding: var(--space-3) var(--space-8);
		border: 0;
		border-radius: var(--portfolio-radius-full);
		background: var(--portfolio-fill-muted);
		color: inherit;
		font-size: var(--text-caption);
		font-weight: var(--portfolio-weight-medium);
		line-height: 1;
		cursor: pointer;
	}

	.report-months span.pill {
		cursor: default;
	}

	.report-months .pill.is-selected {
		background: var(--portfolio-fill-muted-strong);
		box-shadow: inset 0 0 0 var(--space-1) var(--portfolio-fill-muted-ring);
	}

	.report-months .dot {
		width: var(--space-8);
		height: var(--space-8);
		border-radius: var(--portfolio-radius-circle);
		background: var(--report-series-0);
	}

	.report-months .dot[data-color='1'] {
		background: var(--report-series-1);
	}

	.report-months .dot[data-color='2'] {
		background: var(--report-series-2);
	}

	.report-months .dot[data-color='3'] {
		background: var(--report-series-3);
	}

	.report-months .more {
		min-height: var(--portfolio-touch);
		min-width: var(--portfolio-touch);
		padding: var(--space-8) 0;
		border: 0;
		background: transparent;
		color: var(--portfolio-ink-muted);
		font-size: var(--text-label);
		font-weight: var(--portfolio-weight-medium);
		text-align: start;
		cursor: pointer;
	}

	.report-months .details {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		width: 100%;
		min-height: var(--space-32);
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--portfolio-ink-muted);
		font-size: var(--text-dense);
		text-align: start;
		cursor: pointer;
	}

	.report-months .fill {
		display: flex;
		justify-content: space-between;
		gap: var(--space-8);
	}

	.report-months .profit {
		color: var(--portfolio-profit);
	}

	.report-months .loss {
		color: var(--portfolio-loss);
	}
}


/* ./components/report-pair-ranking.css */
/* Root class matches filename: report-pair-ranking.css → .report-pair-ranking
 * iOS ReportPairRankingView: headline + HStack rows + See more. */

.portfolio {
	.report-pair-ranking {
		display: flex;
		flex-direction: column;
		align-self: stretch;
		gap: var(--space-10);
		width: 100%;
		min-width: 0;
	}

	.report-pair-ranking h3 {
		margin: 0;
		font-size: var(--text-headline);
		font-weight: var(--portfolio-weight-semibold);
		line-height: 1.25;
	}

	.report-pair-ranking ol {
		display: flex;
		flex-direction: column;
		gap: var(--space-10);
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.report-pair-ranking li {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.report-pair-ranking .pair-rank {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--space-10);
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		min-height: var(--space-32);
		margin: 0;
		padding: 0;
		border: 0;
		appearance: none;
		-webkit-appearance: none;
		background: transparent;
		color: inherit;
		text-align: start;
		cursor: pointer;
	}

	.report-pair-ranking .place {
		flex: 0 0 auto;
		min-width: var(--space-36);
		color: var(--portfolio-ink-muted);
		font-size: var(--text-ios-callout);
		font-weight: var(--portfolio-weight-semibold);
		font-variant-numeric: tabular-nums;
		line-height: 1;
		white-space: nowrap;
	}

	.report-pair-ranking .pair-asset-badge {
		flex: 0 0 auto;
	}

	.report-pair-ranking .pair {
		flex: 0 0 var(--space-72);
		overflow: hidden;
		font-size: var(--text-caption);
		font-weight: var(--portfolio-weight-semibold);
		line-height: 1.2;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.report-pair-ranking .mix {
		display: block;
		flex: 1 1 auto;
		height: var(--space-8);
		min-width: var(--space-48);
		overflow: hidden;
		border-radius: var(--portfolio-radius-full);
		background: var(--portfolio-fill-muted);
	}

	.report-pair-ranking .mix-fill {
		display: flex;
		height: 100%;
		overflow: hidden;
		border-radius: inherit;
	}

	.report-pair-ranking .mix-profit {
		flex: 0 0 auto;
		height: 100%;
		background: var(--portfolio-profit);
	}

	.report-pair-ranking .mix-loss {
		flex: 0 0 auto;
		height: 100%;
		background: var(--portfolio-loss);
	}

	.report-pair-ranking .pair-pnl {
		flex: 0 0 auto;
		min-width: var(--space-64);
		font-size: var(--text-ios-callout);
		font-weight: var(--portfolio-weight-semibold);
		font-variant-numeric: tabular-nums;
		line-height: 1;
		text-align: end;
		white-space: nowrap;
	}

	.report-pair-ranking .pair-pnl.profit {
		color: var(--portfolio-profit);
	}

	.report-pair-ranking .pair-pnl.loss {
		color: var(--portfolio-loss);
	}

	.report-pair-ranking .more {
		appearance: none;
		-webkit-appearance: none;
		min-height: var(--portfolio-touch);
		min-width: var(--portfolio-touch);
		padding: var(--space-8) 0;
		border: 0;
		background: transparent;
		color: var(--portfolio-ink-muted);
		font-size: var(--text-ios-callout);
		font-weight: var(--portfolio-weight-medium);
		text-align: start;
		cursor: pointer;
	}
}


/* ./components/report-trade-scenario-sheet.css */
/* Root class matches filename: report-trade-scenario-sheet.css → .report-trade-scenario-sheet */

.portfolio {
	.report-trade-scenario-sheet {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--space-18);
		min-height: 0;
		padding-bottom: var(--space-16);

		.leading-action {
			position: absolute;
			top: var(--portfolio-sheet-header-pad-top);
			left: var(--portfolio-sheet-header-pad-x);
			z-index: 3;
			display: flex;
			align-items: center;
			min-height: var(--portfolio-sheet-header-min);
		}

		.promote {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: var(--portfolio-sheet-chrome-cta);
			min-height: var(--portfolio-sheet-chrome-cta);
			padding: 0 var(--portfolio-sheet-header-pad-x);
			border: var(--portfolio-border-width) solid var(--portfolio-glass-border);
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-glass-bg);
			color: var(--portfolio-profit);
			font-size: var(--portfolio-text-body);
			font-weight: var(--portfolio-weight-semibold);
			line-height: 1;
			cursor: pointer;
			backdrop-filter: var(--portfolio-glass-filter);
			-webkit-backdrop-filter: var(--portfolio-glass-filter);

			&:active:not(:disabled) {
				transform: scale(0.96);
			}
		}

		.hero {
			display: flex;
			flex-direction: column;
			gap: var(--space-8);
			padding: 0 var(--portfolio-sheet-header-pad-x);
		}

		.pair {
			display: flex;
			align-items: center;
			gap: var(--space-12);
		}

		.hero h3 {
			margin: 0;
			font-size: var(--text-panel);
			font-weight: var(--portfolio-weight-semibold);
		}

		.hero > p {
			margin: 0;
			font-size: var(--text-hero);
			font-weight: var(--portfolio-weight-semibold);
			font-variant-numeric: tabular-nums;
		}

		.pills {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-6);
		}

		.pill {
			display: inline-flex;
			gap: var(--space-4);
			align-items: center;
			min-height: var(--space-24);
			padding: var(--space-4) var(--space-8);
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-fill-muted);
			color: var(--portfolio-ink-muted);
			font-size: var(--text-dense);
			font-weight: var(--portfolio-weight-semibold);
		}

		.dot {
			width: var(--space-7);
			height: var(--space-7);
			border-radius: var(--portfolio-radius-circle);
			background: var(--report-series-0);
		}

		.dot[data-color='1'] {
			background: var(--report-series-1);
		}

		.dot[data-color='2'] {
			background: var(--report-series-2);
		}

		.dot[data-color='3'] {
			background: var(--report-series-3);
		}

		section {
			padding: 0 var(--portfolio-sheet-header-pad-x);
		}

		h4 {
			margin: 0 0 var(--space-8);
			color: var(--portfolio-ink-muted);
			font-size: var(--text-note);
			font-weight: var(--portfolio-weight-semibold);
			letter-spacing: 0.02em;
			text-transform: uppercase;
		}

		dl {
			display: flex;
			flex-direction: column;
			gap: 0;
			margin: 0;
		}

		dl div {
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			gap: var(--space-12);
			min-height: var(--space-36);
			padding-block: var(--space-8);
			border-top: var(--portfolio-flat-border-width) solid
				var(--portfolio-flat-border);
		}

		dt {
			color: var(--portfolio-ink-muted);
			font-size: var(--text-label);
		}

		dd {
			margin: 0;
			font-size: var(--text-label);
			font-weight: var(--portfolio-weight-medium);
			font-variant-numeric: tabular-nums;
			text-align: end;
		}

		.profit {
			color: var(--portfolio-profit);
		}

		.loss {
			color: var(--portfolio-loss);
		}
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio .report-trade-scenario-sheet .promote {
		background: var(--portfolio-glass-opaque);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}


/* ./components/buy-picker.css */
/* Root class matches filename: buy-picker.css → .buy-picker */

.portfolio {
	.buy-picker .search,
	.sheet-chrome .accessory .search {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 0 var(--portfolio-pad);

		&.in-chrome {
			padding-top: var(--space-8);
		}

		.visually-hidden {
			position: absolute;
			width: var(--space-1);
			height: var(--space-1);
			padding: 0;
			margin: calc(-1 * var(--space-1));
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}

		.field {
			display: flex;
			align-items: center;
			gap: var(--space-8);
			min-height: var(--portfolio-touch);
			padding: var(--space-10) var(--space-16);
			border-radius: var(--portfolio-radius-control);
			background: var(--black-06);
		}

		.glyph {
			display: block;
			flex: 0 0 var(--space-17);
			width: var(--space-17);
			height: var(--space-17);
			border: 0;
			background: transparent;
			color: var(--portfolio-ink-muted);
		}

		input {
			flex: 1;
			min-width: 0;
			min-height: var(--space-24);
			padding: 0;
			border: 0;
			background: transparent;
			color: var(--portfolio-ink);
			font: inherit;
			line-height: 1.5;
		}

		.clear {
			display: grid;
			flex: 0 0 var(--space-20);
			width: var(--space-20);
			height: var(--space-20);
			padding: 0;
			border: 0;
			background: transparent;
			color: var(--portfolio-ink-muted);
			cursor: pointer;
			place-items: center;

			svg {
				display: block;
				width: var(--space-20);
				height: var(--space-20);
			}
		}
	}

	.buy-picker {
		display: flex;
		flex-direction: column;
		gap: 0;
		width: 100%;
		max-width: var(--measure-40);
		min-width: 0;
		margin-inline: auto;
		padding: 0 0
			calc(
				var(--portfolio-nav-bar) + var(--portfolio-nav-breathing) +
					var(--portfolio-nav-pad-bottom) + var(--space-rem-1-25)
			);

		h1 {
			margin: 0;
			font-size: var(--text-title);
			font-weight: var(--portfolio-weight-semibold);
		}

		.notice {
			margin: 0;
			padding-inline: var(--portfolio-pad);
			color: var(--portfolio-ink-muted);
		}

		> .loading {
			display: grid;
			flex: 1;
			place-items: center;
			width: 100%;
			min-height: min(40svh, var(--space-280));
			margin: 0;
			padding-block: var(--space-32);
		}

		.list ~ .spinner-status {
			flex: 0 0 auto;
			min-height: 0;
			padding: var(--space-12) var(--portfolio-pad) var(--space-8);
		}

		.list {
			display: flex;
			flex-direction: column;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.row {
			display: flex;
			align-items: flex-start;
			gap: var(--space-12);
			width: 100%;
			min-height: var(--portfolio-touch);
			padding: calc(var(--portfolio-pair-pad-y) + var(--space-2))
				var(--portfolio-pad);
			border: 0;
			background: transparent;
			text-align: start;
			cursor: pointer;
			position: relative;
		}

		.row::after {
			content: '';
			position: absolute;
			inset-inline-start: var(--portfolio-pair-divider-inset);
			inset-inline-end: 0;
			inset-block-end: 0;
			border-block-end: var(--portfolio-flat-border-width) solid
				var(--portfolio-flat-border);
		}

		.list li:last-child .row::after {
			border-block-end: 0;
		}

		.body {
			display: flex;
			flex: 1;
			flex-direction: column;
			gap: var(--space-8);
			min-width: 0;
		}

		.identity {
			display: flex;
			align-items: baseline;
			gap: var(--space-6);
			min-width: 0;
		}

		.symbol {
			font-weight: var(--portfolio-weight-semibold);
		}

		.quote,
		.volume {
			color: var(--portfolio-ink-muted);
			font-size: var(--text-caption);
			font-variant-numeric: tabular-nums;
		}

		.status-chip {
			display: inline-flex;
			align-items: center;
			min-height: var(--space-24);
			margin-inline-start: auto;
			padding: var(--space-4) var(--space-8);
			border-radius: var(--portfolio-radius-full);
			font-size: var(--text-micro);
			font-weight: var(--portfolio-weight-semibold);

			&.is-active {
				color: var(--portfolio-profit);
				background: var(--portfolio-profit-soft);
			}

			&.is-disabled {
				color: var(--portfolio-paused);
				background: var(--portfolio-paused-soft);
			}

			&.is-new {
				color: var(--portfolio-ink-muted);
				background: var(--portfolio-demo-soft);
			}
		}

		.detail {
			display: flex;
			align-items: center;
			gap: var(--space-10);
			min-width: 0;
		}

		.chart-slot {
			display: block;
			flex: 1 1 var(--space-120);
			width: 100%;
			min-width: var(--space-120);
			height: var(--space-34);
		}

		.chart {
			display: block;
			width: 100%;
			height: var(--space-34);

			polyline,
			line,
			polygon {
				stroke-width: 1.5;
				stroke-linecap: round;
				stroke-linejoin: round;
			}

			.midline {
				stroke: var(--gray-15);
				stroke-width: 1;
			}

			.now-line {
				stroke: var(--gray-35);
				stroke-width: 1;
			}

			.position-column {
				stroke-width: 1;
				stroke-dasharray: 2 3;
			}

			&.is-profit polyline {
				stroke: var(--portfolio-profit);
			}

			&.is-loss polyline {
				stroke: var(--portfolio-loss);
			}

			&.is-neutral polyline {
				stroke: var(--portfolio-ink-muted);
			}

			.future {
				stroke: inherit;
				stroke-dasharray: 4 3;
			}

			.marker {
				stroke: none;

				&.is-profit {
					fill: var(--portfolio-profit);
				}

				&.is-loss {
					fill: var(--portfolio-loss);
				}

				&.is-neutral {
					fill: var(--portfolio-ink-muted);
				}

				&.is-projected {
					opacity: 0.65;
				}
			}

			.placeholder-line {
				stroke: var(--portfolio-ink-muted);
				stroke-width: 1;
				stroke-dasharray: 3 3;
				opacity: 0.2;
			}
		}

		.chart-placeholder {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: var(--space-34);
		}

		.metrics {
			display: flex;
			flex: 0 0 auto;
			flex-direction: column;
			align-items: flex-end;
			gap: var(--space-3);
			min-width: var(--space-rem-4-5);
			font-variant-numeric: tabular-nums;
		}

		.price {
			font-size: var(--text-subhead);
			font-weight: var(--portfolio-weight-semibold);
		}

		.sentinel {
			height: var(--space-1);
			pointer-events: none;
		}
	}
}

@media (prefers-color-scheme: dark) {
	.portfolio {
		.buy-picker .search .field,
		.sheet-chrome .accessory .search .field {
			background: var(--white-06);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .buy-picker,
	.portfolio .buy-picker * {
		transition: none;
		animation: none;
	}
}

@media (max-width: 320px) {
	.portfolio .buy-picker {
		.identity {
			flex-wrap: wrap;
		}

		.chart-slot {
			flex-basis: var(--space-72);
			min-width: var(--space-72);
		}
	}
}


/* ./components/write-sheet.css */
/* Root class matches filename: write-sheet.css → .write-sheet */

.portfolio {
	.write-sheet {
		position: relative;
		display: flex;
		flex-direction: column;
		min-height: 0;

		.leading-action {
			position: absolute;
			top: var(--portfolio-sheet-header-pad-top);
			left: var(--portfolio-sheet-header-pad-x);
			z-index: 3;
			display: flex;
			align-items: center;
			min-height: var(--portfolio-sheet-header-min);
		}

		.action {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: var(--portfolio-sheet-chrome-cta);
			min-height: var(--portfolio-sheet-chrome-cta);
			padding: 0 var(--portfolio-sheet-header-pad-x);
			border: var(--portfolio-border-width) solid var(--portfolio-glass-border);
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-glass-bg);
			color: var(--portfolio-ink);
			font-size: var(--portfolio-text-body);
			font-weight: var(--portfolio-weight-semibold);
			line-height: 1;
			cursor: pointer;
			backdrop-filter: var(--portfolio-glass-filter);
			-webkit-backdrop-filter: var(--portfolio-glass-filter);

			&.is-loss {
				color: var(--portfolio-loss);
			}

			&.is-profit {
				color: var(--portfolio-profit);
			}

			&:disabled {
				cursor: not-allowed;
				opacity: 0.38;
			}

			&:active:not(:disabled) {
				transform: scale(0.96);
			}
		}

		.form {
			display: flex;
			flex-direction: column;
			gap: var(--text-body);
			padding: var(--space-rem-0-25) var(--space-rem-1-25) var(--space-rem-1-5);
		}

		.section {
			display: flex;
			flex-direction: column;
			gap: var(--space-rem-0-65);
		}

		.section-title {
			margin: 0;
			color: var(--portfolio-ink-muted);
			font-size: var(--text-fine);
			font-weight: var(--portfolio-weight-semibold);
			letter-spacing: 0.02em;
			text-transform: uppercase;
		}

		.field {
			display: flex;
			flex-direction: column;
			gap: var(--space-rem-0-35);

			label {
				color: var(--portfolio-ink-muted);
			}

			input,
			select {
				width: 100%;
				min-height: var(--portfolio-touch);
				padding: var(--space-rem-0-5) var(--space-rem-0-75);
				border: var(--portfolio-border-width) solid var(--portfolio-flat-border);
				border-radius: var(--portfolio-radius-control);
				background: var(--portfolio-flat-fill);
			}
		}

		.segmented {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: var(--space-rem-0-35);
			min-height: var(--portfolio-touch);

			button {
				min-height: var(--portfolio-touch);
				border: var(--portfolio-border-width) solid var(--portfolio-flat-border);
				border-radius: var(--portfolio-radius-control);
				background: var(--portfolio-flat-fill);
				cursor: pointer;

				&.is-active {
					font-weight: var(--portfolio-weight-semibold);
					background: var(--portfolio-profit-soft);
				}
			}
		}

		.stepper {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-rem-0-75);

			button {
				display: grid;
				min-width: var(--portfolio-touch);
				min-height: var(--portfolio-touch);
				place-items: center;
				border: var(--portfolio-border-width) solid var(--portfolio-flat-border);
				border-radius: var(--portfolio-radius-control);
				background: var(--portfolio-flat-fill);
				cursor: pointer;

				svg {
					display: block;
					width: var(--space-14);
					height: var(--space-14);
				}
			}
		}

		.metrics {
			display: flex;
			flex-direction: column;
			gap: var(--space-rem-0-55);
			margin: 0;
		}

		.metric {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: var(--space-half) var(--text-body);

			dt {
				margin: 0;
				color: var(--portfolio-ink-muted);
			}

			dd {
				margin: 0;
				font-variant-numeric: tabular-nums;
			}
		}

		.hint,
		.warning,
		.error,
		.submitted {
			margin: 0;
		}

		.hint {
			color: var(--portfolio-ink-muted);
			font-size: var(--text-subhead);
		}

		.warning {
			color: var(--portfolio-ink);
		}

		.error {
			color: var(--portfolio-loss);
		}

		.submitted {
			color: var(--portfolio-paused);
		}

		.toggle {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-rem-0-75);
			min-height: var(--portfolio-touch);
		}

		.warning-actions {
			display: flex;
			flex-direction: column;
			gap: var(--space-rem-0-5);

			button {
				min-width: var(--portfolio-touch);
				min-height: var(--portfolio-touch);
				padding: var(--space-rem-0-6) var(--space-rem-0-85);
				border: var(--portfolio-border-width) solid var(--portfolio-flat-border);
				border-radius: var(--portfolio-radius-control);
				background: var(--portfolio-flat-fill);
				text-align: start;
				cursor: pointer;

				&.is-danger {
					color: var(--portfolio-loss);
				}

				&:disabled {
					color: var(--portfolio-ink-muted);
					cursor: not-allowed;
				}

				&:focus-visible {
					outline: var(--space-2) solid var(--portfolio-ink);
					outline-offset: var(--space-2);
				}
			}
		}

		.ask-chat {
			min-width: var(--portfolio-touch);
			min-height: var(--portfolio-touch);
			padding: var(--space-rem-0-6) 0;
			border: 0;
			background: transparent;
			font-size: var(--text-subhead);
			font-weight: var(--portfolio-weight-bold);
			text-align: start;
			cursor: pointer;

			&:focus-visible {
				outline: var(--space-2) solid var(--portfolio-ink);
				outline-offset: var(--space-2);
			}
		}
	}
}

@media (max-width: 320px) {
	.portfolio {
		.write-sheet {
			.form {
				padding-inline: var(--space-rem-0-85);
			}

			.leading-action {
				left: var(--space-rem-0-85);
			}
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .write-sheet,
	.portfolio .write-sheet * {
		transition: none;
		animation: none;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio .write-sheet .action {
		background: var(--portfolio-glass-opaque);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}


/* ./components/grouped-form.css */
/* Root class matches filename: grouped-form.css → .grouped-form */

.portfolio {
	.grouped-form {
		display: flex;
		flex-direction: column;
		gap: var(--portfolio-tile);
		padding: 0 var(--portfolio-pad) var(--sheet-body-pad);

		.group {
			display: flex;
			flex-direction: column;
			gap: var(--space-8);
			margin-top: var(--space-12);
		}

		.group-intro,
		.group-title,
		.group-footnote {
			margin: 0;
			padding: 0 var(--portfolio-pad);
		}

		.group-intro {
			color: var(--portfolio-ink);
			font-size: var(--portfolio-text-body);
			line-height: 1.35;
		}

		.group-intro + .group-title {
			margin-top: var(--space-12);
		}

		.group-title,
		.group-footnote {
			color: var(--portfolio-ink-muted);
			font-weight: var(--portfolio-weight-medium);
		}

		.group-title {
			font-size: var(--portfolio-text-subhead);
		}

		.group-footnote {
			font-size: var(--portfolio-text-caption);
			line-height: 1.35;
		}

		.group-card {
			overflow: hidden;
			border: var(--portfolio-flat-border-width) solid
				var(--portfolio-form-border);
			border-radius: var(--portfolio-radius);
			background: var(--portfolio-form-fill);
			box-shadow: none;
			backdrop-filter: var(--portfolio-flat-filter);
		}

		.loading-row {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: var(--portfolio-tile);
			min-height: var(--space-52);
			padding: var(--space-12) var(--portfolio-pad);
			color: var(--portfolio-ink-muted);
		}

		.segmented + .label-slider-block {
			border-top: var(--portfolio-flat-border-width) solid
				var(--portfolio-form-border);
		}

		.segmented {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: var(--space-2);
			min-height: var(--space-32);
			margin: var(--space-8) var(--portfolio-pad);
			padding: var(--space-2);
			border: 0;
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-segment-track);

			button {
				min-height: var(--space-28);
				padding: var(--space-3) var(--space-10);
				border: 0;
				border-radius: var(--portfolio-radius-full);
				background: transparent;
				color: var(--portfolio-ink);
				font-size: var(--portfolio-text-subhead);
				font-weight: var(--portfolio-weight-medium);
				line-height: 1.2;
				cursor: pointer;

				&.is-active {
					background: var(--portfolio-segment-active);
					box-shadow: var(--portfolio-segment-shadow);
					font-weight: var(--portfolio-weight-semibold);
				}
			}
		}

		.label-slider-block {
			padding: var(--space-10) var(--portfolio-pad) var(--space-8);

			&.has-slider + .label-slider-block {
				border-top: var(--portfolio-flat-border-width) solid
					var(--portfolio-form-border);
			}

			&:not(:first-of-type) {
				border-top: var(--portfolio-flat-border-width) solid
					var(--portfolio-form-border);
			}
		}

		.label-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-12);
			min-height: var(--space-34);

			.label {
				color: var(--portfolio-ink);
				font-size: var(--portfolio-text-body);
			}
		}

		.value-field {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: var(--space-6);
			min-width: 0;

			input {
				width: var(--measure-6-5);
				min-height: var(--space-28);
				padding: 0;
				border: 0;
				background: transparent;
				color: var(--portfolio-ink);
				font-size: var(--portfolio-text-body);
				font-variant-numeric: tabular-nums;
				text-align: end;

				&:focus-visible {
					outline: none;
				}
			}

			.suffix {
				color: var(--portfolio-ink-muted);
				font-size: var(--portfolio-text-body);
				white-space: nowrap;
			}

			.spinner {
				width: var(--space-20);
				height: var(--space-20);
			}
		}

		.block-divider {
			height: var(--portfolio-flat-border-width);
			margin: var(--space-8) 0 var(--space-6);
			background: var(--portfolio-form-border);
		}

		.metrics-card {
			padding: 0;
		}

		.metrics {
			display: flex;
			flex-direction: column;
			gap: 0;
			margin: 0;
		}

		.metric {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-12);
			min-height: var(--portfolio-touch);
			padding: 0 var(--portfolio-pad);
			border-top: var(--portfolio-flat-border-width) solid
				var(--portfolio-form-border);

			&:first-child {
				border-top: 0;
			}

			dt {
				margin: 0;
				color: var(--portfolio-ink-muted);
				font-size: var(--portfolio-text-body);
				font-weight: var(--portfolio-weight-regular);
			}

			dd {
				margin: 0;
				color: var(--portfolio-ink);
				font-size: var(--portfolio-text-body);
				font-variant-numeric: tabular-nums;
				text-align: end;
			}
		}

		.confirm-button {
			display: block;
			width: 100%;
			min-height: var(--portfolio-touch);
			padding: var(--space-rem-sm) var(--text-body);
			border: 0;
			background: transparent;
			color: var(--portfolio-system);
			font-size: var(--portfolio-text-headline);
			font-weight: var(--portfolio-weight-semibold);
			text-align: center;
			cursor: pointer;

			&:disabled {
				color: var(--portfolio-ink-muted);
				cursor: not-allowed;
			}

			&.is-danger {
				color: var(--portfolio-loss);
			}
		}

		.form-row-button {
			display: flex;
			align-items: center;
			width: 100%;
			min-height: var(--portfolio-touch);
			padding: var(--portfolio-tile) var(--portfolio-pad);
			border: 0;
			border-top: var(--portfolio-flat-border-width) solid
				var(--portfolio-form-border);
			background: transparent;
			color: var(--portfolio-ink);
			font-size: var(--portfolio-text-body);
			font-weight: var(--portfolio-weight-medium);
			line-height: 1.2;
			text-align: start;
			cursor: pointer;

			&:first-child {
				border-top: 0;
			}

			&.is-danger {
				color: var(--portfolio-loss);
			}
		}

		.text-row {
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-height: var(--portfolio-touch);
			padding: var(--portfolio-tile) var(--portfolio-pad);

			input,
			select,
			textarea {
				width: 100%;
				min-height: 0;
				padding: 0;
				border: 0;
				background: transparent;
				color: var(--portfolio-ink);
				font-size: var(--portfolio-text-body);
				line-height: 1.2;
				appearance: none;

				&:focus-visible {
					outline: none;
				}
			}

			textarea {
				min-height: var(--space-120);
				resize: vertical;
			}

			p {
				margin: 0;
				font-size: var(--portfolio-text-body);
				line-height: 1.35;
			}

			.hint {
				color: var(--portfolio-ink-muted);
				font-size: var(--portfolio-text-caption);
			}

			.count {
				margin-top: var(--space-6);
				color: var(--portfolio-ink-muted);
				font-size: var(--portfolio-text-caption);
				text-align: end;
			}
		}

		.field-hint {
			margin: var(--space-12) 0 0;
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-caption);
			line-height: 1.35;

			&.inset {
				padding: 0 var(--portfolio-pad) var(--space-12);
			}
		}

		.stepper-block {
			padding: var(--space-10) var(--portfolio-pad) var(--space-12);
			border-top: var(--portfolio-flat-border-width) solid
				var(--portfolio-form-border);

			&:first-child {
				border-top: 0;
			}
		}

		.stepper-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-12);
			min-height: var(--portfolio-touch);

			.label {
				min-width: 0;
				color: var(--portfolio-ink);
				font-size: var(--portfolio-text-body);
			}
		}

		.compact-stepper {
			display: flex;
			flex: 0 0 auto;
			align-items: center;
			overflow: hidden;
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-segment-track);

			.value {
				min-width: var(--measure-6);
				padding: 0 var(--space-8);
				color: var(--portfolio-ink);
				font-size: var(--portfolio-text-body);
				font-weight: var(--portfolio-weight-semibold);
				font-variant-numeric: tabular-nums;
				text-align: center;
			}

			button {
				display: grid;
				width: var(--space-36);
				height: var(--space-32);
				flex: 0 0 auto;
				place-items: center;
				padding: 0;
				border: 0;
				background: transparent;
				color: var(--portfolio-ink);
				cursor: pointer;

				&:last-child {
					border-left: var(--portfolio-flat-border-width) solid
						var(--portfolio-form-border);
				}

				svg {
					display: block;
					width: var(--space-13);
					height: var(--space-13);
				}

				&:disabled {
					cursor: not-allowed;
					opacity: 0.35;
				}
			}
		}

		.picker-block {
			padding: 0 var(--portfolio-pad);

			&.has-hint {
				padding: var(--space-10) var(--portfolio-pad) var(--space-12);
			}
		}

		.group-card > .picker-block {
			min-height: var(--portfolio-touch);
		}

		.group-card > .picker-block + .picker-block,
		.group-card > .picker-block + .text-row,
		.group-card > .text-row + .picker-block,
		.group-card > .text-row + .text-row {
			border-top: var(--portfolio-flat-border-width) solid
				var(--portfolio-form-border);
		}

		.picker-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-12);
			width: 100%;
			min-height: var(--portfolio-touch);
			padding: 0;
			border: 0;
			background: transparent;
			cursor: pointer;

			.label {
				color: var(--portfolio-ink);
				font-size: var(--portfolio-text-body);
			}

			.value {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				gap: var(--space-6);
				min-width: 0;
				color: var(--portfolio-ink-muted);
				font-size: var(--portfolio-text-body);
				text-align: end;

				span {
					min-width: 0;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				svg {
					display: block;
					width: var(--space-8);
					height: var(--space-12);
					flex: 0 0 auto;
					opacity: 0.45;
				}
			}
		}

		.advanced-toggle {
			justify-content: space-between;
			gap: var(--space-8);
		}

		.days-value {
			color: var(--portfolio-ink-muted);
			font-size: var(--portfolio-text-body);
			font-weight: var(--portfolio-weight-semibold);
			font-variant-numeric: tabular-nums;
		}

		.switch-row {
			padding: 0 var(--portfolio-pad);
			border-top: var(--portfolio-flat-border-width) solid
				var(--portfolio-form-border);
			margin-bottom: calc(-1 * var(--space-8));

			&:first-child {
				border-top: 0;
			}

			label {
				display: flex;
				gap: var(--space-12);
				align-items: center;
				justify-content: space-between;
				min-height: var(--portfolio-touch);
				padding: var(--portfolio-pair-pad-y) 0;
			}

			.copy {
				display: flex;
				flex: 1 1 auto;
				flex-direction: column;
				gap: var(--space-2);
				min-width: 0;
			}

			.label {
				font-weight: var(--portfolio-weight-medium);
			}

			.hint {
				color: var(--portfolio-ink-muted);
				font-size: var(--portfolio-text-caption);
			}
		}

		.avatar-row {
			display: flex;
			align-items: center;
			gap: var(--space-12);
			padding: var(--space-12) var(--portfolio-pad);

			.switch-row {
				flex: 1 1 auto;
				min-width: 0;
				padding: 0;
			}
		}

		.avatar-picker {
			position: relative;
			width: var(--space-72);
			height: var(--space-72);
			flex: 0 0 auto;
		}

		.avatar-face {
			display: grid;
			place-items: center;
			width: var(--space-72);
			height: var(--space-72);
			overflow: hidden;
			padding: 0;
			border: 0;
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-demo-soft);
			color: var(--portfolio-ink-muted);
			font-size: var(--text-face);
			font-weight: var(--portfolio-weight-semibold);
			cursor: pointer;

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.avatar-remove {
			position: absolute;
			right: calc(-1 * var(--space-6));
			bottom: calc(-1 * var(--space-6));
			display: grid;
			place-items: center;
			width: var(--space-28);
			height: var(--space-28);
			padding: 0;
			border: 0;
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-loss);
			color: var(--on-accent);
			cursor: pointer;

			svg {
				width: var(--space-12);
				height: var(--space-12);
			}
		}

		.notice {
			display: flex;
			align-items: flex-start;
			gap: var(--space-8);
			margin: 0;
			padding: var(--space-12) var(--portfolio-pad);
			font-size: var(--portfolio-text-subhead);
			line-height: 1.35;

			svg {
				flex: 0 0 auto;
				width: var(--space-13);
				height: var(--space-13);
				margin-top: var(--space-1);
			}

			span {
				min-width: 0;
				flex: 1;
			}

			&.is-warning {
				color: var(--portfolio-paused);
			}

			&.is-info {
				color: var(--portfolio-ink-muted);
			}

			&.is-submitted {
				display: block;
				color: var(--portfolio-paused);
				text-align: center;
			}
		}

		.ask-intelligence {
			display: flex;
			align-items: flex-start;
			gap: var(--space-6);
			width: 100%;
			min-width: 0;
			padding: 0;
			border: 0;
			background: transparent;
			color: var(--portfolio-ink);
			font-size: var(--portfolio-text-footnote);
			font-weight: var(--portfolio-weight-bold);
			line-height: 1.385;
			text-align: start;
			cursor: pointer;

			svg {
				flex: 0 0 auto;
				width: var(--space-13);
				height: var(--space-13);
				margin-top: var(--space-2);
			}

			span {
				min-width: 0;
				flex: 1;
			}
		}
	}
}

@media (max-width: 320px) {
	.portfolio {
		.grouped-form {
			padding-inline: var(--space-12);
		}
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio {
		.grouped-form .group-card {
			backdrop-filter: none;
			background: var(--portfolio-flat-fill-opaque);
		}
	}
}


/* ./components/deploy-budget-sheet.css */
/* Root class matches filename: deploy-budget-sheet.css → .deploy-budget-sheet */

.portfolio {
	.deploy-budget-sheet {
		position: relative;
		display: flex;
		flex-direction: column;
		min-height: 0;

		.fit-row {
			display: flex;
			align-items: flex-start;
			gap: var(--space-12);
			padding: var(--portfolio-pad);

			> svg {
				flex: 0 0 auto;
				width: var(--space-26);
				height: var(--space-26);
				color: var(--portfolio-system);
			}

			> svg path:first-child {
				fill: var(--portfolio-system);
				fill-opacity: 1;
			}

			> svg path:nth-child(2) {
				fill: var(--on-accent);
				fill-opacity: 1;
			}

			.copy {
				display: flex;
				flex: 1 1 auto;
				flex-direction: column;
				gap: var(--space-8);
				min-width: 0;
			}

			.head {
				display: flex;
				flex-direction: column;
				gap: var(--space-2);
			}

			.title {
				margin: 0;
				color: var(--portfolio-ink);
				font-size: var(--portfolio-text-subhead);
				font-weight: var(--portfolio-weight-semibold);
				line-height: 1.25;
			}

			.hint {
				margin: 0;
				color: var(--portfolio-ink-muted);
				font-size: var(--portfolio-text-caption);
				line-height: 1.35;
			}
		}

		.fit-action {
			display: inline-flex;
			align-items: center;
			align-self: flex-start;
			gap: var(--space-6);
			min-height: var(--space-28);
			padding: 0 var(--space-12);
			border: 0;
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-segment-track);
			color: var(--portfolio-system);
			font-size: var(--portfolio-text-caption);
			font-weight: var(--portfolio-weight-semibold);
			line-height: 1;
			cursor: pointer;

			&.is-apply {
				background: var(--portfolio-profit-action);
				color: var(--on-accent);
			}

			&:disabled {
				cursor: not-allowed;
				opacity: 0.38;
			}

			.spinner {
				width: var(--space-12);
				height: var(--space-12);
			}
		}

		.context-stats {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: var(--space-16);
			padding: var(--portfolio-pair-pad-y) var(--portfolio-pad);
		}

		.stat {
			display: flex;
			flex-direction: column;
			gap: var(--space-2);
			min-width: 0;

			.label {
				margin: 0;
				color: var(--portfolio-ink-muted);
				font-size: var(--portfolio-text-micro);
				font-weight: var(--portfolio-weight-medium);
				letter-spacing: 0.04em;
				text-transform: uppercase;
			}

			.value {
				margin: 0;
				color: var(--portfolio-ink);
				font-size: var(--portfolio-text-body);
				font-weight: var(--portfolio-weight-semibold);
				font-variant-numeric: tabular-nums;
			}
		}

		.progress-block {
			display: flex;
			flex-direction: column;
			gap: var(--space-8);
			padding: var(--portfolio-pair-pad-y) var(--portfolio-pad);
		}

		.progress-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-8);
			color: var(--portfolio-ink);
			font-size: var(--portfolio-text-subhead);

			.totals {
				color: var(--portfolio-ink-muted);
				font-variant-numeric: tabular-nums;
			}
		}

		.progress {
			height: var(--portfolio-capital-tile-progress);
			overflow: hidden;
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-fill-soft);

			.fill {
				display: block;
				height: 100%;
				border-radius: inherit;
				background: linear-gradient(
					90deg,
					color-mix(in srgb, var(--portfolio-profit) 85%, transparent),
					color-mix(in srgb, var(--portfolio-profit) 55%, transparent)
				);
			}
		}

		.budget-field {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: var(--space-6);

			.prefix {
				color: var(--portfolio-ink-muted);
				font-size: var(--portfolio-text-body);
			}

			input {
				flex: 1 1 auto;
				font-variant-numeric: tabular-nums;
			}
		}

		.grouped-form .block-divider {
			margin: 0 0 0 var(--portfolio-pad);
		}

		.grouped-form .label-slider-block:not(:first-of-type),
		.grouped-form .label-slider-block.has-slider {
			padding: var(--portfolio-pair-pad-y) var(--portfolio-pad);
			border-top: 0;
		}

		.grouped-form .notice {
			padding: var(--portfolio-pair-pad-y) var(--portfolio-pad);
			font-size: var(--portfolio-text-footnote);
			line-height: 1.385;
		}
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio .deploy-budget-sheet .fit-action.is-apply {
		background: var(--portfolio-profit-action);
	}
}


/* ./components/sheet-footer.css */
/* Root class matches filename: sheet-footer.css → .sheet-footer */

.portfolio {
	.sheet-footer {
		display: flex;
		flex-direction: column;
		gap: var(--space-8);
		padding: var(--space-10) var(--portfolio-pad) 0;

		.notice,
		.ask-intelligence {
			display: flex;
			align-items: flex-start;
			gap: var(--space-6);
			margin: 0;
			padding: 0;
			font-size: var(--portfolio-text-footnote);
			line-height: 1.385;

			svg {
				flex: 0 0 auto;
				width: var(--space-13);
				height: var(--space-13);
				margin-top: var(--space-2);
			}

			span {
				min-width: 0;
				flex: 1;
			}
		}

		.notice.is-warning {
			color: var(--portfolio-paused);
		}

		.notice.is-info {
			color: var(--portfolio-ink-muted);
		}

		.notice.is-submitted {
			display: block;
			color: var(--portfolio-paused);
			text-align: center;
		}
	}
}


/* ./components/switch.css */
/* Root class matches filename: switch.css → .switch
 * iOS UISwitch — 51×31 track, 27pt white knob, systemGreen when on. */

.portfolio {
	.switch-row input[type='checkbox'],
	.toggle input[type='checkbox'],
	input[role='switch'] {
		appearance: none;
		-webkit-appearance: none;
		position: relative;
		display: inline-block;
		width: var(--switch-track-w);
		height: var(--switch-track-h);
		flex: 0 0 var(--switch-track-w);
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: var(--portfolio-radius-full);
		background: var(--slider-track);
		cursor: pointer;
		transition: background var(--duration-base) ease;

		&::before {
			content: '';
			position: absolute;
			top: var(--switch-inset);
			left: var(--switch-inset);
			width: var(--switch-knob);
			height: var(--switch-knob);
			border-radius: var(--portfolio-radius-circle);
			background: var(--color-white);
			box-shadow:
				0 var(--space-3) var(--space-8) var(--black-15),
				0 var(--space-1) var(--space-1) var(--black-16);
			transition: transform var(--duration-base) ease;
		}

		&:checked {
			background: var(--portfolio-system-green);
		}

		&:checked::before {
			transform: translateX(var(--switch-travel));
		}

		&:disabled {
			cursor: not-allowed;
			opacity: 0.38;
		}

		&:focus-visible {
			outline: var(--space-2) solid var(--portfolio-ink);
			outline-offset: var(--space-2);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio {
		.switch-row input[type='checkbox'],
		.toggle input[type='checkbox'],
		input[role='switch'] {
			transition: none;

			&::before {
				transition: none;
			}
		}
	}
}


/* ./components/inline-notice.css */
/* Root class matches filename: inline-notice.css → .inline-notice */

.portfolio {
	.inline-notice {
		display: flex;
		align-items: flex-start;
		gap: var(--space-8);
		margin: 0;
		padding: var(--space-12) var(--space-16);
		border-radius: var(--portfolio-radius);
		background: var(--portfolio-paused-soft);
		color: var(--portfolio-paused);
		font-size: var(--portfolio-text-caption);
		font-weight: var(--portfolio-weight-medium);
		line-height: 1.35;

		svg {
			flex: 0 0 auto;
			width: var(--space-13);
			height: var(--space-13);
			margin-top: var(--space-2);
		}

		span {
			min-width: 0;
			flex: 1;
		}
	}
}


/* ./components/empty-hint.css */
/* Root class matches filename: empty-hint.css → .empty-hint */

.portfolio {
	.empty-hint {
		margin: 0;
		padding: var(--space-10) var(--space-16) 0;
		color: var(--portfolio-ink-muted);
		font-size: var(--portfolio-text-subhead);
		font-weight: var(--weight-regular);
		line-height: 1.35;
	}
}


/* ./components/action-toast.css */
/* Root class matches filename: action-toast.css → .action-toast */

.portfolio {
	.action-toast-host {
		position: fixed;
		top: calc(env(safe-area-inset-top, var(--space-0)) + var(--space-12));
		right: 0;
		left: 0;
		z-index: var(--portfolio-z-toast);
		display: flex;
		justify-content: center;
		pointer-events: none;
	}

	.action-toast {
		position: relative;
		z-index: var(--portfolio-z-toast);
		width: calc(100% - var(--space-32));
		max-width: var(--measure-36);
		margin: var(--space-12) var(--space-16) 0;
		padding: var(--space-12) var(--space-16);
		border: var(--portfolio-flat-border-width) solid
			var(--portfolio-glass-border);
		border-radius: var(--portfolio-radius-compact);
		background: var(--portfolio-glass-bg);
		box-shadow: var(--portfolio-glass-shadow);
		backdrop-filter: var(--portfolio-glass-filter);
		-webkit-backdrop-filter: var(--portfolio-glass-filter);
		color: var(--portfolio-ink);
		font-size: var(--portfolio-text-subhead);
		font-weight: var(--portfolio-weight-medium);
		line-height: 1.35;
		text-align: center;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio {
		.action-toast {
			background: var(--portfolio-glass-opaque);
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
		}
	}
}


/* ./components/recent-signals.css */
/* Root class matches filename: recent-signals.css → .recent-signals */

.portfolio {
	.recent-signals {
		.sr {
			position: absolute;
			width: var(--space-1);
			height: var(--space-1);
			overflow: hidden;
			clip: rect(0 0 0 0);
			clip-path: inset(50%);
			white-space: nowrap;
		}

		.toggle {
			display: flex;
			gap: var(--space-8);
			align-items: center;
			width: 100%;
			min-height: var(--portfolio-capital-tile-title);
			margin: 0;
			padding: 0;
			border: 0;
			background: transparent;
			text-align: start;
			cursor: pointer;
		}

		.title {
			margin: 0;
			color: var(--portfolio-ink-muted);
			font-size: var(--text-micro);
			font-weight: var(--portfolio-weight-medium);
			letter-spacing: 0.04em;
			text-transform: uppercase;
		}

		.chevron-disclosure.chevron {
			margin-left: auto;
		}

		.list {
			display: flex;
			flex-direction: column;
			gap: 0;
			margin: var(--space-10) 0;
			padding: 0;
			list-style: none;
		}

		.list > li {
			position: relative;
			padding-block: var(--portfolio-pair-pad-y);

			&::before {
				content: '';
				position: absolute;
				top: 0;
				right: calc(-1 * var(--portfolio-module-pad));
				left: calc(
					var(--portfolio-pair-divider-inset) - var(--portfolio-module-pad)
				);
				height: var(--space-1);
				background: var(--gray-18);
				opacity: 0.35;
				pointer-events: none;
			}
		}

		.row {
			display: grid;
			grid-template-columns:
				auto minmax(var(--space-rem-3-25), auto) minmax(0, 1fr)
				auto;
			gap: var(--space-10);
			align-items: start;
			width: 100%;
		}

		.identity {
			display: flex;
			flex-direction: column;
			gap: var(--space-4);
			min-width: 0;
			min-height: var(--space-24);
			margin: 0;
			padding: 0;
			border: 0;
			background: transparent;
			text-align: start;
			cursor: pointer;
		}

		.symbol {
			font-size: var(--text-lead);
			font-weight: var(--portfolio-weight-semibold);
			line-height: 1.2;
		}

		.event {
			font-size: var(--text-caption);
			line-height: 1.2;

			&.is-profit {
				color: var(--portfolio-profit);
			}

			&.is-loss {
				color: var(--portfolio-loss);
			}

			&.is-neutral {
				color: var(--portfolio-ink-muted);
			}
		}

		.chips {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-6);
			align-items: center;
			min-width: 0;
		}

		.signal-chip .label {
			min-width: 0;
		}

		.age {
			color: var(--portfolio-ink-muted);
			font-size: var(--text-caption);
			line-height: 1.2;
			text-align: end;
			white-space: nowrap;
		}
	}
}

@media (max-width: 320px) {
	.portfolio {
		.recent-signals {
			.row {
				grid-template-columns: auto minmax(0, 1fr) auto;
				grid-template-areas:
					'badge identity age'
					'badge chips chips';
			}

			.pair-asset-badge {
				grid-area: badge;
			}

			.identity {
				grid-area: identity;
			}

			.chips {
				grid-area: chips;
			}

			.age {
				grid-area: age;
			}
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .recent-signals,
	.portfolio .recent-signals * {
		transition: none;
		animation: none;
	}
}


/* ./components/pwa-update-pill.css */
/* Root class matches filename: pwa-update-pill.css → .pwa-update-pill */

.portfolio {
	.pwa-update-pill {
		.toggle {
			display: flex;
			gap: var(--space-8);
			align-items: center;
			width: 100%;
			min-height: var(--portfolio-capital-tile-title);
			margin: 0;
			padding: 0;
			border: 0;
			background: transparent;
			text-align: start;
			cursor: pointer;
		}

		.toggle:disabled {
			cursor: wait;
		}

		.title {
			margin: 0;
			color: var(--portfolio-ink-muted);
			font-size: var(--text-micro);
			font-weight: var(--portfolio-weight-medium);
			letter-spacing: 0.04em;
			text-transform: uppercase;
		}

		.download {
			flex: 0 0 auto;
			width: var(--space-16);
			height: var(--space-16);
			margin-left: auto;
			color: var(--portfolio-ink-muted);
			opacity: 0.72;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .pwa-update-pill,
	.portfolio .pwa-update-pill * {
		transition: none;
		animation: none;
	}
}


/* ./components/dashboard-error-pill.css */
/* Root class matches filename: dashboard-error-pill.css → .dashboard-error-pill
 * Same Glass header row as Recent Signals / PwaUpdatePill. */

.portfolio {
	.dashboard-error-pill {
		.item {
			display: flex;
			gap: var(--space-8);
			align-items: center;
			width: 100%;
			min-height: var(--portfolio-capital-tile-title);
			margin: 0;
			padding: 0;
			border: 0;
			background: transparent;
			text-align: start;
		}

		.mark {
			display: block;
			flex: 0 0 auto;
			width: var(--space-16);
			height: var(--space-16);
			color: var(--portfolio-loss);
		}

		.title {
			flex: 1 1 auto;
			min-width: 0;
			margin: 0;
			color: var(--portfolio-loss);
			font-size: var(--text-micro);
			font-weight: var(--portfolio-weight-medium);
			letter-spacing: 0.04em;
			text-transform: uppercase;
		}
	}
}


/* ./components/signal-detail-sheet.css */
/* Root class matches filename: signal-detail-sheet.css → .signal-detail-sheet */

.portfolio {
	.signal-detail-sheet {
		display: flex;
		flex-direction: column;
		min-height: 0;
		flex: 1;

		.body {
			display: flex;
			flex: 1;
			flex-direction: column;
			gap: var(--space-18);
			align-items: center;
			justify-content: center;
			min-height: var(--measure-12);
			padding: 0 var(--portfolio-sheet-header-pad-x) var(--space-rem-1-25);
			text-align: center;
		}

		.icon {
			display: grid;
			width: var(--space-56);
			height: var(--space-56);
			place-items: center;
			border-radius: var(--portfolio-radius-full);
			color: var(--chip);

			svg {
				display: block;
				width: var(--space-56);
				height: var(--space-56);
			}
		}

		.explanation {
			margin: 0;
			max-width: var(--measure-28);
			font-size: var(--text-body);
			line-height: 1.45;
		}

		.actions {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-10);
			justify-content: center;
			padding: 0 var(--space-20) var(--sheet-body-pad);
		}

		.action {
			display: inline-flex;
			gap: var(--space-6);
			align-items: center;
			justify-content: center;
			min-height: var(--portfolio-touch);
			padding: var(--space-10) var(--space-14);
			border-radius: var(--portfolio-radius-full);
			font-size: var(--text-label);
			font-weight: var(--portfolio-weight-semibold);
			cursor: pointer;

			svg {
				display: block;
				width: 1em;
				height: 1em;
			}

			&.is-neutral {
				border: var(--space-1) solid var(--black-12);
				background: var(--black-07);
				color: var(--portfolio-ink);
			}

			&.is-accent {
				border: var(--space-1) solid
					color-mix(in srgb, var(--chip) 38%, transparent);
				background: color-mix(in srgb, var(--chip) 14%, transparent);
				color: var(--chip);
			}
		}
	}
}

@media (max-width: 320px) {
	.portfolio {
		.signal-detail-sheet {
			.body,
			.actions {
				padding-inline: var(--space-rem-0-85);
			}
		}
	}
}

@media (prefers-color-scheme: dark) {
	.portfolio {
		.signal-detail-sheet {
			.action.is-neutral {
				border-color: var(--white-08);
				background: var(--white-06);
			}

			.action.is-accent {
				border-color: color-mix(in srgb, var(--chip) 26%, transparent);
				background: color-mix(in srgb, var(--chip) 12%, transparent);
			}
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .signal-detail-sheet,
	.portfolio .signal-detail-sheet * {
		transition: none;
		animation: none;
	}
}


/* ./components/host-action-menu.css */
/* Root class matches filename: host-action-menu.css → .host-action-menu */

.portfolio {
	.host-action-menu {
		button.is-danger .icon {
			color: var(--portfolio-loss);
		}
	}
}


/* ./components/add-sandbox-sheet.css */
/* Root class matches filename: add-sandbox-sheet.css → .add-sandbox-sheet */

.portfolio {
	.add-sandbox-sheet {
		position: relative;
		display: flex;
		flex-direction: column;
		min-height: 0;

		.body {
			position: relative;
			display: flex;
			flex-direction: column;
			min-height: 0;
		}

		.body.is-progressing .grouped-form {
			filter: var(--portfolio-progress-blur);
			opacity: 0.42;
			pointer-events: none;
		}

		.retry {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: var(--portfolio-sheet-chrome-cta);
			min-height: var(--portfolio-sheet-chrome-cta);
			padding: 0 var(--portfolio-sheet-header-pad-x);
			border: var(--portfolio-border-width) solid var(--portfolio-glass-border);
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-glass-bg);
			color: var(--portfolio-profit);
			font-size: var(--portfolio-text-body);
			font-weight: var(--portfolio-weight-semibold);
			line-height: 1;
			cursor: pointer;
			backdrop-filter: var(--portfolio-glass-filter);
			-webkit-backdrop-filter: var(--portfolio-glass-filter);

			&:active {
				transform: scale(0.96);
			}
		}

		.progress {
			position: absolute;
			inset: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: var(--space-10);
			min-height: var(--measure-12);
			padding: var(--space-20);
			text-align: center;
		}

		.progress p,
		.detail,
		.error {
			margin: 0;
		}

		.detail {
			color: var(--portfolio-ink-muted);
			font-size: var(--text-subhead);
		}

		.error {
			color: var(--portfolio-paused);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio .add-sandbox-sheet,
	.portfolio .add-sandbox-sheet * {
		transition: none;
		animation: none;
	}

	.portfolio .add-sandbox-sheet .body.is-progressing .grouped-form {
		filter: none;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio .add-sandbox-sheet .retry {
		background: var(--portfolio-glass-opaque);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.portfolio .add-sandbox-sheet .body.is-progressing .grouped-form {
		filter: none;
	}
}


/* ./components/bottom-selection-bar.css */
/* Root class matches filename: bottom-selection-bar.css → .bottom-selection-bar */

.portfolio {
	.bottom-selection-bar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: var(--portfolio-z-sheet);
		display: flex;
		justify-content: center;
		padding-top: var(--portfolio-nav-breathing);
		padding-bottom: var(--portfolio-nav-pad-bottom);
		pointer-events: none;

		.pill {
			display: flex;
			align-items: stretch;
			width: var(--portfolio-nav-pill);
			height: var(--portfolio-nav-bar);
			overflow: hidden;
			pointer-events: auto;
			border: var(--portfolio-border-width) solid var(--portfolio-glass-border);
			border-radius: var(--portfolio-radius-full);
			background: var(--portfolio-glass-bg);
			box-shadow: var(--portfolio-glass-shadow);
			backdrop-filter: var(--portfolio-glass-filter);
			-webkit-backdrop-filter: var(--portfolio-glass-filter);
		}

		.item {
			display: grid;
			flex: 0 0 var(--portfolio-nav-segment);
			place-items: center;
			min-width: var(--portfolio-nav-segment);
			min-height: var(--portfolio-nav-bar);
			padding: 0;
			border: 0;
			background: transparent;
			color: var(--portfolio-nav-icon);
			cursor: pointer;

			&:first-child,
			&:last-child {
				flex-basis: calc(
					var(--portfolio-nav-segment) + var(--portfolio-nav-pad-x)
				);
			}

			&:active:not(:disabled) {
				transform: scale(0.9);
			}

			&:disabled,
			&.is-disabled {
				cursor: not-allowed;
				opacity: 0.38;
			}
		}

		.icon {
			display: grid;
			width: var(--portfolio-nav-item);
			height: var(--portfolio-nav-item);
			place-items: center;

			svg {
				display: block;
				width: 100%;
				height: 100%;
			}

			&.is-inset {
				padding: var(--space-4);
			}
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio {
		.bottom-selection-bar .item:active:not(:disabled) {
			transform: none;
		}
	}
}

@media (prefers-color-scheme: dark) {
	.portfolio {
		.bottom-selection-bar {
			.pill {
				background:
					linear-gradient(
						var(--portfolio-glass-tint),
						var(--portfolio-glass-tint)
					),
					var(--portfolio-glass-bg);
			}
		}
	}
}

@media (prefers-reduced-transparency: reduce) {
	.portfolio {
		.bottom-selection-bar {
			.pill {
				background: var(--portfolio-glass-opaque);
				backdrop-filter: none;
				-webkit-backdrop-filter: none;
			}
		}
	}
}






/* Bud Glass after the old theme: it applies only under a [data-glass] root. */
/* ../ui/theme/index.css */
/*
 * Bud Glass. Tokens first (the only file with raw values), then base, then one
 * file per component group.
 *
 * Glass is on only in a document with a [data-glass] element (glassMarker in
 * src/web/src/ds/tokens.ts): the marketing layout and the catalog, never
 * /portfolio. Tokens are declared on :root:has([data-glass]). Every other rule
 * nests under :where(:root:has([data-glass])), which adds no specificity, so
 * each selector weighs what it does alone and still reaches portals in <body>.
 */
/* ./tokens.css */
/* generated by just ds gen — edit src/web/src/ds/tokens.ts */

:root:has([data-glass]) {
	--font-ui: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--text-display-size: 48px;
	--text-display-leading: 56px;
	--text-display-weight: 600;
	--text-display-tracking: -0.02em;
	--text-display-small-size: 34px;
	--text-display-small-leading: 41px;
	--text-display-small-weight: 600;
	--text-display-small-tracking: -0.015em;
	--text-title-size: 22px;
	--text-title-leading: 28px;
	--text-title-weight: 400;
	--text-title3-size: 15px;
	--text-title3-leading: 20px;
	--text-title3-weight: 600;
	--text-headline-size: 13px;
	--text-headline-leading: 16px;
	--text-headline-weight: 600;
	--text-body-size: 13px;
	--text-body-leading: 16px;
	--text-body-weight: 400;
	--text-subheadline-size: 11px;
	--text-subheadline-leading: 14px;
	--text-subheadline-weight: 400;
	--text-page-title-size: 28px;
	--text-page-title-leading: 34px;
	--text-page-title-weight: 600;
	--text-page-title-tracking: -0.02em;
	--text-lede-size: 14px;
	--text-lede-leading: 21px;
	--text-lede-weight: 400;
	--text-copy-size: 13px;
	--text-copy-leading: 20px;
	--text-copy-weight: 400;
	--text-caption-size: 10px;
	--text-caption-leading: 13px;
	--text-caption-weight: 500;
	--text-hero-size: 80px;
	--text-hero-leading: 84px;
	--text-hero-weight: 600;
	--text-hero-tracking: -0.035em;
	--text-hero-medium-size: 60px;
	--text-hero-medium-leading: 64px;
	--text-hero-medium-weight: 600;
	--text-hero-medium-tracking: -0.03em;
	--text-hero-compact-size: 40px;
	--text-hero-compact-leading: 44px;
	--text-hero-compact-weight: 600;
	--text-hero-compact-tracking: -0.025em;
	--text-feature-size: 21px;
	--text-feature-leading: 30px;
	--text-feature-weight: 400;
	--text-feature-compact-size: 17px;
	--text-feature-compact-leading: 25px;
	--text-feature-compact-weight: 400;
	--space-1: 4px;
	--space-1-5: 6px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-24: 96px;
	--space-32: 128px;
	--size-control-sm: 22px;
	--size-control: 28px;
	--size-control-lg: 32px;
	--size-row: 30px;
	--size-row-lg: 36px;
	--size-icon-sm: 12px;
	--size-icon: 16px;
	--size-icon-lg: 20px;
	--size-sidebar: 220px;
	--size-inspector: 260px;
	--size-popover: 340px;
	--size-window: 900px;
	--size-border: 1px;
	--size-focus-ring: 3px;
	--size-dot: 8px;
	--size-page: 1080px;
	--size-prose: 680px;
	--size-column: 680px;
	--size-tile: 26px;
	--size-table-label: 112px;
	--size-card-min: 196px;
	--size-footer-column: 96px;
	--size-composer: 112px;
	--size-sheet: 400px;
	--size-header: 52px;
	--size-logo: 22px;
	--size-qr: 176px;
	--size-browser-mock: 300px;
	--size-compare-axis: 120px;
	--size-device: 300px;
	--size-device-lg: 340px;
	--size-device-sm: 210px;
	--size-tile-lg: 44px;
	--size-flow-node: 300px;
	--size-chat-window: 600px;
	--size-artboard: 136px;
	--radius-xs: 4px;
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-2xl: 20px;
	--radius-full: 9999px;
	--duration-fast: 150ms;
	--duration-base: 250ms;
	--duration-slow: 500ms;
	--duration-pulse: 2800ms;
	--duration-shimmer: 1400ms;
	--duration-type: 40ms;
	--duration-diagram: 8000ms;
	--duration-drift: 26000ms;
	--duration-float: 6000ms;
	--ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
	--stage-perspective: 2400px;
	--stage-depth: 220px;
	--stage-depth-open: 90px;
	--stage-travel: 560px;
	--stage-pen: 180px;
	--stage-rise: 64px;
	--stage-lean: 16deg;
	--stage-turn: 28deg;
	--stage-turn-open: 14deg;
	--stage-side: 0.88;
	--stage-spread: 64%;
	--stage-spread-open: 92%;
	--stage-fit: 0.46;
	--stage-step: 80vh;
	--stage-backdrop: 1280px;
	--stage-glow: 760px;
	--stage-drift: 56px;
	--stage-dot: 24px;
	--stage-float: 8px;
	--stage-parallax: 96px;
	--layer-header: 10;
	--layer-popover: 20;
	--layer-sheet: 30;
	--opacity-disabled: 0.4;
	--opacity-pressed: 0.8;
	--opacity-dimmed: 0.65;
}

:root:has([data-glass]),
:root:has([data-glass])[data-theme='light'],
:root:has([data-glass]) [data-theme='light'] {
	color-scheme: light;
	--color-label: rgb(0 0 0 / 0.85);
	--color-label-secondary: rgb(0 0 0 / 0.5);
	--color-label-tertiary: rgb(0 0 0 / 0.26);
	--color-separator: rgb(0 0 0 / 0.1);
	--color-fill: rgb(0 0 0 / 0.05);
	--color-background-window: #ececec;
	--color-background-content: #ffffff;
	--color-accent: #1a8c4d;
	--color-glow: rgb(26 140 77 / 0.2);
	--color-grid-dot: rgb(0 0 0 / 0.13);
	--color-link: #1a8c4d;
	--color-on-accent: #ffffff;
	--color-status-good: #34c759;
	--color-status-warning: #ffcc00;
	--color-status-critical: #ff3b30;
	--color-focus: color-mix(in srgb, var(--color-accent) 50%, transparent);
	--syntax-keyword: #9b2393;
	--syntax-function: #326d74;
	--syntax-string: #c41a16;
	--syntax-constant: #1c00cf;
	--syntax-parameter: #0f68a0;
	--syntax-comment: #5d6c79;
	--device-band: #3a3a3c;
	--device-glass: #050505;
	--device-rim: rgb(255 255 255 / 0.22);
	--device-shadow:
		0 40px 80px -32px rgb(0 0 0 / 0.42), 0 10px 24px -12px rgb(0 0 0 / 0.24);
	--material-glass-background: color-mix(
		in srgb,
		var(--color-background-window) 55%,
		transparent
	);
	--material-glass-filter: blur(24px) saturate(180%);
	--material-glass-border: transparent;
	--material-glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.6);
	--material-glass-shadow: 0 8px 32px rgb(0 0 0 / 0.12);
	--material-glass-label: var(--color-label);
	--material-glass-prominent-background: var(--color-accent);
	--material-glass-prominent-filter: none;
	--material-glass-prominent-border: transparent;
	--material-glass-prominent-highlight: inset 0 1px 0 rgb(255 255 255 / 0.25);
	--material-glass-prominent-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
	--material-glass-prominent-label: var(--color-on-accent);
	--material-solid-background: var(--color-background-content);
	--material-solid-filter: none;
	--material-solid-border: var(--color-separator);
	--material-solid-highlight: 0 0 transparent;
	--material-solid-shadow: 0 0 transparent;
	--material-solid-label: var(--color-label);
}

:root:has([data-glass])[data-theme='dark'],
:root:has([data-glass]) [data-theme='dark'] {
	color-scheme: dark;
	--color-label: rgb(255 255 255 / 0.85);
	--color-label-secondary: rgb(255 255 255 / 0.55);
	--color-label-tertiary: rgb(255 255 255 / 0.25);
	--color-separator: rgb(255 255 255 / 0.1);
	--color-fill: rgb(255 255 255 / 0.08);
	--color-background-window: #282828;
	--color-background-content: #1e1e1e;
	--color-accent: #1b904f;
	--color-glow: rgb(43 176 103 / 0.32);
	--color-grid-dot: rgb(255 255 255 / 0.14);
	--color-link: #2bb067;
	--color-on-accent: #ffffff;
	--color-status-good: #30d158;
	--color-status-warning: #ffd60a;
	--color-status-critical: #ff453a;
	--color-focus: color-mix(in srgb, var(--color-accent) 50%, transparent);
	--syntax-keyword: #fc5fa3;
	--syntax-function: #67b7a4;
	--syntax-string: #fc6a5d;
	--syntax-constant: #d0bf69;
	--syntax-parameter: #41a1c0;
	--syntax-comment: #6c7986;
	--device-band: #4c4c50;
	--device-glass: #050505;
	--device-rim: rgb(255 255 255 / 0.3);
	--device-shadow:
		0 40px 80px -32px rgb(0 0 0 / 0.8), 0 10px 24px -12px rgb(0 0 0 / 0.6);
	--material-glass-background: color-mix(
		in srgb,
		var(--color-background-window) 55%,
		transparent
	);
	--material-glass-filter: blur(24px) saturate(180%);
	--material-glass-border: transparent;
	--material-glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.12);
	--material-glass-shadow: 0 8px 32px rgb(0 0 0 / 0.36);
	--material-glass-label: var(--color-label);
	--material-glass-prominent-background: var(--color-accent);
	--material-glass-prominent-filter: none;
	--material-glass-prominent-border: transparent;
	--material-glass-prominent-highlight: inset 0 1px 0 rgb(255 255 255 / 0.12);
	--material-glass-prominent-shadow: 0 2px 8px rgb(0 0 0 / 0.24);
	--material-glass-prominent-label: var(--color-on-accent);
	--material-solid-background: var(--color-background-content);
	--material-solid-filter: none;
	--material-solid-border: var(--color-separator);
	--material-solid-highlight: 0 0 transparent;
	--material-solid-shadow: 0 0 transparent;
	--material-solid-label: var(--color-label);
}

@media (prefers-color-scheme: dark) {
	:root:has([data-glass])[data-theme='system'],
	:root:has([data-glass]):not([data-theme]) {
		color-scheme: dark;
		--color-label: rgb(255 255 255 / 0.85);
		--color-label-secondary: rgb(255 255 255 / 0.55);
		--color-label-tertiary: rgb(255 255 255 / 0.25);
		--color-separator: rgb(255 255 255 / 0.1);
		--color-fill: rgb(255 255 255 / 0.08);
		--color-background-window: #282828;
		--color-background-content: #1e1e1e;
		--color-accent: #1b904f;
		--color-glow: rgb(43 176 103 / 0.32);
		--color-grid-dot: rgb(255 255 255 / 0.14);
		--color-link: #2bb067;
		--color-on-accent: #ffffff;
		--color-status-good: #30d158;
		--color-status-warning: #ffd60a;
		--color-status-critical: #ff453a;
		--color-focus: color-mix(in srgb, var(--color-accent) 50%, transparent);
		--syntax-keyword: #fc5fa3;
		--syntax-function: #67b7a4;
		--syntax-string: #fc6a5d;
		--syntax-constant: #d0bf69;
		--syntax-parameter: #41a1c0;
		--syntax-comment: #6c7986;
		--device-band: #4c4c50;
		--device-glass: #050505;
		--device-rim: rgb(255 255 255 / 0.3);
		--device-shadow:
			0 40px 80px -32px rgb(0 0 0 / 0.8), 0 10px 24px -12px rgb(0 0 0 / 0.6);
		--material-glass-background: color-mix(
			in srgb,
			var(--color-background-window) 55%,
			transparent
		);
		--material-glass-filter: blur(24px) saturate(180%);
		--material-glass-border: transparent;
		--material-glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.12);
		--material-glass-shadow: 0 8px 32px rgb(0 0 0 / 0.36);
		--material-glass-label: var(--color-label);
		--material-glass-prominent-background: var(--color-accent);
		--material-glass-prominent-filter: none;
		--material-glass-prominent-border: transparent;
		--material-glass-prominent-highlight: inset 0 1px 0 rgb(255 255 255 / 0.12);
		--material-glass-prominent-shadow: 0 2px 8px rgb(0 0 0 / 0.24);
		--material-glass-prominent-label: var(--color-on-accent);
		--material-solid-background: var(--color-background-content);
		--material-solid-filter: none;
		--material-solid-border: var(--color-separator);
		--material-solid-highlight: 0 0 transparent;
		--material-solid-shadow: 0 0 transparent;
		--material-solid-label: var(--color-label);
	}
}

@media (prefers-contrast: more) {
	:root:has([data-glass]),
	:root:has([data-glass])[data-theme='light'],
	:root:has([data-glass]) [data-theme='light'] {
		--color-separator: rgb(0 0 0 / 0.3);
		--color-label-secondary: rgb(0 0 0 / 0.7);
		--color-label-tertiary: rgb(0 0 0 / 0.5);
	}

	:root:has([data-glass])[data-theme='dark'],
	:root:has([data-glass]) [data-theme='dark'] {
		--color-separator: rgb(255 255 255 / 0.3);
		--color-label-secondary: rgb(255 255 255 / 0.75);
		--color-label-tertiary: rgb(255 255 255 / 0.5);
	}
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
	:root:has([data-glass])[data-theme='system'],
	:root:has([data-glass]):not([data-theme]) {
		--color-separator: rgb(255 255 255 / 0.3);
		--color-label-secondary: rgb(255 255 255 / 0.75);
		--color-label-tertiary: rgb(255 255 255 / 0.5);
	}
}

@media (prefers-reduced-transparency: reduce) {
	:root:has([data-glass]):root,
	:root:has([data-glass])[data-theme][data-theme],
	:root:has([data-glass]) [data-theme][data-theme] {
		--material-glass-background: var(--material-solid-background);
		--material-glass-filter: none;
		--material-glass-border: var(--material-solid-border);
		--material-glass-highlight: var(--material-solid-highlight);
		--material-glass-shadow: var(--material-solid-shadow);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root:has([data-glass]):root,
	:root:has([data-glass])[data-theme][data-theme],
	:root:has([data-glass]) [data-theme][data-theme] {
		--duration-fast: 0ms;
		--duration-base: 0ms;
		--duration-slow: 0ms;
	}
}


/* ./base.css */
/*
 * Element defaults and text styles. Tokens only: raw values live in tokens.css.
 * The page itself (html, body) is styled on the Glass marker; everything else
 * is in the Glass scope (index.css).
 */
:root:has([data-glass]) {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

:root:has([data-glass]),
:root:has([data-glass]) body {
	margin: 0;
	background: var(--color-background-window);
	color: var(--color-label);
	font-family: var(--font-ui);
	font-size: var(--text-body-size);
	line-height: var(--text-body-leading);
	font-weight: var(--text-body-weight);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
	:root:has([data-glass]) {
		scroll-behavior: auto;
	}
}

:where(:root:has([data-glass])) {
	&,
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	/* Thin scrollbars inside components; the page keeps the browser's own */
	body * {
		scrollbar-width: thin;
		scrollbar-color: var(--color-label-tertiary) transparent;
	}

	button,
	input,
	textarea,
	select {
		margin: 0;
		font: inherit;
		color: inherit;
	}

	button {
		padding: 0;
		border: 0;
		background: none;
		cursor: default;
	}

	button:disabled {
		opacity: var(--opacity-disabled);
	}

	h1,
	h2,
	h3,
	h4,
	p,
	figure,
	pre {
		margin: 0;
	}

	code,
	kbd,
	pre {
		font-family: var(--font-mono);
	}

	:focus-visible {
		outline: var(--size-focus-ring) solid var(--color-focus);
		outline-offset: var(--size-border);
	}

	::selection {
		background: color-mix(in srgb, var(--color-accent) 25%, transparent);
	}

	/* Text styles (macOS): title 22/28, title3 15/20, headline 13/16, body 13/16, subheadline 11/14, caption 10/13. */
	.text-display {
		font-size: var(--text-display-size);
		line-height: var(--text-display-leading);
		font-weight: var(--text-display-weight);
		letter-spacing: var(--text-display-tracking);
	}
	.text-display-small {
		font-size: var(--text-display-small-size);
		line-height: var(--text-display-small-leading);
		font-weight: var(--text-display-small-weight);
		letter-spacing: var(--text-display-small-tracking);
	}
	.text-title {
		font-size: var(--text-title-size);
		line-height: var(--text-title-leading);
		font-weight: var(--text-title-weight);
	}
	.text-title3 {
		font-size: var(--text-title3-size);
		line-height: var(--text-title3-leading);
		font-weight: var(--text-title3-weight);
	}
	.text-headline {
		font-size: var(--text-headline-size);
		line-height: var(--text-headline-leading);
		font-weight: var(--text-headline-weight);
	}
	.text-body {
		font-size: var(--text-body-size);
		line-height: var(--text-body-leading);
		font-weight: var(--text-body-weight);
	}
	.text-subheadline {
		font-size: var(--text-subheadline-size);
		line-height: var(--text-subheadline-leading);
		font-weight: var(--text-subheadline-weight);
	}
	.text-caption {
		font-size: var(--text-caption-size);
		line-height: var(--text-caption-leading);
		font-weight: var(--text-caption-weight);
	}

	/* Times, money and counts line up. */
	.num {
		font-variant-numeric: tabular-nums;
	}

	.mono {
		font-family: var(--font-mono);
	}

	.secondary {
		color: var(--color-label-secondary);
	}

	.tertiary {
		color: var(--color-label-tertiary);
	}

	.sr-only {
		position: absolute;
		width: var(--size-border);
		height: var(--size-border);
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}


/* ./components/controls.css */
/* Controls: Icon, Button, PrimaryButton, IconButton, Segmented, Switch, Checkbox, LinkAction, ChoiceGrid, TextField, Select, Calendar. Tokens only, in the Glass scope (index.css). */

:where(:root:has([data-glass])) {
	/* Icon */
	.icon {
		flex-shrink: 0;
		display: block;
	}
	.icon-sm {
		width: var(--size-icon-sm);
		height: var(--size-icon-sm);
	}
	.icon-md {
		width: var(--size-icon);
		height: var(--size-icon);
	}
	.icon-lg {
		width: var(--size-icon-lg);
		height: var(--size-icon-lg);
	}

	/* Glass on controls. Inside another glass surface they go plain (never glass on glass). */
	.btn,
	.icon-btn,
	.seg,
	.select-input {
		background: var(--material-glass-background);
		-webkit-backdrop-filter: var(--material-glass-filter);
		backdrop-filter: var(--material-glass-filter);
		box-shadow:
			var(--material-glass-highlight),
			0 0 0 var(--size-border) var(--color-separator),
			var(--material-glass-shadow);
		color: var(--material-glass-label);
	}

	/* Button and PrimaryButton: capsules */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-1-5);
		height: var(--size-control);
		padding: 0 var(--space-3);
		border-radius: var(--radius-full);
		font-size: var(--text-body-size);
		font-weight: var(--font-weight-medium);
		line-height: var(--text-body-leading);
		white-space: nowrap;
		user-select: none;
		transition:
			background-color var(--duration-fast) var(--ease-spring),
			transform var(--duration-fast) var(--ease-spring);
	}
	.btn-sm {
		height: var(--size-control-sm);
		padding: 0 var(--space-2);
		gap: var(--space-1);
		font-size: var(--text-subheadline-size);
	}
	.btn-sm .icon {
		width: var(--size-icon-sm);
		height: var(--size-icon-sm);
	}
	.btn-lg {
		height: var(--size-control-lg);
		padding: 0 var(--space-4);
	}
	.btn:hover:not(:disabled) {
		background: color-mix(
			in srgb,
			var(--material-glass-background),
			var(--color-label) 6%
		);
	}
	.btn:active:not(:disabled) {
		opacity: var(--opacity-pressed);
	}
	.btn-destructive {
		color: var(--color-status-critical);
	}
	.btn-primary {
		background: var(--material-glass-prominent-background);
		-webkit-backdrop-filter: var(--material-glass-prominent-filter);
		backdrop-filter: var(--material-glass-prominent-filter);
		box-shadow:
			var(--material-glass-prominent-highlight),
			var(--material-glass-prominent-shadow);
		color: var(--material-glass-prominent-label);
	}
	.btn-primary:hover:not(:disabled) {
		background: color-mix(
			in srgb,
			var(--material-glass-prominent-background),
			var(--color-label) 10%
		);
	}

	/* IconButton: circles */
	.icon-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: var(--size-control);
		height: var(--size-control);
		border-radius: var(--radius-full);
		color: var(--color-label-secondary);
		transition: background-color var(--duration-fast) var(--ease-spring);
	}
	.icon-btn-sm {
		width: var(--size-control-sm);
		height: var(--size-control-sm);
	}
	.icon-btn-sm .icon,
	.icon-btn-sm .brand-mark {
		width: var(--size-icon-sm);
		height: var(--size-icon-sm);
	}
	.icon-btn-lg {
		width: var(--size-control-lg);
		height: var(--size-control-lg);
	}
	.icon-btn:hover:not(:disabled) {
		color: var(--color-label);
	}
	/* A toggle that's on (a calendar shown) */
	.icon-btn[aria-pressed='true'] {
		color: var(--color-accent);
	}

	:is(.toolbar, .popover, .menu)
		:is(.btn:not(.btn-primary), .icon-btn, .select-input) {
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}
	:is(.toolbar, .popover, .menu)
		:is(.btn:not(.btn-primary), .icon-btn, .select-input):hover {
		background: var(--color-fill);
	}

	/* Segmented: a glass capsule with a solid thumb on the choice */
	.seg {
		display: inline-flex;
		align-items: center;
		gap: var(--size-border);
		height: var(--size-control);
		padding: calc(var(--space-1) / 2);
		border-radius: var(--radius-full);
	}
	.seg-option {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-1);
		height: 100%;
		min-width: var(--size-control);
		padding: 0 var(--space-2);
		border-radius: var(--radius-full);
		color: var(--color-label-secondary);
		font-size: var(--text-body-size);
		font-weight: var(--font-weight-medium);
		white-space: nowrap;
		transition:
			background-color var(--duration-fast) var(--ease-spring),
			color var(--duration-fast) var(--ease-spring);
	}
	.seg-option:hover {
		color: var(--color-label);
	}
	.seg-option.is-selected {
		background: var(--color-background-content);
		box-shadow: 0 0 0 var(--size-border) var(--color-separator);
		color: var(--color-label);
	}
	.seg-sm {
		height: var(--size-control-sm);
	}
	.seg-sm .seg-option {
		font-size: var(--text-subheadline-size);
		padding: 0 var(--space-1-5);
	}
	:is(.toolbar, .popover, .menu) .seg {
		background: var(--color-fill);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}

	/* Switch */
	.switch-field {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
	}
	.switch-field.is-disabled {
		opacity: var(--opacity-disabled);
	}
	.switch {
		position: relative;
		flex-shrink: 0;
		width: calc(var(--size-control-sm) * 1.75);
		height: var(--size-control-sm);
		padding: calc(var(--space-1) / 2);
		border-radius: var(--radius-full);
		background: var(--color-fill);
		box-shadow: inset 0 0 0 var(--size-border) var(--color-separator);
		transition: background-color var(--duration-base) var(--ease-spring);
	}
	.switch:disabled {
		opacity: 1;
	}
	.switch-thumb {
		display: block;
		width: calc(var(--size-control-sm) - var(--space-1));
		height: calc(var(--size-control-sm) - var(--space-1));
		border-radius: var(--radius-full);
		background: var(--color-on-accent);
		box-shadow: var(--material-glass-prominent-shadow);
		transition: transform var(--duration-base) var(--ease-spring);
	}
	.switch[aria-checked='true'] {
		background: var(--color-accent);
		box-shadow: none;
	}
	.switch[aria-checked='true'] .switch-thumb {
		transform: translateX(calc(var(--size-control-sm) * 0.75));
	}

	/* Checkbox */
	.check {
		position: relative;
		display: inline-flex;
		align-items: flex-start;
		gap: var(--space-2);
	}
	.check.is-disabled {
		opacity: var(--opacity-disabled);
	}
	.check-input {
		position: absolute;
		opacity: 0;
		width: var(--size-icon);
		height: var(--size-icon);
		margin: 0;
	}
	.check-box {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: calc(var(--size-icon) - var(--space-1) / 2);
		height: calc(var(--size-icon) - var(--space-1) / 2);
		margin-top: calc(var(--space-1) / 4);
		border-radius: var(--radius-xs);
		background: var(--color-background-content);
		box-shadow: inset 0 0 0 var(--size-border) var(--color-separator);
		color: transparent;
		transition: background-color var(--duration-fast) var(--ease-spring);
	}
	.check-input:checked + .check-box {
		background: var(--color-accent);
		box-shadow: none;
		color: var(--color-on-accent);
	}
	.check-input:focus-visible + .check-box {
		outline: var(--size-focus-ring) solid var(--color-focus);
		outline-offset: var(--size-border);
	}
	/* The box at the trailing edge: the row reads glyph, label, then the box */
	.check-end {
		display: flex;
		width: 100%;
	}
	.check-end .check-input {
		right: 0;
	}
	.check-end :is(.check-input, .check-box) {
		order: 1;
		margin-left: auto;
	}
	.check-end .check-text {
		flex: 1;
	}
	.check-trailing {
		display: inline-flex;
		align-items: center;
		flex-shrink: 0;
		align-self: center;
	}
	.check-leading {
		display: inline-flex;
		flex-shrink: 0;
	}
	.check-text {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}
	.check-detail {
		color: var(--color-label-secondary);
		font-size: var(--text-subheadline-size);
		line-height: var(--text-subheadline-leading);
	}

	/* LinkAction */
	.link-action {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		color: var(--color-link);
		font-weight: var(--font-weight-medium);
	}
	.link-action:hover {
		text-decoration: underline;
		text-underline-offset: var(--space-1-5);
	}
	.link-action .icon {
		width: var(--size-icon-sm);
		height: var(--size-icon-sm);
	}
	/* The arrow leans the way the link goes on hover (instant under Reduce Motion: durations are 0) */
	.link-action-arrow {
		transition: transform var(--duration-fast) var(--ease-spring);
	}
	.link-action:hover .link-action-arrow {
		transform: translateX(calc(var(--space-1) / 2));
	}
	.link-action:hover .link-action-arrow.is-external {
		transform: translate(calc(var(--space-1) / 2), calc(var(--space-1) / -2));
	}

	/* Choice grid: pick one option, see what to do for it */
	.choice {
		display: flex;
		flex-direction: column;
		border-radius: var(--radius-md);
		background: var(--color-background-content);
		box-shadow: 0 0 0 var(--size-border) var(--color-separator);
	}
	.choice-head,
	.choice-panel {
		padding: var(--space-4);
	}
	/* The hairline under the options; a panel used on its own has none */
	.choice-head ~ .choice-panel {
		border-top: var(--size-border) solid var(--color-separator);
	}
	.choice-title-row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2);
		margin: 0 0 var(--space-3);
	}
	.choice-note {
		margin: var(--space-3) 0 0;
		color: var(--color-label-secondary);
		font-size: var(--text-subheadline-size);
		line-height: var(--text-subheadline-leading);
	}
	.choice-title {
		margin: 0;
		font-size: var(--text-headline-size);
		line-height: var(--text-headline-leading);
		font-weight: var(--text-headline-weight);
	}
	.choice-grid {
		display: grid;
		grid-template-columns: repeat(
			auto-fill,
			minmax(calc(var(--size-sidebar) / 2), 1fr)
		);
		gap: var(--space-1-5);
	}
	.choice-option {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		min-width: 0;
		height: var(--size-control);
		padding: 0 var(--space-2);
		border: 0;
		border-radius: var(--radius-sm);
		background: none;
		box-shadow: 0 0 0 var(--size-border) var(--color-separator);
		color: var(--color-label-secondary);
		font: inherit;
		font-size: var(--text-subheadline-size);
		text-align: left;
		white-space: nowrap;
		cursor: pointer;
		transition:
			color var(--duration-fast) var(--ease-spring),
			box-shadow var(--duration-fast) var(--ease-spring);
	}
	.choice-option .icon,
	.choice-option .brand-mark {
		width: var(--size-icon-sm);
		height: var(--size-icon-sm);
		flex-shrink: 0;
	}
	.choice-option > span {
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.choice-option:hover {
		color: var(--color-label);
		background: var(--color-fill);
	}
	.choice-option.is-selected {
		color: var(--color-accent);
		background: color-mix(in srgb, var(--color-accent) 8%, transparent);
		box-shadow: 0 0 0 var(--size-border) var(--color-accent);
	}
	.choice-option:focus-visible {
		outline: var(--size-focus-ring) solid var(--color-focus);
		outline-offset: var(--size-border);
	}
	.choice-panel {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}
	.choice-panel[hidden] {
		display: none;
	}

	/* TextField and TextArea: content, so solid, with a hairline ring */
	.field {
		width: 100%;
		min-width: 0;
		height: var(--size-control);
		padding: 0 var(--space-2);
		border: 0;
		border-radius: var(--radius-sm);
		background: var(--color-background-content);
		box-shadow: 0 0 0 var(--size-border) var(--color-separator);
		color: var(--color-label);
		font-size: var(--text-body-size);
		line-height: var(--text-body-leading);
		transition: box-shadow var(--duration-fast) var(--ease-spring);
	}
	.field::placeholder {
		color: var(--color-label-tertiary);
	}
	.field:focus-visible {
		outline: none;
		box-shadow:
			0 0 0 var(--size-border) var(--color-accent),
			0 0 0 var(--size-focus-ring) var(--color-focus);
	}
	.field:disabled {
		opacity: var(--opacity-disabled);
	}
	.field-multiline {
		height: auto;
		padding: var(--space-2);
		resize: vertical;
		field-sizing: content;
		min-height: calc(var(--text-body-leading) * 4 + var(--space-4));
	}

	/* Select: a glass pop-up button with a chevron */
	.select {
		position: relative;
		display: inline-flex;
		min-width: 0;
	}
	.select-input {
		appearance: none;
		width: 100%;
		min-width: 0;
		height: var(--size-control);
		padding: 0 calc(var(--space-3) + var(--size-icon-sm)) 0 var(--space-3);
		border: 0;
		border-radius: var(--radius-full);
		font-size: var(--text-body-size);
		font-weight: var(--font-weight-medium);
		text-overflow: ellipsis;
	}
	.select-input:disabled {
		opacity: var(--opacity-disabled);
	}
	.select-chevron {
		position: absolute;
		top: 50%;
		right: var(--space-2);
		transform: translateY(-50%);
		color: var(--color-label-secondary);
		pointer-events: none;
	}

	/* Quiet Select: its text in secondary, the list over it, unseen until open */
	.select-quiet {
		align-items: center;
		gap: var(--space-1);
		align-self: flex-start;
		color: var(--color-label-secondary);
		font-size: var(--text-subheadline-size);
		line-height: var(--text-subheadline-leading);
	}
	.select-quiet .select-input {
		position: absolute;
		inset: 0;
		height: 100%;
		padding: 0;
		opacity: 0;
	}
	.select-display {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		min-width: 0;
	}
	.select-display-main {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.select-quiet .select-chevron {
		position: static;
		transform: none;
	}
	.select-quiet:hover {
		color: var(--color-label);
	}
	.select-quiet:has(.select-input:focus-visible) {
		border-radius: var(--radius-xs);
		outline: var(--size-focus-ring) solid var(--color-focus);
		outline-offset: var(--size-border);
	}

	/* Calendar: a month of days; today in accent, the pick on an accent circle.
	   Seven day columns wide: a table at 100% would ask a shrink-to-fit parent
	   (a popover) for all the room there is. */
	.calendar {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		width: calc(var(--size-control) * 7);
	}
	.calendar-head {
		display: flex;
		align-items: center;
		gap: var(--space-1);
		padding-left: var(--space-1);
	}
	.calendar-title {
		flex: 1;
		font-size: var(--text-headline-size);
		line-height: var(--text-headline-leading);
		font-weight: var(--text-headline-weight);
	}
	.calendar-grid {
		width: 100%;
		border-collapse: collapse;
		table-layout: fixed;
	}
	.calendar-weekday {
		height: var(--size-control-sm);
		padding: 0;
		color: var(--color-label-tertiary);
		font-size: var(--text-caption-size);
		line-height: var(--text-caption-leading);
		font-weight: var(--text-caption-weight);
		text-align: center;
	}
	.calendar-cell {
		height: var(--size-control);
		padding: 0;
		text-align: center;
	}
	.calendar-day {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--size-control);
		height: var(--size-control);
		border-radius: var(--radius-full);
		color: var(--color-label);
		font-size: var(--text-body-size);
		transition: background-color var(--duration-fast) var(--ease-spring);
	}
	.calendar-day:hover:not([aria-disabled='true']) {
		background: var(--color-fill);
	}
	.calendar-day.is-today {
		color: var(--color-accent);
		font-weight: var(--font-weight-semibold);
	}
	.calendar-day.is-selected,
	.calendar-day.is-selected:hover {
		background: var(--color-accent);
		color: var(--color-on-accent);
		font-weight: var(--font-weight-semibold);
	}
	.calendar-day[aria-disabled='true'] {
		color: var(--color-label-tertiary);
	}
}


/* ./components/content.css */
/* Content: Row, Disclosure, SectionHeader, Status, Table, EmptyState, CodeBlock, Logo, IconTile, Tag, Card, CheckList, CopyField, Skeleton, StatStrip, DataState. Tokens only, in the Glass scope (index.css). */

:where(:root:has([data-glass])) {
	/* Row */
	.row {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		min-height: var(--size-row);
		padding: 0 var(--space-2);
		border-radius: var(--radius-md);
		color: var(--color-label);
	}
	.row-lg {
		min-height: var(--size-row-lg);
	}
	.row.has-subtitle {
		padding-block: var(--space-1-5);
	}
	.row.is-link {
		transition: background-color var(--duration-fast) var(--ease-spring);
	}
	.row.is-link:hover,
	.row.is-selected {
		background: var(--color-fill);
	}
	.row-leading {
		display: inline-flex;
		align-items: center;
		flex-shrink: 0;
		color: var(--color-label-secondary);
	}
	.row-text {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-width: 0;
	}
	.row-title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.row-subtitle {
		overflow: hidden;
		color: var(--color-label-secondary);
		font-size: var(--text-subheadline-size);
		line-height: var(--text-subheadline-leading);
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.row-trailing {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		flex-shrink: 0;
		color: var(--color-label-secondary);
	}

	/* RowGroup: rows in one frame, hairlines between. The first and last rows
	   take the frame's corners (no clipping, so a row's menu can open past it). */
	.row-group {
		display: flex;
		flex-direction: column;
		border-radius: var(--radius-lg);
		background: var(--color-background-content);
		box-shadow: 0 0 0 var(--size-border) var(--color-separator);
	}
	.row-group > * {
		border-radius: initial;
	}
	.row-group > * + * {
		border-top: var(--size-border) solid var(--color-separator);
	}
	.row-group > :first-child {
		border-top-left-radius: var(--radius-lg);
		border-top-right-radius: var(--radius-lg);
	}
	.row-group > :last-child {
		border-bottom-left-radius: var(--radius-lg);
		border-bottom-right-radius: var(--radius-lg);
	}
	/* A row's own buttons are borderless; the fill shows on hover */
	.row-group :is(.icon-btn, .btn:not(.btn-primary), .select-input) {
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}
	.row-group :is(.icon-btn, .btn:not(.btn-primary), .select-input):hover {
		background: var(--color-fill);
	}
	.row-group > .row {
		min-height: var(--size-row-lg);
		padding-inline: var(--space-3);
	}
	.row-group > .row.has-subtitle {
		padding-block: var(--space-2);
	}

	/* Disclosure */
	.disclosure-summary {
		display: flex;
		align-items: center;
		gap: var(--space-1-5);
		min-height: var(--size-row);
		padding: 0 var(--space-2);
		border-radius: var(--radius-md);
		list-style: none;
		font-weight: var(--font-weight-semibold);
		user-select: none;
	}
	.disclosure-summary::-webkit-details-marker {
		display: none;
	}
	.disclosure-summary:hover {
		background: var(--color-fill);
	}
	.disclosure-chevron {
		color: var(--color-label-secondary);
		transition: transform var(--duration-fast) var(--ease-spring);
	}
	.disclosure[open] > .disclosure-summary .disclosure-chevron {
		transform: rotate(90deg);
	}
	.disclosure-title {
		flex: 1;
		min-width: 0;
	}
	.disclosure-count {
		color: var(--color-label-secondary);
		font-weight: var(--font-weight-regular);
	}
	.disclosure[open] > .disclosure-summary .disclosure-count {
		display: none;
	}
	.disclosure-body {
		padding: var(--space-1) 0 var(--space-2) var(--space-5);
	}

	/* DisclosureGroup: one frame, hairlines between rows, square rows clipped
	   by the frame's corners */
	.disclosure-group {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		border-radius: var(--radius-md);
		background: var(--color-background-content);
		box-shadow: 0 0 0 var(--size-border) var(--color-separator);
	}
	.disclosure-group > .disclosure + .disclosure {
		border-top: var(--size-border) solid var(--color-separator);
	}
	.disclosure-group > .disclosure > .disclosure-summary {
		min-height: var(--size-row-lg);
		padding: 0 var(--space-3);
		border-radius: initial;
	}

	/* SectionHeader */
	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2);
		min-height: var(--size-control-sm);
		padding: 0 var(--space-2);
	}
	.section-header-title {
		display: inline-flex;
		align-items: baseline;
		gap: var(--space-1-5);
		color: var(--color-label-secondary);
		font-size: var(--text-subheadline-size);
		line-height: var(--text-subheadline-leading);
		font-weight: var(--font-weight-semibold);
	}
	.section-header-title .icon {
		align-self: center;
	}
	.section-header-count {
		font-weight: var(--font-weight-regular);
	}

	/* Status: shape and color, so it reads without color too */
	.status {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		font-size: var(--text-subheadline-size);
		line-height: var(--text-subheadline-leading);
	}
	.status-dot {
		width: var(--size-dot);
		height: var(--size-dot);
		border-radius: var(--radius-full);
		background: currentColor;
	}
	.status-good {
		color: var(--color-status-good);
	}
	.status-warning {
		color: var(--color-status-warning);
	}
	.status-critical {
		color: var(--color-status-critical);
	}
	.status-label {
		color: var(--color-label);
	}

	/* Table: a rounded hairline frame that clips its cells, so the header fill
	   follows the corners. The scroller leaves room for the frame's ring. */
	.table-block {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
		max-width: 100%;
	}
	.table-scroll {
		/* Holds absolutely placed children (visually-hidden labels) inside the scroller. */
		position: relative;
		align-self: stretch;
		max-width: 100%;
		padding: var(--size-border);
		overflow-x: auto;
	}
	/* A long table's first rows (tableRowsShown in Table.tsx is 7) */
	.table-scroll.is-collapsed tbody tr:nth-child(n + 8) {
		display: none;
	}
	.table {
		width: 100%;
		overflow: hidden;
		border-collapse: separate;
		border-spacing: 0;
		border-radius: var(--radius-md);
		box-shadow: 0 0 0 var(--size-border) var(--color-separator);
		font-size: var(--text-subheadline-size);
		line-height: var(--text-body-leading);
	}
	.table th,
	.table td {
		padding: var(--space-2) var(--space-3);
		border-top: var(--size-border) solid var(--color-separator);
		text-align: left;
		vertical-align: top;
	}
	.table > :first-child > tr:first-child > * {
		border-top: 0;
	}
	.table thead th {
		background: var(--color-fill);
		color: var(--color-label-secondary);
		font-weight: var(--font-weight-medium);
	}
	.table tbody th {
		color: var(--color-label-secondary);
		font-weight: var(--font-weight-regular);
	}
	/* Numbers line up on the right. */
	.table :is(th, td).table-end {
		text-align: right;
		white-space: nowrap;
	}
	/* A phone (Table's `stack`): each body row is a card. Its first cell is the
	   title; every other cell is a line led by its column's name (data-label,
	   from the header row). Still a table underneath, for screen readers. */
	@media (max-width: 640px) {
		.is-stacked .table-scroll {
			overflow: visible;
			padding: 0;
		}
		.is-stacked .table {
			display: block;
			overflow: visible;
			border-radius: 0;
			box-shadow: none;
		}
		.is-stacked .table thead {
			position: absolute;
			width: var(--size-border);
			height: var(--size-border);
			overflow: hidden;
			clip-path: inset(50%);
			white-space: nowrap;
		}
		.is-stacked .table :is(tbody, tfoot) {
			display: flex;
			flex-direction: column;
			gap: var(--space-2);
		}
		.is-stacked .table :is(tbody, tfoot) + :is(tbody, tfoot) {
			margin-top: var(--space-2);
		}
		.is-stacked .table tr {
			display: flex;
			flex-direction: column;
			gap: var(--space-1);
			padding: var(--space-2) var(--space-3);
			border-radius: var(--radius-md);
			background: var(--color-background-content);
			box-shadow: 0 0 0 var(--size-border) var(--color-separator);
		}
		/* Values start in one column, numbers too. */
		.is-stacked .table :is(th, td) {
			padding: 0;
			border-top: 0;
			text-align: left;
		}
		.is-stacked .table tr > :first-child {
			color: var(--color-label);
			font-weight: var(--font-weight-semibold);
		}
		/* The name sits in the line's start padding, so a long value wraps
		   under itself, not under the name. */
		.is-stacked .table tr > :not(:first-child)[data-label] {
			padding-left: calc(var(--size-table-label) + var(--space-3));
		}
		.is-stacked .table tr > :not(:first-child)[data-label]::before {
			content: attr(data-label);
			float: left;
			width: var(--size-table-label);
			margin-left: calc((var(--size-table-label) + var(--space-3)) * -1);
			color: var(--color-label-secondary);
			font-weight: var(--font-weight-regular);
			text-align: left;
			white-space: normal;
		}
	}

	/* EmptyState */
	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-1-5);
		padding: var(--space-10) var(--space-4);
		text-align: center;
	}
	.empty-icon {
		margin-bottom: var(--space-1);
		color: var(--color-label-tertiary);
	}
	.empty-title {
		font-size: var(--text-title3-size);
		line-height: var(--text-title3-leading);
		font-weight: var(--text-title3-weight);
	}
	.empty-description {
		max-width: var(--size-popover);
		color: var(--color-label-secondary);
	}
	.empty-action {
		margin-top: var(--space-2);
	}

	/* CodeBlock: content, so solid */
	.code {
		position: relative;
		min-width: 0;
		max-width: 100%;
		border-radius: var(--radius-lg);
		background: var(--color-background-content);
		box-shadow: 0 0 0 var(--size-border) var(--color-separator);
	}
	.code-label {
		padding: var(--space-2) var(--space-3) 0;
		color: var(--color-label-secondary);
		font-size: var(--text-subheadline-size);
		line-height: var(--text-subheadline-leading);
	}
	.code-body {
		overflow-x: auto;
		padding: var(--space-3);
		padding-right: calc(var(--size-control-sm) + var(--space-4));
		font-size: var(--text-body-size);
		line-height: var(--text-title3-leading);
		white-space: pre;
	}
	.code-copy {
		position: absolute;
		top: var(--space-2);
		right: var(--space-2);
	}

	/* Inline code: a mono chip in running text. A chip that wraps keeps its
	   padding and corners on both lines. */
	.inline-code {
		padding: 0.1em 0.4em;
		border-radius: var(--radius-xs);
		background: var(--color-fill);
		font-family: var(--font-mono);
		font-size: 0.9em;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}
	.table .inline-code {
		font-size: 1em;
	}

	/* Highlighted code (codeHighlight.ts): the syntax tokens, gray punctuation */
	.code-keyword {
		color: var(--syntax-keyword);
	}
	.code-function {
		color: var(--syntax-function);
	}
	/* Bare words: shell arguments and subcommands */
	.code-string {
		color: var(--color-label);
	}
	.code-constant {
		color: var(--syntax-constant);
	}
	.code-quoted {
		color: var(--syntax-string);
	}
	.code-parameter {
		color: var(--syntax-parameter);
	}
	.code-comment {
		color: var(--syntax-comment);
	}
	.code-punctuation {
		color: var(--color-label-secondary);
	}
	.code-link {
		color: var(--color-link);
	}

	/* Logo: the mascot in a circle, then the wordmark, both as tall as the logo
	   lets them be (the wordmark's letters sit inside the circle's height). */
	.logo {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		height: var(--size-logo);
		color: inherit;
	}
	.logo-mascot {
		display: block;
		flex-shrink: 0;
		height: 100%;
		aspect-ratio: 1;
		overflow: hidden;
		border-radius: var(--radius-full);
		background: var(--color-fill);
	}
	.logo-mascot img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.logo-wordmark {
		display: block;
		flex-shrink: 0;
		height: 82%;
		width: auto;
		overflow: visible;
	}

	/* Row meta: the small line above a title (category · date · read time) */
	.row-meta {
		color: var(--color-label-secondary);
		font-size: var(--text-caption-size);
		line-height: var(--text-caption-leading);
		font-weight: var(--text-caption-weight);
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}

	/* Icon tile: a glyph on a fill square */
	.icon-tile {
		display: inline-grid;
		place-items: center;
		flex-shrink: 0;
		width: var(--size-tile);
		height: var(--size-tile);
		border-radius: var(--radius-sm);
		background: var(--color-fill);
		color: var(--color-label-secondary);
		transition:
			color var(--duration-fast) var(--ease-spring),
			background-color var(--duration-fast) var(--ease-spring);
	}
	.icon-tile .brand-mark {
		width: var(--size-icon-sm);
		height: var(--size-icon-sm);
	}
	.brand-mark {
		display: block;
		flex-shrink: 0;
		width: var(--size-icon);
		height: var(--size-icon);
	}

	/* Tag: quiet mono label */
	.tag {
		display: inline-flex;
		align-items: center;
		white-space: nowrap;
		color: var(--color-label-secondary);
		font-family: var(--font-mono);
		font-size: var(--text-caption-size);
		line-height: var(--text-caption-leading);
	}

	/* Card: hairline, tile, title, a line or two */
	.card {
		position: relative;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: start;
		gap: var(--space-1) var(--space-3);
		padding: var(--space-3) var(--space-4);
		border-radius: var(--radius-md);
		background: var(--color-background-content);
		box-shadow: 0 0 0 var(--size-border) var(--color-separator);
		color: var(--color-label);
		text-decoration: none;
	}
	.card > .icon-tile {
		margin-top: calc(var(--space-1) / -2);
	}
	.card-text {
		display: flex;
		flex-direction: column;
		gap: calc(var(--space-1) / 2);
		min-width: 0;
		grid-column: 2;
	}
	.card:not(:has(> .icon-tile)) .card-text {
		grid-column: 1 / 3;
	}
	.card-title {
		font-size: var(--text-headline-size);
		line-height: var(--text-headline-leading);
		font-weight: var(--text-headline-weight);
	}
	.card-body {
		color: var(--color-label-secondary);
		font-size: var(--text-subheadline-size);
		line-height: var(--text-body-leading);
	}
	.card-tag {
		grid-column: 3;
		grid-row: 1;
	}
	.card-extra {
		grid-column: 1 / -1;
		min-width: 0;
		padding-top: var(--space-2);
	}
	.card.is-link {
		transition: background-color var(--duration-fast) var(--ease-spring);
	}
	.card.is-link:hover {
		background: color-mix(
			in srgb,
			var(--color-background-content) 92%,
			var(--color-label)
		);
	}
	.card.is-link:hover .icon-tile {
		background: color-mix(in srgb, var(--color-accent) 14%, transparent);
		color: var(--color-accent);
	}
	.card.is-selected {
		box-shadow: 0 0 0 var(--size-border) var(--color-accent);
	}
	.card-grid {
		display: grid;
		grid-template-columns: repeat(
			auto-fill,
			minmax(min(100%, var(--size-card-min)), 1fr)
		);
		gap: var(--space-2);
	}
	.card-grid-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	@media (max-width: 560px) {
		.card-grid-2 {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	/* Check list: done steps behind a green check */
	.check-list {
		display: flex;
		flex-direction: column;
		gap: var(--space-1-5);
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: var(--text-subheadline-size);
		line-height: var(--text-copy-leading);
	}
	.check-list li {
		display: flex;
		align-items: flex-start;
		gap: var(--space-2);
		min-width: 0;
	}
	.check-list li > span {
		min-width: 0;
		overflow-wrap: anywhere;
	}
	.check-list-icon {
		flex-shrink: 0;
		margin-top: calc(var(--space-1) - var(--size-border));
		color: var(--color-status-good);
	}

	/* Copy field: one command with a Copy text button */
	.copy-field {
		display: flex;
		flex-direction: column;
		gap: var(--space-1-5);
		min-width: 0;
	}
	.copy-field-label {
		color: var(--color-label-secondary);
		font-size: var(--text-caption-size);
		line-height: var(--text-caption-leading);
		font-weight: var(--text-caption-weight);
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}
	.copy-field-box {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		min-width: 0;
		padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
		border-radius: var(--radius-sm);
		background: var(--color-background-content);
		box-shadow: 0 0 0 var(--size-border) var(--color-separator);
	}
	.copy-field-value {
		flex: 1;
		min-width: 0;
		margin: 0;
		overflow-x: auto;
		scrollbar-width: none;
		font-family: var(--font-mono);
		font-size: var(--text-subheadline-size);
		line-height: var(--text-copy-leading);
		white-space: pre;
	}
	.copy-field-button {
		flex-shrink: 0;
		align-self: flex-start;
		padding: 0 var(--space-2);
		border: 0;
		border-radius: var(--radius-xs);
		background: none;
		color: var(--color-label-secondary);
		font: inherit;
		font-size: var(--text-subheadline-size);
		line-height: var(--text-copy-leading);
		cursor: pointer;
	}
	.copy-field-button:hover {
		background: var(--color-fill);
		color: var(--color-label);
	}

	/* Skeleton: the shape of what's loading, a soft shine sweeping across. Lines
	   are one line of their text tall, with a rounded bar in the middle. */
	.skeleton {
		display: block;
		flex-shrink: 0;
		max-width: 100%;
	}
	.skeleton-block,
	.skeleton-circle,
	.skeleton-line::before {
		background:
			linear-gradient(
					90deg,
					transparent,
					var(--color-separator) 50%,
					transparent
				)
				0 0 / 200% 100% no-repeat,
			var(--color-fill);
		animation: skeleton-shine var(--duration-shimmer) ease-in-out infinite;
	}
	.skeleton-line {
		display: flex;
		align-items: center;
		width: 100%;
		height: 1lh;
	}
	.skeleton-line::before {
		content: '';
		width: 100%;
		height: 0.75em;
		border-radius: var(--radius-xs);
	}
	.skeleton-block {
		border-radius: var(--radius-sm);
	}
	.skeleton-circle {
		border-radius: var(--radius-full);
	}
	.skeleton-end {
		margin-left: auto;
	}
	.skeleton-text-caption {
		font-size: var(--text-caption-size);
		line-height: var(--text-caption-leading);
	}
	.skeleton-text-subheadline {
		font-size: var(--text-subheadline-size);
		line-height: var(--text-subheadline-leading);
	}
	.skeleton-text-body {
		font-size: var(--text-body-size);
		line-height: var(--text-body-leading);
	}
	.skeleton-text-title3 {
		font-size: var(--text-title3-size);
		line-height: var(--text-title3-leading);
	}
	.skeleton-text-page-title {
		font-size: var(--text-page-title-size);
		line-height: var(--text-page-title-leading);
	}
	.skeleton-text-display-small {
		font-size: var(--text-display-small-size);
		line-height: var(--text-display-small-leading);
	}
	@media (prefers-reduced-motion: reduce) {
		.skeleton-block,
		.skeleton-circle,
		.skeleton-line::before {
			background: var(--color-fill);
			animation: none;
		}
	}

	/* StatStrip: numbers side by side; the gap shows the hairline between them,
	   and the last row's stats grow so no empty cell shows. */
	.stat-strip {
		display: flex;
		flex-wrap: wrap;
		gap: var(--size-border);
		overflow: hidden;
		border-radius: var(--radius-lg);
		background: var(--color-separator);
		box-shadow: 0 0 0 var(--size-border) var(--color-separator);
	}
	.stat {
		display: flex;
		flex: 1 1 calc(var(--size-sidebar) / 2);
		flex-direction: column;
		gap: calc(var(--space-1) / 2);
		min-width: 0;
		padding: var(--space-3);
		background: var(--color-background-content);
	}
	.stat > * {
		margin: 0;
	}
	.stat-label {
		color: var(--color-label-secondary);
		font-size: var(--text-subheadline-size);
		line-height: var(--text-subheadline-leading);
	}
	.stat-value {
		font-size: var(--text-title3-size);
		line-height: var(--text-title3-leading);
		font-weight: var(--text-title3-weight);
	}
	.stat-note {
		color: var(--color-label-tertiary);
		font-size: var(--text-caption-size);
		line-height: var(--text-caption-leading);
	}

	/* DataState: no box of its own; an earlier answer dims while the new one
	   loads, and a failed refresh says so above the data it keeps. */
	.data-state {
		display: contents;
	}
	.data-state.is-refreshing > * {
		opacity: var(--opacity-pressed);
		transition: opacity var(--duration-base) var(--ease-spring);
	}
	.data-state-note {
		display: flex;
		align-items: center;
		gap: var(--space-1-5);
		padding: 0 var(--space-3);
		color: var(--color-label);
		font-size: var(--text-subheadline-size);
		line-height: var(--text-subheadline-leading);
	}
	.data-state-note .icon {
		flex-shrink: 0;
		color: var(--color-status-warning);
	}
	.data-state-note.is-critical .icon {
		color: var(--color-status-critical);
	}
	.data-state-detail {
		color: var(--color-label-secondary);
	}
	.data-state-note .link-action {
		margin-left: auto;
	}
}

/* Keyframes can't nest; the name is only used inside the scope above. */
@keyframes skeleton-shine {
	from {
		background-position:
			150% 0,
			0 0;
	}
	to {
		background-position:
			-50% 0,
			0 0;
	}
}


/* ./components/overlays.css */
/* Overlays and bars: Toolbar, Popover, Menu, Sheet, Sidebar, Inspector, MenuButton and PopoverButton anchors. Tokens only, in the Glass scope (index.css). */

:where(:root:has([data-glass])) {
	.toolbar,
	.popover,
	.menu {
		background: var(--material-glass-background);
		-webkit-backdrop-filter: var(--material-glass-filter);
		backdrop-filter: var(--material-glass-filter);
		box-shadow:
			var(--material-glass-highlight),
			0 0 0 var(--size-border) var(--color-separator),
			var(--material-glass-shadow);
		color: var(--material-glass-label);
	}

	/* Toolbar */
	.toolbar {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		min-height: calc(var(--size-control) + var(--space-2));
		padding: var(--space-1);
		border-radius: var(--radius-full);
	}
	.toolbar-group {
		display: flex;
		align-items: center;
		gap: var(--space-1);
	}
	.toolbar-title {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		font-weight: var(--font-weight-semibold);
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.toolbar-trailing {
		margin-left: auto;
	}

	/* Popover: concentric — radius 2xl around space-2 padding leaves lg inside */
	.popover {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		padding: var(--space-2);
		border-radius: var(--radius-2xl);
	}
	.popover-popover {
		width: min(100%, var(--size-popover));
	}
	.popover-auto {
		width: max-content;
		max-width: 100%;
	}

	/* Menu: as wide as its longest item; concentric — radius xl around space-1
	   padding leaves lg for the items. */
	.menu {
		display: flex;
		flex-direction: column;
		padding: var(--space-1);
		border-radius: var(--radius-xl);
	}
	.menu-item {
		display: flex;
		align-items: center;
		gap: var(--space-1-5);
		min-height: var(--size-control);
		padding: 0 var(--space-3) 0 var(--space-1);
		border-radius: var(--radius-lg);
		text-align: left;
		white-space: nowrap;
	}
	.menu-item:hover:not(:disabled),
	.menu-item:focus-visible {
		background: var(--color-fill);
		outline: none;
	}
	.menu-item-check {
		display: inline-flex;
		justify-content: center;
		width: var(--size-icon);
		color: var(--color-label);
	}
	/* Only checkable items carry the check column; in a menu that mixes both,
	   the plain items indent by it so every icon and label still lines up */
	.menu:has([role='menuitemcheckbox'])
		.menu-item:not([role='menuitemcheckbox']) {
		padding-left: calc(var(--space-1) + var(--size-icon) + var(--space-1-5));
	}
	.menu-item-label {
		flex: 1;
	}
	.menu-item-shortcut {
		color: var(--color-label-secondary);
		font-family: var(--font-ui);
	}
	.menu-separator {
		height: var(--size-border);
		margin: var(--space-1) var(--space-2);
		background: var(--color-separator);
	}
	/* A label and a control (the theme switch); its label lines up with the items' icons. */
	.menu-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		min-height: var(--size-control);
		padding: 0 var(--space-1) 0
			calc(var(--space-1) + var(--size-icon) + var(--space-1-5));
	}
	.menu-row-label {
		color: var(--color-label-secondary);
		white-space: nowrap;
	}

	/* Sheet: solid */
	.sheet-backdrop {
		position: fixed;
		inset: 0;
		z-index: var(--layer-sheet);
		display: grid;
		place-items: center;
		padding: var(--space-4);
		background: color-mix(
			in srgb,
			var(--color-background-window) 50%,
			transparent
		);
	}
	.sheet {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		width: min(100%, var(--size-sheet));
		padding: var(--space-4);
		border-radius: var(--radius-2xl);
		background: var(--material-solid-background);
		box-shadow:
			0 0 0 var(--size-border) var(--material-solid-border),
			var(--material-glass-shadow);
		color: var(--material-solid-label);
	}
	.sheet-body {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}
	.sheet-text {
		color: var(--color-label-secondary);
	}
	.sheet-title {
		font-size: var(--text-title3-size);
		line-height: var(--text-title3-leading);
		font-weight: var(--text-title3-weight);
	}
	/* Title and an × on one line, when the sheet has no Cancel row */
	.sheet-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
	}
	.sheet-actions {
		display: flex;
		justify-content: flex-end;
		gap: var(--space-2);
	}

	/* MenuButton and PopoverButton: a menu or popover anchored to its button,
	   under it (or above it, for buttons at the bottom of the window). */
	.anchor {
		position: relative;
		display: inline-flex;
	}
	.anchor .btn-label {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		min-width: 0;
	}
	.anchor-chevron {
		margin-right: calc(var(--space-1) / -2);
		color: var(--color-label-secondary);
	}
	.anchor-popover {
		position: absolute;
		z-index: var(--layer-popover);
		width: max-content;
		min-width: 100%;
	}
	.anchor-below {
		top: calc(100% + var(--space-1));
	}
	.anchor-above {
		bottom: calc(100% + var(--space-1));
	}
	.anchor-popover-start {
		left: 0;
	}
	.anchor-popover-end {
		right: 0;
	}

	/* Sidebar and Inspector: glass panes inset from the window, radius xl.
	   Controls inside lose their own glass (never glass on glass). */
	.sidebar,
	.inspector {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		min-width: 0;
		padding: var(--space-3) var(--space-2);
		border-radius: var(--radius-xl);
		background: var(--material-glass-background);
		-webkit-backdrop-filter: var(--material-glass-filter);
		backdrop-filter: var(--material-glass-filter);
		box-shadow:
			var(--material-glass-highlight),
			0 0 0 var(--size-border) var(--color-separator),
			var(--material-glass-shadow);
		color: var(--material-glass-label);
	}
	.sidebar {
		width: var(--size-sidebar);
	}
	.inspector {
		width: var(--size-inspector);
		padding: var(--space-3);
	}
	.sidebar-group {
		display: flex;
		flex-direction: column;
		gap: calc(var(--space-1) / 2);
	}
	.sidebar-heading {
		padding: 0 var(--space-2) var(--space-1);
		color: var(--color-label-secondary);
		font-size: var(--text-subheadline-size);
		line-height: var(--text-subheadline-leading);
		font-weight: var(--font-weight-semibold);
	}
	.sidebar-item {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		min-height: var(--size-control);
		padding: 0 var(--space-2);
		border-radius: var(--radius-md);
		color: var(--color-label);
		transition: background-color var(--duration-fast) var(--ease-spring);
	}
	.sidebar-item .icon {
		color: var(--color-accent);
	}
	.sidebar-item:hover {
		background: var(--color-fill);
	}
	.sidebar-item[aria-current='page'] {
		background: var(--color-fill);
		font-weight: var(--font-weight-medium);
	}
	.sidebar-item-label {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.sidebar-item-trailing {
		color: var(--color-label-secondary);
		font-size: var(--text-subheadline-size);
	}
	:is(.sidebar, .inspector)
		:is(.btn:not(.btn-primary), .icon-btn, .select-input) {
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}
	:is(.sidebar, .inspector)
		:is(.btn:not(.btn-primary), .icon-btn, .select-input):hover {
		background: var(--color-fill);
	}
	/* Collapsed: a rail of icons. Names leave the layout but stay readable. */
	.sidebar {
		transition: width var(--duration-base) var(--ease-spring);
	}
	.sidebar.is-collapsed {
		width: calc(var(--size-control-lg) + var(--space-4));
		align-items: center;
	}
	.sidebar.is-collapsed .sidebar-item {
		justify-content: center;
		width: var(--size-control-lg);
		padding: 0;
	}
	.sidebar.is-collapsed .sidebar-item-label {
		position: absolute;
		width: var(--size-border);
		height: var(--size-border);
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.sidebar.is-collapsed :is(.sidebar-heading, .sidebar-item-trailing) {
		display: none;
	}
	/* The rail's icons are gray, like its toggle; the current one in label. */
	.sidebar.is-collapsed .sidebar-item .icon {
		color: var(--color-label-secondary);
	}
	.sidebar.is-collapsed .sidebar-item[aria-current='page'] .icon {
		color: var(--color-label);
	}
	/* A menu or popover opened from a pane goes solid over it. */
	:is(.sidebar, .inspector) :is(.menu, .popover) {
		background: var(--material-solid-background);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow:
			0 0 0 var(--size-border) var(--material-solid-border),
			var(--material-glass-shadow);
		color: var(--material-solid-label);
	}
	:is(.sidebar, .inspector) .seg {
		background: var(--color-fill);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}
}


/* ./components/site.css */
/*
 * Marketing pages (cryptobud.app): one 680 column, a quiet header, a footer,
 * the page intro and titled blocks. Tokens only, in the Glass scope (index.css).
 */

:where(:root:has([data-glass])) {
	.site {
		display: flex;
		flex-direction: column;
		gap: var(--space-10);
		width: min(100%, calc(var(--size-column) + var(--space-8) * 2));
		min-height: 100vh;
		margin: 0 auto;
		padding: var(--space-8) var(--space-8) var(--space-6);
	}
	/* A product page: header, main and footer run the 1080 page */
	.site.is-page {
		width: min(100%, calc(var(--size-page) + var(--space-8) * 2));
	}
	.site-main {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: var(--space-10);
		min-width: 0;
	}

	/* Header: logo left, quiet links right, one capsule */
	.site-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
	}
	.site-logo {
		display: inline-flex;
		color: var(--color-label);
	}
	.site-logo .logo {
		height: var(--size-icon-lg);
	}
	.site-nav {
		display: flex;
		align-items: center;
		gap: var(--space-5);
		min-width: 0;
	}
	.site-nav-link {
		color: var(--color-label-secondary);
		font-size: var(--text-subheadline-size);
		font-weight: var(--font-weight-medium);
		white-space: nowrap;
		transition: color var(--duration-fast) var(--ease-spring);
	}
	.site-nav-link:hover,
	.site-nav-link[aria-current='page'] {
		color: var(--color-label);
	}
	.site-nav-action {
		margin-left: var(--space-1);
	}

	/* Footer: brand left, a 2×2 of link groups right, a hairline base */
	.site-footer {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--space-8) var(--space-6);
		padding-top: var(--space-8);
		border-top: var(--size-border) solid var(--color-separator);
		color: var(--color-label-secondary);
		font-size: var(--text-subheadline-size);
		line-height: var(--text-copy-leading);
	}
	.site-footer-brand {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
		max-width: var(--size-inspector);
	}
	.site-footer-brand p {
		margin: 0;
	}
	.site-footer-links {
		display: grid;
		grid-template-columns: repeat(
			2,
			minmax(var(--size-footer-column), max-content)
		);
		gap: var(--space-6) var(--space-10);
	}
	.site-footer-column {
		display: flex;
		flex-direction: column;
		gap: var(--space-1-5);
	}
	.site-footer-column h2,
	.block-title,
	.copy-label {
		margin: 0;
		color: var(--color-label-secondary);
		font-size: var(--text-caption-size);
		line-height: var(--text-caption-leading);
		font-weight: var(--text-caption-weight);
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}
	.site-footer-column a {
		color: var(--color-label);
	}
	.site-footer-column a:hover {
		color: var(--color-link);
	}
	.site-footer-base {
		flex: 1 0 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		padding-top: var(--space-4);
		border-top: var(--size-border) solid var(--color-separator);
		font-size: var(--text-caption-size);
	}
	.site-footer-base a:hover {
		color: var(--color-label);
	}
	.site-footer-social {
		display: inline-flex;
		color: var(--color-label-secondary);
	}
	.site-footer-social .brand-mark {
		width: var(--size-icon-sm);
		height: var(--size-icon-sm);
	}

	/* Page intro: crumb, title, lede, hairline */
	.intro {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		padding-bottom: var(--space-6);
		border-bottom: var(--size-border) solid var(--color-separator);
	}
	.crumbs {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-1);
		color: var(--color-label-secondary);
		font-size: var(--text-caption-size);
		line-height: var(--text-caption-leading);
		font-weight: var(--text-caption-weight);
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}
	.crumb {
		display: inline-flex;
		gap: var(--space-1);
	}
	.crumbs a:hover {
		color: var(--color-label);
	}
	.crumb-separator {
		color: var(--color-label-tertiary);
	}
	.intro-title {
		margin: var(--space-1) 0 0;
		font-size: var(--text-page-title-size);
		line-height: var(--text-page-title-leading);
		font-weight: var(--text-page-title-weight);
		letter-spacing: var(--text-page-title-tracking);
		text-wrap: balance;
	}
	.intro-lede {
		margin: 0;
		color: var(--color-label-secondary);
		font-size: var(--text-lede-size);
		line-height: var(--text-lede-leading);
		text-wrap: pretty;
	}
	.intro-extra {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 var(--space-4);
	}

	/* Blocks: a small uppercase heading over its content */
	.block {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		min-width: 0;
	}
	.block-head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-3);
	}
	.block-head .link-action {
		font-size: var(--text-subheadline-size);
	}

	.hint,
	.secondary {
		color: var(--color-label-secondary);
	}
	.hint {
		margin: 0;
		font-size: var(--text-subheadline-size);
		line-height: var(--text-copy-leading);
	}
	.actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2);
	}
	.visually-hidden {
		position: absolute;
		width: var(--size-border);
		height: var(--size-border);
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* Compare: one column raised, CryptoBud's own (on the DS Table) */
	.compare thead th {
		color: var(--color-label);
		font-weight: var(--font-weight-semibold);
	}
	.compare .is-raised {
		background: color-mix(in srgb, var(--color-accent) 7%, transparent);
	}
	.compare thead .is-raised {
		background: color-mix(in srgb, var(--color-accent) 12%, transparent);
	}
	.compare-head {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1-5);
	}

	/*
	 * An iPhone around a screenshot. Every length is a share of the phone's
	 * width (cqi), so one drawing serves a 150 tile and a 340 hero: a 4%
	 * border (band included), corners at 17% outside and 13% on the glass
	 * (outer − border), an island 28% wide. Side keys sit at their places
	 * down the left (Action, volume up, volume down) and the right (side key).
	 */
	.device-frame {
		container-type: inline-size;
		flex: none;
		width: var(--device-width, 100%);
	}
	.device-frame-body {
		position: relative;
		padding: 4cqi;
		border-radius: 17cqi;
		background: var(--device-glass);
		box-shadow:
			inset 0 0 0 0.4cqi var(--device-rim),
			inset 0 0 0 1.3cqi var(--device-band),
			var(--device-shadow);
	}
	.device-frame-body::before,
	.device-frame-body::after {
		content: '';
		position: absolute;
		width: 0.9cqi;
	}
	.device-frame-body::before {
		top: 17%;
		left: -0.8cqi;
		height: 25.5%;
		border-radius: 0.5cqi 0 0 0.5cqi;
		background: linear-gradient(
			var(--device-band) 0 15.7%,
			transparent 15.7% 35.3%,
			var(--device-band) 35.3% 62.7%,
			transparent 62.7% 72.5%,
			var(--device-band) 72.5%
		);
	}
	.device-frame-body::after {
		top: 27%;
		right: -0.8cqi;
		height: 11%;
		border-radius: 0 0.5cqi 0.5cqi 0;
		background: var(--device-band);
	}
	.device-frame-screen {
		position: relative;
		overflow: hidden;
		aspect-ratio: 1179 / 2556;
		border-radius: 13cqi;
		background: var(--device-glass);
	}
	.device-frame-screen > * {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}
	.device-frame-island {
		position: absolute;
		top: 6.6cqi;
		left: 50%;
		width: 28cqi;
		height: 8.2cqi;
		translate: -50% 0;
		border-radius: var(--radius-full);
		background: var(--device-glass);
	}

	/* Where #id links land: the same room above as prose headings */
	.anchor-target,
	.block-title {
		scroll-margin-top: var(--space-6);
	}

	/* Questions */
	.questions .disclosure-body {
		padding: 0 var(--space-3) var(--space-3)
			calc(var(--space-3) + var(--size-icon-sm) + var(--space-2));
		color: var(--color-label-secondary);
		font-size: var(--text-subheadline-size);
		line-height: var(--text-copy-leading);
	}

	/* A control's ring fits; its drop shadow would be clipped square, so it has none here */
	.scroll-x > .seg {
		box-shadow:
			var(--material-glass-highlight),
			0 0 0 var(--size-border) var(--color-separator);
	}
	/* Room for a control's 1px ring, which overflow would otherwise clip */
	.scroll-x {
		max-width: calc(100% + var(--size-border) * 2);
		margin: calc(var(--size-border) * -1);
		padding: var(--size-border);
		overflow-x: auto;
		scrollbar-width: none;
	}
	.questions .disclosure-body p,
	.card-body p {
		margin: 0;
	}

	@media (max-width: 640px) {
		.site {
			padding: var(--space-5) var(--space-4) var(--space-5);
			gap: var(--space-8);
		}
		.site-nav {
			gap: var(--space-3);
		}
		.site-nav-link.is-secondary {
			display: none;
		}
		.intro-title {
			font-size: var(--text-title-size);
			line-height: var(--text-title-leading);
		}
	}

	@media (max-width: 420px) {
		.site-nav-link.is-tertiary {
			display: none;
		}
	}
}




/* Page blocks built on Glass; same marker scope. */
/* ./theme/site/index.css */
/*
 * Bud Glass site blocks: one file per page block, root class = file stem.
 * Every rule sits inside :where(:root:has([data-glass])) and uses Glass tokens only.
 */
/* ./auth-user-menu.css */
/* The header's account control: the signed-in avatar (photo or initials) in a glass circle. */
:where(:root:has([data-glass])) {
	.auth-user-menu {
		.avatar {
			overflow: hidden;
			color: var(--color-label);
			font-size: var(--text-caption-size);
			font-weight: var(--font-weight-semibold);
			letter-spacing: 0.02em;

			img {
				width: 100%;
				height: 100%;
				border-radius: inherit;
				object-fit: cover;
			}
		}
	}
}


/* ./site-header-icons.css */
/* The header's trailing pair: the account control and the App Store mark, closer than the nav gap. */
:where(:root:has([data-glass])) {
	.site-header-icons {
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}
}


/* ./pwa.css */
/*
 * /pwa: the install panel (a drawn browser with its install control lit,
 * beside numbered steps) and the Safari panel's App Store link.
 * The page root takes no box, so its blocks keep the column's rhythm.
 */

:where(:root:has([data-glass])) {
	.pwa {
		display: contents;

		.pwa-safari-native {
			align-self: flex-start;

			.brand-mark {
				width: var(--size-icon-sm);
				height: var(--size-icon-sm);
			}
		}
	}

	/* One browser's panel: the drawing left, the steps right */
	.pwa-install {
		display: grid;
		grid-template-columns: var(--size-browser-mock) minmax(0, 1fr);
		align-items: center;
		gap: var(--space-8);
		padding: var(--space-2);

		@media (max-width: 640px) {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--space-5);
			padding: 0;
		}
	}

	.pwa-install-text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
		min-width: 0;
	}

	.pwa-install-platforms {
		margin: 0;
		color: var(--color-label-secondary);
		font-size: var(--text-caption-size);
		line-height: var(--text-caption-leading);
		font-weight: var(--text-caption-weight);
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}

	/* Numbered steps: a tinted number, then the sentence */
	.pwa-steps {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		margin: 0;
		padding: 0;
		list-style: none;
		counter-reset: pwa-step;

		li {
			display: grid;
			grid-template-columns: var(--size-control-sm) minmax(0, 1fr);
			align-items: baseline;
			gap: var(--space-3);
			font-size: var(--text-title3-size);
			line-height: var(--text-lede-leading);
			counter-increment: pwa-step;
			text-wrap: pretty;

			&::before {
				content: counter(pwa-step);
				display: grid;
				place-items: center;
				width: var(--size-control-sm);
				height: var(--size-control-sm);
				border-radius: var(--radius-full);
				background: color-mix(in srgb, var(--color-accent) 16%, transparent);
				color: var(--color-link);
				font-size: var(--text-subheadline-size);
				line-height: var(--text-subheadline-leading);
				font-weight: var(--font-weight-semibold);
				font-variant-numeric: tabular-nums;
			}
		}
	}

	/* The drawn browser */
	.browser-mock {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		width: 100%;
		max-width: var(--size-browser-mock);
		padding: var(--space-2);
		border-radius: var(--radius-lg);
		background: var(--color-background-window);
		box-shadow: 0 0 0 var(--size-border) var(--color-separator);
		color: var(--color-label-secondary);
		font-size: var(--text-subheadline-size);
		line-height: var(--text-subheadline-leading);

		&.is-phone {
			justify-self: center;
			width: calc(var(--size-browser-mock) * 0.66);
			border-radius: var(--radius-2xl);
			padding-top: var(--space-6);
		}

		@media (max-width: 640px) {
			justify-self: center;
		}
	}

	.browser-mock-bar {
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	.browser-mock-dots {
		display: flex;
		gap: var(--space-1);

		span {
			width: var(--size-dot);
			height: var(--size-dot);
			border-radius: var(--radius-full);
			background: var(--color-fill);
		}
	}

	.browser-mock-address {
		display: flex;
		flex: 1;
		align-items: center;
		gap: var(--space-1-5);
		min-width: 0;
		height: var(--size-control);
		padding: 0 var(--space-1) 0 var(--space-2);
		border-radius: var(--radius-full);
		background: var(--color-background-content);
		box-shadow: 0 0 0 var(--size-border) var(--color-separator);

		> .icon {
			flex-shrink: 0;
			width: var(--size-icon-sm);
			height: var(--size-icon-sm);
		}
	}

	.browser-mock-url {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* The control to press: lit in the accent, with a soft ring that breathes */
	.browser-mock-target {
		position: relative;
		display: grid;
		flex-shrink: 0;
		place-items: center;
		width: var(--size-control-sm);
		height: var(--size-control-sm);
		border-radius: var(--radius-full);
		background: color-mix(in srgb, var(--color-accent) 18%, transparent);
		color: var(--color-link);
		box-shadow: 0 0 0 var(--size-border)
			color-mix(in srgb, var(--color-accent) 55%, transparent);

		&::after {
			content: '';
			position: absolute;
			inset: 0;
			border-radius: inherit;
			box-shadow: 0 0 0 var(--space-1)
				color-mix(in srgb, var(--color-accent) 25%, transparent);
			opacity: 0;
		}

		.icon {
			width: var(--size-icon-sm);
			height: var(--size-icon-sm);
		}

		@media (prefers-reduced-motion: no-preference) {
			&::after {
				animation: browser-mock-ring var(--duration-pulse) var(--ease-spring)
					infinite;
			}
		}
	}

	/* Firefox's menu button is the vertical ⋮ */
	.browser-mock.is-firefox .browser-mock-target .icon {
		rotate: 90deg;
	}

	/* Desktop: the tooltip the address-bar icon shows */
	.browser-mock-tip {
		align-self: flex-end;
		padding: var(--space-1) var(--space-2);
		border-radius: var(--radius-sm);
		background: var(--color-background-content);
		box-shadow:
			0 0 0 var(--size-border) var(--color-separator),
			var(--material-solid-shadow);
		color: var(--color-label);
		font-weight: var(--font-weight-medium);
		white-space: nowrap;
	}

	/* Phone: the menu row the toolbar button opens */
	.browser-mock-menu {
		display: flex;
		flex-direction: column;
		padding: var(--space-1);
		border-radius: var(--radius-md);
		background: var(--color-background-content);
		box-shadow:
			0 0 0 var(--size-border) var(--color-separator),
			var(--material-solid-shadow);
	}

	.browser-mock-item {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-1-5) var(--space-2);
		border-radius: var(--radius-sm);
		background: color-mix(in srgb, var(--color-accent) 16%, transparent);
		color: var(--color-link);
		font-weight: var(--font-weight-medium);
		white-space: nowrap;

		.icon {
			flex-shrink: 0;
			width: var(--size-icon-sm);
			height: var(--size-icon-sm);
		}
	}

	/* A few lines of page behind the chrome */
	.browser-mock-page {
		display: flex;
		flex-direction: column;
		gap: var(--space-1-5);
		padding: var(--space-2) var(--space-1);

		span {
			height: var(--space-2);
			border-radius: var(--radius-full);
			background: var(--color-fill);

			&:nth-child(1) {
				width: 70%;
			}
			&:nth-child(2) {
				width: 90%;
			}
			&:nth-child(3) {
				width: 55%;
			}
		}
	}
}

/* The lit control's ring: in, out, in (only when motion is welcome) */
@keyframes browser-mock-ring {
	0%,
	100% {
		opacity: 0;
		scale: 0.9;
	}
	50% {
		opacity: 1;
		scale: 1.15;
	}
}


/* ./get-app.css */
/*
 * /get and /open: one solid card. The QR on the left; on the right, scan it
 * (or copy the link), then email yourself the link; the web app as its footer.
 * The page root takes no box, so the card keeps the column's rhythm.
 */

:where(:root:has([data-glass])) {
	.get-app {
		display: contents;

		.get-app-card {
			display: grid;
			grid-template-columns: var(--size-qr) minmax(0, 1fr);
			column-gap: var(--space-8);
			padding: var(--space-6);
			border-radius: var(--radius-md);
			background: var(--color-background-content);
			box-shadow: 0 0 0 var(--size-border) var(--color-separator);
		}

		.get-app-code {
			position: relative;
			flex-shrink: 0;
			width: var(--size-qr);
			aspect-ratio: 1;
		}

		.get-app-matrix {
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 1 / 1;
			image-rendering: pixelated;
		}

		/* The app icon over the code's center (error correction H keeps it readable) */
		.get-app-mark {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 26%;
			aspect-ratio: 1;
			translate: -50% -50%;
			overflow: hidden;
			border-radius: 22.5%;
			background: var(--color-background-content);
			box-shadow: 0 0 0 var(--space-1) var(--color-background-content);

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.get-app-steps {
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-width: 0;
		}

		/* Scan, then email: one hairline between, no headers of their own */
		.get-app-step {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: var(--space-2);

			& + .get-app-step {
				margin-top: var(--space-5);
				padding-top: var(--space-5);
				border-top: var(--size-border) solid var(--color-separator);
			}

			.get-app-mail {
				align-self: stretch;
			}
		}

		.get-app-step-title {
			margin: 0;
			font-size: var(--text-headline-size);
			line-height: var(--text-headline-leading);
			font-weight: var(--text-headline-weight);
		}

		/* The card's footer row: no iPhone, use the web app */
		.get-app-web {
			grid-column: 1 / -1;
			margin: var(--space-6) 0 0;
			padding-top: var(--space-4);
			border-top: var(--size-border) solid var(--color-separator);
			color: var(--color-label-secondary);
		}

		.get-app-mail {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-2);

			.field {
				flex: 1 1 var(--size-card-min);
				width: auto;
			}
		}

		/* Turnstile on its own line under the field: invisible, it takes no room; if it ever shows a challenge, it never covers the field */
		.get-app-turnstile {
			flex-basis: 100%;
			line-height: 0;

			&:empty {
				display: none;
			}
		}

		.get-app-note {
			display: flex;
			align-items: flex-start;
			gap: var(--space-1-5);
			margin: 0;
			color: var(--color-label-secondary);
			font-size: var(--text-subheadline-size);
			line-height: var(--text-copy-leading);

			.icon {
				flex-shrink: 0;
				margin-top: calc(var(--space-1) - var(--size-border));
			}

			&.is-sent {
				color: var(--color-label);

				.icon {
					color: var(--color-status-good);
				}
			}

			&.is-limited .icon {
				color: var(--color-status-warning);
			}

			&.is-failed .icon {
				color: var(--color-status-critical);
			}
		}

		@media (max-width: 560px) {
			.get-app-card {
				grid-template-columns: minmax(0, 1fr);
				row-gap: var(--space-5);
				padding: var(--space-4);
			}
		}
	}

	/* Both halves ship in the HTML; <html data-device> (set before paint) shows one. No device yet: the desktop half. Last, so it beats each half's own display. */
	&[data-device='phone'] .get-app-desktop,
	&:not([data-device='phone']) .get-app-phone {
		display: none;
	}
}


/* ./compare-page.css */
/*
 * /compare and /compare/{bot}: the bots' tables, marks, sourced claims and
 * footnotes. The page root takes no box, so its blocks keep the column's
 * rhythm. The raised CryptoBud column is the DS's (.compare, .is-raised).
 */

:where(:root:has([data-glass])) {
	.compare-page {
		display: contents;

		/* A competitor's app icon as a gray tile: marks never show brand color */
		.compare-logo {
			position: relative;
			display: inline-block;
			flex-shrink: 0;
			width: var(--size-tile);
			height: var(--size-tile);
			overflow: hidden;
			border-radius: var(--radius-sm);
			background: var(--color-fill);
		}
		/* A hairline over the icon keeps a dark tile's edge on a dark surface */
		.compare-logo::after {
			content: '';
			position: absolute;
			inset: 0;
			border-radius: inherit;
			box-shadow: inset 0 0 0 var(--size-border) var(--color-separator);
			pointer-events: none;
		}
		.compare-logo img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			filter: grayscale(1);
		}
		.icon-tile > .compare-logo {
			width: 100%;
			height: 100%;
		}
		.icon-tile > .logo {
			width: 100%;
			height: 100%;
		}

		/* Table heads: a small mark, then the name */
		.compare-head .compare-logo {
			width: var(--size-icon);
			height: var(--size-icon);
			border-radius: var(--radius-xs);
		}
		.compare-head .logo {
			width: var(--size-icon);
			height: var(--size-icon);
		}
		.compare-head-mark {
			display: inline-flex;
		}

		/* Yes, partial, no: a symbol in a status color, then the word */
		/* Relative: its hidden text stays inside a scrolled table, not past the page */
		.compare-score {
			display: inline-flex;
			align-items: center;
			gap: var(--space-1);
			white-space: nowrap;
		}
		.compare-score.is-yes .icon {
			color: var(--color-status-good);
		}
		.compare-score.is-partial .icon {
			color: var(--color-status-warning);
		}
		.compare-score.is-no .icon {
			color: var(--color-status-critical);
		}
		.compare-score-label {
			font-weight: var(--font-weight-medium);
		}

		/* Hub: every bot across, marks only, the mark over the name. On a phone
		   the table scrolls sideways under its axis column. Clip (not hidden),
		   so the column can stick inside the scroller. */
		.compare-matrix {
			overflow: clip;
		}
		.compare-matrix :is(thead, tbody) th:first-child {
			position: sticky;
			left: 0;
			z-index: 1;
			min-width: var(--size-compare-axis);
		}
		.compare-matrix thead th:first-child {
			background:
				linear-gradient(var(--color-fill), var(--color-fill)),
				var(--color-background-window);
		}
		.compare-matrix tbody th:first-child {
			background: var(--color-background-window);
		}
		.compare-matrix thead th:not(:first-child),
		.compare-matrix td {
			text-align: center;
			vertical-align: middle;
		}
		.compare-matrix .compare-head {
			flex-direction: column;
			gap: var(--space-1);
			white-space: nowrap;
		}
		.compare-matrix a.compare-head:hover {
			color: var(--color-link);
		}
		.compare-matrix tbody th {
			vertical-align: middle;
		}
		.compare-matrix tbody th a {
			color: var(--color-label);
		}
		.compare-matrix tbody th a:hover {
			color: var(--color-link);
		}
		/* A cell's bot, for the phone cards; the column head says it on a wide screen */
		.compare-matrix .compare-cell-head {
			display: none;
		}

		/* One bot: two equal columns, each axis a label row over both answers */
		.compare-vs {
			table-layout: fixed;
		}
		/* The label row keeps CryptoBud's half raised, so the column runs unbroken */
		.compare-vs .compare-axis-label {
			padding-bottom: 0;
			background: linear-gradient(
				to right,
				transparent 50%,
				color-mix(in srgb, var(--color-accent) 7%, transparent) 50%
			);
			color: var(--color-label-secondary);
			font-size: var(--text-caption-size);
			line-height: var(--text-caption-leading);
			font-weight: var(--text-caption-weight);
			letter-spacing: 0.02em;
			text-transform: uppercase;
		}
		.compare-vs tbody > tr + tr > * {
			border-top: 0;
			padding-top: var(--space-1-5);
		}
		.compare-cell {
			margin-top: var(--space-1);
			line-height: var(--text-copy-leading);
		}

		/* Footnotes: small accent numbers after a sentence */
		.compare-footnotes {
			margin-left: calc(var(--space-1) / 2);
			font-size: var(--text-caption-size);
			line-height: 0;
		}
		.compare-footnotes a {
			color: var(--color-link);
			font-variant-numeric: tabular-nums;
		}
		.compare-footnotes a:hover {
			text-decoration: underline;
		}

		/* What the marks mean, under a table */
		.compare-legend {
			display: flex;
			flex-direction: column;
			gap: var(--space-1);
			margin: 0;
			padding: 0;
			list-style: none;
			color: var(--color-label-secondary);
			font-size: var(--text-subheadline-size);
			line-height: var(--text-copy-leading);
		}
		.compare-legend li {
			display: grid;
			grid-template-columns: var(--space-16) minmax(0, 1fr);
			align-items: baseline;
			gap: var(--space-2);
		}
		.compare-legend .compare-score {
			color: var(--color-label);
		}

		/* Hub: one row per bot; the summary wraps instead of cutting off */
		.compare-list .row-subtitle {
			white-space: normal;
			line-height: var(--text-copy-leading);
		}
		.compare-list .row-title {
			font-weight: var(--font-weight-semibold);
		}
		.compare-list .row-leading {
			align-self: flex-start;
		}

		/* Hub: each axis card is a link target (/compare#mcp) */
		.compare-axis {
			display: grid;
			scroll-margin-top: var(--space-6);
		}

		/* A topic: the intro, then its sourced claims */
		.compare-claims {
			display: flex;
			flex-direction: column;
			gap: var(--space-2);
			font-size: var(--text-copy-size);
			line-height: var(--text-copy-leading);
			text-wrap: pretty;
		}
		.compare-claims ul {
			display: flex;
			flex-direction: column;
			gap: var(--space-1);
			margin: 0;
			padding-left: var(--space-5);
			color: var(--color-label-secondary);
		}
		:is(.compare-claims, .compare-cell, .card-body) a:not(.link-action) {
			color: var(--color-link);
		}
		:is(.compare-claims, .compare-cell, .card-body) a:not(.link-action):hover {
			text-decoration: underline;
			text-underline-offset: var(--space-1);
		}

		/* How we compare: what we skip and the sources, collapsed */
		.compare-method .disclosure-body {
			display: flex;
			flex-direction: column;
			gap: var(--space-2);
			padding: 0 var(--space-3) var(--space-3)
				calc(var(--space-3) + var(--size-icon-sm) + var(--space-1-5));
			font-size: var(--text-subheadline-size);
			line-height: var(--text-copy-leading);
		}
		.compare-skips {
			display: flex;
			flex-direction: column;
			gap: var(--space-1-5);
			margin: 0;
			padding: 0;
			list-style: none;
			color: var(--color-label-secondary);
		}
		.compare-skips strong {
			color: var(--color-label);
			font-weight: var(--font-weight-semibold);
		}
		.compare-sources-list {
			display: flex;
			flex-direction: column;
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.compare-sources-list li {
			display: flex;
			align-items: baseline;
			gap: var(--space-2);
			padding: var(--space-1) var(--space-2);
			margin-inline: calc(var(--space-2) * -1);
			border-radius: var(--radius-xs);
			scroll-margin-top: var(--space-6);
		}
		.compare-sources-list li:target {
			background: color-mix(in srgb, var(--color-accent) 12%, transparent);
		}
		.compare-sources-index {
			flex-shrink: 0;
			min-width: var(--space-4);
			color: var(--color-label-tertiary);
			text-align: right;
		}
		.compare-sources-list .link-action {
			display: inline;
			overflow-wrap: anywhere;
		}
		.compare-sources-list .link-action .icon {
			display: inline-block;
			margin-left: var(--space-1);
			vertical-align: middle;
		}

		/* The plan, the price, then the download links */
		/* Previous and next comparison */
		.compare-pager {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--space-2);
		}
		.compare-pager .card.is-next {
			grid-column: 2;
		}
	}

	/* Hub on a phone: no sideways scroll. Each axis is a card of the six bots,
	   two across and CryptoBud first; a cell is the bot, then the mark with
	   its sentence (the tooltip on a wide screen). */
	@media (max-width: 640px) {
		.compare-page {
			.compare-matrix {
				display: block;
				overflow: visible;
				border-radius: 0;
				box-shadow: none;
			}
			.compare-matrix thead {
				display: none;
			}
			.compare-matrix tbody {
				display: flex;
				flex-direction: column;
				gap: var(--space-2);
			}
			.compare-matrix tr {
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: var(--space-1);
				padding: var(--space-2);
				border-radius: var(--radius-lg);
				background: var(--color-background-content);
				box-shadow: 0 0 0 var(--size-border) var(--color-separator);
			}
			.compare-matrix tbody th:first-child {
				position: static;
				order: -2;
				grid-column: 1 / -1;
				min-width: 0;
				padding: var(--space-1) var(--space-2);
				border-top: 0;
				background: none;
				font-size: var(--text-headline-size);
				line-height: var(--text-headline-leading);
				font-weight: var(--text-headline-weight);
			}
			.compare-matrix td {
				display: flex;
				flex-direction: column;
				gap: var(--space-1);
				padding: var(--space-2);
				border-top: 0;
				/* Concentric: the card's corner minus its padding */
				border-radius: var(--radius-xs);
				text-align: left;
				vertical-align: top;
			}
			.compare-matrix td.is-raised {
				order: -1;
			}
			.compare-matrix .compare-cell-head {
				display: flex;
				align-items: center;
				gap: var(--space-1-5);
				min-width: 0;
				color: var(--color-label);
				font-weight: var(--font-weight-medium);
			}
			.compare-matrix .compare-cell-head .compare-logo,
			.compare-matrix .compare-cell-head .logo {
				width: var(--size-icon);
				height: var(--size-icon);
				border-radius: var(--radius-xs);
			}
			.compare-matrix .compare-score {
				display: grid;
				grid-template-columns: auto minmax(0, 1fr);
				align-items: start;
				gap: var(--space-1-5);
				white-space: normal;
			}
			.compare-matrix .compare-score .icon {
				margin-top: calc((var(--text-body-leading) - var(--size-icon-sm)) / 2);
			}
			.compare-matrix .compare-score-note {
				position: static;
				width: auto;
				height: auto;
				overflow: visible;
				clip-path: none;
				white-space: normal;
				color: var(--color-label-secondary);
				text-wrap: pretty;
			}
		}
	}

	@media (max-width: 560px) {
		.compare-page {
			.compare-pager {
				grid-template-columns: minmax(0, 1fr);
			}
			.compare-pager .card.is-next {
				grid-column: 1;
			}
		}
	}
}


/* ./checkout.css */
/*
 * /checkout: plan cards (a check, the period, the price, what it saves against
 * the App Store), the billing terms under them, then the next step: the pay
 * action, or the sign-in card. The picked card takes the accent. Every block
 * starts at the column's edge; inside a card, the words hang after the check.
 */
:where(:root:has([data-glass])) {
	.checkout {
		display: flex;
		flex-direction: column;
		gap: var(--space-10);
		min-width: 0;

		.plans {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: var(--space-2);
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.plans > li {
			display: flex;
			min-width: 0;
		}

		.plan {
			display: grid;
			grid-template-columns: var(--size-icon) minmax(0, 1fr);
			grid-template-areas:
				'check head'
				'. price'
				'. store';
			align-content: start;
			align-items: center;
			column-gap: var(--space-2);
			width: 100%;
			padding: var(--space-4);
			border-radius: var(--radius-lg);
			background: var(--color-background-content);
			box-shadow: 0 0 0 var(--size-border) var(--color-separator);
			transition: box-shadow var(--duration-fast) var(--ease-spring);
			color: var(--color-label);
			text-align: left;
			transition:
				background-color var(--duration-fast) var(--ease-spring),
				box-shadow var(--duration-fast) var(--ease-spring);
		}

		.plan:hover {
			background: color-mix(
				in srgb,
				var(--color-background-content) 94%,
				var(--color-label)
			);
		}

		.plan:focus-visible {
			outline: var(--size-focus-ring) solid var(--color-focus);
			outline-offset: var(--size-border);
		}

		/* Picked: the same ring a focused text field wears (accent hairline, soft focus halo) */
		.plan.is-selected {
			box-shadow:
				0 0 0 var(--size-border) var(--color-accent),
				0 0 0 var(--size-focus-ring) var(--color-focus);
		}

		/* The radio: a hairline ring, filled with the accent and a check once picked */
		.plan-check {
			grid-area: check;
			display: inline-grid;
			place-items: center;
			width: var(--size-icon);
			height: var(--size-icon);
			border-radius: var(--radius-full);
			box-shadow: inset 0 0 0 var(--size-border) var(--color-label-tertiary);
			color: transparent;
			transition:
				background-color var(--duration-fast) var(--ease-spring),
				box-shadow var(--duration-fast) var(--ease-spring);

			.icon {
				width: calc(var(--size-icon-sm) - var(--size-border) * 2);
				height: calc(var(--size-icon-sm) - var(--size-border) * 2);
				stroke-width: 2.25;
			}
		}

		.plan.is-selected .plan-check {
			background: var(--color-accent);
			box-shadow: none;
			color: var(--color-on-accent);
		}

		.plan-head {
			grid-area: head;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-1) var(--space-2);
			min-width: 0;
		}

		.plan-label {
			font-size: var(--text-headline-size);
			line-height: var(--text-headline-leading);
			font-weight: var(--text-headline-weight);
		}

		.plan-badge {
			padding: 0 var(--space-1-5);
			border-radius: var(--radius-full);
			background: var(--color-fill);
			color: var(--color-label-secondary);
			font-size: var(--text-caption-size);
			line-height: var(--text-headline-leading);
			font-weight: var(--text-caption-weight);
			white-space: nowrap;
		}

		/* Price and period on one baseline; the row keeps its height while the wheel spins */
		.plan-price {
			grid-area: price;
			display: flex;
			align-items: baseline;
			gap: var(--space-1);
			min-height: var(--text-title-leading);
			margin-top: var(--space-3);
		}

		.plan-price:has(.plan-price-spinner) {
			align-items: center;
		}

		.plan-amount {
			display: inline-flex;
			font-size: var(--text-title-size);
			line-height: var(--text-title-leading);
			font-weight: var(--font-weight-semibold);
			letter-spacing: var(--text-page-title-tracking);
		}

		.plan-each {
			color: var(--color-label-secondary);
			font-size: var(--text-subheadline-size);
			line-height: var(--text-subheadline-leading);
		}

		/* Room for the saving before the catalog lands, so nothing moves */
		.plan-store {
			grid-area: store;
			min-height: var(--text-subheadline-leading);
			margin-top: var(--space-1);
			color: var(--color-label-secondary);
			font-size: var(--text-subheadline-size);
			line-height: var(--text-subheadline-leading);
		}

		/* Billing terms: short facts behind gray symbols, two across */
		.terms {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--space-2) var(--space-6);
			margin: var(--space-1) 0 0;
			padding: 0;
			list-style: none;
			color: var(--color-label-secondary);
			font-size: var(--text-subheadline-size);
			line-height: var(--text-subheadline-leading);

			li {
				display: flex;
				align-items: flex-start;
				gap: var(--space-2);
				min-width: 0;
			}

			.icon {
				margin-top: calc(
					(var(--text-subheadline-leading) - var(--size-icon-sm)) / 2
				);
			}
		}

		.actions {
			margin-top: var(--space-3);
		}

		/* Sign in: one solid card, the plan it continues, the two providers side by side */
		.sign-in {
			display: flex;
			flex-direction: column;
			gap: var(--space-4);
			padding: var(--space-5);
			border-radius: var(--radius-lg);
			background: var(--color-background-content);
			box-shadow: 0 0 0 var(--size-border) var(--color-separator);
		}

		.sign-in-head {
			display: flex;
			flex-direction: column;
			gap: var(--space-1);
		}

		.sign-in-title {
			margin: 0;
			font-size: var(--text-title3-size);
			line-height: var(--text-title3-leading);
			font-weight: var(--text-title3-weight);
		}

		.sign-in-lede {
			margin: 0;
			color: var(--color-label-secondary);
			font-size: var(--text-body-size);
			line-height: var(--text-body-leading);
		}

		.sign-in .checkout-sign-in {
			flex-direction: row;
			width: 100%;

			> * {
				flex: 1 1 0;
				min-width: 0;
			}
		}

		.sign-in-hint {
			display: flex;
			align-items: flex-start;
			gap: var(--space-2);
			margin: 0;
			padding-top: var(--space-4);
			border-top: var(--size-border) solid var(--color-separator);
			color: var(--color-label-secondary);
			font-size: var(--text-subheadline-size);
			line-height: var(--text-subheadline-leading);

			.icon {
				margin-top: calc(
					(var(--text-subheadline-leading) - var(--size-icon-sm)) / 2
				);
			}
		}

		/* What you get: two across, the same rhythm as the terms */
		.check-list {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--space-2) var(--space-6);
			line-height: var(--text-subheadline-leading);
		}

		.check-list-icon {
			margin-top: calc(
				(var(--text-subheadline-leading) - var(--size-icon-sm)) / 2
			);
		}

		@media (max-width: 560px) {
			.plans {
				grid-template-columns: minmax(0, 1fr);
			}

			/* A row: check, period, the price at the end; the saving under them */
			.plan {
				grid-template-columns: var(--size-icon) minmax(0, 1fr) auto;
				grid-template-areas:
					'check head price'
					'. store store';
				row-gap: var(--space-1);
				padding: var(--space-3) var(--space-4);
			}

			.plan-head {
				justify-content: flex-start;
			}

			.plan-price {
				justify-content: flex-end;
				margin-top: 0;
			}

			.plan-store {
				margin-top: 0;
			}

			.terms,
			.check-list {
				grid-template-columns: minmax(0, 1fr);
			}

			.actions .pay {
				width: 100%;
			}

			.sign-in {
				padding: var(--space-4);
			}

			.sign-in .checkout-sign-in {
				flex-direction: column;

				> * {
					flex: none;
				}
			}
		}
	}
}


/* ./checkout-notice.css */
/* Checkout and box setup feedback in place: the symbol carries the status color, the words stay label. */
:where(:root:has([data-glass])) {
	.checkout-notice {
		display: flex;
		align-items: flex-start;
		gap: var(--space-1-5);
		color: var(--color-label);
		font-size: var(--text-subheadline-size);
		line-height: var(--text-subheadline-leading);

		.icon {
			margin-top: calc(var(--space-1) / 4);
		}

		&.is-good .icon {
			color: var(--color-status-good);
		}

		&.is-warning .icon {
			color: var(--color-status-warning);
		}

		&.is-critical .icon {
			color: var(--color-status-critical);
		}
	}
}


/* ./checkout-sheet.css */
/* Stripe's embedded checkout in the Glass Sheet: a little wider, and its body scrolls. */
:where(:root:has([data-glass])) {
	.checkout-sheet {
		width: min(100%, calc(var(--size-sheet) + var(--space-16)));
		max-height: calc(100dvh - var(--space-8));

		/* Stripe's frame hangs out by a focus ring on every side; the body makes room for it so nothing scrolls sideways */
		.sheet-body {
			flex: 1;
			min-height: 0;
			margin: calc(var(--space-1) * -1);
			padding: var(--space-1);
			overflow-y: auto;
		}

		.stripe-embed {
			display: flex;
			flex-direction: column;
			min-height: 0;

			> * {
				flex: 1;
				min-height: 0;
			}
		}
	}
}


/* ./checkout-sign-in.css */
/*
 * Sign in with Apple or Google: glass capsules stacked, full width of a
 * popover-wide column. Google's own button sits on top of ours, invisible,
 * so a click reaches its popup (gis-prompt.css stops a dead one).
 */
:where(:root:has([data-glass])) {
	.checkout-sign-in {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		width: min(100%, var(--size-popover));

		.btn {
			width: 100%;
		}

		.auth-google {
			position: relative;
		}

		.auth-google:focus-visible {
			outline: var(--size-focus-ring) solid var(--color-focus);
			outline-offset: var(--size-border);
		}

		.auth-google.is-disabled {
			opacity: var(--opacity-disabled);
			pointer-events: none;
		}

		.auth-google-gis {
			position: absolute;
			inset: 0;
			z-index: 1;
			overflow: hidden;
			border-radius: inherit;
			opacity: 0.01;

			> div,
			iframe {
				width: 100% !important;
				height: 100% !important;
			}
		}

		.auth-google-face {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: var(--space-1-5);
			pointer-events: none;
		}
	}
}


/* ./plan-price-spinner.css */
/* The Mac activity wheel: twelve spokes fading in turn, at icon size. A fade, not motion, so it stays under Reduce Motion. */
:where(:root:has([data-glass])) {
	.plan-price-spinner {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		vertical-align: middle;
		color: var(--color-label-secondary);

		.wheel {
			position: relative;
			width: var(--size-icon);
			height: var(--size-icon);
		}

		.wheel > span {
			position: absolute;
			inset: 0;
			animation: plan-price-spinner-spoke 1s linear infinite;
		}

		.wheel > span::after {
			content: '';
			position: absolute;
			top: 0;
			left: calc(50% - var(--size-border));
			width: calc(var(--size-border) * 2);
			height: var(--space-1-5);
			border-radius: var(--radius-full);
			background: currentColor;
		}
	}
}

/* Keyframes can't nest; the name is only used inside the scope above. */
@keyframes plan-price-spinner-spoke {
	from {
		opacity: 1;
	}
	to {
		opacity: 0.15;
	}
}


/* ./box-setup.css */
/*
 * /checkout/setup: budget slider and username, then the style; the build's
 * progress; the ready box's details. Glass tokens only.
 */
:where(:root:has([data-glass])) {
	.box-setup {
		display: flex;
		flex-direction: column;
		gap: var(--space-10);
		min-width: 0;

		.box-setup-loading {
			display: flex;
			align-items: center;
			gap: var(--space-2);
		}

		.box-setup-form,
		.box-setup-ready,
		.box-setup-error {
			display: flex;
			flex-direction: column;
			gap: var(--space-8);
			min-width: 0;
		}

		.box-setup-error {
			gap: var(--space-4);
		}

		/* Budget: the amount over a Mac slider, the ends of the ladder under it */
		.box-setup-budget {
			display: flex;
			flex-direction: column;
			gap: var(--space-2);
			padding: var(--space-4);
			border-radius: var(--radius-md);
			background: var(--color-background-content);
			box-shadow: 0 0 0 var(--size-border) var(--color-separator);
		}

		.box-setup-budget-value {
			font-size: var(--text-title-size);
			line-height: var(--text-title-leading);
			font-weight: var(--font-weight-semibold);
			letter-spacing: var(--text-page-title-tracking);
		}

		.box-setup-budget-scale {
			display: flex;
			justify-content: space-between;
			color: var(--color-label-tertiary);
			font-size: var(--text-caption-size);
			line-height: var(--text-caption-leading);
		}

		.box-setup-range {
			--box-setup-track: var(--space-1);
			--box-setup-thumb: var(--size-control-sm);

			display: block;
			width: 100%;
			height: var(--box-setup-thumb);
			margin: 0;
			padding: 0;
			border: 0;
			background: transparent;
			appearance: none;
			-webkit-appearance: none;

			&::-webkit-slider-runnable-track {
				height: var(--box-setup-track);
				border-radius: var(--radius-full);
				background: linear-gradient(
					to right,
					var(--color-accent) 0 var(--box-setup-fill),
					var(--color-fill) var(--box-setup-fill) 100%
				);
			}

			&::-webkit-slider-thumb {
				width: var(--box-setup-thumb);
				height: var(--box-setup-thumb);
				margin-top: calc((var(--box-setup-track) - var(--box-setup-thumb)) / 2);
				border: 0;
				border-radius: var(--radius-full);
				background: var(--color-on-accent);
				box-shadow:
					0 0 0 var(--size-border) var(--color-separator),
					var(--material-glass-prominent-shadow);
				appearance: none;
				-webkit-appearance: none;
			}

			&::-moz-range-track {
				height: var(--box-setup-track);
				border: 0;
				border-radius: var(--radius-full);
				background: var(--color-fill);
			}

			&::-moz-range-progress {
				height: var(--box-setup-track);
				border-radius: var(--radius-full);
				background: var(--color-accent);
			}

			&::-moz-range-thumb {
				width: var(--box-setup-thumb);
				height: var(--box-setup-thumb);
				border: 0;
				border-radius: var(--radius-full);
				background: var(--color-on-accent);
				box-shadow:
					0 0 0 var(--size-border) var(--color-separator),
					var(--material-glass-prominent-shadow);
			}

			&:focus-visible {
				outline: none;
			}

			&:focus-visible::-webkit-slider-thumb {
				box-shadow:
					0 0 0 var(--size-border) var(--color-accent),
					0 0 0 var(--size-focus-ring) var(--color-focus);
			}

			&:focus-visible::-moz-range-thumb {
				box-shadow:
					0 0 0 var(--size-border) var(--color-accent),
					0 0 0 var(--size-focus-ring) var(--color-focus);
			}
		}

		/* Username: one field, the handle typed, .bud.trading after it */
		.box-setup-username {
			display: flex;
			align-items: center;
			width: min(100%, var(--size-popover));
			border-radius: var(--radius-sm);
			background: var(--color-background-content);
			box-shadow: 0 0 0 var(--size-border) var(--color-separator);
			transition: box-shadow var(--duration-fast) var(--ease-spring);

			&:focus-within {
				box-shadow:
					0 0 0 var(--size-border) var(--color-accent),
					0 0 0 var(--size-focus-ring) var(--color-focus);
			}

			.field {
				flex: 1;
				background: transparent;
				box-shadow: none;
			}

			.field:focus-visible {
				box-shadow: none;
			}
		}

		.box-setup-domain {
			flex-shrink: 0;
			padding-right: var(--space-2);
			color: var(--color-label-secondary);
		}

		.box-setup-hint {
			display: flex;
			align-items: center;
			gap: var(--space-1-5);
			min-height: var(--text-subheadline-leading);
			font-size: var(--text-subheadline-size);
			line-height: var(--text-subheadline-leading);
		}

		/* Style: the choice grid's panel holds the blurb and the live preview */
		.box-setup-style .choice-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.box-setup-preview {
			display: flex;
			flex-direction: column;
			gap: var(--space-3);
			min-width: 0;
		}

		.box-setup-coins {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: var(--space-1-5);
		}

		.box-setup-coin {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			overflow: hidden;
			width: var(--space-6);
			height: var(--space-6);
			border-radius: var(--radius-full);
			background: var(--color-fill);
			color: var(--color-label-secondary);
			font-size: var(--text-caption-size);
			font-weight: var(--font-weight-semibold);
			line-height: 1;
			text-transform: uppercase;
			object-fit: cover;
			user-select: none;

			&.is-image {
				display: block;
			}
		}

		.box-setup-bars {
			display: flex;
			align-items: flex-end;
			gap: var(--size-border);
			width: 100%;
			height: var(--space-12);
		}

		.box-setup-bar {
			flex: 1 1 0;
			min-width: var(--size-border);
			border-radius: var(--radius-xs) var(--radius-xs) 0 0;

			&.is-up {
				background: var(--color-status-good);
			}

			&.is-down {
				background: var(--color-status-critical);
			}
		}

		.box-setup-preview .is-up {
			color: var(--color-status-good);
		}

		.box-setup-preview .is-down {
			color: var(--color-status-critical);
		}

		/* Provision: a thin accent bar, then the build's steps in order */
		.box-setup-provision {
			display: flex;
			flex-direction: column;
			gap: var(--space-4);
			padding: var(--space-4);
			border-radius: var(--radius-md);
			background: var(--color-background-content);
			box-shadow: 0 0 0 var(--size-border) var(--color-separator);
		}

		.box-setup-progress-row {
			display: flex;
			align-items: center;
			gap: var(--space-3);
		}

		.box-setup-progress {
			flex: 1;
			height: var(--space-1);
			overflow: hidden;
			border-radius: var(--radius-full);
			background: var(--color-fill);

			> span {
				display: block;
				height: 100%;
				border-radius: inherit;
				background: var(--color-accent);
				transition: width var(--duration-base) var(--ease-spring);
			}
		}

		.box-setup-progress-percent {
			color: var(--color-label-secondary);
			font-size: var(--text-subheadline-size);
			line-height: var(--text-subheadline-leading);
		}

		.box-setup-stages {
			display: flex;
			flex-direction: column;
			gap: var(--space-2);
			margin: 0;
			padding: 0;
			list-style: none;

			li {
				display: flex;
				align-items: center;
				gap: var(--space-2);
				color: var(--color-label-tertiary);
			}

			li.is-done,
			li.is-current {
				color: var(--color-label);
			}

			li.is-done .icon {
				color: var(--color-status-good);
			}

			.icon,
			.plan-price-spinner .wheel {
				width: var(--size-icon-sm);
				height: var(--size-icon-sm);
			}
		}

		.box-setup-stage-dot {
			display: inline-flex;
			flex-shrink: 0;
			width: var(--size-icon-sm);
			height: var(--size-icon-sm);
			border-radius: var(--radius-full);
			box-shadow: inset 0 0 0 var(--size-border) var(--color-label-tertiary);
		}

		/* Ready: the box's details in rows, mono values, copy at the end */
		.box-setup-ready code {
			font-family: var(--font-mono);
			font-size: var(--text-subheadline-size);
		}

		.box-setup-ready code.is-masked {
			letter-spacing: 0.08em;
		}

		.box-setup-ready .setup-cred-copy.is-copied {
			color: var(--color-status-good);
		}

		@media (max-width: 560px) {
			.box-setup-username {
				width: 100%;
			}
		}
	}
}


/* ./native-google-auth.css */
/* /auth/native: one solid card in the middle of the window, then back to the Bud app. */
:where(:root:has([data-glass])) {
	.native-google-auth {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100dvh;
		padding: var(--space-6) var(--space-4);

		.native-google-auth-card {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--space-3);
			width: min(100%, calc(var(--size-popover) + var(--space-12)));
			padding: var(--space-8) var(--space-6) var(--space-6);
			border-radius: var(--radius-2xl);
			background: var(--material-solid-background);
			box-shadow:
				0 0 0 var(--size-border) var(--material-solid-border),
				var(--material-glass-shadow);
			text-align: center;
		}

		.logo {
			margin-bottom: var(--space-2);
		}

		.native-google-auth-title {
			font-size: var(--text-title3-size);
			line-height: var(--text-title3-leading);
			font-weight: var(--text-title3-weight);
		}

		.checkout-sign-in {
			margin-top: var(--space-2);
		}

		.checkout-notice {
			text-align: left;
		}
	}
}


/* ./prose.css */
/*
 * Reading: help articles, legal, MCP (statuz.app prose). Markdown's own
 * elements only; blocks embedded in markdown (the Loop/Path/Lock diagrams)
 * keep their own type and spacing.
 */
:where(:root:has([data-glass])) {
	.prose {
		min-width: 0;
		font-size: var(--text-copy-size);
		line-height: var(--text-copy-leading);
		text-wrap: pretty;

		> :first-child,
		div > :first-child {
			margin-top: 0;
		}

		> :last-child {
			margin-bottom: 0;
		}

		:where(:not(.diagram *)) {
			&:is(p, ul, ol, blockquote, .code, .copy-field, .table-block, .diagram) {
				margin: 0 0 var(--space-4);
			}

			&:is(h2) {
				margin: var(--space-8) 0 var(--space-2);
				font-size: var(--text-title3-size);
				line-height: var(--text-title3-leading);
				font-weight: var(--text-title3-weight);
			}

			&:is(h3) {
				margin: var(--space-6) 0 var(--space-2);
				font-size: var(--text-headline-size);
				line-height: var(--text-headline-leading);
				font-weight: var(--text-headline-weight);
			}

			&:is(h4) {
				margin: var(--space-4) 0 var(--space-1);
				font-weight: var(--font-weight-semibold);
			}

			&:is(h2, h3, h4):first-child {
				margin-top: 0;
			}

			&:is(ul, ol) {
				padding-left: var(--space-5);
			}

			&:is(li + li) {
				margin-top: var(--space-1);
			}

			&:is(li > ul, li > ol) {
				margin: var(--space-1) 0 0;
			}

			&:is(a:not([class])) {
				color: var(--color-link);
			}

			&:is(a:not([class])):hover {
				text-decoration: underline;
				text-underline-offset: var(--space-1);
			}

			/* A link to another site ends with ↗: it leaves cryptobud.app */
			&:is(a:not([class])) .link-arrow {
				display: inline-block;
				width: var(--size-icon-sm);
				height: var(--size-icon-sm);
				margin-left: calc(var(--space-1) / 2);
				vertical-align: baseline;
			}

			&:is(blockquote) {
				padding-left: var(--space-3);
				border-left: var(--size-focus-ring) solid var(--color-separator);
				color: var(--color-label-secondary);
			}

			&:is(hr) {
				margin: var(--space-6) 0;
				border: 0;
				border-top: var(--size-border) solid var(--color-separator);
			}

			&:is(strong) {
				font-weight: var(--font-weight-semibold);
			}
		}

		.code-body {
			font-size: var(--text-subheadline-size);
			line-height: var(--text-copy-leading);
			tab-size: 2;
		}

		/* A plain text fence (a URL to paste) wraps instead of scrolling */
		.code:not(.is-highlighted) .code-body {
			white-space: pre-wrap;
			overflow-wrap: anywhere;
		}

		/* `<div className="agents">` in markdown: for agents, who read /mcp.md */
		.agents {
			display: none;
		}
	}
}


/* ./heading-link.css */
/* HeadingLink: a heading with an id and a trailing permalink that copies itself */
:where(:root:has([data-glass])) {
	.heading-link {
		scroll-margin-top: var(--space-6);

		.anchor {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: var(--size-icon-lg);
			height: var(--size-icon-lg);
			margin-left: var(--space-1);
			border-radius: var(--radius-xs);
			color: var(--color-label-tertiary);
			vertical-align: middle;
			opacity: 0;
			transition:
				opacity var(--duration-fast) var(--ease-spring),
				color var(--duration-fast) var(--ease-spring),
				background-color var(--duration-fast) var(--ease-spring);
		}

		.anchor:hover {
			background: var(--color-fill);
			color: var(--color-label);
		}

		.anchor.is-copied {
			color: var(--color-status-good);
		}

		.anchor:focus-visible {
			outline: var(--size-focus-ring) solid var(--color-focus);
		}

		&:hover .anchor,
		.anchor:focus-visible,
		.anchor.is-copied {
			opacity: 1;
		}
	}

	@media (hover: none) {
		.heading-link .anchor {
			opacity: 1;
		}
	}
}


/* ./diagram.css */
/*
 * Loop, Path and Lock: small diagrams inside markdown. One solid card with a
 * faint accent glow, glass nodes, wires between them, a caption. Accent for
 * what goes through and for motion; status red only for what Lock refuses.
 *
 * The server HTML is the finished, still picture, and so is every diagram
 * under Reduce Motion. Motion comes from two attributes set after hydration
 * (lib/useDiagramMotion.ts): [data-enter] (it was off screen at load: the
 * first time it shows, the nodes rise in and the wires draw) and [data-live]
 * (on screen: the idle loop runs; off screen it stops). Only transform,
 * opacity, stroke-dashoffset and offset-distance move. One round of a loop is
 * --duration-diagram, its rest included, and a moment in it is a fraction of
 * that round (the --*-at properties). Pointing at a node holds the round:
 * the loop stops, the node lights, and what it is not wired to steps back.
 */
:where(:root:has([data-glass])) {
	.diagram {
		--wire: calc(var(--size-border) * 2);
		--wire-color: color-mix(
			in srgb,
			var(--color-label-tertiary) 60%,
			transparent
		);
		--wire-lit: color-mix(in srgb, var(--color-accent) 70%, transparent);
		--glow: var(--color-accent);

		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		margin: 0;
		padding: var(--space-4);
		border-radius: var(--radius-xl);
		background:
			radial-gradient(
				ellipse 70% 100% at 50% 0%,
				color-mix(in srgb, var(--color-accent) 7%, transparent),
				transparent 70%
			),
			var(--color-background-content);
		box-shadow: 0 0 0 var(--size-border) var(--color-separator);

		.steps,
		.branches {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		/* The glass a node sits on, and its two glow layers (dark until something lands) */
		&:is([data-kind='lock'], [data-kind='path']) .node,
		&[data-kind='loop'] .copy {
			position: relative;
			border-radius: var(--radius-lg);
			background: var(--material-glass-background);
			-webkit-backdrop-filter: var(--material-glass-filter);
			backdrop-filter: var(--material-glass-filter);
			box-shadow:
				var(--material-glass-highlight),
				0 0 0 var(--size-border) var(--color-separator),
				var(--material-glass-shadow);
			transition:
				opacity var(--duration-base) var(--ease-spring),
				scale var(--duration-base) var(--ease-spring);

			&::before,
			&::after {
				content: '';
				position: absolute;
				inset: 0;
				border-radius: inherit;
				background: color-mix(in srgb, var(--glow) 7%, transparent);
				box-shadow:
					0 0 0 var(--size-border)
						color-mix(in srgb, var(--glow) 70%, transparent),
					0 0 var(--space-4) color-mix(in srgb, var(--glow) 35%, transparent);
				opacity: 0;
				pointer-events: none;
				transition: opacity var(--duration-base) var(--ease-spring);
			}
		}

		/* Pointing at a node lights it (Loop holds a step from Loop.tsx instead) */
		&:is([data-kind='lock'], [data-kind='path']) .node:hover::after {
			opacity: 1;
		}

		.node {
			display: flex;
			align-items: center;
			gap: var(--space-2);
			min-width: 0;
			padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
		}

		.copy {
			display: flex;
			flex-direction: column;
			gap: calc(var(--space-1) / 2);
			min-width: 0;
		}

		strong {
			color: var(--color-label);
			font-size: var(--text-headline-size);
			line-height: var(--text-headline-leading);
			font-weight: var(--text-headline-weight);
		}

		.detail {
			color: var(--color-label-secondary);
			font-size: var(--text-subheadline-size);
			line-height: var(--text-subheadline-leading);
		}

		.caption {
			display: flex;
			align-items: center;
			gap: var(--space-1-5);
			color: var(--color-label-secondary);
			font-size: var(--text-subheadline-size);
			line-height: var(--text-subheadline-leading);
		}

		.caption .icon {
			flex-shrink: 0;
			color: var(--color-label-tertiary);
		}

		/*
		 * Lock: the key on top, a fork, what it may do beside what is refused.
		 * The fork is a trunk and two elbows (borders); a barrier sits halfway
		 * along the refused one. The fork is a size container, so a pulse can
		 * travel to a branch's middle in cqw.
		 */
		&[data-kind='lock'] {
			--fork: var(--space-12);
			--split: var(--space-3);
			/* From the trunk across to a branch's middle, and to the barrier (halfway) */
			--reach: calc(25cqw + var(--split) / 4);
			--to-barrier: calc(12.5cqw + var(--split) / 8);
			/* The round (the pulse keyframes keep these moments) */
			--order-leaves: 0.1;
			--order-lands: 0.33;
			--withdraw-leaves: 0.52;
			--withdraw-stops: 0.64;

			.steps {
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				column-gap: var(--split);
			}

			.origin {
				grid-column: 1 / -1;
				justify-self: center;
				width: calc((100% - var(--split)) / 2);
			}

			.branches {
				grid-column: 1 / -1;
				display: grid;
				grid-template-columns: subgrid;
			}

			.fork {
				grid-column: 1 / -1;
				position: relative;
				height: var(--fork);
				container-type: inline-size;
			}

			.wire {
				position: absolute;
				transition: opacity var(--duration-base) var(--ease-spring);
			}

			.trunk {
				top: 0;
				left: calc(50% - var(--wire) / 2);
				width: var(--wire);
				height: calc(50% + var(--wire) / 2);
				border-radius: var(--radius-full);
				background: var(--wire-color);
				transform-origin: 50% 0%;
			}

			.wire.allow,
			.wire.deny {
				top: calc(50% - var(--wire) / 2);
				bottom: 0;
				border-style: solid;
				border-width: var(--wire) 0 0;
			}

			.wire.allow {
				left: calc(50% - var(--reach) - var(--wire) / 2);
				right: calc(50% - var(--wire) / 2);
				border-left-width: var(--wire);
				border-color: var(--wire-lit);
				border-top-left-radius: var(--radius-md);
				transform-origin: 100% 0%;
			}

			.wire.deny {
				left: calc(50% - var(--wire) / 2);
				right: calc(50% - var(--reach) - var(--wire) / 2);
				border-right-width: var(--wire);
				border-style: dashed;
				border-color: color-mix(
					in srgb,
					var(--color-status-critical) 60%,
					transparent
				);
				border-top-right-radius: var(--radius-md);
				transform-origin: 0% 0%;
			}

			.barrier {
				position: absolute;
				top: 50%;
				left: calc(50% + var(--to-barrier));
				display: grid;
				place-items: center;
				width: var(--size-control-sm);
				height: var(--size-control-sm);
				margin: calc(var(--size-control-sm) / -2) 0 0
					calc(var(--size-control-sm) / -2);
				border-radius: var(--radius-full);
				background: var(--color-background-content);
				box-shadow: 0 0 0 var(--size-border)
					color-mix(in srgb, var(--color-status-critical) 45%, transparent);
				color: var(--color-status-critical);
				transition: opacity var(--duration-base) var(--ease-spring);

				/* ::before bursts when a withdrawal hits; ::after is the flare */
				&::before,
				&::after {
					content: '';
					position: absolute;
					inset: 0;
					border-radius: inherit;
					opacity: 0;
					pointer-events: none;
				}

				&::before {
					box-shadow: 0 0 0 var(--wire) var(--color-status-critical);
				}

				&::after {
					box-shadow: 0 0 var(--space-3) var(--space-1)
						color-mix(in srgb, var(--color-status-critical) 40%, transparent);
					transition: opacity var(--duration-base) var(--ease-spring);
				}
			}

			.pulse {
				--dot-fill: var(--color-accent);
				position: absolute;
				top: 0;
				left: 50%;
				width: var(--size-dot);
				height: var(--size-dot);
				margin: calc(var(--size-dot) / -2) 0 0 calc(var(--size-dot) / -2);
				border-radius: var(--radius-full);
				background: var(--dot-fill);
				box-shadow: 0 0 0 var(--space-1)
					color-mix(in srgb, var(--dot-fill) 22%, transparent);
				opacity: 0;
			}

			.pulse.deny {
				--dot-fill: var(--color-status-critical);
			}

			.node.allow .icon-tile {
				background: color-mix(in srgb, var(--color-accent) 14%, transparent);
				color: var(--color-accent);
			}

			.node.deny {
				--glow: var(--color-status-critical);

				.icon-tile {
					background: color-mix(
						in srgb,
						var(--color-status-critical) 14%,
						transparent
					);
					color: var(--color-status-critical);
				}
			}

			/* Pointing at a branch: its wire lights, the other branch steps back */
			&:has(.node.allow:hover) :is(.wire.deny, .barrier, .node.deny),
			&:has(.node.deny:hover) :is(.wire.allow, .node.allow) {
				opacity: var(--opacity-dimmed);
			}

			&:has(.node:hover) .trunk,
			&:has(.node.allow:hover) .wire.allow {
				background: var(--wire-lit);
			}

			&:has(.node.allow:hover) .wire.allow {
				background: none;
				border-color: var(--color-accent);
			}

			&:has(.node.deny:hover) .barrier::after {
				opacity: 1;
			}
		}

		/*
		 * Path: node, link, node, link, node. A link is two lanes, each a wire
		 * with a pulse (a box the wire's size, moved by its own length) and the
		 * words that travel it: forward above, back below.
		 */
		&[data-kind='path'] {
			--dot-fill: var(--color-accent);

			.steps {
				display: grid;
				grid-template-columns:
					minmax(0, 1fr) minmax(var(--space-16), max-content) minmax(0, 1fr)
					minmax(var(--space-16), max-content) minmax(0, 1fr);
			}

			.link {
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: var(--space-1-5);
				max-width: calc(var(--size-sidebar) / 2);
				color: var(--color-label-secondary);
				font-size: var(--text-subheadline-size);
				line-height: var(--text-subheadline-leading);
				transition: opacity var(--duration-base) var(--ease-spring);
			}

			.to,
			.from {
				display: flex;
				flex-direction: column;
				gap: calc(var(--space-1) / 2);
			}

			.to {
				flex-direction: column-reverse;
			}

			.label {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: var(--space-1);
				padding: 0 var(--space-2);
				text-align: center;
			}

			.arrow {
				flex-shrink: 0;
				color: var(--color-label-tertiary);
			}

			.from .arrow {
				rotate: 180deg;
			}

			.wire {
				position: relative;
				height: var(--wire);
				border-radius: var(--radius-full);
				background: var(--wire-color);
				transform-origin: 0% 50%;
			}

			.pulse {
				--travel-x: 100%;
				--travel-y: 0%;
				position: absolute;
				inset: 0;
				opacity: 0;
				pointer-events: none;

				&::before {
					content: '';
					position: absolute;
					top: 50%;
					left: 0%;
					width: var(--size-dot);
					height: var(--size-dot);
					margin: calc(var(--size-dot) / -2) 0 0 calc(var(--size-dot) / -2);
					border-radius: var(--radius-full);
					background: var(--dot-fill);
					box-shadow: 0 0 0 var(--space-1)
						color-mix(in srgb, var(--dot-fill) 22%, transparent);
				}

				/* The tail it leaves on the wire */
				&::after {
					content: '';
					position: absolute;
					inset: 0 auto 0 0%;
					width: var(--space-6);
					margin-left: calc(var(--space-6) * -1);
					border-radius: var(--radius-full);
					background: linear-gradient(to right, transparent, var(--dot-fill));
				}
			}

			.from .pulse {
				--travel-x: -100%;

				&::before {
					left: 100%;
				}

				&::after {
					left: 100%;
					margin-left: 0;
					background: linear-gradient(to left, transparent, var(--dot-fill));
				}
			}

			/* The round: forward over each link, a beat, back over each; a node glows as a pulse lands */
			.steps > :nth-child(1) {
				--glow-at: 0.78;
			}

			.steps > :nth-child(2) {
				--to-at: 0.12;
				--from-at: 0.64;
			}

			.steps > :nth-child(3) {
				--glow-at: 0.64;
				--glow-again-at: 0.26;
			}

			.steps > :nth-child(4) {
				--to-at: 0.26;
				--from-at: 0.5;
			}

			.steps > :nth-child(5) {
				--glow-at: 0.4;
			}

			/* Pointing at a node: its links light, what it is not wired to steps back */
			.steps:has(> :nth-child(1):hover) > :nth-child(n + 4),
			.steps:has(> :nth-child(5):hover) > :nth-child(-n + 2) {
				opacity: var(--opacity-dimmed);
			}

			.node:hover + .link,
			.link:has(+ .node:hover) {
				--wire-color: var(--wire-lit);
				color: var(--color-label);
			}
		}

		/*
		 * Loop, by default (a phone, or five steps and more): numbered tiles on
		 * one track, each beside its glass card; the dot runs down the track
		 * and comes round again from the top. On a wide screen two to four
		 * steps sit on a ring around the caption instead (below).
		 */
		&[data-kind='loop'] {
			--rail: calc(var(--space-2) * 2 + var(--size-tile));
			--resume: var(--resume-lane);

			display: grid;
			grid-template-columns: minmax(0, 1fr);
			gap: var(--space-3);

			.track {
				position: relative;
				grid-area: 1 / 1;
				justify-self: start;
				width: var(--rail);
				overflow: clip;
				pointer-events: none;
			}

			.ring {
				position: absolute;
				inset: 0;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					bottom: 0;
					left: calc(50% - var(--wire) / 2);
					width: var(--wire);
					border-radius: var(--radius-full);
					background: linear-gradient(
						transparent,
						var(--wire-color) var(--space-6),
						var(--wire-color) calc(100% - var(--space-6)),
						transparent
					);
					transform-origin: 50% 0%;
				}
			}

			.line {
				display: none;
				overflow: visible;
				fill: none;
				stroke: var(--wire-color);
				stroke-width: var(--wire);

				/* The dot's tail: 14 of the ring's 100, ending where the dot is */
				.tail {
					stroke: var(--color-accent);
					stroke-linecap: round;
					stroke-dasharray: 14 86;
					opacity: 0;
				}
			}

			.dot {
				position: absolute;
				inset: 0;
				translate: 0 calc(var(--resume) * 100%);
				opacity: 0;

				&::before {
					content: '';
					position: absolute;
					top: 0%;
					left: 50%;
					width: var(--size-dot);
					height: var(--size-dot);
					margin: calc(var(--size-dot) / -2) 0 0 calc(var(--size-dot) / -2);
					border-radius: var(--radius-full);
					background: var(--color-accent);
					box-shadow: 0 0 0 var(--space-1)
						color-mix(in srgb, var(--color-accent) 25%, transparent);
				}

				/* The tail it leaves on the track */
				&::after {
					content: '';
					position: absolute;
					top: 0%;
					left: calc(50% - var(--wire) / 2);
					width: var(--wire);
					height: var(--space-8);
					margin-top: calc(var(--space-8) * -1);
					border-radius: var(--radius-full);
					background: linear-gradient(transparent, var(--color-accent));
				}
			}

			.steps {
				position: relative;
				grid-area: 1 / 1;
				display: grid;
				grid-auto-rows: 1fr;
			}

			.step {
				--at: var(--lane-at);
				display: grid;
				padding-block: calc(var(--space-2) / 2);
			}

			.node {
				display: grid;
				grid-template-columns: var(--rail) minmax(0, 1fr);
				align-items: center;
				width: 100%;
				padding: 0;
				border-radius: var(--radius-lg);
				text-align: start;
			}

			.index {
				position: relative;
				z-index: 1;
				grid-area: 1 / 1;
				justify-self: center;
				display: inline-grid;
				place-items: center;
				width: var(--size-tile);
				height: var(--size-tile);
				border-radius: var(--radius-sm);
				background: var(--color-background-content);
				box-shadow: 0 0 0 var(--size-border) var(--color-separator);
				color: var(--color-label-secondary);
				font-size: var(--text-caption-size);
				line-height: var(--text-caption-leading);
				font-weight: var(--font-weight-semibold);

				/* Lit: the accent tile, the number on it */
				&::after {
					content: attr(data-n);
					position: absolute;
					inset: 0;
					display: grid;
					place-items: center;
					border-radius: inherit;
					background: var(--color-accent);
					box-shadow: 0 0 var(--space-3)
						color-mix(in srgb, var(--color-accent) 45%, transparent);
					color: var(--color-on-accent);
					opacity: 0;
					transition: opacity var(--duration-base) var(--ease-spring);
				}
			}

			.copy {
				grid-area: 1 / 2;
				padding: var(--space-2) var(--space-3);

				> * {
					transition: opacity var(--duration-base) var(--ease-spring);
				}
			}

			.caption {
				display: grid;
				grid-template-columns: var(--rail) minmax(0, 1fr);
				gap: 0;

				.icon {
					justify-self: center;
				}
			}

			/* A held step (pointed at, focused, tapped): lit, the others step back */
			&[data-hold] {
				.step[data-on] :is(.index, .copy)::after {
					opacity: 1;
				}

				.step:not([data-on]) .copy > * {
					opacity: var(--opacity-dimmed);
				}
			}
		}

		@media (max-width: 640px) {
			&[data-kind='path'] {
				.steps {
					grid-template-columns: minmax(0, 1fr);
				}

				.link {
					flex-direction: row;
					align-items: stretch;
					gap: var(--space-2);
					min-height: var(--space-12);
					max-width: none;
				}

				.to,
				.from {
					flex: 1 1 0;
					flex-direction: row;
					align-items: center;
					gap: var(--space-2);
				}

				.to {
					flex-direction: row-reverse;
				}

				.label {
					justify-content: flex-start;
					padding: 0;
					text-align: start;
				}

				.to .label {
					justify-content: flex-end;
					text-align: end;
				}

				.to .arrow {
					rotate: 90deg;
				}

				.from .arrow {
					rotate: -90deg;
				}

				.wire {
					align-self: stretch;
					width: var(--wire);
					height: auto;
					transform-origin: 50% 0%;
				}

				.pulse {
					--travel-x: 0%;
					--travel-y: 100%;

					&::before {
						top: 0%;
						left: 50%;
					}

					&::after {
						inset: 0% 0 auto 0;
						width: auto;
						height: var(--space-6);
						margin: calc(var(--space-6) * -1) 0 0;
						background: linear-gradient(transparent, var(--dot-fill));
					}
				}

				.from .pulse {
					--travel-y: -100%;

					&::before {
						top: 100%;
						left: 50%;
					}

					&::after {
						inset: 100% 0 auto 0;
						margin: 0;
						background: linear-gradient(to top, transparent, var(--dot-fill));
					}
				}
			}
		}

		/* Loop on a wide screen, two to four steps: a ring through the cells' middles */
		@media (min-width: 641px) {
			&[data-kind='loop'][data-layout='orbit'] {
				--resume: var(--resume-orbit);
				--row-gap: var(--space-4);
				--column-gap: var(--space-3);

				grid-template-columns: repeat(3, minmax(0, 1fr));
				grid-template-rows: repeat(3, 1fr);
				gap: var(--row-gap) var(--column-gap);

				.track {
					grid-area: 1 / 1 / -1 / -1;
					justify-self: stretch;
					width: auto;
					overflow: visible;
				}

				.ring {
					inset: calc((100% - 2 * var(--row-gap)) / 6)
						calc((100% - 2 * var(--column-gap)) / 6);

					&::before {
						display: none;
					}
				}

				.line {
					display: block;
				}

				.dot {
					inset: 0 auto auto 0;
					width: 0;
					height: 0;
					translate: none;
					offset-path: inset(0 round 50%);
					offset-anchor: 50% 50%;
					offset-rotate: 0deg;
					offset-distance: calc(var(--resume) * 100%);

					&::after {
						display: none;
					}
				}

				.steps {
					grid-area: 1 / 1 / -1 / -1;
					grid-template-rows: subgrid;
					grid-template-columns: subgrid;
				}

				.step {
					--at: var(--orbit-at);
					place-items: center;
					padding: 0;
				}

				.step[data-place='top'] {
					grid-area: 1 / 2;
				}

				.step[data-place='right'] {
					grid-area: 2 / 3;
				}

				.step[data-place='bottom'] {
					grid-area: 3 / 2;
				}

				.step[data-place='left'] {
					grid-area: 2 / 1;
				}

				.node {
					width: auto;
					max-width: 100%;
				}

				.index {
					background: var(--color-fill);
					box-shadow: none;
				}

				.copy {
					grid-area: 1 / 1 / 2 / 3;
					padding-left: var(--rail);
				}

				.caption {
					position: relative;
					grid-area: 2 / 2;
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: var(--space-1);
					text-align: center;
				}
			}
		}

		@media (prefers-reduced-motion: no-preference) {
			/* Pointing at a node lifts it */
			&:is([data-kind='lock'], [data-kind='path']) .node:hover,
			&[data-kind='loop'] .step[data-on] .copy {
				scale: 1.02;
			}

			/* Entrance: paused at its first frame until the diagram shows */
			&[data-enter] {
				--enter-play: paused;

				&[data-live] {
					--enter-play: running;
				}

				&:is([data-kind='lock'], [data-kind='path']) .node,
				&[data-kind='loop'] .step {
					animation: diagram-enter-rise var(--duration-slow) var(--ease-spring)
						both;
					animation-delay: calc(var(--duration-fast) * var(--i, 0));
					animation-play-state: var(--enter-play);
				}

				.caption {
					animation: diagram-enter-fade var(--duration-slow) var(--ease-spring)
						both;
					animation-delay: calc(var(--duration-fast) * 5);
					animation-play-state: var(--enter-play);
				}

				&[data-kind='lock'] {
					.trunk {
						--i: 1;
						animation-name: diagram-enter-draw-y;
					}

					:is(.wire.allow, .wire.deny) {
						--i: 2;
						animation-name: diagram-enter-draw-x;
					}

					.barrier {
						--i: 3;
						animation-name: diagram-enter-pop;
					}

					.wire,
					.barrier {
						animation-duration: var(--duration-slow);
						animation-timing-function: var(--ease-spring);
						animation-fill-mode: both;
						animation-delay: calc(var(--duration-fast) * var(--i));
						animation-play-state: var(--enter-play);
					}

					.node.allow {
						--i: 3;
					}

					.node.deny {
						--i: 4;
					}
				}

				&[data-kind='path'] {
					.steps > :nth-child(2) {
						--i: 1;
					}

					.steps > :nth-child(3) {
						--i: 2;
					}

					.steps > :nth-child(4) {
						--i: 3;
					}

					.steps > :nth-child(5) {
						--i: 4;
					}

					.link {
						animation: diagram-enter-fade var(--duration-slow)
							var(--ease-spring) both;
						animation-delay: calc(var(--duration-fast) * var(--i));
						animation-play-state: var(--enter-play);
					}

					.wire {
						animation: diagram-enter-draw-x var(--duration-slow)
							var(--ease-spring) both;
						animation-delay: calc(var(--duration-fast) * var(--i));
						animation-play-state: var(--enter-play);
					}
				}

				&[data-kind='loop'] {
					.ring::before {
						animation: diagram-enter-draw-y calc(var(--duration-slow) * 2)
							var(--ease-spring) both;
						animation-play-state: var(--enter-play);
					}

					.line .orbit {
						stroke-dasharray: 100;
						animation: diagram-enter-ring calc(var(--duration-slow) * 2)
							var(--ease-spring) both;
						animation-play-state: var(--enter-play);
					}
				}
			}

			@media (max-width: 640px) {
				&[data-enter][data-kind='path'] .wire {
					animation-name: diagram-enter-draw-y;
				}
			}

			/* The idle loop: while the diagram shows and nothing is held */
			&[data-live]:is([data-kind='lock'], [data-kind='path']):not(
					:has(.node:hover)
				) {
				.node::after {
					animation: diagram-glow var(--duration-diagram) linear infinite;
					animation-delay: calc(var(--duration-diagram) * var(--glow-at));
				}

				.node::before {
					animation: diagram-glow var(--duration-diagram) linear infinite;
					animation-delay: calc(var(--duration-diagram) * var(--glow-again-at));
				}
			}

			&[data-live][data-kind='lock']:not(:has(.node:hover)) {
				.origin {
					--glow-at: var(--withdraw-leaves);
					--glow-again-at: var(--order-leaves);
				}

				.node.allow {
					--glow-at: var(--order-lands);
				}

				.node.deny {
					--glow-at: calc(var(--withdraw-stops) + 0.02);
				}

				.branches .node::before {
					animation: none;
				}

				.pulse.allow {
					animation: diagram-lock-order var(--duration-diagram) linear infinite;
				}

				.pulse.deny {
					animation: diagram-lock-withdraw var(--duration-diagram) linear
						infinite;
				}

				.node.allow .icon-tile .icon,
				.node.deny .icon-tile .icon,
				.barrier .icon {
					animation: diagram-pop var(--duration-diagram) var(--ease-spring)
						infinite;
					animation-delay: calc(var(--duration-diagram) * var(--glow-at));
				}

				.barrier {
					--glow-at: var(--withdraw-stops);
					--shake: diagram-shake var(--duration-diagram) linear infinite
						calc(var(--duration-diagram) * var(--glow-at));
					animation: var(--shake);

					&::before {
						animation: diagram-burst var(--duration-diagram) ease-out infinite;
						animation-delay: calc(var(--duration-diagram) * var(--glow-at));
					}

					&::after {
						animation: diagram-glow var(--duration-diagram) linear infinite;
						animation-delay: calc(var(--duration-diagram) * var(--glow-at));
					}
				}

				/* Still rising in: the barrier pops in and keeps its shake (one list, so neither restarts) */
				&[data-enter] .barrier {
					animation:
						diagram-enter-pop var(--duration-slow) var(--ease-spring) both
							calc(var(--duration-fast) * 3),
						var(--shake);
				}
			}

			&[data-live][data-kind='path']:not(:has(.node:hover)) {
				.steps > :is(:nth-child(1), :nth-child(5))::before {
					animation: none;
				}

				.to .pulse,
				.from .pulse {
					animation: diagram-travel var(--duration-diagram) ease-in-out infinite;
				}

				.to .pulse {
					animation-delay: calc(var(--duration-diagram) * var(--to-at));
				}

				.from .pulse {
					animation-delay: calc(var(--duration-diagram) * var(--from-at));
				}
			}

			/* Loop: the dot shows, the steps it is not on step back */
			&[data-live][data-kind='loop'] {
				.dot {
					opacity: 1;
				}

				&:not([data-hold]) {
					--round-start: calc(
						var(--duration-diagram) * (0 - var(--resume) - 1)
					);

					.step {
						--step-start: calc(
							var(--duration-diagram) * (var(--at) - var(--resume) - 1)
						);
					}

					.dot {
						animation: diagram-lane var(--duration-diagram) linear infinite
							var(--round-start);
					}

					:is(.index, .copy)::after {
						animation: diagram-lit var(--duration-diagram) linear infinite
							var(--step-start);
					}

					.copy > * {
						animation: diagram-emphasis var(--duration-diagram) linear infinite
							var(--step-start);
					}

					.caption .icon {
						animation: diagram-spin var(--duration-diagram) var(--ease-spring)
							infinite var(--round-start);
					}
				}
			}

			@media (min-width: 641px) {
				&[data-live][data-kind='loop'][data-layout='orbit']:not([data-hold]) {
					.dot {
						animation-name: diagram-orbit;
					}

					.tail {
						opacity: 1;
						animation: diagram-orbit-tail var(--duration-diagram) linear
							infinite var(--round-start);
					}
				}
			}
		}

		@supports not (offset-path: inset(0 round 50%)) {
			@media (min-width: 641px) {
				&[data-kind='loop'][data-layout='orbit'] .dot {
					display: none;
				}
			}
		}
	}
}

/* Entrance: a node rises in, a wire draws from where it starts, a mark pops */
@keyframes diagram-enter-rise {
	from {
		opacity: 0;
		translate: 0 var(--space-3);
	}
}

@keyframes diagram-enter-fade {
	from {
		opacity: 0;
	}
}

@keyframes diagram-enter-draw-x {
	from {
		scale: 0 1;
	}
}

@keyframes diagram-enter-draw-y {
	from {
		scale: 1 0;
	}
}

@keyframes diagram-enter-pop {
	from {
		opacity: 0;
		scale: 0.4;
	}
}

@keyframes diagram-enter-ring {
	from {
		stroke-dashoffset: 100;
	}

	to {
		stroke-dashoffset: 0;
	}
}

/* A moment in the round (its delay says when): a glow, a pop, a shake, a burst */
@keyframes diagram-glow {
	0% {
		opacity: 0;
	}

	3% {
		opacity: 1;
	}

	16%,
	100% {
		opacity: 0;
	}
}

@keyframes diagram-pop {
	0% {
		scale: 1;
	}

	3% {
		scale: 1.35;
	}

	8%,
	100% {
		scale: 1;
	}
}

@keyframes diagram-shake {
	0% {
		translate: 0 0;
	}

	1.5% {
		translate: var(--space-1) 0;
	}

	3% {
		translate: calc(var(--space-1) * -1) 0;
	}

	4.5% {
		translate: calc(var(--space-1) / 2) 0;
	}

	6%,
	100% {
		translate: 0 0;
	}
}

@keyframes diagram-burst {
	0% {
		opacity: 0.9;
		scale: 1;
	}

	9%,
	100% {
		opacity: 0;
		scale: 2.4;
	}
}

/* Path: along the wire and gone, then still until its next turn */
@keyframes diagram-travel {
	0% {
		opacity: 0;
		translate: 0 0;
	}

	2%,
	12% {
		opacity: 1;
	}

	14%,
	100% {
		opacity: 0;
		translate: var(--travel-x) var(--travel-y);
	}
}

/* Lock: an order down the trunk, across, down into "trade" (lands at --order-lands) */
@keyframes diagram-lock-order {
	0%,
	10% {
		opacity: 0;
		translate: 0 0;
	}

	12% {
		opacity: 1;
		translate: 0 0;
	}

	17% {
		translate: 0 calc(var(--fork) / 2);
	}

	27% {
		translate: calc(var(--radius-md) - var(--reach)) calc(var(--fork) / 2);
	}

	28.5% {
		translate: calc(var(--radius-md) * (1 - sin(45deg)) - var(--reach))
			calc(var(--fork) / 2 + var(--radius-md) * (1 - sin(45deg)));
	}

	30% {
		translate: calc(var(--reach) * -1) calc(var(--fork) / 2 + var(--radius-md));
	}

	33% {
		opacity: 1;
		translate: calc(var(--reach) * -1) var(--fork);
	}

	35%,
	100% {
		opacity: 0;
		translate: calc(var(--reach) * -1) calc(var(--fork) + var(--space-2));
	}
}

/* Lock: a withdrawal down the trunk and across, stopped at the barrier (--withdraw-stops), gone in a burst */
@keyframes diagram-lock-withdraw {
	0%,
	52% {
		opacity: 0;
		scale: 1;
		translate: 0 0;
	}

	54% {
		opacity: 1;
		translate: 0 0;
	}

	58% {
		translate: 0 calc(var(--fork) / 2);
	}

	64% {
		opacity: 1;
		scale: 1;
		translate: calc(
				var(--to-barrier) - var(--size-control-sm) / 2 - var(--size-dot) / 2
			)
			calc(var(--fork) / 2);
	}

	65.5% {
		translate: calc(
				var(--to-barrier) - var(--size-control-sm) / 2 - var(--size-dot) / 2 -
					var(--space-2)
			)
			calc(var(--fork) / 2);
	}

	68%,
	100% {
		opacity: 0;
		scale: 2;
		translate: calc(
				var(--to-barrier) - var(--size-control-sm) / 2 - var(--size-dot) / 2 -
					var(--space-2)
			)
			calc(var(--fork) / 2);
	}
}

/* Loop: once round the ring, or down the track and in again from the top */
@keyframes diagram-orbit {
	from {
		offset-distance: 0%;
	}

	to {
		offset-distance: 100%;
	}
}

/* The ellipse's own path starts at 3 o'clock, the dot's at 12: a quarter (75 of 100) apart */
@keyframes diagram-orbit-tail {
	from {
		stroke-dashoffset: -61;
	}

	to {
		stroke-dashoffset: -161;
	}
}

@keyframes diagram-lane {
	0% {
		opacity: 0;
		translate: 0 0%;
	}

	5%,
	95% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		translate: 0 100%;
	}
}

/* Loop: a step lights as the dot reaches it, until about the next one */
@keyframes diagram-lit {
	0% {
		opacity: 0;
	}

	3%,
	20% {
		opacity: 1;
	}

	25%,
	100% {
		opacity: 0;
	}
}

@keyframes diagram-emphasis {
	0% {
		opacity: var(--opacity-dimmed);
	}

	3%,
	20% {
		opacity: 1;
	}

	25%,
	100% {
		opacity: var(--opacity-dimmed);
	}
}

@keyframes diagram-spin {
	0% {
		rotate: 0turn;
	}

	10%,
	100% {
		rotate: 1turn;
	}
}


/* ./doc-pager.css */
/* Help articles: the previous and next question as two cards (statuz docs pager) */
:where(:root:has([data-glass])) {
	.doc-pager {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-2);

		.card.is-next {
			grid-column: 2;
			text-align: right;
		}

		.card.is-next .card-text {
			align-items: flex-end;
		}
	}

	@media (max-width: 640px) {
		.doc-pager {
			grid-template-columns: minmax(0, 1fr);

			.card.is-next {
				grid-column: 1;
			}
		}
	}
}


/* ./doc-also.css */
/* Legal and MCP: the date, then the other pages to read, one quiet row (statuz legal) */
:where(:root:has([data-glass])) {
	.doc-also {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--space-2) var(--space-4);
		font-size: var(--text-subheadline-size);

		> p {
			margin: 0;
			color: var(--color-label-secondary);
		}

		> nav {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-2) var(--space-4);
		}
	}
}


/* ./mcp.css */
/*
 * /mcp on the wide frame (the home's rhythm): big sections far apart, one big
 * centered headline per section, the connect form as the centerpiece, then
 * the date and Help back in the 680 column.
 */
:where(:root:has([data-glass])) {
	.mcp {
		display: flex;
		flex-direction: column;
		gap: var(--space-32);
		min-width: 0;

		/* The hero's actions jump here: leave room above the headline */
		> section {
			scroll-margin-top: var(--space-10);
		}

		.mcp-heading {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--space-4);
			max-width: var(--size-column);
			margin: 0 auto;
			text-align: center;

			h2 {
				margin: 0;
				font-size: var(--text-display-size);
				line-height: var(--text-display-leading);
				font-weight: var(--text-display-weight);
				letter-spacing: var(--text-display-tracking);
				text-wrap: balance;
			}

			p {
				margin: 0;
				color: var(--color-label-secondary);
				font-size: var(--text-feature-size);
				line-height: var(--text-feature-leading);
				text-wrap: pretty;
			}

			/* One or two help links on a line, wrapping centered */
			.links {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: var(--space-2) var(--space-6);
			}

			.link-action {
				font-size: var(--text-feature-compact-size);
			}
		}

		/* The connect form: centered, a little wider than the column */
		.setup {
			display: flex;
			flex-direction: column;
			gap: var(--space-12);
		}

		/* The quiet last row sits closer to the section above */
		.end {
			width: 100%;
			max-width: var(--size-column);
			margin: calc(var(--space-16) - var(--space-32)) auto 0;

			.doc-also {
				justify-content: center;
			}
		}

		@media (max-width: 640px) {
			gap: var(--space-24);

			.mcp-heading {
				h2 {
					font-size: var(--text-display-small-size);
					line-height: var(--text-display-small-leading);
					letter-spacing: var(--text-display-small-tracking);
				}

				p {
					font-size: var(--text-feature-compact-size);
					line-height: var(--text-feature-compact-leading);
				}
			}

			.setup {
				gap: var(--space-8);
			}

			.end {
				margin-top: calc(var(--space-12) - var(--space-24));
			}
		}
	}
}

/* A block rising into place as it scrolls in (mcp-steps, mcp-ask) */
@keyframes mcp-rise {
	from {
		opacity: 0;
		translate: 0 var(--stage-rise);
	}
}


/* ./mcp-hero.css */
/*
 * The /mcp hero: a small accent eyebrow, the big headline with the home's
 * green marker stroke under its last words, one line, the two actions and
 * the markdown link for agents, then the example chat (mcp-chat.css).
 */
:where(:root:has([data-glass])) {
	.mcp-hero {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-16);
		padding-top: var(--space-12);
		text-align: center;

		.copy,
		.head {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--space-5);
		}

		.eyebrow {
			margin: 0;
			padding: var(--space-1) var(--space-3);
			border-radius: var(--radius-full);
			background: color-mix(in srgb, var(--color-accent) 12%, transparent);
			color: var(--color-link);
			font-size: var(--text-body-size);
			line-height: var(--text-body-leading);
			font-weight: var(--font-weight-semibold);
		}

		.title {
			max-width: var(--size-page);
			margin: 0;
			font-size: var(--text-hero-size);
			line-height: var(--text-hero-leading);
			font-weight: var(--text-hero-weight);
			letter-spacing: var(--text-hero-tracking);
			text-wrap: balance;
		}

		.title-mark {
			position: relative;
			display: inline-block;
			white-space: nowrap;
		}

		.title-stroke {
			position: absolute;
			left: -2%;
			bottom: -0.16em;
			width: 104%;
			height: 0.3em;
			overflow: visible;
			color: var(--color-accent);
			pointer-events: none;

			path {
				fill: none;
				stroke: currentColor;
				stroke-width: 0.075em;
				stroke-linecap: round;
				stroke-linejoin: round;
				vector-effect: non-scaling-stroke;
			}
		}

		.lede {
			max-width: var(--size-column);
			margin: 0;
			color: var(--color-label-secondary);
			font-size: var(--text-feature-size);
			line-height: var(--text-feature-leading);
			text-wrap: balance;
		}

		.actions {
			justify-content: center;
			margin-top: var(--space-3);
		}

		.hint a {
			color: var(--color-link);
		}

		@media (max-width: 1023px) {
			.title {
				font-size: var(--text-hero-medium-size);
				line-height: var(--text-hero-medium-leading);
				letter-spacing: var(--text-hero-medium-tracking);
			}
		}

		@media (max-width: 640px) {
			gap: var(--space-10);
			padding-top: var(--space-6);

			.title {
				font-size: var(--text-hero-compact-size);
				line-height: var(--text-hero-compact-leading);
				letter-spacing: var(--text-hero-compact-tracking);
			}

			.lede {
				font-size: var(--text-feature-compact-size);
				line-height: var(--text-feature-compact-leading);
			}
		}
	}
}


/* ./mcp-chat.css */
/*
 * The /mcp hero's example chat: a solid window (content) with a glass
 * title bar (`.titlebar`: the DS `.toolbar` is a floating capsule), on a faint accent glow, and glass app capsules under it. Every
 * turn sits in the same grid cell, so the window is as tall as the longest
 * one and switching apps never moves the page; only the current turn shows.
 *
 * The server renders the finished turn. Once hydrated (`data-live`) and with
 * motion allowed, the current app's capsule runs a timer bar while touring;
 * when it fills, the next app's turn plays: the question types itself one
 * character per beat (`--duration-type`), the bud call works (dots) and
 * checks off, then the answer lands word by word. Offscreen (`data-paused`)
 * it all holds still. Reduce Motion keeps every turn finished and still.
 */
:where(:root:has([data-glass])) {
	.mcp-chat {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-6);
		width: 100%;
		padding: var(--space-6) 0;
		background: radial-gradient(
			ellipse 46% 50% at 50% 46%,
			color-mix(in srgb, var(--color-accent) 16%, transparent),
			transparent 72%
		);

		.window {
			width: 100%;
			max-width: var(--size-chat-window);
			overflow: hidden;
			border-radius: var(--radius-2xl);
			background: var(--color-background-content);
			box-shadow:
				0 0 0 var(--size-border) var(--color-separator),
				var(--material-glass-shadow);
			text-align: start;
		}

		.titlebar {
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
			align-items: center;
			gap: var(--space-3);
			height: var(--size-header);
			padding: 0 var(--space-4);
			border-bottom: var(--size-border) solid var(--color-separator);
			background: var(--material-glass-background);
			-webkit-backdrop-filter: var(--material-glass-filter);
			backdrop-filter: var(--material-glass-filter);
		}

		.lights {
			display: flex;
			gap: var(--space-2);

			span {
				width: var(--space-3);
				height: var(--space-3);
				border-radius: var(--radius-full);
				background: var(--color-fill);
				box-shadow: inset 0 0 0 var(--size-border) var(--color-separator);
			}
		}

		.title {
			display: inline-flex;
			align-items: center;
			gap: var(--space-2);
			color: var(--color-label);
			font-size: var(--text-title3-size);
			line-height: var(--text-title3-leading);
			font-weight: var(--text-title3-weight);
		}

		.example {
			justify-self: end;
			padding: calc(var(--space-1) / 2) var(--space-2);
			border-radius: var(--radius-full);
			background: var(--color-fill);
			color: var(--color-label-secondary);
			font-size: var(--text-caption-size);
			line-height: var(--text-caption-leading);
			font-weight: var(--font-weight-semibold);
			letter-spacing: 0.04em;
			text-transform: uppercase;
		}

		.turns {
			display: grid;
			padding: var(--space-6);
		}

		.turn {
			grid-area: 1 / 1;
			display: flex;
			flex-direction: column;
			gap: var(--space-4);
			font-size: var(--text-feature-compact-size);
			line-height: var(--text-feature-compact-leading);
		}

		.turn:not(.is-active) {
			visibility: hidden;
		}

		.ask {
			align-self: flex-end;
			max-width: 80%;
			margin: 0;
			padding: var(--space-2) var(--space-4);
			border-radius: var(--radius-xl);
			border-bottom-right-radius: var(--radius-sm);
			background: var(--color-fill);
			color: var(--color-label);
			transform-origin: 100% 100%;
		}

		/* The bud call: a glass capsule (it's the app's control), mascot first */
		.tool {
			align-self: flex-start;
			display: inline-flex;
			align-items: center;
			gap: var(--space-2);
			margin: 0;
			padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
			border-radius: var(--radius-full);
			background: var(--material-glass-background);
			-webkit-backdrop-filter: var(--material-glass-filter);
			backdrop-filter: var(--material-glass-filter);
			box-shadow:
				var(--material-glass-highlight),
				0 0 0 var(--size-border) var(--color-separator);
			color: var(--material-glass-label);
			font-size: var(--text-body-size);
			line-height: var(--text-body-leading);
			transform-origin: 0% 50%;

			code {
				font-family: var(--font-mono);
				font-weight: var(--font-weight-semibold);
			}
		}

		.state {
			display: grid;
			place-items: center;
			width: var(--size-icon);
			height: var(--size-icon);
		}

		.dots,
		.check {
			grid-area: 1 / 1;
			display: flex;
			align-items: center;
		}

		.dots {
			gap: calc(var(--space-1) / 2);
			opacity: 0;

			span {
				width: var(--space-1);
				height: var(--space-1);
				border-radius: var(--radius-full);
				background: currentColor;
			}
		}

		.check {
			color: var(--color-status-good);
		}

		.answer {
			display: flex;
			align-items: flex-start;
			gap: var(--space-3);

			p {
				margin: 0;
				color: var(--color-label);
				text-wrap: pretty;
			}
		}

		.avatar {
			display: grid;
			place-items: center;
			flex-shrink: 0;
			width: var(--size-control);
			height: var(--size-control);
			border-radius: var(--radius-full);
			background: var(--color-fill);
			color: var(--color-label);
		}

		.word {
			display: inline-block;
		}

		/* The apps: glass capsules, the current one in accent, its timer along the bottom edge */
		.apps {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: var(--space-2);
		}

		.app {
			position: relative;
			display: inline-flex;
			align-items: center;
			gap: var(--space-2);
			height: var(--size-control-lg);
			padding: 0 var(--space-4);
			overflow: hidden;
			border: 0;
			border-radius: var(--radius-full);
			background: var(--material-glass-background);
			-webkit-backdrop-filter: var(--material-glass-filter);
			backdrop-filter: var(--material-glass-filter);
			box-shadow:
				var(--material-glass-highlight),
				0 0 0 var(--size-border) var(--color-separator),
				var(--material-glass-shadow);
			color: var(--material-glass-label);
			font: inherit;
			font-size: var(--text-body-size);
			line-height: var(--text-body-leading);
			cursor: pointer;
			transition: color var(--duration-fast) var(--ease-spring);
		}

		.app:hover {
			color: var(--color-label);
		}

		.app.is-active {
			color: var(--color-link);
			box-shadow:
				var(--material-glass-highlight),
				0 0 0 var(--size-border) var(--color-accent),
				var(--material-glass-shadow);
		}

		.app:focus-visible {
			outline: var(--size-focus-ring) solid var(--color-focus);
			outline-offset: var(--size-border);
		}

		/* Flush with the capsule's bottom edge, full width: the capsule's own
		   rounding clips it, so it reads as the chip filling up from below */
		.timer {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			height: calc(var(--size-border) * 1.2);
			background: var(--color-accent);
			opacity: 0;
			transform-origin: 0% 50%;
			scale: 0 1;
		}

		@media (max-width: 640px) {
			padding: var(--space-2) 0;

			.titlebar {
				padding: 0 var(--space-3);
			}

			.turns {
				padding: var(--space-4);
			}

			.turn {
				gap: var(--space-3);
				font-size: var(--text-lede-size);
				line-height: var(--text-lede-leading);
			}

			/* Two by two, the same width each, instead of three and one */
			.apps {
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				width: 100%;
				max-width: var(--size-sheet);
			}

			.app {
				justify-content: center;
				padding: 0 var(--space-3);
			}
		}

		@media (prefers-reduced-motion: no-preference) {
			&[data-live][data-touring] .app.is-active .timer {
				opacity: 1;
				animation: mcp-chat-timer linear both;
				animation-duration: calc(var(--total) * var(--duration-type));
			}

			&[data-live] .turn.is-playing {
				.char {
					animation: mcp-chat-type var(--duration-type) linear both;
					animation-delay: calc(var(--beat) * var(--duration-type));
				}

				.ask {
					animation: mcp-chat-pop var(--duration-base) var(--ease-spring) both;
				}

				.tool,
				.check,
				.avatar {
					animation: mcp-chat-pop var(--duration-base) var(--ease-spring) both;
					animation-delay: calc(var(--beat) * var(--duration-type));
				}

				.dots {
					animation: mcp-chat-think linear;
					animation-duration: calc(var(--span) * var(--duration-type));
					animation-delay: calc(var(--beat) * var(--duration-type));
				}

				.word {
					animation: mcp-chat-word var(--duration-base) ease-out both;
					animation-delay: calc(var(--beat) * var(--duration-type));
				}
			}

			&[data-paused]
				:is(.ask, .char, .tool, .dots, .check, .avatar, .word, .timer) {
				animation-play-state: paused;
			}
		}
	}
}

@keyframes mcp-chat-timer {
	to {
		scale: 1 1;
	}
}

/* A typed character: there within its beat */
@keyframes mcp-chat-type {
	from {
		opacity: 0;
	}
}

@keyframes mcp-chat-pop {
	from {
		opacity: 0;
		scale: var(--stage-side);
	}
}

/* Only while the call works: there, breathing; gone again once it's done */
@keyframes mcp-chat-think {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.4;
	}
}

@keyframes mcp-chat-word {
	from {
		opacity: 0;
		translate: 0 var(--space-1);
	}
}


/* ./mcp-steps.css */
/*
 * How it works: three solid cards side by side (stacked on a phone), each
 * opening on a small drawing of its step with the step's number on it:
 * the Manage access sheet with Share access lit, the two lines to copy, and
 * the Bud mascot with the AI apps around it. With view timelines (and
 * motion allowed) each card rises in as it arrives; otherwise it just stands.
 */
:where(:root:has([data-glass])) {
	.mcp-steps {
		display: flex;
		flex-direction: column;
		gap: var(--space-16);

		.list {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: var(--space-6);
			margin: 0;
			padding: 0;
			list-style: none;
			counter-reset: mcp-step;
		}

		.step {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: var(--space-3);
			padding: var(--space-4) var(--space-4) var(--space-6);
			border-radius: var(--radius-2xl);
			background: var(--color-background-content);
			box-shadow: 0 0 0 var(--size-border) var(--color-separator);
			counter-increment: mcp-step;

			h3 {
				margin: var(--space-3) var(--space-2) 0;
				font-size: var(--text-title-size);
				line-height: var(--text-title-leading);
				font-weight: var(--font-weight-semibold);
			}

			p {
				margin: 0 var(--space-2);
				color: var(--color-label-secondary);
				font-size: var(--text-lede-size);
				line-height: var(--text-lede-leading);
				text-wrap: pretty;
			}

			.link-action {
				margin: 0 var(--space-2);
				font-size: var(--text-lede-size);
			}
		}

		/* The drawing: inner radius = card radius − padding */
		.art {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: var(--space-2);
			width: 100%;
			height: var(--size-artboard);
			overflow: hidden;
			border-radius: calc(var(--radius-2xl) - var(--space-4));
			background:
				radial-gradient(
					ellipse 70% 80% at 50% 100%,
					color-mix(in srgb, var(--color-accent) 14%, transparent),
					transparent 70%
				),
				var(--color-fill);
		}

		/* The step's number, top left on the drawing */
		.art::after {
			content: counter(mcp-step);
			position: absolute;
			top: var(--space-2);
			left: var(--space-2);
			display: grid;
			place-items: center;
			width: var(--size-control-sm);
			height: var(--size-control-sm);
			border-radius: var(--radius-full);
			background: var(--color-background-content);
			box-shadow: 0 0 0 var(--size-border) var(--color-separator);
			color: var(--color-label-secondary);
			font-size: var(--text-subheadline-size);
			line-height: var(--text-subheadline-leading);
			font-weight: var(--font-weight-semibold);
		}

		/* 1. The Manage access sheet, Share access lit */
		.sheet {
			display: flex;
			flex-direction: column;
			gap: var(--space-2);
			width: 76%;
			padding: var(--space-2);
			border-radius: var(--radius-lg);
			background: var(--color-background-content);
			box-shadow:
				0 0 0 var(--size-border) var(--color-separator),
				var(--material-solid-shadow);
			font-size: var(--text-body-size);
			line-height: var(--text-body-leading);
		}

		.row {
			display: flex;
			align-items: center;
			gap: var(--space-2);
			padding: 0 var(--space-1);
			color: var(--color-label);

			.chevron {
				margin-left: auto;
				color: var(--color-label-tertiary);
			}
		}

		.share {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: var(--space-1-5);
			height: var(--size-control);
			border-radius: var(--radius-full);
			background: var(--color-accent);
			box-shadow: 0 0 0 var(--space-1)
				color-mix(in srgb, var(--color-accent) 24%, transparent);
			color: var(--color-on-accent);
			font-weight: var(--font-weight-semibold);
		}

		/* 2. The two lines, each with its copy button */
		.line {
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			grid-template-areas:
				'label icon'
				'value icon';
			align-items: center;
			column-gap: var(--space-2);
			width: 84%;
			padding: var(--space-1-5) var(--space-3);
			border-radius: var(--radius-md);
			background: var(--color-background-content);
			box-shadow: 0 0 0 var(--size-border) var(--color-separator);

			.label {
				grid-area: label;
				color: var(--color-label-secondary);
				font-size: var(--text-caption-size);
				line-height: var(--text-caption-leading);
				font-weight: var(--text-caption-weight);
				letter-spacing: 0.02em;
				text-transform: uppercase;
			}

			.value {
				grid-area: value;
				overflow: hidden;
				color: var(--color-label);
				font-family: var(--font-mono);
				font-size: var(--text-subheadline-size);
				line-height: var(--text-copy-leading);
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.icon {
				grid-area: icon;
				color: var(--color-link);
			}
		}

		/* 3. Bud in the middle, the AI apps around it on a dashed ring */
		.art.is-paste::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: calc(var(--size-artboard) * 0.72);
			height: calc(var(--size-artboard) * 0.72);
			border: calc(var(--size-border) * 1.5) dashed var(--color-separator);
			border-radius: var(--radius-full);
			translate: -50% -50%;
		}

		.hub {
			position: relative;
			display: grid;
			place-items: center;
			width: var(--size-tile-lg);
			height: var(--size-tile-lg);
			border-radius: var(--radius-full);
			background: var(--color-background-content);
			box-shadow:
				0 0 0 calc(var(--size-border) * 2) var(--color-accent),
				var(--material-solid-shadow);

			.logo {
				height: var(--size-control);
			}
		}

		.spoke {
			--orbit: calc(var(--size-artboard) * 0.255);
			position: absolute;
			top: 50%;
			left: 50%;
			display: grid;
			place-items: center;
			width: var(--size-control-lg);
			height: var(--size-control-lg);
			border-radius: var(--radius-full);
			background: var(--material-glass-background);
			-webkit-backdrop-filter: var(--material-glass-filter);
			backdrop-filter: var(--material-glass-filter);
			box-shadow:
				var(--material-glass-highlight),
				0 0 0 var(--size-border) var(--color-separator),
				var(--material-glass-shadow);
			color: var(--color-label);
		}

		.spoke:nth-of-type(2) {
			translate: calc(-50% - var(--orbit)) calc(-50% - var(--orbit));
		}

		.spoke:nth-of-type(3) {
			translate: calc(-50% + var(--orbit)) calc(-50% - var(--orbit));
		}

		.spoke:nth-of-type(4) {
			translate: calc(-50% + var(--orbit)) calc(-50% + var(--orbit));
		}

		.spoke:nth-of-type(5) {
			translate: calc(-50% - var(--orbit)) calc(-50% + var(--orbit));
		}

		@media (max-width: 899px) {
			.list {
				grid-template-columns: minmax(0, 1fr);
				max-width: var(--size-column);
				margin: 0 auto;
				width: 100%;
			}
		}

		@media (max-width: 640px) {
			gap: var(--space-10);
		}

		@supports (animation-timeline: view()) {
			@media (prefers-reduced-motion: no-preference) {
				.step {
					animation: mcp-rise linear both;
					animation-timeline: view();
					animation-range: entry 0% entry 100%;
				}
			}
		}
	}
}


/* ./mcp-connect.css */
/*
 * McpConnect: one solid panel lit by a faint accent glow, three numbered
 * steps down a rail (server address, relay password, the app). A step's
 * badge turns into a green check once it's done and the rail under it fills
 * with accent. The app picker (ChoiceGrid) drops its own box here so its
 * title lines up like the field labels; the open app's panel is the snippet
 * box, which lights up in accent once the address and password are in.
 */
:where(:root:has([data-glass])) {
	.mcp-connect {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		width: 100%;
		max-width: calc(var(--size-column) + var(--space-16) * 2);
		margin: 0 auto;
		padding: var(--space-10);
		border-radius: var(--radius-2xl);
		background:
			radial-gradient(
				ellipse 70% 50% at 0% 0%,
				color-mix(in srgb, var(--color-accent) 10%, transparent),
				transparent 70%
			),
			var(--color-background-content);
		box-shadow:
			0 0 0 var(--size-border) var(--color-separator),
			var(--material-solid-shadow);

		.steps {
			display: flex;
			flex-direction: column;
			margin: 0;
			padding: 0;
			list-style: none;
			counter-reset: mcp-connect-step;
		}

		.step {
			position: relative;
			display: grid;
			grid-template-columns: var(--size-control) minmax(0, 1fr);
			align-items: start;
			column-gap: var(--space-4);
			padding-bottom: var(--space-8);
			counter-increment: mcp-connect-step;
		}

		.step:last-child {
			padding-bottom: 0;
		}

		/* The rail down to the next badge: gray, then filled with accent once done */
		.step:not(:last-child)::before,
		.step:not(:last-child)::after {
			content: '';
			position: absolute;
			top: calc(var(--size-control) + var(--space-1));
			bottom: var(--space-1);
			left: calc(var(--size-control) / 2 - var(--size-border));
			width: calc(var(--size-border) * 2);
			border-radius: var(--radius-full);
		}

		.step:not(:last-child)::before {
			background: var(--color-separator);
		}

		.step:not(:last-child)::after {
			background: var(--color-accent);
			transform-origin: 50% 0%;
			scale: 1 0;
			transition: scale var(--duration-slow) var(--ease-spring);
		}

		.step.is-done::after {
			scale: 1 1;
		}

		/* After the words in the HTML, first on screen */
		.badge {
			grid-row: 1;
			grid-column: 1;
			display: grid;
			place-items: center;
			width: var(--size-control);
			height: var(--size-control);
			border-radius: var(--radius-full);
			background: var(--color-background-content);
			box-shadow: 0 0 0 calc(var(--size-border) * 1.5) var(--color-separator);
			color: var(--color-label-secondary);
			font-size: var(--text-headline-size);
			line-height: var(--text-headline-leading);
			font-weight: var(--text-headline-weight);
			transition:
				background-color var(--duration-base) var(--ease-spring),
				box-shadow var(--duration-base) var(--ease-spring),
				color var(--duration-base) var(--ease-spring);

			.number,
			.check {
				grid-area: 1 / 1;
				transition:
					opacity var(--duration-fast) var(--ease-spring),
					scale var(--duration-base) var(--ease-spring);
			}

			.check {
				opacity: 0;
				scale: var(--stage-side);
			}

			.number::before {
				content: counter(mcp-connect-step);
			}
		}

		.step.is-done .badge {
			background: var(--color-status-good);
			box-shadow: 0 0 0 calc(var(--size-border) * 1.5) var(--color-status-good);
			color: var(--color-on-accent);

			.number {
				opacity: 0;
				scale: var(--stage-side);
			}

			.check {
				opacity: 1;
				scale: 1;
			}
		}

		/* The step's title sits on the badge's middle */
		.body {
			grid-row: 1;
			grid-column: 2;
			display: flex;
			flex-direction: column;
			min-width: 0;
			padding-top: calc((var(--size-control) - var(--text-title3-leading)) / 2);
		}

		.field-row {
			display: flex;
			flex-direction: column;
			gap: var(--space-2);
			min-width: 0;
		}

		.label,
		.choice-title {
			color: var(--color-label);
			font-size: var(--text-title3-size);
			line-height: var(--text-title3-leading);
			font-weight: var(--text-title3-weight);
		}

		.field {
			height: var(--size-row-lg);
			padding: 0 var(--space-3);
			font-size: var(--text-lede-size);
		}

		/* The app picker, without its own box */
		.choice {
			border-radius: 0;
			background: none;
			box-shadow: none;
		}

		.choice-head {
			padding: 0;
		}

		.choice-grid {
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: var(--space-2);
		}

		.choice-option {
			height: var(--size-row-lg);
			padding: 0 var(--space-3);
			font-size: var(--text-body-size);

			.brand-mark {
				width: var(--size-icon);
				height: var(--size-icon);
			}
		}

		.choice-note {
			font-size: var(--text-body-size);
			line-height: var(--text-body-leading);
		}

		/* The open app's panel: the snippet box */
		.choice-head ~ .choice-panel {
			margin-top: var(--space-4);
			padding: var(--space-4);
			border-top: 0;
			border-radius: var(--radius-lg);
			background: var(--color-fill);
			box-shadow: 0 0 0 var(--size-border) transparent;
			transition: box-shadow var(--duration-base) var(--ease-spring);
		}

		&.is-ready .choice-head ~ .choice-panel {
			box-shadow:
				0 0 0 var(--size-border) var(--color-accent),
				0 0 0 var(--space-1)
					color-mix(in srgb, var(--color-accent) 14%, transparent);
		}

		/* Commands and URLs carry the password: wrap them, never scroll it out of sight */
		.copy-field.is-wrapped .copy-field-value {
			white-space: pre-wrap;
			overflow-wrap: anywhere;
		}

		/* Holds its line while empty, so finishing never moves the page */
		.done {
			display: flex;
			align-items: center;
			gap: var(--space-2);
			min-height: var(--text-lede-leading);
			margin: 0;
			padding-left: calc(var(--size-control) + var(--space-4));
			color: var(--color-label);
			font-size: var(--text-lede-size);
			line-height: var(--text-lede-leading);
			font-weight: var(--font-weight-medium);

			.icon {
				flex-shrink: 0;
				color: var(--color-status-good);
			}
		}

		@media (max-width: 640px) {
			padding: var(--space-6) var(--space-4);

			.step {
				column-gap: var(--space-3);
			}

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

			/* The picker's own size, so Claude Desktop fits half the width */
			.choice-option {
				font-size: var(--text-subheadline-size);
			}

			.done {
				padding-left: 0;
			}
		}

		@media (prefers-reduced-motion: no-preference) {
			/* The snippet lands as it shows up; a step's check and the last line pop in */
			&.is-ready .choice-panel > * {
				animation: mcp-connect-land var(--duration-slow) var(--ease-spring) both;
			}

			.step.is-done .badge {
				animation: mcp-connect-pop var(--duration-slow) var(--ease-spring);
			}

			.done:not(:empty) {
				animation: mcp-connect-land var(--duration-slow) var(--ease-spring) both;
			}
		}
	}
}

@keyframes mcp-connect-land {
	from {
		opacity: 0;
		translate: 0 var(--space-2);
	}
}

@keyframes mcp-connect-pop {
	40% {
		scale: 1.18;
	}
}


/* ./mcp-ask.css */
/*
 * Ask in your language: glass question capsules (they copy; the copy icon
 * turns into a green check for a moment), then two solid notes side by side,
 * one tool and Grok Bot on X. The capsules rise in as they scroll into view
 * when view timelines and motion are allowed.
 */
:where(:root:has([data-glass])) {
	.mcp-ask {
		display: flex;
		flex-direction: column;
		gap: var(--space-12);

		.prompts {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: var(--space-3);
			max-width: calc(var(--size-page) - var(--space-24));
			margin: 0 auto;
			padding: 0;
			list-style: none;
		}

		.prompt {
			display: inline-flex;
			align-items: center;
			gap: var(--space-2);
			padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4);
			border: 0;
			border-radius: var(--radius-full);
			background: var(--material-glass-background);
			-webkit-backdrop-filter: var(--material-glass-filter);
			backdrop-filter: var(--material-glass-filter);
			box-shadow:
				var(--material-glass-highlight),
				0 0 0 var(--size-border) var(--color-separator),
				var(--material-glass-shadow);
			color: var(--material-glass-label);
			font: inherit;
			font-size: var(--text-feature-compact-size);
			line-height: var(--text-feature-compact-leading);
			text-align: start;
			cursor: pointer;
			transition:
				color var(--duration-fast) var(--ease-spring),
				box-shadow var(--duration-fast) var(--ease-spring);
		}

		/* After the words in the HTML, first on screen */
		.glyph {
			order: -1;
			display: grid;
			place-items: center;
			flex-shrink: 0;
			color: var(--color-label-tertiary);

			.icon {
				grid-area: 1 / 1;
				transition:
					opacity var(--duration-fast) var(--ease-spring),
					scale var(--duration-base) var(--ease-spring);
			}

			.done {
				color: var(--color-status-good);
				opacity: 0;
				scale: var(--stage-side);
			}
		}

		.prompt:hover {
			color: var(--color-label);

			.copy {
				color: var(--color-link);
			}
		}

		.prompt:focus-visible {
			outline: var(--size-focus-ring) solid var(--color-focus);
			outline-offset: var(--size-border);
		}

		.prompt.is-copied {
			color: var(--color-label);
			box-shadow:
				var(--material-glass-highlight),
				0 0 0 var(--size-border) var(--color-accent),
				var(--material-glass-shadow);

			.copy {
				opacity: 0;
				scale: var(--stage-side);
			}

			.done {
				opacity: 1;
				scale: 1;
			}
		}

		.notes {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--space-6);
		}

		.note {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: var(--space-2);
			padding: var(--space-8);
			border-radius: var(--radius-2xl);
			background: var(--color-background-content);
			box-shadow: 0 0 0 var(--size-border) var(--color-separator);

			.icon-tile {
				width: var(--size-tile-lg);
				height: var(--size-tile-lg);
				margin-bottom: var(--space-2);
				border-radius: var(--radius-lg);
				background: color-mix(in srgb, var(--color-accent) 14%, transparent);
				color: var(--color-link);

				.icon,
				.brand-mark {
					width: var(--size-icon-lg);
					height: var(--size-icon-lg);
				}
			}

			h3 {
				margin: 0;
				font-size: var(--text-title-size);
				line-height: var(--text-title-leading);
				font-weight: var(--font-weight-semibold);
			}

			p {
				margin: 0;
				color: var(--color-label-secondary);
				font-size: var(--text-feature-compact-size);
				line-height: var(--text-feature-compact-leading);
				text-wrap: pretty;
			}

			.link-action {
				margin-top: var(--space-2);
				font-size: var(--text-lede-size);
			}
		}

		@media (max-width: 899px) {
			.notes {
				grid-template-columns: minmax(0, 1fr);
				width: 100%;
				max-width: var(--size-column);
				margin: 0 auto;
			}
		}

		@media (max-width: 640px) {
			gap: var(--space-8);

			.prompt {
				font-size: var(--text-lede-size);
				line-height: var(--text-lede-leading);
			}

			.note {
				padding: var(--space-6);
			}
		}

		@supports (animation-timeline: view()) {
			@media (prefers-reduced-motion: no-preference) {
				.prompts li {
					animation: mcp-rise linear both;
					animation-timeline: view();
					animation-range: entry 0% entry 100%;
				}
			}
		}
	}
}


/* ./mcp-beacon.css */
/* McpBeacon: above the footer, the MCP page's URL on a glass chip with Copy */
:where(:root:has([data-glass])) {
	.mcp-beacon {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2) var(--space-4);

		.prompt {
			margin: 0;
			color: var(--color-label-secondary);
			font-size: var(--text-caption-size);
			line-height: var(--text-caption-leading);
			font-weight: var(--text-caption-weight);
			letter-spacing: 0.02em;
			text-transform: uppercase;
		}

		.chip {
			display: inline-flex;
			align-items: center;
			gap: var(--space-1);
			height: var(--size-control);
			padding: 0 var(--space-1) 0 var(--space-3);
			border-radius: var(--radius-full);
			background: var(--material-glass-background);
			-webkit-backdrop-filter: var(--material-glass-filter);
			backdrop-filter: var(--material-glass-filter);
			box-shadow:
				var(--material-glass-highlight),
				0 0 0 var(--size-border) var(--color-separator),
				var(--material-glass-shadow);
			color: var(--material-glass-label);
		}

		.url {
			display: inline-flex;
			align-items: center;
			gap: var(--space-1-5);
			font-family: var(--font-mono);
			font-size: var(--text-subheadline-size);
		}

		.url .icon {
			color: var(--color-accent);
		}

		.url:hover {
			color: var(--color-link);
		}

		.copy {
			height: var(--size-control-sm);
			padding: 0 var(--space-2);
			border-radius: var(--radius-full);
			color: var(--color-label-secondary);
			font-size: var(--text-subheadline-size);
			cursor: pointer;
		}

		.copy:hover {
			background: var(--color-fill);
			color: var(--color-label);
		}

		:is(.url, .copy):focus-visible {
			outline: var(--size-focus-ring) solid var(--color-focus);
			outline-offset: var(--size-border);
			border-radius: var(--radius-full);
		}
	}
}


/* ./app-store-badge.css */
/* The App Store capsule: Apple's mark in line with the label, sized like the button's icon. */
:where(:root:has([data-glass])) {
	.app-store-badge {
		.btn-label {
			display: inline-flex;
			align-items: center;
			gap: var(--space-1-5);
		}

		&.btn-sm .btn-label {
			gap: var(--space-1);
		}

		&.btn-sm .brand-mark {
			width: var(--size-icon-sm);
			height: var(--size-icon-sm);
		}
	}
}


/* ./compare-cta.css */
/*
 * The vs-pages' closing call: the box and the trial (then "See plans") on
 * the left, the App Store and the web app on the right, on a
 * content card lit softly in the accent (the home trust card's light).
 */
:where(:root:has([data-glass])) {
	.compare-cta {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--space-8);
		padding: var(--space-8);
		border-radius: var(--radius-2xl);
		background:
			radial-gradient(
				ellipse 70% 90% at 0% 0%,
				color-mix(in srgb, var(--color-accent) 12%, transparent),
				transparent 70%
			),
			var(--color-background-content);
		box-shadow: 0 0 0 var(--size-border) var(--color-separator);

		.pitch {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: var(--space-3);
			min-width: 0;
		}

		.icon-tile {
			width: var(--size-tile-lg);
			height: var(--size-tile-lg);
			border-radius: var(--radius-lg);
			background: color-mix(in srgb, var(--color-accent) 14%, transparent);
			color: var(--color-accent);

			.icon {
				width: var(--size-icon-lg);
				height: var(--size-icon-lg);
			}
		}

		h3 {
			margin: var(--space-1) 0 0;
			font-size: var(--text-title-size);
			line-height: var(--text-title-leading);
			font-weight: var(--font-weight-semibold);
			text-wrap: balance;
		}

		p {
			margin: 0;
			color: var(--color-label-secondary);
			font-size: var(--text-title3-size);
			line-height: var(--text-lede-leading);
			font-weight: var(--font-weight-regular);
			text-wrap: pretty;
		}

		/* The actions (AppStoreCta's .actions), stacked: the App Store, then the web app */
		.go {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			gap: var(--space-3);

			.actions {
				flex-direction: column;
				align-items: stretch;
			}
		}

		@media (max-width: 640px) {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--space-6);
			padding: var(--space-6) var(--space-5);

			.go {
				align-items: flex-start;

				.actions {
					flex-direction: row;
					flex-wrap: wrap;
				}
			}
		}
	}
}


/* ./app-screen.css */
/*
 * An iPhone screenshot in the page's scheme. The system picks by default; the
 * footer's choice (html[data-theme], set before paint) picks when forced.
 */
:where(:root:has([data-glass])) {
	.app-screen {
		display: block;
		background: var(--device-glass);

		picture,
		img {
			display: block;
			width: 100%;
			height: 100%;
		}

		img {
			object-fit: cover;
			pointer-events: none;
			user-select: none;
		}

		.is-light,
		.is-dark {
			display: none;
		}
	}

	&[data-theme='light'] .app-screen {
		.is-auto {
			display: none;
		}
		.is-light {
			display: block;
		}
	}

	&[data-theme='dark'] .app-screen {
		.is-auto {
			display: none;
		}
		.is-dark {
			display: block;
		}
	}
}


/* ./phone-shots.css */
/* Three iPhones side by side, captioned (/pwa); a swipeable row on a phone */
:where(:root:has([data-glass])) {
	.phone-shots {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-8);
		padding: var(--space-6) var(--space-6) var(--space-8);
		border-radius: var(--radius-lg);
		background: var(--color-background-content);
		box-shadow: 0 0 0 var(--size-border) var(--color-separator);

		.phone-shot {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--space-4);
			min-width: 0;
			margin: 0;

			figcaption {
				color: var(--color-label-secondary);
				font-size: var(--text-subheadline-size);
				line-height: var(--text-subheadline-leading);
			}
		}

		@media (max-width: 640px) {
			grid-template-columns: none;
			grid-auto-flow: column;
			grid-auto-columns: 62%;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			scrollbar-width: none;

			.phone-shot {
				scroll-snap-align: center;
			}
		}
	}
}


/* ./home.css */
/*
 * The home page (cryptobud.app) on the wide frame: big sections far apart,
 * one big centered headline per section, then a quieter part (works with,
 * compare, the questions back in the 680 column).
 */
:where(:root:has([data-glass])) {
	.home {
		/* Every glow on the page: the accent, eased out so no edge shows */
		--home-glow: radial-gradient(
			closest-side,
			var(--color-glow),
			color-mix(in srgb, var(--color-glow) 55%, transparent) 30%,
			color-mix(in srgb, var(--color-glow) 20%, transparent) 60%,
			color-mix(in srgb, var(--color-glow) 5%, transparent) 85%,
			transparent
		);

		display: flex;
		flex-direction: column;
		gap: var(--space-32);
		min-width: 0;

		.home-heading {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--space-4);
			max-width: var(--size-column);
			margin: 0 auto;
			text-align: center;

			/* The hero's light, fainter, behind each big headline: as wide as the
			   headline (so never a sideways scroll), under everything on the page */
			&::before {
				content: '';
				position: absolute;
				inset: -80% 0;
				z-index: -1;
				background: var(--home-glow);
				opacity: 0.55;
				pointer-events: none;

				@media (prefers-reduced-transparency: reduce) {
					display: none;
				}
			}

			/* The hero's dot grid, a soft patch of it under the glow */
			&::after {
				content: '';
				position: absolute;
				inset: -70% 0;
				z-index: -1;
				background-image: radial-gradient(
					circle,
					var(--color-grid-dot) var(--size-border),
					transparent calc(var(--size-border) * 1.5)
				);
				background-position: center;
				background-size: var(--stage-dot) var(--stage-dot);
				mask-image: radial-gradient(closest-side, black 20%, transparent);
				pointer-events: none;

				@media (prefers-reduced-transparency: reduce) {
					display: none;
				}
			}

			/* The topic, in the accent pill /mcp's hero uses */
			.eyebrow {
				display: inline-flex;
				align-items: center;
				gap: var(--space-1-5);
				margin: 0 0 var(--space-1);
				padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
				border-radius: var(--radius-full);
				background: color-mix(in srgb, var(--color-accent) 12%, transparent);
				color: var(--color-link);
				font-size: var(--text-subheadline-size);
				line-height: var(--text-subheadline-leading);
				font-weight: var(--font-weight-semibold);
			}

			h2 {
				margin: 0;
				font-size: var(--text-display-size);
				line-height: var(--text-display-leading);
				font-weight: var(--text-display-weight);
				letter-spacing: var(--text-display-tracking);
				text-wrap: balance;
			}

			p {
				margin: 0;
				color: var(--color-label-secondary);
				font-size: var(--text-feature-size);
				line-height: var(--text-feature-leading);
				text-wrap: pretty;
			}

			.link-action {
				font-size: var(--text-feature-compact-size);
			}
		}

		.home-heading.is-start {
			align-items: flex-start;
			margin: 0;
			text-align: start;
		}

		.home-quiet {
			display: flex;
			flex-direction: column;
			gap: var(--space-16);
		}

		.home-column {
			width: 100%;
			max-width: var(--size-column);
			margin: 0 auto;
		}

		@media (max-width: 640px) {
			gap: var(--space-24);

			.home-heading {
				h2 {
					font-size: var(--text-display-small-size);
					line-height: var(--text-display-small-leading);
					letter-spacing: var(--text-display-small-tracking);
				}

				p {
					font-size: var(--text-feature-compact-size);
					line-height: var(--text-feature-compact-leading);
				}
			}

			.home-quiet {
				gap: var(--space-12);
			}
		}
	}
}

/* A phone or a line rising into place as it scrolls in (home-story, home-moment) */
@keyframes home-rise {
	from {
		translate: 0 var(--stage-rise);
	}
}


/* ./home-backdrop.css */
/*
 * The home's ambient layer: the width of the window behind the hero (it has
 * no positioned ancestor, so it spans the page itself and never scrolls
 * sideways), two accent glows wandering slowly and a dot grid, everything
 * faded out before the story starts. Decoration: still under Reduce Motion,
 * gone under Reduce Transparency.
 */
:where(:root:has([data-glass])) {
	/* html and body both paint the window color, so the backdrop needs body as
	   its stacking context: above body's background, under all of its content */
	body:has(.home-backdrop) {
		isolation: isolate;
	}

	.home-backdrop {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: var(--stage-backdrop);
		overflow: hidden;
		pointer-events: none;
		mask-image: linear-gradient(to bottom, black 50%, transparent);

		.glow {
			position: absolute;
			width: var(--stage-glow);
			aspect-ratio: 1;
			border-radius: var(--radius-full);
			background: var(--home-glow);
		}

		/* Centered on the headline and the buttons, wider than tall */
		.glow.is-main {
			top: -8%;
			left: 50%;
			translate: -50% 0;
			scale: 1.6 1;
		}

		/* A smaller one behind the right-hand phones */
		.glow.is-side {
			top: 30%;
			left: 64%;
			scale: 0.9;
			opacity: 0.9;
		}

		/* Dots lit around the headline and phones, gone toward the edges */
		.dots {
			position: absolute;
			inset: 0;
			background-image: radial-gradient(
				circle,
				var(--color-grid-dot) var(--size-border),
				transparent calc(var(--size-border) * 1.5)
			);
			background-position: center top;
			background-size: var(--stage-dot) var(--stage-dot);
			mask-image: radial-gradient(
				ellipse 60% 45% at 50% 32%,
				black 25%,
				transparent 75%
			);
		}

		@media (prefers-reduced-motion: no-preference) {
			.glow {
				animation: home-backdrop-drift var(--duration-drift) ease-in-out
					infinite alternate;
			}

			.glow.is-side {
				animation-direction: alternate-reverse;
				animation-delay: calc(var(--duration-drift) / -3);
			}
		}

		@media (prefers-reduced-transparency: reduce) {
			display: none;
		}
	}
}

@keyframes home-backdrop-drift {
	from {
		transform: translate(calc(var(--stage-drift) * -1), 0);
	}
	to {
		transform: translate(var(--stage-drift), calc(var(--stage-drift) / 2));
	}
}


/* ./home-hero.css */
/*
 * The home hero: big centered type, then three iPhones fanned on a 3D stage.
 * At rest the fan leans back with the side phones turned in behind the front
 * one; scrolling the first stretch of the page lifts it, stands it up and
 * spreads the sides. Without scroll timelines, or with Reduce Motion, the
 * rest pose is the whole picture.
 */
:where(:root:has([data-glass])) {
	.home-hero {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-16);
		padding-top: var(--space-12);
		text-align: center;

		.copy {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--space-5);
		}

		.title {
			margin: 0;
			font-size: var(--text-hero-size);
			line-height: var(--text-hero-leading);
			font-weight: var(--text-hero-weight);
			letter-spacing: var(--text-hero-tracking);
			text-wrap: balance;
		}

		/* "you sleep": a green marker stroke under it, drawn as the page starts to scroll */
		.title-mark {
			position: relative;
			display: inline-block;
			white-space: nowrap;
		}

		.title-stroke {
			position: absolute;
			left: -2%;
			bottom: -0.16em;
			width: 104%;
			height: 0.3em;
			overflow: visible;
			color: var(--color-accent);
			pointer-events: none;

			path {
				fill: none;
				stroke: currentColor;
				stroke-width: 0.075em;
				stroke-linecap: round;
				stroke-linejoin: round;
				vector-effect: non-scaling-stroke;
			}
		}

		.lede {
			max-width: var(--size-column);
			margin: 0;
			color: var(--color-label-secondary);
			font-size: var(--text-feature-size);
			line-height: var(--text-feature-leading);
			text-wrap: balance;
		}

		.actions {
			justify-content: center;
			margin-top: var(--space-3);
		}

		/*
		 * The side phones reach past the page on narrow screens: the stage
		 * bleeds through the page padding so the clip falls on the window's
		 * edge (never on a shadow mid-page), and nothing scrolls sideways.
		 */
		.stage {
			position: relative;
			width: calc(100% + var(--space-8) * 2);
			margin-inline: calc(var(--space-8) * -1);
			overflow-x: clip;
			padding-bottom: var(--space-16);
			perspective: var(--stage-perspective);
			perspective-origin: 50% 0%;
		}

		.fan {
			display: grid;
			place-items: center;
			transform-style: preserve-3d;
			transform-origin: 50% 100%;
			transform: rotateX(var(--stage-lean));
		}

		.phone {
			--device-width: var(--size-device);
			grid-area: 1 / 1;
		}

		.phone.is-left {
			transform: translateX(calc(var(--stage-spread) * -1))
				translateZ(calc(var(--stage-depth) * -1)) rotateY(var(--stage-turn))
				scale(var(--stage-side));
		}

		.phone.is-right {
			transform: translateX(var(--stage-spread))
				translateZ(calc(var(--stage-depth) * -1))
				rotateY(calc(var(--stage-turn) * -1)) scale(var(--stage-side));
		}

		@media (max-width: 1023px) {
			.title {
				font-size: var(--text-hero-medium-size);
				line-height: var(--text-hero-medium-leading);
				letter-spacing: var(--text-hero-medium-tracking);
			}
		}

		@media (max-width: 640px) {
			gap: var(--space-10);
			padding-top: var(--space-6);

			.stage {
				width: calc(100% + var(--space-4) * 2);
				margin-inline: calc(var(--space-4) * -1);
			}

			.title {
				font-size: var(--text-hero-compact-size);
				line-height: var(--text-hero-compact-leading);
				letter-spacing: var(--text-hero-compact-tracking);
			}

			.lede {
				font-size: var(--text-feature-compact-size);
				line-height: var(--text-feature-compact-leading);
			}

			.phone {
				--device-width: var(--size-device-sm);
			}
		}

		@supports (animation-timeline: scroll()) {
			@media (prefers-reduced-motion: no-preference) {
				.fan,
				.phone.is-left,
				.phone.is-right {
					animation-duration: auto;
					animation-timing-function: linear;
					animation-fill-mode: both;
					animation-timeline: scroll(root block);
					animation-range: 0 var(--stage-travel);
				}

				.fan {
					animation-name: home-hero-fan;
				}

				.phone.is-left {
					animation-name: home-hero-left;
				}

				.phone.is-right {
					animation-name: home-hero-right;
				}

				/* Hidden at the top; the first stretch of scroll draws it, left to right.
				   The gap (2) is longer than the path, so no second dash shows at its end. */
				.title-stroke path {
					stroke-dasharray: 1 2;
					animation: home-hero-pen linear both;
					animation-timeline: scroll(root block);
					animation-range: 0 var(--stage-pen);
				}
			}
		}
	}
}

@keyframes home-hero-fan {
	to {
		transform: translateY(calc(var(--stage-rise) * -1)) rotateX(0deg);
	}
}

@keyframes home-hero-left {
	to {
		transform: translateX(calc(var(--stage-spread-open) * -1))
			translateZ(calc(var(--stage-depth-open) * -1))
			rotateY(var(--stage-turn-open)) scale(var(--stage-side));
	}
}

@keyframes home-hero-right {
	to {
		transform: translateX(var(--stage-spread-open))
			translateZ(calc(var(--stage-depth-open) * -1))
			rotateY(calc(var(--stage-turn-open) * -1)) scale(var(--stage-side));
	}
}

/* Invisible until the pen moves: a round cap would leave a dot at rest */
@keyframes home-hero-pen {
	from {
		stroke-dashoffset: 1;
		opacity: 0;
	}
	3% {
		opacity: 1;
	}
	to {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}


/* ./home-floats.css */
/*
 * Glass chips floating on the home page (HomeFloats): around the hero fan
 * (.is-hero), and beside two section headlines (.is-story, the night hour by
 * hour; .is-lock, Live Activities and a widget). Each one bobs on its own
 * beat and drifts at its own pace (--depth) as the page scrolls, so they read
 * as layers in front. The hero keeps two on a narrower window and none on a
 * phone; the section ones need a wide window, where the page has room beside
 * the 680 column. Without scroll timelines or with Reduce Motion they hold
 * still.
 */
:where(:root:has([data-glass])) {
	.home-floats {
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;

		.float {
			position: absolute;
		}

		.chip {
			display: inline-flex;
			align-items: center;
			gap: var(--space-1-5);
			height: var(--size-control);
			padding: 0 var(--space-3) 0 var(--space-2);
			border-radius: var(--radius-full);
			background: var(--material-glass-background);
			-webkit-backdrop-filter: var(--material-glass-filter);
			backdrop-filter: var(--material-glass-filter);
			box-shadow:
				var(--material-glass-highlight),
				0 0 0 var(--size-border) var(--color-separator),
				var(--material-glass-shadow);
			color: var(--material-glass-label);
			font-size: var(--text-subheadline-size);
			line-height: var(--text-subheadline-leading);
			font-weight: var(--font-weight-medium);
			white-space: nowrap;

			.icon {
				color: var(--color-link);
			}

			.value {
				color: var(--color-link);
				font-weight: var(--font-weight-semibold);
			}

			/* A night's log: the hour, quiet, before what happened */
			.time {
				color: var(--color-label-secondary);
				font-weight: var(--font-weight-regular);
			}

			/* A coin, like a Live Activity's leading badge */
			.badge {
				display: grid;
				place-items: center;
				height: var(--size-control-sm);
				padding: 0 var(--space-1-5);
				border-radius: var(--radius-full);
				background: var(--color-fill);
				font-size: var(--text-caption-size);
				line-height: var(--text-caption-leading);
				font-weight: var(--font-weight-semibold);
				letter-spacing: 0.02em;
			}

			/* A widget's last 24 hours, rising */
			.spark {
				width: calc(var(--size-icon) * 2.6);
				height: var(--size-icon);
				overflow: visible;

				path {
					fill: none;
					stroke: var(--color-link);
					stroke-width: calc(var(--size-border) * 1.5);
					stroke-linecap: round;
					stroke-linejoin: round;
				}
			}
		}

		/* A Live Activity: the words, then a bar of how close it is to the target */
		.chip.has-meter {
			display: inline-grid;
			grid-template-columns: auto auto auto;
			row-gap: var(--space-1-5);
			height: auto;
			padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
			border-radius: var(--radius-lg);

			.meter {
				grid-column: 1 / -1;
				height: var(--space-1);
				border-radius: var(--radius-full);
				background: var(--color-fill);
				overflow: hidden;

				span {
					display: block;
					width: calc(var(--meter) * 100%);
					height: 100%;
					border-radius: inherit;
					background: var(--color-accent);
				}
			}
		}

		@media (prefers-reduced-motion: no-preference) {
			.chip {
				animation: home-float-bob var(--duration-float) ease-in-out infinite
					alternate;
				animation-delay: calc(var(--duration-float) * var(--i) / -3);
			}
		}
	}

	/* Hero: around the fan, over the stage */
	.home-floats.is-hero {
		.float.is-overnight {
			top: 6%;
			left: 6%;
		}

		.float.is-bought {
			top: 20%;
			right: 4%;
		}

		.float.is-trail {
			top: 46%;
			left: 2%;
		}

		.float.is-paper {
			top: 58%;
			right: 8%;
		}

		@media (max-width: 1023px) {
			.float.is-trail,
			.float.is-paper {
				display: none;
			}
		}

		@media (max-width: 640px) {
			display: none;
		}

		@supports (animation-timeline: scroll()) {
			@media (prefers-reduced-motion: no-preference) {
				.float {
					animation: home-float-rise linear both;
					animation-timeline: scroll(root block);
					animation-range: 0 var(--stage-travel);
				}
			}
		}
	}

	/* Beside a section headline: in the page's room either side of the column */
	.home-floats:is(.is-story, .is-lock) {
		.float {
			--side: calc(100% + var(--space-10));
		}

		@media (max-width: 1199px) {
			display: none;
		}

		@supports (animation-timeline: view()) {
			@media (prefers-reduced-motion: no-preference) {
				.float {
					animation: home-float-pass linear both;
					animation-timeline: view();
				}
			}
		}
	}

	/* The night, zigzagging down from 02:14 to 06:58 */
	.home-floats.is-story {
		.float.is-bought {
			top: -6%;
			right: var(--side);
		}

		.float.is-trail {
			top: 14%;
			left: var(--side);
		}

		.float.is-held {
			top: 62%;
			right: calc(var(--side) + var(--space-6));
		}

		.float.is-profit {
			top: 82%;
			left: calc(var(--side) - var(--space-4));
		}
	}

	/* Two Live Activities and the 24-hour widget */
	.home-floats.is-lock {
		.float.is-eth {
			top: 0%;
			right: var(--side);
		}

		.float.is-day {
			top: 22%;
			left: var(--side);
		}

		.float.is-btc {
			top: 70%;
			left: calc(var(--side) + var(--space-8));
		}
	}
}

@keyframes home-float-bob {
	from {
		translate: 0 calc(var(--stage-float) * -1);
	}
	to {
		translate: 0 var(--stage-float);
	}
}

@keyframes home-float-rise {
	to {
		translate: 0 calc(var(--stage-parallax) * var(--depth) * -1);
	}
}

/* Across its pass through the window: from a little low to a little high */
@keyframes home-float-pass {
	from {
		translate: 0 calc(var(--stage-parallax) * var(--depth) / 2);
	}
	to {
		translate: 0 calc(var(--stage-parallax) * var(--depth) / -2);
	}
}


/* ./home-story.css */
/*
 * "While you sleep". Wide: the phone is pinned in the left column for as long
 * as the steps scroll by on the right, each step about a window tall, and
 * its screen crossfades to the step in the middle (useActiveStep). Once the
 * observer runs, the other steps dim. Narrow: each step is its phone, then
 * its words, and nothing pins.
 */
:where(:root:has([data-glass])) {
	.home-story {
		display: flex;
		flex-direction: column;
		gap: var(--space-16);

		.body {
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			column-gap: var(--space-16);
		}

		.pin {
			position: sticky;
			top: 0;
			align-self: start;
			display: grid;
			place-items: center;
			height: 100vh;
		}

		.pin .phone {
			--device-width: min(
				var(--size-device-lg),
				calc((100vh - var(--space-16) * 2) * var(--stage-fit))
			);
		}

		.layer {
			opacity: 0;
			transition: opacity var(--duration-slow) var(--ease-spring);
		}

		.layer.is-active {
			opacity: 1;
		}

		/* Half a spare window above and below, so the first and last step center under the pin */
		.steps {
			margin: 0;
			padding: calc((100vh - var(--stage-step)) / 2) 0;
			list-style: none;
		}

		.step {
			display: flex;
			align-items: center;
			min-height: var(--stage-step);
		}

		.step .phone {
			display: none;
		}

		.copy {
			display: flex;
			flex-direction: column;
			gap: var(--space-3);
			transition: opacity var(--duration-slow) var(--ease-spring);

			h3 {
				margin: 0;
				font-size: var(--text-display-small-size);
				line-height: var(--text-display-small-leading);
				font-weight: var(--text-display-small-weight);
				letter-spacing: var(--text-display-small-tracking);
				text-wrap: balance;
			}

			p {
				margin: 0;
				color: var(--color-label-secondary);
				font-size: var(--text-feature-size);
				line-height: var(--text-feature-leading);
				text-wrap: pretty;
			}
		}

		@media (min-width: 900px) {
			&[data-live] .step:not(.is-active) .copy {
				opacity: var(--opacity-disabled);
			}
		}

		@media (max-width: 899px) {
			gap: var(--space-12);

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

			.pin {
				display: none;
			}

			.steps {
				display: flex;
				flex-direction: column;
				gap: var(--space-16);
				padding: 0;
			}

			.step {
				flex-direction: column;
				gap: var(--space-8);
				min-height: 0;
				text-align: center;
			}

			.step .phone {
				--device-width: var(--size-device-sm);
				display: block;
			}

			.copy {
				align-items: center;
				max-width: var(--size-column);

				h3 {
					font-size: var(--text-page-title-size);
					line-height: var(--text-page-title-leading);
					letter-spacing: var(--text-page-title-tracking);
				}

				p {
					font-size: var(--text-feature-compact-size);
					line-height: var(--text-feature-compact-leading);
				}
			}

			@supports (animation-timeline: view()) {
				@media (prefers-reduced-motion: no-preference) {
					.step .phone {
						animation: home-rise linear both;
						animation-timeline: view();
						animation-range: entry 0% entry 80%;
					}
				}
			}
		}
	}
}


/* ./home-moment.css */
/*
 * Home moments: big type and big screens. `.is-lock` stands the Lock Screen
 * and the Home Screen side by side, turned in a little to face you (they
 * swing in from wider as they scroll into view). `.is-chat` puts the words
 * beside the Bud Intelligence chat, with glass questions floating at its
 * edges that ease in as it arrives. On a phone the questions line up under
 * the chat.
 */
:where(:root:has([data-glass])) {
	.home-moment {
		display: flex;
		flex-direction: column;
		gap: var(--space-16);

		.phone {
			--device-width: var(--size-device);
		}

		.stage {
			perspective: var(--stage-perspective);
		}

		@media (max-width: 640px) {
			gap: var(--space-10);

			.phone {
				--device-width: var(--size-device-sm);
			}
		}
	}

	.home-moment.is-lock {
		.stage {
			display: flex;
			justify-content: center;
			gap: var(--space-12);
			padding-bottom: var(--space-6);
		}

		.shot {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--space-6);
			margin: 0;
		}

		.shot.is-first {
			transform-origin: 100% 50%;
			transform: rotateY(var(--stage-turn-open));
		}

		.shot.is-second {
			transform-origin: 0% 50%;
			transform: rotateY(calc(var(--stage-turn-open) * -1));
		}

		figcaption {
			color: var(--color-label-secondary);
			font-size: var(--text-feature-compact-size);
			line-height: var(--text-feature-compact-leading);
		}

		@media (max-width: 640px) {
			.stage {
				gap: var(--space-4);
			}

			.phone {
				--device-width: calc(50vw - var(--space-6));
			}
		}

		@supports (animation-timeline: view()) {
			@media (prefers-reduced-motion: no-preference) {
				.shot {
					animation-duration: auto;
					animation-timing-function: linear;
					animation-fill-mode: both;
					animation-timeline: view();
					animation-range: entry 0% cover 50%;
				}

				.shot.is-first {
					animation-name: home-lock-first;
				}

				.shot.is-second {
					animation-name: home-lock-second;
				}
			}
		}
	}

	.home-moment.is-chat {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--space-16);

		/* The phone centered in its column; the questions hang off the column's edges over it */
		.stage {
			position: relative;
			display: flex;
			justify-content: center;
		}

		.asks {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.ask {
			position: absolute;
			width: max-content;
			max-width: var(--size-card-min);
			padding: var(--space-3) var(--space-4);
			border-radius: var(--radius-2xl);
			background: var(--material-glass-background);
			-webkit-backdrop-filter: var(--material-glass-filter);
			backdrop-filter: var(--material-glass-filter);
			box-shadow:
				var(--material-glass-highlight),
				0 0 0 var(--size-border) var(--color-separator),
				var(--material-glass-shadow);
			color: var(--material-glass-label);
			font-size: var(--text-feature-compact-size);
			line-height: var(--text-feature-compact-leading);
		}

		/* Left, tail toward the phone; then right */
		.ask:nth-child(odd) {
			left: 0;
			border-bottom-right-radius: var(--radius-sm);
		}

		.ask:nth-child(even) {
			right: 0;
			border-bottom-left-radius: var(--radius-sm);
		}

		.ask:nth-child(1) {
			top: 14%;
		}

		.ask:nth-child(2) {
			top: 34%;
		}

		.ask:nth-child(3) {
			top: 58%;
		}

		.ask:nth-child(4) {
			top: 78%;
		}

		@media (max-width: 899px) {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--space-12);

			.home-heading.is-start {
				align-items: center;
				margin: 0 auto;
				text-align: center;
			}

			.stage {
				flex-direction: column;
				align-items: center;
				gap: var(--space-8);
			}

			.asks {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: var(--space-2);
			}

			.ask {
				position: static;
				max-width: none;
			}
		}

		@supports (animation-timeline: view()) {
			@media (prefers-reduced-motion: no-preference) {
				.ask {
					animation: home-ask linear both;
					animation-timeline: view();
					animation-range: entry 40% cover 35%;
				}
			}
		}
	}
}

@keyframes home-lock-first {
	from {
		translate: 0 var(--stage-rise);
		transform: rotateY(var(--stage-turn));
	}
}

@keyframes home-lock-second {
	from {
		translate: 0 var(--stage-rise);
		transform: rotateY(calc(var(--stage-turn) * -1));
	}
}

@keyframes home-ask {
	from {
		opacity: 0;
		translate: 0 var(--stage-rise);
	}
}


/* ./home-trust.css */
/*
 * Where the money stays: a solid panel (content) lit by a faint accent glow,
 * the money path on the left and the headline over a 2×2 of points on the
 * right; on a phone it stacks headline, path, points.
 *
 * The path is a column of glass stops joined by wires: a gray one (plan and
 * reports), the accent trade wire carrying the trade-only key, and a dashed
 * critical one, crossed, down to the withdraw stop that is struck through.
 * With scroll timelines (and motion allowed) the stops rise in, the wires
 * draw down and a pulse runs the trade wire behind the key; otherwise the
 * picture is complete as it stands.
 */
:where(:root:has([data-glass])) {
	.home-trust {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		grid-template-areas:
			'path head'
			'path points';
		align-items: start;
		gap: var(--space-10) var(--space-16);
		padding: var(--space-16);
		border-radius: var(--radius-2xl);
		background:
			radial-gradient(
				ellipse 60% 70% at 18% 22%,
				color-mix(in srgb, var(--color-accent) 12%, transparent),
				transparent 70%
			),
			radial-gradient(
				ellipse 55% 60% at 100% 100%,
				color-mix(in srgb, var(--color-status-good) 7%, transparent),
				transparent 70%
			),
			var(--color-background-content);
		box-shadow: 0 0 0 var(--size-border) var(--color-separator);

		> .home-heading {
			grid-area: head;
			align-self: end;
		}

		.path {
			grid-area: path;
			align-self: center;
			display: flex;
			justify-content: center;
			margin: 0;
		}

		.copy {
			grid-area: points;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: var(--space-8);
		}

		/* Tiles: big, tinted by what they mean */
		.icon-tile {
			width: var(--size-tile-lg);
			height: var(--size-tile-lg);
			border-radius: var(--radius-lg);

			.icon,
			.brand-mark {
				width: var(--size-icon-lg);
				height: var(--size-icon-lg);
			}
		}

		.icon-tile.is-accent {
			background: color-mix(in srgb, var(--color-accent) 14%, transparent);
			color: var(--color-accent);
		}

		.icon-tile.is-good {
			background: color-mix(in srgb, var(--color-status-good) 16%, transparent);
			color: var(--color-status-good);
		}

		.icon-tile.is-warning {
			background: color-mix(
				in srgb,
				var(--color-status-warning) 22%,
				transparent
			);
			color: color-mix(
				in srgb,
				var(--color-status-warning) 55%,
				var(--color-label)
			);
		}

		.icon-tile.is-critical {
			background: color-mix(
				in srgb,
				var(--color-status-critical) 14%,
				transparent
			);
			color: var(--color-status-critical);
		}

		/* The money path */
		.flow {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: var(--size-flow-node);
			max-width: 100%;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.node {
			display: flex;
			align-items: center;
			gap: var(--space-3);
			width: 100%;
			padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
			border-radius: var(--radius-xl);
			background: var(--material-glass-background);
			-webkit-backdrop-filter: var(--material-glass-filter);
			backdrop-filter: var(--material-glass-filter);
			box-shadow:
				var(--material-glass-highlight),
				0 0 0 var(--size-border) var(--color-separator),
				var(--material-glass-shadow);
		}

		.label {
			display: flex;
			flex-direction: column;
			min-width: 0;

			strong {
				color: var(--color-label);
				font-size: var(--text-title3-size);
				line-height: var(--text-title3-leading);
				font-weight: var(--font-weight-semibold);
			}

			span {
				color: var(--color-label-secondary);
				font-size: var(--text-body-size);
				line-height: var(--text-copy-leading);
			}
		}

		.node.is-blocked {
			background: color-mix(
				in srgb,
				var(--color-status-critical) 5%,
				transparent
			);
			-webkit-backdrop-filter: none;
			backdrop-filter: none;
			box-shadow: 0 0 0 var(--size-border)
				color-mix(in srgb, var(--color-status-critical) 30%, transparent);

			s {
				text-decoration-color: var(--color-status-critical);
				text-decoration-thickness: calc(var(--size-border) * 2);
			}
		}

		.link {
			position: relative;
			display: grid;
			place-items: center;
			width: 100%;
			height: var(--space-16);
		}

		.wire {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 50%;
			width: calc(var(--size-border) * 2);
			translate: -50% 0;
			transform-origin: 50% 0%;
			border-radius: var(--radius-full);
			background: var(--color-label-tertiary);
		}

		.note {
			position: absolute;
			left: calc(50% + var(--space-3));
			color: var(--color-label-secondary);
			font-size: var(--text-subheadline-size);
			line-height: var(--text-subheadline-leading);
			white-space: nowrap;
		}

		.link.is-trade .wire {
			background: linear-gradient(
				var(--color-accent),
				color-mix(in srgb, var(--color-accent) 45%, transparent)
			);
		}

		.chip {
			position: relative;
			display: inline-flex;
			align-items: center;
			gap: var(--space-1-5);
			padding: var(--space-1) var(--space-3);
			border-radius: var(--radius-full);
			background: var(--color-background-content);
			box-shadow: 0 0 0 var(--size-border)
				color-mix(in srgb, var(--color-accent) 40%, transparent);
			color: var(--color-accent);
			font-size: var(--text-body-size);
			line-height: var(--text-body-leading);
			font-weight: var(--font-weight-semibold);
			white-space: nowrap;
		}

		.pulse {
			position: absolute;
			top: calc(var(--size-dot) / -2);
			left: calc(50% - var(--size-dot) / 2);
			width: var(--size-dot);
			height: var(--size-dot);
			border-radius: var(--radius-full);
			background: var(--color-accent);
			box-shadow: 0 0 0 var(--space-1)
				color-mix(in srgb, var(--color-accent) 22%, transparent);
			opacity: 0;
		}

		.link.is-blocked .wire {
			background: repeating-linear-gradient(
				to bottom,
				color-mix(in srgb, var(--color-status-critical) 70%, transparent) 0
					var(--space-1),
				transparent var(--space-1) var(--space-2)
			);
		}

		.cross {
			position: relative;
			display: grid;
			place-items: center;
			width: var(--size-control-sm);
			height: var(--size-control-sm);
			border-radius: var(--radius-full);
			background: var(--color-background-content);
			box-shadow: 0 0 0 var(--size-border)
				color-mix(in srgb, var(--color-status-critical) 45%, transparent);
			color: var(--color-status-critical);
		}

		/* The points */
		.points {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--space-8);
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.point {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: var(--space-2);

			.icon-tile {
				margin-bottom: var(--space-2);
			}

			h3 {
				margin: 0;
				font-size: var(--text-title-size);
				line-height: var(--text-title-leading);
				font-weight: var(--font-weight-semibold);
			}

			p {
				margin: 0;
				color: var(--color-label-secondary);
				font-size: var(--text-feature-compact-size);
				line-height: var(--text-feature-compact-leading);
				text-wrap: pretty;
			}
		}

		.copy > .link-action {
			font-size: var(--text-feature-compact-size);
		}

		@media (max-width: 1023px) {
			grid-template-columns: minmax(0, 1fr);
			grid-template-areas:
				'head'
				'path'
				'points';
			gap: var(--space-10);

			> .home-heading {
				align-self: auto;
			}
		}

		@media (max-width: 640px) {
			padding: var(--space-10) var(--space-5);

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

		@supports (animation-timeline: view()) {
			@media (prefers-reduced-motion: no-preference) {
				.node,
				.wire,
				.chip,
				.cross {
					animation-duration: auto;
					animation-timing-function: linear;
					animation-fill-mode: both;
					animation-timeline: view();
				}

				.node {
					animation-name: home-trust-rise;
					animation-range: entry 10% entry 90%;
				}

				.wire {
					animation-name: home-trust-draw;
					animation-range: entry 50% cover 45%;
				}

				.chip,
				.cross {
					animation-name: home-trust-pop;
					animation-range: entry 80% cover 50%;
				}

				.pulse {
					animation: home-trust-pulse var(--duration-pulse) ease-in-out infinite;
				}
			}
		}
	}
}

@keyframes home-trust-rise {
	from {
		opacity: 0;
		translate: 0 var(--space-4);
	}
}

@keyframes home-trust-draw {
	from {
		scale: 1 0;
	}
}

@keyframes home-trust-pop {
	from {
		opacity: 0;
		scale: var(--stage-side);
	}
}

/* Down the trade wire, behind the key, then gone; a beat of rest before the next */
@keyframes home-trust-pulse {
	0% {
		opacity: 0;
		translate: 0 0;
	}
	12% {
		opacity: 1;
	}
	62% {
		opacity: 1;
		translate: 0 var(--space-16);
	}
	74%,
	100% {
		opacity: 0;
		translate: 0 var(--space-16);
	}
}


/* ./home-works-with.css */
/*
 * Works with: a headline, a hairline, then three quiet columns (exchanges,
 * AI agents, browsers). Exchanges is a short list at its own width; the other
 * two share the rest, each a small label over its marks in a 2×2 (two columns
 * at least as wide as their names, one row height, names on one baseline),
 * then a line and a link. The columns share four rows
 * (subgrid), so the lines and links line up. On a phone they stack.
 */
:where(:root:has([data-glass])) {
	.home-works-with {
		display: flex;
		flex-direction: column;
		gap: var(--space-8);

		> h2 {
			margin: 0;
			font-size: var(--text-display-small-size);
			line-height: var(--text-display-small-leading);
			font-weight: var(--text-display-small-weight);
			letter-spacing: var(--text-display-small-tracking);
			text-align: center;
		}

		/* The 680 column, like the questions below: three columns, kept compact */
		.groups {
			display: grid;
			width: 100%;
			max-width: var(--size-column);
			margin-inline: auto;
			/* Exchanges is one short list: it takes its own width, the 2×2 columns share the rest */
			grid-template-columns: max-content repeat(2, minmax(0, 1fr));
			grid-template-rows: repeat(4, auto);
			column-gap: var(--space-10);
			padding-top: var(--space-8);
			border-top: var(--size-border) solid var(--color-separator);
		}

		.group {
			display: grid;
			grid-row: span 4;
			grid-template-rows: subgrid;
			row-gap: var(--space-3);
			align-content: start;

			h3 {
				margin: 0;
				color: var(--color-label-secondary);
				font-size: var(--text-caption-size);
				line-height: var(--text-caption-leading);
				font-weight: var(--text-caption-weight);
				letter-spacing: 0.02em;
				text-transform: uppercase;
			}

			p {
				margin: 0;
				color: var(--color-label-secondary);
				font-size: var(--text-title3-size);
				line-height: var(--text-lede-leading);
				font-weight: var(--font-weight-regular);
				text-wrap: pretty;
			}

			.link-action {
				justify-self: start;
				font-size: var(--text-title3-size);
			}
		}

		.marks {
			display: grid;
			grid-template-columns: repeat(2, minmax(max-content, 1fr));
			grid-auto-rows: var(--size-control);
			gap: var(--space-1) var(--space-4);
			margin: 0;
			padding: 0;
			list-style: none;

			li {
				display: flex;
				align-items: center;
				gap: var(--space-2);
				color: var(--color-label);
				font-size: var(--text-title3-size);
				line-height: var(--text-title3-leading);
				white-space: nowrap;
			}

			.brand-mark {
				width: var(--size-icon-lg);
				height: var(--size-icon-lg);
				color: var(--color-label-secondary);
			}

			/* Exchanges: one per row, so a tag like "Coming soon" has room */
			&.is-list {
				grid-template-columns: minmax(0, 1fr);
			}
		}

		/* Not there yet: a small quiet pill on the name's line */
		.soon {
			padding: 0 var(--space-1-5);
			border-radius: var(--radius-full);
			background: var(--color-fill);
			color: var(--color-label-secondary);
			font-size: var(--text-caption-size);
			line-height: var(--text-subheadline-leading);
			font-weight: var(--font-weight-medium);
		}

		@media (max-width: 899px) {
			.groups {
				grid-template-columns: minmax(0, 1fr);
				grid-template-rows: none;
				row-gap: var(--space-8);
			}

			.group {
				display: flex;
				grid-row: auto;
				flex-direction: column;
				align-items: flex-start;
				gap: var(--space-3);
			}

			.marks {
				width: 100%;
			}
		}
	}
}


/* ./home-compare.css */
/* Compare with: one line of bot names between hairlines, then all comparisons */
:where(:root:has([data-glass])) {
	.home-compare {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: center;
		gap: var(--space-2) var(--space-5);
		padding: var(--space-6) 0;
		border-block: var(--size-border) solid var(--color-separator);
		font-size: var(--text-title3-size);
		line-height: var(--text-title3-leading);

		h2 {
			margin: 0;
			color: var(--color-label);
			font-size: inherit;
			line-height: inherit;
			font-weight: var(--font-weight-semibold);
		}

		ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: var(--space-2) var(--space-5);
			margin: 0;
			padding: 0;
			list-style: none;
		}

		a:not(.link-action) {
			color: var(--color-label-secondary);
			transition: color var(--duration-fast) var(--ease-spring);
		}

		a:not(.link-action):hover {
			color: var(--color-label);
		}

		.link-action {
			font-size: inherit;
		}
	}
}


/* ./home-start.css */
/* The closing call: a big question, one line, the App Store and the web app */
:where(:root:has([data-glass])) {
	.home-start {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-5);
		padding-bottom: var(--space-12);
		text-align: center;

		h2 {
			margin: 0;
			font-size: var(--text-hero-medium-size);
			line-height: var(--text-hero-medium-leading);
			font-weight: var(--text-hero-medium-weight);
			letter-spacing: var(--text-hero-medium-tracking);
			text-wrap: balance;
		}

		p {
			max-width: var(--size-column);
			margin: 0;
			color: var(--color-label-secondary);
			font-size: var(--text-feature-size);
			line-height: var(--text-feature-leading);
			text-wrap: balance;
		}

		.actions {
			justify-content: center;
			margin-top: var(--space-3);
		}

		@media (max-width: 640px) {
			padding-bottom: var(--space-6);

			h2 {
				font-size: var(--text-hero-compact-size);
				line-height: var(--text-hero-compact-leading);
				letter-spacing: var(--text-hero-compact-tracking);
			}

			p {
				font-size: var(--text-feature-compact-size);
				line-height: var(--text-feature-compact-leading);
			}
		}
	}
}


/* ./default-skeleton.css */
/* A page loading in the site column: its intro and rows sit in the column's own rhythm. */
:where(:root:has([data-glass])) {
	.default-skeleton {
		display: contents;
	}
}


/* ./fomo-notification.css */
/*
 * The home's quiet toast: a recent bot notification in the bottom corner.
 * Solid, not glass: a live backdrop blur on a fixed layer recaptures the
 * scrolling page in Safari and flashes the viewport. Under Reduce Motion it
 * only fades.
 */
:where(:root:has([data-glass])) {
	.fomo-notification {
		position: fixed;
		z-index: var(--layer-popover);
		left: max(var(--space-4), env(safe-area-inset-left));
		bottom: max(var(--space-4), env(safe-area-inset-bottom));
		display: grid;
		grid-template-columns: var(--size-control) minmax(0, 1fr);
		align-items: start;
		gap: var(--space-3);
		width: min(calc(100vw - var(--space-4) * 2), var(--size-popover));
		padding: var(--space-3);
		border-radius: var(--radius-xl);
		background: var(--material-solid-background);
		box-shadow:
			0 0 0 var(--size-border) var(--material-solid-border),
			var(--material-glass-shadow);
		color: var(--color-label);
		opacity: 0;
		translate: 0 var(--space-2);
		pointer-events: none;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
		transition:
			opacity var(--duration-base) var(--ease-spring),
			translate var(--duration-base) var(--ease-spring);

		&.is-visible {
			opacity: 1;
			translate: 0 0;
			pointer-events: auto;
		}

		&:active {
			opacity: var(--opacity-pressed);
		}

		.fomo-notification-icon {
			display: block;
			width: var(--size-control);
			height: var(--size-control);
			border-radius: var(--radius-sm);
		}

		.fomo-notification-text {
			display: flex;
			flex-direction: column;
			gap: calc(var(--space-1) / 2);
			min-width: 0;
		}

		.fomo-notification-meta {
			display: flex;
			justify-content: space-between;
			gap: var(--space-2);
			color: var(--color-label-secondary);
			font-size: var(--text-caption-size);
			line-height: var(--text-caption-leading);
		}

		.fomo-notification-title {
			font-size: var(--text-headline-size);
			line-height: var(--text-headline-leading);
			font-weight: var(--text-headline-weight);
		}

		.fomo-notification-body {
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			color: var(--color-label-secondary);
			font-size: var(--text-subheadline-size);
			line-height: var(--text-subheadline-leading);
		}

		@media (prefers-reduced-motion: reduce) {
			translate: none;
			transition: opacity var(--duration-fast) linear;
		}
	}
}