.angular-demo .sec__title,.vue-demo__intro h1{letter-spacing:-.035em;font-size:22px;font-weight:700;line-height:1.2}.angular-demo .sec__lead,.vue-demo__intro p{font-size:14px;line-height:1.5}:is(.angular-demo,.vue-demo) .demo-kit-cards{grid-template-columns:repeat(var(--demo-kit-count), minmax(0, 1fr));border:0;align-items:stretch;gap:8px;margin:0 -6px 16px;padding:6px;display:grid;overflow:visible}.demo-kit-cards .adtab{border:1px solid var(--page-border);background:var(--page-surface);min-inline-size:0;max-inline-size:none;color:var(--ink);text-align:start;font:inherit;border-radius:10px;justify-content:flex-start;align-items:flex-start;gap:8px;padding:8px 9px;transition:transform .18s;display:flex;position:relative}.demo-kit-cards .adtab__dot{background:var(--c);border-radius:50%;flex:none;block-size:8px;inline-size:8px;margin-block-start:4px;display:block}.demo-kit-cards .adtab__l{flex-direction:column;gap:4px;min-inline-size:0;display:flex}.demo-kit-cards .adtab__l strong{white-space:normal;overflow-wrap:anywhere;color:var(--ink);font-size:12px;font-weight:650}.demo-kit-cards .adtab__l small{-webkit-line-clamp:2;color:var(--ink-3);-webkit-box-orient:vertical;font-size:10px;line-height:1.35;display:-webkit-box;overflow:hidden}.demo-kit-cards .adtab:is(:hover,:focus-within){border-color:var(--c);transform:translateY(-1px)}.demo-kit-cards .adtab:focus-visible,.demo-kit-cards .adtab:focus-within{outline:2px solid var(--c);outline-offset:3px}.demo-kit-cards .adtab.is-on{border-color:var(--c);box-shadow:0 0 0 1px var(--c), 0 4px 14px color-mix(in srgb, var(--c) 15%, transparent);background:var(--page-surface)}.demo-setup{border:1px solid var(--line);background:color-mix(in srgb, var(--brand) 7%, var(--page-surface));border-radius:12px;margin-block:16px;padding:16px 18px}.demo-setup__main{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.demo-setup__command{border:1px solid var(--line);background:var(--page-surface);direction:ltr;border-radius:10px;align-items:center;gap:12px;min-inline-size:0;padding:10px 12px;display:flex}.demo-setup__command>span{color:var(--brand);font-weight:700}.demo-setup code{overflow-wrap:anywhere;font-size:13px}.demo-setup__command code{min-inline-size:0}.demo-setup__command button,.demo-setup__docs{border:1px solid var(--line);background:var(--page-surface);min-block-size:40px;color:var(--ink);font:inherit;cursor:pointer;border-radius:8px;flex:none;justify-content:center;align-items:center;padding:8px 12px;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex}.demo-setup :is(button,a,summary):focus-visible{outline:2px solid var(--brand);outline-offset:3px}.demo-setup__feedback{color:var(--ink-2);margin:8px 0 0;font-size:12px}.demo-setup__feedback:empty{display:none}.demo-setup__direct{color:var(--ink-2);margin-block-start:12px;font-size:12px}.demo-setup__direct summary{cursor:pointer;inline-size:fit-content;padding-block:4px}.demo-setup__direct code{color:var(--ink);margin-block:10px 6px;display:block}.demo-setup__direct p{max-inline-size:80ch;margin:0}:is(.angular-demo,.vue-demo) .demo-preferences{border:1px solid var(--line);background:var(--page-surface-2);border-radius:12px;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;gap:20px 24px;margin-block:16px;padding:20px 22px;display:grid}.demo-preferences .angular-choice{inline-size:100%;min-inline-size:0;margin:0}.demo-preferences .angular-choice legend,.demo-preferences .angular-select{color:var(--ink-2);font-size:12px;font-weight:600}.demo-preferences .angular-choice__options{min-block-size:40px;inline-size:100%}.demo-preferences .angular-choice__options label{min-block-size:36px;min-inline-size:0}.demo-preferences .angular-choice__options span{white-space:normal;text-align:center;padding-inline:6px;font-size:13px}.demo-preferences label.angular-select{max-inline-size:none;max-width:none;align-items:stretch;min-block-size:0;inline-size:100%}.demo-preferences .angular-select select{min-block-size:44px}.demo-preferences .angular-options-switches{border:0;grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 24px;inline-size:100%;padding:0;display:grid}.demo-preferences .angular-options-switches label:nth-child(n):has(input[type=checkbox]){flex-direction:row;justify-content:flex-start;min-block-size:44px;font-size:13px}.demo-preferences .angular-options-switches label:nth-child(2):has(input[type=checkbox]){justify-content:center}.demo-preferences .angular-options-switches label:last-child:has(input[type=checkbox]){justify-content:flex-end}.demo-preferences .angular-options-switches input{order:1}.demo-preferences input[type=checkbox]{transition:none}.demo-preferences input[type=checkbox]:before{transition:transform .15s;inset-inline-start:2px;transform:translate(0)}.demo-preferences input[type=checkbox]:checked:before{inset-inline-start:2px;transform:translate(18px)}[dir=rtl] .demo-preferences input[type=checkbox]:checked:before{transform:translate(-18px)}@media (width<=1100px){:is(.angular-demo,.vue-demo) .demo-kit-cards{grid-template-columns:repeat(4,minmax(0,1fr))}:is(.angular-demo,.vue-demo) .demo-preferences{grid-template-columns:repeat(6,minmax(0,1fr))}.demo-preferences>:is(fieldset,label){grid-column:span 2}.demo-preferences>:is(fieldset,label):nth-child(n+4){grid-column:span 3}}@media (width<=700px){:is(.angular-demo,.vue-demo) .demo-preferences{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-preferences>:is(fieldset,label),.demo-preferences>:is(fieldset,label):nth-child(n+4){grid-column:span 1}.demo-preferences>label:nth-child(5){grid-column:1/-1}}@media (width<=600px){:is(.angular-demo,.vue-demo) .demo-kit-cards{grid-template-columns:repeat(2,minmax(0,1fr))}:is(.angular-demo,.vue-demo) .demo-preferences{grid-template-columns:1fr;gap:16px;padding:16px}.demo-preferences>:is(fieldset,label),.demo-preferences>:is(fieldset,label):nth-child(n+4){grid-column:span 1}.demo-preferences>label:nth-child(5){grid-column:1/-1}.demo-preferences .angular-options-switches{grid-template-columns:1fr;gap:8px}.demo-preferences .angular-options-switches label:nth-child(n):has(input[type=checkbox]){justify-content:space-between}.demo-setup{padding:14px}.demo-setup__command{gap:8px;inline-size:100%}.demo-setup__command button{margin-inline-start:auto}}@media (prefers-reduced-motion:reduce){.demo-kit-cards .adtab{transition:none;transform:none}.demo-preferences input[type=checkbox]:before{transition:none}}