:root{--color-accent: #4f46e5;--color-accent-light: #a5b4fc;--color-text: #1e293b;--color-text-muted: #64748b;--color-bg: #ffffff;--color-surface: #f8fafc;--color-border: #e2e8f0;--thumb-stroke: #1e293b;--thumb-accent: #4f46e5;--thumb-accent-2: #a5b4fc;--thumb-accent-3: #818cf8;--thumb-track: #e2e8f0;--thumb-fill: #f8fafc;--thumb-down: #f87171;--radius-card: 12px;--radius-chip: 999px;--font-sans: "Noto Sans Thai", system-ui, -apple-system, sans-serif}.thumb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:1rem}.thumb--placeholder{background:var(--color-border);border-radius:8px}.thumb svg{width:100%;height:auto;display:block}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-top:2rem}.card{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden;text-decoration:none;color:inherit;background:var(--color-bg);transition:box-shadow .15s,transform .15s}.card:hover{box-shadow:0 4px 16px #00000014;transform:translateY(-2px)}.card:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.card-thumb{background:var(--color-surface);aspect-ratio:4 / 3}.card-body{padding:.625rem .875rem .75rem;display:flex;flex-direction:column;gap:.125rem;border-top:1px solid var(--color-border)}.card-body strong{font-size:.875rem;font-weight:600}.card-body span{font-size:.75rem;color:var(--color-text-muted)}.search-bar{max-width:520px;margin:0 auto 1.25rem;position:relative}.search-input{width:100%;padding:.75rem 1.25rem .75rem 3rem;font-size:1rem;font-family:inherit;border:1.5px solid var(--color-border);border-radius:var(--radius-chip);background:var(--color-surface);color:var(--color-text);transition:border-color .15s,box-shadow .15s;outline:none}.search-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 15%,transparent)}.search-input::placeholder{color:var(--color-text-muted)}.search-bar:before{content:"";position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:1.125rem;height:1.125rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' stroke='%2364748b' stroke-width='1.5'/%3E%3Cline x1='13' y1='13' x2='17' y2='17' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}.filter-chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:.5rem}.filter-chip{padding:.375rem 1rem;font-size:.875rem;font-family:inherit;border:1.5px solid var(--color-border);border-radius:var(--radius-chip);background:var(--color-bg);color:var(--color-text-muted);cursor:pointer;transition:background .12s,color .12s,border-color .12s}.filter-chip:hover{border-color:var(--color-accent-light);color:var(--color-accent)}.filter-chip:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.filter-chip--active,.filter-chip[aria-pressed=true]{background:var(--color-accent);border-color:var(--color-accent);color:#fff;font-weight:600}.no-results{text-align:center;padding:4rem 2rem;color:var(--color-text-muted)}.no-results p{font-size:1.125rem;margin-bottom:1rem}.no-results button{padding:.5rem 1.25rem;font-size:.875rem;font-family:inherit;border:1.5px solid var(--color-border);border-radius:var(--radius-chip);background:var(--color-bg);color:var(--color-text);cursor:pointer}.no-results button:hover{border-color:var(--color-accent);color:var(--color-accent)}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.6}a{color:inherit}header{padding:.875rem 2rem;border-bottom:1px solid var(--color-border)}.brand{font-size:1.125rem;font-weight:800;color:var(--color-accent);text-decoration:none;letter-spacing:-.02em}main{max-width:1200px;margin:0 auto;padding:2rem}footer{padding:2rem;text-align:center;color:var(--color-text-muted);font-size:.875rem;border-top:1px solid var(--color-border);margin-top:4rem}