@charset "UTF-8";
:root{color-scheme:light;--bg:#f7f7f2;--surface:#fdfdf9;--soft:#eeeee8;--line:#ddddd4;--text:#252722;--muted:#676a60;--accent:#d3ed84;--accent-text:#293219;--selected:#eaf0d9;--focus:#637e21;--preview:#e9e9e2;--shadow:0 24px 100px #24282025;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#1b1d1a;--surface:#21231f;--soft:#292c26;--line:#363a31;--text:#eceee5;--muted:#a4aa9c;--accent:#d3ed84;--accent-text:#293219;--selected:#343e27;--focus:#d3ed84;--preview:#262923;--shadow:0 24px 100px #0007}}
:root[data-theme="dark"]{color-scheme:dark;--bg:#1b1d1a;--surface:#21231f;--soft:#292c26;--line:#363a31;--text:#eceee5;--muted:#a4aa9c;--accent:#d3ed84;--accent-text:#293219;--selected:#343e27;--focus:#d3ed84;--preview:#262923;--shadow:0 24px 100px #0007}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button{border:0;background:none}a{color:inherit;text-decoration:none}button:disabled{cursor:wait;opacity:.55}button,input,select,textarea,a{outline-offset:4px}:focus-visible{outline:2px solid var(--focus)}button:hover:not(:disabled),a:hover{color:var(--text)}[hidden]{display:none!important}h1,h2,h3,p{margin:0}button{transition:background .15s,color .15s}input,select,textarea{background:var(--surface);border:1px solid var(--line);border-radius:5px}select{cursor:pointer;padding:10px 30px 10px 11px;max-width:100%}kbd,.small-label,.eyebrow,.count{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}kbd{font-size:11px;border:1px solid var(--line);border-radius:3px;padding:3px 6px;background:var(--soft);color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;top:8px;left:8px;padding:12px;background:var(--accent);color:var(--accent-text);transform:translateY(-150%);z-index:5}.skip-link:focus{transform:none}
.topbar{height:72px;display:flex;align-items:center;padding:0 36px;gap:64px;border-bottom:1px solid var(--line);background:var(--surface)}.wordmark{display:flex;align-items:center;font-weight:650;font-size:25px;letter-spacing:-1.3px}.wordmark>span:last-child{font-weight:400}.brand-mark{position:relative;width:21px;height:24px;margin-right:12px}.brand-mark:before,.brand-mark:after{content:"";position:absolute;width:13px;height:17px;border:1.5px solid var(--text);border-radius:2px}.brand-mark:before{top:0;left:0}.brand-mark:after{bottom:0;right:0;background:var(--accent)}.topbar nav{display:flex;gap:30px;height:100%;align-items:stretch}.topbar nav a,.nav-button{font-size:13px;display:flex;align-items:center;padding:0 2px;color:var(--muted);position:relative}.topbar nav .nav-active{color:var(--text)}.nav-active:after{content:"";height:2px;background:var(--text);position:absolute;bottom:0;left:0;right:0}.appearance{margin-left:auto;display:flex;align-items:center;gap:9px;padding:10px;font-size:12px;color:var(--muted);border-radius:5px}.appearance:hover{background:var(--soft)}.theme-icon{display:block;width:16px;height:16px;border:1.5px solid currentColor;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.workspace{display:grid;grid-template-columns:236px minmax(0,1fr);max-width:1800px;margin:0 auto}.sidebar{border-right:1px solid var(--line);padding:31px 20px 40px;min-height:calc(100vh - 72px)}#filter-content{position:sticky;top:26px}.sidebar-heading{margin:0 10px 23px}.sidebar-heading h2{font-size:14px;font-weight:550;margin-bottom:8px}.small-label{font-size:10px;letter-spacing:1px;color:var(--muted)}.sidebar-heading .small-label{font-size:9px}.side-button{width:100%;min-height:40px;padding:10px;display:flex;justify-content:space-between;align-items:center;text-align:left;font-size:12px;border-radius:4px;gap:10px;color:var(--muted)}.side-button:hover{background:var(--soft)}.side-button[aria-pressed="true"]{background:var(--selected);color:var(--text)}.side-button[aria-pressed="true"]>span:first-child:before{content:"";display:inline-block;width:5px;height:5px;background:var(--focus);border-radius:50%;margin-right:8px;vertical-align:middle}.count{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}.sidebar-section{border-top:1px solid var(--line);margin-top:22px;padding-top:24px}.sidebar-section h3{font-size:10px;letter-spacing:.8px;text-transform:uppercase;font-weight:500;color:var(--muted);margin:0 10px 12px}.categories{max-height:320px;overflow:auto}.categories p{font-size:12px;padding:10px}.refinements{display:flex;flex-direction:column;gap:8px}.refinements h3{margin-bottom:8px}.refinements label{font-size:11px;color:var(--muted);margin:4px 2px 0}.refinements select{font-size:12px;min-height:38px}.text-button{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}.clear{margin:20px 2px 0;padding:4px 0}.clear span{margin-left:12px}.sidebar-note{margin-top:38px;padding:18px 10px 0;border-top:1px solid var(--line);font-size:11px}.native-dot{display:inline-block;width:6px;height:6px;flex-shrink:0;border-radius:50%;background:var(--focus)}.sidebar-note strong{font-size:11px;font-weight:500;margin-left:7px}.sidebar-note p{color:var(--muted);line-height:1.8;margin-top:9px}
main{min-width:0;padding:44px 38px 0}.intro{padding:0 0 36px}.eyebrow{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:1.3px;color:var(--muted);margin-bottom:22px}h1{font-size:clamp(36px,3.7vw,56px);line-height:1.06;letter-spacing:-2.5px;font-weight:450}h1 span{color:var(--muted)}.intro>p{margin-top:20px;font-size:13px;line-height:1.8;max-width:570px;color:var(--muted)}.search-row{display:flex;gap:10px}.search-field{display:flex;align-items:center;gap:14px;flex:1;border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:0 15px;height:48px}.search-field:focus-within{outline:2px solid var(--focus);outline-offset:2px}.search-field input{border:0;background:none;width:100%;outline:none;padding:12px 0;font-size:13px;min-width:0}.search-field input::placeholder{color:var(--muted)}.search-icon{width:13px;height:13px;border:1.5px solid var(--muted);border-radius:50%;position:relative;flex-shrink:0;margin-right:3px}.search-icon:after{content:"";width:5px;height:1.5px;background:var(--muted);position:absolute;right:-4px;bottom:-2px;transform:rotate(45deg)}.results-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:27px 0 22px}.results-toolbar h2{font-size:16px;font-weight:550;letter-spacing:-.3px}.results-toolbar p{font-size:11px;color:var(--muted);margin-top:7px}.sort-control{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--muted)}.sort-control select{font-size:11px;color:var(--text);border:0;background-color:transparent;padding-right:20px}.active-filters{display:flex;gap:7px;flex-wrap:wrap;margin:-4px 0 20px}.filter-chip{font-size:11px;padding:7px 10px;border:1px solid var(--line);background:var(--surface);border-radius:4px}.filter-chip span{margin-left:10px;color:var(--muted)}.component-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 20px}.component-card{min-width:0;border:1px solid var(--line);border-radius:7px;background:var(--surface);overflow:hidden;transition:border-color .15s}.component-card:hover{border-color:var(--muted)}.card-preview{position:relative;display:block;width:100%;height:260px;background:var(--preview);overflow:hidden;text-align:left;padding:0;border-bottom:1px solid var(--line);border-radius:0}.card-preview:focus-visible{outline-offset:-4px}.miniature{position:absolute;inset:0;overflow:hidden;pointer-events:none}.miniature iframe{width:1000px;height:780px;border:0;transform-origin:top left;position:absolute;top:0;left:0;background:#fff;pointer-events:none}.preview-placeholder{display:grid;place-content:center;position:absolute;inset:0;font-size:11px;color:var(--muted);letter-spacing:.2px}.card-preview .open-hint{position:absolute;bottom:12px;right:12px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:8px 11px;font-size:11px;box-shadow:0 2px 8px #0001;opacity:0;transform:translateY(3px);transition:opacity .15s,transform .15s}.card-preview:hover .open-hint,.card-preview:focus-visible .open-hint{opacity:1;transform:none}.card-info{padding:17px 17px 14px}.card-title-row{display:flex;align-items:center;gap:10px;justify-content:space-between}.card-title{font-size:14px;font-weight:550;letter-spacing:-.2px;line-height:1.4;text-align:left;padding:0}.card-title:hover{text-decoration:underline;text-underline-offset:4px}.bookmark-button{height:32px;width:32px;display:grid;place-content:center;flex-shrink:0;border-radius:4px}.bookmark-button:hover{background:var(--soft)}.bookmark-icon{width:11px;height:14px;display:block;border:1.4px solid var(--muted);border-bottom:0;position:relative;clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%);background:var(--muted)}.bookmark-icon:before{content:"";position:absolute;inset:1px;background:var(--surface);clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%)}.bookmark-button[aria-pressed="true"]{background:var(--selected)}.bookmark-button[aria-pressed="true"] .bookmark-icon{background:var(--focus);border-color:var(--focus)}.bookmark-button[aria-pressed="true"] .bookmark-icon:before{background:var(--focus)}.card-meta{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10px;flex-wrap:wrap;margin-top:7px}.card-meta .tag{background:var(--soft);border-radius:3px;padding:4px 6px}.card-meta .element-count{margin-left:auto;font-family:ui-monospace,monospace;font-size:9px}.card-actions{display:flex;justify-content:space-between;align-items:center;padding:11px 17px;border-top:1px solid var(--line)}.card-actions button{font-size:11px;padding:5px 0}.card-actions button:last-child{color:var(--muted)}.card-actions button:hover{text-decoration:underline;text-underline-offset:4px}.skeleton{height:365px;border:1px solid var(--line);border-radius:7px;overflow:hidden}.skeleton:before{content:"";display:block;height:260px;background:var(--soft);border-bottom:1px solid var(--line)}.skeleton:after{content:"";display:block;height:8px;width:43%;margin:25px 18px;background:var(--line);border-radius:2px}.catalog-state{text-align:center;padding:70px 24px;border:1px dashed var(--line);border-radius:7px}.catalog-state .state-mark{font:30px ui-monospace,monospace;color:var(--muted);display:block;margin-bottom:20px}.catalog-state h2{font-size:22px;font-weight:450;letter-spacing:-.6px}.catalog-state p{color:var(--muted);font-size:13px;line-height:1.8;margin:12px auto 22px;max-width:430px}.button{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:10px 15px;background:var(--surface);border:1px solid var(--line);border-radius:5px;font-size:12px;font-weight:500;white-space:nowrap}.button:hover:not(:disabled){background:var(--soft)}.button.primary{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}.button.primary:hover:not(:disabled){background:#c4df75;border-color:#c4df75;color:var(--accent-text)}.footer{display:flex;align-items:center;gap:24px;border-top:1px solid var(--line);margin-top:55px;padding:26px 0 30px}.footer-brand{font-size:15px;letter-spacing:-.7px;font-weight:600}.footer p{color:var(--muted);font-size:10px;line-height:1.7}.footer>span{margin-left:auto;font-size:10px;color:var(--muted)}
dialog{color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:0;max-height:92dvh;box-shadow:var(--shadow)}dialog::backdrop{background:#11150ecc}body:has(dialog[open]){overflow:hidden}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 24px;border-bottom:1px solid var(--line)}.dialog-heading h2{font-size:19px;font-weight:500;letter-spacing:-.4px}.dialog-heading .small-label+h2{margin-top:8px}.close-button{height:36px;width:36px;border:1px solid var(--line);border-radius:5px;font-size:23px;line-height:1;flex-shrink:0;color:var(--muted)}.close-button:hover{background:var(--soft)}.preview-dialog{width:min(1400px,96vw)}.preview-toolbar{display:flex;align-items:center;gap:18px;padding:12px 24px;border-bottom:1px solid var(--line)}.viewport-controls{display:flex;padding:3px;background:var(--soft);border:1px solid var(--line);border-radius:5px;gap:3px}.viewport-controls button{padding:7px 12px;font-size:11px;color:var(--muted);border-radius:3px}.viewport-controls button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px #0001}.preview-toolbar>a{margin-left:auto;font-size:11px;color:var(--muted)}.preview-stage{height:clamp(260px,54dvh,700px);padding:20px;overflow:hidden;background-color:var(--preview);background-image:radial-gradient(var(--line) .7px,transparent .7px);background-size:12px 12px;display:flex;justify-content:center;align-items:flex-start}.preview-frame-wrap{flex-shrink:0;position:relative;box-shadow:0 2px 16px #0001;background:#fff}.preview-frame-wrap iframe{display:block;border:0;transform-origin:top left;background:#fff}.preview-bottom{padding:20px 24px;display:flex;gap:28px;border-top:1px solid var(--line);align-items:center;justify-content:space-between}.preview-details{min-width:0;max-width:650px}.preview-details>p{font-size:12px;line-height:1.7;color:var(--muted)}.preview-details dl{display:flex;flex-wrap:wrap;gap:12px 22px;margin:12px 0 0;font-size:10px}.preview-details dl>div{display:flex;gap:6px}.preview-details dt{color:var(--muted)}.preview-details dd{margin:0}.preview-actions{display:flex;gap:8px;flex-shrink:0}.action-status{font-size:12px;color:var(--muted);padding:0 24px 16px}.action-status:empty{display:none}.guide-dialog{width:min(650px,94vw);padding:0 30px 28px}.guide-dialog .dialog-heading{padding:20px 0;border-bottom:0}.guide-dialog>h2{font-size:32px;letter-spacing:-1.2px;font-weight:450;margin-top:4px;line-height:1.15}.guide-lead{margin:15px 0 27px;color:var(--muted);font-size:13px;line-height:1.7}.guide-steps{list-style:none;counter-reset:step;padding:0;margin:0}.guide-steps li{counter-increment:step;position:relative;padding:0 0 23px 45px}.guide-steps li:before{content:"0" counter(step);position:absolute;left:0;top:0;font:11px ui-monospace,monospace;padding:6px;background:var(--selected);border-radius:3px}.guide-steps h3{font-size:14px;font-weight:550;padding-top:3px;margin-bottom:9px}.guide-steps p,.guide-note p{font-size:12px;color:var(--muted);line-height:1.8}.guide-note{border-top:1px solid var(--line);padding:20px 0}.guide-note strong{font-size:12px;font-weight:550}.guide-note p{margin-top:8px}.manual-dialog{width:min(650px,94vw);padding:0 24px 24px}.manual-dialog .dialog-heading{padding-left:0;padding-right:0}.manual-dialog>p{font-size:12px;line-height:1.8;color:var(--muted);margin:16px 0}.manual-dialog label{display:block;font-size:11px;margin-bottom:8px}.manual-dialog textarea{resize:vertical;width:100%;height:240px;padding:12px;font:11px/1.6 ui-monospace,monospace;white-space:pre;overflow:auto}.manual-actions{display:flex;gap:8px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);width:max-content;padding:13px 18px;background:var(--text);color:var(--bg);border-radius:6px;box-shadow:var(--shadow);font-size:12px;line-height:1.6;z-index:4}.mobile-only{display:none}.filter-dialog{margin:0 0 0 auto;width:min(360px,94vw);height:100dvh;max-height:100dvh;border-radius:0;border-right:0}.filter-dialog #filter-slot{padding:24px}.filter-dialog #filter-content{position:static}.drawer-done{margin:0 24px 24px;width:calc(100% - 48px)}
@media(min-width:1400px){.component-grid{grid-template-columns:repeat(3,minmax(0,1fr))}main{padding:48px 44px 0}.workspace{grid-template-columns:248px minmax(0,1fr)}.intro{padding-bottom:40px}}
@media(max-width:1100px){.workspace{grid-template-columns:210px minmax(0,1fr)}main{padding:34px 24px 0}.sidebar{padding:28px 15px}.topbar{padding:0 25px;gap:44px}.preview-bottom{align-items:flex-start;flex-direction:column;gap:16px}.footer>span{display:none}}
@media(max-width:767px){.topbar{height:64px;padding:0 20px;gap:30px}.topbar nav{gap:20px}.wordmark{font-size:23px}.brand-mark{margin-right:9px;width:18px;height:21px}.brand-mark:before,.brand-mark:after{width:12px;height:15px}.appearance-label{display:none}.appearance{padding:10px}.workspace{display:block}.sidebar{display:none}.mobile-only{display:inline-flex}main{padding:32px 20px 0}.intro{padding-bottom:26px}h1{font-size:43px;letter-spacing:-2px}.eyebrow{font-size:8px;letter-spacing:1px;margin-bottom:20px}.intro>p{max-width:450px;font-size:12px}.component-grid{grid-template-columns:1fr;gap:22px}.card-preview{height:260px}.results-toolbar{padding:24px 0 20px;gap:8px}.results-toolbar h2{font-size:15px}.sort-control{gap:0}.sort-control label{display:none}.sort-control select{padding-left:0;font-size:10px;max-width:132px}.search-field{padding:0 12px;gap:11px}.search-field input{font-size:12px}.search-field kbd{display:none}.search-row>.button{font-size:11px;padding:10px 13px}.search-row #filter-count:empty{display:none}.search-row #filter-count{font:10px ui-monospace,monospace}.footer{margin-top:36px;gap:20px}.footer p{font-size:9px}.dialog-heading{padding:16px}.dialog-heading h2{font-size:17px}.preview-toolbar{padding:10px;gap:8px;flex-wrap:wrap}.preview-toolbar .small-label{display:none}.viewport-controls button{padding:8px 9px;font-size:10px}.preview-toolbar>a{font-size:10px}.preview-stage{padding:10px;height:48dvh}.preview-bottom{padding:16px;gap:15px}.preview-actions{width:100%;flex-wrap:wrap}.preview-actions .button{flex:1;padding:10px;font-size:11px}.action-status{padding:0 16px 16px}.guide-dialog{padding:0 22px 24px}.guide-dialog>h2{font-size:29px}.guide-steps li{padding-left:38px}.manual-actions{flex-wrap:wrap}}
@media(max-width:380px){.topbar{gap:18px;padding:0 14px}.topbar nav{gap:14px}.topbar nav a,.nav-button{font-size:11px}.brand-mark{display:none}main{padding-left:16px;padding-right:16px}h1{font-size:37px}.eyebrow{font-size:7px}.card-meta .element-count{width:100%;margin-top:4px}.preview-toolbar>a{margin-left:0}}
@media(hover:none){.card-preview .open-hint{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}