@font-face{font-family:Instrument;src:url('../../assets/instrument-sans-variable.woff2') format('woff2');font-weight:400 700;font-display:swap}
:root{font-family:Instrument,'Segoe UI',sans-serif;color:#1e2228;background:#fafafa;font-synthesis:none;--ink:#24282e;--blue:#6c98ef;--blue-light:#dfebff;--accent-opacity:.7;--scene-opacity:1;--duration-short:180ms;--duration-medium:320ms;--duration-page:520ms;--ease:cubic-bezier(.2,0,0,1)}
*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a,input[type=range]{touch-action:manipulation}button,a{color:inherit}button{cursor:pointer}a{text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,pre:focus-visible{outline:3px solid #416cba;outline-offset:6px}input{min-width:0}button{border:0}button:disabled{cursor:default}.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}[hidden]{display:none!important}
.intro{height:100svh;min-height:580px;position:relative;isolation:isolate;background:#fcfbf8;overflow:clip}.scene-background{position:absolute;inset:0;z-index:-2;overflow:hidden}.scene-background i{position:absolute;display:block;background:var(--blue-light);border-radius:50%;opacity:calc(var(--accent-opacity)*var(--scene-opacity));transform:translate3d(var(--bg-x,0px),var(--bg-y,0px),0);transition:opacity var(--duration-medium) var(--ease);will-change:transform}.scene-background i:nth-child(1){width:56%;height:75%;left:-20%;top:-43%}.scene-background i:nth-child(2){width:40%;height:65%;right:-22%;top:-35%}.scene-background i:nth-child(3){width:80%;height:115%;right:-34%;bottom:-61%}.scene-background i:nth-child(4){width:39%;height:58%;left:-20%;bottom:-26%;opacity:calc(var(--accent-opacity)*var(--scene-opacity)*.6)}
.circuit{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;pointer-events:none}.wire{stroke:#282d33;stroke-width:3;stroke-linecap:round}.wire-accent,.wire-pulse{stroke:var(--blue);stroke-linecap:round;stroke-linejoin:round;stroke-width:3.5}.wire-accent{stroke-dasharray:.085 .24 .065 .26 .08 .27;opacity:calc(var(--accent-opacity)*var(--scene-opacity));transition:opacity var(--duration-medium) var(--ease)}.wire-pulse{stroke-dasharray:.045 .955;stroke-dashoffset:0;stroke-width:5;opacity:0}
.scene-control{position:absolute;display:flex;align-items:center;justify-content:center;flex-direction:column;transform:translate(-50%,-50%);z-index:2}.switch-position{left:22%;top:22%}.search-position{left:79%;top:26%;margin:0}.check-position{left:23%;top:74%}.slider-position{left:62%;top:81%}.control-caption{position:absolute;top:calc(100% + 13px);white-space:nowrap;font-size:12px;font-weight:500;letter-spacing:.01em;color:#616b7b;opacity:0;transform:translateY(-4px);transition:opacity var(--duration-short),transform var(--duration-short);pointer-events:none}.scene-control:hover .control-caption,.scene-control:focus-within .control-caption{opacity:1;transform:translateY(0)}
.scene-switch{width:102px;height:54px;padding:6px;background:linear-gradient(145deg,#363b42,#24282e);border-radius:30px;box-shadow:inset 0 1px 1px #ffffff35,0 7px 13px #282d3310;position:relative}.scene-switch span{display:block;width:42px;height:42px;border-radius:50%;background:#f8f9fb;box-shadow:0 1px 4px #0003;transform:translateX(0);transition:transform var(--duration-medium) var(--ease),background var(--duration-medium)}.scene-switch[aria-checked=true] span{transform:translateX(48px);background:#dfebff}.scene-switch:active{filter:brightness(.96)}
.hero-search-wrap{display:flex;align-items:center;gap:12px;width:280px;height:64px;padding:0 19px;background:#fcfbf9;border:3px solid #292e35;border-radius:34px;box-shadow:0 12px 23px #20263206}.hero-search-wrap svg{width:28px;height:28px;flex:none;fill:none;stroke:#272d34;stroke-width:2;stroke-linecap:round}.hero-search-wrap input{width:100%;height:100%;border:0;background:transparent;outline:0;color:#282d33;font-size:16px}.hero-search-wrap:focus-within{box-shadow:0 0 0 5px #6c98ef26}.hero-search-wrap input:focus-visible{outline:0}.hero-search-wrap input::placeholder{color:#7c8490}.search-key{color:#8c929c;font-size:18px}.hero-search-wrap input::-webkit-search-cancel-button{cursor:pointer}
.hero-copy{position:absolute;left:50%;top:44%;transform:translate(-50%,-0%);width:max-content;max-width:84%;text-align:center;z-index:3}.hero-copy h1{margin:0;font-size:clamp(44px,4.65vw,86px);font-weight:650;line-height:1.06;letter-spacing:-.055em;color:#181d23}.explore{display:inline-flex;align-items:center;justify-content:center;min-height:62px;margin-top:38px;padding:16px 38px;background:linear-gradient(140deg,#383d44,#272c32);color:#fff;font-size:23px;font-weight:500;letter-spacing:-.025em;border-radius:13px;box-shadow:inset 0 1px 1px #ffffff3b,0 8px 16px #262b3010;transition:transform var(--duration-short) var(--ease),box-shadow var(--duration-short)}.explore:hover{transform:translateY(-3px);box-shadow:inset 0 1px 1px #ffffff3b,0 12px 24px #262b3020}.explore:active{transform:translateY(0) scale(.98)}
.check-wrap{display:block;width:66px;height:66px;position:relative}.check-wrap input{appearance:none;position:absolute;inset:0;margin:0;width:100%;height:100%;z-index:2;cursor:pointer;border:0;border-radius:14px;background:transparent}.check-surface{position:absolute;inset:0;border-radius:14px;background:#f9fafc;border:2px solid #b5bfce;box-shadow:0 4px 7px #1a243308;transition:background var(--duration-medium),border-color var(--duration-medium),transform var(--duration-short)}.check-wrap input:checked+.check-surface{background:#2c3138;border-color:#2c3138}.check-surface svg{position:absolute;inset:14px;width:34px;height:34px;fill:none;stroke:white;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:28;stroke-dashoffset:28;transition:stroke-dashoffset var(--duration-medium) var(--ease),opacity var(--duration-short);opacity:0}.check-wrap input:checked+.check-surface svg{stroke-dashoffset:0;opacity:1}.check-wrap input:active+.check-surface{transform:scale(.94)}
.slider-wrap{position:relative;width:300px;height:48px;display:flex;align-items:center}.slider-wrap input{appearance:none;display:block;width:100%;height:13px;border-radius:12px;border:1px solid #777f8a;background:linear-gradient(to right,var(--blue) 0 var(--range-fill,62%),#353c44 var(--range-fill,62%) 100%);cursor:pointer;box-shadow:inset 0 1px 3px #1e283228}.slider-wrap input::-webkit-slider-thumb{appearance:none;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle,#fff 0 7px,transparent 8px),linear-gradient(145deg,#373c43,#252a30);border:0;box-shadow:0 3px 5px #1b28331c}.slider-wrap input::-moz-range-thumb{width:44px;height:44px;border:0;border-radius:50%;background:radial-gradient(circle,#fff 0 7px,transparent 8px),#2b3036}.no-script{position:absolute;bottom:10px;left:20px}.no-script a{text-decoration:underline}
.workspace{min-height:100svh;background:#f6f7f8}.workspace-header{height:100px;background:#ffffffed;border-bottom:1px solid #e2e5e9;display:flex;align-items:center;gap:30px;padding:0 34px;position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}.brand{font-size:22px;font-weight:650;letter-spacing:-.045em;min-width:200px}.brand span{display:block;font-size:12px;letter-spacing:0;color:#77818c;font-weight:400;margin-top:4px}.catalog-search{display:flex;align-items:center;gap:12px;max-width:600px;flex:1;height:48px;background:#f2f4f6;border:1px solid #e3e7eb;border-radius:12px;padding:0 15px}.catalog-search:focus-within{border-color:#6e94da;box-shadow:0 0 0 3px #6c98ef17}.catalog-search svg{width:20px;height:20px;fill:none;stroke:#667384;stroke-width:1.7;flex:none}.catalog-search input{width:100%;border:0;outline:0;background:none;font-size:15px;color:#26303b}.clear-search{font-size:24px;line-height:1;background:transparent;color:#76808a;padding:6px}.original-link{font-size:13px;color:#626e7a;margin-left:auto}.original-link:hover{text-decoration:underline}.workspace-layout{display:grid;grid-template-columns:230px minmax(0,1fr) 310px;align-items:start;max-width:2000px;margin:auto}.categories{padding:32px 20px 30px 28px;position:sticky;top:100px;height:calc(100svh - 100px);border-right:1px solid #e3e7eb;display:flex;flex-direction:column;background:#fafbfc}.sidebar-label{font-size:12px;color:#7b8590;font-weight:500;margin:0 0 18px}.category-nav-button{width:100%;display:flex;align-items:center;gap:11px;padding:13px 12px;min-height:46px;text-align:left;border-radius:10px;background:transparent;color:#596573;font-size:14px;transition:background var(--duration-short),color var(--duration-short)}.category-nav-button:hover{background:#eef1f5}.category-nav-button[aria-pressed=true]{background:#e5edfc;color:#284a86}.category-symbol{font-size:18px;width:20px;text-align:center}.category-count{margin-left:auto;font-size:11px;color:#8a95a2}.sidebar-note{margin-top:auto;padding:25px 10px 0;font-size:12px;line-height:1.8;color:#8a929d}.catalog-content{padding:38px 30px;min-width:0}.catalog-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}.eyebrow{color:#828b98;font-size:12px;margin:0 0 9px}.catalog-heading h2{font-size:34px;line-height:1.1;letter-spacing:-.045em;font-weight:600;margin:0}.catalog-heading h2:focus{outline:none}#result-count{font-size:12px;color:#73808d;white-space:nowrap;padding-bottom:3px}.catalog-intro{font-size:14px;color:#77818e;margin:15px 0 30px;line-height:1.6}.component-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px}.component-card{min-width:0;background:#fff;border:1px solid #e0e5ea;border-radius:15px;overflow:hidden;transition:box-shadow var(--duration-short),border-color var(--duration-short)}.component-card:hover{box-shadow:0 8px 22px #1d35530b;border-color:#c5d1e0}.component-card.is-selected{border-color:#6c98ef;box-shadow:0 0 0 2px #6c98ef15}.preview-window{height:214px;background:#eceef1;position:relative;overflow:hidden;border-bottom:1px solid #edf0f3}.preview-window iframe{position:absolute;width:600px;height:390px;left:50%;margin-left:-300px;top:0;border:0;transform:scale(var(--preview-scale,.56));transform-origin:center top;background:#242424}.card-footer{padding:17px 16px;display:flex;justify-content:space-between;gap:10px;align-items:center}.card-title{font-size:14px;line-height:1.4;font-weight:550;margin:0;color:#343c47}.card-type{font-size:11px;color:#8b949f;margin:5px 0 0}.inspect-button{border:1px solid #e2e7ed;background:#f8f9fb;border-radius:8px;min-height:34px;min-width:52px;color:#647386;font-size:12px;padding:8px}.inspect-button:hover{background:#e8effd;color:#34548c}.inspector{position:sticky;top:100px;height:calc(100svh - 100px);background:#fff;border-left:1px solid #e2e6eb;padding:30px 23px;overflow:auto;scrollbar-width:thin;scrollbar-color:#d6dce5 transparent}.inspector-head{display:flex;justify-content:space-between}.inspector-mark{color:#8798b0}.inspector h3{font-size:23px;letter-spacing:-.04em;line-height:1.2;margin:10px 0 13px;font-weight:600}.inspector-description{font-size:13px;line-height:1.7;color:#788492}.source-page{display:block;margin-top:24px;border-radius:10px;background:#2a3038;color:white;padding:13px;font-size:13px;text-align:center}.download-link{display:block;color:#4b70af;font-size:12px;text-align:center;padding:13px 0}.source-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:18px 0 10px}.source-tabs button{border-radius:5px;background:none;color:#7a8592;font-size:11px;padding:7px}.source-tabs button[aria-selected=true]{background:#e9eef8;color:#35578e}.source-code{font:11px/1.7 Consolas,monospace;background:#f5f7fa;border-radius:9px;padding:12px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:390px;overflow:auto;scrollbar-width:thin;color:#4b5767}.source-note{font-size:11px;color:#858e98;line-height:1.7}.quiet-button{background:#fff;border:1px solid #dce2e9;border-radius:10px;padding:12px 18px;font-size:14px;min-height:44px}.quiet-button:hover{background:#edf2fb}.load-more{display:block;margin:30px auto}.catalog-empty{padding:70px 15px;text-align:center}.catalog-empty h3{font-weight:500}.catalog-empty p{font-size:14px;color:#7c8796}.catalog-error{padding:24px;background:#fff4ec;line-height:1.7}.catalog-error a,.catalog-error button{text-decoration:underline}.catalog-error button{background:none;font-size:inherit}.filter-toggle{display:none}
.preview-window{height:264px;background:radial-gradient(ellipse at 25% 0%,#fafbfd,transparent 95%),linear-gradient(145deg,#f0f2f6,#e7ecf3)}.preview-window sl-preview{display:block;width:100%;max-width:420px;margin-inline:auto;height:100%}.preview-window:has(sl-preview[variant$="-menu"]),.preview-window:has(sl-preview[variant$="-overlay"]),.preview-window:has(sl-preview[variant$="-feedback"]){height:430px}.preview-window:has(sl-preview[variant$="-display"]){height:510px}.preview-window:has(sl-preview[variant$="-v11"]){height:466px}.preview-window:has(sl-preview[data-preview-sizing="content"]){height:auto}.preview-window>sl-preview[data-preview-sizing="content"]{height:auto;min-height:264px}
@media(min-width:1800px){.component-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1200px){.workspace-layout{grid-template-columns:195px minmax(0,1fr)}.inspector{position:static;grid-column:2;height:auto;border-top:1px solid #e2e6eb;min-height:200px}.catalog-content{padding:30px 24px}.workspace-header{padding:0 24px}.categories{padding-left:15px}.brand{min-width:165px}.original-link{display:none}.hero-search-wrap{width:235px;height:58px}.hero-copy h1{font-size:clamp(46px,5.3vw,72px)}}
@media(max-width:700px){.intro{min-height:610px}.hero-copy{top:43%;width:88%;max-width:88%}.hero-copy h1{font-size:clamp(39px,9.4vw,65px);letter-spacing:-.055em;white-space:nowrap}.explore{font-size:17px;min-height:52px;margin-top:26px;padding:13px 25px;border-radius:11px}.switch-position{left:20%;top:21%}.search-position{left:74%;top:26%}.check-position{left:22%;top:73%}.slider-position{left:66%;top:81%}.scene-switch{width:76px;height:42px;padding:5px}.scene-switch span{width:32px;height:32px}.scene-switch[aria-checked=true] span{transform:translateX(34px)}.hero-search-wrap{width:148px;height:48px;padding:0 12px;gap:7px;border-width:2px}.hero-search-wrap svg{width:21px;height:21px}.hero-search-wrap input{font-size:12px}.search-key{display:none}.check-wrap{width:53px;height:53px}.check-surface{border-radius:12px}.check-surface svg{inset:10px;width:29px;height:29px}.check-wrap input{border-radius:12px}.slider-wrap{width:150px}.slider-wrap input{height:10px}.slider-wrap input::-webkit-slider-thumb{width:38px;height:38px;background:radial-gradient(circle,#fff 0 6px,transparent 7px),#2c3239}.slider-wrap input::-moz-range-thumb{width:36px;height:36px}.wire{stroke-width:2}.wire-accent{stroke-width:2.5}.wire-pulse{stroke-width:3}.control-caption{font-size:10px}.workspace-header{height:auto;min-height:86px;padding:17px 18px;gap:13px;flex-wrap:wrap}.brand{font-size:20px;min-width:0;flex:1}.brand span{display:none}.filter-toggle{display:block;font-size:12px;padding:8px 12px;min-height:37px}.catalog-search{order:3;flex-basis:100%;max-width:none;height:45px}.workspace-layout{display:block}.categories{position:sticky;top:122px;height:auto;padding:12px 16px;display:none;z-index:8;border-right:0;border-bottom:1px solid #dce3ed;max-height:55svh;overflow:auto}.categories.is-open{display:block}.sidebar-note,.categories>.sidebar-label{display:none}.categories nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.category-nav-button{font-size:12px;min-height:42px;padding:9px}.category-count{display:none}.catalog-content{padding:29px 18px}.catalog-heading h2{font-size:30px}.catalog-heading{gap:8px}.catalog-intro{font-size:12px;max-width:250px;margin-bottom:24px}.component-grid{grid-template-columns:1fr;gap:18px}.preview-window{height:220px}.card-footer{padding:15px}.inspector{border-left:0;padding:27px 20px}.inspector h3{font-size:22px}.source-code{max-height:300px}#result-count{font-size:10px}.scene-background i:nth-child(3){width:115%;right:-68%}}
@media(max-width:350px){.hero-copy h1{font-size:35px}.hero-search-wrap{width:133px}.hero-search-wrap input{font-size:11px}.slider-wrap{width:130px}.search-position{left:75%}.catalog-heading h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.scene-background i{transform:none!important}}