:root{--font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;--font-body: "Inter", "Helvetica Neue", Arial, sans-serif;--font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;--color-primary: #7000bd;--color-primary-deep: #54008e;--color-primary-soft: rgba(112, 0, 189, .08);--color-primary-soft-border: rgba(112, 0, 189, .18);--color-accent-orange: #ff7a00;--color-accent-orange-deep: #cc6200;--color-danger: #dc2626;--color-danger-deep: #a91d1d;--color-success: #0f9d58;--color-black: #000000;--color-ink: #0a0a0a;--color-ink-soft: #3a3a3a;--color-ink-muted: #6b6b6b;--color-ink-disabled: #a8a8a8;--color-page-bg: #f4f4f4;--color-app-bg: #fafafa;--color-surface: #ffffff;--color-surface-alt: #f7f7f8;--color-surface-sunken: #ededee;--color-border-default: #e2e2e3;--color-border-strong: #bcbcbe;--color-border-on-dark: rgba(255, 255, 255, .12);--color-on-dark: #ffffff;--color-on-dark-muted: rgba(255, 255, 255, .64);--color-on-dark-faint: rgba(255, 255, 255, .36);--color-focus-ring: #7000bd;--gradient-brand: linear-gradient(90deg, #7000bd 0%, #b8278d 50%, #ff7a00 100%);--gradient-status-active: linear-gradient(180deg, #7000bd 0%, #ff7a00 100%);--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-2xl: 32px;--space-3xl: 48px;--space-4xl: 64px;--radius-none: 0px;--radius-circle: 50%;--border-accent-bar: 4px;--border-tab-underline: 3px;--shadow-none: none;--shadow-mobile-container: 0 8px 32px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .04);--shadow-sticky-bar: 0 1px 0 var(--color-border-default);--shadow-bottom-sheet: 0 -8px 24px rgba(0, 0, 0, .12);--shadow-modal: 0 16px 48px rgba(0, 0, 0, .18);--shadow-fab: 0 4px 12px rgba(220, 38, 38, .32), 0 1px 3px rgba(0, 0, 0, .16);--shadow-fab-hover: 0 6px 18px rgba(220, 38, 38, .42), 0 2px 4px rgba(0, 0, 0, .2);--shadow-toast: 0 8px 24px rgba(0, 0, 0, .16);--shadow-dropdown: 0 8px 20px rgba(0, 0, 0, .12);--transition-instant: 80ms cubic-bezier(.4, 0, .2, 1);--transition-fast: .14s cubic-bezier(.4, 0, .2, 1);--transition-default: .2s cubic-bezier(.4, 0, .2, 1);--transition-sheet: .28s cubic-bezier(.32, .72, 0, 1);--transition-overlay: .24s cubic-bezier(.4, 0, .2, 1);--z-sticky: 100;--z-bottom-nav: 150;--z-fab: 200;--z-dropdown: 400;--z-overlay-backdrop: 800;--z-overlay: 850;--z-modal-backdrop: 900;--z-modal: 950;--z-toast: 1000;--z-demo-switcher: 1100}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);color:var(--color-ink);background:var(--color-page-bg);line-height:1.5;-webkit-font-smoothing:antialiased}img{max-width:100%;height:auto;display:block}a{color:inherit;text-decoration:none}button{font-family:inherit;border:none;background:none;cursor:pointer}input,select{font-family:inherit}.demo-panel{position:fixed;top:24px;right:24px;width:260px;z-index:var(--z-demo-switcher);background:var(--color-surface);border:1px solid var(--color-border-default);box-shadow:var(--shadow-dropdown);display:flex;flex-direction:column}.demo-panel__sim-banner{display:flex;flex-direction:column;gap:2px;padding:10px 14px;background:#fff8e1;border-top:1px solid #f0d97a}.demo-panel__sim-label{display:inline-flex;align-items:center;gap:6px;font:700 11px/1.2 var(--font-body);text-transform:uppercase;letter-spacing:.08em;color:#8a6200}.demo-panel__sim-label svg{flex-shrink:0}.demo-panel__sim-hint{font:400 11px/1.3 var(--font-body);color:#8a6200}.demo-panel__switcher{display:flex;border-bottom:1px solid var(--color-border-default)}.demo-panel__tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 12px;font:600 13px/1 var(--font-body);color:var(--color-ink-soft);background:transparent;border:0;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.demo-panel__tab svg{flex-shrink:0}.demo-panel__tab+.demo-panel__tab{border-left:1px solid var(--color-border-default)}.demo-panel__tab:hover{background:var(--color-surface-alt);color:var(--color-ink)}.demo-panel__tab--active{background:var(--color-primary);color:var(--color-on-dark)}.demo-panel__tab--active:hover{background:var(--color-primary-deep);color:var(--color-on-dark)}@media(max-width:980px){.demo-panel{display:none}}.toast-container{position:fixed;top:80px;right:32px;z-index:var(--z-toast);display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}.toast{position:relative;padding:12px 16px 12px 20px;background:var(--color-ink);color:var(--color-on-dark);box-shadow:var(--shadow-toast);max-width:380px;display:flex;align-items:center;gap:12px;font:500 14px/1.4 var(--font-body);opacity:0;transform:translate(16px);transition:opacity .2s ease-out,transform .2s ease-out;pointer-events:auto}.toast--visible{opacity:1;transform:translate(0)}.toast--hiding{opacity:0;transform:translate(16px)}.toast:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}.toast--success:before{background:var(--color-success)}.toast--info:before{background:var(--color-primary)}.toast--warning:before{background:var(--color-accent-orange)}.toast--error:before{background:var(--color-danger)}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;background:var(--color-primary);color:var(--color-on-dark);border:1px solid var(--color-primary);font:600 14px/1 var(--font-display);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-instant)}.btn-primary:hover{background:var(--color-primary-deep);border-color:var(--color-primary-deep)}.btn-primary:active{transform:translateY(1px)}.btn-primary:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.btn-primary:disabled{background:var(--color-surface-sunken);color:var(--color-ink-disabled);border-color:var(--color-border-default);cursor:not-allowed;opacity:1}.btn-primary--full{width:100%;height:56px;font-size:15px}.btn-primary--danger{background:var(--color-danger);border-color:var(--color-danger)}.btn-primary--danger:hover{background:var(--color-danger-deep);border-color:var(--color-danger-deep)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;background:var(--color-surface);color:var(--color-ink);border:1px solid var(--color-border-default);font:600 14px/1 var(--font-display);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}.btn-secondary:hover{background:var(--color-surface-alt);border-color:var(--color-border-strong)}.btn-secondary:active{background:var(--color-surface-sunken)}.btn-secondary:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.55}}@keyframes pulse-soft{0%,to{opacity:.6}50%{opacity:1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}