html { font-size: clamp(10px, min(0.84vw, 1.5vh), 22px); }
body { height: 100vh; overflow: hidden; cursor: none; }
.lb { height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 5rem; padding: 3.4rem 5rem 2.6rem; }
.left { display: flex; flex-direction: column; gap: 1.2rem; min-height: 0; }
.left .logo-plate { align-self: flex-start; }
.left .logo-plate img { height: 3.6rem; }
.live { color: var(--ok); font-size: 1.4rem; display: flex; align-items: center; gap: .8rem; margin-top: 1rem; }
.live i { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 1.2rem var(--ok); }
h1 { font-size: 5.6rem; line-height: .9; text-transform: uppercase; }
.podium { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; align-items: end; }
.step { display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center; }
.step .who { font-size: 2.2rem; font-weight: 700; min-height: 2.8rem; }
.step .sc { font-family: var(--mono); font-size: 2.4rem; color: var(--soft); }
.step .blk { width: 100%; border-radius: 1.6rem 1.6rem 0 0; background: var(--panel-2); display: flex; justify-content: center; padding-top: 1rem; font-family: var(--mono); font-size: 4rem; color: var(--muted); }
.step.p1 .blk { height: 15rem; background: var(--accent); color: var(--accent-ink); }
.step.p1 .sc { color: var(--accent); font-size: 3rem; }
.step.p2 .blk { height: 11rem; }
.step.p3 .blk { height: 7.5rem; background: var(--panel); }
.cta { display: flex; gap: 2rem; align-items: center; border: 2px solid var(--line-soft); border-radius: 1.4rem; padding: 1.6rem; }
.cta b { font-size: 2.2rem; display: block; text-transform: uppercase; }
.cta span { font-size: 1.6rem; color: var(--soft); }
.right { display: flex; flex-direction: column; gap: .9rem; padding-top: 2rem; }
.head, #rows li { display: grid; grid-template-columns: 6rem minmax(0, 1fr) 11rem 12rem; align-items: center; padding: 0 2rem; }
.head { font-size: 1.2rem; color: var(--muted); }
.head span:nth-child(n+3), #rows li span:nth-child(n+3) { text-align: right; }
#rows { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
#rows li { height: 5.6rem; border-radius: 1.2rem; background: var(--panel); border: 2px solid transparent; font-size: 2rem; }
#rows li .r { font-family: var(--mono); color: var(--muted); }
#rows li .n { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rows li .s { font-family: var(--mono); color: var(--soft); font-size: 1.6rem; }
#rows li .p { font-family: var(--mono); font-weight: 600; }
#rows li.fresh { border-color: var(--ok); background: rgba(61,220,151,.1); }
.status { margin-top: auto; font-size: 1.2rem; color: var(--muted); }
#rows li.empty { display: block; font-size: 2rem; color: var(--soft); padding: 2rem; }
.lb[hidden], .howto[hidden] { display: none; }
.howto { height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 3.4rem; padding: 4rem 8rem; }
.howto .logo-plate { align-self: flex-start; }
.howto .logo-plate img { height: 3.6rem; }
.howto h1 { font-size: 8rem; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; }
.steps li { background: var(--panel); border: 2px solid var(--line-soft); border-radius: 1.6rem; padding: 2.4rem; display: flex; flex-direction: column; gap: 1.2rem; }
.steps b { font-family: var(--mono); font-size: 3.2rem; color: var(--accent); }
.steps span { font-size: 2.4rem; line-height: 1.3; }
.steps em, .steps i { font-style: normal; color: var(--accent); }
.chal { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; font-size: 1.6rem; color: var(--soft); }