| /* ========================================================================== | |
| Attention Lab · 3D Neural Architecture Visualizer Styling | |
| State-of-the-Art Spatial Architecture Comparison & Educational Interface | |
| ========================================================================== */ | |
| :root { | |
| color-scheme: dark; | |
| --bg: #050a12; | |
| --surface: rgba(9, 20, 34, .78); | |
| --surface-strong: rgba(14, 31, 50, .94); | |
| --line: rgba(133, 198, 235, .18); | |
| --line-strong: rgba(133, 198, 235, .42); | |
| --ink: #eef8ff; | |
| --muted: #8ca6b8; | |
| --cyan: #22d5f7; | |
| --blue: #3d82ff; | |
| --amber: #ffb34c; | |
| --green: #55d9a8; | |
| --violet: #aa8cff; | |
| --rose: #ff6f96; | |
| --flat-ink: #d7e2e1; | |
| --flat-muted: #8fa6a8; | |
| --flat-line: rgba(151, 180, 181, .28); | |
| --flat-panel: rgba(112, 142, 145, .10); | |
| --radius: 18px; | |
| --shadow: 0 24px 80px rgba(0, 0, 0, .42); | |
| /* Semantic Component Palette */ | |
| --col-dense: #3c5d73; | |
| --col-dense-glow: rgba(60, 93, 115, 0.4); | |
| --col-svd: #22d5f7; | |
| --col-svd-glow: rgba(34, 213, 247, 0.5); | |
| --col-moe: #aa8cff; | |
| --col-moe-glow: rgba(170, 140, 255, 0.5); | |
| --col-mla: #ffb34c; | |
| --col-mla-glow: rgba(255, 179, 76, 0.5); | |
| --text-primary: #eef8ff; | |
| --text-muted: #8ca6b8; | |
| --text-faint: #50647f; | |
| --panel: #0a111d; | |
| --panel-border: rgba(133, 198, 235, .18); | |
| --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; | |
| /* Background Surfaces & Z-Index Tokens */ | |
| --bg-surface: #060c14; | |
| --z-canvas: 1; | |
| --z-labels: 5; | |
| --z-hud: 10; | |
| --z-cards: 15; | |
| --z-topbar: 20; | |
| --z-dock: 25; | |
| --z-inspector: 30; | |
| --z-modal: 100; | |
| --z-toast: 200; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| user-select: none; | |
| } | |
| /* Accessibility Focus States */ | |
| button:focus-visible, | |
| [role="button"]:focus-visible, | |
| input:focus-visible, | |
| select:focus-visible { | |
| outline: 2px solid var(--cyan); | |
| outline-offset: 2px; | |
| } | |
| /* Accessibility: Reduced Motion */ | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| scroll-behavior: auto ; | |
| } | |
| } | |
| /* Accessibility: High Contrast */ | |
| @media (prefers-contrast: more) { | |
| :root { | |
| --line: rgba(133, 198, 235, 0.5); | |
| --line-strong: rgba(133, 198, 235, 0.85); | |
| --muted: #b8c8d4; | |
| } | |
| } | |
| html, body { | |
| width: 100%; | |
| min-width: 320px; | |
| height: 100%; | |
| overflow: hidden; | |
| color: var(--ink); | |
| background: | |
| radial-gradient(circle at 16% 22%, rgba(32, 132, 201, .17), transparent 34%), | |
| radial-gradient(circle at 85% 31%, rgba(170, 140, 255, .08), transparent 29%), | |
| var(--bg); | |
| font-family: var(--font-sans); | |
| text-rendering: optimizeLegibility; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| body.view-2d { | |
| background: #0a1116; | |
| } | |
| body.view-2d .mechanism-button.active { | |
| border-color: rgba(151, 180, 181, .34); | |
| background: rgba(132, 163, 164, .14); | |
| box-shadow: inset 0 0 24px rgba(151, 180, 181, .06); | |
| } | |
| body.view-2d .detail-kicker { | |
| color: var(--flat-muted); | |
| } | |
| /* ========================================================================== | |
| Scene Container & Canvas | |
| ========================================================================== */ | |
| .scene-wrap { | |
| position: absolute; | |
| inset: 0; | |
| overflow: hidden; | |
| } | |
| #webgl-canvas { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| touch-action: none; | |
| display: block; | |
| z-index: 1; | |
| } | |
| /* Screen-Space Leader Guides & Interactive Callout Badges */ | |
| #labels { | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| overflow: hidden; | |
| z-index: 6; | |
| } | |
| .label-guides { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| } | |
| .label-guides path { | |
| fill: none; | |
| stroke-width: 1.5; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| transition: opacity 0.2s ease; | |
| } | |
| .callout-badges { | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| } | |
| .label.component.callout { | |
| position: absolute; | |
| transform: translate(-50%, -50%); | |
| pointer-events: auto; | |
| cursor: pointer; | |
| border-radius: 999px; | |
| padding: 5px 12px; | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| font-weight: 700; | |
| color: #fff; | |
| background: rgba(9, 20, 34, 0.88); | |
| border: 1px solid var(--line); | |
| backdrop-filter: blur(14px); | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); | |
| transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| white-space: nowrap; | |
| } | |
| .label.component.callout i { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| } | |
| .label.component.callout:hover { | |
| transform: translate(-50%, -50%) scale(1.08); | |
| border-color: var(--cyan); | |
| background: rgba(14, 31, 50, 0.96); | |
| box-shadow: 0 0 16px rgba(34, 213, 247, 0.45); | |
| } | |
| .label.component.callout.active { | |
| border-color: var(--cyan); | |
| background: rgba(34, 213, 247, 0.22); | |
| box-shadow: 0 0 20px rgba(34, 213, 247, 0.6); | |
| } | |
| /* ========================================================================== | |
| Header Bar (Polymetis / Attention Lab Style) | |
| ========================================================================== */ | |
| .topbar { | |
| position: absolute; | |
| z-index: 12; | |
| inset: 0 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 16px; | |
| min-height: 64px; | |
| padding: 10px clamp(16px, 2.5vw, 36px); | |
| pointer-events: none; | |
| background: linear-gradient(180deg, rgba(5, 10, 18, .96), rgba(5, 10, 18, .50), transparent); | |
| } | |
| .eyebrow { | |
| display: flex; | |
| align-items: center; | |
| gap: 9px; | |
| margin-bottom: 5px; | |
| color: var(--cyan); | |
| font: 760 9px/1.2 var(--font-mono); | |
| letter-spacing: .14em; | |
| text-transform: uppercase; | |
| } | |
| .eyebrow::before { | |
| content: ""; | |
| width: 22px; | |
| height: 1px; | |
| background: currentColor; | |
| box-shadow: 0 0 12px currentColor; | |
| } | |
| h1 { | |
| margin: 0; | |
| font-size: clamp(20px, 2.4vw, 32px); | |
| line-height: 1; | |
| letter-spacing: -.04em; | |
| font-weight: 800; | |
| } | |
| h1 span { | |
| color: var(--muted); | |
| font-weight: 430; | |
| } | |
| .top-actions { | |
| display: flex; | |
| align-items: center; | |
| flex-wrap: nowrap; | |
| overflow-x: auto; | |
| max-width: calc(100vw - 380px); | |
| gap: 6px; | |
| pointer-events: auto; | |
| scrollbar-width: none; | |
| } | |
| .top-actions::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .view-toggle { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 2px; | |
| min-height: 38px; | |
| padding: 3px; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| background: rgba(9, 20, 33, .72); | |
| backdrop-filter: blur(16px); | |
| } | |
| .view-toggle button { | |
| min-width: 34px; | |
| height: 30px; | |
| padding: 0 10px; | |
| border: 1px solid transparent; | |
| border-radius: 999px; | |
| background: transparent; | |
| color: var(--muted); | |
| font: 800 10px/1 var(--font-mono); | |
| letter-spacing: .04em; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .view-toggle button:hover { | |
| color: var(--ink); | |
| background: rgba(141, 169, 171, .12); | |
| } | |
| .view-toggle button.active { | |
| color: var(--flat-ink); | |
| border-color: rgba(151, 180, 181, .34); | |
| background: rgba(132, 163, 164, .20); | |
| box-shadow: inset 0 0 14px rgba(151, 180, 181, .08); | |
| .status, .round-button { | |
| min-height: 32px; | |
| height: 32px; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| background: rgba(9, 20, 33, .72); | |
| backdrop-filter: blur(16px); | |
| color: var(--ink); | |
| flex-shrink: 0; | |
| } | |
| .status { | |
| display: flex; | |
| align-items: center; | |
| gap: 7px; | |
| padding: 0 10px; | |
| color: var(--muted); | |
| font: 700 9px/1 var(--font-mono); | |
| letter-spacing: .06em; | |
| } | |
| .status i { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: var(--amber); | |
| box-shadow: 0 0 12px currentColor; | |
| } | |
| .status.ready i { | |
| background: var(--green); | |
| } | |
| .round-button { | |
| padding: 0 10px; | |
| font-size: 10px; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| white-space: nowrap; | |
| } | |
| .round-button:hover { | |
| border-color: var(--line-strong); | |
| background: rgba(18, 39, 61, .86); | |
| color: #fff; | |
| box-shadow: 0 0 14px rgba(34, 213, 247, 0.25); | |
| } | |
| .quick-select-box { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .quick-module-select { | |
| background: rgba(9, 20, 33, 0.85); | |
| color: var(--cyan); | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| padding: 8px 30px 8px 14px; | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| font-weight: 600; | |
| letter-spacing: 0.2px; | |
| cursor: pointer; | |
| outline: none; | |
| transition: all 0.2s ease; | |
| appearance: none; | |
| -webkit-appearance: none; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2322d5f7' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 12px center; | |
| max-width: 220px; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .quick-module-select:hover, .quick-module-select:focus { | |
| border-color: var(--cyan); | |
| box-shadow: 0 0 14px rgba(34, 213, 247, 0.35); | |
| } | |
| .quick-module-select optgroup { | |
| background: #08101a; | |
| color: #94a3b8; | |
| font-weight: 700; | |
| font-size: 10px; | |
| } | |
| .quick-module-select option { | |
| background: #060d16; | |
| color: #f1f5f9; | |
| font-weight: 400; | |
| font-size: 10px; | |
| } | |
| /* ========================================================================== | |
| Mechanism Navigation Bar | |
| ========================================================================== */ | |
| .mechanism-nav { | |
| position: absolute; | |
| z-index: 11; | |
| top: 68px; | |
| left: 50%; | |
| display: grid; | |
| grid-template-columns: repeat(6, 1fr); | |
| width: min(780px, calc(100vw - 40px)); | |
| padding: 3px; | |
| transform: translateX(-50%); | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| background: rgba(8, 18, 30, .80); | |
| backdrop-filter: blur(22px); | |
| box-shadow: 0 10px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05); | |
| } | |
| .mechanism-button { | |
| min-width: 0; | |
| height: 36px; | |
| padding: 0 8px; | |
| overflow: hidden; | |
| border: 1px solid transparent; | |
| border-radius: 10px; | |
| background: transparent; | |
| color: var(--muted); | |
| text-align: left; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .mechanism-button b { | |
| display: block; | |
| color: var(--ink); | |
| font-size: 11px; | |
| line-height: 1.15; | |
| } | |
| .mechanism-button small { | |
| display: block; | |
| margin-top: 2px; | |
| overflow: hidden; | |
| font: 650 8px/1 var(--font-mono); | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| } | |
| .mechanism-button:hover { | |
| border-color: var(--line); | |
| background: rgba(16, 35, 55, .62); | |
| } | |
| .mechanism-button.active { | |
| border-color: color-mix(in srgb, var(--cyan) 45%, transparent); | |
| background: color-mix(in srgb, var(--cyan) 15%, rgba(16, 35, 55, .80)); | |
| box-shadow: inset 0 0 24px color-mix(in srgb, var(--cyan) 8%, transparent); | |
| } | |
| .mechanism-button.active small { | |
| color: var(--cyan); | |
| } | |
| /* ========================================================================== | |
| Floating Detail Card (Left) | |
| ========================================================================== */ | |
| .detail-card { | |
| position: absolute; | |
| z-index: 9; | |
| top: 118px; | |
| left: clamp(16px, 2.5vw, 36px); | |
| width: min(276px, 24vw); | |
| padding: 16px 18px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| background: linear-gradient(145deg, rgba(15, 33, 53, .92), rgba(8, 18, 31, .75)); | |
| backdrop-filter: blur(20px); | |
| box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05); | |
| pointer-events: auto; | |
| transition: opacity 0.25s ease, transform 0.25s ease; | |
| } | |
| .detail-kicker { | |
| color: var(--cyan); | |
| font: 800 9px/1.3 var(--font-mono); | |
| letter-spacing: .10em; | |
| text-transform: uppercase; | |
| } | |
| .detail-card h2 { | |
| margin: 8px 0 7px; | |
| font-size: 20px; | |
| line-height: 1.1; | |
| font-weight: 800; | |
| } | |
| .detail-card p { | |
| min-height: 54px; | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 11px; | |
| line-height: 1.55; | |
| } | |
| .fact-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 7px; | |
| margin-top: 12px; | |
| } | |
| .fact { | |
| min-width: 0; | |
| padding: 8px; | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| background: rgba(3, 10, 18, .34); | |
| } | |
| .fact small { | |
| display: block; | |
| color: var(--muted); | |
| font: 650 8px/1.25 var(--font-mono); | |
| text-transform: uppercase; | |
| } | |
| .fact strong { | |
| display: block; | |
| margin-top: 3px; | |
| overflow: hidden; | |
| color: var(--ink); | |
| font: 770 10px/1.25 var(--font-mono); | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| } | |
| .detail-inspect-btn { | |
| width: 100%; | |
| margin-top: 12px; | |
| padding: 8px 10px; | |
| background: rgba(34, 213, 247, 0.12); | |
| border: 1px solid rgba(34, 213, 247, 0.35); | |
| border-radius: 9px; | |
| color: var(--cyan); | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .detail-inspect-btn:hover { | |
| background: rgba(34, 213, 247, 0.22); | |
| border-color: var(--cyan); | |
| box-shadow: 0 0 12px rgba(34, 213, 247, 0.3); | |
| } | |
| /* ========================================================================== | |
| Floating Compare Card (Right) | |
| ========================================================================== */ | |
| .compare-card { | |
| position: absolute; | |
| z-index: 9; | |
| top: 118px; | |
| right: clamp(16px, 2.5vw, 36px); | |
| width: min(238px, 20vw); | |
| overflow: hidden; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| background: rgba(8, 18, 30, .74); | |
| backdrop-filter: blur(20px); | |
| box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05); | |
| pointer-events: auto; | |
| transition: opacity 0.25s ease, transform 0.25s ease; | |
| } | |
| body.inspector-open .compare-card, | |
| .inspector-drawer:not(.hidden) ~ .compare-card { | |
| opacity: 0 ; | |
| pointer-events: none ; | |
| transform: translateX(50px) ; | |
| } | |
| .compare-head { | |
| padding: 12px 14px; | |
| border-bottom: 1px solid var(--line); | |
| color: var(--muted); | |
| font: 760 8px/1.2 var(--font-mono); | |
| letter-spacing: .09em; | |
| text-transform: uppercase; | |
| } | |
| .compare-row { | |
| display: grid; | |
| grid-template-columns: 82px 1fr; | |
| gap: 9px; | |
| padding: 9px 14px; | |
| border-bottom: 1px solid var(--line); | |
| font-size: 10px; | |
| } | |
| .compare-row:last-child { | |
| border-bottom: 0; | |
| } | |
| .compare-row span { | |
| color: var(--muted); | |
| } | |
| .compare-row strong { | |
| overflow: hidden; | |
| font-weight: 760; | |
| text-align: right; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| font-family: var(--font-mono); | |
| } | |
| /* ========================================================================== | |
| Floating Control Dock (Bottom) | |
| ========================================================================== */ | |
| .control-dock { | |
| position: absolute; | |
| z-index: 14; | |
| bottom: max(16px, env(safe-area-inset-bottom)); | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: min(920px, calc(100vw - 32px)); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 8px 14px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 18px; | |
| background: rgba(8, 18, 30, .88); | |
| backdrop-filter: blur(24px); | |
| box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.07); | |
| } | |
| .dock-actions { | |
| display: flex; | |
| gap: 6px; | |
| align-items: center; | |
| flex-shrink: 0; | |
| } | |
| .primary, .secondary { | |
| height: 36px; | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| font-weight: 750; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| flex-shrink: 0; | |
| } | |
| .primary { | |
| min-width: 72px; | |
| border-color: transparent; | |
| background: var(--cyan); | |
| color: #03121a; | |
| font-size: 11px; | |
| } | |
| .secondary { | |
| min-width: 36px; | |
| padding: 0 10px; | |
| background: rgba(20, 39, 58, .74); | |
| color: var(--ink); | |
| font-size: 11px; | |
| } | |
| .primary:hover { | |
| filter: brightness(1.12); | |
| box-shadow: 0 0 16px rgba(34, 213, 247, 0.4); | |
| } | |
| .secondary:hover { | |
| border-color: var(--line-strong); | |
| background: rgba(27, 52, 77, 0.85); | |
| } | |
| .timeline { | |
| display: flex; | |
| flex: 1; | |
| min-width: 0; | |
| gap: 8px; | |
| align-items: center; | |
| } | |
| .timeline input[type="range"] { | |
| flex: 1; | |
| min-width: 60px; | |
| } | |
| .layer-quick-pills { | |
| display: flex; | |
| gap: 3px; | |
| align-items: center; | |
| overflow-x: auto; | |
| max-width: 260px; | |
| flex-shrink: 0; | |
| scrollbar-width: none; | |
| } | |
| .layer-quick-pills::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .layer-pill-btn { | |
| padding: 2px 6px; | |
| font-size: 9px; | |
| font-family: var(--font-mono); | |
| font-weight: 700; | |
| border-radius: 4px; | |
| background: rgba(255, 255, 255, 0.06); | |
| color: var(--muted); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| cursor: pointer; | |
| white-space: nowrap; | |
| transition: all 0.15s ease; | |
| } | |
| .layer-pill-btn:hover { | |
| background: rgba(56, 189, 248, 0.2); | |
| color: #38bdf8; | |
| border-color: #38bdf8; | |
| } | |
| .layer-pill-btn.active { | |
| background: #38bdf8; | |
| color: #040e1d; | |
| border-color: #38bdf8; | |
| font-weight: 800; | |
| } | |
| .layer-depth-card { | |
| margin-top: 12px; | |
| animation: fadeIn 0.25s ease; | |
| } | |
| .depth-step-btn { | |
| user-select: none; | |
| } | |
| .depth-step-btn:hover { | |
| filter: brightness(1.2); | |
| transform: translateY(-1px); | |
| } | |
| .depth-step-btn.active { | |
| box-shadow: 0 0 10px rgba(56, 189, 248, 0.4); | |
| } | |
| .timecode { | |
| color: var(--muted); | |
| font: 700 9px/1 var(--font-mono); | |
| font-variant-numeric: tabular-nums; | |
| white-space: nowrap; | |
| } | |
| input[type="range"] { | |
| width: 100%; | |
| accent-color: var(--cyan); | |
| cursor: ew-resize; | |
| } | |
| .speed { | |
| height: 41px; | |
| padding: 0 24px 0 10px; | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| background: rgba(20, 39, 58, .74); | |
| color: var(--ink); | |
| font-size: 10px; | |
| font-weight: 760; | |
| font-family: var(--font-mono); | |
| cursor: pointer; | |
| } | |
| /* ========================================================================== | |
| Viewport Legend | |
| ========================================================================== */ | |
| .legend { | |
| position: absolute; | |
| z-index: 12; | |
| left: clamp(16px, 2.5vw, 36px); | |
| bottom: 74px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| padding: 8px 12px; | |
| background: rgba(7, 14, 24, 0.82); | |
| backdrop-filter: blur(16px); | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); | |
| max-width: 260px; | |
| color: var(--muted); | |
| font-size: 9px; | |
| pointer-events: none; | |
| font-family: var(--font-mono); | |
| transition: opacity 0.2s ease, transform 0.2s ease; | |
| } | |
| .legend.hidden { | |
| display: none ; | |
| } | |
| .legend span { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| white-space: nowrap; | |
| } | |
| .legend i { | |
| width: 14px; | |
| height: 3px; | |
| border-radius: 99px; | |
| flex-shrink: 0; | |
| } | |
| .view-panels { | |
| position: absolute; | |
| inset: 56px 0 0 0; | |
| display: grid; | |
| grid-template-columns: 1fr auto 1fr; | |
| pointer-events: none; | |
| z-index: 5; | |
| } | |
| .view-panel { | |
| padding: 24px 32px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .panel-tag { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| letter-spacing: 1.5px; | |
| color: var(--text-faint); | |
| margin-bottom: 6px; | |
| } | |
| .panel-title { | |
| font-size: 20px; | |
| font-weight: 600; | |
| letter-spacing: -0.3px; | |
| color: var(--text-primary); | |
| text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); | |
| margin-bottom: 12px; | |
| } | |
| .legend-items { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .legend-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: rgba(11, 18, 30, 0.75); | |
| border: 1px solid var(--panel-border); | |
| border-radius: 12px; | |
| padding: 4px 10px; | |
| font-size: 11px; | |
| font-family: var(--font-mono); | |
| color: var(--text-muted); | |
| backdrop-filter: blur(8px); | |
| } | |
| .badge-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| } | |
| .legend-badge.dense .badge-dot { background-color: var(--col-dense); } | |
| .legend-badge.svd .badge-dot { background-color: var(--col-svd); box-shadow: 0 0 8px var(--col-svd); } | |
| .legend-badge.moe .badge-dot { background-color: var(--col-moe); box-shadow: 0 0 8px var(--col-moe); } | |
| .legend-badge.mla .badge-dot { background-color: var(--col-mla); box-shadow: 0 0 8px var(--col-mla); } | |
| .center-divider { | |
| position: relative; | |
| width: 1px; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .divider-line { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 1px; | |
| background: linear-gradient(to bottom, transparent, var(--panel-border) 15%, var(--panel-border) 85%, transparent); | |
| } | |
| .divider-badge { | |
| background: #0f1929; | |
| border: 1px solid var(--line); | |
| color: var(--text-faint); | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| padding: 3px 6px; | |
| border-radius: 4px; | |
| z-index: 2; | |
| } | |
| /* ========================================================================== | |
| Tooltips & Inspector Drawer | |
| ========================================================================== */ | |
| .tooltip { | |
| position: absolute; | |
| background: rgba(9, 16, 26, 0.96); | |
| border: 1px solid var(--col-svd); | |
| padding: 12px 16px; | |
| border-radius: 8px; | |
| color: var(--text-primary); | |
| font-size: 12px; | |
| pointer-events: none; | |
| z-index: 100; | |
| transform: translate(-50%, -125%); | |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), 0 0 15px rgba(83, 236, 217, 0.15); | |
| backdrop-filter: blur(12px); | |
| transition: opacity 0.15s ease-out; | |
| line-height: 1.5; | |
| } | |
| .tooltip.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .tooltip strong { | |
| color: var(--col-svd); | |
| font-size: 13px; | |
| display: block; | |
| margin-bottom: 4px; | |
| } | |
| .inspector-drawer { | |
| position: absolute; | |
| top: 68px; | |
| right: 20px; | |
| width: 360px; | |
| max-height: calc(100vh - 88px); | |
| overflow-y: auto; | |
| background: rgba(10, 17, 28, 0.95); | |
| border: 1px solid var(--panel-border); | |
| border-radius: 10px; | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7); | |
| backdrop-filter: blur(18px); | |
| z-index: 25; | |
| transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease; | |
| scrollbar-width: thin; | |
| } | |
| .inspector-drawer.hidden { | |
| transform: translateX(400px); | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .drawer-header { | |
| padding: 16px 20px; | |
| border-bottom: 1px solid var(--panel-border); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| } | |
| .drawer-header h3 { | |
| font-size: 15px; | |
| font-weight: 600; | |
| color: #fff; | |
| margin-top: 5px; | |
| } | |
| .badge { | |
| font-family: var(--font-mono); | |
| font-size: 9px; | |
| letter-spacing: 1px; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| background: #172d47; | |
| color: var(--col-svd); | |
| } | |
| .btn-icon-only { | |
| background: none; | |
| border: none; | |
| color: var(--text-faint); | |
| font-size: 16px; | |
| padding: 4px; | |
| } | |
| .btn-icon-only:hover { | |
| color: #fff; | |
| } | |
| .drawer-body { | |
| padding: 18px 20px; | |
| } | |
| .stat-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 10px; | |
| margin-bottom: 18px; | |
| } | |
| .stat-cell { | |
| background: #070d16; | |
| border: 1px solid var(--panel-border); | |
| border-radius: 6px; | |
| padding: 10px; | |
| } | |
| .stat-cell small { | |
| display: block; | |
| font-family: var(--font-mono); | |
| font-size: 9px; | |
| color: var(--text-faint); | |
| margin-bottom: 4px; | |
| } | |
| .stat-cell strong { | |
| font-family: var(--font-mono); | |
| font-size: 13px; | |
| color: #b9dcff; | |
| } | |
| .drawer-section h4 { | |
| font-size: 11px; | |
| font-family: var(--font-mono); | |
| letter-spacing: 0.5px; | |
| color: var(--text-faint); | |
| margin-bottom: 8px; | |
| text-transform: uppercase; | |
| } | |
| .drawer-section p { | |
| font-size: 12px; | |
| line-height: 1.6; | |
| color: var(--text-muted); | |
| } | |
| .educational-callout { | |
| margin-top: 14px; | |
| padding: 10px 12px; | |
| background: rgba(83, 236, 217, 0.06); | |
| border-left: 2px solid var(--col-svd); | |
| border-radius: 0 4px 4px 0; | |
| font-size: 11px; | |
| color: #92e0d5; | |
| line-height: 1.5; | |
| } | |
| /* ========================================================================== | |
| Hierarchical Layer Tree & Search | |
| ========================================================================== */ | |
| .tree-search-wrapper { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 8px; | |
| } | |
| .tree-search-input { | |
| width: 100%; | |
| background: #070d16; | |
| color: var(--text-primary); | |
| border: 1px solid var(--panel-border); | |
| border-radius: 6px; | |
| padding: 7px 28px 7px 10px; | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| outline: none; | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| } | |
| .tree-search-input:focus { | |
| border-color: var(--col-svd); | |
| box-shadow: 0 0 10px rgba(83, 236, 217, 0.2); | |
| } | |
| .btn-clear-search { | |
| position: absolute; | |
| right: 8px; | |
| background: none; | |
| border: none; | |
| color: var(--text-faint); | |
| font-size: 11px; | |
| cursor: pointer; | |
| padding: 2px 4px; | |
| } | |
| .btn-clear-search:hover { | |
| color: #fff; | |
| } | |
| .layer-tree-container { | |
| max-height: 220px; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| background: #050912; | |
| border: 1px solid var(--panel-border); | |
| border-radius: 6px; | |
| padding: 6px; | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| scrollbar-width: thin; | |
| scrollbar-color: #1a2f47 #050912; | |
| } | |
| .layer-tree-container::-webkit-scrollbar { | |
| width: 5px; | |
| } | |
| .layer-tree-container::-webkit-scrollbar-thumb { | |
| background: #1a2f47; | |
| border-radius: 3px; | |
| } | |
| .tree-model-root { | |
| margin-bottom: 4px; | |
| } | |
| .tree-model-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-weight: 700; | |
| color: #b0d4f6; | |
| padding: 4px 6px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| background: rgba(255, 255, 255, 0.03); | |
| } | |
| .tree-layer-node { | |
| margin-left: 6px; | |
| margin-top: 3px; | |
| border-left: 1px solid rgba(255, 255, 255, 0.07); | |
| padding-left: 6px; | |
| } | |
| .tree-layer-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 6px; | |
| border-radius: 4px; | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| transition: background 0.15s; | |
| user-select: none; | |
| } | |
| .tree-layer-header:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .tree-chevron { | |
| font-size: 9px; | |
| transition: transform 0.2s; | |
| display: inline-block; | |
| color: var(--text-faint); | |
| } | |
| .tree-layer-node.open > .tree-layer-header .tree-chevron { | |
| transform: rotate(90deg); | |
| } | |
| .tree-layer-content { | |
| display: none; | |
| margin-left: 10px; | |
| padding-left: 6px; | |
| border-left: 1px dashed rgba(255, 255, 255, 0.05); | |
| } | |
| .tree-layer-node.open > .tree-layer-content { | |
| display: block; | |
| } | |
| .tree-stream-group { | |
| margin-top: 4px; | |
| margin-bottom: 4px; | |
| } | |
| .tree-stream-label { | |
| font-size: 9px; | |
| letter-spacing: 0.5px; | |
| text-transform: uppercase; | |
| color: var(--text-faint); | |
| padding: 2px 4px; | |
| margin-bottom: 2px; | |
| } | |
| .tree-leaf { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 4px 6px; | |
| margin-bottom: 2px; | |
| border-radius: 4px; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| .tree-leaf:hover { | |
| background: rgba(83, 236, 217, 0.08); | |
| color: #fff; | |
| } | |
| .tree-leaf.active { | |
| background: rgba(83, 236, 217, 0.18); | |
| color: var(--col-svd); | |
| font-weight: 600; | |
| box-shadow: 0 0 8px rgba(83, 236, 217, 0.15); | |
| } | |
| .tree-leaf .leaf-name { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| max-width: 200px; | |
| } | |
| .tree-leaf .leaf-badge { | |
| font-size: 9px; | |
| padding: 1px 4px; | |
| border-radius: 3px; | |
| background: #0f1c2d; | |
| color: var(--text-faint); | |
| } | |
| .tree-leaf.type-svd .leaf-badge { | |
| color: var(--col-svd); | |
| background: rgba(83, 236, 217, 0.12); | |
| } | |
| .tree-leaf.type-dense .leaf-badge { | |
| color: #93b2cc; | |
| background: rgba(60, 93, 115, 0.2); | |
| } | |
| /* ========================================================================== | |
| Comparison Card & HUD | |
| ========================================================================== */ | |
| .comparison-card { | |
| background: #070e1a; | |
| border: 1px solid #192d47; | |
| border-radius: 6px; | |
| padding: 12px; | |
| margin-top: 12px; | |
| } | |
| .comp-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| color: var(--text-faint); | |
| margin-bottom: 8px; | |
| letter-spacing: 0.5px; | |
| } | |
| .badge-savings { | |
| background: rgba(83, 236, 217, 0.15); | |
| color: var(--col-svd); | |
| border: 1px solid rgba(83, 236, 217, 0.3); | |
| font-weight: 600; | |
| } | |
| .comp-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-size: 11px; | |
| padding: 4px 0; | |
| border-bottom: 1px dashed rgba(255, 255, 255, 0.05); | |
| } | |
| .comp-row:last-child { | |
| border-bottom: none; | |
| } | |
| .comp-label { | |
| color: var(--text-muted); | |
| } | |
| .comp-val { | |
| font-family: var(--font-mono); | |
| font-weight: 600; | |
| color: #eaf1fa; | |
| } | |
| /* Persistent Bottom-Right Architecture HUD */ | |
| .comparison-hud { | |
| position: absolute; | |
| bottom: 20px; | |
| right: 24px; | |
| background: rgba(8, 14, 24, 0.92); | |
| border: 1px solid var(--panel-border); | |
| border-radius: 8px; | |
| padding: 10px 14px; | |
| backdrop-filter: blur(14px); | |
| z-index: 20; | |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); | |
| font-family: var(--font-mono); | |
| min-width: 260px; | |
| pointer-events: auto; | |
| } | |
| .hud-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 8px; | |
| padding-bottom: 6px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| .hud-title { | |
| font-size: 10px; | |
| letter-spacing: 1px; | |
| color: var(--text-faint); | |
| } | |
| .hud-badge { | |
| font-size: 9px; | |
| background: #172d47; | |
| color: #b9dcff; | |
| padding: 2px 6px; | |
| border-radius: 3px; | |
| font-weight: 600; | |
| } | |
| .hud-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 8px 14px; | |
| } | |
| .hud-item { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .hud-label { | |
| font-size: 9px; | |
| color: var(--text-faint); | |
| margin-bottom: 2px; | |
| } | |
| .hud-val { | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .hud-val.highlight { | |
| color: var(--col-svd); | |
| } | |
| /* ========================================================================== | |
| Module Library Modal (240 Modules Explorer) | |
| ========================================================================== */ | |
| .btn-catalog { | |
| background: linear-gradient(135deg, #0284c7, #0369a1); | |
| border: 1px solid #38bdf8; | |
| color: #fff; | |
| font-weight: 600; | |
| } | |
| .comp-tab-all { | |
| background: rgba(56, 189, 248, 0.12); | |
| border: 1px dashed rgba(56, 189, 248, 0.4); | |
| color: #38bdf8; | |
| } | |
| .comp-tab-all:hover { | |
| background: rgba(56, 189, 248, 0.25); | |
| color: #fff; | |
| } | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(4, 8, 16, 0.85); | |
| backdrop-filter: blur(16px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 100; | |
| transition: opacity 0.25s ease; | |
| } | |
| .modal-overlay.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .modal-container { | |
| width: 92vw; | |
| max-width: 1050px; | |
| max-height: 86vh; | |
| background: #070d18; | |
| border: 1px solid var(--panel-border); | |
| border-radius: 12px; | |
| box-shadow: 0 16px 60px rgba(0, 0, 0, 0.8); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .modal-header { | |
| padding: 18px 24px; | |
| border-bottom: 1px solid var(--panel-border); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| background: rgba(13, 23, 38, 0.6); | |
| } | |
| .modal-header h2 { | |
| font-size: 17px; | |
| font-weight: 700; | |
| color: #fff; | |
| margin-top: 4px; | |
| } | |
| .modal-subtitle { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| margin-top: 4px; | |
| } | |
| .modal-close { | |
| font-size: 18px; | |
| cursor: pointer; | |
| } | |
| .modal-search-row { | |
| padding: 14px 24px 10px 24px; | |
| background: #080f1c; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .modal-search-input { | |
| width: 100%; | |
| background: #050a12; | |
| border: 1px solid var(--panel-border); | |
| border-radius: 8px; | |
| padding: 9px 14px; | |
| color: var(--text-primary); | |
| font-family: var(--font-sans); | |
| font-size: 12px; | |
| outline: none; | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| } | |
| .modal-search-input:focus { | |
| border-color: #38bdf8; | |
| box-shadow: 0 0 12px rgba(56, 189, 248, 0.25); | |
| } | |
| .modal-category-pills { | |
| display: flex; | |
| gap: 6px; | |
| overflow-x: auto; | |
| padding-bottom: 4px; | |
| scrollbar-width: none; | |
| } | |
| .modal-category-pills::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .cat-pill { | |
| background: #0e1a2b; | |
| border: 1px solid var(--panel-border); | |
| color: var(--text-muted); | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| padding: 4px 10px; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| white-space: nowrap; | |
| transition: all 0.15s; | |
| } | |
| .cat-pill:hover { | |
| color: #fff; | |
| border-color: #38bdf8; | |
| } | |
| .cat-pill.active { | |
| background: #0284c7; | |
| border-color: #38bdf8; | |
| color: #fff; | |
| font-weight: 600; | |
| } | |
| .modal-module-grid { | |
| padding: 18px 24px; | |
| overflow-y: auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 12px; | |
| scrollbar-width: thin; | |
| scrollbar-color: #172d47 #070d18; | |
| } | |
| .module-card { | |
| background: #091220; | |
| border: 1px solid var(--panel-border); | |
| border-radius: 8px; | |
| padding: 14px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| transition: all 0.2s ease; | |
| cursor: pointer; | |
| } | |
| .module-card:hover { | |
| border-color: var(--col-svd); | |
| background: #0c182a; | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); | |
| } | |
| .card-top { | |
| margin-bottom: 8px; | |
| } | |
| .card-badge-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 6px; | |
| } | |
| .card-category { | |
| font-family: var(--font-mono); | |
| font-size: 9px; | |
| color: #38bdf8; | |
| background: rgba(56, 189, 248, 0.12); | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| } | |
| .card-type { | |
| font-size: 9px; | |
| color: var(--text-faint); | |
| font-family: var(--font-mono); | |
| } | |
| .card-title { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: #fff; | |
| line-height: 1.35; | |
| margin-bottom: 4px; | |
| } | |
| .card-desc { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| line-height: 1.5; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 3; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| .card-math { | |
| background: rgba(0, 0, 0, 0.4); | |
| border-left: 2px solid var(--col-svd); | |
| padding: 4px 8px; | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| color: #93e3d6; | |
| margin-top: 8px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .card-bottom { | |
| margin-top: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding-top: 8px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .card-file { | |
| font-family: var(--font-mono); | |
| font-size: 9px; | |
| color: var(--text-faint); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 170px; | |
| white-space: nowrap; | |
| } | |
| .btn-apply-module { | |
| background: #172d47; | |
| border: 1px solid #2f5077; | |
| color: #b9ddff; | |
| font-size: 10px; | |
| font-weight: 600; | |
| padding: 4px 10px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| .btn-apply-module:hover { | |
| background: var(--col-svd); | |
| color: #060a12; | |
| border-color: var(--col-svd); | |
| } | |
| /* ========================================================================== | |
| 4-Model Cross-Benchmark Matrix | |
| ========================================================================== */ | |
| .models-matrix-section { | |
| margin-top: 14px; | |
| background: rgba(10, 18, 28, 0.7); | |
| border: 1px solid rgba(83, 236, 217, 0.2); | |
| border-radius: 8px; | |
| padding: 10px; | |
| } | |
| .matrix-title-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 8px; | |
| } | |
| .matrix-title-row h4 { | |
| margin: 0; | |
| font-size: 11px; | |
| color: #53ecd9; | |
| letter-spacing: 0.5px; | |
| font-weight: 700; | |
| } | |
| .matrix-subtitle { | |
| font-size: 9px; | |
| color: var(--text-muted); | |
| font-family: var(--font-mono); | |
| } | |
| .models-matrix-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 6px; | |
| } | |
| .model-matrix-card { | |
| background: rgba(6, 12, 20, 0.85); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 6px; | |
| padding: 8px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .model-matrix-card:hover { | |
| border-color: rgba(83, 236, 217, 0.5); | |
| background: rgba(13, 26, 42, 0.9); | |
| transform: translateY(-1px); | |
| } | |
| .model-matrix-card.active { | |
| border-color: #53ecd9; | |
| background: linear-gradient(135deg, rgba(83, 236, 217, 0.15), rgba(15, 30, 48, 0.9)); | |
| box-shadow: 0 0 10px rgba(83, 236, 217, 0.25) inset; | |
| } | |
| .mmc-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .mmc-name { | |
| font-weight: 700; | |
| font-size: 11px; | |
| color: #f1f5f9; | |
| } | |
| .mmc-ratio-badge { | |
| background: rgba(83, 236, 217, 0.2); | |
| color: #53ecd9; | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| font-weight: 700; | |
| padding: 1px 5px; | |
| border-radius: 4px; | |
| } | |
| .mmc-spec { | |
| font-size: 9px; | |
| color: var(--text-faint); | |
| font-family: var(--font-mono); | |
| } | |
| .mmc-stats { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 9px; | |
| font-family: var(--font-mono); | |
| color: var(--text-muted); | |
| border-top: 1px solid rgba(255, 255, 255, 0.05); | |
| padding-top: 4px; | |
| margin-top: 2px; | |
| } | |
| .mmc-stats b { | |
| color: #cbd5e1; | |
| } | |
| .mmc-saved { | |
| color: #5eead4; | |
| font-weight: 600; | |
| } | |
| .mmc-benchmark-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| gap: 4px; | |
| font-size: 8.5px; | |
| font-family: var(--font-mono); | |
| border-top: 1px dashed rgba(255, 255, 255, 0.08); | |
| padding-top: 4px; | |
| margin-top: 2px; | |
| } | |
| .mmc-bench-badge { | |
| padding: 1px 4px; | |
| border-radius: 3px; | |
| font-weight: 700; | |
| font-size: 8px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .mmc-bench-badge.status-pass { | |
| background: rgba(16, 185, 129, 0.22); | |
| color: #34d399; | |
| border: 1px solid rgba(16, 185, 129, 0.4); | |
| } | |
| .mmc-bench-badge.status-pass-low { | |
| background: rgba(245, 158, 11, 0.22); | |
| color: #fbbf24; | |
| border: 1px solid rgba(245, 158, 11, 0.4); | |
| } | |
| .mmc-bench-badge.status-skip { | |
| background: rgba(148, 163, 184, 0.15); | |
| color: #94a3b8; | |
| border: 1px solid rgba(148, 163, 184, 0.3); | |
| } | |
| .mmc-bench-acc { | |
| color: #f1f5f9; | |
| } | |
| .mmc-bench-acc b { | |
| color: #53ecd9; | |
| } | |
| .mmc-bench-metric { | |
| color: var(--text-faint); | |
| } | |
| .mmc-bench-metric b { | |
| color: #cbd5e1; | |
| } | |
| /* ========================================================================== | |
| Token State Lifecycle & Step-by-Step Additions Tracker | |
| ========================================================================== */ | |
| .token-lifecycle-section { | |
| margin-top: 12px; | |
| background: rgba(10, 18, 28, 0.75); | |
| border: 1px solid rgba(16, 185, 129, 0.3); | |
| border-radius: 8px; | |
| padding: 10px; | |
| } | |
| .lifecycle-subtitle { | |
| font-size: 9px; | |
| color: var(--text-muted); | |
| margin-top: 2px; | |
| margin-bottom: 8px; | |
| } | |
| .lifecycle-steps-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .lifecycle-step-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| background: rgba(6, 12, 20, 0.75); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| border-radius: 6px; | |
| padding: 7px 10px; | |
| transition: all 0.15s ease; | |
| cursor: pointer; | |
| } | |
| .lifecycle-step-item:hover { | |
| background: rgba(14, 28, 44, 0.9); | |
| border-color: rgba(52, 211, 153, 0.4); | |
| } | |
| .lifecycle-step-item.active-highlight { | |
| background: rgba(12, 38, 32, 0.95) ; | |
| border-color: #34d399 ; | |
| box-shadow: 0 0 14px rgba(52, 211, 153, 0.4), inset 0 0 8px rgba(52, 211, 153, 0.2) ; | |
| transform: translateX(4px); | |
| } | |
| .lsi-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 6px; | |
| } | |
| .lsi-title-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .lsi-num { | |
| font-size: 8.5px; | |
| font-weight: 700; | |
| font-family: var(--font-mono); | |
| color: #64748b; | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 1px 5px; | |
| border-radius: 3px; | |
| } | |
| .lsi-title { | |
| font-size: 11px; | |
| font-weight: 700; | |
| color: #f1f5f9; | |
| } | |
| .lsi-badge { | |
| font-size: 8px; | |
| font-weight: 700; | |
| font-family: var(--font-mono); | |
| text-transform: uppercase; | |
| padding: 1px 5px; | |
| border-radius: 3px; | |
| letter-spacing: 0.5px; | |
| } | |
| .lsi-flow { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-size: 9px; | |
| font-family: var(--font-mono); | |
| flex-wrap: wrap; | |
| background: rgba(2, 6, 12, 0.5); | |
| padding: 3px 6px; | |
| border-radius: 4px; | |
| border: 1px solid rgba(255, 255, 255, 0.03); | |
| } | |
| .lsi-in { | |
| color: #94a3b8; | |
| } | |
| .lsi-arrow { | |
| color: #475569; | |
| } | |
| .lsi-added { | |
| color: #f59e0b; | |
| font-weight: 700; | |
| background: rgba(245, 158, 11, 0.15); | |
| padding: 0 4px; | |
| border-radius: 3px; | |
| border: 1px solid rgba(245, 158, 11, 0.3); | |
| } | |
| .lsi-out { | |
| color: #34d399; | |
| font-weight: 600; | |
| } | |
| .lsi-math { | |
| font-size: 10px; | |
| color: #38bdf8; | |
| overflow-x: auto; | |
| padding-top: 2px; | |
| } | |
| /* ========================================================================== | |
| Component Architecture Pipeline | |
| ========================================================================== */ | |
| .component-pipeline-section { | |
| margin-top: 12px; | |
| background: rgba(10, 18, 28, 0.7); | |
| border: 1px solid rgba(83, 236, 217, 0.2); | |
| border-radius: 8px; | |
| padding: 10px; | |
| } | |
| .component-pipeline-list { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| margin-top: 8px; | |
| padding-left: 20px; | |
| } | |
| .component-pipeline-list::before { | |
| content: ''; | |
| position: absolute; | |
| top: 15px; | |
| bottom: 25px; | |
| left: 8px; | |
| width: 2px; | |
| background: linear-gradient(to bottom, #10b981, #38bdf8, #8b5cf6, #f43f5e); | |
| opacity: 0.5; | |
| z-index: 1; | |
| } | |
| .component-pipe-item { | |
| position: relative; | |
| z-index: 2; | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| background: rgba(6, 12, 20, 0.7); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| border-radius: 6px; | |
| padding: 7px 10px; | |
| transition: all 0.15s ease; | |
| gap: 8px; | |
| } | |
| .component-pipe-item:hover { | |
| background: rgba(14, 28, 44, 0.9); | |
| border-color: rgba(83, 236, 217, 0.4); | |
| cursor: pointer; | |
| } | |
| .component-pipe-item.active-highlight { | |
| background: rgba(16, 44, 58, 0.95) ; | |
| border-color: #53ecd9 ; | |
| box-shadow: 0 0 14px rgba(83, 236, 217, 0.45), inset 0 0 8px rgba(83, 236, 217, 0.2) ; | |
| transform: translateX(4px); | |
| } | |
| .component-pipe-item.active-highlight .cpi-name { | |
| color: #53ecd9 ; | |
| font-weight: 700; | |
| } | |
| .cpi-left { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 8px; | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .cpi-swatch { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 3px; | |
| flex-shrink: 0; | |
| margin-top: 3px; | |
| } | |
| .cpi-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .cpi-name-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| flex-wrap: wrap; | |
| } | |
| .cpi-name { | |
| font-size: 11px; | |
| font-weight: 700; | |
| color: #f1f5f9; | |
| } | |
| .cpi-path-tag { | |
| font-size: 8.5px; | |
| font-family: var(--font-mono); | |
| color: #94a3b8; | |
| background: rgba(255, 255, 255, 0.06); | |
| padding: 1px 5px; | |
| border-radius: 3px; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| .cpi-role { | |
| font-size: 9.5px; | |
| color: var(--text-muted); | |
| } | |
| .cpi-math-preview { | |
| font-size: 10.5px; | |
| color: #38bdf8; | |
| margin-top: 2px; | |
| overflow-x: auto; | |
| max-width: 100%; | |
| } | |
| .cpi-right { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-end; | |
| gap: 4px; | |
| flex-shrink: 0; | |
| } | |
| .cpi-shape { | |
| font-family: var(--font-mono); | |
| font-size: 9px; | |
| font-weight: 600; | |
| color: #53ecd9; | |
| background: rgba(83, 236, 217, 0.1); | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| white-space: nowrap; | |
| } | |
| .cpi-params { | |
| font-family: var(--font-mono); | |
| font-size: 8.5px; | |
| color: var(--text-faint); | |
| } | |
| /* ========================================================================== | |
| LaTeX Mathematical Formulation Card | |
| ========================================================================== */ | |
| .latex-formula-card { | |
| margin-top: 12px; | |
| background: rgba(8, 14, 24, 0.85); | |
| border: 1px solid rgba(56, 189, 248, 0.3); | |
| border-radius: 8px; | |
| padding: 10px; | |
| } | |
| .formula-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 6px; | |
| } | |
| .formula-header span { | |
| font-size: 10px; | |
| font-weight: 700; | |
| color: #38bdf8; | |
| letter-spacing: 0.5px; | |
| } | |
| .formula-latex-body { | |
| background: rgba(0, 0, 0, 0.4); | |
| border-left: 3px solid #38bdf8; | |
| padding: 8px 12px; | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| color: #7dd3fc; | |
| line-height: 1.5; | |
| word-break: break-word; | |
| border-radius: 0 4px 4px 0; | |
| } | |
| /* ========================================================================== | |
| Architectural Transformation Card (Before vs After) | |
| ========================================================================== */ | |
| .transformation-card { | |
| margin-top: 12px; | |
| background: rgba(10, 20, 32, 0.9); | |
| border: 1px solid rgba(83, 236, 217, 0.35); | |
| border-radius: 8px; | |
| padding: 10px; | |
| } | |
| .transformation-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 8px; | |
| } | |
| .tf-title { | |
| font-size: 10px; | |
| font-weight: 700; | |
| color: #53ecd9; | |
| letter-spacing: 0.5px; | |
| } | |
| .tf-diagram { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| background: rgba(0, 0, 0, 0.4); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| border-radius: 6px; | |
| padding: 8px 10px; | |
| margin-bottom: 8px; | |
| overflow-x: auto; | |
| gap: 6px; | |
| } | |
| .tf-step { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 5px; | |
| padding: 5px 8px; | |
| min-width: 75px; | |
| flex-shrink: 0; | |
| cursor: pointer; | |
| user-select: none; | |
| transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .tf-step:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(83, 236, 217, 0.25); | |
| border-color: rgba(83, 236, 217, 0.6); | |
| } | |
| .tf-step.dense { | |
| border-color: rgba(56, 189, 248, 0.4); | |
| background: rgba(56, 189, 248, 0.08); | |
| } | |
| .tf-step.compressed { | |
| border-color: rgba(83, 236, 217, 0.5); | |
| background: rgba(83, 236, 217, 0.12); | |
| } | |
| .tf-step.step-active-glow { | |
| border-color: #53ecd9 ; | |
| background: rgba(83, 236, 217, 0.25) ; | |
| box-shadow: 0 0 16px rgba(83, 236, 217, 0.6), inset 0 0 10px rgba(83, 236, 217, 0.25) ; | |
| transform: scale(1.06); | |
| } | |
| .tf-step-name { | |
| font-size: 10px; | |
| font-weight: 700; | |
| color: #f1f5f9; | |
| } | |
| .tf-step-shape { | |
| font-family: var(--font-mono); | |
| font-size: 9px; | |
| color: #53ecd9; | |
| margin-top: 2px; | |
| } | |
| .tf-step-param { | |
| font-size: 8px; | |
| color: var(--text-faint); | |
| font-family: var(--font-mono); | |
| } | |
| .tf-arrow { | |
| color: #94a3b8; | |
| font-size: 11px; | |
| font-weight: 700; | |
| flex-shrink: 0; | |
| } | |
| .tf-comparison-table { | |
| width: 100%; | |
| font-size: 10px; | |
| border-collapse: collapse; | |
| margin-top: 6px; | |
| } | |
| .tf-comparison-table th { | |
| text-align: left; | |
| color: var(--text-muted); | |
| font-size: 8.5px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.08); | |
| padding: 3px 6px; | |
| } | |
| .tf-comparison-table td { | |
| padding: 3px 6px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.03); | |
| color: #cbd5e1; | |
| font-family: var(--font-mono); | |
| font-size: 9.5px; | |
| } | |
| .tf-comparison-table td.highlight { | |
| color: #53ecd9; | |
| font-weight: 700; | |
| } | |
| .tf-explanation { | |
| font-size: 10px; | |
| line-height: 1.45; | |
| color: #94a3b8; | |
| background: rgba(0, 0, 0, 0.25); | |
| border-radius: 4px; | |
| padding: 6px 8px; | |
| margin-top: 6px; | |
| } | |
| /* ========================================================================== | |
| Responsive Breakpoints (Attention Lab SOTA) | |
| ========================================================================== */ | |
| @media (max-width: 1100px) { | |
| .detail-card { width: 240px; padding: 14px; } | |
| .compare-card { width: 210px; } | |
| } | |
| @media (max-width: 900px) { | |
| .mechanism-nav { top: 68px; width: calc(100vw - 24px); } | |
| .mechanism-button b { font-size: 11px; } | |
| .mechanism-button small { display: none; } | |
| .detail-card { display: none; } | |
| .compare-card { display: none; } | |
| .legend { display: none ; } | |
| } | |
| @media (max-width: 700px) { | |
| .topbar { min-height: 70px; padding: 12px 14px; gap: 8px; } | |
| h1 { font-size: 18px; } | |
| .eyebrow { font-size: 7px; } | |
| .status { display: none; } | |
| .view-toggle button { min-width: 28px; height: 26px; padding: 0 6px; font-size: 8px; } | |
| .control-dock { width: calc(100vw - 18px); padding: 7px; } | |
| } | |
| /* Pipeline Connectors */ | |
| .component-pipe-item { | |
| margin-left: 15px; | |
| } | |
| .component-pipe-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -27px; | |
| top: 50%; | |
| width: 12px; | |
| height: 12px; | |
| background: var(--bg-surface); | |
| border: 2px solid var(--cpi-color, #2dd4bf); | |
| border-radius: 50%; | |
| transform: translateY(-50%); | |
| z-index: 3; | |
| transition: all 0.3s ease; | |
| } | |
| .component-pipe-item.active-highlight::before { | |
| background: var(--cpi-color, #53ecd9); | |
| box-shadow: 0 0 10px var(--cpi-color, #53ecd9); | |
| transform: translateY(-50%) scale(1.3); | |
| } | |
| .component-pipe-item::after { | |
| content: ''; | |
| position: absolute; | |
| left: -21px; | |
| top: 50%; | |
| width: 21px; | |
| height: 2px; | |
| background: rgba(255, 255, 255, 0.2); | |
| z-index: 1; | |
| } | |
| .component-pipe-item:hover::after { | |
| background: var(--cpi-color, #53ecd9); | |
| } | |
| \n | |
| /* Parallel Pipeline Grouping */ | |
| .pipeline-parallel-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| margin-left: 20px; /* Indent branches */ | |
| padding-left: 15px; | |
| position: relative; | |
| border-left: 2px dashed rgba(83, 236, 217, 0.4); | |
| margin-top: 4px; | |
| margin-bottom: 4px; | |
| } | |
| .pipeline-parallel-group::before { | |
| content: 'Branching Dataflow'; | |
| position: absolute; | |
| top: -12px; | |
| left: 4px; | |
| font-size: 8px; | |
| color: var(--amber); | |
| letter-spacing: 0.5px; | |
| background: var(--bg-surface); | |
| padding: 0 4px; | |
| } | |
| .pipeline-parallel-group .component-pipe-item { | |
| margin-left: 0; | |
| } | |
| .pipeline-parallel-group .component-pipe-item::after { | |
| left: -17px; | |
| width: 17px; | |
| } | |
| .pipeline-parallel-group .component-pipe-item::before { | |
| left: -23px; | |
| } | |
| /* ============================ | |
| COMPREHENSIVE UI ENHANCEMENTS | |
| ============================ */ | |
| /* Keyboard shortcut overlay */ | |
| #shortcut-hint { | |
| position: fixed; | |
| bottom: 80px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: rgba(6, 10, 18, 0.92); | |
| border: 1px solid rgba(83, 236, 217, 0.3); | |
| border-radius: 8px; | |
| padding: 10px 16px; | |
| display: flex; | |
| flex-direction: row; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| z-index: 9999; | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| color: var(--text-faint); | |
| max-width: 500px; | |
| } | |
| #shortcut-hint.visible { | |
| opacity: 1; | |
| } | |
| .shortcut-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| white-space: nowrap; | |
| } | |
| kbd { | |
| display: inline-block; | |
| padding: 1px 5px; | |
| border: 1px solid rgba(255,255,255,0.25); | |
| border-radius: 3px; | |
| font-size: 10px; | |
| font-family: var(--font-mono); | |
| background: rgba(255,255,255,0.08); | |
| color: #e2e8f0; | |
| line-height: 1.5; | |
| } | |
| /* Active step highlight in lifecycle */ | |
| .lifecycle-step-item.active-step { | |
| border-left: 3px solid var(--col-svd) ; | |
| background: rgba(83, 236, 217, 0.06) ; | |
| } | |
| /* Component pipeline item highlighted state */ | |
| .component-pipe-item.cpi-highlighted { | |
| border: 1px solid rgba(83, 236, 217, 0.8) ; | |
| box-shadow: 0 0 12px rgba(83, 236, 217, 0.4) ; | |
| transform: scale(1.01); | |
| } | |
| /* Formula copy button */ | |
| .formula-copy-btn { | |
| display: block; | |
| margin: 8px auto 0; | |
| padding: 4px 12px; | |
| font-size: 10px; | |
| font-family: var(--font-mono); | |
| background: rgba(83, 236, 217, 0.1); | |
| border: 1px solid rgba(83, 236, 217, 0.35); | |
| color: var(--col-svd); | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| letter-spacing: 0.5px; | |
| } | |
| .formula-copy-btn:hover { | |
| background: rgba(83, 236, 217, 0.2); | |
| border-color: var(--col-svd); | |
| } | |
| /* Enhanced control dock */ | |
| .control-dock { | |
| backdrop-filter: blur(16px) saturate(1.5) ; | |
| border-top: 1px solid rgba(83, 236, 217, 0.25) ; | |
| } | |
| /* Play button paused state */ | |
| #btn-play-pause.paused { | |
| background: rgba(244, 63, 94, 0.15); | |
| border-color: rgba(244, 63, 94, 0.5); | |
| color: #f87171; | |
| } | |
| /* Model matrix cards — active glow */ | |
| .model-matrix-card.active { | |
| border: 1px solid rgba(83, 236, 217, 0.8) ; | |
| box-shadow: 0 0 16px rgba(83, 236, 217, 0.25) ; | |
| background: rgba(83, 236, 217, 0.06) ; | |
| } | |
| /* Benchmark pass/fail badges */ | |
| .mmc-bench-badge.status-pass { | |
| background: rgba(16, 185, 129, 0.25); | |
| color: #34d399; | |
| border: 1px solid rgba(16, 185, 129, 0.5); | |
| } | |
| .mmc-bench-badge.status-pass-low { | |
| background: rgba(245, 158, 11, 0.2); | |
| color: #fbbf24; | |
| border: 1px solid rgba(245, 158, 11, 0.4); | |
| } | |
| .mmc-bench-badge.status-skip { | |
| background: rgba(100, 116, 139, 0.2); | |
| color: #94a3b8; | |
| border: 1px solid rgba(100, 116, 139, 0.3); | |
| } | |
| /* Lifecycle step clickable glow */ | |
| .lifecycle-step-item { | |
| cursor: pointer ; | |
| transition: border-left-color 0.2s, background 0.2s, transform 0.15s ; | |
| } | |
| .lifecycle-step-item:hover { | |
| transform: translateX(2px); | |
| background: rgba(83, 236, 217, 0.04) ; | |
| } | |
| /* Tooltip for shortcut key display */ | |
| [title]:not(canvas):not([title=""]) { | |
| cursor: help; | |
| } | |
| /* Permalink indicator */ | |
| .permalink-copied { | |
| position: fixed; | |
| top: 60px; | |
| right: 20px; | |
| background: rgba(16, 185, 129, 0.9); | |
| color: white; | |
| padding: 6px 14px; | |
| border-radius: 6px; | |
| font-size: 12px; | |
| font-family: var(--font-mono); | |
| z-index: 9999; | |
| animation: fadeInOut 2s forwards; | |
| } | |
| @keyframes fadeInOut { | |
| 0% { opacity: 0; transform: translateY(-10px); } | |
| 15% { opacity: 1; transform: translateY(0); } | |
| 80% { opacity: 1; } | |
| 100% { opacity: 0; } | |
| } | |
| /* Hud active module badge */ | |
| #hud-active-module-badge { | |
| font-size: 9px; | |
| letter-spacing: 0.5px; | |
| opacity: 0; | |
| transition: opacity 0.4s; | |
| max-width: 140px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| /* Pipeline parallel branching — improved */ | |
| .pipeline-parallel-group { | |
| border-left: 2px dashed rgba(83, 236, 217, 0.5) ; | |
| padding: 4px 4px 4px 12px ; | |
| margin: 4px 0 4px 12px ; | |
| position: relative; | |
| background: rgba(83, 236, 217, 0.03); | |
| border-radius: 0 6px 6px 0; | |
| } | |
| .pipeline-parallel-group::before { | |
| content: '⟨ PARALLEL BRANCH ⟩'; | |
| position: absolute; | |
| top: -10px; | |
| left: 8px; | |
| font-size: 7px; | |
| color: var(--amber); | |
| letter-spacing: 1px; | |
| background: var(--bg-surface); | |
| padding: 0 4px; | |
| } | |
| /* Lifecycle math display */ | |
| .lsi-math { | |
| font-size: 10px; | |
| margin-top: 4px; | |
| padding: 4px 6px; | |
| background: rgba(255, 255, 255, 0.03); | |
| border-radius: 4px; | |
| overflow-x: auto; | |
| max-width: 100%; | |
| } | |
| /* ─── MEGA ENHANCEMENT CSS ──────────────────────────────────────────────── */ | |
| /* Spark bar charts in matrix cards */ | |
| .mmc-spark-section { | |
| margin-top: 6px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3px; | |
| } | |
| .mmc-spark-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| font-size: 9px; | |
| font-family: var(--font-mono); | |
| } | |
| .mmc-spark-label { | |
| width: 28px; | |
| color: var(--text-faint); | |
| flex-shrink: 0; | |
| } | |
| .mmc-spark-bar-bg { | |
| flex: 1; | |
| height: 5px; | |
| background: rgba(255,255,255,0.07); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .mmc-spark-bar { | |
| height: 100%; | |
| border-radius: 3px; | |
| transition: width 0.6s ease; | |
| } | |
| .mmc-spark-val { | |
| width: 38px; | |
| text-align: right; | |
| color: var(--text-muted); | |
| flex-shrink: 0; | |
| } | |
| /* Auto-tour label */ | |
| #tour-step-label { | |
| position: fixed; | |
| bottom: 95px; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(8px); | |
| background: rgba(10, 16, 28, 0.88); | |
| backdrop-filter: blur(14px); | |
| -webkit-backdrop-filter: blur(14px); | |
| border: 1px solid rgba(83, 236, 217, 0.45); | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(83, 236, 217, 0.15); | |
| color: #e2e8f0; | |
| font-family: var(--font-sans); | |
| font-size: 13px; | |
| letter-spacing: 0.4px; | |
| padding: 10px 24px; | |
| border-radius: 24px; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); | |
| z-index: 999; | |
| text-align: center; | |
| max-width: 600px; | |
| } | |
| #tour-step-label.show { | |
| opacity: 1; | |
| pointer-events: auto; | |
| transform: translateX(-50%) translateY(0); | |
| } | |
| #tour-step-label strong { | |
| display: block; | |
| color: #53ecd9; | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| letter-spacing: 1.2px; | |
| text-transform: uppercase; | |
| margin-bottom: 3px; | |
| } | |
| #tour-step-label .tour-desc { | |
| color: #94a3b8; | |
| font-size: 12px; | |
| line-height: 1.4; | |
| } | |
| /* FPS Counter */ | |
| #fps-counter { | |
| position: fixed; | |
| top: 8px; | |
| left: 8px; | |
| font-family: var(--font-mono); | |
| font-size: 9px; | |
| letter-spacing: 0.5px; | |
| color: #34d399; | |
| opacity: 0.6; | |
| z-index: 9998; | |
| pointer-events: none; | |
| transition: color 0.5s; | |
| } | |
| /* Color Legend */ | |
| #color-legend { | |
| position: fixed; | |
| bottom: 74px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: rgba(6, 10, 18, 0.96); | |
| border: 1px solid rgba(83, 236, 217, 0.3); | |
| border-radius: 12px; | |
| padding: 14px 16px; | |
| z-index: 9997; | |
| display: none; | |
| min-width: 260px; | |
| box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65), 0 0 20px rgba(83, 236, 217, 0.1); | |
| backdrop-filter: blur(20px); | |
| } | |
| .legend-title { | |
| font-size: 10px; | |
| font-family: var(--font-mono); | |
| color: #94a3b8; | |
| letter-spacing: 0.8px; | |
| margin-bottom: 8px; | |
| text-transform: uppercase; | |
| } | |
| .legend-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 3px 0; | |
| } | |
| .legend-swatch { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 2px; | |
| flex-shrink: 0; | |
| } | |
| .legend-info { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .legend-label { | |
| font-size: 10px; | |
| color: #e2e8f0; | |
| font-family: var(--font-mono); | |
| } | |
| .legend-desc { | |
| font-size: 9px; | |
| color: var(--text-faint); | |
| } | |
| /* Parameter breakdown table */ | |
| #param-breakdown-table { | |
| margin-top: 12px; | |
| border-top: 1px solid rgba(255,255,255,0.07); | |
| padding-top: 10px; | |
| } | |
| .pbt-title { | |
| font-size: 10px; | |
| font-family: var(--font-mono); | |
| color: #94a3b8; | |
| letter-spacing: 0.8px; | |
| margin-bottom: 8px; | |
| text-transform: uppercase; | |
| } | |
| .pbt-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 9px; | |
| font-family: var(--font-mono); | |
| } | |
| .pbt-table th { | |
| color: var(--text-faint); | |
| text-align: left; | |
| padding: 3px 4px; | |
| border-bottom: 1px solid rgba(255,255,255,0.08); | |
| font-weight: 500; | |
| letter-spacing: 0.3px; | |
| } | |
| .pbt-table td { | |
| padding: 3px 4px; | |
| color: #cbd5e1; | |
| border-bottom: 1px solid rgba(255,255,255,0.04); | |
| vertical-align: middle; | |
| } | |
| .pbt-table tr:hover td { background: rgba(255,255,255,0.03); } | |
| .pbt-swatch { | |
| display: inline-block; | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 1px; | |
| margin-right: 4px; | |
| vertical-align: middle; | |
| } | |
| .pbt-mono { font-family: var(--font-mono); color: #53ecd9; } | |
| .pbt-role { color: var(--text-faint); font-size: 8px; } | |
| /* Comparison pin section */ | |
| #comparison-pin-section { | |
| margin-top: 12px; | |
| border-top: 1px solid rgba(245, 158, 11, 0.25); | |
| padding-top: 10px; | |
| display: none; | |
| } | |
| .cp-win { | |
| color: #34d399 ; | |
| font-weight: 600; | |
| } | |
| /* Auto-tour button active */ | |
| #btn-auto-tour.active { | |
| background: rgba(83,236,217,0.15); | |
| border-color: rgba(83,236,217,0.5); | |
| color: #53ecd9; | |
| } | |
| /* Lifecycle step ring animation during tour */ | |
| .lifecycle-step-item.active-step .lsi-num { | |
| animation: ring-pulse 1.2s ease-in-out infinite; | |
| } | |
| @keyframes ring-pulse { | |
| 0%,100% { box-shadow: 0 0 0 0 rgba(83,236,217,0); } | |
| 50% { box-shadow: 0 0 0 5px rgba(83,236,217,0.4); } | |
| } | |
| /* Modal Controls Subrow & Sort Buttons */ | |
| .modal-controls-subrow { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| } | |
| .modal-sort-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| background: #050a12; | |
| padding: 3px 8px; | |
| border-radius: 20px; | |
| border: 1px solid var(--panel-border); | |
| flex-shrink: 0; | |
| } | |
| .sort-label { | |
| font-size: 10px; | |
| font-family: var(--font-mono); | |
| color: var(--text-faint); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-right: 2px; | |
| } | |
| .sort-btn { | |
| background: transparent; | |
| border: 1px solid transparent; | |
| color: var(--text-muted); | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| padding: 3px 8px; | |
| border-radius: 12px; | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| white-space: nowrap; | |
| } | |
| .sort-btn:hover { | |
| color: #fff; | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .sort-btn.active { | |
| background: #0284c7; | |
| color: #fff; | |
| font-weight: 600; | |
| border-color: #38bdf8; | |
| } | |
| /* Card Accuracy Badge & 4-Model Quick Breakdown */ | |
| .card-acc-badge { | |
| font-family: var(--font-mono); | |
| font-size: 9px; | |
| font-weight: 600; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| border: 1px solid transparent; | |
| letter-spacing: 0.3px; | |
| } | |
| .acc-high { | |
| background: rgba(16, 185, 129, 0.15); | |
| color: #34d399; | |
| border-color: rgba(16, 185, 129, 0.35); | |
| } | |
| .acc-mid { | |
| background: rgba(245, 158, 11, 0.15); | |
| color: #fbbf24; | |
| border-color: rgba(245, 158, 11, 0.35); | |
| } | |
| .acc-low { | |
| background: rgba(244, 63, 94, 0.15); | |
| color: #f87171; | |
| border-color: rgba(244, 63, 94, 0.35); | |
| } | |
| .acc-none { | |
| background: rgba(100, 116, 139, 0.15); | |
| color: #94a3b8; | |
| border-color: rgba(100, 116, 139, 0.25); | |
| } | |
| .card-benchmark-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-top: 6px; | |
| padding: 4px 6px; | |
| background: rgba(0, 0, 0, 0.25); | |
| border-radius: 4px; | |
| border: 1px solid rgba(255, 255, 255, 0.04); | |
| } | |
| .card-model-accs { | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .cma-chip { | |
| font-size: 8px; | |
| font-family: var(--font-mono); | |
| padding: 1px 4px; | |
| border-radius: 3px; | |
| background: rgba(255, 255, 255, 0.04); | |
| color: var(--text-faint); | |
| } | |
| .cma-chip b { | |
| color: #e2e8f0; | |
| } | |
| /* Document Reader Modal & Markdown Viewer */ | |
| .doc-reader-container { | |
| max-width: 960px; | |
| max-height: 88vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .doc-reader-body { | |
| overflow-y: auto; | |
| padding: 24px 32px; | |
| color: #cbd5e1; | |
| font-size: 13.5px; | |
| line-height: 1.75; | |
| background: rgba(4, 9, 17, 0.75); | |
| border-radius: 8px; | |
| margin-top: 12px; | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .doc-reader-body h1 { | |
| font-size: 22px; | |
| color: #f8fafc; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| padding-bottom: 10px; | |
| margin-top: 8px; | |
| margin-bottom: 16px; | |
| } | |
| .doc-reader-body h2 { | |
| font-size: 17px; | |
| color: #53ecd9; | |
| border-bottom: 1px solid rgba(83, 236, 217, 0.2); | |
| padding-bottom: 6px; | |
| margin-top: 24px; | |
| margin-bottom: 12px; | |
| } | |
| .doc-reader-body h3 { | |
| font-size: 14.5px; | |
| color: #7dd3fc; | |
| margin-top: 18px; | |
| margin-bottom: 8px; | |
| } | |
| .doc-reader-body p { | |
| margin-bottom: 14px; | |
| } | |
| .doc-reader-body code { | |
| background: rgba(15, 23, 42, 0.85); | |
| color: #38bdf8; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| border: 1px solid rgba(56, 189, 248, 0.2); | |
| } | |
| .doc-reader-body pre { | |
| background: #060b13; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 6px; | |
| padding: 14px 18px; | |
| overflow-x: auto; | |
| margin: 16px 0; | |
| } | |
| .doc-reader-body pre code { | |
| background: transparent; | |
| padding: 0; | |
| border: none; | |
| color: #e2e8f0; | |
| font-size: 12px; | |
| } | |
| .doc-reader-body table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 16px 0; | |
| font-size: 12px; | |
| } | |
| .doc-reader-body table th { | |
| background: rgba(15, 23, 42, 0.9); | |
| color: #94a3b8; | |
| padding: 8px 12px; | |
| text-align: left; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| .doc-reader-body table td { | |
| padding: 8px 12px; | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .doc-reader-body blockquote { | |
| border-left: 3px solid #53ecd9; | |
| padding-left: 14px; | |
| color: #94a3b8; | |
| margin: 14px 0; | |
| font-style: italic; | |
| } | |
| .doc-reader-body hr { | |
| border: none; | |
| border-top: 1px solid rgba(255, 255, 255, 0.08); | |
| margin: 24px 0; | |
| } | |
| /* ========================================================================== | |
| Attention Inspector & Educational Deep-Dive Enhancements | |
| ========================================================================== */ | |
| .attn-comp-step { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 8px; | |
| background: rgba(6, 13, 24, 0.65); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| border-radius: 6px; | |
| padding: 7px 10px; | |
| transition: all 0.15s ease; | |
| } | |
| .attn-comp-step:hover { | |
| background: rgba(14, 28, 44, 0.85); | |
| border-color: rgba(56, 189, 248, 0.35); | |
| transform: translateX(2px); | |
| } | |
| .attn-step-idx { | |
| font-family: var(--font-mono); | |
| font-size: 9px; | |
| font-weight: 700; | |
| color: #38bdf8; | |
| background: rgba(56, 189, 248, 0.12); | |
| border: 1px solid rgba(56, 189, 248, 0.25); | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| flex-shrink: 0; | |
| margin-top: 1px; | |
| } | |
| .attn-step-body { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .attn-step-title { | |
| font-size: 11px; | |
| color: #f1f5f9; | |
| line-height: 1.35; | |
| } | |
| .attn-step-title strong { | |
| color: #e2e8f0; | |
| } | |
| .attn-op-math { | |
| background: rgba(15, 23, 42, 0.7); | |
| color: #38bdf8; | |
| padding: 1px 5px; | |
| border-radius: 3px; | |
| font-size: 10px; | |
| } | |
| .attn-step-desc { | |
| font-size: 10px; | |
| color: var(--text-muted); | |
| margin-top: 3px; | |
| line-height: 1.4; | |
| } | |
| /* Attention Probability Heatmap */ | |
| .attn-heatmap-grid { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .attn-hm-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .attn-hm-label { | |
| width: 48px; | |
| text-align: right; | |
| font-size: 9px; | |
| font-family: var(--font-mono); | |
| color: #94a3b8; | |
| flex-shrink: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .attn-hm-cells { | |
| display: flex; | |
| gap: 4px; | |
| flex: 1; | |
| } | |
| .attn-hm-cell { | |
| flex: 1; | |
| text-align: center; | |
| font-size: 9px; | |
| font-family: var(--font-mono); | |
| font-weight: 600; | |
| padding: 5px 0; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: transform 0.15s ease, box-shadow 0.15s ease; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); | |
| user-select: none; | |
| } | |
| .attn-hm-cell:hover { | |
| transform: scale(1.15); | |
| z-index: 5; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); | |
| } | |
| /* ========================================================================== | |
| Presentation Mode (5-Minute Demo Minimalistic Cinema) | |
| ========================================================================== */ | |
| body.present-mode #top-bar { | |
| opacity: 0.15; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| } | |
| body.present-mode #top-bar:hover { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| body.present-mode #catalog-modal, | |
| body.present-mode #filter-chips-bar { | |
| opacity: 0.2; | |
| pointer-events: none; | |
| } | |
| body.present-mode #inspector-panel { | |
| background: rgba(6, 12, 22, 0.72) ; | |
| backdrop-filter: blur(20px) ; | |
| border-color: rgba(56, 189, 248, 0.25) ; | |
| box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6) ; | |
| } | |
| .present-banner { | |
| animation: presentSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| @keyframes presentSlideDown { | |
| from { | |
| opacity: 0; | |
| transform: translate(-50%, -20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translate(-50%, 0); | |
| } | |
| } | |
| .present-progress-track { | |
| animation: presentSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| @keyframes presentSlideUp { | |
| from { | |
| opacity: 0; | |
| transform: translate(-50%, 20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translate(-50%, 0); | |
| } | |
| } | |
| .present-dot:hover { | |
| transform: scale(1.35) ; | |
| box-shadow: 0 0 8px var(--cyan); | |
| } | |
| /* ========================================================================== | |
| Learn Modal & Educational Atlas | |
| ========================================================================== */ | |
| .learn-topic-btn { | |
| outline: none; | |
| } | |
| .learn-topic-btn:hover { | |
| border-color: rgba(56, 189, 248, 0.4) ; | |
| background: rgba(56, 189, 248, 0.08) ; | |
| } | |
| .learn-topic-btn.active { | |
| box-shadow: 0 0 12px rgba(56, 189, 248, 0.2) inset; | |
| } | |
| /* ========================================================================== | |
| Model Matrix Dashboard Modal | |
| ========================================================================== */ | |
| .mmd-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 11px; | |
| font-family: var(--font-mono); | |
| } | |
| .mmd-th { | |
| background: rgba(15, 23, 42, 0.95); | |
| color: #94a3b8; | |
| padding: 10px 12px; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| text-align: left; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .mmd-td { | |
| padding: 9px 12px; | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| color: #e2e8f0; | |
| } | |
| .mmd-row { | |
| transition: background 0.15s ease; | |
| } | |
| .mmd-row:hover { | |
| background: rgba(56, 189, 248, 0.08); | |
| } | |
Xet Storage Details
- Size:
- 71.5 kB
- Xet hash:
- 8333a331171064f9e35e66cbfa383ce9b01ca383b8b0dd1e85aedbf228db157b
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.