*{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-page-heading{display:flex;justify-content:space-between;align-items:start;gap:2rem;margin-bottom:1rem}.showcase-page-heading h1{margin:0}.showcase-page-heading .lead{margin:.55rem 0 0;color:#52657a}.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}.required-marker{color:#c43d4d;margin-left:.15rem;font-weight:800}.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}.summary-error-link{display:inline;padding:0;border:0;border-radius:0;color:#08736a;background:transparent;font:inherit;font-size:inherit;font-weight:680;text-align:left;text-decoration:underline;cursor:pointer}.summary-error-link:hover{color:#075f59;background:transparent;border-color:transparent}.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}@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{grid-template-columns:1fr}.notes-card{position:static}.form-section>header,.showcase-page-heading{align-items:stretch;flex-direction:column}}