@layer example-gallery{.example-site .header-inner{max-inline-size:1880px;padding-inline:clamp(20px,2.6vw,48px)}.example-site .site-footer{margin-block-start:28px}.examples-page{max-inline-size:1880px;margin-inline:auto;padding:36px clamp(20px,2.6vw,48px) 48px}.examples-layout{grid-template-columns:186px minmax(0,1fr);align-items:start;gap:clamp(28px,3vw,48px);display:grid}.examples-sidebar{max-block-size:calc(100dvh - var(--header-h) - 48px);scrollbar-width:thin;padding-block:6px 20px;padding-inline-end:2px;position:sticky;inset-block-start:calc(var(--header-h) + 28px);overflow-y:auto}.examples-rail-heading{color:var(--text-3);font-family:var(--mono);letter-spacing:.12em;margin-block-end:14px;padding-inline:10px;font-size:10px;font-weight:500;line-height:1.5;display:block}.examples-category-nav{gap:3px;display:grid}.examples-category-nav>a{color:var(--text-2);border:1px solid #0000;border-radius:7px;justify-content:space-between;align-items:center;gap:8px;min-block-size:41px;padding:8px 10px;font-size:12px;display:flex}.examples-category-nav>a:hover{background:var(--surface-2);color:var(--text)}.examples-category-nav>a[aria-current]{background:var(--surface-2);border-color:var(--line);color:var(--text);font-weight:600}.examples-category-nav>a>span:first-child{align-items:center;gap:11px;display:flex}.examples-category-nav svg{block-size:16px;color:var(--text-3);stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2px;flex:0 0 16px;inline-size:16px}.examples-category-nav>a[aria-current] svg{color:var(--accent-text)}.examples-nav-count{color:var(--text-3);font-family:var(--mono);font-size:10px;font-weight:400}.examples-source-filter{border-block-start:1px solid var(--line);margin-block-start:24px;padding-block-start:23px}.examples-source-filter .examples-rail-heading{font-family:var(--font);letter-spacing:0;margin-block-end:11px;font-size:11px}.examples-source-filter select{background:var(--surface);border:1px solid var(--line-strong);color:var(--text);border-radius:7px;min-block-size:41px;inline-size:100%;padding:8px 10px;font-size:12px}.examples-guide-note{border-block-start:1px solid var(--line);gap:9px;margin-block-start:16px;padding:18px 10px 0;display:grid}.examples-guide-symbol{color:var(--accent-text);font-family:var(--mono);font-size:26px;line-height:1}.examples-guide-note strong{font-size:12px;font-weight:500}.examples-guide-note>span:last-child{color:var(--text-3);font-size:10px;line-height:1.9}.examples-guide-note:hover strong{color:var(--accent-text)}.examples-collection{min-inline-size:0}.examples-intro{justify-content:space-between;align-items:center;gap:20px;margin-block-end:26px;padding-block-start:2px;display:flex}.examples-kicker{color:var(--text-3);font-family:var(--mono);letter-spacing:.09em;font-size:9px;font-weight:400;line-height:1.7}.examples-kicker>span{color:var(--accent-text);vertical-align:-1px;margin-inline-end:4px;font-size:14px;display:inline-block}.examples-intro h1{letter-spacing:-.055em;margin-block:8px 7px;font-size:clamp(24px,2.2vw,34px);font-weight:600;line-height:1.3}.examples-description{color:var(--text-2);max-inline-size:65ch;font-size:12px;line-height:1.7}.examples-edition{color:var(--text-3);font-family:var(--mono);letter-spacing:.12em;text-align:end;flex-shrink:0;font-size:8px;line-height:1.8}.examples-edition>span{font-size:25px;line-height:1.4;display:block}.examples-search-row{align-items:center;gap:12px;display:flex}.examples-search{background:var(--surface);border:1px solid var(--line-strong);border-radius:9px;flex:1;align-items:center;gap:12px;min-block-size:46px;min-inline-size:0;padding-inline:15px 5px;display:flex}.examples-search:focus-within{border-color:var(--accent-text);box-shadow:0 0 0 2px var(--accent-soft)}.examples-search>svg{color:var(--text-3);stroke:currentColor;stroke-width:1.6px;flex:0 0 17px;inline-size:17px}.examples-search input{color:var(--text);background:0 0;border:0;outline:none;flex:1;min-block-size:44px;min-inline-size:0;padding:0;font-size:12px}.examples-search input::placeholder{color:var(--text-3);opacity:1}.examples-search button{color:var(--text-2);background:0 0;border:0;border-radius:5px;flex-shrink:0;min-block-size:40px;padding:8px 10px;font-size:11px}.examples-search button:hover{background:var(--surface-2)}.examples-search button>span{color:var(--text-3);margin-inline-start:8px}.examples-motion{background:var(--surface);border:1px solid var(--line-strong);color:var(--text-2);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;gap:6px;min-block-size:44px;padding:9px 12px;font-size:10px;display:inline-flex}.examples-motion:hover{background:var(--surface-2);color:var(--text)}.examples-motion svg{stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6px;block-size:14px;inline-size:14px}.examples-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 20px;min-block-size:66px;padding-block:15px 13px;display:flex}.examples-toolbar>div{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.examples-toolbar h2{letter-spacing:-.01em;font-size:12px;font-weight:600}.examples-result-count{color:var(--text-3);font-size:10px}.examples-live{color:var(--text-3);font-family:var(--mono);letter-spacing:.06em;align-items:center;gap:6px;font-size:8px;display:flex}.examples-live>span,.example-status-dot{background:var(--teal);border-radius:50%;block-size:5px;inline-size:5px;display:inline-block}.examples-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px;padding:0;list-style:none;display:grid}.example-card{min-inline-size:0}.example-card-preview{background:var(--surface-2);border:1px solid var(--line);isolation:isolate;border-radius:11px;position:relative;overflow:hidden}.example-card-preview>.sg-demo{block-size:248px;min-block-size:248px;inline-size:100%}.example-expand{backdrop-filter:blur(10px);color:#fff;opacity:0;z-index:3;background:#17171bc9;border:1px solid #ffffff30;border-radius:7px;justify-content:center;align-items:center;block-size:40px;inline-size:40px;transition:opacity .16s,background .16s;display:flex;position:absolute;inset-block-start:10px;inset-inline-end:10px}.example-expand svg{stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.4px;block-size:17px;inline-size:17px}.example-card:hover .example-expand,.example-card:focus-within .example-expand{opacity:1}.example-expand:hover{background:#29292ee6}.example-expand:focus-visible{outline-offset:-4px;outline-color:#fff}.example-card-caption{padding:12px 3px 0}.example-card-title{justify-content:space-between;align-items:center;gap:10px;display:flex}.example-card-title h3{letter-spacing:-.015em;min-inline-size:0;font-size:13px;font-weight:600;line-height:1.4}.example-card-title a{padding-block:3px;display:inline-block}.example-card-title a:hover{color:var(--accent-text)}.example-category-label{border:1px solid var(--line);color:var(--text-3);border-radius:4px;flex-shrink:0;padding:2px 6px;font-size:8px;line-height:1.6}.example-card-subtitle{color:var(--text-2);margin-block-start:2px;font-size:10px;line-height:1.6}.example-card-meta{color:var(--text-2);justify-content:space-between;align-items:center;gap:10px;margin-block-start:9px;font-size:10px;display:flex}.example-interaction{align-items:center;gap:5px;min-block-size:40px;padding-inline:4px;font-size:10px;display:flex}.example-interaction:hover{color:var(--accent-text)}.example-interaction>span{font-size:11px}.examples-notice{background:var(--surface-2);color:var(--text-2);border-radius:8px;margin-block:0 20px;padding:14px 16px;font-size:12px}.examples-empty{border:1px dashed var(--line-strong);text-align:center;border-radius:12px;padding:70px 24px}.examples-empty>span{color:var(--text-3);font-size:45px}.examples-empty h3{margin-block:8px 10px;font-size:19px}.examples-empty p{color:var(--text-2);margin-block-end:22px;font-size:12px}.examples-pagination{flex-direction:column;align-items:center;gap:18px;margin-block:36px 42px;display:flex}.examples-more{background:var(--surface);border:1px solid var(--line-strong);color:var(--text);border-radius:7px;min-block-size:43px;min-inline-size:200px;padding:11px 20px;font-size:12px}.examples-more:hover{background:var(--surface-2)}.examples-pagination p{color:var(--text-3);text-align:center;font-size:10px}.example-detail{max-inline-size:1360px;margin-inline:auto;padding:0 clamp(20px,4vw,56px) 60px}.example-breadcrumbs{color:var(--text-3);flex-wrap:wrap;align-items:center;gap:10px;padding-block:25px;font-size:10px;display:flex}.example-breadcrumbs a{min-block-size:32px;padding-block:7px}.example-breadcrumbs a:hover{color:var(--text)}.example-detail-heading{flex-wrap:wrap;justify-content:space-between;align-items:end;gap:18px;margin-block:9px 30px;display:flex}.example-detail-heading h1{letter-spacing:-.055em;margin-block:9px 7px;font-size:clamp(32px,3.8vw,50px);font-weight:500}.example-detail-korean{color:var(--text-2);font-size:13px}.example-back{color:var(--text-2);align-items:center;gap:20px;min-block-size:40px;font-size:11px;display:flex}.example-back:hover{color:var(--accent-text)}.example-detail-layout{grid-template-columns:minmax(0,1fr) 268px;align-items:start;gap:32px;display:grid}.example-detail-primary{min-inline-size:0}.example-stage{border:1px solid var(--line-strong);border-radius:12px;overflow:hidden}.example-stage-toolbar{background:var(--surface);border-block-end:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;min-block-size:52px;padding-inline:17px 8px;display:flex}.example-stage-toolbar>span{color:var(--text-3);font-family:var(--mono);letter-spacing:.06em;align-items:center;gap:8px;font-size:9px;display:flex}.example-stage-toolbar .examples-motion{background:0 0;border:0;min-block-size:40px}.example-stage>.sg-demo{block-size:460px;min-block-size:380px;inline-size:100%}.example-interaction-note{color:var(--text-3);align-items:baseline;gap:9px;margin-block:15px 26px;font-size:11px;line-height:1.8;display:flex}.example-interaction-note>span{color:var(--accent-text);font-size:18px}.example-detail-aside{gap:24px;display:grid}.example-about h2{margin-block:7px 12px;font-size:16px}.example-about>p:last-of-type{color:var(--text-2);font-size:12px;line-height:1.9}.example-tags{flex-wrap:wrap;gap:6px;margin-block-start:16px;display:flex}.example-tags>span{background:var(--surface-2);border:1px solid var(--line);color:var(--text-2);border-radius:5px;padding:3px 8px;font-size:9px}.example-provenance{border-block:1px solid var(--line);padding-block:17px}.example-authorship{color:var(--text);align-items:center;gap:7px;margin-block-end:8px;font-size:11px;font-weight:500;display:flex}.example-authorship>span{color:var(--accent-text);font-size:16px}.example-provenance>p:last-child{color:var(--text-3);font-size:10px;line-height:1.9}.example-related-guide{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;gap:8px;padding:18px;display:grid}.example-related-guide strong{font-size:14px;font-weight:500}.example-related-guide>span:last-child{color:var(--text-2);font-size:10px}.example-code{background:var(--surface);border:1px solid var(--line-strong);border-radius:9px}.example-code summary{cursor:pointer;justify-content:space-between;align-items:center;gap:14px;min-block-size:57px;padding:16px 20px;list-style:none;display:flex}.example-code summary::-webkit-details-marker{display:none}.example-code summary>span:first-child{align-items:center;gap:10px;font-size:12px;display:flex}.example-code summary svg{block-size:17px;color:var(--text-3);stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.3px;inline-size:17px}.example-code-summary-note{color:var(--text-3);font-family:var(--mono);font-size:9px}.example-code-summary-note>span{margin-inline-start:10px}.example-code-intro{border-block-start:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px 4px;display:flex}.example-code-intro p{color:var(--text-2);flex:220px;font-size:11px}.example-code-intro code{font-family:var(--mono);font-size:10px}.example-copy{background:var(--surface-2);border:1px solid var(--line-strong);border-radius:6px;min-block-size:40px;padding:9px 12px;font-size:10px}.example-copy>span{margin-inline-start:9px}.example-copy-status{color:var(--accent-text);padding:10px 20px;font-size:11px}.example-copy-status:empty{padding-block:5px}.example-code pre{background:var(--code-bg);color:var(--code-text);font-family:var(--mono);tab-size:2;border-radius:0 0 8px 8px;max-block-size:480px;margin:0;padding:22px;font-size:11px;line-height:1.75;overflow:auto}.example-related{border-block-start:1px solid var(--line);margin-block-start:55px;padding-block-start:33px}.example-related-heading{justify-content:space-between;align-items:end;gap:20px;margin-block-end:23px;display:flex}.example-related-heading h2{letter-spacing:-.04em;margin-block-start:7px;font-size:22px;font-weight:500}.example-related-heading>a{color:var(--text-2);white-space:nowrap;min-block-size:40px;padding-block:10px;font-size:11px}@media (width>=1600px){.examples-collection>.examples-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=1199px){.examples-layout{grid-template-columns:172px minmax(0,1fr);gap:28px}.examples-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.example-related .examples-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.example-related .example-card-preview>.sg-demo{block-size:220px;min-block-size:220px}.examples-edition{display:none}.example-detail-layout{grid-template-columns:minmax(0,1fr) 235px;gap:24px}}@media (width<=900px){.examples-page{padding-block-start:25px}.examples-layout{grid-template-columns:minmax(0,1fr);gap:24px}.examples-sidebar{flex-wrap:wrap;gap:10px;max-block-size:none;padding:0;display:flex;position:static;overflow:visible}.examples-sidebar>.examples-rail-heading{display:none}.examples-category-nav{scrollbar-width:thin;gap:6px;inline-size:100%;padding:2px 0 5px;display:flex;overflow-x:auto}.examples-category-nav>a{background:var(--surface);border-color:var(--line);flex-shrink:0;gap:11px;min-block-size:40px;padding:8px 11px;font-size:11px}.examples-category-nav>a>span:first-child{gap:7px}.examples-nav-count{font-size:9px}.examples-source-filter{border:0;flex-wrap:wrap;flex:1;align-items:center;gap:8px 12px;margin:0;padding:0;display:flex}.examples-source-filter .examples-rail-heading{margin:0;padding:0}.examples-source-filter select{min-block-size:40px;inline-size:auto;max-inline-size:190px}.examples-guide-note{display:none}.examples-intro{margin-block-end:20px}.examples-intro h1{font-size:28px}.examples-grid{gap:26px 18px}.example-card-preview>.sg-demo{block-size:252px;min-block-size:252px}.example-detail-layout{grid-template-columns:minmax(0,1fr)}.example-detail-aside{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.example-about{grid-column:1/-1}.example-provenance{grid-column:1;align-self:start}.example-related-guide{grid-column:2}.example-related .examples-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.example-related .example-card:last-child{display:none}}@media (width<=599px){.examples-page{padding-block-start:18px}.examples-layout{gap:19px}.examples-category-nav{scrollbar-width:none;min-inline-size:calc(100% + 40px);margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}.examples-category-nav svg{flex-basis:14px;block-size:14px;inline-size:14px}.examples-category-nav>a{min-block-size:40px}.examples-source-filter .examples-rail-heading{font-size:10px}.examples-source-filter select{max-inline-size:154px;padding-inline:7px;font-size:10px}.examples-intro{margin-block-end:16px}.examples-intro h1{margin-block-start:6px;font-size:27px}.examples-kicker{font-size:8px}.examples-description{font-size:11px}.examples-search-row{align-items:stretch;gap:7px}.examples-search{gap:9px;min-block-size:44px;padding-inline:11px 3px}.examples-search input{font-size:11px}.examples-search button{min-block-size:40px;padding-inline:9px}.examples-search button>span{display:none}.examples-motion{gap:4px;min-block-size:44px;padding-inline:9px}.examples-search-row .examples-motion{inline-size:43px}.examples-search-row .examples-motion>span{clip-path:inset(50%);block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.examples-toolbar{min-block-size:60px}.examples-toolbar>div{gap:9px}.examples-live{font-size:7px}.examples-grid{grid-template-columns:minmax(0,1fr);gap:26px}.example-card-preview>.sg-demo{block-size:260px;min-block-size:260px}.example-card-title h3{font-size:14px}.example-card-subtitle{font-size:11px}.example-card-meta{margin-block-start:7px;font-size:10px}.example-expand{opacity:1;block-size:40px;inline-size:40px}.example-interaction{font-size:11px}.example-breadcrumbs{padding-block:16px}.example-detail-heading{margin-block:5px 23px}.example-detail-heading h1{font-size:37px}.example-back{display:none}.example-stage>.sg-demo{block-size:370px;min-block-size:370px}.example-stage-toolbar{min-block-size:49px;padding-inline-start:12px}.example-code summary{padding:14px}.example-code-summary-note{font-size:8px}.example-code-intro{padding-inline:15px}.example-code pre{padding:18px 14px;font-size:10px}.example-detail-aside{grid-template-columns:minmax(0,1fr)}.example-detail-aside>*{grid-area:auto/1}.example-about>p:last-of-type{font-size:13px}.example-provenance>p:last-child{font-size:11px}.example-related{margin-block-start:40px}.example-related-heading h2{font-size:20px}.example-related .examples-grid{grid-template-columns:minmax(0,1fr)}.example-related .example-card-preview>.sg-demo{block-size:260px;min-block-size:260px}}@media (hover:none){.example-expand{opacity:1}}@media (prefers-reduced-motion:reduce){.example-expand{transition:none}}}