html,body{height:100%;margin:0;overflow:hidden;background:#08080A}
*{box-sizing:border-box}

.root{position:fixed;inset:0;background:#08080A;color:#F4F3F0;font-family:Archivo,Helvetica,sans-serif;cursor:crosshair;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}

.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.08);opacity:.85;pointer-events:none}
.dim{position:absolute;inset:0;background:rgba(0,0,0,.6);pointer-events:none}
.scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,10,.92) 0%,rgba(8,8,10,.45) 50%,rgba(8,8,10,.1) 100%);pointer-events:none}
.storm{position:absolute;inset:0;pointer-events:none}
.storm canvas{position:absolute;inset:0;width:100%;height:100%}
.grain{position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}

.fg{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,4vw,48px);pointer-events:none}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px}
.logo{height:24px;opacity:.92}
.mono{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#71717E}
.top .mono{text-align:right}

.center{display:flex;flex-direction:column;gap:clamp(16px,3vw,32px);align-items:center;width:100%}
.clock{display:flex;align-items:flex-start;gap:clamp(16px,4vw,56px)}
.module{display:flex;flex-direction:column;align-items:center;gap:10px}
.pair{display:flex;gap:6px}

.digit{position:relative;width:clamp(38px,6vw,79px);height:clamp(64px,10vw,132px);animation:sl-flicker 6s infinite}
.seg{position:absolute;background-color:#0a0a0a;background-position:center;background-size:13px 13px;box-shadow:none;
  background-image:radial-gradient(circle,rgba(150,160,180,.28) 0%,rgba(80,88,100,.14) 45%,transparent 72%)}
.seg-h{left:8%;width:84%;height:13%;background-repeat:repeat-x;clip-path:polygon(8% 0%,92% 0%,100% 50%,92% 100%,8% 100%,0% 50%)}
.seg-v{width:15%;height:37%;background-repeat:repeat-y;clip-path:polygon(0% 8%,50% 0%,100% 8%,100% 92%,50% 100%,0% 92%)}
.seg-a{top:0}.seg-g{top:43.5%}.seg-d{top:87%}
.seg-f{top:9%;left:0}.seg-b{top:9%;left:85%}.seg-e{top:54%;left:0}.seg-c{top:54%;left:85%}
.seg.on{background-color:#151515;
  background-image:radial-gradient(circle,#ffffff 0%,#ffffff 32%,#e4d9f7 55%,rgba(199,178,238,.5) 72%,transparent 78%);
  box-shadow:0 0 16px 4px rgba(244,243,240,.85),0 0 46px rgba(169,139,224,.55),0 0 80px rgba(169,139,224,.3)}

.charge{width:min(420px,70vw);display:flex;flex-direction:column;gap:12px;align-items:center}
.charge-track{width:100%;height:2px;background:rgba(244,243,240,.14);position:relative;overflow:hidden}
.charge-fill{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:#A98BE0;box-shadow:0 0 24px rgba(169,139,224,.45)}
.charge-fill.full{background:#F4F3F0;box-shadow:0 0 28px rgba(244,243,240,.9),0 0 60px rgba(169,139,224,.7)}
.hint{text-align:center;min-height:14px;letter-spacing:.18em;transition:color .3s}
.hint.ok{color:#A98BE0}
.hint.err{color:#e08b8b}

.bottom{display:flex;justify-content:center;pointer-events:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;min-width:200px;height:52px;padding:0 32px;
  background:#F4F3F0;color:#08080A;text-decoration:none;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;border-radius:2px;cursor:pointer;transition:background .2s,box-shadow .2s,transform .2s}
.btn:hover{background:#fff;box-shadow:0 0 32px rgba(169,139,224,.55);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

@keyframes sl-flicker{0%,100%{opacity:1}4%{opacity:.35}5%{opacity:1}6%{opacity:.15}8%{opacity:1}47%{opacity:1}48%{opacity:.4}50%{opacity:1}78%{opacity:1}79%{opacity:.2}80%{opacity:1}81%{opacity:.6}82%{opacity:1}}