:root{font-family:var( --shield-ui-font, "Avenir Next", "SF Pro Display", "Segoe UI", "Inter", "Helvetica Neue", sans-serif );line-height:1.5;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}.ui-h1,.ui-h2,.ui-h3,.ui-title{margin:0;font-family:var(--shield-ui-typography-heading-font, var(--shield-ui-font, inherit));letter-spacing:var(--shield-ui-typography-heading-letter-spacing, -.02em);color:var(--shield-ui-text)}.ui-h1{font-size:var(--shield-ui-typography-h1-size, 2.2rem);font-weight:var(--shield-ui-typography-h1-weight, 700);line-height:1.06}.ui-h2{font-size:var(--shield-ui-typography-h2-size, 1.75rem);font-weight:var(--shield-ui-typography-h2-weight, 650);line-height:1.12}.ui-h3{font-size:var(--shield-ui-typography-h3-size, 1.35rem);font-weight:var(--shield-ui-typography-h3-weight, 620);line-height:1.2}.ui-body{margin:0;font-family:var(--shield-ui-typography-body-font, var(--shield-ui-font, inherit));font-size:var(--shield-ui-typography-body-size, 1rem);font-weight:var(--shield-ui-typography-body-weight, 450);line-height:1.55;color:var(--shield-ui-text)}.ui-caption{margin:0;font-family:var(--shield-ui-typography-body-font, var(--shield-ui-font, inherit));font-size:var(--shield-ui-typography-caption-size, .8rem);font-weight:600;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--shield-ui-text-muted)}.card{background-color:var(--shield-ui-surface);border:1px solid var(--shield-ui-border);border-radius:12px;box-shadow:0 10px 20px -18px color-mix(in srgb,var(--shield-ui-text) 35%,transparent)}.ui-title{font-size:clamp(var(--shield-ui-typography-h2-size, 1.75rem),2.1vw,var(--shield-ui-typography-h1-size, 2.2rem));line-height:1.1}.ui-kicker{margin:0;font-size:var(--shield-ui-typography-caption-size, .8rem);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--shield-ui-text-muted)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-1{flex:1 1 0%}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.gap-0{gap:var(--shield-ui-space-0, var(--shield-space-0))}.gap-1{gap:var(--shield-ui-space-1, var(--shield-space-1))}.gap-2{gap:var(--shield-ui-space-2, var(--shield-space-2))}.gap-3{gap:var(--shield-ui-space-3, var(--shield-space-3))}.gap-4{gap:var(--shield-ui-space-4, var(--shield-space-4))}.gap-6{gap:var(--shield-ui-space-6, var(--shield-space-6))}.gap-8{gap:var(--shield-ui-space-8, var(--shield-space-8))}.rounded-none{border-radius:0}.rounded-sm{border-radius:8px}.rounded-md{border-radius:10px}.rounded-lg{border-radius:12px}.rounded-full{border-radius:9999px}.m-0{margin:var(--shield-ui-space-0, var(--shield-space-0))}.m-1{margin:var(--shield-ui-space-1, var(--shield-space-1))}.m-2{margin:var(--shield-ui-space-2, var(--shield-space-2))}.m-3{margin:var(--shield-ui-space-3, var(--shield-space-3))}.m-4{margin:var(--shield-ui-space-4, var(--shield-space-4))}.m-6{margin:var(--shield-ui-space-6, var(--shield-space-6))}.m-8{margin:var(--shield-ui-space-8, var(--shield-space-8))}.mx-0{margin-left:var(--shield-ui-space-0, var(--shield-space-0));margin-right:var(--shield-ui-space-0, var(--shield-space-0))}.mx-1{margin-left:var(--shield-ui-space-1, var(--shield-space-1));margin-right:var(--shield-ui-space-1, var(--shield-space-1))}.mx-2{margin-left:var(--shield-ui-space-2, var(--shield-space-2));margin-right:var(--shield-ui-space-2, var(--shield-space-2))}.mx-3{margin-left:var(--shield-ui-space-3, var(--shield-space-3));margin-right:var(--shield-ui-space-3, var(--shield-space-3))}.mx-4{margin-left:var(--shield-ui-space-4, var(--shield-space-4));margin-right:var(--shield-ui-space-4, var(--shield-space-4))}.mx-6{margin-left:var(--shield-ui-space-6, var(--shield-space-6));margin-right:var(--shield-ui-space-6, var(--shield-space-6))}.mx-8{margin-left:var(--shield-ui-space-8, var(--shield-space-8));margin-right:var(--shield-ui-space-8, var(--shield-space-8))}.my-0{margin-top:var(--shield-ui-space-0, var(--shield-space-0));margin-bottom:var(--shield-ui-space-0, var(--shield-space-0))}.my-1{margin-top:var(--shield-ui-space-1, var(--shield-space-1));margin-bottom:var(--shield-ui-space-1, var(--shield-space-1))}.my-2{margin-top:var(--shield-ui-space-2, var(--shield-space-2));margin-bottom:var(--shield-ui-space-2, var(--shield-space-2))}.my-3{margin-top:var(--shield-ui-space-3, var(--shield-space-3));margin-bottom:var(--shield-ui-space-3, var(--shield-space-3))}.my-4{margin-top:var(--shield-ui-space-4, var(--shield-space-4));margin-bottom:var(--shield-ui-space-4, var(--shield-space-4))}.my-6{margin-top:var(--shield-ui-space-6, var(--shield-space-6));margin-bottom:var(--shield-ui-space-6, var(--shield-space-6))}.my-8{margin-top:var(--shield-ui-space-8, var(--shield-space-8));margin-bottom:var(--shield-ui-space-8, var(--shield-space-8))}.p-0{padding:var(--shield-ui-space-0, var(--shield-space-0))}.p-1{padding:var(--shield-ui-space-1, var(--shield-space-1))}.p-2{padding:var(--shield-ui-space-2, var(--shield-space-2))}.p-3{padding:var(--shield-ui-space-3, var(--shield-space-3))}.p-4{padding:var(--shield-ui-space-4, var(--shield-space-4))}.p-6{padding:var(--shield-ui-space-6, var(--shield-space-6))}.p-8{padding:var(--shield-ui-space-8, var(--shield-space-8))}.px-0{padding-left:var(--shield-ui-space-0, var(--shield-space-0));padding-right:var(--shield-ui-space-0, var(--shield-space-0))}.px-1{padding-left:var(--shield-ui-space-1, var(--shield-space-1));padding-right:var(--shield-ui-space-1, var(--shield-space-1))}.px-2{padding-left:var(--shield-ui-space-2, var(--shield-space-2));padding-right:var(--shield-ui-space-2, var(--shield-space-2))}.px-3{padding-left:var(--shield-ui-space-3, var(--shield-space-3));padding-right:var(--shield-ui-space-3, var(--shield-space-3))}.px-4{padding-left:var(--shield-ui-space-4, var(--shield-space-4));padding-right:var(--shield-ui-space-4, var(--shield-space-4))}.px-6{padding-left:var(--shield-ui-space-6, var(--shield-space-6));padding-right:var(--shield-ui-space-6, var(--shield-space-6))}.px-8{padding-left:var(--shield-ui-space-8, var(--shield-space-8));padding-right:var(--shield-ui-space-8, var(--shield-space-8))}.py-0{padding-top:var(--shield-ui-space-0, var(--shield-space-0));padding-bottom:var(--shield-ui-space-0, var(--shield-space-0))}.py-1{padding-top:var(--shield-ui-space-1, var(--shield-space-1));padding-bottom:var(--shield-ui-space-1, var(--shield-space-1))}.py-2{padding-top:var(--shield-ui-space-2, var(--shield-space-2));padding-bottom:var(--shield-ui-space-2, var(--shield-space-2))}.py-3{padding-top:var(--shield-ui-space-3, var(--shield-space-3));padding-bottom:var(--shield-ui-space-3, var(--shield-space-3))}.py-4{padding-top:var(--shield-ui-space-4, var(--shield-space-4));padding-bottom:var(--shield-ui-space-4, var(--shield-space-4))}.py-6{padding-top:var(--shield-ui-space-6, var(--shield-space-6));padding-bottom:var(--shield-ui-space-6, var(--shield-space-6))}.py-8{padding-top:var(--shield-ui-space-8, var(--shield-space-8));padding-bottom:var(--shield-ui-space-8, var(--shield-space-8))}.text-secondary{color:var(--shield-ui-text-muted)}.text-neutral{color:var(--shield-ui-text)}.text-primary{color:var(--shield-ui-brand)}.text-ui{color:var(--shield-ui-text)}.text-muted{color:var(--shield-ui-text-muted)}.bg-primary{background-color:var(--shield-ui-brand)}.bg-secondary{background-color:var(--shield-ui-brand-soft)}.bg-neutral{background-color:var(--shield-ui-bg)}.bg-surface{background-color:var(--shield-ui-surface)}.bg-ui{background-color:var(--shield-ui-bg)}.bg-brand{background-color:var(--shield-ui-brand)}.bg-brand-soft{background-color:var(--shield-ui-brand-soft)}.border-ui{border:1px solid var(--shield-ui-border)}:root{color-scheme:light}body{margin:0;min-height:100vh;background:radial-gradient(circle at 10% 10%,rgba(30,100,220,.08),transparent 40%),radial-gradient(circle at 90% 85%,rgba(30,100,220,.06),transparent 42%),var(--shield-ui-bg)}.hero{max-width:960px;margin:0 auto}.demo-header{position:sticky;top:12px;z-index:10;backdrop-filter:blur(8px)}.demo-header__row{display:flex;align-items:center;justify-content:space-between;gap:var(--shield-space-3);flex-wrap:wrap}.demo-controls{display:flex;gap:var(--shield-space-2);flex-wrap:wrap}.card{box-shadow:0 12px 28px #12203814}.actions{display:flex;flex-wrap:wrap;gap:var(--shield-space-2)}.field{min-width:180px}.field select{width:100%}