@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg-primary:#09090b;--bg-surface:#ffffff08;--bg-elevated:#ffffff0f;--bg-glass:#ffffff0a;--border:#ffffff14;--border-light:#ffffff1f;--border-hover:#ffffff2e;--text:#fafafa;--text-secondary:#a1a1aa;--text-muted:#71717a;--text-dim:#52525b;--gradient-rainbow:linear-gradient(135deg, #06b6d4, #8b5cf6, #ec4899, #f97316);--gradient-hero:linear-gradient(135deg, #22d3ee, #a78bfa, #f472b6, #fb923c);--gradient-cyan:linear-gradient(135deg, #06b6d4, #22d3ee);--gradient-violet:linear-gradient(135deg, #7c3aed, #a78bfa);--gradient-pink:linear-gradient(135deg, #ec4899, #f472b6);--gradient-orange:linear-gradient(135deg, #f97316, #fb923c);--accent-cyan:#22d3ee;--accent-violet:#a78bfa;--accent-pink:#f472b6;--accent-orange:#fb923c;--accent-green:#34d399;--success:#22c55e;--error:#ef4444;--warning:#eab308;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--sans:"Inter", system-ui, -apple-system, sans-serif;--mono:"JetBrains Mono", ui-monospace, "Cascadia Code", monospace;--shadow-sm:0 1px 2px #0006;--shadow-md:0 4px 16px #00000080;--shadow-lg:0 8px 32px #0009;--shadow-glow-cyan:0 0 40px #06b6d426;--shadow-glow-violet:0 0 40px #8b5cf626;--shadow-glow-pink:0 0 40px #ec489926;--glass-bg:#ffffff08;--glass-border:#ffffff14;--glass-blur:16px;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-base:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.4s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;font-size:16px}body{font-family:var(--sans);background:var(--bg-primary);color:var(--text);min-height:100dvh;line-height:1.6;overflow-x:hidden}#root{min-height:100dvh}h1,h2,h3,h4,h5,h6{color:var(--text);letter-spacing:-.02em;font-weight:700;line-height:1.2}a{color:var(--accent-cyan);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--accent-violet)}::selection{color:#fff;background:#8b5cf64d}.gradient-text{background:var(--gradient-hero);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.gradient-text--cyan{background:var(--gradient-cyan);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.gradient-text--violet{background:var(--gradient-violet);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.gradient-text--pink{background:var(--gradient-pink);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);transition:border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base)}.glass-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn{border-radius:var(--radius-md);font-family:var(--sans);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.75rem;font-size:.938rem;font-weight:600;display:inline-flex;position:relative;overflow:hidden}.btn--primary{background:var(--gradient-rainbow);color:#fff;border-color:#0000;box-shadow:0 2px 12px #8b5cf64d}.btn--primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px #8b5cf680}.btn--primary:active{transform:translateY(0)}.btn--secondary{background:var(--glass-bg);-webkit-backdrop-filter:blur(8px);color:var(--text);border-color:var(--border-light)}.btn--secondary:hover{border-color:var(--accent-violet);background:#a78bfa14}.btn--outline{color:var(--text-secondary);border-color:var(--border);background:0 0}.btn--outline:hover{border-color:var(--accent-cyan);color:var(--text);background:#22d3ee0d}.btn--large{border-radius:var(--radius-lg);padding:1rem 2.5rem;font-size:1.063rem}.btn:focus-visible{outline:2px solid var(--accent-violet);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.step-header{margin-bottom:2rem}.step-header h2{margin-bottom:.5rem;font-size:2rem}.step-header h3{margin-bottom:.375rem;font-size:1.25rem}.step-header p{color:var(--text-secondary);max-width:640px;font-size:1rem;line-height:1.7}.landing{max-width:1200px;margin:0 auto;padding:0 1.5rem}.landing__nav{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:1.25rem 0;display:flex}.landing__logo{letter-spacing:-.03em;background:var(--gradient-rainbow);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.25rem;font-weight:800}.landing__nav-cta{padding:.5rem 1.25rem;font-size:.875rem}.landing__hero{text-align:center;padding:7rem 0 5rem;position:relative}.landing__hero:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle,#8b5cf61f 0%,#06b6d40f 40%,#0000 70%);width:600px;height:600px;position:absolute;top:-20%;left:50%;transform:translate(-50%)}.landing__hero>*{z-index:1;position:relative}.landing__badge{color:var(--accent-violet);letter-spacing:.02em;-webkit-backdrop-filter:blur(8px);background:#8b5cf61a;border:1px solid #8b5cf640;border-radius:9999px;align-items:center;gap:.5rem;margin-bottom:2rem;padding:.5rem 1.25rem;font-size:.813rem;font-weight:600;display:inline-flex}.landing__title{letter-spacing:-.04em;margin-bottom:1.5rem;font-size:clamp(2.75rem,6vw,4.5rem);font-weight:800;line-height:1.1}.landing__title--gradient{background:var(--gradient-hero);-webkit-text-fill-color:transparent;background-size:200% 200%;-webkit-background-clip:text;background-clip:text;animation:6s ease-in-out infinite gradient-shift}@keyframes gradient-shift{0%,to{background-position:0%}50%{background-position:100%}}.landing__subtitle{color:var(--text-secondary);max-width:600px;margin:0 auto 3rem;font-size:1.25rem;line-height:1.7}.landing__hero-actions{justify-content:center;align-items:center;gap:1rem;margin-bottom:4rem;display:flex}.landing__palette-preview{justify-content:center;gap:.5rem;margin-top:4rem;display:flex}.palette-preview__swatch{border-radius:var(--radius-md);width:56px;height:56px;transition:transform var(--transition-base), box-shadow var(--transition-base);cursor:default}.palette-preview__swatch:hover{transform:scale(1.15)translateY(-4px);box-shadow:0 8px 24px #0006}.palette-preview__swatch:first-child{background:#06b6d4;animation:3s ease-in-out infinite swatch-float}.palette-preview__swatch:nth-child(2){background:#8b5cf6;animation:3s ease-in-out .2s infinite swatch-float}.palette-preview__swatch:nth-child(3){background:#ec4899;animation:3s ease-in-out .4s infinite swatch-float}.palette-preview__swatch:nth-child(4){background:#f97316;animation:3s ease-in-out .6s infinite swatch-float}.palette-preview__swatch:nth-child(5){background:#22c55e;animation:3s ease-in-out .8s infinite swatch-float}.palette-preview__swatch:nth-child(6){background:#eab308;animation:3s ease-in-out 1s infinite swatch-float}@keyframes swatch-float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.landing__features{padding:5rem 0}.landing__section-label{text-align:center;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-violet);margin-bottom:.75rem;font-size:.813rem;font-weight:600}.landing__section-title{text-align:center;letter-spacing:-.03em;margin-bottom:3rem;font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800}.landing__features-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;display:grid}.feature-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);transition:all var(--transition-base);padding:2rem;position:relative;overflow:hidden}.feature-card:before{content:"";background:var(--gradient-rainbow);opacity:0;height:2px;transition:opacity var(--transition-base);position:absolute;top:0;left:0;right:0}.feature-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-lg);transform:translateY(-3px)}.feature-card:hover:before{opacity:1}.feature-card__icon{filter:saturate(1.2);margin-bottom:1rem;font-size:2.25rem;display:block}.feature-card__title{letter-spacing:-.01em;margin-bottom:.625rem;font-size:1.125rem;font-weight:700}.feature-card__desc{color:var(--text-secondary);font-size:.938rem;line-height:1.6}.feature-card:first-child:hover{box-shadow:var(--shadow-glow-cyan)}.feature-card:nth-child(2):hover{box-shadow:var(--shadow-glow-violet)}.feature-card:nth-child(3):hover{box-shadow:var(--shadow-glow-pink)}.feature-card:nth-child(4):hover{box-shadow:0 0 40px #f9731626}.landing__how{padding:5rem 0}.landing__steps{text-align:center;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;display:grid}.how-step{position:relative}.how-step__num{background:var(--glass-bg);border:2px solid var(--border-light);width:3.5rem;height:3.5rem;transition:all var(--transition-base);border-radius:50%;justify-content:center;align-items:center;margin-bottom:1.25rem;font-size:1.25rem;font-weight:800;display:inline-flex}.how-step:first-child .how-step__num{color:var(--accent-cyan);background:#22d3ee14;border-color:#22d3ee4d}.how-step:nth-child(2) .how-step__num{color:var(--accent-violet);background:#a78bfa14;border-color:#a78bfa4d}.how-step:nth-child(3) .how-step__num{color:var(--accent-pink);background:#f472b614;border-color:#f472b64d}.how-step__title{margin-bottom:.5rem;font-size:1.25rem;font-weight:700}.how-step__desc{color:var(--text-secondary);font-size:.938rem;line-height:1.6}.landing__cta{text-align:center;padding:5rem 0;position:relative}.landing__cta:before{content:"";pointer-events:none;background:radial-gradient(#8b5cf60f 0%,#0000 60%);position:absolute;inset:0}.landing__cta>*{position:relative}.landing__cta h2{margin-bottom:.75rem;font-size:clamp(1.5rem,3vw,2rem)}.landing__cta p{color:var(--text-secondary);margin-bottom:2rem;font-size:1.063rem}.landing__footer{text-align:center;border-top:1px solid var(--border);color:var(--text-dim);padding:2.5rem 0;font-size:.813rem}.app-page{flex-direction:column;min-height:100dvh;display:flex}.app-header{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(12px);z-index:10;background:#09090bd9;align-items:center;gap:1.5rem;padding:1rem 1.5rem;display:flex;position:sticky;top:0}.app-header__logo{background:var(--gradient-rainbow);-webkit-text-fill-color:transparent;cursor:pointer;font-size:1.25rem;font-weight:800;font-family:var(--sans);letter-spacing:-.03em;-webkit-background-clip:text;background-clip:text;border:none;flex-shrink:0}.wizard-nav{gap:.25rem;display:flex;overflow-x:auto}.wizard-nav__step{color:var(--text-dim);font-family:var(--sans);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-base);white-space:nowrap;background:0 0;border:none;align-items:center;gap:.5rem;padding:.5rem .875rem;font-size:.813rem;display:flex}.wizard-nav__step:disabled{cursor:default;opacity:.35}.wizard-nav__step:not(:disabled):hover{color:var(--text-secondary);background:#ffffff0a}.wizard-nav__step--active{color:var(--accent-violet)!important;background:#a78bfa1a!important}.wizard-nav__step--done{color:var(--text-secondary)!important}.wizard-nav__num{width:1.5rem;height:1.5rem;transition:all var(--transition-base);border:1.5px solid;border-radius:50%;justify-content:center;align-items:center;font-size:.688rem;font-weight:700;display:inline-flex}.wizard-nav__step--active .wizard-nav__num{background:var(--accent-violet);color:#fff;border-color:var(--accent-violet)}.wizard-nav__step--done .wizard-nav__num{background:var(--accent-cyan);color:#fff;border-color:var(--accent-cyan)}.wizard-nav__label{font-weight:600}.app-main{flex:1;width:100%;max-width:960px;margin:0 auto;padding:3rem 1.5rem;animation:.4s ease-out fade-in}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.brand-input{text-align:center;max-width:640px;margin:0 auto}.brand-input__header{margin-bottom:2.5rem}.brand-input__header h2{letter-spacing:-.03em;margin-bottom:.75rem;font-size:2.25rem}.brand-input__subtitle{color:var(--text-secondary);font-size:1.063rem;line-height:1.7}.brand-input__field{margin-bottom:1.5rem}.brand-input__textarea{background:var(--glass-bg);width:100%;-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border-light);border-radius:var(--radius-lg);color:var(--text);font-family:var(--sans);resize:vertical;min-height:140px;transition:border-color var(--transition-base), box-shadow var(--transition-base);padding:1.25rem;font-size:1.063rem;line-height:1.7}.brand-input__textarea:focus{border-color:var(--accent-violet);box-shadow:0 0 0 3px #8b5cf626, var(--shadow-glow-violet);outline:none}.brand-input__textarea::placeholder{color:var(--text-dim)}.brand-input__meta{justify-content:space-between;align-items:center;min-height:1.25rem;margin-top:.5rem;font-size:.813rem;display:flex}.brand-input__counter{color:var(--text-dim);font-variant-numeric:tabular-nums;margin-left:auto}.brand-input__error{color:var(--error);font-weight:600}.brand-input__hint{color:var(--text-dim);margin-top:1rem;font-size:.813rem;display:block}.color-palette__grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-bottom:2.5rem;display:grid}.swatch{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);text-align:left;font-family:var(--sans);position:relative;overflow:hidden}.swatch:hover{border-color:var(--border-hover);box-shadow:var(--shadow-lg);transform:translateY(-4px)}.swatch:focus-visible{outline:2px solid var(--accent-violet);outline-offset:2px}.swatch__preview{justify-content:center;align-items:center;height:100px;display:flex;position:relative}.swatch__label{letter-spacing:-.02em;font-size:1.5rem;font-weight:700}.swatch__copied-tooltip{color:#fff;border-radius:var(--radius-sm);pointer-events:none;background:#000000d9;padding:.375rem .875rem;font-size:.813rem;font-weight:600;animation:.2s ease-out tooltip-pop;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes tooltip-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.85)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.swatch__info{flex-direction:column;gap:.2rem;padding:.875rem 1rem;display:flex}.swatch__name{text-transform:capitalize;font-size:.875rem;font-weight:700}.swatch__hex{font-family:var(--mono);color:var(--text-secondary);font-size:.813rem}.swatch__hsl{color:var(--text-dim);font-size:.75rem}.swatch__contrast{margin-top:.25rem;font-size:.75rem;font-weight:700}.swatch__contrast--pass{color:var(--success)}.swatch__contrast--fail{color:var(--error)}.contrast-table{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);margin-bottom:2.5rem;overflow:hidden}.contrast-row{transition:background var(--transition-fast);grid-template-columns:1fr auto auto;align-items:center;gap:1rem;padding:.875rem 1.25rem;font-size:.875rem;display:grid}.contrast-row:not(:last-child){border-bottom:1px solid var(--border)}.contrast-row:not(.contrast-row--header):hover{background:#ffffff05}.contrast-row--header{background:var(--bg-elevated);text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-size:.75rem;font-weight:700}.contrast-row__label{align-items:center;gap:.5rem;display:flex}.contrast-dot{border:1px solid var(--border-light);border-radius:50%;flex-shrink:0;width:16px;height:16px;display:inline-block}.pass{color:var(--success);font-weight:700}.fail{color:var(--error);font-weight:700}.type-fonts{grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:2.5rem;display:grid}@media (width<=640px){.type-fonts{grid-template-columns:1fr}}.type-font-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);transition:all var(--transition-base);flex-direction:column;gap:.625rem;padding:1.5rem;display:flex}.type-font-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-md)}.type-font-card__label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:.75rem;font-weight:700}.type-font-card__name{font-size:1.5rem;font-weight:700}.type-font-card__sample{color:var(--text-secondary);font-size:1rem;line-height:1.6}.type-scale{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);margin-bottom:2.5rem;overflow:hidden}.type-scale__header{background:var(--bg-elevated);text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);grid-template-columns:60px 140px 80px 1fr;gap:1rem;padding:.875rem 1.25rem;font-size:.75rem;font-weight:700;display:grid}.type-scale__row{border-bottom:1px solid var(--border);transition:background var(--transition-fast);grid-template-columns:60px 140px 80px 1fr;align-items:center;gap:1rem;padding:.875rem 1.25rem;display:grid}.type-scale__row:last-child{border-bottom:none}.type-scale__row:hover{background:#ffffff05}.type-scale__name{background:var(--gradient-violet);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:.875rem;font-weight:700}.type-scale__size{font-family:var(--mono);color:var(--text-secondary);font-size:.75rem}.type-scale__weight{color:var(--text-muted);font-size:.813rem}.type-scale__preview{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (width<=640px){.type-scale__header,.type-scale__row{grid-template-columns:50px 1fr}.type-scale__size,.type-scale__weight{display:none}}.spacing-scale__list{flex-direction:column;gap:.5rem;margin-bottom:2.5rem;display:flex}.spacing-step{transition:background var(--transition-fast);border-radius:var(--radius-sm);grid-template-columns:40px 1fr 130px;align-items:center;gap:.75rem;padding:.25rem 0;font-size:.875rem;display:grid}.spacing-step:hover{background:#ffffff05}.spacing-step__name{font-weight:700;font-family:var(--mono);background:var(--gradient-cyan);-webkit-text-fill-color:transparent;text-align:right;-webkit-background-clip:text;background-clip:text;font-size:.813rem}.spacing-step__bar-container{border-radius:var(--radius-sm);background:#ffffff08;height:24px;overflow:hidden}.spacing-step__bar{background:var(--gradient-rainbow);border-radius:var(--radius-sm);min-width:2px;height:100%;transition:width .5s cubic-bezier(.4,0,.2,1)}.spacing-step__value{font-family:var(--mono);color:var(--text-secondary);font-size:.75rem}.spacing-context{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);margin-bottom:2.5rem;padding:1.5rem}.spacing-context h3{margin-bottom:1.25rem;font-size:1.063rem}.spacing-semantic__row{border-bottom:1px solid var(--border);align-items:baseline;gap:1rem;padding:.625rem 0;font-size:.875rem;display:flex}.spacing-semantic__row:last-child{border-bottom:none}.spacing-semantic__row code{font-family:var(--mono);color:var(--accent-violet);border-radius:var(--radius-sm);background:#8b5cf61a;border:1px solid #8b5cf626;flex-shrink:0;padding:.25rem .625rem;font-size:.813rem}.spacing-semantic__row span{color:var(--text-secondary)}.token-export__actions{flex-wrap:wrap;gap:.75rem;margin-bottom:2rem;display:flex}.token-export__preview{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}.token-export__preview-header{background:var(--bg-elevated);color:var(--text-secondary);border-bottom:1px solid var(--border);align-items:center;gap:.75rem;padding:.75rem 1.25rem;font-size:.813rem;font-weight:600;display:flex}.token-export__preview-header:before{content:"";background-image:radial-gradient(circle at 6px 6px,#ef4444 5px,#0000 5px),radial-gradient(circle at 22px 6px,#eab308 5px,#0000 5px),radial-gradient(circle at 38px 6px,#22c55e 5px,#0000 5px);gap:.375rem;width:52px;height:12px;display:flex}.token-export__code{font-family:var(--mono);color:var(--text-secondary);counter-reset:line;max-height:520px;padding:1.5rem;font-size:.813rem;line-height:1.8;overflow:auto}.token-export__code::-webkit-scrollbar{width:6px;height:6px}.token-export__code::-webkit-scrollbar-track{background:0 0}.token-export__code::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}.token-export__code::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}@media (width<=768px){.landing__hero{padding:4rem 0 3rem}.landing__hero:before{width:300px;height:300px}.landing__subtitle{font-size:1.063rem}.landing__hero-actions{flex-direction:column;gap:.75rem}.landing__hero-actions .btn{width:100%;max-width:320px}.landing__palette-preview{gap:.375rem}.palette-preview__swatch{border-radius:var(--radius-sm);width:40px;height:40px}.app-header{flex-direction:column;align-items:flex-start;gap:.75rem}.wizard-nav{width:100%}.app-main{padding:2rem 1rem}.color-palette__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.spacing-step{grid-template-columns:30px 1fr 100px}.brand-input__header h2{font-size:1.75rem}.step-header h2{font-size:1.5rem}}@media (width<=480px){.landing__title{font-size:2.25rem}.color-palette__grid{grid-template-columns:1fr 1fr}.palette-preview__swatch{width:32px;height:32px}}