/* Canonical chrome for toys.iamkesava.com. Injected into every aggregated toy by scripts/aggregate-toys.mjs. Idempotent: served from /_chrome/ at root. Provides: - .kami-header (sticky top bar: theme left | name+crumb center | hint right) - .kami-footer-fixed (bottom pill, sister sites) - .kami-splash (one-shot splash overlay) Theme variables are namespaced under --kami-* with sensible fallbacks. If a toy sets `data-kami-chrome="off"` on , everything is hidden. */ :root{ --kami-bg:#f6f6f4; --kami-text:#1d1d1f; --kami-text-muted:#4a4a4a; --kami-text-subtle:#bbbbbb; --kami-border:rgba(0,0,0,.08); --kami-link:#6b7280; --kami-link-hover:#1d1d1f; --kami-font-display:'DM Sans', system-ui, -apple-system, sans-serif; --kami-font-body:'DM Sans', system-ui, -apple-system, sans-serif; --kami-font-mono:'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace; --kami-bar-bg:rgba(246,246,244,.9); --kami-bar-border:rgba(0,0,0,.08); --kami-header-h:54px; } html[data-theme="brutalist"]{ --kami-text:#000; --kami-text-muted:#666; --kami-text-subtle:#888; --kami-link:#000; --kami-link-hover:#d946ef; --kami-bar-bg:rgba(255,255,255,.95); --kami-bar-border:#000; --kami-font-display:'JetBrains Mono', ui-monospace, monospace; --kami-font-body:'JetBrains Mono', ui-monospace, monospace; } html[data-theme="editorial"]{ --kami-text:#16140c; --kami-text-muted:#8a2f1b; --kami-text-subtle:#8a2f1b80; --kami-link:#8a2f1b; --kami-link-hover:#2f2a26; --kami-bar-bg:rgba(243,238,226,.94); --kami-bar-border:rgba(22,20,12,.18); --kami-font-display:Georgia, 'EB Garamond', serif; --kami-font-body:Georgia, 'EB Garamond', serif; } html[data-theme="terminal"]{ --kami-text:#26ff9d; --kami-text-muted:rgba(255,209,102,.7); --kami-text-subtle:rgba(255,209,102,.4); --kami-link:#ffd166; --kami-link-hover:#ffe9a8; --kami-bar-bg:rgba(2,8,6,.92); --kami-bar-border:rgba(38,255,157,.22); --kami-font-display:'JetBrains Mono', ui-monospace, monospace; --kami-font-body:'JetBrains Mono', ui-monospace, monospace; } html[data-theme="zen"]{ --kami-text:#3a3a32; --kami-text-muted:#7a8471; --kami-text-subtle:#7a847180; --kami-link:#7a8471; --kami-link-hover:#334155; --kami-bar-bg:rgba(236,234,216,.94); --kami-bar-border:rgba(58,58,50,.12); } html[data-kami-chrome="off"] .kami-header, html[data-kami-chrome="off"] .kami-shortcut-hint, html[data-kami-chrome="off"] .kami-footer-fixed, html[data-kami-chrome="off"] .kami-splash{ display:none !important; } /* ─────────── HEADER BAR (3-column grid) ──────────────────────────────────── */ .kami-header{ position:fixed; top:0; left:0; right:0; z-index:2147483645; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:var(--kami-header-h); padding:0 12px; background:var(--kami-bar-bg); border-bottom:1px solid var(--kami-bar-border); -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%); font-family:var(--kami-font-body); } html[data-theme="brutalist"] .kami-header{ border-bottom:2px solid #000; border-radius:0; -webkit-backdrop-filter:none; backdrop-filter:none; } /* Left column: theme switcher */ .kami-header-left{ display:flex; align-items:center; justify-content:flex-start; gap:8px; overflow:hidden; min-width:0; } /* Center column: name + desc, centered */ .kami-header-center{ display:flex; flex-direction:column; align-items:center; text-align:center; overflow:hidden; padding:0 8px; } .kami-header-name{ font-family:var(--kami-font-display); font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--kami-text); line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .kami-header-desc{ font-size:9px; color:var(--kami-text-muted); line-height:1.2; margin:2px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; display:none; } @media(min-width:480px){ .kami-header-desc{ display:block; } } .kami-header-crumb{ display:none; align-items:center; gap:3px; font-family:var(--kami-font-mono); font-size:9px; line-height:1; margin:0; color:var(--kami-text-subtle); white-space:nowrap; overflow:hidden; } @media(min-width:480px){ .kami-header-crumb{ display:flex; } } .kami-header-crumb a{ color:var(--kami-text-subtle); text-decoration:none; transition:color .15s; } .kami-header-crumb a:hover{ color:var(--kami-text-muted); } .kami-header-crumb-sep{ opacity:.5; user-select:none; } /* Right column: shortcut hint, right-aligned */ .kami-header-right{ display:flex; align-items:center; justify-content:flex-end; } /* ─────────── THEME SWITCHER (inside header) ──────────────────────────────── */ /* When inside .kami-header, override the legacy fixed-position container */ .kami-header .theme-switcher-container{ position:static; } .theme-switcher-pill{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; background:var(--kami-bar-bg); color:var(--kami-text); border:1px solid var(--kami-bar-border); border-radius:6px; cursor:pointer; font-size:14px; line-height:1; transition:transform .15s ease, border-color .15s; } .theme-switcher-pill:hover{ border-color:var(--kami-text); transform:scale(1.04); } .theme-switcher-pill:focus-visible{ outline:2px solid var(--kami-text); outline-offset:2px; } .theme-switcher-pill-icon{ font-family:var(--kami-font-mono); font-size:13px; } html[data-theme="brutalist"] .theme-switcher-pill{ border-radius:0; background:#fff; border:2px solid #000; color:#000; box-shadow:2px 2px 0 #000; } html[data-theme="brutalist"] .theme-switcher-pill:hover{ background:#d946ef; color:#000; box-shadow:3px 3px 0 #000; transform:translate(-1px,-1px); } html[data-theme="editorial"] .theme-switcher-pill{ border-radius:2px; background:transparent; border:1px solid rgba(47,42,38,.25); color:#8a2f1b; } html[data-theme="editorial"] .theme-switcher-pill:hover{ background:#8a2f1b; color:#f8f3ea; } html[data-theme="terminal"] .theme-switcher-pill{ border-radius:0; background:#0d1117; border:1px dashed rgba(255,209,102,.5); color:#ffd166; } html[data-theme="terminal"] .theme-switcher-pill:hover{ background:#ffd166; color:#0d1117; } html[data-theme="zen"] .theme-switcher-pill{ border-radius:999px; background:transparent; border:1px solid rgba(122,132,113,.3); color:#7a8471; } html[data-theme="zen"] .theme-switcher-pill:hover{ background:rgba(122,132,113,.1); color:#334155; } .theme-switcher-picker{ position:absolute; top:calc(100% + 6px); left:0; display:none; flex-direction:column; min-width:140px; padding:4px; background:var(--kami-bar-bg); border:1px solid var(--kami-bar-border); border-radius:8px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 4px 14px rgba(0,0,0,.1); z-index:2147483646; } html[data-theme="brutalist"] .theme-switcher-picker{ border-radius:0; border:2px solid #000; } .theme-switcher-container.open .theme-switcher-picker{ display:flex; } .theme-switcher-option{ display:flex; align-items:center; gap:8px; padding:6px 10px; background:transparent; color:var(--kami-text); border:0; border-radius:5px; cursor:pointer; font-family:var(--kami-font-mono); font-size:11px; letter-spacing:.02em; text-align:left; } html[data-theme="brutalist"] .theme-switcher-option{ border-radius:0; } .theme-switcher-option:hover{ background:rgba(127,127,127,.10); } .theme-switcher-option.active{ background:rgba(127,127,127,.15); font-weight:600; } .theme-switcher-option-icon{ width:14px; text-align:center; } /* Relative-positioned wrapper needed for picker's absolute child */ .theme-switcher-container{ position:relative; } /* ─────────── SHORTCUT HINT (inside header right) ─────────────────────────── */ .kami-shortcut-hint{ font-family:var(--kami-font-mono); font-size:.65rem; color:var(--kami-text-muted); pointer-events:none; } .kami-shortcut-hint kbd{ font-family:var(--kami-font-mono); font-size:10px; padding:1px 5px; margin:0 2px; border:1px solid var(--kami-bar-border); border-radius:3px; background:transparent; color:var(--kami-text-muted); } @media(max-width:640px){ .kami-shortcut-hint{ display:none; } } /* ─────────── FOOTER (fixed bottom pill) ──────────────────────────────────── */ .kami-footer-fixed{ position:fixed; bottom:.6rem; left:50%; transform:translateX(-50%); z-index:2147483643; font-family:var(--kami-font-mono); font-size:.62rem; color:var(--kami-text-subtle); display:flex; align-items:center; gap:.45rem; padding:5px 12px; background:var(--kami-bar-bg); border:1px solid var(--kami-bar-border); border-radius:999px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:.5; transition:opacity .2s ease; white-space:nowrap; } .kami-footer-fixed:hover{ opacity:1; } .kami-footer-fixed a{ color:var(--kami-link); text-decoration:none; transition:color .15s; } .kami-footer-fixed a:hover{ color:var(--kami-link-hover); } .kami-footer-fixed .dot{ opacity:.45; user-select:none; } html[data-theme="brutalist"] .kami-footer-fixed{ border-radius:0; border:2px solid #000; } @media(max-width:640px){ .kami-footer-fixed{ font-size:.55rem; padding:4px 9px; gap:.3rem; bottom:.4rem; } } /* ─────────── SPLASH (one-shot) ───────────────────────────────────────────── */ .kami-splash{ position:fixed; inset:0; z-index:2147483647; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:var(--kami-bg); color:var(--kami-text); font-family:var(--kami-font-body); pointer-events:auto; transition:opacity .45s ease, visibility .45s ease; } html[data-theme="brutalist"] .kami-splash{ background:#fff; } html[data-theme="editorial"] .kami-splash{ background:#f3eee2; } html[data-theme="terminal"] .kami-splash{ background:#020806; color:#26ff9d; } html[data-theme="zen"] .kami-splash{ background:#ecead8; } .kami-splash.hidden{ opacity:0; visibility:hidden; pointer-events:none; } .kami-splash-name{ font-family:var(--kami-font-display); font-size:clamp(28px, 5vw, 44px); font-weight:500; letter-spacing:-.02em; line-height:1; margin:0; } .kami-splash-tag{ font-family:var(--kami-font-mono); font-size:11px; opacity:.55; letter-spacing:.04em; text-transform:lowercase; margin:0; text-align:center; max-width:32ch; } .kami-splash-dot{ width:6px; height:6px; border-radius:50%; background:var(--kami-text); opacity:.5; animation:kami-pulse 1.2s ease-in-out infinite; } @keyframes kami-pulse{ 0%, 100%{ transform:scale(1); opacity:.5; } 50%{ transform:scale(1.5); opacity:1; } } .kami-splash-skip{ position:absolute; bottom:24px; font-family:var(--kami-font-mono); font-size:10px; opacity:.4; letter-spacing:.05em; } .kami-splash-skip kbd{ font-family:var(--kami-font-mono); font-size:10px; padding:1px 5px; border:1px solid var(--kami-bar-border); border-radius:3px; background:transparent; } /* ── GLASS theme overrides (iOS 26 liquid glass) ────────────────────────── */ html[data-theme="glass"]{ --kami-text:#1d1d1f; --kami-text-muted:#3c3c43; --kami-text-subtle:#6e6e73; --kami-link:#007aff; --kami-link-hover:#0071e3; --kami-bar-bg:rgba(255,255,255,0.72); --kami-bar-border:rgba(255,255,255,0.55); --kami-font-display:-apple-system,"SF Pro Display",BlinkMacSystemFont,system-ui,sans-serif; --kami-font-body:-apple-system,"SF Pro Text",BlinkMacSystemFont,system-ui,sans-serif; --kami-font-mono:"SF Mono",ui-monospace,monospace; } html[data-theme="glass"]{ background:linear-gradient(135deg,#c7e0fc 0%,#d8d4fc 28%,#e9d5fb 52%,#fbcfe8 74%,#bbf7d0 100%); background-attachment:fixed; } html[data-theme="glass"] body{ background:transparent; } html[data-theme="glass"] .kami-header{ background:rgba(255,255,255,0.72); border-bottom:1px solid rgba(255,255,255,0.55); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); box-shadow:0 1px 0 rgba(200,220,255,0.25); } html[data-theme="glass"] .theme-switcher-pill{ background:rgba(255,255,255,0.72); border:1px solid rgba(255,255,255,0.55); border-radius:980px; color:#007aff; -webkit-backdrop-filter:saturate(180%) blur(12px); backdrop-filter:saturate(180%) blur(12px); box-shadow:0 2px 10px rgba(0,0,0,0.08),inset 0 0.5px 0 rgba(255,255,255,0.9); } html[data-theme="glass"] .theme-switcher-pill:hover{ background:rgba(255,255,255,0.90); } html[data-theme="glass"] .theme-switcher-picker{ background:rgba(255,255,255,0.82); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border:1px solid rgba(255,255,255,0.55); border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,0.12),inset 0 0.5px 0 rgba(255,255,255,0.8); } html[data-theme="glass"] .theme-switcher-option{ border-radius:12px; } html[data-theme="glass"] .theme-switcher-option.active{ background:rgba(0,122,255,0.12); color:#007aff; } html[data-theme="glass"] .kami-splash{ background:linear-gradient(135deg,#c7e0fc 0%,#d8d4fc 50%,#fbcfe8 100%); } html[data-theme="glass"] .kami-footer-fixed{ background:rgba(255,255,255,0.72); border:1px solid rgba(255,255,255,0.55); border-radius:980px; -webkit-backdrop-filter:saturate(180%) blur(12px); backdrop-filter:saturate(180%) blur(12px); } /* ── MATERIAL theme overrides (MD3 #6750A4 seed) ───────────────────────── */ html[data-theme="material"]{ --kami-text:#1c1b1f; --kami-text-muted:#49454f; --kami-text-subtle:#79747e; --kami-link:#6750a4; --kami-link-hover:#7965af; --kami-bar-bg:color-mix(in srgb,#6750a4 8%,#fffbfe); --kami-bar-border:#cac4d0; --kami-font-display:"Google Sans","Roboto Flex",Roboto,system-ui,sans-serif; --kami-font-body:"Roboto Flex",Roboto,system-ui,sans-serif; --kami-font-mono:"Roboto Mono",ui-monospace,monospace; } html[data-theme="material"] body{ background-color:#fffbfe; color:#1c1b1f; } html[data-theme="material"] .kami-header{ background:color-mix(in srgb,#6750a4 8%,#fffbfe); border-bottom:1px solid #cac4d0; } html[data-theme="material"] .theme-switcher-pill{ background:#eaddff; border:1px solid #cac4d0; border-radius:20px; color:#21005d; } html[data-theme="material"] .theme-switcher-pill:hover{ background:#d0bcff; } html[data-theme="material"] .theme-switcher-picker{ background:#fffbfe; border:1px solid #cac4d0; border-radius:12px; box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23); } html[data-theme="material"] .theme-switcher-option{ border-radius:10px; } html[data-theme="material"] .theme-switcher-option.active{ background:#eaddff; color:#21005d; } html[data-theme="material"] .kami-splash{ background:#fffbfe; } html[data-theme="material"] .kami-footer-fixed{ border-radius:12px; border:1px solid #cac4d0; background:#fffbfe; } /* ── METRO theme overrides (Fluent 2 #0078D4 accent) ───────────────────── */ html[data-theme="metro"]{ --kami-text:#201f1e; --kami-text-muted:#484644; --kami-text-subtle:#797775; --kami-link:#0078d4; --kami-link-hover:#106ebe; --kami-bar-bg:rgba(243,243,243,0.82); --kami-bar-border:#d1d1d1; --kami-font-display:"Segoe UI Variable Display","Segoe UI",Inter,system-ui,sans-serif; --kami-font-body:"Segoe UI Variable Text","Segoe UI",Inter,system-ui,sans-serif; --kami-font-mono:"Cascadia Code","Cascadia Mono",ui-monospace,monospace; } html[data-theme="metro"] body{ background-color:#f3f3f3; color:#201f1e; } html[data-theme="metro"] .kami-header{ background:rgba(243,243,243,0.82); border-bottom:1px solid #d1d1d1; -webkit-backdrop-filter:saturate(120%) blur(20px); backdrop-filter:saturate(120%) blur(20px); } html[data-theme="metro"] .theme-switcher-pill{ background:#fff; border:1px solid #d1d1d1; border-radius:4px; color:#0078d4; box-shadow:0 2px 4px rgba(0,0,0,0.07); } html[data-theme="metro"] .theme-switcher-pill:hover{ background:#f3f2f1; } html[data-theme="metro"] .theme-switcher-picker{ background:#fff; border:1px solid #d1d1d1; border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,0.12); } html[data-theme="metro"] .theme-switcher-option{ border-radius:2px; } html[data-theme="metro"] .theme-switcher-option.active{ background:rgba(0,120,212,0.10); color:#0078d4; } html[data-theme="metro"] .kami-splash{ background:#f3f3f3; } html[data-theme="metro"] .kami-footer-fixed{ border-radius:4px; border:1px solid #d1d1d1; background:#fff; } /* ── Structural layout overrides for chrome per design language ── */ /* Glass: floating frosted pill header */ html[data-theme="glass"] .kami-header { top: 8px !important; margin: 0 8px !important; width: calc(100% - 16px) !important; border-radius: 18px !important; min-height: 46px !important; } /* Glass: footer pill */ html[data-theme="glass"] .kami-footer-fixed { bottom: 12px !important; border-radius: 980px !important; } /* Material: standard top-app-bar height */ html[data-theme="material"] .kami-header { min-height: 64px !important; padding: 0 16px !important; } /* Metro: compact command-bar header */ html[data-theme="metro"] .kami-header { min-height: 44px !important; padding: 0 12px !important; border-radius: 0 !important; border-bottom: 1px solid #d1d1d1 !important; } /* Glass: body offset so content clears floating header */ html[data-theme="glass"] body { padding-top: 8px; } /* ============================================================ TOY HOMEPAGE LAYOUT — glass / material / metro Covers .home-grid, .home-title, .home-search, .home-chip used on wordart / pixart / poster index pages. ============================================================ */ /* ── Glass: spacious 2-col grid, large frosted search ── */ html[data-theme="glass"] .home-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important; gap: 24px !important; } html[data-theme="glass"] .home-title { font-family: -apple-system, "SF Pro Display", BlinkMacSystemFont, system-ui, sans-serif !important; letter-spacing: -0.04em !important; font-weight: 700 !important; } html[data-theme="glass"] .home-search { background: rgba(255,255,255,0.68) !important; border: 1px solid rgba(255,255,255,0.55) !important; border-radius: 12px !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; height: 44px !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; } html[data-theme="glass"] .home-search:focus-within { border-color: rgba(0,122,255,0.50) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 0 0 3px rgba(0,122,255,0.15) !important; } html[data-theme="glass"] .home-chip { font-family: -apple-system, "SF Pro Text", BlinkMacSystemFont, system-ui, sans-serif !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; border-radius: 980px !important; padding: 5px 14px !important; background: rgba(255,255,255,0.55) !important; border: 1px solid rgba(255,255,255,0.45) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; opacity: 0.85 !important; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), background 0.25s cubic-bezier(0.34,1.56,0.64,1) !important; } html[data-theme="glass"] .home-chip:hover { transform: scale(1.04) !important; } html[data-theme="glass"] .home-chip.active { background: rgba(0,122,255,0.15) !important; border-color: rgba(0,122,255,0.35) !important; color: #007aff !important; opacity: 1 !important; } /* ── Material: compact 4-col grid, M3 filled search ── */ html[data-theme="material"] .home-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 12px !important; } html[data-theme="material"] .home-title { font-family: "Google Sans", "Roboto Flex", Roboto, system-ui, sans-serif !important; letter-spacing: -0.025em !important; font-weight: 400 !important; } html[data-theme="material"] .home-search { background: color-mix(in srgb, #6750a4 8%, #fffbfe) !important; border: none !important; border-bottom: 1px solid #79747e !important; border-radius: 4px 4px 0 0 !important; height: 56px !important; } html[data-theme="material"] .home-search:focus-within { border-bottom: 2px solid #6750a4 !important; background: color-mix(in srgb, #6750a4 12%, #fffbfe) !important; } html[data-theme="material"] .home-chip { font-family: "Google Sans", Roboto, system-ui, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.01em !important; border-radius: 8px !important; padding: 6px 16px !important; background: transparent !important; border: 1px solid #cac4d0 !important; color: #1c1b1f !important; opacity: 1 !important; transition: background 100ms cubic-bezier(0.05,0.7,0.1,1.0) !important; } html[data-theme="material"] .home-chip:hover { background: rgba(103,80,164,0.08) !important; } html[data-theme="material"] .home-chip.active { background: #eaddff !important; border-color: #6750a4 !important; color: #21005d !important; } /* ── Metro: compact 4-col grid, Fluent search ── */ html[data-theme="metro"] .home-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 8px !important; } html[data-theme="metro"] .home-title { font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif !important; letter-spacing: -0.01em !important; font-weight: 600 !important; } html[data-theme="metro"] .home-search { background: #ffffff !important; border: 1px solid #8a8a8a !important; border-radius: 4px !important; height: 32px !important; } html[data-theme="metro"] .home-search:focus-within { border-color: #0078d4 !important; box-shadow: 0 0 0 1px #0078d4 !important; } html[data-theme="metro"] .home-chip { font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0 !important; border-radius: 2px !important; padding: 4px 10px !important; background: #ffffff !important; border: 1px solid #d1d1d1 !important; color: #201f1e !important; opacity: 1 !important; transition: background 83ms !important; } html[data-theme="metro"] .home-chip:hover { background: rgba(0,120,212,0.04) !important; border-color: #0078d4 !important; } html[data-theme="metro"] .home-chip.active { background: rgba(0,120,212,0.08) !important; border-color: #0078d4 !important; color: #0078d4 !important; } /* ── Effect cards (.pix-card) per design language ── */ html[data-theme="glass"] .pix-card { background: rgba(255,255,255,0.62) !important; border: 1px solid rgba(255,255,255,0.55) !important; border-radius: 18px !important; backdrop-filter: saturate(180%) blur(12px) !important; -webkit-backdrop-filter: saturate(180%) blur(12px) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.06), inset 0 0.5px 0 rgba(255,255,255,0.85) !important; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s cubic-bezier(0.34,1.56,0.64,1) !important; } html[data-theme="glass"] .pix-card:hover { transform: scale(1.03) translateY(-3px) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.12), inset 0 0.5px 0 rgba(255,255,255,0.85) !important; border-color: rgba(0,122,255,0.30) !important; } html[data-theme="glass"] .pix-card-name { font-family: -apple-system, "SF Pro Text", BlinkMacSystemFont, system-ui, sans-serif !important; font-weight: 600 !important; letter-spacing: -0.02em !important; font-size: 14px !important; } html[data-theme="material"] .pix-card { background: color-mix(in srgb, #6750a4 5%, #fffbfe) !important; border: none !important; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04) !important; transition: box-shadow 200ms cubic-bezier(0.05,0.7,0.1,1.0), transform 200ms cubic-bezier(0.05,0.7,0.1,1.0) !important; } html[data-theme="material"] .pix-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.08) !important; transform: translateY(-1px) !important; } html[data-theme="material"] .pix-card-name { font-family: "Google Sans", Roboto, system-ui, sans-serif !important; font-weight: 500 !important; letter-spacing: 0 !important; color: #1c1b1f !important; } html[data-theme="material"] .pix-card-badge { background: #eaddff !important; color: #21005d !important; border-radius: 4px !important; border: none !important; } html[data-theme="metro"] .pix-card { background: #ffffff !important; border: 1px solid #d1d1d1 !important; border-radius: 4px !important; box-shadow: none !important; transition: border-color 83ms !important; } html[data-theme="metro"] .pix-card:hover { border-color: #0078d4 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; } html[data-theme="metro"] .pix-card-name { font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif !important; font-weight: 400 !important; letter-spacing: 0 !important; font-size: 14px !important; color: #201f1e !important; } html[data-theme="metro"] .pix-card-badge { background: rgba(0,120,212,0.08) !important; color: #0078d4 !important; border-radius: 2px !important; border-color: rgba(0,120,212,0.20) !important; } /* ─────────── FOOTER (3-row wa-bottom) ──────────────────────────────────── */ .wa-bottom{ position:fixed;left:0;right:0;bottom:0; padding:8px 16px 10px; display:flex;flex-direction:column;align-items:center;gap:4px; background:color-mix(in srgb,var(--kami-bg,#f6f6f4) 88%,transparent); border-top:1px solid var(--kami-border,rgba(0,0,0,.08)); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); z-index:50; font-size:.7rem;color:var(--kami-text-subtle,rgba(20,20,22,.55)); } .wa-bottom .row{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center;} .wa-bottom .row.aeo{font-family:var(--kami-font-mono,"JetBrains Mono",ui-monospace,monospace);font-size:.65rem;} .wa-bottom .row.made{font-size:.68rem;opacity:.82;} .wa-bottom a{color:var(--kami-text,#1d1d1f);text-decoration:none;opacity:.65;transition:opacity .15s;} .wa-bottom a:hover{opacity:1;} .wa-bottom .sep{opacity:.35;user-select:none;} .wa-bottom .current{font-weight:600;opacity:1;} html[data-theme="brutalist"] .wa-bottom{background:var(--kami-bg,#fff);border-top:2px solid #000;backdrop-filter:none;-webkit-backdrop-filter:none;} html[data-theme="terminal"] .wa-bottom{background:rgba(2,8,6,.92);border-top:1px solid rgba(38,255,157,.18);color:rgba(38,255,157,.55);} html[data-theme="terminal"] .wa-bottom a{color:#26ff9d;} html[data-theme="zen"] .wa-bottom{background:rgba(247,249,251,.92);border-top:1px solid rgba(122,132,113,.12);} html[data-theme="glass"] .wa-bottom{background:rgba(255,255,255,.72);border-top:0.5px solid rgba(255,255,255,.45);box-shadow:0 -0.5px 0 rgba(0,0,0,.06);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:#3c3c43;} html[data-theme="glass"] .wa-bottom a{color:#007aff;} html[data-theme="material"] .wa-bottom{background:color-mix(in srgb,#6750a4 3%,#fffbfe);border-top:1px solid #cac4d0;color:#49454f;} html[data-theme="material"] .wa-bottom a{color:#6750a4;} html[data-theme="metro"] .wa-bottom{background:rgba(249,249,249,.97);border-top:1px solid #d1d1d1;-webkit-backdrop-filter:saturate(120%) blur(40px);backdrop-filter:saturate(120%) blur(40px);color:#605e5c;} html[data-theme="metro"] .wa-bottom a{color:#0078d4;}