:root{--pw: 380;--nvis: 3;--pgap: 12px;--pad: 18px;--sheet-bg: #e8eaee;--sheet-card: #ffffff;--sheet-fg: #16191d;--sheet-muted: #5f6873;--sheet-line: #d3d8df;--sheet-accent: #1f5eff;--sheet-star: #d99a00;--sheet-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--sheet-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}html[data-compact]{--pw: 240}html[data-show=light],html[data-show=hybrid],html[data-show=dark]{--nvis: 1}*,*:before,*:after{box-sizing:border-box}html{background:var(--sheet-bg);color:var(--sheet-fg);font-family:var(--sheet-font);-webkit-text-size-adjust:100%}body{margin:0;min-height:100dvh;font-size:.9375rem;line-height:1.5;-webkit-font-smoothing:antialiased}h1,h2,p,figure{margin:0}a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}img{display:block;max-width:100%;height:auto}.bar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;padding:.65rem 1.25rem;background:#ffffffeb;border-bottom:1px solid var(--sheet-line);backdrop-filter:blur(8px)}.bar h1{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin-right:auto;white-space:nowrap}.bar h1 span{font-weight:400;color:var(--sheet-muted)}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}.ctl-label{font-size:.8rem;color:var(--sheet-muted)}.seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--sheet-line);border-radius:999px;background:#f3f4f6}.seg button,.toggle,.copy{border:0;background:transparent;color:var(--sheet-muted);font-size:.8rem;font-weight:600;padding:.35rem .8rem;border-radius:999px;line-height:1.2}.seg button:hover,.toggle:hover,.copy:hover{color:var(--sheet-fg)}.seg button[aria-pressed=true]{background:var(--sheet-fg);color:#fff}.toggle{border:1px solid var(--sheet-line);background:#f3f4f6}.toggle[aria-pressed=true]{background:var(--sheet-fg);border-color:var(--sheet-fg);color:#fff}.count{font-size:.8rem;color:var(--sheet-muted);white-space:nowrap}.count b{color:var(--sheet-fg)}.copy{border:1px solid var(--sheet-accent);color:var(--sheet-accent);background:#fff}.copy:hover{background:var(--sheet-accent);color:#fff}.copy:disabled{opacity:.45;cursor:default}.copy:disabled:hover{background:#fff;color:var(--sheet-accent)}.status{font-size:.8rem;color:var(--sheet-muted);min-width:8ch}.intro{padding:.9rem 1.25rem 0;color:var(--sheet-muted);max-width:80rem}.intro b{font-weight:600;color:var(--sheet-fg)}.grid{display:grid;gap:1rem;padding:1rem 1.25rem 4rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(var(--nvis) * var(--pw) * 1px + (var(--nvis) - 1) * var(--pgap) + 2 * var(--pad) + 2px)),1fr))}.card{background:var(--sheet-card);border:1px solid var(--sheet-line);border-radius:12px;padding:var(--pad);display:flex;flex-direction:column;gap:.85rem;min-width:0}.card[data-baseline]{border-style:dashed;background:#fafbfc}.card[data-starred]{border-color:var(--sheet-star);box-shadow:0 0 0 3px #d99a002e}.card-head{display:flex;align-items:flex-start;gap:.75rem}.card-head .id{font-family:var(--sheet-mono);font-size:.78rem;font-weight:700;letter-spacing:.06em;padding:.25rem .5rem;border-radius:6px;background:var(--sheet-fg);color:#fff;flex:0 0 auto;margin-top:.1rem}.card-head h2{font-size:1.2rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}.card-head h2 a{text-decoration:none}.card-head h2 a:hover{text-decoration:underline}.card-title{flex:1 1 auto;min-width:0}.tag{display:inline-block;margin-top:.3rem;font-family:var(--sheet-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .55rem;border-radius:999px;border:1px solid var(--sheet-line);color:var(--sheet-muted)}.star{flex:0 0 auto;border:1px solid var(--sheet-line);background:#fff;border-radius:999px;width:2.1rem;height:2.1rem;display:inline-grid;place-items:center;font-size:1.15rem;line-height:1;color:#b8bfc8}.star:before{content:"☆"}.star:hover{color:var(--sheet-star);border-color:var(--sheet-star)}.star[aria-pressed=true]{color:var(--sheet-star);border-color:var(--sheet-star);background:#fff8e6}.star[aria-pressed=true]:before{content:"★"}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.meta{color:var(--sheet-muted);font-size:.85rem;display:grid;gap:.2rem}.meta .mono{font-family:var(--sheet-mono);font-size:.75rem}.meta .notes{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.logos{display:flex;flex-wrap:wrap;gap:.5rem;align-items:stretch}.swatch{position:relative;border:1px solid var(--sheet-line);border-radius:8px;padding:.55rem .7rem .95rem;display:grid;place-items:center}.swatch img{width:150px;height:28px;object-fit:contain}.swatch--light{background:#fff}.swatch--hybrid{background:#8b94a1}.swatch--dark{background:#121417}.swatch--mark{background-color:#f4f5f7;background-image:linear-gradient(45deg,#e2e5ea 25%,transparent 25%,transparent 75%,#e2e5ea 75%),linear-gradient(45deg,#e2e5ea 25%,transparent 25%,transparent 75%,#e2e5ea 75%);background-size:12px 12px;background-position:0 0,6px 6px}.swatch--mark img{width:34px;height:34px}.swatch small{position:absolute;left:.45rem;bottom:.2rem;font-family:var(--sheet-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:#00000080}.swatch--dark small{color:#ffffff80}.swatch--hybrid small{color:#ffffffbf}.previews{display:flex;flex-wrap:wrap;gap:var(--pgap)}html[data-show=light] .preview:not([data-theme-preview=light]),html[data-show=hybrid] .preview:not([data-theme-preview=hybrid]),html[data-show=dark] .preview:not([data-theme-preview=dark]){display:none}.preview{display:grid;gap:.35rem}.preview figcaption{font-family:var(--sheet-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sheet-muted)}.frame{position:relative;width:calc(var(--pw) * 1px);height:calc(var(--pw) * 800 / 1280 * 1px);overflow:hidden;border:1px solid var(--sheet-line);border-radius:6px;background:#f3f4f6}.frame iframe{position:absolute;inset:0 auto auto 0;width:1280px;height:800px;border:0;display:block;transform:scale(calc(var(--pw) / 1280));transform-origin:0 0;pointer-events:none;background:#fff}.frame .wait{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--sheet-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#a4acb6}.frame[data-mounted] .wait{display:none}.frame-link{position:absolute;inset:0;z-index:2;display:block;text-decoration:none}.frame-link:after{content:attr(data-label);position:absolute;right:.5rem;bottom:.5rem;padding:.25rem .55rem;border-radius:6px;background:#16191dd9;color:#fff;font-size:.72rem;font-weight:600;opacity:0;transition:opacity .12s ease}.frame-link:hover:after,.frame-link:focus-visible:after{opacity:1}.frame-link:focus-visible{outline:2px solid var(--sheet-accent);outline-offset:2px}.links{display:flex;flex-wrap:wrap;gap:.35rem}.links a{font-size:.78rem;text-decoration:none;padding:.25rem .6rem;border:1px solid var(--sheet-line);border-radius:999px;color:var(--sheet-muted);background:#fff}.links a:hover{color:var(--sheet-fg);border-color:var(--sheet-fg)}.empty{padding:3rem 1.25rem;color:var(--sheet-muted)}:focus-visible{outline:2px solid var(--sheet-accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important}}