:root{color-scheme:light;--accent: #17c3c3;--accent-deep: #0c6e70;--accent-pressed: #119c9e;--accent-tint: rgba(23, 195, 195, .1);--text-on-accent: #0a2e2e;--hero: #296661;--bg: #f4f4f2;--surface: #ffffff;--surface-2: #ecece8;--text: #161616;--text-secondary: #6b7270;--separator: #e4e4e0;--radius-card: 16px;--radius-pill: 12px;--gap: 12px;--pad: 16px;--shadow-card: 0 1px 3px rgba(0, 0, 0, .06);--font-display: "Nunito", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}:root[data-theme=dark]{color-scheme:dark;--accent: #22d3d3;--accent-deep: #17c3c3;--accent-pressed: #2ee6e6;--accent-tint: rgba(34, 211, 211, .14);--text-on-accent: #051817;--hero: #0e7a77;--bg: #0e1413;--surface: #1a2120;--surface-2: #232c2b;--text: #f2f4f3;--text-secondary: #8a9694;--separator: #283230}*{box-sizing:border-box}html,body,#root{height:100%}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;-webkit-font-smoothing:antialiased}.app{max-width:720px;margin:0 auto;min-height:100%}.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--separator)}.app-header{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);padding:14px var(--pad) 10px}.category-nav{display:flex;gap:8px;overflow-x:auto;padding:0 var(--pad) 10px;scrollbar-width:none}.category-nav::-webkit-scrollbar{display:none}.cat-chip{flex:none;border:0;background:var(--surface-2);color:var(--text-secondary);font-family:var(--font-body);font-weight:600;font-size:14px;padding:7px 14px;border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}.cat-chip-active{background:var(--accent);color:var(--text-on-accent)}.brand{display:flex;align-items:baseline;gap:8px}.brand-name{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--accent-deep);letter-spacing:-.01em}.brand-sub{font-size:14px;color:var(--text-secondary);text-transform:lowercase}.lang{display:flex;gap:4px;background:var(--surface-2);padding:3px;border-radius:var(--radius-pill)}.lang-btn{border:0;background:transparent;color:var(--text-secondary);font-family:var(--font-body);font-weight:600;font-size:13px;padding:6px 9px;border-radius:9px;cursor:pointer;transition:background .15s,color .15s}.lang-active{background:var(--surface);color:var(--accent-deep);box-shadow:var(--shadow-card)}.content{padding:var(--pad) var(--pad) 40px}.section{margin-bottom:28px;scroll-margin-top:calc(var(--topbar-h, 100px) + 8px)}.section-title{position:sticky;top:var(--topbar-h, 100px);z-index:10;margin:0 0 var(--gap);padding:6px 0;font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--text);background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.grid{display:grid;grid-template-columns:1fr;gap:var(--gap)}@media(min-width:480px){.grid{grid-template-columns:1fr 1fr}}.card{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card)}.card-media{aspect-ratio:4 / 3;background:var(--surface-2);overflow:hidden}.card-media img{width:100%;height:100%;object-fit:cover;display:block}.card-body{padding:12px 14px 14px}.card-name{margin:0;font-family:var(--font-display);font-weight:700;font-size:16px;line-height:1.25;color:var(--text)}.card-desc{margin:4px 0 0;font-size:13px;color:var(--text-secondary);line-height:1.35}.card-variants{margin:6px 0 0;font-size:12px;font-weight:600;color:var(--accent-deep)}.ph{width:100%;height:100%;display:grid;place-items:center;color:var(--text-secondary);opacity:.5}.ph svg{width:34%;height:34%}.notice{text-align:center;color:var(--text-secondary);padding:48px 16px}.retry{margin-top:12px;border:0;background:var(--accent);color:var(--text-on-accent);font-family:var(--font-body);font-weight:600;padding:10px 18px;border-radius:var(--radius-pill);cursor:pointer}.card-skeleton .card-body{padding:14px}.sk-line{height:14px;border-radius:7px;background:var(--surface-2)}.card-skeleton .card-media,.card-skeleton .sk-line{animation:pulse 1.3s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.55}}
