@layer components{.site-demo{min-width:0;margin-block:var(--spacing-lg);border:1px solid var(--color-demo-line);border-radius:var(--radius-lg);color:var(--color-demo-text);background:var(--color-demo-canvas);text-align:start}.demo-header{border-bottom:1px solid var(--color-demo-line);background:var(--color-demo-canvas);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1.5rem;padding:.875rem 1.25rem;display:flex}.demo-header>div:first-child{min-width:0}.demo-header-controls{align-items:center;min-height:2.25rem;display:flex}.demo-title{font-size:.8125rem;font-weight:600;line-height:1.45}.demo-description,.demo-caption{color:var(--color-demo-muted);font-size:.75rem;line-height:1.55}.demo-description{margin-top:.2rem}.demo-caption{border-top:1px solid var(--color-demo-line);background:var(--color-demo-canvas);padding:.75rem 1.25rem}.demo-canvas{border-radius:inherit;min-width:0}.demo-canvas[data-background=stripes]{background:var(--stripe)}.demo-browser-header{align-items:center;gap:var(--spacing-md);padding:var(--spacing-xs) var(--spacing-md);border-bottom:1px solid var(--color-demo-line);background:var(--color-demo-surface);border-radius:var(--demo-radius) var(--demo-radius) 0 0;display:flex}.demo-browser-dots{gap:var(--spacing-2xs);display:flex}.demo-browser-dots i{background:var(--color-demo-muted);opacity:.5;border-radius:50%;width:.375rem;height:.375rem}.demo-embedded-frame{background:0 0;border:0;width:100%;display:block}.demo-canvas[data-background=grid]{background-image:linear-gradient(var(--color-demo-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-demo-grid) 1px, transparent 1px);background-size:var(--demo-grid-size) var(--demo-grid-size)}.demo-canvas[data-background=dots]{background-image:radial-gradient(var(--color-demo-grid) 1px, transparent 1px);background-size:.75rem .75rem}.demo-canvas[data-background=checkerboard]{background-image:conic-gradient(var(--color-demo-grid) 25%, transparent 0 50%, var(--color-demo-grid) 0 75%, transparent 0);background-size:1rem 1rem}.demo-canvas[data-padding=sm]{padding:var(--spacing-sm)}.demo-canvas[data-padding=md]{padding:var(--spacing-md)}.demo-canvas[data-padding=lg]{padding:3rem}:where(.demo-surface){border:1px solid var(--color-demo-line);border-radius:var(--radius-md);background:var(--color-demo-surface)}:where(.demo-surface[data-elevation=raised]){box-shadow:var(--shadow-sm)}:where(.demo-item){--demo-tone:var(--color-demo-neutral)}:where(.demo-legend-dot){--demo-tone:var(--color-demo-blue)}:where([data-tone=neutral]){--demo-tone:var(--color-demo-neutral)}:where([data-tone=blue]){--demo-tone:var(--color-demo-blue)}:where([data-tone=violet]){--demo-tone:var(--color-demo-violet)}:where([data-tone=amber]){--demo-tone:var(--color-demo-amber)}:where(.demo-item){border:1px solid var(--color-demo-line);border-radius:var(--radius-md);background:var(--color-demo-surface);color:var(--color-text-strong);font-size:.8125rem;font-weight:550;line-height:1.5}:where(.demo-item:not([data-tone=neutral])[data-variant=soft]){border-color:color-mix(in oklab, var(--demo-tone) 32%, var(--color-demo-line));background:color-mix(in oklab, var(--demo-tone) 9%, var(--color-demo-surface))}:where(.demo-item[data-variant=solid]){border-color:var(--demo-tone);background:var(--demo-tone);color:var(--color-demo-on-solid)}:where(.demo-item[data-tone=amber][data-variant=solid]){color:var(--color-gray-100)}:where(.demo-item[data-variant=outline]){border-color:color-mix(in oklab, var(--demo-tone) 60%, var(--color-demo-line));background:var(--color-demo-surface)}:where(.demo-item[data-variant=ghost]){background:0 0;border-color:#0000}.demo-badge{border-radius:var(--radius-xs);max-width:100%;font-family:var(--font-family-mono);font-size:var(--font-size-xs);font-variant-numeric:tabular-nums;letter-spacing:.01em;overflow-wrap:anywhere;vertical-align:baseline;padding:.25em .7em;font-weight:600;line-height:1.4;display:inline-block}.demo-badge[data-size=xs]{font-size:var(--font-size-2xs)}.demo-badge[data-size=sm]{font-size:var(--font-size-xs)}.demo-badge[data-size=md]{font-size:var(--font-size-sm)}.demo-badge[data-size=lg]{font-size:var(--font-size-md)}.demo-comparison{gap:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));display:grid}.demo-comparison>*{min-width:0}.demo-label{max-width:100%;color:var(--color-demo-muted);font:500 .75rem/1.5 var(--font-family-mono);font-variant-numeric:tabular-nums;letter-spacing:.01em;overflow-wrap:anywhere;display:inline-block}.demo-legend{color:var(--color-demo-muted);font:500 .75rem/1.5 var(--font-family-mono);font-variant-numeric:tabular-nums;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;margin:0;padding:0;list-style:none;display:flex}.demo-legend li{align-items:center;gap:.5rem;min-width:0;margin:0;display:inline-flex}.demo-legend-dot{background:var(--demo-tone);width:.625rem;height:.625rem;box-shadow:0 0 0 1px var(--color-demo-line);border-radius:2px;flex:none;display:inline-block}:where(.demo-text){margin:0;line-height:1.65}:where(.demo-text[data-variant=body]){color:var(--color-text-body)}:where(.demo-text[data-variant=lead]){color:var(--color-text-strong);letter-spacing:-.024em;font-size:1.375rem;font-weight:540;line-height:1.38}:where(.demo-text[data-variant=caption]){color:var(--color-text-muted);font-size:.75rem;line-height:1.55}:where(.demo-media){color:var(--color-demo-blue);background:var(--color-demo-surface);box-shadow:0 0 0 1px var(--color-demo-line)}.demo-swatch{border:1px solid var(--color-demo-line);border-radius:var(--radius-md);background:var(--color-demo-surface);gap:.625rem;min-width:0;padding:.5rem;display:grid}.demo-swatch-color{border-radius:var(--radius-sm);outline:1px solid var(--color-demo-line);outline-offset:-1px;height:5rem}.demo-swatch-meta{color:var(--color-text-strong);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.2rem .5rem;padding:0 .125rem .125rem;font-size:.75rem;font-weight:550;line-height:1.4;display:flex}.demo-swatch-meta code{color:var(--color-text-muted);font:.625rem/1.4 var(--font-family-mono);overflow-wrap:anywhere}.demo-axes{grid-template-rows:auto auto;grid-template-columns:2.25rem minmax(0,1fr);gap:.625rem;min-width:0;display:grid}.demo-axis-content{grid-area:2/2;min-width:0}.demo-axis-inline,.demo-axis-block{color:var(--color-text-body);font:500 .75rem/1.4 var(--font-family-mono)}.demo-axis-inline strong,.demo-axis-block strong{color:var(--color-demo-blue);font-weight:600}.demo-axis-inline{white-space:nowrap;grid-column:2;align-items:center;gap:.875rem;display:flex}.demo-axis-inline>span:first-child{flex:none}.demo-axis-inline-rule{background:var(--color-line-base);flex:1;min-width:1rem;height:1px;position:relative}.demo-axis-inline-rule:after{content:"";border-top:1px solid var(--color-demo-blue);border-right:1px solid var(--color-demo-blue);width:.375rem;height:.375rem;position:absolute;top:-.2rem;right:0;transform:rotate(45deg)}.demo-axis-block{flex-direction:column;grid-area:2/1;align-items:center;gap:.5rem;min-height:0;display:flex}.demo-axis-block>span:first-child{writing-mode:vertical-rl;white-space:nowrap}.demo-axis-block-rule{background:var(--color-line-base);flex:1;width:1px;min-height:1rem;position:relative}.demo-axis-block-rule:after{content:"";border-bottom:1px solid var(--color-demo-blue);border-right:1px solid var(--color-demo-blue);width:.375rem;height:.375rem;position:absolute;bottom:0;left:-.2rem;transform:rotate(45deg)}@media (max-width:32rem){.demo-axes{grid-template-columns:1.75rem minmax(0,1fr)}.demo-axis-inline{gap:.5rem}}.demo-measure{min-width:0}.demo-measure-header{color:var(--color-demo-muted);font:500 .6875rem/1.4 var(--font-family-mono);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem .75rem;margin-bottom:.5rem;display:flex}.demo-measure-header output{color:var(--color-demo-blue);font:600 .75rem/1.4 var(--font-family-mono);white-space:nowrap}.demo-measure-ruler{border-top:1px solid var(--color-demo-blue);height:.5rem;margin-bottom:.5rem;position:relative}.demo-measure-ruler:before,.demo-measure-ruler:after{content:"";border-left:1px solid var(--color-demo-blue);height:.5rem;position:absolute;top:-.25rem}.demo-measure-ruler:before{left:0}.demo-measure-ruler:after{right:0}.demo-scroll-area{overscroll-behavior:contain;border:1px solid var(--color-line-base);border-radius:var(--radius-md);background:var(--color-demo-surface);max-height:16rem;overflow:auto;box-shadow:inset 0 1px 2px #0000000a;box-shadow:inset 0 1px 2px lab(0% 0 0/.04)}.demo-controls{align-items:center;gap:var(--spacing-xs);border:0;flex-wrap:wrap;min-width:0;margin:0;padding:0;display:flex}.demo-controls[data-variant=segmented]{border:1px solid var(--color-line-base);border-radius:var(--radius-md);background:var(--color-surface-muted);gap:.25rem;max-width:100%;padding:.25rem;display:inline-flex}.demo-button,.demo-select{justify-content:center;align-items:center;gap:var(--spacing-2xs);min-height:2rem;padding:var(--spacing-2xs) var(--spacing-xs);border:1px solid var(--color-demo-line);border-radius:var(--radius-sm);background:var(--color-demo-surface);color:var(--color-demo-text);font:inherit;cursor:pointer;font-size:.6875rem;display:inline-flex}.demo-button:hover{border-color:var(--color-demo-blue)}.demo-copy-button{border-color:color-mix(in oklab, var(--color-demo-blue) 30%, var(--color-demo-line));min-height:2.5rem;color:var(--color-demo-blue);gap:.5rem;padding:.5rem .75rem;font-size:.75rem;font-weight:600}.demo-copy-button:hover{border-color:var(--color-demo-blue);background:color-mix(in oklab, var(--color-demo-blue) 7%, var(--color-demo-surface))}.demo-copy-button svg{flex:none}.demo-button[aria-pressed=true]{border-color:var(--color-demo-blue);color:var(--color-demo-blue)}.demo-controls[data-variant=segmented]>.demo-button{min-width:4.25rem;min-height:2.25rem;color:var(--color-text-body);font:550 .75rem/1.3 var(--font-family-sans);background:0 0;border-color:#0000;padding:.375rem .75rem}.demo-controls[data-variant=segmented]>.demo-button:hover{background:var(--color-surface-raised);color:var(--color-text-strong);border-color:#0000}.demo-controls[data-variant=segmented]>.demo-button[aria-pressed=true]{border-color:var(--color-line-base);background:var(--color-surface-raised);color:var(--color-demo-blue);box-shadow:var(--shadow-xs)}.demo-controls[data-variant=segmented]>.demo-button:focus-visible{outline-offset:2px}.demo-button:focus-visible,:where(.site-demo,.demo-controls) :is(button,select,input,a,[tabindex]):focus-visible{outline:2px solid var(--color-demo-blue);outline-offset:3px}.demo-pattern{background-image:repeating-linear-gradient(135deg, transparent 0 5px, var(--color-demo-grid) 5px 6px)}.demo-principle{gap:var(--spacing-md);padding-block:var(--spacing-md);border-bottom:1px solid var(--color-demo-line);display:flex}.demo-principle>span{font:.6875rem var(--font-mono), monospace;color:var(--color-demo-muted);padding-top:.25rem}.demo-principle strong{font-size:.875rem;font-weight:550}.demo-principle p{margin:var(--spacing-3xs) 0 0;color:var(--color-demo-muted);font-size:.8125rem}.demo-background-grid{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.demo-background-grid>div{border-radius:0}.demo-specimen-grid{gap:var(--spacing-md);grid-template-columns:repeat(auto-fit,minmax(min(100%,6rem),1fr));display:grid}@media not (min-width:30rem){.demo-canvas[data-padding=lg]{padding:2rem}}}@layer theme{:root,:host{--spacing-lg:1.5rem;--color-line-subtle:#0000000f;--radius-lg:.5rem;--color-text-body:var(--color-neutral-70);--color-neutral-70:#414452;--color-gray-30:#a9a9a9;--color-surface-base:var(--color-neutral-0);--color-neutral-0:#f8fafc;--color-gray-95:#131313;--color-text-muted:var(--color-neutral-60);--color-neutral-60:#585d6e;--color-gray-40:#8f8f8f;--color-line-muted:#00000017;--spacing-md:1rem;--spacing-xs:.5rem;--color-surface-raised:#fff;--color-gray-90:#1e1e1e;--demo-radius:var(--radius-md);--radius-md:.375rem;--spacing-2xs:.375rem;--color-gray-50:#727272;--demo-grid-size:1.25rem;--spacing-sm:.75rem;--shadow-sm:0 0 0 1px #0000000a, 0 1px 2px -1px #0000000f, 0 3px 6px -2px #00000014;--color-blue-60:#2248ff;--color-blue-40:#3989ff;--color-violet-60:#7b00ff;--color-violet-40:#9b57ff;--color-amber-60:#fa8500;--color-amber-40:#ffba0b;--color-text-strong:var(--color-neutral-100);--color-neutral-100:#08090c;--color-gray-100:#0a0a0a;--radius-xs:.125rem;--font-family-mono:var(--font-mono,ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--font-mono:"IBM Plex Mono";--font-size-xs:.75rem;--font-size-2xs:.625rem;--font-size-sm:.875rem;--font-size-md:1rem;--radius-sm:.25rem;--color-line-base:#0000001f;--color-surface-muted:var(--color-neutral-5);--color-neutral-5:#f2f5f8;--font-family-sans:var(--font-sans,ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-sans:"Geist", "Noto Sans TC";--shadow-xs:0 0 0 1px #0000000a, 0 1px 2px -1px #00000014;--spacing-3xs:.25rem}@supports (color:lab(0% 0 0)){:root,:host{--color-line-subtle:lab(0% 0 0/.06);--color-neutral-70:lab(29.0712% .942826 -8.89763);--color-gray-30:lab(69.26% -.0000298023 0);--color-neutral-0:lab(98.1184% -.366926 -1.18192);--color-gray-95:lab(5.71933% 0 0);--color-neutral-60:lab(39.4847% 1.07358 -10.3917);--color-gray-40:lab(59.4% 0 0);--color-line-muted:lab(0% 0 0/.09);--color-surface-raised:lab(100% 0 0);--color-gray-90:lab(11.26% .00000745058 -.00000298023);--color-gray-50:lab(48.032% 0 0);--shadow-sm:0 0 0 1px lab(0% 0 0/.04), 0 1px 2px -1px lab(0% 0 0/.06), 0 3px 6px -2px lab(0% 0 0/.08);--color-blue-60:lab(39.7317% 43.0116 -95.0928);--color-blue-40:lab(56.9889% 7.3145 -66.9423);--color-violet-60:lab(38.731% 74.2198 -96.523);--color-violet-40:lab(52.0168% 54.0873 -74.5564);--color-amber-60:lab(68.1255% 41.0336 74.5358);--color-amber-40:lab(80.3623% 17.3484 80.9779);--color-neutral-100:lab(2.45684% .114791 -1.30006);--color-gray-100:lab(2.75381% 0 0);--color-line-base:lab(0% 0 0/.12);--color-neutral-5:lab(96.2809% -.450373 -1.74739);--shadow-xs:0 0 0 1px lab(0% 0 0/.04), 0 1px 2px -1px lab(0% 0 0/.08)}}.light{--color-demo-line:var(--color-line-subtle);--color-line-subtle:#0000000f;--color-demo-text:var(--color-text-body);--color-text-body:var(--color-neutral-70);--color-demo-canvas:var(--color-surface-base);--color-surface-base:var(--color-neutral-0);--color-demo-muted:var(--color-text-muted);--color-text-muted:var(--color-neutral-60);--stripe:0 / 7.5px 7.5px linear-gradient(135deg, var(--color-line-muted) 4.5%, transparent 0, transparent 50%, var(--color-line-muted) 0, var(--color-line-muted) 54.5%, transparent 0) transparent;--color-line-muted:#00000017;--color-demo-surface:var(--color-surface-raised);--color-surface-raised:#fff;--color-demo-grid:color-mix(in oklab, var(--color-gray-50) 9%, transparent);--shadow-sm:0 0 0 1px #0000000a, 0 1px 2px -1px #0000000f, 0 3px 6px -2px #00000014;--color-demo-neutral:var(--color-gray-50);--color-demo-blue:var(--color-blue-60);--color-demo-violet:var(--color-violet-60);--color-demo-amber:var(--color-amber-60);--color-text-strong:var(--color-neutral-100);--color-demo-on-solid:#fff;--color-line-base:#0000001f;--color-surface-muted:var(--color-neutral-5);--shadow-xs:0 0 0 1px #0000000a, 0 1px 2px -1px #00000014}@supports (color:lab(0% 0 0)){.light{--color-line-subtle:lab(0% 0 0/.06);--color-line-muted:lab(0% 0 0/.09);--color-surface-raised:lab(100% 0 0);--shadow-sm:0 0 0 1px lab(0% 0 0/.04), 0 1px 2px -1px lab(0% 0 0/.06), 0 3px 6px -2px lab(0% 0 0/.08);--color-demo-on-solid:lab(100% 0 0);--color-line-base:lab(0% 0 0/.12);--shadow-xs:0 0 0 1px lab(0% 0 0/.04), 0 1px 2px -1px lab(0% 0 0/.08)}}.dark{--color-demo-line:var(--color-line-subtle);--color-line-subtle:#ffffff0f;--color-demo-text:var(--color-text-body);--color-text-body:var(--color-gray-30);--color-demo-canvas:var(--color-surface-base);--color-surface-base:var(--color-gray-95);--color-demo-muted:var(--color-text-muted);--color-text-muted:var(--color-gray-40);--stripe:0 / 7.5px 7.5px linear-gradient(135deg, var(--color-line-muted) 4.5%, transparent 0, transparent 50%, var(--color-line-muted) 0, var(--color-line-muted) 54.5%, transparent 0) transparent;--color-line-muted:#ffffff17;--color-demo-surface:var(--color-surface-raised);--color-surface-raised:var(--color-gray-90);--color-demo-grid:color-mix(in oklab, var(--color-gray-50) 12%, transparent);--shadow-sm:0 0 0 1px #ffffff0d, 0 1px 2px -1px #00000057, 0 3px 6px -2px #00000042;--color-demo-neutral:var(--color-gray-50);--color-demo-blue:var(--color-blue-40);--color-demo-violet:var(--color-violet-40);--color-demo-amber:var(--color-amber-40);--color-text-strong:#fff;--color-demo-on-solid:#000;--color-line-base:#ffffff1f;--color-surface-muted:var(--color-gray-100);--shadow-xs:0 0 0 1px #ffffff0a, 0 1px 2px -1px #0000004d}@supports (color:lab(0% 0 0)){.dark{--color-line-subtle:lab(100% 0 0/.06);--color-line-muted:lab(100% 0 0/.09);--shadow-sm:0 0 0 1px lab(100% 0 0/.05), 0 1px 2px -1px lab(0% 0 0/.34), 0 3px 6px -2px lab(0% 0 0/.26);--color-text-strong:lab(100% 0 0);--color-demo-on-solid:lab(0% 0 0);--color-line-base:lab(100% 0 0/.12);--shadow-xs:0 0 0 1px lab(100% 0 0/.04), 0 1px 2px -1px lab(0% 0 0/.3)}}}