:root{--font-sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:"Roboto Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;--white:#ffffff;--neutral-25:#faf9f5;--neutral-50:#f5f4ed;--neutral-100:#dedcd1;--neutral-200:#c2c0b6;--neutral-300:#9c9a92;--neutral-400:#73726c;--neutral-500:#3d3d3a;--neutral-600:#30302e;--neutral-700:#262624;--neutral-800:#1f1e1d;--neutral-900:#141413;--danger-300:#dd5353;--danger-400:#cd5c58;--danger-500:#b53333;--danger-600:#a73d39;--brand-300:#a6ce39;--brand-600:#2b6030;--info-300:#80aadd;--dark-bg-primary:var(--neutral-800);--dark-bg-secondary:var(--neutral-900);--dark-bg-tertiary:var(--neutral-700);--dark-bg-overlay:rgb(20 20 19/70%);--dark-fg-primary:var(--white);--dark-fg-secondary:var(--neutral-300);--dark-fg-tertiary:var(--neutral-400);--dark-fg-disabled:var(--neutral-500);--dark-border-primary:var(--neutral-600);--dark-border-secondary:var(--neutral-500);--dark-border-tertiary:var(--neutral-700);--dark-border-danger:var(--danger-300);--dark-ring-brand:var(--brand-300);--dark-ring-danger:var(--danger-300);--light-bg-primary:var(--neutral-25);--light-bg-secondary:var(--white);--light-bg-tertiary:var(--neutral-50);--light-bg-overlay:rgb(20 20 19/48%);--light-fg-primary:var(--neutral-900);--light-fg-secondary:var(--neutral-400);--light-fg-tertiary:var(--neutral-300);--light-fg-disabled:var(--neutral-200);--light-border-primary:var(--neutral-100);--light-border-secondary:var(--neutral-200);--light-border-tertiary:var(--neutral-50);--light-border-danger:var(--danger-300);--light-ring-brand:var(--brand-600);--light-ring-danger:var(--danger-500);--bg-page:var(--neutral-900);--bg-card:var(--neutral-700);--bg-card-light:var(--neutral-50);--text-strong:var(--dark-fg-primary);--text-soft:var(--dark-fg-secondary);--text-dark:var(--light-fg-primary);--blue-note:var(--info-300);--control-dark:var(--dark-bg-secondary);--control-light:var(--light-bg-secondary);--control-light-soft:var(--light-bg-primary);--control-disabled-dark:var(--dark-bg-primary);--control-disabled-light:var(--light-bg-tertiary);--border-dark:var(--dark-border-secondary);--border-dark-hover:var(--dark-fg-tertiary);--border-dark-active:var(--neutral-100);--border-light:var(--light-border-primary);--border-light-hover:var(--light-fg-secondary);--border-light-active:var(--light-fg-primary);--border-light-soft:var(--light-border-tertiary);--border-danger-dark:var(--dark-border-danger);--border-danger-light:var(--light-border-danger);--ring-dark:var(--dark-fg-secondary);--ring-light:var(--light-fg-primary);--ring-danger-dark:var(--dark-ring-danger);--ring-danger-light:var(--light-ring-danger);--dropdown-dark:var(--dark-bg-primary);--dropdown-light:var(--light-bg-primary);--option-hover-dark:var(--dark-border-primary);--option-hover-light:var(--neutral-50);--surface-glass-dark:rgb(12 18 26/74%);--surface-glass-light:rgb(255 255 255/90%);--surface-stroke-dark:rgb(128 170 221/40%);--surface-stroke-light:rgb(128 170 221/50%);--surface-panel-dark:rgb(255 255 255/3%);--surface-outline-dark:rgb(245 244 237/8%);--surface-outline-soft-dark:rgb(245 244 237/4%);--surface-outline-faint-dark:rgb(245 244 237/6%);--hero-shadow:0 18px 60px rgb(0 0 0/28%);--sheet-shadow:0 -8px 28px rgb(0 0 0/18%);--helper-ring:rgb(74 143 226/16%);--page-gradient-top:#171715;--page-gradient-bottom:#111111;--toggle-fg-dark:#d3e5fb;--toggle-fg-light:#1f2f3f;--select-bg-dark:var(--dark-bg-secondary);--select-bg-light:var(--light-bg-secondary);--select-bg-disabled-dark:var(--dark-bg-primary);--select-bg-disabled-light:var(--light-bg-tertiary);--select-text-placeholder-dark:var(--dark-fg-secondary);--select-text-placeholder-light:var(--light-fg-secondary);--select-text-value-dark:var(--dark-fg-primary);--select-text-value-light:var(--light-fg-primary);--select-text-disabled-dark:var(--dark-fg-disabled);--select-text-disabled-light:var(--light-fg-disabled);--select-icon-dark:var(--dark-fg-secondary);--select-icon-light:var(--light-fg-secondary);--select-icon-disabled-dark:var(--dark-fg-disabled);--select-icon-disabled-light:var(--light-fg-disabled);--select-border-default-dark:var(--dark-border-secondary);--select-border-default-light:var(--light-border-primary);--select-border-hover-dark:var(--dark-fg-tertiary);--select-border-hover-light:var(--light-fg-secondary);--select-border-active-dark:var(--neutral-100);--select-border-active-light:var(--light-fg-primary);--select-border-error-dark:var(--dark-border-danger);--select-border-error-light:var(--light-border-danger);--select-ring-focus-dark:var(--dark-fg-secondary);--select-ring-focus-light:var(--light-fg-primary);--select-ring-error-dark:var(--dark-ring-danger);--select-ring-error-light:var(--light-ring-danger);--select-dropdown-bg-dark:var(--dark-bg-primary);--select-dropdown-bg-light:var(--light-bg-primary);--select-dropdown-border-dark:var(--dark-border-tertiary);--select-dropdown-border-light:var(--light-border-tertiary);--select-option-hover-dark:var(--dark-border-primary);--select-option-hover-light:var(--neutral-50);--shadow-dropdown:0 1px 3px rgba(0,0,0,0.05),0 10px 20px rgba(0,0,0,0.08);--button-close-bg-dark:var(--control-dark);--button-close-border-dark:var(--border-dark);--button-close-border-hover-dark:var(--border-dark-hover);--button-close-icon-dark:var(--text-soft);--button-close-bg-light:var(--control-light);--button-close-border-light:var(--border-light);--button-close-border-hover-light:var(--light-border-secondary);--button-close-icon-light:var(--select-icon-light);--button-close-icon-hover-light:var(--light-fg-primary)}*{box-sizing:border-box}html{background:radial-gradient(circle at top left,rgb(128 170 221/8%),transparent 22%),linear-gradient(180deg,var(--page-gradient-top) 0,var(--page-gradient-bottom) 100%)}body{margin:0;font-family:var(--font-sans);color:var(--text-strong);min-height:100vh}button,input,select,textarea{font:inherit}.page-shell{min-height:100vh;padding:40px 20px 64px}.page-shell__inner{margin:0 auto;max-width:1280px}.single-select-page{min-height:100vh;display:grid;place-items:center;padding:24px 16px 112px;transition:background-color .16s ease,color .16s ease}.single-select-page--dark.single-select-page--primary{background:var(--dark-bg-secondary);color:var(--dark-fg-primary)}.single-select-page--dark.single-select-page--tertiary{background:var(--dark-bg-tertiary);color:var(--dark-fg-primary)}.single-select-page--light.single-select-page--primary{background:var(--light-bg-secondary);color:var(--light-fg-primary)}.single-select-page--light.single-select-page--tertiary{background:var(--light-bg-tertiary);color:var(--light-fg-primary)}.single-select-stage{width:min(100%,343px)}.single-select-stack{display:grid;grid-gap:16px;gap:16px}.single-select-restore{width:100%;min-height:44px;border-radius:12px;border:1px dashed;background:transparent;color:inherit;cursor:pointer}.single-select-controls{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:min(100% - 24px,720px)}.single-select-controls--states{bottom:72px}.single-select-toggle{border:1px solid var(--surface-stroke-dark);background:var(--surface-glass-dark);color:var(--toggle-fg-dark);border-radius:999px;padding:10px 14px;font-size:13px;line-height:1;cursor:pointer}.single-select-toggle--active{border-color:var(--select-border-active-dark);color:var(--select-text-value-dark)}.single-select-page--light .single-select-toggle{background:var(--surface-glass-light);color:var(--toggle-fg-light);border-color:var(--surface-stroke-light)}.single-select-page--light .single-select-toggle--active{border-color:var(--select-border-active-light);color:var(--select-text-value-light)}.page-hero{margin-bottom:28px;padding:28px;border:1px solid var(--surface-outline-dark);border-radius:28px;background:linear-gradient(145deg,rgb(38 38 36/92%),rgb(20 20 19/98%)),radial-gradient(circle at top right,rgb(128 170 221/12%),transparent 28%);box-shadow:var(--hero-shadow)}.page-hero__eyebrow{margin:0 0 10px;color:var(--blue-note);font-family:var(--font-mono);font-size:13px;text-transform:uppercase;letter-spacing:.08em}.page-hero h1{margin:0 0 12px;font-size:clamp(36px,5vw,54px);line-height:1}.page-hero p{margin:0;max-width:860px;color:var(--text-soft);line-height:1.5}.demo-card{margin-top:24px;padding:32px;border-radius:36px;background:var(--bg-card);border:1px solid var(--surface-outline-soft-dark)}.demo-card__head{margin-bottom:28px}.demo-card__head h2{margin:0;font-size:clamp(28px,4vw,42px);line-height:1.06}.demo-card__head p{margin:10px 0 0;max-width:820px;color:var(--text-soft);line-height:1.5}.principles,.size-matrix,.states-grid{display:grid;grid-gap:24px;gap:24px}.theme-board{display:grid;grid-gap:28px;gap:28px}.theme-board__section{display:grid;grid-gap:14px;gap:14px}.theme-board__section h3{margin:0;color:var(--blue-note);font-family:var(--font-mono);font-size:14px;font-weight:400}.theme-board__grid{display:grid;grid-gap:18px;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr))}.state-column{display:grid;grid-gap:8px;gap:8px}.state-column>span{color:var(--blue-note);font-family:var(--font-mono);font-size:11px}.state-column__items{display:grid;grid-gap:8px;gap:8px;padding:12px;border-radius:14px}.state-column__items--primary{background:transparent}.state-column__items--tertiary{background:var(--surface-panel-dark)}.theme-board--light .state-column__items--tertiary{background:var(--light-bg-tertiary)}.principles__group,.principles__inline{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}.adaptive-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:24px;gap:24px}.adaptive-preview__column{display:grid;grid-gap:12px;gap:12px}.adaptive-preview__label,.size-matrix__row>span,.states-grid__row>span{color:var(--blue-note);font-family:var(--font-mono);font-size:12px}.mobile-frame{width:100%;max-width:360px;padding:14px;border-radius:24px;background:var(--dark-bg-secondary);border:1px solid var(--surface-outline-faint-dark)}.states-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.states-grid--light{padding:24px;border-radius:28px;color:var(--text-dark);background:linear-gradient(180deg,var(--light-bg-secondary) 0,var(--light-bg-tertiary) 100%)}.states-grid--light .states-grid__row>span{color:var(--light-fg-secondary)}.states-grid__row{display:grid;grid-gap:10px;gap:10px;align-content:start}.size-matrix__row{display:grid;grid-template-columns:72px repeat(3,minmax(0,1fr));grid-gap:16px;gap:16px;align-items:center}.select{position:relative;width:min(100%,343px);color:var(--text-strong)}.select--light{color:var(--text-dark)}.select-control{width:100%;border-radius:12px;border:1px solid var(--select-border-default-dark);background:var(--select-bg-dark);color:inherit;display:flex;align-items:center;text-align:left;padding:12px 14px 14px;gap:8px;overflow:clip;transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease;cursor:pointer}.select-control--hover,.select-control:hover{border-color:var(--select-border-hover-dark)}.select-control:focus-visible{outline:none;box-shadow:0 0 0 2px var(--select-ring-focus-dark)}.select--light .select-control{background:var(--select-bg-light);border-color:var(--select-border-default-light)}.select--light .select-control--hover,.select--light .select-control:hover{border-color:var(--select-border-hover-light)}.select--light .select-control:focus-visible{box-shadow:0 0 0 2px var(--select-ring-focus-light)}.select--error .select-control{border-color:var(--select-border-error-dark)}.select--error .select-control.select-control--open,.select--error .select-control:focus-visible{box-shadow:0 0 0 2px var(--select-ring-error-dark)}.select--error .select-control--error-focused{box-shadow:0 0 0 2px var(--select-ring-error-dark)}.select--light.select--error .select-control{border-color:var(--select-border-error-light)}.select--light.select--error .select-control.select-control--open,.select--light.select--error .select-control:focus-visible{box-shadow:0 0 0 2px var(--select-ring-error-light)}.select--light.select--error .select-control--error-focused{box-shadow:0 0 0 2px var(--select-ring-error-light)}.select-control--focused{box-shadow:0 0 0 2px var(--select-ring-focus-dark)}.select--light .select-control--focused{box-shadow:0 0 0 2px var(--select-ring-focus-light)}.select--disabled .select-control,.select-control:disabled{cursor:not-allowed;background:var(--select-bg-disabled-dark);border-color:var(--select-border-default-dark);color:var(--select-text-disabled-dark)}.select--light .select-control:disabled,.select--light.select--disabled .select-control{background:var(--select-bg-disabled-light);border-color:var(--select-border-default-light);color:var(--select-text-disabled-light)}.select-control--open{border-color:var(--select-border-active-dark)}.select--light .select-control--open{border-color:var(--select-border-active-light)}.select-control--xl{min-height:64px;padding:13px 20px 14px;border-radius:18px;font-size:18px;line-height:22px}.select-control--l{min-height:52px;padding:14px 16px;border-radius:14px;font-size:15px;line-height:18px}.select-control--m{min-height:44px;font-size:14px;line-height:18px}.select-control--s{min-height:36px;padding:10px 12px;border-radius:10px;font-size:12px;line-height:16px}.select-control--xs{min-height:32px;padding:8px 12px;border-radius:8px;font-size:12px;line-height:16px}.select-helper-dot{width:8px;height:8px;border-radius:999px;background:var(--info-300);flex:none;box-shadow:0 0 0 3px var(--helper-ring)}.select-value{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--select-text-placeholder-dark)}.select--light .select-value{color:var(--select-text-placeholder-light)}.select-value--filled{color:var(--select-text-value-dark)}.select--light .select-value--filled{color:var(--select-text-value-light)}.select-actions{display:flex;align-items:center;flex:none}.select-control--clearable .select-chevron-wrap{margin-right:10px}.select-check-icon,.select-chevron{display:block;width:100%;height:100%}.button-close{box-sizing:border-box;width:16px;height:16px;padding:0;margin:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;border:1px solid var(--button-close-border);background:var(--button-close-bg);color:var(--button-close-icon);transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}.button-close--dark{--button-close-bg:var(--button-close-bg-dark);--button-close-border:var(--button-close-border-dark);--button-close-icon:var(--button-close-icon-dark)}.button-close--dark:hover{border-color:var(--button-close-border-hover-dark);color:var(--text-strong)}.button-close--dark:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ring-dark)}.button-close--light{--button-close-bg:var(--button-close-bg-light);--button-close-border:var(--button-close-border-light);--button-close-icon:var(--button-close-icon-light)}.button-close--light:hover{border-color:var(--button-close-border-hover-light);color:var(--button-close-icon-hover-light)}.button-close--light:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ring-light)}.button-close__icon{display:block;width:8px;height:8px}.button-close--select{position:absolute;top:-5px;right:-1px;z-index:2}.button-close--sheet{width:20px;height:20px}.button-close--sheet .button-close__icon{width:10px;height:10px}.select-chevron-wrap{width:16px;height:16px;color:var(--select-icon-dark);transition:color .12s ease,transform .12s ease}.select--light .select-chevron-wrap{color:var(--select-icon-light)}.select-chevron-wrap--filled{color:var(--select-text-placeholder-dark)}.select--light .select-chevron-wrap--filled{color:var(--select-text-placeholder-light)}.select-chevron-wrap--open{color:var(--select-text-placeholder-dark)}.select--light .select-chevron-wrap--open{color:var(--select-text-placeholder-light)}.select--disabled .select-chevron-wrap,.select-control:disabled .select-chevron-wrap{color:var(--select-icon-disabled-dark)}.select--light .select-control:disabled .select-chevron-wrap,.select--light.select--disabled .select-chevron-wrap{color:var(--select-icon-disabled-light)}.select-control--xl .select-chevron-wrap{width:24px;height:24px}.select-control--l .select-chevron-wrap{width:20px;height:20px}.select-dropdown{position:absolute;top:calc(100% + 6px);left:0;z-index:20;width:max-content;min-width:max(100%,200px);padding:18px 16px 20px;border-radius:12px;border:1px solid var(--select-dropdown-border-dark);background:var(--select-dropdown-bg-dark);box-shadow:var(--shadow-dropdown);display:grid;grid-gap:0;gap:0}.select--light .select-dropdown{background:var(--select-dropdown-bg-light);border-color:var(--select-dropdown-border-light)}.select-option{height:40px;border:0;background:transparent;color:inherit;display:flex;align-items:center;justify-content:space-between;padding:0 0 2px;cursor:pointer;font-size:14px;font-weight:400;line-height:16px}.select-option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-option--focused,.select-option:hover{margin-inline:-16px;padding-inline:16px;background:var(--select-option-hover-dark)}.select--light .select-option--focused,.select--light .select-option:hover{background:var(--select-option-hover-light)}.select-check-icon{width:20px;height:20px;flex:none}.sheet-backdrop{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;padding:16px}.sheet-backdrop--dark{background:var(--dark-bg-overlay)}.sheet-backdrop--light{background:var(--light-bg-overlay)}.select-sheet{width:min(100%,360px);border-radius:18px 18px 0 0;overflow:hidden;box-shadow:var(--sheet-shadow)}.select-sheet--dark,.select-sheet--light{background:var(--light-bg-secondary);color:var(--text-dark)}.select-sheet__header{display:grid;grid-template-columns:32px 1fr auto;align-items:center;grid-gap:12px;gap:12px;padding:16px;border-bottom:1px solid var(--light-border-tertiary)}.select-sheet__header strong{text-align:center;font-size:13px}.sheet-clear-link{border:0;background:transparent;padding:0;cursor:pointer;color:inherit;color:var(--light-fg-secondary);font-size:12px}.sheet-clear-link--disabled{color:var(--light-fg-disabled);cursor:not-allowed}.select-sheet__items{padding:8px 0 16px}@media (max-width:900px){.adaptive-preview,.size-matrix__row{grid-template-columns:1fr}.theme-board__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.size-matrix__row>span{margin-bottom:-6px}}@media (max-width:575px){.page-shell{padding-inline:12px}.demo-card,.page-hero{padding:20px;border-radius:24px}.principles__group,.principles__inline{flex-direction:column}.select,.select-dropdown{max-width:100%}.theme-board__grid{grid-template-columns:1fr}.single-select-controls{bottom:12px;width:calc(100% - 16px)}.single-select-controls--states{bottom:144px}.single-select-toggle{width:100%;border-radius:12px}}