:root{color:#fff;font-synthesis:none;text-rendering:optimizelegibility;background:#05070a;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{background:#05070a}body{background:radial-gradient(circle at 50% 40%,#18b7ff14,#0000 34%),#05070a;min-width:320px;min-height:100vh;margin:0}button,input,textarea,select{font:inherit}#root{min-height:100vh}main{text-align:center;place-items:center;min-height:100vh;padding:24px;display:grid}h1{letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:clamp(2rem,7vw,5rem)}.centre-logo{aspect-ratio:1;place-items:center;width:clamp(180px,28vw,320px);display:grid}.centre-logo img{object-fit:contain;filter:drop-shadow(0 0 18px #00aeef47)drop-shadow(0 0 38px #8dc63f1f);width:100%;height:100%;display:block}.hex-hub{aspect-ratio:1;place-items:center;width:min(92vw,760px);display:grid;position:relative}.hexagon{aspect-ratio:200/174;color:#00aeef;cursor:pointer;background:0 0;border:0;width:clamp(120px,18vw,170px);padding:0;position:absolute}.hexagon svg{width:100%;height:100%;display:block;overflow:visible}.hexagon polygon{fill:#05070ab8;stroke:currentColor;stroke-width:3px;vector-effect:non-scaling-stroke;transform-origin:50%;transition:fill .22s,stroke .22s,filter .22s,transform .22s}.hexagon:hover polygon,.hexagon:focus-visible polygon{fill:#00aeef1a;filter:drop-shadow(0 0 12px #00aeefa6);transform:scale(1.035)}.hexagon--top{top:3%;left:50%;transform:translate(-50%)}.hexagon--upper-right{top:20%;right:6%}.hexagon--lower-right{bottom:20%;right:6%}.hexagon--bottom{bottom:3%;left:50%;transform:translate(-50%)}.hexagon--lower-left{bottom:20%;left:6%}.hexagon--upper-left{top:20%;left:6%}.hexagon--orange{color:#f59e0b}.hexagon--lime{color:#b7df22}.hexagon--cyan{color:#00aeef}.connectors{pointer-events:none;z-index:0;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.connectors line{stroke:#00aeef73;stroke-width:3px;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 8px #00aeef59)}.hexagon,.centre-logo{z-index:1}.hexagon.is-active{z-index:2}.hexagon.is-active polygon{fill:#00aeef24;filter:drop-shadow(0 0 12px)drop-shadow(0 0 24px);transform:scale(1.055)}.hexagon.is-dimmed{opacity:.24;filter:saturate(.5)}.hexagon{transition:opacity .26s,filter .26s,transform .26s}.connector{transition:opacity .26s,filter .26s}.connector.is-dimmed{opacity:.12}.connector.is-active{filter:drop-shadow(0 0 7px #00aeefbf)drop-shadow(0 0 16px #00aeef59)}.connector-base{transition:stroke .26s,opacity .26s}.connector.is-active .connector-base{stroke:#00aeeff2}.connector-pulse{stroke:#00aeef;stroke-width:8px;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px #fff)drop-shadow(0 0 12px #00aeef)drop-shadow(0 0 22px #00aeefd9);fill:#fff;stroke-width:4px;vector-effect:non-scaling-stroke}.hexagon,.hexagon--top,.hexagon--upper-right,.hexagon--lower-right,.hexagon--bottom,.hexagon--lower-left,.hexagon--upper-left{bottom:auto;right:auto;transform:none}.connector-node{fill:#05070af2;stroke:#00aeefe6;stroke-width:4px;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px #00aeefbf)drop-shadow(0 0 12px #00aeef59);transition:fill .22s,stroke .22s,filter .22s}.connector-node.is-active{fill:#fff;stroke:#00aeef;filter:drop-shadow(0 0 7px #fff)drop-shadow(0 0 14px #00aeef)drop-shadow(0 0 24px #00aeefd9)}