:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--text:#9ca3af;--text-h:#f3f4f6;--bg:#08060b;--border:#64646480;--code-bg:#1f2028;--color-white:#fff;--color-gray:#313131;--color-mantle-blue:#000561;--color-mantle-purple:#009;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#000333;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px;--sans:"IBM Plex Mono", Roboto, sans-serif;--heading:"IBM Plex Mono", Roboto, sans-serif;--mono:"IBM Plex Mono", ui-monospace, Consolas, monospace}[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--color-gray:#e5e4e7;--accent:#3bff65;--accent-bg:#7760881a;--accent-border:#d4d4f180;--social-bg:#ffffff80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px}*{box-sizing:border-box}html,body{margin:0;padding:0}html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{font:16px/145% var(--mono);letter-spacing:.18px;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:inherit}.wrapper{box-sizing:border-box;width:1126px;max-width:100%;margin:0 auto;padding:32px 20px 64px}.topbar{border-bottom:1px solid var(--border);align-items:center;gap:16px;margin-bottom:32px;padding-bottom:24px;display:flex}.topbar .breadcrumb{margin-left:auto}.topbar__home{color:var(--text);align-items:center;gap:8px;font-weight:700;text-decoration:none;transition:color .3s;display:inline-flex}.topbar__home:hover{color:var(--text-h);text-decoration:none}.breadcrumb{color:var(--text);font-size:14px}h1,h2{font-family:var(--heading);color:var(--text-h)}h1{letter-spacing:-1.2px;margin:0 0 12px;font-size:40px;font-weight:800}h2{margin:0 0 8px;font-size:20px;font-weight:500}p{max-width:70ch;margin:0 0 20px;font-weight:400}.panel{margin-top:20px}.panel h2{border-top:1px solid var(--border);margin-bottom:12px;padding-top:20px}.settings{flex-wrap:wrap;align-items:center;gap:12px;font-size:14px;display:flex}.settings label{color:var(--text)}.settings input{font:inherit;border:1px solid var(--border);background:var(--code-bg);color:var(--text-h);border-radius:8px;min-width:260px;padding:6px 10px;font-size:14px}.settings button{font:inherit;border:1px solid var(--border);color:var(--text-h);cursor:pointer;background:0 0;border-radius:8px;padding:6px 14px;font-size:14px}.settings button:hover{box-shadow:var(--shadow)}.settings__hint{color:var(--text);opacity:.8}.preview-frame{border:1px solid var(--border);background:var(--code-bg);border-radius:16px;width:100%;height:80vh;min-height:560px;margin-top:12px}.preview-actions{margin-top:12px;font-size:14px}.preview-actions a{color:var(--text);text-decoration:none;transition:color .3s}.preview-actions a:hover{color:var(--text-h);border-bottom-color:currentColor}.component-nav ul{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.component-nav a{border:1px solid var(--color-gray);color:var(--text-h);background:0 0;border-radius:32px;padding:6px 14px;font-size:14px;text-decoration:none;transition:box-shadow .2s,background .2s;display:inline-flex}.component-nav a:hover{background:var(--color-gray);box-shadow:var(--shadow)}.component-nav a[aria-current=page]{background:var(--color-gray)}.landing{--landing-green:#88b600;--landing-purple:#cca7ff;--landing-heading:#f5f4fcd9;--landing-heading-soft:#eeedf5;--landing-border:#ffffff12;--landing-panel-bg:#ffffff08;--landing-text:#b7b5c4;--landing-nav-height:88px;z-index:0;color:var(--landing-text);background:radial-gradient(120% 90% at 50% -10%,#59ff8c14 0%,#8b5cff0d 35%,#08060b 70%);min-height:100vh;font-family:IBM Plex Mono,ui-monospace,Consolas,monospace;position:relative}.landing:after{content:"";filter:grayscale()blur(4px);opacity:.25;z-index:-1;pointer-events:none;background-image:url(/assets/mantle-bg-BB3bHM_J.jpg);background-position:50%;background-size:cover;width:100vw;height:100vh;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0%,#0000 100%);mask-image:linear-gradient(#000 0%,#0000 100%)}.landing-nav{z-index:10;-webkit-backdrop-filter:blur();background:0 0;border-bottom:1px solid #0000;justify-content:space-between;align-items:center;gap:24px;width:100%;margin:0;padding:32px;transition:background-color .3s ease-in-out,-webkit-backdrop-filter .3s ease-in-out,backdrop-filter .3s ease-in-out,border-color .3s ease-in-out;display:flex;position:sticky;top:0}.landing-nav.is-scrolled{-webkit-backdrop-filter:blur(12px);background:#08060bb8;border-bottom-color:#ffffff1a}.landing-nav__logo{width:120px}.landing-nav__brand{opacity:0;transition:opacity .3s ease-in-out}.landing-nav.is-scrolled .landing-nav__brand{opacity:1}@media (prefers-reduced-motion:reduce){.landing-nav,.landing-nav__brand{transition:none}}.landing-nav__links{align-items:center;gap:28px;display:flex}.landing-nav__link{color:var(--landing-text);font-size:14px;text-decoration:none}.landing-nav__link--github{color:var(--landing-heading);border:1px solid #ffffff24;border-radius:32px;padding:7px 14px;font-size:14px;text-decoration:none}.landing-hero{text-align:center;flex-direction:column;align-items:center;gap:24px;max-width:860px;margin:0 auto;padding:88px 32px 64px;display:flex}.landing-hero__badge{color:oklch(84% .2 150);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:32px;align-items:center;gap:8px;padding:6px 14px;font-size:13px;display:inline-flex}.landing-hero__badge-dot{background:var(--landing-green);border-radius:50%;width:6px;height:6px}.landing-hero__title{letter-spacing:-1.8px;color:var(--landing-heading);max-width:600px;margin:0;font-family:IBM Plex Sans,sans-serif;font-size:32px;font-weight:500;line-height:104%}.landing-hero__subtitle{color:oklch(72% .02 290);max-width:640px;margin:20px 0;font-size:16px;line-height:155%}.landing-hero__actions{gap:12px;margin-top:8px;display:flex}.landing-btn{border-radius:8px;padding:13px 26px;font-size:15px;text-decoration:none}.landing-btn--primary{color:#08060b;background:linear-gradient(119deg,#007aff 0%,#004b9c 100%);font-weight:600;transition:color .3s ease-in-out}.landing-btn--primary:hover{color:#fff}.landing-btn--secondary{color:var(--landing-heading);border:1px solid #ffffff29}.landing-hero__install{color:oklch(72% .02 290);background:#ffffff0a;border:1px solid #ffffff14;border-radius:8px;align-items:center;gap:10px;margin-top:24px;padding:12px 18px;font-size:14px;display:inline-flex}.landing-hero__install-prompt{color:#007aff}.landing-story{max-width:1180px;margin:64px auto 0;padding:0 32px}.landing-story__grid{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.landing-story__card{background:var(--landing-panel-bg);border:1px solid var(--landing-border);text-align:left;border-radius:20px;padding:28px}.landing-story__icon{border:1px solid var(--landing-border);border-radius:14px;justify-content:center;align-items:center;width:52px;height:52px;margin-bottom:20px;display:flex}.landing-story__icon svg{width:26px;height:26px}.landing-story__icon--green{color:var(--landing-green);background:#88b60024}.landing-story__icon--purple{color:var(--landing-purple);background:#cca7ff24}.landing-story__icon--blue{color:oklch(84% .24 220);background:oklch(84% .24 220/.16)}.landing-story__title{color:var(--landing-heading);margin:0 0 8px;font-family:IBM Plex Sans,sans-serif;font-size:17px;font-weight:600}.landing-story__text{color:oklch(68% .02 290);margin:0;font-size:14px;line-height:150%}.landing-components{text-align:left;max-width:1180px;scroll-margin-top:var(--landing-nav-height);margin:88px auto 0;padding:0 32px}.landing-components__header{justify-content:space-between;align-items:baseline;margin-bottom:24px;display:flex}.landing-components__title{color:var(--landing-heading);letter-spacing:-.4px;margin:0;font-family:IBM Plex Sans,sans-serif;font-size:28px;font-weight:600}.landing-components__count{color:oklch(60% .02 290);font-size:13px}.landing-components__grid{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}.landing-card{background:var(--landing-panel-bg);border:1px solid var(--landing-border);color:inherit;border-radius:16px;padding:20px;text-decoration:none;display:block}a.landing-card{transition:box-shadow .3s}a.landing-card:hover{box-shadow:0 0 12px var(--color-gray)}.landing-card__icon{border:1px solid var(--landing-border);background:0 0;border-radius:11px;justify-content:center;align-items:center;width:40px;height:40px;margin-bottom:14px;display:flex}.landing-card__icon svg{width:20px;height:20px;stroke:var(--landing-heading);opacity:.9}.landing-card__title{color:var(--landing-heading-soft);margin:0 0 6px;font-family:IBM Plex Sans,sans-serif;font-size:15px;font-weight:600}.landing-card__text{color:oklch(62% .02 290);margin:0;font-size:13px;line-height:145%}.landing-patterns,.landing-accessibility{max-width:1180px;scroll-margin-top:var(--landing-nav-height);padding:0 32px}.landing-patterns{margin:64px auto 0}.landing-accessibility{margin:20px auto 0}.landing-panel{background:var(--landing-panel-bg);border:1px solid var(--landing-border);text-align:left;border-radius:28px;flex-wrap:wrap;padding:40px;display:flex}.landing-panel--patterns{gap:16px}.landing-panel--accessibility{gap:32px}.landing-heading{color:var(--landing-heading);letter-spacing:-.3px;margin:0 0 12px;font-family:IBM Plex Sans,sans-serif;font-size:24px;font-weight:600}.landing-panel__intro{flex:300px}.landing-panel__intro--narrow{flex:260px}.landing-panel__text{color:oklch(70% .02 290);margin:0;font-size:15px;line-height:160%}.landing-panel__text--constrained{max-width:420px}.landing-panel__list{flex-direction:column;flex:300px;gap:12px;display:flex}.landing-panel__list-item{color:oklch(82% .02 290);align-items:center;gap:10px;font-size:14px;display:flex}.landing-panel__check{color:var(--landing-green);font-weight:700}.landing-panel__stats{flex:2 400px;grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.landing-stat__value{color:var(--color-bg);font-family:IBM Plex Sans,sans-serif;font-size:26px;font-weight:700}.landing-stat__label{color:oklch(64% .02 290);margin-top:4px;font-size:13px}.landing-footer{border-top:1px solid #ffffff14;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;max-width:1180px;margin:64px auto 0;padding:32px;display:flex}.landing-footer__copy{color:oklch(55% .02 290);font-size:13px}.landing-footer__links{gap:20px;display:flex}.landing-footer__link{color:oklch(68% .02 290);font-size:13px;text-decoration:none}.landing-footer__spacer{height:88px}.mantle-logo{width:90%;height:auto;margin:30px 0}.detail{--detail-heading:#f5f4fcd9;--detail-heading-soft:#eeedf5;--detail-text:#b7b5c4;--detail-border:#ffffff12;--detail-panel-bg:#ffffff08;--detail-hover-bg:#ffffff0d;--detail-accent:#c084fc;--detail-accent-bg:#c084fc1f;--detail-surface:#08060b;background:radial-gradient(120% 90% at 50% -10%, #59ff8c0f 0%, #8b5cff0a 35%, var(--detail-surface) 70%);min-height:100vh;color:var(--detail-text)}[data-theme=light] .detail{--detail-heading:#0c0a12e6;--detail-heading-soft:#0c0a12;--detail-text:#464050d9;--detail-border:#14101e1a;--detail-panel-bg:#14101e09;--detail-hover-bg:#14101e0d;--detail-accent:#8b5cf6;--detail-accent-bg:#8b5cf61f;--detail-surface:#f6f5ef}.detail-topbar{border-bottom:1px solid var(--detail-border);align-items:center;gap:20px;padding:24px 32px;display:flex}.detail-topbar__logo{flex-shrink:0;width:110px;display:inline-flex}.detail-topbar__logo svg{width:100%;height:auto;display:block}.detail-topbar__logo svg path{fill:var(--detail-heading-soft)}.detail-topbar .breadcrumb{color:var(--detail-text);opacity:.75;font-size:14px}.theme-toggle{border:1px solid var(--border);width:36px;height:36px;color:var(--text);cursor:pointer;background:0 0;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;margin-left:auto;transition:background .2s,color .2s;display:inline-flex}.theme-toggle:hover{color:var(--text-h);background:#7f7f7f1f}.theme-toggle__icon{width:18px;height:18px;display:none}.theme-toggle__icon--sun{display:block}[data-theme=light] .theme-toggle__icon--sun{display:none}[data-theme=light] .theme-toggle__icon--moon{display:block}.detail-shell{align-items:flex-start;max-width:1320px;margin:0 auto;display:flex}.detail-sidebar{flex:0 0 236px;align-self:flex-start;width:236px;max-height:100vh;padding:20px 12px;position:sticky;top:0;overflow-y:auto}.detail-sidebar__category{margin-bottom:4px}.detail-sidebar__category-label{cursor:pointer;-webkit-user-select:none;user-select:none;letter-spacing:.04em;text-transform:uppercase;color:var(--detail-heading-soft);opacity:.65;border-radius:8px;align-items:center;gap:8px;padding:8px 12px;font-size:12px;font-weight:600;list-style:none;transition:background .2s,opacity .2s;display:flex}.detail-sidebar__category-label::-webkit-details-marker{display:none}.detail-sidebar__category-label:hover{background:var(--detail-hover-bg);opacity:.9}.detail-sidebar__chevron{flex-shrink:0;width:14px;height:14px;transition:transform .15s}.detail-sidebar__category[open]>.detail-sidebar__category-label .detail-sidebar__chevron{transform:rotate(90deg)}.detail-sidebar__placeholder{color:var(--detail-text);opacity:.5;margin:2px 12px 10px;padding:8px 12px;font-size:13px;font-style:italic}.detail-sidebar ul{flex-direction:column;gap:2px;margin:4px 0 8px;padding:0;list-style:none;display:flex}.detail-sidebar a{color:var(--detail-text);border-radius:10px;align-items:center;gap:10px;padding:9px 12px;font-size:14px;text-decoration:none;transition:background .2s,color .2s;display:flex}.detail-sidebar a svg{stroke:currentColor;opacity:.85;flex-shrink:0;width:18px;height:18px}.detail-sidebar a:hover{background:var(--color-gray);color:var(--detail-heading-soft)}.detail-sidebar a[aria-current=page]{border:1px solid var(--color-gray);color:var(--detail-heading-soft)}.detail-sidebar a[aria-current=page] svg{opacity:1;stroke:var(--detail-heading-soft)}.detail-main{flex:auto;min-width:0;padding:32px 32px 64px}.detail-title{align-items:center;gap:16px;margin-bottom:12px;display:flex}.detail-title__icon{border:1px solid var(--detail-border);background:var(--detail-panel-bg);border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.detail-title__icon svg{width:24px;height:24px;stroke:var(--detail-heading)}.detail-main h1{color:var(--detail-heading);letter-spacing:-.6px;margin:0;font-family:IBM Plex Sans,sans-serif;font-size:32px;font-weight:600}.detail-main>p{color:oklch(70% .02 290);margin:0 0 8px}@media (width<=860px){.detail-shell{flex-direction:column}.detail-sidebar{width:100%;max-height:none;position:static;overflow-y:visible}}