*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;color-scheme:light dark}body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.5}img,svg{display:block;max-width:100%}button,input,select,textarea{font:inherit;color:inherit}:root{--nextexample-spacing-md:1rem;--nextexample-spacing-lg:2rem;--nextexample-text-base:1rem;--nextexample-text-heading:1.75rem;--nextexample-radius:0.5rem;--nextexample-bg:#1e1e1e;--nextexample-fg:#f8fafc;--nextexample-palette-0:#1e1e1e;--nextexample-palette-1:#2d6cdf;--nextexample-palette-2:#3aa676;--nextexample-palette-3:#d97706;--nextexample-palette-4:#9b5de5;--nextexample-palette-5:#e63946;--nextexample-palette-6:#1d3557;--nextexample-palette-7:#06b6d4;--nextexample-palette-8:#475569;--nextexample-palette-9:#94a3b8;--nextexample-palette-10:#cbd5e1;--nextexample-palette-11:#e2e8f0;--nextexample-palette-12:#f1f5f9;--nextexample-palette-13:#fef3c7;--nextexample-palette-14:#bbf7d0;--nextexample-palette-15:#f8fafc;--nextexample-color-primary:var(--nextexample-palette-1);--nextexample-color-accent:var(--nextexample-palette-3);--nextexample-color-surface:var(--nextexample-palette-0);--nextexample-color-muted:var(--nextexample-palette-8);--nextexample-color-danger:var(--nextexample-palette-5);--nextexample-vsp-2xs:0.25rem;--nextexample-vsp-xs:0.5rem;--nextexample-vsp-sm:0.75rem;--nextexample-vsp-md:1rem;--nextexample-vsp-lg:1.75rem;--nextexample-vsp-xl:2.5rem;--nextexample-vsp-2xl:3.5rem;--nextexample-hsp-xs:0.25rem;--nextexample-hsp-sm:0.5rem;--nextexample-hsp-md:1rem;--nextexample-hsp-lg:1.5rem;--nextexample-hsp-xl:2rem;--nextexample-text-h2:1.75rem;--nextexample-text-h3:1.35rem;--nextexample-text-h4:1.1rem;--nextexample-text-body:1rem;--nextexample-text-small:0.875rem;--nextexample-text-micro:0.75rem;--nextexample-leading-tight:1.2;--nextexample-leading-snug:1.45;--nextexample-leading-relaxed:1.75;--nextexample-code-bg:hsl(220 13% 11%);--nextexample-code-fg:hsl(220 14% 86%);--nextexample-font-mono:ui-monospace,"Cascadia Code","Source Code Pro",Menlo,Consolas,monospace}body{background:var(--nextexample-bg);color:var(--nextexample-fg);font-size:var(--nextexample-text-base);padding:var(--nextexample-spacing-lg)}.nextexample-stack{display:flex;flex-direction:column;gap:var(--nextexample-spacing-lg);max-width:56rem;margin:0 auto}.nextexample-heading{font-size:var(--nextexample-text-heading);font-weight:700;margin:0 0 var(--nextexample-spacing-md);color:var(--nextexample-color-primary)}.nextexample-card{background:var(--nextexample-color-surface);color:var(--nextexample-fg);padding:var(--nextexample-spacing-md);border-radius:var(--nextexample-radius);border:1px solid var(--nextexample-color-muted)}.nextexample-card+.nextexample-card{margin-top:var(--nextexample-spacing-md)}.nextexample-button{display:inline-block;padding:var(--nextexample-spacing-md);border-radius:var(--nextexample-radius);background:var(--nextexample-color-accent);color:var(--nextexample-bg);border:none;cursor:pointer}.nextexample-button:hover{background:var(--nextexample-color-primary)}.nextexample-link{color:var(--nextexample-color-accent);text-decoration:underline}.nextexample-swatch-row{display:flex;flex-wrap:wrap;gap:var(--nextexample-spacing-md)}.nextexample-swatch{width:4rem;height:4rem;border-radius:var(--nextexample-radius);display:flex;align-items:flex-end;justify-content:center;font-size:.75rem;color:var(--nextexample-fg);text-shadow:0 1px 2px rgba(0,0,0,.7);padding:.25rem}.nextexample-meta{font-size:.875rem;color:var(--nextexample-color-muted)}.nextexample-rerender-counter{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;color:var(--nextexample-color-accent);font-weight:700}.nextexample-prose{max-width:56rem;margin:0 auto;padding:var(--nextexample-vsp-2xl) var(--nextexample-hsp-xl);font-size:var(--nextexample-text-body);line-height:var(--nextexample-leading-relaxed);color:var(--nextexample-fg)}.nextexample-prose>*+*{-webkit-margin-before:var(--flow-space,var(--nextexample-vsp-md));margin-block-start:var(--flow-space,var(--nextexample-vsp-md))}.nextexample-prose :where(h2){--flow-space:var(--nextexample-vsp-xl)}.nextexample-prose :where(h3){--flow-space:var(--nextexample-vsp-lg)}.nextexample-prose :where(h4){--flow-space:var(--nextexample-vsp-md)}.nextexample-prose :where(h2,h3,h4)+:where(p,ul,ol,table,pre,blockquote){--flow-space:var(--nextexample-vsp-sm)}.nextexample-prose :where(h2,h3,h4,h5,h6)+:where(h2,h3,h4,h5,h6){--flow-space:var(--nextexample-vsp-2xs)}.nextexample-prose>:first-child{-webkit-margin-before:0;margin-block-start:0}.nextexample-prose>:last-child{-webkit-margin-after:0;margin-block-end:0}.nextexample-prose :where(h2){font-size:var(--nextexample-text-h2);line-height:var(--nextexample-leading-tight);font-weight:700;-webkit-padding-before:var(--nextexample-vsp-xs);padding-block-start:var(--nextexample-vsp-xs);-webkit-border-before:2px solid var(--nextexample-color-primary);border-block-start:2px solid var(--nextexample-color-primary)}.nextexample-prose :where(h3){font-size:var(--nextexample-text-h3);line-height:var(--nextexample-leading-tight);font-weight:600}.nextexample-prose :where(h4){font-size:var(--nextexample-text-h4);line-height:var(--nextexample-leading-tight);font-weight:600}.nextexample-prose :where(code:not(pre code)){font-family:var(--nextexample-font-mono);font-size:var(--nextexample-text-small);background:var(--nextexample-code-bg);color:var(--nextexample-code-fg);padding:.1em var(--nextexample-hsp-xs);border-radius:3px;border:1px solid var(--nextexample-color-accent)}.nextexample-prose :where(pre){font-family:var(--nextexample-font-mono);font-size:var(--nextexample-text-small);background:var(--nextexample-code-bg);color:var(--nextexample-code-fg);padding:var(--nextexample-vsp-sm) var(--nextexample-hsp-sm);border-radius:4px;overflow-x:auto}.nextexample-prose :where(pre code){background:none;border:none;padding:0;font-size:inherit;color:inherit}.nextexample-prose :where(blockquote){-webkit-border-start:3px solid var(--nextexample-color-muted);border-inline-start:3px solid var(--nextexample-color-muted);-webkit-padding-start:var(--nextexample-hsp-md);padding-inline-start:var(--nextexample-hsp-md);color:var(--nextexample-color-muted)}.nextexample-prose :where(ul){-webkit-padding-start:var(--nextexample-hsp-lg);padding-inline-start:var(--nextexample-hsp-lg);list-style-type:disc}.nextexample-prose :where(ol){-webkit-padding-start:var(--nextexample-hsp-lg);padding-inline-start:var(--nextexample-hsp-lg);list-style-type:decimal}.nextexample-prose :where(li+li){-webkit-margin-before:var(--nextexample-vsp-xs);margin-block-start:var(--nextexample-vsp-xs)}.nextexample-prose :where(table){border-collapse:collapse;font-size:var(--nextexample-text-small);width:100%}.nextexample-prose :where(th,td){padding:var(--nextexample-hsp-xs) var(--nextexample-hsp-sm);border:1px solid var(--nextexample-color-muted);text-align:left}.nextexample-prose :where(th){font-weight:600;background:var(--nextexample-code-bg)}.nextexample-prose :where(hr){border:none;-webkit-border-before:1px solid var(--nextexample-color-muted);border-block-start:1px solid var(--nextexample-color-muted);margin-block:var(--nextexample-vsp-lg)}.nextexample-prose :where(a){color:var(--nextexample-color-accent);text-decoration:underline}.nextexample-prose :where(strong){font-weight:700}.nextexample-prose :where(em){font-style:italic}:where(.tokenpanel-shell,[data-design-token-panel-modal]){--tokentweak-color-fg:var(--color-fg,oklch(87% .01 60));--tokentweak-color-bg:var(--color-bg,oklch(18% .01 50));--tokentweak-color-muted:var(--color-muted,oklch(70% .01 60));--tokentweak-color-surface:var(--color-surface,oklch(22% .01 50));--tokentweak-color-accent:var(--color-accent,oklch(65% .2 45));--tokentweak-color-accent-hover:var(--color-accent-hover,oklch(55% .18 45));--tokentweak-color-code-bg:var(--color-code-bg,oklch(17% .005 50));--tokentweak-color-code-fg:var(--color-code-fg,oklch(87% .01 60));--tokentweak-color-success:var(--color-success,oklch(65% .19 145));--tokentweak-color-danger:var(--color-danger,oklch(60% .2 10));--tokentweak-color-warning:var(--color-warning,oklch(75% .17 75));--tokentweak-font-mono:var( --font-mono,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace );--tokentweak-pad-2xs:.125rem;--tokentweak-pad-xs:.375rem;--tokentweak-pad-sm:.5rem;--tokentweak-pad-md:.75rem;--tokentweak-pad-lg:1rem;--tokentweak-pad-xl:1.5rem;--tokentweak-pad-2xl:2rem;--tokentweak-gap-2xs:.4375rem;--tokentweak-gap-xs:.875rem;--tokentweak-gap-sm:1.25rem;--tokentweak-gap-md:1.5rem;--tokentweak-gap-lg:1.75rem;--tokentweak-gap-xl:2.5rem;--tokentweak-gap-2xl:3.5rem;--tokentweak-text-micro:.75rem;--tokentweak-text-caption:.875rem;--tokentweak-text-small:1rem;--tokentweak-text-body:1.2rem;--tokentweak-text-subheading:1.4rem;--tokentweak-text-heading:3rem;--tokentweak-text-display:3.75rem;--radius-tokentweak:.25rem}.tokenpanel-shell{z-index:50;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-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:.875rem;flex-shrink:0}.tokenpanel-action-link{color:var(--tokentweak-color-accent);font-size:.75rem;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 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;gap:2px;border-bottom:1px solid var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-xl);flex-shrink:0}.tokenpanel-tab-button{background:none;padding-inline:var(--tokentweak-pad-md);padding-block:var(--tokentweak-gap-xs);font-size:.875rem;cursor:pointer;border:none;border-bottom:2px solid transparent;color:var(--tokentweak-color-muted);transition:color .15s ease,border-color .15s ease}.tokenpanel-tab-button:focus-visible,.tokenpanel-tab-button:hover{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-body{flex:1 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:12rem;padding-block:var(--tokentweak-gap-md);padding-inline:var(--tokentweak-pad-xl)}.tokenpanel-empty-state-text{color:var(--tokentweak-color-muted,oklch(70% .01 60));font-size:.8125rem;line-height:1.5;max-width:32rem;margin:0}.tokenpanel-empty-state-text code{font-family:var(--tokentweak-font-mono,Menlo,Monaco,Consolas,monospace);font-size:.8125rem;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:focus-visible,.tokenpanel-empty-state-link:hover{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{flex-shrink:0}.tokenpanel-tab-section-heading{color:var(--tokentweak-color-muted);font-weight:600;margin-bottom:var(--tokentweak-gap-2xs);font-size:.8125rem;text-transform:uppercase;letter-spacing:.05em}.tokenpanel-tab-section-heading--color{font-size:1rem}.tokenpanel-tab-grid{display:grid;grid-template-columns:1fr;grid-gap:var(--tokentweak-gap-xs);gap:var(--tokentweak-gap-xs)}@media(min-width:640px){.tokenpanel-tab-grid{grid-template-columns:1fr 1fr}}.tokenpanel-tab-advanced{flex-shrink:0}.tokenpanel-tab-advanced-summary{color:var(--tokentweak-color-muted);font-weight:600;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:.8125rem;text-transform:uppercase;letter-spacing:.05em}.tokenpanel-tab-advanced-grid{display:grid;grid-template-columns:1fr;grid-gap:var(--tokentweak-gap-xs);gap:var(--tokentweak-gap-xs);margin-top:var(--tokentweak-gap-2xs)}@media(min-width:640px){.tokenpanel-tab-advanced-grid{grid-template-columns:1fr 1fr}}.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:.75rem;border-radius:var(--radius-tokentweak);max-width:14rem;cursor:pointer;transition:border-color .15s ease}.tokenpanel-color-preset-select:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-color-palette-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-gap:var(--tokentweak-pad-sm);gap:var(--tokentweak-pad-sm)}.tokenpanel-color-palette-grid--secondary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-gap:var(--tokentweak-pad-sm);gap:var(--tokentweak-pad-sm)}@media(min-width:768px){.tokenpanel-color-palette-grid--secondary{grid-template-columns:repeat(9,minmax(0,1fr))}}.tokenpanel-color-base-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:6px;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:3.5rem;height:3.5rem;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-label{color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:.6875rem;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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-hsl-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.tokenpanel-hsl-preview{flex-shrink:0;width:3.5rem;height:3.5rem}.tokenpanel-hsl-hex-input,.tokenpanel-hsl-preview{border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak)}.tokenpanel-hsl-hex-input{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);padding-inline:6px;padding-block:4px;font-family:var(--tokentweak-font-mono);font-size:1rem;width:8rem}.tokenpanel-hsl-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.tokenpanel-hsl-row-label{color:var(--tokentweak-color-muted);flex-shrink:0;font-size:.875rem;width:1rem}.tokenpanel-hsl-row-slider{flex:1 1;height:1.5rem;accent-color:var(--tokentweak-color-accent)}.tokenpanel-hsl-row-value{color:var(--tokentweak-color-fg);flex-shrink:0;text-align:right;font-size:.875rem;width:2.5rem}.tokenpanel-palette-selector{position:relative;width:100%}.tokenpanel-palette-trigger{display:flex;align-items:center;gap:4px;width:100%;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);padding-inline:6px;padding-block:4px;font-size:.75rem;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-label{flex:1 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{font-family:var(--tokentweak-font-mono);width:2.5em}.tokenpanel-palette-trigger-icon,.tokenpanel-palette-trigger-value{flex-shrink:0;color:var(--tokentweak-color-muted)}.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:1rem;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-color{width:1.75rem;height:1.75rem;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));grid-gap:5px;gap:5px}.tokenpanel-palette-option-button{width:3rem;height:3rem;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-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 1;min-width:0;font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-row-label--narrow{flex:0 0 auto;max-width:12rem}.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:.75rem;width:5rem;border-radius:var(--radius-tokentweak)}.tokenpanel-row-number-input:disabled{opacity:.6}.tokenpanel-row-unit{color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:.75rem;width:2rem}.tokenpanel-row-slider{width:100%;height:1.25rem;accent-color:var(--tokentweak-color-accent)}.tokenpanel-row-slider:disabled{opacity:.5}.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:.75rem;width:7rem;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:.75rem;flex:1 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:.75rem}[data-design-token-panel-modal]{margin-inline:auto;width:100%;max-width:46rem;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;-moz-user-select:text;user-select:text}[data-design-token-panel-modal]::-webkit-backdrop{background-color:rgb(from var(--tokentweak-color-bg) r g b/.8)}[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:12rem;font-family:var(--tokentweak-font-mono);resize:vertical;margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__json],[data-design-token-panel-modal] [class*=__textarea]{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)}[data-design-token-panel-modal] [class*=__json]{overflow-x:auto}[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:1rem;height:1rem;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(1turn)}}[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]:focus-visible,[data-design-token-panel-modal] [class*=__button]:hover{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]:focus-visible,[data-design-token-panel-modal] [class*=__button--primary]:hover{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]:focus-visible,[data-design-token-panel-modal] [class*=__close-button]:hover{color:var(--tokentweak-color-fg);border-color:var(--tokentweak-color-fg)}