style.css (14466B)
1 /* Dark theme (default) */ 2 :root, [data-theme="dark"] { 3 --bg: #0f1117; 4 --surface: #1a1d27; 5 --border: #2a2d3a; 6 --text: #e1e4ed; 7 --text-dim: #8b8fa3; 8 --accent: #6c8cff; 9 --green: #3dd68c; 10 --red: #f06565; 11 --yellow: #f0c050; 12 --gray: #555; 13 --net-edge: rgba(160, 190, 255, 0.5); 14 --net-bg: #1a1d27; 15 --grid-line: #2a2d3a; 16 --hover-bg: rgba(108, 140, 255, 0.08); 17 --font: 'Menlo', 'Consolas', 'Monaco', monospace; 18 } 19 20 /* Light theme */ 21 [data-theme="light"] { 22 --bg: #f5f6f8; 23 --surface: #ffffff; 24 --border: #d8dbe3; 25 --text: #1a1d27; 26 --text-dim: #5c6070; 27 --accent: #3b5ccc; 28 --green: #1a8f55; 29 --red: #c93c3c; 30 --yellow: #b38a1a; 31 --gray: #999; 32 --net-edge: rgba(80, 110, 200, 0.5); 33 --net-bg: #ffffff; 34 --grid-line: #e0e2e8; 35 --hover-bg: rgba(59, 92, 204, 0.06); 36 } 37 38 * { margin: 0; padding: 0; box-sizing: border-box; } 39 40 body { 41 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 42 background: var(--bg); 43 color: var(--text); 44 line-height: 1.5; 45 } 46 47 header { 48 display: flex; 49 align-items: center; 50 gap: 2rem; 51 padding: 1rem 2rem; 52 border-bottom: 1px solid var(--border); 53 position: sticky; 54 top: 0; 55 background: var(--bg); 56 z-index: 100; 57 } 58 59 header h1 { font-size: 1.1rem; font-weight: 600; } 60 header h1 a { color: var(--text); text-decoration: none; } 61 62 nav { display: flex; gap: 1.5rem; flex: 1; } 63 nav a { 64 color: var(--text-dim); 65 text-decoration: none; 66 font-size: 0.9rem; 67 padding: 0.25rem 0; 68 border-bottom: 2px solid transparent; 69 transition: color 0.15s, border-color 0.15s; 70 } 71 nav a:hover, nav a.active { 72 color: var(--text); 73 border-bottom-color: var(--accent); 74 } 75 76 #theme-toggle { 77 background: none; 78 border: 1px solid var(--border); 79 color: var(--text); 80 font-size: 1.1rem; 81 cursor: pointer; 82 border-radius: 4px; 83 padding: 0.2rem 0.5rem; 84 transition: border-color 0.15s; 85 } 86 #theme-toggle:hover { border-color: var(--accent); } 87 88 main { 89 max-width: 1400px; 90 margin: 0 auto; 91 padding: 2rem; 92 } 93 94 /* Spinner */ 95 .spinner { 96 display: flex; 97 justify-content: center; 98 align-items: center; 99 padding: 4rem; 100 } 101 .spinner::after { 102 content: ''; 103 width: 32px; 104 height: 32px; 105 border: 3px solid var(--border); 106 border-top-color: var(--accent); 107 border-radius: 50%; 108 animation: spin 0.6s linear infinite; 109 } 110 @keyframes spin { to { transform: rotate(360deg); } } 111 112 /* Cards */ 113 .cards { 114 display: grid; 115 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 116 gap: 1rem; 117 margin-bottom: 2rem; 118 } 119 .card { 120 background: var(--surface); 121 border: 1px solid var(--border); 122 border-radius: 8px; 123 padding: 1.25rem; 124 } 125 .card .label { font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; } 126 .card .value { font-size: 2rem; font-weight: 700; margin-top: 0.25rem; font-family: var(--font); } 127 .card .value.green { color: var(--green); } 128 .card .value.red { color: var(--red); } 129 .card .value.yellow { color: var(--yellow); } 130 131 /* Sections */ 132 .section { 133 background: var(--surface); 134 border: 1px solid var(--border); 135 border-radius: 8px; 136 padding: 1.5rem; 137 margin-bottom: 1.5rem; 138 } 139 .section h2 { 140 font-size: 1rem; 141 font-weight: 600; 142 margin-bottom: 1rem; 143 color: var(--text-dim); 144 text-transform: uppercase; 145 letter-spacing: 0.05em; 146 } 147 148 /* SVG charts */ 149 svg text { fill: var(--text-dim); font-size: 11px; } 150 svg .bar { transition: opacity 0.15s; } 151 svg .bar:hover { opacity: 0.8; } 152 svg .grid-line { stroke: var(--grid-line); } 153 154 /* Horizontal bar chart */ 155 .hbar { margin-bottom: 0.5rem; } 156 .hbar-label { 157 font-size: 0.8rem; 158 color: var(--text-dim); 159 margin-bottom: 2px; 160 display: flex; 161 justify-content: space-between; 162 } 163 .hbar-track { 164 height: 20px; 165 background: var(--border); 166 border-radius: 3px; 167 overflow: hidden; 168 } 169 .hbar-fill { 170 height: 100%; 171 border-radius: 3px; 172 transition: width 0.3s; 173 } 174 175 /* Games list */ 176 .game-row { 177 display: flex; 178 justify-content: space-between; 179 align-items: center; 180 padding: 0.5rem 0; 181 border-bottom: 1px solid var(--border); 182 } 183 .game-row:last-child { border-bottom: none; } 184 .game-name { font-size: 0.9rem; font-weight: 600; } 185 .game-desc { font-size: 0.78rem; color: var(--text-dim); margin-top: 2px; } 186 .game-pct { font-family: var(--font); font-size: 0.9rem; color: var(--red); flex-shrink: 0; } 187 188 /* Table */ 189 .table-wrap { overflow-x: auto; } 190 table { 191 width: 100%; 192 border-collapse: collapse; 193 font-size: 0.85rem; 194 } 195 thead th { 196 text-align: left; 197 padding: 0.6rem 0.75rem; 198 border-bottom: 2px solid var(--border); 199 color: var(--text-dim); 200 font-weight: 600; 201 cursor: pointer; 202 white-space: nowrap; 203 user-select: none; 204 } 205 thead th:hover { color: var(--text); } 206 thead th.sorted::after { content: ' \u25BE'; } 207 thead th.sorted.asc::after { content: ' \u25B4'; } 208 tbody tr { 209 border-bottom: 1px solid var(--border); 210 cursor: pointer; 211 transition: background 0.1s; 212 } 213 tbody tr:hover { background: var(--hover-bg); } 214 td { padding: 0.5rem 0.75rem; } 215 td.score { 216 font-family: var(--font); 217 font-weight: 600; 218 } 219 220 /* Filters */ 221 .filters { 222 display: flex; 223 gap: 1rem; 224 flex-wrap: wrap; 225 margin-bottom: 1rem; 226 align-items: center; 227 } 228 .filters input, .filters select { 229 background: var(--surface); 230 border: 1px solid var(--border); 231 color: var(--text); 232 padding: 0.4rem 0.75rem; 233 border-radius: 4px; 234 font-size: 0.85rem; 235 } 236 .filters input { min-width: 200px; } 237 .filters select { min-width: 120px; } 238 .filters input:focus, .filters select:focus { 239 outline: none; 240 border-color: var(--accent); 241 } 242 .filter-count { font-size: 0.8rem; color: var(--text-dim); } 243 244 /* Score badge */ 245 .score-badge { 246 display: inline-block; 247 padding: 0.1rem 0.5rem; 248 border-radius: 3px; 249 font-family: var(--font); 250 font-size: 0.8rem; 251 font-weight: 600; 252 } 253 254 /* Checklist */ 255 .checklist-category { 256 margin-bottom: 1.5rem; 257 } 258 .checklist-category h3 { 259 font-size: 0.9rem; 260 margin-bottom: 0.5rem; 261 color: var(--accent); 262 } 263 .checklist-item { 264 display: flex; 265 gap: 0.5rem; 266 padding: 0.35rem 0; 267 font-size: 0.85rem; 268 border-bottom: 1px solid var(--border); 269 } 270 .checklist-item:last-child { border-bottom: none; } 271 .checklist-icon { flex-shrink: 0; width: 1.2rem; text-align: center; } 272 .checklist-icon.pass { color: var(--green); } 273 .checklist-icon.fail { color: var(--red); } 274 .checklist-icon.na { color: var(--gray); } 275 .checklist-q { flex: 1; } 276 .checklist-justification { 277 font-size: 0.8rem; 278 color: var(--text-dim); 279 margin-top: 2px; 280 } 281 282 /* Claims */ 283 .claim { 284 padding: 0.5rem 0; 285 border-bottom: 1px solid var(--border); 286 } 287 .claim:last-child { border-bottom: none; } 288 .claim-text { font-size: 0.85rem; } 289 .support-badge { 290 display: inline-block; 291 padding: 0.1rem 0.4rem; 292 border-radius: 3px; 293 font-size: 0.7rem; 294 text-transform: uppercase; 295 font-weight: 600; 296 } 297 .support-badge.strong { background: rgba(61, 214, 140, 0.2); color: var(--green); } 298 .support-badge.moderate { background: rgba(240, 192, 80, 0.2); color: var(--yellow); } 299 .support-badge.weak { background: rgba(240, 101, 101, 0.2); color: var(--red); } 300 .support-badge.unsupported { background: rgba(240, 101, 101, 0.3); color: var(--red); } 301 302 /* Red flags */ 303 .red-flag { 304 padding: 0.5rem 0; 305 border-bottom: 1px solid var(--border); 306 font-size: 0.85rem; 307 } 308 .red-flag .flag-name { color: var(--red); font-weight: 600; } 309 .red-flag .flag-detail { color: var(--text-dim); margin-top: 2px; } 310 311 /* Paper detail */ 312 .paper-header { margin-bottom: 1.5rem; } 313 .paper-header h2 { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text); text-transform: none; letter-spacing: normal; } 314 .paper-meta { font-size: 0.85rem; color: var(--text-dim); display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } 315 .paper-meta .tag { 316 background: rgba(108, 140, 255, 0.15); 317 color: var(--accent); 318 padding: 0.1rem 0.5rem; 319 border-radius: 3px; 320 font-size: 0.75rem; 321 } 322 .paper-links { 323 display: flex; 324 gap: 0.75rem; 325 margin-top: 0.5rem; 326 } 327 .paper-links a { 328 color: var(--accent); 329 text-decoration: none; 330 font-size: 0.8rem; 331 padding: 0.15rem 0.5rem; 332 border: 1px solid var(--accent); 333 border-radius: 3px; 334 transition: background 0.15s; 335 } 336 .paper-links a:hover { 337 background: rgba(108, 140, 255, 0.12); 338 } 339 .back-link { 340 display: inline-block; 341 color: var(--accent); 342 text-decoration: none; 343 font-size: 0.85rem; 344 margin-bottom: 1rem; 345 } 346 .back-link:hover { text-decoration: underline; } 347 348 .detail-grid { 349 display: grid; 350 grid-template-columns: 1fr 1fr; 351 gap: 1.5rem; 352 } 353 @media (max-width: 900px) { 354 .detail-grid { grid-template-columns: 1fr; } 355 } 356 357 /* Network */ 358 #network-canvas { 359 width: 100%; 360 border-radius: 8px; 361 background: var(--net-bg); 362 border: 1px solid var(--border); 363 cursor: grab; 364 } 365 #network-canvas:active { cursor: grabbing; } 366 .ego-panel { 367 background: var(--surface); 368 border: 1px solid var(--border); 369 border-radius: 8px; 370 padding: 1rem; 371 margin-top: 1rem; 372 max-height: 400px; 373 overflow-y: auto; 374 } 375 .ego-header { margin-bottom: 0.5rem; font-size: 0.9rem; } 376 .ego-stats { font-size: 0.8rem; margin-bottom: 0.75rem; } 377 .ego-list { margin-bottom: 0.75rem; } 378 .ego-list-label { font-size: 0.75rem; font-weight: 600; margin-bottom: 0.25rem; } 379 .ego-list-item { 380 font-size: 0.8rem; 381 padding: 0.15rem 0; 382 cursor: pointer; 383 border-bottom: 1px solid var(--border); 384 } 385 .ego-list-item:hover { color: var(--accent); } 386 .network-tooltip { 387 position: fixed; 388 background: var(--surface); 389 border: 1px solid var(--border); 390 padding: 0.5rem 0.75rem; 391 border-radius: 4px; 392 font-size: 0.8rem; 393 pointer-events: none; 394 z-index: 200; 395 max-width: 300px; 396 box-shadow: 0 2px 8px rgba(0,0,0,0.3); 397 } 398 399 /* Tensions */ 400 .tension-group { margin-bottom: 2rem; } 401 .tension-group h3 { 402 font-size: 1rem; 403 margin-bottom: 0.5rem; 404 } 405 .tension-columns { 406 display: grid; 407 grid-template-columns: 1fr 1fr; 408 gap: 1.5rem; 409 } 410 @media (max-width: 768px) { 411 .tension-columns { grid-template-columns: 1fr; } 412 } 413 .tension-col h4 { 414 font-size: 0.85rem; 415 color: var(--text-dim); 416 margin-bottom: 0.75rem; 417 padding-bottom: 0.5rem; 418 border-bottom: 1px solid var(--border); 419 } 420 .tension-claim { 421 padding: 0.4rem 0; 422 border-bottom: 1px solid var(--border); 423 font-size: 0.82rem; 424 } 425 .tension-claim:last-child { border-bottom: none; } 426 .tension-claim a { color: var(--accent); text-decoration: none; } 427 .tension-claim a:hover { text-decoration: underline; } 428 .tension-stat { 429 font-family: var(--font); 430 font-size: 0.85rem; 431 color: var(--text-dim); 432 margin-bottom: 0.5rem; 433 } 434 435 /* Archetype badges */ 436 .archetype { 437 display: inline-block; 438 padding: 0.1rem 0.5rem; 439 border-radius: 3px; 440 font-size: 0.75rem; 441 font-weight: 600; 442 } 443 .archetype.Complete { background: rgba(61, 214, 140, 0.2); color: var(--green); } 444 .archetype.Builder { background: rgba(108, 140, 255, 0.2); color: var(--accent); } 445 .archetype.Theater { background: rgba(240, 192, 80, 0.2); color: var(--yellow); } 446 .archetype.Mixed { background: rgba(139, 143, 163, 0.2); color: var(--text-dim); } 447 .archetype.Minimal { background: rgba(240, 101, 101, 0.2); color: var(--red); } 448 449 /* Pipeline progress bar */ 450 .pipeline-bar { 451 background: var(--surface); 452 border: 1px solid var(--border); 453 border-radius: 8px; 454 padding: 1rem 1.25rem; 455 margin-bottom: 1.5rem; 456 } 457 .pipeline-header { 458 display: flex; 459 justify-content: space-between; 460 align-items: baseline; 461 margin-bottom: 0.5rem; 462 } 463 .pipeline-title { 464 font-size: 0.75rem; 465 font-weight: 600; 466 color: var(--text-dim); 467 text-transform: uppercase; 468 letter-spacing: 0.05em; 469 } 470 .pipeline-stat { 471 font-family: var(--font); 472 font-size: 0.8rem; 473 color: var(--text); 474 } 475 .pipeline-track { 476 display: flex; 477 height: 12px; 478 border-radius: 6px; 479 overflow: hidden; 480 background: var(--border); 481 } 482 .pipeline-seg { 483 height: 100%; 484 transition: width 0.3s; 485 } 486 .pipeline-seg.v5opus { background: var(--accent); } 487 .pipeline-seg.v5haiku { background: var(--green); } 488 .pipeline-seg.deprecated { background: var(--yellow); } 489 .pipeline-seg.notscan { background: var(--gray); } 490 .pipeline-legend { 491 display: flex; 492 gap: 1.25rem; 493 margin-top: 0.5rem; 494 font-size: 0.75rem; 495 color: var(--text-dim); 496 } 497 .pipeline-dot { 498 display: inline-block; 499 width: 8px; 500 height: 8px; 501 border-radius: 50%; 502 margin-right: 4px; 503 vertical-align: middle; 504 } 505 .pipeline-dot.v5opus { background: var(--accent); } 506 .pipeline-dot.v5haiku { background: var(--green); } 507 .pipeline-dot.deprecated { background: var(--yellow); } 508 .pipeline-dot.notscan { background: var(--gray); } 509 510 /* Year trend chart */ 511 .trend-chart { margin-top: 0.5rem; } 512 513 /* Multi-line chart legend */ 514 .chart-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; } 515 .chart-legend-item { font-size: 0.75rem; color: var(--text-dim); display: flex; align-items: center; gap: 4px; } 516 .chart-legend-swatch { width: 14px; height: 3px; border-radius: 1px; display: inline-block; } 517 518 /* Toggle buttons for category lines */ 519 .toggle-group { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; } 520 .toggle-btn { 521 font-size: 0.72rem; 522 padding: 0.2rem 0.55rem; 523 border: 1px solid var(--border); 524 border-radius: 3px; 525 background: none; 526 color: var(--text-dim); 527 cursor: pointer; 528 transition: all 0.15s; 529 } 530 .toggle-btn:hover { border-color: var(--text-dim); } 531 .toggle-btn.active { background: rgba(108, 140, 255, 0.08); } 532 533 /* Reproducibility funnel */ 534 .funnel-step { margin-bottom: 0.4rem; } 535 .funnel-label { 536 display: flex; 537 justify-content: space-between; 538 font-size: 0.82rem; 539 margin-bottom: 2px; 540 } 541 .funnel-track { 542 height: 24px; 543 background: var(--border); 544 border-radius: 3px; 545 overflow: hidden; 546 } 547 .funnel-fill { 548 height: 100%; 549 border-radius: 3px; 550 transition: width 0.3s; 551 } 552 553 /* Methodology treemap */ 554 .treemap { 555 display: flex; 556 flex-wrap: wrap; 557 gap: 4px; 558 min-height: 80px; 559 } 560 .treemap-cell { 561 border-radius: 6px; 562 padding: 0.6rem 0.75rem; 563 min-height: 60px; 564 display: flex; 565 flex-direction: column; 566 justify-content: center; 567 flex-grow: 1; 568 } 569 .treemap-label { 570 font-size: 0.82rem; 571 font-weight: 600; 572 color: #fff; 573 text-shadow: 0 1px 2px rgba(0,0,0,0.4); 574 } 575 .treemap-value { 576 font-size: 0.72rem; 577 color: rgba(255,255,255,0.8); 578 font-family: var(--font); 579 text-shadow: 0 1px 2px rgba(0,0,0,0.4); 580 } 581 582 /* DNA strip (paper profile in table) */ 583 .dna-strip { 584 display: inline-flex; 585 gap: 1px; 586 vertical-align: middle; 587 } 588 .dna-cell { 589 display: inline-block; 590 width: 6px; 591 height: 14px; 592 border-radius: 1px; 593 } 594 595 /* PCA scatter canvas */ 596 #pca-canvas { 597 width: 100%; 598 max-width: 800px; 599 border-radius: 8px; 600 border: 1px solid var(--border); 601 cursor: default; 602 }