Spaces:
Sleeping
Sleeping
| .card { | |
| --surface: rgba(10, 10, 26, 0.45); | |
| --cyan: #00f2fe; | |
| --cyan-dim: rgba(0, 242, 254, 0.08); | |
| --cyan-glow: rgba(0, 242, 254, 0.35); | |
| --green: #34d399; | |
| --green-dim: rgba(52, 211, 153, 0.08); | |
| --green-glow: rgba(52, 211, 153, 0.35); | |
| --purple: #c084fc; | |
| --purple-dim: rgba(192, 132, 252, 0.08); | |
| --purple-glow: rgba(192, 132, 252, 0.35); | |
| --amber: #fbbf24; | |
| --amber-dim: rgba(251, 191, 36, 0.06); | |
| --gray-dim: rgba(255, 255, 255, 0.02); | |
| --border-faint: var(--border-glass); | |
| --text: var(--text-primary); | |
| --text-muted: var(--text-secondary); | |
| --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; | |
| --font-head: inherit; | |
| position: relative; | |
| z-index: 1; | |
| width: 100%; | |
| max-width: 670px; | |
| background: var(--surface); | |
| border: 1px solid var(--border-faint); | |
| border-radius: 24px; | |
| padding: 40px 40px 44px; | |
| backdrop-filter: blur(20px) saturate(160%); | |
| -webkit-backdrop-filter: blur(20px) saturate(160%); | |
| box-shadow: | |
| 0 0 0 1px rgba(52, 211, 153, 0.06), | |
| 0 24px 80px rgba(0, 0, 0, 0.45), | |
| inset 0 1px 1px rgba(255, 255, 255, 0.08); | |
| margin: 2.5rem auto; | |
| transition: box-shadow 0.3s ease; | |
| } | |
| .card:hover { | |
| box-shadow: | |
| 0 0 0 1px rgba(52, 211, 153, 0.1), | |
| 0 25px 90px rgba(0, 0, 0, 0.55), | |
| inset 0 1px 1px rgba(255, 255, 255, 0.12); | |
| } | |
| .card::before, .card::after { | |
| content: ''; | |
| position: absolute; | |
| width: 24px; height: 24px; | |
| border-color: var(--green); | |
| border-style: solid; | |
| } | |
| .card::before { top:-1px; left:-1px; border-width:2px 0 0 2px; border-radius:24px 0 0 0; } | |
| .card::after { bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-radius:0 0 24px 0; } | |
| @keyframes scanline { | |
| 0% { top: 0; opacity: 0.4; } | |
| 100% { top: 100%; opacity: 0; } | |
| } | |
| .cardScanline { | |
| position: absolute; inset: 0; | |
| overflow: hidden; border-radius: 24px; pointer-events: none; | |
| } | |
| .cardScanline::after { | |
| content: ''; | |
| position: absolute; left:0; right:0; height:80px; | |
| background: linear-gradient(to bottom, transparent, rgba(52, 211, 153, 0.02), transparent); | |
| animation: scanline 6s linear infinite; | |
| } | |
| .header { text-align: center; margin-bottom: 32px; } | |
| .title { | |
| font-family: var(--font-head); | |
| font-size: 26px; font-weight: 800; | |
| letter-spacing: 0.18em; text-transform: uppercase; | |
| color: var(--green); | |
| text-shadow: 0 0 15px var(--green-glow); | |
| } | |
| .subtitle { | |
| font-family: var(--font-mono); | |
| font-size: 11px; color: var(--text-muted); | |
| letter-spacing: 0.12em; margin-top: 8px; | |
| opacity: 0.8; | |
| } | |
| .divider { | |
| width: 100%; height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--green-glow), transparent); | |
| margin-bottom: 28px; | |
| } | |
| /* ── pipeline ── */ | |
| .pipeline { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0; | |
| } | |
| /* ── generic layer ── */ | |
| .layer { | |
| width: 100%; | |
| border-radius: 12px; | |
| padding: 12px 18px; | |
| border: 1px solid transparent; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| position: relative; | |
| } | |
| .layer:hover { transform: scale(1.012) translateX(-2px); } | |
| .layerName { | |
| font-family: var(--font-head); | |
| font-weight: 700; font-size: 14px; | |
| letter-spacing: 0.08em; text-transform: uppercase; | |
| } | |
| .layerDim { | |
| font-family: var(--font-mono); | |
| font-size: 10px; margin-top: 4px; letter-spacing: 0.04em; | |
| opacity: 0.85; | |
| } | |
| /* input */ | |
| .lInput { | |
| background: var(--cyan-dim); | |
| border-color: rgba(0, 242, 254, 0.3); | |
| box-shadow: 0 0 12px rgba(0, 242, 254, 0.05); | |
| } | |
| .lInput .layerName { color: var(--cyan); text-shadow: 0 0 10px var(--cyan-glow); } | |
| .lInput .layerDim { color: rgba(0, 242, 254, 0.7); } | |
| .lInput:hover { box-shadow: 0 0 20px rgba(0, 242, 254, 0.15); } | |
| /* convolutional */ | |
| .lConv { | |
| background: var(--green-dim); | |
| border-color: rgba(52, 211, 153, 0.3); | |
| border-left: 3px solid var(--green); | |
| border-radius: 0 12px 12px 0; | |
| box-shadow: 0 0 12px rgba(52, 211, 153, 0.05); | |
| } | |
| .lConv .layerName { color: var(--green); text-shadow: 0 0 10px var(--green-glow); } | |
| .lConv .layerDim { color: rgba(52, 211, 153, 0.7); } | |
| .lConv:hover { box-shadow: -2px 0 16px rgba(52, 211, 153, 0.15); } | |
| /* stage group header */ | |
| .stageGroup { | |
| width: 100%; | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin-top: 8px; | |
| } | |
| .stageLabel { | |
| font-family: var(--font-mono); | |
| font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; | |
| color: var(--green); | |
| opacity: 0.7; | |
| margin-bottom: 10px; | |
| align-self: flex-start; | |
| } | |
| /* individual bottleneck block */ | |
| .lBlock { | |
| background: var(--purple-dim); | |
| border-color: rgba(192, 132, 252, 0.25); | |
| box-shadow: 0 0 8px rgba(192, 132, 252, 0.03); | |
| } | |
| .lBlock .layerName { color: var(--purple); text-shadow: 0 0 8px var(--purple-glow); } | |
| .lBlock .layerDim { color: rgba(192, 132, 252, 0.7); } | |
| .lBlock:hover { box-shadow: 0 0 16px rgba(192, 132, 252, 0.15); } | |
| /* pooling / flatten */ | |
| .lPool { | |
| background: var(--gray-dim); | |
| border-color: rgba(255, 255, 255, 0.08); | |
| border-left: 3px solid var(--green); | |
| border-radius: 0 12px 12px 0; | |
| } | |
| .lPool .layerName { color: var(--text); } | |
| .lPool .layerDim { color: var(--text-muted); } | |
| .lPool:hover { box-shadow: -2px 0 12px rgba(52, 211, 153, 0.12); } | |
| .lFlatten { | |
| background: var(--amber-dim); | |
| border-color: rgba(251, 191, 36, 0.25); | |
| border-left: 3px solid var(--amber); | |
| border-radius: 0 12px 12px 0; | |
| } | |
| .lFlatten .layerName { color: var(--amber); } | |
| .lFlatten .layerDim { color: rgba(251, 191, 36, 0.7); } | |
| /* output */ | |
| .lOutput { | |
| background: linear-gradient(135deg, rgba(192, 132, 252, 0.12), rgba(52, 211, 153, 0.06)); | |
| border-color: rgba(192, 132, 252, 0.4); | |
| box-shadow: 0 0 16px rgba(192, 132, 252, 0.1), inset 0 1px 0 rgba(192, 132, 252, 0.1); | |
| } | |
| .lOutput .layerName { color: var(--purple); text-shadow: 0 0 12px var(--purple-glow); } | |
| .lOutput .layerDim { color: rgba(192, 132, 252, 0.75); } | |
| .lOutput:hover { box-shadow: 0 0 24px rgba(192, 132, 252, 0.2); } | |
| /* ── connector (main flow arrow) ── */ | |
| .conn { | |
| display: flex; align-items: center; justify-content: center; | |
| height: 24px; width: 100%; position: relative; | |
| } | |
| .connLine { | |
| width: 1.5px; height: 100%; | |
| background: linear-gradient(to bottom, var(--green), var(--purple)); | |
| position: relative; | |
| } | |
| .connLine::after { | |
| content: ''; | |
| position: absolute; bottom: -1px; left: 50%; | |
| transform: translateX(-50%); | |
| border-left: 4px solid transparent; | |
| border-right: 4px solid transparent; | |
| border-top: 6px solid var(--purple); | |
| filter: drop-shadow(0 0 2px var(--purple-glow)); | |
| } | |
| .connSm { height: 16px; } | |
| /* ── KD badge ── */ | |
| .kdBadge { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-top: 24px; | |
| padding: 12px 20px; | |
| background: linear-gradient(135deg, rgba(0, 242, 254, 0.06), rgba(52, 211, 153, 0.04)); | |
| border: 1px solid rgba(0, 242, 254, 0.2); | |
| border-radius: 12px; | |
| } | |
| .kdBadgeIcon { | |
| font-size: 20px; | |
| color: var(--cyan); | |
| flex-shrink: 0; | |
| } | |
| .kdBadgeText { | |
| font-family: var(--font-mono); | |
| font-size: 10.5px; | |
| color: var(--text-muted); | |
| line-height: 1.5; | |
| } | |
| /* ── legend ── */ | |
| .legend { | |
| display: flex; gap: 20px; | |
| justify-content: center; | |
| margin-top: 28px; | |
| flex-wrap: wrap; | |
| border-top: 1px solid rgba(255, 255, 255, 0.05); | |
| padding-top: 20px; | |
| } | |
| .legendItem { | |
| display: flex; align-items: center; gap: 8px; | |
| font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); | |
| } | |
| .legDot { width:10px; height:10px; border-radius:3px; flex-shrink:0; } | |
| .legCyan { background:var(--cyan); box-shadow:0 0 6px var(--cyan-glow); } | |
| .legGreen { background:var(--green); box-shadow:0 0 6px var(--green-glow); } | |
| .legPurple { background:var(--purple); box-shadow:0 0 6px var(--purple-glow); } | |
| .legAmber { background:var(--amber); box-shadow:0 0 6px rgba(251, 191, 36, 0.3); } | |
| /* ── entrance animations ── */ | |
| @keyframes fadeUp { | |
| from { opacity:0; transform:translateY(10px); } | |
| to { opacity:1; transform:translateY(0); } | |
| } | |
| .layer, .stageGroup { animation: fadeUp 0.4s ease both; } | |
| @media (max-width: 600px) { | |
| .card { | |
| padding: 28px 24px; | |
| border-radius: 16px; | |
| } | |
| .card::before { border-radius: 16px 0 0 0; } | |
| .card::after { border-radius: 0 0 16px 0; } | |
| .title { | |
| font-size: 20px; | |
| } | |
| .layerName { | |
| font-size: 12px; | |
| } | |
| .layerDim { | |
| font-size: 9px; | |
| } | |
| } | |