@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800;900&display=swap";.app-container{min-height:100vh;display:flex;flex-direction:column}.header{background-color:var(--background);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;box-shadow:0 12px 30px var(--shadow)}.header:before{content:"";display:block;height:4px;background:var(--brand-gradient)}.header-content{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:20px;min-height:72px;flex-wrap:wrap}.header-logo{flex:0 0 auto;font-family:var(--font-family-heading);font-size:1.15rem;font-weight:600;line-height:1;letter-spacing:.12em;color:var(--text-primary);text-decoration:none;margin-right:auto}.header-logo:hover{color:var(--primary-color)}.nav{display:flex;gap:.5rem;justify-content:center;flex:1 1 auto;align-items:center}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:0 0 auto}.header-icon-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;color:var(--text-secondary);text-decoration:none;transition:color .2s,background-color .2s}.header-icon-svg{width:24px;height:24px}.header-icon-link:hover{color:var(--primary-color);background-color:#0b0b120d}.menu-toggle{display:none;width:44px;height:44px;padding:0;border:0;border-radius:0;background:transparent;color:var(--text-primary);align-items:center;justify-content:center;flex-direction:column;gap:6px;cursor:pointer;transition:transform .2s}.menu-toggle:hover{color:var(--text-primary)}.menu-toggle span{display:block;width:20px;height:2px;background:currentColor;border-radius:999px;transform-origin:center;transition:transform .2s ease,opacity .2s ease}.menu-toggle.open span:nth-child(1){transform:translateY(4px) rotate(45deg)}.menu-toggle.open span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}.nav-link{font-family:var(--font-family-body);color:var(--text-secondary);text-decoration:none;font-weight:500;transition:color .2s,background-color .2s,border-color .2s;position:relative;padding:.7rem .95rem;border-radius:999px;white-space:nowrap}.nav-link:hover,.nav-link.active{color:var(--primary-color);background:transparent}.main-content{flex:1}.footer{background-color:var(--surface);border-top:1px solid var(--border);margin-top:auto}.footer-content{max-width:1200px;margin:0 auto;padding:20px;text-align:center;color:var(--text-secondary);font-size:.875rem}@media (max-width: 900px){.header-content{padding-bottom:0;gap:14px}.header-logo{margin-right:auto;flex:1 1 auto;min-width:0}.menu-toggle{display:inline-flex}.nav{order:3;width:100%;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;max-height:0;opacity:0;overflow:hidden;pointer-events:none;transform:translateY(-10px);transition:max-height .28s ease,opacity .2s ease,transform .2s ease}.nav.nav-open{max-height:520px;opacity:1;pointer-events:auto;transform:translateY(0);margin-top:4px;padding-top:16px;border-top:1px solid rgba(11,11,18,.08)}.nav-link{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.95rem 0;border-radius:0;background:transparent;border:0;font-size:1rem;line-height:1.3}.nav-link:after{content:"›";color:#626676e6;font-size:1.8rem;font-weight:300;line-height:1;transform:translateY(-1px)}.nav-link:hover,.nav-link.active{background:transparent;color:var(--text-primary)}.header-actions{margin-left:0;flex:0 0 auto}}@media (max-width: 520px){.header-content{padding:14px 20px 0;gap:14px}}.btn{padding:14px 28px;border-radius:8px;font-size:1rem;font-weight:600;text-decoration:none;transition:all .2s;border:none;cursor:pointer}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 12px #2563eb4d}.btn-secondary{background-color:transparent;color:var(--primary-color);border:2px solid var(--primary-color)}.btn-secondary:hover{background-color:var(--primary-color);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #2563eb4d}.home-page{padding:60px 20px}.hero{text-align:center;margin:80px}.hero-title-block{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 0 42px;margin-bottom:24px}.home-page .hero-title-main{font-family:var(--font-family-heading);font-size:clamp(4rem,9vw,6rem);font-weight:900;letter-spacing:.02rem;line-height:1;color:var(--text-primary);margin-bottom:.45rem;padding:.12em 0 .16em;text-align:center}.hero-title-sub{font-family:var(--font-family-heading);font-size:clamp(2rem,4.5vw,43px);font-weight:900;letter-spacing:.015em;line-height:1;padding:.14em 0 .2em;text-align:center;background:var(--brand-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-description{font-size:1.25rem;max-width:720px;margin:0 auto;color:var(--text-secondary)}.section{margin-bottom:80px}.foundations-section{margin-top:184px}.section h2{text-align:center;font-size:2.5rem;margin-bottom:24px}.section>p{max-width:800px;margin:0 auto 40px;text-align:center}.benefits-grid,.foundations-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:40px}@media (min-width: 900px){.foundations-grid{grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch}.foundations-grid .foundation-card{grid-column:span 2}.foundations-grid .foundation-card:nth-child(4){grid-column:2 / span 2}.foundations-grid .foundation-card:nth-child(5){grid-column:4 / span 2}}.benefit-card{padding:32px;background-color:var(--surface);border:1px solid var(--border);border-radius:12px;transition:transform .2s,box-shadow .2s}.benefit-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px var(--shadow)}.benefit-card h3{font-size:1.5rem;color:var(--primary-color);margin:0 0 12px}.benefit-card p{margin:0;font-size:1rem}.foundation-card{padding:32px;background-color:var(--surface);border:1px solid var(--border);border-radius:12px;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s;display:block}.foundation-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px var(--shadow)}.foundation-icon{width:60px;height:60px;border-radius:12px;margin-bottom:16px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(11,11,18,.08);color:#4f5463;background:linear-gradient(135deg,#0b0b120d,#0b0b1206)}.foundation-icon svg{flex:0 0 auto}.foundation-icon-colors,.foundation-icon-typography,.foundation-icon-spacing,.foundation-icon-branding,.foundation-icon-components{color:#4f5463}.foundation-card h3{font-size:1.5rem;color:var(--text-primary);margin:0 0 12px}.foundation-card p{margin:0;font-size:1rem;color:var(--text-secondary)}.cta-section{margin-top:96px;text-align:center;padding:60px 40px;background:linear-gradient(135deg,#2563eb0d,#8b5cf60d);border-radius:16px}.cta-buttons{display:flex;gap:16px;justify-content:center;margin-top:32px}@media (max-width: 768px){.hero-description{font-size:1.125rem}.foundations-section{margin-top:120px}.cta-buttons{flex-direction:column;align-items:center}.cta-section{margin-top:64px}.btn{width:100%;max-width:300px}}.color-swatch{display:flex;align-items:center;gap:16px;padding:16px;background-color:var(--surface);border:1px solid var(--border);border-radius:8px;transition:transform .2s,box-shadow .2s}.color-swatch:hover{transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow)}.color-preview{width:80px;height:80px;border-radius:8px;border:1px solid var(--border);box-shadow:0 2px 4px var(--shadow)}.color-info{flex:1}.color-name{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin-bottom:4px}.color-value{font-size:.875rem;color:var(--text-secondary);font-family:Courier New,monospace;margin-bottom:2px}.color-variable{font-size:.875rem;color:var(--primary-color);font-family:Courier New,monospace}.code-block{background-color:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;margin:20px 0;position:relative;font-family:Courier New,monospace;font-size:.875rem;overflow-x:auto;box-shadow:0 20px 40px var(--shadow)}.copy-button{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;background:#ffffffb8;color:var(--text-secondary);border:1px solid rgba(98,102,118,.24);border-radius:999px;cursor:pointer;font-size:.75rem;font-weight:600;line-height:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:color .2s,border-color .2s,background-color .2s,box-shadow .2s}.copy-button-icon{display:inline-flex;align-items:center;justify-content:center}.copy-button:hover{background:#ffffffeb;color:var(--text-primary);border-color:#4169e138;box-shadow:0 12px 24px #140b3b14}.copy-button.copied{background:#ffffffeb;color:var(--primary-color);border-color:#4169e152}.colors-page .color-section{margin-top:60px}.color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:24px}.typography-page .typography-section{margin-top:60px}.font-specimen{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:24px}.font-family-card{background-color:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px;box-shadow:0 20px 40px var(--shadow)}.font-family-meta{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-color);margin-bottom:12px}.specimen-text{font-size:1.5rem;color:var(--text-primary);margin-bottom:12px}.specimen-text.heading-family{font-family:var(--font-family-heading);font-size:clamp(2.5rem,5vw,4rem);font-weight:800;letter-spacing:-.06em;line-height:.95}.specimen-text.body-family{font-family:var(--font-family-body);font-size:1.375rem;font-weight:500;color:var(--accent-color);line-height:1.3}.type-scale{display:flex;flex-direction:column;gap:32px;margin-top:24px}.type-example{padding:24px;background-color:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 40px var(--shadow)}.type-preview{font-weight:700;color:var(--text-primary);margin-bottom:12px;letter-spacing:-.03em}.type-details{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--text-secondary)}.type-separator{color:var(--border)}.weight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:24px}.weight-example{padding:24px;background-color:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 40px var(--shadow)}.weight-preview{font-family:var(--font-family-heading);font-size:2rem;color:var(--text-primary);margin-bottom:12px;letter-spacing:-.03em}.weight-details{display:flex;flex-direction:column;gap:4px;font-size:.875rem;color:var(--text-secondary)}.weight-value{font-family:Courier New,monospace;color:var(--primary-color)}.spacing-page .spacing-section{margin-top:60px}.spacing-examples{display:flex;flex-direction:column;gap:16px;margin-top:24px}.spacing-example{display:flex;align-items:center;gap:24px;padding:20px;background-color:var(--surface);border:1px solid var(--border);border-radius:8px}.spacing-visual{min-width:100px;height:100px;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#f3f4f6,#f3f4f6 10px,#e5e7eb 10px,#e5e7eb 20px);border-radius:4px}.spacing-box{background-color:var(--primary-color);border-radius:4px}.spacing-info{flex:1}.spacing-name{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin-bottom:4px}.spacing-value{font-size:1rem;color:var(--primary-color);font-family:Courier New,monospace;margin-bottom:4px}.spacing-usage{font-size:.875rem;color:var(--text-secondary)}.visual-demo{margin-top:24px}.demo-container{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px}.demo-box{background-color:var(--surface);border:2px dashed var(--primary-color);border-radius:4px;font-size:.875rem;color:var(--text-primary);font-weight:600;display:inline-flex;align-items:center;justify-content:center}.demo-flex{display:flex;align-items:center;padding:16px;background-color:var(--surface);border:1px solid var(--border);border-radius:8px;position:relative}.demo-item{width:60px;height:60px;background-color:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;border-radius:4px;font-weight:600}.demo-label{position:absolute;bottom:-24px;left:16px;font-size:.75rem;color:var(--text-secondary)}.favicon-tile{--favicon-size: 32px;width:calc(var(--favicon-size) + 40px);height:calc(var(--favicon-size) + 40px);display:inline-flex;align-items:center;justify-content:center;border-radius:20px;border:1px solid var(--border);background:linear-gradient(180deg,#fffffff5,#f7f5fbfa);box-shadow:0 20px 40px var(--shadow)}.favicon-tile--contrast{border-color:#ffffff24;background:radial-gradient(circle at top,rgba(255,255,255,.14),transparent 62%),#0b0b12;box-shadow:0 24px 48px #0b0b123d}.favicon-tile__image{width:var(--favicon-size);height:var(--favicon-size);display:block;image-rendering:-webkit-optimize-contrast}.branding-page .branding-section{margin-top:60px}.logo-showcase{background-color:var(--surface);border:1px solid var(--border);border-radius:20px;padding:80px 40px;margin:24px 0;display:flex;justify-content:center;align-items:center;box-shadow:0 20px 40px var(--shadow)}.logo-display{display:flex;justify-content:center;align-items:center;width:100%;font-family:var(--font-family-heading);font-size:clamp(5rem,24vw,300px);font-weight:600;line-height:1;letter-spacing:.1em;text-align:center;color:var(--text-primary);padding-left:.1em}.guidelines-list{list-style:none;padding:0;margin:24px 0}.guidelines-list li{padding:12px 0 12px 32px;position:relative;color:var(--text-secondary);font-size:1rem;line-height:1.6}.guidelines-list li:before{content:"✓";position:absolute;left:0;color:var(--accent-color);font-weight:700}.brand-colors{display:flex;gap:24px;margin-top:24px;flex-wrap:wrap}.brand-color-card{flex:1;min-width:200px;padding:24px;background-color:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 40px var(--shadow)}.brand-color-preview{width:100%;height:120px;border-radius:14px;margin-bottom:16px;border:1px solid var(--border)}.brand-color-name{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin-bottom:4px}.brand-color-value{font-size:.875rem;color:var(--text-secondary);font-family:Courier New,monospace}.favicon-showcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin:24px 0}.favicon-card{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:24px;background-color:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 40px var(--shadow)}.favicon-card--contrast{background:linear-gradient(180deg,#0b0b12f5,#1f183afa);border-color:#7426ff2e}.favicon-card-label{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}.favicon-card--contrast .favicon-card-label{color:#ffffffb8}.values-grid,.voice-tone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:24px}.value-card,.voice-card{padding:32px;background-color:var(--surface);border:1px solid var(--border);border-radius:16px;transition:transform .2s,box-shadow .2s;box-shadow:0 20px 40px var(--shadow)}.value-card:hover,.voice-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px var(--shadow)}.value-card h3,.voice-card h3{font-size:1.5rem;color:var(--primary-color);margin:0 0 12px}.value-card p,.voice-card p{margin:0;font-size:1rem;color:var(--text-secondary)}.card{padding:32px;background-color:var(--background);border:1px solid var(--border);border-radius:12px;box-shadow:0 2px 4px var(--shadow);transition:transform .2s,box-shadow .2s;max-width:400px}.card:hover{transform:translateY(-4px);box-shadow:0 8px 24px var(--shadow)}.card h3{margin-top:0;color:var(--text-primary)}.card p{color:var(--text-secondary);margin-bottom:20px}.demo-area{position:relative;padding:64px 40px 40px;background-color:var(--surface);border:1px solid var(--border);border-radius:8px;display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}.input-group{display:flex;flex-direction:column;gap:8px;min-width:300px}.input-label{font-size:.875rem;font-weight:600;color:var(--text-primary)}.input{padding:12px 16px;border:1px solid var(--border);border-radius:8px;font-size:1rem;color:var(--text-primary);transition:border-color .2s,box-shadow .2s;background-color:var(--background)}.input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #2563eb1a}.input::placeholder{color:var(--text-secondary);opacity:.6}.input-wrapper{position:relative;display:flex;align-items:center}.input--has-icon{width:100%;padding-right:44px}.input-icon-btn{position:absolute;right:10px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:4px;border-radius:4px;transition:color .2s,background-color .2s;line-height:0}.input-icon-btn:hover{color:var(--text-primary);background-color:var(--surface-strong)}.input-icon-btn--success{color:#16a34a}.input--date{color-scheme:light}.select-wrapper{position:relative;display:flex;align-items:center}.select-wrapper:after{content:"";position:absolute;right:16px;width:8px;height:8px;border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:rotate(45deg) translateY(-3px);pointer-events:none}.select{width:100%;padding:12px 40px 12px 16px;border:1px solid var(--border);border-radius:8px;font-size:1rem;font-family:var(--font-family-body);color:var(--text-primary);background-color:var(--background);-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .2s,box-shadow .2s}.select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #2713ff1a}.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:18px;height:18px;border:2px solid var(--border);border-radius:4px;background-color:var(--background);cursor:pointer;transition:border-color .2s,background-color .2s;position:relative;flex-shrink:0}.checkbox:checked{background-color:var(--primary-color);border-color:var(--primary-color)}.checkbox:checked:after{content:"";position:absolute;top:2px;left:5px;width:5px;height:9px;border-right:2px solid white;border-bottom:2px solid white;transform:rotate(45deg)}.checkbox:focus-visible{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #2713ff1a}.checkbox-text{font-size:.9375rem;color:var(--text-primary)}.map-annotation-card{--map-annotation-surface: rgba(255, 255, 255, .94);--map-annotation-shadow: rgba(15, 12, 41, .12);--map-annotation-text: var(--text-primary);--map-annotation-muted: var(--text-secondary);--map-annotation-pointer-bottom: -8px;--map-annotation-pointer-top: auto;display:block}.map-annotation-card[data-theme=light]{--map-annotation-surface: rgba(255, 255, 255, .98);--map-annotation-shadow: rgba(15, 12, 41, .12);--map-annotation-text: var(--text-primary);--map-annotation-muted: var(--text-secondary)}.map-annotation-card[data-theme=dark]{--map-annotation-surface: rgba(10, 10, 16, .92);--map-annotation-shadow: rgba(0, 0, 0, .35);--map-annotation-text: #ffffff;--map-annotation-muted: rgba(255, 255, 255, .72)}.map-annotation-card__shell{position:relative;display:flex;align-items:center;gap:14px;min-width:220px;max-width:260px;padding:4px;border-radius:20px;background:linear-gradient(90deg,#2814ff,#ff0059);box-shadow:0 18px 38px var(--map-annotation-shadow)}.map-annotation-card__shell:after{content:"";position:absolute;right:32px;width:16px;height:16px;top:var(--map-annotation-pointer-top);bottom:var(--map-annotation-pointer-bottom);background:linear-gradient(90deg,#2814ff,#ff0059);transform:rotate(45deg);z-index:0}.map-annotation-card__shell:before{content:"";position:absolute;right:32px;width:16px;height:16px;top:calc(var(--map-annotation-pointer-top) + 2px);bottom:calc(var(--map-annotation-pointer-bottom) + 6px);background:var(--map-annotation-surface);transform:rotate(45deg);z-index:1}.map-annotation-card__content{position:relative;z-index:2;width:100%;padding:14px 16px;border-radius:16px;background:var(--map-annotation-surface);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.map-annotation-card__content strong,.map-annotation-card__content span{display:block}.map-annotation-card__content strong{color:var(--map-annotation-text);font-size:.95rem}.map-annotation-card__content span{margin-top:2px;color:var(--map-annotation-muted);font-size:.82rem}@media (prefers-color-scheme: dark){.map-annotation-card[data-theme=auto]{--map-annotation-surface: rgba(10, 10, 16, .92);--map-annotation-shadow: rgba(0, 0, 0, .35);--map-annotation-text: #ffffff;--map-annotation-muted: rgba(255, 255, 255, .72)}}.map-badge{--map-badge-surface: #ffffff;--map-badge-text: #323232;display:inline-flex;width:var(--map-badge-size);height:var(--map-badge-size)}.map-badge[data-theme=light]{--map-badge-surface: #ffffff;--map-badge-text: #323232}.map-badge[data-theme=dark]{--map-badge-surface: #000000;--map-badge-text: #ffffff}.map-badge__svg{display:block;width:100%;height:100%;overflow:visible}.map-badge__halo{fill:#fff;opacity:1}.map-badge__face{fill:var(--map-badge-surface)}.map-badge__text{font-family:var(--font-family-body);font-size:10px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}.map-badge--interactive{cursor:pointer;transition:transform .2s ease,filter .2s ease}.map-badge--interactive:hover{transform:translateY(-1px) scale(1.08);filter:drop-shadow(0 4px 10px rgba(15,12,41,.18))}@media (prefers-color-scheme: dark){.map-badge[data-theme=auto]{--map-badge-surface: #000000;--map-badge-text: #ffffff}}.interactive-map{--interactive-map-background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(250, 248, 255, .98) 100%);--interactive-map-border: rgba(19, 16, 36, .06);--interactive-map-control-surface: rgba(255, 255, 255, .84);--interactive-map-control-border: rgba(19, 16, 36, .08);--interactive-map-control-button-border: rgba(39, 19, 255, .1);--interactive-map-control-button-surface: linear-gradient(180deg, #ffffff 0%, #f7f5fb 100%);--interactive-map-control-shadow: rgba(15, 12, 41, .08);--interactive-map-grid-color: rgba(19, 16, 36, .18);--interactive-map-hint-surface: rgba(255, 255, 255, .84);--interactive-map-hint-border: rgba(19, 16, 36, .06);--interactive-map-annotation-surface: rgba(255, 255, 255, .94);--interactive-map-annotation-border: rgba(19, 16, 36, .08);--interactive-map-annotation-shadow: rgba(15, 12, 41, .12);--interactive-map-glow-left: radial-gradient(circle, rgba(39, 19, 255, .16) 0%, rgba(39, 19, 255, 0) 70%);--interactive-map-glow-right: radial-gradient(circle, rgba(255, 0, 89, .18) 0%, rgba(255, 0, 89, 0) 72%);display:grid;gap:20px}.interactive-map[data-theme=light]{--interactive-map-background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(250, 248, 255, .98) 100%);--interactive-map-border: rgba(19, 16, 36, .06);--interactive-map-control-surface: rgba(255, 255, 255, .84);--interactive-map-control-border: rgba(19, 16, 36, .08);--interactive-map-control-button-border: rgba(39, 19, 255, .1);--interactive-map-control-button-surface: linear-gradient(180deg, #ffffff 0%, #f7f5fb 100%);--interactive-map-control-shadow: rgba(15, 12, 41, .08);--interactive-map-grid-color: rgba(19, 16, 36, .65);--interactive-map-hint-surface: rgba(255, 255, 255, .84);--interactive-map-hint-border: rgba(19, 16, 36, .06);--interactive-map-annotation-surface: rgba(255, 255, 255, .94);--interactive-map-annotation-border: rgba(19, 16, 36, .08);--interactive-map-annotation-shadow: rgba(15, 12, 41, .12);--interactive-map-glow-left: radial-gradient(circle, rgba(39, 19, 255, .16) 0%, rgba(39, 19, 255, 0) 70%);--interactive-map-glow-right: radial-gradient(circle, rgba(255, 0, 89, .18) 0%, rgba(255, 0, 89, 0) 72%)}.interactive-map[data-theme=dark]{--interactive-map-background: linear-gradient(180deg, rgba(4, 4, 8, .96) 0%, rgba(12, 12, 18, .98) 100%);--interactive-map-border: rgba(255, 255, 255, .08);--interactive-map-control-surface: rgba(10, 10, 16, .86);--interactive-map-control-border: rgba(255, 255, 255, .08);--interactive-map-control-button-border: rgba(255, 255, 255, .12);--interactive-map-control-button-surface: linear-gradient(180deg, rgba(16, 16, 24, .96) 0%, rgba(8, 8, 14, .96) 100%);--interactive-map-control-shadow: rgba(0, 0, 0, .35);--interactive-map-grid-color: rgba(255, 255, 255, .26);--interactive-map-hint-surface: rgba(12, 12, 18, .84);--interactive-map-hint-border: rgba(255, 255, 255, .08);--interactive-map-annotation-surface: rgba(10, 10, 16, .92);--interactive-map-annotation-border: rgba(255, 255, 255, .08);--interactive-map-annotation-shadow: rgba(0, 0, 0, .35);--interactive-map-glow-left: radial-gradient(circle, rgba(108, 90, 255, .2) 0%, rgba(108, 90, 255, 0) 80%);--interactive-map-glow-right: radial-gradient(circle, rgba(255, 82, 118, .18) 0%, rgba(255, 82, 118, 0) 80%)}.interactive-map[data-theme=dark] .interactive-map__zoom-readout,.interactive-map[data-theme=dark] .interactive-map__hint span{color:#ffffffb3}.interactive-map[data-theme=dark] .interactive-map__heading p:last-child,.interactive-map[data-theme=dark] .interactive-map__control-button{color:#fff}.interactive-map__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}.interactive-map__heading{max-width:34rem}.interactive-map__eyebrow{margin-bottom:8px;color:var(--primary-color);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.interactive-map__heading h3{margin:0;font-family:var(--font-family-heading);font-size:clamp(1.7rem,2vw,2.4rem);line-height:1;letter-spacing:-.04em}.interactive-map__heading p:last-child{margin:12px 0 0;color:var(--text-secondary);line-height:1.65}.interactive-map__controls{display:inline-flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--interactive-map-control-border);border-radius:18px;background:var(--interactive-map-control-surface);box-shadow:0 18px 38px var(--interactive-map-control-shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.interactive-map__zoom-readout{min-width:4.5rem;color:var(--text-secondary);font-size:.84rem;font-weight:700;text-align:center}.interactive-map__control-button{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--interactive-map-control-button-border);border-radius:12px;background:var(--interactive-map-control-button-surface);color:var(--text-primary);cursor:pointer;transition:transform .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}.interactive-map__control-button:hover{transform:translateY(-1px);color:var(--primary-color);border-color:#2713ff3d;box-shadow:0 10px 22px #1f0b4a1a}.interactive-map__viewport{position:relative;min-height:680px;border-radius:40px;background:var(--interactive-map-background);border:1px solid var(--interactive-map-border);overflow:hidden;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;box-shadow:0 28px 58px #1f0b4a1a}.interactive-map__viewport.is-dragging{cursor:grabbing}.interactive-map__hint{position:absolute;right:20px;bottom:20px;z-index:2;display:inline-flex;gap:8px;flex-wrap:wrap}.interactive-map__hint span{min-height:32px;padding:0 12px;border-radius:999px;background:var(--interactive-map-hint-surface);border:1px solid var(--interactive-map-hint-border);color:var(--text-secondary);font-size:.78rem;font-weight:600;display:inline-flex;align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.interactive-map__scene{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:center;transition:transform .18s ease-out}.interactive-map__viewport.is-dragging .interactive-map__scene{transition:none}@keyframes interactive-map-glow-left-drift{0%{transform:translateZ(0) scale(1);opacity:.82}25%{transform:translate3d(36px,-30px,0) scale(1.06);opacity:.9}52%{transform:translate3d(90px,-72px,0) scale(1.14);opacity:1}76%{transform:translate3d(30px,-90px,0) scale(1.08);opacity:.92}to{transform:translate3d(-24px,-18px,0) scale(1.02);opacity:.84}}@keyframes interactive-map-glow-right-drift{0%{transform:translateZ(0) scale(1);opacity:.8}22%{transform:translate3d(-42px,30px,0) scale(1.04);opacity:.88}48%{transform:translate3d(-78px,72px,0) scale(1.12);opacity:1}74%{transform:translate3d(-24px,102px,0) scale(1.08);opacity:.9}to{transform:translate3d(30px,36px,0) scale(1.03);opacity:.82}}.interactive-map__glow{position:absolute;border-radius:999px;filter:blur(8px);will-change:transform,opacity}.interactive-map__glow--left{inset:7% auto auto 8%;width:260px;height:260px;background:var(--interactive-map-glow-right);animation:interactive-map-glow-left-drift 17.1s linear infinite alternate}.interactive-map__glow--right{inset:16% 7% auto auto;width:380px;height:380px;background:var(--interactive-map-glow-left);animation:interactive-map-glow-right-drift 20.7s linear infinite alternate}@media (prefers-reduced-motion: reduce){.interactive-map__glow--left,.interactive-map__glow--right{animation:none}}.interactive-map__grid{position:absolute;top:8%;right:2%;bottom:8%;left:4%;background-image:radial-gradient(circle,var(--interactive-map-grid-color) 1.4px,transparent 1.5px);background-size:12px 12px;-webkit-mask-image:radial-gradient(circle at 12% 30%,#000 0,#ff0000 10%,transparent 12%),radial-gradient(circle at 19% 32%,#000 0,#000 15%,transparent 17%),radial-gradient(circle at 25% 80%,#000 0,#000 9%,transparent 15%),radial-gradient(circle at 18% 68%,#000 0,#000 7%,transparent 9%),radial-gradient(circle at 21% 100%,#000 0,#000 4%,transparent 4%),radial-gradient(circle at 49% 24%,#000 0,#000 7%,transparent 9%),radial-gradient(circle at 48% 35%,#000 0,#000 10%,transparent 12%),radial-gradient(circle at 57% 27%,#000 0,#000 12%,transparent 14%),radial-gradient(circle at 70% 28%,#000 0,#000 16%,transparent 18%),radial-gradient(circle at 80% 33%,#000 0,#000 11%,transparent 13%),radial-gradient(circle at 75% 50%,#000 0,#000 8%,transparent 5%),radial-gradient(circle at 80% 60%,#000 0,#000 2%,transparent 5%),radial-gradient(circle at 64% 55%,#000 0,#000 5%,transparent 8%),radial-gradient(circle at 88% 80%,#000 0,#000 8%,transparent 10%),radial-gradient(circle at 53% 65%,#000 0,#000 7%,transparent 20%),radial-gradient(circle at 56% 85%,#000 0,#000 8%,transparent 10%);mask-image:radial-gradient(circle at 12% 30%,#000 0,#ff0000 10%,transparent 12%),radial-gradient(circle at 19% 32%,#000 0,#000 15%,transparent 17%),radial-gradient(circle at 25% 80%,#000 0,#000 9%,transparent 15%),radial-gradient(circle at 18% 68%,#000 0,#000 7%,transparent 9%),radial-gradient(circle at 21% 100%,#000 0,#000 4%,transparent 4%),radial-gradient(circle at 49% 24%,#000 0,#000 7%,transparent 9%),radial-gradient(circle at 48% 35%,#000 0,#000 10%,transparent 12%),radial-gradient(circle at 57% 27%,#000 0,#000 12%,transparent 14%),radial-gradient(circle at 70% 28%,#000 0,#000 16%,transparent 18%),radial-gradient(circle at 80% 33%,#000 0,#000 11%,transparent 13%),radial-gradient(circle at 75% 50%,#000 0,#000 8%,transparent 5%),radial-gradient(circle at 80% 60%,#000 0,#000 2%,transparent 5%),radial-gradient(circle at 64% 55%,#000 0,#000 5%,transparent 8%),radial-gradient(circle at 88% 80%,#000 0,#000 8%,transparent 10%),radial-gradient(circle at 53% 65%,#000 0,#000 7%,transparent 20%),radial-gradient(circle at 56% 85%,#000 0,#000 8%,transparent 10%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.interactive-map__badge{position:absolute;transform:translate(-50%,-50%);z-index:1}.interactive-map__badge.is-active{z-index:5}.interactive-map__annotation{position:absolute;min-width:220px;max-width:260px}.interactive-map__badge-trigger{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer}.interactive-map__badge-trigger.is-active{z-index:4}.interactive-map__badge-card{position:absolute;z-index:4;width:max-content;max-width:260px}.interactive-map__badge-card--above{right:-24px;bottom:calc(100% + 6px)}.interactive-map__badge-card--above.interactive-map__badge-card--flipped{right:auto;left:-24px}.interactive-map__badge-card--above .map-annotation-card{--map-annotation-pointer-top: auto;--map-annotation-pointer-bottom: -6px}.interactive-map__badge-card--below{right:-24px;top:calc(100% + 6px)}.interactive-map__badge-card--below.interactive-map__badge-card--flipped{right:auto;left:-24px}.interactive-map__badge-card--below .map-annotation-card{--map-annotation-pointer-top: -6px;--map-annotation-pointer-bottom: auto}.interactive-map__badge-card--flipped .map-annotation-card .map-annotation-card__shell:after,.interactive-map__badge-card--flipped .map-annotation-card .map-annotation-card__shell:before{right:auto;left:32px}.interactive-map__badge-card--below .map-annotation-card .map-annotation-card__shell:after{top:-6px;bottom:auto}.interactive-map__badge-card--below .map-annotation-card .map-annotation-card__shell:before{top:0;bottom:auto}@media (prefers-color-scheme: dark){.interactive-map[data-theme=auto]{--interactive-map-background: linear-gradient(180deg, rgba(4, 4, 8, .96) 0%, rgba(12, 12, 18, .98) 100%);--interactive-map-border: rgba(255, 255, 255, .08);--interactive-map-control-surface: rgba(10, 10, 16, .86);--interactive-map-control-border: rgba(255, 255, 255, .08);--interactive-map-control-button-border: rgba(255, 255, 255, .12);--interactive-map-control-button-surface: linear-gradient(180deg, rgba(16, 16, 24, .96) 0%, rgba(8, 8, 14, .96) 100%);--interactive-map-control-shadow: rgba(0, 0, 0, .35);--interactive-map-grid-color: rgba(255, 255, 255, .26);--interactive-map-hint-surface: rgba(12, 12, 18, .84);--interactive-map-hint-border: rgba(255, 255, 255, .08);--interactive-map-annotation-surface: rgba(10, 10, 16, .92);--interactive-map-annotation-border: rgba(255, 255, 255, .08);--interactive-map-annotation-shadow: rgba(0, 0, 0, .35);--interactive-map-glow-left: radial-gradient(circle, rgba(108, 90, 255, .2) 0%, rgba(108, 90, 255, 0) 72%);--interactive-map-glow-right: radial-gradient(circle, rgba(255, 82, 118, .18) 0%, rgba(255, 82, 118, 0) 72%)}.interactive-map[data-theme=auto] .interactive-map__zoom-readout,.interactive-map[data-theme=auto] .interactive-map__hint span{color:#ffffffb3}.interactive-map[data-theme=auto] .interactive-map__heading p:last-child,.interactive-map[data-theme=auto] .interactive-map__control-button{color:#fff}}@media (max-width: 900px){.interactive-map__viewport{min-height:600px}.interactive-map__annotation{min-width:190px;max-width:220px}.interactive-map__badge-card{max-width:220px}}@media (max-width: 640px){.interactive-map__controls{width:100%;justify-content:space-between}.interactive-map__viewport{min-height:500px;border-radius:28px}.interactive-map__annotation{min-width:0;max-width:180px}.interactive-map__badge-card{max-width:180px}.interactive-map__badge-card--above,.interactive-map__badge-card--below{right:18px}.interactive-map__hint{right:14px;bottom:14px}}.loader{--loader-size: 2.5rem;--loader-gradient-start: var(--primary-color);--loader-gradient-end: var(--secondary-color);--loader-track: rgba(39, 19, 255, .16);display:inline-flex;align-items:center;justify-content:center;gap:.75rem;color:var(--text-secondary)}.loader--inline{justify-content:flex-start}.loader--sm{--loader-size: 1rem;gap:.5rem;font-size:.95rem}.loader--md{--loader-size: 2.5rem}.loader--lg{--loader-size: 4rem}.loader--neutral{--loader-gradient-start: #0b0b12;--loader-gradient-end: #7a8297;--loader-track: rgba(11, 11, 18, .12)}.loader--primary{--loader-gradient-start: var(--primary-color);--loader-gradient-end: var(--secondary-color);--loader-track: rgba(39, 19, 255, .16)}.loader--secondary{--loader-gradient-start: var(--secondary-color);--loader-gradient-end: #ff7ca8;--loader-track: rgba(255, 0, 89, .18)}.loader--accent{--loader-gradient-start: var(--accent-color);--loader-gradient-end: var(--secondary-color);--loader-track: rgba(116, 38, 255, .18)}.loader__spinner{position:relative;width:var(--loader-size);height:var(--loader-size);display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--background);box-shadow:0 8px 18px #140b3b1f}.loader__svg{width:100%;height:100%}.loader__track-circle,.loader__indicator-circle{fill:none;stroke-width:10}.loader__track-circle{stroke:var(--loader-track)}.loader__indicator-circle{stroke:url(#loaderGradient);stroke-linecap:round;stroke-dasharray:28 72;transform-origin:50% 50%;animation:loader-spin 1.05s infinite}.loader__label{font-size:.95rem;font-weight:600;line-height:1.3}.loader__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loader--inverted{--loader-track: rgba(255, 255, 255, .2);color:#ffffffd6}.loader--inverted .loader__spinner{box-shadow:0 10px 20px #00000038}@keyframes loader-spin{0%{transform:rotate(0);animation-timing-function:cubic-bezier(.55,.08,.68,.53)}48%{transform:rotate(182deg);animation-timing-function:cubic-bezier(.22,.61,.36,1)}to{transform:rotate(360deg)}}.components-intro{margin-bottom:1.5rem}.components-intro>p{margin-bottom:0}.components-overview-card{padding:24px 28px;border:1px solid rgba(39,19,255,.14);border-radius:18px;background:linear-gradient(135deg,#f7f5fbf5,#fffffffa)}.components-storybook-callout{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(11,11,18,.08)}.components-storybook-callout strong{display:block;margin-bottom:6px;color:var(--text-primary)}.components-storybook-callout p{margin:0;color:var(--text-secondary)}.components-storybook-link{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border:1px solid transparent;border-radius:999px;background:var(--brand-gradient);color:#fff;text-decoration:none;font-weight:700;white-space:nowrap;transition:color .2s ease,border-color .2s ease,background-color .2s ease,transform .2s ease,box-shadow .2s ease}.components-storybook-link:hover{transform:translateY(-1px);box-shadow:0 14px 24px #140b3b1f}.components-nav-sticky.is-sticky .components-storybook-link{border-color:#0b0b121a;background:#fffffff5;color:var(--text-secondary)}.components-nav-sticky.is-sticky .components-storybook-link:hover{border-color:#0b0b1229;background:#fffffffa;color:var(--text-primary);box-shadow:0 12px 20px #140b3b14}.components-nav-sticky{position:sticky;top:68px;z-index:90;padding-bottom:24px;margin-bottom:4.5rem}@media (min-width: 641px){.components-nav-sticky{border-bottom:1px solid rgba(11,11,18,.08)}.components-nav-sticky.is-sticky{border-bottom:0}}.components-nav-sticky.is-sticky{margin-inline:-20px;padding:0 20px 24px}.components-nav{margin:0;padding-top:20px}.components-nav-sticky.is-sticky .components-overview-card{background:linear-gradient(180deg,#f7f5fbeb,#fffffffa);border-top:none;border-radius:0 0 22px 22px}.components-nav-title{margin-bottom:12px;font-size:.82rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}.components-nav-list{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}.components-nav-list li{margin:0}.components-nav-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid rgba(39,19,255,.14);border-radius:999px;background:#ffffffd1;color:var(--text-primary);font:inherit;text-decoration:none;font-weight:600;cursor:pointer;transition:color .2s ease,border-color .2s ease,background-color .2s ease,transform .2s ease,box-shadow .2s ease}.components-nav-link:hover{color:var(--primary-color);border-color:#2713ff4d;background:#fffffffa;transform:translateY(-1px);box-shadow:0 12px 20px #140b3b14}.components-nav-link.is-active,.components-nav-link.is-active:hover{color:#fff;border-color:transparent;background:var(--brand-gradient)}.components-nav-link:focus-visible{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 4px #2713ff1f}.components-nav-link.is-active:focus-visible{box-shadow:0 0 0 4px #2713ff29}.components-page .component-section{margin-top:60px;scroll-margin-top:120px}.component-demo{margin-top:32px}.component-demo h3{font-size:1.25rem;color:var(--text-primary);margin:32px 0 16px}.component-storybook-button{position:absolute;top:20px;right:20px;display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border:1px solid rgba(11,11,18,.1);border-radius:999px;background:#fffffff0;color:var(--text-secondary);text-decoration:none;font-size:.8rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;transition:color .2s ease,border-color .2s ease,background-color .2s ease,transform .2s ease,box-shadow .2s ease}.component-storybook-button:hover{border-color:#0b0b1229;background:#fffffffa;color:var(--text-primary);transform:translateY(-1px);box-shadow:0 12px 20px #140b3b14}.component-storybook-button:focus-visible{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 4px #2713ff1f}.loader-demo-area{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;align-items:stretch}.loader-showcase{display:flex;flex-direction:column;gap:18px;padding:22px;background:linear-gradient(180deg,#fffc,#f7f5fbf2);border:1px solid rgba(39,19,255,.08);border-radius:18px;min-height:180px}.loader-showcase-label{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}.loader-row,.loader-column{display:flex;gap:18px}.loader-row{flex-wrap:wrap;align-items:center}.loader-column{flex-direction:column;align-items:flex-start}.loader-showcase--dark{background:radial-gradient(circle at top left,rgba(255,255,255,.08),transparent 36%),linear-gradient(135deg,#111426,#1d1638);border-color:#ffffff14}.loader-showcase--dark .loader-showcase-label{color:#ffffffb8}@media (max-width: 640px){.components-nav-sticky{top:76px;padding-bottom:18px}.components-nav-sticky.is-sticky{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0 0 18px}.components-nav-sticky.is-sticky .components-nav-title{display:none}.components-nav-sticky.is-sticky .components-overview-card{width:100%;border-radius:0}.components-nav-list{gap:10px}.components-nav-link{width:100%;justify-content:flex-start}.components-storybook-callout{flex-direction:column;align-items:flex-start}.components-storybook-link{display:none}.components-overview-card{padding:20px}.component-storybook-button{top:16px;right:16px}}.page{max-width:1200px;margin:0 auto;padding:48px 20px 72px;width:100%}.page h1{font-family:var(--font-family-heading);font-size:clamp(2.8rem,6vw,4.5rem);font-weight:800;letter-spacing:-.05em;color:var(--text-primary);margin-bottom:1rem}.page>h1:first-child{padding-top:44px}.page h2{font-family:var(--font-family-heading);font-size:clamp(2rem,4vw,2.8rem);font-weight:600;letter-spacing:-.03em;color:var(--text-primary);margin-top:2rem;margin-bottom:1rem}.page h3{font-family:var(--font-family-heading);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;color:var(--text-primary);margin-top:1.5rem;margin-bottom:.75rem}.page p{font-family:var(--font-family-body);font-size:1.0625rem;line-height:1.8;color:var(--text-secondary);margin-bottom:1rem;max-width:72ch}.page>h1:first-child+p{padding-bottom:40px;margin-bottom:4.5rem;border-bottom:1px solid rgba(11,11,18,.08)}:root{font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-family-heading: "Outfit", sans-serif;--font-family-body: "Inter", sans-serif;--primary-color: #2713ff;--primary-dark: #1807c7;--secondary-color: #ff0059;--accent-color: #7426ff;--brand-gradient: linear-gradient(90deg, #2713ff 0%, #ff0059 100%);--text-primary: #0b0b12;--text-secondary: #626676;--background: #ffffff;--surface: #f7f5fb;--surface-strong: #efeafb;--border: #e6e0f0;--shadow: rgba(20, 11, 59, .08)}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:var(--font-family-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--text-primary);background-color:var(--background);background-image:radial-gradient(circle at top,rgba(39,19,255,.05),transparent 28%)}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}