ksk76/AMDDeveloperHackathon
2
1<!DOCTYPE html>2<html lang="en">3 4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>Uplan — Immigration Document Intelligence</title>8 <link rel="preconnect" href="https://fonts.googleapis.com">9 <link10 href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500&display=swap"11 rel="stylesheet">12 <style>13 /* ═══════════════════════════════════════════════14 TOKENS15═══════════════════════════════════════════════ */16 :root {17 --void: #060608;18 --obsidian: #0c0c10;19 --surface: #111117;20 --surface-2: #18181f;21 --surface-3: #1f1f28;22 --border: rgba(255, 255, 255, 0.07);23 --border-lit: rgba(255, 255, 255, 0.14);24 --text-1: #f0f0f5;25 --text-2: #8e8ea8;26 --text-3: #55556a;27 --amber: #f5a623;28 --amber-dim: rgba(245, 166, 35, 0.12);29 --amber-glow: rgba(245, 166, 35, 0.3);30 --red: #ff3355;31 --red-dim: rgba(255, 51, 85, 0.1);32 --cyan: #00e5ff;33 --cyan-dim: rgba(0, 229, 255, 0.08);34 --green: #00e676;35 --green-dim: rgba(0, 230, 118, 0.1);36 --font-display: 'Syne', sans-serif;37 --font-mono: 'IBM Plex Mono', monospace;38 --font-body: 'IBM Plex Sans', sans-serif;39 --radius: 3px;40 --radius-lg: 6px;41 }42 43 /* ═══════════════════════════════════════════════44 RESET45═══════════════════════════════════════════════ */46 *,47 *::before,48 *::after {49 box-sizing: border-box;50 margin: 0;51 padding: 0;52 }53 54 html {55 scroll-behavior: smooth;56 }57 58 body {59 background: var(--void);60 color: var(--text-1);61 font-family: var(--font-body);62 overflow-x: hidden;63 cursor: default;64 }65 66 button {67 cursor: pointer;68 }69 70 input,71 select {72 outline: none;73 }74 75 /* ═══════════════════════════════════════════════76 GRID BACKGROUND77═══════════════════════════════════════════════ */78 .grid-bg {79 position: fixed;80 inset: 0;81 pointer-events: none;82 z-index: 0;83 background-image:84 linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),85 linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);86 background-size: 32px 32px;87 }88 89 .vignette {90 position: fixed;91 inset: 0;92 pointer-events: none;93 z-index: 1;94 background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, var(--void) 100%);95 }96 97 /* ═══════════════════════════════════════════════98 PAGES99═══════════════════════════════════════════════ */100 .page {101 display: none;102 min-height: 100vh;103 position: relative;104 z-index: 2;105 }106 107 .page.active {108 display: block;109 }110 111 /* ═══════════════════════════════════════════════112 ━━━━━━━━━━ LANDING PAGE ━━━━━━━━━━113═══════════════════════════════════════════════ */114 #landing {115 display: none;116 flex-direction: column;117 align-items: center;118 min-height: 100vh;119 padding: 0 24px;120 }121 122 #landing.active {123 display: flex;124 }125 126 /* NAV */127 .land-nav {128 width: 100%;129 max-width: 1100px;130 display: flex;131 align-items: center;132 justify-content: space-between;133 padding: 28px 0 0;134 animation: fadeDown 0.6s ease forwards;135 }136 137 .land-logo {138 font-family: var(--font-display);139 font-size: 15px;140 font-weight: 700;141 letter-spacing: 3px;142 text-transform: uppercase;143 color: var(--text-1);144 }145 146 .land-logo span {147 color: var(--amber);148 }149 150 .land-nav-links {151 display: flex;152 gap: 32px;153 }154 155 .land-nav-links a {156 font-family: var(--font-mono);157 font-size: 11px;158 letter-spacing: 1.5px;159 text-transform: uppercase;160 color: var(--text-2);161 text-decoration: none;162 transition: color 0.2s;163 }164 165 .land-nav-links a:hover {166 color: var(--text-1);167 }168 169 .nav-cta {170 font-family: var(--font-mono);171 font-size: 11px;172 letter-spacing: 1.5px;173 text-transform: uppercase;174 color: var(--amber) !important;175 border: 1px solid var(--amber-glow);176 padding: 6px 16px;177 border-radius: var(--radius);178 transition: background 0.2s !important;179 }180 181 .nav-cta:hover {182 background: var(--amber-dim) !important;183 }184 185 /* HERO */186 .hero {187 width: 100%;188 max-width: 1100px;189 padding: 80px 0 60px;190 display: grid;191 grid-template-columns: 1fr 1fr;192 gap: 60px;193 align-items: center;194 }195 196 .hero-text {197 animation: fadeUp 0.8s 0.2s ease both;198 }199 200 .hero-kicker {201 font-family: var(--font-mono);202 font-size: 10px;203 letter-spacing: 3px;204 text-transform: uppercase;205 color: var(--amber);206 border: 1px solid var(--amber-glow);207 background: var(--amber-dim);208 display: inline-flex;209 align-items: center;210 gap: 8px;211 padding: 5px 12px;212 border-radius: 2px;213 margin-bottom: 28px;214 }215 216 .hero-kicker::before {217 content: '';218 width: 5px;219 height: 5px;220 border-radius: 50%;221 background: var(--amber);222 animation: pulse 2s infinite;223 }224 225 .hero-title {226 font-family: var(--font-display);227 font-size: clamp(36px, 5vw, 58px);228 font-weight: 800;229 line-height: 1.05;230 letter-spacing: -1px;231 color: var(--text-1);232 margin-bottom: 20px;233 }234 235 .hero-title em {236 font-style: normal;237 color: var(--amber);238 }239 240 .hero-sub {241 font-size: 15px;242 line-height: 1.7;243 color: var(--text-2);244 max-width: 460px;245 margin-bottom: 40px;246 }247 248 .hero-actions {249 display: flex;250 gap: 14px;251 align-items: center;252 }253 254 .btn-primary {255 font-family: var(--font-mono);256 font-size: 12px;257 font-weight: 600;258 letter-spacing: 1.5px;259 text-transform: uppercase;260 background: var(--amber);261 color: var(--void);262 border: none;263 padding: 14px 28px;264 border-radius: var(--radius);265 transition: filter 0.2s, transform 0.1s;266 }267 268 .btn-primary:hover {269 filter: brightness(1.1);270 transform: translateY(-1px);271 }272 273 .btn-primary:active {274 transform: translateY(0);275 }276 277 .btn-ghost {278 font-family: var(--font-mono);279 font-size: 11px;280 letter-spacing: 1.5px;281 text-transform: uppercase;282 color: var(--text-2);283 background: none;284 border: 1px solid var(--border-lit);285 padding: 13px 22px;286 border-radius: var(--radius);287 transition: all 0.2s;288 }289 290 .btn-ghost:hover {291 color: var(--text-1);292 border-color: rgba(255, 255, 255, 0.25);293 }294 295 /* PIPELINE CANVAS */296 .hero-visual {297 animation: fadeIn 1s 0.4s ease both;298 position: relative;299 }300 301 .pipeline-canvas {302 width: 100%;303 height: 420px;304 position: relative;305 overflow: visible;306 }307 308 .pipe-node {309 position: absolute;310 border: 1px solid var(--border-lit);311 border-radius: var(--radius-lg);312 background: var(--surface);313 padding: 12px 16px;314 font-family: var(--font-mono);315 font-size: 10px;316 letter-spacing: 1px;317 text-transform: uppercase;318 color: var(--text-2);319 transition: border-color 0.3s, box-shadow 0.3s;320 animation: nodeAppear 0.6s ease both;321 min-width: 130px;322 text-align: center;323 }324 325 .pipe-node.active-node {326 border-color: var(--amber-glow);327 box-shadow: 0 0 24px rgba(245, 166, 35, 0.15);328 color: var(--amber);329 }330 331 .pipe-node b {332 font-weight: 600;333 display: block;334 font-size: 11px;335 margin-bottom: 2px;336 }337 338 .pipe-node small {339 font-size: 9px;340 color: var(--text-3);341 letter-spacing: 0.5px;342 }343 344 /* SVG pipeline edges are drawn in JS */345 .pipeline-svg {346 position: absolute;347 top: 0;348 left: 0;349 width: 100%;350 height: 100%;351 pointer-events: none;352 }353 354 /* STATS ROW */355 .stats-row {356 width: 100%;357 max-width: 1100px;358 display: grid;359 grid-template-columns: repeat(4, 1fr);360 border: 1px solid var(--border);361 border-radius: var(--radius-lg);362 background: var(--surface);363 margin-bottom: 80px;364 animation: fadeUp 0.8s 0.5s ease both;365 overflow: hidden;366 }367 368 .stat-cell {369 padding: 28px 24px;370 border-right: 1px solid var(--border);371 transition: background 0.2s;372 }373 374 .stat-cell:last-child {375 border-right: none;376 }377 378 .stat-cell:hover {379 background: var(--surface-2);380 }381 382 .stat-num {383 font-family: var(--font-display);384 font-size: 32px;385 font-weight: 800;386 color: var(--amber);387 display: block;388 margin-bottom: 4px;389 }390 391 .stat-label {392 font-family: var(--font-mono);393 font-size: 10px;394 letter-spacing: 1px;395 color: var(--text-3);396 text-transform: uppercase;397 }398 399 /* SECTIONS */400 .section {401 width: 100%;402 max-width: 1100px;403 padding: 80px 0;404 border-top: 1px solid var(--border);405 }406 407 .section-kicker {408 font-family: var(--font-mono);409 font-size: 10px;410 letter-spacing: 3px;411 text-transform: uppercase;412 color: var(--amber);413 margin-bottom: 16px;414 }415 416 .section-title {417 font-family: var(--font-display);418 font-size: clamp(24px, 3vw, 36px);419 font-weight: 700;420 letter-spacing: -0.5px;421 margin-bottom: 16px;422 }423 424 .section-sub {425 font-size: 15px;426 color: var(--text-2);427 line-height: 1.7;428 max-width: 560px;429 }430 431 /* METHOD CARDS */432 .method-grid {433 display: grid;434 grid-template-columns: repeat(3, 1fr);435 gap: 16px;436 margin-top: 48px;437 }438 439 .method-card {440 background: var(--surface);441 border: 1px solid var(--border);442 border-radius: var(--radius-lg);443 padding: 28px 24px;444 transition: border-color 0.2s, transform 0.2s;445 position: relative;446 overflow: hidden;447 }448 449 .method-card::before {450 content: '';451 position: absolute;452 top: 0;453 left: 0;454 right: 0;455 height: 2px;456 background: var(--amber);457 transform: scaleX(0);458 transform-origin: left;459 transition: transform 0.3s ease;460 }461 462 .method-card:hover {463 border-color: var(--border-lit);464 transform: translateY(-2px);465 }466 467 .method-card:hover::before {468 transform: scaleX(1);469 }470 471 .method-num {472 font-family: var(--font-mono);473 font-size: 10px;474 color: var(--amber);475 letter-spacing: 2px;476 margin-bottom: 16px;477 display: block;478 }479 480 .method-title {481 font-family: var(--font-display);482 font-size: 16px;483 font-weight: 700;484 margin-bottom: 10px;485 line-height: 1.3;486 }487 488 .method-desc {489 font-size: 13px;490 color: var(--text-2);491 line-height: 1.65;492 }493 494 /* ENCODING SECTION */495 .encoding-viz {496 margin-top: 48px;497 display: grid;498 grid-template-columns: 1fr auto 1fr;499 gap: 24px;500 align-items: center;501 }502 503 .enc-block {504 background: var(--surface);505 border: 1px solid var(--border);506 border-radius: var(--radius-lg);507 padding: 24px;508 height: 280px;509 overflow: hidden;510 position: relative;511 }512 513 .enc-block-title {514 font-family: var(--font-mono);515 font-size: 9px;516 letter-spacing: 2px;517 text-transform: uppercase;518 color: var(--text-3);519 margin-bottom: 12px;520 }521 522 .enc-lines {523 display: flex;524 flex-direction: column;525 gap: 5px;526 }527 528 .enc-line {529 height: 7px;530 border-radius: 2px;531 background: rgba(255, 255, 255, 0.06);532 animation: shimmer 3s infinite;533 }534 535 .enc-token-count {536 position: absolute;537 bottom: 16px;538 right: 16px;539 font-family: var(--font-mono);540 font-size: 10px;541 color: var(--text-3);542 }543 544 .enc-arrow {545 display: flex;546 flex-direction: column;547 align-items: center;548 gap: 8px;549 font-family: var(--font-mono);550 font-size: 9px;551 color: var(--amber);552 letter-spacing: 1px;553 text-transform: uppercase;554 text-align: center;555 }556 557 .enc-arrow-line {558 width: 2px;559 height: 60px;560 background: linear-gradient(to bottom, transparent, var(--amber), transparent);561 animation: pulse 2s infinite;562 }563 564 .node-pill {565 display: flex;566 align-items: center;567 gap: 8px;568 background: var(--surface-2);569 border: 1px solid var(--border-lit);570 border-radius: var(--radius);571 padding: 10px 14px;572 margin-bottom: 8px;573 font-family: var(--font-mono);574 font-size: 11px;575 color: var(--text-1);576 animation: slideIn 0.5s ease both;577 }578 579 .node-dot {580 width: 8px;581 height: 8px;582 border-radius: 50%;583 flex-shrink: 0;584 }585 586 /* AGENTS SECTION */587 .agents-grid {588 display: grid;589 grid-template-columns: repeat(5, 1fr);590 gap: 12px;591 margin-top: 48px;592 }593 594 .agent-card {595 background: var(--surface);596 border: 1px solid var(--border);597 border-radius: var(--radius-lg);598 padding: 20px 16px;599 text-align: center;600 transition: all 0.2s;601 }602 603 .agent-card:hover {604 border-color: var(--amber-glow);605 background: var(--surface-2);606 }607 608 .agent-icon {609 font-size: 24px;610 margin-bottom: 12px;611 display: block;612 }613 614 .agent-name {615 font-family: var(--font-display);616 font-size: 13px;617 font-weight: 700;618 margin-bottom: 6px;619 color: var(--text-1);620 }621 622 .agent-desc {623 font-size: 11px;624 color: var(--text-2);625 line-height: 1.5;626 }627 628 /* FOOTER */629 .land-footer {630 width: 100%;631 max-width: 1100px;632 padding: 32px 0 48px;633 border-top: 1px solid var(--border);634 display: flex;635 justify-content: space-between;636 align-items: center;637 font-family: var(--font-mono);638 font-size: 10px;639 color: var(--text-3);640 letter-spacing: 1px;641 }642 643 /* ═══════════════════════════════════════════════644 ━━━━━━━━━━ TOOL SHELL ━━━━━━━━━━645═══════════════════════════════════════════════ */646 #tool {647 display: none;648 flex-direction: column;649 height: 100vh;650 }651 652 #tool.active {653 display: flex;654 }655 656 .tool-topbar {657 height: 52px;658 flex-shrink: 0;659 background: var(--obsidian);660 border-bottom: 1px solid var(--border);661 display: flex;662 align-items: center;663 justify-content: space-between;664 padding: 0 24px;665 z-index: 100;666 }667 668 .tool-logo {669 font-family: var(--font-display);670 font-size: 13px;671 font-weight: 700;672 letter-spacing: 3px;673 text-transform: uppercase;674 }675 676 .tool-logo span {677 color: var(--amber);678 }679 680 .tool-breadcrumb {681 display: flex;682 align-items: center;683 gap: 8px;684 font-family: var(--font-mono);685 font-size: 11px;686 color: var(--text-3);687 }688 689 .tool-breadcrumb .crumb {690 color: var(--text-2);691 }692 693 .tool-breadcrumb .crumb.active {694 color: var(--amber);695 }696 697 .tool-breadcrumb .sep {698 color: var(--text-3);699 }700 701 .tool-back {702 font-family: var(--font-mono);703 font-size: 10px;704 letter-spacing: 1.5px;705 text-transform: uppercase;706 color: var(--text-2);707 background: none;708 border: 1px solid var(--border);709 padding: 6px 14px;710 border-radius: var(--radius);711 transition: all 0.2s;712 }713 714 .tool-back:hover {715 color: var(--text-1);716 border-color: var(--border-lit);717 }718 719 /* STEP SYSTEM */720 .tool-body {721 flex: 1;722 overflow-y: auto;723 padding: 32px 24px;724 }725 726 .tool-step {727 display: none;728 max-width: 800px;729 margin: 0 auto;730 }731 732 .tool-step.active {733 display: block;734 animation: fadeUp 0.4s ease both;735 }736 737 .step-header {738 margin-bottom: 40px;739 }740 741 .step-kicker {742 font-family: var(--font-mono);743 font-size: 10px;744 letter-spacing: 2px;745 text-transform: uppercase;746 color: var(--text-3);747 margin-bottom: 10px;748 }749 750 .step-title {751 font-family: var(--font-display);752 font-size: 26px;753 font-weight: 700;754 letter-spacing: -0.3px;755 margin-bottom: 8px;756 }757 758 .step-sub {759 font-size: 14px;760 color: var(--text-2);761 line-height: 1.6;762 }763 764 /* FORM ELEMENTS */765 .field-group {766 margin-bottom: 28px;767 }768 769 .field-label {770 font-family: var(--font-mono);771 font-size: 10px;772 letter-spacing: 1.5px;773 text-transform: uppercase;774 color: var(--text-2);775 margin-bottom: 8px;776 display: block;777 }778 779 .field-required {780 color: var(--red);781 margin-left: 4px;782 }783 784 .field-select,785 .field-input {786 width: 100%;787 background: var(--surface);788 border: 1px solid var(--border);789 color: var(--text-1);790 padding: 12px 16px;791 font-family: var(--font-mono);792 font-size: 13px;793 border-radius: var(--radius);794 transition: border-color 0.2s, box-shadow 0.2s;795 appearance: none;796 }797 798 .field-select:focus,799 .field-input:focus {800 border-color: var(--amber-glow);801 box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.08);802 }803 804 .select-wrap {805 position: relative;806 }807 808 .select-wrap::after {809 content: '▾';810 position: absolute;811 right: 14px;812 top: 50%;813 transform: translateY(-50%);814 color: var(--text-3);815 pointer-events: none;816 font-size: 12px;817 }818 819 .field-grid {820 display: grid;821 grid-template-columns: 1fr 1fr;822 gap: 16px;823 }824 825 .field-grid-3 {826 display: grid;827 grid-template-columns: 1fr 1fr 1fr;828 gap: 16px;829 }830 831 /* PATH SELECTOR */832 .path-cards {833 display: grid;834 grid-template-columns: repeat(3, 1fr);835 gap: 12px;836 margin-bottom: 32px;837 }838 839 .path-card {840 border: 1px solid var(--border);841 border-radius: var(--radius-lg);842 padding: 20px;843 cursor: pointer;844 transition: all 0.2s;845 background: var(--surface);846 text-align: left;847 }848 849 .path-card:hover {850 border-color: var(--border-lit);851 background: var(--surface-2);852 }853 854 .path-card.selected {855 border-color: var(--amber-glow);856 background: var(--amber-dim);857 }858 859 .path-card-icon {860 font-size: 20px;861 margin-bottom: 10px;862 display: block;863 }864 865 .path-card-title {866 font-family: var(--font-display);867 font-size: 13px;868 font-weight: 700;869 margin-bottom: 6px;870 }871 872 .path-card-desc {873 font-size: 12px;874 color: var(--text-2);875 line-height: 1.5;876 }877 878 /* CHECKLIST */879 .checklist {880 display: flex;881 flex-direction: column;882 gap: 8px;883 margin: 24px 0;884 }885 886 .checklist-item {887 display: flex;888 align-items: center;889 gap: 12px;890 background: var(--surface);891 border: 1px solid var(--border);892 border-radius: var(--radius);893 padding: 14px 16px;894 font-size: 13px;895 transition: border-color 0.2s;896 }897 898 .checklist-item.required {899 border-left: 2px solid var(--red);900 }901 902 .checklist-item.recommended {903 border-left: 2px solid var(--amber);904 }905 906 .checklist-item.optional {907 border-left: 2px solid var(--text-3);908 }909 910 .checklist-badge {911 font-family: var(--font-mono);912 font-size: 9px;913 letter-spacing: 1px;914 text-transform: uppercase;915 padding: 2px 7px;916 border-radius: 2px;917 flex-shrink: 0;918 }919 920 .badge-req {921 background: var(--red-dim);922 color: var(--red);923 border: 1px solid rgba(255, 51, 85, 0.25);924 }925 926 .badge-rec {927 background: var(--amber-dim);928 color: var(--amber);929 border: 1px solid var(--amber-glow);930 }931 932 .badge-opt {933 background: rgba(255, 255, 255, 0.04);934 color: var(--text-3);935 border: 1px solid var(--border);936 }937 938 .checklist-name {939 flex: 1;940 font-weight: 500;941 color: var(--text-1);942 }943 944 .checklist-desc {945 font-size: 11px;946 color: var(--text-2);947 }948 949 /* UPLOAD SLOTS */950 .upload-slots {951 display: flex;952 flex-direction: column;953 gap: 12px;954 margin: 24px 0;955 }956 957 .upload-slot {958 border: 1px solid var(--border);959 border-radius: var(--radius-lg);960 background: var(--surface);961 overflow: hidden;962 transition: border-color 0.2s;963 }964 965 .upload-slot-header {966 display: flex;967 align-items: center;968 justify-content: space-between;969 padding: 14px 16px;970 border-bottom: 1px solid var(--border);971 }972 973 .upload-slot-label {974 display: flex;975 align-items: center;976 gap: 10px;977 font-family: var(--font-mono);978 font-size: 11px;979 color: var(--text-1);980 }981 982 .upload-slot-status {983 font-family: var(--font-mono);984 font-size: 9px;985 letter-spacing: 1px;986 text-transform: uppercase;987 color: var(--text-3);988 }989 990 .upload-slot-status.uploaded {991 color: var(--green);992 }993 994 .upload-slot-status.validating {995 color: var(--amber);996 }997 998 .upload-slot-status.error {999 color: var(--red);1000 }1001 1002 .upload-slot-body {1003 padding: 14px 16px;1004 display: flex;1005 align-items: center;1006 justify-content: space-between;1007 gap: 12px;1008 }1009 1010 .upload-drop-area {1011 flex: 1;1012 border: 1px dashed var(--border);1013 border-radius: var(--radius);1014 padding: 16px;1015 text-align: center;1016 cursor: pointer;1017 transition: all 0.2s;1018 position: relative;1019 }1020 1021 .upload-drop-area:hover {1022 border-color: var(--amber-glow);1023 background: var(--amber-dim);1024 }1025 1026 .upload-drop-area input[type=file] {1027 position: absolute;1028 inset: 0;1029 opacity: 0;1030 cursor: pointer;1031 width: 100%;1032 height: 100%;1033 }1034 1035 .upload-drop-text {1036 font-family: var(--font-mono);1037 font-size: 11px;1038 color: var(--text-2);1039 }1040 1041 .upload-file-info {1042 font-family: var(--font-mono);1043 font-size: 11px;1044 color: var(--green);1045 display: flex;1046 align-items: center;1047 gap: 6px;1048 }1049 1050 .validation-chip {1051 font-family: var(--font-mono);1052 font-size: 10px;1053 padding: 6px 12px;1054 border-radius: var(--radius);1055 white-space: nowrap;1056 }1057 1058 .vc-ok {1059 background: var(--green-dim);1060 color: var(--green);1061 border: 1px solid rgba(0, 230, 118, 0.25);1062 }1063 1064 .vc-err {1065 background: var(--red-dim);1066 color: var(--red);1067 border: 1px solid rgba(255, 51, 85, 0.25);1068 }1069 1070 .vc-wait {1071 background: rgba(255, 255, 255, 0.04);1072 color: var(--text-3);1073 border: 1px solid var(--border);1074 }1075 1076 /* PIPELINE PROGRESS */1077 .pipeline-progress {1078 display: flex;1079 flex-direction: column;1080 gap: 0;1081 margin: 32px 0;1082 border: 1px solid var(--border);1083 border-radius: var(--radius-lg);1084 overflow: hidden;1085 }1086 1087 .pipeline-stage {1088 display: flex;1089 align-items: flex-start;1090 gap: 20px;1091 padding: 20px 24px;1092 border-bottom: 1px solid var(--border);1093 position: relative;1094 transition: background 0.2s;1095 }1096 1097 .pipeline-stage:last-child {1098 border-bottom: none;1099 }1100 1101 .pipeline-stage.running {1102 background: rgba(245, 166, 35, 0.04);1103 }1104 1105 .pipeline-stage.done {1106 background: rgba(0, 230, 118, 0.03);1107 }1108 1109 .ps-indicator {1110 width: 28px;1111 height: 28px;1112 border-radius: 50%;1113 flex-shrink: 0;1114 border: 1px solid var(--border);1115 background: var(--surface-2);1116 display: flex;1117 align-items: center;1118 justify-content: center;1119 font-family: var(--font-mono);1120 font-size: 10px;1121 color: var(--text-3);1122 transition: all 0.3s;1123 }1124 1125 .pipeline-stage.running .ps-indicator {1126 border-color: var(--amber);1127 color: var(--amber);1128 animation: spin 1s linear infinite;1129 }1130 1131 .pipeline-stage.done .ps-indicator {1132 border-color: var(--green);1133 background: var(--green-dim);1134 color: var(--green);1135 }1136 1137 .ps-content {1138 flex: 1;1139 }1140 1141 .ps-title {1142 font-family: var(--font-display);1143 font-size: 14px;1144 font-weight: 700;1145 margin-bottom: 4px;1146 color: var(--text-1);1147 }1148 1149 .ps-desc {1150 font-size: 12px;1151 color: var(--text-2);1152 line-height: 1.5;1153 }1154 1155 .ps-meta {1156 font-family: var(--font-mono);1157 font-size: 10px;1158 color: var(--text-3);1159 margin-top: 8px;1160 letter-spacing: 0.5px;1161 }1162 1163 .ps-time {1164 font-family: var(--font-mono);1165 font-size: 11px;1166 color: var(--text-3);1167 flex-shrink: 0;1168 }1169 1170 /* TOKEN COMPRESSION BAR */1171 .compression-display {1172 background: var(--surface);1173 border: 1px solid var(--border);1174 border-radius: var(--radius-lg);1175 padding: 20px 24px;1176 margin-top: 20px;1177 }1178 1179 .comp-label {1180 display: flex;1181 justify-content: space-between;1182 align-items: center;1183 font-family: var(--font-mono);1184 font-size: 10px;1185 color: var(--text-2);1186 letter-spacing: 1px;1187 text-transform: uppercase;1188 margin-bottom: 12px;1189 }1190 1191 .comp-label b {1192 color: var(--amber);1193 font-size: 16px;1194 }1195 1196 .comp-track {1197 height: 6px;1198 background: rgba(255, 255, 255, 0.05);1199 border-radius: 3px;1200 overflow: hidden;