*{box-sizing:border-box}html{background:#f4f7fa}body{margin:0;color:var(--vr-ink);background:var(--vr-canvas);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,select,textarea{font:inherit}button{padding:.58rem .85rem;border:1px solid #bdcbd7;border-radius:7px;color:#264057;background:#fff;cursor:pointer;font-size:.8rem;font-weight:720}button:hover{border-color:#82aaa6;background:#f1f8f7}button.primary{color:#fff;border-color:#08736a;background:#08736a}button.primary:hover{background:#075f59}a{color:#08736a}code{padding:.15rem .35rem;border-radius:4px;background:#edf2f5;font-size:.88em}.showcase-page{max-width:1320px;margin:0 auto;padding:clamp(2rem,5vw,4rem)}.showcase-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,.8fr);align-items:start;gap:1rem}.form-card,.notes-card,.form-section,.metric-grid{border:1px solid var(--vr-line);border-radius:var(--vr-radius);background:#fff;box-shadow:var(--vr-shadow)}.form-card{padding:1.4rem}.notes-card{position:sticky;top:1rem;padding:1.4rem}.notes-card h2{margin:0 0 .7rem}.notes-card li{margin:.55rem 0;color:#52657a}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.form-field{display:grid;align-content:start;gap:.35rem;min-width:0}.form-field>label,.checkbox-field>label{color:#314960;font-size:.78rem;font-weight:760}.form-field input,.form-field select,.form-field textarea{width:100%;min-height:42px;padding:.62rem .7rem;border:1px solid #b9c7d3;border-radius:7px;color:#17273c;background:#fff}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:3px solid rgba(8,115,106,.18);border-color:#08736a}.form-field.invalid input,.form-field.invalid select,.form-field.invalid textarea,.checkbox-field.invalid,.radio-field.invalid{border-color:#c43d4d}.validation-message{min-height:1.1rem;color:#a32435;font-size:.73rem}.validation-message p{margin:0 0 .2rem}.checkbox-field{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:.55rem;margin:1rem 0;padding:.75rem;border:1px solid transparent;border-radius:8px}.checkbox-field input{width:1rem;height:1rem;margin-top:.1rem}.checkbox-field .validation-message{grid-column:2}.radio-field{display:grid;align-content:start;gap:.45rem;min-width:0;margin:0;padding:.75rem;border:1px solid #d6e1e8;border-radius:8px}.radio-field legend{padding:0 .25rem;color:#314960;font-size:.78rem;font-weight:760}.radio-field__options{display:grid;gap:.35rem}.radio-field__options label{display:inline-flex;align-items:center;gap:.4rem;color:#344d65;font-size:.78rem}.radio-field input{width:1rem;height:1rem}.form-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.2rem}.form-status{margin:1rem 0 0;color:#40566d;font-size:.82rem;font-weight:680}.validation-summary{margin:0 0 1rem;padding:1rem 1.2rem;border:1px solid #df9aa3;border-left:4px solid #c43d4d;border-radius:8px;background:#fff5f6}.validation-summary h2{margin:0 0 .5rem;font-size:1rem}.validation-summary ul{margin:0;padding-left:1.2rem}.validation-summary li{margin:.25rem 0;font-size:.78rem}.form-section{margin:1rem 0;padding:1.35rem}.form-section>header{display:flex;justify-content:space-between;align-items:start;gap:1rem;margin-bottom:1rem}.form-section h2{margin:0;font-size:1.2rem}.group-status{display:inline-flex;margin-top:.4rem;padding:.22rem .52rem;border-radius:999px;color:#52657a;background:#edf2f5;font-size:.67rem;font-weight:760}.group-status.valid{color:#0c6748;background:#dff4e9}.group-status.invalid{color:#a32435;background:#fde6e9}.repeatable-card{margin:1rem 0;padding:1rem;border:1px solid #dce4ea;border-radius:9px}.repeatable-card legend{padding:0 .4rem;color:#3b5269;font-size:.76rem;font-weight:800}.repeatable-card>button{margin-top:.8rem}.docs-callout{margin:1.2rem 0;padding:.9rem 1rem;border-radius:8px;color:#4d6278;background:#eaf3f2;font-size:.82rem}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden;background:#dbe3eb}.metric-grid div{padding:1rem;background:#fff}.metric-grid span,.metric-grid strong{display:block}.metric-grid span{color:#52657a;font-size:.66rem;font-weight:780;text-transform:uppercase;letter-spacing:.06em}.metric-grid strong{margin-top:.25rem;font-size:1.25rem}.performance-config-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.performance-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:.75rem}.performance-fields .validation-message{min-height:0}.compact-summary{max-height:280px;overflow:auto}.vr-showcase-home__patterns a{display:inline-block;margin-top:.55rem;font-size:.78rem;font-weight:760;text-decoration:none}.react-state-nav{gap:.22rem}.vr-showcase-nav__subgroup.active>.state-strategy-link{color:#fff;background:#0d8f8240}.state-strategy-link{min-height:34px;padding:.48rem .65rem;font-size:.76rem}.state-page-links{margin:.12rem 0 .35rem .55rem;padding-left:.45rem}.state-page-links.vr-showcase-nav__flyout-menu{margin:0;padding:.45rem;border-left:0}.state-page-links .vr-showcase-nav__link{min-height:32px;padding:.42rem .62rem;font-size:.72rem}.state-page-heading{display:flex;justify-content:space-between;align-items:start;gap:2rem}.state-page-heading>div{max-width:850px}.docs-button{display:inline-flex;flex:0 0 auto;padding:.62rem .82rem;border:1px solid #87b7b1;border-radius:8px;color:#076c64;background:#edf8f6;font-size:.76rem;font-weight:780;text-decoration:none}.state-showcase-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}.state-showcase-tabs a{border:1px solid #cbd5e1;border-radius:999px;color:#1e3a8a;background:#fff;font-size:.82rem;font-weight:760;padding:.55rem .9rem;text-decoration:none}.state-showcase-tabs a:hover{border-color:#82aaa6;background:#f1f8f7}.state-showcase-tabs a.active{border-color:#08736a;color:#fff;background:#08736a}.state-showcase-runtime{margin:0 0 1rem;padding:1rem 1.2rem;border:1px solid var(--vr-line);border-radius:var(--vr-radius);background:#fff;box-shadow:var(--vr-shadow)}.state-showcase-runtime__body{display:flex;justify-content:space-between;align-items:center;gap:1rem}.state-showcase-runtime p{margin:.3rem 0 0;color:#52657a;font-size:.86rem}.state-showcase-runtime .state-readout{justify-content:flex-end;margin:0}.state-readout{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 1rem}.state-readout span{padding:.42rem .65rem;border:1px solid #d6e1e8;border-radius:999px;color:#52657a;background:#fff;font-size:.7rem;font-weight:700}.state-readout strong{color:#08736a}.state-home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.primitive-list{display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0}.state-example-card{margin-top:1rem}@media(max-width:1000px){.performance-config-grid,.performance-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.showcase-page{padding:2rem 1.2rem 3rem}.showcase-grid,.field-grid,.performance-config-grid,.performance-fields,.state-home-grid{grid-template-columns:1fr}.notes-card{position:static}.form-section>header,.state-page-heading,.state-showcase-runtime__body{align-items:stretch;flex-direction:column}.docs-button{align-self:start}.state-showcase-tabs a{flex:1 1 100%}.state-showcase-runtime .state-readout{justify-content:flex-start}.state-page-links.vr-showcase-nav__flyout-menu{margin:.12rem 0 .35rem .55rem;padding-left:.45rem;border-left:1px solid rgba(255,255,255,.12)}}