*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;background:#1a1a1a;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Helvetica Neue,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}.surface{width:100%;height:100%;display:flex;flex-direction:column;position:relative}.bg-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1.2s cubic-bezier(.4,0,.2,1);pointer-events:none}.surface.expanded .bg-canvas{opacity:.4}.card-area{flex:1;display:flex;align-items:center;justify-content:center;z-index:10;position:relative}.card{width:340px;height:340px;background:#0f0f0f;border-radius:32px;position:relative;overflow:hidden;cursor:pointer;box-shadow:none}#canvas{position:absolute;top:0;left:0;width:100%;height:100%}.card-label{position:absolute;top:24px;left:28px;font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#ffffff40;z-index:10;pointer-events:none;transition:color .8s ease}.surface.expanded .card-label{color:#ffffff80}.card-values{position:fixed;top:40px;right:40px;display:flex;flex-direction:column;gap:8px;z-index:30;pointer-events:none;opacity:0;transition:opacity 1s cubic-bezier(.4,0,.2,1)}.surface.expanded .card-values{opacity:.4}.value-item{display:flex;align-items:baseline;justify-content:flex-end;gap:12px}.value-label{font-size:8px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#ffffff4d}.value{font-size:10px;font-weight:300;font-variant-numeric:tabular-nums;color:#ffffff80;min-width:24px;text-align:right}.city-footer{width:100%;padding:32px 40px;background:transparent;border-top:1px solid rgba(255,255,255,.04);z-index:20;position:relative;transition:opacity .8s ease}.surface.expanded .city-footer{opacity:.2}.city-list{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:flex-start;line-height:1.6}.city-name{font-size:9px;font-weight:400;letter-spacing:.02em;color:#ffffff26;cursor:pointer;transition:color .4s ease;background:none;border:none;padding:1px 0;white-space:nowrap}.city-name:hover{color:#fff6}.city-name.active{color:#ffffffb3}@media(max-width:480px){.card{width:300px;height:300px}.city-footer{padding:24px 20px}.card-values{top:20px;right:20px}}