1:root {
2 --bg: #14161a;
3 --panel: #1d2026;
4 --panel2: #23272f;
5 --border: #31363f;
6 --text: #d6dae2;
7 --muted: #8b93a1;
8 --accent: #e8a33d;
9 --accent2: #4dd0e1;
10 --good: #6fbf73;
11 --warn: #e57373;
12 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
13}
15* { box-sizing: border-box; }
17html, body, #root {
18 margin: 0;
19 height: 100%;
20 background: var(--bg);
21 color: var(--text);
22}
24.app {
25 display: flex;
26 flex-direction: column;
27 height: 100vh;
28}
30.topbar {
31 display: flex;
32 align-items: center;
33 gap: 10px;
34 padding: 8px 14px;
35 background: var(--panel);
36 border-bottom: 1px solid var(--border);
37 flex-wrap: wrap;
38}
40.topbar h1 {
41 font-size: 16px;
42 margin: 0 12px 0 0;
43 font-weight: 600;
44 color: var(--accent);
45 white-space: nowrap;
46}
48button {
49 background: var(--panel2);
50 color: var(--text);
51 border: 1px solid var(--border);
52 border-radius: 6px;
53 padding: 6px 14px;
54 font-size: 13px;
55 cursor: pointer;
56}
57button:hover { border-color: var(--muted); }
58button:disabled { opacity: 0.45; cursor: default; }
59button.primary {
60 background: var(--accent);
61 color: #1a1204;
62 border-color: var(--accent);
63 font-weight: 600;
64}
65button.play {
66 background: var(--good);
67 color: #06210a;
68 border-color: var(--good);
69 font-weight: 600;
70}
71button.play.preview {
72 background: transparent;
73 color: var(--accent);
74 border-color: var(--accent);
75}
76button.loop.active {
77 background: var(--accent2);
78 color: #062a2f;
79 border-color: var(--accent2);
80 font-weight: 600;
81}
83.status {
84 margin-left: auto;
85 font-size: 12px;
86 color: var(--muted);
87 display: flex;
88 align-items: center;
89 gap: 8px;
90 min-width: 180px;
91 justify-content: flex-end;
92}
94.badge {
95 font-size: 11px;
96 border-radius: 10px;
97 padding: 2px 8px;
98 border: 1px solid var(--border);
99}
100.badge.preview { color: var(--accent); border-color: var(--accent); }
101.badge.full { color: var(--good); border-color: var(--good); }
103.progressbar {
104 width: 90px;
105 height: 6px;
106 background: var(--panel2);
107 border-radius: 3px;
108 overflow: hidden;
109}
110.progressbar > div {
111 height: 100%;
112 background: var(--accent2);
113 transition: width 0.1s linear;
114}
116.main {
117 display: flex;
118 flex: 1;
119 min-height: 0;
120}
122.sidebar {
123 width: 340px;
124 min-width: 340px;
125 overflow-y: auto;
126 background: var(--panel);
127 border-right: 1px solid var(--border);
128 padding: 8px;
129}
131.content {
132 flex: 1;
133 overflow-y: auto;
134 padding: 10px;
135 display: grid;
136 grid-template-columns: 1fr 1fr;
137 gap: 10px;
138 align-content: start;
139}
141.card {
142 background: var(--panel);
143 border: 1px solid var(--border);
144 border-radius: 8px;
145 padding: 8px 10px 10px;
146 min-width: 0;
147}
148.card.wide { grid-column: 1 / -1; }
149.card h2 {
150 font-size: 12px;
151 text-transform: uppercase;
152 letter-spacing: 0.06em;
153 color: var(--muted);
154 margin: 0 0 6px;
155 font-weight: 600;
156}
157.card canvas { display: block; width: 100%; }
159.scene3d { height: 380px; position: relative; }
160.scene3d canvas { height: 100%; border-radius: 6px; }
161.scene-hint {
162 position: absolute;
163 bottom: 10px;
164 right: 14px;
165 font-size: 11px;
166 color: var(--muted);
167 pointer-events: none;
168}
170/* Parameter panel */
171details.group {
172 border: 1px solid var(--border);
173 border-radius: 6px;
174 margin-bottom: 6px;
175 background: var(--panel2);
176}
177details.group summary {
178 cursor: pointer;
179 padding: 6px 10px;
180 font-size: 13px;
181 font-weight: 600;
182 user-select: none;
183}
184details.group[open] summary { border-bottom: 1px solid var(--border); }
185.group-body { padding: 6px 10px 8px; }
187.param-row { margin-bottom: 8px; }
188.param-label {
189 display: flex;
190 justify-content: space-between;
191 font-size: 12px;
192 margin-bottom: 2px;
193 align-items: baseline;
194}
195.param-label .name { color: var(--text); }
196.param-controls { display: flex; gap: 8px; align-items: center; }
197.param-controls input[type='range'] { flex: 1; accent-color: var(--accent2); }
198.param-controls input[type='number'] {
199 width: 88px;
200 background: var(--bg);
201 color: var(--text);
202 border: 1px solid var(--border);
203 border-radius: 4px;
204 padding: 3px 5px;
205 font-size: 12px;
206}
207.param-controls select, .param-controls input[type='checkbox'] {
208 background: var(--bg);
209 color: var(--text);
210 border: 1px solid var(--border);
211 border-radius: 4px;
212 font-size: 12px;
213}
214.param-help { font-size: 11px; color: var(--muted); margin-top: 1px; }
216/* Diagnostics */
217.diag table { border-collapse: collapse; font-size: 12px; width: 100%; }
218.diag td, .diag th {
219 padding: 2px 8px 2px 0;
220 text-align: left;
221 color: var(--text);
222 font-weight: 400;
223}
224.diag th { color: var(--muted); white-space: nowrap; }
225.diag .partials { font-variant-numeric: tabular-nums; }
226.warning { color: var(--warn); font-size: 12px; margin-top: 4px; }
227.cachenote { color: var(--muted); font-size: 11px; margin-top: 6px; }
229.mode-list { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
230.mode-list button { padding: 3px 10px; font-size: 12px; }
231.mode-list button.active { border-color: var(--accent2); color: var(--accent2); }
233@media (max-width: 1100px) {
234 .content { grid-template-columns: 1fr; }
235}