*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#fafafa;--bg-secondary:#fff;--text:#171717;--text-muted:#6b7280;--border:#e5e7eb;--primary:#2563eb;--primary-hover:#1d4ed8;--success:#16a34a;--star:#f59e0b}@media (prefers-color-scheme:dark){:root{--bg:#0a0a0a;--bg-secondary:#171717;--text:#ededed;--text-muted:#9ca3af;--border:#262626;--primary:#3b82f6;--primary-hover:#60a5fa;--success:#22c55e}}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;line-height:1.6}button{cursor:pointer;font-family:inherit;font-size:inherit}.app{flex-direction:column;min-height:100vh;display:flex}.header{border-bottom:1px solid var(--border);background:var(--bg-secondary);justify-content:center;align-items:center;padding:1.5rem;display:flex}.header h1{font-size:1.5rem;font-weight:600}.main{max-width:64rem;margin:0 auto;padding:1.5rem}.controls{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2rem;display:flex}.pill{border:1px solid var(--border);background:var(--bg);color:var(--text-muted);border-radius:2rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:all .15s}.pill:hover{border-color:var(--primary);color:var(--text)}.pill-active{background:var(--primary);border-color:var(--primary);color:#fff}.pill-active:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}.tabs{gap:.5rem;margin-bottom:1rem;display:flex}.tab-btn{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:.375rem;padding:.5rem 1rem}.tab-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}.card-row{flex-wrap:wrap;justify-content:center;gap:1.5rem;display:flex}.card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:.5rem;flex:0 auto;min-width:min(20rem,100%);max-width:28rem;height:min-content;padding:1.25rem}.card h2{margin-bottom:.5rem;font-size:1rem;font-weight:600}.card video{background:#000;border-radius:.5rem;width:100%}.pattern-label{background:color-mix(in srgb,var(--primary)15%,transparent);color:var(--primary);border-radius:.25rem;margin-bottom:.75rem;padding:.25rem .5rem;font-size:.75rem;font-weight:500;display:inline-block}.section-desc{color:var(--text-muted);margin-bottom:1rem;font-size:.875rem}input[type=text],input[type=email],input[type=range]{background:var(--bg);border:1px solid var(--border);width:100%;color:var(--text);border-radius:.375rem;margin-top:.5rem;padding:.5rem}input[type=range]{padding:0}.checkbox-group{flex-direction:column;gap:.5rem;margin-top:.5rem;display:flex}.checkbox-group label{cursor:pointer;align-items:center;gap:.5rem;display:flex}details{border:1px solid var(--border);border-radius:.375rem;margin-bottom:.5rem}details[open]{padding-bottom:.75rem}summary{cursor:pointer;padding:.75rem;font-weight:500}summary:hover{background:var(--bg)}details>div{padding:0 .75rem}.newsletter-form{flex-direction:column;gap:.75rem;display:flex}.newsletter-form button{background:var(--primary);color:#fff;border:none;border-radius:.375rem;padding:.5rem 1rem;font-weight:500}.newsletter-form button:hover:not(:disabled){background:var(--primary-hover)}.newsletter-form button:disabled{opacity:.6;cursor:not-allowed}.success-message{color:var(--success);font-weight:500}.list-view{flex-direction:column;gap:.75rem;max-height:400px;display:flex;overflow-y:auto}.list-item{background:var(--bg);border:1px solid var(--border);cursor:pointer;border-radius:.375rem;padding:1rem}.list-item.selected{background:color-mix(in srgb,var(--primary)10%,var(--bg));border-color:var(--primary)}.list-item-meta{color:var(--text-muted);font-size:.875rem}.table-view{width:100%;max-height:400px;overflow:auto}.table-view table{table-layout:fixed;border-collapse:collapse;width:100%;font-size:clamp(.75rem,2.5vw,.875rem)}.table-view th,.table-view td{border-bottom:1px solid var(--border);text-align:left;padding:.5rem}.table-view th:first-child,.table-view td:first-child{width:35%}.table-view th:nth-child(2),.table-view td:nth-child(2){width:30%}.table-view th:nth-child(3),.table-view td:nth-child(3),.table-view th:nth-child(4),.table-view td:nth-child(4){width:17.5%}.table-view th{background:var(--bg);padding:0;position:sticky;top:0}.table-view th button{width:100%;color:var(--text);font:inherit;font-weight:inherit;text-align:left;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:none;padding:.5rem 1.25rem .5rem .5rem;position:relative}.table-view th button:hover{background:var(--border)}.table-view th button .sort-indicator{position:absolute;right:.25rem}.expand-btn{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:.375rem;padding:.5rem 1rem}.expand-btn:hover{background:var(--border)}.reviews-list{flex-direction:column;gap:1rem;margin-top:1rem;display:flex}.review{background:var(--bg);border:1px solid var(--border);border-radius:.375rem;padding:1rem}.review-author{margin-bottom:.25rem;font-weight:600}.review-rating{color:var(--star);margin-bottom:.5rem}.timer{color:var(--text-muted);font-family:monospace;font-size:.875rem}.timer-btn{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:.25rem;margin-top:.5rem;padding:.25rem .5rem;font-size:.875rem}.timer-btn:hover{background:var(--border)}.skeleton{background:linear-gradient(90deg,var(--border)25%,var(--bg)50%,var(--border)75%);background-size:200% 100%;border-radius:.375rem;animation:1.5s infinite shimmer}.skeleton-text{visibility:hidden}.skeleton-title{width:60%;height:1.375rem;margin-bottom:.4rem}.skeleton-meta{width:80%;height:1.225rem}.skeleton-sm{width:30%;height:1rem;margin-bottom:.5rem}.skeleton-md{width:50%;height:1rem;margin-bottom:.5rem}.skeleton-lg{width:90%;height:1rem;margin-bottom:.5rem}.text-muted{color:var(--text-muted);font-size:.875rem}.visually-hidden{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}