.surface-library{min-width:0;width:100%;border:1px solid var(--line,#30363d);border-radius:12px;background:var(--surface,#131619);color:#e8ecf0;overflow:hidden;container-type:inline-size}.surface-library-body{padding:16px}.surface-library-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}.surface-library-kicker{display:block;margin-bottom:5px;color:#c1a898;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}.surface-library .surface-library-heading h3{display:flex;align-items:center;gap:9px;margin:0;font-size:17px;line-height:1.25;letter-spacing:-.25px;color:#f0f2f4}.surface-library-heading h3>span{padding:3px 6px;border-radius:5px;background:#ffffff09;border:1px solid #ffffff12;color:#abb3bd;font-size:10px;font-weight:500;letter-spacing:0}.surface-library .surface-library-intro{margin:9px 0 14px;color:#9da7b3;font-size:12px;line-height:1.55}.surface-library .surface-library-reset{display:inline-flex;align-items:center;justify-content:center;gap:6px;max-width:100%;padding:7px 8px;border:1px solid #3c424a;border-radius:7px;background:#1c2025;color:#b6c0ca;font-size:11px;line-height:1.4;font-weight:500}.surface-library-reset svg{flex-shrink:0}.material-controls .surface-texture-select{min-width:0;max-width:100%}.material-controls .surface-texture-select select{min-width:0;max-width:100%;width:100%}.surface-library .surface-library-reset[aria-pressed=true]{color:#edc4b0;border-color:#815c47;background:#3a291f}.surface-library-filters{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:13px}.surface-library .surface-library-filters button{min-height:30px;padding:5px 8px;border:1px solid #333940;border-radius:6px;background:#1b1f24;color:#adb7c3;font-size:11px;font-weight:500;line-height:1.2}.surface-library .surface-library-filters button[aria-pressed=true]{border-color:#e88358;background:#ff6b3220;color:#ffd0b9}.surface-library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:372px;overflow:auto;padding:3px;margin:-3px;scrollbar-width:thin;scrollbar-color:#59616b #15181c}.surface-library .surface-card{position:relative;display:flex;flex-direction:column;gap:0;align-items:stretch;min-width:0;padding:0;border:1px solid #363c44;border-radius:8px;overflow:hidden;background:#1b1f24;color:#d3dae2;text-align:left;transition:border-color .15s,background .15s}.surface-library .surface-card-image{display:block;position:relative;aspect-ratio:1.6;min-height:48px;overflow:hidden;background:#282b2d}.surface-library .surface-card-image:after{position:absolute;inset:0;content:"";box-shadow:inset 0 0 28px #0002;pointer-events:none}.surface-library .surface-card-image canvas{display:block;width:100%;height:100%;object-fit:cover}.surface-library .surface-card-name{display:block;padding:8px;font-size:11px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}.surface-library .surface-card[aria-pressed=true]{border-color:#ff976b;background:#35251e;color:#ffdccb;box-shadow:0 0 0 1px #ff976b40}.surface-library .surface-card-check{position:absolute;z-index:1;display:grid;place-items:center;top:6px;right:6px;width:21px;height:21px;border:1px solid #ffcbb1;border-radius:50%;background:#ff986a;color:#281b15;box-shadow:0 2px 6px #0005}.surface-library .surface-library-description{min-height:65px;margin-top:13px;padding-top:12px;border-top:1px solid #30353c;color:#a4aeba}.surface-library-description strong{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;color:#e8c7b6;font-size:12px;line-height:1.4}.surface-library-description strong span{color:#8893a0;font-size:10px;font-weight:500}.surface-library .surface-library-description p{margin:4px 0 0;font-size:11px;line-height:1.55}.surface-library .surface-library-description>p:only-child{margin-top:0}.surface-library-compact{flex:1 1 100%;margin-top:2px}.surface-library-compact>summary{display:flex;align-items:center;gap:10px;padding:11px 12px;min-height:60px;cursor:pointer;list-style:none}.surface-library-compact>summary::-webkit-details-marker{display:none}.surface-library-summary-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;overflow:hidden;border:1px solid #414952;border-radius:6px;background:#24292f;color:#d7b09a}.surface-library-summary-icon canvas{display:block;width:100%;height:100%}.surface-library-summary-copy{display:flex;flex-direction:column;flex:1;min-width:0;gap:3px}.surface-library-summary-copy strong{color:#dbe1e8;font-size:12px;font-weight:600;line-height:1.3}.surface-library-summary-copy>span{color:#9da9b7;font-size:11px;line-height:1.3;overflow-wrap:anywhere}.surface-library-chevron{flex-shrink:0;color:#a3adb8;transition:transform .15s}.surface-library-compact[open] .surface-library-chevron{transform:rotate(180deg)}.surface-library-compact[open]>summary{border-bottom:1px solid #30363d}.surface-library-compact .surface-library-body{padding:12px}.surface-library-compact .surface-library-grid{max-height:302px}.surface-library button:disabled{opacity:.5;cursor:not-allowed}.surface-library button:focus-visible,.surface-library-compact>summary:focus-visible{outline:2px solid #ffb78e;outline-offset:2px}.surface-library-compact>summary:focus-visible{outline-offset:-3px}@media (hover:hover){.surface-library .surface-card:hover:enabled{border-color:#e99065;background:#2d2521}.surface-library .surface-library-filters button:hover:enabled,.surface-library .surface-library-reset:hover:enabled{border-color:#dd8b63;color:#ffd7c1}.surface-library-compact>summary:hover{background:#ffffff04}}@container (min-width: 390px){.surface-library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@container (min-width: 570px){.surface-library-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@container (min-width: 850px){.surface-library-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (prefers-reduced-motion:reduce){.surface-library .surface-card,.surface-library-chevron{transition:none}}