/* layer2.quest */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0b0f19; color: #cbd5e1; font-family: 'Inter', sans-serif; line-height: 1.5; }
.hero { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; }
.brand { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: clamp(2rem, 5vw, 3rem); color: #e2e8f0; }
.subtitle { font-size: 0.8rem; color: #64748b; margin-bottom: 1.5rem; }
.ticker { width: 100%; max-width: 700px; overflow: hidden; background: #151b2b; border-radius: 4px; margin-bottom: 1rem; }
.ticker-track { display: flex; gap: 2rem; animation: ticker 30s linear infinite; white-space: nowrap; padding: 0.5rem 0; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item { font-family: 'Fira Code', monospace; font-size: 0.7rem; color: #38bdf8; }
.live-indicator { display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; color: #4ade80; }
.pulse { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: blink 2s ease infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.protocols { max-width: 700px; margin: 0 auto; padding: 2rem 1.5rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.protocol-panel { flex: 1; min-width: 180px; background: #151b2b; border: 1px solid #2d3a52; border-radius: 8px; padding: 1.25rem; position: relative; }
.rank-badge { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%; background: #38bdf8; color: #0b0f19; font-family: 'Fira Code', monospace; font-size: 0.6rem; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.protocol-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1rem; color: #e2e8f0; margin-bottom: 0.75rem; }
.metric-row { display: flex; justify-content: space-between; margin-bottom: 0.3rem; }
.metric-label { font-size: 0.65rem; color: #64748b; }
.metric-val { font-family: 'Fira Code', monospace; font-size: 0.75rem; color: #cbd5e1; }
.perf-bar { height: 8px; background: #1a2236; border-radius: 4px; margin-top: 0.5rem; overflow: hidden; }
.perf-fill { height: 100%; border-radius: 4px; }
.perf-fill.green { background: #4ade80; }
.perf-fill.blue { background: #38bdf8; }
.perf-fill.orange { background: #fb923c; }
.ranking { max-width: 700px; margin: 0 auto; padding: 2rem 1.5rem; }
.ranking-header { display: flex; padding: 0.5rem 1rem; font-family: 'Fira Code', monospace; font-size: 0.65rem; color: #22d3ee; border-bottom: 1px solid #2d3a52; }
.ranking-row { display: flex; padding: 0.6rem 1rem; font-size: 0.75rem; }
.ranking-row.alt { background: #1a2236; }
.rh-rank, .rr-rank { width: 50px; }
.rh-name, .rr-name { flex: 1; }
.rh-tvl, .rh-tps { width: 80px; text-align: right; }
.rr-val { width: 80px; text-align: right; font-family: 'Fira Code', monospace; font-size: 0.7rem; }
.live-footer { text-align: center; padding: 3rem 1.5rem; }
.spectrum { width: 200px; height: 2px; margin: 0 auto 1rem; background: linear-gradient(to right, #4ade80, #38bdf8, #fb923c); border-radius: 1px; }
.footer-brand { font-size: 0.6rem; color: #2d3a52; display: block; margin-top: 0.5rem; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }