body{background:#0b0e11;color:#e0e0e0;font-family:Inter,sans-serif;margin:0;display:flex;flex-direction:column;height:100vh;overflow:hidden}header{background:#1c1f24;padding:.75rem 2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 12px #0009;z-index:100}.logo{display:flex;align-items:center;gap:12px}h1{font-size:1.25rem;margin:0;color:#fff;letter-spacing:-.5px}h1 a{text-decoration:none;color:inherit}h1 a:hover{opacity:.8}.badge{background:#c23c2a;color:#fff;padding:2px 8px;border-radius:4px;font-size:.75rem;font-weight:700;text-transform:uppercase}.controls{display:flex;align-items:center;gap:8px}.config-btn{background:#2a2e35;color:#888;padding:.5rem 1rem;border:1px solid #3f444e;border-radius:6px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s ease}.config-btn:hover{border-color:#555c69;color:#ccc}.config-btn.active{background:#c23c2a;color:#fff;border-color:#c23c2a;box-shadow:0 0 15px #c23c2a4d}#grid-container{position:relative;flex-grow:1;overflow:auto;padding:0;background-color:#0b0e11;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:40px 40px}#scale-wrapper{position:relative;transform-origin:top left}.category{position:absolute;background:#1c1f24e6;border:1px solid #3f444e;border-radius:0;padding:6px;box-shadow:0 8px 16px #0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.category-header{font-size:.85rem;font-weight:700;margin-bottom:8px;border-bottom:1px solid #3f444e;padding-bottom:6px;color:gold;text-transform:uppercase;letter-spacing:.5px}.hero-list{display:flex;flex-wrap:wrap;gap:4px}.hero-box{position:relative;width:69px;height:39px;border-radius:3px;overflow:hidden;cursor:default;border:1px solid #3f444e;transition:transform .12s ease,box-shadow .12s ease}.hero-box img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}.hero-box .hero-name{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000000d9);color:#fff;font-size:.42rem;font-weight:700;text-align:center;padding:3px 2px 2px;text-transform:uppercase;letter-spacing:.2px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .12s ease}.hero-box:hover{border-color:#c23c2a;transform:translateY(-2px) scale(1.05);box-shadow:0 4px 12px #0009,0 0 10px #c23c2a80;z-index:10}.hero-box:hover .hero-name{opacity:1}