:root{--background:#fdfdf5;--card:#e8f6f040;--text:#070707;--details-bg:#e8f6f0f2;--details-text:#070707}body.antimatter{--background:#1a001f;--card:#1b191940;--text:#f5d0ff;--details-bg:#03489840;--details-text:#fdfdec}body{background:var(--background);color:var(--text);margin:20px;font-family:system-ui,sans-serif;transition:background .3s,color .3s}h1{text-align:center;margin-bottom:32px}.element-symbol{justify-content:center;align-items:center;height:40px;display:flex}.element-symbol img{width:24px;height:24px}.name{opacity:.8;font-size:12px}.props{opacity:.8;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:2px;margin-top:6px;font-size:11px;display:flex}.props span{white-space:nowrap;align-items:center;gap:4px;display:flex}.lepton{border-left:4px solid #4da6ff}.quark{border-left:4px solid #ff4d4d}.boson{border-left:4px solid #ffd24d}#container{align-items:flex-start;gap:20px;display:flex}.category{background:#badfda40;border-radius:20px;width:380px;padding:12px}.category h2{text-align:center;text-transform:uppercase;letter-spacing:1px;opacity:.8;margin:0 0 10px;font-size:16px}.grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;display:grid}.particle{cursor:pointer;text-align:center;background:var(--card);border:1px solid #444;border-radius:20px;width:70px;height:110px;padding:6px;transition:background .3s,color .3s}.particle:hover{background:#95ecdf40}.general-view-icon{fill:currentColor;width:12px;height:12px;margin-right:4px}.particle-details{z-index:1000;background:#0009;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.particle-details-content{background:var(--details-bg);color:var(--details-text);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #ffffff1a;border-radius:8px;width:90%;max-width:500px;padding:1.5rem}.particle-facts{border-top:1px solid #ffffff1a;margin-top:1rem;padding-top:1rem}.particle-facts h4{margin:0 0 .5rem;font-size:1.1rem}.particle-facts ul{margin:0;padding-left:1.2rem}.particle-facts li{margin-bottom:.3rem;font-size:.95rem}.hidden{display:none}#particle-details-close{float:right;cursor:pointer;color:inherit;background:0 0;border:none;font-size:20px}#filters{align-items:center;gap:20px;margin-bottom:20px;display:flex}.toggle{background:linear-gradient(90deg,var(--color1),var(--color2));border-radius:40px;width:260px;padding:6px;display:inline-flex;position:relative}.toggle-btn{color:#fff;cursor:pointer;z-index:2;background:0 0;border:none;flex:1;padding:12px 0;font-size:16px;font-weight:600;position:relative}.toggle-btn.active{color:var(--active-color)}.toggle-bg{background:#fff;border-radius:40px;width:calc(50% - 6px);height:calc(100% - 12px);transition:transform .3s;position:absolute;top:6px;left:6px}.toggle.right .toggle-bg{transform:translate(100%)}.toggle-matter{--color1:#7b2ff7;--color2:#a64bf4;--active-color:#7b2ff7}.toggle-sorting{--color1:#43f72f;--color2:#4bf49a;--active-color:#68f72f;width:220px}.toggle-interaction{--color1:#2f8ff7;--color2:#4bf4e8;--active-color:#2f8ff7;width:220px}.toggle-generation{--color1:#e8ab13;--color2:#7ae813;--active-color:#43f72f;width:220px}.toggle-select{width:100%;color:var(--active-color);cursor:pointer;appearance:none;z-index:2;background:#fff;border:none;border-radius:40px;padding:12px 40px 12px 20px;font-size:16px;font-weight:600;position:relative}.toggle-arrow{border-left:6px solid #0000;border-right:6px solid #0000;border-top:6px solid var(--active-color);pointer-events:none;z-index:3;width:0;height:0;position:absolute;top:50%;right:20px;transform:translateY(-50%)}.toggle-select:focus{outline:none}.toggle-select option{color:#333;background:#fff}.reset-btn{color:#fff;cursor:pointer;background:#ff4d4d;border:none;border-radius:40px;height:fit-content;padding:10px 20px;font-size:16px;font-weight:600;transition:background .3s}.reset-btn:hover{background:#e60000}