/* The DTD Software stage (assets/universe.js): dark blue field of orbits, monospace HUD details.
   Shared by the homepage software half and /software. */
.tz-stage{--mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Menlo,Consolas,monospace;position:relative;overflow:hidden;background:#0a1a3f;color:#e6edf7;isolation:isolate;-webkit-user-select:none;user-select:none;touch-action:pan-y}
.tz-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 38%,rgba(3,10,30,.7) 100%)}
/* until the scene has loaded: a faint still field in CSS (radial dots), so the half is never empty */
.tz-stage::before{content:"";position:absolute;inset:0;z-index:0;opacity:.55;background:radial-gradient(circle at 50% 50%,rgba(220,232,255,.5) 0 1px,transparent 2px) 0 0/23px 23px,radial-gradient(circle at 50% 50%,rgba(220,232,255,.35) 0 1px,transparent 2px) 11px 7px/37px 37px;-webkit-mask:radial-gradient(ellipse at 50% 50%,#000 0,transparent 60%);mask:radial-gradient(ellipse at 50% 50%,#000 0,transparent 60%)}
.tz-stage.tz-live::before{display:none}
.tz-canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;animation:tz-in 1.4s ease both}
@keyframes tz-in{from{opacity:0}}
.tz-ui{position:absolute;inset:0;z-index:2;pointer-events:none;font-family:"Josefin Sans",sans-serif}
.tz-ui a,.tz-ui button{pointer-events:auto}
.tz-hud{position:absolute;display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:10.5px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:rgba(230,237,247,.62)}
.tz-hud b{font-weight:400;color:rgba(230,237,247,.9)}
.tz-tl{left:24px;top:24px}.tz-bl{left:24px;bottom:22px}.tz-br{right:24px;bottom:22px;text-align:right;align-items:flex-end}
.tz-pills{position:absolute;right:20px;top:20px;display:flex;gap:8px}
.tz-pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#e6edf7;background:rgba(255,255,255,.05);border:1px solid rgba(230,237,247,.32);border-radius:99px;padding:8px 14px 7px;cursor:pointer;transition:background .3s,border-color .3s,transform .3s}
.tz-pill:hover,.tz-pill[aria-pressed=true]{background:rgba(255,255,255,.14);border-color:rgba(230,237,247,.65);transform:translateY(-1px)}
.tz-pill[hidden]{display:none}
.tz-drag{position:absolute;left:0;right:0;bottom:clamp(54px,9%,90px);text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(230,237,247,.62);opacity:0;animation:tz-in 1.2s ease 1.6s forwards}
/* the cursor ring over the stage */
@media (pointer:fine){.tz-live{cursor:none}.tz-live a,.tz-live .tz-pill{cursor:pointer}}
.tz-ring{position:absolute;left:0;top:0;z-index:3;width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid rgba(230,237,247,.55);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .3s,width .4s,height .4s,margin .4s}
.tz-ring::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#fff}
html.tz-over .tz-ring{opacity:1}
html.tz-over .cursor{opacity:0!important}
/* the caller's own words and links */
.tz-copy{position:absolute;z-index:2;pointer-events:none}
.tz-copy a,.tz-copy button{pointer-events:auto}
@media (max-width:700px){
  .tz-hud{font-size:9px;letter-spacing:.1em}.tz-tl{left:16px;top:16px}.tz-bl{left:16px;bottom:14px}.tz-br{right:16px;bottom:14px}
  .tz-pills{right:12px;top:12px}.tz-pill{padding:7px 10px 6px;font-size:9px}
}
@media (prefers-reduced-motion:reduce){.tz-canvas,.tz-drag{animation:none;opacity:1}}