* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --green:#00897b;
  --green-d:#00695c;
  --blue:#1a73e8;
  --blue-d:#1765cc;
  --ink:#202124;
  --muted:#5f6368;
  --line:#dadce0;
}
body{
  font-family: "Google Sans","Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.topbar{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 26px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.logo{ display:flex; }
.brand-name{ font-size:22px; color:var(--muted); letter-spacing:.2px; }
.clock{ color:var(--muted); font-size:15px; }

.lobby{
  flex:1;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:center;
  gap:40px;
  max-width:1180px;
  width:100%;
  margin:0 auto;
  padding:20px 48px 60px;
}
.hero h1{
  font-size:44px;
  line-height:1.15;
  font-weight:400;
  letter-spacing:-.5px;
}
.hero .sub{
  margin-top:18px;
  font-size:20px;
  color:var(--muted);
  font-weight:400;
}
.actions{ margin-top:38px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.btn-new{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--blue); color:#fff; border:none;
  padding:12px 22px; border-radius:8px; font-size:16px; cursor:pointer;
  font-family:inherit; transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.btn-new:hover{ background:var(--blue-d); box-shadow:0 2px 6px rgba(0,0,0,.25); }

.join-box{
  display:flex; align-items:center; gap:6px;
  border:1px solid var(--line); border-radius:8px;
  padding:4px 4px 4px 14px; height:50px;
}
.join-box:focus-within{ border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
.kbd-icon{ display:flex; }
#codeInput{
  border:none; outline:none; font-size:16px; width:210px;
  font-family:inherit; color:var(--ink); background:transparent;
}
.btn-join{
  background:transparent; border:none; color:#9aa0a6;
  font-size:16px; font-weight:600; padding:8px 14px; cursor:not-allowed;
  font-family:inherit; border-radius:6px;
}
.btn-join.active{ color:var(--blue); cursor:pointer; }
.btn-join.active:hover{ background:#e8f0fe; }

.divider{ border:none; border-top:1px solid var(--line); margin:40px 0 20px; }
.learn{ color:var(--muted); font-size:14px; }
.learn b{ color:var(--blue); cursor:pointer; }

.illustration{ text-align:center; }
.illu-circle{ width:min(430px,90%); margin:0 auto; }
.illu-title{ margin-top:18px; font-size:26px; font-weight:400; }
.illu-sub{ margin-top:10px; color:var(--muted); font-size:15px; max-width:340px; margin-left:auto; margin-right:auto; }

@media (max-width:900px){
  .lobby{ grid-template-columns:1fr; text-align:center; padding:20px 24px 50px; }
  .actions{ justify-content:center; }
  .hero h1{ font-size:34px; }
  .illustration{ order:-1; }
  .illu-circle{ width:220px; }
}