@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#a0aaba;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--bg:#0e1012;--surface:#15171b;--surface-solid:#15171b;--surface-muted:#1c1f24;--surface-hover:#23262d;--text:#a0aaba;--heading:#fff;--muted:#8b96aa;--faint:#566171;--disabled:#566171;--border:#1c1f24;--border-strong:#333943;--pill-border:#bbc2ce;--ink:#007afc;--ink-deep:#0062ca;--success:#228a56;--button:transparent;--radius:24px;--utility-radius:6px;--pill:100px;--shadow:inset 0 -175px 175px -75px #0e1012;--shadow-strong:inset 0 -175px 175px -75px #0e1012;background:#0e1012;font-family:Cera Pro,Inter,Untitled Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:var(--bg);min-width:320px}body{background:var(--bg);min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}#root{min-height:100vh}.topbar{z-index:20;background:var(--bg);isolation:isolate;position:sticky;top:0;box-shadow:0 0 100px 50px #0e1012}.site-nav{justify-content:space-between;align-items:center;gap:18px;width:100%;min-height:62px;margin:0;padding:0 clamp(14px,2vw,28px);display:flex}.brand-mark,.crumb-link,.nav-tool-button{color:var(--heading);border:0;font-weight:500}.brand-mark{border-radius:var(--pill);letter-spacing:0;background:0 0;align-items:center;gap:12px;min-width:0;height:46px;padding:0;font-size:15px;display:inline-flex}.logo-glyph{border:1px solid var(--border-strong);background:var(--surface-muted);color:#fff;letter-spacing:0;border-radius:50%;flex:none;place-items:center;width:42px;height:42px;font-size:16px;font-weight:700;line-height:1;display:grid}.logo-text{color:var(--heading);letter-spacing:0;white-space:nowrap;font-size:18px;font-weight:700}.nav-links{justify-content:flex-end;align-items:center;gap:12px;min-width:0;display:inline-flex}.nav-tool-button{border:1px solid var(--pill-border);border-radius:var(--pill);color:#fff;background:0 0;min-height:36px;padding:0 16px;font-size:14px;transition:background .18s,border-color .18s,color .18s}.nav-tool-button:hover{background:var(--surface-muted);border-color:#fff}.mobile-menu-button,.mobile-menu-backdrop,.mobile-nav-panel{display:none}h1,h2,h3,p{margin:0}h1{max-width:1120px;color:var(--heading);letter-spacing:-.02em;font-size:clamp(44px,6.2vw,68px);font-weight:700;line-height:1}h2{color:var(--heading);letter-spacing:-.02em;font-size:clamp(28px,4vw,44px);font-weight:700;line-height:1.02}h3{color:var(--heading);font-size:18px;font-weight:700;line-height:1.35}.hero-section{text-align:center;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:none;min-height:430px;margin:0;padding:72px clamp(14px,2vw,28px) 48px;display:flex;position:relative;overflow:hidden}.hero-section>p,.detail-copy>p{max-width:860px;color:var(--text);font-size:18px;font-weight:400;line-height:1.5}.beta-pill,.badge{background:var(--ink-deep);min-height:28px;box-shadow:none;color:#fff;letter-spacing:.7em;text-transform:uppercase;border:0;border-radius:4px;align-items:center;padding:5px 8px;font-size:10px;font-weight:700;display:inline-flex}.search-shell{width:min(100%,980px);margin-top:18px}.search-box{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);min-height:64px;box-shadow:var(--shadow-strong);align-items:center;gap:8px;padding:8px 8px 8px 22px;display:flex}.search-leading-icon{color:var(--faint);flex:none}.search-box input{color:#fff;background:0 0;border:0;outline:0;flex:1;min-width:0;font-size:16px}.search-box input::placeholder{color:var(--faint)}.primary-button,.search-box .primary-button,.back-link{border:1px solid var(--pill-border);border-radius:var(--pill);color:#fff;white-space:nowrap;background:0 0;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:0 20px;font-size:14px;font-weight:500;transition:background .18s,border-color .18s,color .18s,opacity .18s;display:inline-flex}.search-box .primary-button,.extract-input-row .primary-button,.page-empty .primary-button{background:var(--ink);border-color:#0000}.primary-button:hover,.export-buttons>button:hover,.back-link:hover{background:var(--surface-hover);color:#fff;border-color:#fff}.search-box .primary-button:hover,.extract-input-row .primary-button:hover,.page-empty .primary-button:hover{background:var(--ink);border-color:#0000}.primary-button:disabled{cursor:not-allowed;opacity:.45}.icon-button{border-radius:var(--pill);width:36px;height:36px;color:var(--faint);background:0 0;border:1px solid #0000;place-items:center;display:grid}.icon-button:hover{border-color:var(--border);background:var(--surface-hover);color:var(--text)}.chips{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px;display:grid}.chips button,.sort-tabs button,.export-tabs button,.variant-tabs button,.detail-tags span{border:1px solid var(--border-strong);border-radius:var(--pill);min-width:0;color:var(--text);text-overflow:ellipsis;white-space:nowrap;background:0 0;padding:9px 14px;overflow:hidden}.chips button:hover,.sort-tabs button:hover,.export-tabs button:hover,.variant-tabs button:hover{border-color:var(--pill-border);color:#fff}.sort-tabs button.active,.export-tabs button.active,.variant-tabs button.active{border-color:var(--ink);background:var(--ink);color:#fff}.gallery-section{width:100%;max-width:none;margin:0;padding:24px clamp(14px,2vw,28px) 104px;position:relative}.gallery-toolbar{justify-items:center;gap:10px;margin-bottom:32px;display:grid}.sort-tabs{justify-content:center;gap:6px;display:flex}.result-line{color:var(--text);text-align:center}.result-line strong{color:#fff}.showing-count{color:var(--muted);text-align:center;font-size:13px;line-height:1.4}.style-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 18px;display:grid}.style-grid.mobile-style-grid{grid-template-columns:repeat(6,minmax(0,1fr));max-width:none;margin:0}.style-card{text-align:left;background:0 0;border:0;min-width:0;padding:0;display:block}.preview-frame{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);padding:clamp(12px,1.7vw,18px);display:block;position:relative;overflow:hidden}.preview-frame:before{z-index:1;content:"";opacity:.76;pointer-events:none;background:linear-gradient(#0e101200,#0e1012);height:42%;position:absolute;inset:auto 0 0}.preview-frame img,.preview-frame video{aspect-ratio:16/10;background:var(--surface-solid);object-fit:fill;border:0;border-radius:18px;width:100%;transition:transform .25s;display:block;position:relative}.mobile-card .preview-frame{border-radius:30px;padding:10px}.mobile-card .preview-frame:before{opacity:.48;height:28%}.mobile-card .preview-frame img,.mobile-card .preview-frame video{aspect-ratio:9/19.55;object-fit:cover;border-radius:24px}.style-card:hover .preview-frame img,.style-card:hover .preview-frame video{transform:scale(1.018)}.card-meta{align-items:center;gap:10px;min-width:0;padding-top:12px;display:flex}.card-meta img{border:1px solid var(--border);background:var(--surface-muted);border-radius:12px;flex:none;width:40px;height:40px}.card-meta span{min-width:0}.card-meta strong,.card-meta small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.card-meta strong{color:#fff;font-size:18px;font-weight:700;line-height:1.35}.card-meta small{color:var(--muted);font-size:13px}.infinite-sentinel{place-items:center;min-height:92px;margin-top:24px;display:grid}.load-more-button{border:1px solid var(--pill-border);border-radius:var(--pill);color:#fff;background:0 0;min-height:42px;padding:0 18px;font-size:14px;font-weight:500}.load-more-button:hover{background:#bad6f71a;border-color:#ffffff6b}.end-count{margin-top:28px}.empty-state{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);min-height:220px;color:var(--text);place-items:center;display:grid}.page-empty{gap:24px;max-width:640px;margin:80px auto;padding:48px}.detail-hero{grid-template-columns:minmax(300px,.72fr) minmax(360px,1fr);align-items:center;gap:56px;width:100%;max-width:none;margin:0;padding:72px clamp(14px,2vw,28px);display:grid}.detail-copy{flex-direction:column;gap:18px;min-width:0;display:flex}.back-link{width:max-content}.detail-tags{flex-wrap:wrap;gap:8px;display:flex}.detail-preview{z-index:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);padding:clamp(18px,3vw,32px);position:relative;overflow:hidden}.detail-preview:after{content:"";opacity:.76;pointer-events:none;background:linear-gradient(#0e101200,#0e1012);height:42%;position:absolute;inset:auto 0 0}.detail-preview img,.detail-preview video{aspect-ratio:16/10;object-fit:fill;border:0;border-radius:18px;width:100%;display:block;position:relative}.detail-preview.mobile-detail-preview{place-items:center;display:grid}.detail-preview.mobile-detail-preview:after{width:min(100%,430px);left:50%;transform:translate(-50%)}.detail-preview.mobile-detail-preview img,.detail-preview.mobile-detail-preview video{aspect-ratio:9/19.55;object-fit:cover;border-radius:34px;width:min(100%,382px);max-height:780px;box-shadow:0 22px 80px #00000061}.detail-layout{grid-template-columns:minmax(0,1fr) minmax(390px,.7fr);align-items:start;gap:24px;width:100%;max-width:none;margin:0;padding:0 clamp(14px,2vw,28px) 104px;display:grid}.detail-main{gap:18px;display:grid}.north-star,.detail-panel,.export-bar,.extract-form,.extract-output{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}.north-star{padding:32px}.north-star span{color:var(--faint);letter-spacing:.84px;text-transform:uppercase;font-size:12px;font-weight:500}.north-star p{color:var(--heading);letter-spacing:-.02em;margin-top:14px;font-size:clamp(30px,4.4vw,50px);font-weight:700;line-height:1.04}.detail-panel{gap:20px;padding:32px;display:grid}.detail-panel>p{color:var(--text);line-height:1.6}.color-list,.type-list,.component-list{gap:10px;display:grid}.color-row{border:1px solid var(--border);background:var(--surface-muted);border-radius:12px;grid-template-columns:42px minmax(130px,.35fr) minmax(0,1fr);align-items:center;gap:12px;padding:10px;display:grid}.swatch{border-radius:var(--utility-radius);border:1px solid #ffffff2e;width:42px;height:42px}.color-row strong,.type-list strong{color:#fff;font-weight:500;display:block}.color-row small,.type-list small{color:var(--muted)}.color-row p,.type-list p,.component-list p{color:var(--text);font-size:14px;line-height:1.45}.type-list>div,.component-list article,.rule-list li{border:1px solid var(--border);background:var(--surface-muted);border-radius:12px;padding:16px}.rule-list{gap:10px;margin:0;padding:0;list-style:none;display:grid}.rule-list li{color:var(--text);padding:14px 16px;line-height:1.5}.related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.related-grid .preview-frame{padding:16px}.related-grid .card-meta strong{font-size:16px}.screenshot-panel>div:first-child{gap:8px;display:grid}.screenshot-panel>div:first-child p{color:var(--text);line-height:1.5}.screenshot-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;display:grid}.screenshot-tile{min-width:0;color:inherit;gap:8px;text-decoration:none;display:grid}.screenshot-tile img{aspect-ratio:9/19.55;border:1px solid var(--border);background:var(--surface-muted);width:100%;box-shadow:var(--shadow);object-fit:cover;border-radius:22px;display:block}.screenshot-tile span{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.35;overflow:hidden}.screenshot-tile:hover span{color:#fff}.export-bar{flex-direction:column;max-height:calc(100vh - 96px);display:flex;position:sticky;top:76px;overflow:hidden}.anchor-target{position:absolute;transform:translateY(-120px)}.export-tabs,.export-actions{border-bottom:1px solid var(--border);gap:6px;padding:10px 12px;display:flex}.export-tabs{flex-wrap:wrap;overflow:visible}.export-actions{justify-content:space-between;align-items:center;gap:12px;padding-top:8px;padding-bottom:8px}.export-buttons{flex:none;align-items:center;gap:6px;display:flex}.export-buttons>button,.extract-actions button{border:1px solid var(--border-strong);border-radius:var(--pill);min-height:32px;color:var(--text);background:0 0;justify-content:center;align-items:center;gap:6px;padding:0 13px;font-size:14px;font-weight:500;display:inline-flex}.variant-tabs{flex-wrap:wrap;gap:4px;min-width:0;display:flex}.export-tabs button,.variant-tabs button{min-height:32px;padding:0 13px;font-size:14px;line-height:1}.export-bar pre,.extract-output pre{background:var(--bg);margin:0;padding:20px;overflow:auto}.export-bar pre{border-radius:0 0 24px 24px;flex:1}.export-bar code,.extract-output code{color:var(--text);white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px;line-height:1.55}.extract-page{gap:24px;max-width:1344px;margin:0 auto;padding:72px clamp(20px,3vw,48px) 104px;display:grid}.extract-hero{justify-content:center;display:flex}.extract-copy{text-align:center;justify-items:center;gap:18px;width:min(100%,760px);display:grid}.extract-copy .beta-pill{width:max-content}.extract-copy h1{max-width:620px}.extract-copy p,.extract-form p,.extract-output-header p,.extract-notes p{color:var(--text);line-height:1.55}.extract-form{text-align:left;gap:12px;width:min(100%,680px);padding:24px;display:grid}.extract-form label{color:#fff;font-size:14px;font-weight:500}.extract-input-row{gap:8px;display:flex}.extract-input-row input{border:1px solid var(--border);border-radius:var(--utility-radius);background:var(--surface-muted);color:#fff;flex:1;min-width:0;padding:0 18px;font-size:16px}.extract-output{overflow:hidden}.extract-output-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:flex-start;gap:18px;padding:24px;display:flex}.extract-export-controls{border-bottom:1px solid var(--border);gap:0;display:grid}.extract-export-controls .export-tabs{border-bottom:1px solid var(--border)}.extract-export-controls .variant-tabs{padding:10px 12px}.extract-export-controls .variant-tabs button:disabled{cursor:not-allowed;opacity:.45}.extract-output-title{color:#fff;letter-spacing:0;margin-bottom:4px;font-size:22px;font-weight:700;line-height:1.2}.extract-actions{flex:none;gap:8px;display:flex}.extract-actions button:disabled{cursor:not-allowed;opacity:.45}.extract-actions button:hover:not(:disabled){border-color:var(--pill-border);color:#fff}.extract-error{color:#ffd6da;background:#5a101852;border:1px solid #ff78783d;border-radius:12px;margin:18px 24px 0;padding:14px 16px;line-height:1.45}.extract-output pre{max-height:680px;padding:24px}@media (width<=1100px){.style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-hero,.detail-layout{grid-template-columns:1fr}.export-bar{max-height:760px;position:static}}@media (width<=700px){.site-nav{gap:10px}.nav-links{display:none}.logo-text{font-size:15px}.mobile-menu-button{border:1px solid var(--border-strong);background:var(--surface);color:#fff;border-radius:50%;flex:none;place-items:center;width:44px;height:44px;transition:background .18s,border-color .18s,transform .18s;display:grid}.mobile-menu-button:hover,.topbar[data-menu-open=true] .mobile-menu-button{border-color:var(--pill-border);background:var(--surface-hover)}.mobile-menu-button:active{transform:scale(.96)}.mobile-menu-backdrop{opacity:0;pointer-events:none;background:#0506087a;border:0;transition:opacity .22s;display:block;position:fixed;inset:62px 0 0}.mobile-menu-backdrop[data-open=true]{opacity:1;pointer-events:auto}.mobile-nav-panel{z-index:2;opacity:0;pointer-events:none;transform-origin:100% 0;visibility:hidden;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#15171bf0;border:1px solid #ffffff24;border-radius:22px;gap:8px;padding:10px;transition:opacity .22s,transform .22s cubic-bezier(.2,.85,.25,1),visibility .22s;display:grid;position:fixed;top:72px;left:12px;right:12px;transform:translateY(-12px)scale(.98);box-shadow:0 24px 80px #00000075}.mobile-nav-panel[data-open=true]{opacity:1;pointer-events:auto;visibility:visible;transform:translateY(0)scale(1)}.mobile-nav-item{color:#fff;text-align:left;background:0 0;border:1px solid #0000;border-radius:16px;align-items:center;gap:12px;width:100%;min-height:54px;padding:0 14px;transition:background .18s,border-color .18s,transform .18s;display:flex}.mobile-nav-item svg{color:var(--text);flex:none}.mobile-nav-item span{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:16px;font-weight:600;overflow:hidden}.mobile-nav-item:hover,.mobile-nav-item:focus-visible{border-color:var(--border-strong);background:var(--surface-hover)}.mobile-nav-item:active{transform:scale(.985)}.hero-section{min-height:auto;padding-top:44px;padding-bottom:36px}.search-box{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding:10px;display:grid}.search-box input{min-height:42px;padding:0 8px}.search-box .primary-button{grid-column:1/-1}.chips{grid-template-columns:repeat(2,minmax(0,1fr))}.style-grid,.related-grid{grid-template-columns:1fr}.style-grid.mobile-style-grid,.screenshot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-preview.mobile-detail-preview img,.detail-preview.mobile-detail-preview video{width:min(100%,320px)}.color-row{grid-template-columns:42px minmax(0,1fr)}.color-row p{grid-column:1/-1}.export-actions{flex-direction:column;align-items:stretch}.export-buttons{justify-content:flex-end}.extract-page{padding-top:44px}.extract-input-row,.extract-output-header,.extract-actions{flex-wrap:wrap}.extract-input-row input{flex-basis:100%;min-height:46px}}@media (width<=700px) and (prefers-reduced-motion:reduce){.mobile-menu-button,.mobile-menu-backdrop,.mobile-nav-panel,.mobile-nav-item{transition:none}}