:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--font-display:"Syne", sans-serif;--font-mono:"JetBrains Mono", monospace;--white:#fff;--black:#000;--purple-50:#e2defc;--purple-100:#c4bcf7;--purple-200:#a498f3;--purple-300:#9c8ef7;--purple-400:#9282f5;--purple-500:#7c6af5;--purple-600:#6f5de7;--purple-700:#5c4de0;--purple-800:#3c2ba9;--purple-900:#1f1276;--gray-50:#f6f5fc;--gray-100:#f1effd;--gray-200:#e8e7f7;--gray-300:#ccd;--gray-400:#9896ad;--gray-500:#605e72;--gray-600:#49495a;--gray-700:#33333f;--gray-800:#202027;--gray-900:#16161b;--green-100:#deece6;--green-500:#3ecf8e;--green-900:#1a5c40;--amber-100:#e9dfcc;--amber-500:#f59e0b;--amber-900:#5a3a08;--red-100:#e6caca;--red-500:#f14848;--red-900:#5a1d1d;--aqua-100:#bceaff;--aqua-500:#38bdf8;--aqua-900:#144f68;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--radius-2:2px;--radius-4:4px;--radius-6:6px;--radius-8:8px;--radius-10:10px;--radius-12:12px;--radius-16:16px;--radius-9999:9999px;--bg-base:var(--gray-900);--bg-surface:var(--gray-800);--bg-elevated:var(--gray-700);--bg-subtle:var(--gray-600);--text-primary:var(--gray-100);--text-secondary:var(--gray-300);--text-muted:var(--gray-400);--border:rgb(from var(--white) r g b / .08);--border-hover:rgb(from var(--white) r g b / .16);--accent:var(--purple-500);--accent-glow:var(--purple-300);--accent-hover:var(--purple-300);--accent-active:var(--purple-700);--accent-dim:rgb(from var(--purple-500) r g b / .2);--success:var(--green-500);--success-dim:var(--green-900);--warning:var(--amber-500);--warning-dim:var(--amber-900);--danger:var(--red-500);--danger-dim:var(--red-900);--info:var(--aqua-500);--info-dim:var(--aqua-900);--gap-inline:var(--space-2);--gap-component:var(--space-4);--gap-section:var(--space-8);--gap-page:var(--space-16);--padding-btn:var(--space-2) var(--space-4);--padding-card:var(--space-6);--radius-sm:var(--radius-6);--radius-md:var(--radius-10);--radius-lg:var(--radius-16);--radius-full:var(--radius-9999);font:18px/145% var(--font-mono);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text-primary);background:var(--bg-base);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}[color-scheme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg-base:var(--gray-50);--bg-surface:var(--gray-100);--bg-elevated:var(--gray-200);--bg-subtle:var(--gray-300);--text-primary:var(--gray-800);--text-secondary:var(--gray-600);--text-muted:var(--gray-500);--border:rgb(from var(--black) r g b / .08);--border-hover:rgb(from var(--black) r g b / .16);--accent-hover:var(--purple-800);--accent-dim:var(--purple-100);--success-dim:var(--green-100);--warning-dim:var(--amber-100);--danger-dim:var(--red-100);--info-dim:var(--aqua-100)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}.page{max-width:1200px;padding:var(--space-10) var(--space-6);margin:0 auto}#root{text-align:center;box-sizing:border-box;width:1126px;max-width:100%;min-height:100svh;padding:var(--space-10) var(--space-6);flex-direction:column;margin:0 auto;display:flex}.divider{background-color:var(--border);flex:1;height:1px}.card{padding:var(--space-4) var(--space-6);background-color:var(--bg-surface);border:2px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}a:link{color:var(--accent);text-decoration:none;transition:all .2s}a:visited{color:var(--accent-dim)}a:hover{color:var(--accent-hover)}a:active{color:var(--accent-active)}@keyframes notifyAnimation{0%{transform:translate(-50%,-100%)}10%{transform:translate(-50%,50%)}90%{transform:translate(-50%,50%)}to{transform:translate(-50%,-100%)}}.notification{justify-content:center;align-items:center;gap:var(--space-2);text-wrap:nowrap;opacity:.7;min-width:10rem;animation:3s cubic-bezier(.6,-1,.4,2) notifyAnimation;display:flex;position:fixed;top:0;left:50%;transform:translate(-50%,-100%);font-size:20px!important}input:-webkit-autofill{-webkit-box-shadow:0 0 0px 1000px var(--bg-elevated) inset!important;box-shadow:0 0 0px 1000px var(--bg-elevated) inset!important;-webkit-text-fill-color:var(--text-secondary)!important}input:-webkit-autofill:hover{-webkit-box-shadow:0 0 0px 1000px var(--bg-elevated) inset!important;box-shadow:0 0 0px 1000px var(--bg-elevated) inset!important;-webkit-text-fill-color:var(--text-secondary)!important}input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0px 1000px var(--bg-elevated) inset!important;box-shadow:0 0 0px 1000px var(--bg-elevated) inset!important;-webkit-text-fill-color:var(--text-secondary)!important}input:-webkit-autofill:active{-webkit-box-shadow:0 0 0px 1000px var(--bg-elevated) inset!important;box-shadow:0 0 0px 1000px var(--bg-elevated) inset!important;-webkit-text-fill-color:var(--text-secondary)!important}.header{grid-auto-flow:column;display:grid}.navigation{right:var(--space-4);z-index:1;opacity:.7;position:fixed;top:10%}.navigation ul{list-style-type:none}.navigation li{text-align:right;border-right:4px solid var(--accent)}.navigation a{padding-right:var(--space-6);width:100%;font-size:20px;line-height:2;display:block}@media (width<=1024px){.navigation a{font-size:14px}}.navigation li:hover{border-color:var(--accent-hover)}.navigation a:hover{color:var(--accent-hover)}.active{color:var(--text-primary)!important;border-color:var(--text-primary)!important}.system-label{color:var(--accent)}.header-title h1{font-family:var(--font-display);letter-spacing:-.03em;font-size:42px;font-weight:800;line-height:1.1;display:block}.header-title h1 span{color:var(--accent);padding:0}.header-meta{padding-top:var(--space-1)}.header-theme{place-self:center end}.theme-toggle{color:var(--text-secondary);background-color:var(--bg-surface);border:2px solid var(--border)}.theme-toggle:hover{background-color:var(--bg-subtle);border:2px solid var(--border-hover)}.theme-toggle:active{background-color:var(--bg-elevated);border:2px solid var(--border)}footer{border-top:4px solid var(--border);width:100%;padding:var(--space-8) var(--space-4) 0;align-content:center}.footer{justify-content:space-between;align-items:center;display:flex}.footer-logo p{font-size:28px}.footer-logo span{color:var(--accent)}.footer-copyright{text-align:center;color:var(--text-secondary);font-size:11px}.footer-links{text-align:end;font-size:14px}.footer-links a{padding:0 var(--space-1)}.section{margin-top:var(--gap-section)}.section-header{align-items:center;gap:var(--space-3);margin:var(--space-6) 0 var(--space-2) 0;display:flex}.section-num{color:var(--accent);font-size:12px;font-family:var(--font-mono)}.section-title{font-family:var(--font-display);font-size:20px;font-weight:700}.palette-label{color:var(--text-secondary);margin:var(--space-1)}.palette-swatches{background-color:var(--bg-subtle);border:2px solid var(--border);border-radius:var(--radius-lg);width:100%;height:60px;margin-bottom:var(--gap-component);display:flex;overflow:hidden}.palette-swatch{padding-left:var(--space-2);cursor:crosshair;flex:1;align-content:end;transition:flex .2s}.palette-swatch:hover{flex:2}.palette-swatch:hover .palette-swatch-label{display:block}.palette-swatch-label{display:none}.color-token-table{padding-top:var(--space-4)}.color-token-table table{border-collapse:collapse;width:100%}.color-token-table th{color:var(--text-secondary);text-transform:uppercase;text-align:start}.color-token-table tr{border-bottom:1px solid var(--bg-elevated);height:38px}.color-token-table tbody tr:last-child{border-bottom:none}.color-token-table th,.color-token-table td{padding-left:var(--space-3)}.color-token-table tbody td:first-child{color:var(--accent)}.color-token-table div{border:2px solid var(--bg-subtle);border-radius:var(--radius-sm);width:24px;height:24px;margin-left:var(--space-4);overflow:hidden}.color-token-preview{cursor:crosshair}.typography-cards{grid-template:repeat(3,1fr)/repeat(2,1fr);gap:16px;width:100%;min-height:52em;display:grid}.typography-card{row-gap:var(--space-4);grid-template:auto 2fr/auto 3fr;display:grid}.typography-properties{color:var(--text-secondary);place-self:baseline end;font-size:12px}.typography-example{grid-area:2/1/span 2/span 2;place-self:center start}.display{line-height:1;font-family:var(--font-display);letter-spacing:-.03em;font-size:48px;font-weight:800}@media (width<=1024px){.display{font-size:36px}}.h1{line-height:1;font-family:var(--font-display);font-size:36px;font-weight:700}@media (width<=1024px){.h1{font-size:24px}}.h2{line-height:1;font-family:var(--font-display);font-size:24px;font-weight:600}@media (width<=1024px){.h2{font-size:16px}}.body{line-height:1.5;font-family:var(--font-mono);font-size:14px;font-weight:400}@media (width<=1024px){.body{font-size:9px}}.label{line-height:1;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-size:11px;font-weight:400}@media (width<=1024px){.label{font-size:9px}}.code-file-name{bottom:-16px;left:var(--space-2);line-height:1;font-family:var(--font-mono);letter-spacing:.1em;color:var(--text-muted);font-size:11px;font-weight:400;position:relative}@media (width<=1024px){.code-file-name{font-size:7px}}.code{border:2px solid var(--bg-elevated);border-radius:var(--radius-md)}.spacings{width:100%}.spacing{align-items:center;height:2.5em;display:flex}.spacing-bar{height:1em;margin:0 var(--space-4) 0 var(--space-3);background-color:var(--accent);border-radius:var(--radius-full)}.spacing span:first-child{min-width:84px}.spacing span:last-child{color:var(--text-secondary)}.components{gap:var(--space-4);margin:var(--space-2);grid-template-columns:1fr 1fr;display:grid}.btn-row{margin:var(--space-2) 0}.btn{font-family:var(--font-mono);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);cursor:pointer;margin:var(--space-2) var(--space-1);outline:none;align-items:center;font-size:12px;font-weight:500;text-decoration:none;transition:all .2s;display:inline-flex}.btn-sm{padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);font-size:11px}.btn-primary{color:var(--white);background-color:var(--accent);border:none}.btn-primary:hover,.btn-primary:focus{background-color:var(--accent-hover)}.btn-ghost{color:var(--text-secondary);border:1px solid var(--border);background-color:#0000}.btn-ghost:hover,.btn-ghost:focus{color:var(--text-primary);background-color:var(--bg-elevated);border:1px solid var(--border)}.btn-outline{color:var(--accent);border:1px solid var(--accent-dim);background-color:#0000}.btn-outline:hover,.btn-outline:focus{background-color:var(--accent-dim)}.btn-danger{color:var(--danger);border:1px solid var(--danger);background-color:#0000}.btn-danger:hover,.btn-danger:focus{background-color:var(--danger-dim)}.badge-row{margin:var(--space-4) var(--space-2);gap:var(--space-4);flex-wrap:wrap;display:flex}.badge{font-family:var(--font-mono);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);border:1px solid;align-items:center;font-size:11px;font-weight:700;display:inline-flex}.badge-accent{color:var(--accent);background-color:var(--accent-dim);border-color:var(--accent)}.badge-muted{color:var(--text-secondary);background-color:var(--bg-elevated);border-color:var(--text-muted)}.badge-success{color:var(--success);background-color:var(--success-dim);border-color:var(--success)}.badge-warn{color:var(--warning);background-color:var(--warning-dim);border-color:var(--warning)}.badge-danger{color:var(--danger);background-color:var(--danger-dim);border-color:var(--danger)}.badge-info{color:var(--info);background-color:var(--info-dim);border-color:var(--info)}.input-group{margin:var(--space-4) 0 var(--space-6) 0;gap:var(--space-2);flex-direction:column;display:flex}.input-group label,.input-group input{display:block}.input-label{color:var(--text-secondary)}.input{padding:var(--space-2) var(--space-3);letter-spacing:.8px;color:var(--text-secondary);background-color:var(--bg-surface);border:2px solid var(--border);border-radius:var(--radius-sm);outline:none;font-size:12px;font-weight:500}.input:hover{outline:3px solid var(--accent-dim)}.input:focus{outline:2px solid var(--accent);transition:all .2s}.input-error,.input-error:hover,.input-error:focus{outline:2px solid var(--danger)}.input-error-msg{color:var(--danger);margin-top:var(--space-1);margin-left:var(--space-2)}.project-card{cursor:pointer;grid-template:1fr auto 1fr/1fr auto;display:grid}.proj-title{grid-area:1/1/2/span 1}.proj-title p{margin-bottom:var(--space-2)}.proj-status{grid-area:1/2/2/span 1;place-self:start end}.proj-desc{padding:var(--space-4) 0;grid-area:2/1/span 1/-1;align-self:center}.proj-progress{grid-area:3/1/span 1/-1;align-self:end;font-size:24px}.proj-progress-bar{background-color:var(--border);height:3px;margin:var(--space-1) 0}.proj-progress-bar .progress{background-color:var(--accent);z-index:1;width:68%;height:4px}@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes spin{0%{--a:0deg}to{--a:360deg}}.project-card-wrapper{background:var(--bg-surface);border-radius:var(--radius-lg);margin:8px;padding:2px}.project-card-wrapper:hover{background:conic-gradient(from var(--a), var(--accent-glow), var(--bg-surface), var(--bg-surface), var(--accent-glow));animation:4s linear infinite spin}.section-radii-elevation{gap:var(--space-12);padding:var(--space-2) 0;grid-template-columns:1fr 1fr;display:grid}.radius-row,.elev-row{width:100%;margin-top:var(--space-4);flex-wrap:wrap;flex-grow:1;justify-content:space-around;place-self:center;display:flex}.radius-box,.elev-box{background-color:var(--bg-surface);border:2px solid var(--bg-subtle);width:4em;height:4em;display:flex}.radius-label,.elev-label{text-align:center;text-transform:none;margin-top:var(--space-2);line-height:1.6}.elev-row{justify-content:space-around;gap:var(--space-4)}.elev-box{border-radius:var(--radius-md)}.elev-label{line-height:3.2}.elev-base{box-shadow:none}.elev-sm{box-shadow:0 2px 8px #0006}.elev-md{box-shadow:0 4px 16px #00000080}.elev-lg{box-shadow:0 8px 32px #0009}.elev-glow{box-shadow:0 4px 20px var(--accent-glow)}.section-motion-easing{padding:0 var(--space-2)}.motion-easing-row{width:100%;margin:var(--space-6) 0;justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.motion-item{padding:var(--space-4);border:2px solid var(--bg-subtle);cursor:pointer;flex:1}.motion-item:hover{color:var(--accent);border-color:var(--accent)}.motion-label{font-size:14px;line-height:2}.motion-desc{text-transform:none;font-size:12px;font-weight:500;line-height:1.5}.motion-up-hover:hover{transform:translateY(-4px)}.motion-down-hover:hover{transform:translateY(4px)}.motion-up-active:active{transform:translateY(-4px)}.motion-down-active:active{transform:translateY(4px)}.easing-fast{transition:all .15s}.easing-base{transition:all .25s}.easing-smooth{transition:all .6s cubic-bezier(.16,1,.7,1)}.easing-bounce{transition:all .3s cubic-bezier(.6,-1,.4,2)}.motion-easing-tokens{border:2px solid var(--bg-subtle);width:100%;padding:var(--space-2);flex-direction:column;display:flex}.motion-token-row{width:100%;padding:var(--space-2) var(--space-4);display:flex}.motion-token-item{flex:1}.motion-token-name{color:var(--accent);width:120px;display:inline-block}.motion-token-value{color:var(--text-muted)}.iconography{justify-content:space-evenly;display:flex}.icons-block{justify-content:center;gap:var(--space-8);flex-direction:column;display:flex}.icons{justify-content:center;gap:var(--space-4);display:flex}.iconography p{text-align:center;line-height:1.2}.counter{color:var(--accent);background:var(--accent-bg);border:2px solid #0000;border-radius:5px;margin-bottom:24px;padding:5px 10px;font-size:16px;transition:border-color .3s}.counter:hover{border-color:var(--accent-border)}.counter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{margin:0 auto;inset-inline:0}.hero .base{z-index:0;width:170px;position:relative}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;height:28px;top:34px;transform:perspective(2000px)rotate(300deg)rotateX(44deg)rotateY(39deg)scale(1.4)}.hero .vite{z-index:0;width:auto;height:26px;top:107px;transform:perspective(2000px)rotate(300deg)rotateX(40deg)rotateY(39deg)scale(.8)}#center{flex-direction:column;flex-grow:1;place-content:center;place-items:center;gap:25px;display:flex}@media (width<=1024px){#center{gap:18px;padding:32px 20px 24px}}#next-steps{border-top:1px solid var(--border);text-align:left;display:flex}#next-steps>div{flex:1 1 0;padding:32px}@media (width<=1024px){#next-steps>div{padding:24px 20px}}#next-steps .icon{width:22px;height:22px;margin-bottom:16px}@media (width<=1024px){#next-steps{text-align:center;flex-direction:column}}#docs{border-right:1px solid var(--border)}@media (width<=1024px){#docs{border-right:none;border-bottom:1px solid var(--border)}}#next-steps ul{gap:8px;margin:32px 0 0;padding:0;list-style:none;display:flex}#next-steps ul .logo{height:18px}#next-steps ul a{color:var(--text-h);background:var(--social-bg);border-radius:6px;align-items:center;gap:8px;padding:6px 12px;font-size:16px;text-decoration:none;transition:box-shadow .3s;display:flex}#next-steps ul a:hover{box-shadow:var(--shadow)}#next-steps ul a .button-icon{width:18px;height:18px}@media (width<=1024px){#next-steps ul{flex-wrap:wrap;justify-content:center;margin-top:20px}#next-steps ul li{flex:calc(50% - 8px)}#next-steps ul a{box-sizing:border-box;justify-content:center;width:100%}}#spacer{border-top:1px solid var(--border);height:88px}@media (width<=1024px){#spacer{height:48px}}.ticks{width:100%;position:relative}.ticks:before,.ticks:after{content:"";border:5px solid #0000;position:absolute;top:-4.5px}.ticks:before{border-left-color:var(--border);left:0}.ticks:after{border-right-color:var(--border);right:0}