:root{--font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;--font-mono: "SF Mono", "Menlo", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: .75rem;--spacing-lg: 1rem;--spacing-xl: 1.5rem;--spacing-2xl: 2rem;--spacing-3xl: 3rem;--spacing-4xl: 4rem;--spacing-5xl: 6rem;--radius-xs: .25rem;--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-xl: 1.25rem;--radius-2xl: 1.5rem;--radius-3xl: 2rem;--color-surface-primary: #FFFFFF;--color-surface-secondary: #FAFAFA;--color-surface-tertiary: #F5F5F7;--color-surface-elevated: #FFFFFF;--color-border-primary: #E5E5E7;--color-border-secondary: #F2F2F7;--color-text-primary: #1D1D1F;--color-text-secondary: #424245;--color-text-tertiary: #6E6E73;--color-text-quaternary: #8E8E93;--color-blue: #007AFF;--color-green: #30D158;--color-orange: #FF9F0A;--color-red: #FF3B30;--color-purple: #AF52DE;--color-pink: #FF2D92;--color-yellow: #FFCC02;--color-success: var(--color-green);--color-primary: var(--color-blue);--color-premium: var(--color-purple);--color-warning: var(--color-orange);--color-error: var(--color-red);--shadow-soft: 0 1px 3px 0 rgba(0, 0, 0, .05);--shadow-medium: 0 4px 12px 0 rgba(0, 0, 0, .08);--shadow-elevated: 0 8px 25px 0 rgba(0, 0, 0, .12);--shadow-floating: 0 20px 40px 0 rgba(0, 0, 0, .15);--transition-smooth: .3s cubic-bezier(.25, .46, .45, .94);--transition-spring: .4s cubic-bezier(.175, .885, .32, 1.275);--transition-bounce: .6s cubic-bezier(.68, -.55, .265, 1.55)}[data-theme=dark],html{--color-surface-primary: #000000;--color-surface-secondary: #111111;--color-surface-tertiary: #1C1C1E;--color-surface-elevated: #1C1C1E;--color-border-primary: #2C2C2E;--color-border-secondary: #38383A;--color-text-primary: #FFFFFF;--color-text-secondary: #EBEBF5;--color-text-tertiary: #EBEBF599;--color-text-quaternary: #EBEBF54D;--shadow-soft: 0 1px 3px 0 rgba(0, 0, 0, .3);--shadow-medium: 0 4px 12px 0 rgba(0, 0, 0, .4);--shadow-elevated: 0 8px 25px 0 rgba(0, 0, 0, .5);--shadow-floating: 0 20px 40px 0 rgba(0, 0, 0, .6);--color-blue: #0A84FF;--color-green: #32D74B;--color-orange: #FF9F0A;--color-red: #FF453A;--color-purple: #BF5AF2;--color-pink: #FF375F;--color-yellow: #FFD60A}html:not([data-theme=dark]){--color-surface-primary: #FFFFFF;--color-surface-secondary: #FAFAFA;--color-surface-tertiary: #F5F5F7;--color-surface-elevated: #FFFFFF;--color-border-primary: #E5E5E7;--color-border-secondary: #F2F2F7;--color-text-primary: #1D1D1F;--color-text-secondary: #424245;--color-text-tertiary: #6E6E73;--color-text-quaternary: #8E8E93;--shadow-soft: 0 1px 3px 0 rgba(0, 0, 0, .05);--shadow-medium: 0 4px 12px 0 rgba(0, 0, 0, .08);--shadow-elevated: 0 8px 25px 0 rgba(0, 0, 0, .12);--shadow-floating: 0 20px 40px 0 rgba(0, 0, 0, .15);--color-blue: #007AFF;--color-green: #30D158;--color-orange: #FF9F0A;--color-red: #FF3B30;--color-purple: #AF52DE;--color-pink: #FF2D92;--color-yellow: #FFCC02}*{box-sizing:border-box}html{font-family:var(--font-family);line-height:1.47059;font-weight:400;letter-spacing:-.022em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;text-rendering:optimizeLegibility}body{margin:0;padding:0;min-height:100vh;background-color:var(--color-surface-secondary);color:var(--color-text-primary);transition:background-color var(--transition-smooth),color var(--transition-smooth);font-size:17px;-webkit-text-size-adjust:100%}.text-large-title{font-size:2.125rem;font-weight:700;line-height:1.2;letter-spacing:-.026em}.text-title-1{font-size:1.75rem;font-weight:600;line-height:1.3;letter-spacing:-.022em}.text-title-2{font-size:1.375rem;font-weight:600;line-height:1.36364;letter-spacing:-.017em}.text-title-3{font-size:1.25rem;font-weight:600;line-height:1.4;letter-spacing:-.012em}.text-headline{font-size:1.0625rem;font-weight:600;line-height:1.41176;letter-spacing:-.021em}.text-body{font-size:1.0625rem;font-weight:400;line-height:1.47059;letter-spacing:-.022em}.text-callout{font-size:1rem;font-weight:400;line-height:1.4375;letter-spacing:-.016em}.text-subheadline{font-size:.9375rem;font-weight:400;line-height:1.46667;letter-spacing:-.014em}.text-footnote{font-size:.8125rem;font-weight:400;line-height:1.38462;letter-spacing:-.006em}.text-caption-1{font-size:.75rem;font-weight:400;line-height:1.33333;letter-spacing:0}.text-caption-2{font-size:.6875rem;font-weight:400;line-height:1.36364;letter-spacing:.007em}.text-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.btn-primary{background:linear-gradient(180deg,var(--color-primary) 0%,#0051D5 100%);color:#fff;border:none;padding:var(--spacing-md) var(--spacing-2xl);border-radius:var(--radius-xl);font-weight:500;font-size:1.0625rem;line-height:1.47059;letter-spacing:-.022em;transition:all var(--transition-smooth);cursor:pointer;box-shadow:var(--shadow-soft);position:relative;overflow:hidden;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.btn-primary:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#ffffff26,#fff0);border-radius:var(--radius-xl);transition:opacity var(--transition-smooth)}.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-medium)}.btn-primary:active{transform:translateY(0);box-shadow:var(--shadow-soft)}.btn-secondary{background:rgba(var(--color-text-primary),.06);color:var(--color-text-primary);border:.5px solid var(--color-border-primary);padding:var(--spacing-md) var(--spacing-2xl);border-radius:var(--radius-xl);font-weight:500;font-size:1.0625rem;line-height:1.47059;letter-spacing:-.022em;transition:all var(--transition-smooth);cursor:pointer;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.btn-secondary:hover{background:rgba(var(--color-text-primary),.08);border-color:var(--color-border-secondary);transform:translateY(-1px);box-shadow:var(--shadow-soft)}.btn-secondary:active{background:rgba(var(--color-text-primary),.12);transform:translateY(0)}.btn-ghost{background:transparent;color:var(--color-text-tertiary);border:none;padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-lg);font-weight:400;font-size:1.0625rem;line-height:1.47059;letter-spacing:-.022em;transition:all var(--transition-smooth);cursor:pointer}.btn-ghost:hover{background:rgba(var(--color-text-primary),.04);color:var(--color-text-primary)}.btn-ghost:active{background:rgba(var(--color-text-primary),.08);transform:scale(.98)}.card{background:var(--color-surface-elevated);border:.5px solid var(--color-border-primary);border-radius:var(--radius-2xl);box-shadow:var(--shadow-soft);transition:all var(--transition-smooth);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 20%,rgba(255,255,255,.1) 80%,transparent 100%);pointer-events:none}.card:hover{box-shadow:var(--shadow-medium);transform:translateY(-2px);border-color:var(--color-border-secondary)}.card-elevated{box-shadow:var(--shadow-elevated);border:.5px solid rgba(255,255,255,.1)}[data-theme=dark] .card-elevated{border:.5px solid rgba(255,255,255,.05)}.card-elevated:hover{box-shadow:var(--shadow-floating);transform:translateY(-4px)}.card-floating{background:rgba(var(--color-surface-elevated),.8);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:.5px solid rgba(255,255,255,.2)}[data-theme=dark] .card-floating{background:#0009;border:.5px solid rgba(255,255,255,.08)}.input{background:rgba(var(--color-text-primary),.04);border:.5px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--spacing-lg) var(--spacing-xl);font-size:1.0625rem;line-height:1.47059;letter-spacing:-.022em;color:var(--color-text-primary);transition:all var(--transition-smooth);outline:none;font-family:var(--font-family);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.input:focus{background:var(--color-surface-elevated);border-color:var(--color-primary);box-shadow:0 0 0 4px rgba(var(--color-primary),.1);transform:translateY(-1px)}.input::placeholder{color:var(--color-text-quaternary);font-weight:400}.input:hover:not(:focus){background:rgba(var(--color-text-primary),.06);border-color:var(--color-border-secondary)}.toggle{position:relative;display:inline-block;width:52px;height:32px}.toggle input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background:rgba(var(--color-text-primary),.16);transition:var(--transition-smooth);border-radius:32px;border:.5px solid var(--color-border-primary)}.toggle-slider:before{position:absolute;content:"";height:28px;width:28px;left:2px;bottom:1.5px;background:#fff;transition:var(--transition-smooth);border-radius:50%;box-shadow:var(--shadow-soft)}.toggle input:checked+.toggle-slider{background:var(--color-primary);border-color:var(--color-primary)}.toggle input:checked+.toggle-slider:before{transform:translate(20px)}.surface-primary{background-color:var(--color-surface-primary);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.surface-secondary{background-color:var(--color-surface-secondary)}.surface-tertiary{background-color:var(--color-surface-tertiary)}.surface-elevated{background-color:var(--color-surface-elevated);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-tertiary{color:var(--color-text-tertiary)}.text-quaternary{color:var(--color-text-quaternary)}.border-primary{border-color:var(--color-border-primary)}.border-secondary{border-color:var(--color-border-secondary)}.shadow-soft{box-shadow:var(--shadow-soft)}.shadow-medium{box-shadow:var(--shadow-medium)}.shadow-elevated{box-shadow:var(--shadow-elevated)}.shadow-floating{box-shadow:var(--shadow-floating)}.color-blue{color:var(--color-blue)}.color-green{color:var(--color-green)}.color-orange{color:var(--color-orange)}.color-red{color:var(--color-red)}.color-purple{color:var(--color-purple)}.color-pink{color:var(--color-pink)}.color-yellow{color:var(--color-yellow)}.bg-blue{background-color:var(--color-blue)}.bg-green{background-color:var(--color-green)}.bg-orange{background-color:var(--color-orange)}.bg-red{background-color:var(--color-red)}.bg-purple{background-color:var(--color-purple)}.bg-pink{background-color:var(--color-pink)}.bg-yellow{background-color:var(--color-yellow)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes bounce{0%,20%,53%,80%,to{transform:translateZ(0)}40%,43%{transform:translate3d(0,-6px,0)}70%{transform:translate3d(0,-3px,0)}90%{transform:translate3d(0,-1px,0)}}@keyframes shimmer{0%{background-position:-468px 0}to{background-position:468px 0}}.animate-fade-in-up{animation:fadeInUp var(--transition-smooth) var(--transition-spring)}.animate-slide-in-left{animation:slideInLeft var(--transition-smooth) var(--transition-spring)}.animate-scale-in{animation:scaleIn var(--transition-smooth) var(--transition-spring)}.animate-bounce{animation:bounce 1s ease-in-out}.animate-shimmer{animation:shimmer 2s linear infinite;background:linear-gradient(to right,var(--color-surface-tertiary) 4%,var(--color-surface-elevated) 25%,var(--color-surface-tertiary) 36%);background-size:1000px 100%}.interactive{transition:all var(--transition-smooth);cursor:pointer}.interactive:hover{transform:translateY(-1px)}.interactive:active{transform:translateY(0) scale(.98)}.glass{background:#ffffff1a;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:.5px solid rgba(255,255,255,.2)}[data-theme=dark] .glass{background:#0000004d;border:.5px solid rgba(255,255,255,.1)}
