@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/inter-cyrillic-ext-400-normal-BQZuk6qB.woff2) format("woff2"),url(/assets/inter-cyrillic-ext-400-normal-DQukG94-.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/inter-cyrillic-400-normal-obahsSVq.woff2) format("woff2"),url(/assets/inter-cyrillic-400-normal-HOLc17fK.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/inter-greek-ext-400-normal-DGGRlc-M.woff2) format("woff2"),url(/assets/inter-greek-ext-400-normal-KugGGMne.woff) format("woff");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/inter-greek-400-normal-B4URO6DV.woff2) format("woff2"),url(/assets/inter-greek-400-normal-q2sYcFCs.woff) format("woff");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/inter-vietnamese-400-normal-DMkecbls.woff2) format("woff2"),url(/assets/inter-vietnamese-400-normal-Bbgyi5SW.woff) format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/inter-latin-ext-400-normal-C1nco2VV.woff2) format("woff2"),url(/assets/inter-latin-ext-400-normal-77YHD8bZ.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/inter-latin-400-normal-C38fXH4l.woff2) format("woff2"),url(/assets/inter-latin-400-normal-CyCys3Eg.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/inter-cyrillic-ext-500-normal-B0yAr1jD.woff2) format("woff2"),url(/assets/inter-cyrillic-ext-500-normal-BmqWE9Dz.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/inter-cyrillic-500-normal-BasfLYem.woff2) format("woff2"),url(/assets/inter-cyrillic-500-normal-CxZf_p3X.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/inter-greek-ext-500-normal-C4iEst2y.woff2) format("woff2"),url(/assets/inter-greek-ext-500-normal-2j5mBUwD.woff) format("woff");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/inter-greek-500-normal-BIZE56-Y.woff2) format("woff2"),url(/assets/inter-greek-500-normal-Xzm54t5V.woff) format("woff");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/inter-vietnamese-500-normal-DOriooB6.woff2) format("woff2"),url(/assets/inter-vietnamese-500-normal-mJboJaSs.woff) format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/inter-latin-ext-500-normal-CV4jyFjo.woff2) format("woff2"),url(/assets/inter-latin-ext-500-normal-BxGbmqWO.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/inter-latin-500-normal-Cerq10X2.woff2) format("woff2"),url(/assets/inter-latin-500-normal-BL9OpVg8.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/inter-cyrillic-ext-600-normal-Dfes3d0z.woff2) format("woff2"),url(/assets/inter-cyrillic-ext-600-normal-Bcila6Z-.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/inter-cyrillic-600-normal-CWCymEST.woff2) format("woff2"),url(/assets/inter-cyrillic-600-normal-4D_pXhcN.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/inter-greek-ext-600-normal-DRtmH8MT.woff2) format("woff2"),url(/assets/inter-greek-ext-600-normal-B8X0CLgF.woff) format("woff");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/inter-greek-600-normal-plRanbMR.woff2) format("woff2"),url(/assets/inter-greek-600-normal-BZpKdvQh.woff) format("woff");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/inter-vietnamese-600-normal-Cc8MFFhd.woff2) format("woff2"),url(/assets/inter-vietnamese-600-normal-BuLX-rYi.woff) format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/inter-latin-ext-600-normal-D2bJ5OIk.woff2) format("woff2"),url(/assets/inter-latin-ext-600-normal-CIVaiw4L.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/inter-latin-600-normal-LgqL8muc.woff2) format("woff2"),url(/assets/inter-latin-600-normal-CiBQ2DWP.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--page: #fff;--sidebar: #fafafa;--surface: #fff;--preview: #f7f7f8;--fg: #242426;--muted: #8a8a91;--soft-fg: #626269;--line: #ebebee;--hover: #f0f0f2;--accent: #6b72d9;--accent-bg: #eeeffb;--code-bg: #fafafb;--shadow: 0 1px 4px #00000004}:root[data-theme=dark]{color-scheme:dark;--page: #131315;--sidebar: #101012;--surface: #18181b;--preview: #1e1e22;--fg: #e8e8ec;--muted: #797982;--soft-fg: #a3a3ac;--line: #29292f;--hover: #222227;--accent: #9ca3ff;--accent-bg: #25263c;--code-bg: #161619;--shadow: none}*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--fg)}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,pre:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button{color:inherit}button svg{flex:none}::selection{background:var(--accent-bg)}.studio-shell{display:flex;height:100svh;overflow:hidden}.sidebar{width:258px;flex:none;background:var(--sidebar);border-right:1px solid var(--line);display:flex;flex-direction:column;height:100%;padding:0 15px;z-index:30}.brand{display:flex;align-items:center;gap:10px;padding:27px 5px 26px;border:0;background:none;text-align:left;font-size:14px;font-weight:600;letter-spacing:-.5px;white-space:nowrap}.brand-mark{display:grid;place-content:center;width:29px;height:29px;border-radius:9px;background:var(--fg);color:var(--page);font-family:Georgia,serif;font-size:23px;line-height:26px;position:relative}.brand-mark>span{position:absolute;color:#b7b3ff;bottom:2px;right:5px;font-size:24px}.brand-light{font-weight:400;color:var(--muted)}.brand-version{margin-left:auto;letter-spacing:0;color:var(--muted);font:9px monospace;border:1px solid var(--line);padding:2px 4px;border-radius:4px}.sidebar-search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:9px 10px;color:var(--muted);box-shadow:var(--shadow);margin-bottom:17px}.sidebar-search svg{width:14px;height:14px;flex:none}.sidebar-search input{min-width:0;width:100%;border:0;background:none;outline:none;color:var(--fg);font-size:11px}.sidebar-search input::placeholder{color:var(--muted)}kbd{font:10px monospace;border:1px solid var(--line);border-radius:3px;padding:1px 4px;color:var(--muted)}.overview-link,.favorites-filter{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;border-radius:6px;padding:9px 11px;font-size:11px;text-align:left;color:var(--soft-fg)}.overview-link.active,.favorites-filter.active{background:var(--hover);color:var(--fg);font-weight:500}.overview-link>span:first-child{font-size:17px;line-height:14px}.favorites-filter{margin-top:3px}.favorites-filter svg{width:13px;height:13px}.count{margin-left:auto;font-size:10px;color:var(--muted)}.component-navigation{min-height:0;flex:1;overflow-y:auto;padding:13px 2px 25px 0;margin:9px -8px 0 0;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.nav-group{margin-top:11px;margin-bottom:19px}.nav-category{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:500;color:var(--muted);margin:0 15px 7px 12px}.nav-category>span{font-size:12px;color:var(--soft-fg);width:14px;text-align:center}.nav-category small{margin-left:auto;font-size:9px;font-weight:400}.nav-item{display:flex;align-items:center;gap:5px;border:0;border-radius:5px;text-align:left;width:calc(100% - 8px);font-size:11px;padding:7px 11px 7px 34px;min-height:29px;color:var(--soft-fg);background:none}.nav-item:hover{background:var(--hover);color:var(--fg)}.nav-item.active{background:var(--accent-bg);color:var(--accent);font-weight:500}.active-dot{width:4px;height:4px;border-radius:50%;background:var(--accent);margin-left:auto}.nav-star{font-size:10px;color:var(--muted);margin-left:auto}.nav-empty{font-size:12px;text-align:center;padding:30px 0;color:var(--muted)}.nav-empty button{display:block;border:0;background:none;text-decoration:underline;color:var(--accent);margin:10px auto}.sidebar-download{display:flex;gap:10px;align-items:center;padding:12px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);margin:12px 0 10px;box-shadow:var(--shadow)}.sidebar-download>span:last-child{margin-left:auto;font-size:13px;color:var(--muted)}.download-tile{display:grid;place-items:center;width:29px;height:29px;border:1px solid var(--line);border-radius:6px;color:var(--soft-fg)}.sidebar-download strong{font-size:10px;font-weight:500;display:block}.sidebar-download small{font-size:9px;color:var(--muted);display:block;margin-top:4px}.sidebar-footer{display:flex;align-items:center;gap:6px;padding:5px 2px 16px;color:var(--muted);font-size:9px;white-space:nowrap}.live-dot{display:inline-block;width:5px;height:5px;background:#81a590;border-radius:50%;flex:none}.workspace{flex:1;min-width:0;height:100%;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.topbar{height:62px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 40px;border-bottom:1px solid var(--line);background:var(--page);position:sticky;top:0;z-index:20}.breadcrumb{display:flex;align-items:center;gap:13px;font-size:10px;color:var(--muted)}.breadcrumb button{border:0;background:none;padding:0;color:var(--soft-fg);font-size:10px}.breadcrumb strong{color:var(--soft-fg);font-weight:400}.breadcrumb>span:nth-of-type(odd){color:var(--line)}.topbar-actions{display:flex;align-items:center;gap:16px}.repo-link{font-size:10px;color:var(--soft-fg);white-space:nowrap}.notify-button{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;font-size:10px;white-space:nowrap;color:var(--soft-fg);background:transparent;border:1px solid var(--line);border-radius:6px;cursor:pointer}.notify-button:hover{background:var(--hover);color:var(--fg)}.notify-button:disabled{opacity:.6;cursor:progress}.notify-button.sent{color:#15803d;border-color:#15803d}.notify-button.error{color:#b91c1c;border-color:#b91c1c}.toolbar-divider{height:14px;width:1px;background:var(--line)}.icon-button{display:grid;place-content:center;width:28px;height:28px;background:transparent;border:0;border-radius:5px;color:var(--muted)}.icon-button:hover,.icon-button.selected{background:var(--hover);color:var(--fg)}.icon-button svg{width:14px;height:14px}.mobile-menu{display:none}.main-content{width:100%;max-width:1130px;margin:0 auto;padding:47px 56px 0}.component-heading{max-width:770px;margin-bottom:29px}.eyebrow{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:9px;font-weight:500;letter-spacing:1.2px}.eyebrow>span:not(.live-dot){color:var(--line);margin:0 2px}.heading-title{display:flex;align-items:center;gap:18px;margin-top:14px}.component-heading h1{font-size:33px;line-height:1.2;letter-spacing:-1.35px;font-weight:500;margin:0}.favorite-button{width:29px;height:29px;display:grid;place-items:center;border:1px solid var(--line);background:none;border-radius:6px;color:var(--muted)}.favorite-button svg{width:13px;height:13px}.favorite-button.saved{color:var(--accent);background:var(--accent-bg);border-color:transparent}.favorite-button.saved svg{fill:var(--accent-bg)}.component-heading>p{font-size:12px;line-height:1.8;color:var(--soft-fg);max-width:680px;margin:12px 0 17px}.component-meta{display:flex;align-items:center;gap:15px;color:var(--muted);font-size:9px;flex-wrap:wrap}.origin{display:inline-flex;align-items:center;gap:5px;font-size:9px;line-height:18px;padding:1px 6px;border-radius:4px;border:1px solid var(--line);color:var(--soft-fg)}.origin-dot{width:4px;height:4px;border-radius:50%;background:#9494aa}.origin.mit{color:#58856d;background:#6caa7c08;border-color:#6caa7c20}.origin.mit .origin-dot{background:#689b7d}.origin.recreated{background:var(--hover)}.showcase{border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);overflow:hidden}.showcase-toolbar{min-height:49px;display:flex;align-items:center;justify-content:space-between;padding:8px 13px;background:var(--surface);gap:10px;border-bottom:1px solid var(--line)}.view-tabs{display:flex;align-items:center;gap:2px}.view-tabs button{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted);padding:6px 10px;background:none;border:0;border-radius:5px}.view-tabs button>svg{width:12px;height:12px}.view-tabs button[aria-selected=true]{background:var(--hover);color:var(--fg)}.preview-options{display:flex;align-items:center;gap:6px}.style-switch{display:flex;align-items:center;gap:1px;border-right:1px solid var(--line);padding-right:10px;margin-right:3px}.style-switch button{font-size:9px;color:var(--muted);padding:4px 6px;border:0;border-radius:4px;background:none}.style-switch button[aria-pressed=true]{background:var(--hover);color:var(--fg)}.filename{color:var(--muted);font:10px ui-monospace,monospace;padding-right:5px}.preview-stage{background:var(--preview);min-height:485px;padding:70px 40px;display:flex;justify-content:center;align-items:center;overflow:auto}.preview-container{width:100%;max-width:720px;min-width:0;transition:max-width .25s;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:16px}.preview-container.narrow{max-width:340px}.code-stage{background:var(--code-bg);height:485px;overflow:auto}.code-stage pre{font:11px/1.85 ui-monospace,SFMono-Regular,Menlo,monospace;padding:28px 30px;margin:0;tab-size:2;color:var(--soft-fg);white-space:pre;min-height:100%}.showcase-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:9px;color:var(--muted);padding:11px 16px;border-top:1px solid var(--line);background:var(--surface)}.showcase-footer>span:first-child{display:flex;align-items:center;gap:6px}.showcase-footer .live-dot{width:4px;height:4px}.preview-loading{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted);min-height:300px}.loading-mark{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.copy-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:21px 0 5px}.copy-bar>div:first-child{display:flex;gap:10px;align-items:center}.copy-bar-icon{display:grid;place-items:center;border:1px solid var(--line);width:34px;height:34px;border-radius:8px;color:var(--soft-fg);flex:none}.copy-bar-icon svg{width:15px;height:15px}.copy-bar strong{font-weight:500;font-size:11px}.copy-bar p{margin:5px 0 0;font-size:10px;color:var(--muted);line-height:1.5}.copy-actions{display:flex;align-items:center;gap:7px;flex:none}.action-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:10px;font-weight:500;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:8px 10px;min-height:33px;white-space:nowrap;box-shadow:var(--shadow)}.action-button>svg{width:13px;height:13px}.action-button:hover{background:var(--hover)}.action-button.primary{color:var(--page);background:var(--fg);border-color:var(--fg)}.action-button.primary:hover{opacity:.85}.action-button.primary>span{font-size:13px}.copy-feedback{color:var(--accent);font-size:10px;min-height:25px;padding-top:5px;text-align:right}.component-notes{display:grid;grid-template-columns:1fr 1fr;gap:46px;padding:24px 0 35px;border-top:1px solid var(--line);margin-top:9px}.component-notes h3{font-size:11px;font-weight:500;margin:0 0 13px}.component-notes p,.component-notes li{font-size:10px;line-height:1.9;color:var(--muted)}.component-notes ol{padding-left:16px;margin:0 0 12px}.component-notes li{padding-left:4px;margin:4px 0}.component-notes code{font-size:10px;background:var(--hover);border-radius:3px;padding:1px 3px}.component-notes a,.text-button{font-size:10px;font-weight:500;color:var(--soft-fg)}.text-button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0}.text-button svg{width:12px;height:12px}.related{padding:24px 0 35px;border-top:1px solid var(--line)}.gallery-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.gallery-header h2{font-size:12px;font-weight:500;margin:0}.gallery-header>span{font-size:10px;color:var(--muted)}.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.related-grid>button{display:flex;align-items:center;gap:10px;padding:15px 12px;background:var(--surface);border:1px solid var(--line);border-radius:8px;text-align:left}.related-grid>button:hover{background:var(--hover)}.related-grid>button>span:first-child{display:grid;place-items:center;width:29px;height:29px;background:var(--hover);border-radius:6px;color:var(--soft-fg);flex:none;font-size:16px}.related-grid>button>span:last-child{margin-left:auto;color:var(--muted);font-size:11px}.related-grid small{display:block;font-size:8px;color:var(--muted);margin-bottom:5px}.related-grid strong{font-size:10px;font-weight:500;display:block}.main-footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:22px 0 26px;font-size:9px;color:var(--muted)}.footer-dot{padding:0 5px}.library-hero{padding:12px 0 38px;margin-bottom:32px;border-bottom:1px solid var(--line)}.library-hero h1{font-size:43px;line-height:1.15;letter-spacing:-1.8px;font-weight:500;margin:25px 0 17px}.library-hero h1>span{color:var(--muted)}.library-hero>p{max-width:480px;font-size:12px;line-height:1.8;color:var(--soft-fg)}.collection-stats{display:flex;gap:24px;margin-top:28px;color:var(--muted);font-size:10px;flex-wrap:wrap}.collection-stats strong{color:var(--soft-fg);font-weight:500;padding-right:3px}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:40px}.catalog-card{padding:0;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:10px;overflow:hidden;transition:transform .2s,box-shadow .2s}.catalog-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px #00000008}.card-art{height:135px;background:var(--preview);display:grid;place-items:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}.mini-window{width:145px;padding:10px 12px 14px;border:1px solid var(--line);border-radius:7px;background:var(--surface);box-shadow:0 6px 20px #00000007;transform:rotate(-3deg)}.mini-dots{display:block;font-size:20px;line-height:8px;color:var(--muted);padding-bottom:13px}.mini-row{display:flex;gap:7px;align-items:center;margin:6px 0}.mini-row i{display:block;width:11px;height:11px;border-radius:3px;background:var(--accent-bg)}.mini-row b{height:4px;width:70%;border-radius:4px;background:var(--line)}.mini-row em{display:block;width:14px;height:5px;background:var(--hover);margin-left:auto;border-radius:2px}.mini-row:nth-child(3) b{width:45%}.mini-row:nth-child(4) b{width:60%}.art-1 .mini-window{transform:rotate(3deg);width:130px}.art-2 .mini-window{transform:rotate(0);border-radius:15px}.art-3 .mini-window{transform:rotate(-5deg);width:155px}.art-4 .mini-window{transform:rotate(4deg)}.art-symbol{position:absolute;bottom:14px;right:16px;font-size:17px;color:var(--muted);opacity:.7}.catalog-card-info{padding:16px}.catalog-card-info>small{font-size:8px;letter-spacing:.5px;color:var(--muted)}.catalog-card-info h3{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:500;margin:8px 0}.catalog-card-info h3>span{color:var(--muted)}.catalog-card-info p{font-size:10px;line-height:1.7;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px;margin:0 0 15px}.catalog-card-info .origin{font-size:8px}.empty-state{padding:50px 25px;text-align:center}.empty-state h3{font-size:15px;font-weight:500}.empty-state p{font-size:12px;color:var(--muted)}.modal-backdrop{position:fixed;inset:0;background:#0007;z-index:100;display:grid;place-items:center;padding:20px}.copy-dialog{width:min(700px,100%);background:var(--surface);padding:24px;border:1px solid var(--line);border-radius:12px}.copy-dialog h2{font-size:18px}.copy-dialog p{font-size:12px;color:var(--muted)}.copy-dialog textarea{display:block;width:100%;height:45vh;background:var(--code-bg);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:14px;font:11px/1.7 monospace;margin:15px 0}.sidebar-scrim{display:none}.preview-container .thinking-state{align-self:center}.preview-container>section{width:100%}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:1550px){.main-content{padding-top:65px}.preview-stage{min-height:530px}}@media(max-width:1150px){.sidebar{width:235px}.main-content{padding:36px 30px 0}.topbar{padding:0 30px}.copy-bar{align-items:flex-start}.copy-bar>div:first-child{max-width:260px}.copy-bar-icon{display:none}.copy-bar p{font-size:9px}.preview-stage{padding:55px 25px}.component-notes{gap:25px}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.related-grid{grid-template-columns:1fr 1fr}.related-grid>button:last-child{display:none}}@media(max-width:850px){.sidebar{width:215px;padding:0 12px}.brand{gap:7px;font-size:12px}.brand-version{display:none}.sidebar-footer{font-size:8px}.sidebar-download strong{font-size:9px}.sidebar-download small{font-size:8px}.sidebar-download{gap:7px;padding:10px 7px}.download-tile{width:24px;height:24px}.main-content{padding:30px 24px 0}.topbar{padding:0 24px}.breadcrumb{gap:8px}.component-heading h1{font-size:29px}.preview-stage{padding:45px 18px}.copy-bar{flex-direction:column;gap:13px;padding-top:18px}.copy-bar>div:first-child{max-width:none}.copy-bar-icon{display:grid}.copy-actions{width:100%}.copy-actions .primary{margin-left:auto}.component-notes{grid-template-columns:1fr;gap:20px}.showcase-toolbar{flex-wrap:wrap}.filename{max-width:150px;overflow:hidden;text-overflow:ellipsis}.library-hero h1{font-size:35px}}@media(max-width:680px){.sidebar{position:fixed;inset:0 auto 0 0;width:258px;transform:translate(-100%);transition:transform .22s}.sidebar.is-open{transform:translate(0)}.sidebar-scrim{display:block;position:fixed;inset:0;background:#0005;border:0;z-index:25}.mobile-menu{display:grid}.workspace{width:100%}.topbar{padding:0 17px;height:54px;gap:8px}.breadcrumb{flex:1;white-space:nowrap;overflow:hidden;font-size:9px}.breadcrumb button{font-size:9px}.breadcrumb>span:nth-of-type(2){display:none}.breadcrumb>span:nth-of-type(3){display:none}.breadcrumb strong{overflow:hidden;text-overflow:ellipsis}.topbar-actions{gap:10px}.repo-link,.toolbar-divider{display:none}.main-content{padding:29px 18px 0}.component-heading{margin-bottom:23px}.component-heading h1{font-size:29px}.component-heading>p{font-size:11px;line-height:1.8}.component-meta{gap:10px;font-size:8px}.eyebrow{font-size:8px;letter-spacing:1px}.showcase-toolbar{padding:8px;gap:5px}.view-tabs button{padding:6px 7px;font-size:9px;gap:4px}.style-switch{padding-right:5px;margin:0}.style-switch button{font-size:8px;padding:4px}.preview-options{gap:1px}.preview-options .icon-button{width:24px}.preview-stage{padding:34px 14px;min-height:400px}.preview-container.narrow{max-width:280px}.showcase-footer{padding:10px;font-size:8px}.showcase-footer>span:last-child{display:none}.code-stage{height:400px}.code-stage pre{padding:20px 14px;font-size:10px}.copy-bar strong{font-size:11px}.copy-bar p{font-size:9px}.copy-actions{gap:6px}.copy-actions .action-button{font-size:9px;padding:8px}.copy-actions .primary{padding:8px 10px}.copy-feedback{font-size:9px;line-height:1.5;min-height:32px}.component-notes{padding:20px 0 27px}.related-grid{grid-template-columns:1fr}.related-grid>button:last-child{display:flex}.main-footer{font-size:8px}.library-hero{padding-top:0}.library-hero h1{font-size:36px}.library-hero>p{font-size:11px}.collection-stats{gap:12px;font-size:9px}.catalog-grid{gap:10px}.catalog-card-info{padding:12px}.catalog-card-info h3{font-size:11px}.card-art{height:110px}.mini-window,.art-1 .mini-window,.art-3 .mini-window{width:110px}.mini-row b{width:50%}.catalog-card-info .origin{font-size:7px}.catalog-card-info p{font-size:9px}.brand{font-size:14px}.brand-version{display:block}.sidebar-footer{font-size:9px}.sidebar-download strong{font-size:10px}.sidebar-download small{font-size:9px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}