Hugging Face's logo

Spaces:
SZLHOLDINGS
/
a11oy
Running

App Files Community
12
a11oy
File size: 11,683 Bytes
a6a5d8e
a0f8a7d
 
 
 
 
 
a6a5d8e
 
 
a0f8a7d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
be00018
 
 
a0f8a7d
 
 
 
 
 
a6a5d8e
a0f8a7d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a6a5d8e
a0f8a7d
 
 
 
 
 
a6a5d8e
a0f8a7d
 
 
 
 
 
 
 
 
 
 
 
be00018
a0f8a7d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
:root{
  --yawar-500:#e6544a; --yuyay-500:#10a79e; --yuyay-400:#3af4c8; --yuyay-300:#91ffe5;
  --hatun-500:#d09a31; --hatun-400:#ffd36a; --green:#38df82; --red:#ff6b63;
  --bg:#06101d; --deep:#0b1726; --surface:#111f31; --overlay:#172b40; --border:#41627d;
  --text:#f7fbff; --text-sub:#d6e3ef; --text-ghost:#91a7ba; --info:#73bfff;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);overflow:hidden}
body{
  background:
    radial-gradient(circle at 50% 58%,rgba(30,156,183,.22),transparent 31%),
    radial-gradient(circle at 72% 18%,rgba(94,105,255,.13),transparent 27%),
    linear-gradient(145deg,#06101d 0%,#081526 54%,#04101a 100%);
}
button,input{font:inherit}
button:focus-visible,input:focus-visible{outline:2px solid var(--yuyay-300);outline-offset:3px}
#root{position:fixed;inset:0;z-index:1;opacity:0;transition:opacity .45s ease}
body.scene-ready #root{opacity:1}
canvas{display:block;touch-action:none;filter:saturate(1.2) brightness(1.14)}
.holo-field{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.52;background:
  repeating-linear-gradient(0deg,transparent 0 5px,rgba(120,240,255,.018) 6px),
  linear-gradient(90deg,transparent 49.9%,rgba(58,244,200,.08) 50%,transparent 50.1%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 86%,transparent 100%)}

/* The readable tier registry is visible before module boot and remains the no-WebGL/CDN fallback. */
.scene-fallback{position:fixed;inset:0;z-index:3;display:grid;place-items:center;padding:110px 28px 150px;overflow:auto}
.fallback-shell{width:min(760px,100%);padding:30px;border:1px solid rgba(91,196,230,.48);border-radius:24px;
  background:linear-gradient(145deg,rgba(11,31,49,.94),rgba(7,20,34,.97));
  box-shadow:0 0 0 1px rgba(58,244,200,.08) inset,0 28px 90px rgba(0,0,0,.48),0 0 70px rgba(26,183,192,.12)}
.fallback-kicker,.panel-kicker{font:700 10px var(--mono);letter-spacing:.18em;color:var(--yuyay-300)}
.fallback-shell h1{font:650 clamp(1.8rem,5vw,3.5rem)/1.02 var(--sans);letter-spacing:-.04em;margin:10px 0 12px}
.fallback-shell p{color:var(--text-sub);max-width:65ch;margin:0;line-height:1.65}
.fallback-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:22px}
.fallback-tiers span{display:flex;gap:8px;align-items:center;padding:9px 11px;border:1px solid rgba(108,154,188,.35);border-radius:10px;background:rgba(11,24,39,.86);color:var(--text-sub);font-size:12px}
.fallback-tiers b{font-family:var(--mono);color:var(--yuyay-300)}
body.scene-ready .scene-fallback{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s}
body.scene-unavailable .scene-fallback{align-items:start;padding-top:118px}
body.scene-unavailable .fallback-kicker{color:var(--hatun-400)}

#hud{position:fixed;inset:0;z-index:20;pointer-events:none;padding:14px;display:grid;
  grid-template-columns:minmax(230px,280px) 1fr minmax(275px,340px);grid-template-rows:auto 1fr auto auto;gap:12px}
#hud header{grid-column:1/-1;display:flex;gap:10px;align-items:center;flex-wrap:wrap;pointer-events:auto}
.brand{font:750 13px var(--mono);letter-spacing:.16em;padding:7px 13px;border-left:3px solid var(--yuyay-400);border-radius:3px;
  background:linear-gradient(90deg,rgba(24,48,71,.96),rgba(13,31,49,.38));text-shadow:0 0 18px rgba(58,244,200,.45)}
.global-links{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.global-links a{padding:6px 8px;border:1px solid rgba(102,149,181,.38);border-radius:7px;background:rgba(7,20,34,.78);color:var(--text-sub);font:700 9px var(--mono);text-decoration:none}
.global-links a:hover,.global-links a:focus-visible{color:var(--yuyay-300);border-color:var(--yuyay-400)}
.pill{font:700 10px var(--mono);letter-spacing:.04em;padding:5px 9px;border-radius:999px;border:1px solid var(--border);background:rgba(16,32,50,.93);color:var(--text-sub)}
.pill.responding{color:#03150d;background:var(--green);border-color:#6affab;box-shadow:0 0 24px rgba(56,223,130,.25)}
.pill.modeled{color:#241900;background:var(--hatun-400);border-color:#ffe5a4;box-shadow:0 0 24px rgba(255,211,106,.18)}
.pill.degraded,.pill.unavailable{color:#fff2ef;background:#9f342e;border-color:var(--red)}
.pill.pending{color:var(--text-sub);border-color:#5c7891}
.sov{font:12px var(--mono);color:var(--text-sub);display:flex;align-items:center;gap:6px;cursor:pointer;padding:5px 7px;border-radius:8px;background:rgba(6,16,29,.64)}
.sov small{color:var(--text-ghost)}
.sov input{accent-color:var(--green);width:16px;height:16px}

.panel,.route-panel{pointer-events:auto;align-self:center;background:linear-gradient(145deg,rgba(12,28,44,.94),rgba(7,18,31,.92));
  backdrop-filter:blur(13px);border:1px solid rgba(102,149,181,.58);border-radius:14px;padding:14px 15px;
  box-shadow:0 14px 50px rgba(0,0,0,.32),0 0 0 1px rgba(58,244,200,.04) inset}
.telemetry{grid-column:1;grid-row:2;max-width:280px}
.panel .row{display:flex;align-items:baseline;gap:8px;margin-top:5px}
.panel .row b{font:750 21px var(--mono);color:var(--yuyay-300);text-shadow:0 0 18px rgba(58,244,200,.26)}
.panel .row small{color:var(--text-sub);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.source-state,.freshness-state,.route-mode{font:10px/1.45 var(--mono);margin:9px 0 0;color:var(--text-sub)}
.freshness-state{color:var(--text-ghost);margin-top:3px}
.panel .legend{display:flex;gap:10px;margin-top:10px;font:9px var(--mono);color:var(--text-sub);flex-wrap:wrap}
.panel .legend i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:4px;box-shadow:0 0 10px currentColor}

.route-panel{grid-column:3;grid-row:2;width:100%;max-height:min(62vh,560px);overflow:hidden}
.route-mode{margin:7px 0 10px}
.route-feed{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:430px;overflow:auto;scrollbar-width:thin}
.route-feed li{position:relative;padding:8px 9px 8px 13px;border:1px solid rgba(80,120,151,.42);border-radius:9px;background:rgba(7,18,31,.82)}
.route-feed li::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--route-color,var(--yuyay-400));box-shadow:0 0 14px var(--route-color,var(--yuyay-400))}
.route-feed strong{display:block;font:650 11px/1.35 var(--mono);color:var(--text)}
.route-feed span{display:block;margin-top:2px;font:9px/1.4 var(--mono);color:var(--text-ghost)}

.tier-rail{grid-column:2;grid-row:3;justify-self:center;pointer-events:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:740px}
.tier-chip{border:1px solid rgba(98,151,185,.5);border-radius:999px;padding:5px 8px;background:rgba(7,20,34,.9);color:var(--text-sub);font:9px var(--mono);cursor:pointer}
.tier-chip b{color:var(--tier-color,var(--yuyay-300));margin-right:4px}
.tier-chip:hover,.tier-chip:focus-visible{border-color:var(--tier-color,var(--yuyay-300));color:#fff;box-shadow:0 0 18px color-mix(in srgb,var(--tier-color) 30%,transparent)}

#hud footer{grid-column:1/-1;grid-row:4;display:flex;justify-content:space-between;gap:18px;font:10px var(--mono);color:var(--text-ghost);pointer-events:auto}
#hud footer span:first-child{max-width:78ch}

.label-layer{position:fixed;inset:0;z-index:15;pointer-events:none;opacity:0;transition:opacity .45s ease}
body.scene-ready .label-layer{opacity:1}
.node-label{position:absolute;left:0;top:0;pointer-events:auto;transform:translate(-50%,-50%);white-space:nowrap;border:1px solid rgba(93,143,177,.58);border-radius:6px;
  padding:3px 6px;background:rgba(5,15,27,.88);color:#eaf6ff;font:650 9px var(--mono);line-height:1.2;cursor:pointer;
  box-shadow:0 4px 13px rgba(0,0,0,.38),0 0 12px rgba(50,143,186,.08);transition:opacity .15s,border-color .15s,box-shadow .15s}
.node-label .node-tier{color:var(--node-color,var(--yuyay-300));margin-right:5px}
.node-label[data-kind="tier"]{font-size:10px;padding:4px 7px;border-color:var(--node-color);color:#fff;background:rgba(7,24,38,.94);z-index:3}
.node-label[data-active="true"]{border-color:var(--node-color);box-shadow:0 0 0 1px color-mix(in srgb,var(--node-color) 35%,transparent),0 0 22px color-mix(in srgb,var(--node-color) 35%,transparent);z-index:4}
.node-label[data-muted="true"]{opacity:.18}
.node-label[hidden]{display:none}

.tip{position:fixed;pointer-events:none;z-index:40;max-width:320px;background:rgba(5,16,29,.97);border:1px solid var(--border);border-left:3px solid var(--yuyay-400);border-radius:8px;padding:8px 11px;font-size:12px;line-height:1.4;box-shadow:0 15px 40px rgba(0,0,0,.42)}
.tip b{color:var(--yuyay-300);font-family:var(--mono)}
.card{position:fixed;right:16px;top:64px;z-index:50;width:min(350px,calc(100vw - 32px));max-height:calc(100vh - 84px);overflow:auto;background:rgba(5,16,29,.98);border:1px solid var(--border);border-radius:12px;padding:17px 19px;box-shadow:0 18px 60px rgba(0,0,0,.66)}
.card .x{position:absolute;right:9px;top:7px;background:none;border:0;color:var(--text-sub);font-size:22px;cursor:pointer}
.card h2{font:700 15px var(--mono);margin:0 28px 4px 0}
.card .lic{display:inline-block;font:700 10px var(--mono);padding:2px 8px;border-radius:999px;margin-bottom:8px}
.card table{width:100%;border-collapse:collapse;font-size:11px}
.card td{padding:4px 0;border-bottom:1px solid rgba(65,98,125,.55);color:var(--text-sub)}
.card td:first-child{color:var(--text-ghost);font-family:var(--mono);width:38%}
.card a{color:var(--info);font:11px var(--mono);word-break:break-all}
.noscript-note{position:fixed;z-index:80;left:16px;right:16px;bottom:16px;margin:0;padding:10px 14px;border:1px solid var(--hatun-400);border-radius:9px;background:#251d0e;color:#fff3ca;font:12px var(--mono)}

@media(max-width:900px){
  #hud{grid-template-columns:minmax(195px,230px) 1fr;grid-template-rows:auto 1fr auto auto}
  .route-panel{grid-column:2;max-width:300px;justify-self:end}
  .tier-rail{grid-column:1/-1}
  .node-label{font-size:8px}
}
@media(max-width:680px){
  #hud{padding:9px;gap:7px;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto auto}
  #hud header{gap:6px}.brand{font-size:10px;padding:6px 8px}.pill{font-size:8px;padding:4px 6px}.sov{font-size:9px}.sov small{display:none}
  .global-links a{font-size:8px;padding:4px 5px}.global-links a:nth-child(3){display:none}
  .telemetry{width:min(190px,48vw);padding:10px;align-self:start;margin-top:8px}.panel .row b{font-size:16px}.panel .row small{font-size:8px}
  .source-state,.freshness-state{font-size:8px}.panel .legend{gap:6px;font-size:8px}
  .route-panel{width:min(210px,49vw);padding:10px;align-self:start;margin-top:8px;max-height:42vh}.route-feed{max-height:31vh}.route-feed li{padding:6px 6px 6px 10px}.route-feed strong{font-size:9px}.route-feed span{font-size:8px}
  .tier-rail{gap:4px}.tier-chip{font-size:8px;padding:4px 6px}.tier-chip span{display:none}
  #hud footer{font-size:8px}#hud footer span:first-child{display:none}
  .node-label{font-size:7px;padding:2px 4px;max-width:118px;overflow:hidden;text-overflow:ellipsis}
  .node-label[data-kind="model"]:not([data-active="true"]):nth-child(2n){display:none}
  .fallback-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:430px){
  .route-panel{display:none}.telemetry{width:min(205px,70vw)}
  .node-label[data-kind="model"]:not([data-active="true"]){display:none}
  .fallback-shell{padding:22px}.fallback-tiers{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .holo-field{display:none}
}