:root{--bg: #fbfaf7;--surface: #ffffff;--surface-2: #f4f2ec;--border: #e7e3d9;--text: #2a2722;--text-sub: #7a7468;--text-faint: #aaa498;--accent: #2f8f7d;--accent-soft: #e3f1ee;--success: #1d9e75;--success-soft: #e6f5ee;--warn: #d98a1f;--warn-soft: #fbefda;--danger: #d0473f;--danger-soft: #fbe9e7;--shadow: 0 1px 2px rgba(40, 35, 28, .04);--cat-nonmetal-bg: #eaf3de;--cat-nonmetal-fg: #2c4a10;--cat-noble-gas-bg: #eeedfe;--cat-noble-gas-fg: #312a6e;--cat-alkali-bg: #faece7;--cat-alkali-fg: #6a2a13;--cat-alkaline-earth-bg: #faeeda;--cat-alkaline-earth-fg: #5c3503;--cat-metalloid-bg: #e1f5ee;--cat-metalloid-fg: #0a463b;--cat-transition-bg: #e6f1fb;--cat-transition-fg: #0b3a66;--cat-post-transition-bg: #fbeaf0;--cat-post-transition-fg: #642038;--cat-halogen-bg: #fcebeb;--cat-halogen-fg: #6b1c1c;--font-display: "Zen Maru Gothic", system-ui, sans-serif;--font-body: "Zen Kaku Gothic New", system-ui, sans-serif;--font-sym: "Outfit", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}.app-shell{max-width:440px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--bg);display:flex;flex-direction:column;position:relative;overflow:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px}.app-title{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.02em}.app-subtitle{font-size:11px;color:var(--text-sub);margin-top:1px}.streak-badge{display:inline-flex;align-items:center;gap:4px;background:var(--warn-soft);color:var(--warn);font-weight:700;font-size:13px;padding:5px 11px;border-radius:999px}.app-content{flex:1;padding:4px 18px 96px;overflow-y:auto}.tabbar{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:440px;display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-top:1px solid var(--border);padding:8px 8px calc(8px + env(safe-area-inset-bottom));z-index:20}.tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font-size:11px;color:var(--text-faint);border-radius:12px;transition:color .15s,background .15s}.tabbar button.active{color:var(--accent);background:var(--accent-soft);font-weight:700}.tabbar .tab-ico{font-size:20px;line-height:1}.card{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:700;border-radius:14px;padding:14px 16px;transition:transform .08s ease,filter .15s}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:#fff}.btn-soft{background:var(--surface-2);color:var(--text)}.btn-success{background:var(--success-soft);color:var(--success);border:1px solid #bfe5d3}.btn-warn{background:var(--warn-soft);color:var(--warn);border:1px solid #efd4a4}.el-cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border-radius:5px;font-family:var(--font-sym);font-weight:600;line-height:1;-webkit-user-select:none;user-select:none;transition:transform .1s}.el-cell:active{transform:scale(.9)}.el-cell .el-num{font-size:6.5px;opacity:.65;margin-bottom:1px}.el-cell .el-sym{font-size:11px}.el-cell.faded{opacity:.3}.el-cell.selected{outline:2px solid var(--text);outline-offset:1px;z-index:3}.el-cell.dot:after{content:"";position:absolute;top:2px;right:2px;width:4px;height:4px;border-radius:50%;background:var(--success)}.el-cell.pulse{animation:pulse .7s ease}@keyframes pulse{0%{transform:scale(1)}35%{transform:scale(1.25);box-shadow:0 0 0 3px #2f8f7d59}to{transform:scale(1)}}.cat-nonmetal{background:var(--cat-nonmetal-bg);color:var(--cat-nonmetal-fg)}.cat-noble-gas{background:var(--cat-noble-gas-bg);color:var(--cat-noble-gas-fg)}.cat-alkali{background:var(--cat-alkali-bg);color:var(--cat-alkali-fg)}.cat-alkaline-earth{background:var(--cat-alkaline-earth-bg);color:var(--cat-alkaline-earth-fg)}.cat-metalloid{background:var(--cat-metalloid-bg);color:var(--cat-metalloid-fg)}.cat-transition{background:var(--cat-transition-bg);color:var(--cat-transition-fg)}.cat-post-transition{background:var(--cat-post-transition-bg);color:var(--cat-post-transition-fg)}.cat-halogen{background:var(--cat-halogen-bg);color:var(--cat-halogen-fg)}.cat-unknown{background:var(--surface-2);color:var(--text-faint)}.section-title{font-family:var(--font-display);font-weight:700;font-size:15px;margin:18px 2px 10px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.fade-in{animation:fadeIn .25s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}