@takazudo/zdtp 0.4.4 → 0.4.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +46 -0
- package/README.md +159 -12
- package/dist/apply/apply-token-overrides.d.ts +139 -32
- package/dist/astro/host-adapter.js +71 -58
- package/dist/astro/index.js +1 -1
- package/dist/{autoload-state-CmhI7q9j.js → autoload-state-D26ML6sW.js} +1 -1
- package/dist/bin/server.js +116 -112
- package/dist/config/panel-config.d.ts +68 -1
- package/dist/controls/actions-menu-popover.d.ts +26 -0
- package/dist/controls/help-icon.d.ts +43 -0
- package/dist/controls/tooltip.d.ts +20 -2
- package/dist/export-modal.d.ts +5 -3
- package/dist/import-modal.d.ts +9 -9
- package/dist/index.d.ts +2 -1
- package/dist/index.js +3383 -3012
- package/dist/load-routing-LJ72261l.js +421 -0
- package/dist/{panel-config-CXTCcYQs.js → panel-config-Bw7D-25C.js} +381 -271
- package/dist/server/create-apply-handler.d.ts +6 -0
- package/dist/server/index.js +1 -1
- package/dist/state/tweak-state.d.ts +137 -14
- package/dist/tabs/notes-tab.d.ts +25 -0
- package/dist/testing.js +7 -7
- package/dist/tokens/manifest.d.ts +8 -0
- package/dist/tokens/tier-model.d.ts +36 -0
- package/dist/tweak-state-CD1y56zR.js +1958 -0
- package/dist/utils/design-token-serde.d.ts +20 -12
- package/dist/utils/sanitize-html.d.ts +27 -0
- package/dist/utils/unit-cycle.d.ts +61 -0
- package/dist/zdtp.css +1 -1
- package/package.json +1 -1
- package/dist/load-routing-DtNTKoLW.js +0 -353
- package/dist/tweak-state-BeXkzoj8.js +0 -1858
|
@@ -19,11 +19,16 @@
|
|
|
19
19
|
* opportunistically upgrades to v3 only when at least one semantic mapping is
|
|
20
20
|
* one of the new `SemanticValue` object variants — v3 is a strict superset of
|
|
21
21
|
* v2's shape, so this upgrade never loses information and never happens for a
|
|
22
|
-
* doc that v2 could already represent losslessly. `deserialize()` accepts
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
22
|
+
* doc that v2 could already represent losslessly. `deserialize()` accepts
|
|
23
|
+
* exactly the three canonical `$schema` values above (`SCHEMA_V1`, `SCHEMA_V2`,
|
|
24
|
+
* `SCHEMA_V3`) and normalises to an internal `TweakState` regardless of which
|
|
25
|
+
* one was in the payload. `PanelConfig.schemaId` is a UI-label-only value
|
|
26
|
+
* (see `getDesignTokenSchema` below) that this package's own modals do NOT
|
|
27
|
+
* consult — `import-modal.tsx` / `export-modal.tsx` name the canonical
|
|
28
|
+
* constants directly in their copy. It is never consulted by
|
|
29
|
+
* `serialize()`/`deserialize()` either; a host that sets a custom `schemaId`
|
|
30
|
+
* still gets a `schema-mismatch` error importing any doc whose `$schema`
|
|
31
|
+
* isn't one of the three canonical constants (#498).
|
|
27
32
|
*
|
|
28
33
|
* ## v2 format
|
|
29
34
|
*
|
|
@@ -98,15 +103,18 @@ export declare const SCHEMA_V3 = "zudo-design-tokens/v3";
|
|
|
98
103
|
/**
|
|
99
104
|
* Read the design-token schema id at call time.
|
|
100
105
|
*
|
|
101
|
-
* Returns the host-configured schema id from `cfg.schemaId`.
|
|
102
|
-
*
|
|
103
|
-
*
|
|
104
|
-
*
|
|
106
|
+
* Returns the host-configured schema id from `cfg.schemaId`. This is a
|
|
107
|
+
* UI-label-only value on `PanelConfig` — it is never read by `serialize()`
|
|
108
|
+
* (which always emits `SCHEMA_V2` or `SCHEMA_V3`) or by `deserialize()`
|
|
109
|
+
* (which always validates against `SCHEMA_V1`/`SCHEMA_V2`/`SCHEMA_V3`); see
|
|
110
|
+
* the header comment above and #498. Neither `import-modal.tsx` nor
|
|
111
|
+
* `export-modal.tsx` calls this function — their copy names the actual
|
|
112
|
+
* `SCHEMA_V1`/`V2`/`V3` constants directly instead. This helper remains for
|
|
113
|
+
* hosts that want to read their own configured `schemaId` label without
|
|
114
|
+
* reaching into `PanelConfig` directly.
|
|
105
115
|
*
|
|
106
116
|
* `cfg` defaults to the active (most-recently-configured) instance so the
|
|
107
|
-
* single-default path stays byte-identical.
|
|
108
|
-
* mounted instance config (multi-instance, #361) so a non-default panel
|
|
109
|
-
* validates against ITS schema id, not the default's.
|
|
117
|
+
* single-default path stays byte-identical.
|
|
110
118
|
*/
|
|
111
119
|
export declare function getDesignTokenSchema(cfg?: PanelConfig): string;
|
|
112
120
|
/** External JSON value for a base-color / semantic-color entry (v1). */
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Allowlist HTML sanitizer for host-supplied "token notes" content (#515).
|
|
3
|
+
*
|
|
4
|
+
* Security boundary: a strict ALLOWLIST of tags and attributes, not a
|
|
5
|
+
* blacklist — anything not explicitly permitted is stripped, including
|
|
6
|
+
* tags/attributes a blacklist would never have anticipated (custom elements,
|
|
7
|
+
* future HTML, namespaced foreign-content attributes). This is the package's
|
|
8
|
+
* only HTML sanitizer (see `controls/sanitize-css-value.ts` for the separate
|
|
9
|
+
* CSS-value sanitizer used elsewhere) and it is the thing standing between a
|
|
10
|
+
* host's `notesExtras.html` string and `dangerouslySetInnerHTML` in
|
|
11
|
+
* `tabs/notes-tab.tsx`.
|
|
12
|
+
*
|
|
13
|
+
* Implementation: parse with the browser's own `DOMParser` (dependency-free —
|
|
14
|
+
* no external sanitizer library), then rebuild a FRESH tree by walking the
|
|
15
|
+
* parsed result and copying across only allowlisted tags/attributes. Using
|
|
16
|
+
* the real HTML parser means malformed markup (mismatched tags, unclosed
|
|
17
|
+
* elements, HTML entities) is resolved into a well-formed DOM tree by the
|
|
18
|
+
* browser itself before the allowlist walk ever runs — the walk only ever
|
|
19
|
+
* sees valid nodes, never raw markup text it would have to re-parse or guess
|
|
20
|
+
* at (the classic weakness of a regex/string-replace "sanitizer").
|
|
21
|
+
*/
|
|
22
|
+
/**
|
|
23
|
+
* Sanitize host-supplied HTML (`TabConfig.notesExtras.html`) against the
|
|
24
|
+
* strict allowlist above. Returns an HTML string safe to pass to
|
|
25
|
+
* `dangerouslySetInnerHTML`.
|
|
26
|
+
*/
|
|
27
|
+
export declare function sanitizeHtml(html: string): string;
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Helpers for the opt-in click-to-cycle unit suffix on `length`-kind value
|
|
3
|
+
* rows (#519). Pure, DOM-free — safe to import from any editor component.
|
|
4
|
+
*
|
|
5
|
+
* `deriveCyclableUnit` is the single source of the opt-in/divergence policy;
|
|
6
|
+
* both editor call sites (`tabs/_generic-item-editor.tsx` and
|
|
7
|
+
* `tabs/generic-tab.tsx`) call it instead of re-deriving the same state.
|
|
8
|
+
*/
|
|
9
|
+
/**
|
|
10
|
+
* Split a stored length value (e.g. `"1.5rem"`, `".5rem"`) into its numeric
|
|
11
|
+
* magnitude and unit suffix. Accepts the same leading-number shapes as the
|
|
12
|
+
* platform's own `parseFloat` (leading-dot decimals included, e.g. `.5`) so
|
|
13
|
+
* this parser and `parseFloat(value)` never disagree on the same input.
|
|
14
|
+
* Mirrors (and slightly widens) the leading-number regex in
|
|
15
|
+
* `tokens/manifest.ts#parseNumericValue`; also returns the trailing suffix
|
|
16
|
+
* text so the interactive unit control can display the value's ACTUAL
|
|
17
|
+
* stored suffix rather than assuming the item's declared `type.unit` (a
|
|
18
|
+
* stored value can diverge from the declared unit — imported data, a
|
|
19
|
+
* manifest change, etc.).
|
|
20
|
+
*
|
|
21
|
+
* Returns `null` when the value has no leading number (e.g. a `clamp()`
|
|
22
|
+
* expression on a readonly row).
|
|
23
|
+
*/
|
|
24
|
+
export declare function splitLengthValue(value: string): {
|
|
25
|
+
magnitude: number;
|
|
26
|
+
suffix: string;
|
|
27
|
+
} | null;
|
|
28
|
+
/**
|
|
29
|
+
* Resolve the next unit when cycling through a declared `units` list
|
|
30
|
+
* (wrapping). When `currentUnit` is not present in `units` — a stored value
|
|
31
|
+
* whose suffix diverged from the declared list — the first activation lands
|
|
32
|
+
* on `units[0]` rather than guessing or throwing.
|
|
33
|
+
*/
|
|
34
|
+
export declare function nextCyclableUnit(units: readonly string[], currentUnit: string): string;
|
|
35
|
+
export interface CyclableUnitState {
|
|
36
|
+
/** Declared cyclable unit list — defined only when 2+ entries were declared. */
|
|
37
|
+
cyclableUnits: readonly string[] | undefined;
|
|
38
|
+
/** True iff `cyclableUnits` is defined (2+ entries) — the row is interactive.
|
|
39
|
+
* A present-but-single-entry (or omitted) `units` list is a DELIBERATE
|
|
40
|
+
* "not opted in yet" signal, not a config error — it keeps today's static,
|
|
41
|
+
* non-interactive unit span pixel-identical. */
|
|
42
|
+
isCyclableUnit: boolean;
|
|
43
|
+
/** Unit suffix to display, and to cycle FROM on the next activation. */
|
|
44
|
+
effectiveUnit: string;
|
|
45
|
+
/**
|
|
46
|
+
* Magnitude parsed by the SAME pass that produced `effectiveUnit` — reuse
|
|
47
|
+
* this (not a separately-computed `parseFloat(value)`) when emitting a
|
|
48
|
+
* post-cycle value, so the suffix-detection parse and the magnitude the
|
|
49
|
+
* cycle emits can never disagree. `null` when the stored value did not
|
|
50
|
+
* parse as a length at all; callers should fall back to their own
|
|
51
|
+
* last-known-good numeric state (e.g. the number input's draft) in that
|
|
52
|
+
* case.
|
|
53
|
+
*/
|
|
54
|
+
parsedMagnitude: number | null;
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* Derive the full opt-in/display/divergence state for a `length`-kind row's
|
|
58
|
+
* unit suffix from its declared `unit`/`units` and its current stored
|
|
59
|
+
* `value`. Single source of truth for both editor call sites.
|
|
60
|
+
*/
|
|
61
|
+
export declare function deriveCyclableUnit(unit: string, units: readonly string[] | undefined, value: string): CyclableUnitState;
|
package/dist/zdtp.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:where(.tokenpanel-shell,[data-design-token-panel-modal],.tokenpanel-highlight-settings-popover,.tokenpanel-color-picker,.tokenpanel-tooltip,.tokenpanel-elpath-label,.tokenpanel-elpath-toast){color-scheme:dark;--tokentweak-color-fg: #b8b8b8;--tokentweak-color-bg: #181818;--tokentweak-color-muted: #888888;--tokentweak-color-surface: #1c1c1c;--tokentweak-color-accent: #d69a66;--tokentweak-color-accent-hover: #a7c0e3;--tokentweak-color-code-bg: #383838;--tokentweak-color-code-fg: #e0e0e0;--tokentweak-color-success: #93bb77;--tokentweak-color-danger: #da6871;--tokentweak-color-warning: #dfbb77;--tokentweak-font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--tokentweak-pad-2xs: 2px;--tokentweak-pad-xs: 6px;--tokentweak-pad-sm: 8px;--tokentweak-pad-md: 12px;--tokentweak-pad-lg: 16px;--tokentweak-pad-xl: 24px;--tokentweak-pad-2xl: 32px;--tokentweak-gap-2xs: 7px;--tokentweak-gap-xs: 14px;--tokentweak-gap-sm: 20px;--tokentweak-gap-md: 24px;--tokentweak-gap-lg: 28px;--tokentweak-gap-xl: 40px;--tokentweak-gap-2xl: 56px;--tokentweak-text-micro: 12px;--tokentweak-text-caption: 14px;--tokentweak-text-small: 16px;--tokentweak-text-body: 19px;--tokentweak-text-subheading: 22px;--tokentweak-text-heading: 48px;--tokentweak-text-display: 60px;--radius-tokentweak: 4px;--tokentweak-z-overlay: 2147482990;--tokentweak-z-shell: 2147482991;--tokentweak-z-settings-popover: 2147482992;--tokentweak-z-color-picker: 2147482993;--tokentweak-z-tooltip: 2147482994;--tokentweak-z-inspector-box: 2147483000;--tokentweak-z-toast: 2147483001}.tokenpanel-color-picker{position:fixed;width:320px;padding:var(--tokentweak-pad-md);background:var(--tokentweak-color-surface);border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);box-shadow:0 8px 24px #0006;display:flex;flex-direction:column;gap:var(--tokentweak-gap-2xs);z-index:var(--tokentweak-z-color-picker);color:var(--tokentweak-color-fg);font-size:var(--tokentweak-text-caption)}.tokenpanel-color-picker[data-mode-shell=expanded]{width:520px;padding:var(--tokentweak-pad-lg);gap:var(--tokentweak-gap-xs)}.tokenpanel-color-picker-header{display:flex;align-items:center;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-drag-handle{flex-shrink:0;cursor:grab;color:var(--tokentweak-color-muted);font-size:var(--tokentweak-text-caption);line-height:1;padding:var(--tokentweak-pad-2xs);border-radius:var(--radius-tokentweak);-webkit-user-select:none;user-select:none;touch-action:none}.tokenpanel-color-picker-drag-handle:hover{color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-drag-handle:active{cursor:grabbing}.tokenpanel-color-picker-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tokentweak-color-fg);font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-caption)}.tokenpanel-color-picker-mode-toggle{display:flex;align-items:center;gap:2px;background:var(--tokentweak-color-bg);border:1px solid var(--tokentweak-color-muted);border-radius:999px;padding:2px;flex-shrink:0}.tokenpanel-color-picker-mode-btn{border-radius:999px;padding-inline:var(--tokentweak-pad-xs);padding-block:var(--tokentweak-pad-2xs);font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-muted);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease;white-space:nowrap}.tokenpanel-color-picker-mode-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-mode-btn[aria-pressed=true]{background-color:var(--tokentweak-color-accent);color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-mode-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-picker-expand-btn{flex-shrink:0;color:var(--tokentweak-color-muted);cursor:pointer;-webkit-user-select:none;user-select:none;padding:var(--tokentweak-pad-2xs);border-radius:var(--radius-tokentweak);transition:color .12s ease}.tokenpanel-color-picker-expand-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-expand-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-picker-top-row{display:flex;align-items:center;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-preview{position:relative;flex-shrink:0;width:48px;height:48px;border-radius:var(--radius-tokentweak);border:1px solid var(--tokentweak-color-muted);overflow:hidden}.tokenpanel-color-picker-preview-checkerboard{position:absolute;inset:0;background-image:repeating-conic-gradient(gray 0% 25%,silver 0% 50%);background-size:10px 10px}.tokenpanel-color-picker-preview-color{position:absolute;inset:0}.tokenpanel-color-picker-hex-input{flex:1;min-width:0;font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-caption);background:var(--tokentweak-color-bg);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);padding:var(--tokentweak-pad-2xs) var(--tokentweak-pad-xs);transition:border-color .12s ease}.tokenpanel-color-picker-hex-input:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-hex-input:focus-visible{border-color:var(--tokentweak-color-accent);outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-picker-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}.tokenpanel-color-picker-grid>[role=row]{display:contents}.tokenpanel-color-picker[data-mode-shell=expanded] .tokenpanel-color-picker-grid{grid-template-columns:repeat(12,1fr)}.tokenpanel-color-picker-grid-cell{position:relative;aspect-ratio:1;border-radius:var(--radius-tokentweak);cursor:pointer;transition:box-shadow .12s ease}.tokenpanel-color-picker-grid-cell:hover{box-shadow:0 0 0 2px var(--tokentweak-color-fg)}.tokenpanel-color-picker-grid-cell[aria-selected=true]{box-shadow:0 0 0 2px var(--tokentweak-color-accent)}.tokenpanel-color-picker-grid-cell:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-picker-grid-cell[data-oog=true]:after{content:"";position:absolute;inset:1px;border:1px dashed oklch(98% 0 0 / .4);border-radius:var(--radius-tokentweak);pointer-events:none}.tokenpanel-color-picker-sliders{display:flex;flex-direction:column;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-slider-row{display:flex;align-items:center;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-slider-label{flex-shrink:0;width:20px;font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-muted);-webkit-user-select:none;user-select:none}.tokenpanel-color-picker-slider{flex:1;position:relative;height:24px;display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.tokenpanel-color-picker-slider:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:var(--radius-tokentweak)}.tokenpanel-color-picker-slider-track{width:100%;height:18px;border-radius:9px;overflow:hidden;border:1px solid var(--tokentweak-color-muted)}.tokenpanel-color-picker-slider-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:var(--tokentweak-color-fg);border:2px solid var(--tokentweak-color-bg);box-shadow:0 0 0 1px var(--tokentweak-color-muted);pointer-events:none}.tokenpanel-color-picker-slider-value{flex-shrink:0;width:48px;text-align:right;font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-readout{display:none;font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-muted);padding-top:var(--tokentweak-pad-2xs);border-top:1px solid var(--tokentweak-color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tokenpanel-color-picker[data-mode-shell=expanded] .tokenpanel-color-picker-readout{display:block}.tokenpanel-palette-chart svg{fill:currentColor;overflow:visible}.tokenpanel-palette-chart{position:relative;width:100%;height:280px;border-radius:var(--radius-tokentweak);overflow:hidden;touch-action:none}.tokenpanel-palette-chart-bands{position:absolute;inset:0;display:block;width:100%;height:100%}.tokenpanel-palette-chart-curve{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;overflow:visible}.tokenpanel-palette-chart-hit-line{fill:none;pointer-events:stroke;cursor:grab}.tokenpanel-palette-chart-hit-line:active{cursor:grabbing}.tokenpanel-palette-chart-line{fill:none}.tokenpanel-palette-chart-curve--l .tokenpanel-palette-chart-line{stroke:var(--tokentweak-color-accent)}.tokenpanel-palette-chart-curve--c .tokenpanel-palette-chart-line{stroke:var(--tokentweak-color-success)}.tokenpanel-palette-chart-curve--h .tokenpanel-palette-chart-line{stroke:var(--tokentweak-color-warning)}.tokenpanel-palette-chart-node-visual{fill:var(--tokentweak-color-bg)}.tokenpanel-palette-chart-curve--l .tokenpanel-palette-chart-node-visual{stroke:var(--tokentweak-color-accent)}.tokenpanel-palette-chart-curve--c .tokenpanel-palette-chart-node-visual{stroke:var(--tokentweak-color-success)}.tokenpanel-palette-chart-curve--h .tokenpanel-palette-chart-node-visual{stroke:var(--tokentweak-color-warning)}.tokenpanel-palette-chart-node-hit{pointer-events:all;cursor:grab;outline:none}.tokenpanel-palette-chart-node-hit:active{cursor:grabbing}.tokenpanel-palette-chart-node-hit:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-palette-edit-view{display:flex;flex-direction:column;gap:14px}.tokenpanel-palette-edit-group{display:flex;flex-direction:column;gap:6px}.tokenpanel-palette-edit-swatches{display:flex;gap:4px}.tokenpanel-palette-edit-swatch{position:relative;flex:1 1 0;height:30px;border-radius:var(--radius-tokentweak);border:1px solid rgb(from var(--tokentweak-color-fg) r g b / .08);outline:0 solid transparent;cursor:pointer;transition:outline-width .08s ease}.tokenpanel-palette-edit-swatch.is-selected{outline:2px solid var(--tokentweak-color-accent);outline-offset:1px}.tokenpanel-palette-edit-swatch:focus-visible{outline:2px solid var(--tokentweak-color-accent-hover);outline-offset:1px}.tokenpanel-palette-edit-swatch[data-out-of-gamut]{border-style:dashed;border-color:var(--tokentweak-color-danger);border-width:2px}.tokenpanel-palette-edit-swatch-idx{position:absolute;inset:auto 0 2px;text-align:center;font-size:9px;color:#0000008c;text-shadow:0 0 2px rgba(255,255,255,.4);pointer-events:none}.tokenpanel-palette-edit-editor{margin-top:6px;border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);background:var(--tokentweak-color-surface)}.tokenpanel-palette-edit-editor-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-edit-editor-title{flex:1 1 auto;font-size:11px;color:var(--tokentweak-color-muted)}.tokenpanel-palette-edit-channels{display:flex;gap:3px}.tokenpanel-palette-edit-channel{padding:4px 9px;font-size:11px;font-weight:650;border-radius:var(--radius-tokentweak);border:1px solid var(--tokentweak-color-muted);color:var(--tokentweak-color-muted);cursor:pointer;-webkit-user-select:none;user-select:none}.tokenpanel-palette-edit-channel:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:1px}.tokenpanel-palette-edit-channel--l.is-on{border-color:var(--tokentweak-color-accent);color:var(--tokentweak-color-accent)}.tokenpanel-palette-edit-channel--c.is-on{border-color:var(--tokentweak-color-success);color:var(--tokentweak-color-success)}.tokenpanel-palette-edit-channel--h.is-on{border-color:var(--tokentweak-color-warning);color:var(--tokentweak-color-warning)}.tokenpanel-palette-edit-direct{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-edit-direct-hint{font-size:11px;color:var(--tokentweak-color-muted)}.tokenpanel-palette-readout{display:flex;gap:10px;align-items:center;padding:8px 10px 10px;border-top:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-readout-swatch{flex:none;width:40px;height:40px;border-radius:var(--radius-tokentweak);border:1px solid rgb(from var(--tokentweak-color-fg) r g b / .12)}.tokenpanel-palette-readout-rows{font-family:var(--tokentweak-font-mono);font-size:10.5px;color:var(--tokentweak-color-fg);line-height:1.5}.tokenpanel-palette-readout-key{display:inline-block;width:42px;color:var(--tokentweak-color-muted);font-weight:600}.tokenpanel-palette-readout-gamut{margin-top:4px;color:var(--tokentweak-color-danger);font-size:10px}:where(.tokenpanel-shell,[data-design-token-panel-modal],.tokenpanel-color-picker,.tokenpanel-highlight-settings-popover,.tokenpanel-tooltip,.tokenpanel-elpath-label,.tokenpanel-elpath-toast){box-sizing:border-box}:where(.tokenpanel-shell,[data-design-token-panel-modal],.tokenpanel-color-picker,.tokenpanel-highlight-settings-popover) :where(*,*:before,*:after){box-sizing:border-box}.tokenpanel-shell{z-index:var(--tokentweak-z-shell);display:flex;flex-direction:column;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);border-radius:var(--radius-tokentweak);box-shadow:0 4px 24px #00000040}.tokenpanel-resize-handle{position:absolute;right:2px;bottom:2px;width:16px;height:16px;cursor:nwse-resize;-webkit-user-select:none;user-select:none;background-image:repeating-linear-gradient(-45deg,transparent 0,transparent 2px,var(--tokentweak-color-muted) 2px,var(--tokentweak-color-muted) 3px);-webkit-mask-image:linear-gradient(135deg,transparent 50%,#000 50%);mask-image:linear-gradient(135deg,transparent 50%,#000 50%);border-bottom-right-radius:var(--radius-tokentweak);transition:opacity .15s ease;opacity:.7}.tokenpanel-resize-handle:hover,.tokenpanel-resize-handle:focus-visible{opacity:1}.tokenpanel-header{display:flex;align-items:center;gap:var(--tokentweak-pad-md);padding-inline:var(--tokentweak-pad-xl);padding-block:var(--tokentweak-gap-xs);border-bottom:1px solid var(--tokentweak-color-muted);flex-shrink:0}.tokenpanel-title{color:var(--tokentweak-color-fg);font-weight:600;font-size:14px;flex-shrink:0}.tokenpanel-action-link{color:var(--tokentweak-color-accent);font-size:12px;background:none;border:none;padding:0;cursor:pointer;transition:color .15s ease}.tokenpanel-action-link:hover{color:var(--tokentweak-color-accent-hover)}.tokenpanel-spacer{flex:1}.tokenpanel-close-btn{color:var(--tokentweak-color-muted);background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;transition:color .15s ease;display:inline-flex;align-items:center;justify-content:center}.tokenpanel-close-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-tabbar{display:flex;align-items:center;border-bottom:1px solid var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-xl);flex-shrink:0;gap:var(--tokentweak-pad-md)}.tokenpanel-tabbar-tabs{display:flex;align-items:center;gap:2px;flex:1;min-width:0}.tokenpanel-tab-button{border:none;background:none;padding-inline:var(--tokentweak-pad-md);padding-block:var(--tokentweak-gap-xs);font-size:14px;cursor:pointer;border-bottom:2px solid transparent;color:var(--tokentweak-color-muted);transition:color .15s ease,border-color .15s ease}.tokenpanel-tab-button:hover,.tokenpanel-tab-button:focus-visible{color:var(--tokentweak-color-fg);text-decoration:underline}.tokenpanel-tab-button.is-active{color:var(--tokentweak-color-fg);border-bottom-color:var(--tokentweak-color-accent);text-decoration:none}.tokenpanel-density{display:flex;align-items:center;gap:var(--tokentweak-pad-sm);flex-shrink:0}.tokenpanel-density-label{color:var(--tokentweak-color-muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;-webkit-user-select:none;user-select:none;cursor:pointer}.tokenpanel-density-slider{width:80px;accent-color:var(--tokentweak-color-accent);cursor:pointer}.tokenpanel-body{flex:1;min-height:0;overflow-y:auto;padding-inline:var(--tokentweak-pad-xl);padding-block:var(--tokentweak-gap-sm)}.tokenpanel-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:192px;padding-block:var(--tokentweak-gap-md);padding-inline:var(--tokentweak-pad-xl)}.tokenpanel-empty-state-text{color:var(--tokentweak-color-muted, #a8a8a8);font-size:13px;line-height:1.5;max-width:512px;margin:0}.tokenpanel-empty-state-text code{font-family:var(--tokentweak-font-mono, Menlo, Monaco, Consolas, monospace);font-size:13px;color:var(--tokentweak-color-fg)}.tokenpanel-empty-state-link{color:var(--tokentweak-color-accent);text-decoration:underline;transition:color .15s ease}.tokenpanel-empty-state-link:hover,.tokenpanel-empty-state-link:focus-visible{color:var(--tokentweak-color-accent-hover)}.tokenpanel-tab-content{display:flex;flex-direction:column;gap:var(--tokentweak-gap-sm)}.tokenpanel-tab-actions{display:flex;align-items:center;gap:var(--tokentweak-pad-md)}.tokenpanel-tab-section{position:relative;flex-shrink:0;border:1px solid var(--tokentweak-color-muted);border-radius:8px;padding:18px 14px 14px}.tokenpanel-tab-section-heading{position:absolute;top:-10px;left:12px;background:var(--tokentweak-color-surface);padding:0 8px;margin:0;color:var(--tokentweak-color-fg);font-family:inherit;font-weight:600;font-size:13px;line-height:20px;text-transform:none;letter-spacing:normal}.tokenpanel-tab-section-heading--color{font-size:14px}.tokenpanel-tab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--tokenpanel-grid-min, 288px),1fr));gap:var(--tokentweak-gap-xs)}.tokenpanel-color-preset-select{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-sm);padding-block:2px;font-size:12px;border-radius:var(--radius-tokentweak);max-width:224px;cursor:pointer;transition:border-color .15s ease}.tokenpanel-color-preset-select:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-color-palette-grid,.tokenpanel-color-palette-grid--secondary{display:grid;grid-template-columns:repeat(auto-fit,minmax(56px,1fr));gap:var(--tokentweak-pad-sm)}.tokenpanel-color-base-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--tokenpanel-grid-min, 176px),1fr));gap:6px}.tokenpanel-color-swatch-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;width:100%}.tokenpanel-color-swatch-button{display:block;border:1px solid var(--tokentweak-color-muted);cursor:pointer;width:56px;height:56px;border-radius:var(--radius-tokentweak);background:none;padding:0;transition:border-color .15s ease}.tokenpanel-color-swatch-button:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-color-swatch-button:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-field{display:inline-flex}.tokenpanel-color-field-swatch{display:block;width:44px;height:28px;border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);cursor:pointer;padding:0;transition:border-color .15s ease}.tokenpanel-color-field-swatch:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-color-field-swatch:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-field-swatch[aria-disabled=true]{cursor:default;opacity:.6}.tokenpanel-color-swatch-label-row{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%}.tokenpanel-color-swatch-label{color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);-webkit-user-select:none;user-select:none;font-size:11px;line-height:1.1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-tooltip{position:fixed;z-index:var(--tokentweak-z-tooltip);pointer-events:none;background:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);border-radius:4px;padding:4px 8px;font-family:var(--tokentweak-font-mono);font-size:11px;line-height:1.3;white-space:nowrap;box-shadow:0 4px 12px #00000080;opacity:0;transform:translateY(2px);transition:opacity 90ms ease,transform 90ms ease}.tokenpanel-tooltip[data-show=true]{opacity:1;transform:translateY(0)}.tokenpanel-popover{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);padding:12px;border-radius:var(--radius-tokentweak);box-shadow:0 4px 12px #0000004d}.tokenpanel-palette-selector{position:relative;width:100%;display:flex;align-items:center;gap:6px}.tokenpanel-palette-trigger{display:flex;align-items:center;gap:4px;flex:1;min-width:0;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);padding-inline:6px;padding-block:4px;font-size:12px;border-radius:var(--radius-tokentweak);cursor:pointer;transition:border-color .15s ease}.tokenpanel-palette-trigger:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-palette-trigger:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-palette-trigger-label{flex:1;min-width:0;text-align:left;color:var(--tokentweak-color-fg);font-family:var(--tokentweak-font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-palette-trigger-color{flex-shrink:0;border:1px solid var(--tokentweak-color-muted);width:14px;height:14px;border-radius:2px}.tokenpanel-palette-trigger-value{flex-shrink:0;color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);width:2.5em}.tokenpanel-palette-trigger-icon{color:var(--tokentweak-color-muted);flex-shrink:0}.tokenpanel-palette-options{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);padding:10px;border-radius:var(--radius-tokentweak);box-shadow:0 4px 12px #0000004d}.tokenpanel-palette-options-extras{display:flex;gap:6px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-extra-option{display:flex;align-items:center;gap:6px;padding-inline:8px;padding-block:4px;border-radius:4px;font-size:16px;background:none;border:none;cursor:pointer;transition:background-color .15s ease}.tokenpanel-palette-extra-option:hover{background-color:rgb(from var(--tokentweak-color-fg) r g b / .1)}.tokenpanel-palette-extra-option.is-selected{background-color:rgb(from var(--tokentweak-color-accent) r g b / .2)}.tokenpanel-palette-extra-option.is-active{outline:2px solid var(--tokentweak-color-accent);outline-offset:1px}.tokenpanel-palette-extra-color{width:28px;height:28px;border-radius:3px;border:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-extra-label{color:var(--tokentweak-color-fg)}.tokenpanel-palette-options-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}.tokenpanel-palette-option-button{width:48px;height:48px;border-radius:3px;border:1px solid var(--tokentweak-color-muted);cursor:pointer;padding:0;transition:box-shadow .15s ease}.tokenpanel-palette-option-button:hover{box-shadow:0 0 0 2px var(--tokentweak-color-fg)}.tokenpanel-palette-option-button.is-selected{box-shadow:0 0 0 2px var(--tokentweak-color-accent)}.tokenpanel-palette-option-button.is-active{outline:2px solid var(--tokentweak-color-fg);outline-offset:1px}.tokenpanel-row{display:flex;align-items:center;gap:var(--tokentweak-pad-sm)}.tokenpanel-row--stacked{display:flex;flex-direction:column;gap:2px}.tokenpanel-row--column{display:flex;flex-direction:column;gap:4px}.tokenpanel-row-head{display:flex;align-items:center;gap:var(--tokentweak-pad-sm)}.tokenpanel-row-label{color:var(--tokentweak-color-fg);font-family:var(--tokentweak-font-mono);flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-row-input-group{display:flex;align-items:center;gap:4px;flex-shrink:0}.tokenpanel-row-number-input{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:6px;padding-block:2px;font-family:var(--tokentweak-font-mono);text-align:right;font-size:12px;width:80px;border-radius:var(--radius-tokentweak)}.tokenpanel-row-number-input:disabled{opacity:.6}.tokenpanel-row-number-input--invalid{border-color:var(--tokentweak-color-danger);color:var(--tokentweak-color-danger)}.tokenpanel-row-unit{color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);-webkit-user-select:none;user-select:none;font-size:12px;width:32px}.tokenpanel-row-select{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:6px;padding-block:2px;font-family:var(--tokentweak-font-mono);font-size:12px;width:112px;border-radius:var(--radius-tokentweak)}.tokenpanel-row-select:disabled{opacity:.6}.tokenpanel-row-text-input{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:6px;padding-block:2px;font-family:var(--tokentweak-font-mono);font-size:12px;flex:1;min-width:0;border-radius:var(--radius-tokentweak)}.tokenpanel-row-text-input:disabled{opacity:.6}.tokenpanel-pill-toggle{display:flex;align-items:center;gap:var(--tokentweak-pad-xs);flex-shrink:0;cursor:pointer}.tokenpanel-pill-toggle-checkbox{accent-color:var(--tokentweak-color-accent)}.tokenpanel-pill-toggle-text{color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);font-size:12px}[data-design-token-panel-modal]{margin-inline:auto;width:100%;max-width:736px;max-height:80vh;overflow-y:auto;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);padding:var(--tokentweak-pad-xl);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-user-select:text;user-select:text}[data-design-token-panel-modal]::backdrop{background-color:rgb(from var(--tokentweak-color-bg) r g b / .8)}[data-design-token-panel-modal] [class*=__header]{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--tokentweak-pad-md);margin-bottom:var(--tokentweak-gap-sm)}[data-design-token-panel-modal] [class*=__title]{font-size:var(--tokentweak-text-subheading);font-weight:700;color:var(--tokentweak-color-fg)}[data-design-token-panel-modal] [class*=__hint]{font-size:var(--tokentweak-text-small);color:var(--tokentweak-color-muted);margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__section-heading]{font-size:var(--tokentweak-text-small);font-weight:700;color:var(--tokentweak-color-fg);margin-top:var(--tokentweak-gap-sm);margin-bottom:var(--tokentweak-gap-2xs)}[data-design-token-panel-modal] [class*=__list]:not([class*=__list-item]){overflow-x:auto;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-code-fg);padding:var(--tokentweak-pad-sm);font-size:var(--tokentweak-text-small);margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__list-item]{font-family:var(--tokentweak-font-mono)}[data-design-token-panel-modal] [class*=__actions]{display:flex;align-items:center;gap:var(--tokentweak-pad-md);margin-top:var(--tokentweak-gap-md)}[data-design-token-panel-modal] [class*=__toggle]{display:inline-flex;align-items:center;gap:var(--tokentweak-pad-xs);font-size:var(--tokentweak-text-small);color:var(--tokentweak-color-fg);cursor:pointer;margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__textarea]{width:100%;min-height:192px;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-code-fg);padding:var(--tokentweak-pad-sm);font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-small);resize:vertical;margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__json]{overflow-x:auto;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-code-fg);padding:var(--tokentweak-pad-sm);font-size:var(--tokentweak-text-small);white-space:pre;font-family:var(--tokentweak-font-mono)}[data-design-token-panel-modal] [class*=__status]{font-size:var(--tokentweak-text-small);margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__status--info]{color:var(--tokentweak-color-success)}[data-design-token-panel-modal] [class*=__status--error]{color:var(--tokentweak-color-danger)}[data-design-token-panel-modal] [class*=__status--warning]{color:var(--tokentweak-color-warning)}[data-design-token-panel-modal] [class*=__status--success]{color:var(--tokentweak-color-success)}[data-design-token-panel-modal] [class*=__applying]{display:flex;align-items:center;gap:var(--tokentweak-pad-sm);border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-muted);padding:var(--tokentweak-pad-sm);font-size:var(--tokentweak-text-small)}[data-design-token-panel-modal] [class*=__spinner]{display:inline-block;width:16px;height:16px;border:2px solid var(--tokentweak-color-muted);border-top-color:var(--tokentweak-color-fg);border-radius:50%;animation:design-token-panel-modal-spin .75s linear infinite}@keyframes design-token-panel-modal-spin{to{transform:rotate(360deg)}}[data-design-token-panel-modal] [class*=__revert-hint]{font-size:var(--tokentweak-text-small);font-style:italic;color:var(--tokentweak-color-muted);margin-top:var(--tokentweak-gap-sm);margin-bottom:var(--tokentweak-gap-2xs)}[data-design-token-panel-modal] [class*=__button]{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-lg);padding-block:var(--tokentweak-gap-2xs);font-size:var(--tokentweak-text-small);cursor:pointer;transition:color .15s ease,border-color .15s ease,background-color .15s ease}[data-design-token-panel-modal] [class*=__button]:hover,[data-design-token-panel-modal] [class*=__button]:focus-visible{color:var(--tokentweak-color-fg);border-color:var(--tokentweak-color-fg)}[data-design-token-panel-modal] [class*=__button]:disabled{cursor:not-allowed;opacity:.5}[data-design-token-panel-modal] [class*=__button--primary]{border-color:var(--tokentweak-color-accent);background-color:var(--tokentweak-color-accent);color:var(--tokentweak-color-bg)}[data-design-token-panel-modal] [class*=__button--primary]:hover,[data-design-token-panel-modal] [class*=__button--primary]:focus-visible{border-color:var(--tokentweak-color-accent-hover);background-color:var(--tokentweak-color-accent-hover);color:var(--tokentweak-color-bg)}[data-design-token-panel-modal] [class*=__close-button]{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-sm);padding-block:var(--tokentweak-gap-2xs);font-size:var(--tokentweak-text-small);cursor:pointer;transition:color .15s ease,border-color .15s ease}[data-design-token-panel-modal] [class*=__close-button]:hover,[data-design-token-panel-modal] [class*=__close-button]:focus-visible{color:var(--tokentweak-color-fg);border-color:var(--tokentweak-color-fg)}.tokenpanel-tier-ref-selector{flex:1;min-width:0}select.tokenpanel-tier-ref-select{width:100%;background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);padding-inline:var(--tokentweak-pad-sm);padding-block:4px;font-family:var(--tokentweak-font-mono);font-size:12px;cursor:pointer}select.tokenpanel-tier-ref-select:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-row-label-sub{display:block;font-size:var(--tokentweak-text-micro, 11px);color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);line-height:1.2}.tokenpanel-per-mode-toggle{display:inline-flex;align-items:center;gap:4px;color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);font-size:11px;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.tokenpanel-per-mode-fields{display:flex;align-items:center;gap:var(--tokentweak-pad-sm);flex-wrap:wrap}.tokenpanel-tab-section [role=heading]{display:block}.tokenpanel-code{font-family:var(--tokentweak-font-mono);font-size:inherit;background:none;color:inherit;padding:0;border:none;border-radius:0;white-space:pre-wrap}[data-design-token-panel-modal] [class*=__button][aria-disabled=true]{cursor:not-allowed;opacity:.5;pointer-events:none}[data-design-token-panel-modal] [role=button]:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-action-link:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-close-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-tab-button:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-highlight-overlay{margin:0;padding:0;border:0;background:transparent;display:block}.tokenpanel-highlight-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;color:var(--tokentweak-color-muted);cursor:pointer;vertical-align:middle;border-radius:2px;transition:background-color .15s ease,color .15s ease}.tokenpanel-highlight-toggle:hover{color:var(--tokentweak-color-fg);background-color:rgb(from var(--tokentweak-color-fg) r g b / .1)}.tokenpanel-highlight-toggle:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-highlight-toggle.is-active{opacity:1}:where(.tokenpanel-shell) svg{fill:currentColor!important;pointer-events:none;display:inline-block;overflow:visible}:where(.tokenpanel-shell) .tokenpanel-highlight-toggle svg{fill:none!important;stroke:currentColor}.tokenpanel-highlight-settings-popover{width:370px;background:var(--tokentweak-color-surface);border:1px solid var(--tokentweak-color-muted);border-radius:6px;box-shadow:0 8px 32px #00000080}.tokenpanel-highlight-settings-header{padding:10px 16px;border-bottom:1px solid var(--tokentweak-color-muted);font-weight:600;font-size:13px;color:var(--tokentweak-color-fg);display:flex;align-items:center;justify-content:space-between;gap:12px}.tokenpanel-highlight-settings-header-label{flex:1;min-width:0}.tokenpanel-highlight-settings-outline-control{display:flex;align-items:center;gap:4px;flex-shrink:0}.tokenpanel-highlight-settings-outline-input{width:44px;background:var(--tokentweak-color-bg);border:1px solid var(--tokentweak-color-muted);border-radius:3px;color:var(--tokentweak-color-fg);font-size:12px;font-variant-numeric:tabular-nums;padding:3px 6px;text-align:right}.tokenpanel-highlight-settings-outline-px{color:var(--tokentweak-color-muted);font-size:12px;font-weight:400}.tokenpanel-highlight-settings-list{padding:4px 0;display:grid;grid-template-columns:1fr 1fr}.tokenpanel-highlight-settings-row{display:grid;grid-template-columns:22px 32px 1fr;gap:8px;align-items:center;padding:8px 12px}.tokenpanel-highlight-settings-row:hover{background:rgb(from var(--tokentweak-color-fg) r g b / .03)}.tokenpanel-highlight-settings-num{color:var(--tokentweak-color-muted);font-variant-numeric:tabular-nums;text-align:right;font-size:11px}.tokenpanel-highlight-settings-ring{width:28px;height:28px;border-radius:3px;background:transparent;box-sizing:border-box;cursor:pointer;flex-shrink:0}.tokenpanel-highlight-settings-ring:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-highlight-settings-name{font-family:var(--tokentweak-font-mono);font-size:12px;color:var(--tokentweak-color-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-highlight-settings-name.is-active{color:var(--tokentweak-color-fg)}.tokenpanel-highlight-settings-footer{padding:12px 16px;border-top:1px solid var(--tokentweak-color-muted);display:flex;justify-content:flex-end;gap:var(--tokentweak-pad-sm)}.tokenpanel-highlight-settings-reset-btn{padding:6px 12px;background:var(--tokentweak-color-code-bg);border:1px solid var(--tokentweak-color-muted);border-radius:3px;cursor:pointer;font-size:12px;color:var(--tokentweak-color-fg);transition:background .15s ease}.tokenpanel-highlight-settings-reset-btn:hover{background:rgb(from var(--tokentweak-color-fg) r g b / .08)}.tokenpanel-highlight-settings-reset-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:3px}.tokenpanel-gear-btn{color:var(--tokentweak-color-muted);background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;transition:color .15s ease;display:inline-flex;align-items:center;justify-content:center}.tokenpanel-gear-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-gear-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-elpath-toggle{color:var(--tokentweak-color-muted);background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;transition:color .15s ease;display:inline-flex;align-items:center;justify-content:center}.tokenpanel-elpath-toggle:hover{color:var(--tokentweak-color-fg)}.tokenpanel-elpath-toggle:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-elpath-toggle.is-active{color:var(--tokentweak-color-accent)}:where(.tokenpanel-shell) .tokenpanel-elpath-toggle svg{fill:none!important;stroke:currentColor}html.tokenpanel-elpath-inspecting,html.tokenpanel-elpath-inspecting *{cursor:crosshair!important;-webkit-user-select:none!important;user-select:none!important}.tokenpanel-elpath-box{margin:0;padding:0;border:0;pointer-events:none;box-sizing:border-box;background:#6fa8dc40;outline:1px solid rgb(111 168 220 / .9);outline-offset:-1px;box-shadow:inset 0 0 0 1px #6fa8dce6}.tokenpanel-elpath-label{pointer-events:none;display:inline-flex;align-items:baseline;gap:8px;max-width:90vw;padding:2px 6px;border-radius:3px;background:var(--tokentweak-color-surface, #1c1c1c);color:var(--tokentweak-color-fg, #b8b8b8);font-family:var(--tokentweak-font-mono, Menlo, Monaco, Consolas, monospace);font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 3px #0006}.tokenpanel-elpath-label-name{color:var(--tokentweak-color-accent, #d69a66);font-weight:600;overflow:hidden;text-overflow:ellipsis}.tokenpanel-elpath-label-size{color:var(--tokentweak-color-muted, #888888);flex-shrink:0}.tokenpanel-elpath-toast{pointer-events:none;display:inline-flex;align-items:center;gap:8px;margin:12px auto 0;padding:8px 14px;border-radius:6px;background:var(--tokentweak-color-surface, #1c1c1c);color:var(--tokentweak-color-fg, #b8b8b8);font-family:var(--tokentweak-font-mono, Menlo, Monaco, Consolas, monospace);font-size:12px;line-height:1.4;max-width:min(90vw,520px);box-shadow:0 4px 16px #00000073;border:1px solid rgb(255 255 255 / .08)}.tokenpanel-elpath-toast .tokenpanel-elpath-toast-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-elpath-toast svg{flex-shrink:0;fill:none!important;stroke:var(--tokentweak-color-success, #93bb77);pointer-events:none;display:inline-block;overflow:visible}.tokenpanel-elpath-toast.is-error svg{stroke:var(--tokentweak-color-danger, #da6871)}.tokenpanel-row-number-input:focus-visible,.tokenpanel-row-text-input:focus-visible,.tokenpanel-row-select:focus-visible,.tokenpanel-color-preset-select:focus-visible,.tokenpanel-density-slider:focus-visible,.tokenpanel-pill-toggle-checkbox:focus-visible,.tokenpanel-highlight-settings-outline-input:focus-visible,[data-design-token-panel-modal] [class*=__textarea]:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-close-btn{position:relative}.tokenpanel-close-btn:after{content:"";position:absolute;inset:-4px}.tokenpanel-gear-btn{position:relative}.tokenpanel-gear-btn:after{content:"";position:absolute;inset:-5px}.tokenpanel-elpath-toggle{position:relative}.tokenpanel-elpath-toggle:after{content:"";position:absolute;inset:-4px}.tokenpanel-highlight-toggle{position:relative}.tokenpanel-highlight-toggle:after{content:"";position:absolute;inset:-4px}.tokenpanel-resize-handle{overflow:visible}.tokenpanel-resize-handle:after{content:"";position:absolute;inset:-4px;cursor:nwse-resize}@media(prefers-reduced-motion:reduce){[data-design-token-panel-modal] [class*=__spinner]{animation:design-token-panel-modal-pulse 1.5s ease-in-out infinite}@keyframes design-token-panel-modal-pulse{0%,to{opacity:1}50%{opacity:.4}}.tokenpanel-tooltip{transform:none;transition:opacity 90ms ease}.tokenpanel-tooltip[data-show=true]{transform:none}}
|
|
1
|
+
:where(.tokenpanel-shell,[data-design-token-panel-modal],.tokenpanel-highlight-settings-popover,.tokenpanel-color-picker,.tokenpanel-tooltip,.tokenpanel-elpath-label,.tokenpanel-elpath-toast){color-scheme:dark;--tokentweak-color-fg: #b8b8b8;--tokentweak-color-bg: #181818;--tokentweak-color-muted: #888888;--tokentweak-color-surface: #1c1c1c;--tokentweak-color-accent: #d69a66;--tokentweak-color-accent-hover: #a7c0e3;--tokentweak-color-code-bg: #383838;--tokentweak-color-code-fg: #e0e0e0;--tokentweak-color-success: #93bb77;--tokentweak-color-danger: #da6871;--tokentweak-color-warning: #dfbb77;--tokentweak-font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--tokentweak-pad-2xs: 2px;--tokentweak-pad-xs: 6px;--tokentweak-pad-sm: 8px;--tokentweak-pad-md: 12px;--tokentweak-pad-lg: 16px;--tokentweak-pad-xl: 24px;--tokentweak-pad-2xl: 32px;--tokentweak-gap-2xs: 7px;--tokentweak-gap-xs: 14px;--tokentweak-gap-sm: 20px;--tokentweak-gap-md: 24px;--tokentweak-gap-lg: 28px;--tokentweak-gap-xl: 40px;--tokentweak-gap-2xl: 56px;--tokentweak-text-micro: 12px;--tokentweak-text-caption: 14px;--tokentweak-text-small: 16px;--tokentweak-text-body: 19px;--tokentweak-text-subheading: 22px;--tokentweak-text-heading: 48px;--tokentweak-text-display: 60px;--radius-tokentweak: 4px;--tokentweak-z-overlay: 2147482990;--tokentweak-z-shell: 2147482991;--tokentweak-z-settings-popover: 2147482992;--tokentweak-z-color-picker: 2147482993;--tokentweak-z-tooltip: 2147482994;--tokentweak-z-inspector-box: 2147483000;--tokentweak-z-toast: 2147483001}.tokenpanel-color-picker{position:fixed;width:320px;padding:var(--tokentweak-pad-md);background:var(--tokentweak-color-surface);border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);box-shadow:0 8px 24px #0006;display:flex;flex-direction:column;gap:var(--tokentweak-gap-2xs);z-index:var(--tokentweak-z-color-picker);color:var(--tokentweak-color-fg);font-size:var(--tokentweak-text-caption)}.tokenpanel-color-picker[data-mode-shell=expanded]{width:520px;padding:var(--tokentweak-pad-lg);gap:var(--tokentweak-gap-xs)}.tokenpanel-color-picker-header{display:flex;align-items:center;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-drag-handle{flex-shrink:0;cursor:grab;color:var(--tokentweak-color-muted);font-size:var(--tokentweak-text-caption);line-height:1;padding:var(--tokentweak-pad-2xs);border-radius:var(--radius-tokentweak);-webkit-user-select:none;user-select:none;touch-action:none}.tokenpanel-color-picker-drag-handle:hover{color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-drag-handle:active{cursor:grabbing}.tokenpanel-color-picker-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tokentweak-color-fg);font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-caption)}.tokenpanel-color-picker-mode-toggle{display:flex;align-items:center;gap:2px;background:var(--tokentweak-color-bg);border:1px solid var(--tokentweak-color-muted);border-radius:999px;padding:2px;flex-shrink:0}.tokenpanel-color-picker-mode-btn{border-radius:999px;padding-inline:var(--tokentweak-pad-xs);padding-block:var(--tokentweak-pad-2xs);font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-muted);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease;white-space:nowrap}.tokenpanel-color-picker-mode-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-mode-btn[aria-pressed=true]{background-color:var(--tokentweak-color-accent);color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-mode-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-picker-expand-btn{flex-shrink:0;color:var(--tokentweak-color-muted);cursor:pointer;-webkit-user-select:none;user-select:none;padding:var(--tokentweak-pad-2xs);border-radius:var(--radius-tokentweak);transition:color .12s ease}.tokenpanel-color-picker-expand-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-expand-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-picker-top-row{display:flex;align-items:center;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-preview{position:relative;flex-shrink:0;width:48px;height:48px;border-radius:var(--radius-tokentweak);border:1px solid var(--tokentweak-color-muted);overflow:hidden}.tokenpanel-color-picker-preview-checkerboard{position:absolute;inset:0;background-image:repeating-conic-gradient(gray 0% 25%,silver 0% 50%);background-size:10px 10px}.tokenpanel-color-picker-preview-color{position:absolute;inset:0}.tokenpanel-color-picker-hex-input{flex:1;min-width:0;font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-caption);background:var(--tokentweak-color-bg);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);padding:var(--tokentweak-pad-2xs) var(--tokentweak-pad-xs);transition:border-color .12s ease}.tokenpanel-color-picker-hex-input:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-hex-input:focus-visible{border-color:var(--tokentweak-color-accent);outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-picker-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}.tokenpanel-color-picker-grid>[role=row]{display:contents}.tokenpanel-color-picker[data-mode-shell=expanded] .tokenpanel-color-picker-grid{grid-template-columns:repeat(12,1fr)}.tokenpanel-color-picker-grid-cell{position:relative;aspect-ratio:1;border-radius:var(--radius-tokentweak);cursor:pointer;transition:box-shadow .12s ease}.tokenpanel-color-picker-grid-cell:hover{box-shadow:0 0 0 2px var(--tokentweak-color-fg)}.tokenpanel-color-picker-grid-cell[aria-selected=true]{box-shadow:0 0 0 2px var(--tokentweak-color-accent)}.tokenpanel-color-picker-grid-cell:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-picker-grid-cell[data-oog=true]:after{content:"";position:absolute;inset:1px;border:1px dashed oklch(98% 0 0 / .4);border-radius:var(--radius-tokentweak);pointer-events:none}.tokenpanel-color-picker-sliders{display:flex;flex-direction:column;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-slider-row{display:flex;align-items:center;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-slider-label{flex-shrink:0;width:20px;font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-muted);-webkit-user-select:none;user-select:none}.tokenpanel-color-picker-slider{flex:1;position:relative;height:24px;display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.tokenpanel-color-picker-slider:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:var(--radius-tokentweak)}.tokenpanel-color-picker-slider-track{width:100%;height:18px;border-radius:9px;overflow:hidden;border:1px solid var(--tokentweak-color-muted)}.tokenpanel-color-picker-slider-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:var(--tokentweak-color-fg);border:2px solid var(--tokentweak-color-bg);box-shadow:0 0 0 1px var(--tokentweak-color-muted);pointer-events:none}.tokenpanel-color-picker-slider-value{flex-shrink:0;width:48px;text-align:right;font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-readout{display:none;font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-muted);padding-top:var(--tokentweak-pad-2xs);border-top:1px solid var(--tokentweak-color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tokenpanel-color-picker[data-mode-shell=expanded] .tokenpanel-color-picker-readout{display:block}.tokenpanel-palette-chart svg{fill:currentColor;overflow:visible}.tokenpanel-palette-chart{position:relative;width:100%;height:280px;border-radius:var(--radius-tokentweak);overflow:hidden;touch-action:none}.tokenpanel-palette-chart-bands{position:absolute;inset:0;display:block;width:100%;height:100%}.tokenpanel-palette-chart-curve{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;overflow:visible}.tokenpanel-palette-chart-hit-line{fill:none;pointer-events:stroke;cursor:grab}.tokenpanel-palette-chart-hit-line:active{cursor:grabbing}.tokenpanel-palette-chart-line{fill:none}.tokenpanel-palette-chart-curve--l .tokenpanel-palette-chart-line{stroke:var(--tokentweak-color-accent)}.tokenpanel-palette-chart-curve--c .tokenpanel-palette-chart-line{stroke:var(--tokentweak-color-success)}.tokenpanel-palette-chart-curve--h .tokenpanel-palette-chart-line{stroke:var(--tokentweak-color-warning)}.tokenpanel-palette-chart-node-visual{fill:var(--tokentweak-color-bg)}.tokenpanel-palette-chart-curve--l .tokenpanel-palette-chart-node-visual{stroke:var(--tokentweak-color-accent)}.tokenpanel-palette-chart-curve--c .tokenpanel-palette-chart-node-visual{stroke:var(--tokentweak-color-success)}.tokenpanel-palette-chart-curve--h .tokenpanel-palette-chart-node-visual{stroke:var(--tokentweak-color-warning)}.tokenpanel-palette-chart-node-hit{pointer-events:all;cursor:grab;outline:none}.tokenpanel-palette-chart-node-hit:active{cursor:grabbing}.tokenpanel-palette-chart-node-hit:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-palette-edit-view{display:flex;flex-direction:column;gap:14px}.tokenpanel-palette-edit-group{border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);overflow:hidden}.tokenpanel-palette-edit-group-header{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;-webkit-user-select:none;user-select:none}.tokenpanel-palette-edit-group-header:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:-2px}.tokenpanel-palette-edit-group.is-active .tokenpanel-palette-edit-group-header{border-bottom:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-edit-group-chevron{flex:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:var(--tokentweak-color-muted);transform:rotate(-90deg);transition:transform .15s ease}.tokenpanel-palette-edit-group-chevron.is-open{transform:rotate(0)}.tokenpanel-palette-edit-group-heading{flex:1 1 auto;min-width:0;margin:0;color:var(--tokentweak-color-fg);font-family:inherit;font-weight:600;font-size:13px;line-height:20px;text-transform:none;letter-spacing:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-palette-edit-group-preview{flex:none;display:flex;align-items:center;gap:3px}.tokenpanel-palette-edit-preview-chip{width:12px;height:12px;border-radius:3px;border:1px solid rgb(from var(--tokentweak-color-fg) r g b / .12);pointer-events:none}.tokenpanel-palette-edit-group-body{display:flex;flex-direction:column;gap:8px;padding:10px}.tokenpanel-palette-edit-swatches{display:flex;gap:4px}.tokenpanel-palette-edit-swatch{position:relative;flex:1 1 0;height:30px;border-radius:var(--radius-tokentweak);border:1px solid rgb(from var(--tokentweak-color-fg) r g b / .08);outline:0 solid transparent;cursor:pointer;transition:outline-width .08s ease}.tokenpanel-palette-edit-swatch.is-selected{outline:2px solid var(--tokentweak-color-accent);outline-offset:1px}.tokenpanel-palette-edit-swatch:focus-visible{outline:2px solid var(--tokentweak-color-accent-hover);outline-offset:1px}.tokenpanel-palette-edit-swatch[data-out-of-gamut]{border-style:dashed;border-color:var(--tokentweak-color-danger);border-width:2px}.tokenpanel-palette-edit-swatch-idx{position:absolute;inset:auto 0 2px;text-align:center;font-size:9px;color:#0000008c;text-shadow:0 0 2px rgba(255,255,255,.4);pointer-events:none}.tokenpanel-palette-edit-editor{border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);background:var(--tokentweak-color-surface)}.tokenpanel-palette-edit-editor-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-edit-editor-title{flex:1 1 auto;font-size:11px;color:var(--tokentweak-color-muted)}.tokenpanel-palette-edit-channels{display:flex;gap:3px}.tokenpanel-palette-edit-channel{padding:4px 9px;font-size:11px;font-weight:650;border-radius:var(--radius-tokentweak);border:1px solid var(--tokentweak-color-muted);color:var(--tokentweak-color-muted);cursor:pointer;-webkit-user-select:none;user-select:none}.tokenpanel-palette-edit-channel:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:1px}.tokenpanel-palette-edit-channel--l.is-on{border-color:var(--tokentweak-color-accent);color:var(--tokentweak-color-accent)}.tokenpanel-palette-edit-channel--c.is-on{border-color:var(--tokentweak-color-success);color:var(--tokentweak-color-success)}.tokenpanel-palette-edit-channel--h.is-on{border-color:var(--tokentweak-color-warning);color:var(--tokentweak-color-warning)}.tokenpanel-palette-edit-direct{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-edit-direct-hint{font-size:11px;color:var(--tokentweak-color-muted)}.tokenpanel-palette-readout{display:flex;gap:10px;align-items:center;padding:8px 10px 10px;border-top:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-readout-swatch{flex:none;width:40px;height:40px;border-radius:var(--radius-tokentweak);border:1px solid rgb(from var(--tokentweak-color-fg) r g b / .12)}.tokenpanel-palette-readout-rows{font-family:var(--tokentweak-font-mono);font-size:10.5px;color:var(--tokentweak-color-fg);line-height:1.5}.tokenpanel-palette-readout-key{display:inline-block;width:42px;color:var(--tokentweak-color-muted);font-weight:600}.tokenpanel-palette-readout-gamut{margin-top:4px;color:var(--tokentweak-color-danger);font-size:10px}:where(.tokenpanel-shell,[data-design-token-panel-modal],.tokenpanel-color-picker,.tokenpanel-highlight-settings-popover,.tokenpanel-tooltip,.tokenpanel-elpath-label,.tokenpanel-elpath-toast){box-sizing:border-box}:where(.tokenpanel-shell,[data-design-token-panel-modal],.tokenpanel-color-picker,.tokenpanel-highlight-settings-popover) :where(*,*:before,*:after){box-sizing:border-box}.tokenpanel-shell{container:tokenpanel / inline-size;z-index:var(--tokentweak-z-shell);display:flex;flex-direction:column;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);border-radius:0;box-shadow:0 4px 24px #00000040}.tokenpanel-resize-handle{position:absolute;right:2px;bottom:2px;width:16px;height:16px;cursor:nwse-resize;-webkit-user-select:none;user-select:none;background-image:repeating-linear-gradient(-45deg,transparent 0,transparent 2px,var(--tokentweak-color-muted) 2px,var(--tokentweak-color-muted) 3px);-webkit-mask-image:linear-gradient(135deg,transparent 50%,#000 50%);mask-image:linear-gradient(135deg,transparent 50%,#000 50%);border-bottom-right-radius:0;transition:opacity .15s ease;opacity:.7}.tokenpanel-resize-handle:hover,.tokenpanel-resize-handle:focus-visible{opacity:1}.tokenpanel-header{display:flex;align-items:center;gap:var(--tokentweak-pad-md);padding-inline:var(--tokentweak-pad-xl);padding-block:var(--tokentweak-gap-xs);border-bottom:1px solid var(--tokentweak-color-muted);flex-shrink:0;position:relative}.tokenpanel-title{color:var(--tokentweak-color-fg);font-weight:600;font-size:14px;flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.tokenpanel-action-link{color:var(--tokentweak-color-accent);font-size:12px;background:none;border:none;padding:0;cursor:pointer;transition:color .15s ease;white-space:nowrap;flex-shrink:0}.tokenpanel-action-link:hover{color:var(--tokentweak-color-accent-hover)}.tokenpanel-actions-menu-btn{display:none;color:var(--tokentweak-color-muted);background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;align-items:center;justify-content:center;transition:color .15s ease}.tokenpanel-actions-menu-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-actions-menu-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-actions-popover{position:absolute;top:calc(100% + 4px);left:var(--tokentweak-pad-xl);z-index:var(--tokentweak-z-color-picker);display:flex;flex-direction:column;min-width:180px;background:var(--tokentweak-color-surface);border:1px solid var(--tokentweak-color-muted);border-radius:6px;box-shadow:0 8px 24px #0006;padding:4px}.tokenpanel-actions-popover .tokenpanel-action-link{text-align:left;padding:6px 10px;border-radius:4px;font-size:13px}.tokenpanel-actions-popover .tokenpanel-action-link:hover{background:rgb(from var(--tokentweak-color-fg) r g b / .06)}.tokenpanel-spacer{flex:1}.tokenpanel-close-btn{color:var(--tokentweak-color-muted);background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;transition:color .15s ease;display:inline-flex;align-items:center;justify-content:center}.tokenpanel-close-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-tabbar{display:flex;align-items:center;border-bottom:1px solid var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-xl);flex-shrink:0;gap:var(--tokentweak-pad-md)}.tokenpanel-tabbar-tabs{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.tokenpanel-tabbar-tabs::-webkit-scrollbar{display:none}.tokenpanel-tabbar-tabs.has-overflow{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}.tokenpanel-tab-button{border:none;background:none;padding-inline:var(--tokentweak-pad-md);padding-block:var(--tokentweak-gap-xs);font-size:14px;cursor:pointer;border-bottom:2px solid transparent;color:var(--tokentweak-color-muted);white-space:nowrap;flex-shrink:0;transition:color .15s ease,border-color .15s ease}.tokenpanel-tab-button:hover,.tokenpanel-tab-button:focus-visible{color:var(--tokentweak-color-fg);text-decoration:underline}.tokenpanel-tab-button.is-active{color:var(--tokentweak-color-fg);border-bottom-color:var(--tokentweak-color-accent);text-decoration:none}.tokenpanel-density{display:flex;align-items:center;gap:var(--tokentweak-pad-sm);flex-shrink:0}.tokenpanel-density-label{color:var(--tokentweak-color-muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;-webkit-user-select:none;user-select:none;cursor:pointer}.tokenpanel-density-slider{width:80px;accent-color:var(--tokentweak-color-accent);cursor:pointer}@container tokenpanel (max-width: 479px){.tokenpanel-header>.tokenpanel-action-link{display:none}.tokenpanel-actions-menu-btn{display:inline-flex}}@container tokenpanel (max-width: 379px){.tokenpanel-density-label{display:none}}@container tokenpanel (max-width: 299px){.tokenpanel-density-slider{width:56px}}.tokenpanel-body{flex:1;min-height:0;overflow-y:auto;padding-inline:var(--tokentweak-pad-xl);padding-block:var(--tokentweak-gap-sm)}.tokenpanel-notes-heading{margin:0 0 var(--tokentweak-gap-2xs) 0;color:var(--tokentweak-color-fg);font-family:inherit;font-weight:600;font-size:15px;line-height:22px}.tokenpanel-notes-body{color:var(--tokentweak-color-fg);font-size:13px;line-height:1.6;display:flex;flex-direction:column;gap:var(--tokentweak-gap-2xs)}:where(.tokenpanel-shell) .tokenpanel-notes-body h1,:where(.tokenpanel-shell) .tokenpanel-notes-body h2,:where(.tokenpanel-shell) .tokenpanel-notes-body h3,:where(.tokenpanel-shell) .tokenpanel-notes-body h4,:where(.tokenpanel-shell) .tokenpanel-notes-body h5,:where(.tokenpanel-shell) .tokenpanel-notes-body h6{display:block!important;margin:var(--tokentweak-gap-2xs) 0!important;padding:0!important;border:0!important;background:none!important;color:var(--tokentweak-color-fg)!important;font-family:inherit!important;font-weight:600!important;font-size:14px!important;line-height:1.4!important;text-transform:none!important;letter-spacing:normal!important}:where(.tokenpanel-shell) .tokenpanel-notes-body p{display:block!important;margin:0 0 var(--tokentweak-gap-2xs) 0!important;padding:0!important;color:var(--tokentweak-color-fg)!important;font-size:13px!important;line-height:1.6!important;font-weight:400!important;font-style:normal!important}:where(.tokenpanel-shell) .tokenpanel-notes-body ul,:where(.tokenpanel-shell) .tokenpanel-notes-body ol{display:block!important;margin:0 0 var(--tokentweak-gap-2xs) 0!important;padding:0 0 0 20px!important;color:var(--tokentweak-color-fg)!important;list-style:revert!important}:where(.tokenpanel-shell) .tokenpanel-notes-body li{display:list-item!important;margin:0!important;padding:0!important}:where(.tokenpanel-shell) .tokenpanel-notes-body a{color:var(--tokentweak-color-accent)!important;text-decoration:underline!important;cursor:pointer!important;background:none!important}:where(.tokenpanel-shell) .tokenpanel-notes-body a:hover,:where(.tokenpanel-shell) .tokenpanel-notes-body a:focus-visible{color:var(--tokentweak-color-accent-hover)!important}:where(.tokenpanel-shell) .tokenpanel-notes-body table{display:table!important;width:100%!important;margin:0 0 var(--tokentweak-gap-2xs) 0!important;border-collapse:collapse!important;font-size:13px!important}:where(.tokenpanel-shell) .tokenpanel-notes-body thead{display:table-header-group!important}:where(.tokenpanel-shell) .tokenpanel-notes-body tbody{display:table-row-group!important}:where(.tokenpanel-shell) .tokenpanel-notes-body tr{display:table-row!important}:where(.tokenpanel-shell) .tokenpanel-notes-body th,:where(.tokenpanel-shell) .tokenpanel-notes-body td{display:table-cell!important;border:1px solid var(--tokentweak-color-muted)!important;padding:var(--tokentweak-pad-2xs) var(--tokentweak-pad-xs)!important;text-align:left!important;color:var(--tokentweak-color-fg)!important;font-weight:400!important}:where(.tokenpanel-shell) .tokenpanel-notes-body th{font-weight:600!important}:where(.tokenpanel-shell) .tokenpanel-notes-body blockquote{display:block!important;margin:0 0 var(--tokentweak-gap-2xs) 0!important;padding:var(--tokentweak-pad-xs) var(--tokentweak-pad-md)!important;border:0!important;border-left:3px solid var(--tokentweak-color-muted)!important;color:var(--tokentweak-color-muted)!important;font-style:normal!important}:where(.tokenpanel-shell) .tokenpanel-notes-body pre,:where(.tokenpanel-shell) .tokenpanel-notes-body code{font-family:var(--tokentweak-font-mono)!important;font-size:12px!important;color:var(--tokentweak-color-code-fg)!important;background:var(--tokentweak-color-code-bg)!important}:where(.tokenpanel-shell) .tokenpanel-notes-body code{display:inline!important;padding:1px 4px!important;border-radius:3px!important}:where(.tokenpanel-shell) .tokenpanel-notes-body pre{display:block!important;margin:0 0 var(--tokentweak-gap-2xs) 0!important;padding:var(--tokentweak-pad-sm)!important;border-radius:6px!important;overflow-x:auto!important;white-space:pre!important}:where(.tokenpanel-shell) .tokenpanel-notes-body pre code{padding:0!important;background:none!important}:where(.tokenpanel-shell) .tokenpanel-notes-body hr{display:block!important;margin:var(--tokentweak-gap-2xs) 0!important;height:0!important;border:0!important;border-top:1px solid var(--tokentweak-color-muted)!important}:where(.tokenpanel-shell) .tokenpanel-notes-body img{max-width:100%!important;height:auto!important;display:block!important}:where(.tokenpanel-shell) .tokenpanel-notes-body strong,:where(.tokenpanel-shell) .tokenpanel-notes-body b{font-weight:700!important;font-style:normal!important}:where(.tokenpanel-shell) .tokenpanel-notes-body em,:where(.tokenpanel-shell) .tokenpanel-notes-body i{font-style:italic!important;font-weight:inherit!important}.tokenpanel-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:192px;padding-block:var(--tokentweak-gap-md);padding-inline:var(--tokentweak-pad-xl)}.tokenpanel-empty-state-text{color:var(--tokentweak-color-muted, #a8a8a8);font-size:13px;line-height:1.5;max-width:512px;margin:0}.tokenpanel-empty-state-text code{font-family:var(--tokentweak-font-mono, Menlo, Monaco, Consolas, monospace);font-size:13px;color:var(--tokentweak-color-fg)}.tokenpanel-empty-state-link{color:var(--tokentweak-color-accent);text-decoration:underline;transition:color .15s ease}.tokenpanel-empty-state-link:hover,.tokenpanel-empty-state-link:focus-visible{color:var(--tokentweak-color-accent-hover)}.tokenpanel-tab-content{display:flex;flex-direction:column;gap:var(--tokentweak-gap-sm)}.tokenpanel-tab-actions{display:flex;align-items:center;gap:var(--tokentweak-pad-md)}.tokenpanel-tab-section{position:relative;flex-shrink:0;border:1px solid var(--tokentweak-color-muted);border-radius:8px;padding:18px 14px 14px}.tokenpanel-tab-section-heading{position:absolute;top:-10px;left:12px;background:var(--tokentweak-color-surface);padding:0 8px;margin:0;color:var(--tokentweak-color-fg);font-family:inherit;font-weight:600;font-size:13px;line-height:20px;text-transform:none;letter-spacing:normal}.tokenpanel-tab-section-heading--color{font-size:14px}.tokenpanel-tab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--tokenpanel-grid-min, 288px),1fr));gap:var(--tokentweak-gap-xs)}.tokenpanel-color-preset-select{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-sm);padding-block:2px;font-size:12px;border-radius:var(--radius-tokentweak);max-width:224px;cursor:pointer;transition:border-color .15s ease}.tokenpanel-color-preset-select:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-color-palette-grid,.tokenpanel-color-palette-grid--secondary{display:grid;grid-template-columns:repeat(auto-fit,minmax(56px,1fr));gap:var(--tokentweak-pad-sm)}.tokenpanel-color-base-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--tokenpanel-grid-min, 176px),1fr));gap:6px}.tokenpanel-color-swatch-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;width:100%}.tokenpanel-color-swatch-button{display:block;border:1px solid var(--tokentweak-color-muted);cursor:pointer;width:56px;height:56px;border-radius:var(--radius-tokentweak);background:none;padding:0;transition:border-color .15s ease}.tokenpanel-color-swatch-button:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-color-swatch-button:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-field{display:inline-flex}.tokenpanel-color-field-swatch{display:block;width:44px;height:28px;border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);cursor:pointer;padding:0;transition:border-color .15s ease}.tokenpanel-color-field-swatch:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-color-field-swatch:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-field-swatch[aria-disabled=true]{cursor:default;opacity:.6}.tokenpanel-color-swatch-label-row{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%}.tokenpanel-color-swatch-label{color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);-webkit-user-select:none;user-select:none;font-size:11px;line-height:1.1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-tooltip{position:fixed;z-index:var(--tokentweak-z-tooltip);pointer-events:none;background:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);border-radius:4px;padding:4px 8px;font-family:var(--tokentweak-font-mono);font-size:11px;line-height:1.3;white-space:nowrap;box-shadow:0 4px 12px #00000080;opacity:0;transform:translateY(2px);transition:opacity 90ms ease,transform 90ms ease}.tokenpanel-tooltip[data-show=true]{opacity:1;transform:translateY(0)}.tokenpanel-tooltip--help{white-space:normal;max-width:250px}.tokenpanel-help-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:15px;height:15px;border-radius:50%;border:1px solid var(--tokentweak-color-muted);color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);font-size:10px;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.tokenpanel-help-icon:hover,.tokenpanel-help-icon.is-pinned{color:var(--tokentweak-color-fg);border-color:var(--tokentweak-color-fg);background-color:rgb(from var(--tokentweak-color-fg) r g b / .1)}.tokenpanel-help-icon:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-help-icon:after{content:"";position:absolute;inset:-5px}.tokenpanel-popover{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);padding:12px;border-radius:var(--radius-tokentweak);box-shadow:0 4px 12px #0000004d}.tokenpanel-palette-selector{position:relative;width:100%;display:flex;align-items:center;gap:6px}.tokenpanel-palette-trigger{display:flex;align-items:center;gap:4px;flex:1;min-width:0;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);padding-inline:6px;padding-block:4px;font-size:12px;border-radius:var(--radius-tokentweak);cursor:pointer;transition:border-color .15s ease}.tokenpanel-palette-trigger:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-palette-trigger:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-palette-trigger-label{flex:1;min-width:0;text-align:left;color:var(--tokentweak-color-fg);font-family:var(--tokentweak-font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-palette-trigger-color{flex-shrink:0;border:1px solid var(--tokentweak-color-muted);width:14px;height:14px;border-radius:2px}.tokenpanel-palette-trigger-value{flex-shrink:0;color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);width:2.5em}.tokenpanel-palette-trigger-icon{color:var(--tokentweak-color-muted);flex-shrink:0}.tokenpanel-palette-options{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);padding:10px;border-radius:var(--radius-tokentweak);box-shadow:0 4px 12px #0000004d}.tokenpanel-palette-options-extras{display:flex;gap:6px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-extra-option{display:flex;align-items:center;gap:6px;padding-inline:8px;padding-block:4px;border-radius:4px;font-size:16px;background:none;border:none;cursor:pointer;transition:background-color .15s ease}.tokenpanel-palette-extra-option:hover{background-color:rgb(from var(--tokentweak-color-fg) r g b / .1)}.tokenpanel-palette-extra-option.is-selected{background-color:rgb(from var(--tokentweak-color-accent) r g b / .2)}.tokenpanel-palette-extra-option.is-active{outline:2px solid var(--tokentweak-color-accent);outline-offset:1px}.tokenpanel-palette-extra-color{width:28px;height:28px;border-radius:3px;border:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-extra-label{color:var(--tokentweak-color-fg)}.tokenpanel-palette-options-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}.tokenpanel-palette-option-button{width:48px;height:48px;border-radius:3px;border:1px solid var(--tokentweak-color-muted);cursor:pointer;padding:0;transition:box-shadow .15s ease}.tokenpanel-palette-option-button:hover{box-shadow:0 0 0 2px var(--tokentweak-color-fg)}.tokenpanel-palette-option-button.is-selected{box-shadow:0 0 0 2px var(--tokentweak-color-accent)}.tokenpanel-palette-option-button.is-active{outline:2px solid var(--tokentweak-color-fg);outline-offset:1px}.tokenpanel-row{display:flex;align-items:center;gap:var(--tokentweak-pad-sm)}.tokenpanel-row--stacked{display:flex;flex-direction:column;gap:2px}.tokenpanel-row--column{display:flex;flex-direction:column;gap:4px}.tokenpanel-row-head{display:flex;align-items:center;gap:var(--tokentweak-pad-sm)}.tokenpanel-row-label{color:var(--tokentweak-color-fg);font-family:var(--tokentweak-font-mono);flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-row-input-group{display:flex;align-items:center;gap:4px;flex-shrink:0}.tokenpanel-row-number-input{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:6px;padding-block:2px;font-family:var(--tokentweak-font-mono);text-align:right;font-size:12px;width:80px;border-radius:var(--radius-tokentweak)}.tokenpanel-row-number-input:disabled{opacity:.6}.tokenpanel-row-number-input--invalid{border-color:var(--tokentweak-color-danger);color:var(--tokentweak-color-danger)}.tokenpanel-row-unit{color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);-webkit-user-select:none;user-select:none;font-size:12px;width:32px}.tokenpanel-row-unit--interactive{cursor:pointer;border-radius:2px}.tokenpanel-row-unit--interactive:hover{color:var(--tokentweak-color-fg)}.tokenpanel-row-unit--interactive:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-row-unit--interactive[aria-disabled=true]{cursor:default;opacity:.6}.tokenpanel-row-select{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:6px;padding-block:2px;font-family:var(--tokentweak-font-mono);font-size:12px;width:112px;border-radius:var(--radius-tokentweak)}.tokenpanel-row-select:disabled{opacity:.6}.tokenpanel-row-text-input{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:6px;padding-block:2px;font-family:var(--tokentweak-font-mono);font-size:12px;flex:1;min-width:0;border-radius:var(--radius-tokentweak)}.tokenpanel-row-text-input:disabled{opacity:.6}.tokenpanel-pill-toggle{display:flex;align-items:center;gap:var(--tokentweak-pad-xs);flex-shrink:0;cursor:pointer}.tokenpanel-pill-toggle-checkbox{accent-color:var(--tokentweak-color-accent)}.tokenpanel-pill-toggle-text{color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);font-size:12px}[data-design-token-panel-modal]{margin-inline:auto;width:100%;max-width:736px;max-height:80vh;overflow-y:auto;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);padding:var(--tokentweak-pad-xl);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-user-select:text;user-select:text}[data-design-token-panel-modal]::backdrop{background-color:rgb(from var(--tokentweak-color-bg) r g b / .8)}[data-design-token-panel-modal] [class*=__header]{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--tokentweak-pad-md);margin-bottom:var(--tokentweak-gap-sm)}[data-design-token-panel-modal] [class*=__title]{font-size:var(--tokentweak-text-subheading);font-weight:700;color:var(--tokentweak-color-fg)}[data-design-token-panel-modal] [class*=__hint]{font-size:var(--tokentweak-text-small);color:var(--tokentweak-color-muted);margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__section-heading]{font-size:var(--tokentweak-text-small);font-weight:700;color:var(--tokentweak-color-fg);margin-top:var(--tokentweak-gap-sm);margin-bottom:var(--tokentweak-gap-2xs)}[data-design-token-panel-modal] [class*=__list]:not([class*=__list-item]){overflow-x:auto;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-code-fg);padding:var(--tokentweak-pad-sm);font-size:var(--tokentweak-text-small);margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__list-item]{font-family:var(--tokentweak-font-mono)}[data-design-token-panel-modal] [class*=__actions]{display:flex;align-items:center;gap:var(--tokentweak-pad-md);margin-top:var(--tokentweak-gap-md)}[data-design-token-panel-modal] [class*=__toggle]{display:inline-flex;align-items:center;gap:var(--tokentweak-pad-xs);font-size:var(--tokentweak-text-small);color:var(--tokentweak-color-fg);cursor:pointer;margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__textarea]{width:100%;min-height:192px;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-code-fg);padding:var(--tokentweak-pad-sm);font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-small);resize:vertical;margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__json]{overflow-x:auto;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-code-fg);padding:var(--tokentweak-pad-sm);font-size:var(--tokentweak-text-small);white-space:pre;font-family:var(--tokentweak-font-mono)}[data-design-token-panel-modal] [class*=__status]{font-size:var(--tokentweak-text-small);margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__status--info]{color:var(--tokentweak-color-success)}[data-design-token-panel-modal] [class*=__status--error]{color:var(--tokentweak-color-danger)}[data-design-token-panel-modal] [class*=__status--warning]{color:var(--tokentweak-color-warning)}[data-design-token-panel-modal] [class*=__status--success]{color:var(--tokentweak-color-success)}[data-design-token-panel-modal] [class*=__applying]{display:flex;align-items:center;gap:var(--tokentweak-pad-sm);border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-muted);padding:var(--tokentweak-pad-sm);font-size:var(--tokentweak-text-small)}[data-design-token-panel-modal] [class*=__spinner]{display:inline-block;width:16px;height:16px;border:2px solid var(--tokentweak-color-muted);border-top-color:var(--tokentweak-color-fg);border-radius:50%;animation:design-token-panel-modal-spin .75s linear infinite}@keyframes design-token-panel-modal-spin{to{transform:rotate(360deg)}}[data-design-token-panel-modal] [class*=__revert-hint]{font-size:var(--tokentweak-text-small);font-style:italic;color:var(--tokentweak-color-muted);margin-top:var(--tokentweak-gap-sm);margin-bottom:var(--tokentweak-gap-2xs)}[data-design-token-panel-modal] [class*=__button]{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-lg);padding-block:var(--tokentweak-gap-2xs);font-size:var(--tokentweak-text-small);cursor:pointer;transition:color .15s ease,border-color .15s ease,background-color .15s ease}[data-design-token-panel-modal] [class*=__button]:hover,[data-design-token-panel-modal] [class*=__button]:focus-visible{color:var(--tokentweak-color-fg);border-color:var(--tokentweak-color-fg)}[data-design-token-panel-modal] [class*=__button]:disabled{cursor:not-allowed;opacity:.5}[data-design-token-panel-modal] [class*=__button--primary]{border-color:var(--tokentweak-color-accent);background-color:var(--tokentweak-color-accent);color:var(--tokentweak-color-bg)}[data-design-token-panel-modal] [class*=__button--primary]:hover,[data-design-token-panel-modal] [class*=__button--primary]:focus-visible{border-color:var(--tokentweak-color-accent-hover);background-color:var(--tokentweak-color-accent-hover);color:var(--tokentweak-color-bg)}[data-design-token-panel-modal] [class*=__close-button]{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-sm);padding-block:var(--tokentweak-gap-2xs);font-size:var(--tokentweak-text-small);cursor:pointer;transition:color .15s ease,border-color .15s ease}[data-design-token-panel-modal] [class*=__close-button]:hover,[data-design-token-panel-modal] [class*=__close-button]:focus-visible{color:var(--tokentweak-color-fg);border-color:var(--tokentweak-color-fg)}.tokenpanel-tier-ref-selector{flex:1;min-width:0}select.tokenpanel-tier-ref-select{width:100%;background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);padding-inline:var(--tokentweak-pad-sm);padding-block:4px;font-family:var(--tokentweak-font-mono);font-size:12px;cursor:pointer}select.tokenpanel-tier-ref-select:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-row-label-sub{display:block;font-size:var(--tokentweak-text-micro, 11px);color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);line-height:1.2}.tokenpanel-per-mode-toggle{display:inline-flex;align-items:center;gap:4px;color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);font-size:11px;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.tokenpanel-per-mode-fields{display:flex;align-items:center;gap:var(--tokentweak-pad-sm);flex-wrap:wrap}.tokenpanel-tab-section [role=heading]{display:block}.tokenpanel-code{font-family:var(--tokentweak-font-mono);font-size:inherit;background:none;color:inherit;padding:0;border:none;border-radius:0;white-space:pre-wrap}[data-design-token-panel-modal] [class*=__button][aria-disabled=true]{cursor:not-allowed;opacity:.5;pointer-events:none}[data-design-token-panel-modal] [role=button]:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-action-link:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-close-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-tab-button:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-highlight-overlay{margin:0;padding:0;border:0;background:transparent;display:block}.tokenpanel-highlight-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;color:var(--tokentweak-color-muted);cursor:pointer;vertical-align:middle;border-radius:2px;transition:background-color .15s ease,color .15s ease}.tokenpanel-highlight-toggle:hover{color:var(--tokentweak-color-fg);background-color:rgb(from var(--tokentweak-color-fg) r g b / .1)}.tokenpanel-highlight-toggle:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-highlight-toggle.is-active{opacity:1}:where(.tokenpanel-shell) svg{fill:currentColor!important;pointer-events:none;display:inline-block;overflow:visible}:where(.tokenpanel-shell) .tokenpanel-highlight-toggle svg{fill:none!important;stroke:currentColor}.tokenpanel-highlight-settings-popover{width:370px;background:var(--tokentweak-color-surface);border:1px solid var(--tokentweak-color-muted);border-radius:6px;box-shadow:0 8px 32px #00000080}.tokenpanel-highlight-settings-header{padding:10px 16px;border-bottom:1px solid var(--tokentweak-color-muted);font-weight:600;font-size:13px;color:var(--tokentweak-color-fg);display:flex;align-items:center;justify-content:space-between;gap:12px}.tokenpanel-highlight-settings-header-label{flex:1;min-width:0}.tokenpanel-highlight-settings-outline-control{display:flex;align-items:center;gap:4px;flex-shrink:0}.tokenpanel-highlight-settings-outline-input{width:44px;background:var(--tokentweak-color-bg);border:1px solid var(--tokentweak-color-muted);border-radius:3px;color:var(--tokentweak-color-fg);font-size:12px;font-variant-numeric:tabular-nums;padding:3px 6px;text-align:right}.tokenpanel-highlight-settings-outline-px{color:var(--tokentweak-color-muted);font-size:12px;font-weight:400}.tokenpanel-highlight-settings-list{padding:4px 0;display:grid;grid-template-columns:1fr 1fr}.tokenpanel-highlight-settings-row{display:grid;grid-template-columns:22px 32px 1fr;gap:8px;align-items:center;padding:8px 12px}.tokenpanel-highlight-settings-row:hover{background:rgb(from var(--tokentweak-color-fg) r g b / .03)}.tokenpanel-highlight-settings-num{color:var(--tokentweak-color-muted);font-variant-numeric:tabular-nums;text-align:right;font-size:11px}.tokenpanel-highlight-settings-ring{width:28px;height:28px;border-radius:3px;background:transparent;box-sizing:border-box;cursor:pointer;flex-shrink:0}.tokenpanel-highlight-settings-ring:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-highlight-settings-name{font-family:var(--tokentweak-font-mono);font-size:12px;color:var(--tokentweak-color-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-highlight-settings-name.is-active{color:var(--tokentweak-color-fg)}.tokenpanel-highlight-settings-footer{padding:12px 16px;border-top:1px solid var(--tokentweak-color-muted);display:flex;justify-content:flex-end;gap:var(--tokentweak-pad-sm)}.tokenpanel-highlight-settings-reset-btn{padding:6px 12px;background:var(--tokentweak-color-code-bg);border:1px solid var(--tokentweak-color-muted);border-radius:3px;cursor:pointer;font-size:12px;color:var(--tokentweak-color-fg);transition:background .15s ease}.tokenpanel-highlight-settings-reset-btn:hover{background:rgb(from var(--tokentweak-color-fg) r g b / .08)}.tokenpanel-highlight-settings-reset-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:3px}.tokenpanel-gear-btn{color:var(--tokentweak-color-muted);background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;transition:color .15s ease;display:inline-flex;align-items:center;justify-content:center}.tokenpanel-gear-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-gear-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-elpath-toggle{color:var(--tokentweak-color-muted);background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;transition:color .15s ease;display:inline-flex;align-items:center;justify-content:center}.tokenpanel-elpath-toggle:hover{color:var(--tokentweak-color-fg)}.tokenpanel-elpath-toggle:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-elpath-toggle.is-active{color:var(--tokentweak-color-accent)}:where(.tokenpanel-shell) .tokenpanel-elpath-toggle svg{fill:none!important;stroke:currentColor}html.tokenpanel-elpath-inspecting,html.tokenpanel-elpath-inspecting *{cursor:crosshair!important;-webkit-user-select:none!important;user-select:none!important}.tokenpanel-elpath-box{margin:0;padding:0;border:0;pointer-events:none;box-sizing:border-box;background:#6fa8dc40;outline:1px solid rgb(111 168 220 / .9);outline-offset:-1px;box-shadow:inset 0 0 0 1px #6fa8dce6}.tokenpanel-elpath-label{pointer-events:none;display:inline-flex;align-items:baseline;gap:8px;max-width:90vw;padding:2px 6px;border-radius:3px;background:var(--tokentweak-color-surface, #1c1c1c);color:var(--tokentweak-color-fg, #b8b8b8);font-family:var(--tokentweak-font-mono, Menlo, Monaco, Consolas, monospace);font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 3px #0006}.tokenpanel-elpath-label-name{color:var(--tokentweak-color-accent, #d69a66);font-weight:600;overflow:hidden;text-overflow:ellipsis}.tokenpanel-elpath-label-size{color:var(--tokentweak-color-muted, #888888);flex-shrink:0}.tokenpanel-elpath-toast{pointer-events:none;display:inline-flex;align-items:center;gap:8px;margin:12px auto 0;padding:8px 14px;border-radius:6px;background:var(--tokentweak-color-surface, #1c1c1c);color:var(--tokentweak-color-fg, #b8b8b8);font-family:var(--tokentweak-font-mono, Menlo, Monaco, Consolas, monospace);font-size:12px;line-height:1.4;max-width:min(90vw,520px);box-shadow:0 4px 16px #00000073;border:1px solid rgb(255 255 255 / .08)}.tokenpanel-elpath-toast .tokenpanel-elpath-toast-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-elpath-toast svg{flex-shrink:0;fill:none!important;stroke:var(--tokentweak-color-success, #93bb77);pointer-events:none;display:inline-block;overflow:visible}.tokenpanel-elpath-toast.is-error svg{stroke:var(--tokentweak-color-danger, #da6871)}.tokenpanel-row-number-input:focus-visible,.tokenpanel-row-text-input:focus-visible,.tokenpanel-row-select:focus-visible,.tokenpanel-color-preset-select:focus-visible,.tokenpanel-density-slider:focus-visible,.tokenpanel-pill-toggle-checkbox:focus-visible,.tokenpanel-highlight-settings-outline-input:focus-visible,[data-design-token-panel-modal] [class*=__textarea]:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-close-btn{position:relative}.tokenpanel-close-btn:after{content:"";position:absolute;inset:-4px}.tokenpanel-gear-btn{position:relative}.tokenpanel-gear-btn:after{content:"";position:absolute;inset:-5px}.tokenpanel-elpath-toggle{position:relative}.tokenpanel-elpath-toggle:after{content:"";position:absolute;inset:-4px}.tokenpanel-highlight-toggle{position:relative}.tokenpanel-highlight-toggle:after{content:"";position:absolute;inset:-4px}.tokenpanel-resize-handle{overflow:visible}.tokenpanel-resize-handle:after{content:"";position:absolute;inset:-4px;cursor:nwse-resize}@media(prefers-reduced-motion:reduce){[data-design-token-panel-modal] [class*=__spinner]{animation:design-token-panel-modal-pulse 1.5s ease-in-out infinite}@keyframes design-token-panel-modal-pulse{0%,to{opacity:1}50%{opacity:.4}}.tokenpanel-tooltip{transform:none;transition:opacity 90ms ease}.tokenpanel-tooltip[data-show=true]{transform:none}}
|