Hugging Face's logo

Spaces:
Peppinob
/
state-swap-steering-explorer
Sleeping

App Files Community
state-swap-steering-explorer
File size: 2,622 Bytes 
eb483d2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
abaec95
eb483d2
abaec95
 
eb483d2
 
 
 
 
 
 
 
 
 
 
abaec95
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
84167ba
 
 
 
abaec95
 
 
 
 
eb483d2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom tier colors */
@layer utilities {
  .tier-5 { @apply bg-emerald-500; }
  .tier-4 { @apply bg-lime-500; }
  .tier-3 { @apply bg-yellow-500; }
  .tier-2 { @apply bg-orange-400; }
  .tier-1 { @apply bg-red-500; }
  .tier-0 { @apply bg-slate-600; }
  
  .tier-5-text { @apply text-emerald-400; }
  .tier-4-text { @apply text-lime-400; }
  .tier-3-text { @apply text-yellow-400; }
  .tier-2-text { @apply text-orange-400; }
  .tier-1-text { @apply text-red-400; }
  .tier-0-text { @apply text-slate-400; }
}

/* Matrix cell animations */
@layer components {
  .matrix-cell {
    @apply transition-all duration-100 cursor-pointer;
  }
  
  .matrix-cell:hover {
    @apply scale-150 z-10 ring-2 ring-white/50;
  }
  
  .matrix-cell.selected {
    @apply ring-2 ring-cyan-400;
  }
}

/* Slide-in panel */
@layer components {
  .detail-panel {
    @apply fixed right-0 top-0 h-full bg-slate-900 border-l border-slate-700;
    @apply shadow-2xl overflow-y-auto transform transition-transform duration-300;
    width: 100%;
    max-width: 450px;
  }
  
  .detail-panel.hidden {
    @apply translate-x-full;
  }
  
  .detail-panel.visible {
    @apply translate-x-0;
  }
}

/* Mobile-specific adjustments */
@media (max-width: 480px) {
  .detail-panel {
    max-width: 100%;
    border-left: none;
  }
  
  /* Hide keyboard hints on mobile - not useful on touch devices */
  .keyboard-hint {
    display: none !important;
  }
  
  /* More compact state header on mobile */
  .detail-panel .text-2xl {
    font-size: 1.25rem;
  }
  
  /* Compact header on mobile */
  .mobile-title {
    font-size: 1.125rem !important;
  }
  
  /* Smaller stat values on mobile */
  .stat-value {
    font-size: 1.5rem !important;
  }
  
  /* Better matrix controls on mobile */
  .matrix-controls {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .matrix-controls .sort-buttons {
    flex-wrap: wrap;
  }
  
  /* Single column for about links on very small screens */
  .about-links {
    grid-template-columns: 1fr !important;
  }
  
}

/* Hide non-essential elements on mobile/tablet */
@media (max-width: 640px) {
  .hidden-mobile {
    display: none !important;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-slate-900;
}

::-webkit-scrollbar-thumb {
  @apply bg-slate-700 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-slate-600;
}

/* Typography */
body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}