:root{color-scheme:light;font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;--radius: 8px;--pad: 12px;--gap: 12px;--panel-bg: #f2f2f2;--overlay-color: rgba(255, 255, 255, .85);--overlay-font-size: 12px;--panel-font-size: 15px}html,body,#root{margin:0;height:100%;background:#fff}.page{min-height:100vh;display:flex;flex-direction:column;gap:var(--gap);padding:var(--gap)}.msg{font-size:12px;color:#888;letter-spacing:.04em;text-transform:uppercase;margin:0}.msg-error{color:#c44}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));grid-auto-flow:dense;gap:var(--gap);width:100%}.intro-wrapper{grid-column:1 / span 2;grid-row:1;display:flex;flex-direction:column;gap:var(--gap);min-width:0}.top-utilities{grid-row:1;grid-column:-2 / -1;display:flex;gap:var(--gap);align-items:flex-start;align-self:start;min-width:0}.cell{position:relative;aspect-ratio:1 / 1;background:#fafafa;border-radius:var(--radius);cursor:pointer;transition:border-radius .3s ease;--cell-shade: 0, 0, 0;--cell-shade-color: color-mix(in srgb, rgb(var(--cell-shade)) 75%, #000)}.cell:hover{z-index:1}.grid.mode-circles .cell{border-radius:var(--circle-radius, 42%);transform:scale(var(--cell-scale, .55));transform-origin:center;transition:transform .12s ease-out;z-index:var(--cell-z, 0);cursor:default}.grid.mode-circles .cell-date,.grid.mode-circles .cell-temp{display:none!important}.cell-arc{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;display:none}.grid.mode-circles .cell:hover .cell-arc{display:block}.cell-arc-text{fill:#fff;font-family:Geist Mono,ui-monospace,SFMono-Regular,Menlo,monospace;font-size:5px;letter-spacing:.06em;text-transform:uppercase}.cell-expanded{grid-column:span 2;grid-row:span 2;z-index:10;cursor:zoom-out}.cell.is-animating{will-change:transform;z-index:10}.cell.is-animating .cell-date,.cell.is-animating .cell-temp{opacity:0}.cell-expanded:hover img.is-ready{outline:none}.cell-expanded:after{opacity:1!important;background:linear-gradient(to top,color-mix(in srgb,var(--cell-shade-color) 55%,transparent) 0%,color-mix(in srgb,var(--cell-shade-color) 25%,transparent) 40%,transparent 70%),linear-gradient(to bottom,color-mix(in srgb,var(--cell-shade-color) 30%,transparent) 0%,color-mix(in srgb,var(--cell-shade-color) 12%,transparent) 35%,transparent 55%)!important}.cell-expanded .cell-date-short,.cell-expanded .cell-date-long,.cell-expanded .cell-temp-short,.cell-expanded .cell-temp-long{display:none}.cell-detail{position:absolute;inset:auto var(--pad) var(--pad) var(--pad);z-index:4;color:#fff;pointer-events:none;display:flex;flex-direction:column;gap:12px;animation:cell-detail-in .22s ease-out both}@keyframes cell-detail-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.cell-detail-head{display:flex;flex-direction:column;gap:2px}.cell-detail-date{font-family:Geist Mono,ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.04em;text-transform:uppercase;opacity:.8}.cell-detail-weather{font-size:22px;font-weight:500;line-height:1.1}.cell-detail-line{position:absolute;top:var(--pad);right:var(--pad);z-index:4;margin:0;max-width:22ch;color:#fff;font-size:12.5px;line-height:1.45;text-align:right;opacity:.85;pointer-events:none;animation:cell-detail-in .22s ease-out both}.cell-detail-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px 0;margin:0;padding:0;font-size:12px}.cell-detail-stats>div{display:flex;flex-direction:column;gap:3px}.cell-detail-stats dt{opacity:.65;text-transform:uppercase;letter-spacing:.04em;font-size:10px}.cell-detail-stats dd{margin:0;font-variant-numeric:tabular-nums}.drawer-root{position:fixed;inset:0;pointer-events:none;z-index:1000}.drawer-root.is-open{pointer-events:auto}.drawer-backdrop{position:absolute;inset:0;background:#00000073;opacity:0;transition:opacity .3s ease-out}.drawer-root.is-open .drawer-backdrop{opacity:1}.drawer{position:absolute;right:0;top:0;bottom:0;width:min(420px,92vw);background:#fff;transform:translate(100%);transition:transform .32s cubic-bezier(.22,1,.36,1);overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:20px;box-shadow:-8px 0 30px #00000014}.drawer-root.is-open .drawer{transform:translate(0)}.drawer-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;background:transparent;font-size:22px;line-height:1;color:#727272;cursor:pointer;border-radius:6px}.drawer-close:hover{background:#f2f2f2;color:#000}.drawer-image{width:100%;aspect-ratio:1 / 1;border-radius:var(--radius);overflow:hidden;background:#fafafa}.drawer-image img{width:100%;height:100%;object-fit:cover;display:block}.drawer-body{display:flex;flex-direction:column;gap:16px}.drawer-date{font-family:Geist Mono,ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#727272}.drawer-weather{font-size:28px;font-weight:500;line-height:1.1;color:#000}.drawer-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin:0;padding:0;font-size:14px}.drawer-stats>div{display:flex;flex-direction:column;gap:2px}.drawer-stats dt{color:#727272;text-transform:uppercase;letter-spacing:.04em;font-size:11px}.drawer-stats dd{margin:0;font-variant-numeric:tabular-nums}.cell img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;border-radius:inherit}.cell img.is-ready{position:relative;z-index:1;animation:cell-fade-in .4s ease-out forwards;animation-delay:calc(var(--cell-i, 0) * 60ms);transition:outline-color .18s ease-out;outline:2px solid rgba(255,255,255,0);outline-offset:-2px}.cell:hover img.is-ready{outline:2px solid rgba(255,255,255,.5);outline-offset:-2px}.cell:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to bottom,#0000002e,#0000 35% 65%,#0000002e);opacity:0;transition:opacity .18s ease-out;pointer-events:none;z-index:2}.cell:hover:after{opacity:1}.cell img.cell-blur{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);object-fit:cover;border-radius:var(--radius);filter:blur(22px);opacity:0;transition:opacity .18s ease-out;pointer-events:none;z-index:0;animation:none}.cell-date,.cell-temp{position:absolute;z-index:3;color:var(--overlay-color);font-size:var(--overlay-font-size);line-height:1;pointer-events:none}.cell-date{top:var(--pad);left:var(--pad)}.cell-temp{bottom:var(--pad);right:var(--pad)}.cell-date-long,.cell-temp-long{display:none;white-space:nowrap}.cell:hover .cell-date-short,.cell:hover .cell-temp-short{display:none}.cell:hover .cell-date-long,.cell:hover .cell-temp-long{display:inline-flex}:root{--digit-dur: .5s;--digit-distance: 8px;--digit-stagger: 20ms;--digit-blur: 2px;--digit-ease: cubic-bezier(.34, 1.45, .64, 1);--digit-dir-x: 0;--digit-dir-y: 1}@keyframes t-digit-pop-in{0%{transform:translate(calc(var(--digit-distance) * var(--digit-dir-x)),calc(var(--digit-distance) * var(--digit-dir-y)));opacity:0;filter:blur(var(--digit-blur))}to{transform:translate(0);opacity:1;filter:blur(0)}}.t-digit-group{align-items:baseline}.t-digit{display:inline-block;white-space:pre;will-change:transform,opacity,filter}.t-digit-group.is-animating .t-digit{animation:t-digit-pop-in var(--digit-dur) var(--digit-ease) both;animation-delay:calc(var(--i, 0) * var(--digit-stagger))}@media(prefers-reduced-motion:reduce){.t-digit-group .t-digit{animation:none!important}}@keyframes cell-fade-in{0%{opacity:0}to{opacity:1}}.cell-error{position:absolute;inset:0;display:grid;place-items:center;color:#c44;font-size:24px;font-weight:600}.panel{background:var(--panel-bg);border-radius:var(--radius);padding:var(--pad);font-size:var(--panel-font-size);color:#000;display:flex;box-sizing:border-box}.panel-intro-title{width:fit-content;align-self:flex-start;font-family:Geist Mono,ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;text-transform:uppercase;align-items:center;gap:8px}.intro-title-icon{width:1em;height:1em;flex-shrink:0;color:#a9a9a9}.panel-intro-desc{display:block;flex:1;width:100%;box-sizing:border-box;line-height:1.35;color:#727272;font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:400}.panel-intro-desc a{color:#000;text-decoration:underline}.panel-links{flex:1;min-width:0;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;align-self:flex-start;text-align:left}.panel-links a{color:#727272;text-decoration:none}.panel-links a:hover{color:#000;text-decoration:underline}.panel-controls{flex-shrink:0;width:fit-content;align-self:flex-start;align-items:flex-start;gap:var(--pad)}.panel-controls svg{width:16px;height:16px;flex-shrink:0}.control-btn{display:flex;padding:0;border:0;background:none;color:inherit;cursor:pointer;opacity:.3;transition:opacity .18s ease-out}.control-btn.is-active,.control-btn:hover{opacity:1}
