@import url("/epoq/styles.css");




















:root {
  --glassci-ink:        var(--ink);          
  --glassci-paper:      var(--paper);        
  --glassci-hum:        var(--hum);          
  --glassci-go:         var(--signal-go);    
  --glassci-live:       var(--signal-live);  
  --glassci-hairline:   var(--hairline);
}













.glassci {
  position: relative;
  z-index: 0;
  --glassci-shape: none;
  --glassci-lens: blur(6px) saturate(1.06);
  --glassci-radius: 28px;
  --glassci-bleed: 44px;
  --glassci-emission: var(--glassci-hum);
  --glassci-fill: color-mix(in srgb, var(--glassci-paper) 5%, transparent);
  --glassci-rim: 0.72;
}












.glassci::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--glassci-shape);
  background: var(--glassci-fill);
  -webkit-backdrop-filter: var(--glassci-lens);
  backdrop-filter: var(--glassci-lens);
  filter:
    drop-shadow(0 0 calc(var(--glassci-bleed) / 3.2) color-mix(in srgb, var(--glassci-emission) 62%, transparent))
    drop-shadow(0 0 var(--glassci-bleed) color-mix(in srgb, var(--glassci-emission) 34%, transparent));
  pointer-events: none;
}



.glassci[data-glassci-bleed="0"]::after { filter: none; }





.glassci > .glassci__rim {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.glassci > .glassci__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}













.glassci-field {
  font-family: var(--font-mono, "Red Hat Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  white-space: pre;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}




.glassci-lit {
  color: var(--glassci-emission);
  text-shadow:
    0 0 2px  color-mix(in srgb, var(--glassci-emission) 90%, transparent),
    0 0 8px  color-mix(in srgb, var(--glassci-emission) 55%, transparent),
    0 0 22px color-mix(in srgb, var(--glassci-emission) 32%, transparent),
    0 0 48px color-mix(in srgb, var(--glassci-emission) 18%, transparent);
}







[data-glassci-tier="lens"] .glassci { --glassci-fill: color-mix(in srgb, var(--glassci-paper) 4%, transparent); }



[data-glassci-tier="frost"] .glassci { --glassci-fill: color-mix(in srgb, var(--glassci-paper) 9%, transparent); }



[data-glassci-tier="plate"] .glassci { --glassci-fill: color-mix(in srgb, var(--glassci-paper) 12%, var(--glassci-ink)); }
[data-glassci-tier="plate"] .glassci::after {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 0 0 var(--glassci-hairline) color-mix(in srgb, var(--glassci-paper) 14%, transparent);
}




@supports (corner-shape: squircle) {
  [data-glassci-squircle="native"] .glassci[data-glassci-native="round"]::after,
  [data-glassci-squircle="native"] .glassci[data-glassci-native="squircle"]::after {
    clip-path: none;
    border-radius: var(--glassci-radius); 
  }
  [data-glassci-squircle="native"] .glassci[data-glassci-native="round"]::after { corner-shape: round; }
  [data-glassci-squircle="native"] .glassci[data-glassci-native="squircle"]::after { corner-shape: squircle; }
  
}




@media (prefers-reduced-motion: reduce) {
  .glassci, .glassci::after { transition: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .glassci::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: color-mix(in srgb, var(--glassci-paper) 14%, var(--glassci-ink));
    filter: none;
  }
  .glassci-lit { text-shadow: none; }
}

@media print {
  .glassci > .glassci__rim { display: none; }
  .glassci::after { -webkit-backdrop-filter: none; backdrop-filter: none; background: none; filter: none; }
  .glassci-lit { color: var(--glassci-ink); text-shadow: none; }
}