:root,
[data-theme='light'] {
	color-scheme: light;

	--color-app: #e5e5e5;
	--color-workspace: var(--color-app);
	--color-workspace-dot: rgba(0, 0, 0, 0.12);
	--color-surface: #f0f0f0;
	--color-surface-2: #ffffff;
	--color-ink: #2c2c2c;
	--color-muted: #6e6e6e;
	--color-border: rgba(0, 0, 0, 0.08);
	--color-border-strong: rgba(0, 0, 0, 0.14);
	--color-hover: #e6e6e6;
	--color-accent: #1473e6;
	--color-accent-hover: #0d66d0;
	--color-accent-muted: #d6e9fb;
	--color-on-accent: #ffffff;
	--color-danger: #d7373f;
	--color-danger-hover: #c9252d;
	--color-danger-muted: #f8d7d8;
	--color-on-danger: #ffffff;
	--color-live: #1b8a4a;
	--color-offline: #c99700;
	--color-focus: var(--color-accent);
	--color-guide: #1473e6;
	--color-snap: #f24822;
	--color-backdrop: rgba(0, 0, 0, 0.45);
	--color-black: #000000;
	--color-white: #ffffff;
	--color-check-light: #d0d0d0;
	--color-check-dark: #9a9a9a;
	--color-mid: #6a6a6a;
	--color-screen: #050506;
	--color-camera: #0a0a0c;
	--color-lens: #16324a;
	--color-dial: #1a1c20;
	--color-demo-teal: #1a535c;
	--color-demo-mint: #4ecdc4;
	--color-demo-pink: #ff6b9d;
	--color-demo-orange: #ff6b35;
	--color-lens-glow: rgba(160, 210, 255, 0.45);
	--color-lens-core: rgba(180, 220, 255, 0.7);
	--color-lens-shade: rgba(12, 28, 48, 0.55);

	--opacity-0: 0;
	--opacity-025: 0.025;
	--opacity-045: 0.045;
	--opacity-3: 0.03;
	--opacity-4: 0.04;
	--opacity-6: 0.06;
	--opacity-8: 0.08;
	--opacity-10: 0.1;
	--opacity-12: 0.12;
	--opacity-14: 0.14;
	--opacity-15: 0.15;
	--opacity-16: 0.16;
	--opacity-18: 0.18;
	--opacity-20: 0.2;
	--opacity-22: 0.22;
	--opacity-25: 0.25;
	--opacity-28: 0.28;
	--opacity-30: 0.3;
	--opacity-32: 0.32;
	--opacity-35: 0.35;
	--opacity-40: 0.4;
	--opacity-42: 0.42;
	--opacity-45: 0.45;
	--opacity-50: 0.5;
	--opacity-55: 0.55;
	--opacity-65: 0.65;
	--opacity-70: 0.7;
	--opacity-85: 0.85;
	--opacity-88: 0.88;
	--opacity-90: 0.9;
	--opacity-100: 1;

	--ink-025: color-mix(
		in srgb,
		var(--color-black) calc(100% * var(--opacity-025)),
		transparent
	);
	--ink-045: color-mix(
		in srgb,
		var(--color-black) calc(100% * var(--opacity-045)),
		transparent
	);
	--ink-3: color-mix(
		in srgb,
		var(--color-black) calc(100% * var(--opacity-3)),
		transparent
	);
	--ink-10: color-mix(
		in srgb,
		var(--color-black) calc(100% * var(--opacity-10)),
		transparent
	);
	--ink-14: color-mix(
		in srgb,
		var(--color-black) calc(100% * var(--opacity-14)),
		transparent
	);
	--ink-16: color-mix(
		in srgb,
		var(--color-black) calc(100% * var(--opacity-16)),
		transparent
	);
	--ink-18: color-mix(
		in srgb,
		var(--color-black) calc(100% * var(--opacity-18)),
		transparent
	);
	--ink-22: color-mix(
		in srgb,
		var(--color-black) calc(100% * var(--opacity-22)),
		transparent
	);
	--ink-25: color-mix(
		in srgb,
		var(--color-black) calc(100% * var(--opacity-25)),
		transparent
	);
	--ink-30: color-mix(
		in srgb,
		var(--color-black) calc(100% * var(--opacity-30)),
		transparent
	);
	--ink-32: color-mix(
		in srgb,
		var(--color-black) calc(100% * var(--opacity-32)),
		transparent
	);
	--ink-40: color-mix(
		in srgb,
		var(--color-black) calc(100% * var(--opacity-40)),
		transparent
	);
	--ink-45: color-mix(
		in srgb,
		var(--color-black) calc(100% * var(--opacity-45)),
		transparent
	);
	--ink-50: color-mix(
		in srgb,
		var(--color-black) calc(100% * var(--opacity-50)),
		transparent
	);
	--ink-55: color-mix(
		in srgb,
		var(--color-black) calc(100% * var(--opacity-55)),
		transparent
	);
	--ink-65: color-mix(
		in srgb,
		var(--color-black) calc(100% * var(--opacity-65)),
		transparent
	);
	--paper-3: color-mix(
		in srgb,
		var(--color-white) calc(100% * var(--opacity-3)),
		transparent
	);
	--paper-4: color-mix(
		in srgb,
		var(--color-white) calc(100% * var(--opacity-4)),
		transparent
	);
	--paper-6: color-mix(
		in srgb,
		var(--color-white) calc(100% * var(--opacity-6)),
		transparent
	);
	--paper-8: color-mix(
		in srgb,
		var(--color-white) calc(100% * var(--opacity-8)),
		transparent
	);
	--paper-10: color-mix(
		in srgb,
		var(--color-white) calc(100% * var(--opacity-10)),
		transparent
	);
	--paper-12: color-mix(
		in srgb,
		var(--color-white) calc(100% * var(--opacity-12)),
		transparent
	);
	--paper-16: color-mix(
		in srgb,
		var(--color-white) calc(100% * var(--opacity-16)),
		transparent
	);
	--paper-20: color-mix(
		in srgb,
		var(--color-white) calc(100% * var(--opacity-20)),
		transparent
	);
	--paper-22: color-mix(
		in srgb,
		var(--color-white) calc(100% * var(--opacity-22)),
		transparent
	);
	--paper-28: color-mix(
		in srgb,
		var(--color-white) calc(100% * var(--opacity-28)),
		transparent
	);
	--paper-30: color-mix(
		in srgb,
		var(--color-white) calc(100% * var(--opacity-30)),
		transparent
	);
	--paper-35: color-mix(
		in srgb,
		var(--color-white) calc(100% * var(--opacity-35)),
		transparent
	);
	--paper-40: color-mix(
		in srgb,
		var(--color-white) calc(100% * var(--opacity-40)),
		transparent
	);
	--paper-42: color-mix(
		in srgb,
		var(--color-white) calc(100% * var(--opacity-42)),
		transparent
	);
	--paper-70: color-mix(
		in srgb,
		var(--color-white) calc(100% * var(--opacity-70)),
		transparent
	);

	--font-ui: 'Inter', system-ui, -apple-system, sans-serif;
	--font-mono: ui-monospace, 'SFMono-Regular', menlo, monospace;
	--font-size-xs: 10px;
	--paywall-banner-size: 6px;
	--font-size-sm: 11px;
	--font-size-md: 12px;
	--font-size-lg: 13px;
	--font-size-xl: 28px;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--leading-none: 1;
	--leading-tight: 1.2;
	--leading-ui: 1.35;
	--leading-body: 1.4;
	--leading-copy: 1.45;
	--leading-readout: var(--space-7);
	--tracking-tight: -0.02em;
	--tracking-wide: 0.01em;
	--em-box: 1em;

	--space-1-negative: -2px;
	--space-2-negative: -4px;
	--space-3-negative: -6px;
	--space-4-negative: -8px;
	--space-5-negative: -10px;
	--space-6-negative: -12px;
	--space-7-negative: -14px;
	--space-8-negative: -16px;
	--space-9-negative: -20px;
	--space-10-negative: -24px;

	--space-1: 2px;
	--space-2: 4px;
	--space-3: 6px;
	--space-4: 8px;
	--space-5: 10px;
	--space-6: 12px;
	--space-7: 14px;
	--space-8: 16px;
	--space-9: 20px;
	--space-10: 24px;
	--space-11: 28px;
	--space-12: 32px;

	--hairline-half: 0.5px;
	--hairline-device: 0.6px;
	--hairline-device-strong: 0.7px;
	--border-width: 1px;
	--stroke-mid: 1.5px;
	--stroke-device: 1.6px;
	--focus-ring-width: 2px;
	--chevron-short: 3px;
	--chevron-long: 5px;
	--tick-size: 5px;
	--bezel-tick: 5.5px;
	--chip-pad-end: 7px;
	--hit-slop: 9px;
	--toolbar-inset: 11px;
	--radius-xs: 1px;
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 6px;
	--radius-xl: 8px;
	--radius-full: 999px;
	--shadow-sm: none;
	--shadow-md: 0 var(--space-4) var(--space-10) rgba(0, 0, 0, 0.18);
	--shadow-blur-dark: 28px;

	--z-base: 0;
	--z-nudge: 1;
	--z-raise: 2;
	--z-rail: 3;
	--z-readout: 4;
	--z-resize: 5;
	--z-canvas: 25;
	--z-guide: 28;
	--z-overlay: 30;
	--z-snap: 32;
	--z-layers: 80;
	--z-status: 90;
	--z-dock: 100;
	--z-menu: 200;
	--z-popover: 220;
	--z-tooltip: 240;
	--z-dialog: 300;
	--watermark-step: 280px;
	--watermark-mark: 36px;
	--watermark-type: 22px;
	--watermark-dim: rgba(8, 8, 10, 0.38);
	--watermark-ink: rgba(255, 255, 255, 0.62);
	--duration-fast: 120ms;
	--duration-in: 150ms;
	--duration-spin: 1s;
	--duration-agent-pulse: 1.6s;
	--duration-paywall-banner: 5.2s;
	--ios-spoke-delay: 83.33ms;

	--spinner-track: var(--color-border);
	--spinner-ink: var(--color-accent);
	--spinner-on-fill-track: var(--paper-28);

	--icon-sm: 12px;
	--icon-md: 14px;
	--icon-lg: 16px;
	--seg-icon: 15px;
	--avatar-size: 18px;
	--avatar-lg: 32px;
	--swatch-size: 22px;
	--control-size-xs: 18px;
	--control-size-sm: 24px;
	--sr-size: 1px;
	--sr-offset: -1px;
	--dock-bar-height: calc(
		var(--control-size-sm) + var(--space-1) * 2 + var(--border-width) * 2
	);
	--google-btn-min: 40px;
	--row-height: 32px;
	--range-track-height: var(--control-height);
	--slider-track-size: var(--space-1);
	--slider-thumb-size: var(--icon-sm);
	--slider-progress: 0%;
	--slider-track: var(--ink-25);
	--slider-track-hover: var(--ink-40);
	--slider-fill: var(--color-accent);
	--slider-thumb: var(--color-white);
	--slider-thumb-border: var(--ink-32);
	--textarea-min-height: 56px;
	--field-label-width: 72px;
	--field-label-width-compact: 44px;
	--slider-value-width: 48px;
	--angle-dial-size: 28px;
	--zoom-readout-min: var(--angle-dial-size);
	--shortcut-key-min: 52px;
	--font-picker-caret: var(--swatch-size);

	--sidebar-width: 252px;
	--layers-panel-width: var(--sidebar-width);
	--inspector-panel-width: var(--sidebar-width);
	--tab-rail-width: 32px;
	--ruler-size: 20px;
	--toolbar-brand-min: 277px;
	--toolbar-actions-min: 248px;
	--menu-min-width: 210px;
	--layer-menu-min: 176px;
	--popover-sm: 280px;
	--account-popover-width: var(--menu-min-width);
	--dialog-width: 360px;
	--dialog-width-lg: 420px;
	--dialog-width-paywall: 300px;
	--dialog-width-support: 420px;
	--checkout-sheet-width: 340px;
	--checkout-sheet-max-height: 90vh;
	--z-sheet: 320;
	--page-width: 640px;
	--list-max-sm: 240px;
	--pg-nav-width: 220px;
	--pg-knobs-width: 260px;
	--pg-card-min: var(--menu-min-width);
	--pg-token-min: 120px;
	--pg-swatch-height: var(--slider-value-width);
	--guide-overscan: 4000px;
	--mockup-frame: 4028px;
	--mockup-extent: 8000px;
	--canvas-zoom: 0.16;
	--canvas-pan-x: 40px;
	--canvas-pan-y: 40px;
	--toolbar-height: var(--row-height);
	--control-height: 25px;
	--layer-row-height: var(--row-height);
	--observe-margin: 160px;
	--ruler-font-size: 9px;
	--viewport-height: 100vh;
	--viewport-width: 100vw;

	--phone-pad: 1.3995cqw;
	--phone-bezel: 1.8321cqw;
	--phone-body-r: 14.2494cqw;
	--phone-screen-r: 12.4173cqw;
	--phone-btn-width: 0.7888cqw;
	--phone-btn-radius: 0.3053cqw;
	--phone-btn-inset: 0.7125cqw;
	--phone-btn-action-top: 44.1476cqw;
	--phone-btn-action-h: 5.597cqw;
	--phone-btn-vol-up-top: 55.8524cqw;
	--phone-btn-vol-h: 8.6514cqw;
	--phone-btn-vol-down-top: 66.5394cqw;
	--phone-btn-power-top: 60.4326cqw;
	--phone-btn-power-h: 13.2316cqw;
	--phone-island-top: 2.799cqw;
	--phone-island-w: 32.061cqw;
	--phone-island-h: 9.16cqw;
	--phone-island-r: 4.58cqw;

	--ipad-pad: 0.5329cqw;
	--ipad-bezel: 5.0388cqw;
	--ipad-body-r: 3.876cqw;
	--ipad-screen-r: 1.3566cqw;
	--ipad-btn-edge: 0.2422cqw;
	--ipad-btn-power-right: 13.905cqw;
	--ipad-btn-power-w: 6.9767cqw;
	--ipad-btn-thin: 0.3295cqw;
	--ipad-btn-radius: 0.1163cqw;
	--ipad-btn-vol-h: 4.6512cqw;
	--ipad-btn-vol-up-top: 24.564cqw;
	--ipad-btn-vol-down-top: 29.99cqw;
	--ipad-rim-pad: 0.36cqw;
	--ipad-stroke: 0.08cqw;
	--ipad-rim-hi: 0.14cqw;
	--ipad-ring: 0.1cqw;
	--ipad-rim-glow: 2.6cqw;
	--ipad-camera-top: 1.8411cqw;
	--ipad-hairline: 0.05cqw;
	--ipad-screen-stroke: 0.12cqw;
	--ipad-screen-rim: 0.28cqw;

	--phone-gold-metal: #c8b89a;
	--phone-gold-deep: #a89474;
	--phone-gold-spec: rgba(255, 247, 230, 0.55);
	--phone-gold-shade: rgba(70, 52, 28, 0.28);
	--phone-gold-btn-hi: #ddd0b4;
	--phone-gold-btn-lo: #9a8664;
	--phone-black-metal: #3a3a3e;
	--phone-black-deep: #262628;
	--phone-black-spec: rgba(230, 230, 235, 0.28);
	--phone-black-shade: rgba(0, 0, 0, 0.45);
	--phone-black-btn-hi: #6a6a70;
	--phone-black-btn-lo: #1c1c1e;
	--phone-natural-metal: #9a9894;
	--phone-natural-deep: #6e6c68;
	--phone-natural-spec: rgba(245, 243, 238, 0.42);
	--phone-natural-shade: rgba(40, 38, 34, 0.32);
	--phone-natural-btn-hi: #c8c6c2;
	--phone-natural-btn-lo: #6a6864;
	--phone-white-metal: #e8e6e1;
	--phone-white-deep: #c4c2bc;
	--phone-white-spec: rgba(255, 255, 255, 0.7);
	--phone-white-shade: rgba(90, 88, 82, 0.22);
	--phone-white-btn-hi: #f4f3ef;
	--phone-white-btn-lo: #b0aea8;
	--phone-blue-metal: #4a5a6e;
	--phone-blue-deep: #2c3848;
	--phone-blue-spec: rgba(210, 224, 238, 0.38);
	--phone-blue-shade: rgba(10, 16, 24, 0.4);
	--phone-blue-btn-hi: #7a8ca0;
	--phone-blue-btn-lo: #2a3440;
	--phone-desert-metal: #c4a090;
	--phone-desert-deep: #9a7466;
	--phone-desert-spec: rgba(255, 236, 224, 0.5);
	--phone-desert-shade: rgba(72, 42, 32, 0.3);
	--phone-desert-btn-hi: #e0c4b4;
	--phone-desert-btn-lo: #8a685c;
	--ipad-white-metal: #d6d4cf;
	--ipad-white-deep: #9a9892;
	--ipad-white-spec: rgba(255, 255, 255, 0.88);
	--ipad-white-shade: rgba(68, 64, 58, 0.4);
	--ipad-white-btn-lo: #8a8882;
	--ipad-black-metal: #404044;
	--ipad-black-spec: rgba(236, 236, 240, 0.4);
	--ipad-natural-metal: #8e8c88;
	--ipad-natural-deep: #585652;
	--ipad-natural-spec: rgba(250, 248, 242, 0.52);
	--ipad-natural-shade: rgba(28, 26, 22, 0.42);
}

[data-theme='dark'] {
	color-scheme: dark;

	--color-app: #1d1d1d;
	--color-workspace: var(--color-app);
	--color-workspace-dot: rgba(255, 255, 255, 0.07);
	--color-surface: #2a2a2a;
	--color-surface-2: #1f1f1f;
	--color-ink: #e8e8e8;
	--color-muted: #9a9a9a;
	--color-border: #3e3e3e;
	--color-border-strong: #4a4a4a;
	--color-hover: #333333;
	--color-accent: #2d8cff;
	--color-accent-hover: #4da0ff;
	--color-accent-muted: #1a3a5c;
	--color-on-accent: #ffffff;
	--color-danger: #e34850;
	--color-danger-hover: #f05a62;
	--color-danger-muted: #3a1c1e;
	--color-on-danger: #ffffff;
	--color-live: #3dcc6f;
	--color-offline: #e6b800;
	--color-focus: var(--color-accent);
	--color-guide: #2d8cff;
	--color-snap: #f24822;
	--color-backdrop: rgba(0, 0, 0, 0.62);

	--shadow-md: 0 var(--space-5) var(--shadow-blur-dark) rgba(0, 0, 0, 0.45);

	--slider-track: var(--paper-22);
	--slider-track-hover: var(--paper-35);
	--slider-thumb: var(--color-ink);
	--slider-thumb-border: var(--paper-40);
}

html:not([data-app-boot='1']) #root {
	visibility: hidden;
}

.boot-shell {
	position: fixed;
	inset: 0;
	display: none;
	place-items: center;
	padding: var(--space-6);
	background: var(--color-app);
	font-family: var(--font-ui);
	font-size: var(--font-size-md);
	color: var(--color-ink);
}

html[data-app-boot='failed'] .boot-shell {
	display: grid;
}

.boot-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(
		var(--dialog-width-paywall),
		calc(var(--viewport-width) - var(--space-12))
	);
	padding: var(--space-8);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-shadow: var(--shadow-md);
	text-align: center;
}

.boot-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-10);
	height: var(--space-10);
	margin-bottom: var(--space-5);
	color: var(--color-ink);
}

.boot-mark svg {
	width: var(--space-9);
	height: var(--space-9);
}

.boot-title {
	margin: 0 0 var(--space-2);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: var(--leading-ui);
}

.boot-copy {
	margin: 0 0 var(--space-8);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-ui);
	color: var(--color-muted);
}

.boot-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--space-12);
	height: var(--control-height);
	padding: 0 var(--space-4);
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-accent);
	color: var(--color-on-accent);
	font: inherit;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: 1;
	cursor: pointer;
}

.boot-action:hover {
	background: var(--color-accent-hover);
}