/* 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 */
/*
 * CryptoBud shared design tokens
 * Source of truth for color, type, glass, motion, and Figma layout scale.
 * Marketing canvas: --color-bg frozen at --color-bg-light / --color-bg-dark.
 */

:root {
	color-scheme: light dark;

	/* Canvas — frozen for landing phone mockup composition */
	--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);
	--on-ink: #fff;

	/* Brand accent — marketing green. Fill stays dark in both schemes
	   so white labels on pills keep contrast. */
	--accent: rgb(26 140 77);
	--accent-fill: 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;

	/* Legacy aliases — compile during marketing migration */
	--color-ink: var(--ink);
	--color-ink-rgb: 0 0 0;
	--color-muted: var(--ink-muted);
	--color-accent: var(--accent);
	--color-accent-rgb: 26 140 77;
	--color-surface: var(--flat-fill-opaque);
	--color-focus: var(--accent);
	--color-black: #000000;
	--color-white: #ffffff;

	/* Typography — system UI body; Sora titles; Arial Narrow italic callouts */
	--font-body:
		system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
		sans-serif;
	--font-wordmark: 'Sora', var(--font-body);
	--font-display: 'Sora', var(--font-body);
	--font-accent:
		'Arial Narrow', 'Archivo Narrow', 'Roboto Condensed', sans-serif;

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

	--text-kicker: 0.62rem;
	--text-micro: 0.68rem;
	--text-tiny: 0.7rem;
	--text-dense: 0.72rem;
	--text-caption: 0.75rem;
	--text-fine: 0.78rem;
	--text-small: 0.8rem;
	--text-note: 0.82rem;
	--text-callout: 0.85rem;
	--text-chip: 0.86rem;
	--text-subhead: 0.88rem;
	--text-tight: 0.9rem;
	--text-label: 0.92rem;
	--text-tab: 0.94rem;
	--text-ios-callout: 0.9375rem;
	--text-lead: 0.95rem;
	--text-compact: 0.98rem;
	--text-body: 1rem;
	--text-metric: 1.02rem;
	--text-price: 1.05rem;
	--text-headline: 1.06rem;
	--text-face: 1.1rem;
	--text-panel: 1.15rem;
	--text-task: 1.2rem;
	--text-title: 1.25rem;
	--text-hero: 1.35rem;
	--text-stat: 1.375rem;
	--text-display-sm: 2rem;
	--text-ios-footnote: var(--space-13);
	--text-ios-subhead: var(--space-15);
	--text-ios-body: var(--space-17);

	--leading-display: 0.92605;
	--leading-body: 1.063;
	--leading-normal: normal;

	/* Figma canvas → CSS scale (1 design px) */
	--scale: clamp(0.048px, calc(100vw / 11800), 0.104px);

	/* Derived type ramp (design px × scale) */
	--text-display: calc(700 * var(--scale));
	--text-display-accent: calc(750 * var(--scale));
	--text-feature: calc(310 * var(--scale));
	--text-store-eyebrow: calc(70 * var(--scale));
	--text-store-title: calc(200 * var(--scale));
	--text-store-lg-eyebrow: calc(92 * var(--scale));
	--text-store-lg-title: calc(270 * var(--scale));

	--tracking-display: calc(-70 * var(--scale));
	--tracking-display-accent: calc(-45 * var(--scale));
	--tracking-feature: calc(-21 * var(--scale));
	--tracking-store-eyebrow: calc(19.6 * var(--scale));
	--tracking-store-title: calc(-2 * var(--scale));
	--tracking-store-lg-eyebrow: calc(24 * var(--scale));
	--tracking-store-lg-title: calc(-4 * var(--scale));

	/* Space (Figma design-px × --scale) */
	--space-section: calc(2934 * var(--scale)); /* block → block */
	/* Shared header inset. Landing pulls its header up to this; interior pages pad to it. */
	--space-header-y: calc(720 * var(--scale));
	--space-landing-y-start: calc(1961 * var(--scale));
	--space-page-y: var(--space-landing-y-start) calc(1800 * var(--scale));
	--space-page-x: max(1.25rem, calc(240 * var(--scale)));
	--space-content-top: calc(800 * var(--scale)); /* phone top → heading */
	--space-hero-pad-top: calc(831 * var(--scale));
	--space-hero-pad-bottom: calc(1354 * var(--scale));
	--space-hero-brand-to-heading: calc(210 * var(--scale));
	--space-hero-heading-to-lede: calc(400 * var(--scale));
	--space-hero-to-cta: calc(720 * var(--scale)); /* min air above badge */
	--space-heading-to-body: calc(
		1667 * var(--scale)
	); /* heading → feature list */
	--space-feature-gap: calc(263 * var(--scale)); /* feature row → row */
	--space-feature-icon: calc(215 * var(--scale));
	--space-brand-gap: calc(75 * var(--scale));
	--space-overlap: calc(1462 * var(--scale));

	/* Size */
	--size-content: calc(11041 * var(--scale));
	/* Interior routes (header + .inner). Keep this shared or the nav drifts. */
	--size-page: calc(9800 * var(--scale));
	--size-phone: calc(6844 * var(--scale));
	--size-copy: calc(5034 * var(--scale));
	--size-brand: calc(372 * var(--scale));
	--size-wordmark-w: calc(1333 * var(--scale));
	--size-wordmark-h: calc(268 * var(--scale));
	--size-icon: calc(290 * var(--scale));
	--size-store-w: calc(1960 * var(--scale));
	--size-store-h: calc(598 * var(--scale));
	--size-store-lg-h: calc(840 * var(--scale));
	--size-mascot: calc(3200 * var(--scale));
	--radius-pill: calc(400 * var(--scale));

	/* 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-5: 5px;
	--space-6: 6px;
	--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-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;
	--focus-ring: var(--space-2);
	--focus-offset: var(--space-2);
	--blur-2: 2px;
	--blur-8: 8px;
	--blur-10: 10px;
	--blur-12: 12px;
	--blur-16: 16px;
	--blur-24: 24px;
	--blur-48: 48px;
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--sheet-body-pad: calc(var(--text-body) + var(--safe-bottom));
	/* Rem space — leftover marketing/portfolio rem, 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-2-1: 2.1rem;
	--space-rem-neg-0-45: -0.45rem;
	--space-rem-neg-0-4: -0.4rem;
	--space-rem-neg-0-12: -0.12rem;
	--space-rem-neg-0-07: -0.07rem;
	--space-rem-0-05: 0.05rem;
	--space-rem-0-07: 0.07rem;
	--space-rem-0-08: 0.08rem;
	--space-rem-0-1: 0.1rem;
	--space-rem-0-12: 0.12rem;
	--space-rem-0-15: 0.15rem;
	--space-rem-0-18: 0.18rem;
	--space-rem-0-2: 0.2rem;
	--space-rem-0-22: 0.22rem;
	--space-rem-0-25: 0.25rem;
	--space-rem-0-28: 0.28rem;
	--space-rem-0-3: 0.3rem;
	--space-rem-0-32: 0.32rem;
	--space-rem-0-34: 0.34rem;
	--space-rem-0-35: 0.35rem;
	--space-rem-0-4: 0.4rem;
	--space-rem-0-42: 0.42rem;
	--space-rem-0-45: 0.45rem;
	--space-rem-0-48: 0.48rem;
	--space-rem-0-55: 0.55rem;
	--space-rem-0-575: 0.575rem;
	--space-rem-0-6: 0.6rem;
	--space-rem-0-62: 0.62rem;
	--space-rem-0-68: 0.68rem;
	--space-rem-0-7: 0.7rem;
	--space-rem-0-72: 0.72rem;
	--space-rem-0-74: 0.74rem;
	--space-rem-0-75: 0.75rem;
	--space-rem-0-78: 0.78rem;
	--space-rem-0-8: 0.8rem;
	--space-rem-0-82: 0.82rem;
	--space-rem-0-84: 0.84rem;
	--space-rem-0-875: 0.875rem;
	--space-rem-0-88: 0.88rem;
	--space-rem-0-9: 0.9rem;
	--space-rem-0-92: 0.92rem;
	--space-rem-0-95: 0.95rem;
	--space-rem-0-96: 0.96rem;
	--space-rem-0-98: 0.98rem;
	--space-rem-1: 1rem;
	--space-rem-1-02: 1.02rem;
	--space-rem-1-05: 1.05rem;
	--space-rem-1-08: 1.08rem;
	--space-rem-1-12: 1.12rem;
	--space-rem-1-14: 1.14rem;
	--space-rem-1-15: 1.15rem;
	--space-rem-1-16: 1.16rem;
	--space-rem-1-18: 1.18rem;
	--space-rem-1-2: 1.2rem;
	--space-rem-1-22: 1.22rem;
	--space-rem-1-25: 1.25rem;
	--space-rem-1-28: 1.28rem;
	--space-rem-1-35: 1.35rem;
	--space-rem-1-4: 1.4rem;
	--space-rem-1-45: 1.45rem;
	--space-rem-1-5: 1.5rem;
	--space-rem-1-55: 1.55rem;
	--space-rem-1-6: 1.6rem;
	--space-rem-1-75: 1.75rem;
	--space-rem-1-8: 1.8rem;
	--space-rem-1-85: 1.85rem;
	--space-rem-1-95: 1.95rem;
	--space-rem-2: 2rem;
	--space-rem-2-35: 2.35rem;
	--space-rem-2-5: 2.5rem;
	--space-rem-2-55: 2.55rem;
	--space-rem-2-75: 2.75rem;
	--space-rem-2-8: 2.8rem;
	--space-rem-3: 3rem;
	--space-rem-3-25: 3.25rem;
	--space-rem-3-4: 3.4rem;
	--space-rem-4: 4rem;
	--space-rem-4-5: 4.5rem;
	--space-rem-5: 5rem;
	--space-rem-5-5: 5.5rem;
	--space-rem-5-6: 5.6rem;
	--space-half: var(--space-rem-0-5);
	--space-rem-sm: var(--space-rem-0-65);
	--space-rem-md: var(--space-rem-0-85);
	--space-rem-lg: var(--space-rem-1-1);
	--space-rem-xl: var(--space-rem-2-1);
	/* Measure — rem widths / max-widths >= 6rem. */
	--measure-6: 6rem;
	--measure-6-25: 6.25rem;
	--measure-6-5: 6.5rem;
	--measure-6-8: 6.8rem;
	--measure-7-4: 7.4rem;
	--measure-8-2: 8.2rem;
	--measure-8-4: 8.4rem;
	--measure-8-5: 8.5rem;
	--measure-8-6: 8.6rem;
	--measure-8-75: 8.75rem;
	--measure-9: 9rem;
	--measure-9-2: 9.2rem;
	--measure-9-5: 9.5rem;
	--measure-10: 10rem;
	--measure-10-2: 10.2rem;
	--measure-10-6: 10.6rem;
	--measure-11-5: 11.5rem;
	--measure-11-6: 11.6rem;
	--measure-12: 12rem;
	--measure-13: 13rem;
	--measure-14: 14rem;
	--measure-15: 15rem;
	--measure-16: 16rem;
	--measure-18: 18rem;
	--measure-20: 20rem;
	--measure-22: 22rem;
	--measure-22-5: 22.5rem;
	--measure-26: 26rem;
	--measure-28: 28rem;
	--measure-34: 34rem;
	--measure-36: 36rem;
	--measure-38: 38rem;
	--measure-40: 40rem;
	--measure-42: 42rem;
	--measure-44: 44rem;
	--measure-54: 54rem;
	--measure-56: 56rem;
	--measure-72: 72rem;
	--measure-112: 112rem;
	/* Scheme-stable washes — exact rgb, do not flip with --fill-soft. */
	--offscreen: -9999px;
	--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-10: rgb(0 0 0 / 0.1);
	--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);
	--loss-12: rgb(214 46 46 / 0.12);

	/* Shape — shared pills / cards / chips. --radius-pill stays Figma-scaled. */
	--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-field: var(--space-16);
	--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 */
	--score-partial-fill: #f6e59b;
	--score-partial-ink: #6f5608;
	--score-fail-fill: #f5c9a8;
	--score-fail-ink: #c24a12;
	--space-footer-gap: calc(720 * var(--scale));
	--space-footer-mascot-to-heading: calc(-280 * var(--scale));

	/* Breakpoints (reference only — used in media queries below) */
	--bp-tablet: 900px;
	--bp-phone: 480px;

	/* Motion */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-leave: cubic-bezier(0.4, 0, 0.2, 1);
	--duration-fast: 160ms;
	--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);
		--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);

		--color-ink-rgb: 255 255 255;
		--color-accent-rgb: 56 219 122;
		--color-surface: var(--flat-fill-opaque);
	}
}

@media (max-width: 900px) {
	:root {
		--scale: clamp(0.055px, calc(100vw / 6200), 0.09px);
		--space-header-y: calc(480 * var(--scale));
		--space-landing-y-start: var(--space-header-y);
		--space-page-y: var(--space-landing-y-start) calc(1200 * var(--scale));
		--space-section: calc(1600 * var(--scale));
		--space-content-top: 0px;
		--space-hero-pad-top: 0px;
		--space-hero-pad-bottom: 0px;
		--space-hero-brand-to-heading: calc(120 * var(--scale));
		--space-hero-heading-to-lede: calc(280 * var(--scale));
		--space-hero-to-cta: calc(420 * var(--scale));
		--space-heading-to-body: calc(420 * var(--scale));
		--space-feature-gap: calc(180 * var(--scale));
		--space-footer-gap: calc(360 * var(--scale));
		--size-content: calc(7200 * var(--scale));
		--size-phone: calc(5200 * var(--scale));
		--size-mascot: calc(4200 * var(--scale));
		/* App Store CTAs read small on phone — bump ~20% vs desktop design-px */
		--size-store-w: calc(2360 * var(--scale));
		--size-store-h: calc(720 * var(--scale));
		--text-store-eyebrow: calc(84 * var(--scale));
		--text-store-title: calc(240 * var(--scale));
	}
}

@media (max-width: 480px) {
	:root {
		--scale: clamp(0.06px, calc(100vw / 5200), 0.085px);
		--text-display: calc(620 * var(--scale));
		--text-display-accent: calc(660 * var(--scale));
		--text-feature: calc(300 * var(--scale));
		--tracking-display: calc(-48 * var(--scale));
		--tracking-display-accent: calc(-32 * var(--scale));
		--tracking-feature: calc(-12 * var(--scale));
	}
}


/* ./fonts.css */
/* Self-hosted brand fonts (Sora titles + Arial Narrow italic callouts) */

@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;
}

/* Prefer local Arial Narrow; Archivo Narrow is the open webfont fallback */
@font-face {
	font-family: 'Arial Narrow';
	src:
		local('Arial Narrow Italic'),
		local('ArialNarrow-Italic'),
		url('/assets/fonts/archivo-narrow-400-italic.woff2') format('woff2');
	font-weight: var(--weight-regular);
	font-style: italic;
	font-display: swap;
}


/* ./base.css */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background: var(--color-bg);
}

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) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::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/brand.css */
.brand {
	display: flex;
	align-items: center;
	gap: var(--space-brand-gap);
	height: var(--size-brand);

	.avatar-frame {
		width: var(--size-brand);
		height: var(--size-brand);
		flex-shrink: 0;
	}

	.avatar {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.wordmark {
		width: var(--size-wordmark-w);
		height: var(--size-wordmark-h);
		flex-shrink: 0;
		font-family: var(--font-wordmark);
		background-color: var(--ink);
		-webkit-mask: url('/assets/images/cryptobud-wordmark.svg') center / contain
			no-repeat;
		mask: url('/assets/images/cryptobud-wordmark.svg') center / contain
			no-repeat;
	}
}


/* ./components/heading.css */
.heading {
	max-width: var(--size-copy);
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	font-size: var(--text-display);
	line-height: var(--leading-display);
	letter-spacing: var(--tracking-display);
	color: var(--ink);
	overflow-wrap: normal;
	word-break: normal;

	.accent {
		font-family: var(--font-accent);
		font-weight: var(--weight-regular);
		font-style: italic;
		font-size: var(--text-display-accent);
		line-height: var(--leading-display);
		letter-spacing: var(--tracking-display-accent);
		color: var(--accent);

		.lead {
			color: var(--ink);
		}
	}

	&.stack > span {
		display: block;
	}
}


/* ./components/app-store-badge.css */
/* Root class matches filename: app-store-badge.css → .app-store-badge */

.app-store-badge {
	--pad-x: calc(279 * var(--scale));
	--gap: calc(105 * var(--scale));
	--logo: calc(271 * var(--scale));

	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--gap);
	width: auto;
	min-width: var(--size-store-w);
	height: var(--size-store-h);
	padding-inline: var(--pad-x);
	/* Always a true capsule (ends are semicircles), regardless of height */
	border: none;
	border-radius: var(--radius-full);
	background: var(--color-black);
	color: var(--color-white);
	overflow: hidden;
	outline: none;
	transform: translateZ(0);
	-webkit-tap-highlight-color: transparent;
	transition:
		transform var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-fast) var(--ease-out),
		filter var(--duration-fast) var(--ease-out);

	/* Safari: filter:blur ignores overflow+radius; mask clips the fx layer
	   (not the link) so hover box-shadow stays intact. */
	.fx {
		position: absolute;
		inset: 0;
		z-index: 0;
		overflow: hidden;
		border-radius: inherit;
		pointer-events: none;
		background: var(--color-black);
		-webkit-mask-image: linear-gradient(#fff 0 0);
		mask-image: linear-gradient(#fff 0 0);
	}

	.logo {
		position: relative;
		z-index: 2;
		width: var(--logo);
		height: calc(335 * var(--scale));
		max-width: none;
		flex-shrink: 0;
		object-fit: contain;
	}

	.label {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: none;
		line-height: var(--leading-normal);
	}

	.eyebrow {
		font-family: var(--font-display);
		font-weight: var(--weight-regular);
		font-size: var(--text-store-eyebrow);
		letter-spacing: var(--tracking-store-eyebrow);
		text-transform: uppercase;
		white-space: nowrap;
	}

	.title {
		margin-top: calc(-8 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-bold);
		font-size: var(--text-store-title);
		letter-spacing: var(--tracking-store-title);
		white-space: nowrap;
	}

	.light {
		position: absolute;
		inset: -20% -40%;
		z-index: 1;
		background: linear-gradient(
			105deg,
			transparent 35%,
			var(--white-08) 47%,
			var(--white-22) 50%,
			var(--white-08) 53%,
			transparent 65%
		);
		transform: translateX(-55%);
		filter: blur(var(--space-22));
		opacity: 0;

		&.is-flashing {
			opacity: 1;
			/* Duration must match appStoreLightFlashMs in lib/appStore.ts */
			animation: app-store-badge-light 1.1s var(--ease-out) 1 forwards;
		}
	}

	.liquid {
		position: absolute;
		inset: -40%;
		z-index: 0;
		opacity: 0.5;
		background:
			radial-gradient(
				circle at 30% 40%,
				rgb(56 196 78 / 0.82),
				transparent 42%
			),
			radial-gradient(circle at 70% 60%, var(--white-22), transparent 38%),
			radial-gradient(circle at 50% 80%, rgb(34 148 52 / 0.55), transparent 45%);
		filter: blur(var(--space-18));
		animation: app-store-badge-liquid 7s ease-in-out infinite;
		transition: opacity var(--duration-base) var(--ease-out);
	}

	&:hover {
		transform: translateY(calc(-4 * var(--scale))) translateZ(0);
		box-shadow: 0 var(--space-18) var(--space-40)
			rgb(var(--color-ink-rgb) / 0.18);

		.liquid {
			opacity: 0.95;
			animation-duration: 2.4s;
		}

		.light {
			background: linear-gradient(
				105deg,
				transparent 30%,
				var(--white-12) 45%,
				rgb(255 255 255 / 0.38) 50%,
				var(--white-12) 55%,
				transparent 70%
			);

			&.is-flashing {
				animation-duration: 0.85s;
			}
		}
	}

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

	&:active {
		transform: translateY(calc(2 * var(--scale))) scale(0.97) translateZ(0);
		box-shadow: 0 var(--space-4) var(--space-12)
			rgb(var(--color-ink-rgb) / 0.22);
		filter: brightness(0.92);

		.liquid {
			opacity: 0.55;
			animation-play-state: paused;
		}

		.light {
			animation-play-state: paused;
			opacity: 0.5;
		}
	}

	&.lg {
		--pad-x: calc(360 * var(--scale));
		--gap: calc(140 * var(--scale));
		--logo: calc(360 * var(--scale));
		width: fit-content;
		max-width: 100%;
		height: var(--size-store-lg-h);
		padding-inline: var(--pad-x);
		justify-content: center;
		box-sizing: border-box;

		.logo {
			height: calc(445 * var(--scale));
		}

		.eyebrow {
			font-size: var(--text-store-lg-eyebrow);
			letter-spacing: var(--tracking-store-lg-eyebrow);
		}

		.title {
			margin-top: calc(-12 * var(--scale));
			font-size: var(--text-store-lg-title);
			letter-spacing: var(--tracking-store-lg-title);
		}
	}

	&.open {
		width: fit-content;
		max-width: 100%;
		padding-inline: var(--pad-x);
		gap: 0.4em;
		font-family: var(--font-display);
		font-weight: var(--weight-bold);
		font-size: var(--text-store-title);
		letter-spacing: var(--tracking-store-title);
		white-space: nowrap;
		cursor: pointer;

		.label {
			white-space: nowrap;
		}

		.out {
			position: relative;
			z-index: 2;
			flex: none;
			width: 1em;
			height: 1em;
			overflow: visible;
			transition: transform var(--duration-fast) var(--ease-out);
		}

		&:hover .out,
		&:focus-visible .out {
			transform: translate(0.12em, -0.12em);
		}
	}

	&.forest {
		background: #0c1f0e;
		color: var(--color-white);

		.fx {
			background: #0c1f0e;
		}

		.liquid {
			opacity: 0.5;
			background:
				radial-gradient(
					circle at 28% 38%,
					rgb(56 196 78 / 0.82),
					transparent 44%
				),
				radial-gradient(circle at 72% 58%, var(--white-18), transparent 38%),
				radial-gradient(
					circle at 48% 82%,
					rgb(34 148 52 / 0.55),
					transparent 48%
				);
		}

		&:hover {
			box-shadow: 0 var(--space-22) var(--space-48) rgb(8 28 12 / 0.35);

			.liquid {
				opacity: 0.95;
			}
		}

		&:active {
			box-shadow: 0 var(--space-6) var(--space-16) rgb(8 28 12 / 0.4);
		}
	}

	@media (max-width: 900px) {
		--pad-x: calc(320 * var(--scale));
		--gap: calc(120 * var(--scale));
		--logo: calc(310 * var(--scale));
		width: auto;
		min-width: min(100%, var(--size-store-w));
		max-width: 100%;

		.logo {
			height: calc(380 * var(--scale));
		}

		&.lg {
			/*
			 * Match the hero capsule silhouette on mobile: same height, wider
			 * padding — not the tall desktop `.lg` proportions.
			 */
			--pad-x: calc(340 * var(--scale));
			--gap: calc(120 * var(--scale));
			--logo: calc(310 * var(--scale));
			width: fit-content;
			min-width: min(100%, calc(2400 * var(--scale)));
			max-width: 100%;
			height: var(--size-store-h);
			padding-inline: var(--pad-x);

			.logo {
				height: calc(380 * var(--scale));
			}

			.eyebrow {
				font-size: var(--text-store-eyebrow);
				letter-spacing: var(--tracking-store-eyebrow);
			}

			.title {
				margin-top: calc(-8 * var(--scale));
				font-size: var(--text-store-title);
				letter-spacing: var(--tracking-store-title);
			}
		}

		&.open {
			width: fit-content;
			min-width: 0;
			padding-inline: var(--pad-x);
		}
	}
}

@keyframes app-store-badge-light {
	from {
		transform: translateX(-55%);
		opacity: 0;
	}
	12%,
	88% {
		opacity: 1;
	}
	to {
		transform: translateX(55%);
		opacity: 0;
	}
}

@keyframes app-store-badge-liquid {
	0%,
	100% {
		transform: translate(-6%, -4%) scale(1) rotate(0deg);
	}
	33% {
		transform: translate(8%, 2%) scale(1.08) rotate(8deg);
	}
	66% {
		transform: translate(-2%, 8%) scale(0.96) rotate(-6deg);
	}
}

@media (prefers-color-scheme: light) {
	.app-store-badge {
		background: linear-gradient(125deg, #143820 0%, #1b6a32 54%, #124a24 100%);

		.fx {
			background: #143820;
		}

		.liquid {
			opacity: 0.72;
			background:
				radial-gradient(
					circle at 30% 40%,
					rgb(96 230 130 / 0.88),
					transparent 42%
				),
				radial-gradient(
					circle at 70% 60%,
					rgb(255 255 255 / 0.32),
					transparent 38%
				),
				radial-gradient(
					circle at 50% 80%,
					rgb(46 180 78 / 0.7),
					transparent 45%
				);
		}

		&:hover {
			box-shadow: 0 var(--space-18) var(--space-40) rgb(18 72 36 / 0.22);
		}

		&:active {
			box-shadow: 0 var(--space-4) var(--space-12) rgb(18 72 36 / 0.26);
		}

		&.forest {
			background: linear-gradient(
				125deg,
				#143820 0%,
				#1b6a32 54%,
				#124a24 100%
			);

			.fx {
				background: #143820;
			}

			.liquid {
				opacity: 0.72;
				background:
					radial-gradient(
						circle at 28% 38%,
						rgb(96 230 130 / 0.88),
						transparent 44%
					),
					radial-gradient(circle at 72% 58%, var(--white-28), transparent 38%),
					radial-gradient(
						circle at 48% 82%,
						rgb(46 180 78 / 0.7),
						transparent 48%
					);
			}

			&:hover {
				box-shadow: 0 var(--space-22) var(--space-48) rgb(18 72 36 / 0.28);
			}

			&:active {
				box-shadow: 0 var(--space-6) var(--space-16) rgb(18 72 36 / 0.32);
			}
		}
	}
}

@media (prefers-color-scheme: dark) {
	.app-store-badge {
		/* Same hue as heading .accent (“you sleep”) — --accent / 56 219 122 */
		background: color-mix(in srgb, var(--accent) 16%, var(--color-bg-dark));
		box-shadow: inset 0 0 0 var(--space-1) var(--white-08);

		.fx {
			background: color-mix(in srgb, var(--accent) 16%, var(--color-bg-dark));
		}

		.liquid {
			opacity: 0.72;
			background:
				radial-gradient(
					circle at 28% 38%,
					rgb(var(--color-accent-rgb) / 0.82),
					transparent 44%
				),
				radial-gradient(circle at 72% 58%, var(--white-16), transparent 38%),
				radial-gradient(
					circle at 48% 82%,
					rgb(var(--color-accent-rgb) / 0.48),
					transparent 48%
				);
		}

		&:hover {
			box-shadow:
				inset 0 0 0 var(--space-1) rgb(var(--color-accent-rgb) / 0.2),
				0 var(--space-22) var(--space-48)
					color-mix(in srgb, var(--accent) 28%, transparent);

			.liquid {
				opacity: 0.95;
			}
		}

		&.forest {
			box-shadow: inset 0 0 0 var(--space-1) rgb(var(--color-accent-rgb) / 0.12);

			&:hover {
				box-shadow:
					inset 0 0 0 var(--space-1) rgb(var(--color-accent-rgb) / 0.22),
					0 var(--space-22) var(--space-48)
						color-mix(in srgb, var(--accent) 28%, transparent);
			}
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.app-store-badge {
		.fx .light,
		.fx .liquid {
			animation: none;
		}

		.fx .light {
			opacity: 0;
		}

		.fx .liquid {
			opacity: 0.2;
			transform: none;
		}

		&:hover,
		&:active {
			transform: none;
			filter: none;
		}
	}
}


/* ./components/app-store-cta.css */
/* Root class matches filename: app-store-cta.css → .app-store-cta */

.app-store-cta {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: max-content;
	max-width: 100%;
	gap: var(--space-rem-0-55);

	&.is-center {
		align-items: center;
	}
}


/* ./components/pwa-cta.css */
/* Root class matches filename: pwa-cta.css → .pwa-cta */

.pwa-cta {
	--pad-x: calc(279 * var(--scale));
	--gap: calc(105 * var(--scale));
	--mark: calc(300 * var(--scale));

	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--gap);
	width: auto;
	min-width: var(--size-store-w);
	height: var(--size-store-h);
	padding-inline: var(--pad-x);
	/* Same capsule silhouette as the App Store badge */
	border: none;
	border-radius: var(--radius-full);
	background: linear-gradient(122deg, #071a2b 0%, #0b2c3a 46%, #0d3530 100%);
	color: var(--color-white);
	overflow: hidden;
	outline: none;
	text-decoration: none;
	transform: translateZ(0);
	-webkit-tap-highlight-color: transparent;
	transition:
		transform var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-fast) var(--ease-out),
		filter var(--duration-fast) var(--ease-out);

	/* Safari: filter:blur ignores overflow+radius; mask clips the fx layer. */
	.fx {
		position: absolute;
		inset: 0;
		z-index: 0;
		overflow: hidden;
		border-radius: inherit;
		pointer-events: none;
		-webkit-mask-image: linear-gradient(#fff 0 0);
		mask-image: linear-gradient(#fff 0 0);
	}

	.liquid {
		position: absolute;
		inset: -40%;
		z-index: 0;
		opacity: 0.55;
		background:
			radial-gradient(
				circle at 26% 42%,
				rgb(56 219 122 / 0.7),
				transparent 44%
			),
			radial-gradient(
				circle at 62% 34%,
				rgb(56 189 248 / 0.62),
				transparent 42%
			),
			radial-gradient(
				circle at 78% 70%,
				rgb(129 140 248 / 0.52),
				transparent 46%
			);
		filter: blur(var(--space-18));
		animation: pwa-cta-liquid 9s ease-in-out infinite;
		transition: opacity var(--duration-base) var(--ease-out);
	}

	.light {
		position: absolute;
		inset: -20% -40%;
		z-index: 1;
		background: linear-gradient(
			105deg,
			transparent 32%,
			var(--white-12) 46%,
			rgb(255 255 255 / 0.34) 50%,
			var(--white-12) 54%,
			transparent 68%
		);
		transform: translateX(-55%);
		filter: blur(var(--space-22));
		opacity: 0;
	}

	.mark {
		position: relative;
		z-index: 2;
		width: var(--mark);
		height: var(--mark);
		flex-shrink: 0;
	}

	.label {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: none;
		line-height: var(--leading-normal);
	}

	.eyebrow {
		font-family: var(--font-display);
		font-weight: var(--weight-regular);
		font-size: var(--text-store-eyebrow);
		letter-spacing: var(--tracking-store-eyebrow);
		text-transform: uppercase;
		white-space: nowrap;
	}

	.title {
		margin-top: calc(-8 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-bold);
		font-size: var(--text-store-title);
		letter-spacing: var(--tracking-store-title);
		white-space: nowrap;
	}

	&:hover {
		transform: translateY(calc(-4 * var(--scale))) translateZ(0);
		box-shadow: 0 var(--space-18) var(--space-40) rgb(6 26 40 / 0.34);

		.liquid {
			opacity: 0.95;
			animation-duration: 3s;
		}

		.light {
			animation: pwa-cta-light 0.9s var(--ease-out) 1 forwards;
		}
	}

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

	&:active {
		transform: translateY(calc(2 * var(--scale))) scale(0.97) translateZ(0);
		box-shadow: 0 var(--space-4) var(--space-12) rgb(6 26 40 / 0.4);
		filter: brightness(0.94);

		.liquid {
			opacity: 0.6;
			animation-play-state: paused;
		}
	}

	&.sm {
		--mark: 1.05em;
		width: fit-content;
		max-width: 100%;
		height: auto;
		min-height: var(--touch);
		padding-inline: var(--space-rem-1-15);
		gap: 0.45em;
		box-sizing: border-box;
		justify-content: center;

		.title {
			margin-top: 0;
			font-family: var(--font-body);
			font-weight: var(--weight-medium);
			font-size: var(--text-body);
			letter-spacing: 0;
		}

		&:hover {
			transform: none;
			box-shadow: none;
			filter: brightness(1.08);
		}

		&:active {
			transform: scale(0.98);
			box-shadow: none;
		}
	}

	&.lg {
		--pad-x: calc(360 * var(--scale));
		--gap: calc(140 * var(--scale));
		--mark: calc(400 * var(--scale));
		width: fit-content;
		max-width: 100%;
		height: var(--size-store-lg-h);
		padding-inline: var(--pad-x);
		justify-content: center;
		box-sizing: border-box;

		.eyebrow {
			font-size: var(--text-store-lg-eyebrow);
			letter-spacing: var(--tracking-store-lg-eyebrow);
		}

		.title {
			margin-top: calc(-12 * var(--scale));
			font-size: var(--text-store-lg-title);
			letter-spacing: var(--tracking-store-lg-title);
		}
	}

	@media (max-width: 900px) {
		--pad-x: calc(320 * var(--scale));
		--gap: calc(120 * var(--scale));
		--mark: calc(340 * var(--scale));
		width: auto;
		min-width: min(100%, var(--size-store-w));
		max-width: 100%;

		&.sm {
			width: fit-content;
			min-width: 0;
			height: auto;
		}

		&.lg {
			/* Match the hero capsule silhouette on mobile, like the store badge. */
			--pad-x: calc(340 * var(--scale));
			--gap: calc(120 * var(--scale));
			--mark: calc(340 * var(--scale));
			width: fit-content;
			min-width: min(100%, calc(2400 * var(--scale)));
			max-width: 100%;
			height: var(--size-store-h);
			padding-inline: var(--pad-x);

			.eyebrow {
				font-size: var(--text-store-eyebrow);
				letter-spacing: var(--tracking-store-eyebrow);
			}

			.title {
				margin-top: calc(-8 * var(--scale));
				font-size: var(--text-store-title);
				letter-spacing: var(--tracking-store-title);
			}
		}
	}
}

@keyframes pwa-cta-light {
	from {
		transform: translateX(-55%);
		opacity: 0;
	}
	12%,
	88% {
		opacity: 1;
	}
	to {
		transform: translateX(55%);
		opacity: 0;
	}
}

@keyframes pwa-cta-liquid {
	0%,
	100% {
		transform: translate(-5%, -3%) scale(1) rotate(0deg);
	}
	33% {
		transform: translate(7%, 3%) scale(1.08) rotate(-7deg);
	}
	66% {
		transform: translate(-3%, 7%) scale(0.96) rotate(6deg);
	}
}

@media (prefers-color-scheme: light) {
	.pwa-cta {
		background: linear-gradient(122deg, #1a5470 0%, #1f7a8a 46%, #1f8a6e 100%);

		.liquid {
			opacity: 0.7;
			background:
				radial-gradient(
					circle at 26% 42%,
					rgb(110 240 170 / 0.78),
					transparent 44%
				),
				radial-gradient(
					circle at 62% 34%,
					rgb(96 214 255 / 0.72),
					transparent 42%
				),
				radial-gradient(
					circle at 78% 70%,
					rgb(165 180 255 / 0.58),
					transparent 46%
				);
		}

		&:hover {
			box-shadow: 0 var(--space-18) var(--space-40) rgb(20 80 100 / 0.24);
		}

		&:active {
			box-shadow: 0 var(--space-4) var(--space-12) rgb(20 80 100 / 0.28);
		}
	}
}

@media (prefers-color-scheme: dark) {
	.pwa-cta {
		box-shadow: inset 0 0 0 var(--space-1) var(--white-08);

		&:hover {
			box-shadow:
				inset 0 0 0 var(--space-1) rgb(56 189 248 / 0.2),
				0 var(--space-22) var(--space-48) rgb(4 18 30 / 0.45);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.pwa-cta {
		.light {
			animation: none;
			opacity: 0;
		}

		.liquid {
			animation: none;
			opacity: 0.35;
			transform: none;
		}

		&:hover,
		&:active {
			transform: none;
			filter: none;
		}

		&:hover .light {
			animation: none;
		}
	}
}


/* ./components/pwa-safari-native.css */
/* Root class matches filename: pwa-safari-native.css → .pwa-safari-native */

.pwa-safari-native {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--space-rem-0-45);
	margin-top: var(--space-rem-0-15);
	min-height: var(--space-38);
	padding: var(--space-rem-0-4) var(--space-rem-0-9);
	border: var(--space-1) solid rgb(var(--color-accent-rgb) / 0.3);
	border-radius: var(--radius-pill);
	background: rgb(var(--color-accent-rgb) / 0.1);
	color: var(--accent);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out);

	.glyph {
		width: 0.9em;
		height: 1.12em;
		flex-shrink: 0;
	}

	.label {
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-lead);
		line-height: 1.2;
	}

	&:hover,
	&:focus-visible {
		background: var(--accent-fill);
		border-color: var(--accent-fill);
		color: var(--on-accent);
	}

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

	&:active {
		background: rgb(var(--color-accent-rgb) / 0.18);
		border-color: rgb(var(--color-accent-rgb) / 0.3);
		color: var(--accent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pwa-safari-native {
		transition: none;
	}
}


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

.pwa {
	min-height: 100dvh;
	overflow-x: clip;
	background: var(--color-bg);
	color: var(--ink);
	padding-block: var(--space-header-y) calc(1600 * var(--scale));

	.inner {
		width: min(100%, var(--size-page));
		margin-inline: auto;
		padding-inline: var(--space-page-x);
	}

	.crumb {
		margin: 0 var(--space-5) calc(280 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(115 * var(--scale));
		letter-spacing: calc(6 * var(--scale));
		text-transform: uppercase;
		color: var(--ink-muted);
	}

	.heading {
		max-width: none;
	}

	.lede {
		max-width: var(--measure-36);
		font-family: var(--font-body);
		font-size: clamp(var(--space-rem-1-08), 1.55vw, var(--space-rem-1-22));
		line-height: 1.45;
		color: var(--ink-muted);
	}

	.hero {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		align-items: center;
		column-gap: calc(360 * var(--scale));
		padding-bottom: calc(720 * var(--scale));
		border-bottom: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.1);

		.copy {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			min-width: 0;
		}

		.heading {
			margin-bottom: calc(280 * var(--scale));
		}

		.lede {
			margin-bottom: calc(360 * var(--scale));
		}

		.phone-mockup {
			width: min(100%, var(--size-phone));
		}
	}

	.open {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: var(--touch);
		padding-inline: var(--space-rem-1-25);
		border-radius: var(--radius-pill);
		background: var(--accent-fill);
		color: var(--on-accent);
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-body);
		text-decoration: none;
		transition: opacity var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			opacity: 0.88;
		}

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

	.steps,
	.install,
	.faq,
	.close {
		margin-top: calc(900 * var(--scale));
	}

	.steps {
		.heading {
			margin-bottom: calc(420 * var(--scale));
		}

		ol {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: calc(280 * var(--scale));
			margin: 0;
			padding: 0;
			list-style: none;
		}

		li {
			display: flex;
			flex-direction: column;
			gap: calc(120 * var(--scale));
			min-height: 100%;
			padding: calc(280 * var(--scale));
			background: var(--glass-bg);
			border: var(--space-1) solid var(--glass-border);
			border-radius: var(--radius-field);
			backdrop-filter: var(--glass-filter);
			-webkit-backdrop-filter: var(--glass-filter);
			box-shadow: var(--flat-shadow);
		}

		.index {
			font-family: var(--font-body);
			font-weight: var(--weight-medium);
			font-size: calc(115 * var(--scale));
			letter-spacing: 0.08em;
			color: var(--accent);
		}

		h3 {
			margin: 0;
			font-family: var(--font-body);
			font-weight: var(--weight-medium);
			font-size: clamp(var(--text-panel), 1.8vw, var(--text-hero));
			letter-spacing: -0.02em;
			color: var(--ink);
		}

		p {
			margin: 0;
			font-family: var(--font-body);
			font-size: var(--text-compact);
			line-height: 1.45;
			color: var(--ink-muted);
		}
	}

	.install {
		.heading {
			margin-bottom: calc(160 * var(--scale));
		}

		> .lede {
			margin-bottom: calc(420 * var(--scale));
		}
	}

	.browsers {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: calc(280 * var(--scale));
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.browser {
		display: flex;
		flex-direction: column;
		gap: calc(200 * var(--scale));
		padding: calc(320 * var(--scale));
		background: var(--flat-fill);
		border: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.08);
		border-radius: var(--space-rem-lg);
		transition:
			border-color var(--duration-fast) var(--ease-out),
			background-color var(--duration-fast) var(--ease-out);

		&.is-active {
			background: var(--glass-bg);
			border-color: rgb(var(--color-accent-rgb) / 0.28);
			backdrop-filter: var(--glass-filter);
			-webkit-backdrop-filter: var(--glass-filter);
			box-shadow: var(--flat-shadow);
		}

		.who {
			display: flex;
			align-items: center;
			gap: var(--space-rem-0-65);
		}

		.mark {
			display: block;
			width: var(--space-rem-2-35);
			height: var(--space-rem-2-35);
			flex-shrink: 0;
			color: var(--ink);
		}

		.meta {
			min-width: 0;
		}

		.name {
			margin: 0;
			font-family: var(--font-body);
			font-weight: var(--weight-medium);
			font-size: var(--text-panel);
			line-height: 1.2;
			letter-spacing: -0.02em;
			color: var(--ink);
		}

		.hint {
			margin: var(--space-rem-0-12) 0 0;
			font-family: var(--font-body);
			font-size: var(--text-fine);
			line-height: 1.2;
			letter-spacing: 0.06em;
			text-transform: uppercase;
			color: var(--ink-muted);
		}

		ol {
			margin: 0;
			padding-left: var(--space-rem-1-15);
			font-family: var(--font-body);
			font-size: var(--text-compact);
			line-height: 1.5;
			color: var(--ink-muted);
		}

		li + li {
			margin-top: var(--space-rem-0-45);
		}
	}

	.faq {
		.heading {
			margin-bottom: calc(280 * var(--scale));
		}

		.faq-accordion {
			width: 100%;
			margin-inline: 0;
		}
	}

	.close {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: calc(280 * var(--scale));
		padding-top: calc(560 * var(--scale));
		border-top: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.1);

		.heading {
			margin: 0;
		}
	}

	@media (max-width: 900px) {
		.hero {
			grid-template-columns: 1fr;
			row-gap: calc(420 * var(--scale));
		}

		.steps ol,
		.browsers {
			grid-template-columns: 1fr;
		}
	}

	@media (max-width: 480px) {
		.browser .mark {
			width: var(--space-rem-xl);
			height: var(--space-rem-xl);
		}
	}

	@media (prefers-reduced-transparency: reduce) {
		.steps li,
		.browser.is-active {
			background: var(--flat-fill-opaque);
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.open,
		.browser {
			transition: none;
		}
	}
}


/* ./components/feature-list.css */
.feature-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-feature-gap);
	margin-top: var(--space-heading-to-body);

	.item {
		display: flex;
		align-items: center;
		gap: var(--space-feature-icon);
		min-height: var(--size-brand);

		img {
			width: auto;
			height: var(--size-icon);
			flex-shrink: 0;
			object-fit: contain;
		}

		p {
			font-family: var(--font-body);
			font-weight: var(--weight-regular);
			font-size: var(--text-feature);
			line-height: var(--leading-body);
			letter-spacing: var(--tracking-feature);
			color: var(--ink-muted);
			white-space: nowrap;
		}
	}

	@media (max-width: 900px) {
		.item p {
			white-space: normal;
		}
	}
}


/* ./components/phone-mockup.css */
.phone-mockup {
	position: relative;
	width: 100%;
	max-width: var(--size-phone);
	margin-inline: auto;
	aspect-ratio: 6844 / 7362;
	overflow: hidden;
	/* Grid stretch would ignore aspect-ratio and squash landscape mockups. */
	align-self: start;

	picture {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
	}

	img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: 12% 50%;
		pointer-events: none;
		user-select: none;
	}
}


/* ./components/fomo-notification.css */
/* Root class matches filename: fomo-notification.css → .fomo-notification */
/* iOS liquid-glass lock-screen / banner replica — CSS only. */

.fomo-notification {
	/* Equal left/right gutters — avoid 100vw width math (scrollbar / asymmetry). */
	--fomo-gutter: max(
		var(--space-rem-1-15),
		env(safe-area-inset-left, var(--space-0)),
		env(safe-area-inset-right, var(--space-0))
	);
	--fomo-w-max: var(--measure-22-5);
	/* Stay under iOS 26's ~80vw sample threshold. 90vw paints the URL bar. */
	--fomo-w-safari: 79vw;
	--fomo-radius: var(--space-rem-1-55);
	--fomo-pad: var(--space-rem-0-7) var(--space-rem-0-85) var(--space-rem-0-75)
		var(--space-rem-0-7);
	--fomo-icon: var(--space-rem-2-55);
	--fomo-gap: var(--space-rem-0-65);
	--fomo-font:
		-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
		'Helvetica Neue', Helvetica, Arial, sans-serif;

	/* Resting inset — enter animates `bottom` (not transform; transform kills frost). */
	--fomo-inset-bottom: max(
		var(--space-rem-1-75),
		calc(var(--safe-bottom) + var(--space-rem-0-75))
	);
	--fomo-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
	--fomo-ease-leave: cubic-bezier(0.4, 0, 0.2, 1);
	--fomo-shadow:
		0 var(--space-18) var(--space-40) rgb(var(--color-ink-rgb) / 0.16),
		0 var(--space-2) var(--space-6) var(--black-08);

	--fomo-used-w: min(
		var(--fomo-w-max),
		var(--fomo-w-safari),
		calc(100vw - 2 * var(--fomo-gutter))
	);

	position: fixed;
	z-index: var(--z-toast);
	bottom: calc(var(--fomo-inset-bottom) - var(--space-rem-1-4));
	left: var(--fomo-gutter);
	right: auto;
	display: grid;
	grid-template-columns: var(--fomo-icon) minmax(0, 1fr);
	align-items: start;
	gap: var(--fomo-gap);
	width: var(--fomo-used-w);
	max-width: var(--fomo-w-safari);
	padding: var(--fomo-pad);
	border-radius: var(--fomo-radius);
	font-family: var(--fomo-font);
	color: rgb(20 20 22 / 0.96);
	text-decoration: none;
	overflow: hidden;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	background-color: transparent;
	border: var(--space-1) solid var(--white-55);
	box-shadow:
		var(--fomo-shadow),
		inset 0 var(--space-1) 0 rgb(255 255 255 / 0.65),
		inset 0 calc(-1 * var(--hairline)) 0 rgb(255 255 255 / 0.2);

	opacity: 0;
	pointer-events: none;
	/* Leave is the default; enter overrides when .is-visible is set. */
	transition:
		opacity 480ms var(--fomo-ease-leave),
		bottom 480ms var(--fomo-ease-leave),
		box-shadow var(--duration-swipe) var(--ease-out);

	&.is-visible {
		opacity: 1;
		bottom: var(--fomo-inset-bottom);
		pointer-events: auto;
		transition:
			opacity 560ms var(--fomo-ease-enter),
			bottom 720ms var(--fomo-ease-enter),
			box-shadow var(--duration-swipe) var(--ease-out),
			border-color var(--duration-fast) var(--ease-out);
	}

	.glass {
		position: absolute;
		inset: 0;
		z-index: 0;
		border-radius: inherit;
		overflow: hidden;
		pointer-events: none;
		/* Opaque fill — a live page blur recaptures the scrolling
		   document and flashes the whole viewport. */
		background: rgb(245 245 247 / 0.92);
		transition: background var(--duration-fast) var(--ease-out);
		/* Safari: filter:blur on .shine ignores overflow+radius. */
		-webkit-mask-image: linear-gradient(#fff 0 0);
		mask-image: linear-gradient(#fff 0 0);

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			border-radius: inherit;
			background: linear-gradient(
				180deg,
				var(--white-22) 0%,
				var(--white-06) 42%,
				var(--white-10) 100%
			);
			box-shadow: inset 0 0 0 var(--space-1) var(--white-28);
		}
	}

	.shine {
		position: absolute;
		inset: -40% -20%;
		background: linear-gradient(
			118deg,
			transparent 42%,
			var(--white-10) 49%,
			var(--white-28) 50.5%,
			var(--white-10) 52%,
			transparent 60%
		);
		transform: translateX(-40%) rotate(2deg);
		animation: fomo-notification-shine 7.5s var(--ease-out) infinite;
		filter: blur(var(--blur-8));
		opacity: 0.7;
	}

	.specular {
		position: absolute;
		top: 0;
		left: 10%;
		right: 10%;
		height: 38%;
		border-radius: var(--radius-full);
		background: linear-gradient(
			180deg,
			rgb(255 255 255 / 0.35),
			var(--white-00)
		);
		filter: blur(var(--blur-8));
		opacity: 0.4;
	}

	.icon-wrap {
		position: relative;
		z-index: 1;
		width: var(--fomo-icon);
		height: var(--fomo-icon);
		border-radius: 22.5%;
		overflow: hidden;
		background: transparent;
		box-shadow:
			0 var(--space-1) var(--space-2) var(--black-18),
			inset 0 0 0 var(--hairline) var(--white-18);
		flex-shrink: 0;
	}

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

	.copy {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		gap: var(--space-rem-0-1);
		min-width: 0;
		padding-top: var(--space-rem-0-05);
	}

	.meta {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-rem-0-5);
		margin-bottom: var(--space-rem-0-08);
	}

	.app {
		font-size: var(--text-fine);
		font-weight: var(--weight-semibold);
		letter-spacing: 0.01em;
		color: rgb(60 60 67 / 0.72);
		line-height: 1.15;
	}

	.time {
		font-size: var(--text-dense);
		font-weight: var(--weight-regular);
		color: rgb(60 60 67 / 0.55);
		line-height: 1.15;
		white-space: nowrap;
	}

	.title {
		font-size: var(--text-label);
		font-weight: var(--weight-semibold);
		letter-spacing: -0.015em;
		line-height: 1.2;
		color: rgb(0 0 0 / 0.92);
	}

	.body {
		font-size: var(--text-chip);
		font-weight: var(--weight-regular);
		letter-spacing: -0.01em;
		line-height: 1.28;
		color: rgb(60 60 67 / 0.88);
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	&:hover {
		--fomo-shadow:
			0 var(--space-22) var(--space-48) rgb(var(--color-ink-rgb) / 0.2),
			0 var(--space-2) var(--space-8) var(--black-10);

		.shine {
			animation-duration: 2.4s;
		}
	}

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

	&.is-visible:active {
		bottom: calc(var(--fomo-inset-bottom) - var(--space-rem-0-2));
		border-color: rgb(255 255 255 / 0.4);
		--fomo-shadow:
			0 var(--space-4) var(--space-14) rgb(var(--color-ink-rgb) / 0.14),
			0 var(--space-1) var(--space-3) var(--black-10);
		box-shadow:
			var(--fomo-shadow),
			inset 0 var(--space-1) var(--space-3) var(--black-08),
			inset 0 var(--space-1) 0 rgb(255 255 255 / 0.35);
		transition:
			bottom 110ms var(--ease-out),
			box-shadow 110ms var(--ease-out),
			border-color 110ms var(--ease-out);

		.glass {
			background: rgb(232 232 234 / 0.96);
			transition: background 110ms var(--ease-out);
		}
	}
}

@keyframes fomo-notification-shine {
	0% {
		transform: translateX(-45%) rotate(2deg);
	}
	55%,
	100% {
		transform: translateX(45%) rotate(2deg);
	}
}

@media (prefers-color-scheme: dark) {
	.fomo-notification {
		color: rgb(245 245 247 / 0.96);
		border-color: var(--white-16);
		box-shadow:
			var(--fomo-shadow),
			inset 0 var(--space-1) 0 var(--white-18),
			inset 0 calc(-1 * var(--hairline)) 0 rgb(0 0 0 / 0.35);

		.glass {
			background: rgb(44 44 46 / 0.94);
		}

		.app,
		.time {
			color: rgb(235 235 245 / 0.6);
		}

		.title {
			color: rgb(255 255 255 / 0.96);
		}

		.body {
			color: rgb(235 235 245 / 0.82);
		}

		.shine {
			filter: blur(var(--space-22));
			opacity: 0.5;
		}

		&.is-visible:active {
			border-color: var(--white-12);

			.glass {
				background: rgb(58 58 60 / 0.96);
			}
		}
	}
}

@media (max-width: 900px) {
	.fomo-notification {
		--fomo-gutter: max(
			var(--space-rem-0-75),
			env(safe-area-inset-left, var(--space-0)),
			env(safe-area-inset-right, var(--space-0))
		);
		--fomo-w-max: 79vw;
	}
}

@media (max-width: 480px) {
	.fomo-notification {
		--fomo-radius: var(--space-rem-1-35);
		--fomo-inset-bottom: max(var(--space-rem-0-85), var(--safe-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	.fomo-notification {
		transition: opacity 200ms linear;
		bottom: var(--fomo-inset-bottom);

		&.is-visible {
			transition: opacity 200ms linear;
		}

		.shine {
			animation: none;
			opacity: 0;
		}
	}
}


/* ./components/footer-callout.css */
/* Root class matches filename: footer-callout.css → .footer-callout */

.footer-callout {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, var(--size-content));
	margin-inline: auto;
	margin-top: var(--space-section);
	padding-inline: var(--space-page-x);
	text-align: center;

	.mascot {
		position: relative;
		width: min(100%, var(--size-mascot));
		aspect-ratio: 16 / 9;
		margin-bottom: var(--space-footer-mascot-to-heading);
		overflow: hidden;
		pointer-events: none;
		user-select: none;
	}

	.clip {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center center;
		/* White plate of the clip → page background */
		mix-blend-mode: darken;
	}

	.heading {
		max-width: min(100%, calc(7200 * var(--scale)));
		margin-bottom: var(--space-footer-gap);
	}

	.app-store-cta {
		flex-shrink: 0;
	}

	@media (max-width: 900px) {
		.mascot {
			width: min(92%, calc(4800 * var(--scale)));
		}

		.heading {
			margin-bottom: calc(360 * var(--scale));
		}
	}

	@media (max-width: 480px) {
		.mascot {
			width: min(100%, calc(5200 * var(--scale)));
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.clip {
			/* Keep the poster frame; hide any residual playback. */
			visibility: visible;
		}
	}
}


/* ./components/site-footer.css */
/* Root class matches filename: site-footer.css → .site-footer */

.site-footer {
	width: min(100%, var(--size-content));
	margin-inline: auto;
	margin-top: calc(var(--space-section) / 2);
	padding-inline: var(--space-page-x);
	padding-bottom: calc(720 * var(--scale));
	text-align: center;

	.links {
		display: flex;
		justify-content: center;
		gap: calc(280 * var(--scale));
		margin-bottom: calc(280 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(180 * var(--scale));

		a {
			color: var(--accent);
			transition: opacity var(--duration-fast) var(--ease-out);

			&:hover,
			&:focus-visible {
				opacity: 0.72;
			}
		}
	}

	.tagline {
		max-width: var(--measure-36);
		margin-inline: auto;
		font-family: var(--font-body);
		font-size: clamp(var(--space-rem-0-875), 1.2vw, var(--text-lead));
		line-height: var(--leading-body);
		color: var(--ink-muted);

		a {
			color: inherit;
			text-decoration: underline;
			text-underline-offset: 0.18em;
			text-decoration-thickness: var(--space-1);
			transition: opacity var(--duration-fast) var(--ease-out);

			&:hover,
			&:focus-visible {
				opacity: 0.72;
			}
		}
	}
}


/* ./components/mcp-beacon.css */
/* Root class matches filename: mcp-beacon.css → .mcp-beacon */

.mcp-beacon {
	--mcp-beacon-line: rgb(var(--color-accent-rgb) / 0.28);
	--mcp-beacon-fill: rgb(var(--color-accent-rgb) / 0.14);
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto calc(720 * var(--scale));
	text-align: center;

	.prompt {
		margin: 0 0 calc(80 * var(--scale));
		font-family: var(--font-body);
		font-style: italic;
		font-size: clamp(var(--text-compact), 1.5vw, var(--space-rem-1-14));
		line-height: 1.2;
		color: var(--ink-muted);
	}

	.stage {
		position: relative;
		display: grid;
		place-items: center;
		width: min(100%, var(--measure-14));
		aspect-ratio: 1;

		> * {
			grid-area: 1 / 1;
			min-width: 0;
			max-width: 100%;
		}
	}

	.radar {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		pointer-events: none;
		overflow: visible;

		.outer,
		.mid,
		.inner,
		.sweep,
		.orbit {
			transform-box: view-box;
			transform-origin: 50% 50%;
		}
	}

	.ring {
		fill: none;
		stroke: var(--mcp-beacon-line);
		stroke-width: 0.65;
	}

	.ring.outer {
		stroke-dasharray: 2.6 3.4;
		animation: mcp-beacon-spin 22s linear infinite;
	}

	.ring.mid {
		stroke-dasharray: 1.6 2.8;
		opacity: 0.85;
		animation: mcp-beacon-spin 14s linear infinite reverse;
	}

	.ring.inner {
		opacity: 0.55;
	}

	.sweep {
		fill: var(--mcp-beacon-fill);
		animation: mcp-beacon-spin 5.6s linear infinite;
	}

	.orbit.far {
		animation: mcp-beacon-spin 9.5s linear infinite;
	}

	.orbit.mid-orbit {
		animation: mcp-beacon-spin 7.2s linear infinite reverse;
	}

	.orbit.near {
		animation: mcp-beacon-spin 11s linear infinite;
	}

	.bird {
		fill: var(--accent);
	}

	.chip {
		position: relative;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		gap: var(--space-rem-0-55);
		min-height: var(--touch);
		padding: var(--space-rem-0-72) var(--space-rem-1-05) var(--space-rem-0-72)
			var(--space-rem-0-9);
		border: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.16);
		border-radius: var(--radius-full);
		background:
			radial-gradient(
				120% 160% at 12% 20%,
				rgb(var(--color-accent-rgb) / 0.12),
				transparent 58%
			),
			color-mix(in srgb, var(--flat-fill-opaque) 86%, transparent);
		box-shadow:
			0 var(--space-10) var(--space-28) rgb(var(--color-ink-rgb) / 0.08),
			inset 0 var(--space-1) 0
				color-mix(in srgb, var(--color-white) 22%, transparent);
		transition:
			transform var(--duration-base) var(--ease-out),
			border-color var(--duration-fast) var(--ease-out),
			box-shadow var(--duration-base) var(--ease-out);

		&:hover,
		&:focus-visible {
			border-color: rgb(var(--color-accent-rgb) / 0.45);
			box-shadow:
				0 var(--space-14) var(--space-36) rgb(var(--color-ink-rgb) / 0.12),
				0 0 0 var(--space-4) rgb(var(--color-accent-rgb) / 0.1),
				inset 0 var(--space-1) 0
					color-mix(in srgb, var(--color-white) 28%, transparent);
		}

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

	.stage:hover .chip,
	.stage:focus-within .chip {
		transform: translateY(calc(-1 * var(--space-1)));
	}

	.stage:hover .radar .outer,
	.stage:hover .radar .mid,
	.stage:focus-within .radar .outer,
	.stage:focus-within .radar .mid {
		animation-duration: 6s;
	}

	.stage:hover .radar .sweep,
	.stage:focus-within .radar .sweep {
		animation-duration: 2.4s;
	}

	.reticle {
		position: absolute;
		inset: calc(-1 * var(--space-5));
		pointer-events: none;
	}

	.corner {
		position: absolute;
		width: var(--space-9);
		height: var(--space-9);
		border-color: var(--accent);
		border-style: solid;
		opacity: 0;
		transition:
			opacity var(--duration-base) var(--ease-out),
			inset var(--duration-base) var(--ease-out);
	}

	.corner.tl {
		top: calc(-1 * var(--space-6));
		left: calc(-1 * var(--space-6));
		border-width: var(--border-thick) 0 0 var(--border-thick);
	}

	.corner.tr {
		top: calc(-1 * var(--space-6));
		right: calc(-1 * var(--space-6));
		border-width: var(--border-thick) var(--border-thick) 0 0;
	}

	.corner.bl {
		bottom: calc(-1 * var(--space-6));
		left: calc(-1 * var(--space-6));
		border-width: 0 0 var(--border-thick) var(--border-thick);
	}

	.corner.br {
		right: calc(-1 * var(--space-6));
		bottom: calc(-1 * var(--space-6));
		border-width: 0 var(--border-thick) var(--border-thick) 0;
	}

	.stage:hover .corner,
	.stage:focus-within .corner,
	.chip:focus-visible .corner {
		opacity: 1;
	}

	.stage:hover .corner.tl,
	.stage:focus-within .corner.tl,
	.chip:focus-visible .corner.tl {
		top: calc(-1 * var(--space-9));
		left: calc(-1 * var(--space-9));
	}

	.stage:hover .corner.tr,
	.stage:focus-within .corner.tr,
	.chip:focus-visible .corner.tr {
		top: calc(-1 * var(--space-9));
		right: calc(-1 * var(--space-9));
	}

	.stage:hover .corner.bl,
	.stage:focus-within .corner.bl,
	.chip:focus-visible .corner.bl {
		bottom: calc(-1 * var(--space-9));
		left: calc(-1 * var(--space-9));
	}

	.stage:hover .corner.br,
	.stage:focus-within .corner.br,
	.chip:focus-visible .corner.br {
		right: calc(-1 * var(--space-9));
		bottom: calc(-1 * var(--space-9));
	}

	.ping {
		flex: 0 0 auto;
		width: var(--space-rem-0-55);
		height: var(--space-rem-0-55);
		border-radius: var(--radius-circle);
		background: var(--accent);
		box-shadow: 0 0 0 0 rgb(var(--color-accent-rgb) / 0.45);
		animation: mcp-beacon-ping 2.4s var(--ease-out) infinite;
	}

	.url {
		font-family:
			ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
		font-size: clamp(var(--space-rem-0-84), 2.2vw, var(--space-rem-0-96));
		font-weight: var(--weight-medium);
		letter-spacing: -0.03em;
		color: var(--ink);
		white-space: nowrap;
	}

	.caret {
		flex: 0 0 auto;
		width: var(--border-thick);
		height: 1.05em;
		margin-left: var(--space-rem-neg-0-12);
		background: var(--accent);
		animation: mcp-beacon-caret 1.15s steps(1) infinite;
	}

	.copy {
		position: relative;
		z-index: 1;
		margin: calc(40 * var(--scale)) 0 0;
		padding: var(--space-rem-0-2) var(--space-rem-0-45);
		border: 0;
		background: transparent;
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-micro);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ink-muted);
		cursor: pointer;
		transition: color var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			color: var(--accent);
		}

		.done {
			display: none;
		}

		&.is-copied {
			color: var(--accent);

			.idle {
				display: none;
			}

			.done {
				display: inline;
			}
		}
	}
}

body:has(.get-app) .mcp-beacon {
	display: none;
}

@keyframes mcp-beacon-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes mcp-beacon-ping {
	0% {
		box-shadow: 0 0 0 0 rgb(var(--color-accent-rgb) / 0.42);
	}

	70% {
		box-shadow: 0 0 0 var(--space-9) rgb(var(--color-accent-rgb) / 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgb(var(--color-accent-rgb) / 0);
	}
}

@keyframes mcp-beacon-caret {
	50% {
		opacity: 0;
	}
}

@media (max-width: 480px) {
	.mcp-beacon {
		.stage {
			width: min(100%, var(--measure-13));
		}

		.url {
			font-size: var(--text-label);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.mcp-beacon {
		.caret {
			opacity: 1;
		}

		.ping {
			box-shadow: 0 0 0 var(--space-3) rgb(var(--color-accent-rgb) / 0.18);
		}
	}
}


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

.site-header {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(240 * var(--scale));
	flex-wrap: wrap;
	margin-bottom: calc(480 * var(--scale));

	.home {
		display: inline-flex;
		align-items: center;
		gap: calc(90 * var(--scale));
		min-height: var(--touch);
	}

	.mascot {
		display: block;
		width: calc(220 * var(--scale));
		height: calc(220 * var(--scale));
		flex-shrink: 0;
		overflow: hidden;
		border-radius: var(--radius-circle);
		background: var(--black-08);

		> span {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.avatar {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.wordmark {
		width: calc(900 * var(--scale));
		aspect-ratio: 1333 / 268;
		height: auto;
		flex-shrink: 0;
		font-family: var(--font-wordmark);
		background-color: var(--ink);
		-webkit-mask: url('/assets/images/cryptobud-wordmark.svg') center / contain
			no-repeat;
		mask: url('/assets/images/cryptobud-wordmark.svg') center / contain
			no-repeat;
	}

	.nav {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: calc(280 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(170 * var(--scale));
		padding-bottom: var(--space-rem-0-07);

		a {
			color: var(--ink-muted);
			transition: color var(--duration-fast) var(--ease-out);

			&:hover,
			&:focus-visible,
			&.is-current {
				color: var(--ink);
			}
		}

		> .nav-switchers {
			display: inline-flex;
			align-items: center;
			gap: 0;
			flex-shrink: 0;
		}
	}

	&.is-landing {
		justify-content: flex-end;
		margin-bottom: 0;

		.nav {
			margin-inline-start: auto;
		}
	}
}

@media (max-width: 295px) {
	.site-header {
		flex-wrap: nowrap;

		.nav {
			flex-wrap: nowrap;

			> a {
				display: none;
			}
		}
	}
}


/* ./components/locale-switcher.css */
/* Root class matches filename: locale-switcher.css → .locale-switcher */

.locale-switcher {
	--flag-en-US: var(--color-white);
	--flag-pt-BR: #009b3a;
	position: relative;
	z-index: 1;
	flex-shrink: 0;

	&[open] {
		z-index: 4;
	}

	summary {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: var(--touch);
		min-height: var(--touch);
		margin: 0;
		padding: 0;
		list-style: none;
		border-radius: var(--radius-circle);
		background: transparent;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	summary::-webkit-details-marker,
	summary::marker {
		display: none;
		content: none;
	}

	.flag {
		display: block;
		width: calc(220 * var(--scale));
		height: calc(220 * var(--scale));
		flex-shrink: 0;
		overflow: hidden;
		border-radius: var(--radius-circle);
		outline: var(--space-1) solid
			color-mix(in srgb, var(--ink-muted) 38%, transparent);
		outline-offset: 0;

		&.is-en-US {
			background: var(--flag-en-US);
		}

		&.is-pt-BR {
			background: var(--flag-pt-BR);
		}

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

	.panel {
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 3;
		display: flex;
		flex-direction: column;
		width: max-content;
		padding: var(--space-rem-0-3);
		background: var(--glass-bg);
		border: var(--space-1) solid var(--glass-border);
		border-radius: var(--space-rem-0-7);
		backdrop-filter: var(--glass-filter);
		-webkit-backdrop-filter: var(--glass-filter);
		box-shadow: var(--flat-shadow);
	}

	.option {
		display: flex;
		align-items: center;
		gap: var(--space-rem-0-7);
		width: 100%;
		min-height: var(--touch);
		padding: var(--space-rem-0-3) var(--space-rem-0-7);
		border: 0;
		border-radius: var(--space-rem-0-5);
		background: transparent;
		color: var(--ink-muted);
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(150 * var(--scale));
		line-height: 1.2;
		text-align: left;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: color var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible,
		&.is-current {
			color: var(--ink);
		}
	}

	.name {
		min-width: 0;
	}
}


/* ./components/auth-user-menu.css */
/* Root class matches filename: auth-user-menu.css → .auth-user-menu */

.auth-user-menu {
	position: relative;
	z-index: 1;
	flex-shrink: 0;

	&[open] {
		z-index: 4;
	}

	summary {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: var(--touch);
		min-height: var(--touch);
		margin: 0;
		padding: 0;
		list-style: none;
		border-radius: var(--radius-circle);
		background: transparent;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	summary::-webkit-details-marker,
	summary::marker {
		display: none;
		content: none;
	}

	.avatar {
		display: grid;
		place-items: center;
		width: calc(252 * var(--scale));
		height: calc(252 * var(--scale));
		flex-shrink: 0;
		overflow: hidden;
		border-radius: var(--radius-circle);
		background: rgb(var(--color-accent-rgb) / 0.16);
		color: var(--accent);
		box-shadow: 0 var(--space-4) var(--space-14) rgb(0 0 0 / 0.42);
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(132 * var(--scale));
		line-height: 1;
		letter-spacing: 0.02em;

		&.is-photo {
			display: block;
			object-fit: cover;
			background: rgb(var(--color-ink-rgb) / 0.08);
		}
	}

	.panel {
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 3;
		display: flex;
		flex-direction: column;
		width: max-content;
		padding: var(--space-rem-0-35);
		background: var(--glass-bg);
		border: var(--space-1) solid var(--glass-border);
		border-radius: var(--space-rem-0-75);
		backdrop-filter: var(--glass-filter);
		-webkit-backdrop-filter: var(--glass-filter);
		box-shadow: var(--flat-shadow);
	}

	.rule {
		height: var(--space-1);
		margin: var(--space-rem-0-25) var(--space-rem-0-5);
		background: var(--glass-border);
	}

	.option {
		display: flex;
		align-items: center;
		gap: var(--space-rem-0-55);
		width: 100%;
		min-height: var(--touch);
		padding: var(--space-rem-0-35) var(--space-rem-0-75);
		border: 0;
		border-radius: var(--space-rem-0-5);
		background: transparent;
		color: var(--ink-muted);
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(150 * var(--scale));
		line-height: 1.2;
		text-align: left;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition:
			color var(--duration-fast) var(--ease-out),
			background-color var(--duration-fast) var(--ease-out);

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

		&.is-always-on {
			color: var(--accent);
		}

		&:hover,
		&:focus-visible {
			color: var(--ink);
			background: rgb(var(--color-ink-rgb) / 0.05);
		}
	}

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

	.name {
		min-width: 0;
		white-space: nowrap;
	}
}


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

.faq {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: min(100%, var(--size-content));
	margin-inline: auto;
	margin-top: calc(var(--space-section) / 2);
	padding-inline: var(--space-page-x);
	text-align: left;

	/* Subtle break between download callout and FAQ */
	&::before {
		content: '';
		display: block;
		width: min(28%, calc(1800 * var(--scale)));
		height: var(--space-1);
		margin-inline: auto;
		margin-bottom: calc(var(--space-section) / 2);
		background: rgb(var(--color-ink-rgb) / 0.14);
	}

	.heading {
		text-align: center;
		margin-inline: auto;
		margin-bottom: var(--space-footer-gap);
	}

	.all {
		align-self: center;
		margin-top: calc(420 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(170 * var(--scale));
		letter-spacing: calc(15 * var(--scale));
		color: var(--ink-muted);
		transition: opacity var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			opacity: 0.72;
		}

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


/* ./components/faq-accordion.css */
/* Root class matches filename: faq-accordion.css → .faq-accordion */

.faq-accordion {
	display: flex;
	flex-direction: column;
	width: min(100%, calc(7200 * var(--scale)));
	margin-inline: auto;
	border-top: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.12);
	text-align: left;

	> li {
		border-bottom: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.12);
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: calc(240 * var(--scale));
		width: 100%;
		padding-block: calc(280 * var(--scale));
		padding-inline: 0;
		border: 0;
		background: transparent;
		color: inherit;
		text-align: left;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: color var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			color: var(--accent);

			.icon {
				border-color: var(--accent);
				color: var(--accent);
			}
		}

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

	.question {
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(340 * var(--scale));
		line-height: 1.15;
		letter-spacing: calc(-12 * var(--scale));
		color: inherit;
	}

	.icon {
		position: relative;
		flex-shrink: 0;
		width: calc(280 * var(--scale));
		height: calc(280 * var(--scale));
		border: var(--border-thick) solid rgb(var(--color-ink-rgb) / 0.28);
		border-radius: var(--radius-circle);
		color: var(--ink);
		transition:
			border-color var(--duration-base) var(--ease-out),
			color var(--duration-base) var(--ease-out),
			transform var(--duration-base) var(--ease-out);
	}

	.bar {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 42%;
		height: var(--border-thick);
		background: currentColor;
		border-radius: var(--radius-full);
		transition: transform var(--duration-base) var(--ease-out);

		&.horizontal {
			transform: translate(-50%, -50%);
		}

		&.vertical {
			transform: translate(-50%, -50%) rotate(90deg);
		}
	}

	.is-open {
		.item {
			color: var(--accent);
		}

		.icon {
			border-color: var(--accent);
			color: var(--accent);
			transform: rotate(90deg);
		}

		.bar.vertical {
			transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
		}
	}

	.panel {
		display: grid;
		grid-template-rows: 0fr;
		opacity: 0;
		overflow: hidden;
		transition:
			grid-template-rows var(--duration-base) var(--ease-out),
			opacity var(--duration-base) var(--ease-out);
	}

	.is-open .panel {
		grid-template-rows: 1fr;
		opacity: 1;
	}

	.panel-inner {
		min-height: 0;
		overflow: hidden;
	}

	.answer {
		max-width: var(--measure-42);
		padding-bottom: calc(280 * var(--scale));
		padding-inline: calc(15 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-regular);
		font-size: calc(220 * var(--scale));
		line-height: 1.5;
		letter-spacing: calc(-4 * var(--scale));
		color: color-mix(in srgb, var(--ink) 68%, var(--ink-muted));

		a {
			color: var(--accent);
			text-decoration: underline;
			text-underline-offset: 0.18em;
			text-decoration-thickness: var(--space-1);
			transition: opacity var(--duration-fast) var(--ease-out);

			&:hover,
			&:focus-visible {
				opacity: 0.72;
			}
		}
	}

	.more {
		display: inline-flex;
		align-items: center;
		gap: 0.28em;
		margin-left: 0.15em;
		font-weight: var(--weight-medium);
		font-size: calc(220 * var(--scale));
		color: var(--accent);
		white-space: nowrap;
		transition: opacity var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			opacity: 0.72;
		}

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

	.arrow {
		flex-shrink: 0;
		width: 0.85em;
		height: 0.85em;
	}

	&.is-quiet {
		.item {
			padding-block: calc(180 * var(--scale));
			gap: calc(115 * var(--scale));

			&:hover,
			&:focus-visible {
				color: inherit;

				.icon {
					border-color: var(--accent);
					color: var(--accent);
				}
			}
		}

		.question {
			font-size: clamp(var(--text-metric), 1.45vw, var(--space-rem-1-16));
			line-height: 1.35;
			letter-spacing: -0.02em;
		}

		.icon {
			width: 1.2em;
			height: 1.2em;
			border-width: var(--space-1);
		}

		.is-open .item {
			color: inherit;
		}

		.answer {
			max-width: var(--measure-40);
			padding-bottom: calc(200 * var(--scale));
			font-size: clamp(var(--text-metric), 1.4vw, var(--space-rem-1-12));
			line-height: 1.55;
		}
	}

	@media (max-width: 900px) {
		.question {
			font-size: calc(300 * var(--scale));
		}

		&.is-quiet {
			.question {
				font-size: var(--text-price);
			}

			.item {
				padding-block: calc(150 * var(--scale));
			}

			.answer {
				font-size: var(--text-metric);
				padding-bottom: calc(115 * var(--scale));
			}
		}

		.answer {
			font-size: calc(240 * var(--scale));
			padding-bottom: calc(220 * var(--scale));
		}

		.item {
			padding-block: calc(220 * var(--scale));
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.icon,
		.bar,
		.panel {
			transition: none;
		}
	}
}


/* ./components/venue-logos.css */
/* Root class matches filename: venue-logos.css → .venue-logos */

.venue-logos {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, var(--size-content));
	margin-inline: auto;
	padding-inline: var(--space-page-x);
	padding-block: var(--space-section);
	text-align: center;
	color: var(--ink-muted);

	.prompt {
		margin: 0 0 calc(280 * var(--scale));
		font-family: var(--font-body);
		font-style: normal;
		font-size: clamp(var(--text-compact), 1.5vw, var(--space-rem-1-14));
		line-height: 1.2;
	}

	ul {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		gap: calc(960 * var(--scale));
		margin: 0;
		padding: 0;
		list-style: none;
	}

	li {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: var(--measure-8-5);
	}

	.mark {
		display: block;
		width: var(--space-64);
		height: var(--space-64);
		color: var(--ink-muted);
	}

	.name {
		margin-top: calc(140 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: calc(170 * var(--scale));
		letter-spacing: calc(8 * var(--scale));
		color: var(--ink-muted);
	}

	.note {
		margin-top: calc(40 * var(--scale));
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: var(--text-micro);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ink-muted);
	}

	.is-soon {
		.mark,
		.name {
			opacity: 0.55;
		}
	}
}

@media (max-width: 480px) {
	.venue-logos {
		ul {
			gap: var(--space-rem-1-4);
		}

		.mark {
			width: var(--space-52);
			height: var(--space-52);
		}
	}
}


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

.prose {
	max-width: var(--measure-40);
	font-family: var(--font-body);
	font-size: clamp(var(--space-rem-1-08), 1.55vw, var(--space-rem-1-22));
	line-height: 1.75;
	letter-spacing: -0.01em;
	color: var(--ink);

	> :first-child {
		margin-top: 0;
	}

	> :last-child {
		margin-bottom: 0;
	}

	p {
		margin: 0 0 1.25em;
	}

	h2,
	h3,
	h4 {
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		letter-spacing: -0.03em;
		color: var(--ink);
		text-wrap: balance;
	}

	h2 {
		margin: 2.75em 0 0.75em;
		font-size: clamp(var(--space-rem-1-5), 2.5vw, var(--space-rem-1-95));
		line-height: 1.2;
	}

	h3 {
		margin: 2.5em 0 0.7em;
		font-size: clamp(var(--space-rem-1-28), 2vw, var(--space-rem-1-5));
		line-height: 1.25;
	}

	h4 {
		margin: 2em 0 0.55em;
		font-size: clamp(var(--text-face), 1.55vw, var(--text-task));
		line-height: 1.3;
	}

	h2 + p,
	h3 + p,
	h4 + p,
	h2 + ul,
	h3 + ul,
	h4 + ul,
	h2 + ol,
	h3 + ol,
	h4 + ol {
		margin-top: 0;
	}

	ul,
	ol {
		margin: 0 0 1.5em;
		padding-left: 1.4em;
	}

	ul {
		list-style: disc;
	}

	ol {
		list-style: decimal;
	}

	li {
		margin: 0.7em 0;
		padding-left: 0.25em;
		line-height: 1.6;
	}

	li > ul,
	li > ol {
		margin: 0.45em 0 0.65em;
	}

	strong {
		font-weight: var(--weight-bold);
	}

	em {
		font-style: italic;
	}

	a {
		color: var(--accent);
		text-decoration: underline;
		text-underline-offset: 0.18em;
		text-decoration-thickness: var(--space-1);
		transition: opacity var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			opacity: 0.72;
		}
	}

	hr {
		margin: 2.4em 0;
		border: 0;
		border-top: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.12);
	}

	blockquote {
		margin: 0 0 1.35em;
		padding: 0.15em 0 0.15em 1em;
		border-left: var(--space-2) solid rgb(var(--color-ink-rgb) / 0.18);
		color: var(--ink-muted);
	}

	code {
		font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		font-size: 0.92em;
		padding: 0.1em 0.35em;
		border-radius: 0.3em;
		background: rgb(var(--color-ink-rgb) / 0.06);
	}

	pre {
		margin: 0 0 1.35em;
		padding: 1.05em 1.2em;
		overflow-x: auto;
		border-radius: var(--space-rem-0-75);
		background: var(--flat-fill);
		border: var(--space-1) solid var(--flat-border);
		color: var(--ink);
		line-height: 1.55;
		white-space: pre-wrap;
		overflow-wrap: anywhere;
		tab-size: 2;
		backdrop-filter: var(--flat-filter);
		-webkit-backdrop-filter: var(--flat-filter);
		box-shadow: var(--flat-shadow);

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

		code {
			padding: 0;
			background: transparent;
			color: inherit;
			font-size: 0.82em;
			line-height: inherit;
			white-space: inherit;
			overflow-wrap: inherit;
		}
	}
}


/* ./components/code-copy.css */
/* Root class matches filename: code-copy.css → .code-copy */

.code-copy {
	position: relative;
	margin: 0 0 1.35em;

	.copy {
		position: absolute;
		top: var(--space-rem-0-5);
		right: var(--space-rem-0-5);
		z-index: 1;
		display: grid;
		place-items: center;
		width: var(--space-rem-1-85);
		height: var(--space-rem-1-85);
		padding: 0;
		border: 0;
		border-radius: var(--space-rem-0-4);
		background: color-mix(in srgb, var(--color-bg) 92%, transparent);
		color: var(--ink-muted);
		cursor: pointer;
		transition:
			color var(--duration-fast) var(--ease-out),
			background var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			color: var(--accent);
			background: var(--flat-fill-opaque);
		}

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

		.glyph {
			grid-area: 1 / 1;
			width: var(--space-rem-0-95);
			height: var(--space-rem-0-95);
			transition:
				opacity var(--duration-base) var(--ease-out),
				transform var(--duration-base) var(--ease-out);
		}

		.idle {
			opacity: 1;
			transform: scale(1) rotate(0deg);
		}

		.done {
			opacity: 0;
			transform: scale(0.45) rotate(-24deg);
		}

		&.is-copied {
			color: var(--accent);

			.idle {
				opacity: 0;
				transform: scale(0.45) rotate(24deg);
			}

			.done {
				opacity: 1;
				transform: scale(1) rotate(0deg);
			}
		}
	}

	pre {
		margin: 0;
		padding-right: var(--space-rem-2-8);
	}
}

@media (prefers-reduced-motion: reduce) {
	.code-copy .copy .glyph {
		transition: opacity 0.01ms;
		transform: none;
	}
}


/* ./components/heading-link.css */
/* Root class matches filename: heading-link.css → .heading-link */

.heading-link {
	scroll-margin-top: var(--space-rem-5);

	.copy {
		display: inline-grid;
		place-items: center;
		width: 1.15em;
		height: 1.15em;
		margin-left: 0.28em;
		vertical-align: -0.12em;
		border-radius: 0.28em;
		color: var(--ink-muted);
		text-decoration: none;
		opacity: 0;
		cursor: pointer;
		transition:
			color var(--duration-fast) var(--ease-out),
			opacity var(--duration-fast) var(--ease-out),
			background var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			color: var(--accent);
			opacity: 1;
		}

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

		.glyph {
			grid-area: 1 / 1;
			width: 0.72em;
			height: 0.72em;
			transition:
				opacity var(--duration-base) var(--ease-out),
				transform var(--duration-base) var(--ease-out);
		}

		.idle {
			opacity: 1;
			transform: scale(1) rotate(0deg);
		}

		.done {
			opacity: 0;
			transform: scale(0.45) rotate(-24deg);
		}

		&.is-copied {
			color: var(--accent);
			opacity: 1;

			.idle {
				opacity: 0;
				transform: scale(0.45) rotate(24deg);
			}

			.done {
				opacity: 1;
				transform: scale(1) rotate(0deg);
			}
		}
	}

	&:hover .copy,
	&:focus-within .copy {
		opacity: 1;
	}
}

.prose .heading-link .copy {
	color: var(--ink-muted);
	text-decoration: none;

	&:hover,
	&:focus-visible {
		color: var(--accent);
		opacity: 1;
	}
}

@media (hover: none) {
	.heading-link .copy {
		opacity: 0.45;
	}
}

@media (prefers-reduced-motion: reduce) {
	.heading-link .copy .glyph {
		transition: opacity 0.01ms;
		transform: none;
	}
}


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

.loop {
	--loop-label-gap: var(--space-rem-2-5);

	display: flex;
	flex-direction: column;
	gap: 2.4em;
	margin: 0 0 2.4em;
	padding: var(--space-rem-3-4) 0 var(--space-rem-0-4);
	border: 0;
	overflow: visible;

	.stage {
		position: relative;
		width: min(100%, var(--measure-26));
		margin-inline: auto;
		aspect-ratio: 1;
		overflow: visible;
	}

	.ring {
		display: block;
		width: 100%;
		height: 100%;
		overflow: visible;
	}

	.arc-track,
	.arc-fill {
		fill: none;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.arc-track {
		stroke: rgb(var(--color-ink-rgb) / 0.14);
		stroke-width: 2.7;
	}

	.arc-fill {
		stroke: var(--accent);
		stroke-width: 2.7;
	}

	.dot-track {
		fill: var(--color-bg);
		stroke: rgb(var(--color-accent-rgb) / 0.38);
		stroke-width: 0.7;
	}

	.dot-fill {
		fill: var(--accent);
	}

	ol {
		position: absolute;
		inset: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	li {
		position: absolute;
		left: var(--label-x);
		top: var(--label-y);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.2em;
		width: var(--measure-8-4);
		margin: 0;
		padding: 0;
		transform: translate(-50%, -50%);
		text-align: center;
		line-height: 1.25;
	}

	.mark,
	.seg {
		display: none;
	}

	.copy {
		display: contents;
	}

	.index {
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-dense);
		letter-spacing: 0.08em;
		color: var(--ink-muted);
	}

	strong {
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-price);
		letter-spacing: -0.03em;
		color: var(--ink);
	}

	.detail {
		max-width: var(--measure-8-2);
		font-family: var(--font-body);
		font-size: var(--text-note);
		line-height: 1.35;
		color: var(--ink-muted);
	}

	figcaption {
		margin: 2em 0 0;
		font-family: var(--font-body);
		font-size: var(--text-fine);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-align: center;
		color: var(--ink-muted);
	}
}

.prose .loop {
	ol {
		margin: 0;
		padding: 0;
	}

	li {
		margin: 0;
		line-height: 1.25;
	}
}

@media (min-width: 641px) {
	.loop[data-steps='4'] {
		li[data-i='0'] {
			transform: translate(-50%, calc(-100% - var(--loop-label-gap)));
		}

		li[data-i='1'] {
			align-items: flex-start;
			transform: translate(var(--loop-label-gap), -50%);
			text-align: left;
		}

		li[data-i='2'] {
			transform: translate(-50%, var(--loop-label-gap));
		}

		li[data-i='3'] {
			align-items: flex-end;
			transform: translate(calc(-100% - var(--loop-label-gap)), -50%);
			text-align: right;
		}
	}
}

@media (max-width: 640px) {
	.loop {
		--loop-cycle: 8s;
		--loop-ease: cubic-bezier(0.4, 0, 0.2, 1);
		gap: 1.8em;
		padding: 0;

		.stage {
			aspect-ratio: auto;
			width: 100%;
		}

		.ring {
			display: none;
		}

		ol {
			position: static;
			display: flex;
			flex-direction: column;
		}

		li {
			position: relative;
			left: auto;
			top: auto;
			display: grid;
			grid-template-columns: var(--space-rem-1-15) 1fr;
			column-gap: var(--space-rem-0-95);
			align-items: start;
			width: auto;
			transform: none;
			text-align: left;
			padding-bottom: var(--space-rem-1-45);
		}

		li:last-child {
			padding-bottom: 0;
		}

		.mark,
		.seg {
			display: block;
		}

		.mark {
			position: relative;
			grid-column: 1;
			width: var(--space-rem-0-92);
			height: var(--space-rem-0-92);
			margin-top: var(--space-rem-0-18);
			justify-self: center;
		}

		.mark-ring,
		.mark-fill {
			position: absolute;
			inset: 0;
			border-radius: var(--radius-circle);
		}

		.mark-ring {
			border: var(--border-thick) solid rgb(var(--color-accent-rgb) / 0.38);
			background: var(--color-bg);
		}

		.mark-fill {
			background: var(--accent);
			opacity: 0;
			transform: scale(0.28);
		}

		.seg {
			position: absolute;
			left: var(--space-rem-0-575);
			top: var(--space-rem-1-22);
			bottom: var(--space-rem-0-18);
			width: var(--space-rem-0-28);
			transform: translateX(-50%);
		}

		.seg-track,
		.seg-fill {
			position: absolute;
			inset: 0;
			border-radius: var(--radius-full);
		}

		.seg-track {
			background: rgb(var(--color-ink-rgb) / 0.14);
		}

		.seg-fill {
			background: var(--accent);
			transform: scaleY(0);
			transform-origin: top;
		}

		.copy {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 0.18em;
			min-width: 0;
		}

		.index {
			min-width: 0;
		}

		.detail {
			max-width: none;
		}
	}

	.loop[data-steps='4'] {
		li[data-i='0'] .mark-fill {
			animation: loop-mobile-origin var(--loop-cycle) var(--loop-ease) infinite;
		}

		li[data-i='0'] .seg-fill {
			animation: loop-mobile-rail-0 var(--loop-cycle) var(--loop-ease) infinite;
		}

		li[data-i='1'] .mark-fill {
			animation: loop-mobile-dot-1 var(--loop-cycle) var(--loop-ease) infinite;
		}

		li[data-i='1'] .seg-fill {
			animation: loop-mobile-rail-1 var(--loop-cycle) var(--loop-ease) infinite;
		}

		li[data-i='2'] .mark-fill {
			animation: loop-mobile-dot-2 var(--loop-cycle) var(--loop-ease) infinite;
		}

		li[data-i='2'] .seg-fill {
			animation: loop-mobile-rail-2 var(--loop-cycle) var(--loop-ease) infinite;
		}

		li[data-i='3'] .mark-fill {
			animation: loop-mobile-dot-3 var(--loop-cycle) var(--loop-ease) infinite;
		}
	}
}

@keyframes loop-mobile-origin {
	0%,
	86% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(0.28);
	}
}

@keyframes loop-mobile-rail-0 {
	0% {
		transform: scaleY(0);
	}

	18%,
	86% {
		transform: scaleY(1);
	}

	100% {
		transform: scaleY(0);
	}
}

@keyframes loop-mobile-dot-1 {
	0% {
		opacity: 0;
		transform: scale(0.28);
	}

	18%,
	86% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(0.28);
	}
}

@keyframes loop-mobile-rail-1 {
	0%,
	20% {
		transform: scaleY(0);
	}

	38%,
	86% {
		transform: scaleY(1);
	}

	100% {
		transform: scaleY(0);
	}
}

@keyframes loop-mobile-dot-2 {
	0%,
	20% {
		opacity: 0;
		transform: scale(0.28);
	}

	38%,
	86% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(0.28);
	}
}

@keyframes loop-mobile-rail-2 {
	0%,
	40% {
		transform: scaleY(0);
	}

	58%,
	86% {
		transform: scaleY(1);
	}

	100% {
		transform: scaleY(0);
	}
}

@keyframes loop-mobile-dot-3 {
	0%,
	40% {
		opacity: 0;
		transform: scale(0.28);
	}

	58%,
	86% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(0.28);
	}
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
	.loop[data-steps='4'] {
		.mark-fill,
		.seg-fill {
			animation: none;
		}

		.mark-fill {
			opacity: 1;
			transform: scale(1);
		}

		.seg-fill {
			transform: scaleY(1);
		}
	}
}


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

.path {
	--path-cycle: 10s;
	--path-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--path-mark: var(--space-rem-0-92);
	display: flex;
	flex-direction: column;
	gap: 2em;
	margin: 0.4em 0 2.8em;
	padding: 0.4em 0 0;
	border: 0;

	.stage {
		width: 100%;
		padding-block: 2.6em 0.35em;
	}

	ol {
		display: grid;
		grid-template-columns:
			minmax(0, 1fr) var(--measure-10-2) minmax(0, 1fr)
			var(--measure-10-2) minmax(0, 1fr);
		align-items: start;
		column-gap: var(--space-rem-0-15);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.node,
	.span {
		margin: 0;
		padding: 0;
	}

	.node {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.7em;
		text-align: center;
	}

	.mark {
		position: relative;
		width: var(--path-mark);
		height: var(--path-mark);
	}

	.mark-ring,
	.mark-fill {
		position: absolute;
		inset: 0;
		border-radius: var(--radius-circle);
	}

	.mark-ring {
		border: var(--border-thick) solid rgb(var(--color-accent-rgb) / 0.38);
		background: var(--color-bg);
	}

	.mark-fill {
		background: var(--accent);
		opacity: 0.22;
		transform: scale(0.42);
	}

	.copy {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.35em;
		min-width: 0;
	}

	strong {
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-price);
		letter-spacing: -0.03em;
		color: var(--ink);
	}

	.detail {
		max-width: var(--measure-7-4);
		font-family: var(--font-body);
		font-size: var(--text-note);
		line-height: 1.35;
		color: var(--ink-muted);
	}

	.span {
		position: relative;
		display: flex;
		align-items: center;
		height: var(--path-mark);
		padding-inline: var(--space-rem-0-35);
	}

	.out,
	.in {
		position: absolute;
		left: 50%;
		width: max-content;
		max-width: var(--measure-6-8);
		font-family: var(--font-body);
		font-size: var(--text-tiny);
		letter-spacing: 0.03em;
		line-height: 1.3;
		text-align: center;
		text-wrap: balance;
		color: var(--ink-muted);
		opacity: 0.42;
		transform: translateX(-50%);
	}

	.out {
		bottom: 100%;
		margin-bottom: 0.7em;
	}

	.in {
		top: 100%;
		margin-top: 0.7em;
	}

	.rail {
		position: relative;
		width: 100%;
		height: var(--space-rem-0-32);
	}

	.rail-track,
	.rail-fwd,
	.rail-back {
		position: absolute;
		inset: 0;
		border-radius: var(--radius-full);
	}

	.rail-track {
		background: rgb(var(--color-ink-rgb) / 0.14);
	}

	.rail-fwd,
	.rail-back {
		background: var(--accent);
		transform: scaleX(0);
	}

	.rail-fwd {
		transform-origin: left center;
	}

	.rail-back {
		transform-origin: right center;
	}

	.pulse {
		position: absolute;
		top: 50%;
		left: 0;
		width: var(--space-rem-0-48);
		height: var(--space-rem-0-48);
		border-radius: var(--radius-circle);
		background: var(--accent);
		opacity: 0;
		transform: translate(-50%, -50%);
	}

	figcaption {
		margin: 2em 0 0;
		font-family: var(--font-body);
		font-size: var(--text-fine);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-align: center;
		color: var(--ink-muted);
	}
}

.prose .path {
	ol {
		margin: 0;
		padding: 0;
	}

	li {
		margin: 0;
	}
}

.path[data-motion='ok'] {
	.node[data-i='0'] .mark-fill {
		animation: path-dot-left var(--path-cycle) var(--path-ease) infinite;
	}

	.node[data-i='1'] .mark-fill {
		animation: path-dot-mid var(--path-cycle) var(--path-ease) infinite;
	}

	.node[data-i='2'] .mark-fill {
		animation: path-dot-right var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='0'] .out {
		animation: path-label-0 var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='0'] .in {
		animation: path-label-3 var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='1'] .out {
		animation: path-label-1 var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='1'] .in {
		animation: path-label-2 var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='0'] .rail-fwd {
		animation: path-fwd-0 var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='1'] .rail-fwd {
		animation: path-fwd-1 var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='0'] .rail-back {
		animation: path-back-0 var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='1'] .rail-back {
		animation: path-back-1 var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='0'] .pulse {
		animation: path-pulse-0 var(--path-cycle) var(--path-ease) infinite;
	}

	.span[data-span='1'] .pulse {
		animation: path-pulse-1 var(--path-cycle) var(--path-ease) infinite;
	}
}

.path[data-motion='reduce'] {
	.mark-fill {
		opacity: 1;
		transform: scale(1);
	}

	.rail-fwd,
	.rail-back {
		transform: scaleX(1);
	}

	.out,
	.in {
		opacity: 1;
	}

	.pulse {
		display: none;
	}
}

@keyframes path-label-0 {
	0%,
	22% {
		opacity: 1;
		color: var(--ink);
	}

	28%,
	100% {
		opacity: 0.42;
		color: var(--ink-muted);
	}
}

@keyframes path-label-1 {
	0%,
	22% {
		opacity: 0.42;
	}

	25%,
	47% {
		opacity: 1;
		color: var(--ink);
	}

	53%,
	100% {
		opacity: 0.42;
		color: var(--ink-muted);
	}
}

@keyframes path-label-2 {
	0%,
	47% {
		opacity: 0.42;
	}

	50%,
	72% {
		opacity: 1;
		color: var(--ink);
	}

	78%,
	100% {
		opacity: 0.42;
		color: var(--ink-muted);
	}
}

@keyframes path-label-3 {
	0%,
	72% {
		opacity: 0.42;
	}

	75%,
	97% {
		opacity: 1;
		color: var(--ink);
	}

	100% {
		opacity: 0.42;
		color: var(--ink-muted);
	}
}

@keyframes path-fwd-0 {
	0% {
		transform: scaleX(0);
	}

	18%,
	22% {
		transform: scaleX(1);
	}

	28%,
	100% {
		transform: scaleX(0);
	}
}

@keyframes path-fwd-1 {
	0%,
	25% {
		transform: scaleX(0);
	}

	43%,
	47% {
		transform: scaleX(1);
	}

	53%,
	100% {
		transform: scaleX(0);
	}
}

@keyframes path-back-0 {
	0%,
	75% {
		transform: scaleX(0);
	}

	93%,
	97% {
		transform: scaleX(1);
	}

	100% {
		transform: scaleX(0);
	}
}

@keyframes path-back-1 {
	0%,
	50% {
		transform: scaleX(0);
	}

	68%,
	72% {
		transform: scaleX(1);
	}

	78%,
	100% {
		transform: scaleX(0);
	}
}

@keyframes path-pulse-0 {
	0% {
		opacity: 0;
		left: 0;
	}

	4%,
	18% {
		opacity: 1;
		left: 100%;
	}

	22% {
		opacity: 0;
		left: 100%;
	}

	75% {
		opacity: 0;
		left: 100%;
	}

	79%,
	93% {
		opacity: 1;
		left: 0;
	}

	97%,
	100% {
		opacity: 0;
		left: 0;
	}
}

@keyframes path-pulse-1 {
	0%,
	25% {
		opacity: 0;
		left: 0;
	}

	29%,
	43% {
		opacity: 1;
		left: 100%;
	}

	47% {
		opacity: 0;
		left: 100%;
	}

	50% {
		opacity: 0;
		left: 100%;
	}

	54%,
	68% {
		opacity: 1;
		left: 0;
	}

	72%,
	100% {
		opacity: 0;
		left: 0;
	}
}

@keyframes path-dot-left {
	0%,
	72% {
		opacity: 0.22;
		transform: scale(0.42);
	}

	75%,
	97% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0.22;
		transform: scale(0.42);
	}
}

@keyframes path-dot-mid {
	0%,
	18% {
		opacity: 0.22;
		transform: scale(0.42);
	}

	22%,
	72% {
		opacity: 1;
		transform: scale(1);
	}

	78%,
	100% {
		opacity: 0.22;
		transform: scale(0.42);
	}
}

@keyframes path-dot-right {
	0%,
	43% {
		opacity: 0.22;
		transform: scale(0.42);
	}

	47%,
	72% {
		opacity: 1;
		transform: scale(1);
	}

	78%,
	100% {
		opacity: 0.22;
		transform: scale(0.42);
	}
}

@media (max-width: 640px) {
	.path {
		gap: 1.6em;
		margin-bottom: 2.2em;

		.stage {
			padding-block: 0;
		}

		ol {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			row-gap: 0;
		}

		.node {
			display: grid;
			grid-template-columns: var(--space-rem-1-25) 1fr;
			column-gap: var(--space-rem-1-05);
			row-gap: 0;
			align-items: start;
			text-align: left;
		}

		.mark {
			width: var(--space-rem-1-05);
			height: var(--space-rem-1-05);
			margin-top: var(--space-rem-0-2);
			justify-self: center;
		}

		.copy {
			align-items: flex-start;
			padding-block: var(--space-rem-0-05) var(--space-rem-0-15);
		}

		.detail {
			max-width: var(--measure-14);
		}

		.span {
			display: grid;
			grid-template-columns: var(--space-rem-1-25) 1fr;
			grid-template-rows: auto 1fr auto;
			column-gap: var(--space-rem-1-05);
			align-items: stretch;
			width: 100%;
			height: auto;
			min-height: var(--space-rem-5-6);
			padding: var(--space-rem-0-45) 0;
		}

		.rail {
			grid-column: 1;
			grid-row: 1 / -1;
			width: var(--space-rem-0-34);
			height: 100%;
			min-height: var(--space-rem-5-6);
			margin-inline: auto;
		}

		.rail-fwd,
		.rail-back {
			transform: scaleY(0);
		}

		.rail-fwd {
			transform-origin: top center;
		}

		.rail-back {
			transform-origin: bottom center;
		}

		.out,
		.in {
			position: static;
			left: auto;
			top: auto;
			bottom: auto;
			width: auto;
			max-width: var(--measure-12);
			grid-column: 2;
			text-align: left;
			transform: none;
		}

		.out {
			grid-row: 1;
			align-self: start;
		}

		.in {
			grid-row: 3;
			align-self: end;
		}
	}

	.path[data-motion='ok'] {
		.span[data-span='0'] .rail-fwd {
			animation: path-fwd-0-mobile var(--path-cycle) var(--path-ease) infinite;
		}

		.span[data-span='1'] .rail-fwd {
			animation: path-fwd-1-mobile var(--path-cycle) var(--path-ease) infinite;
		}

		.span[data-span='0'] .rail-back {
			animation: path-back-0-mobile var(--path-cycle) var(--path-ease) infinite;
		}

		.span[data-span='1'] .rail-back {
			animation: path-back-1-mobile var(--path-cycle) var(--path-ease) infinite;
		}

		.span[data-span='0'] .pulse {
			animation: path-pulse-0-mobile var(--path-cycle) var(--path-ease) infinite;
		}

		.span[data-span='1'] .pulse {
			animation: path-pulse-1-mobile var(--path-cycle) var(--path-ease) infinite;
		}
	}

	.path[data-motion='reduce'] {
		.rail-fwd,
		.rail-back {
			transform: scaleY(1);
		}
	}
}

@keyframes path-fwd-0-mobile {
	0% {
		transform: scaleY(0);
	}

	18%,
	22% {
		transform: scaleY(1);
	}

	28%,
	100% {
		transform: scaleY(0);
	}
}

@keyframes path-fwd-1-mobile {
	0%,
	25% {
		transform: scaleY(0);
	}

	43%,
	47% {
		transform: scaleY(1);
	}

	53%,
	100% {
		transform: scaleY(0);
	}
}

@keyframes path-back-0-mobile {
	0%,
	75% {
		transform: scaleY(0);
	}

	93%,
	97% {
		transform: scaleY(1);
	}

	100% {
		transform: scaleY(0);
	}
}

@keyframes path-back-1-mobile {
	0%,
	50% {
		transform: scaleY(0);
	}

	68%,
	72% {
		transform: scaleY(1);
	}

	78%,
	100% {
		transform: scaleY(0);
	}
}

@keyframes path-pulse-0-mobile {
	0% {
		opacity: 0;
		top: 0;
		left: 50%;
	}

	4%,
	18% {
		opacity: 1;
		top: 100%;
		left: 50%;
	}

	22% {
		opacity: 0;
		top: 100%;
	}

	75% {
		opacity: 0;
		top: 100%;
	}

	79%,
	93% {
		opacity: 1;
		top: 0;
		left: 50%;
	}

	97%,
	100% {
		opacity: 0;
		top: 0;
	}
}

@keyframes path-pulse-1-mobile {
	0%,
	25% {
		opacity: 0;
		top: 0;
		left: 50%;
	}

	29%,
	43% {
		opacity: 1;
		top: 100%;
		left: 50%;
	}

	47% {
		opacity: 0;
		top: 100%;
	}

	50% {
		opacity: 0;
		top: 100%;
	}

	54%,
	68% {
		opacity: 1;
		top: 0;
		left: 50%;
	}

	72%,
	100% {
		opacity: 0;
		top: 0;
	}
}


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

.lock {
	--lock-cycle: 9s;
	--lock-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--lock-mark: var(--space-rem-0-92);
	--lock-stop: var(--score-fail-ink);
	display: flex;
	flex-direction: column;
	gap: 1.9em;
	margin: 0.55em 0 2.8em;
	padding: 0.15em 0 0;
	border: 0;

	.stage {
		display: grid;
		grid-template-columns:
			minmax(var(--measure-8-2), 0.95fr) minmax(var(--measure-7-4), 1.05fr)
			minmax(var(--measure-8-4), 1fr);
		grid-template-rows: 1fr 1fr;
		grid-template-areas:
			'origin fork allow'
			'origin fork deny';
		align-items: center;
		column-gap: var(--space-rem-0-95);
		width: 100%;
		min-height: var(--measure-11-6);
	}

	ol {
		display: contents;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.origin,
	.allow,
	.deny,
	.bar {
		margin: 0;
		padding: 0;
	}

	.origin {
		grid-area: origin;
		padding-right: var(--space-rem-0-15);
		text-align: right;
	}

	.origin .copy {
		position: relative;
	}

	.origin .detail {
		position: absolute;
		top: 100%;
		right: 0;
		margin-top: 0.32em;
	}

	.allow {
		grid-area: allow;
		padding-left: var(--space-rem-0-2);
	}

	.deny {
		grid-area: deny;
		padding-left: var(--space-rem-0-2);
	}

	.bar,
	.mark {
		display: none;
	}

	.copy {
		display: flex;
		flex-direction: column;
		gap: 0.32em;
		min-width: 0;
	}

	.allow .copy,
	.deny .copy {
		align-items: flex-start;
		text-align: left;
	}

	.origin .copy {
		align-items: flex-end;
	}

	strong {
		max-width: var(--measure-9-2);
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-price);
		letter-spacing: -0.03em;
		line-height: 1.25;
		text-wrap: balance;
		color: var(--ink);
	}

	.detail {
		max-width: var(--measure-8-6);
		font-family: var(--font-body);
		font-size: var(--text-note);
		line-height: 1.35;
		text-wrap: balance;
		color: var(--ink-muted);
	}

	.deny strong {
		color: rgb(var(--color-ink-rgb) / 0.55);
	}

	.fork {
		grid-area: fork;
		display: block;
		width: 100%;
		height: 100%;
		min-height: var(--measure-10-6);
		overflow: visible;
	}

	.track,
	.fill,
	.stop-track,
	.stop,
	.stop-edge {
		fill: none;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.track,
	.stop-track {
		stroke: rgb(var(--color-ink-rgb) / 0.14);
		stroke-width: 2.5;
	}

	.fill {
		stroke: var(--accent);
		stroke-width: 2.5;
		stroke-dasharray: 86;
		stroke-dashoffset: 86;
	}

	.start-track,
	.allow-node-track {
		fill: var(--color-bg);
		stroke: rgb(var(--color-accent-rgb) / 0.38);
		stroke-width: 1.15;
	}

	.start-node,
	.allow-node {
		fill: var(--accent);
		opacity: 0.2;
		transform-box: fill-box;
		transform-origin: center;
		transform: scale(0.28);
	}

	.stop {
		stroke: var(--accent);
		stroke-width: 2.6;
		stroke-dasharray: 28;
		stroke-dashoffset: 28;
	}

	.stop-edge {
		stroke: var(--lock-stop);
		stroke-width: 1.15;
		stroke-dasharray: 28;
		stroke-dashoffset: 28;
	}

	figcaption {
		margin: 2em 0 0;
		font-family: var(--font-body);
		font-size: var(--text-fine);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-align: center;
		color: var(--ink-muted);
	}
}

.prose .lock {
	ol {
		margin: 0;
		padding: 0;
	}

	li {
		margin: 0;
		padding: 0;
	}
}

.lock[data-motion='ok'] {
	.start-node {
		animation: lock-start-node var(--lock-cycle) var(--lock-ease) infinite;
	}

	.fill.trunk {
		animation: lock-draw-trunk var(--lock-cycle) var(--lock-ease) infinite;
	}

	.fill.allow-rail {
		animation: lock-draw-allow var(--lock-cycle) var(--lock-ease) infinite;
	}

	.fill.deny-rail {
		animation: lock-draw-deny var(--lock-cycle) var(--lock-ease) infinite;
	}

	.allow-node {
		animation: lock-allow-node var(--lock-cycle) var(--lock-ease) infinite;
	}

	.stop,
	.stop-edge {
		animation: lock-stop var(--lock-cycle) var(--lock-ease) infinite;
	}

	.allow {
		animation: lock-copy-allow var(--lock-cycle) var(--lock-ease) infinite;
	}

	.deny {
		animation: lock-copy-deny var(--lock-cycle) var(--lock-ease) infinite;
	}
}

.lock[data-motion='reduce'] {
	.fill {
		stroke-dashoffset: 0;
	}

	.start-node,
	.allow-node {
		opacity: 1;
		transform: scale(1);
	}

	.stop,
	.stop-edge {
		stroke-dashoffset: 0;
	}
}

@keyframes lock-start-node {
	0%,
	6% {
		opacity: 0.2;
		transform: scale(0.28);
	}

	14%,
	86% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0.2;
		transform: scale(0.28);
	}
}

@keyframes lock-draw-trunk {
	0%,
	8% {
		stroke-dashoffset: 86;
	}

	16%,
	86% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: 86;
	}
}

@keyframes lock-draw-allow {
	0%,
	16% {
		stroke-dashoffset: 86;
	}

	34%,
	86% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: 86;
	}
}

@keyframes lock-draw-deny {
	0%,
	42% {
		stroke-dashoffset: 86;
	}

	56%,
	86% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: 86;
	}
}

@keyframes lock-allow-node {
	0%,
	30% {
		opacity: 0.2;
		transform: scale(0.28);
	}

	38%,
	86% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0.2;
		transform: scale(0.28);
	}
}

@keyframes lock-stop {
	0%,
	54% {
		stroke-dashoffset: 28;
	}

	64%,
	86% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: 28;
	}
}

@keyframes lock-copy-allow {
	0%,
	22% {
		opacity: 0.42;
	}

	34%,
	86% {
		opacity: 1;
	}

	100% {
		opacity: 0.42;
	}
}

@keyframes lock-copy-deny {
	0%,
	48% {
		opacity: 0.34;
	}

	64%,
	86% {
		opacity: 0.88;
	}

	100% {
		opacity: 0.34;
	}
}

@media (max-width: 640px) {
	.lock {
		gap: 1.6em;
		margin-bottom: 2.2em;

		.stage {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			min-height: 0;
		}

		ol {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			row-gap: 0;
		}

		.origin,
		.allow,
		.deny {
			display: grid;
			grid-template-columns: var(--space-rem-1-25) 1fr;
			column-gap: var(--space-rem-1-05);
			row-gap: 0;
			align-items: start;
			align-self: stretch;
			width: 100%;
			padding: 0;
			text-align: left;
		}

		.mark {
			display: block;
			position: relative;
			width: var(--space-rem-1-05);
			height: var(--space-rem-1-05);
			margin-top: var(--space-rem-0-2);
			justify-self: center;
		}

		.mark-ring,
		.mark-fill {
			position: absolute;
			inset: 0;
			border-radius: var(--radius-circle);
		}

		.mark-ring {
			border: var(--border-thick) solid rgb(var(--color-accent-rgb) / 0.38);
			background: var(--color-bg);
		}

		.mark-fill {
			background: var(--accent);
			opacity: 0.22;
			transform: scale(0.42);
		}

		.deny .mark-fill {
			inset: var(--space-rem-0-42) var(--space-rem-0-08);
			border-radius: var(--radius-full);
			background: var(--lock-stop);
		}

		.origin .copy,
		.allow .copy,
		.deny .copy {
			position: static;
			align-items: flex-start;
			padding-block: var(--space-rem-0-05) var(--space-rem-0-15);
		}

		.origin .detail {
			position: static;
			top: auto;
			right: auto;
			margin-top: 0;
		}

		strong,
		.detail {
			max-width: var(--measure-14);
		}

		.bar {
			display: grid;
			grid-template-columns: var(--space-rem-1-25) 1fr;
			column-gap: var(--space-rem-1-05);
			align-items: stretch;
			width: 100%;
			height: auto;
			min-height: var(--space-rem-5-6);
			padding: var(--space-rem-0-45) 0;
		}

		.rail {
			position: relative;
			grid-column: 1;
			width: var(--space-rem-0-34);
			height: 100%;
			min-height: var(--space-rem-5-6);
			margin-inline: auto;
		}

		.rail-track,
		.rail-fill {
			position: absolute;
			inset: 0;
			border-radius: var(--radius-full);
		}

		.rail-track {
			background: rgb(var(--color-ink-rgb) / 0.14);
		}

		.rail-fill {
			background: var(--accent);
			transform: scaleY(0);
			transform-origin: top center;
		}

		.pulse {
			position: absolute;
			top: 0;
			left: 50%;
			width: var(--space-rem-0-48);
			height: var(--space-rem-0-48);
			border-radius: var(--radius-circle);
			background: var(--accent);
			opacity: 0;
			transform: translate(-50%, -50%);
		}

		.fork {
			display: none;
		}
	}

	.lock[data-motion='ok'] {
		.origin .mark-fill {
			animation: lock-dot-0 var(--lock-cycle) var(--lock-ease) infinite;
		}

		.allow .mark-fill {
			animation: lock-dot-1 var(--lock-cycle) var(--lock-ease) infinite;
		}

		.deny .mark-fill {
			animation: lock-dot-2 var(--lock-cycle) var(--lock-ease) infinite;
		}

		.bar[data-bar='0'] .rail-fill {
			animation: lock-rail-0-mobile var(--lock-cycle) var(--lock-ease) infinite;
		}

		.bar[data-bar='1'] .rail-fill {
			animation: lock-rail-1-mobile var(--lock-cycle) var(--lock-ease) infinite;
		}

		.bar[data-bar='0'] .pulse {
			animation: lock-pulse-0-mobile var(--lock-cycle) var(--lock-ease) infinite;
		}

		.bar[data-bar='1'] .pulse {
			animation: lock-pulse-1-mobile var(--lock-cycle) var(--lock-ease) infinite;
		}

		.allow,
		.deny {
			animation: none;
		}
	}

	.lock[data-motion='reduce'] {
		.mark-fill {
			opacity: 1;
			transform: scale(1);
		}

		.rail-fill {
			transform: scaleY(1);
		}

		.pulse {
			display: none;
		}
	}
}

@keyframes lock-dot-0 {
	0%,
	8% {
		opacity: 0.22;
		transform: scale(0.42);
	}

	16%,
	86% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0.22;
		transform: scale(0.42);
	}
}

@keyframes lock-dot-1 {
	0%,
	28% {
		opacity: 0.22;
		transform: scale(0.42);
	}

	38%,
	86% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0.22;
		transform: scale(0.42);
	}
}

@keyframes lock-dot-2 {
	0%,
	50% {
		opacity: 0.22;
		transform: scale(0.42);
	}

	60%,
	86% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0.22;
		transform: scale(0.42);
	}
}

@keyframes lock-rail-0-mobile {
	0%,
	16% {
		transform: scaleY(0);
	}

	28%,
	86% {
		transform: scaleY(1);
	}

	100% {
		transform: scaleY(0);
	}
}

@keyframes lock-rail-1-mobile {
	0%,
	38% {
		transform: scaleY(0);
	}

	50%,
	86% {
		transform: scaleY(1);
	}

	100% {
		transform: scaleY(0);
	}
}

@keyframes lock-pulse-0-mobile {
	0%,
	16% {
		opacity: 0;
		top: 0;
	}

	20%,
	28% {
		opacity: 1;
		top: 100%;
	}

	32%,
	100% {
		opacity: 0;
		top: 100%;
	}
}

@keyframes lock-pulse-1-mobile {
	0%,
	38% {
		opacity: 0;
		top: 0;
	}

	42%,
	50% {
		opacity: 1;
		top: 100%;
	}

	54%,
	100% {
		opacity: 0;
		top: 100%;
	}
}


/* ./components/external-link.css */
/* Root class matches filename: external-link.css → .external-link */

.external-link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.28em;

	.icon {
		flex-shrink: 0;
		width: 0.72em;
		height: 0.72em;
		overflow: visible;
		transition: transform var(--duration-fast) var(--ease-out);
	}

	.new-tab {
		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);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	&:hover .icon,
	&:focus-visible .icon {
		transform: translate(0.12em, -0.12em);
	}
}


/* ./components/default-skeleton.css */
/* Root class matches filename: default-skeleton.css → .default-skeleton */

.default-skeleton {
	display: grid;
	place-items: center;
	flex: 1 1 auto;
	align-self: stretch;
	width: 100%;
	min-height: max(var(--measure-16), calc(100dvh - var(--measure-14)));

	.wheel {
		position: relative;
		width: var(--space-20);
		height: var(--space-20);
		color: var(--ink-muted);

		span {
			position: absolute;
			inset: 0;
			animation: default-skeleton-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(--radius-full);
				background: currentColor;
			}
		}
	}
}

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

	100% {
		opacity: 0.18;
	}
}

@media (prefers-reduced-motion: reduce) {
	.default-skeleton .wheel span {
		animation: none;
		opacity: 0.35;
	}
}


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

.help {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	background: var(--color-bg);
	color: var(--ink);
	padding-block: var(--space-header-y) calc(1600 * var(--scale));

	.inner {
		display: flex;
		flex-direction: column;
		flex: 1;
		width: min(100%, var(--size-page));
		margin-inline: auto;
		padding-inline: var(--space-page-x);
	}

	.intro {
		margin-bottom: calc(720 * var(--scale));
		padding-bottom: calc(560 * var(--scale));
	}

	.crumb {
		margin: 0 var(--space-5) calc(280 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(115 * var(--scale));
		letter-spacing: calc(6 * var(--scale));
		text-transform: uppercase;
		color: var(--ink-muted);

		a {
			color: var(--accent);
			transition: opacity var(--duration-fast) var(--ease-out);

			&:hover,
			&:focus-visible {
				opacity: 0.72;
			}
		}
	}

	.heading {
		max-width: none;
		margin-bottom: calc(280 * var(--scale));
	}

	.lede {
		max-width: var(--measure-36);
		font-family: var(--font-body);
		font-size: clamp(var(--space-rem-1-08), 1.55vw, var(--space-rem-1-22));
		line-height: 1.4;
		color: var(--ink-muted);
	}

	.faq-accordion {
		width: 100%;
		margin-inline: 0;
	}

	.faq-accordion + .lede {
		margin-top: calc(720 * var(--scale));
	}

	.back {
		margin-top: calc(720 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(200 * var(--scale));
		color: var(--accent);

		a {
			transition: opacity var(--duration-fast) var(--ease-out);

			&:hover,
			&:focus-visible {
				opacity: 0.72;
			}

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

	.article {
		.title {
			margin-bottom: calc(280 * var(--scale));
			font-family: var(--font-body);
			font-weight: var(--weight-medium);
			font-size: clamp(var(--space-rem-1-75), 4vw, var(--space-rem-3));
			line-height: 1.1;
			letter-spacing: -0.03em;
			color: var(--ink);
		}

		.lede {
			margin-bottom: 0;
		}

		.intro {
			margin-bottom: calc(640 * var(--scale));
		}

		.status {
			font-family: var(--font-body);
			font-size: calc(280 * var(--scale));
			color: var(--ink-muted);
		}
	}

	/* Article markdown: use .prose (theme/components/prose.css) */
	.body {
		margin-top: calc(480 * var(--scale));
	}

	.adjacent {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: calc(240 * var(--scale));
		margin-top: calc(900 * var(--scale));
		padding-top: calc(480 * var(--scale));
		border-top: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.12);
	}

	.adjacent-link {
		display: flex;
		flex-direction: column;
		gap: calc(60 * var(--scale));
		min-width: 0;
		transition: color var(--duration-fast) var(--ease-out);

		&.next {
			text-align: right;
			justify-self: end;
		}

		.label {
			font-family: var(--font-body);
			font-size: calc(140 * var(--scale));
			letter-spacing: calc(6 * var(--scale));
			text-transform: uppercase;
			color: var(--ink-muted);
		}

		.question {
			font-family: var(--font-body);
			font-weight: var(--weight-medium);
			font-size: calc(240 * var(--scale));
			line-height: 1.15;
			letter-spacing: calc(-12 * var(--scale));
		}

		&:hover,
		&:focus-visible {
			color: var(--accent);
		}

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

	@media (max-width: 900px) {
		padding-block: var(--space-header-y) calc(1200 * var(--scale));

		.adjacent {
			grid-template-columns: 1fr;
		}

		.adjacent-link.next {
			text-align: left;
			justify-self: start;
		}
	}
}


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

.legal {
	min-height: 100dvh;
	background: var(--color-bg);
	color: var(--ink);
	padding-block: var(--space-header-y) calc(1600 * var(--scale));

	.inner {
		width: min(100%, var(--size-page));
		margin-inline: auto;
		padding-inline: var(--space-page-x);
	}

	.crumb {
		margin: 0 var(--space-5) calc(280 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(115 * var(--scale));
		letter-spacing: calc(6 * var(--scale));
		text-transform: uppercase;
		color: var(--ink-muted);
	}

	.intro {
		margin-bottom: calc(640 * var(--scale));
		padding-bottom: calc(560 * var(--scale));
		border-bottom: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.12);
	}

	.lede {
		max-width: var(--measure-36);
		margin-bottom: 0;
		font-family: var(--font-body);
		font-size: clamp(var(--space-rem-1-08), 1.55vw, var(--space-rem-1-22));
		line-height: 1.4;
		color: var(--ink-muted);
	}

	.article {
		.title {
			margin-bottom: calc(280 * var(--scale));
			font-family: var(--font-body);
			font-weight: var(--weight-medium);
			font-size: clamp(var(--space-rem-1-75), 4vw, var(--space-rem-3));
			line-height: 1.1;
			letter-spacing: -0.03em;
			color: var(--ink);
		}

		.status {
			font-family: var(--font-body);
			font-size: calc(280 * var(--scale));
			color: var(--ink-muted);
		}
	}

	.body {
		margin-top: calc(480 * var(--scale));
	}

	.updated {
		margin: calc(720 * var(--scale)) 0 0;
		font-family: var(--font-body);
		font-size: clamp(var(--space-rem-0-875), 1.2vw, var(--text-lead));
		line-height: var(--leading-body);
		color: var(--ink-muted);
	}

	.also,
	.back {
		display: flex;
		flex-wrap: wrap;
		gap: calc(160 * var(--scale)) calc(280 * var(--scale));
		margin-top: calc(280 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(200 * var(--scale));
		color: var(--accent);

		a {
			transition: opacity var(--duration-fast) var(--ease-out);

			&:hover,
			&:focus-visible {
				opacity: 0.72;
			}

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

	.back {
		margin-top: calc(720 * var(--scale));
	}

	@media (max-width: 900px) {
		padding-block: var(--space-header-y) calc(1200 * var(--scale));
	}
}


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

.mcp {
	min-height: 100dvh;
	background: var(--color-bg);
	color: var(--ink);
	padding-block: var(--space-header-y) calc(1600 * var(--scale));

	.inner {
		width: min(100%, var(--size-page));
		margin-inline: auto;
		padding-inline: var(--space-page-x);
	}

	.crumb {
		margin: 0 var(--space-5) calc(280 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(115 * var(--scale));
		letter-spacing: calc(6 * var(--scale));
		text-transform: uppercase;
		color: var(--ink-muted);
	}

	.intro {
		margin-bottom: calc(640 * var(--scale));
		padding-bottom: calc(560 * var(--scale));
		border-bottom: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.12);
	}

	.lede {
		max-width: var(--measure-36);
		margin-bottom: 0;
		font-family: var(--font-body);
		font-size: clamp(var(--space-rem-1-08), 1.55vw, var(--space-rem-1-22));
		line-height: 1.4;
		color: var(--ink-muted);
	}

	.article {
		.title {
			margin-bottom: calc(280 * var(--scale));
			font-family: var(--font-body);
			font-weight: var(--weight-medium);
			font-size: clamp(var(--space-rem-1-75), 4vw, var(--space-rem-3));
			line-height: 1.1;
			letter-spacing: -0.03em;
			color: var(--ink);
		}

		.status {
			font-family: var(--font-body);
			font-size: calc(280 * var(--scale));
			color: var(--ink-muted);
		}
	}

	.body {
		margin-top: calc(480 * var(--scale));
	}

	/* Humans never need this; Accept: text/markdown / .md still ships it. */
	.agents {
		display: none;
	}

	.updated {
		margin: calc(720 * var(--scale)) 0 0;
		font-family: var(--font-body);
		font-size: clamp(var(--space-rem-0-875), 1.2vw, var(--text-lead));
		line-height: var(--leading-body);
		color: var(--ink-muted);
	}

	.also,
	.back {
		margin-top: calc(280 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(200 * var(--scale));
		color: var(--accent);

		a {
			transition: opacity var(--duration-fast) var(--ease-out);

			&:hover,
			&:focus-visible {
				opacity: 0.72;
			}

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

	.back {
		margin-top: calc(720 * var(--scale));
	}

	@media (max-width: 900px) {
		padding-block: var(--space-header-y) calc(1200 * var(--scale));
	}
}


/* ./components/mcp-connect.css */
/* Root class matches filename: mcp-connect.css → .mcp-connect */

.mcp-connect {
	--mcp-border: rgb(var(--color-ink-rgb) / 0.14);
	--mcp-border-strong: rgb(var(--color-ink-rgb) / 0.22);
	--mcp-surface: var(--flat-fill);
	--mcp-cursor: #111111;
	--mcp-vscode: #0078d4;
	--mcp-claude: #d97757;
	--mcp-codex: var(--color-bg-dark);
	--mcp-grok: #111111;
	--mcp-grokbot: #2a2a2a;
	--mcp-chatgpt: #10a37f;

	margin: calc(480 * var(--scale)) 0;
	padding: calc(560 * var(--scale));
	border: var(--space-1) solid var(--mcp-border);
	border-radius: var(--radius-card);
	background:
		radial-gradient(
			120% 80% at 0% 0%,
			rgb(var(--color-accent-rgb) / 0.07),
			transparent 55%
		),
		var(--mcp-surface);
	box-shadow: 0 var(--space-18) var(--space-40) rgb(var(--color-ink-rgb) / 0.05);

	.lede {
		margin: 0 0 calc(480 * var(--scale));
		max-width: var(--measure-38);
		font-family: var(--font-body);
		font-size: clamp(var(--text-price), 1.5vw, var(--text-panel));
		line-height: 1.45;
		color: var(--ink-muted);
	}

	.form {
		display: grid;
		gap: calc(400 * var(--scale));
		margin-bottom: calc(560 * var(--scale));
	}

	.fields {
		display: grid;
		gap: calc(280 * var(--scale));

		@media (min-width: 720px) {
			grid-template-columns: 1fr 1fr;
		}
	}

	.field {
		display: grid;
		gap: calc(140 * var(--scale));
	}

	.label {
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(150 * var(--scale));
		letter-spacing: calc(6 * var(--scale));
		text-transform: uppercase;
		color: var(--ink-muted);
	}

	.field input {
		min-height: var(--space-52);
		padding: var(--space-rem-md) var(--text-body);
		border: var(--space-1) solid var(--mcp-border-strong);
		border-radius: var(--radius-control);
		background: var(--color-bg);
		color: var(--ink);
		font-family: var(--font-body);
		font-size: var(--text-metric);
		transition:
			border-color var(--duration-fast) var(--ease-out),
			box-shadow var(--duration-fast) var(--ease-out);

		&:focus,
		&:focus-visible {
			outline: none;
			border-color: var(--accent);
			box-shadow: 0 0 0 var(--space-4) rgb(var(--color-accent-rgb) / 0.16);
		}

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

	.modes {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.mode-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: calc(115 * var(--scale));
		margin-top: calc(140 * var(--scale));
	}

	.mode {
		display: flex;
		align-items: center;
		gap: var(--space-rem-0-75);
		min-height: var(--space-64);
		padding: var(--space-rem-0-7) var(--space-rem-0-95);
		border: var(--space-1) solid var(--mcp-border-strong);
		border-radius: var(--radius-compact);
		background: var(--color-bg);
		cursor: pointer;
		transition:
			border-color var(--duration-fast) var(--ease-out),
			box-shadow var(--duration-fast) var(--ease-out),
			background var(--duration-fast) var(--ease-out);

		input {
			position: absolute;
			opacity: 0;
			pointer-events: none;
		}

		&.is-on {
			border-color: var(--accent);
			background: rgb(var(--color-accent-rgb) / 0.08);
			box-shadow: inset 0 0 0 var(--space-1) rgb(var(--color-accent-rgb) / 0.25);
		}

		&:hover {
			border-color: var(--accent);
		}
	}

	.mode-text {
		display: grid;
		gap: var(--space-rem-0-1);
	}

	.mode-title {
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-metric);
		color: var(--ink);
	}

	.mode-sub {
		font-family: var(--font-body);
		font-size: var(--text-subhead);
		color: var(--ink-muted);
	}

	.client-groups {
		display: grid;
		gap: calc(480 * var(--scale));
	}

	.notice {
		display: flex;
		align-items: center;
		gap: var(--space-rem-0-75);
		margin: 0;
		min-height: var(--space-64);
		padding: var(--space-rem-0-7) var(--space-rem-0-95);
		border: var(--space-1) solid var(--mcp-border-strong);
		border-radius: var(--radius-compact);
		background: var(--color-bg);
		color: var(--ink);
		font-family: var(--font-body);
		font-size: var(--text-compact);
		line-height: 1.4;

		p {
			margin: 0;
		}

		.icon {
			flex: 0 0 auto;
			width: var(--space-rem-1-25);
			height: var(--space-rem-1-25);
			color: var(--ink);
		}
	}

	.guide {
		display: grid;
		gap: calc(200 * var(--scale));
	}

	.guide-top {
		display: flex;
		align-items: center;
		gap: var(--space-rem-0-85);

		.label {
			margin: 0;
			margin-right: auto;
		}
	}

	.payload {
		margin: 0;
		padding: var(--space-rem-md) var(--text-body);
		border: var(--space-1) solid var(--mcp-border-strong);
		border-radius: var(--radius-control);
		background: var(--color-bg);
		color: var(--ink);
		font-family:
			ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
		font-size: var(--text-subhead);
		font-weight: var(--weight-medium);
		line-height: 1.45;
		letter-spacing: -0.03em;
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}

	.how {
		margin: 0;
		font-family: var(--font-body);
		font-size: var(--text-lead);
		line-height: 1.4;
		color: var(--ink-muted);
	}

	.copy {
		padding: var(--space-rem-0-2) var(--space-rem-0-45);
		border: 0;
		background: transparent;
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-micro);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ink-muted);
		cursor: pointer;
		transition: color var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			color: var(--accent);
		}

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

		.done {
			display: none;
		}

		&.is-copied {
			color: var(--accent);

			.idle {
				display: none;
			}

			.done {
				display: inline;
			}
		}
	}

	.open {
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-micro);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--accent);
		text-decoration: none;
		white-space: nowrap;
		transition: opacity var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			opacity: 0.72;
		}

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

	.clients {
		display: grid;
		grid-template-columns: 1fr;
		gap: calc(115 * var(--scale));

		@media (min-width: 640px) {
			grid-template-columns: 1fr 1fr;
		}
	}

	.client {
		display: flex;
		align-items: center;
		gap: var(--space-rem-0-85);
		min-height: var(--space-64);
		padding: var(--text-tight) var(--space-rem-lg);
		border: 0;
		border-radius: var(--radius-compact);
		color: var(--on-accent);
		text-align: left;
		text-decoration: none;
		cursor: pointer;
		transition:
			transform var(--duration-fast) var(--ease-out),
			filter var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			filter: brightness(1.06);
			transform: translateY(calc(-1 * var(--space-1)));
		}

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

		&.is-on {
			box-shadow: 0 0 0 var(--space-2) var(--ink);
			filter: none;
			transform: none;
		}

		.logo {
			flex: 0 0 auto;
			width: var(--space-rem-1-55);
			height: var(--space-rem-1-55);
		}

		&.cursor {
			background: var(--mcp-cursor);
		}

		&.vscode {
			background: var(--mcp-vscode);
		}

		&.claude {
			background: var(--mcp-claude);
		}

		&.codex {
			background: var(--mcp-codex);
		}

		&.grok {
			background: var(--mcp-grok);
		}

		&.grokbot {
			background: var(--mcp-grokbot);
		}

		&.claude-desktop {
			background: var(--mcp-claude);
		}

		&.chatgpt {
			background: var(--mcp-chatgpt);
		}
	}

	.client-title {
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-metric);
		line-height: 1.2;
	}
}


/* ./components/get-app.css */
/* Root class matches filename: get-app.css → .get-app */

.get-app {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	overflow-x: clip;
	background: var(--color-bg);
	color: var(--ink);
	padding-block: var(--space-header-y);

	.inner {
		display: flex;
		flex-direction: column;
		flex: 1;
		width: min(100%, var(--size-page));
		margin-inline: auto;
		padding-inline: var(--space-page-x);
	}

	.stage {
		display: grid;
		flex: 1;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		align-items: center;
		align-content: center;
		column-gap: calc(480 * var(--scale));

		&.is-pending {
			grid-template-columns: 1fr;
			justify-items: center;
		}

		&.is-pending .default-skeleton {
			min-height: 0;
		}
	}

	.intro {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		min-width: 0;
	}

	.heading {
		margin-bottom: calc(400 * var(--scale));
	}

	.copy-link {
		display: inline;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		text-decoration: underline;
		text-underline-offset: 0.18em;
		cursor: pointer;
		transition: color var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			color: var(--accent);
		}
	}

	.qr {
		display: grid;
		justify-items: center;
		justify-self: end;
		gap: calc(200 * var(--scale));
		margin: 0;
		width: min(100%, calc(3200 * var(--scale)));
	}

	figcaption {
		margin: 2em 0 0;
		max-width: var(--measure-22);
		font-family: var(--font-body);
		font-size: clamp(var(--text-lead), 1.3vw, var(--space-rem-1-08));
		line-height: 1.4;
		text-align: center;
		color: var(--ink-muted);
	}

	.code {
		position: relative;
		width: 100%;
		aspect-ratio: 1;
		padding: calc(220 * var(--scale));
		background: var(--color-bg);
		border: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.12);
		border-radius: var(--radius-card);

		.matrix {
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 1 / 1;
		}

		.mark {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 26%;
			aspect-ratio: 1;
			translate: -50% -50%;
			overflow: hidden;
			border-radius: 22.5%;
			background: var(--color-bg);
			box-shadow: 0 0 0 0.38em var(--color-bg);
		}

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

	.app-store-cta {
		align-items: flex-start;
		width: min(100%, var(--measure-22));
		gap: calc(100 * var(--scale));
	}

	.actions {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: calc(200 * var(--scale));
		width: 100%;
	}

	.mail {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: calc(120 * var(--scale));
		width: 100%;
	}

	.turnstile {
		flex: 1 1 100%;
		min-height: 0;
		line-height: 0;
	}

	.field {
		flex: 1 1 var(--measure-10);
		min-width: 0;
	}

	.sr-only {
		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 input,
	.trap {
		width: 100%;
		min-height: var(--touch);
		padding-inline: var(--text-body);
		border: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.16);
		border-radius: var(--radius-pill);
		background: var(--flat-fill-opaque);
		color: var(--ink);
		caret-color: var(--accent);
		font-family: var(--font-body);
		font-size: var(--text-body);
		outline: none;
		box-shadow: 0 0 0 0 rgb(var(--color-accent-rgb) / 0);
		transition:
			border-color var(--duration-base) var(--ease-out),
			box-shadow var(--duration-base) var(--ease-out);
	}

	.field input:focus,
	.field input:focus-visible {
		outline: none;
		border-color: var(--accent);
		box-shadow: 0 0 0 var(--space-4) rgb(var(--color-accent-rgb) / 0.18);
	}

	.trap {
		position: absolute;
		left: var(--offscreen);
		width: var(--space-1);
		height: var(--space-1);
	}

	.field input::placeholder {
		color: var(--ink-muted);
	}

	.note {
		margin: 0;
		font-family: var(--font-body);
		font-size: clamp(var(--text-lead), 1.25vw, var(--text-price));
		line-height: var(--leading-body);
		color: var(--ink-muted);
	}

	.cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.4em;
		min-height: var(--touch);
		padding-inline: var(--space-rem-1-15);
		border: 0;
		border-radius: var(--radius-pill);
		background: var(--accent-fill);
		color: var(--on-accent);
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-body);
		text-decoration: none;
		cursor: pointer;
		transition: opacity var(--duration-fast) var(--ease-out);

		.out {
			flex: none;
			display: block;
			width: 1em;
			height: 1em;
			min-width: 1em;
			min-height: 1em;
			overflow: visible;
			transition: transform var(--duration-fast) var(--ease-out);
		}

		&:hover,
		&:focus-visible {
			opacity: 0.88;
		}

		&:hover .out,
		&:focus-visible .out {
			transform: translate(0.12em, -0.12em);
		}

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

	@media (max-width: 900px) {
		padding-block: var(--space-header-y);

		.stage {
			grid-template-columns: 1fr;
			row-gap: calc(560 * var(--scale));
		}

		.qr {
			justify-self: center;
			width: min(100%, calc(2800 * var(--scale)));
		}
	}

	@media (max-width: 480px) {
		.qr {
			width: min(100%, var(--measure-18));
		}

		.actions {
			width: 100%;
		}

		.mail .cta,
		.app-store-cta .pwa-cta.sm {
			width: 100%;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.field input,
		.copy-link,
		.cta {
			transition: none;
		}
	}
}


/* ./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/checkout.css */
/* Root class matches filename: checkout.css → .checkout */

.checkout {
	min-height: 100dvh;
	background: var(--color-bg);
	color: var(--ink);
	padding-block: var(--space-header-y) calc(1600 * var(--scale));

	.inner {
		width: min(100%, var(--size-page));
		margin-inline: auto;
		padding-inline: var(--space-page-x);
	}

	.layout {
		display: grid;
		gap: calc(720 * var(--scale));
		align-items: start;

		@media (min-width: 900px) {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
			column-gap: calc(640 * var(--scale));
		}
	}

	.intro {
		min-width: 0;
	}

	.eyebrow {
		margin: 0 var(--space-5) calc(200 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(115 * var(--scale));
		letter-spacing: calc(8 * var(--scale));
		text-transform: uppercase;
		color: var(--ink-muted);
	}

	.heading {
		max-width: none;
		margin-bottom: calc(320 * var(--scale));
	}

	.lede {
		max-width: var(--measure-34);
		margin: 0 0 calc(512 * var(--scale));
		font-family: var(--font-body);
		font-size: clamp(var(--space-rem-1-08), 1.55vw, var(--space-rem-1-22));
		line-height: 1.4;
		color: var(--ink-muted);
	}

	.lede.compact {
		margin: 0 0 calc(64 * var(--scale));
	}

	.features {
		margin: 0;
		padding: 0;
		list-style: none;
		display: grid;
		gap: calc(220 * var(--scale));
	}

	.features li {
		position: relative;
		padding-left: var(--space-rem-1-35);
		font-family: var(--font-body);
		font-size: clamp(var(--text-body), 1.4vw, var(--space-rem-1-12));
		line-height: 1.4;
		color: var(--ink);
	}

	.features li::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0.45em;
		width: var(--space-rem-0-45);
		height: var(--space-rem-0-45);
		border-radius: var(--radius-circle);
		background: var(--accent);
	}

	.features a {
		color: var(--accent);
		text-decoration: underline;
		text-underline-offset: 0.18em;
		text-decoration-thickness: var(--space-1);
		transition: opacity var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			opacity: 0.72;
		}
	}

	.see-more {
		display: none;
		align-items: center;
		justify-content: center;
		width: fit-content;
		margin-top: calc(280 * var(--scale));
		padding: 0;
		border: 0;
		background: transparent;
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-body);
		color: var(--accent);
		cursor: pointer;
		transition: opacity var(--duration-fast) var(--ease-out);

		&::after {
			content: '';
			width: 0.38em;
			height: 0.38em;
			margin-left: 0.45em;
			margin-top: -0.18em;
			border-right: var(--border-thick) solid currentColor;
			border-bottom: var(--border-thick) solid currentColor;
			transform: rotate(45deg);
		}

		&[aria-expanded='true']::after {
			margin-top: 0.12em;
			transform: rotate(-135deg);
		}

		&:hover,
		&:focus-visible {
			opacity: 0.72;
		}

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

	@media (max-width: 899px) {
		.features:not(.is-open) .more-mobile {
			display: none;
		}

		.see-more {
			display: flex;
			width: 100%;
		}
	}

	@media (min-width: 900px) {
		.features:not(.is-open) .more-desktop {
			display: none;
		}

		.see-more {
			display: flex;
		}
	}

	.offer {
		display: grid;
		gap: calc(200 * var(--scale));
		min-width: 0;
		align-content: start;

		&.is-pending {
			align-content: center;
			justify-items: center;
			min-height: var(--measure-28);
		}

		&.is-pending .default-skeleton {
			min-height: 0;
			width: auto;
		}
	}

	.board {
		display: grid;
		gap: calc(280 * var(--scale));
		padding: calc(380 * var(--scale));
		border: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.14);
		border-radius: var(--radius-bubble);
		background:
			radial-gradient(
				120% 80% at 0% 0%,
				rgb(var(--color-accent-rgb) / 0.08),
				transparent 55%
			),
			color-mix(in srgb, var(--flat-fill-opaque) 88%, transparent);
		box-shadow: 0 var(--space-18) var(--space-40)
			rgb(var(--color-ink-rgb) / 0.05);

		&.is-error {
			display: flex;
			flex-direction: column;
			min-height: var(--measure-15);
		}

		&.is-error .back {
			margin-top: auto;
			padding-top: calc(280 * var(--scale));
			font-family: var(--font-body);
			font-weight: var(--weight-medium);
			font-size: calc(200 * var(--scale));
			color: var(--ink);

			a {
				display: inline-flex;
				align-items: center;
				gap: 0.35em;
				min-height: var(--space-rem-1-5);
				color: inherit;
				text-decoration: none;
				transition: opacity var(--duration-fast) var(--ease-out);

				&:hover,
				&:focus-visible {
					opacity: 0.72;
				}

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

				&:hover .arrow,
				&:focus-visible .arrow {
					transform: translateX(-0.18em);
				}
			}

			.arrow {
				flex-shrink: 0;
				width: 0.85em;
				height: 0.85em;
				transition: transform var(--duration-fast) var(--ease-out);
			}
		}
	}

	.plans {
		margin: 0;
		padding: 0;
		list-style: none;
		display: grid;
		gap: calc(200 * var(--scale));
	}

	.plan {
		display: grid;
		gap: calc(80 * var(--scale));
		width: 100%;
		padding: calc(280 * var(--scale)) calc(320 * var(--scale));
		border: var(--border-thick) solid rgb(var(--color-ink-rgb) / 0.16);
		border-radius: var(--radius-field);
		background: var(--flat-fill-opaque);
		color: inherit;
		text-align: left;
		cursor: pointer;
		transition:
			border-color var(--duration-fast) var(--ease-out),
			box-shadow var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			border-color: rgb(var(--color-accent-rgb) / 0.45);
			outline: none;
		}

		&.is-selected {
			border-color: var(--ink);
			box-shadow: 0 0 0 var(--space-1) var(--ink);
		}
	}

	.plan-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-rem-0-75);
	}

	.plan-label {
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-price);
	}

	.badge {
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-dense);
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--accent);
		background: rgb(var(--color-accent-rgb) / 0.12);
		padding: var(--space-rem-0-22) var(--space-rem-0-5);
		border-radius: var(--radius-full);
	}

	.plan-price {
		display: flex;
		align-items: baseline;
		gap: var(--space-rem-0-4);
	}

	.plan-price-spinner {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		vertical-align: middle;
		color: var(--ink-muted);

		.wheel {
			position: relative;
			width: var(--space-14);
			height: var(--space-14);

			span {
				position: absolute;
				inset: 0;
				animation: default-skeleton-spoke 1s linear infinite;

				&::after {
					content: '';
					position: absolute;
					top: var(--hairline);
					left: calc(50% - var(--hairline));
					width: 1var (--space-8);
					height: var(--space-4);
					border-radius: var(--radius-full);
					background: currentColor;
				}
			}
		}
	}

	.stripe {
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: clamp(var(--space-rem-1-6), 3vw, var(--text-display-sm));
		letter-spacing: -0.03em;
	}

	.each {
		font-family: var(--font-body);
		color: var(--ink-muted);
		font-size: var(--text-lead);
	}

	.apple {
		font-family: var(--font-body);
		font-size: var(--text-label);
		color: var(--ink-muted);
		text-decoration: line-through;
	}

	.pay {
		min-height: var(--space-54);
		border: 0;
		border-radius: var(--radius-full);
		background: var(--ink);
		color: var(--color-bg);
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-metric);
		cursor: pointer;
		transition:
			transform var(--duration-fast) var(--ease-out),
			opacity var(--duration-fast) var(--ease-out);

		&:hover:not(:disabled),
		&:focus-visible:not(:disabled) {
			transform: translateY(calc(-1 * var(--space-1)));
			outline: none;
		}

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

	.status {
		margin: 0;
		font-family: var(--font-body);
		font-size: clamp(var(--space-rem-0-74), 1.5vw, var(--text-label));
		line-height: 1.4;
		color: var(--ink-muted);
		text-align: center;
	}

	.note {
		margin: 0;
		padding-inline: calc(115 * var(--scale));
		font-family: var(--font-body);
		font-size: var(--text-fine);
		line-height: 1.4;
		text-align: center;
		color: var(--ink-muted);
	}

	.auth-inline {
		display: grid;
		gap: calc(240 * var(--scale));
	}

	.auth-lede {
		margin: 0;
		font-family: var(--font-body);
		font-size: var(--text-metric);
		line-height: 1.45;
		color: var(--ink-muted);
	}

	.auth-actions {
		display: grid;
		gap: calc(120 * var(--scale));
	}

	.auth-apple,
	.auth-google {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-rem-0-55);
		min-height: var(--space-52);
		border-radius: var(--radius-full);
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-body);
		cursor: pointer;
		transition:
			transform var(--duration-fast) var(--ease-out),
			opacity var(--duration-fast) var(--ease-out);

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

		&:hover:not(.is-disabled),
		&:focus-visible:not(.is-disabled) {
			transform: translateY(calc(-1 * var(--space-1)));
			outline: none;
		}

		&.is-disabled {
			opacity: 0.45;
			cursor: default;
			pointer-events: none;
		}
	}

	.auth-google-gis {
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 1;
		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;
		}
	}

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

	.auth-apple {
		border: 0;
		background: var(--color-black);
		color: var(--on-accent);
	}

	.auth-google {
		border: var(--border-thick) solid rgb(var(--color-ink-rgb) / 0.22);
		background: var(--flat-fill-opaque);
		color: var(--ink);
	}

	.setup {
		gap: calc(360 * var(--scale));
	}

	.setup-back {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		width: fit-content;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-lead);
		color: var(--ink);
		cursor: pointer;
		transition: opacity var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			opacity: 0.72;
			outline: none;
		}

		.arrow {
			flex-shrink: 0;
		}

		.setup-back-style {
			color: var(--ink);
			font-weight: var(--weight-medium);
		}
	}

	.setup-fieldset {
		margin: 0;
		padding: 0;
		border: 0;
		min-width: 0;
	}

	.setup-legend,
	.setup-label {
		display: block;
		margin-bottom: calc(160 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(115 * var(--scale));
		letter-spacing: calc(6 * var(--scale));
		text-transform: uppercase;
		color: var(--ink-muted);
	}

	.setup-presets {
		margin: 0;
		padding: 0;
		list-style: none;
		display: grid;
		gap: calc(160 * var(--scale));
	}

	.setup-preset {
		display: grid;
		gap: calc(80 * var(--scale));
		width: 100%;
		padding: calc(260 * var(--scale)) calc(300 * var(--scale));
		border: var(--border-thick) solid rgb(var(--color-ink-rgb) / 0.16);
		border-radius: var(--radius-field);
		background: var(--flat-fill-opaque);
		color: inherit;
		text-align: left;
		cursor: pointer;
		transition:
			border-color var(--duration-fast) var(--ease-out),
			box-shadow var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			border-color: rgb(var(--color-accent-rgb) / 0.45);
			outline: none;
		}

		&.is-selected {
			border-color: var(--ink);
			box-shadow: 0 0 0 var(--space-1) var(--ink);
		}
	}

	.setup-preset-title {
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-price);
	}

	.setup-preset-blurb {
		font-family: var(--font-body);
		font-size: var(--text-lead);
		line-height: 1.4;
		color: var(--ink-muted);
	}

	.setup-preset-preview {
		display: grid;
		gap: calc(160 * var(--scale));
		margin-top: calc(80 * var(--scale));
		min-width: 0;

		&.is-loading {
			display: flex;
			align-items: center;
			gap: var(--space-rem-0-55);
			min-height: var(--space-28);
		}
	}

	.setup-preset-spinner {
		width: var(--space-14);
		height: var(--space-14);
		border: var(--space-2) solid rgb(var(--color-ink-rgb) / 0.18);
		border-top-color: var(--accent);
		border-radius: var(--radius-circle);
		animation: setup-preset-spin 0.7s linear infinite;

		@media (prefers-reduced-motion: reduce) {
			animation: none;
			border-top-color: rgb(var(--color-ink-rgb) / 0.4);
		}
	}

	@keyframes setup-preset-spin {
		to {
			transform: rotate(360deg);
		}
	}

	.setup-preset-loading {
		font-family: var(--font-body);
		font-size: var(--text-tight);
		color: var(--ink-muted);
	}

	.setup-preset-coins {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-6);
	}

	.setup-preset-coin {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--space-28);
		height: var(--space-28);
		border-radius: var(--radius-circle);
		background: rgb(var(--color-ink-rgb) / 0.06);
		overflow: hidden;
		object-fit: cover;
		font-family: var(--font-body);
		font-size: var(--text-kicker);
		font-weight: var(--weight-bold);
		letter-spacing: 0.02em;
		line-height: 1;
		color: var(--ink-muted);
		text-transform: uppercase;
		user-select: none;

		&.is-image {
			display: block;
		}
	}

	.setup-preset-coin-more {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--space-28);
		height: var(--space-28);
		border-radius: var(--radius-circle);
		background: rgb(var(--color-ink-rgb) / 0.08);
		font-family: var(--font-body);
		font-size: var(--text-dense);
		font-weight: var(--weight-bold);
		color: var(--ink-muted);
	}

	.setup-preset-bars {
		display: flex;
		align-items: flex-end;
		gap: var(--border-thick);
		height: var(--space-52);
		width: 100%;
	}

	.setup-preset-bar {
		flex: 1 1 0;
		min-width: var(--space-2);
		border-radius: var(--space-2);

		&.is-up {
			background: var(--profit);
		}

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

	.setup-preset-stats {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(var(--space-rem-4-5), 1fr));
		gap: calc(120 * var(--scale));
		padding: calc(160 * var(--scale)) calc(180 * var(--scale));
		border-radius: var(--radius-control);
		background: rgb(var(--color-ink-rgb) / 0.05);
	}

	.setup-preset-stat {
		display: grid;
		gap: var(--space-2);
		min-width: 0;
	}

	.setup-preset-stat-label {
		font-family: var(--font-body);
		font-size: var(--text-fine);
		color: var(--ink-muted);
		white-space: nowrap;
	}

	.setup-preset-stat-value {
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-price);
		font-variant-numeric: tabular-nums;
		letter-spacing: -0.02em;
		color: var(--ink);

		&.is-up {
			color: var(--accent);
		}

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

	.setup-field {
		display: grid;
		gap: calc(120 * var(--scale));
		min-width: 0;
	}

	.setup-field .step-slider {
		width: 100%;
	}

	.setup-budget-value {
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-hero);
		letter-spacing: -0.02em;
	}

	.setup-username {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: stretch;
		border: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.22);
		border-radius: var(--radius-control);
		background: var(--color-bg);
		overflow: hidden;

		&:focus-within {
			border-color: var(--accent);
			box-shadow: 0 0 0 var(--space-4) rgb(var(--color-accent-rgb) / 0.16);
		}

		input {
			min-height: var(--space-52);
			min-width: 0;
			padding: var(--space-rem-md) var(--text-body);
			border: 0;
			background: transparent;
			color: var(--ink);
			font-family: var(--font-body);
			font-size: var(--text-metric);

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

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

	.setup-domain {
		display: flex;
		align-items: center;
		padding-inline: var(--space-rem-0-85);
		border-left: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.14);
		font-family: var(--font-body);
		font-size: var(--text-lead);
		color: var(--ink-muted);
		white-space: nowrap;
	}

	.setup-hint {
		min-height: 1.2em;
		font-family: var(--font-body);
		font-size: var(--text-label);
		color: var(--ink-muted);
	}

	.setup-ready-heading {
		margin: 0 0 calc(240 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: clamp(var(--space-rem-1-4), 2.4vw, var(--space-rem-1-8));
		letter-spacing: -0.02em;
	}

	.setup-creds {
		display: grid;
		gap: calc(280 * var(--scale));
		margin: calc(360 * var(--scale)) 0 calc(400 * var(--scale));
	}

	.setup-cred {
		display: grid;
		gap: calc(80 * var(--scale));
		min-width: 0;

		dt {
			margin: 0;
			font-family: var(--font-body);
			font-weight: var(--weight-medium);
			font-size: var(--text-dense);
			letter-spacing: 0.08em;
			text-transform: uppercase;
			color: var(--ink-muted);
		}

		dd {
			display: flex;
			align-items: center;
			gap: calc(160 * var(--scale));
			margin: 0;
			min-width: 0;
		}

		code {
			flex: 1 1 auto;
			min-width: 0;
			overflow-wrap: anywhere;
			font-family: var(
				--font-mono,
				ui-monospace,
				SFMono-Regular,
				Menlo,
				monospace
			);
			font-size: var(--text-lead);
			color: var(--ink);

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

	.setup-cred-copy {
		flex: 0 0 auto;
		padding: 0;
		border: 0;
		background: transparent;
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-micro);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ink-muted);
		cursor: pointer;
		transition: color var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible,
		&.is-copied {
			color: var(--accent);
		}

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

	.setup-help-heading {
		margin: 0 0 calc(32 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-dense);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ink-muted);
	}

	.setup-help {
		display: grid;
		gap: calc(140 * var(--scale));
		margin: 0;
		padding: 0;
		list-style: none;

		a {
			color: var(--ink);
			text-decoration: underline;
			text-underline-offset: 0.18em;
			transition: color var(--duration-fast) var(--ease-out);

			&:hover,
			&:focus-visible {
				color: var(--accent);
			}
		}
	}

	.setup-ready-links {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: calc(280 * var(--scale)) calc(400 * var(--scale));
		margin: calc(360 * var(--scale)) 0 0;
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-label);
	}

	.setup-ready-portfolio {
		color: var(--accent);
		text-decoration: none;

		&:hover,
		&:focus-visible {
			text-decoration: underline;
			text-underline-offset: 0.18em;
		}
	}

	.setup-ready-mcp {
		color: var(--ink-muted);
		text-decoration: underline;
		text-underline-offset: 0.18em;

		&:hover,
		&:focus-visible {
			color: var(--accent);
		}
	}

	.setup-provision {
		gap: calc(220 * var(--scale));
		justify-items: center;
		text-align: center;
	}

	.setup-provision-percent {
		margin: 0;
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: var(--text-display-sm);
		letter-spacing: -0.03em;
		font-variant-numeric: tabular-nums;
	}

	.setup-provision-bar {
		width: min(100%, var(--measure-16));
		height: var(--space-8);
		border-radius: var(--radius-full);
		background: rgb(var(--color-ink-rgb) / 0.1);
		overflow: hidden;
	}

	.setup-provision-fill {
		display: block;
		height: 100%;
		border-radius: inherit;
		background: var(--accent);
		transition: width 0.45s var(--ease-out);
	}
}


/* ./components/checkout-sheet.css */
/* Root class matches filename: checkout-sheet.css → .checkout-sheet */
/* Liquid-glass sheet chrome — frosted panel only, Stripe form stays transparent. */

.checkout-sheet {
	--sheet-ease-enter: var(--ease-enter);
	--sheet-ease-leave: var(--ease-leave);
	--sheet-radius: var(--space-rem-1-35);
	--sheet-gutter: var(--space-0);
	--sheet-inset-bottom: var(--space-0);
	--sheet-shadow:
		0 var(--space-22) var(--space-48) rgb(0 0 0 / 0.14),
		0 var(--space-4) var(--space-14) var(--black-06),
		0 0 0 var(--hairline) rgb(0 0 0 / 0.04);

	position: fixed;
	inset: 0;
	z-index: var(--z-sheet);
	color-scheme: light dark;
	pointer-events: none;

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

	.checkout-sheet-backdrop {
		position: absolute;
		inset: 0;
		border: 0;
		padding: 0;
		margin: 0;
		cursor: pointer;
		background: var(--backdrop-bg);
		backdrop-filter: var(--backdrop-filter);
		-webkit-backdrop-filter: var(--backdrop-filter);
		opacity: 0;
		transition: opacity var(--duration-leave) var(--sheet-ease-leave);

		.is-open & {
			opacity: 1;
			transition: opacity var(--duration-enter) var(--sheet-ease-enter);
		}
	}

	.checkout-sheet-panel {
		position: absolute;
		left: var(--sheet-gutter);
		right: var(--sheet-gutter);
		bottom: calc(-100% - var(--sheet-inset-bottom));
		display: flex;
		flex-direction: column;
		width: auto;
		/* svh = Safari chrome visible. dvh draws the Subscribe button under the bar. */
		height: 100svh;
		max-height: 100svh;
		overflow: hidden;
		color-scheme: light dark;
		border: var(--space-1) solid var(--glass-border);
		border-bottom: 0;
		border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
		box-shadow:
			var(--sheet-shadow),
			inset 0 var(--space-1) 0 var(--glass-highlight),
			inset 0 calc(-1 * var(--hairline)) 0 rgb(255 255 255 / 0.34);
		transition: bottom 520ms var(--sheet-ease-leave);

		.is-open & {
			bottom: var(--sheet-inset-bottom);
			transition: bottom var(--duration-enter) var(--sheet-ease-enter);
		}
	}

	.checkout-sheet-glass {
		position: absolute;
		inset: 0;
		z-index: 0;
		border-radius: inherit;
		overflow: hidden;
		pointer-events: none;
		background: var(--glass-bg);
		backdrop-filter: var(--glass-filter);
		-webkit-backdrop-filter: var(--glass-filter);
		-webkit-mask-image: linear-gradient(#fff 0 0);
		mask-image: linear-gradient(#fff 0 0);

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			border-radius: inherit;
			background: linear-gradient(
				180deg,
				rgb(255 255 255 / 0.52) 0%,
				rgb(255 255 255 / 0.2) 40%,
				rgb(250 252 250 / 0.32) 100%
			);
			box-shadow: inset 0 0 0 var(--space-1) rgb(255 255 255 / 0.58);
		}

		&::after {
			content: '';
			position: absolute;
			inset: 0;
			border-radius: inherit;
			background: linear-gradient(
				135deg,
				color-mix(in srgb, var(--accent) 6%, transparent) 0%,
				transparent 42%,
				var(--white-08) 100%
			);
			pointer-events: none;
		}

		.shine {
			position: absolute;
			inset: -40% -20%;
			background: linear-gradient(
				118deg,
				transparent 40%,
				var(--white-12) 48%,
				rgb(255 255 255 / 0.42) 50.5%,
				var(--white-12) 53%,
				transparent 62%
			);
			transform: translateX(-40%) rotate(2deg);
			animation: checkout-sheet-shine 8s var(--ease-out) infinite;
			filter: blur(var(--blur-10));
			opacity: 0.78;
		}

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

	.checkout-sheet-chrome {
		position: relative;
		z-index: 1;
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: flex-end;
		padding: var(--space-rem-0-45) var(--space-rem-0-75) 0;
	}

	.checkout-sheet-close {
		min-height: var(--touch);
		padding: var(--space-rem-0-35) var(--space-rem-0-65);
		border: 0;
		background: transparent;
		color: var(--ink-muted);
		font: inherit;
		font-size: var(--text-lead);
		cursor: pointer;
	}

	.checkout-sheet-body {
		position: relative;
		z-index: 1;
		flex: 1;
		min-height: 0;
		display: flex;
		flex-direction: column;
		padding: var(--space-rem-0-35) var(--space-rem-0-75) var(--space-rem-0-5);
		overflow: auto;
	}

	.stripe-embed {
		display: flex;
		flex: 1;
		flex-direction: column;
		width: 100%;
		min-height: 0;
		background: transparent;

		> * {
			flex: 1;
			min-height: 0;
		}
	}
}

@keyframes checkout-sheet-shine {
	0% {
		transform: translateX(-45%) rotate(2deg);
	}
	55%,
	100% {
		transform: translateX(45%) rotate(2deg);
	}
}

@media (prefers-color-scheme: dark) {
	.checkout-sheet {
		--sheet-shadow:
			0 var(--space-22) var(--space-52) rgb(0 0 0 / 0.58),
			0 var(--space-4) var(--space-12) var(--black-32),
			0 0 0 var(--hairline) rgb(0 0 0 / 0.4);

		.checkout-sheet-panel {
			box-shadow:
				var(--sheet-shadow),
				inset 0 var(--space-1) 0 var(--glass-highlight),
				inset 0 calc(-1 * var(--hairline)) 0 rgb(0 0 0 / 0.28);
		}

		.checkout-sheet-glass {
			&::before {
				background: linear-gradient(
					180deg,
					rgb(255 255 255 / 0.04) 0%,
					rgb(255 255 255 / 0.01) 36%,
					rgb(0 0 0 / 0.14) 100%
				);
				box-shadow: inset 0 0 0 var(--space-1) rgb(255 255 255 / 0.05);
			}

			&::after {
				background: linear-gradient(
					135deg,
					color-mix(in srgb, var(--accent) 3%, transparent) 0%,
					transparent 52%,
					var(--black-10) 100%
				);
			}

			.shine {
				background: linear-gradient(
					118deg,
					transparent 40%,
					rgb(255 255 255 / 0.03) 48%,
					var(--white-08) 50.5%,
					rgb(255 255 255 / 0.03) 53%,
					transparent 62%
				);
				filter: blur(var(--blur-24));
				opacity: 0.16;
			}
		}
	}
}

@media (min-width: 900px) {
	.checkout-sheet {
		--sheet-gutter: 0;
		--sheet-inset-bottom: max(var(--text-body), var(--safe-bottom));
		--sheet-width: min(var(--measure-28), calc(100vw - var(--space-rem-2-5)));
	}

	.checkout-sheet .checkout-sheet-panel {
		left: 50%;
		right: auto;
		width: var(--sheet-width);
		height: auto;
		max-height: min(88dvh, var(--measure-54));
		margin-left: calc(var(--sheet-width) / -2);
		border-bottom: var(--space-1) solid var(--glass-border);
		border-radius: var(--sheet-radius);
	}

	.checkout-sheet .checkout-sheet-chrome {
		display: none;
	}

	.checkout-sheet .checkout-sheet-body {
		padding: var(--space-rem-1-2) var(--space-rem-1-5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.checkout-sheet {
		.checkout-sheet-backdrop,
		.checkout-sheet-panel {
			transition-duration: 200ms;
		}

		.checkout-sheet-glass .shine {
			animation: none;
			opacity: 0;
		}
	}
}


/* ./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;
}


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

.compare {
	--compare-table-max: min(
		calc(100vw - 2 * var(--space-page-x)),
		var(--measure-112)
	);
	--compare-table-half: min(
		calc(50vw - var(--space-page-x)),
		var(--measure-56)
	);
	min-height: 100dvh;
	overflow-x: clip;
	background: var(--color-bg);
	color: var(--ink);
	padding-block: var(--space-header-y) calc(1600 * var(--scale));

	.inner {
		width: min(100%, var(--size-page));
		margin-inline: auto;
		padding-inline: var(--space-page-x);
	}

	.intro {
		margin-bottom: calc(720 * var(--scale));
		padding-bottom: calc(560 * var(--scale));
		border-bottom: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.12);
	}

	.intro .eyebrow,
	.compare-cta > .eyebrow {
		display: inline-flex;
		align-items: center;
		gap: calc(90 * var(--scale));
		margin-bottom: calc(140 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(115 * var(--scale));
		letter-spacing: calc(8 * var(--scale));
		text-transform: uppercase;
		color: var(--ink-muted);
	}

	.heading {
		max-width: none;
		margin-bottom: calc(280 * var(--scale));
	}

	.intro .title {
		margin-bottom: calc(280 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: clamp(var(--space-rem-1-75), 4vw, var(--space-rem-3));
		line-height: 1.1;
		letter-spacing: -0.03em;
		color: var(--ink);

		.accent {
			font-family: var(--font-body);
			font-style: normal;
			font-weight: var(--weight-semibold);
			color: var(--accent);
		}
	}

	.lede {
		max-width: var(--measure-40);
		font-family: var(--font-body);
		font-size: clamp(var(--space-rem-1-08), 1.55vw, var(--space-rem-1-22));
		line-height: 1.45;
		color: var(--ink-muted);
	}

	.intro .checked {
		margin-top: calc(200 * var(--scale));
	}

	.checked {
		margin-top: calc(480 * var(--scale));
		font-family: var(--font-body);
		font-size: calc(115 * var(--scale));
		letter-spacing: calc(4 * var(--scale));
		text-transform: uppercase;
		color: var(--ink-muted);
	}

	.block {
		margin-top: calc(720 * var(--scale));
	}

	.axis-grid {
		margin-bottom: calc(480 * var(--scale));

		h2 {
			margin-bottom: calc(280 * var(--scale));
			font-family: var(--font-body);
			font-weight: var(--weight-medium);
			font-size: clamp(var(--space-rem-1-5), 2.5vw, var(--space-rem-1-95));
			letter-spacing: -0.03em;
		}
	}

	.cards {
		margin-top: calc(900 * var(--scale));

		h2 {
			margin-bottom: calc(360 * var(--scale));
			font-family: var(--font-body);
			font-weight: var(--weight-medium);
			font-size: clamp(var(--space-rem-1-5), 2.5vw, var(--space-rem-1-95));
			letter-spacing: -0.03em;
		}

		> ul {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: calc(240 * var(--scale));
		}
	}

	.card {
		display: flex;
		flex-direction: column;
		gap: calc(140 * var(--scale));
		height: 100%;
		padding: calc(320 * var(--scale));
		border: var(--space-1) solid var(--flat-border);
		border-radius: calc(115 * var(--scale));
		background: var(--flat-fill);
		transition:
			border-color var(--duration-fast) var(--ease-out),
			color var(--duration-fast) var(--ease-out);

		&:hover,
		&:focus-visible {
			border-color: var(--accent);

			.more {
				opacity: 0.72;
			}

			.arrow {
				transform: translateX(0.18em);
			}
		}

		.card-vs {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			gap: calc(80 * var(--scale));
			font-family: var(--font-body);
			font-weight: var(--weight-medium);
			font-size: calc(180 * var(--scale));
			letter-spacing: calc(-4 * var(--scale));
			white-space: nowrap;

			.mark {
				width: 1.2em;
				height: 1.2em;
			}

			.vs {
				font-size: 0.62em;
				letter-spacing: calc(6 * var(--scale));
				text-transform: uppercase;
				color: var(--ink-muted);
			}
		}

		p {
			font-family: var(--font-body);
			font-size: calc(200 * var(--scale));
			line-height: 1.45;
			color: var(--ink-muted);
		}
	}

	.more {
		display: inline-flex;
		align-items: center;
		gap: 0.28em;
		margin-top: auto;
		padding-top: calc(115 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(180 * var(--scale));
		color: var(--accent);
		white-space: nowrap;
	}

	.arrow {
		flex-shrink: 0;
		width: 0.85em;
		height: 0.85em;
		transition: transform var(--duration-fast) var(--ease-out);
	}

	.method {
		margin-top: calc(900 * var(--scale));
		max-width: var(--measure-40);
	}

	.marks {
		margin-top: calc(360 * var(--scale));

		.note {
			max-width: var(--measure-44);
			font-family: var(--font-body);
			font-size: max(var(--text-dense), calc(140 * var(--scale)));
			letter-spacing: calc(4 * var(--scale));
			text-transform: uppercase;
			line-height: 1.5;
			color: var(--ink-muted);

			span {
				display: block;
			}

			span + span {
				margin-top: 0.35em;
			}

			strong {
				font-weight: var(--weight-medium);
				color: var(--ink);
			}
		}

		ul {
			display: none;
		}
	}

	.claim-list {
		margin: 0 0 1.5em;
		padding-left: 1.4em;
		list-style: disc;

		li {
			margin: 0.7em 0;
			padding-left: 0.25em;
			line-height: 1.6;
		}
	}

	.footnotes {
		margin-left: 0.15em;
		font-family: var(--font-body);
		font-size: 0.72em;
		font-weight: var(--weight-medium);
		letter-spacing: 0;

		a {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 1.35em;
			min-height: 1.35em;
			padding-inline: 0.2em;
			color: var(--accent);
			text-decoration: none;
		}
	}

	.compare-faq {
		margin-top: calc(720 * var(--scale));

		h2 {
			margin-bottom: calc(280 * var(--scale));
			font-family: var(--font-body);
			font-weight: var(--weight-medium);
			font-size: clamp(var(--space-rem-1-5), 2.5vw, var(--space-rem-1-95));
			letter-spacing: -0.03em;
		}

		.faq-accordion {
			width: 100%;
			margin-inline: 0;
		}
	}

	.adjacent {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: calc(240 * var(--scale));
		margin-top: calc(900 * var(--scale));
		padding-top: calc(480 * var(--scale));
		border-top: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.12);
	}

	.adjacent-link {
		display: flex;
		flex-direction: column;
		gap: calc(60 * var(--scale));
		min-width: 0;
		transition: color var(--duration-fast) var(--ease-out);

		&.next {
			text-align: right;
			justify-self: end;
		}

		.label {
			font-family: var(--font-body);
			font-size: calc(140 * var(--scale));
			letter-spacing: calc(6 * var(--scale));
			text-transform: uppercase;
			color: var(--ink-muted);
		}

		.question {
			font-family: var(--font-body);
			font-weight: var(--weight-medium);
			font-size: calc(240 * var(--scale));
			line-height: 1.15;
			letter-spacing: calc(-12 * var(--scale));
		}

		&:hover,
		&:focus-visible {
			color: var(--accent);
		}
	}

	@media (max-width: 900px) {
		padding-block: var(--space-header-y) calc(1200 * var(--scale));

		.cards > ul {
			grid-template-columns: 1fr;
		}

		.adjacent {
			grid-template-columns: 1fr;
		}

		.adjacent-link.next {
			text-align: left;
			justify-self: start;
		}

		.marks {
			margin-top: var(--space-rem-1-35);

			.note {
				display: none;
			}

			ul {
				display: flex;
				flex-direction: column;
				gap: var(--space-rem-0-45);
			}

			li {
				display: grid;
				grid-template-columns: var(--measure-6-25) 1fr;
				align-items: center;
				column-gap: var(--space-rem-0-75);
			}

			.score {
				width: 100%;
				justify-content: center;
			}

			p {
				margin: 0;
				font-family: var(--font-body);
				font-size: var(--text-lead);
				line-height: 1.4;
				color: var(--ink-muted);
				text-transform: none;
				letter-spacing: 0;
			}
		}
	}

	@media (min-width: 600px) and (max-width: 900px) {
		.marks ul {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: var(--space-rem-1-25);
		}

		.marks li {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--space-rem-0-55);
			text-align: center;
		}

		.marks .score {
			width: auto;
		}
	}
}

.compare-matrix-wrap,
.axis-table-wrap {
	isolation: isolate;
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden;
	padding-block: calc(115 * var(--scale));
	-webkit-overflow-scrolling: touch;
}

.compare-matrix-wrap {
	--compare-ours-outset: max(var(--space-rem-0-9), calc(200 * var(--scale)));
	--compare-ours-pop: max(var(--space-rem-0-75), calc(170 * var(--scale)));
	--compare-label-w: var(--measure-11-5);
	display: grid;
	grid-template-columns: var(--compare-label-w) repeat(6, minmax(0, 1fr));
	align-items: stretch;
	width: var(--compare-table-max);
	max-width: none;
	margin-left: calc(50% - var(--compare-table-half));
	padding: var(--compare-ours-outset);
	overflow: visible;

	.ours-card {
		grid-column: 7;
		grid-row: 1;
		margin-block: calc(-1 * var(--compare-ours-pop)) var(--space-rem-1-2);
		margin-inline: calc(-1 * var(--compare-ours-pop));
		border-radius: calc(200 * var(--scale));
		background: linear-gradient(
			to top,
			color-mix(in srgb, var(--flat-fill-opaque) 78%, var(--accent)),
			color-mix(in srgb, var(--flat-fill-opaque) 91%, var(--accent)) 42%,
			var(--flat-fill-opaque)
		);
		box-shadow:
			0 0 0 var(--space-1) rgb(var(--color-ink-rgb) / 0.05),
			0 var(--space-1) var(--space-1) -var(--hairline)
				rgb(var(--color-ink-rgb) / 0.05),
			0 var(--space-3) var(--space-3) -var(--border-thick)
				rgb(var(--color-ink-rgb) / 0.05),
			0 var(--space-6) var(--space-6) calc(-1 * var(--space-3))
				rgb(var(--color-ink-rgb) / 0.05),
			0 var(--space-12) var(--space-12) calc(-1 * var(--space-6))
				rgb(var(--color-ink-rgb) / 0.04),
			0 var(--space-24) var(--space-24) calc(-1 * var(--space-12))
				rgb(var(--color-ink-rgb) / 0.04);
		pointer-events: none;
	}

	.compare-matrix {
		grid-column: 1 / -1;
		grid-row: 1;
		position: relative;
		z-index: 1;

		caption {
			padding-top: calc(280 * var(--scale));
		}
	}
}

.axis-table-wrap {
	--compare-leaf-bleed: max(var(--space-rem-0-75), calc(180 * var(--scale)));
	width: calc(100% + 2 * var(--compare-leaf-bleed));
	max-width: none;
	margin-inline: calc(-1 * var(--compare-leaf-bleed));
}

.compare-matrix,
.axis-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-family: var(--font-body);
	font-size: max(var(--text-lead), calc(190 * var(--scale)));
	line-height: 1.4;

	caption {
		caption-side: bottom;
		padding-top: calc(115 * var(--scale));
		text-align: left;
		font-family: var(--font-body);
		font-size: max(var(--text-dense), calc(110 * var(--scale)));
		letter-spacing: calc(4 * var(--scale));
		text-transform: uppercase;
		color: var(--ink-muted);
	}

	th,
	td {
		padding: calc(200 * var(--scale)) calc(115 * var(--scale));
		border-bottom: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.12);
		vertical-align: top;
		text-align: left;
	}

	thead th {
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: max(var(--text-tiny), calc(115 * var(--scale)));
		letter-spacing: calc(6 * var(--scale));
		text-transform: uppercase;
		color: var(--ink-muted);
		white-space: nowrap;
		vertical-align: middle;
	}

	.col-link {
		display: inline-flex;
		align-items: center;
		gap: 0.22em;
		color: inherit;
		text-decoration: none;
		transition: color var(--duration-fast) var(--ease-out);

		.arrow {
			width: 0.85em;
			height: 0.85em;
			opacity: 0.38;
			transform: translateX(-0.15em);
			transition:
				transform var(--duration-base) var(--ease-out),
				opacity var(--duration-fast) var(--ease-out);
		}

		&:hover,
		&:focus-visible {
			color: var(--accent);

			.arrow {
				opacity: 1;
				transform: translateX(0.1em);
			}
		}

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

	tbody th {
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: max(var(--text-lead), calc(200 * var(--scale)));
		letter-spacing: calc(-6 * var(--scale));
		min-width: calc(1800 * var(--scale));
	}

	.axis-table thead th:not(:first-child),
	.axis-table td {
		min-width: var(--measure-8-75);
	}

	.cell-brand {
		display: none;
	}

	a {
		color: var(--accent);
	}

	.ours {
		position: relative;
		z-index: 1;
		background: transparent;
	}

	tbody tr:last-child .ours {
		border-bottom: 0;

		&::before {
			content: '';
			position: absolute;
			z-index: -1;
			pointer-events: none;
			inset-inline: calc(40 * var(--scale));
			bottom: 0;
			height: 200vh;
			border-radius: calc(115 * var(--scale));
			background: linear-gradient(
				to top,
				rgb(var(--color-accent-rgb) / 0.2),
				rgb(var(--color-accent-rgb) / 0.08) 42%,
				rgb(var(--color-accent-rgb) / 0.035)
			);
		}
	}
}

.compare-matrix tbody tr:last-child th,
.compare-matrix tbody tr:last-child td {
	border-bottom: 0;
}

.compare-matrix tbody tr:last-child .ours::before {
	content: none;
}

.axis-table .ours {
	padding-inline: calc(280 * var(--scale));
}

.compare-matrix {
	table-layout: fixed;
	width: 100%;

	tbody th,
	thead th:first-child {
		width: var(--compare-label-w);
		min-width: 0;
	}

	thead th:not(:first-child),
	td {
		min-width: 0;
	}

	thead th:nth-last-child(2),
	td:nth-last-child(2) {
		padding-inline-end: calc(
			160 * var(--scale) + var(--compare-ours-pop) + var(--space-rem-0-2)
		);
	}

	.col-link {
		position: relative;
		max-width: 100%;
		padding-inline-end: 1.2em;
		vertical-align: middle;

		.arrow {
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
		}

		&:hover .arrow,
		&:focus-visible .arrow {
			transform: translate(0.1em, -50%);
		}
	}

	.axis-label {
		max-width: none;
	}
}

.axis-label {
	display: block;
	max-width: var(--measure-12);
}

.cell-copy {
	margin-top: calc(80 * var(--scale));
	color: var(--ink-muted);
	font-size: max(var(--text-subhead), calc(170 * var(--scale)));
	line-height: 1.45;
}

@media (max-width: 1280px) and (min-width: 901px) {
	.compare-matrix-wrap {
		--compare-label-w: var(--measure-9-5);
	}

	.compare-matrix {
		th,
		td {
			padding: calc(115 * var(--scale)) calc(100 * var(--scale));
		}

		thead th:nth-last-child(2),
		td:nth-last-child(2) {
			padding-inline-end: calc(
				100 * var(--scale) + var(--compare-ours-pop) + var(--space-rem-0-2)
			);
		}

		thead th {
			letter-spacing: calc(2 * var(--scale));
			font-size: max(var(--text-kicker), calc(140 * var(--scale)));
		}

		tbody th {
			width: var(--compare-label-w);
			font-size: max(var(--text-note), calc(175 * var(--scale)));
		}

		.cell-copy {
			font-size: max(var(--text-fine), calc(150 * var(--scale)));
		}

		.compare-brand .mark {
			width: 1em;
			height: 1em;
		}
	}
}

.score {
	display: inline-flex;
	align-items: center;
	padding: 0.15em 0.55em;
	border-radius: var(--radius-full);
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: max(var(--text-micro), calc(140 * var(--scale)));
	letter-spacing: calc(4 * var(--scale));
	text-transform: uppercase;

	&.yes {
		background: var(--accent-fill);
		color: var(--on-accent);
	}

	&.partial {
		background: var(--score-partial-fill);
		color: var(--score-partial-ink);
	}

	&.no {
		background: var(--score-fail-fill);
		color: var(--score-fail-ink);
	}
}

@media (max-width: 900px) {
	.compare-matrix-wrap,
	.axis-table-wrap {
		display: block;
		width: 100%;
		margin-inline: 0;
		overflow: visible;
		padding-inline: 0;
		padding-block: 0;
	}

	.compare-matrix-wrap .ours-card {
		display: none;
	}

	.compare-matrix {
		min-width: 0;
	}

	.compare-matrix,
	.axis-table {
		display: block;
		width: 100%;

		caption {
			display: block;
			width: 100%;
			max-width: none;
			padding: 0 0 var(--text-body);
			line-height: 1.45;
			text-align: center;
		}

		thead {
			display: none;
		}

		tbody {
			display: flex;
			flex-direction: column;
			gap: var(--text-body);
		}

		tr {
			display: flex;
			flex-direction: column;
			padding: var(--space-rem-1) var(--space-rem-0-7) var(--space-rem-0-35);
			border: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.12);
			border-radius: calc(115 * var(--scale));
			background: var(--color-bg);
		}

		th,
		td {
			padding: 0;
			border-bottom: 0;
			min-width: 0;
		}

		tbody th {
			margin-bottom: var(--space-rem-0-15);
			padding-bottom: var(--space-rem-0-7);
			border-bottom: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.12);
			font-size: var(--text-price);
			letter-spacing: -0.03em;
		}

		td {
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			grid-template-areas:
				'brand score'
				'copy copy';
			align-items: center;
			gap: var(--space-rem-0-35) var(--space-rem-0-75);
			padding: var(--space-rem-0-85) 0;
			border-top: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.08);
		}

		td:first-of-type {
			border-top: 0;
		}

		td:nth-last-child(2) {
			padding-inline-end: 0;
		}

		.cell-brand {
			display: inline-flex;
			grid-area: brand;
			min-width: 0;
			font-family: var(--font-body);
			font-weight: var(--weight-medium);
			font-size: var(--text-note);
			letter-spacing: 0.04em;
			text-transform: uppercase;
			color: var(--ink);
		}

		.score {
			grid-area: score;
			justify-self: end;
		}

		.cell-copy {
			grid-area: copy;
			margin-top: 0;
		}

		.ours {
			z-index: auto;
			margin-inline: var(--space-rem-neg-0-45);
			margin-bottom: var(--space-rem-neg-0-07);
			padding: var(--space-rem-0-75) var(--space-rem-0-45);
			border-radius: calc(120 * var(--scale));
			background: rgb(var(--color-accent-rgb) / 0.08);
			border-bottom-color: transparent;
		}

		tbody tr:last-child .ours::before {
			content: none;
		}
	}

	.axis-label {
		max-width: none;
	}
}

.compare-sources {
	margin-top: calc(900 * var(--scale));
	padding-top: calc(480 * var(--scale));
	border-top: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.12);

	h2 {
		margin-bottom: calc(115 * var(--scale));
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: clamp(var(--space-rem-1-5), 2.5vw, var(--space-rem-1-95));
		letter-spacing: -0.03em;
	}

	.lede {
		margin-bottom: calc(280 * var(--scale));
		max-width: var(--measure-40);
		font-family: var(--font-body);
		font-size: clamp(var(--text-metric), 1.4vw, var(--space-rem-1-12));
		line-height: 1.5;
		color: var(--ink-muted);
	}

	ol {
		display: flex;
		flex-direction: column;
		gap: calc(120 * var(--scale));
	}

	li {
		display: flex;
		gap: 0.5em;
		font-family: var(--font-body);
		font-size: clamp(var(--text-compact), 1.3vw, var(--space-rem-1-08));
		line-height: 1.45;
		scroll-margin-top: var(--space-rem-5);

		&[hidden] {
			display: none;
		}

		&:target {
			margin-inline: var(--space-rem-neg-0-4);
			padding-inline: var(--space-rem-0-4);
			border-radius: var(--space-rem-0-35);
			background: rgb(var(--color-accent-rgb) / 0.08);
		}
	}

	.toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		margin-top: calc(280 * var(--scale));
		padding: 0;
		border: 0;
		background: transparent;
		font-family: var(--font-body);
		font-weight: var(--weight-medium);
		font-size: calc(180 * var(--scale));
		color: var(--accent);
		cursor: pointer;
		transition: opacity var(--duration-fast) var(--ease-out);

		.icon {
			position: relative;
			flex-shrink: 0;
			width: 1.15em;
			height: 1.15em;
			border: var(--border-thick) solid currentColor;
			border-radius: var(--radius-circle);
			transition: transform var(--duration-base) var(--ease-out);
		}

		.bar {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 42%;
			height: var(--border-thick);
			background: currentColor;
			border-radius: var(--radius-full);
			transition: transform var(--duration-base) var(--ease-out);

			&.horizontal {
				transform: translate(-50%, -50%);
			}

			&.vertical {
				transform: translate(-50%, -50%) rotate(90deg);
			}
		}

		&[aria-expanded='true'] {
			.icon {
				transform: rotate(90deg);
			}

			.bar.vertical {
				transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
			}
		}

		&:hover,
		&:focus-visible {
			opacity: 0.72;
		}
	}

	.index {
		flex-shrink: 0;
		color: var(--ink-muted);
		font-family: var(--font-body);
		font-size: 0.9em;
	}

	a {
		color: var(--accent);
		text-decoration: underline;
		text-underline-offset: 0.18em;
	}

	@media (max-width: 900px) {
		a {
			flex: 1;
			min-width: 0;
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			gap: 0.5em;

			.icon {
				margin-inline-start: 0;
			}
		}
	}
}

.compare-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(280 * var(--scale));
	margin-top: calc(900 * var(--scale));
	padding-top: calc(560 * var(--scale));
	border-top: var(--space-1) solid rgb(var(--color-ink-rgb) / 0.12);

	> .eyebrow {
		margin-bottom: 0;
	}

	.heading {
		margin-bottom: 0;
	}
}


/* ./components/compare-brand.css */
/* Root class matches filename: compare-brand.css → .compare-brand */

.compare-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	white-space: nowrap;
	vertical-align: middle;

	.mark {
		display: block;
		width: 1.15em;
		height: 1.15em;
		flex-shrink: 0;
		overflow: hidden;
		border-radius: var(--radius-circle);

		> span {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.logo {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	&.logo-only .name {
		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);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}


/* ./components/landing.css */
.landing {
	width: 100%;
	overflow-x: clip;
	background: var(--color-bg);
	padding-block: var(--space-page-y);
	padding-bottom: 0;

	> .site-header {
		position: relative;
		z-index: 2;
		width: min(100%, var(--size-page));
		margin-inline: auto;
		margin-top: calc(var(--space-header-y) - var(--space-landing-y-start));
		margin-bottom: calc(640 * var(--scale));
		padding-inline: var(--space-page-x);
	}

	.section {
		display: grid;
		grid-template-columns: minmax(0, 6844fr) minmax(0, 5034fr);
		align-items: stretch;
		column-gap: 0;
		width: min(100%, var(--size-content));
		margin-inline: auto;
		padding-inline: var(--space-page-x);

		& + .section {
			margin-top: var(--space-section);
		}
	}

	/* Text column (badge internals stay under .app-store-badge) */
	.content {
		display: flex;
		flex-direction: column;
		min-width: 0;
		padding-top: var(--space-content-top);
		/* Figma: copy overlaps phone ~14% */
		margin-left: calc(var(--space-overlap) * -1);
		padding-left: calc(var(--space-overlap) * 0.08);
		position: relative;
		z-index: 1;

		&.hero {
			justify-content: space-between;
			gap: var(--space-hero-to-cta);
			padding-top: var(--space-hero-pad-top);
			padding-bottom: var(--space-hero-pad-bottom);
			min-height: 100%;

			.heading {
				margin-top: var(--space-hero-brand-to-heading);
			}

			.lede {
				margin-top: var(--space-hero-heading-to-lede);
				max-width: var(--measure-22);
				font-family: var(--font-body);
				font-size: clamp(var(--text-price), 1.45vw, var(--space-rem-1-18));
				line-height: 1.4;
				color: var(--ink-muted);
			}
		}
	}

	@media (max-width: 900px) {
		.section {
			grid-template-columns: 1fr;
			row-gap: calc(420 * var(--scale));
		}

		.content {
			margin-left: 0;
			padding-left: 0;
			min-height: auto;
			justify-content: flex-start;

			&.hero {
				padding-top: 0;
				padding-bottom: 0;
			}
		}
	}
}

.not-found {
	display: grid;
	min-height: 100dvh;
	place-items: center;
	background: var(--color-bg);
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	font-size: clamp(var(--text-display-sm), 6vw, var(--space-rem-4));
}


/* ./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-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;
		}

		.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 */
/* import from theme/portfolio/index.css */

.portfolio {
	.pin-sheet {
		display: flex;
		flex-direction: column;
		gap: var(--space-rem-0-75);
		padding: 0 var(--space-rem-1-25) var(--space-rem-1-5);

		p,
		label {
			display: block;
			margin: 0;
		}

		input {
			width: 100%;
			min-height: var(--portfolio-touch);
			letter-spacing: 0.4em;
		}

		.actions {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-rem-0-75);
		}

		button {
			min-width: var(--space-24);
			min-height: var(--portfolio-touch);
		}

		button:focus-visible,
		input:focus-visible {
			outline: var(--space-2) solid currentColor;
			outline-offset: var(--space-2);
		}
	}
}

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


/* ./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-inline: var(--space-16);
			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);
		}

		.sessions {
			max-height: var(--measure-20);
			overflow: auto;
			scrollbar-width: thin;

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

			.when {
				color: var(--portfolio-ink-muted);
				font-size: var(--text-small);
			}

			button {
				min-height: var(--portfolio-touch);
				align-items: flex-start;
			}
		}

		.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;
	}
}

@media (max-width: 320px) {
	.portfolio .chat-panel .sessions button {
		min-height: var(--portfolio-touch);
	}
}


/* ./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);
				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);
		}

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

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


/* ./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);
			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;
		}

		.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-grid;
		position: relative;
		width: calc(var(--space-28) * var(--chat-thinking-scale, 1));
		height: calc(var(--space-28) * var(--chat-thinking-scale, 1));
		place-items: center;

		.spark {
			position: absolute;
			width: var(--space-15);
			height: var(--space-15);
			opacity: 0.72;
		}

		.spark.is-lg {
			width: var(--space-15);
			height: var(--space-15);
			translate: 4var (--space-5) var(--space-4);
		}

		.spark.is-md {
			width: var(--space-8);
			height: var(--space-8);
			translate: -5var (--space-5) -var(--border-thick);
		}

		.spark.is-sm {
			width: var(--space-5);
			height: var(--space-5);
			translate: var(--hairline) -6var (--space-5);
		}

		&[data-active='true'] .spark {
			animation: chat-spark-spin 1.8s linear infinite;
		}

		&[data-active='true'] .spark.is-md {
			animation-duration: 1.4s;
			animation-direction: reverse;
		}

		&[data-active='true'] .spark.is-sm {
			animation-duration: 1.15s;
		}
	}

	.chat-markdown {
		display: grid;
		gap: var(--space-rem-0-55);
		color: var(--portfolio-ink);

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

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

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

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

	.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-fine);
			font-weight: var(--portfolio-weight-semibold);
		}

		.label.is-pulse {
			animation: chat-label-pulse 2s ease-in-out infinite;
		}

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

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

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

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

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

		.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-fine);
		}

		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(--portfolio-text-subhead);
			font-weight: var(--portfolio-weight-semibold);
			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 {
			margin: 0;
			font-size: var(--text-label);
			font-weight: var(--portfolio-weight-medium);
		}
	}

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

	.chat-trades {
		display: grid;
		gap: var(--space-8);
		margin: 0;
		padding: 0;
		list-style: none;

		button {
			display: grid;
			width: 100%;
			gap: var(--space-2);
			padding: 0;
			border: 0;
			background: transparent;
			color: inherit;
			text-align: left;
			cursor: pointer;
		}
	}

	.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 {
			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-thinking .spark,
	.portfolio .chat-reasoning .label.is-pulse,
	.portfolio .chat-tools .gear.is-spin {
		animation: none;
	}
}

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

@keyframes chat-label-pulse {
	50% {
		opacity: 0.58;
	}
}


/* ./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.native-google-auth {
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-24);
}

.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);
		}

		button {
			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);
			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: min(100%, var(--space-20));
			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-micro);
			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;
			}
		}
	}
}