:root{color-scheme:dark;--ink: #e8ecf6;--muted: #8a90a6}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:radial-gradient(130% 110% at 50% 0%,#0c0c0e,#050505 45%,#000);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}.app{max-width:1120px;margin:0 auto;padding:44px 28px 56px}.grain{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");background-size:auto,120px 120px}.masthead{margin-bottom:28px}.masthead__rule{height:1px;background:linear-gradient(90deg,#ffffff40,#ffffff0a);margin-bottom:16px}.masthead__row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.masthead__title h1{font-size:clamp(16px,4.5vw,24px);font-weight:600;letter-spacing:.22em;margin:0 0 8px;color:#fff}.masthead__title p{margin:0;font-size:10px;font-weight:400;letter-spacing:.2em;color:#7c8294}.masthead__meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:9px;letter-spacing:.18em;color:#6b7080;text-transform:uppercase;text-align:right}.colorkey{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}.colorkey__item{display:inline-flex;align-items:center;gap:8px;background:none;border:none;padding:2px 0;font-family:inherit;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#7c8294;cursor:pointer;transition:color .25s ease}.colorkey__item.is-active{color:#fff}.colorkey__swatch{width:9px;height:9px;border-radius:50%;background:var(--hue, #888);box-shadow:0 0 8px var(--hue, #888)}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}@keyframes cellIn{0%{opacity:0;transform:translateY(10px) scale(.96)}}.cell{position:relative;aspect-ratio:1 / 1;border-radius:14px;animation:cellIn .6s cubic-bezier(.2,.7,.2,1) backwards;background-color:#000;border:1px solid rgba(255,255,255,.08);overflow:hidden;transition:opacity .35s ease,transform .35s ease,border-color .35s ease}.cell:after{content:"";position:absolute;top:10px;right:10px;bottom:10px;left:10px;border:1px solid rgba(255,255,255,.06);border-radius:8px;pointer-events:none;z-index:2}.cell canvas{display:block;width:100%!important;height:100%!important}.cell.is-hovered{border-color:color-mix(in srgb,var(--hue, #8fd0ff) 55%,transparent);transform:translateY(-4px) scale(1.012);box-shadow:0 0 0 1px color-mix(in srgb,var(--hue, #8fd0ff) 35%,transparent),0 12px 40px color-mix(in srgb,var(--hue, #8fd0ff) 30%,transparent)}.cell.is-dimmed{opacity:.2;filter:saturate(.45) brightness(.8)}.cell.is-pinned{border-color:color-mix(in srgb,var(--hue, #8fd0ff) 70%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--hue, #8fd0ff) 45%,transparent),0 12px 44px color-mix(in srgb,var(--hue, #8fd0ff) 34%,transparent)}.cell:focus-visible{outline:2px solid color-mix(in srgb,var(--hue, #8fd0ff) 80%,transparent);outline-offset:2px}.cell-title{position:absolute;top:16px;left:18px;z-index:3;display:flex;flex-direction:column;gap:3px;pointer-events:none}.cell-title__name{font-size:12px;font-weight:600;letter-spacing:.16em;color:#fff;text-transform:uppercase}.cell-title__desc{font-size:8.5px;font-weight:400;letter-spacing:.18em;color:#7c8294;text-transform:uppercase}.cell-index{position:absolute;top:16px;right:18px;z-index:3;font-size:9px;font-weight:500;letter-spacing:.14em;font-variant-numeric:tabular-nums;color:var(--hue, #7c8294);opacity:.9;pointer-events:none}.cell-north{position:absolute;top:38px;right:18px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:7px;letter-spacing:.1em;color:#6b7080;pointer-events:none}.cell-scale{position:absolute;right:18px;bottom:40px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:3px;pointer-events:none}.cell-scale__bar{width:56px;height:4px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1px,transparent 1px 18px);border-bottom:1px solid rgba(255,255,255,.4)}.cell-scale__txt{font-size:7px;letter-spacing:.08em;color:#7c8294}.cell-legend{position:absolute;left:18px;bottom:16px;z-index:3;display:flex;flex-direction:column;gap:4px;width:96px;pointer-events:none}.cell-legend__label{font-size:7px;letter-spacing:.14em;color:#7c8294;text-transform:uppercase}.cell-legend__bar{height:5px;border-radius:2px;background:linear-gradient(90deg,#000000 0%,var(--hue, #888) 55%,#ffffff 100%);box-shadow:0 0 6px color-mix(in srgb,var(--hue, #888) 60%,transparent)}.cell-legend__scale{display:flex;justify-content:space-between;font-size:7px;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:#9aa0b2}.cell-legend__dots{display:flex;align-items:center;gap:5px;margin-top:1px}.cell-legend__dots i{display:inline-block;border-radius:50%;background:var(--hue, #888);box-shadow:0 0 5px var(--hue, #888)}.caption{position:absolute;left:0;right:0;bottom:14px;z-index:3;text-align:right;padding-right:18px;font-size:15px;color:#dbe2f2;pointer-events:none;opacity:.9;transition:opacity .3s ease}.cell.is-hovered .caption{opacity:1;color:#eaf2ff}@media (max-width: 980px){.grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 680px){.grid{grid-template-columns:repeat(2,1fr)}.cell-scale,.cell-north{display:none}.cell-legend{width:76px}}@media (max-width: 440px){.grid{grid-template-columns:1fr}.masthead__row{flex-direction:column;align-items:flex-start;gap:10px}.masthead__meta{align-items:flex-start;text-align:left}}@media (hover: none){.cell{cursor:pointer}}@media (prefers-reduced-motion: reduce){.cell{animation:none}.cell.is-hovered,.cell.is-pinned{transform:none}}