/* CLOCKWORK — nixie instrument. Shared by the site and the brand renderer. */
:root{--bg:#060607;--steel:#15161a;--steel2:#0d0e11;--brass:#cda45d;--brass2:#f0d79a;--cream:#efe7d7;--mute:#8e877a;--dim:#55504a;
--glow:#ff8a2a;--hot:#ffc189;--red:#ff4a33;--blue:#57a0ff;--green:#4fe08a;--vio:#c48bff;
--fn:'Saira Condensed',sans-serif;--fm:'Space Mono',ui-monospace,monospace;--fd:'Fraunces',Georgia,serif}

/* a single tube */
.tube{--tw:72px;position:relative;width:var(--tw);height:calc(var(--tw)*1.66);border-radius:calc(var(--tw)*.5) calc(var(--tw)*.5) 9px 9px;
 background:
  radial-gradient(60% 34% at 32% 14%,rgba(255,255,255,.16),transparent 70%),
  linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.012) 22%,rgba(255,255,255,0) 50%,rgba(255,255,255,.012) 78%,rgba(255,255,255,.08)),
  radial-gradient(70% 60% at 50% 58%,rgba(255,110,30,.10),transparent 70%),
  #0b0908;
 border:1px solid rgba(255,235,210,.13);
 box-shadow:inset 0 0 calc(var(--tw)*.3) rgba(0,0,0,.85),inset 0 calc(var(--tw)*-.12) calc(var(--tw)*.35) rgba(255,90,20,.10),0 0 calc(var(--tw)*.5) rgba(255,100,20,.08);
 overflow:hidden;flex:none}
/* the anode mesh */
.tube::before{content:"";position:absolute;inset:8% 9% 10%;border-radius:calc(var(--tw)*.38) calc(var(--tw)*.38) 4px 4px;opacity:.55;
 background:repeating-linear-gradient(60deg,rgba(150,120,100,.16) 0 1px,transparent 1px 5px),repeating-linear-gradient(-60deg,rgba(150,120,100,.16) 0 1px,transparent 1px 5px)}
/* the glass tip + socket */
.tube::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9%;background:linear-gradient(180deg,#2a2622,#0d0c0b);border-top:1px solid rgba(205,164,93,.4)}
.tube .g,.tube .d{position:absolute;inset:0;display:grid;place-items:center;font:200 calc(var(--tw)*1.18)/1 var(--fn);padding-bottom:9%}
.tube .g{color:rgba(255,150,80,.07);text-shadow:none}
.tube .d{color:var(--hot);text-shadow:0 0 2px #fff0dd,0 0 calc(var(--tw)*.06) var(--glow),0 0 calc(var(--tw)*.16) #ff6a00,0 0 calc(var(--tw)*.4) rgba(255,80,0,.75),0 0 calc(var(--tw)*.8) rgba(255,60,0,.35);
 animation:flick 7s infinite}
.tube .d.chg{animation:strike .45s ease-out}
.tube.off .d{color:rgba(255,150,80,.08);text-shadow:none;animation:none}
@keyframes flick{0%,96%,100%{opacity:1}97%{opacity:.82}98%{opacity:1}99%{opacity:.9}}
@keyframes strike{0%{opacity:.15;filter:blur(3px)}35%{opacity:1;filter:blur(.5px) brightness(1.6)}100%{filter:none}}
/* neon colon (IN-3 bulbs) */
.colon{display:flex;flex-direction:column;justify-content:center;gap:calc(var(--tw,72px)*.32);padding:0 calc(var(--tw,72px)*.1);height:calc(var(--tw,72px)*1.66)}
.colon i{width:calc(var(--tw,72px)*.14);height:calc(var(--tw,72px)*.14);border-radius:50%;background:#ffd0a0;box-shadow:0 0 6px #ff8a2a,0 0 16px #ff6a00,0 0 30px rgba(255,80,0,.6);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.bank{display:flex;align-items:flex-end;gap:calc(var(--tw,72px)*.1)}

/* the chassis */
.chassis{position:relative;border-radius:22px;padding:30px 34px 26px;
 background:linear-gradient(180deg,#1b1c21,#0e0f12 60%,#0a0b0d);border:1px solid rgba(205,164,93,.32);
 box-shadow:0 40px 120px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 6px rgba(0,0,0,.25)}
.chassis .bolt{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a4d55,#16181d 70%);box-shadow:inset 0 0 0 1.5px rgba(205,164,93,.45)}
.chassis .bolt::after{content:"";position:absolute;left:50%;top:18%;bottom:18%;width:2px;margin-left:-1px;background:rgba(205,164,93,.6);transform:rotate(40deg)}
.bolt.a{top:10px;left:10px}.bolt.b{top:10px;right:10px}.bolt.c{bottom:10px;left:10px}.bolt.d{bottom:10px;right:10px}
.etch{font:700 11px var(--fm);letter-spacing:.32em;color:var(--brass);text-transform:uppercase}
.etch.dim{color:var(--mute)}
/* indicator lamp */
.lamp{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3a3a,#141414);box-shadow:inset 0 0 0 1.5px rgba(205,164,93,.4)}
.lamp.on{background:radial-gradient(circle at 35% 30%,#fff,var(--c) 45%,#000 100%);box-shadow:0 0 10px var(--c),0 0 26px var(--c),inset 0 0 0 1.5px rgba(255,255,255,.3)}
/* decimal point (a separate neon dot at the tube's lower right) */
.tube .dp{position:absolute;right:9%;bottom:14%;width:calc(var(--tw)*.08);height:calc(var(--tw)*.08);border-radius:50%;background:rgba(255,150,80,.08)}
.tube.dot .dp{background:#ffd0a0;box-shadow:0 0 4px #ff8a2a,0 0 10px #ff6a00}
.main>.bank{justify-content:center}