/* Website concepts: full-page previews, local thumbnails and an accessible dialog. */
.examples-section{padding-top:50px;scroll-margin-top:30px}.examples-heading{align-items:end}.examples-heading>p{max-width:370px}.examples-toolbar{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:36px 0 30px}.example-filters{display:flex;flex-wrap:wrap;gap:8px}.example-filters button{background:transparent;border:1px solid #ffffff1c;border-radius:24px;padding:10px 17px;color:#aeb1bf;font-size:12px;transition:background .2s,color .2s,border-color .2s}.example-filters button:hover{border-color:#b5a7e88c;color:#fff}.example-filters button[aria-pressed=true]{background:#b6a0f1;border-color:#b6a0f1;color:#211831}.examples-count{white-space:nowrap;font-size:11px;color:#9295a3}.examples-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 26px}.example-card{min-width:0}.example-preview-link{display:block;position:relative;border:1px solid #ffffff21;border-radius:15px;overflow:hidden;background:#efefee;box-shadow:0 10px 28px #0002;isolation:isolate;transition:transform .3s,border-color .3s,box-shadow .3s}.example-preview-link:hover{transform:translateY(-5px);border-color:#b6a0f180;box-shadow:0 16px 36px #0005}.example-browser{height:26px;display:flex;align-items:center;justify-content:center;background:#f5f5f3;border-bottom:1px solid #dedfdd;color:#777772;font-size:8px;letter-spacing:.03em;position:relative}.example-browser-dots{display:flex;gap:3px;position:absolute;left:11px}.example-browser-dots i{width:4px;height:4px;border-radius:50%;background:#c7c8c5}.example-preview-link>img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top;transition:filter .3s}.example-open{position:absolute;bottom:18px;left:50%;transform:translate(-50%,10px);opacity:0;background:#1a1c25ed;color:#fff;padding:11px 19px;white-space:nowrap;border:1px solid #ffffff30;border-radius:30px;font-size:11px;transition:transform .3s,opacity .3s;box-shadow:0 4px 20px #0003}.example-preview-link:hover .example-open,.example-preview-link:focus-visible .example-open{opacity:1;transform:translate(-50%,0)}.example-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 2px 0}.example-caption h3{font-size:16px;letter-spacing:-.025em;font-weight:500;line-height:1.4}.example-caption p{font-size:11px;margin-top:5px;color:#9295a3}.example-caption>a{display:flex;align-items:center;justify-content:center;border:1px solid #ffffff24;border-radius:50%;width:34px;height:34px;flex-shrink:0;color:#c6b4f5;transition:background .2s}.example-caption>a:hover{background:#b6a0f126}.examples-note{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:27px 0 0;margin-top:36px;border-top:1px solid #ffffff16}.examples-note p{font-size:11px;max-width:530px;line-height:1.8;color:#9295a3}.examples-note .text-link{font-size:12px;white-space:nowrap}.examples-direct-link{display:inline-flex;margin:22px 0 0;font-size:12px;color:#c6b4f5;gap:12px}.examples-direct-link:hover{color:#eee6ff}
.example-dialog{position:fixed;width:min(1180px,calc(100% - 48px));height:min(940px,calc(100dvh - 48px));max-width:none;max-height:none;padding:0;margin:auto;border:1px solid #ffffff2a;border-radius:18px;background:#191c23;color:#f3f1f7;overflow:hidden;box-shadow:0 25px 100px #0009}.example-dialog[open]{display:flex;flex-direction:column}.example-dialog::backdrop{background:#080a10c9;backdrop-filter:blur(9px)}body.example-opened{overflow:hidden}.example-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:19px 24px;border-bottom:1px solid #ffffff18;flex-shrink:0}.example-dialog-header h2{font-size:17px;font-weight:500;letter-spacing:-.025em;line-height:1.4}.example-dialog-header p{font-size:10px;color:#9e9cac;margin-top:3px}.example-dialog-tools{display:flex;align-items:center;gap:20px}.example-device-switch{display:flex;gap:3px;padding:4px;border:1px solid #ffffff18;border-radius:9px}.example-device-switch button{padding:7px 12px;font-size:11px;border-radius:5px;background:transparent;color:#a9a6b5}.example-device-switch button[aria-pressed=true]{background:#3b334e;color:#e1d4ff}.example-close{width:36px;height:36px;font-size:24px;line-height:1;border-radius:50%;background:#ffffff0a;color:#dedbe8}.example-close:hover{background:#ffffff20}.example-dialog-stage{flex:1;min-height:0;display:flex;justify-content:center;padding:18px;background:repeating-linear-gradient(135deg,#ffffff02 0,#ffffff02 1px,transparent 1px,transparent 10px);position:relative}.example-dialog-stage iframe{height:100%;width:100%;max-width:100%;background:#eee;border:0;border-radius:6px;box-shadow:0 2px 20px #0003}.example-dialog-stage.is-mobile iframe{width:390px;border-radius:18px}.example-dialog-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 24px;flex-shrink:0;border-top:1px solid #ffffff18}.example-dialog-footer>a:first-child{font-size:11px;color:#b9b5c5}.example-dialog-footer .button{font-size:12px;min-height:40px;padding:10px 17px}
@media(hover:none){.example-open{opacity:1;transform:translate(-50%,0);bottom:14px}.example-preview-link:hover{transform:none}}
@media(min-width:801px) and (max-width:1100px){.desktop-nav{gap:15px}.nav-wrap{gap:18px}.nav-wrap .brand{font-size:20px}.desktop-nav a{font-size:11px}.nav-cta{padding-inline:13px;font-size:11px}}
@media(max-width:900px){.examples-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.examples-toolbar{align-items:flex-start}.example-filters button{padding:9px 13px;font-size:11px}.examples-count{padding-top:10px}.example-caption h3{font-size:15px}}
@media(max-width:600px){.examples-section{padding-top:20px}.examples-heading>p{max-width:none}.examples-toolbar{margin-top:28px;gap:14px;flex-direction:column}.example-filters{gap:7px}.example-filters button{padding:9px 13px}.examples-count{padding-top:0}.examples-grid{gap:29px 16px}.example-caption h3{font-size:14px}.example-caption p{font-size:10px}.example-caption>a{width:30px;height:30px}.example-caption{padding-top:14px;gap:8px}.example-preview-link{border-radius:12px}.examples-note{flex-direction:column;align-items:flex-start;gap:18px;margin-top:28px;padding-top:23px}.example-dialog{width:calc(100% - 16px);height:calc(100dvh - 16px);border-radius:12px}.example-dialog-header{padding:14px;gap:10px}.example-dialog-header h2{font-size:14px}.example-dialog-tools{gap:8px}.example-device-switch{display:none}.example-dialog-stage{padding:8px}.example-dialog-footer{padding:12px;gap:14px;flex-wrap:wrap}.example-dialog-footer .button{font-size:11px;min-height:42px}.example-dialog-footer>a:first-child{font-size:10px}.example-open{font-size:10px;padding:9px 13px}}
@media(max-width:480px){.examples-grid{grid-template-columns:1fr;gap:32px}.example-preview-link>img{aspect-ratio:4/4.5}.example-caption h3{font-size:16px}.example-caption p{font-size:11px}.example-browser{height:27px}.example-open{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.example-preview-link,.example-preview-link>img,.example-open{transition:none}.example-preview-link:hover{transform:none}}