.sd-ui-page{--ui-cyan: #3f72ff;--ui-violet: #7546e8;--ui-mint: #54d7bc}.sd-ui-opening-strip{position:relative;display:grid;min-height:430px;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:12px;overflow:visible;margin-top:38px;padding:24px;border:1px solid color-mix(in srgb,var(--guide-blue) 18%,var(--guide-border));border-radius:24px;background:linear-gradient(rgb(255 255 255 / 10%) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 10%) 1px,transparent 1px),linear-gradient(145deg,#284bc7,#6648d9 52%,#38b9a3);background-size:26px 26px,26px 26px,auto}.sd-ui-opening-strip>a{position:relative;z-index:1;display:block;min-width:0;transform-origin:center bottom;transition:translate .18s ease,scale .18s ease,filter .18s ease,opacity .18s ease,box-shadow .18s ease}.sd-ui-opening-strip>a:nth-child(1){translate:0 8px;rotate:-2deg}.sd-ui-opening-strip>a:nth-child(2){translate:0 -5px;rotate:1deg}.sd-ui-opening-strip>a:nth-child(3){translate:0 12px;rotate:-1deg}.sd-ui-opening-strip>a:nth-child(4){translate:0 2px;rotate:2deg}.sd-ui-opening-strip>a:hover,.sd-ui-opening-strip>a:focus-visible{z-index:30;translate:0 -8px;scale:1.07;outline:none;box-shadow:0 28px 54px #0c0f3357}.sd-ui-opening-strip:has(>a:hover)>a:not(:hover),.sd-ui-opening-strip:has(>a:focus-visible)>a:not(:focus-visible){opacity:.74;filter:saturate(.76)}.sd-ui-opening-strip img,.sd-ui-component-strip img,.sd-ui-screen-pair img,.sd-ui-single-example>a img,.sd-ui-comparison-grid article>a img,.sd-ui-state-grid article>a img,.sd-ui-pattern-grid article>a img,.sd-ui-process-list>li>a img{display:block;width:100%;height:auto;border:1px solid rgb(255 255 255 / 58%);border-radius:5px;background:#fff;box-shadow:0 18px 34px #13163b3d}.sd-ui-method-note{padding:14px 16px;border-left:3px solid var(--guide-blue);margin-top:22px;color:var(--guide-muted);font-size:13px;line-height:1.6;background:var(--guide-surface-soft)}.sd-ui-method-note strong{color:var(--guide-ink)}.sd-ui-definition-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:28px}.sd-ui-definition-grid>div,.sd-ui-rule-grid>div,.sd-ui-checklist-grid>div{padding:18px;border:1px solid var(--guide-border);border-radius:16px;background:var(--guide-surface-soft)}.sd-ui-definition-grid span,.sd-ui-rule-grid span,.sd-ui-checklist-grid span,.sd-ui-feature-copy>span,.sd-ui-comparison-grid article>div>span,.sd-ui-state-study>div>span,.sd-ui-state-grid article>div>span{color:var(--guide-blue);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.sd-ui-definition-grid h3{margin:14px 0 0;color:var(--guide-ink);font-size:18px}.sd-ui-definition-grid p,.sd-ui-rule-grid p{margin:8px 0 0;color:var(--guide-muted);font-size:13px;line-height:1.52}.sd-ui-component-inventory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:34px}.sd-ui-component-inventory article{padding:20px;border:1px solid var(--guide-border);border-radius:16px;background:var(--guide-surface-soft)}.sd-ui-component-inventory span,.sd-ui-component-system span{color:var(--guide-blue);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.sd-ui-component-inventory h3,.sd-ui-component-system h3{margin:12px 0 0;color:var(--guide-ink);font-family:Grifter,Rethink Sans,sans-serif;font-size:20px;line-height:1.15;letter-spacing:.006em}.sd-ui-component-inventory p,.sd-ui-component-system p{margin:9px 0 0;color:var(--guide-muted);font-size:13px;line-height:1.58}.sd-ui-component-strip{display:grid;min-height:405px;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:12px;margin-top:20px;padding:22px 22px 32px;border-radius:24px;background:linear-gradient(rgb(255 255 255 / 9%) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 9%) 1px,transparent 1px),linear-gradient(145deg,#3158ce,#7546e8 58%,#4cc9b1);background-size:24px 24px,24px 24px,auto}.sd-ui-component-strip figure{min-width:0;margin:0}.sd-ui-component-strip figure:nth-child(2n){translate:0 16px}.sd-ui-component-strip figure>a{position:relative;z-index:1;display:block;transition:translate .18s ease,scale .18s ease,filter .18s ease,opacity .18s ease,box-shadow .18s ease}.sd-ui-component-strip figure>a:hover,.sd-ui-component-strip figure>a:focus-visible{z-index:30;translate:0 -8px;scale:1.06;outline:none;box-shadow:0 24px 48px #12143747}.sd-ui-component-strip:has(figure>a:hover) figure>a:not(:hover),.sd-ui-component-strip:has(figure>a:focus-visible) figure>a:not(:focus-visible){opacity:.74;filter:saturate(.78)}.sd-ui-component-strip figcaption{margin-top:9px;color:#ffffffe0;font-size:11px;text-align:center}.sd-ui-component-system{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px}.sd-ui-component-system>div{padding:22px;border:1px solid var(--guide-border);border-radius:18px;background:var(--guide-surface-soft)}.sd-ui-feature-row{display:grid;grid-template-columns:minmax(0,.92fr) minmax(380px,1.08fr);align-items:center;gap:42px;margin-top:42px;padding-top:36px;border-top:1px solid var(--guide-border)}.sd-ui-feature-row--reverse .sd-ui-feature-copy{order:2}.sd-ui-feature-row--reverse .sd-ui-screen-pair{order:1}.sd-ui-feature-copy h3,.sd-ui-single-example h3,.sd-ui-comparison-grid h3,.sd-ui-state-study h3,.sd-ui-state-grid h3{margin:12px 0 0;color:var(--guide-ink);font-family:Grifter,Rethink Sans,sans-serif;font-size:clamp(25px,3vw,34px);line-height:1.08;letter-spacing:.004em}.sd-ui-feature-copy p,.sd-ui-single-example p,.sd-ui-comparison-grid article>div>p,.sd-ui-state-study>div>p,.sd-ui-state-grid article>div>p{margin:15px 0 0;color:var(--guide-muted);font-size:15px;line-height:1.68}.sd-ui-feature-copy .sd-guide-text-link,.sd-ui-comparison-grid .sd-guide-text-link,.sd-ui-state-study .sd-guide-text-link{margin-top:20px}.sd-ui-screen-pair{position:relative;display:grid;min-height:490px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px;overflow:visible;padding:22px 22px 34px;border-radius:24px;background:linear-gradient(rgb(255 255 255 / 9%) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 9%) 1px,transparent 1px),linear-gradient(145deg,#3158ce,#7546e8 58%,#4cc9b1);background-size:24px 24px,24px 24px,auto}.sd-ui-screen-pair figure{min-width:0;margin:0}.sd-ui-screen-pair figure:nth-child(2){translate:0 22px}.sd-ui-screen-pair figure>a,.sd-ui-comparison-grid article>a,.sd-ui-state-grid article>a,.sd-ui-pattern-grid article>a,.sd-ui-process-list>li>a{position:relative;z-index:1;display:block;transition:translate .18s ease,scale .18s ease,filter .18s ease,opacity .18s ease,box-shadow .18s ease}.sd-ui-screen-pair figure>a:hover,.sd-ui-screen-pair figure>a:focus-visible,.sd-ui-comparison-grid article>a:hover,.sd-ui-comparison-grid article>a:focus-visible,.sd-ui-state-grid article>a:hover,.sd-ui-state-grid article>a:focus-visible,.sd-ui-pattern-grid article>a:hover,.sd-ui-pattern-grid article>a:focus-visible,.sd-ui-process-list>li>a:hover,.sd-ui-process-list>li>a:focus-visible{z-index:30;translate:0 -8px;scale:1.06;outline:none;box-shadow:0 24px 48px #12143747}.sd-ui-screen-pair:has(figure>a:hover) figure>a:not(:hover),.sd-ui-screen-pair:has(figure>a:focus-visible) figure>a:not(:focus-visible){opacity:.74;filter:saturate(.78)}.sd-ui-screen-pair figcaption{margin-top:9px;font-size:11px;text-align:center}.sd-ui-screen-pair figcaption a{color:#ffffffe0;text-decoration:none}.sd-ui-single-example{display:grid;grid-template-columns:240px minmax(0,1fr);align-items:center;gap:40px;margin-top:36px;padding:24px;border:1px solid var(--guide-border);border-radius:22px;background:var(--guide-surface-soft)}.sd-ui-single-example>a{display:block}.sd-ui-single-example>div>a:last-child,.sd-ui-comparison-grid article>div>a:last-child,.sd-ui-state-grid article>div>a:last-child{display:inline-flex;margin-top:18px;color:var(--guide-blue);font-size:13px;font-weight:650;text-decoration:none}.sd-ui-comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:38px}.sd-ui-comparison-grid article{display:grid;grid-template-columns:170px minmax(0,1fr);align-items:center;gap:24px;padding:20px;border:1px solid var(--guide-border);border-radius:22px;background:var(--guide-surface-soft)}.sd-ui-comparison-grid--compact article{grid-template-columns:155px minmax(0,1fr)}.sd-ui-comparison-grid h3{font-size:24px}.sd-ui-state-study{display:grid;grid-template-columns:minmax(380px,1.05fr) minmax(0,.95fr);align-items:center;gap:42px;margin-top:40px}.sd-ui-state-study ul{display:grid;gap:8px;padding:0;margin:20px 0 0;color:var(--guide-ink);font-size:14px;line-height:1.55;list-style:none}.sd-ui-state-study li{position:relative;padding-left:18px}.sd-ui-state-study li:before{position:absolute;top:.62em;left:0;width:6px;height:6px;border-radius:99px;background:var(--guide-blue);content:""}.sd-ui-rule-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:32px}.sd-ui-state-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:38px}.sd-ui-state-grid article{padding:16px;border:1px solid var(--guide-border);border-radius:20px;background:var(--guide-surface-soft)}.sd-ui-state-grid article>a{width:100%}.sd-ui-state-grid article>div{padding:20px 4px 4px}.sd-ui-state-grid h3{font-size:23px}.sd-ui-pattern-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:36px}.sd-ui-pattern-grid article{display:grid;min-height:236px;grid-template-columns:102px minmax(0,1fr);align-items:center;gap:20px;padding:18px;border:1px solid var(--guide-border);border-radius:20px;background:var(--guide-surface-soft)}.sd-ui-pattern-grid article>a{width:102px}.sd-ui-pattern-grid h3{margin:0;color:var(--guide-ink);font-size:18px}.sd-ui-pattern-grid p{margin:8px 0 0;color:var(--guide-muted);font-size:13px;line-height:1.55}.sd-ui-pattern-grid article>div>a{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--guide-blue);font-size:12px;font-weight:650;text-decoration:none}.sd-ui-process-list{display:grid;gap:12px;padding:0;margin:38px 0 0;list-style:none}.sd-ui-process-list>li{display:grid;grid-template-columns:126px minmax(0,1fr);align-items:center;gap:28px;padding:20px;border:1px solid var(--guide-border);border-radius:20px;background:var(--guide-surface-soft)}.sd-ui-process-list>li>a{width:126px}.sd-ui-process-list span{color:var(--guide-blue);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:700;letter-spacing:.08em}.sd-ui-process-list h3{margin:10px 0 0;color:var(--guide-ink);font-size:22px}.sd-ui-process-list p{margin:9px 0 0;color:var(--guide-muted);font-size:14px;line-height:1.6}.sd-ui-process-list strong{display:block;margin-top:10px;color:var(--guide-ink);font-size:13px;line-height:1.5}.sd-ui-checklist-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:34px}.sd-ui-checklist-grid>div{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px}.sd-ui-checklist-grid p{margin:0;color:var(--guide-ink);font-size:14px;line-height:1.52}html[data-theme=dark] .sd-ui-definition-grid>div,html[data-theme=dark] .sd-ui-component-inventory article,html[data-theme=dark] .sd-ui-component-system>div,html[data-theme=dark] .sd-ui-single-example,html[data-theme=dark] .sd-ui-comparison-grid article,html[data-theme=dark] .sd-ui-rule-grid>div,html[data-theme=dark] .sd-ui-state-grid article,html[data-theme=dark] .sd-ui-pattern-grid article,html[data-theme=dark] .sd-ui-process-list>li,html[data-theme=dark] .sd-ui-checklist-grid>div{background:color-mix(in srgb,var(--guide-surface-soft) 88%,transparent)}@media(max-width:920px){.sd-ui-feature-row,.sd-ui-state-study{grid-template-columns:1fr}.sd-ui-feature-row--reverse .sd-ui-feature-copy,.sd-ui-feature-row--reverse .sd-ui-screen-pair{order:initial}.sd-ui-comparison-grid,.sd-ui-component-inventory,.sd-ui-component-system,.sd-ui-state-grid,.sd-ui-pattern-grid{grid-template-columns:1fr}}@media(max-width:760px){.sd-ui-opening-strip{min-height:660px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;padding:18px}.sd-ui-component-strip{min-height:620px;grid-template-columns:repeat(2,minmax(0,1fr))}.sd-ui-definition-grid,.sd-ui-rule-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sd-ui-single-example{grid-template-columns:150px minmax(0,1fr);gap:24px}.sd-ui-comparison-grid article,.sd-ui-comparison-grid--compact article{grid-template-columns:145px minmax(0,1fr)}}@media(max-width:520px){.sd-ui-opening-strip{min-height:530px;gap:7px;padding:14px}.sd-ui-definition-grid,.sd-ui-component-inventory,.sd-ui-component-system,.sd-ui-rule-grid,.sd-ui-checklist-grid{grid-template-columns:1fr}.sd-ui-screen-pair{min-height:390px;gap:7px;padding:14px 14px 30px}.sd-ui-component-strip{min-height:520px;gap:7px;padding:14px 14px 28px}.sd-ui-single-example,.sd-ui-comparison-grid article,.sd-ui-comparison-grid--compact article{grid-template-columns:1fr}.sd-ui-single-example>a,.sd-ui-comparison-grid article>a{width:min(190px,68%);margin-inline:auto}.sd-ui-state-grid article{display:grid;grid-template-columns:108px minmax(0,1fr);align-items:center;gap:16px}.sd-ui-state-grid article>div{padding:0}.sd-ui-pattern-grid article{min-height:0;grid-template-columns:82px minmax(0,1fr);gap:16px;padding:15px}.sd-ui-pattern-grid article>a{width:82px}.sd-ui-process-list>li{grid-template-columns:82px minmax(0,1fr);align-items:start;gap:16px;padding:16px}.sd-ui-process-list>li>a{width:82px}}@media(prefers-reduced-motion:reduce){.sd-ui-opening-strip>a:hover,.sd-ui-opening-strip>a:focus-visible,.sd-ui-component-strip figure>a:hover,.sd-ui-component-strip figure>a:focus-visible,.sd-ui-screen-pair figure>a:hover,.sd-ui-screen-pair figure>a:focus-visible,.sd-ui-comparison-grid article>a:hover,.sd-ui-comparison-grid article>a:focus-visible,.sd-ui-state-grid article>a:hover,.sd-ui-state-grid article>a:focus-visible,.sd-ui-pattern-grid article>a:hover,.sd-ui-pattern-grid article>a:focus-visible,.sd-ui-process-list>li>a:hover,.sd-ui-process-list>li>a:focus-visible{translate:0 0;scale:1}}