/*
 * Design tokens of the one frame every service lives in (整合第 3 步, 2026-10-18). Everything else uses these and
 * nothing else: colors, depth (one light from the top left, five heights), corners, and motion (how long, how it
 * eases). Taken from Paneo's base.css + shell.css + depth.css, which had them from Fadmeo.
 *
 * Dark follows the system unless one was picked (html[data-theme]). The dark values are written twice, under the
 * system's dark and under html[data-theme="dark"]; change both.
 */
:root {
	/* ---- colors ---- */
	--bg: #ffffff; /* the page behind the floating cards */
	--surface: #ffffff; /* cards, windows */
	--surface-2: #f3f4f6; /* hover, a sunken row */
	--card-bg: #fcfcfd; /* the sidebar's cards */
	--sb-card-bg: #fcfcfd; /* the sidebar's own card face (shell.css .sb-flip-dot's ring, Paneo's brand preview); was Fadmeo's chat.css's */
	--sb-btn-bg: #fff; /* the sidebar's raised buttons (a service, 设置): face, under the pointer, pressed in */
	--sb-btn-hover: #f6f7f9;
	--sb-btn-sunk: #eceef2;
	--border: #e5e7eb;
	--border-strong: #d1d5db;
	--text: #1f2937;
	--text-strong: #111827;
	--muted: #6b7280;
	--faint: #9ca3af;
	--accent: #111827;
	--accent-text: #ffffff;
	--accent-hover: #374151;
	--danger: #dc2626;
	--danger-bg: #fef2f2;
	--ok: #15803d;
	--ok-bg: #dcfce7;
	--warn: #a16207;
	--warn-bg: #fef9c3;
	/* code in colour (js/lib/highlight.js) */
	--hl-com: #6b7280;
	--hl-str: #15803d;
	--hl-num: #b45309;
	--hl-kw: #7c3aed;
	--hl-lit: #c2410c;
	--hl-type: #0e7490;
	--hl-fn: #1d4ed8;
	--hl-meta: #a21caf;
	--hl-tag: #be123c;
	--hl-attr: #b45309;
	--hl-ins: #15803d;
	--hl-ins-bg: #dcfce7;
	--hl-del: #b91c1c;
	--hl-del-bg: #fee2e2;
	--mark: #3c78d8; /* something not as it starts (a search's conditions set), a dot of news, unread (Fadmeo's sidebar) */
	--sel: #2563eb; /* what is picked or open: a toolbar button whose card is open (toolbar.css .is-open), Eolite's selected node, cell, shape */
	--focus-ring: #e5e7eb;
	/* an editor's backdrop over the whole window (components/backdrop.js: a map, a document's pages, a drawing's desk) and its dots */
	--canvas-bg: #f4f5f7;
	--canvas-dot: rgb(15 23 42 / 0.07);
	/* the same in both themes (not written again under dark): */
	--on-fill: #fff; /* text and icons on something filled with a colour: a badge, an avatar, a red or green button */
	--paper: #fff; /* white in the dark too: under a QR code, a page shown as it is, a drawn sheet */
	--link: #2563eb;
	--hit: rgb(245 180 0); /* a search's hit, what was just jumped to: always mixed thin (color-mix … transparent) */
	--go: #16a34a; /* a green to press or that says yes: answer a call, read, picked */
	--go-hover: #15803d;
	--stop: #dc2626; /* the red of hang up */
	--stop-hover: #b91c1c;
	--unread: #ef4444; /* how many not read: the sidebar tile's badge (shell.css .sb-tile-badge); was Rarien's */
	/* made of others, so they follow the theme by themselves (moved here from Fadmeo / Rarien, 2026-10-30): */
	--press-bg: color-mix(in srgb, var(--text) 13%, transparent); /* a row of the sidebar while pressed (shell.css .sb-flip, Fadmeo's links) */
	--code-bg: var(--surface-2); /* a code block's ground (markdown.css .md-code); Fadmeo's chat.css gives its pages (.gi-view, never :root: ui_check.py 6) its own, a shade lighter (darker in the dark) */
	/* what a file is, wherever files are listed (Eolite's rows and tiles, a share page, Fadmeo's file cards) */
	--kind-doc: #2563eb;
	--kind-sheet: #16a34a;
	--kind-slides: #ea580c;
	--kind-flow: #7c3aed;
	--kind-pdf: #dc2626;
	--kind-map: #0ea5e9;
	--kind-folder: #f59e0b;

	/* ---- depth ----
	   height 1  cards resting on the page (settings cards, bubbles)
	   height 2  floating a little (sidebar cards, buttons, the avatar)
	   height 3  windows grown out of a button, the side card, toasts
	   height 4  a window that asks something (a dialog) */
	--depth-ink: 15 23 42;
	--elev-1: 0.5px 1px 2px rgb(var(--depth-ink) / 0.06), 1px 3px 8px rgb(var(--depth-ink) / 0.05);
	--elev-2: 0.5px 1px 2px rgb(var(--depth-ink) / 0.08), 2px 6px 16px rgb(var(--depth-ink) / 0.08);
	--elev-2-drop: drop-shadow(0.5px 1px 1px rgb(var(--depth-ink) / 0.08)) drop-shadow(2px 6px 8px rgb(var(--depth-ink) / 0.08)); /* the same, cast by a shape (a filter: its blur half a box-shadow's, as browsers draw it) */
	--elev-3: 1px 2px 4px rgb(var(--depth-ink) / 0.08), 4px 14px 32px rgb(var(--depth-ink) / 0.14);
	--elev-4: 1px 3px 6px rgb(var(--depth-ink) / 0.10), 8px 28px 64px rgb(var(--depth-ink) / 0.22);
	--shine: 255 255 255; /* the light on the lit edges, as --depth-ink is the shadows': rgb(var(--shine) / 0.3) */
	--lit-line: rgb(255 255 255 / 0.9); /* the light on a raised thing's top edge, the shadow inside its bottom edge */
	--dim-line: rgb(var(--depth-ink) / 0.05);
	--edge-light: inset 0 1px 0 var(--lit-line); /* the lit top edge of something raised */
	--edge-dark: inset 0 -1px 0 var(--dim-line);
	--edge-top: #eceef2; /* border colors: lighter on top, darker below */
	--edge-bottom: #d3d8df;
	--sunken: inset 0.5px 1px 2px rgb(var(--depth-ink) / 0.07); /* a text field */
	--face: linear-gradient(to bottom, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0) 70%); /* a raised button's sheen */
	--face-solid: linear-gradient(to bottom, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0) 60%);
	--btn-solid-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0.5px 1px 2px rgb(var(--depth-ink) / 0.22), 1px 3px 8px rgb(var(--depth-ink) / 0.12);
	--btn-pressed: inset 0.5px 1px 3px rgb(var(--depth-ink) / 0.18);
	--tb-h: 38px; /* the toolbar's height, edges too (css/toolbar.css; a phone's stays 44, below): its middle on the avatar's, calc(var(--top-mid) - var(--tb-h) / 2) */
	--tb-corner: 999px; /* the two ends of a group of keys: half circles (the user 2026-11-04), as the round buttons beside them */
	--card-shadow: var(--edge-light), var(--edge-dark), var(--elev-2);
	--window-shadow: var(--edge-light), var(--elev-3);

	/* the backdrop behind a window (设置 › 外观 › 进阶: none / dim / blur, html[data-backdrop]) */
	--veil-dim: rgb(0 0 0 / 0.18);

	/* a segmented choice: a groove a shade deeper than the card, a raised thumb lighter than it */
	--seg-groove: #e8eaee;
	--seg-thumb: #fff;
	--seg-text: #5f6673;
	--seg-text-on: var(--text-strong);
	--seg-groove-shadow: inset 0.5px 1.5px 3px rgb(var(--depth-ink) / 0.14), 0 1px 0 rgb(255 255 255 / 0.8);
	--seg-thumb-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgb(var(--depth-ink) / 0.10), 0.5px 1.5px 2px rgb(var(--depth-ink) / 0.20), 1px 3px 6px rgb(var(--depth-ink) / 0.10);
	/* a switch: a deep groove shaded inside its top edge, a domed knob lit from the top left */
	--switch-groove: var(--border-strong);
	--switch-groove-on: var(--accent);
	--switch-groove-shade: rgb(0 0 0 / 0.06);
	--switch-groove-shade-on: rgb(0 0 0 / 0.35);
	--switch-groove-shadow: inset 0.5px 1.5px 3px rgb(var(--depth-ink) / 0.28), inset 0 -1px 0 rgb(255 255 255 / 0.35), 0 1px 0 rgb(255 255 255 / 0.8);
	--switch-knob: radial-gradient(circle at 35% 28%, #fff 0, #fff 30%, #eceef2 100%);
	--switch-knob-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px rgb(var(--depth-ink) / 0.10), 0 0 0 0.5px rgb(var(--depth-ink) / 0.14), 0.5px 1.5px 2px rgb(var(--depth-ink) / 0.28), 1.5px 3px 6px rgb(var(--depth-ink) / 0.14);
	--switch-mark: rgb(var(--depth-ink) / 0.16);
	--switch-mark-deep: rgb(var(--depth-ink) / 0.32);
	--switch-mark-lip: rgb(var(--shine) / 0.75);
	--switch-mark-on: rgb(var(--shine) / 0.10);
	--switch-mark-deep-on: rgb(var(--depth-ink) / 0.55);
	--switch-mark-lip-on: rgb(var(--shine) / 0.40);
	--switch-grip-cut: rgb(var(--depth-ink) / 0.16);
	--switch-grip-lit: rgb(var(--shine) / 0.95);
	/* the switch's power marks (a mask: only its shape counts): 「I」 centred 11px in, 「O」 29px in, both 8px tall */
	--switch-marks-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Crect x='10' y='7' width='2' height='8' rx='1'/%3E%3Ccircle cx='29' cy='11' r='3.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
	/* the same switch for 「shown or not」 (settings-ui.js toggle({marks: "eye"}): 日历's calendars): an open eye where 「I」 is,
	   a struck-out one where 「O」 is (icons.js eye / eyeOff at 0.55, the user 2026-10-29: not a closed eye, the same as elsewhere) */
	--switch-marks-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(4.4 4.4) scale(.55)'%3E%3Cpath d='M2 12c2.5-4.5 6-7 10-7s7.5 2.5 10 7c-2.5 4.5-6 7-10 7s-7.5-2.5-10-7z'/%3E%3Ccircle cx='12' cy='12' r='2.4' fill='%23000'/%3E%3C/g%3E%3Cg transform='translate(22.4 4.4) scale(.55)'%3E%3Cpath d='M4.5 7.6C3.5 8.8 2.7 10.3 2 12c2.5 4.5 6 7 10 7 1.6 0 3.1-.4 4.4-1.1'/%3E%3Cpath d='M9 5.5c1-.3 2-.5 3-.5 4 0 7.5 2.5 10 7-.7 1.3-1.5 2.4-2.4 3.4'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	/* a well sunk into the page (a composer, a disabled solid button) */
	--well-bg: #f3f4f6;
	--well-shadow: inset 1px 2px 5px rgb(var(--depth-ink) / 0.13), inset 0 -1px 0 rgb(255 255 255 / 0.9), 0 1px 0 rgb(255 255 255 / 0.9);
	--well-shadow-focus: inset 1.5px 3px 7px rgb(var(--depth-ink) / 0.18), inset 0 -1px 0 rgb(255 255 255 / 0.9), 0 1px 0 rgb(255 255 255 / 0.9);
	--well-top: #d3d8df;
	--well-bottom: #f3f4f6;
	--veil-blur: 2px;

	/* ---- shape ---- */
	--radius-sm: 8px; /* rows, small buttons */
	--radius: 12px; /* fields, menus' rows */
	--radius-card: 18px; /* cards, windows */
	--sb-width: 300px;
	--gap: 10px; /* between the floating cards and the window's edges */
	/* a form's rhythm (settings' rows, a window's form, an editor's side panel): between one line of controls and the
	   next, and between groups (a heading over its lines starts this far below the last group) */
	--form-row-gap: 10px;
	--form-gap: 16px;

	/* ---- type ---- */
	--font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
	--mono: ui-monospace, "SF Mono", "Cascadia Mono", "Noto Sans Mono", monospace;
	--ui-scale: 1; /* the text size setting (html[data-font-size]) */

	/* what the pointer looks like over what can be dragged: js/early.js marks Windows, where it is the system's four-way arrow; elsewhere the hand. Always through these (UI-RULES 拖动光标) */
	--cursor-drag: grab;
	--cursor-dragging: grabbing;
	/* the bar between two parts, dragged to share the room (css/controls.css .split-grip, UI-RULES 分隔条): the system's resize arrows; Windows the ones of its own
	   (ns / ew: IDC_SIZENS / IDC_SIZEWE), as row- / col-resize are pictures the browser brings there and a custom cursor scheme never reaches them */
	--cursor-resize-y: row-resize;
	--cursor-resize-x: col-resize;
	/* its short round pill: at rest, pointed at, being dragged */
	--grip: rgb(var(--depth-ink) / 0.18);
	--grip-hot: rgb(var(--depth-ink) / 0.36);
	--grip-on: var(--sel);

	/* ---- motion: every animation takes one of these (js/lib/motion.js reads the same numbers) ---- */
	--dur-quick: 150ms; /* hover, press, a color */
	--dur: 280ms; /* something shown or hidden in place */
	--dur-grow: 340ms; /* a button growing into its window */
	--dur-shrink: 220ms; /* the window going back into its button */
	--ease: cubic-bezier(0.65, 0, 0.35, 1); /* in place */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* arriving */
	--ease-in: cubic-bezier(0.55, 0, 0.75, 0.3); /* leaving */
	--ease-grow: cubic-bezier(0.34, 1.25, 0.64, 1); /* arriving with a small overshoot */
	--ease-bounce: cubic-bezier(0.34, 1.9, 0.5, 1); /* back from a springy hover: past where it goes once */
	/* a spring: past where it goes, short of it, and settling (browsers without linear() keep --ease-bounce's way) */
	--ease-spring: linear(0, 0.219 3.3%, 0.52 6.7%, 0.829 10%, 1.089 13.3%, 1.265 16.7%, 1.348 20%, 1.348 23.3%, 1.285 26.7%, 1.188 30%, 1.083 33.3%, 0.99 36.7%, 0.923 40%, 0.887 43.3%, 0.88 46.7%, 0.897 50%, 0.928 53.3%, 0.963 56.7%, 0.996 60%, 1.021 63.3%, 1.036 66.7%, 1.041 70%, 1.037 73.3%, 1.027 76.7%, 1.015 80%, 1.004 83.3%, 0.995 86.7%, 0.989 90%, 0.986 93.3%, 0.987 96.7%, 1);

	color-scheme: light;
}

:root[data-os="windows"] {
	--cursor-drag: move;
	--cursor-dragging: move;
	--cursor-resize-y: ns-resize;
	--cursor-resize-x: ew-resize;
}
:root[data-font-size="medium"] {
	--ui-scale: 1.125;
}
:root[data-font-size="large"] {
	--ui-scale: 1.25;
}

@media (max-width: 767px) {
	:root {
		--gap: 8px;
	}
	:root[data-font-size="small"] {
		--ui-scale: 0.9;
	}
	:root[data-font-size="medium"] {
		--ui-scale: 1;
	}
	:root[data-font-size="large"] {
		--ui-scale: 1.125;
	}
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #111827;
		--surface: #1f2937;
		--surface-2: #374151;
		--card-bg: #1a2434;
		--sb-card-bg: #182131;
		--sb-btn-bg: #243045;
		--sb-btn-hover: #2a374e;
		--sb-btn-sunk: #121a26;
		--border: #374151;
		--border-strong: #4b5563;
		--text: #e5e7eb;
		--text-strong: #f9fafb;
		--muted: #9ca3af;
		--faint: #6b7280;
		--accent: #f9fafb;
		--accent-text: #111827;
		--accent-hover: #e5e7eb;
		--danger: #f87171;
		--danger-bg: #450a0a;
		--ok: #4ade80;
		--ok-bg: #14532d;
		--warn: #facc15;
		--warn-bg: #422006;
		--hl-com: #9ca3af;
		--hl-str: #86efac;
		--hl-num: #fcd34d;
		--hl-kw: #c4b5fd;
		--hl-lit: #fdba74;
		--hl-type: #67e8f9;
		--hl-fn: #93c5fd;
		--hl-meta: #f0abfc;
		--hl-tag: #fda4af;
		--hl-attr: #fcd34d;
		--hl-ins: #86efac;
		--hl-ins-bg: #052e16;
		--hl-del: #fca5a5;
		--hl-del-bg: #450a0a;
		--mark: #6a9ff0; /* something not as it starts (a search's conditions set), a dot of news */
		--sel: #60a5fa;
		--focus-ring: #374151;
		--canvas-bg: #0f1623;
		--canvas-dot: rgb(255 255 255 / 0.06);
		--depth-ink: 0 0 0;
		--grip: rgb(var(--shine) / 0.2);
		--grip-hot: rgb(var(--shine) / 0.38);
		--elev-1: 0.5px 1px 2px rgb(0 0 0 / 0.30), 1px 3px 8px rgb(0 0 0 / 0.22);
		--elev-2: 0.5px 1px 2px rgb(0 0 0 / 0.40), 2px 6px 16px rgb(0 0 0 / 0.32);
		--elev-2-drop: drop-shadow(0.5px 1px 1px rgb(0 0 0 / 0.40)) drop-shadow(2px 6px 8px rgb(0 0 0 / 0.32));
		--elev-3: 1px 2px 4px rgb(0 0 0 / 0.45), 4px 14px 32px rgb(0 0 0 / 0.50);
		--elev-4: 1px 3px 6px rgb(0 0 0 / 0.50), 8px 28px 64px rgb(0 0 0 / 0.60);
		--lit-line: rgb(255 255 255 / 0.045);
		--dim-line: rgb(0 0 0 / 0.25);
		--edge-top: #313c4d;
		--edge-bottom: #1c2533;
		--sunken: inset 0.5px 1px 3px rgb(0 0 0 / 0.35);
		--face: linear-gradient(to bottom, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0) 70%);
		--face-solid: linear-gradient(to bottom, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 60%);
		--btn-solid-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0.5px 1px 2px rgb(0 0 0 / 0.5), 1px 3px 8px rgb(0 0 0 / 0.35);
		--btn-pressed: inset 0.5px 1px 3px rgb(0 0 0 / 0.45);
		--seg-groove: #141b27;
		--seg-thumb: #4b5563;
		--seg-text: #a3acb9;
		--seg-text-on: #fff;
		--seg-groove-shadow: inset 0.5px 1.5px 3px rgb(0 0 0 / 0.55), 0 1px 0 rgb(255 255 255 / 0.05);
		--seg-thumb-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 -1px 0 rgb(0 0 0 / 0.2), 0.5px 1.5px 2px rgb(0 0 0 / 0.5), 1px 3px 6px rgb(0 0 0 / 0.35);
		--switch-groove: #3a4556;
		--switch-groove-on: #cbd5e1;
		--switch-groove-shade: rgb(0 0 0 / 0.35);
		--switch-groove-shade-on: rgb(0 0 0 / 0.45);
		--switch-groove-shadow: inset 0.5px 1.5px 3px rgb(0 0 0 / 0.6), inset 0 -1px 0 rgb(255 255 255 / 0.06), 0 1px 0 rgb(255 255 255 / 0.06);
		--switch-knob: radial-gradient(circle at 35% 28%, #f3f4f6 0, #d1d5db 45%, #9ca3af 100%);
		--switch-knob-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), inset 0 -1px 1px rgb(0 0 0 / 0.25), 0.5px 1.5px 2px rgb(0 0 0 / 0.6), 1.5px 3px 6px rgb(0 0 0 / 0.45);
		--switch-mark: rgb(var(--depth-ink) / 0.30);
		--switch-mark-deep: rgb(var(--depth-ink) / 0.55);
		--switch-mark-lip: rgb(var(--shine) / 0.14);
		--switch-mark-on: rgb(var(--depth-ink) / 0.14);
		--switch-mark-deep-on: rgb(var(--depth-ink) / 0.32);
		--switch-mark-lip-on: rgb(var(--shine) / 0.70);
		--switch-grip-cut: rgb(var(--depth-ink) / 0.22);
		--switch-grip-lit: rgb(var(--shine) / 0.75);
		--well-bg: #0c111b;
		--well-shadow: inset 1px 2px 6px rgb(0 0 0 / 0.6), inset 0 -1px 0 rgb(255 255 255 / 0.04), 0 1px 0 rgb(255 255 255 / 0.06);
		--well-shadow-focus: inset 1.5px 3px 9px rgb(0 0 0 / 0.75), inset 0 -1px 0 rgb(255 255 255 / 0.05), 0 1px 0 rgb(255 255 255 / 0.07);
		--well-top: #05080e;
		--well-bottom: #273244;
		--veil-dim: rgb(0 0 0 / 0.4);
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg: #111827;
	--surface: #1f2937;
	--surface-2: #374151;
	--card-bg: #1a2434;
	--sb-card-bg: #182131;
	--sb-btn-bg: #243045;
	--sb-btn-hover: #2a374e;
	--sb-btn-sunk: #121a26;
	--border: #374151;
	--border-strong: #4b5563;
	--text: #e5e7eb;
	--text-strong: #f9fafb;
	--muted: #9ca3af;
	--faint: #6b7280;
	--accent: #f9fafb;
	--accent-text: #111827;
	--accent-hover: #e5e7eb;
	--danger: #f87171;
	--danger-bg: #450a0a;
	--ok: #4ade80;
	--ok-bg: #14532d;
	--warn: #facc15;
	--warn-bg: #422006;
	--hl-com: #9ca3af;
	--hl-str: #86efac;
	--hl-num: #fcd34d;
	--hl-kw: #c4b5fd;
	--hl-lit: #fdba74;
	--hl-type: #67e8f9;
	--hl-fn: #93c5fd;
	--hl-meta: #f0abfc;
	--hl-tag: #fda4af;
	--hl-attr: #fcd34d;
	--hl-ins: #86efac;
	--hl-ins-bg: #052e16;
	--hl-del: #fca5a5;
	--hl-del-bg: #450a0a;
	--mark: #6a9ff0; /* something not as it starts (a search's conditions set), a dot of news */
	--sel: #60a5fa;
	--focus-ring: #374151;
	--canvas-bg: #0f1623;
	--canvas-dot: rgb(255 255 255 / 0.06);
	--depth-ink: 0 0 0;
	--grip: rgb(var(--shine) / 0.2);
	--grip-hot: rgb(var(--shine) / 0.38);
	--elev-1: 0.5px 1px 2px rgb(0 0 0 / 0.30), 1px 3px 8px rgb(0 0 0 / 0.22);
	--elev-2: 0.5px 1px 2px rgb(0 0 0 / 0.40), 2px 6px 16px rgb(0 0 0 / 0.32);
	--elev-2-drop: drop-shadow(0.5px 1px 1px rgb(0 0 0 / 0.40)) drop-shadow(2px 6px 8px rgb(0 0 0 / 0.32));
	--elev-3: 1px 2px 4px rgb(0 0 0 / 0.45), 4px 14px 32px rgb(0 0 0 / 0.50);
	--elev-4: 1px 3px 6px rgb(0 0 0 / 0.50), 8px 28px 64px rgb(0 0 0 / 0.60);
	--lit-line: rgb(255 255 255 / 0.045);
	--dim-line: rgb(0 0 0 / 0.25);
	--edge-top: #313c4d;
	--edge-bottom: #1c2533;
	--sunken: inset 0.5px 1px 3px rgb(0 0 0 / 0.35);
	--face: linear-gradient(to bottom, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0) 70%);
	--face-solid: linear-gradient(to bottom, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 60%);
	--btn-solid-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0.5px 1px 2px rgb(0 0 0 / 0.5), 1px 3px 8px rgb(0 0 0 / 0.35);
	--btn-pressed: inset 0.5px 1px 3px rgb(0 0 0 / 0.45);
	--seg-groove: #141b27;
	--seg-thumb: #4b5563;
	--seg-text: #a3acb9;
	--seg-text-on: #fff;
	--seg-groove-shadow: inset 0.5px 1.5px 3px rgb(0 0 0 / 0.55), 0 1px 0 rgb(255 255 255 / 0.05);
	--seg-thumb-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 -1px 0 rgb(0 0 0 / 0.2), 0.5px 1.5px 2px rgb(0 0 0 / 0.5), 1px 3px 6px rgb(0 0 0 / 0.35);
	--switch-groove: #3a4556;
	--switch-groove-on: #cbd5e1;
	--switch-groove-shade: rgb(0 0 0 / 0.35);
	--switch-groove-shade-on: rgb(0 0 0 / 0.45);
	--switch-groove-shadow: inset 0.5px 1.5px 3px rgb(0 0 0 / 0.6), inset 0 -1px 0 rgb(255 255 255 / 0.06), 0 1px 0 rgb(255 255 255 / 0.06);
	--switch-knob: radial-gradient(circle at 35% 28%, #f3f4f6 0, #d1d5db 45%, #9ca3af 100%);
	--switch-knob-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), inset 0 -1px 1px rgb(0 0 0 / 0.25), 0.5px 1.5px 2px rgb(0 0 0 / 0.6), 1.5px 3px 6px rgb(0 0 0 / 0.45);
	--switch-mark: rgb(var(--depth-ink) / 0.30);
	--switch-mark-deep: rgb(var(--depth-ink) / 0.55);
	--switch-mark-lip: rgb(var(--shine) / 0.14);
	--switch-mark-on: rgb(var(--depth-ink) / 0.14);
	--switch-mark-deep-on: rgb(var(--depth-ink) / 0.32);
	--switch-mark-lip-on: rgb(var(--shine) / 0.70);
	--switch-grip-cut: rgb(var(--depth-ink) / 0.22);
	--switch-grip-lit: rgb(var(--shine) / 0.75);
	--well-bg: #0c111b;
	--well-shadow: inset 1px 2px 6px rgb(0 0 0 / 0.6), inset 0 -1px 0 rgb(255 255 255 / 0.04), 0 1px 0 rgb(255 255 255 / 0.06);
	--well-shadow-focus: inset 1.5px 3px 9px rgb(0 0 0 / 0.75), inset 0 -1px 0 rgb(255 255 255 / 0.05), 0 1px 0 rgb(255 255 255 / 0.07);
	--well-top: #05080e;
	--well-bottom: #273244;
	--veil-dim: rgb(0 0 0 / 0.4);
	color-scheme: dark;
}

/* 设置 › 外观 › 动画「减少」, or the system's: everything that moves just appears (js/lib/motion.js does the same) */
:root[data-motion="reduce"] {
	--dur-quick: 1ms;
	--dur: 1ms;
	--dur-grow: 1ms;
	--dur-shrink: 1ms;
}
@media (prefers-reduced-motion: reduce) {
	:root:not([data-motion="full"]) {
		--dur-quick: 1ms;
		--dur: 1ms;
		--dur-grow: 1ms;
		--dur-shrink: 1ms;
	}
}

@media (max-width: 767px) {
	:root {
		--tb-h: 44px;
	}
}