*,*:before,*:after{box-sizing:border-box}body{font-family:system-ui,-apple-system,sans-serif;margin:0;padding:2rem;background:#f5f5f5;color:#1a1a1a}h1{text-align:center;margin-bottom:1rem}.tabs{display:flex;justify-content:center;gap:.5rem;margin-bottom:2rem}.tab-btn{padding:.5rem 1.5rem;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer;font:inherit;font-weight:500}.tab-btn.active{background:#1a1a1a;color:#fff;border-color:#1a1a1a}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:2rem;max-width:1200px;margin:0 auto}.demo-form{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 1px 3px #0000001f}.demo-form h2{margin-top:0}.demo-form .item{margin-bottom:1rem}.demo-form .item.disabled{opacity:.4;pointer-events:none}.demo-form label{display:block;font-weight:500;margin-bottom:.25rem}.demo-form input,.demo-form textarea{width:100%;padding:.5rem;border:1px solid #ccc;border-radius:4px;font:inherit}.demo-form input[type=checkbox]{width:auto}.demo-form input[readonly]{background:#f0f0f0;color:#555}.demo-form fieldset{border:1px solid #ddd;border-radius:4px;margin-bottom:1rem}.demo-form legend{font-weight:600}.demo-form .display-text{color:#555;font-style:italic}.demo-form .option{margin-bottom:.25rem}.demo-form .option.option-disabled{opacity:.4}.demo-form .option label{display:inline;font-weight:400}.demo-form pre{background:#1e1e1e;color:#d4d4d4;padding:1rem;border-radius:4px;overflow-x:auto;font-size:.8rem;max-height:300px}.demo-form .repeating-group{margin-bottom:1.5rem}.demo-form .repeating-group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.demo-form .repeating-group-header h3{margin:0}.demo-form .group-instance{position:relative}.demo-form .group-instance-header{display:flex;align-items:center;justify-content:space-between}.demo-form .btn{border:none;border-radius:4px;padding:.35rem .75rem;cursor:pointer;font:inherit;font-size:.85rem}.demo-form .btn-add{background:#e8f5e9;color:#2e7d32}.demo-form .btn-add:hover{background:#c8e6c9}.demo-form .btn-remove{background:#ffebee;color:#c62828}.demo-form .btn-remove:hover{background:#ffcdd2}.demo-form .btn-remove-sm{background:#ffebee;color:#c62828;padding:.35rem .5rem;font-size:.8rem;border:none;border-radius:4px;cursor:pointer;flex-shrink:0}.demo-form .btn-add-sm{background:#e8f5e9;color:#2e7d32;padding:.35rem .75rem;font-size:.8rem;border:none;border-radius:4px;cursor:pointer}.demo-form .answer-entry{border:1px solid #eee;border-radius:4px;padding:.75rem;margin-bottom:.5rem;background:#fafafa}.demo-form .answer-entry-value{display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem}.demo-form .answer-entry-value input{flex:1}.demo-form .answer-entry-children{padding-left:.5rem}.demo-form .repeating-answer-row{display:flex;gap:.5rem;margin-bottom:.5rem;align-items:center}.demo-form .repeating-answer-row input{flex:1}.demo-form .empty-hint{color:#999;font-style:italic;font-size:.9rem;margin:.5rem 0}
