:root{--color-primary: oklch(13% .06 260);--color-primary-light: oklch(60% .06 260);--color-primary-dark: oklch(8% .06 260);--color-primary-custom: oklch(.2 .04 280);--color-secondary: oklch(50% .06 260);--color-secondary-light: oklch(100% 0 0 / .95);--color-secondary-dark: oklch(6.5% .06 260);--color-accent: oklch(88% .2 130);--color-accent-light: oklch(85% .35 130);--color-accent-dark: oklch(50% .35 130);--color-accent-transparent: oklch(80% .35 130 / .5);--color-white: oklch(100% 0 0);--color-gray-50: oklch(98% 0 0);--color-gray-100: oklch(95% 0 0);--color-gray-200: oklch(92% 0 0);--color-gray-300: oklch(85% 0 0);--color-gray-500: oklch(55% 0 0);--color-gray-700: oklch(35% 0 0);--color-gray-900: oklch(10% 0 0);--color-black: oklch(0% 0 0);--color-bg-page: oklch(23% .06 278);--color-bg-card: oklch(26% .07 278);--color-bg-card-nested: oklch(30% .07 278);--text-primary: var(--color-primary);--text-white: var(--color-white);--text-white-50: oklch(100% 0 0 / .5);--text-white-70: oklch(100% 0 0 / .7);--text-white-90: oklch(100% 0 0 / .9);--border-light: oklch(100% 0 0 / .1);--border-medium: oklch(100% 0 0 / .3);--border-heavy: oklch(100% 0 0 / .7);--border-white-50: oklch(100% 0 0 / .5);--border-gray-blue: oklch(50% .06 260);--overlay-light: oklch(100% 0 0 / .05);--overlay-medium: oklch(100% 0 0 / .1);--overlay-dark: oklch(0% 0 0 / .15);--color-primary-10: oklch(13% .06 260 / .1);--color-primary-20: oklch(13% .06 260 / .2);--color-primary-95: oklch(13% .06 260 / .95);--color-primary-90: oklch(13% .06 260 / .9);--color-primary-btn-text: oklch(36.6% .06 260);--color-accent-05: oklch(80% .35 120 / .05);--color-accent-10: oklch(80% .35 120 / .1);--color-accent-20: oklch(80% .35 120 / .2);--color-accent-40: oklch(80% .35 120 / .4);--color-accent-50: oklch(80% .35 120 / .5);--color-accent-00: oklch(80% .35 120 / 0);--color-black-10: oklch(0% 0 0 / .1);--color-black-15: oklch(0% 0 0 / .15);--color-black-20: oklch(0% 0 0 / .2);--color-black-40: oklch(0% 0 0 / .4);--color-black-50: oklch(0% 0 0 / .5);--color-accent-blend-80: oklch(64% .246 121 / .8);--color-accent-grad-75: oklch(79.4% .314 120.2 / .75);--color-accent-grad-50: oklch(80% .308 120 / .5);--color-accent-light-00: oklch(85% .35 120 / 0);--color-accent-dim-90: oklch(68% .279 120.8 / .9);--bg-primary: var(--color-bg-page);--bg-secondary: oklch(26% .07 278);--bg-card-dark-60: oklch(12% .06 260 / .6);--bg-success-light: oklch(90% .05 150 / .2);--bg-warning-light: oklch(90% .1 80 / .2);--bg-danger-light: oklch(85% .1 25 / .2);--bg-info-light: oklch(85% .08 250 / .2);--bg-dark-overlay: oklch(0% 0 0 / .2);--color-success: oklch(72% .2 150);--color-success-light: oklch(85% .15 150);--color-success-dark: oklch(55% .25 150);--color-warning: oklch(80% .25 80);--color-warning-light: oklch(93% .15 80);--color-warning-dark: oklch(65% .3 80);--color-danger: oklch(65% .25 25);--color-danger-light: oklch(80% .2 25);--color-danger-dark: oklch(50% .3 25);--color-info: oklch(65% .2 250);--color-info-light: oklch(80% .15 250);--color-info-dark: oklch(50% .25 250);--font-family-base: "Onest", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;--font-family-mono: "Monaco", "Courier New", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2.125rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-smX: .75rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--spacing-4xl: 6rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px oklch(0% 0 0 / .05);--shadow-md: 0 4px 6px oklch(0% 0 0 / .1);--shadow-lg: 0 10px 15px oklch(0% 0 0 / .15);--shadow-xl: 0 20px 25px oklch(0% 0 0 / .2);--transition-fast: .15s ease-in-out;--transition-normal: .3s ease-in-out;--transition-slow: .5s ease-in-out;--layout-max-width: 1280px;--layout-padding: var(--spacing-md);--layout-gap: var(--spacing-md)}@media(min-width:768px){:root{--layout-padding: var(--spacing-lg);--layout-gap: var(--spacing-lg)}}@media(min-width:1024px){:root{--layout-padding: var(--spacing-xl);--layout-gap: var(--spacing-xl)}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}img{max-width:100%;height:auto;display:block}html{scroll-behavior:smooth}body{font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-white);background-color:var(--color-bg-page);transition:background-color var(--transition-normal),color var(--transition-normal)}h1,h2,h3{line-height:var(--line-height-tight);margin-bottom:var(--spacing-smX)}h1{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-smX)}h2{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-sm)}h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-sm)}p,li,a{font-size:var(--font-size-sm)}p{margin-bottom:var(--spacing-md)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-dark)}ul,ol{margin-bottom:var(--spacing-md);margin-left:var(--spacing-lg)}li{margin-bottom:var(--spacing-sm);list-style:none}@media(min-width:1024px){h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl);margin-bottom:var(--spacing-smX)}h3{font-size:var(--font-size-xl);margin-bottom:var(--spacing-smX)}p,li,a{font-size:var(--font-size-base)}.card:hover{box-shadow:var(--shadow-lg)}}code,pre{font-family:var(--font-family-mono);background-color:var(--color-gray-50);border-radius:var(--radius-md)}code{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm)}pre{padding:var(--spacing-md);overflow-x:auto;margin-bottom:var(--spacing-md)}pre code{padding:0;background-color:transparent}input,textarea,select{font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-normal)}input,textarea{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);transition:border-color var(--transition-fast)}input:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-10)}#app{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;margin:0;padding:0}.container{width:100%;max-width:var(--layout-max-width);margin-left:auto;margin-right:auto;padding:0 var(--layout-padding) var(--spacing-2xl)}.container:only-child{padding-top:var(--spacing-4xl)}.card{background-color:var(--color-bg-card);border-radius:var(--radius-lg);transition:box-shadow var(--transition-normal),transform var(--transition-normal);color:var(--color-white)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.hidden{display:none!important}.flex{display:flex}.flex-col{flex-direction:column}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.items-center{align-items:center}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}