@import "https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&display=swap";._wrap_31i6r_1{justify-content:center;align-items:center;display:inline-flex;position:relative;overflow:hidden}._slot_31i6r_11{white-space:nowrap;justify-content:center;align-items:center;display:inline-flex}._icon_31i6r_18{width:1em;height:1em;font-size:inherit;flex:none}._icon_31i6r_18 ._slot_31i6r_11{position:absolute;inset:0}._textWrap_31i6r_30{grid-template-areas:"swap";align-items:center;display:inline-grid;position:relative}._reserve_31i6r_40{visibility:hidden;white-space:nowrap;grid-area:swap}._text_31i6r_30{grid-area:swap;position:relative}._text_31i6r_30 ._slot_31i6r_11{justify-content:flex-start;position:absolute;inset:0}._button_31i6r_58{border-radius:var(--radius-md);cursor:pointer;font-family:var(--sans);font-weight:var(--weight-medium);letter-spacing:-.005em;border:none;align-items:center;gap:7px;transition:color .15s,background-color .15s,box-shadow .15s;display:inline-flex}._sm_31i6r_74{padding:5px 10px 5px 8px;font-size:11px}._sm_31i6r_74:not(:has(._textWrap_31i6r_30)){justify-content:center;gap:0;width:28px;height:28px;padding:0}._md_31i6r_88:not(:has(._textWrap_31i6r_30)){justify-content:center;gap:0;width:34px;height:34px;padding:0}._md_31i6r_88{padding:9px 16px 9px 13px;font-size:12.5px}._lg_31i6r_101{padding:11px 20px 11px 16px;font-size:14px}._solid_31i6r_106{background:var(--accent);color:var(--accent-fg)}._ghost_31i6r_111{color:var(--ink-60);background:0 0}._outline_31i6r_116{background:var(--paper);color:var(--ink-60);box-shadow:0 0 0 var(--hairline) var(--ink-08)}@media (hover:hover){._solid_31i6r_106:hover{background:color-mix(in srgb, var(--accent) 88%, black)}._ghost_31i6r_111:hover{color:var(--ink);background:var(--ink-04)}._outline_31i6r_116:hover{color:var(--ink);box-shadow:0 0 0 var(--hairline) var(--ink-15)}}._button_1ih8u_1{border-radius:var(--radius-md);width:32px;height:32px;color:var(--ink-45);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;font-size:15px;transition:color .15s,background-color .15s;display:inline-flex}._button_1ih8u_1:hover{color:var(--ink);background:var(--ink-04)}._icon_1ih8u_21{width:15px;height:15px}._count_18rn9_1{border-radius:var(--radius-md);min-width:18px;font-size:10.5px;font-weight:var(--weight-medium);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;padding:0 5px;line-height:1.6;display:inline-flex}._default_18rn9_14{background:var(--ink-08);color:var(--ink-60)}._inverse_18rn9_19{background:color-mix(in srgb, var(--paper) 22%, transparent);color:var(--paper)}._track_cm2ve_1{background:var(--segment-track-bg);border-radius:var(--radius-lg);box-shadow:var(--edge-ring);align-items:center;padding:0;display:inline-flex}._fullWidth_cm2ve_14{width:100%;display:flex}._fullWidth_cm2ve_14 ._segment_cm2ve_19{flex:1}._sm_cm2ve_25{height:var(--height-segment-sm)}._md_cm2ve_29{height:var(--height-segment-md)}._sm_cm2ve_25 ._segment_cm2ve_19{padding:0 var(--space-md);font-size:var(--size-body-sm)}._md_cm2ve_29 ._segment_cm2ve_19{padding:0 var(--space-lg);font-size:var(--size-table-cell)}._segment_cm2ve_19{cursor:pointer;white-space:nowrap;height:100%;font-family:var(--sans);font-weight:var(--weight-base);line-height:var(--line-height-tight);color:var(--ink-45);border-radius:var(--radius-lg);transition:color var(--duration-quick) var(--ease-smooth-out);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex;position:relative}@media (hover:hover){._segment_cm2ve_19:not(._active_cm2ve_64):hover{color:var(--ink)}}._active_cm2ve_64{color:var(--ink);font-weight:var(--weight-medium)}._chip_cm2ve_81{border-radius:var(--radius-lg);background:var(--segment-chip-bg);box-shadow:var(--segment-chip-shadow);position:absolute;inset:0}._label_cm2ve_90{z-index:1;align-items:center;gap:6px;display:inline-flex;position:relative}._segment_cm2ve_19:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}._head_1qzf4_1{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px;display:flex}._head_1qzf4_1 ._action_1qzf4_10{margin-left:0}._dest_1qzf4_14{font-family:var(--sans);color:var(--ink-45);margin-top:6px;font-size:12px}._tree_1qzf4_21{border-radius:var(--radius-md);background:var(--surface);box-shadow:inset 0 0 0 var(--hairline) var(--ink-08);flex-direction:column;gap:2px;margin:18px 0;padding:12px 14px;display:flex}._treeRow_1qzf4_32{color:var(--ink-45);align-items:center;gap:9px;padding:4px 0;display:flex}._treeRow_1qzf4_32 code{font-family:var(--sans);color:var(--ink-80);text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:12px;overflow:hidden}._size_1qzf4_51{font-variant-numeric:tabular-nums;color:var(--ink-30);flex:none;font-size:11px}._picker_1qzf4_58{margin-bottom:12px}._root_1ypsa_1{cursor:pointer;color:var(--ink-60);-webkit-user-select:none;user-select:none;align-items:center;gap:9px;font-size:13px;display:inline-flex}._root_1ypsa_1:hover ._text_1ypsa_11{color:var(--ink)}._disabled_1ypsa_15{opacity:.4;cursor:not-allowed}._root_1ypsa_1 input{opacity:0;width:0;height:0;position:absolute}._box_1ypsa_27{background:var(--ink-04);color:#fff;width:18px;height:18px;box-shadow:inset 0 0 0 1px var(--ink-15);border-radius:6px;flex:none;justify-content:center;align-items:center;transition:background-color .15s,box-shadow .15s;display:inline-flex}._root_1ypsa_1 input:checked+._box_1ypsa_27{background:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}._root_1ypsa_1 input:focus-visible+._box_1ypsa_27{outline:2px solid var(--ink-80);outline-offset:2px}._tick_1ypsa_51{width:12px;height:12px}._text_1ypsa_11{transition:color .15s}._page_p193r_1{display:block}._head_p193r_5{text-align:center;max-width:560px;margin:0 auto 36px}._head_p193r_5 ._tag_p193r_11{margin:0 auto}._rail_p193r_15{justify-content:center;align-items:center;gap:8px;margin-bottom:20px;display:flex}._navBtn_p193r_23{border-radius:var(--radius-md);background:var(--ink-04);width:30px;height:30px;color:var(--ink-45);cursor:pointer;border:none;flex:none;justify-content:center;align-items:center;transition:color .15s,background-color .15s;display:inline-flex}._navBtn_p193r_23:hover{color:var(--ink);background:var(--ink-08)}._tabs_p193r_43{border-radius:var(--radius-md);background:var(--ink-04);scrollbar-width:none;gap:2px;padding:3px;display:flex;overflow-x:auto}._tabs_p193r_43::-webkit-scrollbar{display:none}._tab_p193r_43{font-family:var(--sans);letter-spacing:-.005em;white-space:nowrap;border-radius:var(--radius-md);color:var(--ink-45);cursor:pointer;background:0 0;border:none;padding:7px 14px;font-size:12.5px;font-weight:500;transition:color .15s,background-color .15s}._tab_p193r_43:hover:not(._tabOn_p193r_72){color:var(--ink)}._tabOn_p193r_72{background:var(--tab-active-bg);color:var(--tab-active-fg);box-shadow:0 0 0 1px var(--tab-active-border), 0 1px 2px -1px #0000001a}._stage_p193r_84{border-radius:18px;justify-content:center;align-items:center;min-height:260px;padding:48px 24px;transition:background-color .25s;display:flex}._chip_p193r_94{border-radius:20px;width:150px;height:150px;transition:box-shadow .18s}._dividerDemo_p193r_101{text-align:center;width:100%;max-width:300px;font-size:13px}._hr_p193r_108{border:none;margin:18px 0}._panel_p193r_113{background:var(--paper);border-radius:18px;margin-top:18px;padding:18px;box-shadow:0 0 0 1px #17181c1f,0 2px 2px -1px #0000000f,0 4px 4px -2px #0000000a}:root[data-theme=dark] ._panel_p193r_113,:root:not([data-theme=light]) ._panel_p193r_113{box-shadow:inset 0 0 0 1px #ffffff24,0 2px 4px -1px #0003,0 6px 12px -3px #0000003d}@media (prefers-color-scheme:light){:root:not([data-theme=dark]) ._panel_p193r_113{box-shadow:0 0 0 1px #17181c1f,0 2px 2px -1px #0000000f,0 4px 4px -2px #0000000a}}._meta_p193r_141{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;display:flex}._selector_p193r_150{font-family:var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);background:var(--ink-04);border-radius:7px;padding:4px 10px;font-size:12px}._purpose_p193r_160{color:var(--ink-80);margin-bottom:8px;font-size:14px;line-height:1.6}._reasoning_p193r_167{color:var(--ink-45);margin-bottom:16px;font-size:13.5px;line-height:1.65}._track_6er1d_7{touch-action:none;-webkit-user-select:none;user-select:none;border-radius:var(--radius-md);background:var(--slider-track);cursor:grab;width:100%;height:34px;box-shadow:inset 0 0 0 var(--hairline) var(--slider-edge);align-items:center;display:flex;position:relative;overflow:hidden}._track_6er1d_7:active{cursor:grabbing}._disabled_6er1d_26{pointer-events:none;opacity:.45}._fill_6er1d_32{background:var(--slider-fill);pointer-events:none;position:absolute;top:0;bottom:0;left:0}._ticks_6er1d_41{pointer-events:none;position:absolute;inset:0}._tick_6er1d_41{background:var(--slider-tick);width:1px;height:7px;margin-top:-3.5px;position:absolute;top:50%}._row_6er1d_56{font-size:12px;font-weight:var(--weight-medium);letter-spacing:-.005em;color:var(--slider-label);pointer-events:none;justify-content:space-between;align-items:center;padding:0 12px;display:flex;position:absolute;inset:0}._name_6er1d_70{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._value_6er1d_76{font-variant-numeric:tabular-nums;color:var(--slider-value)}._handle_6er1d_83{background:var(--slider-handle);width:3px;box-shadow:0 0 0 1px var(--slider-handle-edge);pointer-events:none;border-radius:2px;margin-left:-1.5px;position:absolute;top:6px;bottom:6px}._hit_6er1d_95{touch-action:none;border-radius:var(--radius-md);cursor:inherit;background:0 0;border:none;outline:none;position:absolute;inset:0}._hit_6er1d_95:focus-visible{outline:var(--focus-ring);outline-offset:-3px}._root_bqorq_1{display:inline-flex;position:relative}._trigger_bqorq_6{border-radius:var(--radius-md);background:var(--ink-04);cursor:pointer;border:none;align-items:center;gap:8px;padding:5px 12px 5px 5px;transition:background-color .15s;display:inline-flex}._trigger_bqorq_6:hover{background:var(--ink-08)}._swatch_bqorq_22{border-radius:var(--radius-sm);width:20px;height:20px;box-shadow:inset 0 0 0 1px var(--ink-15);flex:none}._triggerHex_bqorq_30{font-family:var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-60);font-variant-numeric:tabular-nums;font-size:11px}._popover_bqorq_38{z-index:40;background:var(--paper);transform-origin:100% 0;border-radius:14px;width:232px;padding:12px;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 0 0 1px #17181c1f,0 8px 16px -4px #0000001f,0 16px 32px -8px #0000001a}:root[data-theme=dark] ._popover_bqorq_38,:root:not([data-theme=light]) ._popover_bqorq_38{box-shadow:inset 0 0 0 1px #ffffff24,0 8px 16px -4px #0006,0 16px 32px -8px #00000059}@media (prefers-color-scheme:light){:root:not([data-theme=dark]) ._popover_bqorq_38{box-shadow:0 0 0 1px #17181c1f,0 8px 16px -4px #0000001f,0 16px 32px -8px #0000001a}}._area_bqorq_71{cursor:crosshair;touch-action:none;height:132px;box-shadow:inset 0 0 0 1px var(--ink-08);border-radius:9px;position:relative;overflow:hidden}._area_bqorq_71:focus-visible{outline:2px solid var(--ink-80);outline-offset:-3px}._areaWhite_bqorq_86{background:linear-gradient(90deg,#fff,#fff0);position:absolute;inset:0}._areaBlack_bqorq_92{background:linear-gradient(#0000,#000);position:absolute;inset:0}._marker_bqorq_98{border-radius:var(--radius-sm);pointer-events:none;width:13px;height:13px;position:absolute;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 2px,0 1px 3px #0006}._hue_bqorq_110{border-radius:var(--radius-md);cursor:ew-resize;touch-action:none;height:12px;box-shadow:inset 0 0 0 1px var(--ink-08);background:linear-gradient(90deg,red 0%,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red 100%);margin-top:12px;position:relative}._hue_bqorq_110:focus-visible{outline:2px solid var(--ink-80);outline-offset:-3px}._hueMarker_bqorq_135{border-radius:var(--radius-sm);pointer-events:none;width:16px;height:16px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 2px #fff,0 0 0 1px #00000040,0 1px 3px #00000059}._hexRow_bqorq_149{align-items:center;gap:10px;margin-top:12px;display:flex}._hexLabel_bqorq_156{font-family:var(--sans);font-size:10px;font-weight:var(--weight-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45)}._hexInput_bqorq_165{min-width:0;font-family:var(--sans);font-variant-numeric:tabular-nums;background:var(--ink-04);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-08);border:none;border-radius:8px;outline:none;flex:1;padding:7px 10px;font-size:12px}._hexInput_bqorq_165:focus-visible{outline:2px solid var(--ink-80);outline-offset:-3px}._preview_23o3f_1{width:min(800px,100vw - 40px);min-height:360px;box-shadow:inset 0 0 0 var(--hairline) var(--preview-edge);border-radius:18px;justify-content:center;align-items:center;padding:64px 28px;transition:background-color .25s;display:flex;position:relative;left:50%;overflow:hidden;transform:translate(-50%)}._viewNav_23o3f_22{border-radius:var(--radius-md);background:var(--pv-chrome);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--pv-chrome-edge);align-items:center;gap:2px;padding:3px;display:flex;position:absolute;top:14px;right:14px}._navBtn_23o3f_36{border-radius:var(--radius-md);width:26px;height:26px;color:var(--pv-text);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:color .15s,background-color .15s;display:inline-flex}@media (hover:hover){._navBtn_23o3f_36:hover{color:var(--pv-strong);background:var(--pv-hover)}}._viewName_23o3f_57{font-family:var(--sans);font-size:10px;font-weight:var(--weight-medium);letter-spacing:.06em;text-transform:uppercase;color:var(--pv-text);text-align:center;-webkit-user-select:none;user-select:none;min-width:62px}._chip_23o3f_69{border-radius:20px;flex:none;width:156px;height:156px;transition:box-shadow .18s}._row_23o3f_77{flex-wrap:wrap;justify-content:center;align-items:center;gap:40px;display:flex}._mini_23o3f_85{flex-direction:column;align-items:center;gap:18px;display:flex}._miniLabel_23o3f_92{letter-spacing:-.005em;color:var(--pv-text);font-size:12px}._layers_23o3f_98{flex-direction:column;gap:14px;margin:0;padding:0;list-style:none;display:flex}._layers_23o3f_98 li{align-items:center;gap:10px;display:flex}._leader_23o3f_113{background:var(--pv-line);flex:none;width:26px;height:1px}._layerBtn_23o3f_120{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em;cursor:pointer;color:var(--pv-text);text-align:left;background:0 0;border:none;padding:4px 0;font-size:10.5px;transition:color .15s}._layerBtn_23o3f_120:hover,._layerBtn_23o3f_120:focus-visible{color:var(--pv-strong)}._tagline_23o3f_139{font-family:var(--sans);font-size:10px;font-weight:var(--weight-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--pv-dim);display:block}._panel_23o3f_150{background:var(--paper);border-radius:18px;max-width:600px;margin-top:18px;margin-left:auto;margin-right:auto;box-shadow:0 0 0 .5px #17181c1f,0 2px 2px -1px #0000000f,0 4px 4px -2px #0000000a}:root[data-theme=dark] ._panel_23o3f_150,:root:not([data-theme=light]) ._panel_23o3f_150{box-shadow:inset 0 0 0 1px #ffffff24,0 2px 4px -1px #0003,0 6px 12px -3px #0000003d}@media (prefers-color-scheme:light){:root:not([data-theme=dark]) ._panel_23o3f_150{box-shadow:0 0 0 1px #17181c1f,0 2px 2px -1px #0000000f,0 4px 4px -2px #0000000a}}._sliders_23o3f_182{grid-template-columns:1fr 1fr;gap:12px;padding:18px 18px 12px;display:grid}._notes_23o3f_189{flex-wrap:wrap;gap:16px;padding:0 18px 10px;display:flex}._note_23o3f_189{font-family:var(--sans);font-size:10.5px;font-weight:var(--weight-medium);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45)}._checks_23o3f_205{flex-wrap:wrap;align-items:center;gap:22px;padding:6px 18px 18px;display:flex}._divider_23o3f_213{background:var(--ink-08);height:1px}._styleRow_23o3f_218{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;padding:16px 18px;display:flex}._legend_23o3f_227{font-family:var(--sans);font-size:10px;font-weight:var(--weight-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45);margin-bottom:10px;display:block}._radios_23o3f_238{border:none;flex-wrap:wrap;gap:8px;margin:0;padding:0;display:flex}._radio_23o3f_238{border-radius:var(--radius-md);cursor:pointer;font-size:12.5px;font-weight:var(--weight-medium);letter-spacing:-.005em;color:var(--ink-60);background:0 0;align-items:center;gap:9px;padding:7px 13px 7px 10px;transition:color .15s,background-color .15s;display:inline-flex;position:relative}@media (hover:hover){._radio_23o3f_238:hover{color:var(--ink);background:var(--ink-04)}}._radio_23o3f_238 input{opacity:0;width:0;height:0;position:absolute}._radioDot_23o3f_279{border-radius:var(--radius-sm);width:15px;height:15px;box-shadow:inset 0 0 0 1.5px var(--ink-15);background:0 0;flex:none;transition:box-shadow .15s;position:relative}._radioDot_23o3f_279:after{content:"";border-radius:var(--radius-sm);background:var(--accent);transition:transform .15s;position:absolute;inset:3.5px;transform:scale(0)}._radioChecked_23o3f_302{color:var(--ink)}._radioChecked_23o3f_302 ._radioDot_23o3f_279{box-shadow:inset 0 0 0 1.5px var(--accent)}._radioChecked_23o3f_302 ._radioDot_23o3f_279:after{transform:scale(1)}._radio_23o3f_238 input:focus-visible+._radioDot_23o3f_279{outline:2px solid var(--ink-80);outline-offset:2px}._tint_23o3f_321{align-items:flex-end;gap:10px;display:flex}._reset_23o3f_327{font-family:var(--sans);font-size:10.5px;font-weight:var(--weight-medium);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45);cursor:pointer;background:0 0;border:none;padding:8px 0}._reset_23o3f_327:hover{color:var(--ink)}._exportRow_23o3f_344{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px 0;display:flex}._code_23o3f_353{padding:14px 18px 18px}@media (width<=640px){._sliders_23o3f_182{grid-template-columns:1fr}._styleRow_23o3f_218{flex-direction:column;align-items:flex-start}}._figmaHint_23o3f_367{color:var(--ink-45);margin-bottom:2px;font-size:12.5px;line-height:1.5}._page_1tygb_1{place-items:center;min-height:calc(100vh - 164px);display:grid;position:relative}._stack_1tygb_10{width:100%}@media (width<=640px){._page_1tygb_1{min-height:auto;padding-top:48px}}:root{--ink:#232028;--ink-80:#232028cc;--ink-60:#23202894;--ink-45:#23202870;--ink-30:#2320284d;--ink-15:#23202824;--ink-08:#23202814;--ink-04:#2320280a;--paper:#fff;--surface:#fbfbfb;--card:#fff;--demo-border:#d6d5d9;--accent:#335cff;--accent-fg:#fff;--accent-soft:#335cff1a;--tab-active-bg:#fff;--tab-active-fg:#232028;--tab-active-border:#23202824;--code-bg:#f7f7f9;--code-fg:#33303d;--code-muted:#6e6b78;--code-key:#6f42c1;--code-prop:#1257bd;--code-str:#a04100;--code-fn:#1257bd;--code-scroll:#2320282e;--sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--mono:ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;--weight-normal:400;--weight-medium:500;--weight-semibold:600;--hairline:1px;--segment-track-bg:color-mix(in srgb, var(--ink) 4%, var(--paper));--segment-chip-bg:var(--paper);--height-segment-sm:32px;--height-segment-md:36px;--radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:10px;--edge-ring:0 0 0 var(--hairline) color-mix(in srgb, var(--ink) 12%, transparent);--segment-chip-shadow:var(--edge-ring), 0 1px 2px 0 color-mix(in srgb, var(--ink) 8%, transparent), 0 3px 6px -2px color-mix(in srgb, var(--ink) 10%, transparent);--space-md:12px;--space-lg:16px;--size-body-sm:12.5px;--size-table-cell:13.5px;--weight-base:400;--line-height-tight:1.2;--duration-quick:.15s;--ease-smooth-out:cubic-bezier(.22, 1, .36, 1);--focus-ring:2px solid var(--ink);--focus-ring-offset:2px;--slider-track:color-mix(in srgb, var(--ink) 5%, var(--paper));--slider-fill:color-mix(in srgb, var(--ink) 10%, var(--paper));--slider-edge:color-mix(in srgb, var(--ink) 10%, transparent);--slider-tick:color-mix(in srgb, var(--ink) 18%, transparent);--slider-label:var(--ink-60);--slider-value:var(--ink);--slider-handle:var(--ink);--slider-handle-edge:transparent;--z-popover:100;--z-toast:400}@media only screen and (resolution>=192dpi){:root{--hairline:.5px}}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ink:#ecebf0;--ink-80:#ecebf0cc;--ink-60:#ecebf094;--ink-45:#ecebf070;--ink-30:#ecebf04d;--ink-15:#ecebf029;--ink-08:#ecebf017;--ink-04:#ecebf00d;--paper:#17171a;--surface:#131316;--card:#1f1f24;--demo-border:#3b3b42;--accent:#5b7dff;--accent-fg:#0d1330;--accent-soft:#335cff29;--tab-active-bg:#171717;--tab-active-fg:#ecebf0;--tab-active-border:#ecebf02e;--code-bg:#1b1b20;--code-fg:#d7d5e0;--code-muted:#8f8c99;--code-key:#b3a0f5;--code-prop:#7fb2ef;--code-str:#e0b072;--code-fn:#7fb2ef;--code-scroll:#ecebf033;--slider-track:#2c2c30;--slider-fill:#3a3a3f;--slider-edge:#ffffff0f;--slider-tick:#ffffff47;--slider-label:#ecebf09e;--slider-value:#fff;--slider-handle:#fff;--slider-handle-edge:#00000040}}:root[data-theme=dark]{--ink:#ecebf0;--ink-80:#ecebf0cc;--ink-60:#ecebf094;--ink-45:#ecebf070;--ink-30:#ecebf04d;--ink-15:#ecebf029;--ink-08:#ecebf017;--ink-04:#ecebf00d;--paper:#0a0a0a;--surface:#131316;--card:#1f1f24;--demo-border:#3b3b42;--accent:#5b7dff;--accent-fg:#0d1330;--accent-soft:#335cff29;--tab-active-bg:#171717;--tab-active-fg:#ecebf0;--tab-active-border:#ecebf02e;--code-bg:#1b1b20;--code-fg:#d7d5e0;--code-muted:#8f8c99;--code-key:#b3a0f5;--code-prop:#7fb2ef;--code-str:#e0b072;--code-fn:#7fb2ef;--code-scroll:#ecebf033;--slider-track:#2c2c30;--slider-fill:#3a3a3f;--slider-edge:#ffffff0f;--slider-tick:#ffffff47;--slider-label:#ecebf09e;--slider-value:#fff;--slider-handle:#fff;--slider-handle-edge:#00000040}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--paper);color:var(--ink)}body{font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;letter-spacing:-.005em;min-height:100vh;font-size:14px;line-height:1.55}a{color:inherit}h1,h2,h3{text-wrap:balance}.wrap{max-width:720px;min-height:100vh;margin:0 auto;padding:36px 28px 128px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:where(button,input,a,summary,[tabindex]):focus-visible{outline:2px solid var(--ink-80);outline-offset:2px}.code pre::-webkit-scrollbar{width:8px;height:8px}.code pre::-webkit-scrollbar-track{background:0 0}.code pre::-webkit-scrollbar-thumb{background-color:var(--code-scroll);border-radius:4px}.code .copy{z-index:1;position:absolute;top:10px;right:10px}.code pre{scrollbar-width:thin;scrollbar-color:var(--code-scroll) transparent}.head{justify-content:space-between;align-items:center;padding:0 0 76px;display:flex}.word{letter-spacing:-.01em;font-size:14px;font-weight:600}.preview{border-radius:16px;justify-content:center;align-items:center;min-height:300px;padding:56px 24px;transition:background .2s;display:flex}.chip{border-radius:18px;flex:none;width:156px;height:156px;transition:box-shadow .18s}.anatomy-grid{flex-wrap:wrap;justify-content:center;align-items:center;gap:40px;display:flex}.panel{background:var(--paper);border-radius:16px;margin-top:20px;box-shadow:0 0 0 .5px #17181c1f,0 2px 2px -1px #0000000f,0 4px 4px -2px #0000000a}:root[data-theme=dark] .panel,:root:not([data-theme=light]) .panel{box-shadow:inset 0 0 0 .5px #ffffff24,0 2px 4px -1px #0003,0 6px 12px -3px #0000003d}@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .panel{box-shadow:0 0 0 .5px #17181c1f,0 2px 2px -1px #0000000f,0 4px 4px -2px #0000000a}}.panel-row{flex-wrap:wrap;align-items:center;gap:28px;padding:18px 20px;display:flex}.panel-row.sliders{padding-bottom:6px}.panel-row.notes{gap:16px;padding:0 20px 6px}.panel-row.toggles{padding-top:12px}.panel-row.presets{justify-content:space-between;padding-bottom:10px}.panel-row.formats{padding-top:0;padding-bottom:12px}.panel-divider{background:var(--ink-08);height:1px}.panel-code{padding:0 20px 20px}.panel-code .code{margin-top:0}.ctl{flex:220px;align-items:center;gap:14px;min-width:200px;display:flex}.ctl label{color:var(--ink-60);flex:none;font-size:13px}.ctl .val{font-family:var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-45);text-align:right;font-variant-numeric:tabular-nums;flex:none;min-width:34px;font-size:12px}input[type=range]{appearance:none;background:var(--ink-08);border-radius:var(--radius-md);outline:none;flex:1;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;border-radius:var(--radius-sm);background:var(--paper);cursor:pointer;width:16px;height:16px;box-shadow:0 0 0 1px var(--ink-15), 0 1px 2px #0003}input[type=range]::-moz-range-thumb{border-radius:var(--radius-sm);background:var(--paper);cursor:pointer;width:16px;height:16px;box-shadow:0 0 0 1px var(--ink-15), 0 1px 2px #0003;border:none}.pocket-note{font-family:var(--sans);font-size:10.5px;font-weight:var(--weight-medium);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45)}.switch{color:var(--ink-60);align-items:center;gap:9px;font-size:13px;display:inline-flex}.switch button{background:var(--ink-15);border-radius:var(--radius-md);cursor:pointer;border:none;flex:none;width:38px;height:22px;padding:2px;transition:background-color .15s}.switch button[aria-checked=true]{background:var(--accent)}.switch button:disabled{opacity:.4;cursor:not-allowed}.switch .dot{background:var(--paper);border-radius:var(--radius-sm);width:18px;height:18px;transition:transform .15s;display:block;box-shadow:0 1px 2px #0003}.switch button[aria-checked=true] .dot{transform:translate(16px)}.pills{flex-wrap:wrap;gap:6px;display:flex}.pill{font-family:var(--sans);border-radius:var(--radius-md);cursor:pointer;background:var(--ink-04);color:var(--ink-60);letter-spacing:-.005em;border:none;padding:6px 14px;font-size:12.5px;font-weight:500;transition:color .15s,background-color .15s,box-shadow .15s}.pill:hover:not(.on){color:var(--ink)}.pill.on{background:var(--accent);color:var(--accent-fg)}.action{font-family:var(--sans);border-radius:var(--radius-md);cursor:pointer;background:var(--accent);color:var(--accent-fg);letter-spacing:-.005em;border:none;margin-left:auto;padding:9px 18px;font-size:12.5px;font-weight:500;transition:opacity .15s}.action:hover{opacity:.85}.tint{color:var(--ink-45);align-items:center;gap:9px;font-size:12.5px;display:inline-flex}.tint input[type=color]{border-radius:var(--radius-sm);cursor:pointer;width:26px;height:26px;box-shadow:0 0 0 1px var(--ink-15);background:0 0;border:none;padding:0}.tint input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.tint input[type=color]::-webkit-color-swatch{border-radius:var(--radius-sm);border:none}.reset{font-family:var(--sans);font-size:10.5px;font-weight:var(--weight-medium);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45);cursor:pointer;background:0 0;border:none;padding:2px 0}.reset:hover{color:var(--ink)}.file-list{flex-direction:column;gap:12px;display:flex}.file-card{background:var(--paper);border-radius:12px;align-items:center;gap:14px;padding:16px 18px;text-decoration:none;transition:box-shadow .18s;display:flex;box-shadow:0 0 0 1px #17181c1f,0 2px 2px -1px #0000000f,0 4px 4px -2px #0000000a}.file-card:hover{box-shadow:0 0 0 1px #17181c3d,0 3px 3px -1px #0000001a,0 6px 6px -2px #0000000f}:root[data-theme=dark] .file-card,:root:not([data-theme=light]) .file-card{box-shadow:inset 0 0 0 1px #ffffff24,0 2px 4px -1px #0003,0 6px 12px -3px #0000003d}@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .file-card{box-shadow:0 0 0 1px #17181c1f,0 2px 2px -1px #0000000f,0 4px 4px -2px #0000000a}}.file-icon{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.1em;color:var(--ink-45);background:var(--ink-04);border-radius:7px;flex:none;justify-content:center;align-items:center;width:34px;height:34px;font-size:9.5px;display:flex}.file-meta{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.file-path{font-family:var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.file-path.standalone{color:var(--ink-45);margin-top:4px}.file-blurb{color:var(--ink-45);font-size:12.5px}.file-size{font-family:var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-30);font-variant-numeric:tabular-nums;flex:none;font-size:10.5px}.file-go{color:var(--ink-30);flex:none}.skill-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px;display:flex}.title.small{font-size:24px}.skill-head .action{margin-left:0}@media (width<=640px){.panel-row{gap:16px}.action{margin-left:0}.panel-row.presets{gap:14px}}.title-block,.page-head{text-align:center;padding:0 0 52px}.title{letter-spacing:-.028em;text-wrap:balance;margin-bottom:14px;font-size:34px;font-weight:600;line-height:1.08}.tag{color:var(--ink-60);text-wrap:pretty;max-width:520px;margin:0 auto;font-size:15px;line-height:1.55}.next{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:88px;margin-bottom:88px;display:grid}.next-card{background:var(--paper);border-radius:12px;flex-direction:column;gap:6px;padding:16px 18px;text-decoration:none;transition:box-shadow .18s;display:flex;box-shadow:0 0 0 1px #17181c1f,0 2px 2px -1px #0000000f,0 4px 4px -2px #0000000a}.next-card:hover{box-shadow:0 0 0 1px #17181c3d,0 3px 3px -1px #0000001a,0 6px 6px -2px #0000000f}:root[data-theme=dark] .next-card,:root:not([data-theme=light]) .next-card{box-shadow:inset 0 0 0 1px #ffffff24,0 2px 4px -1px #0003,0 6px 12px -3px #0000003d}@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .next-card{box-shadow:0 0 0 1px #17181c1f,0 2px 2px -1px #0000000f,0 4px 4px -2px #0000000a}}.next-title{letter-spacing:-.01em;color:var(--ink);align-items:center;gap:6px;font-size:13px;font-weight:600;display:flex}.next-blurb{color:var(--ink-45);font-size:12px;line-height:1.5}@media (width<=640px){.next{grid-template-columns:1fr}}section+section{margin-top:88px}.sec-title{font-size:15px;font-weight:var(--weight-semibold);letter-spacing:-.01em;margin-bottom:22px}.sec-lead{color:var(--ink-60);text-wrap:pretty;max-width:560px;margin-bottom:24px;font-size:13.5px;line-height:1.6}.sec-lead code{font-family:var(--sans);font-variant-numeric:tabular-nums;background:var(--ink-04);color:var(--ink);border-radius:5px;padding:1px 6px;font-size:12.5px}.stage.anatomy{gap:40px;padding:48px 24px}.layers{flex-direction:column;gap:14px;list-style:none;display:flex}.layers li{align-items:center;gap:10px;display:flex}.layers .leader{background:var(--ink-15);flex:none;width:28px;height:1px}.layers button{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em;cursor:pointer;color:var(--ink-45);text-align:left;background:0 0;border:none;padding:4px 0;font-size:10.5px;transition:color .15s}.layers button:hover,.layers button:focus-visible{color:var(--ink)}.layers .tagline{font-family:var(--sans);font-size:10px;font-weight:var(--weight-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-30);display:block}.code{background:var(--code-bg);color:var(--code-fg);border-radius:12px;margin-top:8px;padding:16px 20px;position:relative}.code pre .k{color:var(--code-key)}.code pre .p{color:var(--code-prop)}.code pre .s{color:var(--code-str)}.code pre .fn{color:var(--code-fn)}.code pre .c{color:var(--code-muted);font-style:italic}.code pre{font-family:var(--mono);color:var(--code-fg);letter-spacing:-.005em;white-space:pre-wrap;word-break:break-word;padding-right:60px;font-size:12px;line-height:1.7;overflow-x:auto}.code.scroll pre{max-height:340px;overflow-y:auto}.pm-tabs{gap:14px;margin-bottom:10px;display:flex}.pm-tabs button{font-family:var(--sans);color:var(--ink-45);cursor:pointer;letter-spacing:-.005em;background:0 0;border:none;padding:0;font-size:12.5px;font-weight:500;transition:color .15s}.pm-tabs button.on{color:var(--ink)}.pm-tabs button:hover:not(.on){color:var(--ink-80)}.example{margin-top:28px}.example .ex-lbl{color:var(--ink-60);letter-spacing:-.005em;margin-bottom:6px;font-size:13px}.skill-block{margin-top:24px}.skill-block .ex-lbl{font-family:var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-45);letter-spacing:-.005em;margin-bottom:6px;font-size:11.5px}.full-component{margin-top:10px}.full-component summary{color:var(--ink-45);cursor:pointer;padding:2px 0;font-size:12.5px;list-style:none;display:inline-block}.full-component summary::-webkit-details-marker{display:none}.full-component summary:before{content:"+ ";font-family:var(--sans);font-variant-numeric:tabular-nums}.full-component[open] summary:before{content:"− ";font-family:var(--sans);font-variant-numeric:tabular-nums}.full-component summary:hover{color:var(--ink)}.foot{border-top:1px solid var(--ink-08);color:var(--ink-30);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:104px;padding-top:24px;font-size:12px;display:flex}.foot a{color:var(--ink-60);text-decoration:none}.foot a:hover{color:var(--ink)}.lineage{font-family:var(--sans);font-size:10.5px;font-weight:var(--weight-medium);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-30);flex-basis:100%}@media (width<=640px){.stage{gap:16px;padding:44px 16px 32px}.stage.anatomy{flex-direction:column;gap:20px}.card-demo{width:140px;height:170px}.row,.tog-row{grid-template-columns:1fr auto}.row .lbl,.tog-row .lbl{grid-column:1/-1;padding-bottom:4px}.color-row{grid-template-columns:1fr}.pocket-line{padding-left:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.guide .back,.back{font-family:var(--sans);font-size:10.5px;font-weight:var(--weight-medium);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45);align-items:center;gap:6px;margin-bottom:48px;text-decoration:none;transition:color .15s;display:inline-flex}.guide .back:hover{color:var(--ink)}.guide .title{margin-bottom:12px}.guide .tag{margin-bottom:8px}.guide section{margin-top:52px}.guide .sub{letter-spacing:-.01em;margin:28px 0 8px;font-size:13.5px;font-weight:600}.prose{color:var(--ink-80);max-width:620px;margin-bottom:14px;font-size:14px;line-height:1.65}.prose.subtle{color:var(--ink-45);font-size:13px}.prose code,.mono-inline{font-family:var(--sans);font-variant-numeric:tabular-nums;background:var(--ink-04);color:var(--ink);border-radius:5px;padding:1px 6px;font-size:12.5px}.stage{background:var(--surface);border-radius:var(--radius-lg);box-shadow:inset 0 0 0 var(--hairline) var(--ink-08);justify-content:center;align-items:center;gap:32px;padding:48px 24px 40px;display:flex}.card-demo{background:var(--card);border-radius:16px;flex:none;width:148px;height:168px;position:relative}.card-demo .lbl{text-align:center;letter-spacing:-.005em;color:var(--ink-45);font-size:12px;position:absolute;bottom:-28px;left:0;right:0}.card-demo.solid{border:1px solid var(--demo-border);box-shadow:0 2px 2px -1px #0000000f,0 4px 4px -2px #0000000a}.stage.compare{flex-wrap:wrap;margin:24px 0;padding:44px 24px 52px}.card-demo.small{width:108px;height:128px}.mini{flex-direction:column;align-items:center;gap:14px;display:flex}.mini-lbl{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.1em;color:var(--ink-45);font-variant-numeric:tabular-nums;font-size:10.5px}.compare-grid{flex-wrap:wrap;justify-content:center;align-items:center;gap:40px;display:flex}.compare-grid .mini{flex-direction:column;align-items:center;gap:18px;display:flex}.compare-grid .mini-lbl{color:var(--ink-45);letter-spacing:-.005em;font-size:12px;font-family:var(--sans);text-transform:none}.head-right{align-items:center;gap:14px;display:flex}::view-transition-old(root){mix-blend-mode:normal;animation:none}::view-transition-new(root){mix-blend-mode:normal;animation:none}.next-icon{width:28px;height:28px;color:var(--ink-45);background:var(--ink-04);border-radius:8px;justify-content:center;align-items:center;margin-bottom:4px;transition:color .2s,background-color .2s;display:inline-flex}@media (hover:hover){.next-card:hover .next-icon{color:var(--accent);background:var(--accent-soft)}}.next-title{justify-content:flex-start}.next-arrow{color:var(--ink-30);transition:transform .2s cubic-bezier(.16,1,.3,1),color .2s}@media (hover:hover){.next-card:hover .next-arrow{color:var(--ink-60);transform:translate(3px)}}.file-go{transition:transform .2s cubic-bezier(.16,1,.3,1),color .2s;display:inline-flex}@media (hover:hover){.file-card:hover .file-go{color:var(--ink-60);transform:translate(3px)}}.action{align-items:center;gap:7px;display:inline-flex}@media (prefers-reduced-motion:no-preference){.route>*,.route>.guide>*{animation:.44s cubic-bezier(.16,1,.3,1) backwards route-rise}.route>:nth-child(2),.route>.guide>:nth-child(2){animation-delay:55ms}.route>:nth-child(3),.route>.guide>:nth-child(3){animation-delay:.1s}.route>:nth-child(4),.route>.guide>:nth-child(4){animation-delay:.14s}.route>:nth-child(n+5),.route>.guide>:nth-child(n+5){animation-delay:.175s}.route>.guide{animation:none}}@keyframes route-rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}