:root{--bg:#ffffff;--bg-muted:#f8f9fa;--text:#1d1d1f;--accent:#b7791f;--border:#e1e5e9}@media (prefers-color-scheme: dark){:root{--bg:#0f1113;--bg-muted:#17191c;--text:#f2f4f7;--accent:#d99a32;--border:#2a2f36}}*{box-sizing:border-box}html,body,#root{height:100%}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}button,input,select{font:inherit}input,select{font-size:16px}a{color:inherit;text-decoration:none}.link{color:var(--accent);text-decoration:underline;text-underline-offset:2px}.link:hover{text-decoration:none}.container{max-width:720px;margin:0 auto;padding:16px}@media (max-width:360px){.container{padding:12px}}.header{position:sticky;top:0;-webkit-backdrop-filter:saturate(1.5) blur(8px);backdrop-filter:saturate(1.5) blur(8px);background:color-mix(in oklab,var(--bg) 85%,transparent);border-bottom:1px solid var(--border);z-index:10}.header-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--bg-muted)}.icon-btn svg{width:22px;height:22px;fill:currentColor}.icon-btn.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.icon-btn.icon-circle{border-radius:50%}.icon-btn:focus-visible{outline:2px solid color-mix(in oklab,var(--accent) 70%,black);outline-offset:2px}.title{font-weight:700;letter-spacing:.2px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width:420px){.grid{grid-template-columns:1fr;gap:10px}}.card{border:1px solid var(--border);border-radius:12px;background:var(--bg-muted);padding:12px}.tag{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:4px 10px;background:var(--bg);font-size:.9rem}.search{display:flex;gap:8px}@media (max-width:420px){.search{gap:6px}}input.search-box{flex:1;padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:var(--text)}.btn{padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--bg)}.btn,.icon-btn{min-height:44px}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.section{padding:16px}.h1{font-size:28px;margin:0 0 6px}.h2{font-size:22px;margin:0 0 8px}.back-to-top{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));box-shadow:0 6px 18px #00000026;z-index:20}@media (min-width:768px){.back-to-top{right:24px;bottom:24px}}.sticky-filters{position:sticky;top:calc(var(--header-h,56px) + env(safe-area-inset-top,0px));z-index:9;background:color-mix(in oklab,var(--bg) 92%,transparent);-webkit-backdrop-filter:saturate(1.2) blur(6px);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--border);margin-top:-8px;padding:8px 0}.sticky-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.spirit-grid{grid-template-columns:repeat(3,1fr)}@media (max-width:420px){.spirit-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:768px){.spirit-grid{grid-template-columns:repeat(4,1fr)}}.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);border-radius:12px;background:var(--bg);aspect-ratio:1/1;transition:transform .1s ease,background .2s ease,box-shadow .1s ease;border-color:color-mix(in oklab,var(--border) 90%,transparent);box-shadow:0 1px #00000005;position:relative;overflow:hidden}.tile:hover{transform:translateY(-1px);background:var(--bg-muted)}.tile:active{transform:translateY(0);box-shadow:inset 0 1px 3px #00000014}.tile:focus-visible{outline:2px solid color-mix(in oklab,var(--accent) 70%,black);outline-offset:2px}.tile-img{width:64px;height:64px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--bg-muted);font-size:36px;overflow:hidden}.tile-img img{width:100%;height:100%;object-fit:contain;filter:none}.tile-label{font-weight:600}.tile.full-img{display:block;padding:0}.tile.full-img .tile-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:12px;background:transparent}.tile.full-img .tile-img img{object-fit:cover}.tile.full-img .tile-label{position:absolute;left:8px;bottom:8px;background:#0000008c;color:#fff;padding:4px 8px;border-radius:8px;font-weight:600;font-size:.8rem;line-height:1;-webkit-backdrop-filter:saturate(1.2) blur(4px);backdrop-filter:saturate(1.2) blur(4px)}
