: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)}.connector-node--inner{fill:#00aeef29;stroke-width:3px;filter:drop-shadow(0 0 4px #00aeefa6)drop-shadow(0 0 10px #00aeef40)}.connector-node--inner.is-active{fill:#fff}.hexagon-shape{position:absolute;inset:0}.hexagon-content{z-index:1;color:#fff;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:18%;display:flex;position:absolute;inset:0}.hexagon-icon{stroke-width:1.7px;color:currentColor;opacity:.82;width:28%;height:auto;transition:opacity .22s,transform .22s,filter .22s}.hexagon-title{letter-spacing:.08em;text-align:center;text-transform:uppercase;text-wrap:balance;opacity:.9;max-width:90%;font-size:clamp(.72rem,1.25vw,1rem);font-weight:600;line-height:1.1;transition:opacity .22s,transform .22s,text-shadow .22s}.hexagon.is-active .hexagon-icon{opacity:1;filter:drop-shadow(0 0 10px);transform:translateY(-2px)scale(1.08)}.hexagon.is-active .hexagon-title{opacity:1;text-shadow:0 0 12px;transform:translateY(2px)}.hexagon--cyan .hexagon-content{color:#00aeef}.hexagon--orange .hexagon-content{color:#f59e0b}.hexagon--lime .hexagon-content{color:#b7df22}.hexagon--purple .hexagon-content{color:#b66cff}.hexagon-content{gap:5px;padding:15%;transform:translateY(-4%)}.hexagon-icon{opacity:.9;width:22%}.hexagon-title{letter-spacing:.1em;opacity:.78;max-width:84%;font-size:clamp(.62rem,1vw,.82rem);font-weight:500;line-height:1.05}.hexagon.is-active .hexagon-icon{transform:translateY(-1px)scale(1.06)}.hexagon.is-active .hexagon-title{opacity:1;transform:translateY(1px)}.centre-hex{z-index:1;pointer-events:none;width:850px;height:685px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.centre-hex polygon{fill:#aadcff0f;stroke:#00aeefe6;stroke-width:2.5px;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 10px #00aeef8c)drop-shadow(0 0 24px #00aeef33)}.centre-hex svg,.centre-hex{overflow:visible}.centre-logo{z-index:2}.centre-hex{width:40%}.centre-hex polygon{fill:#b4dcff0a;stroke:#78dcff73;stroke-width:3px;filter:drop-shadow(0 0 8px #78dcff59)drop-shadow(0 0 18px #00aeef1f)}.centre-logo{transform:translateY(-8px)}.centre-hex{width:min(56%,440px);height:auto;top:50%;left:50%;transform:translate(-50%,-50%)}.centre-hex polygon{fill:#b4dcff04;stroke:#78dcff29;filter:none;transition:fill .32s,stroke .32s,filter .32s}.hex-hub.state-hover .centre-hex polygon{fill:#b4dcff0d;stroke:#78dcff7a;filter:drop-shadow(0 0 8px #78dcff52)drop-shadow(0 0 20px #00aeef1f)}.hex-hub.state-hover.accent-cyan .centre-hex polygon{stroke:#00aeef80;filter:drop-shadow(0 0 8px #00aeef61)drop-shadow(0 0 20px #00aeef24)}.hex-hub.state-hover.accent-orange .centre-hex polygon{stroke:#f59e0b8c;filter:drop-shadow(0 0 8px #f59e0b66)drop-shadow(0 0 20px #f59e0b24)}.hex-hub.state-hover.accent-lime .centre-hex polygon{stroke:#b7df228c;filter:drop-shadow(0 0 8px #b7df2266)drop-shadow(0 0 20px #b7df2224)}.centre-hex{display:none}