.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:center;padding:90px 0 110px}.hero h1{margin-bottom:25px}.create-card,.join-panel{background:white;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 20px 50px #16353d0b}.create-card h2{margin-top:0}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.section-title h2{font-size:30px;margin:0}.room-row{background:white;border:1px solid var(--line);padding:16px 18px;border-radius:10px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:22px}.room-row b{font-size:18px;letter-spacing:.1em}.room-row span{display:block;color:var(--muted);font-size:12px;text-transform:capitalize}.room-count{font-weight:800}.room-count small{font-weight:500;color:var(--muted);margin-left:4px}.join-panel{margin:50px 0}.join-panel h1{font-size:52px}.colors,.characters{display:flex;gap:10px}.color{width:30px;height:30px;border:3px solid white;outline:1px solid var(--line);border-radius:50%;background:#24d6a5}.color.yellow{background:#ffca5c}.color.pink{background:#ff6b8a}.color.blue{background:#69a7ff}.color.active{outline:2px solid var(--ink)}.character{background:#edf6f3;border:2px solid transparent;border-radius:9px;min-width:62px;padding:9px;color:var(--ink);font-size:21px}.character small{display:block;font-size:9px}.character.active{border-color:var(--mint)}