/* Self-contained styles for the interactive examples. */
.ud-demos{color:#222;font-family:inherit}.ud-demos *{box-sizing:border-box}.ud-demos-note{margin:0 0 22px;color:#777;font-size:12px;line-height:1.6}.ud-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.ud-card{min-width:0;border:1px solid #e8e8e8;background:#fff}.ud-card-top{display:flex;justify-content:space-between;gap:12px;padding:20px 22px;color:#888;font-size:10px;letter-spacing:.09em}.ud-stage{min-height:245px;display:grid;place-items:center;padding:30px;background:#fafafa}.ud-panel{width:min(100%,300px);padding:24px;background:#fff;border:1px solid #ededed}.ud-label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:20px;font-size:13px;font-weight:500}.ud-label>span{font-size:9px;letter-spacing:.12em;color:#999}.ud-label output{font-size:12px;font-weight:400;color:#666}.ud-description{padding:22px}.ud-description h3{margin:0 0 9px;font-size:17px;font-weight:400;letter-spacing:-.02em}.ud-description p{margin:0;color:#777;font-size:12px;line-height:1.7}.ud-hint{color:#888;font-size:10px;margin:16px 0 0;text-align:center}.ud-demos button,.ud-demos input{font:inherit}.ud-demos button:focus-visible,.ud-demos input:focus-visible{outline:2px solid #444;outline-offset:3px}.ud-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ud-segment{position:relative;display:flex;padding:3px;background:#f0f0f0;touch-action:pan-y;user-select:none}.ud-segment button{position:relative;z-index:1;flex:1;border:0;background:transparent;padding:10px 0;color:#777;cursor:pointer;font-size:12px}.ud-segment button[aria-checked="true"]{color:#222}.ud-segment-indicator{position:absolute;inset:3px auto 3px 3px;width:calc((100% - 6px)/3);background:#fff;box-shadow:0 1px 3px #00000014;transition:transform .24s ease}.ud-segment.ud-dragging .ud-segment-indicator{transition:none}.ud-radios,.ud-checks{border:0;padding:0;margin:0}.ud-radios label,.ud-checks label{display:flex;align-items:center;gap:13px;min-height:46px;border-top:1px solid #eee;cursor:pointer;font-size:12px}.ud-radios label:first-of-type,.ud-checks label:first-of-type{border-top:0}.ud-radios input,.ud-checks input{accent-color:#222;width:16px;height:16px;margin:0;flex:none}.ud-radios b,.ud-row b{display:block;font-size:12px;font-weight:500}.ud-radios small,.ud-row small{display:block;color:#888;font-size:10px;margin-top:5px}.ud-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;border-top:1px solid #eee}.ud-row:first-of-type{border-top:0}.ud-switch{position:relative;display:inline-flex;cursor:pointer}.ud-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.ud-switch span{display:block;width:37px;height:21px;border-radius:99px;background:#ddd;transition:background .2s}.ud-switch span:after{content:"";display:block;width:15px;height:15px;margin:3px;border-radius:50%;background:#fff;transition:transform .2s}.ud-switch input:checked+span{background:#292929}.ud-switch input:checked+span:after{transform:translateX(16px)}.ud-switch input:focus-visible+span{outline:2px solid #444;outline-offset:3px}.ud-range{width:100%;accent-color:#222;cursor:pointer}.ud-range-labels{display:flex;justify-content:space-between;color:#888;font-size:10px;margin-top:8px}.ud-tabs{display:flex;border-bottom:1px solid #e8e8e8}.ud-tabs button{border:0;border-bottom:1px solid transparent;background:none;padding:0 15px 12px;color:#888;cursor:pointer;font-size:12px}.ud-tabs button:first-child{padding-left:0}.ud-tabs button[aria-selected="true"]{color:#222;border-bottom-color:#222}.ud-tab-panel{padding:20px 0 2px;color:#777;font-size:12px;line-height:1.6}.ud-tab-panel[hidden]{display:none}.ud-stepper{display:flex;justify-content:center;align-items:center;gap:0}.ud-stepper button,.ud-stepper output{width:42px;height:38px;display:grid;place-items:center;border:1px solid #e5e5e5;background:#fff;font-size:16px}.ud-stepper button{cursor:pointer}.ud-stepper button:hover{background:#f5f5f5}.ud-stepper button:disabled{color:#aaa;cursor:not-allowed}.ud-stepper output{border-inline:0;font-size:12px}
@media(max-width:680px){.ud-grid{grid-template-columns:1fr;gap:16px}.ud-stage{min-height:220px}.ud-card-top{font-size:9px}}@media(prefers-reduced-motion:reduce){.ud-demos *{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}
/* A single light surface per example, rather than nested frames. */
.ud-demos-note{font-size:11px;color:#777;margin-bottom:32px}
.ud-grid{column-gap:64px;row-gap:76px}
.ud-card{border:0;background:transparent}
.ud-card-top{border-top:1px solid #e4e4e4;padding:15px 0;color:#777;font-size:10px;letter-spacing:.1em}
.ud-stage{min-height:300px;padding:24px;background:transparent}
.ud-panel{width:min(100%,340px);min-height:152px;padding:30px 32px;border:1px solid #f2f2f2;border-radius:2px;background:#fff;box-shadow:0 1px 3px rgba(28,28,28,.025),0 12px 32px rgba(28,28,28,.045)}
.ud-description{padding:20px 0 0}
.ud-description h3{font-size:16px;font-weight:400;letter-spacing:.04em}
.ud-description p{font-size:12px;color:#777}
.ud-segment{border-radius:3px;background:#f1f1f1}
.ud-segment-indicator{border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.07)}
@media(max-width:680px){.ud-grid{row-gap:44px}.ud-stage{min-height:240px}.ud-panel{padding:25px 26px}}