@import "https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&family=Martian+Mono:wght@400..700&display=swap";.v-button{font-family:var(--font-sans);letter-spacing:.01em;cursor:pointer;border:1.5px solid #0000;border-radius:9px;justify-content:center;align-items:center;gap:8px;font-weight:600;line-height:1;transition:background .13s,border-color .13s,color .13s,transform .13s;display:inline-flex}.v-button:active:not(:disabled){transform:translateY(1px)}.v-button--sm{height:32px;padding:0 14px;font-size:13.5px}.v-button--md{height:40px;padding:0 18px;font-size:15px}.v-button--lg{height:48px;padding:0 24px;font-size:16.5px}.v-button--primary{background:var(--accent);border-color:var(--ink);color:var(--ink)}.v-button--primary:hover:not(:disabled){background:var(--accent-bright)}.v-button--secondary{background:var(--paper);border-color:var(--ink);color:var(--ink)}.v-button--secondary:hover:not(:disabled){background:var(--panel)}.v-button--ghost{color:var(--ink);background:0 0;border-color:#0000}.v-button--ghost:hover:not(:disabled){background:var(--wash)}.v-button:disabled{background:var(--panel);border-color:var(--line);color:var(--ink-faint);cursor:not-allowed}.v-button--ghost:disabled{background:0 0;border-color:#0000}.v-card{--v-card-pad:20px;border:1.5px solid var(--line);background:var(--paper);width:100%;font-family:var(--font-sans);text-align:left;border-radius:14px;transition:box-shadow .13s}.v-card--pad-sm{--v-card-pad:14px}.v-card--pad-md{--v-card-pad:20px}.v-card--pad-lg{--v-card-pad:28px}.v-card--elevated{box-shadow:var(--shadow)}.v-card__header{padding:calc(var(--v-card-pad) * .75) var(--v-card-pad);border-bottom:1px solid var(--line)}.v-card__title{letter-spacing:.01em;color:var(--ink);margin:0;font-size:15.5px;font-weight:600}.v-card__body{padding:var(--v-card-pad);color:var(--ink-soft);font-size:14.5px;line-height:1.55}.v-input{width:100%;font-family:var(--font-sans);text-align:left;flex-direction:column;gap:7px;display:flex}.v-input__label{letter-spacing:.01em;color:var(--ink);font-size:14px;font-weight:600}.v-input__field{border:1.5px solid var(--line-strong);background:var(--paper);height:42px;color:var(--ink);font:inherit;border-radius:9px;padding:0 13px;font-size:15px;transition:border-color .13s,box-shadow .13s}.v-input__field:hover{border-color:var(--ink-faint)}.v-input__field:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--accent);outline:none}.v-input__hint{color:var(--ink-soft);margin:0;font-size:13px;line-height:1.45}.v-input--error .v-input__field{border-color:var(--error)}.v-input--error .v-input__field:focus{border-color:var(--error);box-shadow:0 0 0 3px var(--error-tint)}.v-input--error .v-input__hint{color:var(--error)}.v-input--error .v-input__hint:before{content:"✕ "}.v-input--success .v-input__field{border-color:var(--ok)}.v-input--success .v-input__hint{color:var(--ok)}.v-input--success .v-input__hint:before{content:"✓ "}:root{--paper:#fff;--panel:#fafafa;--wash:#f1f1f3;--ink:#131316;--ink-soft:#4b4b53;--ink-faint:#6f6f78;--line:#e4e4e7;--line-strong:#cfcfd6;--accent:#c8f14f;--accent-bright:#d8f873;--accent-tint:#f1fbd4;--accent-ink:#2c3608;--error:#c03d2c;--error-tint:#f7ddd8;--ok:#55700f;--ink-panel-line:#2c2c31;--ink-panel-soft:#8f8f98;--ink-panel-text:#ececf1;--font-sans:"Familjen Grotesk", "Avenir Next", "Segoe UI", sans-serif;--font-mono:"Martian Mono", "SFMono-Regular", Consolas, monospace;--radius-sm:9px;--radius-md:14px;--radius-lg:16px;--shadow:0 14px 34px #1313161c, 0 2px 7px #13131612;--container:1120px;--dot-grid:radial-gradient(var(--line-strong) 1.1px, transparent 1.1px)}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}body{background:var(--paper);color:var(--ink);font-family:var(--font-sans);margin:0;font-size:16px;line-height:1.55}::selection{background:var(--accent);color:var(--ink)}:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px}.snippet :focus-visible,.site-footer :focus-visible{outline-color:var(--accent)}h1,h2,h3,p{margin:0}a{color:inherit}button{font:inherit}code{font-family:var(--font-mono)}.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}.site-main{min-height:60vh}.kicker{font-family:var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);font-size:11px;font-weight:500}.kicker--chip{background:var(--accent);color:var(--accent-ink);border-radius:999px;align-items:center;padding:7px 13px;display:inline-flex}.section-head{margin-bottom:38px}.section-head .kicker{margin-bottom:12px}.section-head h2{letter-spacing:-.018em;font-size:clamp(1.7rem,3vw,2.35rem);font-weight:640;line-height:1.12}.section-head__intro{max-width:62ch;color:var(--ink-soft);margin-top:14px;font-size:16.5px}.cta{border-radius:10px;justify-content:center;align-items:center;gap:10px;height:48px;padding:0 26px;font-size:16px;font-weight:600;text-decoration:none;transition:background .13s,border-color .13s,transform .13s;display:inline-flex}.cta--primary{background:var(--accent);border:1.5px solid var(--ink);color:var(--ink)}.cta--primary:hover{background:var(--accent-bright);transform:translateY(-2px)}.cta--ghost{background:var(--paper);border:1.5px solid var(--line-strong);color:var(--ink)}.cta--ghost:hover{border-color:var(--ink);transform:translateY(-2px)}.wordmark{color:var(--ink);align-items:center;gap:10px;margin:0;text-decoration:none;display:inline-flex}.wordmark__glyph{background:var(--ink);border-radius:4px;width:18px;height:18px;position:relative}.wordmark__glyph:after{content:"";background:var(--accent);width:7px;height:7px;position:absolute;top:4px;left:4px}.wordmark__name{letter-spacing:-.01em;font-size:19px;font-weight:650}.wordmark__version{border:1px solid var(--line-strong);font-family:var(--font-mono);color:var(--ink-faint);border-radius:999px;padding:3px 8px;font-size:10px}.wordmark--inverse{color:var(--paper)}.wordmark--inverse .wordmark__glyph{background:var(--accent);border-radius:4px}.wordmark--inverse .wordmark__glyph:after{background:var(--ink)}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:100;background:var(--ink);color:var(--paper);border-radius:9px;padding:10px 18px;font-weight:600;text-decoration:none;transition:top .14s;position:fixed;top:-80px;left:16px}.skip-link:focus-visible{outline-color:var(--accent);top:12px}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.site-header{z-index:20;background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0}.site-header__inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;min-height:64px;padding-block:10px;display:flex}.site-nav{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.site-nav__link{color:var(--ink-soft);border-radius:8px;padding:8px 12px;font-size:15px;font-weight:550;text-decoration:none;transition:background .13s,color .13s}.site-nav__link:hover{background:var(--wash);color:var(--ink)}.site-nav__link.router-link-active{background:var(--accent);color:var(--ink)}.hero{padding-block:clamp(48px,7vw,88px) clamp(56px,7vw,92px)}.hero__inner{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:clamp(36px,5vw,72px);display:grid}.hero__headline{letter-spacing:-.025em;margin-top:22px;font-size:clamp(2.5rem,5.4vw,4.05rem);font-weight:660;line-height:1.12}.hero__mark{background:var(--accent);color:var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:7px;padding:0 10px 2px;display:inline}.hero__intro{max-width:52ch;color:var(--ink-soft);margin-top:22px;font-size:17px}.hero__actions{flex-wrap:wrap;gap:12px;margin-top:30px;display:flex}.hero-stage{margin:0;position:relative}.hero-stage__canvas{border:1.5px solid var(--ink);border-radius:var(--radius-lg);background-color:var(--paper);background-image:var(--dot-grid);background-size:17px 17px;flex-direction:column;gap:22px;padding:44px 28px 28px;display:flex}.hero-stage__slot{flex-direction:column;align-items:flex-start;gap:9px;display:flex}.hero-stage__tag{font-family:var(--font-mono);letter-spacing:.1em;color:var(--ink-faint);font-size:10.5px}.hero-stage__caption{font-family:var(--font-mono);color:var(--ink-faint);margin-top:12px;font-size:11px;line-height:1.6}.stage__chip{z-index:1;border-radius:var(--radius-lg) 0 var(--radius-sm) 0;background:var(--ink);color:var(--paper);font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 13px;font-size:10.5px;position:absolute;top:-1px;left:-1px}.principles{border-top:1px solid var(--line);padding-block:clamp(52px,6vw,80px)}.principles__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px);margin:0;padding:0;list-style:none;display:grid}.principles__item{border-top:2px solid var(--ink);padding-top:20px}.principles__num{background:var(--accent);color:var(--accent-ink);font-family:var(--font-mono);border-radius:6px;padding:4px 9px;font-size:11px;font-weight:600;display:inline-block}.principles__item h3{letter-spacing:-.01em;margin:14px 0 8px;font-size:20px;font-weight:640}.principles__item p{color:var(--ink-soft);font-size:15px}.component-index{border-top:1px solid var(--line);padding-block:clamp(52px,6vw,80px)}.component-index__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}.index-card{border:1.5px solid var(--line);border-radius:var(--radius-md);background:var(--paper);flex-direction:column;gap:12px;padding:24px;transition:border-color .14s,transform .14s,box-shadow .14s;display:flex;position:relative}.index-card:before{content:"";background:var(--accent);opacity:0;width:10px;height:10px;transition:opacity .14s;position:absolute;top:12px;right:12px}.index-card:hover,.index-card:focus-within{border-color:var(--ink);box-shadow:var(--shadow);transform:translateY(-3px)}.index-card:hover:before,.index-card:focus-within:before{opacity:1}.index-card__top{justify-content:space-between;align-items:center;gap:10px;display:flex}.index-card__kicker{font-family:var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);font-size:10.5px}.index-card__tag{border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);border-radius:7px;padding:4px 8px;font-size:11px}.index-card__name{letter-spacing:-.015em;font-size:23px;font-weight:650}.index-card__link{color:inherit;outline:none;text-decoration:none}.index-card__link:after{content:"";border-radius:var(--radius-md);position:absolute;inset:0}.index-card:has(.index-card__link:focus-visible){outline:2.5px solid var(--ink);outline-offset:2px}.index-card__summary{color:var(--ink-soft);font-size:14.5px}.index-card__props{flex-wrap:wrap;gap:6px;margin:2px 0 0;padding:0;list-style:none;display:flex}.index-card__props code{border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);border-radius:6px;padding:4px 8px;font-size:11px;display:inline-block}.index-card__cta{font-family:var(--font-mono);letter-spacing:.05em;color:var(--ink);margin-top:auto;padding-top:10px;font-size:11.5px}.index-card__arrow{transition:transform .14s;display:inline-block}.index-card:hover .index-card__arrow,.index-card:focus-within .index-card__arrow{transform:translate(4px)}.faq{border-top:1px solid var(--line);padding-block:clamp(52px,6vw,80px) clamp(64px,7vw,96px)}.faq__list{border-top:1.5px solid var(--ink);max-width:820px}.faq__item{border-bottom:1px solid var(--line)}.faq__item summary{cursor:pointer;letter-spacing:-.005em;justify-content:space-between;align-items:center;gap:18px;padding:19px 2px;font-size:17px;font-weight:600;list-style:none;display:flex}.faq__item summary::-webkit-details-marker{display:none}.faq__item summary:hover{color:var(--ink);background:linear-gradient(var(--panel), var(--panel))}.faq__marker{border:1.5px solid var(--ink);background:var(--paper);border-radius:6px;flex:none;width:22px;height:22px;transition:background .14s;position:relative}.faq__marker:before,.faq__marker:after{content:"";background:var(--ink);width:10px;height:1.5px;transition:transform .14s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.faq__marker:after{transform:translate(-50%,-50%)rotate(90deg)}.faq__item[open] .faq__marker{background:var(--accent)}.faq__item[open] .faq__marker:after{transform:translate(-50%,-50%)rotate(0)}.faq__item>p{max-width:68ch;color:var(--ink-soft);padding:0 2px 20px;font-size:15.5px}.not-found{padding-block:clamp(72px,10vw,128px)}.not-found__inner{max-width:640px}.not-found h1{letter-spacing:-.02em;margin-top:18px;font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:660}.not-found__message{color:var(--ink-soft);margin-top:16px;font-size:16.5px}.not-found__actions{flex-wrap:wrap;gap:12px;margin-top:28px;display:flex}.site-footer{background:var(--ink);color:var(--ink-panel-text);padding-block:clamp(44px,5vw,60px) 26px}.site-footer__inner{flex-wrap:wrap;justify-content:space-between;gap:40px;display:flex}.site-footer__brand{max-width:480px}.site-footer__line{color:var(--ink-panel-soft);margin-top:16px;font-size:14.5px;line-height:1.6}.site-footer__nav{flex-direction:column;gap:10px;display:flex}.site-footer__link{width:fit-content;color:var(--ink-panel-text);border-bottom:1.5px solid #0000;font-size:15px;font-weight:550;text-decoration:none;transition:color .13s,border-color .13s}.site-footer__link:hover{color:var(--accent);border-color:var(--accent)}.site-footer__meta{border-top:1px solid var(--ink-panel-line);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:24px;margin-top:44px;padding-top:20px;display:flex}.site-footer__meta p{max-width:72ch;color:var(--ink-panel-soft);font-size:12.5px;line-height:1.6}.site-footer__stamp{font-family:var(--font-mono);white-space:nowrap}@media (width<=940px){.hero__inner,.principles__list,.component-index__grid{grid-template-columns:minmax(0,1fr)}}@media (width<=480px){.wordmark__version{display:none}.site-nav__link{padding:7px 9px;font-size:14px}.hero-stage__canvas{padding:40px 16px 20px}}.component-page{padding-block:34px clamp(64px,7vw,96px)}.crumbs{font-family:var(--font-mono);flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:30px;font-size:11.5px;display:flex}.crumbs a{color:var(--ink-faint);border-bottom:1px solid #0000;text-decoration:none;transition:color .13s,border-color .13s}.crumbs a:hover{color:var(--ink);border-color:var(--accent)}.crumbs__sep{color:var(--line-strong)}.crumbs [aria-current=page]{color:var(--ink)}.component-head{margin-bottom:34px}.component-head__title{letter-spacing:-.022em;flex-wrap:wrap;align-items:center;gap:16px;margin-top:12px;font-size:clamp(2.2rem,4.2vw,3.2rem);font-weight:660;line-height:1.05;display:flex}.tag-chip{border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--panel);letter-spacing:0;color:var(--ink-soft);padding:7px 11px;font-size:13px;font-weight:500}.component-head__intro{max-width:64ch;color:var(--ink-soft);margin-top:16px;font-size:16.5px}.playground{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"stage controls""snippet controls";align-items:start;gap:22px;display:grid}.stage{border:1.5px solid var(--ink);border-radius:var(--radius-lg);background-color:var(--paper);background-image:var(--dot-grid);background-size:17px 17px;grid-area:stage;justify-content:center;align-items:center;min-height:340px;padding:58px 32px 42px;display:flex;position:relative}.stage__specimen{justify-content:center;width:100%;display:flex}.stage__specimen>.v-input{max-width:340px}.stage__specimen>.v-card{max-width:400px}.stage__missing{max-width:40ch;font-family:var(--font-mono);text-align:center;color:var(--ink-faint);font-size:12px;line-height:1.7}.controls{border:1.5px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);grid-area:controls;padding:20px 20px 18px}.controls__head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:4px;display:flex}.controls__title{font-family:var(--font-mono);letter-spacing:.13em;text-transform:uppercase;margin:0;font-size:12px;font-weight:600}.controls__reset{border:1px solid var(--line-strong);background:var(--paper);font-family:var(--font-mono);color:var(--ink-soft);cursor:pointer;border-radius:8px;padding:7px 11px;font-size:11px;transition:border-color .13s,color .13s}.controls__reset:hover{border-color:var(--ink);color:var(--ink)}.control{border-top:1px solid var(--line);padding:15px 0}.control:first-of-type{border-top:0}.control__meta{justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px;display:flex}.control__name{font-family:var(--font-mono);color:var(--ink);font-size:13px;font-weight:600}.control__type{text-align:right;color:var(--ink-faint);font-size:10px}.control__select,.control__text{border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--paper);width:100%;height:40px;color:var(--ink);font-family:var(--font-mono);padding:0 12px;font-size:12.5px;transition:border-color .13s}.control__select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23131316' stroke-width='1.5'/%3E%3C/svg%3E");background-position:right 13px center;background-repeat:no-repeat;padding-right:34px}.control__select:hover,.control__text:hover{border-color:var(--ink-faint)}.control__select:focus-visible,.control__text:focus-visible{border-color:var(--ink);box-shadow:0 0 0 3px var(--accent);outline:none}.control__switch{align-items:center;gap:11px;display:flex}.toggle{width:44px;height:24px;display:inline-block;position:relative}.toggle__input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.toggle__track{border:1.5px solid var(--line-strong);background:var(--paper);pointer-events:none;border-radius:999px;width:100%;height:100%;transition:background .14s,border-color .14s;display:block}.toggle__track:after{content:"";background:var(--ink);border-radius:50%;width:15px;height:15px;transition:left .14s;position:absolute;top:50%;left:4px;transform:translateY(-50%)}.toggle__input:checked+.toggle__track{background:var(--accent);border-color:var(--ink)}.toggle__input:checked+.toggle__track:after{left:24px}.toggle__input:focus-visible+.toggle__track{box-shadow:0 0 0 2px var(--panel), 0 0 0 4.5px var(--ink)}.control__value{font-family:var(--font-mono);color:var(--ink-faint);font-size:11.5px}.controls__note{border-top:1px solid var(--line);color:var(--ink-faint);margin:16px 0 0;padding-top:15px;font-size:12.5px;line-height:1.55}.snippet{border:1.5px solid var(--ink);border-radius:var(--radius-md);background:var(--ink);color:var(--ink-panel-text);grid-area:snippet;overflow:hidden}.snippet__bar{border-bottom:1px solid var(--ink-panel-line);justify-content:space-between;align-items:center;gap:12px;padding:9px 10px 9px 18px;display:flex}.snippet__lang{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-panel-soft);font-size:10.5px}.snippet__copy{min-width:96px;font-family:var(--font-mono);color:var(--accent);cursor:pointer;background:0 0;border:1px solid #45454d;border-radius:8px;padding:8px 15px;font-size:11.5px;transition:border-color .13s,background .13s,color .13s}.snippet__copy:hover{border-color:var(--accent)}.snippet__copy--done{background:var(--accent);border-color:var(--accent);color:var(--ink)}.snippet__pre{margin:0;padding:18px 20px;overflow-x:auto}.snippet__code{color:var(--ink-panel-text);font-size:12.5px;line-height:1.75}.props-section,.guidance{margin-top:clamp(44px,5vw,64px)}.props-section h2,.guidance h2{letter-spacing:-.015em;margin-bottom:20px;font-size:clamp(1.35rem,2.4vw,1.7rem);font-weight:640}.props-table-wrap{border:1.5px solid var(--line);border-radius:var(--radius-md);overflow-x:auto}.props-table{border-collapse:collapse;width:100%;min-width:660px}.props-table thead th{border-bottom:1.5px solid var(--line);background:var(--panel);font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;text-align:left;color:var(--ink-faint);padding:12px 18px;font-size:10.5px;font-weight:600}.props-table tbody th,.props-table tbody td{border-bottom:1px solid var(--line);vertical-align:top;text-align:left;padding:15px 18px;font-weight:400}.props-table tbody tr:last-child th,.props-table tbody tr:last-child td{border-bottom:0}.props-table code{color:var(--ink-soft);font-size:11.5px}.props-table__name{background:var(--accent-tint);color:var(--ink);border-radius:6px;padding:3px 8px;font-weight:600;display:inline-block}.props-table__required{font-style:italic}.props-table__desc{min-width:260px;color:var(--ink-soft);font-size:14px}.guidance__list{max-width:72ch;margin:0;padding:0;list-style:none}.guidance__list li{color:var(--ink-soft);padding:9px 0 9px 26px;font-size:15.5px;position:relative}.guidance__list li:before{content:"";background:var(--accent);outline:1.5px solid var(--ink);width:9px;height:9px;position:absolute;top:17px;left:2px}.pager{justify-content:space-between;gap:16px;margin-top:clamp(48px,6vw,72px);display:flex}.pager__link{border:1.5px solid var(--line);border-radius:var(--radius-md);min-width:176px;color:var(--ink);flex-direction:column;gap:5px;padding:15px 20px;text-decoration:none;transition:border-color .14s,transform .14s,box-shadow .14s;display:flex}.pager__link:hover{border-color:var(--ink);box-shadow:var(--shadow);transform:translateY(-2px)}.pager__link--next{text-align:right;margin-left:auto}.pager__dir{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-size:10.5px}.pager__name{font-size:17px;font-weight:640}@media (width<=960px){.playground{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage""controls""snippet"}.stage{min-height:280px;padding:56px 20px 36px}}@media (width<=480px){.snippet__code{font-size:11.5px}.pager{flex-direction:column}.pager__link--next{margin-left:0}}